@neo4j-ndl/react 4.25.7 → 5.0.0-alpha.0.3d763f7

package/lib/cjs/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/tabs/Tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { useMergeRefs } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport {\n  type CommonProps,\n  type PolymorphicCommonProps,\n  type TooltipObjectProps,\n} from '../_common/types';\nimport { ArrowLeftCircleIconOutline } from '../icons/generated/heroIcons/ArrowLeftCircleIconOutline';\nimport { ArrowRightCircleIconOutline } from '../icons/generated/heroIcons/ArrowRightCircleIconOutline';\nimport { Tooltip } from '../tooltip';\nimport { Typography } from '../typography';\nimport { useTabsScrollOverflow } from './use-tabs-scroll-overflow';\n\n// Reusable scroll button component\nconst ScrollButton = ({\n  direction,\n  isVisible,\n  onClick,\n  onBackground,\n}: {\n  direction: 'left' | 'right';\n  isVisible: boolean;\n  onClick: () => void;\n  onBackground: React.ComponentProps<typeof TabsComponent>['onBackground'];\n}) => {\n  const Icon =\n    direction === 'left'\n      ? ArrowLeftCircleIconOutline\n      : ArrowRightCircleIconOutline;\n  const positionClass =\n    direction === 'left' ? 'ndl-scroll-left-item' : 'ndl-scroll-right-item';\n\n  return (\n    <div\n      className={classNames('ndl-scroll-item', positionClass, {\n        'ndl-scroll-item-hidden': !isVisible,\n        'ndl-scroll-item-on-background-default': onBackground === 'default',\n        'ndl-scroll-item-on-background-weak': onBackground === 'weak',\n      })}\n    >\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        className=\"ndl-scroll-icon-wrapper\"\n        onClick={onClick}\n        aria-hidden=\"true\"\n      >\n        <Icon className=\"ndl-scroll-icon\" />\n      </button>\n    </div>\n  );\n};\n\ntype TabId = string;\ntype Size = 'small' | 'large';\ntype Fill = 'underline' | 'filled';\n\ntype BaseTabsProps<T extends TabId> = {\n  /** The currently active tabId */\n  value: T;\n  /** Callback function triggered when a new tab is selected */\n  onChange: (event: T) => void;\n  // TODO v5: add leadingVisual & trailingVisual props, to allow for children not to have flex (allowing text ellipsis). Also add a tooltip when ellipsing.\n  /** The content dislayed in the tabs */\n  children: React.ReactNode | string;\n  /** The fill type of the tabs */\n  fill?: Fill;\n  /**  The size of the tabs */\n  size?: Size;\n  /** What background the Tabs is placed on. This affects the gradient background of the scroll navigation buttons. */\n  onBackground?: 'weak' | 'default';\n};\n\ntype TabsContextType<T extends TabId> = Required<\n  Pick<BaseTabsProps<T>, 'fill' | 'size' | 'onChange' | 'value'>\n> & {\n  registerTab: (tabId: T, ref: React.RefObject<HTMLElement | null>) => void;\n  unregisterTab: (tabId: T) => void;\n  scrollTabIntoView: (tabId: T) => void;\n  firstTabId: T | null;\n  isValuePresent: boolean;\n};\n\n// oxlint-disable-next-line @typescript-eslint/no-explicit-any\nconst TabsContext = React.createContext<TabsContextType<any> | null>(null);\n\nconst useTabsContext = () => {\n  const context = useContext(TabsContext);\n\n  if (context === null) {\n    throw new Error('Tab used without context');\n  }\n\n  return context;\n};\n\nconst getTabPanelId = (tabId: TabId) => `tabpanel-${tabId}`;\n\nconst getGeneralTabClasses = (size: Size, fill: Fill) => {\n  return {\n    'ndl-filled-tab': fill === 'filled',\n    'ndl-large': size === 'large',\n    'ndl-small': size === 'small',\n    'ndl-underline-tab': fill === 'underline',\n  };\n};\n\nconst TabsComponent = <U extends TabId, T extends React.ElementType = 'div'>({\n  children,\n  size = 'large',\n  fill = 'underline',\n  onChange,\n  value,\n  onBackground = 'weak',\n  className,\n  style,\n  as,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, BaseTabsProps<U>>) => {\n  const tabRefs = useRef<Map<U, React.RefObject<HTMLElement | null>>>(\n    new Map(),\n  );\n  const containerRef = useRef<HTMLElement>(null);\n  const scrollContainerRef = useRef<HTMLDivElement>(null);\n  const mergedRef = useMergeRefs([containerRef, ref]);\n  const [firstTabId, setFirstTabId] = useState<U | null>(null);\n  const [isValuePresent, setIsValuePresent] = useState(false);\n  const valueRef = useRef(value);\n\n  // Use the custom hook for scroll overflow behavior\n  const { scrollState, scrollToNextItem, checkOverflow } =\n    useTabsScrollOverflow(scrollContainerRef);\n\n  useEffect(() => {\n    valueRef.current = value;\n    setIsValuePresent(tabRefs.current.has(value));\n  }, [value]);\n\n  const registerTab = useCallback(\n    (tabId: U, tabRef: React.RefObject<HTMLElement | null>) => {\n      tabRefs.current.set(tabId, tabRef);\n      const first = tabRefs.current.keys().next().value ?? null;\n      setFirstTabId((prev) => (prev === first ? prev : first));\n\n      if (tabId === valueRef.current) {\n        setIsValuePresent(true);\n      }\n    },\n    [],\n  );\n\n  const unregisterTab = useCallback((tabId: U) => {\n    tabRefs.current.delete(tabId);\n    const first = tabRefs.current.keys().next().value ?? null;\n    setFirstTabId((prev) => (prev === first ? prev : first));\n\n    if (tabId === valueRef.current) {\n      setIsValuePresent(false);\n    }\n  }, []);\n\n  // Check overflow when children change\n  useEffect(() => {\n    checkOverflow();\n  }, [checkOverflow, children]);\n\n  const scrollTabIntoView = useCallback((tabId: U) => {\n    const tabRef = tabRefs.current.get(tabId);\n    const scrollContainer = scrollContainerRef.current;\n\n    if (tabRef?.current && scrollContainer) {\n      const tabRect = tabRef.current.getBoundingClientRect();\n      const containerRect = scrollContainer.getBoundingClientRect();\n      const containerCenter = containerRect.left + containerRect.width / 2;\n\n      const targetScrollLeft =\n        scrollContainer.scrollLeft +\n        (tabRect.left - containerCenter + tabRect.width / 2);\n\n      scrollContainer.scrollTo({\n        behavior: 'smooth',\n        left: targetScrollLeft,\n      });\n    }\n  }, []);\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {\n        return;\n      }\n\n      event.preventDefault();\n\n      const tabIds = Array.from(tabRefs.current.keys());\n      const focusedElement = document.activeElement;\n\n      // Find the currently focused tab\n      let currentIndex = -1;\n      for (let index = 0; index < tabIds.length; index++) {\n        const tabRef = tabRefs.current.get(tabIds[index]);\n        if (tabRef?.current === focusedElement) {\n          currentIndex = index;\n          break;\n        }\n      }\n\n      // If no tab is focused, focus the active tab. Or the first tab if the active tab is not present.\n      if (currentIndex === -1) {\n        const activeTabRef = tabRefs.current.get(value);\n        if (activeTabRef?.current) {\n          activeTabRef.current.focus();\n        } else if (!isValuePresent && firstTabId !== null) {\n          const firstTabRef = tabRefs.current.get(firstTabId);\n          if (firstTabRef?.current) {\n            firstTabRef.current.focus();\n          }\n        }\n        return;\n      }\n\n      let nextIndex: number;\n\n      if (event.key === 'ArrowRight') {\n        nextIndex = currentIndex === tabIds.length - 1 ? 0 : currentIndex + 1;\n      } else {\n        nextIndex = currentIndex === 0 ? tabIds.length - 1 : currentIndex - 1;\n      }\n\n      const nextTabId = tabIds[nextIndex];\n      const nextTabRef = tabRefs.current.get(nextTabId);\n\n      if (nextTabRef?.current) {\n        nextTabRef.current.focus();\n        scrollTabIntoView(nextTabId);\n      }\n    },\n    [value, scrollTabIntoView, firstTabId, isValuePresent],\n  );\n\n  const classes = classNames(\n    'ndl-tabs',\n    getGeneralTabClasses(size, fill),\n    className,\n  );\n\n  const Component: React.ElementType = as ?? 'div';\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      role=\"tablist\"\n      aria-orientation=\"horizontal\"\n      onKeyDown={handleKeyDown}\n      ref={mergedRef}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <ScrollButton\n        direction=\"left\"\n        isVisible={scrollState.isLeftVisible}\n        onClick={() => scrollToNextItem('left')}\n        onBackground={onBackground}\n      />\n      <ScrollButton\n        direction=\"right\"\n        isVisible={scrollState.isRightVisible}\n        onClick={() => scrollToNextItem('right')}\n        onBackground={onBackground}\n      />\n      <TabsContext.Provider\n        value={{\n          fill,\n          firstTabId,\n          isValuePresent,\n          onChange,\n          registerTab,\n          scrollTabIntoView,\n          size,\n          unregisterTab,\n          value,\n        }}\n      >\n        <div className=\"ndl-tabs-container\" ref={scrollContainerRef}>\n          {children}\n        </div>\n      </TabsContext.Provider>\n    </Component>\n  );\n};\n\nTabsComponent.displayName = 'Tabs';\n\n/**\n * @remarks\n * When the `description` prop is set, hovering over the tab will show a tooltip with the text provided in the `description` prop. `tooltipProps` can be used to customize the tooltip appearance. The `TooltipObjectProps` type is defined as: `{ root?: Partial<React.ComponentProps<typeof Tooltip>>; trigger?: Partial<React.ComponentProps<typeof Tooltip.Trigger>>; content?: Partial<React.ComponentProps<typeof Tooltip.Content>>; }`, see the Tooltip component for more details.\n */\ntype TabProps<T extends TabId> = {\n  /** The id of the tab */\n  id: T;\n  /** The content of the tab */\n  children: React.ReactNode | string;\n  /** A string that will be shown as a tooltip when hovering over the button  it also acts as an aria-label- {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label} */\n  description?: string;\n  /** Props for the tooltip component. */\n  tooltipProps?: TooltipObjectProps;\n  /** Additional class name */\n  className?: string;\n  /** Whether the tab is disabled */\n  isDisabled?: boolean;\n};\n\nconst TabsTab = <\n  U extends TabId = TabId,\n  T extends React.ElementType = 'button',\n>({\n  children,\n  id: tabId,\n  isDisabled = false,\n  className,\n  description,\n  tooltipProps,\n  style,\n  as,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, TabProps<U>>) => {\n  const {\n    size,\n    fill,\n    value,\n    onChange,\n    registerTab,\n    unregisterTab,\n    scrollTabIntoView,\n    firstTabId,\n    isValuePresent,\n  } = useTabsContext();\n  const internalRef = useRef<HTMLElement>(null);\n\n  // Create a merged ref that handles both ref objects and ref functions\n  const mergedRef = useMergeRefs([\n    internalRef as React.RefObject<HTMLElement>,\n    ref as React.RefObject<HTMLElement>,\n  ]);\n\n  // Register/unregister tab for keyboard navigation\n  useEffect(() => {\n    registerTab(tabId, internalRef);\n\n    return () => {\n      unregisterTab(tabId);\n    };\n  }, [tabId, registerTab, unregisterTab]);\n\n  const baseClasses = classNames({\n    ...getGeneralTabClasses(size, fill),\n    'ndl-disabled': isDisabled,\n    'ndl-selected': value === tabId,\n  });\n\n  const Component: React.ElementType = as ?? 'button';\n\n  const classes = classNames('ndl-tab', baseClasses, className);\n\n  // Only the active tab should be in the tab sequence initially\n  // Other tabs can be focused via arrow keys but are not in tab sequence\n  const tabIndex =\n    value === tabId || (!isValuePresent && tabId === firstTabId) ? 0 : -1;\n\n  return (\n    <Tooltip\n      type=\"simple\"\n      {...tooltipProps?.root}\n      isDisabled={description === undefined}\n    >\n      <Tooltip.Trigger {...tooltipProps?.trigger} hasButtonWrapper>\n        <Component\n          className={classes}\n          style={style}\n          onClick={() => {\n            if (!isDisabled) {\n              onChange(tabId);\n              scrollTabIntoView(tabId);\n            }\n          }}\n          role=\"tab\"\n          id={tabId}\n          aria-disabled={isDisabled}\n          aria-label={description}\n          aria-selected={value === tabId}\n          aria-controls={getTabPanelId(tabId)}\n          tabIndex={tabIndex}\n          ref={mergedRef}\n          {...restProps}\n          {...htmlAttributes}\n        >\n          <span className=\"ndl-tab-content\">{children}</span>\n          {fill === 'underline' && <span className=\"ndl-tab-underline\" />}\n        </Component>\n      </Tooltip.Trigger>\n      <Tooltip.Content {...tooltipProps?.content}>\n        {description}\n      </Tooltip.Content>\n    </Tooltip>\n  );\n};\n\nTabsTab.displayName = 'Tabs.Tab';\n\ntype TabPanelProps = {\n  /** The content displayed in the tab panel */\n  children: React.ReactNode;\n  /** The currently selected tabId. The tab is visible if the value is equal to the tabId */\n  value: TabId;\n  /** The id of the tab panel */\n  tabId: TabId;\n  /** Additional class name */\n  className?: string;\n};\n\nconst TabsTabPanel = <T extends React.ElementType = 'div'>({\n  as,\n  children,\n  value,\n  tabId,\n  style,\n  className,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, TabPanelProps>) => {\n  const Component: React.ElementType = as ?? 'div';\n\n  return (\n    <>\n      {value === tabId ? (\n        <Component\n          role=\"tabpanel\"\n          id={getTabPanelId(tabId)}\n          aria-labelledby={tabId}\n          style={style}\n          className={classNames(className)}\n          ref={ref}\n          {...restProps}\n          {...htmlAttributes}\n        >\n          {children}\n        </Component>\n      ) : null}\n    </>\n  );\n};\n\nTabsTabPanel.displayName = 'Tabs.TabPanel';\n\ntype TabBadgeProps = {\n  /** The content of the badge */\n  children: React.ReactNode;\n};\n\nconst TabBadge = ({\n  children,\n  ref,\n  htmlAttributes,\n  style,\n  className,\n  ...restProps\n}: CommonProps<'span', TabBadgeProps>) => {\n  const classes = classNames('ndl-tab-badge', className);\n  return (\n    <Typography\n      ref={ref}\n      variant=\"subheading-small\"\n      className={classes}\n      style={style}\n      htmlAttributes={htmlAttributes}\n      {...restProps}\n    >\n      {children}\n    </Typography>\n  );\n};\n\nconst Tabs = Object.assign(TabsComponent, {\n  Badge: TabBadge,\n  Tab: TabsTab,\n  TabPanel: TabsTabPanel,\n});\n\nexport { Tabs };\n"]}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/tabs/Tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { useMergeRefs } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport {\n  type CommonProps,\n  type PolymorphicCommonProps,\n  type TooltipObjectProps,\n} from '../_common/types';\nimport { ArrowLeftCircleIconOutline } from '../icons/generated/heroIcons/ArrowLeftCircleIconOutline';\nimport { ArrowRightCircleIconOutline } from '../icons/generated/heroIcons/ArrowRightCircleIconOutline';\nimport { Tooltip } from '../tooltip';\nimport { Typography } from '../typography';\nimport { useTabsScrollOverflow } from './use-tabs-scroll-overflow';\n\n// Reusable scroll button component\nconst ScrollButton = ({\n  direction,\n  isVisible,\n  onClick,\n  onBackground,\n}: {\n  direction: 'left' | 'right';\n  isVisible: boolean;\n  onClick: () => void;\n  onBackground: React.ComponentProps<typeof TabsComponent>['onBackground'];\n}) => {\n  const Icon =\n    direction === 'left'\n      ? ArrowLeftCircleIconOutline\n      : ArrowRightCircleIconOutline;\n  const positionClass =\n    direction === 'left' ? 'ndl-scroll-left-item' : 'ndl-scroll-right-item';\n\n  return (\n    <div\n      className={classNames('ndl-scroll-item', positionClass, {\n        'ndl-scroll-item-hidden': !isVisible,\n        'ndl-scroll-item-on-background-default': onBackground === 'default',\n        'ndl-scroll-item-on-background-weak': onBackground === 'weak',\n      })}\n    >\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        className=\"ndl-scroll-icon-wrapper\"\n        onClick={onClick}\n        aria-hidden=\"true\"\n      >\n        <Icon className=\"ndl-scroll-icon\" />\n      </button>\n    </div>\n  );\n};\n\ntype TabId = string;\ntype Size = 'small' | 'large';\ntype Fill = 'underline' | 'filled';\n\ntype BaseTabsProps<T extends TabId> = {\n  /** The currently active tabId */\n  value: T;\n  /** Callback function triggered when a new tab is selected */\n  onChange: (event: T) => void;\n  /** The content dislayed in the tabs */\n  children: React.ReactNode | string;\n  /** The fill type of the tabs */\n  fill?: Fill;\n  /**  The size of the tabs */\n  size?: Size;\n  /** What background the Tabs is placed on. This affects the gradient background of the scroll navigation buttons. */\n  onBackground?: 'weak' | 'default';\n};\n\ntype TabsContextType<T extends TabId> = Required<\n  Pick<BaseTabsProps<T>, 'fill' | 'size' | 'onChange' | 'value'>\n> & {\n  registerTab: (tabId: T, ref: React.RefObject<HTMLElement | null>) => void;\n  unregisterTab: (tabId: T) => void;\n  scrollTabIntoView: (tabId: T) => void;\n  firstTabId: T | null;\n  isValuePresent: boolean;\n};\n\n// oxlint-disable-next-line @typescript-eslint/no-explicit-any\nconst TabsContext = React.createContext<TabsContextType<any> | null>(null);\n\nconst useTabsContext = () => {\n  const context = useContext(TabsContext);\n\n  if (context === null) {\n    throw new Error('Tab used without context');\n  }\n\n  return context;\n};\n\nconst getTabPanelId = (tabId: TabId) => `tabpanel-${tabId}`;\n\nconst getGeneralTabClasses = (size: Size, fill: Fill) => {\n  return {\n    'ndl-filled-tab': fill === 'filled',\n    'ndl-large': size === 'large',\n    'ndl-small': size === 'small',\n    'ndl-underline-tab': fill === 'underline',\n  };\n};\n\nconst TabsComponent = <U extends TabId, T extends React.ElementType = 'div'>({\n  children,\n  size = 'large',\n  fill = 'underline',\n  onChange,\n  value,\n  onBackground = 'weak',\n  className,\n  style,\n  as,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, BaseTabsProps<U>>) => {\n  const tabRefs = useRef<Map<U, React.RefObject<HTMLElement | null>>>(\n    new Map(),\n  );\n  const containerRef = useRef<HTMLElement>(null);\n  const scrollContainerRef = useRef<HTMLDivElement>(null);\n  const mergedRef = useMergeRefs([containerRef, ref]);\n  const [firstTabId, setFirstTabId] = useState<U | null>(null);\n  const [isValuePresent, setIsValuePresent] = useState(false);\n  const valueRef = useRef(value);\n\n  // Use the custom hook for scroll overflow behavior\n  const { scrollState, scrollToNextItem, checkOverflow } =\n    useTabsScrollOverflow(scrollContainerRef);\n\n  useEffect(() => {\n    valueRef.current = value;\n    setIsValuePresent(tabRefs.current.has(value));\n  }, [value]);\n\n  const registerTab = useCallback(\n    (tabId: U, tabRef: React.RefObject<HTMLElement | null>) => {\n      tabRefs.current.set(tabId, tabRef);\n      const first = tabRefs.current.keys().next().value ?? null;\n      setFirstTabId((prev) => (prev === first ? prev : first));\n\n      if (tabId === valueRef.current) {\n        setIsValuePresent(true);\n      }\n    },\n    [],\n  );\n\n  const unregisterTab = useCallback((tabId: U) => {\n    tabRefs.current.delete(tabId);\n    const first = tabRefs.current.keys().next().value ?? null;\n    setFirstTabId((prev) => (prev === first ? prev : first));\n\n    if (tabId === valueRef.current) {\n      setIsValuePresent(false);\n    }\n  }, []);\n\n  // Check overflow when children change\n  useEffect(() => {\n    checkOverflow();\n  }, [checkOverflow, children]);\n\n  const scrollTabIntoView = useCallback((tabId: U) => {\n    const tabRef = tabRefs.current.get(tabId);\n    const scrollContainer = scrollContainerRef.current;\n\n    if (tabRef?.current && scrollContainer) {\n      const tabRect = tabRef.current.getBoundingClientRect();\n      const containerRect = scrollContainer.getBoundingClientRect();\n      const containerCenter = containerRect.left + containerRect.width / 2;\n\n      const targetScrollLeft =\n        scrollContainer.scrollLeft +\n        (tabRect.left - containerCenter + tabRect.width / 2);\n\n      scrollContainer.scrollTo({\n        behavior: 'smooth',\n        left: targetScrollLeft,\n      });\n    }\n  }, []);\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {\n        return;\n      }\n\n      event.preventDefault();\n\n      const tabIds = Array.from(tabRefs.current.keys());\n      const focusedElement = document.activeElement;\n\n      // Find the currently focused tab\n      let currentIndex = -1;\n      for (let index = 0; index < tabIds.length; index++) {\n        const tabRef = tabRefs.current.get(tabIds[index]);\n        if (tabRef?.current === focusedElement) {\n          currentIndex = index;\n          break;\n        }\n      }\n\n      // If no tab is focused, focus the active tab. Or the first tab if the active tab is not present.\n      if (currentIndex === -1) {\n        const activeTabRef = tabRefs.current.get(value);\n        if (activeTabRef?.current) {\n          activeTabRef.current.focus();\n        } else if (!isValuePresent && firstTabId !== null) {\n          const firstTabRef = tabRefs.current.get(firstTabId);\n          if (firstTabRef?.current) {\n            firstTabRef.current.focus();\n          }\n        }\n        return;\n      }\n\n      let nextIndex: number;\n\n      if (event.key === 'ArrowRight') {\n        nextIndex = currentIndex === tabIds.length - 1 ? 0 : currentIndex + 1;\n      } else {\n        nextIndex = currentIndex === 0 ? tabIds.length - 1 : currentIndex - 1;\n      }\n\n      const nextTabId = tabIds[nextIndex];\n      const nextTabRef = tabRefs.current.get(nextTabId);\n\n      if (nextTabRef?.current) {\n        nextTabRef.current.focus();\n        scrollTabIntoView(nextTabId);\n      }\n    },\n    [value, scrollTabIntoView, firstTabId, isValuePresent],\n  );\n\n  const classes = classNames(\n    'ndl-tabs',\n    getGeneralTabClasses(size, fill),\n    className,\n  );\n\n  const Component: React.ElementType = as ?? 'div';\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      role=\"tablist\"\n      aria-orientation=\"horizontal\"\n      onKeyDown={handleKeyDown}\n      ref={mergedRef}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <ScrollButton\n        direction=\"left\"\n        isVisible={scrollState.isLeftVisible}\n        onClick={() => scrollToNextItem('left')}\n        onBackground={onBackground}\n      />\n      <ScrollButton\n        direction=\"right\"\n        isVisible={scrollState.isRightVisible}\n        onClick={() => scrollToNextItem('right')}\n        onBackground={onBackground}\n      />\n      <TabsContext.Provider\n        value={{\n          fill,\n          firstTabId,\n          isValuePresent,\n          onChange,\n          registerTab,\n          scrollTabIntoView,\n          size,\n          unregisterTab,\n          value,\n        }}\n      >\n        <div className=\"ndl-tabs-container\" ref={scrollContainerRef}>\n          {children}\n        </div>\n      </TabsContext.Provider>\n    </Component>\n  );\n};\n\nTabsComponent.displayName = 'Tabs';\n\n/**\n * @remarks\n * When the `description` prop is set, hovering over the tab will show a tooltip with the text provided in the `description` prop. `tooltipProps` can be used to customize the tooltip appearance. The `TooltipObjectProps` type is defined as: `{ root?: Partial<React.ComponentProps<typeof Tooltip>>; trigger?: Partial<React.ComponentProps<typeof Tooltip.Trigger>>; content?: Partial<React.ComponentProps<typeof Tooltip.Content>>; }`, see the Tooltip component for more details.\n */\ntype TabProps<T extends TabId> = {\n  /** The id of the tab */\n  id: T;\n  /** The content of the tab */\n  children: React.ReactNode | string;\n  /** A string that will be shown as a tooltip when hovering over the button  it also acts as an aria-label- {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label} */\n  description?: string;\n  /** Props for the tooltip component. */\n  tooltipProps?: TooltipObjectProps;\n  /** Trailing content that will be rendered after the tab content. Badges belong here. */\n  trailingContent?: React.ReactNode;\n  /** Additional class name */\n  className?: string;\n  /** Whether the tab is disabled */\n  isDisabled?: boolean;\n};\n\nconst TabsTab = <\n  U extends TabId = TabId,\n  T extends React.ElementType = 'button',\n>({\n  children,\n  id: tabId,\n  isDisabled = false,\n  className,\n  description,\n  tooltipProps,\n  style,\n  as,\n  htmlAttributes,\n  ref,\n  trailingContent,\n  ...restProps\n}: PolymorphicCommonProps<T, TabProps<U>>) => {\n  const {\n    size,\n    fill,\n    value,\n    onChange,\n    registerTab,\n    unregisterTab,\n    scrollTabIntoView,\n    firstTabId,\n    isValuePresent,\n  } = useTabsContext();\n  const internalRef = useRef<HTMLElement>(null);\n\n  // Create a merged ref that handles both ref objects and ref functions\n  const mergedRef = useMergeRefs([\n    internalRef as React.RefObject<HTMLElement>,\n    ref as React.RefObject<HTMLElement>,\n  ]);\n\n  // Register/unregister tab for keyboard navigation\n  useEffect(() => {\n    registerTab(tabId, internalRef);\n\n    return () => {\n      unregisterTab(tabId);\n    };\n  }, [tabId, registerTab, unregisterTab]);\n\n  const baseClasses = classNames({\n    ...getGeneralTabClasses(size, fill),\n    'ndl-disabled': isDisabled,\n    'ndl-selected': value === tabId,\n  });\n\n  const Component: React.ElementType = as ?? 'button';\n\n  const classes = classNames('ndl-tab', baseClasses, className);\n\n  // Only the active tab should be in the tab sequence initially\n  // Other tabs can be focused via arrow keys but are not in tab sequence\n  const tabIndex =\n    value === tabId || (!isValuePresent && tabId === firstTabId) ? 0 : -1;\n\n  return (\n    <Tooltip\n      type=\"simple\"\n      {...tooltipProps?.root}\n      isDisabled={description === undefined}\n    >\n      <Tooltip.Trigger {...tooltipProps?.trigger} hasButtonWrapper>\n        <Component\n          className={classes}\n          style={style}\n          onClick={() => {\n            if (!isDisabled) {\n              onChange(tabId);\n              scrollTabIntoView(tabId);\n            }\n          }}\n          role=\"tab\"\n          id={tabId}\n          aria-disabled={isDisabled}\n          aria-label={description}\n          aria-selected={value === tabId}\n          aria-controls={getTabPanelId(tabId)}\n          tabIndex={tabIndex}\n          ref={mergedRef}\n          {...restProps}\n          {...htmlAttributes}\n        >\n          <span className=\"ndl-tab-content\">{children}</span>\n          {trailingContent}\n          {fill === 'underline' && <span className=\"ndl-tab-underline\" />}\n        </Component>\n      </Tooltip.Trigger>\n      <Tooltip.Content {...tooltipProps?.content}>\n        {description}\n      </Tooltip.Content>\n    </Tooltip>\n  );\n};\n\nTabsTab.displayName = 'Tabs.Tab';\n\ntype TabPanelProps = {\n  /** The content displayed in the tab panel */\n  children: React.ReactNode;\n  /** The currently selected tabId. The tab is visible if the value is equal to the tabId */\n  value: TabId;\n  /** The id of the tab panel */\n  tabId: TabId;\n  /** Additional class name */\n  className?: string;\n};\n\nconst TabsTabPanel = <T extends React.ElementType = 'div'>({\n  as,\n  children,\n  value,\n  tabId,\n  style,\n  className,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, TabPanelProps>) => {\n  const Component: React.ElementType = as ?? 'div';\n\n  return (\n    <>\n      {value === tabId ? (\n        <Component\n          role=\"tabpanel\"\n          id={getTabPanelId(tabId)}\n          aria-labelledby={tabId}\n          style={style}\n          className={classNames(className)}\n          ref={ref}\n          {...restProps}\n          {...htmlAttributes}\n        >\n          {children}\n        </Component>\n      ) : null}\n    </>\n  );\n};\n\nTabsTabPanel.displayName = 'Tabs.TabPanel';\n\ntype TabBadgeProps = {\n  /** The content of the badge */\n  children: React.ReactNode;\n};\n\nconst TabBadge = ({\n  children,\n  ref,\n  htmlAttributes,\n  style,\n  className,\n  ...restProps\n}: CommonProps<'span', TabBadgeProps>) => {\n  const classes = classNames('ndl-tab-badge', className);\n  return (\n    <Typography\n      ref={ref}\n      variant=\"subheading-small\"\n      className={classes}\n      style={style}\n      htmlAttributes={htmlAttributes}\n      {...restProps}\n    >\n      {children}\n    </Typography>\n  );\n};\n\nconst Tabs = Object.assign(TabsComponent, {\n  Badge: TabBadge,\n  Tab: TabsTab,\n  TabPanel: TabsTabPanel,\n});\n\nexport { Tabs };\n"]}

package/lib/cjs/tabs/stories/tabs-badge.story.js

@@ -26,7 +26,7 @@ const react_1 = require("@neo4j-ndl/react");
 const react_2 = require("react");
 const Component = () => {
     const [value, setValue] = (0, react_2.useState)('0');
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: value, onChange: setValue, className: "n-mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsxs)(react_1.Tabs.Tab, { id: "1", children: ["Tab 2 ", (0, jsx_runtime_1.jsx)(react_1.Tabs.Badge, { children: "5" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: value, onChange: setValue, className: "mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", trailingContent: (0, jsx_runtime_1.jsx)(react_1.Tabs.Badge, { children: "5" }), children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=tabs-badge.story.js.map

package/lib/cjs/tabs/stories/tabs-badge.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-badge.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-badge.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAEnD,OAAO,CACL,4CACE,wBAAC,YAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAC,cAAc,aAC9D,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,wBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,uBACR,uBAAC,YAAI,CAAC,KAAK,oBAAe,IACvB,EACX,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\ntype TabValues = '0' | '1' | '2';\n\nconst Component = () => {\n  const [value, setValue] = useState<TabValues>('0');\n\n  return (\n    <div>\n      <Tabs value={value} onChange={setValue} className=\"n-mb-token-8\">\n        <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n        <Tabs.Tab id=\"1\">\n          Tab 2 <Tabs.Badge>5</Tabs.Badge>\n        </Tabs.Tab>\n        <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n      </Tabs>\n      <Tabs.TabPanel value={value} tabId=\"0\">\n        <Typography variant=\"body-medium\">Tab 1 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"1\">\n        <Typography variant=\"body-medium\">Tab 2 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"2\">\n        <Typography variant=\"body-medium\">Tab 3 content</Typography>\n      </Tabs.TabPanel>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"tabs-badge.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-badge.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAEnD,OAAO,CACL,4CACE,wBAAC,YAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAC,YAAY,aAC5D,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,EAAC,eAAe,EAAE,uBAAC,YAAI,CAAC,KAAK,oBAAe,sBAEjD,EACX,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\ntype TabValues = '0' | '1' | '2';\n\nconst Component = () => {\n  const [value, setValue] = useState<TabValues>('0');\n\n  return (\n    <div>\n      <Tabs value={value} onChange={setValue} className=\"mb-token-8\">\n        <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n        <Tabs.Tab id=\"1\" trailingContent={<Tabs.Badge>5</Tabs.Badge>}>\n          Tab 2\n        </Tabs.Tab>\n        <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n      </Tabs>\n      <Tabs.TabPanel value={value} tabId=\"0\">\n        <Typography variant=\"body-medium\">Tab 1 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"1\">\n        <Typography variant=\"body-medium\">Tab 2 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"2\">\n        <Typography variant=\"body-medium\">Tab 3 content</Typography>\n      </Tabs.TabPanel>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/tabs/stories/tabs-default.story.js

@@ -26,7 +26,7 @@ const react_1 = require("@neo4j-ndl/react");
 const react_2 = require("react");
 const Component = () => {
     const [value, setValue] = (0, react_2.useState)('0');
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: value, onChange: setValue, className: "n-mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: value, onChange: setValue, className: "mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=tabs-default.story.js.map

package/lib/cjs/tabs/stories/tabs-default.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-default.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-default.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAEnD,OAAO,CACL,4CACE,wBAAC,YAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAC,cAAc,aAC9D,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\ntype TabValues = '0' | '1' | '2';\n\nconst Component = () => {\n  const [value, setValue] = useState<TabValues>('0');\n\n  return (\n    <div>\n      <Tabs value={value} onChange={setValue} className=\"n-mb-token-8\">\n        <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n        <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n        <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n      </Tabs>\n      <Tabs.TabPanel value={value} tabId=\"0\">\n        <Typography variant=\"body-medium\">Tab 1 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"1\">\n        <Typography variant=\"body-medium\">Tab 2 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"2\">\n        <Typography variant=\"body-medium\">Tab 3 content</Typography>\n      </Tabs.TabPanel>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"tabs-default.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-default.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAEnD,OAAO,CACL,4CACE,wBAAC,YAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAC,YAAY,aAC5D,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\ntype TabValues = '0' | '1' | '2';\n\nconst Component = () => {\n  const [value, setValue] = useState<TabValues>('0');\n\n  return (\n    <div>\n      <Tabs value={value} onChange={setValue} className=\"mb-token-8\">\n        <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n        <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n        <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n      </Tabs>\n      <Tabs.TabPanel value={value} tabId=\"0\">\n        <Typography variant=\"body-medium\">Tab 1 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"1\">\n        <Typography variant=\"body-medium\">Tab 2 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"2\">\n        <Typography variant=\"body-medium\">Tab 3 content</Typography>\n      </Tabs.TabPanel>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/tabs/stories/tabs-disabled.story.js

@@ -26,7 +26,7 @@ const react_1 = require("@neo4j-ndl/react");
 const react_2 = require("react");
 const Component = () => {
     const [value, setValue] = (0, react_2.useState)('0');
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: value, onChange: setValue, className: "n-mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", isDisabled: true, children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: value, onChange: setValue, className: "mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", isDisabled: true, children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=tabs-disabled.story.js.map

package/lib/cjs/tabs/stories/tabs-disabled.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-disabled.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-disabled.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAEnD,OAAO,CACL,4CACE,wBAAC,YAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAC,cAAc,aAC9D,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,EAAC,UAAU,EAAE,IAAI,sBAEtB,IACN,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\ntype TabValues = '0' | '1' | '2';\n\nconst Component = () => {\n  const [value, setValue] = useState<TabValues>('0');\n\n  return (\n    <div>\n      <Tabs value={value} onChange={setValue} className=\"n-mb-token-8\">\n        <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n        <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n        <Tabs.Tab id=\"2\" isDisabled={true}>\n          Tab 3\n        </Tabs.Tab>\n      </Tabs>\n      <Tabs.TabPanel value={value} tabId=\"0\">\n        <Typography variant=\"body-medium\">Tab 1 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"1\">\n        <Typography variant=\"body-medium\">Tab 2 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"2\">\n        <Typography variant=\"body-medium\">Tab 3 content</Typography>\n      </Tabs.TabPanel>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"tabs-disabled.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-disabled.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAEnD,OAAO,CACL,4CACE,wBAAC,YAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAC,YAAY,aAC5D,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,EAAC,UAAU,EAAE,IAAI,sBAEtB,IACN,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\ntype TabValues = '0' | '1' | '2';\n\nconst Component = () => {\n  const [value, setValue] = useState<TabValues>('0');\n\n  return (\n    <div>\n      <Tabs value={value} onChange={setValue} className=\"mb-token-8\">\n        <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n        <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n        <Tabs.Tab id=\"2\" isDisabled={true}>\n          Tab 3\n        </Tabs.Tab>\n      </Tabs>\n      <Tabs.TabPanel value={value} tabId=\"0\">\n        <Typography variant=\"body-medium\">Tab 1 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"1\">\n        <Typography variant=\"body-medium\">Tab 2 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"2\">\n        <Typography variant=\"body-medium\">Tab 3 content</Typography>\n      </Tabs.TabPanel>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/tabs/stories/tabs-fill-variants.story.js

@@ -27,7 +27,7 @@ const react_2 = require("react");
 const Component = () => {
     const [underlineValue, setUnderlineValue] = (0, react_2.useState)('0');
     const [filledValue, setFilledValue] = (0, react_2.useState)('0');
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-gap-token-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-32", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Underline (Default)" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: underlineValue, onChange: setUnderlineValue, className: "n-mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: underlineValue, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: underlineValue, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: underlineValue, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Filled" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: filledValue, onChange: setFilledValue, fill: "filled", className: "n-mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: filledValue, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: filledValue, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: filledValue, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-token-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-32", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Underline (Default)" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: underlineValue, onChange: setUnderlineValue, className: "mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: underlineValue, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: underlineValue, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: underlineValue, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Filled" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: filledValue, onChange: setFilledValue, fill: "filled", className: "mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: filledValue, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: filledValue, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: filledValue, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=tabs-fill-variants.story.js.map

package/lib/cjs/tabs/stories/tabs-fill-variants.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-fill-variants.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-fill-variants.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IACrE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAE/D,OAAO,CACL,iCAAK,SAAS,EAAC,sBAAsB,aACnC,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,oCAAiC,EAC5D,4CACE,wBAAC,YAAI,IACH,KAAK,EAAE,cAAc,EACrB,QAAQ,EAAE,iBAAiB,EAC3B,SAAS,EAAC,cAAc,aAExB,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAC,GAAG,YAC7C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAC,GAAG,YAC7C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAC,GAAG,YAC7C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,IACF,EAEN,iCAAK,SAAS,EAAC,iCAAiC,aAC9C,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,uBAAoB,EAC/C,4CACE,wBAAC,YAAI,IACH,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,cAAc,EACxB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,cAAc,aAExB,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAC,GAAG,YAC1C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAC,GAAG,YAC1C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAC,GAAG,YAC1C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,IACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\ntype TabValues = '0' | '1' | '2';\n\nconst Component = () => {\n  const [underlineValue, setUnderlineValue] = useState<TabValues>('0');\n  const [filledValue, setFilledValue] = useState<TabValues>('0');\n\n  return (\n    <div className=\"n-flex n-gap-token-8\">\n      <div className=\"n-flex n-flex-col n-gap-token-32\">\n        <Typography variant=\"label\">Underline (Default)</Typography>\n        <div>\n          <Tabs\n            value={underlineValue}\n            onChange={setUnderlineValue}\n            className=\"n-mb-token-8\"\n          >\n            <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n            <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n            <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n          </Tabs>\n          <Tabs.TabPanel value={underlineValue} tabId=\"0\">\n            <Typography variant=\"body-medium\">Tab 1 content</Typography>\n          </Tabs.TabPanel>\n          <Tabs.TabPanel value={underlineValue} tabId=\"1\">\n            <Typography variant=\"body-medium\">Tab 2 content</Typography>\n          </Tabs.TabPanel>\n          <Tabs.TabPanel value={underlineValue} tabId=\"2\">\n            <Typography variant=\"body-medium\">Tab 3 content</Typography>\n          </Tabs.TabPanel>\n        </div>\n      </div>\n\n      <div className=\"n-flex n-flex-col n-gap-token-8\">\n        <Typography variant=\"label\">Filled</Typography>\n        <div>\n          <Tabs\n            value={filledValue}\n            onChange={setFilledValue}\n            fill=\"filled\"\n            className=\"n-mb-token-8\"\n          >\n            <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n            <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n            <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n          </Tabs>\n          <Tabs.TabPanel value={filledValue} tabId=\"0\">\n            <Typography variant=\"body-medium\">Tab 1 content</Typography>\n          </Tabs.TabPanel>\n          <Tabs.TabPanel value={filledValue} tabId=\"1\">\n            <Typography variant=\"body-medium\">Tab 2 content</Typography>\n          </Tabs.TabPanel>\n          <Tabs.TabPanel value={filledValue} tabId=\"2\">\n            <Typography variant=\"body-medium\">Tab 3 content</Typography>\n          </Tabs.TabPanel>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"tabs-fill-variants.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-fill-variants.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IACrE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAE/D,OAAO,CACL,iCAAK,SAAS,EAAC,kBAAkB,aAC/B,iCAAK,SAAS,EAAC,4BAA4B,aACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,oCAAiC,EAC5D,4CACE,wBAAC,YAAI,IACH,KAAK,EAAE,cAAc,EACrB,QAAQ,EAAE,iBAAiB,EAC3B,SAAS,EAAC,YAAY,aAEtB,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAC,GAAG,YAC7C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAC,GAAG,YAC7C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAC,GAAG,YAC7C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,IACF,EAEN,iCAAK,SAAS,EAAC,2BAA2B,aACxC,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,uBAAoB,EAC/C,4CACE,wBAAC,YAAI,IACH,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,cAAc,EACxB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,YAAY,aAEtB,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAC,GAAG,YAC1C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAC,GAAG,YAC1C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAC,GAAG,YAC1C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,IACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\ntype TabValues = '0' | '1' | '2';\n\nconst Component = () => {\n  const [underlineValue, setUnderlineValue] = useState<TabValues>('0');\n  const [filledValue, setFilledValue] = useState<TabValues>('0');\n\n  return (\n    <div className=\"flex gap-token-8\">\n      <div className=\"flex flex-col gap-token-32\">\n        <Typography variant=\"label\">Underline (Default)</Typography>\n        <div>\n          <Tabs\n            value={underlineValue}\n            onChange={setUnderlineValue}\n            className=\"mb-token-8\"\n          >\n            <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n            <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n            <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n          </Tabs>\n          <Tabs.TabPanel value={underlineValue} tabId=\"0\">\n            <Typography variant=\"body-medium\">Tab 1 content</Typography>\n          </Tabs.TabPanel>\n          <Tabs.TabPanel value={underlineValue} tabId=\"1\">\n            <Typography variant=\"body-medium\">Tab 2 content</Typography>\n          </Tabs.TabPanel>\n          <Tabs.TabPanel value={underlineValue} tabId=\"2\">\n            <Typography variant=\"body-medium\">Tab 3 content</Typography>\n          </Tabs.TabPanel>\n        </div>\n      </div>\n\n      <div className=\"flex flex-col gap-token-8\">\n        <Typography variant=\"label\">Filled</Typography>\n        <div>\n          <Tabs\n            value={filledValue}\n            onChange={setFilledValue}\n            fill=\"filled\"\n            className=\"mb-token-8\"\n          >\n            <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n            <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n            <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n          </Tabs>\n          <Tabs.TabPanel value={filledValue} tabId=\"0\">\n            <Typography variant=\"body-medium\">Tab 1 content</Typography>\n          </Tabs.TabPanel>\n          <Tabs.TabPanel value={filledValue} tabId=\"1\">\n            <Typography variant=\"body-medium\">Tab 2 content</Typography>\n          </Tabs.TabPanel>\n          <Tabs.TabPanel value={filledValue} tabId=\"2\">\n            <Typography variant=\"body-medium\">Tab 3 content</Typography>\n          </Tabs.TabPanel>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/tabs/stories/tabs-overflow.story.js

@@ -26,7 +26,7 @@ const react_1 = require("@neo4j-ndl/react");
 const react_2 = require("react");
 const Component = () => {
     const [value, setValue] = (0, react_2.useState)('0');
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-w-80", children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: value, onChange: setValue, className: "n-mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "3", children: "Tab 4" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "4", children: "Tab 5" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "5", children: "Tab 6" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "6", children: "Tab 7" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "7", children: "Tab 8" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "8", children: "Tab 9" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "9", children: "Tab 10 is waay too long and will be cut off on smaller screens" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "3", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 4 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "4", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 5 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "5", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 6 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "6", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 7 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "7", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 8 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "8", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 9 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "9", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 10 content" }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-80", children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: value, onChange: setValue, className: "mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "3", children: "Tab 4" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "4", children: "Tab 5" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "5", children: "Tab 6" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "6", children: "Tab 7" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "7", children: "Tab 8" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "8", children: "Tab 9" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "9", children: "Tab 10 is waay too long and will be cut off on smaller screens" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "3", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 4 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "4", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 5 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "5", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 6 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "6", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 7 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "7", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 8 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "8", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 9 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "9", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 10 content" }) })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=tabs-overflow.story.js.map

package/lib/cjs/tabs/stories/tabs-overflow.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-overflow.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-overflow.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [value, setValue] = useState<string>('0');\n\n  return (\n    <div className=\"n-w-80\">\n      <Tabs value={value} onChange={setValue} className=\"n-mb-token-8\">\n        <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n        <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n        <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n        <Tabs.Tab id=\"3\">Tab 4</Tabs.Tab>\n        <Tabs.Tab id=\"4\">Tab 5</Tabs.Tab>\n        <Tabs.Tab id=\"5\">Tab 6</Tabs.Tab>\n        <Tabs.Tab id=\"6\">Tab 7</Tabs.Tab>\n        <Tabs.Tab id=\"7\">Tab 8</Tabs.Tab>\n        <Tabs.Tab id=\"8\">Tab 9</Tabs.Tab>\n        <Tabs.Tab id=\"9\">\n          Tab 10 is waay too long and will be cut off on smaller screens\n        </Tabs.Tab>\n      </Tabs>\n      <Tabs.TabPanel value={value} tabId=\"0\">\n        <Typography variant=\"body-medium\">Tab 1 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"1\">\n        <Typography variant=\"body-medium\">Tab 2 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"2\">\n        <Typography variant=\"body-medium\">Tab 3 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"3\">\n        <Typography variant=\"body-medium\">Tab 4 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"4\">\n        <Typography variant=\"body-medium\">Tab 5 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"5\">\n        <Typography variant=\"body-medium\">Tab 6 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"6\">\n        <Typography variant=\"body-medium\">Tab 7 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"7\">\n        <Typography variant=\"body-medium\">Tab 8 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"8\">\n        <Typography variant=\"body-medium\">Tab 9 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"9\">\n        <Typography variant=\"body-medium\">Tab 10 content</Typography>\n      </Tabs.TabPanel>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"tabs-overflow.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-overflow.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [value, setValue] = useState<string>('0');\n\n  return (\n    <div className=\"w-80\">\n      <Tabs value={value} onChange={setValue} className=\"mb-token-8\">\n        <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n        <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n        <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n        <Tabs.Tab id=\"3\">Tab 4</Tabs.Tab>\n        <Tabs.Tab id=\"4\">Tab 5</Tabs.Tab>\n        <Tabs.Tab id=\"5\">Tab 6</Tabs.Tab>\n        <Tabs.Tab id=\"6\">Tab 7</Tabs.Tab>\n        <Tabs.Tab id=\"7\">Tab 8</Tabs.Tab>\n        <Tabs.Tab id=\"8\">Tab 9</Tabs.Tab>\n        <Tabs.Tab id=\"9\">\n          Tab 10 is waay too long and will be cut off on smaller screens\n        </Tabs.Tab>\n      </Tabs>\n      <Tabs.TabPanel value={value} tabId=\"0\">\n        <Typography variant=\"body-medium\">Tab 1 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"1\">\n        <Typography variant=\"body-medium\">Tab 2 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"2\">\n        <Typography variant=\"body-medium\">Tab 3 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"3\">\n        <Typography variant=\"body-medium\">Tab 4 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"4\">\n        <Typography variant=\"body-medium\">Tab 5 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"5\">\n        <Typography variant=\"body-medium\">Tab 6 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"6\">\n        <Typography variant=\"body-medium\">Tab 7 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"7\">\n        <Typography variant=\"body-medium\">Tab 8 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"8\">\n        <Typography variant=\"body-medium\">Tab 9 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"9\">\n        <Typography variant=\"body-medium\">Tab 10 content</Typography>\n      </Tabs.TabPanel>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/tabs/stories/tabs-sizes.story.js

@@ -27,7 +27,7 @@ const react_2 = require("react");
 const Component = () => {
     const [smallValue, setSmallValue] = (0, react_2.useState)('0');
     const [largeValue, setLargeValue] = (0, react_2.useState)('0');
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-gap-token-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Small Size" }), (0, jsx_runtime_1.jsxs)("div", { className: "n-w-fit", children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: smallValue, onChange: setSmallValue, size: "small", className: "n-mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: smallValue, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-small", children: "Content for small tab 1" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: smallValue, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-small", children: "Content for small tab 2" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: smallValue, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-small", children: "Content for small tab 3" }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Large Size (Default)" }), (0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: largeValue, onChange: setLargeValue, size: "large", className: "n-mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: largeValue, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Content for large tab 1" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: largeValue, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Content for large tab 2" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: largeValue, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Content for large tab 3" }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-token-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Small Size" }), (0, jsx_runtime_1.jsxs)("div", { className: "w-fit", children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: smallValue, onChange: setSmallValue, size: "small", className: "mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: smallValue, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-small", children: "Content for small tab 1" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: smallValue, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-small", children: "Content for small tab 2" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: smallValue, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-small", children: "Content for small tab 3" }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Large Size (Default)" }), (0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: largeValue, onChange: setLargeValue, size: "large", className: "mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: largeValue, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Content for large tab 1" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: largeValue, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Content for large tab 2" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: largeValue, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Content for large tab 3" }) })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=tabs-sizes.story.js.map

package/lib/cjs/tabs/stories/tabs-sizes.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-sizes.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAC7D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAE7D,OAAO,CACL,iCAAK,SAAS,EAAC,sBAAsB,aACnC,iCAAK,SAAS,EAAC,iCAAiC,aAC9C,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,2BAAwB,EACnD,iCAAK,SAAS,EAAC,SAAS,aACtB,wBAAC,YAAI,IACH,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,aAAa,EACvB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,cAAc,aAExB,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,IACZ,IACF,EAEN,iCAAK,SAAS,EAAC,iCAAiC,aAC9C,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,qCAAkC,EAC7D,wBAAC,YAAI,IACH,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,aAAa,EACvB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,cAAc,aAExB,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,IACZ,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\ntype TabValues = '0' | '1' | '2';\n\nconst Component = () => {\n  const [smallValue, setSmallValue] = useState<TabValues>('0');\n  const [largeValue, setLargeValue] = useState<TabValues>('0');\n\n  return (\n    <div className=\"n-flex n-gap-token-8\">\n      <div className=\"n-flex n-flex-col n-gap-token-8\">\n        <Typography variant=\"label\">Small Size</Typography>\n        <div className=\"n-w-fit\">\n          <Tabs\n            value={smallValue}\n            onChange={setSmallValue}\n            size=\"small\"\n            className=\"n-mb-token-8\"\n          >\n            <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n            <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n            <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n          </Tabs>\n          <Tabs.TabPanel value={smallValue} tabId=\"0\">\n            <Typography variant=\"body-small\">\n              Content for small tab 1\n            </Typography>\n          </Tabs.TabPanel>\n          <Tabs.TabPanel value={smallValue} tabId=\"1\">\n            <Typography variant=\"body-small\">\n              Content for small tab 2\n            </Typography>\n          </Tabs.TabPanel>\n          <Tabs.TabPanel value={smallValue} tabId=\"2\">\n            <Typography variant=\"body-small\">\n              Content for small tab 3\n            </Typography>\n          </Tabs.TabPanel>\n        </div>\n      </div>\n\n      <div className=\"n-flex n-flex-col n-gap-token-8\">\n        <Typography variant=\"label\">Large Size (Default)</Typography>\n        <Tabs\n          value={largeValue}\n          onChange={setLargeValue}\n          size=\"large\"\n          className=\"n-mb-token-8\"\n        >\n          <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n          <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n          <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n        </Tabs>\n        <Tabs.TabPanel value={largeValue} tabId=\"0\">\n          <Typography variant=\"body-medium\">Content for large tab 1</Typography>\n        </Tabs.TabPanel>\n        <Tabs.TabPanel value={largeValue} tabId=\"1\">\n          <Typography variant=\"body-medium\">Content for large tab 2</Typography>\n        </Tabs.TabPanel>\n        <Tabs.TabPanel value={largeValue} tabId=\"2\">\n          <Typography variant=\"body-medium\">Content for large tab 3</Typography>\n        </Tabs.TabPanel>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"tabs-sizes.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAC7D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAE7D,OAAO,CACL,iCAAK,SAAS,EAAC,kBAAkB,aAC/B,iCAAK,SAAS,EAAC,2BAA2B,aACxC,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,2BAAwB,EACnD,iCAAK,SAAS,EAAC,OAAO,aACpB,wBAAC,YAAI,IACH,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,aAAa,EACvB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,YAAY,aAEtB,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,IACZ,IACF,EAEN,iCAAK,SAAS,EAAC,2BAA2B,aACxC,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,qCAAkC,EAC7D,wBAAC,YAAI,IACH,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,aAAa,EACvB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,YAAY,aAEtB,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,IACZ,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\ntype TabValues = '0' | '1' | '2';\n\nconst Component = () => {\n  const [smallValue, setSmallValue] = useState<TabValues>('0');\n  const [largeValue, setLargeValue] = useState<TabValues>('0');\n\n  return (\n    <div className=\"flex gap-token-8\">\n      <div className=\"flex flex-col gap-token-8\">\n        <Typography variant=\"label\">Small Size</Typography>\n        <div className=\"w-fit\">\n          <Tabs\n            value={smallValue}\n            onChange={setSmallValue}\n            size=\"small\"\n            className=\"mb-token-8\"\n          >\n            <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n            <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n            <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n          </Tabs>\n          <Tabs.TabPanel value={smallValue} tabId=\"0\">\n            <Typography variant=\"body-small\">\n              Content for small tab 1\n            </Typography>\n          </Tabs.TabPanel>\n          <Tabs.TabPanel value={smallValue} tabId=\"1\">\n            <Typography variant=\"body-small\">\n              Content for small tab 2\n            </Typography>\n          </Tabs.TabPanel>\n          <Tabs.TabPanel value={smallValue} tabId=\"2\">\n            <Typography variant=\"body-small\">\n              Content for small tab 3\n            </Typography>\n          </Tabs.TabPanel>\n        </div>\n      </div>\n\n      <div className=\"flex flex-col gap-token-8\">\n        <Typography variant=\"label\">Large Size (Default)</Typography>\n        <Tabs\n          value={largeValue}\n          onChange={setLargeValue}\n          size=\"large\"\n          className=\"mb-token-8\"\n        >\n          <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n          <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n          <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n        </Tabs>\n        <Tabs.TabPanel value={largeValue} tabId=\"0\">\n          <Typography variant=\"body-medium\">Content for large tab 1</Typography>\n        </Tabs.TabPanel>\n        <Tabs.TabPanel value={largeValue} tabId=\"1\">\n          <Typography variant=\"body-medium\">Content for large tab 2</Typography>\n        </Tabs.TabPanel>\n        <Tabs.TabPanel value={largeValue} tabId=\"2\">\n          <Typography variant=\"body-medium\">Content for large tab 3</Typography>\n        </Tabs.TabPanel>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/tabs/stories/tabs-with-icons.story.js

@@ -27,7 +27,7 @@ const icons_1 = require("@neo4j-ndl/react/icons");
 const react_2 = require("react");
 const Component = () => {
     const [value, setValue] = (0, react_2.useState)('database');
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-mt-5", children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: value, onChange: setValue, className: "n-mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "database", description: "Database", children: (0, jsx_runtime_1.jsx)(icons_1.CircleStackIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "add", description: "Add database", children: (0, jsx_runtime_1.jsx)(icons_1.DatabasePlusIcon, {}) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "inbox", description: "Inbox", children: (0, jsx_runtime_1.jsx)(icons_1.InboxArrowDownIconOutline, {}) })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "database", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Database management and operations." }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "add", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Add new database or connection." }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "inbox", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Inbox notifications and messages." }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "mt-5", children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: value, onChange: setValue, className: "mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "database", description: "Database", children: (0, jsx_runtime_1.jsx)(icons_1.CircleStackIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "add", description: "Add database", children: (0, jsx_runtime_1.jsx)(icons_1.DatabasePlusIcon, {}) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "inbox", description: "Inbox", children: (0, jsx_runtime_1.jsx)(icons_1.InboxArrowDownIconOutline, {}) })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "database", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Database management and operations." }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "add", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Add new database or connection." }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "inbox", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Inbox notifications and messages." }) })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=tabs-with-icons.story.js.map

package/lib/cjs/tabs/stories/tabs-with-icons.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-with-icons.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-with-icons.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,kDAIgC;AAChC,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAY,UAAU,CAAC,CAAC;IAE1D,OAAO,CACL,iCAAK,SAAS,EAAC,QAAQ,aACrB,wBAAC,YAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAC,cAAc,aAC9D,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,UAAU,EAAC,WAAW,EAAC,UAAU,YAC5C,uBAAC,8BAAsB,KAAG,GACjB,EACX,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,KAAK,EAAC,WAAW,EAAC,cAAc,YAC3C,uBAAC,wBAAgB,KAAG,GACX,EACX,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,OAAO,EAAC,WAAW,EAAC,OAAO,YACtC,uBAAC,iCAAyB,KAAG,GACpB,IACN,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,UAAU,YAC3C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,oDAEpB,GACC,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,KAAK,YACtC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,gDAEpB,GACC,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,OAAO,YACxC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,kDAEpB,GACC,IACZ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport {\n  CircleStackIconOutline,\n  DatabasePlusIcon,\n  InboxArrowDownIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport { useState } from 'react';\n\ntype TabValues = 'database' | 'add' | 'inbox';\n\nconst Component = () => {\n  const [value, setValue] = useState<TabValues>('database');\n\n  return (\n    <div className=\"n-mt-5\">\n      <Tabs value={value} onChange={setValue} className=\"n-mb-token-8\">\n        <Tabs.Tab id=\"database\" description=\"Database\">\n          <CircleStackIconOutline />\n        </Tabs.Tab>\n        <Tabs.Tab id=\"add\" description=\"Add database\">\n          <DatabasePlusIcon />\n        </Tabs.Tab>\n        <Tabs.Tab id=\"inbox\" description=\"Inbox\">\n          <InboxArrowDownIconOutline />\n        </Tabs.Tab>\n      </Tabs>\n      <Tabs.TabPanel value={value} tabId=\"database\">\n        <Typography variant=\"body-medium\">\n          Database management and operations.\n        </Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"add\">\n        <Typography variant=\"body-medium\">\n          Add new database or connection.\n        </Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"inbox\">\n        <Typography variant=\"body-medium\">\n          Inbox notifications and messages.\n        </Typography>\n      </Tabs.TabPanel>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"tabs-with-icons.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-with-icons.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,kDAIgC;AAChC,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAY,UAAU,CAAC,CAAC;IAE1D,OAAO,CACL,iCAAK,SAAS,EAAC,MAAM,aACnB,wBAAC,YAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAC,YAAY,aAC5D,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,UAAU,EAAC,WAAW,EAAC,UAAU,YAC5C,uBAAC,8BAAsB,KAAG,GACjB,EACX,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,KAAK,EAAC,WAAW,EAAC,cAAc,YAC3C,uBAAC,wBAAgB,KAAG,GACX,EACX,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,OAAO,EAAC,WAAW,EAAC,OAAO,YACtC,uBAAC,iCAAyB,KAAG,GACpB,IACN,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,UAAU,YAC3C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,oDAEpB,GACC,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,KAAK,YACtC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,gDAEpB,GACC,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,OAAO,YACxC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,kDAEpB,GACC,IACZ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport {\n  CircleStackIconOutline,\n  DatabasePlusIcon,\n  InboxArrowDownIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport { useState } from 'react';\n\ntype TabValues = 'database' | 'add' | 'inbox';\n\nconst Component = () => {\n  const [value, setValue] = useState<TabValues>('database');\n\n  return (\n    <div className=\"mt-5\">\n      <Tabs value={value} onChange={setValue} className=\"mb-token-8\">\n        <Tabs.Tab id=\"database\" description=\"Database\">\n          <CircleStackIconOutline />\n        </Tabs.Tab>\n        <Tabs.Tab id=\"add\" description=\"Add database\">\n          <DatabasePlusIcon />\n        </Tabs.Tab>\n        <Tabs.Tab id=\"inbox\" description=\"Inbox\">\n          <InboxArrowDownIconOutline />\n        </Tabs.Tab>\n      </Tabs>\n      <Tabs.TabPanel value={value} tabId=\"database\">\n        <Typography variant=\"body-medium\">\n          Database management and operations.\n        </Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"add\">\n        <Typography variant=\"body-medium\">\n          Add new database or connection.\n        </Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"inbox\">\n        <Typography variant=\"body-medium\">\n          Inbox notifications and messages.\n        </Typography>\n      </Tabs.TabPanel>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/tag/stories/tag-sizes.story.js

@@ -24,7 +24,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-gap-token-16 n-items-start", children: [(0, jsx_runtime_1.jsx)(react_1.Tag, { size: "small", onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-token-16 items-start", children: [(0, jsx_runtime_1.jsx)(react_1.Tag, { size: "small", onClick: () => {
                     console.info('onClick was called');
                 }, children: "Small" }), (0, jsx_runtime_1.jsx)(react_1.Tag, { size: "medium", onClick: () => {
                     console.info('onClick was called');

package/lib/cjs/tag/stories/tag-sizes.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag-sizes.story.js","sourceRoot":"","sources":["../../../../src/tag/stories/tag-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAuC;AAEvC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,qCAAqC,aAClD,uBAAC,WAAG,IACF,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;gBACrC,CAAC,sBAGG,EACN,uBAAC,WAAG,IACF,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;gBACrC,CAAC,uBAGG,EACN,uBAAC,WAAG,IACF,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;gBACrC,CAAC,sBAGG,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tag } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-gap-token-16 n-items-start\">\n      <Tag\n        size=\"small\"\n        onClick={() => {\n          console.info('onClick was called');\n        }}\n      >\n        Small\n      </Tag>\n      <Tag\n        size=\"medium\"\n        onClick={() => {\n          console.info('onClick was called');\n        }}\n      >\n        Medium\n      </Tag>\n      <Tag\n        size=\"large\"\n        onClick={() => {\n          console.info('onClick was called');\n        }}\n      >\n        Large\n      </Tag>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"tag-sizes.story.js","sourceRoot":"","sources":["../../../../src/tag/stories/tag-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAuC;AAEvC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,+BAA+B,aAC5C,uBAAC,WAAG,IACF,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;gBACrC,CAAC,sBAGG,EACN,uBAAC,WAAG,IACF,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;gBACrC,CAAC,uBAGG,EACN,uBAAC,WAAG,IACF,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;gBACrC,CAAC,sBAGG,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tag } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"flex gap-token-16 items-start\">\n      <Tag\n        size=\"small\"\n        onClick={() => {\n          console.info('onClick was called');\n        }}\n      >\n        Small\n      </Tag>\n      <Tag\n        size=\"medium\"\n        onClick={() => {\n          console.info('onClick was called');\n        }}\n      >\n        Medium\n      </Tag>\n      <Tag\n        size=\"large\"\n        onClick={() => {\n          console.info('onClick was called');\n        }}\n      >\n        Large\n      </Tag>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/tag/stories/tag-types.story.js

@@ -24,7 +24,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.Tag, { type: "default", onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.Tag, { type: "default", onClick: () => {
                     console.info('onClick was called');
                 }, children: "Tag" }), (0, jsx_runtime_1.jsx)(react_1.Tag, { type: "destructive", onClick: () => {
                     console.info('onClick was called');

package/lib/cjs/tag/stories/tag-types.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag-types.story.js","sourceRoot":"","sources":["../../../../src/tag/stories/tag-types.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAuC;AAEvC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,uBAAuB,aACpC,uBAAC,WAAG,IACF,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;gBACrC,CAAC,oBAGG,EACN,uBAAC,WAAG,IACF,IAAI,EAAC,aAAa,EAClB,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;gBACrC,CAAC,0BAGG,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tag } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-gap-token-16\">\n      <Tag\n        type=\"default\"\n        onClick={() => {\n          console.info('onClick was called');\n        }}\n      >\n        Tag\n      </Tag>\n      <Tag\n        type=\"destructive\"\n        onClick={() => {\n          console.info('onClick was called');\n        }}\n      >\n        Clear all\n      </Tag>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"tag-types.story.js","sourceRoot":"","sources":["../../../../src/tag/stories/tag-types.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAuC;AAEvC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,mBAAmB,aAChC,uBAAC,WAAG,IACF,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;gBACrC,CAAC,oBAGG,EACN,uBAAC,WAAG,IACF,IAAI,EAAC,aAAa,EAClB,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;gBACrC,CAAC,0BAGG,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tag } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"flex gap-token-16\">\n      <Tag\n        type=\"default\"\n        onClick={() => {\n          console.info('onClick was called');\n        }}\n      >\n        Tag\n      </Tag>\n      <Tag\n        type=\"destructive\"\n        onClick={() => {\n          console.info('onClick was called');\n        }}\n      >\n        Clear all\n      </Tag>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/tag-base/stories/tag-variants.story.js

@@ -26,7 +26,7 @@ const react_1 = require("@neo4j-ndl/react");
 const react_2 = require("react");
 const Component = () => {
     const [isSelected, setIsSelected] = (0, react_2.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-8 n-items-start", children: [(0, jsx_runtime_1.jsx)(react_1.ReadOnlyTag, { children: "Read-only" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { onRemove: () => console.info('DismissibleTag onRemove was called'), children: "Dismissible" }), (0, jsx_runtime_1.jsx)(react_1.SelectableTag, { isSelected: isSelected, onClick: () => setIsSelected(!isSelected), children: "Selectable" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-8 items-start", children: [(0, jsx_runtime_1.jsx)(react_1.ReadOnlyTag, { children: "Read-only" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { onRemove: () => console.info('DismissibleTag onRemove was called'), children: "Dismissible" }), (0, jsx_runtime_1.jsx)(react_1.SelectableTag, { isSelected: isSelected, onClick: () => setIsSelected(!isSelected), children: "Selectable" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=tag-variants.story.js.map

package/lib/cjs/tag-base/stories/tag-variants.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag-variants.story.js","sourceRoot":"","sources":["../../../../src/tag-base/stories/tag-variants.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA8E;AAC9E,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAEpD,OAAO,CACL,iCAAK,SAAS,EAAC,+CAA+C,aAC5D,uBAAC,mBAAW,4BAAwB,EACpC,uBAAC,sBAAc,IACb,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,oCAAoC,CAAC,4BAGnD,EACjB,uBAAC,qBAAa,IACZ,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,2BAG3B,IACZ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DismissibleTag, ReadOnlyTag, SelectableTag } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isSelected, setIsSelected] = useState(false);\n\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-8 n-items-start\">\n      <ReadOnlyTag>Read-only</ReadOnlyTag>\n      <DismissibleTag\n        onRemove={() => console.info('DismissibleTag onRemove was called')}\n      >\n        Dismissible\n      </DismissibleTag>\n      <SelectableTag\n        isSelected={isSelected}\n        onClick={() => setIsSelected(!isSelected)}\n      >\n        Selectable\n      </SelectableTag>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"tag-variants.story.js","sourceRoot":"","sources":["../../../../src/tag-base/stories/tag-variants.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA8E;AAC9E,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAEpD,OAAO,CACL,iCAAK,SAAS,EAAC,uCAAuC,aACpD,uBAAC,mBAAW,4BAAwB,EACpC,uBAAC,sBAAc,IACb,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,oCAAoC,CAAC,4BAGnD,EACjB,uBAAC,qBAAa,IACZ,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,2BAG3B,IACZ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DismissibleTag, ReadOnlyTag, SelectableTag } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isSelected, setIsSelected] = useState(false);\n\n  return (\n    <div className=\"flex flex-col gap-token-8 items-start\">\n      <ReadOnlyTag>Read-only</ReadOnlyTag>\n      <DismissibleTag\n        onRemove={() => console.info('DismissibleTag onRemove was called')}\n      >\n        Dismissible\n      </DismissibleTag>\n      <SelectableTag\n        isSelected={isSelected}\n        onClick={() => setIsSelected(!isSelected)}\n      >\n        Selectable\n      </SelectableTag>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/text-area/stories/text-area-sizes.story.js

@@ -24,7 +24,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-gap-6", children: [(0, jsx_runtime_1.jsx)(react_1.TextArea, { label: "Small text area", size: "small" }), (0, jsx_runtime_1.jsx)(react_1.TextArea, { label: "Medium text area", size: "medium" }), (0, jsx_runtime_1.jsx)(react_1.TextArea, { label: "Large text area", size: "large" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-6", children: [(0, jsx_runtime_1.jsx)(react_1.TextArea, { label: "Small text area", size: "small" }), (0, jsx_runtime_1.jsx)(react_1.TextArea, { label: "Medium text area", size: "medium" }), (0, jsx_runtime_1.jsx)(react_1.TextArea, { label: "Large text area", size: "large" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=text-area-sizes.story.js.map

package/lib/cjs/text-area/stories/text-area-sizes.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-area-sizes.story.js","sourceRoot":"","sources":["../../../../src/text-area/stories/text-area-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAE5C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,gBAAgB,aAC7B,uBAAC,gBAAQ,IAAC,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,OAAO,GAAG,EACjD,uBAAC,gBAAQ,IAAC,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,GAAG,EACnD,uBAAC,gBAAQ,IAAC,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,OAAO,GAAG,IAC7C,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { TextArea } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-gap-6\">\n      <TextArea label=\"Small text area\" size=\"small\" />\n      <TextArea label=\"Medium text area\" size=\"medium\" />\n      <TextArea label=\"Large text area\" size=\"large\" />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"text-area-sizes.story.js","sourceRoot":"","sources":["../../../../src/text-area/stories/text-area-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAE5C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,YAAY,aACzB,uBAAC,gBAAQ,IAAC,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,OAAO,GAAG,EACjD,uBAAC,gBAAQ,IAAC,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,GAAG,EACnD,uBAAC,gBAAQ,IAAC,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,OAAO,GAAG,IAC7C,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { TextArea } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"flex gap-6\">\n      <TextArea label=\"Small text area\" size=\"small\" />\n      <TextArea label=\"Medium text area\" size=\"medium\" />\n      <TextArea label=\"Large text area\" size=\"large\" />\n    </div>\n  );\n};\n\nexport default Component;\n"]}