@baseline-ui/mcp 0.46.1

package/dist/data/tokens-metadata.json

@@ -0,0 +1,54 @@
+{
+  "themes": [
+    {
+      "name": "base-high-contrast-light",
+      "family": "base",
+      "variant": "high-contrast-light",
+      "path": "tokens/build/base-high-contrast-light.json"
+    },
+    {
+      "name": "base-high-contrast-dark",
+      "family": "base",
+      "variant": "high-contrast-dark",
+      "path": "tokens/build/base-high-contrast-dark.json"
+    },
+    {
+      "name": "ave-light",
+      "family": "ave",
+      "variant": "light",
+      "path": "tokens/build/ave-light.json"
+    },
+    {
+      "name": "ave-dark",
+      "family": "ave",
+      "variant": "dark",
+      "path": "tokens/build/ave-dark.json"
+    },
+    {
+      "name": "nutrient-light",
+      "family": "nutrient",
+      "variant": "light",
+      "path": "tokens/build/nutrient-light.json"
+    },
+    {
+      "name": "nutrient-dark",
+      "family": "nutrient",
+      "variant": "dark",
+      "path": "tokens/build/nutrient-dark.json"
+    }
+  ],
+  "families": [
+    "base",
+    "ave",
+    "nutrient"
+  ],
+  "categories": [
+    "elevation",
+    "opacity",
+    "rounded",
+    "spacing",
+    "color",
+    "typography"
+  ],
+  "description": "Design tokens for the Baseline UI design system"
+}

package/dist/data/usage-examples.json

@@ -0,0 +1,42 @@
+{
+  "Accordion": "export const AccordionExample: React.FC<\n  Omit<React.ComponentProps<typeof Accordion>, \"children\">\n> = (props) => {\n  return (\n    <Accordion {...props}>\n      <AccordionItem\n        title=\"Accordion Item 1\"\n        value=\"item-1\"\n        style={contentStyle}\n      >\n        lorem ipsum dolor sit amet consectetur adipisicing elit\n      </AccordionItem>\n      <AccordionItem\n        title=\"Accordion Item 2\"\n        value=\"item-2\"\n        style={contentStyle}\n      >\n        lorem ipsum dolor sit amet consectetur adipisicing elit\n      </AccordionItem>\n      <AccordionItem\n        title=\"Accordion Item 3\"\n        value=\"item-3\"\n        style={contentStyle}\n      >\n        lorem ipsum dolor sit amet consectetur adipisicing elit\n      </AccordionItem>\n    </Accordion>\n  );\n};\n\nexport const AccordionItemExample: React.FC<\n  Omit<React.ComponentProps<typeof AccordionItem>, \"children\"> & {\n    includeActions?: boolean;\n    includeDescription?: boolean;\n    showActionsOnTriggerOnly?: boolean;\n    children?: React.ReactNode;\n  }\n> = ({ includeActions, includeDescription, children, ...props }) => {\n  return (\n    <Accordion {...props}>\n      {Array.from({ length: 3 }).map((_, i) => (\n        <AccordionItem\n          key={i}\n          title={`Accordion Item ${i + 1}`}\n          subLabel={includeDescription ? \"Value\" : undefined}\n          value={`item-${i + 1}`}\n          style={contentStyle}\n          actions={\n            includeActions\n              ? [\n                  {\n                    \"aria-label\": \"Edit\",\n                    icon: EllipseIcon,\n                  },\n                  {\n                    \"aria-label\": \"Delete\",\n                    icon: EllipseIcon,\n                  },\n                ]\n              : undefined\n          }\n          showActionsOnTriggerOnly={props.showActionsOnTriggerOnly}\n        >\n          {children ||\n            `lorem ipsum dolor sit amet consectetur adipisicing elit`}\n        </AccordionItem>\n      ))}\n    </Accordion>\n  );\n};\n\nexport const AccordionWithDisabledItemsExample: React.FC<\n  Omit<React.ComponentProps<typeof AccordionExample>, \"disabledKeys\">\n> = (props) => {\n  return <AccordionExample {...props} disabledKeys={new Set([\"item-1\"])} />;\n};",
+  "ActionButton": "export function ButtonWithIcon({ label, ...args }: ActionButtonProps) {\n  return (\n    <ActionButton\n      label={label}\n      iconStart={TrashIcon}\n      iconEnd={TrashIcon}\n      {...args}\n    />\n  );\n}",
+  "ActionGroup": "export const actionGroupSingleSelectItems = [\n  { id: \"align-left\", label: \"Align Left\", icon: TextAlignLeftIcon },\n  { id: \"align-center\", label: \"Align Center\", icon: TextAlignCenterIcon },\n  { id: \"align-right\", label: \"Align Right\", icon: TextAlignRightIcon },\n];\n\nexport const actionGroupMultiSelectItems = [\n  { id: \"bold\", label: \"Bold\", icon: BoldIcon },\n  { id: \"italic\", label: \"Italic\", icon: ItalicIcon },\n  { id: \"underline\", label: \"Underline\", icon: UnderlineIcon },\n];\n\nexport const ActionGroupExample: React.FC<\n  Omit<ActionGroupProps, \"items\"> & {\n    includeCustomTooltip?: boolean;\n  }\n> = ({ selectionMode, includeCustomTooltip, ...props }) => {\n  return (\n    <ActionGroup\n      items={\n        !selectionMode || selectionMode === \"single\"\n          ? actionGroupSingleSelectItems\n          : actionGroupMultiSelectItems\n      }\n      selectionMode={selectionMode}\n      {...(includeCustomTooltip && {\n        tooltipProps: (item) => {\n          invariant(\"label\" in item, \"Item must have a label\");\n\n          return {\n            text: `Custom tooltip for ${item.label}`,\n          };\n        },\n      })}\n      {...props}\n    />\n  );\n};\n\nexport const ActionGroupCustomRendererExample: React.FC<\n  Omit<ActionGroupProps, \"items\">\n> = ({ selectionMode, ...props }) => {\n  return (\n    <ActionGroup\n      items={\n        !selectionMode || selectionMode === \"single\"\n          ? actionGroupSingleSelectItems\n          : actionGroupMultiSelectItems\n      }\n      selectionMode={selectionMode}\n      renderActionItem={(item, { isSelected, isDisabled }) => {\n        invariant(\n          item.value && \"icon\" in item.value && item.value.icon,\n          \"Item value is required.\",\n        );\n\n        return (\n          <ToggleIconButton\n            aria-label={item.textValue}\n            icon={item.value.icon}\n            isSelected={isSelected}\n            isDisabled={isDisabled}\n          />\n        );\n      }}\n      {...props}\n    />\n  );\n};\n\nexport const ActionGroupWithIconExample: React.FC<\n  Omit<ActionGroupProps, \"items\">\n> = (props) => {\n  return <ActionGroupExample icon={TextIcon} {...props} />;\n};",
+  "ActionIconButton": "export const IconButtonExample: React.FC<\n  Omit<ActionIconButtonProps, \"icon\">\n> = (props) => {\n  return <ActionIconButton icon={TrashIcon} {...props} />;\n};",
+  "AlertDialog": "export const AlertDialogExample: React.FC<\n  AlertDialogProps & {\n    defaultOpen?: boolean;\n  }\n> = ({ defaultOpen = true, onCancel, ...rest }) => {\n  return (\n    <Modal defaultOpen={defaultOpen}>\n      <ModalTrigger>\n        <ActionButton label=\"Open Alert Dialog\" />\n      </ModalTrigger>\n      <ModalContent>\n        {({ close }) => (\n          <AlertDialog\n            {...rest}\n            onCancel={() => {\n              close();\n              onCancel?.();\n            }}\n          />\n        )}\n      </ModalContent>\n    </Modal>\n  );\n};",
+  "ButtonSelect": "export const ButtonSelectExample: React.FC<Omit<ButtonSelectProps, \"items\">> = (\n  args,\n) => {\n  return (\n    <ButtonSelect\n      optionClassName={(item) => item.label}\n      {...args}\n      items={items}\n    />\n  );\n};\n\nexport const IndividualButtonBehaviour: React.FC<\n  Omit<ButtonSelectProps, \"items\">\n> = (args) => {\n  return (\n    <ButtonSelect\n      buttonBehaviour={(activeKey) =>\n        activeKey === \"ellipse\" ? \"action\" : \"toggle\"\n      }\n      {...args}\n      items={items}\n      aria-label=\"Shape Options\"\n    />\n  );\n};",
+  "ColorInput": "export const CustomTriggerButton = () => {\n  return (\n    <ColorInput\n      label=\"label\"\n      renderTriggerButton={({ colorName, ref, triggerProps }) => (\n        <ActionIconButton\n          {...triggerProps}\n          aria-label={typeof colorName === \"string\" ? colorName : \"Color\"}\n          icon={EllipseIcon}\n          ref={ref}\n          aria-haspopup=\"true\"\n        />\n      )}\n    />\n  );\n};\n\nexport const ControlledNull: React.FC<\n  Omit<ColorInputProps, \"value\" | \"onChange\" | \"allowRemoval\">\n> = (args) => {\n  const [color, setColor] = useState<string | null>(null);\n\n  return (\n    <div>\n      <ActionButton\n        label=\"None\"\n        onPress={() => {\n          setColor(null);\n        }}\n      />\n      <ColorInput\n        value={color}\n        onChange={(v) => {\n          setColor(v?.toString(\"hex\") ?? null);\n        }}\n        allowRemoval={true}\n        {...args}\n      />\n    </div>\n  );\n};\n\nexport const IndeterminateExample: React.FC<ColorInputProps> = (args) => {\n  const [isIndeterminate, setIsIndeterminate] = useState(true);\n\n  const _props = {\n    ...args,\n    isIndeterminate,\n  };\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"xl\">\n      <ActionButton\n        label=\"Toggle Indeterminate State\"\n        onPress={() => {\n          setIsIndeterminate(!isIndeterminate);\n        }}\n      />\n\n      <Text type=\"title\">Standard</Text>\n      <ColorInput {..._props} />\n      <ColorInput\n        {..._props}\n        isIndeterminate={isIndeterminate}\n        indeterminateIcon={null}\n      />\n\n      <Text type=\"title\">Without Color Label</Text>\n      <ColorInput {..._props} colorLabel={false} />\n      <ColorInput {..._props} colorLabel={false} indeterminateIcon={null} />\n\n      <Text type=\"title\">With Custom Color Label</Text>\n      <ColorInput\n        {..._props}\n        colorLabel={(color, { isIndeterminate }) =>\n          isIndeterminate ? \"Custom Indeterminate\" : \"Custom Color Label\"\n        }\n      />\n      <ColorInput\n        {..._props}\n        colorLabel={(color, { isIndeterminate }) =>\n          isIndeterminate ? \"Custom Indeterminate\" : \"Custom Color Label\"\n        }\n        indeterminateIcon={null}\n      />\n    </Box>\n  );\n};\n\nexport const IndeterminateWithCustomColorLabel: React.FC<ColorInputProps> = (\n  args,\n) => {\n  return (\n    <ColorInput\n      {...args}\n      isIndeterminate={true}\n      colorLabel={(color, { isIndeterminate }) =>\n        isIndeterminate ? \"Custom Indeterminate\" : \"Custom Color Label\"\n      }\n    />\n  );\n};",
+  "ComboBox": "export const items = [\n  { id: \"pears\", label: \"Pears\" },\n  { id: \"apples\", label: \"Apples\" },\n  { id: \"oranges\", label: \"Oranges\" },\n  { id: \"bananas\", label: \"Bananas\" },\n  { id: \"grapes\", label: \"Grapes\" },\n  { id: \"strawberries\", label: \"Strawberries\" },\n  { id: \"pineapples\", label: \"Pineapples\" },\n  { id: \"watermelons\", label: \"Watermelons\" },\n  { id: \"peaches\", label: \"Peaches\" },\n  { id: \"mangos\", label: \"Mangos\" },\n  { id: \"papayas\", label: \"Papayas\" },\n  { id: \"cherries\", label: \"Cherries\" },\n] as ListOption[];\n\nexport const itemsWithIcon = [\n  { id: \"ellipse\", icon: EllipseIcon, label: \"Ellipse\" },\n  { id: \"square\", icon: RectangleIcon, label: \"Square\" },\n  { id: \"polygon\", icon: PolygonIcon, label: \"Polygon\" },\n] as ListOption[];\n\nexport const itemsWithSections = [\n  {\n    id: \"solid\",\n    type: \"section\",\n    children: items,\n  },\n  {\n    id: \"dashed\",\n    children: [\n      {\n        id: \"ellipse-dashed\",\n        icon: EllipseDashedIcon,\n        label: \"Ellipse Dashed\",\n      },\n      {\n        id: \"square-dashed\",\n        icon: RectangleDashedIcon,\n        label: \"Square Dashed\",\n      },\n      {\n        id: \"polygon-dashed\",\n        icon: PolygonDashedIcon,\n        label: \"Polygon Dashed\",\n      },\n    ],\n  },\n] as ListItem[];\n\nexport const ComboBoxExample: React.FC<\n  Omit<React.ComponentProps<typeof ComboBox>, \"items\">\n> = (args) => {\n  return (\n    <Box style={{ width: \"100%\", height: 200 }}>\n      <ComboBox items={items} aria-label=\"Combo box\" {...args} />\n    </Box>\n  );\n};\n\nexport const numberItems = Array.from({ length: 100 }, (_, i) => ({\n  id: i.toString(),\n  label: `Item ${i}`,\n})) as ListOption[];\n\nexport const NumberComboBoxExample: React.FC<\n  Omit<React.ComponentProps<typeof ComboBox>, \"items\">\n> = (args) => {\n  return (\n    <Box style={{ width: 200, height: 100 }}>\n      <ComboBox\n        items={numberItems}\n        inputType=\"number\"\n        aria-label=\"Combo box\"\n        {...args}\n      />\n    </Box>\n  );\n};",
+  "DateField": "export const DateFieldExample: React.FC<\n  Omit<DateFieldProps, \"defaultValue\" | \"value\" | \"createCalendar\"> & {\n    defaultValue?: string;\n    value?: string;\n  }\n> = ({ defaultValue, value, ...rest }) => {\n  return (\n    <DateField\n      {...rest}\n      defaultValue={defaultValue ? parseDate(defaultValue) : undefined}\n      value={value ? parseDate(value) : undefined}\n    />\n  );\n};\n\nexport const MinMaxDateFieldExample: React.FC<\n  Omit<DateFieldProps, \"defaultValue\" | \"value\" | \"createCalendar\"> & {\n    defaultValue?: string;\n    value?: string;\n  }\n> = (props) => {\n  return (\n    <DateFieldExample\n      {...props}\n      minValue={new CalendarDate(2021, 4, 7)}\n      maxValue={new CalendarDate(2022, 6, 30)}\n    />\n  );\n};",
+  "DeviceProvider": "export const TestComponent = ({\n  breakpoints,\n}: {\n  breakpoints?: Breakpoints;\n}) => {\n  return (\n    <div>\n      <DeviceProvider breakpoints={breakpoints}>\n        <ThemeProvider\n          theme={themes.base.light}\n          className={sprinkles({\n            display: \"block\",\n            margin: [\"xl\", \"2xl\", \"3xl\"],\n          })}\n        >\n          <Content breakpoints={breakpoints} />\n        </ThemeProvider>\n      </DeviceProvider>\n    </div>\n  );\n};",
+  "Dialog": "export const DialogExample: React.FC<{\n  modalProps?: Omit<ModalProps, \"children\">;\n  contentProps?: Omit<ModalContentProps, \"children\">;\n  dialogProps?: Omit<React.ComponentProps<typeof Dialog>, \"children\">;\n}> = ({ modalProps, contentProps, dialogProps }) => {\n  return (\n    <Modal {...modalProps}>\n      <ModalTrigger>\n        <ActionButton className=\"PSPDFKit-Button\" label=\"Open Dialog\" />\n      </ModalTrigger>\n      <ModalContent {...contentProps} data-block-id=\"modal-content\">\n        <Dialog\n          {...dialogProps}\n          className={classNames(\n            sprinkles({ padding: \"md\" }),\n            \"PSPDFKit-Dialog\",\n          )}\n        >\n          <DialogTitle style={{ marginBottom: 10 }}>\n            <Text className=\"PSPDFKit-Title\" type=\"title\" elementType=\"h3\">\n              Dialog Title\n            </Text>\n          </DialogTitle>\n\n          <TextInput\n            className=\"PSPDFKit-Input\"\n            label=\"Label\"\n            placeholder=\"Input 1\"\n          />\n\n          <ModalClose>\n            <ActionButton\n              className=\"PSPDFKit-Close-Button\"\n              style={{ marginTop: 10 }}\n              label=\"Close Modal\"\n            />\n          </ModalClose>\n        </Dialog>\n      </ModalContent>\n    </Modal>\n  );\n};\n\nexport const DialogSizesExample = () => {\n  const [size, setSize] = useState<DialogProps[\"size\"]>(\"sm\");\n  const [contentLength, setContentLength] = useState(\"long\");\n  return (\n    <Box\n      display=\"flex\"\n      gap=\"xl\"\n      flexDirection=\"column\"\n      style={{\n        minWidth: 250,\n      }}\n      data-testid=\"dialog-sizes-container\"\n    >\n      <Select\n        items={[\n          {\n            id: \"sm\",\n            label: \"Small\",\n          },\n          {\n            id: \"md\",\n            label: \"Medium\",\n          },\n          {\n            id: \"lg\",\n            label: \"Large\",\n          },\n          {\n            id: \"content\",\n            label: \"Content\",\n          },\n        ]}\n        defaultValue=\"sm\"\n        onChange={(id) => {\n          setSize(id as DialogProps[\"size\"]);\n        }}\n        label=\"Size\"\n        labelPosition=\"start\"\n      />\n\n      <Select\n        label=\"Content Length\"\n        labelPosition=\"start\"\n        items={[\n          {\n            id: \"short\",\n            label: \"Short\",\n          },\n          {\n            id: \"long\",\n            label: \"Long\",\n          },\n        ]}\n        defaultSelectedKey=\"long\"\n        onSelectionChange={(id) => {\n          setContentLength(id as string);\n        }}\n      />\n\n      <Modal>\n        <ModalTrigger>\n          <ActionButton label=\"Open Dialog\" />\n        </ModalTrigger>\n        <ModalContent>\n          <Dialog\n            className={sprinkles({\n              padding: \"lg\",\n            })}\n            size={size}\n          >\n            <Text>\n              {contentLength === \"short\"\n                ? \"Short content\"\n                : \"Long content. \".repeat(200)}\n            </Text>\n          </Dialog>\n        </ModalContent>\n      </Modal>\n    </Box>\n  );\n};",
+  "DomNodeRenderer": "export function ButtonNode(props: Omit<DomNodeRendererProps, \"node\">) {\n  const [node, setNode] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    const _node = document.createElement(\"button\");\n    _node.textContent = \"Text\";\n\n    setNode(_node);\n  }, []);\n\n  return node ? <DomNodeRenderer {...props} node={node} /> : null;\n}",
+  "Drawer": "export const DrawerWithActionExample: React.FC<{\n  onPress?: () => void;\n}> = ({ onPress }) => {\n  return (\n    <Drawer\n      action={{ icon: EllipseIcon, \"aria-label\": \"Action\", onPress }}\n      title=\"Drawer Title\"\n    >\n      Drawer Content\n    </Drawer>\n  );\n};",
+  "Editor": "export const EditorWithSetCaretButton = ({\n  caretIndex,\n  onChange,\n}: { caretIndex: number } & EditorProps) => {\n  const editorHandleRef = React.useRef<EditorHandle>(null);\n\n  return (\n    <>\n      <button\n        onClick={() => editorHandleRef.current?.setCaretPosition(caretIndex)}\n        data-testid=\"set-caret\"\n      >\n        Set caret\n      </button>\n      <Editor onChange={onChange} editorHandle={editorHandleRef} />\n    </>\n  );\n};\n\nexport const EditorWithFocusButton = (args: EditorProps) => {\n  const editorHandleRef = React.useRef<EditorHandle>(null);\n\n  return (\n    <>\n      <button\n        onClick={() => editorHandleRef.current?.focus()}\n        data-testid=\"focus\"\n      >\n        Focus\n      </button>\n      <Editor editorHandle={editorHandleRef} {...args} />\n    </>\n  );\n};\n\nexport const EditorAutoFocusOnMount: React.FC<EditorProps> = (args) => {\n  const [isMounted, setIsMounted] = React.useState(false);\n\n  return (\n    <Box style={{ width: 260 }} display=\"flex\" gap=\"2xl\" flexDirection=\"column\">\n      <ActionButton\n        onPress={() => {\n          setIsMounted(!isMounted);\n        }}\n        label={isMounted ? \"Unmount\" : \"Mount\"}\n      />\n\n      {isMounted ? <Editor autoFocus={true} {...args} /> : null}\n    </Box>\n  );\n};",
+  "FrameProvider": "export function TestFrameProvider({\n  shouldRenderInCustomContainer = true,\n  onTopButtonPress,\n  onBottomButtonPress,\n  isScrollable = false,\n  shouldContainOverlays = \"auto\",\n  defaultOpen = false,\n  portalContainer,\n  appendChildren,\n  containerStyle,\n  containerTestId = \"container\",\n  buttonLabel = \"Open Modal\",\n  dialogText = \"This is a dialog. \".repeat(100),\n  position = \"relative\",\n}: {\n  shouldRenderInCustomContainer?: boolean;\n  onTopButtonPress?: () => void;\n  onBottomButtonPress?: () => void;\n  isScrollable?: boolean;\n  shouldContainOverlays?: \"always\" | \"auto\" | \"never\";\n  defaultOpen?: boolean;\n  showOutsideButtons?: boolean;\n  portalContainer?: HTMLElement | null;\n  appendChildren?: React.ReactNode;\n  containerStyle?: React.CSSProperties;\n  containerTestId?: string;\n  buttonLabel?: string;\n  dialogText?: string;\n  position?: \"static\" | \"relative\";\n}) {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n\n  return (\n    <FrameProvider\n      container={\n        shouldRenderInCustomContainer && container ? container : undefined\n      }\n      shouldContainOverlays={shouldContainOverlays}\n      portalContainer={portalContainer}\n    >\n      <Box\n        display=\"flex\"\n        flexDirection=\"column\"\n        gap=\"md\"\n        padding=\"2xl\"\n        alignItems=\"center\"\n      >\n        {onTopButtonPress ? (\n          <ActionButton label=\"Button At Top\" onPress={onTopButtonPress} />\n        ) : null}\n\n        <Box\n          ref={(el) => {\n            setContainer(el);\n          }}\n          data-testid={containerTestId}\n          style={{\n            height: isScrollable ? \"100vh\" : \"70vh\",\n            width: \"80vw\",\n            position,\n            ...containerStyle,\n          }}\n          display=\"flex\"\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          flexDirection=\"column\"\n          borderWidth={1}\n          borderColor=\"border.medium\"\n          borderStyle=\"solid\"\n          backgroundColor=\"background.positive.medium\"\n        >\n          <Modal defaultOpen={defaultOpen}>\n            <ModalTrigger>\n              <ActionButton label={buttonLabel} />\n            </ModalTrigger>\n            <ModalContent>\n              <Dialog>\n                <Box\n                  display=\"flex\"\n                  justifyContent=\"center\"\n                  alignItems=\"center\"\n                  padding=\"xl\"\n                >\n                  <Text>{dialogText}</Text>\n                </Box>\n              </Dialog>\n            </ModalContent>\n          </Modal>\n\n          {appendChildren}\n        </Box>\n\n        {onBottomButtonPress ? (\n          <ActionButton\n            label=\"Button At Bottom\"\n            onPress={onBottomButtonPress}\n          />\n        ) : null}\n      </Box>\n    </FrameProvider>\n  );\n}\n\nexport function TestFrameProviderWithZeroSizedContainer() {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n\n  return (\n    <FrameProvider container={container} shouldContainOverlays=\"always\">\n      <div\n        ref={(el) => {\n          setContainer(el);\n        }}\n      />\n    </FrameProvider>\n  );\n}\n\nexport function TestFrameProviderWithCustomPortalContainer({\n  position = \"relative\",\n}: {\n  position?: \"static\" | \"relative\";\n}) {\n  const [portalContainer, setPortalContainer] = useState<HTMLDivElement | null>(\n    null,\n  );\n\n  return (\n    <Box padding=\"md\">\n      <Box\n        ref={setPortalContainer}\n        backgroundColor=\"support.warning.subtler\"\n        padding=\"md\"\n        borderRadius=\"sm\"\n        marginX=\"2xl\"\n        display=\"flex\"\n        justifyContent=\"center\"\n        alignItems=\"center\"\n      >\n        <Text>Custom Portal Container</Text>\n      </Box>\n      <TestFrameProvider\n        portalContainer={portalContainer}\n        position={position}\n      />\n    </Box>\n  );\n}\n\nexport function NestedTestFrameProvider(\n  props: React.ComponentProps<typeof TestFrameProvider>,\n) {\n  return (\n    <TestFrameProvider\n      {...props}\n      containerTestId=\"outer-container\"\n      buttonLabel=\"Open Outer Modal\"\n      dialogText={\"This is the outer dialog. \".repeat(100)}\n      appendChildren={\n        <Box margin=\"lg\">\n          <TestFrameProvider\n            {...props}\n            containerTestId=\"inner-container\"\n            buttonLabel=\"Open Inner Modal\"\n            dialogText={\"This is the inner dialog. \".repeat(100)}\n            containerStyle={{\n              width: `calc(100vw - 400px)`,\n              height: \"50vh\",\n              backgroundColor: themeVars.color.background.positive.strong,\n            }}\n          />\n        </Box>\n      }\n    />\n  );\n}\n\nexport const TestFrameProviderInsideShadowRoot = ({\n  position = \"static\",\n}: {\n  position?: \"static\" | \"relative\";\n}) => {\n  return (\n    <ShadowRoot\n      style={{\n        backgroundColor: themeVars.color.support.warning.subtler,\n        position: \"absolute\",\n        inset: 50,\n        bottom: 0,\n      }}\n    >\n      <TestFrameProvider position={position} />\n    </ShadowRoot>\n  );\n};\n\nexport const WithPortalContainerOutsideContainer: React.FC<{\n  position?: \"static\" | \"relative\";\n  shouldContainOverlays?: \"always\" | \"auto\" | \"never\";\n}> = ({ position = \"relative\", shouldContainOverlays }) => {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n  const [portalContainer, setPortalContainer] = useState<HTMLDivElement | null>(\n    null,\n  );\n\n  return (\n    <FrameProvider\n      container={container}\n      shouldContainOverlays={shouldContainOverlays}\n      portalContainer={portalContainer}\n    >\n      <Box\n        style={{\n          width: \"100vw\",\n          height: \"100vh\",\n        }}\n        backgroundColor=\"background.positive.medium\"\n        display=\"flex\"\n        justifyContent=\"center\"\n        alignItems=\"center\"\n      >\n        <Box\n          ref={setContainer}\n          style={{\n            width: \"80vw\",\n            height: \"80vh\",\n            position,\n          }}\n          backgroundColor=\"support.warning.subtler\"\n          data-testid=\"container\"\n          display=\"flex\"\n          justifyContent=\"center\"\n          alignItems=\"center\"\n        >\n          <Modal>\n            <ModalTrigger>\n              <ActionButton label=\"Open Modal\" />\n            </ModalTrigger>\n            <ModalContent>\n              <Dialog size=\"content\">\n                <Box\n                  style={{\n                    width: 2000,\n                    height: 2000,\n                  }}\n                  padding=\"2xl\"\n                >\n                  <Text>\n                    This is a dialog which is larger than the container.\n                  </Text>\n                </Box>\n              </Dialog>\n            </ModalContent>\n          </Modal>\n        </Box>\n        <Box ref={setPortalContainer} />\n      </Box>\n    </FrameProvider>\n  );\n};",
+  "FreehandCanvas": "export const ControlledFreehandCanvas = () => {\n  const [value, setValue] = useState(defaultValue);\n\n  return <FreehandCanvas value={value} onChange={setValue} />;\n};\n\nexport const TrackedControlledFreehandCanvas = ({\n  onChange,\n  onChangeEnd,\n}: {\n  onChange?: (value: FreehandCanvasProps[\"value\"]) => void;\n  onChangeEnd?: (value: FreehandCanvasProps[\"value\"]) => void;\n}) => {\n  const [value, setValue] = useState<FreehandCanvasProps[\"value\"]>([]);\n\n  return (\n    <FreehandCanvas\n      value={value}\n      onChange={(value) => {\n        setValue(value);\n        onChange?.(value);\n      }}\n      onChangeEnd={(value) => {\n        setValue(value);\n        onChangeEnd?.(value);\n      }}\n    />\n  );\n};",
+  "GridList": "export const GridListItemRenderer: GridListProps[\"renderGridItem\"] = (\n  { textValue },\n  { checkBoxProps, rowProps, isDisabled, gridCellProps, ...rest },\n  ref,\n) => {\n  return (\n    <GridListContainer\n      ref={ref}\n      rowProps={rowProps}\n      gridCellProps={gridCellProps}\n      isDisabled={isDisabled}\n      {...rest}\n    >\n      <Box\n        display=\"flex\"\n        flexDirection=\"row\"\n        alignItems=\"center\"\n        gap=\"xl\"\n        paddingLeft=\"md\"\n      >\n        {checkBoxProps ? (\n          <Checkbox {...checkBoxProps} onChange={console.log} />\n        ) : null}\n        <Text type=\"label\" size=\"sm\">\n          {textValue}\n        </Text>\n        <ActionIconButton\n          icon={EllipseIcon}\n          variant=\"secondary\"\n          size=\"sm\"\n          aria-label=\"Button\"\n          onPress={() => {\n            alert(`Button for ${textValue} clicked`);\n          }}\n          isDisabled={checkBoxProps?.isDisabled}\n        />\n      </Box>\n    </GridListContainer>\n  );\n};\n\nexport const GridListExample: React.FC<GridListExampleProps> = (props) => {\n  return (\n    <GridList\n      renderGridItem={GridListItemRenderer}\n      items={gridItems}\n      data-block-id=\"grid-list\"\n      {...props}\n    />\n  );\n};\n\nexport const GridListControlledExample: React.FC<GridListExampleProps> = (\n  props,\n) => {\n  const handleRef = useRef<ListHandle>(null);\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"md\">\n      <ActionButton\n        label=\"Scroll to bottom\"\n        onPress={() => {\n          handleRef.current?.scrollIntoView(last(gridItems)?.id ?? \"\", {\n            behavior: \"smooth\",\n            block: \"end\",\n          });\n        }}\n      />\n\n      <ActionButton\n        label=\"Focus Last Item\"\n        onPress={() => {\n          handleRef.current?.setFocusedKey(last(gridItems)?.id ?? \"\");\n        }}\n        preventFocusOnPress={true}\n      />\n      <div\n        style={{\n          maxHeight: 90,\n          overflow: \"auto\",\n          padding: 10,\n        }}\n      >\n        <GridListExample {...props} gridListHandle={handleRef} />\n      </div>\n    </Box>\n  );\n};\n\nexport const DynamicGridListExample: React.FC<GridListExampleProps> = (\n  props,\n) => {\n  const list = useListData({\n    initialItems: gridItems,\n  });\n\n  const onReorder = useCallback(\n    (e: DroppableCollectionReorderEvent) => {\n      if (e.target.dropPosition === \"before\") {\n        list.moveBefore(e.target.key, e.keys);\n      } else if (e.target.dropPosition === \"after\") {\n        list.moveAfter(e.target.key, e.keys);\n      }\n    },\n    [list],\n  );\n\n  const renderGridItem: GridListProps[\"renderGridItem\"] = useCallback(\n    (\n      item,\n      { dragHandleProps, rowProps, gridCellProps, isDisabled, ...rest },\n      ref,\n    ) => {\n      return (\n        <GridListContainer\n          ref={ref}\n          rowProps={rowProps}\n          gridCellProps={gridCellProps}\n          isDisabled={isDisabled}\n          {...rest}\n        >\n          <Box\n            display=\"flex\"\n            flexDirection=\"row\"\n            alignItems=\"center\"\n            gap=\"xl\"\n            paddingLeft=\"md\"\n          >\n            <GridListDragHandle dragHandleProps={dragHandleProps} />\n            <Text type=\"label\" size=\"sm\">\n              {item.textValue}\n            </Text>\n            <ActionIconButton\n              icon={XIcon}\n              variant=\"secondary\"\n              size=\"sm\"\n              aria-label=\"Button\"\n              onPress={() => {\n                // Delete that item from the list\n                list.remove(item.key);\n              }}\n            />\n          </Box>\n        </GridListContainer>\n      );\n    },\n    [list],\n  );\n\n  return (\n    <GridList\n      aria-label=\"Grid List\"\n      renderGridItem={renderGridItem}\n      items={list.items}\n      data-block-id=\"grid-list\"\n      enableReorder={true}\n      onReorder={onReorder}\n      selectionMode=\"multiple\"\n      selectionBehavior=\"toggle\"\n      {...props}\n    />\n  );\n};\n\nexport const GridListDragHandle = ({\n  dragHandleProps,\n}: GridListDragHandleProps) => {\n  invariant(\n    dragHandleProps,\n    \"GridListDragHandle must be used within a GridListItem with `enableReorder` set to true\",\n  );\n\n  const { dragProps, dragButtonProps } = dragHandleProps || {};\n\n  const dragButtonRef = React.useRef<HTMLDivElement | null>(null);\n\n  const { buttonProps } = useButton(\n    {\n      ...dragButtonProps,\n      elementType: \"div\",\n    },\n    dragButtonRef,\n  );\n\n  return (\n    <div {...mergeProps(dragProps, buttonProps)} ref={dragButtonRef}>\n      <DragIndicatorVerticalIcon size={12} className={dragIndicatorCn} />\n    </div>\n  );\n};\n\nexport const EditableGridListExample: React.FC<GridListExampleProps> = (\n  props,\n) => {\n  const [isEditing, setIsEditing] = useState(false);\n  const [selectedKey, setSelectedKey] = useState(\"1\");\n\n  const itemList = useListData({\n    initialItems: gridItems,\n  });\n\n  const onItemUpdate = useCallback(\n    (id: string, value: string) => {\n      itemList.update(id, { id, label: value });\n    },\n    [itemList],\n  );\n\n  const renderGridItem: GridListProps[\"renderGridItem\"] = useCallback(\n    ({ textValue, value }, options, ref) => {\n      const isSelected = value?.id === selectedKey;\n      const isEditMode = isSelected && isEditing;\n\n      return (\n        <li\n          {...options.rowProps}\n          ref={ref}\n          style={{\n            listStyleType: \"none\",\n            background: isSelected ? \"#E6F5FF\" : \"transparent\",\n            borderRadius: 2,\n          }}\n        >\n          <Box\n            display=\"flex\"\n            flexDirection=\"row\"\n            alignItems=\"center\"\n            gap=\"xl\"\n            paddingLeft=\"md\"\n            {...options.gridCellProps}\n          >\n            {isEditMode ? (\n              <TextInput\n                className=\"edit-item-input\"\n                autoFocus={true}\n                defaultValue={textValue}\n                onBlur={(e) => {\n                  const blurEvent = e;\n                  onItemUpdate(value?.id, blurEvent.currentTarget.value);\n                  setIsEditing(false);\n                }}\n              />\n            ) : (\n              <Text type=\"label\" size=\"sm\">\n                {textValue}\n              </Text>\n            )}\n          </Box>\n        </li>\n      );\n    },\n    [selectedKey, isEditing, onItemUpdate],\n  );\n\n  return (\n    <>\n      <GridList\n        items={itemList.items}\n        renderGridItem={renderGridItem}\n        data-block-id=\"grid-list\"\n        selectionMode=\"single\"\n        onSelectionChange={(keys) => {\n          setSelectedKey(String([...keys][0]));\n        }}\n        isEditing={isEditing}\n        {...props}\n      />\n\n      <button\n        className=\"edit-selected-item-button\"\n        onClick={() => {\n          setIsEditing(!isEditing);\n        }}\n      >\n        Edit selected item\n      </button>\n    </>\n  );\n};",
+  "I18nProvider": "export const messages = {\n  en: { greeting: \"Hello, {name} !\" },\n  \"en-Gb\": { greeting: \"Hello, {name} !\" },\n  es: { greeting: \"Hola, {name} !\" },\n  fi: { greeting: \"Hei, {name} !\" },\n  fr: { greeting: \"Bonjour, {name} !\" },\n  \"fr-CA\": { greeting: \"Bonjour {name} !\" },\n  de: { greeting: \"Hallo, {name} !\" },\n  it: { greeting: \"Ciao, {name} !\" },\n  cs: { greeting: \"Ahoj, {name} !\" },\n  cy: { greeting: \"Helo, {name} !\" },\n  da: { greeting: \"Hej, {name} !\" },\n  el: { greeting: \"Γεια σου, {name} !\" },\n  he: { greeting: \"שלום, {name} !\" },\n  hr: { greeting: \"Bok, {name} !\" },\n  id: { greeting: \"Halo, {name} !\" },\n  ja: { greeting: \"こんにちは、{name} さん！\" },\n  ko: { greeting: \"안녕하세요, {name} !\" },\n  ms: { greeting: \"Hai, {name} !\" },\n  nl: { greeting: \"Hallo, {name} !\" },\n  nb: { greeting: \"Hei, {name} !\" },\n  pl: { greeting: \"Cześć, {name} !\" },\n  pt: { greeting: \"Olá, {name} !\" },\n  \"pt-PT\": { greeting: \"Olá, {name} !\" },\n  ru: { greeting: \"Привет, {name} !\" },\n  sk: { greeting: \"Ahoj, {name} !\" },\n  sl: { greeting: \"Zdravo, {name} !\" },\n  sv: { greeting: \"Hej, {name} !\" },\n  th: { greeting: \"สวัสดี, {name} !\" },\n  tr: { greeting: \"Merhaba, {name} !\" },\n  uk: { greeting: \"Привіт, {name} !\" },\n  \"zn-Hans\": { greeting: \"你好，{name} ！\" },\n  \"zn-Hant\": { greeting: \"你好，{name} ！\" },\n};\n\nexport const LocaleStringExample: React.FC<{\n  name: string;\n}> = ({ name }) => {\n  const formatter = useI18n(messages);\n\n  return (\n    <div\n      style={{\n        color: themeVars.color.text.primary,\n        ...themeVars.typography.heading.h3.medium,\n      }}\n    >\n      {formatter.formatMessage(\"greeting\", { name })}\n    </div>\n  );\n};",
+  "ImageGallery": "export function ImageGalleryExample({\n  onDelete,\n  ...props\n}: Omit<React.ComponentProps<typeof ImageGallery>, \"onDelete\"> & {\n  onDelete?: (keys: Key[]) => void;\n}) {\n  return (\n    <ImageGallery\n      {...props}\n      onDelete={\n        onDelete\n          ? (keys) => {\n              onDelete?.(keys);\n            }\n          : undefined\n      }\n    />\n  );\n}\n\nexport function CustomSizeImageGalleryExample({\n  ...props\n}: Omit<React.ComponentProps<typeof ImageGallery>, \"onDelete\">) {\n  const [imageSize, setImageSize] = useState<number>(ImageSize.sm);\n\n  const handleZoomIn = useCallback(() => {\n    setImageSize((prevSize) => {\n      return prevSize * SCALE_FACTOR;\n    });\n  }, []);\n\n  const handleZoomOut = useCallback(() => {\n    setImageSize((prevSize) => {\n      const newSize = prevSize / SCALE_FACTOR;\n      return Math.max(newSize, ImageSize.sm);\n    });\n  }, []);\n\n  const handleSizeChange = useCallback((value: number) => {\n    setImageSize(value);\n  }, []);\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      event.preventDefault();\n      if (\n        (event.key === \"+\" || event.key === \"=\") &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        handleZoomIn();\n      }\n\n      if (event.key === \"-\" && (event.metaKey || event.ctrlKey)) {\n        handleZoomOut();\n      }\n\n      if (event.key === \"0\" && (event.metaKey || event.ctrlKey)) {\n        setImageSize(ImageSize.sm);\n      }\n    },\n    [handleZoomIn, handleZoomOut],\n  );\n\n  return (\n    <div>\n      <div style={buttonContainerStyle}>\n        <ActionButton onPress={handleZoomOut} label=\"Zoom Out\"></ActionButton>\n        <NumberInput\n          value={imageSize}\n          label=\"Size\"\n          labelPosition=\"start\"\n          showStepper={false}\n          onChange={handleSizeChange}\n          minValue={ImageSize.sm}\n          style={{ width: 100 }}\n        />\n        <ActionButton onPress={handleZoomIn} label=\"Zoom In\"></ActionButton>\n      </div>\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n        }}\n      >\n        <Text type=\"helper\">\n          To zoom in, press CMD or CTRL + &quot;+&quot;.\n        </Text>\n        <Text type=\"helper\">\n          To zoom out, press CMD or CTRL + &quot;-&quot;\n        </Text>\n        <Text type=\"helper\">To reset, press CMD or CTRL + &quot;0&quot;.</Text>\n      </div>\n      <div style={galleryContainerStyle}>\n        <ImageGallery\n          {...props}\n          items={items}\n          imageWidth={imageSize}\n          onKeyDown={handleKeyDown}\n        />\n      </div>\n    </div>\n  );\n}\n\nexport function DynamicImageGalleryExample({\n  defaultItems: _items = [],\n  ...props\n}: Omit<React.ComponentProps<typeof ImageGallery>, \"onDelete\">) {\n  const [items, setItems] = useState(_items);\n\n  const handleAppend = useCallback(() => {\n    const newItem = createNewItem(items.length + 1);\n    setItems([...items, newItem]);\n  }, [items]);\n\n  const handlePrepend = useCallback(() => {\n    const newItem = createNewItem(items.length + 1);\n    setItems([newItem, ...items]);\n  }, [items]);\n\n  const handleInsert = useCallback(() => {\n    const newItem = createNewItem(items.length + 1);\n    const newItems = [...items];\n    newItems.splice(Math.floor(newItems.length / 2), 0, newItem);\n    setItems(newItems);\n  }, [items]);\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" alignItems=\"center\" gap=\"xl\">\n      <Box display=\"inline-flex\" flexDirection=\"row\" gap=\"lg\">\n        <ActionButton onPress={handlePrepend} label=\"Prepend Item\" />\n        <ActionButton onPress={handleInsert} label=\"Insert Item\" />\n        <ActionButton onPress={handleAppend} label=\"Append Item\" />\n      </Box>\n      <div>\n        <ImageGallery {...props} items={items} />\n      </div>\n    </Box>\n  );\n}\n\nexport function ControlledImageGalleryExample(\n  props: Omit<React.ComponentProps<typeof ImageGallery>, \"onDelete\" | \"items\">,\n) {\n  const [dynamicItems, setDynamicItems] = React.useState(items.slice(0, 4));\n\n  const [selectedIndex, setSelectedIndex] = React.useState(0);\n\n  const lastIndexRef = React.useRef(4);\n\n  const handleAddItem = () => {\n    setDynamicItems((prevItems) => [\n      ...prevItems,\n      createNewItem(lastIndexRef.current + 1),\n    ]);\n\n    lastIndexRef.current += 1;\n  };\n\n  const handleDelete = (keys: Key[]) => {\n    setDynamicItems((prevItems) => {\n      return prevItems.filter((item) => item.id !== keys[0]);\n    });\n  };\n\n  return (\n    <Box\n      display=\"flex\"\n      flexDirection=\"column\"\n      gap=\"xl\"\n      alignItems=\"center\"\n      style={{\n        width: 456,\n      }}\n    >\n      <ActionButton\n        onPress={handleAddItem}\n        label=\"Add Image\"\n        style={{ width: \"100%\", justifyContent: \"center\" }}\n      />\n\n      <NumberInput\n        value={selectedIndex}\n        label=\"Selected Index\"\n        onChange={setSelectedIndex}\n        minValue={0}\n        maxValue={dynamicItems.length - 1}\n      />\n\n      <ImageGallery\n        {...props}\n        selectedKeys={\n          dynamicItems[selectedIndex] ? [dynamicItems[selectedIndex].id] : []\n        }\n        items={dynamicItems}\n        onSelectionChange={(keys) => {\n          setSelectedIndex(\n            dynamicItems.findIndex((i) => i.id === [...keys][0]),\n          );\n        }}\n        onDelete={handleDelete}\n      />\n    </Box>\n  );\n}\n\nexport function ScrollIntoViewImageGalleryExample() {\n  const listBoxHandle = React.useRef<ListHandle>(null);\n  const galleryItems = Array.from({ length: 20 }, (_, i) => {\n    const index = i + 1;\n    return {\n      id: `image-${i}`,\n      src: resolvePublicUrl(`gallery/${(index % 10) + 1}.jpg`),\n      alt: `Image ${index}`,\n      label: index.toString(),\n    };\n  });\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"md\" style={{ width: 500 }}>\n      <Box display=\"flex\" gap=\"sm\">\n        <ActionButton\n          label=\"Scroll to Image 0\"\n          onPress={() => listBoxHandle.current?.scrollIntoView(\"image-0\")}\n        />\n        <ActionButton\n          label=\"Scroll to Image 15\"\n          onPress={() => listBoxHandle.current?.scrollIntoView(\"image-15\")}\n        />\n      </Box>\n\n      <div\n        style={{\n          maxHeight: 300,\n          overflow: \"auto\",\n          border: \"1px solid #ccc\",\n        }}\n      >\n        <ImageGallery items={galleryItems} listBoxHandle={listBoxHandle} />\n      </div>\n    </Box>\n  );\n}",
+  "InlineToolbar": "export const items = [\n  {\n    id: \"item-1\",\n    label: \"Item 1\",\n  },\n  {\n    id: \"item-2\",\n    label: \"Item 2\",\n  },\n  {\n    id: \"item-3\",\n    label: \"Item 4\",\n  },\n  {\n    id: \"delete\",\n    icon: TrashIcon,\n    \"aria-label\": \"Delete\",\n  },\n];\n\nexport const InlineToolbarExample = ({\n  children,\n  ...args\n}: Partial<React.ComponentProps<typeof InlineToolbar>>) => {\n  return (\n    <InlineToolbar {...args} items={items}>\n      {React.Children.count(children) > 0 ? (\n        children!\n      ) : (\n        <div className=\"content\">\n          Select the text or part of the text to see the inline toolbar.\n        </div>\n      )}\n    </InlineToolbar>\n  );\n};",
+  "ListBox": "export const items = [\n  { id: \"ellipse\", icon: EllipseIcon, label: \"Ellipse\" },\n  { id: \"square\", icon: RectangleIcon, label: \"Square\" },\n  { id: \"polygon\", icon: PolygonIcon, label: \"Polygon\" },\n] as ListItem[];\n\nexport const fonts = [\"Arial\", \"Palatino\", \"Trebuchet MS\", \"Courier New\"].map(\n  (item) => ({\n    id: item.toLowerCase().replaceAll(\" \", \"-\"),\n    label: item,\n  }),\n);\n\nexport const itemsWithSections = [\n  {\n    id: \"solid\",\n    title: \"Solid\",\n    children: items,\n  },\n  {\n    id: \"dashed\",\n    title: \"Dashed\",\n    children: [\n      {\n        id: \"ellipse-dashed\",\n        icon: EllipseDashedIcon,\n        label: \"Ellipse Dashed\",\n      },\n      {\n        id: \"square-dashed\",\n        icon: RectangleDashedIcon,\n        label: \"Square Dashed\",\n      },\n      {\n        id: \"polygon-dashed\",\n        icon: PolygonDashedIcon,\n        label: \"Polygon Dashed\",\n      },\n    ],\n  },\n] as ListItem[];\n\nexport const itemsWithSectionTitles = [\n  {\n    id: \"solid\",\n    title: \"Solid\",\n    children: items,\n  },\n  {\n    id: \"dashed\",\n    title: \"Dashed\",\n    children: [\n      {\n        id: \"ellipse-dashed\",\n        icon: EllipseDashedIcon,\n        label: \"Ellipse Dashed\",\n      },\n      {\n        id: \"square-dashed\",\n        icon: RectangleDashedIcon,\n        label: \"Square Dashed\",\n      },\n      {\n        id: \"polygon-dashed\",\n        icon: PolygonDashedIcon,\n        label: \"Polygon Dashed\",\n      },\n    ],\n  },\n] as ListItem[];\n\nexport const ListBoxExample: React.FC<\n  Omit<React.ComponentProps<typeof ListBox>, \"items\">\n> = (args) => {\n  return (\n    <ListBox\n      items={items}\n      aria-label=\"List box\"\n      optionClassName={(item) => item.label}\n      optionStyle={() => ({\n        backgroundColor: \"transparent\",\n      })}\n      {...args}\n    />\n  );\n};\n\nexport const ListBoxWithSectionsExample: React.FC<\n  Omit<React.ComponentProps<typeof ListBox>, \"items\">\n> = (args) => {\n  return (\n    <ListBox\n      items={itemsWithSections}\n      aria-label=\"List box with sections\"\n      sectionClassName={(item) => item.title}\n      sectionStyle={() => ({\n        backgroundColor: \"transparent\",\n      })}\n      {...args}\n    />\n  );\n};\n\nexport const DragAndDropListBoxExample: React.FC<\n  Omit<React.ComponentProps<typeof ListBox>, \"items\" | \"onReorder\">\n> = ({ orientation, layout, ...rest }) => {\n  const list = useListData({\n    initialItems: Array.from({ length: 20 }).map((_, i) => ({\n      id: `item-${i}`,\n      label: `Label ${i}`,\n    })),\n  });\n\n  const onReorder = useCallback(\n    (e: DroppableCollectionReorderEvent) => {\n      if (e.target.dropPosition === \"before\") {\n        list.moveBefore(e.target.key, e.keys);\n      } else if (e.target.dropPosition === \"after\") {\n        list.moveAfter(e.target.key, e.keys);\n      }\n    },\n    [list],\n  );\n\n  return (\n    <div\n      style={{\n        maxHeight: 350,\n        width: orientation === \"horizontal\" || layout === \"grid\" ? 600 : 200,\n        overflow: \"scroll\",\n        // @ts-expect-error wrong types in csstype\n        scrollbarGutter: \"stable\",\n      }}\n    >\n      <ListBox\n        {...rest}\n        className={sprinkles({\n          display: \"flex\",\n          flexDirection: orientation === \"horizontal\" ? \"row\" : \"column\",\n          paddingY: \"md\",\n          gap: \"sm\",\n          marginX: \"sm\",\n          ...(layout === \"grid\" && {\n            flexWrap: \"wrap\",\n            flexDirection: \"row\",\n            gap: \"none\",\n          }),\n        })}\n        orientation={orientation}\n        layout={layout}\n        renderOption={(\n          item,\n          { optionProps, isSelected, isFocusVisible },\n          ref,\n        ) => {\n          return (\n            <li\n              {...optionProps}\n              className={sprinkles.variants({\n                typography: \"label.md.medium\",\n                paddingX: \"2xl\",\n                paddingY: \"md\",\n                color: isSelected ? \"text.inverse\" : \"text.primary\",\n                backgroundColor: isSelected\n                  ? \"focused.default\"\n                  : \"background.primary.subtle\",\n                flexShrink: 0,\n                borderWidth: 1,\n                borderStyle: \"solid\",\n                borderColor: isSelected ? \"transparent\" : \"border.medium\",\n                outlineWidth: 2,\n                outlineStyle: \"solid\",\n                outlineOffset: 1,\n                outlineColor: isFocusVisible\n                  ? \"focused.default\"\n                  : \"transparent\",\n                marginX: layout === \"grid\" ? \"sm\" : \"none\",\n              })}\n              style={{ listStyle: \"none\", minWidth: 110 }}\n              ref={ref}\n            >\n              {/* @ts-expect-error wrong type */}\n              {item.value?.label}\n            </li>\n          );\n        }}\n        enableReorder={true}\n        items={list.items}\n        onReorder={onReorder}\n        aria-label=\"List box\"\n      />\n    </div>\n  );\n};\n\nexport const DynamicListBoxExample: React.FC<\n  Omit<React.ComponentProps<typeof ListBox>, \"items\"> & {\n    isAutoScrollExample?: boolean;\n    initialItemsCount?: number;\n  }\n> = ({ isAutoScrollExample, initialItemsCount = 3, ...args }) => {\n  const [dynamicItems, setDynamicItems] = React.useState(\n    Array.from({ length: initialItemsCount }).map((_, i) => ({\n      id: `item-${i}`,\n      label: `Item ${i}`,\n    })),\n  );\n\n  const focusHandler = React.useRef<ListHandle>(null);\n\n  const [selectedIndex, setSelectedIndex] = React.useState(0);\n\n  const lastIndexRef = React.useRef(initialItemsCount - 1);\n\n  const handleAddItem = () => {\n    setDynamicItems((prevItems) => [\n      ...prevItems,\n      {\n        id: `item-${lastIndexRef.current + 1}`,\n        icon: EllipseIcon,\n        label: `Item ${lastIndexRef.current + 1}`,\n      },\n    ]);\n\n    lastIndexRef.current += 1;\n  };\n\n  useGranularEffect(\n    () => {\n      if (!isAutoScrollExample || !dynamicItems[selectedIndex]?.id) return;\n      focusHandler.current?.scrollIntoView(dynamicItems[selectedIndex].id, {\n        behavior: \"smooth\",\n      });\n    },\n    [selectedIndex],\n    [dynamicItems],\n  );\n\n  return (\n    <Box\n      display=\"flex\"\n      flexDirection=\"column\"\n      gap=\"xl\"\n      alignItems=\"center\"\n      style={{\n        width: 200,\n      }}\n    >\n      {!isAutoScrollExample && (\n        <ActionButton\n          onPress={handleAddItem}\n          label=\"Add Item\"\n          style={{ width: \"100%\", justifyContent: \"center\" }}\n        />\n      )}\n\n      <NumberInput\n        value={selectedIndex}\n        label=\"Selected Index\"\n        onChange={setSelectedIndex}\n        minValue={0}\n        maxValue={dynamicItems.length - 1}\n      />\n\n      <div\n        style={{\n          maxHeight: isAutoScrollExample ? 220 : undefined,\n          overflow: \"auto\",\n          width: \"100%\",\n        }}\n      >\n        <ListBox\n          {...args}\n          style={{ width: \"100%\" }}\n          items={dynamicItems}\n          aria-label=\"List box\"\n          selectedKeys={[dynamicItems[selectedIndex]?.id]}\n          onSelectionChange={(keys) => {\n            setSelectedIndex(\n              dynamicItems.findIndex((i) => i.id === [...keys][0]),\n            );\n          }}\n          listBoxHandle={focusHandler}\n          renderOption={(\n            item,\n            { isFocusVisible, isSelected, optionProps },\n            ref,\n          ) => {\n            return (\n              <li\n                {...mergeProps(optionProps, {\n                  onKeyDown: (e: React.KeyboardEvent) => {\n                    if (e.key === \"Delete\" || e.key === \"Backspace\") {\n                      setDynamicItems((prevItems) =>\n                        prevItems.filter((i) => i.id !== item.key),\n                      );\n                    }\n                  },\n                })}\n                ref={ref}\n                style={{\n                  listStyle: \"none\",\n                  outline: isFocusVisible\n                    ? `2px solid ${themeVars.color.focused.default}`\n                    : \"none\",\n                  outlineOffset: -2,\n                  cursor: \"pointer\",\n                  backgroundColor: isSelected\n                    ? themeVars.color.background.primary.strong\n                    : \"transparent\",\n                  zIndex: isFocusVisible ? 1 : \"auto\",\n                }}\n              >\n                <Box\n                  color={\n                    isSelected ? \"icon.interactive.enabled\" : \"icon.primary\"\n                  }\n                  typography=\"label.md.medium\"\n                  paddingY=\"md\"\n                  display=\"flex\"\n                  flexDirection=\"row\"\n                  alignItems=\"center\"\n                  justifyContent=\"space-between\"\n                  paddingLeft=\"md\"\n                >\n                  {item.textValue}\n\n                  <ActionIconButton\n                    icon={XIcon}\n                    aria-label=\"Delete\"\n                    size=\"xs\"\n                    UNSAFE_isVisuallyInteractiveOnly={true}\n                    onPress={() => {\n                      setDynamicItems((prevItems) =>\n                        prevItems.filter((i) => i.id !== item.key),\n                      );\n                    }}\n                  />\n                </Box>\n              </li>\n            );\n          }}\n        />\n      </div>\n\n      {isAutoScrollExample ? (\n        <Text type=\"helper\" size=\"sm\" style={{ textAlign: \"center\" }}>\n          Change the selected index to see the item scroll into view.\n        </Text>\n      ) : null}\n    </Box>\n  );\n};",
+  "Menu": "export const MenuExample: React.FC<\n  MenuProps & {\n    label: string;\n  }\n> = ({ label, ...props }) => {\n  return <Menu {...props} triggerLabel={label} />;\n};",
+  "Modal": "export const ModalPortalExample = () => {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n\n  return (\n    <>\n      <Modal>\n        <ModalTrigger>\n          <ActionButton label=\"Open Modal\" />\n        </ModalTrigger>\n        <ModalContent\n          portalContainer={container || undefined}\n          data-block-id=\"modal-content\"\n        >\n          <div data-testid=\"modal-content\">Content</div>\n        </ModalContent>\n      </Modal>\n\n      <div\n        data-testid=\"portal-container\"\n        ref={(c) => {\n          setContainer(c);\n        }}\n      ></div>\n    </>\n  );\n};\n\nexport const ModalDrawerExample: React.FC<\n  Omit<ModalProps & ModalContentProps, \"children\">\n> = (args) => {\n  const id = useId();\n\n  return (\n    <Modal {...args}>\n      <ModalTrigger>\n        <ActionButton label=\"Open Drawer\" />\n      </ModalTrigger>\n      <ModalContent {...args}>\n        <Dialog\n          inheritDrawer={true}\n          size=\"lg\"\n          style={{\n            display: \"flex\",\n            flexDirection: \"column\",\n            height: \"100%\",\n            overflow: \"auto\",\n            maxHeight: \"80vh\",\n            paddingBlock: 12,\n          }}\n          aria-labelledby={id}\n        >\n          <VisuallyHidden>\n            <Text id={id}>List of items</Text>\n          </VisuallyHidden>\n\n          <ListBox\n            items={Array.from({ length: 20 }).map((_, i) => ({\n              id: i.toString(),\n              label: `Item ${i}`,\n            }))}\n            selectionMode=\"multiple\"\n            aria-labelledby={id}\n          />\n\n          <Editor variant=\"minimal\" avatarName=\"John Doe\" />\n        </Dialog>\n      </ModalContent>\n    </Modal>\n  );\n};\n\nexport const SelectInsideModalExample = () => {\n  return (\n    <Modal>\n      <ModalTrigger>\n        <ActionButton label=\"click me to open dialog\" />\n      </ModalTrigger>\n      <ModalContent>\n        <Dialog>\n          <Select items={items} placeholder=\"Select me\" />\n        </Dialog>\n      </ModalContent>\n    </Modal>\n  );\n};\n\nexport const UncontrolledInteractionOutsideExample: React.FC = () => {\n  return (\n    <Box display=\"flex\" flexDirection=\"row\" gap=\"lg\">\n      <ActionButton\n        style={{\n          zIndex: 9_999_999,\n          position: \"relative\",\n        }}\n        className=\"should-close-on-interact-outside\"\n        label=\"Clicking this will close the modal\"\n        variant=\"secondary\"\n      />\n      <Modal>\n        <ModalTrigger>\n          <ActionButton label=\"Open Modal\" />\n        </ModalTrigger>\n        <ModalContent\n          shouldCloseOnInteractOutside={(elem) => {\n            return !!elem.classList.contains(\n              \"should-close-on-interact-outside\",\n            );\n          }}\n        >\n          <Dialog>\n            <Text>Modal</Text>\n          </Dialog>\n        </ModalContent>\n      </Modal>\n      <ActionButton\n        label=\"Clicking this will not close the modal\"\n        className=\"should-not-close-on-interact-outside\"\n        variant=\"secondary\"\n        style={{\n          zIndex: 9_999_999,\n          position: \"relative\",\n        }}\n      />\n    </Box>\n  );\n};\n\nexport const LongModalExample = ({\n  defaultOpen = true,\n}: {\n  defaultOpen?: boolean;\n}) => {\n  const id = useId();\n  return (\n    <Modal defaultOpen={defaultOpen}>\n      <ModalTrigger>\n        <ActionButton label=\"Open Modal\" />\n      </ModalTrigger>\n      <ModalContent>\n        <Dialog aria-labelledby={id}>\n          <VisuallyHidden>\n            <Text id={id}>List of items</Text>\n          </VisuallyHidden>\n\n          <ListBox\n            items={Array.from({ length: 100 }).map((_, i) => ({\n              id: i.toString(),\n              label: `Item ${i}`,\n            }))}\n            aria-labelledby={id}\n          />\n\n          <Editor variant=\"minimal\" avatarName=\"John Doe\" />\n        </Dialog>\n      </ModalContent>\n    </Modal>\n  );\n};",
+  "Panel": "export const PanelExample: FC<Omit<PanelGroupProps, \"children\">> = (props) => {\n  return (\n    <div\n      style={{\n        height: 600,\n        textAlign: \"center\",\n        border: `1px solid var(--bui-color-border-subtle)`,\n        borderRadius: 4,\n      }}\n    >\n      <PanelGroup {...props}>\n        <Panel minSize={20} defaultSize={30}>\n          <Box height=\"full\" padding=\"sm\">\n            <Text>Sidebar</Text>\n          </Box>\n        </Panel>\n        <PanelResizeHandle />\n        <Panel minSize={50}>\n          <Box height=\"full\" padding=\"sm\">\n            <Text>Main</Text>\n          </Box>\n        </Panel>\n      </PanelGroup>\n    </div>\n  );\n};\n\nexport const PanelMultipleExample: FC<Omit<PanelGroupProps, \"children\">> = (\n  props,\n) => {\n  return (\n    <div\n      style={{\n        height: 600,\n        textAlign: \"center\",\n        border: `1px solid var(--bui-color-border-subtle)`,\n        borderRadius: 4,\n      }}\n    >\n      <PanelGroup {...props}>\n        <Panel minSize={20} defaultSize={30}>\n          <Box height=\"full\" padding=\"sm\">\n            <Text>Sidebar</Text>\n          </Box>\n        </Panel>\n        <PanelResizeHandle />\n        <Panel minSize={30}>\n          <Box height=\"full\" padding=\"sm\">\n            <Text>Main</Text>\n          </Box>\n        </Panel>\n        <PanelResizeHandle />\n        <Panel minSize={20}>\n          <Box height=\"full\" padding=\"sm\">\n            <Text>Aside</Text>\n          </Box>\n        </Panel>\n      </PanelGroup>\n    </div>\n  );\n};\n\nexport const PanelControlledExample: FC<Omit<PanelGroupProps, \"children\">> = (\n  props,\n) => {\n  const [layout, setLayout] = useState<number[]>([30, 70]);\n  const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);\n  const sidebarPanelRef = useRef<ImperativePanelHandle>(null);\n  const mainPanelRef = useRef<ImperativePanelHandle>(null);\n\n  useEffect(() => {\n    if (panelGroupRef.current) {\n      panelGroupRef.current.setLayout?.([35, 65]);\n    }\n  }, []);\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"md\">\n      <Box display=\"flex\" flexDirection=\"column\" gap=\"sm\">\n        <NumberInput\n          label=\"Sidebar size\"\n          placeholder=\"Sidebar\"\n          value={layout[0]}\n          onChange={(value) => sidebarPanelRef.current?.resize?.(value)}\n        />\n        <NumberInput\n          label=\"Main size\"\n          placeholder=\"Main\"\n          value={layout[1]}\n          onChange={(value) => mainPanelRef.current?.resize?.(value)}\n        />\n      </Box>\n      <div\n        style={{\n          height: 400,\n          textAlign: \"center\",\n          border: `1px solid var(--bui-color-border-subtle)`,\n          borderRadius: 4,\n        }}\n      >\n        <PanelGroup\n          {...props}\n          onLayout={(layout) => {\n            setLayout(layout);\n          }}\n          ref={panelGroupRef}\n        >\n          <Panel minSize={20} defaultSize={layout[0]} ref={sidebarPanelRef}>\n            <Box height=\"full\" padding=\"sm\">\n              <Text>Sidebar</Text>\n            </Box>\n          </Panel>\n          <PanelResizeHandle />\n          <Panel minSize={50} defaultSize={layout[1]} ref={mainPanelRef}>\n            <Box height=\"full\" padding=\"sm\">\n              <Text>Main</Text>\n            </Box>\n          </Panel>\n        </PanelGroup>\n      </div>\n    </Box>\n  );\n};",
+  "PointPicker": "export const ImageMagnifierExample: React.FC<{ isDisabled?: boolean }> = ({\n  isDisabled,\n}) => (\n  <PointPicker isDisabled={isDisabled}>\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"lg\">\n      <PointPickerDisplay\n        description={({ coordinates }) => [\n          {\n            label: `X: ${coordinates ? Math.round(coordinates.x) : 0}`,\n            icon: EllipseIcon,\n          },\n          {\n            label: `Y: ${coordinates ? Math.round(coordinates.y) : 0}`,\n            icon: EllipseIcon,\n          },\n        ]}\n        style={{ minWidth: 155 }}\n      />\n      <PointPickerContent>\n        <RichContentBlock />\n      </PointPickerContent>\n    </Box>\n  </PointPicker>\n);\n\nexport const MarkdownMagnifierExample = () => (\n  <PointPicker>\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"lg\">\n      <PointPickerDisplay\n        description={({ coordinates }) => [\n          {\n            label: `X: ${coordinates ? Math.round(coordinates.x) : 0}`,\n            icon: EllipseIcon,\n          },\n          {\n            label: `Y: ${coordinates ? Math.round(coordinates.y) : 0}`,\n            icon: EllipseIcon,\n          },\n        ]}\n        magnifier={{ scale: 10 }}\n      />\n      <PointPickerContent>\n        <RichContentBlock />\n      </PointPickerContent>\n    </Box>\n  </PointPicker>\n);\n\nexport const HighMagnificationExample = () => (\n  <PointPicker>\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"lg\">\n      <PointPickerDisplay\n        description={({ coordinates }) => [\n          {\n            label: `X: ${coordinates ? Math.round(coordinates.x) : 0}`,\n            icon: EllipseIcon,\n          },\n          {\n            label: `Y: ${coordinates ? Math.round(coordinates.y) : 0}`,\n            icon: EllipseIcon,\n          },\n        ]}\n        magnifier={{ scale: 15 }}\n      />\n      <PointPickerContent>\n        <RichContentBlock />\n      </PointPickerContent>\n    </Box>\n  </PointPicker>\n);\n\nexport const CoordinateTrackerExample = () => (\n  <PointPicker>\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"lg\">\n      <PointPickerDisplay\n        description={({ coordinates }) => [\n          {\n            label: `X: ${coordinates ? Math.round(coordinates.x) : 0}`,\n            icon: EllipseIcon,\n          },\n          {\n            label: `Y: ${coordinates ? Math.round(coordinates.y) : 0}`,\n            icon: EllipseIcon,\n          },\n        ]}\n      />\n      <PointPickerContent>\n        <RichContentBlock />\n      </PointPickerContent>\n    </Box>\n  </PointPicker>\n);\n\nexport const RichContentBlock: React.FC<{\n  message?: string;\n  title?: string;\n  size?: \"full\" | \"medium\";\n}> = ({\n  message = \"Hover over different elements to see them magnified\",\n  title = \"Interactive Content Explorer\",\n  size = \"full\",\n}) => (\n  <StyledBox\n    style={{\n      width: 600,\n      padding: \"xl\",\n      backgroundColor: themeVars.color.background.primary.subtle,\n    }}\n  >\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"xl\">\n      {/* Header Section */}\n      <Box>\n        <Text type=\"title\">{title}</Text>\n        <br />\n        <Text type=\"body\" color=\"text.secondary\">\n          {message}\n        </Text>\n      </Box>\n\n      {/* Image Gallery Section with right-aligned image */}\n      <Box display=\"flex\" gap=\"md\" flexWrap=\"wrap\" alignItems=\"flex-end\">\n        <img\n          src={resolvePublicUrl(\"gallery/1.jpg\")}\n          alt=\"Sample 1\"\n          style={{ width: 150, height: 150, objectFit: \"cover\" }}\n          className={sprinkles({ borderRadius: \"sm\" })}\n        />\n        <img\n          src={resolvePublicUrl(\"gallery/2.jpg\")}\n          alt=\"Sample 2\"\n          style={{ width: 150, height: 150, objectFit: \"cover\" }}\n          className={sprinkles({ borderRadius: \"sm\" })}\n        />\n        <Box flex={1} display=\"flex\" justifyContent=\"flex-end\">\n          <img\n            src={resolvePublicUrl(\"gallery/3.jpg\")}\n            alt=\"Sample 3\"\n            style={{ width: 150, height: 150, objectFit: \"cover\" }}\n            className={sprinkles({ borderRadius: \"sm\" })}\n          />\n        </Box>\n      </Box>\n\n      <Box\n        className={sprinkles({\n          padding: \"md\",\n          backgroundColor: \"background.primary.medium\",\n          borderRadius: \"sm\",\n          display: \"flex\",\n          justifyContent: \"center\",\n        })}\n        style={{ maxWidth: 340 }}\n      >\n        <canvas\n          id=\"demo-canvas\"\n          width={300}\n          height={100}\n          style={{ border: \"1px solid #ccc\", background: \"#fff\" }}\n          ref={(el) => {\n            if (el) {\n              const ctx = el.getContext(\"2d\");\n              if (ctx) {\n                ctx.clearRect(0, 0, 300, 100);\n                ctx.fillStyle = \"#e0e7ff\";\n                ctx.fillRect(10, 10, 60, 60);\n                ctx.strokeStyle = \"#6366f1\";\n                ctx.lineWidth = 3;\n                ctx.strokeRect(80, 20, 60, 60);\n                ctx.beginPath();\n                ctx.arc(200, 50, 30, 0, 2 * Math.PI);\n                ctx.fillStyle = \"#a7f3d0\";\n                ctx.fill();\n                ctx.strokeStyle = \"#059669\";\n                ctx.stroke();\n              }\n            }\n          }}\n        >\n          Canvas not supported\n        </canvas>\n      </Box>\n\n      {/* Right-aligned Help Text above the form */}\n      <Box display=\"flex\" justifyContent=\"flex-end\">\n        <Text type=\"helper\">\n          Need help?{\" \"}\n          <Link href=\"mailto:support@example.com\">Contact support</Link>\n        </Text>\n      </Box>\n\n      {/* Form Section */}\n      <Box\n        className={sprinkles({\n          padding: \"lg\",\n          backgroundColor: \"background.primary.medium\",\n          borderRadius: \"sm\",\n        })}\n      >\n        <Box marginBottom=\"md\">\n          <Text type=\"subtitle\">Interactive Form</Text>\n        </Box>\n        <Box display=\"grid\" gap=\"md\" style={{ gridTemplateColumns: \"1fr 1fr\" }}>\n          <TextInput placeholder=\"Enter your name\" label=\"Name\" />\n          <Select\n            label=\"Role\"\n            placeholder=\"Select role\"\n            items={[\n              { id: \"designer\", label: \"Designer\" },\n              { id: \"developer\", label: \"Developer\" },\n              { id: \"manager\", label: \"Manager\" },\n            ]}\n          />\n          <Box style={{ gridColumn: \"1 / span 2\" }}>\n            <Checkbox label=\"Subscribe to newsletter\" />\n          </Box>\n        </Box>\n      </Box>\n\n      {/* Rich Text Section */}\n      {size === \"full\" ? (\n        <Box\n          className={sprinkles({\n            padding: \"md\",\n            backgroundColor: \"background.primary.medium\",\n            borderRadius: \"sm\",\n            width: \"full\",\n          })}\n        >\n          <Box marginBottom=\"sm\">\n            <Text type=\"subtitle\">Rich Text Content</Text>\n          </Box>\n          <Markdown>{`**Features:**\\n- Precision\\n- Smooth interaction\\n> \"Point picking made easy!\"`}</Markdown>\n        </Box>\n      ) : null}\n\n      {/* Buttons: left and right aligned */}\n      <Box display=\"flex\" justifyContent=\"space-between\" gap=\"md\">\n        <ActionButton\n          label=\"Click Me\"\n          onPress={() => {\n            alert(\"Button clicked!\");\n          }}\n          size=\"md\"\n        />\n        <ActionButton label=\"Help\" variant=\"secondary\" size=\"md\" />\n      </Box>\n    </Box>\n  </StyledBox>\n);\n\nexport const RichContentExample: React.FC<\n  {\n    showPickerDisplay?: boolean;\n    title?: string;\n    message?: string;\n  } & Omit<PointPickerProps, \"children\"> & {\n      pickerContentProps?: Omit<PointPickerContentProps, \"children\" | \"ref\">;\n      displayProps?: PointPickerDisplayProps;\n    }\n> = ({\n  showPickerDisplay = true,\n  title,\n  message,\n  pickerContentProps,\n  displayProps,\n  ...props\n}) => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"lg\">\n    <PointPicker {...props}>\n      {showPickerDisplay ? <PointPickerDisplay {...displayProps} /> : null}\n      <PointPickerContent {...pickerContentProps}>\n        <RichContentBlock title={title} message={message} />\n      </PointPickerContent>\n    </PointPicker>\n  </Box>\n);\n\nexport const ProgrammaticFocusExample = () => {\n  const elementHandle = useRef<{\n    focus: () => void;\n  }>(null);\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"lg\">\n      <ActionButton\n        label=\"Focus\"\n        onPress={() => {\n          elementHandle.current?.focus();\n        }}\n      />\n      <PointPicker>\n        <PointPickerDisplay\n          description={[\n            { label: \"Use keyboard to press the button\", icon: EllipseIcon },\n          ]}\n        />\n        <PointPickerContent elementHandle={elementHandle}>\n          <RichContentBlock\n            title=\"Programmatic Focus\"\n            message=\"Use keyboard to press the button and the focus will be moved to the point picker content.\"\n          />\n        </PointPickerContent>\n      </PointPicker>\n    </Box>\n  );\n};\n\nexport const DynamicDescriptionExample = ({ scale }: { scale?: number }) => (\n  <PointPicker>\n    <PointPickerDisplay\n      magnifier={{ scale }}\n      description={({ coordinates }) => [\n        { label: `X: ${coordinates?.x ?? 0}`, icon: EllipseIcon },\n        { label: `Y: ${coordinates?.y ?? 0}`, icon: EllipseIcon },\n      ]}\n    />\n    <PointPickerContent>\n      <RichContentBlock />\n    </PointPickerContent>\n  </PointPicker>\n);\n\nexport const PointsProximityExample = ({\n  type = \"nearest\",\n}: {\n  type?: \"nearest\" | \"within\";\n}) => {\n  const [snapPoints, setSnapPoints] = useState<number>(10_000);\n  const [snapRadius, setSnapRadius] = useState<number>(20);\n  const [showPoints, setShowPoints] = useState(false);\n  const [content, setContent] = useState<Element | null>(null);\n  const [activePoints, setActivePoints] = useState<{ x: number; y: number }[]>(\n    [],\n  );\n\n  const ref = useRef<HTMLDivElement>(null);\n\n  const _snapPoints = useMemo(() => {\n    const contentBounds = content?.getBoundingClientRect();\n\n    if (!contentBounds) return [];\n\n    return Array.from({ length: snapPoints }, () => ({\n      x: Math.random() * contentBounds.width,\n      y: Math.random() * contentBounds.height,\n    }));\n  }, [snapPoints, content]);\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"xl\" ref={ref}>\n      <Box\n        backgroundColor=\"background.primary.medium\"\n        padding=\"xl\"\n        borderRadius=\"sm\"\n        gap=\"xl\"\n        display=\"flex\"\n        flexDirection=\"column\"\n        borderWidth={1}\n        borderStyle=\"solid\"\n        borderColor=\"border.medium\"\n      >\n        <Box display=\"flex\" flexDirection=\"row\" gap=\"3xl\">\n          <NumberInput\n            label=\"Number of Points\"\n            value={snapPoints}\n            onChange={setSnapPoints}\n            minValue={0}\n            step={100}\n          />\n          <NumberInput\n            label=\"Snap Radius\"\n            value={snapRadius}\n            onChange={setSnapRadius}\n            minValue={1}\n          />\n        </Box>\n        <Box display=\"flex\" flexDirection=\"row\" gap=\"3xl\">\n          <Switch\n            label=\"Show Points\"\n            isSelected={showPoints}\n            onChange={setShowPoints}\n            labelPosition=\"left\"\n          />\n        </Box>\n      </Box>\n      <PointPicker>\n        <div style={{ position: \"relative\", display: \"inline-flex\" }}>\n          <PointPickerContent\n            ref={setContent}\n            onPress={console.log}\n            gridLines={\n              type === \"nearest\" && activePoints.length > 0\n                ? (options) => {\n                    if (options.coordinates && activePoints.length > 0) {\n                      return { coordinates: activePoints[0] };\n                    }\n\n                    return false;\n                  }\n                : true\n            }\n          >\n            <RichContentBlock size=\"medium\" />\n          </PointPickerContent>\n          <PointsVisualiser\n            debugPoints={_snapPoints}\n            radius={snapRadius}\n            showSnapPoints={showPoints}\n            type={type}\n            onActivePointsChange={setActivePoints}\n          />\n        </div>\n        <PointPickerDisplay\n          description={({ coordinates }) => [\n            {\n              label: `Pointer/Keyboard position: ${coordinates ? Math.round(coordinates.x) + \", \" + Math.round(coordinates.y) : \"N/A\"}`,\n              icon: EllipseIcon,\n            },\n            type === \"within\"\n              ? {\n                  label: `Active Points: ${activePoints.length}`,\n                  icon: EllipseIcon,\n                }\n              : {\n                  label: `Snapped point: ${activePoints[0] ? Math.round(activePoints[0].x) + \", \" + Math.round(activePoints[0].y) : \"N/A\"}`,\n                  icon: EllipseIcon,\n                },\n          ]}\n          style={{ width: \"100%\" }}\n        />\n      </PointPicker>\n    </Box>\n  );\n};\n\nexport const MultiplePointPickersExample = () => {\n  return (\n    <Box\n      display=\"flex\"\n      gap=\"lg\"\n      flexDirection=\"column\"\n      padding=\"lg\"\n      style={{\n        maxHeight: 500,\n        overflow: \"auto\",\n      }}\n    >\n      {Array.from({ length: 100 }).map((_, index) => (\n        <PointPicker key={index}>\n          <PointPickerDisplay />\n          <PointPickerContent\n            className={`test-${index + 1}`}\n            aria-label={`Test content ${index + 1}`}\n          >\n            <Box display=\"flex\" gap=\"lg\" flexDirection=\"column\">\n              <Text>Test content {index + 1}</Text>\n              <input type=\"text\" aria-label=\"Test input\" />\n            </Box>\n          </PointPickerContent>\n        </PointPicker>\n      ))}\n    </Box>\n  );\n};\n\nexport const TrailingElementExample = () => {\n  return (\n    <PointPicker>\n      <PointPickerDisplay\n        floating={{\n          anchorElement: \"trailing\",\n          placement: \"bottom end\",\n          offset: 8,\n        }}\n      />\n      <PointPickerContent\n        renderTrailingElement={() => (\n          <div\n            style={{\n              width: 150,\n              height: 40,\n              border: \"1px solid black\",\n              backgroundColor: \"rgba(255, 0, 0, 0.5)\",\n            }}\n            data-testid=\"trailing-element\"\n          />\n        )}\n      >\n        <RichContentBlock />\n      </PointPickerContent>\n    </PointPicker>\n  );\n};",
+  "Popover": "export const PopoverExample: React.FC<{\n  popoverProps: Omit<PopoverProps, \"children\">;\n  popoverContentProps?: Omit<PopoverContentProps, \"children\">;\n  children?: React.ReactNode;\n}> = ({\n  popoverProps,\n  popoverContentProps,\n  children = <ActionButton label=\"Open\" />,\n}) => {\n  return (\n    <Popover {...popoverProps}>\n      {/* @ts-expect-error - TODO: fix this */}\n      <PopoverTrigger>{children}</PopoverTrigger>\n      <PopoverContent placement=\"bottom start\" {...popoverContentProps}>\n        {({ close }) => (\n          <Dialog\n            size=\"content\"\n            aria-label=\"content\"\n            className={sprinkles({\n              display: \"flex\",\n              flexDirection: \"column\",\n            })}\n          >\n            <ListBoxExample autoFocus=\"first\" onAction={close} />\n          </Dialog>\n        )}\n      </PopoverContent>\n    </Popover>\n  );\n};\n\nexport const PopoverWithScrollableContentExample: React.FC<{\n  popoverProps: Omit<PopoverProps, \"children\">;\n  popoverContentProps?: Omit<PopoverContentProps, \"children\">;\n  description?: string;\n}> = ({ popoverProps, popoverContentProps, description }) => {\n  return (\n    <ScrollBox description={description}>\n      {(scrollRef) => (\n        <PopoverExample\n          popoverProps={popoverProps}\n          popoverContentProps={{\n            boundaryElement: scrollRef.current || undefined,\n            ...popoverContentProps,\n          }}\n        />\n      )}\n    </ScrollBox>\n  );\n};\n\nexport const PopoverCustomTargetExample = ({\n  popoverProps,\n  popoverContentProps,\n}: {\n  popoverProps?: Omit<PopoverProps, \"children\" | \"type\">;\n  popoverContentProps?: Omit<PopoverContentProps, \"children\">;\n}) => {\n  const targetRef = useRef(null);\n\n  return (\n    <Popover type=\"listbox\" {...popoverProps}>\n      <div\n        ref={targetRef}\n        style={{\n          padding: `0 50px`,\n          border: `1px solid ${themeVars.color.border.medium}`,\n        }}\n      >\n        <PopoverTrigger>\n          <ActionButton label=\"Open\" />\n        </PopoverTrigger>\n      </div>\n      <PopoverContent\n        offset={4}\n        triggerRef={targetRef}\n        {...popoverContentProps}\n      >\n        <ListBoxExample className={popoverContentCn} autoFocus=\"first\" />\n      </PopoverContent>\n    </Popover>\n  );\n};\n\nexport const PopoverArrowExample: React.FC<\n  Omit<\n    PopoverProps & {\n      placement: PopoverContentProps[\"placement\"];\n    },\n    \"children\"\n  >\n> = ({ placement, ...props }) => {\n  return (\n    <Popover {...props}>\n      <PopoverTrigger>\n        <ActionButton label={placement} />\n      </PopoverTrigger>\n      <PopoverContent placement={placement} includeArrow={true}>\n        <Dialog size=\"content\" aria-label=\"content\">\n          <ListBoxExample autoFocus=\"first\" />\n        </Dialog>\n      </PopoverContent>\n    </Popover>\n  );\n};\n\nexport const PopoverTriggerExample: React.FC<\n  Omit<PopoverProps, \"children\" | \"type\"> & PopoverTriggerProps\n> = ({ children }) => {\n  return (\n    <Popover type=\"listbox\">\n      <PopoverTrigger>{children}</PopoverTrigger>\n      <PopoverContent>\n        <Dialog size=\"content\" aria-label=\"content\">\n          <ListBoxExample autoFocus=\"first\" />\n        </Dialog>\n      </PopoverContent>\n    </Popover>\n  );\n};\n\nexport const PopoverWithCustomPositionExample: React.FC<\n  Omit<PopoverProps, \"children\" | \"type\"> &\n    Omit<PopoverTriggerProps, \"children\">\n> = ({ anchorRect: defaultAnchorRect, ...props }) => {\n  const [anchorRect, setAnchorRect] = React.useState<Rect | undefined>(\n    defaultAnchorRect,\n  );\n  const [isOpen, setIsOpen] = React.useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n\n  useInteractOutside({\n    ref,\n    onInteractOutside: () => {\n      setIsOpen(false);\n    },\n  });\n\n  return (\n    <>\n      <div\n        style={{\n          width: 400,\n          height: 300,\n        }}\n        className={sprinkles({\n          borderWidth: 1,\n          borderColor: \"border.medium\",\n          borderStyle: \"solid\",\n          padding: \"xl\",\n          borderRadius: \"sm\",\n        })}\n        ref={ref}\n        onClick={(e) => {\n          flushSync(() => {\n            setIsOpen(false);\n            setAnchorRect({ left: e.clientX, top: e.clientY });\n          });\n          setIsOpen(true);\n        }}\n        data-testid=\"popover-canvas\"\n      >\n        {anchorRect ? (\n          <Popover type=\"listbox\" isOpen={isOpen} {...props}>\n            <PopoverTrigger anchorRect={anchorRect} />\n            <PopoverContent isNonModal={true} includeArrow={true}>\n              <Dialog size=\"content\" aria-label=\"content\">\n                <ListBoxExample autoFocus=\"first\" />\n              </Dialog>\n            </PopoverContent>\n          </Popover>\n        ) : null}\n      </div>\n      <Text\n        type=\"label\"\n        className={sprinkles({\n          display: \"block\",\n          padding: \"lg\",\n        })}\n        style={{ textAlign: \"center\", width: 400 }}\n      >\n        Click inside the above area to position the popover. Click outside to\n        close the popover.\n      </Text>\n    </>\n  );\n};\n\nexport const PopoverEventLeakFixExample: React.FC<{\n  onPointerUp?: () => void;\n}> = ({ onPointerUp }) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [isPointerUpRegistered, setIsPointerUpRegistered] = useState(false);\n\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      setIsPointerUpRegistered(false);\n    }, 100);\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [isPointerUpRegistered]);\n\n  return (\n    <Box\n      ref={ref}\n      style={{ width: 300, height: 300 }}\n      padding=\"lg\"\n      display=\"flex\"\n      flexDirection=\"column\"\n      flex={1}\n      borderWidth={1}\n      gap=\"lg\"\n      borderColor=\"border.medium\"\n      borderStyle=\"solid\"\n      borderRadius=\"sm\"\n    >\n      <Select items={items} placeholder=\"Select an item\" aria-label=\"Label\" />\n\n      <Box\n        display=\"flex\"\n        flex={1}\n        backgroundColor={\n          isPointerUpRegistered\n            ? \"support.error.subtle\"\n            : \"background.primary.strong\"\n        }\n        borderRadius=\"sm\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        padding=\"lg\"\n        onPointerUp={() => {\n          onPointerUp?.();\n          setIsPointerUpRegistered(true);\n        }}\n      >\n        <Text type=\"label\" size=\"sm\" style={{ textAlign: \"center\" }}>\n          Open the Select dropdown and select an item. If the event leaks, the\n          background color will temporarily change.\n        </Text>\n      </Box>\n    </Box>\n  );\n};\n\nexport const PopoverDefaultOpenWithArrowExample = () => {\n  return (\n    <Popover type=\"dialog\" defaultOpen={true}>\n      <PopoverTrigger>\n        <ActionButton label=\"Open\" />\n      </PopoverTrigger>\n      <PopoverContent includeArrow={true}>\n        <Dialog\n          size=\"md\"\n          className={sprinkles({ padding: \"lg\" })}\n          aria-label=\"content\"\n        >\n          <Text type=\"label\">\n            {\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\".repeat(\n              10,\n            )}\n          </Text>\n        </Dialog>\n      </PopoverContent>\n    </Popover>\n  );\n};\n\nexport const PopoverContainedFocusExample = () => {\n  return (\n    <Popover type=\"dialog\">\n      <PopoverTrigger>\n        <ActionButton label=\"Open\" />\n      </PopoverTrigger>\n      <PopoverContent shouldContainFocus={true}>\n        <Dialog\n          size=\"content\"\n          className={sprinkles({\n            padding: \"md\",\n            display: \"flex\",\n            gap: \"xl\",\n            flexDirection: \"column\",\n          })}\n          style={{\n            width: 200,\n          }}\n        >\n          <Text type=\"label\">The focus is contained within the popover.</Text>\n\n          <TextInput\n            label=\"Label\"\n            style={{ width: \"100%\", justifyContent: \"center\" }}\n            placeholder=\"Placeholder\"\n          />\n          <ActionButton\n            label=\"Button\"\n            style={{ width: \"100%\", justifyContent: \"center\" }}\n          />\n        </Dialog>\n      </PopoverContent>\n    </Popover>\n  );\n};\n\nexport const PopoverWithScrollableViewportExample: React.FC<{\n  popoverProps: Omit<PopoverProps, \"children\">;\n  popoverContentProps?: Omit<PopoverContentProps, \"children\">;\n}> = ({ popoverProps, popoverContentProps }) => {\n  return (\n    <div\n      className={sprinkles({\n        height: \"full\",\n        padding: \"xl\",\n        backgroundColor: \"background.primary.subtle\",\n      })}\n      style={{\n        height: \"200vh\", // Creates scrollable content\n      }}\n    >\n      <div\n        className={sprinkles({\n          padding: \"lg\",\n          backgroundColor: \"background.primary.strong\",\n          borderRadius: \"md\",\n          borderWidth: 1,\n          borderStyle: \"solid\",\n          borderColor: \"border.medium\",\n        })}\n        style={{\n          boxShadow: \"0 2px 8px rgba(0,0,0,0.1)\",\n        }}\n      >\n        <Text type=\"label\" style={{ marginBottom: \"16px\", display: \"block\" }}>\n          Scroll the page to test adjustForViewportScroll functionality\n        </Text>\n        <PopoverExample\n          popoverProps={popoverProps}\n          popoverContentProps={popoverContentProps}\n        />\n      </div>\n\n      {/* Add more content to ensure scrolling is possible */}\n      <div style={{ height: \"50vh\", marginTop: \"50px\" }}>\n        <Text type=\"body\">\n          This content ensures the page is scrollable. The popover above should\n          maintain its position relative to the viewport when you scroll.\n        </Text>\n      </div>\n    </div>\n  );\n};",
+  "RadioGroup": "export const colorItems = [\"#000000\", \"#ffffff\", \"#ff0000\"].map((color) => ({\n  id: color,\n  label: parseColor(color).getColorName(\"en\"),\n})) as ListOption[];\n\nexport const CustomRenderItem: React.FC<Omit<RadioGroupProps, \"items\">> = (\n  props,\n) => {\n  return (\n    <RadioGroup items={colorItems} renderOption={colorRenderItem} {...props} />\n  );\n};",
+  "ScrollControlButton": "export const ScrollControlButtonExample: React.FC<ScrollControlButtonProps> = (\n  args,\n) => {\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  return (\n    <>\n      <div\n        style={{\n          overflow: \"auto\",\n          maxHeight: 200,\n          minWidth: 200,\n        }}\n        className={sprinkles({\n          borderColor: \"border.medium\",\n          borderStyle: \"solid\",\n          borderWidth: 1,\n          borderRadius: \"sm\",\n          position: \"relative\",\n        })}\n        ref={ref}\n        data-testid=\"scrollable\"\n      >\n        <div\n          className={sprinkles({\n            display: \"flex\",\n            flexDirection: \"column\",\n          })}\n          style={{ height: 400 }}\n        >\n          <ListBox\n            items={Array.from({ length: 20 }).map((item, index) => ({\n              id: index.toString(),\n              label: `Item ${index}`,\n            }))}\n            aria-label=\"List of items\"\n          />\n        </div>\n      </div>\n      <div\n        className={sprinkles({\n          position: \"relative\",\n          backgroundColor: \"background.primary.subtle\",\n        })}\n      >\n        <ScrollControlButton {...args} scrollRef={ref} />\n      </div>\n    </>\n  );\n};\n\nexport const ScrollControlButtonShortExample: React.FC<\n  ScrollControlButtonProps\n> = (args) => {\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  return (\n    <>\n      <div\n        style={{\n          overflow: \"auto\",\n          maxHeight: 200,\n          minWidth: 200,\n        }}\n        className={sprinkles({\n          borderColor: \"border.medium\",\n          borderStyle: \"solid\",\n          borderWidth: 1,\n          borderRadius: \"sm\",\n          position: \"relative\",\n        })}\n        ref={ref}\n        data-testid=\"scrollable\"\n      >\n        <div\n          className={sprinkles({\n            display: \"flex\",\n            flexDirection: \"column\",\n          })}\n        >\n          <ListBox\n            items={Array.from({ length: 1 }).map((item, index) => ({\n              id: index.toString(),\n              label: `Item ${index}`,\n            }))}\n            aria-label=\"List of items\"\n          />\n        </div>\n      </div>\n      <div\n        className={sprinkles({\n          position: \"relative\",\n          backgroundColor: \"background.primary.subtle\",\n        })}\n      >\n        <ScrollControlButton {...args} scrollRef={ref} />\n      </div>\n    </>\n  );\n};\n\nexport const ScrollControlButtonReversedExample: React.FC<\n  ScrollControlButtonProps\n> = (args) => {\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  return (\n    <>\n      <div\n        className={sprinkles({\n          borderColor: \"border.medium\",\n          borderStyle: \"solid\",\n          borderWidth: 1,\n          borderRadius: \"sm\",\n          position: \"relative\",\n        })}\n        data-testid=\"scrollable\"\n      >\n        <div\n          className={sprinkles({\n            display: \"flex\",\n            flex: 1,\n            flexDirection: \"column-reverse\",\n            typography: \"body.md.regular\",\n          })}\n          ref={ref}\n          style={{\n            overflow: \"auto\",\n            maxHeight: 200,\n            minWidth: 200,\n          }}\n        >\n          <Box paddingLeft=\"xl\">\n            {Array.from({ length: 20 }).map((item, index) => (\n              <Box key={index} paddingY=\"sm\">\n                {index}\n              </Box>\n            ))}\n          </Box>\n        </div>\n      </div>\n      <div\n        className={sprinkles({\n          position: \"relative\",\n          backgroundColor: \"background.primary.subtle\",\n        })}\n      >\n        <ScrollControlButton {...args} scrollRef={ref} />\n      </div>\n    </>\n  );\n};",
+  "Select": "export const SelectExample: React.FC<\n  Omit<React.ComponentProps<typeof Select>, \"items\">\n> = (args) => {\n  return (\n    <Select\n      placeholder=\"Choose an item\"\n      {...args}\n      optionClassName={(item) => item.label}\n      items={items}\n    />\n  );\n};\n\nexport const SelectCustomTriggerExample: React.FC<\n  Omit<React.ComponentProps<typeof Select>, \"items\">\n> = (args) => {\n  return (\n    <Select\n      placeholder=\"Choose an item\"\n      {...args}\n      items={items}\n      renderTrigger={({\n        buttonProps,\n        isOpen,\n        ref,\n        valueProps,\n        selectedValue,\n      }) => (\n        <ActionButton\n          {...buttonProps}\n          ref={ref}\n          label={\n            <span {...valueProps}>\n              {selectedValue?.length\n                ? selectedValue[0]?.label\n                : \"Custom Placeholder\"}\n            </span>\n          }\n          aria-expanded={isOpen}\n          variant=\"popover\"\n        />\n      )}\n    />\n  );\n};\n\nexport const IconSelectExample: React.FC<\n  Omit<IconSelectProps, \"items\" | \"icon\" | \"aria-label\">\n> = (args) => {\n  return (\n    <IconSelect\n      placeholder=\"Choose an item\"\n      {...args}\n      items={items}\n      icon={EllipseIcon}\n      aria-label=\"Aria Label\"\n    />\n  );\n};\n\nexport const SelectWithVirtualizeAutocompleteExample: React.FC<\n  Omit<React.ComponentProps<typeof Select>, \"items\">\n> = (args) => {\n  const list = useListData({\n    initialItems: virtualizeAutocompleteItems,\n  });\n  const { contains } = useFilter({ sensitivity: \"base\" });\n  const filter = (textValue, inputValue) => contains(textValue, inputValue);\n  return (\n    <Virtualizer {...VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.LIST_BOX}>\n      <Autocomplete filter={filter}>\n        <Select\n          {...args}\n          items={list.items}\n          placeholder=\"Select multiple options\"\n          maxHeight={300}\n          style={{\n            width: 400,\n          }}\n        />\n      </Autocomplete>\n    </Virtualizer>\n  );\n};",
+  "Tabs": "export const BasicExample: React.FC<\n  Omit<\n    React.ComponentProps<typeof Tabs> & {\n      includeFocusableContent?: boolean;\n    },\n    \"children\"\n  >\n> = ({ includeFocusableContent, ...args }) => {\n  return (\n    <Tabs keyboardActivation=\"manual\" aria-label=\"Danish Composers\" {...args}>\n      {Object.entries(data).map(([key, { title, content }]) => (\n        <TabItem style={contentStyle} title={title} value={key} key={key}>\n          {content}\n          {includeFocusableContent ? (\n            <Checkbox labelPosition=\"start\" label=\"Focusable content\" />\n          ) : null}\n        </TabItem>\n      ))}\n    </Tabs>\n  );\n};\n\nexport const TabItemExample: React.FC<\n  Omit<React.ComponentProps<typeof TabItem>, \"children\"> & {\n    includeActionButton?: boolean;\n    onActionPress?: AriaButtonProps[\"onPress\"];\n    variant?: \"primary\" | \"ghost\";\n  }\n> = ({ includeActionButton, variant, onActionPress, ...args }) => {\n  return (\n    <Tabs\n      keyboardActivation=\"manual\"\n      aria-label=\"Danish composers\"\n      onRemove={() => {}}\n      variant={variant}\n      actions={\n        includeActionButton\n          ? [\n              {\n                \"aria-label\": \"Add\",\n                onPress: onActionPress,\n                icon: PlusIcon,\n              },\n            ]\n          : undefined\n      }\n    >\n      {Object.entries(data).map(([key, { title, content }]) => (\n        <TabItem\n          style={contentStyle}\n          {...args}\n          title={title}\n          value={key}\n          key={key}\n        >\n          {content}\n        </TabItem>\n      ))}\n    </Tabs>\n  );\n};\n\nexport const AddButtonExample = () => {\n  const [items, setItems] = React.useState([1, 2, 3]);\n\n  return (\n    <Tabs\n      keyboardActivation=\"manual\"\n      aria-label=\"Danish composers\"\n      onRemove={(key) => {\n        if (items.length === 1) {\n          return;\n        }\n        setItems(items.filter((num) => `item-${num}` !== key));\n      }}\n      actions={[\n        {\n          \"aria-label\": \"Add\",\n          onPress: () => {\n            setItems([...items, items.length + 1]);\n          },\n          icon: PlusIcon,\n        },\n      ]}\n    >\n      {items.map((item) => (\n        <TabItem\n          style={contentStyle}\n          title={`Item ${item}`}\n          value={`item-${item}`}\n          key={`item-${item}`}\n        >\n          Content for item {item}\n        </TabItem>\n      ))}\n    </Tabs>\n  );\n};",
+  "TagGroup": "export const items = [\n  { id: \"1\", label: \"Tag 1\" },\n  { id: \"2\", label: \"Tag 2\" },\n  { id: \"3\", label: \"Tag 3\" },\n];\n\nexport const RemovableTagGroup: React.FC<\n  Omit<\n    React.ComponentProps<typeof TagGroup>,\n    \"items\" | \"aria-label\" | \"onRemove\"\n  >\n> = (props) => {\n  const [items_, setItems_] = React.useState(items);\n\n  return (\n    <TagGroup\n      {...props}\n      aria-label=\"Removable Tag Group\"\n      items={items_}\n      onRemove={(item) => {\n        setItems_((items) => items.filter((i) => !item.has(i.id)));\n      }}\n    />\n  );\n};",
+  "TaggedPagination": "export const TaggedPaginationExample: React.FC<\n  React.ComponentProps<typeof TaggedPagination>\n> = (props) => {\n  return (\n    <TaggedPagination\n      valueToLabelMap={\n        new Map([\n          [1, \"One\"],\n          [2, \"Two\"],\n          [4, \"Four\"],\n          [5, \"6\"],\n          [6, \"7\"],\n        ])\n      }\n      label=\"Page\"\n      decrementAriaLabel=\"Decrement\"\n      incrementAriaLabel=\"Increment\"\n      minValue={1}\n      maxValue={4}\n      {...props}\n    />\n  );\n};",
+  "ThemeProvider": "export const ThemeProviderExample = () => {\n  const [theme, setTheme] = useState<string>(\"base\");\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"md\">\n      <ThemeProvider theme={themes[theme as keyof typeof themes].light}>\n        <Box\n          borderRadius=\"md\"\n          padding=\"2xl\"\n          typography=\"label.md.medium\"\n          color=\"text.primary\"\n          backgroundColor=\"background.primary.medium\"\n          borderColor=\"border.medium\"\n          borderStyle=\"solid\"\n          borderWidth={1}\n        >\n          This is theme aware text\n        </Box>\n\n        <Select\n          label=\"Select Theme\"\n          items={[\n            {\n              label: \"Base\",\n              id: \"base\",\n            },\n            {\n              label: \"Nutrient\",\n              id: \"nutrient\",\n            },\n          ]}\n          onSelectionChange={(value) => {\n            setTheme(value as string);\n          }}\n          selectedKey={theme}\n        />\n      </ThemeProvider>\n    </Box>\n  );\n};",
+  "TimeField": "export const TimeFieldExample: React.FC<\n  Omit<TimeFieldProps, \"items\" | \"defaultValue\" | \"value\"> & {\n    defaultValue?: string;\n    value?: string;\n  }\n> = ({ defaultValue, value, ...rest }) => {\n  return (\n    <TimeField\n      {...rest}\n      defaultValue={defaultValue ? parseZonedDateTime(defaultValue) : undefined}\n      value={value ? parseZonedDateTime(value) : undefined}\n    />\n  );\n};",
+  "Toast": "export const ToastExample = ({ onAction }: { onAction?: () => void }) => {\n  const [variant, setVariant] = useState<ToastContent[\"variant\"]>(\"info\");\n  const [shouldIncludeAction, setShouldIncludeAction] = useState(false);\n  const [arrangement, setArrangement] =\n    useState<ToastContent[\"arrangement\"]>(\"single\");\n  const toastQueue = useMemo(\n    () => new ToastQueue<ToastContent>({ maxVisibleToasts: 5 }),\n    [],\n  );\n  const [timeoutValue, setTimeoutValue] = useState(0);\n  const [addedToasts, setAddedToasts] = useState<string[]>([]);\n\n  return (\n    <Box\n      display=\"flex\"\n      flexDirection=\"column\"\n      gap=\"lg\"\n      style={{\n        maxWidth: 300,\n      }}\n    >\n      <GlobalToastRegion toastQueue={toastQueue} />\n      <Text type=\"title\" size=\"md\">\n        Toast UI Controls\n      </Text>\n      <Separator />\n      <Select\n        items={[\n          { id: \"info\", label: \"Info\" },\n          { id: \"warning\", label: \"Warning\" },\n          { id: \"error\", label: \"Error\" },\n          { id: \"success\", label: \"Success\" },\n        ]}\n        defaultSelectedKey=\"info\"\n        label=\"Select a variant\"\n        onSelectionChange={(value) => {\n          setVariant(value as ToastContent[\"variant\"]);\n        }}\n        labelPosition=\"start\"\n      />\n      <Select\n        items={[\n          { id: \"single\", label: \"Single\" },\n          { id: \"multi\", label: \"Multi\" },\n          { id: \"compact\", label: \"Compact\" },\n        ]}\n        defaultSelectedKey=\"single\"\n        label=\"Description Arrangement\"\n        onSelectionChange={(value) => {\n          setArrangement(value as ToastContent[\"arrangement\"]);\n        }}\n        labelPosition=\"start\"\n      />\n      <Switch\n        label=\"Include Action\"\n        isSelected={shouldIncludeAction}\n        onChange={setShouldIncludeAction}\n        labelPosition=\"left\"\n      />\n\n      <Text type=\"title\" size=\"md\" style={{ marginTop: 20 }}>\n        Toast Settings\n      </Text>\n      <Separator />\n      <NumberInput\n        label=\"Timeout\"\n        value={timeoutValue}\n        onChange={setTimeoutValue}\n        minValue={0}\n        description=\"The amount of time in milliseconds before the toast is closed. If 0, the toast will not close automatically.\"\n      />\n\n      <Box display=\"flex\" gap=\"md\" justifyContent=\"flex-end\" marginTop=\"md\">\n        <ActionButton\n          label=\"Show Toast\"\n          onPress={() => {\n            const toastId = toastQueue.add(\n              {\n                title: \"Toast Title\",\n                description: `Toast Description ${addedToasts.length + 1} of variant \"${variant}\"`,\n                variant,\n                onAction: shouldIncludeAction\n                  ? () => {\n                      if (onAction) {\n                        onAction();\n                      } else {\n                        alert(\"Action pressed\");\n                      }\n                    }\n                  : undefined,\n                actionLabel: shouldIncludeAction ? \"Action\" : undefined,\n                arrangement,\n              },\n              {\n                timeout: timeoutValue,\n              },\n            );\n\n            setAddedToasts((prev) => [...prev, toastId]);\n          }}\n        />\n        <ActionButton\n          label=\"Clear All Toasts\"\n          variant=\"secondary\"\n          isDisabled={addedToasts.length === 0}\n          onPress={() => {\n            for (const toastId of addedToasts) {\n              toastQueue.close(toastId);\n            }\n            setAddedToasts([]);\n          }}\n        />\n      </Box>\n    </Box>\n  );\n};\n\nexport const TimeoutExample = () => {\n  const toastQueue = useMemo(\n    () => new ToastQueue<ToastContent>({ maxVisibleToasts: 5 }),\n    [],\n  );\n\n  return (\n    <>\n      <GlobalToastRegion toastQueue={toastQueue} />\n      <Box display=\"flex\" gap=\"md\" justifyContent=\"flex-end\" marginTop=\"md\">\n        <ActionButton\n          label=\"Show Toast with 0ms timeout (no auto-close)\"\n          onPress={() => {\n            toastQueue.add(\n              {\n                title: \"Toast with 0ms timeout\",\n                description: \"Toast description\",\n              },\n              { timeout: 0 },\n            );\n          }}\n        />\n\n        <ActionButton\n          label=\"Show Toast with 1000ms timeout\"\n          onPress={() => {\n            toastQueue.add(\n              {\n                title: \"Toast with 1000ms timeout\",\n                description: \"Toast description\",\n              },\n              { timeout: 1000 },\n            );\n          }}\n        />\n      </Box>\n    </>\n  );\n};\n\nexport const ToastWithAction = () => {\n  const toastQueue = useMemo(\n    () => new ToastQueue<ToastContent>({ maxVisibleToasts: 5 }),\n    [],\n  );\n\n  return (\n    <>\n      <GlobalToastRegion toastQueue={toastQueue} />\n      <ActionButton\n        label=\"Show Toast with Action\"\n        onPress={() => {\n          toastQueue.add(\n            {\n              title: \"Toast with Action\",\n              description: \"Toast description\",\n              onAction: () => {\n                alert(\"Action pressed\");\n              },\n              actionLabel: \"Action\",\n            },\n            {\n              onClose: () => {\n                alert(\"Toast closed\");\n              },\n            },\n          );\n        }}\n      />\n    </>\n  );\n};\n\nexport const VariantsExample = ({\n  shouldIncludeAction = false,\n}: {\n  shouldIncludeAction?: boolean;\n}) => {\n  const toastQueue = useMemo(\n    () => new ToastQueue<ToastContent>({ maxVisibleToasts: 12 }),\n    [],\n  );\n  const [addedToasts, setAddedToasts] = useState<string[]>([]);\n  const [arrangement, setArrangement] =\n    useState<ToastContent[\"arrangement\"]>(\"single\");\n\n  useGranularEffect(\n    () => {\n      for (const toastId of addedToasts) {\n        toastQueue.close(toastId);\n      }\n      setAddedToasts([]);\n    },\n    [arrangement],\n    [addedToasts, toastQueue],\n  );\n\n  useEffect(() => {\n    for (const variant of [\"Info\", \"Warning\", \"Error\", \"Success\"]) {\n      const toastId = toastQueue.add({\n        title: `${variant} Toast`,\n        description: `${variant} toast description`,\n        variant: variant.toLowerCase() as ToastContent[\"variant\"],\n        onAction: shouldIncludeAction\n          ? () => {\n              alert(\"Action pressed\");\n            }\n          : undefined,\n        actionLabel: shouldIncludeAction ? \"Action\" : undefined,\n        arrangement,\n      });\n      setAddedToasts((prev) => [...prev, toastId]);\n    }\n  }, [shouldIncludeAction, toastQueue, arrangement]);\n\n  return (\n    <>\n      <GlobalToastRegion toastQueue={toastQueue} />\n      <Text type=\"title\" size=\"md\">\n        Arrangements\n      </Text>\n      <Box display=\"flex\" gap=\"md\" marginTop=\"md\">\n        <ToggleButton\n          isSelected={arrangement === \"single\"}\n          variant=\"primary\"\n          size=\"sm\"\n          label=\"Single\"\n          onPress={() => {\n            setArrangement(\"single\");\n          }}\n        />\n        <ToggleButton\n          isSelected={arrangement === \"multi\"}\n          variant=\"primary\"\n          size=\"sm\"\n          label=\"Multi\"\n          onPress={() => {\n            setArrangement(\"multi\");\n          }}\n        />\n        <ToggleButton\n          isSelected={arrangement === \"compact\"}\n          variant=\"primary\"\n          size=\"sm\"\n          label=\"Compact\"\n          onPress={() => {\n            setArrangement(\"compact\");\n          }}\n        />\n      </Box>\n    </>\n  );\n};",
+  "ToggleIconButton": "export const ToggleIconButtonExample: React.FC<\n  Omit<ToggleIconButtonProps, \"icon\">\n> = (props) => <ToggleIconButton icon={EllipseIcon} {...props} />;\n\nexport const StateSpecificIcon: React.FC<\n  Omit<ToggleIconButtonProps, \"icon\">\n> = (props) => (\n  <ToggleIconButton\n    {...props}\n    icon={{\n      selected: CheckmarkIcon,\n      unselected: XIcon,\n    }}\n  />\n);",
+  "Toolbar": "export const ToolbarChildren = () => (\n  <>\n    <ActionIconButton icon={EllipseIcon} aria-label=\"Button 1\" />\n    <ActionIconButton icon={EllipseIcon} aria-label=\"Button 2\" />\n    <ActionIconButton icon={EllipseIcon} aria-label=\"Button 3\" />\n    <Link\n      href=\"https://pspdfkit.com\"\n      target=\"_blank\"\n      className={sprinkles({ margin: \"lg\" })}\n    >\n      PSPDFKit\n    </Link>\n    <ActionIconButton icon={EllipseIcon} aria-label=\"Button 4\" />\n    <ActionIconButton icon={EllipseIcon} aria-label=\"Button 5\" />\n    <ActionIconButton icon={EllipseIcon} aria-label=\"Button 6\" />\n  </>\n);\n\nexport const ChildrenWithTooltip = () => (\n  <>\n    <Tooltip size=\"sm\" variant=\"inverse\" text=\"Button 1\" includeArrow={false}>\n      <ActionIconButton icon={EllipseIcon} aria-label=\"Button 1\" />\n    </Tooltip>\n    <Tooltip size=\"sm\" variant=\"inverse\" text=\"Button 2\" includeArrow={false}>\n      <ActionIconButton icon={EllipseIcon} aria-label=\"Button 2\" />\n    </Tooltip>\n    <Tooltip size=\"sm\" variant=\"inverse\" text=\"Button 3\" includeArrow={false}>\n      <ActionIconButton icon={EllipseIcon} aria-label=\"Button 3\" />\n    </Tooltip>\n    <Tooltip size=\"sm\" variant=\"inverse\" text=\"Button 4\" includeArrow={false}>\n      <ActionIconButton icon={EllipseIcon} aria-label=\"Button 4\" />\n    </Tooltip>\n  </>\n);\n\nexport const CollapsibleChildren: React.FC<{\n  onPageAdd?: () => void;\n  onPageRemove?: () => void;\n  onPageMoveRight?: () => void;\n  onInsertDocument?: (file: FileList | null) => void;\n  onDisabledPress?: () => void;\n  maxWidth?: number;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n}> = ({\n  onPageAdd,\n  onPageRemove,\n  onPageMoveRight,\n  onInsertDocument,\n  onDisabledPress,\n  maxWidth: _maxWidth,\n  onKeyDown,\n}) => {\n  const [maxWidth, setMaxWidth] = useState(_maxWidth);\n\n  return (\n    <Box\n      display=\"flex\"\n      gap=\"3xl\"\n      justifyContent=\"center\"\n      flexDirection=\"column\"\n      alignItems=\"center\"\n      style={{ textAlign: \"center\" }}\n    >\n      <Box\n        style={{ width: \"100vw\" }}\n        display=\"flex\"\n        flexGrow={0}\n        flexShrink={0}\n        justifyContent=\"center\"\n      >\n        <Toolbar\n          isCollapsible={true}\n          data-block-id=\"toolbar\"\n          style={{\n            display: \"flex\",\n            maxWidth: maxWidth || \"fit-content\",\n            width: \"100%\",\n            justifyContent: \"center\",\n          }}\n          onKeyDown={onKeyDown}\n          collapsibleMenuProps={{\n            renderTrigger: ({ buttonProps, ref }) => (\n              <ActionIconButton\n                {...buttonProps}\n                ref={ref}\n                icon={MoreIcon}\n                aria-label=\"More\"\n                size=\"lg\"\n                variant=\"toolbar\"\n                tooltip={true}\n              />\n            ),\n          }}\n        >\n          <ActionButton\n            iconStart={EllipseIcon}\n            label=\"Action Button\"\n            variant=\"toolbar\"\n            size=\"lg\"\n            onPress={onPageAdd}\n          />\n          <Separator orientation=\"vertical\" />\n          <ActionIconButton\n            icon={EllipseIcon}\n            variant=\"toolbar\"\n            size=\"lg\"\n            aria-label=\"Action Icon Button\"\n            onPress={onPageRemove}\n          />\n          <Separator orientation=\"vertical\" />\n          <ActionButton\n            iconStart={EllipseIcon}\n            label=\"File Picker\"\n            variant=\"toolbar\"\n            size=\"lg\"\n            onPress={() => {\n              const input = document.createElement(\"input\");\n              input.type = \"file\";\n              input.multiple = true;\n              input.addEventListener(\"change\", (e) => {\n                const target = e.target as HTMLInputElement;\n                const file = target.files;\n                onInsertDocument?.(file);\n              });\n\n              input.click();\n            }}\n          />\n          <Separator orientation=\"vertical\" />\n          <ActionButton\n            iconStart={EllipseIcon}\n            label=\"Disabled\"\n            variant=\"toolbar\"\n            size=\"lg\"\n            isDisabled={true}\n            onPress={onDisabledPress}\n          />\n          <Separator orientation=\"vertical\" />\n          <Popover type=\"dialog\">\n            <PopoverTrigger>\n              <ActionButton\n                iconStart={EllipseIcon}\n                label=\"Popover\"\n                variant=\"toolbar\"\n                size=\"lg\"\n              />\n            </PopoverTrigger>\n            <PopoverContent placement=\"bottom start\">\n              <Dialog\n                variant=\"ghost\"\n                size=\"content\"\n                aria-label=\"Popover Content\"\n              >\n                <div className={sprinkles({ padding: \"lg\" })}>\n                  <ActionButton\n                    label=\"Popover Button\"\n                    onPress={onPageMoveRight}\n                    style={{\n                      width: 150,\n                      textAlign: \"center\",\n                      display: \"block\",\n                    }}\n                  />\n                </div>\n              </Dialog>\n            </PopoverContent>\n          </Popover>\n        </Toolbar>\n      </Box>\n\n      <NumberInput\n        label=\"Max Width\"\n        value={_maxWidth}\n        onChange={setMaxWidth}\n        style={{\n          maxWidth: 300,\n          textAlign: \"start\",\n        }}\n        description=\"Default max width is set to `fit-content`. You can set a custom value here.\"\n      />\n    </Box>\n  );\n};\n\nexport const WithInput = () => {\n  return (\n    <Toolbar\n      className={sprinkles({\n        display: \"flex\",\n        gap: \"md\",\n        flexDirection: \"row\",\n        padding: \"xs\",\n      })}\n    >\n      <ActionButton label=\"First\" />\n      <TextInput defaultValue=\"Hello\" aria-label=\"TextInput\" />\n      <input type=\"text\" defaultValue=\"123\" aria-label=\"Input\" />\n      <NumberInput defaultValue={123} aria-label=\"NumberInput\" />\n      <DateField aria-label=\"DateField\" />\n      <TimeField aria-label=\"TimeField\" />\n      <Pagination\n        defaultValue={50}\n        aria-label=\"Pagination\"\n        maxValue={100}\n        size=\"sm\"\n        variant=\"pinned\"\n      />\n      <SearchInput defaultValue=\"Hello\" aria-label=\"SearchInput\" size=\"sm\" />\n      <ActionButton label=\"Last\" />\n    </Toolbar>\n  );\n};",
+  "Tooltip": "export const CustomElementTooltip = () => (\n  <Tooltip text=\"Tooltip content\" delay={0}>\n    {({ triggerProps, triggerRef }) => (\n      <input\n        {...triggerProps}\n        ref={triggerRef as React.RefObject<HTMLInputElement>}\n      />\n    )}\n  </Tooltip>\n);",
+  "Transform": "export const TransformExample: React.FC<Omit<TransformProps, \"children\">> = (\n  props,\n) => {\n  return (\n    <Transform {...props}>\n      {({ style }) => (\n        <div style={{ width: 100, height: 100, background: \"red\", ...style }} />\n      )}\n    </Transform>\n  );\n};",
+  "UNSAFE_ListBox": "export const items = [\n  { id: \"ellipse\", icon: EllipseIcon, label: \"Ellipse\" },\n  { id: \"square\", icon: RectangleIcon, label: \"Square\" },\n  { id: \"polygon\", icon: PolygonIcon, label: \"Polygon\" },\n] as ListItem[];\n\nexport const fonts = [\"Arial\", \"Palatino\", \"Trebuchet MS\", \"Courier New\"].map(\n  (item) => ({\n    id: item.toLowerCase().replaceAll(\" \", \"-\"),\n    label: item,\n  }),\n);\n\nexport const itemsWithSections = [\n  {\n    id: \"solid\",\n    title: \"Solid\",\n    children: items,\n  },\n  {\n    id: \"dashed\",\n    title: \"Dashed\",\n    children: [\n      {\n        id: \"ellipse-dashed\",\n        icon: EllipseDashedIcon,\n        label: \"Ellipse Dashed\",\n      },\n      {\n        id: \"square-dashed\",\n        icon: RectangleDashedIcon,\n        label: \"Square Dashed\",\n      },\n      {\n        id: \"polygon-dashed\",\n        icon: PolygonDashedIcon,\n        label: \"Polygon Dashed\",\n      },\n    ],\n  },\n] as ListItem[];\n\nexport const itemsWithSectionTitles = [\n  {\n    id: \"solid\",\n    title: \"Solid\",\n    children: items,\n  },\n  {\n    id: \"dashed\",\n    title: \"Dashed\",\n    children: [\n      {\n        id: \"ellipse-dashed\",\n        icon: EllipseDashedIcon,\n        label: \"Ellipse Dashed\",\n      },\n      {\n        id: \"square-dashed\",\n        icon: RectangleDashedIcon,\n        label: \"Square Dashed\",\n      },\n      {\n        id: \"polygon-dashed\",\n        icon: PolygonDashedIcon,\n        label: \"Polygon Dashed\",\n      },\n    ],\n  },\n] as ListItem[];\n\nexport const ListBoxExample: React.FC<\n  Omit<React.ComponentProps<typeof ListBox>, \"items\">\n> = (args) => {\n  return (\n    <ListBox\n      items={items}\n      aria-label=\"List box\"\n      optionClassName={(item) => item.label}\n      optionStyle={() => ({\n        backgroundColor: \"transparent\",\n      })}\n      {...args}\n    />\n  );\n};\n\nexport const ListBoxWithSectionsExample: React.FC<\n  Omit<React.ComponentProps<typeof ListBox>, \"items\">\n> = (args) => {\n  return (\n    <ListBox\n      items={itemsWithSections}\n      aria-label=\"List box with sections\"\n      sectionClassName={(section) => section.title}\n      sectionStyle={() => ({\n        backgroundColor: \"transparent\",\n      })}\n      {...args}\n    />\n  );\n};\n\nexport const DragAndDropListBoxExample: React.FC<\n  Omit<React.ComponentProps<typeof ListBox>, \"items\" | \"onReorder\"> & {\n    customPreview?: boolean;\n  }\n> = ({ orientation, layout, customPreview, ...rest }) => {\n  const list = useListData({\n    initialItems: Array.from({ length: 20 }).map((_, i) => ({\n      id: `item-${i}`,\n      label: `Label ${i}`,\n    })),\n  });\n\n  const { dragAndDropHooks } = useDragAndDrop({\n    onReorder: (e: DroppableCollectionReorderEvent) => {\n      if (e.target.dropPosition === \"before\") {\n        list.moveBefore(e.target.key, e.keys);\n      } else if (e.target.dropPosition === \"after\") {\n        list.moveAfter(e.target.key, e.keys);\n      }\n    },\n    renderDragPreview: customPreview\n      ? (items) => (\n          <Box\n            backgroundColor=\"background.inverse.medium\"\n            display=\"flex\"\n            justifyContent=\"center\"\n            alignItems=\"center\"\n            borderRadius=\"sm\"\n            style={{\n              height: 33,\n              minWidth: 110,\n            }}\n          >\n            <Text style={{ color: themeVars.color.text.inverse }}>\n              {items.length}\n            </Text>\n          </Box>\n        )\n      : undefined,\n  });\n\n  return (\n    <div\n      style={{\n        maxHeight: 350,\n        width: orientation === \"horizontal\" || layout === \"grid\" ? 600 : 200,\n        overflow: \"scroll\",\n        // @ts-expect-error wrong types in csstype\n        scrollbarGutter: \"stable\",\n      }}\n    >\n      <ListBox\n        {...rest}\n        className={sprinkles({\n          display: \"flex\",\n          flexDirection: orientation === \"horizontal\" ? \"row\" : \"column\",\n          paddingY: \"md\",\n          gap: \"sm\",\n          marginX: \"sm\",\n          ...(layout === \"grid\" && {\n            flexWrap: \"wrap\",\n            flexDirection: \"row\",\n            gap: \"none\",\n          }),\n        })}\n        orientation={orientation}\n        layout={layout}\n        renderOption={(item, { isSelected, isFocusVisible }) => {\n          return (\n            <div\n              className={sprinkles.variants({\n                typography: \"label.md.medium\",\n                paddingX: \"2xl\",\n                paddingY: \"md\",\n                color: isSelected ? \"text.inverse\" : \"text.primary\",\n                backgroundColor: isSelected\n                  ? \"focused.default\"\n                  : \"background.primary.subtle\",\n                flexShrink: 0,\n                borderWidth: 1,\n                borderStyle: \"solid\",\n                borderColor: isSelected ? \"transparent\" : \"border.medium\",\n                outlineWidth: 2,\n                outlineStyle: \"solid\",\n                outlineOffset: 1,\n                outlineColor: isFocusVisible\n                  ? \"focused.default\"\n                  : \"transparent\",\n                marginX: layout === \"grid\" ? \"sm\" : \"none\",\n              })}\n              style={{ listStyle: \"none\", minWidth: 110 }}\n            >\n              {item.label}\n            </div>\n          );\n        }}\n        dragAndDropHooks={dragAndDropHooks}\n        items={list.items}\n        aria-label=\"List box\"\n      />\n    </div>\n  );\n};\n\nexport const DynamicListBoxExample: React.FC<\n  Omit<React.ComponentProps<typeof ListBox>, \"items\"> & {\n    isAutoScrollExample?: boolean;\n    initialItemsCount?: number;\n  }\n> = ({ isAutoScrollExample, initialItemsCount = 3, ...args }) => {\n  const [dynamicItems, setDynamicItems] = React.useState(\n    Array.from({ length: initialItemsCount }).map((_, i) => ({\n      id: `item-${i}`,\n      label: `Item ${i}`,\n    })),\n  );\n\n  const focusHandler = React.useRef<ListHandle>(null);\n\n  const [selectedIndex, setSelectedIndex] = React.useState(0);\n\n  const lastIndexRef = React.useRef(initialItemsCount - 1);\n\n  const handleAddItem = () => {\n    setDynamicItems((prevItems) => [\n      ...prevItems,\n      {\n        id: `item-${lastIndexRef.current + 1}`,\n        icon: EllipseIcon,\n        label: `Item ${lastIndexRef.current + 1}`,\n      },\n    ]);\n\n    lastIndexRef.current += 1;\n  };\n\n  useGranularEffect(\n    () => {\n      if (!isAutoScrollExample || !dynamicItems[selectedIndex]?.id) return;\n      focusHandler.current?.scrollIntoView(dynamicItems[selectedIndex].id, {\n        behavior: \"smooth\",\n      });\n    },\n    [selectedIndex],\n    [dynamicItems],\n  );\n\n  const listBoxRef = React.useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const listBox = listBoxRef.current;\n    if (!listBox) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Delete\" || e.key === \"Backspace\") {\n        setDynamicItems((prevItems) =>\n          prevItems.filter((i) => i.id !== dynamicItems[selectedIndex].id),\n        );\n      }\n    };\n\n    listBox.addEventListener(\"keydown\", handleKeyDown);\n\n    return () => {\n      listBox.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, [dynamicItems, selectedIndex]);\n\n  return (\n    <Box\n      display=\"flex\"\n      flexDirection=\"column\"\n      gap=\"xl\"\n      alignItems=\"center\"\n      style={{\n        width: 200,\n      }}\n    >\n      {!isAutoScrollExample && (\n        <ActionButton\n          onPress={handleAddItem}\n          label=\"Add Item\"\n          style={{ width: \"100%\", justifyContent: \"center\" }}\n        />\n      )}\n\n      <NumberInput\n        value={selectedIndex}\n        label=\"Selected Index\"\n        onChange={setSelectedIndex}\n        minValue={0}\n        maxValue={dynamicItems.length - 1}\n      />\n\n      <div\n        style={{\n          maxHeight: isAutoScrollExample ? 220 : undefined,\n          overflow: \"auto\",\n          width: \"100%\",\n        }}\n      >\n        <ListBox\n          {...args}\n          ref={listBoxRef}\n          style={{ width: \"100%\" }}\n          items={dynamicItems}\n          aria-label=\"List box\"\n          selectedKeys={[dynamicItems[selectedIndex]?.id]}\n          onSelectionChange={(keys) => {\n            setSelectedIndex(\n              dynamicItems.findIndex((i) => i.id === [...keys][0]),\n            );\n          }}\n          listBoxHandle={focusHandler}\n          renderOption={(item, { isFocusVisible, isSelected }) => {\n            return (\n              <div\n                style={{\n                  outline: isFocusVisible\n                    ? `2px solid ${themeVars.color.focused.default}`\n                    : \"none\",\n                  outlineOffset: -2,\n                  cursor: \"pointer\",\n                  backgroundColor: isSelected\n                    ? themeVars.color.background.primary.strong\n                    : \"transparent\",\n                  zIndex: isFocusVisible ? 1 : \"auto\",\n                }}\n              >\n                <Box\n                  color={\n                    isSelected ? \"icon.interactive.enabled\" : \"icon.primary\"\n                  }\n                  typography=\"label.md.medium\"\n                  paddingY=\"md\"\n                  display=\"flex\"\n                  flexDirection=\"row\"\n                  alignItems=\"center\"\n                  justifyContent=\"space-between\"\n                  paddingLeft=\"md\"\n                >\n                  {item.label}\n\n                  <ActionIconButton\n                    icon={XIcon}\n                    aria-label=\"Delete\"\n                    size=\"xs\"\n                    UNSAFE_isVisuallyInteractiveOnly={true}\n                    onPress={() => {\n                      setDynamicItems((prevItems) =>\n                        prevItems.filter((i) => i.id !== item.id),\n                      );\n                    }}\n                  />\n                </Box>\n              </div>\n            );\n          }}\n        />\n      </div>\n\n      {isAutoScrollExample ? (\n        <Text type=\"helper\" size=\"sm\" style={{ textAlign: \"center\" }}>\n          Change the selected index to see the item scroll into view.\n        </Text>\n      ) : null}\n    </Box>\n  );\n};\n\nexport const VirtualListBoxListLayoutExample: React.FC<\n  Omit<React.ComponentProps<typeof ListBox>, \"items\">\n> = (args) => {\n  return (\n    <Virtualizer {...VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.LIST_BOX}>\n      <ListBox\n        {...args}\n        items={Array.from({ length: 10_000 }).map((_, i) => ({\n          id: `item-${i}`,\n          label: `Item ${i}`,\n        }))}\n        style={{\n          height: 250,\n          width: 300,\n          overflow: \"auto\",\n        }}\n        className={sprinkles.variants({\n          outlineWidth: 1,\n          outlineStyle: \"solid\",\n          outlineColor: \"border.medium\",\n        })}\n        aria-label=\"List box\"\n      />\n    </Virtualizer>\n  );\n};\n\nexport const VirtualListBoxGridLayoutExample: React.FC<\n  Omit<React.ComponentProps<typeof ListBox>, \"items\">\n> = (args) => {\n  return (\n    <Virtualizer\n      layout={GridLayout}\n      layoutOptions={{\n        minItemSize: new Size(100, 100),\n      }}\n    >\n      <ListBox\n        {...args}\n        layout=\"grid\"\n        items={Array.from({ length: 10_000 }).map((_, i) => ({\n          id: `item-${i}`,\n          label: `Item ${i}`,\n        }))}\n        style={{\n          height: 250,\n          width: 355,\n          overflow: \"auto\",\n        }}\n        className={sprinkles.variants({\n          outlineWidth: 1,\n          outlineStyle: \"solid\",\n          outlineColor: \"border.medium\",\n        })}\n        renderOption={(item, { isFocusVisible, isSelected }) => {\n          return (\n            <Box\n              style={{ width: 100, height: 100 }}\n              backgroundColor={\n                isSelected\n                  ? \"support.success.subtle\"\n                  : \"background.primary.medium\"\n              }\n              outlineWidth={isFocusVisible ? 2 : undefined}\n              outlineStyle=\"solid\"\n              outlineColor={isFocusVisible ? \"focused.default\" : \"transparent\"}\n              outlineOffset={-1}\n              display=\"flex\"\n              alignItems=\"center\"\n              justifyContent=\"center\"\n            >\n              <Text type=\"label\" size=\"md\">\n                {item.label}\n              </Text>\n            </Box>\n          );\n        }}\n      />\n    </Virtualizer>\n  );\n};\n\nexport const ScrollIntoViewExample: React.FC = () => {\n  const listBoxHandle = React.useRef<ListHandle>(null);\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"md\" style={{ width: 300 }}>\n      <Box display=\"flex\" gap=\"sm\">\n        <ActionButton\n          label=\"Scroll to Item 0\"\n          onPress={() => listBoxHandle.current?.scrollIntoView(\"item-0\")}\n        />\n        <ActionButton\n          label=\"Scroll to Item 15\"\n          onPress={() => listBoxHandle.current?.scrollIntoView(\"item-15\")}\n        />\n      </Box>\n\n      <div\n        style={{\n          maxHeight: 200,\n          overflow: \"auto\",\n          border: \"1px solid #ccc\",\n        }}\n      >\n        <ListBox\n          items={Array.from({ length: 20 }).map((_, i) => ({\n            id: `item-${i}`,\n            label: `Item ${i}`,\n          }))}\n          listBoxHandle={listBoxHandle}\n          aria-label=\"Scrollable list\"\n        />\n      </div>\n    </Box>\n  );\n};\n\nexport const VirtualizedScrollIntoViewExample: React.FC = () => {\n  const listBoxHandle = React.useRef<ListHandle>(null);\n  const items = Array.from({ length: 10_000 }).map((_, i) => ({\n    id: `item-${i}`,\n    label: `Item ${i}`,\n  }));\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"md\" style={{ width: 300 }}>\n      <Box display=\"flex\" flexDirection=\"column\" gap=\"sm\">\n        <Text type=\"body\" size=\"sm\">\n          Scroll to items in a virtualized list (10,000 items). Items that\n          aren&apos;t currently rendered will be scrolled into view.\n        </Text>\n        <Box display=\"flex\" gap=\"sm\" flexWrap=\"wrap\">\n          <ActionButton\n            label=\"Scroll to Item 0\"\n            onPress={() => listBoxHandle.current?.scrollIntoView(\"item-0\")}\n          />\n          <ActionButton\n            label=\"Scroll to Item 100\"\n            onPress={() => listBoxHandle.current?.scrollIntoView(\"item-100\")}\n          />\n          <ActionButton\n            label=\"Scroll to Item 1000\"\n            onPress={() => listBoxHandle.current?.scrollIntoView(\"item-1000\")}\n          />\n          <ActionButton\n            label=\"Scroll to Item 5000\"\n            onPress={() => listBoxHandle.current?.scrollIntoView(\"item-5000\")}\n          />\n          <ActionButton\n            label=\"Scroll to Item 9999\"\n            onPress={() => listBoxHandle.current?.scrollIntoView(\"item-9999\")}\n          />\n        </Box>\n      </Box>\n\n      <Virtualizer {...VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.LIST_BOX}>\n        <ListBox\n          items={items}\n          listBoxHandle={listBoxHandle}\n          style={{\n            height: 300,\n            width: 300,\n            overflow: \"auto\",\n          }}\n          className={sprinkles.variants({\n            outlineWidth: 1,\n            outlineStyle: \"solid\",\n            outlineColor: \"border.medium\",\n          })}\n          aria-label=\"Virtualized scrollable list\"\n        />\n      </Virtualizer>\n    </Box>\n  );\n};"
+}