ref(stories): fix import errors

Author: natemoo-re

static/app/components/core/button/buttonBar.mdx

@@ -13,11 +13,12 @@ resources:
 
 import {Fragment, useState} from 'react';
 
-import {Button} from 'sentry/components/core/button';
-import {ButtonBar} from 'sentry/components/core/button/buttonBar';
+import {Button} from '@sentry/scraps/button';
+import {ButtonBar} from '@sentry/scraps/button/buttonBar';
+
 import * as Storybook from 'sentry/stories';
 
-import documentation from '!!type-loader!@sentry/scraps/buttonBar';
+import documentation from '!!type-loader!@sentry/scraps/button/buttonBar';
 
 export {documentation};
 

static/app/components/core/compactSelect/composite.mdx

@@ -13,12 +13,13 @@ resources:
 
 import {useState} from 'react';
 
-import {CompositeSelect} from 'sentry/components/core/compactSelect/composite';
-import {SelectTrigger} from 'sentry/components/core/compactSelect/trigger';
+import {CompositeSelect} from '@sentry/scraps/compactSelect/composite';
+import {SelectTrigger} from '@sentry/scraps/compactSelect/trigger';
+
 import {IconSentry} from 'sentry/icons';
 import * as Storybook from 'sentry/stories';
 
-import documentation from '!!type-loader!@sentry/scraps/composite';
+import documentation from '!!type-loader!@sentry/scraps/compactSelect/composite';
 
 export {documentation};
 

static/app/components/core/input/inputGroup.mdx

@@ -1,7 +1,7 @@
 ---
 title: InputGroup
 description: A compound component for creating inputs with leading or trailing elements like icons, buttons, or badges.
-source: 'sentry/components/core/input/inputGroup'
+source: '@sentry/scraps/input'
 resources:
   figma: https://www.figma.com/design/eTJz6aPgudMY9E6mzyZU0B/ChonkUI--App-Components--WIP-?node-id=384-2119&t=DdXZ7WIgTdURJlRv-4
   js: https://github.com/getsentry/sentry/blob/master/static/app/components/core/input/inputGroup.tsx
@@ -14,13 +14,15 @@ resources:
 
 import styled from '@emotion/styled';
 
-import {Button} from 'sentry/components/core/button';
-import {InputGroup} from 'sentry/components/core/input/inputGroup';
+import {Button} from '@sentry/scraps/button';
+import {InputGroup} from '@sentry/scraps/input/inputGroup';
+import {Grid} from '@sentry/scraps/layout';
+
 import {IconAttachment, IconSearch, IconSettings} from 'sentry/icons';
 import * as Storybook from 'sentry/stories';
 import {space} from 'sentry/styles/space';
 
-import documentation from '!!type-loader!@sentry/scraps/inputGroup';
+import documentation from '!!type-loader!@sentry/scraps/input/inputGroup';
 
 export {documentation};
 
@@ -55,7 +57,7 @@ Use `<InputGroup>` when you need to add visual context or actions directly adjac
 
 export function SizesDemo() {
   return (
-    <Grid>
+    <Grid columns="repeat(3, minmax(0, 1fr))" gap="md">
       <div>
         <code>md (default)</code>
         <InputGroup>
@@ -117,7 +119,7 @@ export function SizesDemo() {
 Use `<InputGroup.LeadingItems>` to add elements to the left side (start) of the input. Common use cases include search icons, currency symbols, or prefixes.
 
 <Storybook.Demo>
-  <Grid>
+  <Grid columns="repeat(3, minmax(0, 1fr))" gap="md">
     <InputGroup>
       <InputGroup.LeadingItems disablePointerEvents>
         <IconSearch />
@@ -141,7 +143,7 @@ Use `<InputGroup.LeadingItems>` to add elements to the left side (start) of the
 Use `<InputGroup.TrailingItems>` to add elements to the right side (end) of the input. Common use cases include clear buttons, loading indicators, or unit labels.
 
 <Storybook.Demo>
-  <Grid>
+  <Grid columns="repeat(3, minmax(0, 1fr))" gap="md">
     <InputGroup>
       <InputGroup.Input placeholder="Search" />
       <InputGroup.TrailingItems disablePointerEvents>
@@ -194,7 +196,7 @@ When trailing items contain interactive elements (like buttons), don't use `disa
 
 export function InteractiveDemo() {
   return (
-    <Grid>
+    <Grid columns="repeat(3, minmax(0, 1fr))" gap="md">
       <InputGroup>
         <InputGroup.Input placeholder="Search" />
         <InputGroup.TrailingItems>
@@ -418,7 +420,3 @@ Show a loading indicator when fetching results:
 - Ensure the input receives focus when the label is clicked
 
 For more information, see the [WAI-ARIA Text Input practices](https://www.w3.org/WAI/ARIA/apg/patterns/textbox/).
-
-const Grid = styled('div')`  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: ${space(2)};`;

static/app/components/core/input/numberDragInput.mdx

@@ -14,11 +14,13 @@ resources:
 import {useState} from 'react';
 import styled from '@emotion/styled';
 
-import {NumberDragInput} from 'sentry/components/core/input/numberDragInput';
+import {NumberDragInput} from '@sentry/scraps/input/numberDragInput';
+import {Stack} from '@sentry/scraps/layout';
+
 import * as Storybook from 'sentry/stories';
 import {space} from 'sentry/styles/space';
 
-import documentation from '!!type-loader!@sentry/scraps/numberDragInput';
+import documentation from '!!type-loader!@sentry/scraps/input/numberDragInput';
 
 export {documentation};
 
@@ -42,7 +44,7 @@ Click and hold the arrow indicators on the right side of the input, then move th
 export function HorizontalDemo() {
   const [value, setValue] = useState(50);
   return (
-    <Label>
+    <Stack gap="md">
       Value: {value}
       <NumberDragInput
         axis="x"
@@ -52,7 +54,7 @@ export function HorizontalDemo() {
         max={100}
         placeholder="None"
       />
-    </Label>
+    </Stack>
   );
 }
 
@@ -84,7 +86,7 @@ export function AxesDemo() {
   const [verticalValue, setVerticalValue] = useState(10);
   return (
     <Storybook.SideBySide>
-      <Label>
+      <Stack gap="md">
         Horizontal (axis="x")
         <NumberDragInput
           axis="x"
@@ -94,8 +96,8 @@ export function AxesDemo() {
           value={horizontalValue}
           placeholder="None"
         />
-      </Label>
-      <Label>
+      </Stack>
+      <Stack gap="md">
         Vertical (axis="y")
         <NumberDragInput
           axis="y"
@@ -105,7 +107,7 @@ export function AxesDemo() {
           value={verticalValue}
           placeholder="None"
         />
-      </Label>
+      </Stack>
     </Storybook.SideBySide>
   );
 }
@@ -129,7 +131,7 @@ The `step` prop controls how much the value changes per drag increment. The defa
 export function StepDemo() {
   const [value, setValue] = useState(0);
   return (
-    <Label>
+    <Stack gap="md">
       Value: {value} (step=5)
       <NumberDragInput
         value={value}
@@ -138,7 +140,7 @@ export function StepDemo() {
         min={0}
         max={100}
       />
-    </Label>
+    </Stack>
   );
 }
 
@@ -157,7 +159,7 @@ Hold **Shift** while dragging to increase the step size by a multiplier (default
 export function ShiftKeyDemo() {
   const [value, setValue] = useState(50);
   return (
-    <Label>
+    <Stack gap="md">
       Value: {value}
       <br />
       <small>Hold Shift while dragging for 10× speed</small>
@@ -168,7 +170,7 @@ export function ShiftKeyDemo() {
         max={100}
         shiftKeyMultiplier={10}
       />
-    </Label>
+    </Stack>
   );
 }
 
@@ -196,15 +198,15 @@ Use the `min` and `max` props to constrain the allowed numeric range. Values are
 export function MinMaxDemo() {
   const [value, setValue] = useState(5);
   return (
-    <Label>
+    <Stack gap="md">
       Value: {value} (constrained between 0 and 10)
       <NumberDragInput
         value={value}
         onChange={e => setValue(Number(e.target.value))}
         min={0}
         max={10}
       />
-    </Label>
+    </Stack>
   );
 }
 
@@ -233,19 +235,19 @@ Like standard inputs, `<NumberDragInput>` can be controlled or uncontrolled. Use
 export function UncontrolledDemo() {
   return (
     <Storybook.SideBySide>
-      <Label>
+      <Stack gap="md">
         Controlled
         <NumberDragInput
           value={25}
           onChange={e => console.log(e.target.value)}
           min={0}
           max={100}
         />
-      </Label>
-      <Label>
+      </Stack>
+      <Stack gap="md">
         Uncontrolled
         <NumberDragInput defaultValue={25} min={0} max={100} />
-      </Label>
+      </Stack>
     </Storybook.SideBySide>
   );
 }
@@ -271,10 +273,10 @@ const [value, setValue] = useState(25);
 Use the `placeholder` prop to provide hint text when the input is empty.
 
 <Storybook.Demo>
-  <Label>
+  <Stack gap="md">
     With placeholder
     <NumberDragInput placeholder="Enter a value" min={0} max={100} />
-  </Label>
+  </Stack>
 </Storybook.Demo>
 
 ```jsx
@@ -411,9 +413,3 @@ The component includes:
 
 > [!WARNING]
 > The drag interaction relies on pointer lock, which may not work in all browsers or contexts. Always test keyboard functionality as the primary accessibility method.
-
-const Label = styled('label')`  display: flex;
-  flex-direction: column;
-  gap: ${space(1)};
-  font-size: ${p => p.theme.fontSizeSmall};
-  color: ${p => p.theme.subText};`;