@clickhouse/click-ui 0.7.0 → 0.8.0

package/dist/cjs/components/Dropdown/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import * as DropdownMenu from '@radix-ui/react-dropdown-menu';\nimport {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { styled } from 'styled-components';\nimport { Arrow, GenericMenuItem, GenericMenuPanel } from '@/components/GenericMenu';\nimport { cn } from '@/lib/cva';\nimport { useInputModality } from '@/hooks/internal';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { IconWrapper } from '@/components/IconWrapper';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport styles from './Dropdown.module.css';\n\nexport const Dropdown = (props: DropdownMenu.DropdownMenuProps) => (\n  <DropdownMenu.Root {...props} />\n);\n\ntype DropdownMenuItemComponent = <T extends ElementType = 'div'>(\n  props: ComponentProps<typeof GenericMenuItem<T>>\n) => ReactNode;\n\nconst _DropdownMenuItem = <T extends ElementType = 'div'>(\n  { className, ...props }: ComponentProps<typeof GenericMenuItem<T>>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <GenericMenuItem\n    ref={ref}\n    {...(props as ComponentProps<typeof GenericMenuItem>)}\n    className={cn(styles['dropdown-menu-item'], className)}\n  />\n);\n\nconst DropdownMenuItem: DropdownMenuItemComponent = forwardRef(_DropdownMenuItem);\n\ninterface SubDropdownProps {\n  sub?: true;\n  icon?: IconName;\n  iconDir?: HorizontalDirection;\n}\n\ninterface MainDropdownProps {\n  sub?: never;\n}\n\ntype DropdownSubTriggerProps = DropdownMenu.DropdownMenuSubTriggerProps &\n  SubDropdownProps;\ntype DropdownTriggerProps = DropdownMenu.DropdownMenuTriggerProps & MainDropdownProps;\n\nconst Trigger = styled(DropdownMenu.Trigger)`\n  cursor: pointer;\n  width: fit-content;\n  &[disabled] {\n    cursor: not-allowed;\n  }\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.click.global.color.outline.default};\n    outline-offset: 2px;\n  }\n`;\n\nconst DropdownTrigger = ({\n  sub,\n  children,\n  ...props\n}: DropdownSubTriggerProps | DropdownTriggerProps) => {\n  if (sub) {\n    const { icon, iconDir, ...menuProps } = props as DropdownSubTriggerProps;\n    return (\n      <DropdownMenuItem\n        as={DropdownMenu.SubTrigger}\n        {...menuProps}\n      >\n        <IconWrapper\n          icon={icon}\n          iconDir={iconDir}\n        >\n          {children}\n        </IconWrapper>\n        <Icon name=\"chevron-right\" />\n      </DropdownMenuItem>\n    );\n  }\n\n  return (\n    <Trigger\n      asChild\n      {...(props as DropdownTriggerProps)}\n    >\n      <div>{children}</div>\n    </Trigger>\n  );\n};\n\nDropdownTrigger.displayName = 'DropdownTrigger';\nDropdown.Trigger = DropdownTrigger;\n\nexport type ArrowProps = {\n  showArrow?: boolean;\n};\n\ninterface StyledDropdownContentProps extends DropdownMenu.DropdownMenuContentProps {\n  children?: ReactNode;\n  container?: HTMLElement | null;\n  responsivePositioning?: boolean;\n}\n\ninterface StyledDropdownSubContentProps extends DropdownMenu.DropdownMenuSubContentProps {\n  children?: ReactNode;\n  container?: HTMLElement | null;\n  responsivePositioning?: boolean;\n}\n\ntype DropdownContentProps = StyledDropdownContentProps & SubDropdownProps & ArrowProps;\ntype DropdownSubContentProps = StyledDropdownSubContentProps &\n  MainDropdownProps &\n  ArrowProps;\n\ntype DropdownMenuContentComponent = <T extends ElementType = 'div'>(\n  props: ComponentProps<typeof GenericMenuPanel<T>>\n) => ReactNode;\n\nconst _DropdownMenuContent = <T extends ElementType = 'div'>(\n  { className, ...props }: ComponentProps<typeof GenericMenuPanel<T>>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <GenericMenuPanel\n    ref={ref}\n    {...(props as ComponentProps<typeof GenericMenuPanel>)}\n    className={cn(styles['dropdown-menu-content'], className)}\n  />\n);\n\nconst DropdownMenuContent: DropdownMenuContentComponent =\n  forwardRef(_DropdownMenuContent);\n\nconst DropdownContent = ({\n  sub,\n  children,\n  container,\n  showArrow,\n  responsivePositioning = true,\n  ...props\n}: DropdownContentProps | DropdownSubContentProps) => {\n  const ContentElement = sub ? DropdownMenu.SubContent : DropdownMenu.Content;\n  const inputModalityProps = useInputModality();\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <DropdownMenu.Portal container={portalContainer}>\n      <DropdownMenuContent\n        {...props}\n        type=\"dropdown-menu\"\n        showArrow={showArrow}\n        as={ContentElement}\n        sideOffset={4}\n        loop\n        avoidCollisions={responsivePositioning}\n        collisionPadding={responsivePositioning ? 100 : undefined}\n        {...inputModalityProps}\n      >\n        {showArrow && (\n          <Arrow\n            asChild\n            as={DropdownMenu.Arrow}\n            width={20}\n            height={10}\n          >\n            <Popover_Arrow />\n          </Arrow>\n        )}\n        {children}\n      </DropdownMenuContent>\n    </DropdownMenu.Portal>\n  );\n};\n\nDropdownContent.displayName = 'DropdownContent';\nDropdown.Content = DropdownContent;\n\nconst DropdownMenuGroup = styled(DropdownMenu.Group)`\n  width: 100%;\n  border-bottom: 1px solid\n    ${({ theme }) => theme.click.genericMenu.item.color.default.stroke.default};\n`;\n\nconst DropdownGroup = (props: DropdownMenu.DropdownMenuGroupProps) => {\n  return <DropdownMenuGroup {...props} />;\n};\n\nDropdownGroup.displayName = 'DropdownGroup';\nDropdown.Group = DropdownGroup;\n\nconst DropdownMenuSub = styled(DropdownMenu.Sub)`\n  border-bottom: 1px solid\n    ${({ theme }) => theme.click.genericMenu.item.color.default.stroke.default};\n`;\n\nconst DropdownSub = ({ ...props }: DropdownMenu.DropdownMenuGroupProps) => {\n  return <DropdownMenuSub {...props} />;\n};\n\nDropdownSub.displayName = 'DropdownSub';\nDropdown.Sub = DropdownSub;\n\ninterface DropdownItemProps extends DropdownMenu.DropdownMenuItemProps {\n  /** Icon to display in the menu item */\n  icon?: IconName;\n  /** The direction of the icon relative to the label */\n  iconDir?: HorizontalDirection;\n  /** The type of the menu item */\n  type?: 'default' | 'danger';\n}\n\nexport type { DropdownItemProps };\n\nconst DropdownItem = ({\n  icon,\n  iconDir,\n  type = 'default',\n  children,\n  ...props\n}: DropdownItemProps) => {\n  return (\n    <DropdownMenuItem\n      as={DropdownMenu.Item}\n      type={type}\n      {...props}\n    >\n      <IconWrapper\n        icon={icon}\n        iconDir={iconDir}\n      >\n        {children}\n      </IconWrapper>\n    </DropdownMenuItem>\n  );\n};\n\nDropdownItem.displayName = 'DropdownItem';\nDropdown.Item = DropdownItem;\n\nexport default Dropdown;\n"],"names":["Dropdown","props","jsx","DropdownMenu","_DropdownMenuItem","className","ref","GenericMenuItem","cn","styles","DropdownMenuItem","forwardRef","Trigger","styled","withConfig","componentId","theme","click","global","color","outline","default","DropdownTrigger","sub","children","icon","iconDir","menuProps","SubTrigger","IconWrapper","Icon","displayName","_DropdownMenuContent","GenericMenuPanel","DropdownMenuContent","DropdownContent","container","showArrow","responsivePositioning","ContentElement","SubContent","Content","inputModalityProps","useInputModality","portalContainer","useResolvedPortalContainer","jsxs","undefined","Arrow","Popover_Arrow","DropdownMenuGroup","Group","genericMenu","item","stroke","DropdownGroup","DropdownMenuSub","Sub","DropdownSub","DropdownItem","type","Item"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import * as DropdownMenu from '@radix-ui/react-dropdown-menu';\nimport {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { Arrow, GenericMenuItem, GenericMenuPanel } from '@/components/GenericMenu';\nimport { cn } from '@/lib/cva';\nimport { useInputModality } from '@/hooks/internal';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { IconWrapper } from '@/components/IconWrapper';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport styles from './Dropdown.module.css';\n\nexport const Dropdown = (props: DropdownMenu.DropdownMenuProps) => (\n  <DropdownMenu.Root {...props} />\n);\n\ntype DropdownMenuItemComponent = <T extends ElementType = 'div'>(\n  props: ComponentProps<typeof GenericMenuItem<T>>\n) => ReactNode;\n\nconst _DropdownMenuItem = <T extends ElementType = 'div'>(\n  { className, ...props }: ComponentProps<typeof GenericMenuItem<T>>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <GenericMenuItem\n    ref={ref}\n    {...(props as ComponentProps<typeof GenericMenuItem>)}\n    className={cn(styles['dropdown-menu-item'], className)}\n  />\n);\n\nconst DropdownMenuItem: DropdownMenuItemComponent = forwardRef(_DropdownMenuItem);\n\ninterface SubDropdownProps {\n  sub?: true;\n  icon?: IconName;\n  iconDir?: HorizontalDirection;\n}\n\ninterface MainDropdownProps {\n  sub?: never;\n}\n\ntype DropdownSubTriggerProps = DropdownMenu.DropdownMenuSubTriggerProps &\n  SubDropdownProps;\ntype DropdownTriggerProps = DropdownMenu.DropdownMenuTriggerProps & MainDropdownProps;\n\nconst DropdownTrigger = ({\n  sub,\n  children,\n  ...props\n}: DropdownSubTriggerProps | DropdownTriggerProps) => {\n  if (sub) {\n    const { icon, iconDir, ...menuProps } = props as DropdownSubTriggerProps;\n    return (\n      <DropdownMenuItem\n        as={DropdownMenu.SubTrigger}\n        {...menuProps}\n      >\n        <IconWrapper\n          icon={icon}\n          iconDir={iconDir}\n        >\n          {children}\n        </IconWrapper>\n        <Icon name=\"chevron-right\" />\n      </DropdownMenuItem>\n    );\n  }\n\n  const { className, ...triggerProps } = props as DropdownTriggerProps;\n  return (\n    <DropdownMenu.Trigger\n      asChild\n      {...triggerProps}\n      className={cn(styles['dropdown-trigger'], className)}\n    >\n      <div>{children}</div>\n    </DropdownMenu.Trigger>\n  );\n};\n\nDropdownTrigger.displayName = 'DropdownTrigger';\nDropdown.Trigger = DropdownTrigger;\n\nexport type ArrowProps = {\n  showArrow?: boolean;\n};\n\ninterface StyledDropdownContentProps extends DropdownMenu.DropdownMenuContentProps {\n  children?: ReactNode;\n  container?: HTMLElement | null;\n  responsivePositioning?: boolean;\n}\n\ninterface StyledDropdownSubContentProps extends DropdownMenu.DropdownMenuSubContentProps {\n  children?: ReactNode;\n  container?: HTMLElement | null;\n  responsivePositioning?: boolean;\n}\n\ntype DropdownContentProps = StyledDropdownContentProps & SubDropdownProps & ArrowProps;\ntype DropdownSubContentProps = StyledDropdownSubContentProps &\n  MainDropdownProps &\n  ArrowProps;\n\ntype DropdownMenuContentComponent = <T extends ElementType = 'div'>(\n  props: ComponentProps<typeof GenericMenuPanel<T>>\n) => ReactNode;\n\nconst _DropdownMenuContent = <T extends ElementType = 'div'>(\n  { className, ...props }: ComponentProps<typeof GenericMenuPanel<T>>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <GenericMenuPanel\n    ref={ref}\n    {...(props as ComponentProps<typeof GenericMenuPanel>)}\n    className={cn(styles['dropdown-menu-content'], className)}\n  />\n);\n\nconst DropdownMenuContent: DropdownMenuContentComponent =\n  forwardRef(_DropdownMenuContent);\n\nconst DropdownContent = ({\n  sub,\n  children,\n  container,\n  showArrow,\n  responsivePositioning = true,\n  ...props\n}: DropdownContentProps | DropdownSubContentProps) => {\n  const ContentElement = sub ? DropdownMenu.SubContent : DropdownMenu.Content;\n  const inputModalityProps = useInputModality();\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <DropdownMenu.Portal container={portalContainer}>\n      <DropdownMenuContent\n        {...props}\n        type=\"dropdown-menu\"\n        showArrow={showArrow}\n        as={ContentElement}\n        sideOffset={4}\n        loop\n        avoidCollisions={responsivePositioning}\n        collisionPadding={responsivePositioning ? 100 : undefined}\n        {...inputModalityProps}\n      >\n        {showArrow && (\n          <Arrow\n            asChild\n            as={DropdownMenu.Arrow}\n            width={20}\n            height={10}\n          >\n            <Popover_Arrow />\n          </Arrow>\n        )}\n        {children}\n      </DropdownMenuContent>\n    </DropdownMenu.Portal>\n  );\n};\n\nDropdownContent.displayName = 'DropdownContent';\nDropdown.Content = DropdownContent;\n\nconst DropdownGroup = ({ className, ...props }: DropdownMenu.DropdownMenuGroupProps) => {\n  return (\n    <DropdownMenu.Group\n      {...props}\n      className={cn(styles['dropdown-group'], className)}\n    />\n  );\n};\n\nDropdownGroup.displayName = 'DropdownGroup';\nDropdown.Group = DropdownGroup;\n\n// DropdownMenu.Sub is a context-only Radix primitive that renders no DOM node, so\n// the original styled(DropdownMenu.Sub) border-bottom never applied (the className\n// was dropped). The migration preserves that behavior: no class is forwarded.\nconst DropdownSub = (props: DropdownMenu.DropdownMenuGroupProps) => {\n  return <DropdownMenu.Sub {...props} />;\n};\n\nDropdownSub.displayName = 'DropdownSub';\nDropdown.Sub = DropdownSub;\n\ninterface DropdownItemProps extends DropdownMenu.DropdownMenuItemProps {\n  /** Icon to display in the menu item */\n  icon?: IconName;\n  /** The direction of the icon relative to the label */\n  iconDir?: HorizontalDirection;\n  /** The type of the menu item */\n  type?: 'default' | 'danger';\n}\n\nexport type { DropdownItemProps };\n\nconst DropdownItem = ({\n  icon,\n  iconDir,\n  type = 'default',\n  children,\n  ...props\n}: DropdownItemProps) => {\n  return (\n    <DropdownMenuItem\n      as={DropdownMenu.Item}\n      type={type}\n      {...props}\n    >\n      <IconWrapper\n        icon={icon}\n        iconDir={iconDir}\n      >\n        {children}\n      </IconWrapper>\n    </DropdownMenuItem>\n  );\n};\n\nDropdownItem.displayName = 'DropdownItem';\nDropdown.Item = DropdownItem;\n\nexport default Dropdown;\n"],"names":["Dropdown","props","jsx","DropdownMenu","_DropdownMenuItem","className","ref","GenericMenuItem","cn","styles","DropdownMenuItem","forwardRef","DropdownTrigger","sub","children","icon","iconDir","menuProps","SubTrigger","IconWrapper","Icon","triggerProps","displayName","Trigger","_DropdownMenuContent","GenericMenuPanel","DropdownMenuContent","DropdownContent","container","showArrow","responsivePositioning","ContentElement","SubContent","Content","inputModalityProps","useInputModality","portalContainer","useResolvedPortalContainer","jsxs","undefined","Arrow","Popover_Arrow","DropdownGroup","Group","DropdownSub","Sub","DropdownItem","type","Item"],"mappings":"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"}

package/dist/cjs/components/EllipsisContent/EllipsisContent.css

@@ -0,0 +1,21 @@
+/* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same
+   width fallback chain (100% → -webkit-fill-available → fill-available →
+   stretch) so the content fills the available inline space. */
+.ellipsis-content__jsw7w {
+  display: inline-block;
+  width: 100%;
+  width: -webkit-fill-available;
+  width: fill-available;
+  width: stretch;
+  overflow: hidden;
+  justify-content: flex-start;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  vertical-align: text-bottom;
+}
+/* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
+
+.ellipsis-content__jsw7w > *:not(button) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/dist/cjs/components/EllipsisContent/EllipsisContent.module.css.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const styles = {
+	"ellipsis-content": "ellipsis-content__jsw7w"
+};
+
+exports.default = styles;
+//# sourceMappingURL=EllipsisContent.module.css.cjs.map

package/dist/cjs/components/EllipsisContent/EllipsisContent.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EllipsisContent.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/cjs/components/EllipsisContent/index.cjs

@@ -1,3 +1,4 @@
+require("./EllipsisContent.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -5,20 +6,20 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
 const mergeRefs = require('../../utils/mergeRefs.cjs');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
+const EllipsisContent_module = require('./EllipsisContent.module.css.cjs');
 
-const EllipsisContainer = styledComponents.styled.div.withConfig({
-  componentId: "sc-1ibz5fp-0"
-})(["display:inline-block;white-space:nowrap;text-overflow:ellipsis;vertical-align:text-bottom;overflow:hidden;justify-content:flex-start;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;& > *:not(button){overflow:hidden;text-overflow:ellipsis;}"]);
 const _EllipsisContent = ({
   component,
+  className,
   ...props
 }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(EllipsisContainer, { as: component ?? "div", ref: mergeRefs.mergeRefs([ref, (node) => {
+  const Component = component ?? "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref: mergeRefs.mergeRefs([ref, (node) => {
     if (node && node.scrollWidth > node.clientWidth) {
       node.title = node.innerText;
     }
-  }]), ...props });
+  }]), ...props, className: cva.cn(EllipsisContent_module.default["ellipsis-content"], className) });
 };
 const EllipsisContent = react.forwardRef(_EllipsisContent);
 

package/dist/cjs/components/EllipsisContent/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/EllipsisContent/EllipsisContent.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { mergeRefs } from '@/utils/mergeRefs';\nimport { styled } from 'styled-components';\n\nconst EllipsisContainer = styled.div`\n  display: inline-block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  vertical-align: text-bottom;\n  overflow: hidden;\n  justify-content: flex-start;\n  width: 100%;\n  width: -webkit-fill-available;\n  width: fill-available;\n  width: stretch;\n  & > *:not(button) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n`;\nexport interface EllipsisContentProps<T extends ElementType = 'div'> {\n  component?: T;\n}\n\ntype EllipsisPolymorphicComponent = <T extends ElementType = 'div'>(\n  props: Omit<ComponentProps<T>, keyof EllipsisContentProps<T>> & EllipsisContentProps<T>\n) => ReactNode;\n\nconst _EllipsisContent = <T extends ElementType = 'div'>(\n  {\n    component,\n    ...props\n  }: Omit<ComponentProps<T>, keyof EllipsisContentProps<T>> & EllipsisContentProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  return (\n    <EllipsisContainer\n      as={component ?? 'div'}\n      ref={mergeRefs([\n        ref,\n        node => {\n          if (node && node.scrollWidth > node.clientWidth) {\n            node.title = node.innerText;\n          }\n        },\n      ])}\n      {...props}\n    />\n  );\n};\n\nexport const EllipsisContent: EllipsisPolymorphicComponent = forwardRef(_EllipsisContent);\n"],"names":["EllipsisContainer","styled","div","withConfig","componentId","_EllipsisContent","component","props","ref","jsx","mergeRefs","node","scrollWidth","clientWidth","title","innerText","EllipsisContent","forwardRef"],"mappings":";;;;;;;;;AAUA,MAAMA,iBAAAA,GAAoBC,uBAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,4QAAA,CAAA,CAAA;AAwBpC,MAAMC,mBAAmB,CACvB;AAAA,EACEC,SAAAA;AAAAA,EACA,GAAGC;AAC6E,CAAA,EAClFC,GAAAA,KACG;AACH,EAAA,uBACEC,cAAA,CAAC,qBACC,EAAA,EAAIH,SAAAA,IAAa,OACjB,GAAA,EAAKI,mBAAAA,CAAU,CACbF,GAAAA,EACAG,CAAAA,IAAAA,KAAQ;AACN,IAAA,IAAIA,IAAAA,IAAQA,IAAAA,CAAKC,WAAAA,GAAcD,IAAAA,CAAKE,WAAAA,EAAa;AAC/CF,MAAAA,IAAAA,CAAKG,QAAQH,IAAAA,CAAKI,SAAAA;AAAAA,IACpB;AAAA,EACF,CAAC,CACF,CAAA,EACD,GAAIR,KAAAA,EAAM,CAAA;AAGhB,CAAA;AAEO,MAAMS,eAAAA,GAAgDC,iBAAWZ,gBAAgB;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/EllipsisContent/EllipsisContent.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { mergeRefs } from '@/utils/mergeRefs';\nimport { cn } from '@/lib/cva';\nimport styles from './EllipsisContent.module.css';\n\nexport interface EllipsisContentProps<T extends ElementType = 'div'> {\n  component?: T;\n}\n\ntype EllipsisPolymorphicComponent = <T extends ElementType = 'div'>(\n  props: Omit<ComponentProps<T>, keyof EllipsisContentProps<T>> & EllipsisContentProps<T>\n) => ReactNode;\n\nconst _EllipsisContent = <T extends ElementType = 'div'>(\n  {\n    component,\n    className,\n    ...props\n  }: Omit<ComponentProps<T>, keyof EllipsisContentProps<T>> &\n    EllipsisContentProps<T> & { className?: string },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'div';\n  return (\n    <Component\n      ref={mergeRefs([\n        ref,\n        node => {\n          if (node && node.scrollWidth > node.clientWidth) {\n            node.title = node.innerText;\n          }\n        },\n      ])}\n      {...props}\n      className={cn(styles['ellipsis-content'], className)}\n    />\n  );\n};\n\nexport const EllipsisContent: EllipsisPolymorphicComponent = forwardRef(_EllipsisContent);\n"],"names":["_EllipsisContent","component","className","props","ref","Component","mergeRefs","node","scrollWidth","clientWidth","title","innerText","cn","styles","EllipsisContent","forwardRef"],"mappings":";;;;;;;;;;AAmBA,MAAMA,mBAAmB,CACvB;AAAA,EACEC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AAE4C,CAAA,EACjDC,GAAAA,KACG;AACH,EAAA,MAAMC,YAAYJ,SAAAA,IAAa,KAAA;AAC/B,EAAA,sCACG,SAAA,EAAA,EACC,GAAA,EAAKK,mBAAAA,CAAU,CACbF,KACAG,CAAAA,IAAAA,KAAQ;AACN,IAAA,IAAIA,IAAAA,IAAQA,IAAAA,CAAKC,WAAAA,GAAcD,IAAAA,CAAKE,WAAAA,EAAa;AAC/CF,MAAAA,IAAAA,CAAKG,QAAQH,IAAAA,CAAKI,SAAAA;AAAAA,IACpB;AAAA,EACF,CAAC,CACF,CAAA,KACGR,KAAAA,EACJ,SAAA,EAAWS,MAAAA,CAAGC,8BAAAA,CAAO,kBAAkB,CAAA,EAAGX,SAAS,CAAA,EAAE,CAAA;AAG3D,CAAA;AAEO,MAAMY,eAAAA,GAAgDC,iBAAWf,gBAAgB;;;;"}

package/dist/cjs/components/EmptyButton/EmptyButton.css

@@ -0,0 +1,21 @@
+/* Kept at zero specificity via :where() so that downstream styled-components
+   overrides on a styled(EmptyButton) (e.g. CrossButton overriding background and
+   padding, the Popover/CodeBlock close/copy buttons overriding color and padding)
+   win without needing a specificity hack — EmptyButton is a CSS Module, whose
+   rules otherwise beat equal-specificity styled-components by source order. */
+:where(.empty-button__1ynA8) {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  outline: none;
+  cursor: pointer;
+}
+
+/* Also scoped with :where() so the disabled cursor stays at zero specificity
+   and a downstream styled(EmptyButton) `&:disabled` override wins naturally,
+   rather than tying on specificity and losing to the CSS Module by source order. */
+:where(.empty-button__1ynA8):disabled {
+  cursor: not-allowed;
+}

package/dist/cjs/components/EmptyButton/EmptyButton.module.css.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const styles = {
+	"empty-button": "empty-button__1ynA8"
+};
+
+exports.default = styles;
+//# sourceMappingURL=EmptyButton.module.css.cjs.map

package/dist/cjs/components/EmptyButton/EmptyButton.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyButton.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/cjs/components/EmptyButton/index.cjs

@@ -1,12 +1,18 @@
+require("./EmptyButton.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const styledComponents = require('styled-components');
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const cva = require('../../lib/cva.cjs');
+const EmptyButton_module = require('./EmptyButton.module.css.cjs');
 
-const EmptyButton = styledComponents.styled.button.withConfig({
-  componentId: "sc-1noms58-0"
-})(["background:transparent;border:none;cursor:pointer;outline:none;padding:0;border:0;color:inherit;font:inherit;&:disabled{cursor:not-allowed;}"]);
+const EmptyButton = react.forwardRef(({
+  className,
+  ...props
+}, ref) => /* @__PURE__ */ jsxRuntime.jsx("button", { ref, ...props, className: cva.cn(EmptyButton_module.default["empty-button"], className) }));
+EmptyButton.displayName = "EmptyButton";
 
 exports.EmptyButton = EmptyButton;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/components/EmptyButton/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/EmptyButton/EmptyButton.tsx"],"sourcesContent":["import { styled } from 'styled-components';\n\nexport const EmptyButton = styled.button`\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  outline: none;\n  padding: 0;\n  border: 0;\n  color: inherit;\n  font: inherit;\n  &:disabled {\n    cursor: not-allowed;\n  }\n`;\n"],"names":["EmptyButton","styled","button","withConfig","componentId"],"mappings":";;;;;;AAEO,MAAMA,WAAAA,GAAcC,uBAAAA,CAAOC,MAAAA,CAAMC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,8IAAA,CAAA;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/EmptyButton/EmptyButton.tsx"],"sourcesContent":["import { ButtonHTMLAttributes, forwardRef } from 'react';\nimport { cn } from '@/lib/cva';\nimport styles from './EmptyButton.module.css';\n\nexport const EmptyButton = forwardRef<\n  HTMLButtonElement,\n  ButtonHTMLAttributes<HTMLButtonElement>\n>(({ className, ...props }, ref) => (\n  <button\n    ref={ref}\n    {...props}\n    className={cn(styles['empty-button'], className)}\n  />\n));\n\nEmptyButton.displayName = 'EmptyButton';\n"],"names":["EmptyButton","forwardRef","className","props","ref","jsx","cn","styles","displayName"],"mappings":";;;;;;;;;AAIO,MAAMA,WAAAA,GAAcC,iBAGzB,CAAC;AAAA,EAAEC,SAAAA;AAAAA,EAAW,GAAGC;AAAM,CAAA,EAAGC,GAAAA,qBAC1BC,cAAA,CAAC,QAAA,EAAA,EACC,GAAA,KACIF,KAAAA,EACJ,SAAA,EAAWG,MAAAA,CAAGC,0BAAAA,CAAO,cAAc,CAAA,EAAGL,SAAS,IAElD;AAEDF,WAAAA,CAAYQ,WAAAA,GAAc,aAAA;;;;"}

package/dist/cjs/components/FileTabs/FileTabs.css

@@ -0,0 +1,167 @@
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileTabs) */
+.tabs__jY99b {
+  display: flex;
+  position: relative;
+  max-width: var(--file-tabs-count-width);
+  overflow: auto;
+  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- preserves the styled-components original verbatim; the invalid scrollbar-width value is ignored by browsers and the scrollbar is hidden via the ::-webkit-scrollbar rule below */
+  overscroll-behavior: none;
+  scrollbar-width: 0;
+  /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
+}
+
+.tabs__jY99b::-webkit-scrollbar {
+  height: 0;
+}
+
+.tabs-sortable__7e-D1 {
+  display: flex;
+}
+
+.tabs-sortable__7e-D1 > div {
+  width: clamp(100px, 100%, 200px);
+  min-width: 100px;
+  height: 100%;
+  outline: none;
+}
+
+.tabs-sortable__7e-D1 > div.sortable-ghost__1JlRB {
+  opacity: 0;
+}
+
+.tab__Fud6d {
+  display: grid;
+  box-sizing: border-box;
+  max-width: 100%;
+  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same width fallback chain (100% → -webkit-fill-available → fill-available → stretch) so the tab fills the available inline space */
+  max-width: -webkit-fill-available;
+  max-width: fill-available;
+  max-width: stretch;
+  /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
+  height: 100%;
+  max-height: 100%;
+  padding: var(--click-tabs-fileTabs-space-y) var(--click-tabs-fileTabs-space-x);
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--click-tabs-fileTabs-space-gap);
+  grid-template-columns: 1fr;
+  border: none;
+  border-right: 1px solid var(--click-tabs-fileTabs-color-stroke-default);
+  border-radius: var(--click-tabs-fileTabs-radii-all);
+  background: var(--click-tabs-fileTabs-color-background-default);
+  color: var(--click-tabs-fileTabs-color-text-default);
+  font: var(--click-tabs-fileTabs-typography-label-default);
+  outline: none;
+  cursor: pointer;
+}
+
+.tab__Fud6d svg,
+.tab__Fud6d [data-indicator] {
+  width: var(--click-tabs-fileTabs-icon-size-width);
+  height: var(--click-tabs-fileTabs-icon-size-height);
+}
+
+.tab__Fud6d [data-type='close'] {
+  display: none;
+}
+
+.tab__Fud6d [data-indicator] {
+  display: block;
+}
+
+.tab__Fud6d:hover [data-type='close'] {
+  display: block;
+}
+
+.tab__Fud6d:hover [data-indicator] {
+  display: none;
+}
+
+.tab_active__nqwS6 {
+  border-right: 1px solid var(--click-tabs-fileTabs-color-stroke-active);
+  background: var(--click-tabs-fileTabs-color-background-active);
+  color: var(--click-tabs-fileTabs-color-text-active);
+  font: var(--click-tabs-fileTabs-typography-label-active);
+}
+
+.tab_inactive__tflkU:hover {
+  border-right: 1px solid var(--click-tabs-fileTabs-color-stroke-hover);
+  background: var(--click-tabs-fileTabs-color-background-hover);
+  color: var(--click-tabs-fileTabs-color-text-hover);
+  font: var(--click-tabs-fileTabs-typography-label-hover);
+}
+
+.tab_full-width__sU4rf {
+  width: 100%;
+}
+
+.tab_fixed__S0Bwz {
+  width: auto;
+}
+
+.tab_preview__FR-Q6 {
+  font-style: italic;
+}
+
+.tab_dismissable__ud86m {
+  grid-template-columns: 1fr var(--click-tabs-fileTabs-icon-size-width);
+}
+
+.indicator__ZD0YM {
+  position: relative;
+}
+
+.indicator__ZD0YM::after {
+  content: '';
+  position: absolute;
+  top: 0.25rem;
+  left: 0.25rem;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background: transparent;
+}
+
+.indicator__ZD0YM[data-indicator='success']::after {
+  background: var(--click-alert-color-text-success);
+}
+
+.indicator__ZD0YM[data-indicator='neutral']::after {
+  background: var(--click-alert-color-text-neutral);
+}
+
+.indicator__ZD0YM[data-indicator='danger']::after {
+  background: var(--click-alert-color-text-danger);
+}
+
+.indicator__ZD0YM[data-indicator='warning']::after {
+  background: var(--click-alert-color-text-warning);
+}
+
+.indicator__ZD0YM[data-indicator='info']::after {
+  background: var(--click-alert-color-text-info);
+}
+
+.tab-content__JX6iV {
+  display: flex;
+  overflow: hidden;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--click-tabs-fileTabs-space-gap);
+}
+
+.tab-content-text__zXnlM {
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.empty-button__czm-t {
+  padding: 0;
+}
+
+.empty-button__czm-t:hover {
+  background: var(--click-tabs-fileTabs-color-closeButton-background-hover);
+}

package/dist/cjs/components/FileTabs/FileTabs.module.css.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const tabs = "tabs__jY99b";
+const tab = "tab__Fud6d";
+const tab_active = "tab_active__nqwS6";
+const tab_inactive = "tab_inactive__tflkU";
+const tab_fixed = "tab_fixed__S0Bwz";
+const tab_preview = "tab_preview__FR-Q6";
+const tab_dismissable = "tab_dismissable__ud86m";
+const indicator = "indicator__ZD0YM";
+const styles = {
+	tabs: tabs,
+	"tabs-sortable": "tabs-sortable__7e-D1",
+	tab: tab,
+	tab_active: tab_active,
+	tab_inactive: tab_inactive,
+	"tab_full-width": "tab_full-width__sU4rf",
+	tab_fixed: tab_fixed,
+	tab_preview: tab_preview,
+	tab_dismissable: tab_dismissable,
+	indicator: indicator,
+	"tab-content": "tab-content__JX6iV",
+	"tab-content-text": "tab-content-text__zXnlM",
+	"empty-button": "empty-button__czm-t"
+};
+
+exports.default = styles;
+exports.indicator = indicator;
+exports.tab = tab;
+exports.tab_active = tab_active;
+exports.tab_dismissable = tab_dismissable;
+exports.tab_fixed = tab_fixed;
+exports.tab_inactive = tab_inactive;
+exports.tab_preview = tab_preview;
+exports.tabs = tabs;
+//# sourceMappingURL=FileTabs.module.css.cjs.map

package/dist/cjs/components/FileTabs/FileTabs.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileTabs.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/components/FileTabs/index.cjs

@@ -1,13 +1,16 @@
+require("./FileTabs.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
+const FileTabs_module = require('./FileTabs.module.css.cjs');
 const ReactSortableModule = require('react-sortablejs/dist/index.js');
 const Icon = require('../Icon/index.cjs');
 const IconButton = require('../IconButton/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
 const _interopDefault = e => e && e.__esModule ? e : { default: e };
 
@@ -16,14 +19,6 @@ const ReactSortableModule__default = /*#__PURE__*/_interopDefault(ReactSortableM
 const {
   ReactSortable
 } = ReactSortableModule__default.default;
-const TabsContainer = styledComponents.styled.div.withConfig({
-  componentId: "sc-137ymle-0"
-})(["display:flex;position:relative;overflow:auto;overscroll-behavior:none;scrollbar-width:0;max-width:", ";&::-webkit-scrollbar{height:0;}"], ({
-  $count
-}) => `${$count * 200}px`);
-const TabsSortableContainer = styledComponents.styled(ReactSortable).withConfig({
-  componentId: "sc-137ymle-1"
-})(["display:flex;& > div{height:100%;outline:none;min-width:100px;width:clamp(100px,100%,200px);&.sortable-ghost{opacity:0;}}"]);
 const TabContext = react.createContext({
   selectedIndex: void 0,
   onClose: () => null
@@ -46,6 +41,7 @@ const FileTabs = ({
   onEnd,
   direction,
   group,
+  className,
   ...props
 }) => {
   const ref = react.useRef(null);
@@ -76,10 +72,12 @@ const FileTabs = ({
       ref.current.scrollLeft += evt.deltaY;
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(TabContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(TabsContainer, { ref, onWheel, role: "tablist", onScroll: (e) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(TabContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, onWheel, role: "tablist", onScroll: (e) => {
     e.preventDefault();
     e.stopPropagation();
-  }, $count: (listProp ?? list).length, children: /* @__PURE__ */ jsxRuntime.jsx(TabsSortableContainer, { direction: direction ?? "horizontal", group: group ?? "tabbar", list: listProp ?? list, setList: setListProp ?? setList, onEnd: (evt, sortable, store) => {
+  }, className: FileTabs_module.default.tabs, style: {
+    "--file-tabs-count-width": `${(listProp ?? list).length * 200}px`
+  }, children: /* @__PURE__ */ jsxRuntime.jsx(ReactSortable, { direction: direction ?? "horizontal", group: group ?? "tabbar", list: listProp ?? list, setList: setListProp ?? setList, onEnd: (evt, sortable, store) => {
     const {
       newDraggableIndex,
       oldDraggableIndex
@@ -90,70 +88,33 @@ const FileTabs = ({
     if (typeof onEnd === "function") {
       onEnd(evt, sortable, store);
     }
-  }, revertOnSpill: true, ...props, children: react.Children.map(children, (child, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { tabIndex: index + 1, role: "tab", onClick: onSelect(index), children: child }, `tab-element-${index}`)) }) }) });
+  }, revertOnSpill: true, ...props, className: cva.cn(FileTabs_module.default["tabs-sortable"], className), children: react.Children.map(children, (child, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { tabIndex: index + 1, role: "tab", onClick: onSelect(index), children: child }, `tab-element-${index}`)) }) }) });
 };
-const TabElement = styledComponents.styled.div.withConfig({
-  componentId: "sc-137ymle-2"
-})(["display:grid;justify-content:flex-start;align-items:center;outline:none;max-width:100%;max-width:-webkit-fill-available;max-width:fill-available;max-width:stretch;border:none;cursor:pointer;height:100%;max-height:100%;box-sizing:border-box;", ` [data-type="close"]{display:none;}[data-indicator]{display:block;}&:hover{[data-type='close']{display:block;}[data-indicator]{display:none;}}`], ({
-  theme,
-  $active,
-  $preview,
-  $dismissable,
-  $fixedTabElement
-}) => `
-    width:${$fixedTabElement ? "auto" : "100%"};
-    grid-template-columns: 1fr ${$dismissable ? theme.click.tabs.fileTabs.icon.size.width : ""};
-    padding: ${theme.click.tabs.fileTabs.space.y} ${theme.click.tabs.fileTabs.space.x};
-    gap: ${theme.click.tabs.fileTabs.space.gap};
-    border-radius: ${theme.click.tabs.fileTabs.radii.all};
-    border-right: 1px solid ${theme.click.tabs.fileTabs.color.stroke.default};
-    background: ${theme.click.tabs.fileTabs.color.background.default};
-    color: ${theme.click.tabs.fileTabs.color.text.default};
-    font: ${theme.click.tabs.fileTabs.typography.label.default};
-    svg,
-    [data-indicator] {
-      height: ${theme.click.tabs.fileTabs.icon.size.height};
-      width: ${theme.click.tabs.fileTabs.icon.size.width};
+const tabVariants = classVarianceAuthority.cva(FileTabs_module.default.tab, {
+  variants: {
+    active: {
+      true: FileTabs_module.default.tab_active,
+      false: FileTabs_module.default.tab_inactive
+    },
+    fixed: {
+      true: FileTabs_module.default.tab_fixed,
+      false: FileTabs_module.default["tab_full-width"]
+    },
+    preview: {
+      true: FileTabs_module.default.tab_preview,
+      false: ""
+    },
+    dismissable: {
+      true: FileTabs_module.default.tab_dismissable,
+      false: ""
     }
-    ${$active ? `
-          background: ${theme.click.tabs.fileTabs.color.background.active};
-          color: ${theme.click.tabs.fileTabs.color.text.active};
-          font: ${theme.click.tabs.fileTabs.typography.label.active};
-          border-right: 1px solid ${theme.click.tabs.fileTabs.color.stroke.active};
-        ` : `
-          &:hover {
-            background: ${theme.click.tabs.fileTabs.color.background.hover};
-            color: ${theme.click.tabs.fileTabs.color.text.hover};
-            font: ${theme.click.tabs.fileTabs.typography.label.hover};
-            border-right: 1px solid ${theme.click.tabs.fileTabs.color.stroke.hover};
-          }
-        `}
-    ${$preview === true ? "font-style: italic;" : ""}
-  `);
-const Indicator = styledComponents.styled.div.withConfig({
-  componentId: "sc-137ymle-3"
-})(["position:relative;&::after{position:absolute;left:0.25rem;top:0.25rem;content:'';width:0.5rem;height:0.5rem;", "}"], ({
-  theme,
-  $status
-}) => `
-      background: ${$status === "default" ? "transparent" : theme.click.alert.color.text[$status]};
-      border-radius: 50%;
-  `);
-const TabContent = styledComponents.styled.div.withConfig({
-  componentId: "sc-137ymle-4"
-})(["display:flex;justify-content:flex-start;align-items:center;flex-wrap:nowrap;overflow:hidden;gap:", ";"], ({
-  theme
-}) => theme.click.tabs.fileTabs.space.gap);
-const TabContentText = styledComponents.styled.span.withConfig({
-  componentId: "sc-137ymle-5"
-})(["display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;"]);
-const EmptyButton = styledComponents.styled.button.withConfig({
-  componentId: "sc-137ymle-6"
-})(["padding:0;", ";&:hover{background:", ";}"], ({
-  theme
-}) => theme.click.tabs.fileTabs.color.closeButton.background.default, ({
-  theme
-}) => theme.click.tabs.fileTabs.color.closeButton.background.hover);
+  },
+  defaultVariants: {
+    fixed: false,
+    preview: false,
+    dismissable: false
+  }
+});
 const Tab = ({
   text,
   index,
@@ -162,6 +123,7 @@ const Tab = ({
   status = "default",
   testId,
   preview,
+  className,
   ...props
 }) => {
   const {
@@ -183,13 +145,17 @@ const Tab = ({
     e.stopPropagation();
     onCloseProp(index);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(TabElement, { $active: selectedIndex === index, onMouseDown, "data-testid": testId ? `${testId}-${index}` : void 0, $preview: preview, $dismissable: true, ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(TabContent, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { onMouseDown, "data-testid": testId ? `${testId}-${index}` : void 0, ...props, className: cva.cn(tabVariants({
+    active: selectedIndex === index,
+    preview,
+    dismissable: true
+  }), className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: FileTabs_module.default["tab-content"], children: [
       typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon }) : icon,
-      /* @__PURE__ */ jsxRuntime.jsx(TabContentText, { children: text })
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: FileTabs_module.default["tab-content-text"], children: text })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(EmptyButton, { as: IconButton.IconButton, htmlType: "button", icon: "cross", onClick: onClose, "data-type": "close", "data-testid": testId ? `${testId}-${index}-close` : void 0 }),
-    /* @__PURE__ */ jsxRuntime.jsx(Indicator, { $status: status, "data-indicator": status, "data-testid": testId ? `${testId}-${index}-status` : void 0 })
+    /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { className: FileTabs_module.default["empty-button"], htmlType: "button", icon: "cross", onClick: onClose, "data-type": "close", "data-testid": testId ? `${testId}-${index}-close` : void 0 }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: FileTabs_module.default.indicator, "data-indicator": status, "data-testid": testId ? `${testId}-${index}-status` : void 0 })
   ] });
 };
 Tab.displayName = "FileTab";
@@ -199,11 +165,16 @@ const FileTabElement = ({
   children,
   active = false,
   preview,
+  className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(TabElement, { $active: active, $preview: preview, $dismissable: false, $fixedTabElement: true, ...props, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...props, className: cva.cn(tabVariants({
+    active,
+    preview,
+    fixed: true
+  }), className), children: [
     typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon }) : icon,
-    children && /* @__PURE__ */ jsxRuntime.jsx(TabContentText, { children })
+    children && /* @__PURE__ */ jsxRuntime.jsx("span", { className: FileTabs_module.default["tab-content-text"], children })
   ] });
 };