@clickhouse/click-ui 0.7.0 → 0.9.0

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 })
   ] });
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/FileTabs/FileTabs.tsx"],"sourcesContent":["import {\n  HTMLAttributes,\n  createContext,\n  useContext,\n  ReactElement,\n  Children,\n  useState,\n  MouseEvent,\n  useEffect,\n  ReactNode,\n  WheelEvent,\n  useRef,\n} from 'react';\nimport { styled } from 'styled-components';\nimport { Icon } from '@/components/Icon';\nimport { IconButton } from '@/components/IconButton';\nimport type { IconName } from '@/components/Icon/Icon.types';\n\n// TODO: Check if react-sortablejs has ESM version\nimport ReactSortableModule from 'react-sortablejs/dist/index.js';\nimport type {\n  ItemInterface,\n  Sortable,\n  Store,\n  ReactSortableProps,\n} from 'react-sortablejs';\nconst { ReactSortable } = ReactSortableModule;\n\nexport type FileTabStatusType =\n  | 'default'\n  | 'success'\n  | 'neutral'\n  | 'danger'\n  | 'warning'\n  | 'info';\n\nconst TabsContainer = styled.div<{ $count: number }>`\n  display: flex;\n  position: relative;\n  overflow: auto;\n  overscroll-behavior: none;\n  scrollbar-width: 0;\n  max-width: ${({ $count }) => `${$count * 200}px`};\n  &::-webkit-scrollbar {\n    height: 0;\n  }\n`;\n\nconst TabsSortableContainer = styled(ReactSortable)`\n  display: flex;\n  & > div {\n    height: 100%;\n    outline: none;\n    min-width: 100px;\n    width: clamp(100px, 100%, 200px);\n    &.sortable-ghost {\n      opacity: 0;\n    }\n  }\n`;\n\ninterface ContextProps {\n  selectedIndex?: number;\n  onClose: (index: number) => void;\n}\n\nexport const TabContext = createContext<ContextProps>({\n  selectedIndex: undefined,\n  onClose: () => null,\n});\n\nexport interface FileTabProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Callback when the tab is closed */\n  onClose?: () => void;\n  /** Index of the tab in the list */\n  index: number;\n  /** Status indicator for the tab */\n  status?: FileTabStatusType;\n  /** Icon to display in the tab */\n  icon?: IconName | ReactNode;\n  /** Text to display in the tab */\n  text: string;\n  /** Test ID for testing */\n  testId?: string;\n  /** Whether the tab is in preview mode (italic text) */\n  preview?: boolean;\n}\nexport interface FileTabsProps extends Omit<\n  ReactSortableProps<ItemInterface>,\n  'onSelect' | 'list' | 'setList'\n> {\n  /** Index of the currently selected tab */\n  selectedIndex?: number;\n  /** The tab elements to render */\n  children: ReactElement<FileTabProps> | ReactElement<FileTabProps>[];\n  /** Callback when a tab is reordered via drag and drop */\n  onReorderTab: (sourcePosition: number, destinationPosition: number) => void;\n  /** Callback when a tab is closed */\n  onClose: (index: number) => void;\n  /** Callback when a tab is selected */\n  onSelect: (index: number) => void;\n  /** List of items for sortable functionality */\n  list?: ItemInterface[];\n  /** Setter for the sortable list */\n  setList?: (newState: ItemInterface[], sortable: Sortable | null, store: Store) => void;\n}\n\nconst useSelect = () => {\n  const result = useContext(TabContext);\n  if (!result) {\n    throw new Error('Context used outside of its Provider!');\n  }\n  return result;\n};\n\nexport const FileTabs = ({\n  selectedIndex,\n  children,\n  onReorderTab,\n  onClose: onCloseProp,\n  onSelect: onSelectProp,\n  list: listProp,\n  setList: setListProp,\n  onEnd,\n  direction,\n  group,\n  ...props\n}: FileTabsProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [list, setList] = useState<ItemInterface[]>(\n    Children.map(children, (_, index) => ({\n      id: `tab-element-${index}`,\n    }))\n  );\n  useEffect(() => {\n    setList(\n      Children.map(children, (_, index) => ({\n        id: `tab-element-${index}`,\n      }))\n    );\n  }, [children]);\n\n  const onClose = (index: number) => {\n    onCloseProp(index);\n    setList(list => {\n      list.splice(index, 1);\n      return [...list];\n    });\n  };\n\n  const onSelect = (index: number) => () => {\n    onSelectProp(index);\n  };\n\n  const value = {\n    selectedIndex,\n    onClose,\n  };\n\n  const onWheel = (evt: WheelEvent<HTMLDivElement>) => {\n    if (ref.current) {\n      ref.current.scrollLeft += evt.deltaY;\n    }\n  };\n  return (\n    <TabContext.Provider value={value}>\n      <TabsContainer\n        ref={ref}\n        onWheel={onWheel}\n        role=\"tablist\"\n        onScroll={e => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        $count={(listProp ?? list).length}\n      >\n        <TabsSortableContainer\n          direction={direction ?? 'horizontal'}\n          group={group ?? 'tabbar'}\n          list={listProp ?? list}\n          setList={setListProp ?? setList}\n          onEnd={(evt, sortable, store) => {\n            const { newDraggableIndex, oldDraggableIndex } = evt;\n            if (\n              typeof newDraggableIndex === 'number' &&\n              typeof oldDraggableIndex === 'number' &&\n              oldDraggableIndex !== newDraggableIndex\n            ) {\n              onReorderTab(oldDraggableIndex, newDraggableIndex);\n            }\n            if (typeof onEnd === 'function') {\n              onEnd(evt, sortable, store);\n            }\n          }}\n          revertOnSpill\n          {...props}\n        >\n          {Children.map(children, (child, index) => (\n            <div\n              tabIndex={index + 1}\n              role=\"tab\"\n              onClick={onSelect(index)}\n              key={`tab-element-${index}`}\n            >\n              {child}\n            </div>\n          ))}\n        </TabsSortableContainer>\n      </TabsContainer>\n    </TabContext.Provider>\n  );\n};\n\nconst TabElement = styled.div<{\n  $active: boolean;\n  $preview?: boolean;\n  $dismissable: boolean;\n  $fixedTabElement?: boolean;\n}>`\n  display: grid;\n  justify-content: flex-start;\n  align-items: center;\n  outline: none;\n  max-width: 100%;\n  max-width: -webkit-fill-available;\n  max-width: fill-available;\n  max-width: stretch;\n  border: none;\n  cursor: pointer;\n  height: 100%;\n  max-height: 100%;\n  box-sizing: border-box;\n  ${({ theme, $active, $preview, $dismissable, $fixedTabElement }) => `\n    width:${$fixedTabElement ? 'auto' : '100%'};\n    grid-template-columns: 1fr ${\n      $dismissable ? theme.click.tabs.fileTabs.icon.size.width : ''\n    };\n    padding: ${theme.click.tabs.fileTabs.space.y} ${theme.click.tabs.fileTabs.space.x};\n    gap: ${theme.click.tabs.fileTabs.space.gap};\n    border-radius: ${theme.click.tabs.fileTabs.radii.all};\n    border-right: 1px solid ${theme.click.tabs.fileTabs.color.stroke.default};\n    background: ${theme.click.tabs.fileTabs.color.background.default};\n    color: ${theme.click.tabs.fileTabs.color.text.default};\n    font: ${theme.click.tabs.fileTabs.typography.label.default};\n    svg,\n    [data-indicator] {\n      height: ${theme.click.tabs.fileTabs.icon.size.height};\n      width: ${theme.click.tabs.fileTabs.icon.size.width};\n    }\n    ${\n      $active\n        ? `\n          background: ${theme.click.tabs.fileTabs.color.background.active};\n          color: ${theme.click.tabs.fileTabs.color.text.active};\n          font: ${theme.click.tabs.fileTabs.typography.label.active};\n          border-right: 1px solid ${theme.click.tabs.fileTabs.color.stroke.active};\n        `\n        : `\n          &:hover {\n            background: ${theme.click.tabs.fileTabs.color.background.hover};\n            color: ${theme.click.tabs.fileTabs.color.text.hover};\n            font: ${theme.click.tabs.fileTabs.typography.label.hover};\n            border-right: 1px solid ${theme.click.tabs.fileTabs.color.stroke.hover};\n          }\n        `\n    }\n    ${$preview === true ? 'font-style: italic;' : ''}\n  `}\n  [data-type=\"close\"] {\n    display: none;\n  }\n  [data-indicator] {\n    display: block;\n  }\n  &:hover {\n    [data-type='close'] {\n      display: block;\n    }\n    [data-indicator] {\n      display: none;\n    }\n  }\n`;\n\nconst Indicator = styled.div<{ $status: FileTabStatusType }>`\n  position: relative;\n  &::after {\n    position: absolute;\n    left: 0.25rem;\n    top: 0.25rem;\n    content: '';\n    width: 0.5rem;\n    height: 0.5rem;\n    ${({ theme, $status }) => `\n      background: ${\n        $status === 'default' ? 'transparent' : theme.click.alert.color.text[$status]\n      };\n      border-radius: 50%;\n  `}\n  }\n`;\n\nconst TabContent = styled.div`\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-wrap: nowrap;\n  overflow: hidden;\n  gap: ${({ theme }) => theme.click.tabs.fileTabs.space.gap};\n`;\n\nconst TabContentText = styled.span`\n  display: inline-block;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n`;\n\nconst EmptyButton = styled.button`\n  padding: 0;\n  ${({ theme }) => theme.click.tabs.fileTabs.color.closeButton.background.default};\n  &:hover {\n    background: ${({ theme }) =>\n      theme.click.tabs.fileTabs.color.closeButton.background.hover};\n  }\n`;\n\nconst Tab = ({\n  text,\n  index,\n  icon,\n  onMouseDown: onMouseDownProp,\n  status = 'default',\n  testId,\n  preview,\n  ...props\n}: FileTabProps) => {\n  const { selectedIndex, onClose: onCloseProp } = useSelect();\n  const onMouseDown = (e: MouseEvent<HTMLDivElement>) => {\n    e.currentTarget.scrollIntoView({\n      behavior: 'smooth',\n      block: 'nearest',\n      inline: 'center',\n    });\n    if (typeof onMouseDownProp === 'function') {\n      onMouseDownProp(e);\n    }\n  };\n\n  const onClose = (e: MouseEvent<HTMLButtonElement>): void => {\n    e.preventDefault();\n    e.stopPropagation();\n    onCloseProp(index);\n  };\n\n  return (\n    <TabElement\n      $active={selectedIndex === index}\n      onMouseDown={onMouseDown}\n      data-testid={testId ? `${testId}-${index}` : undefined}\n      $preview={preview}\n      $dismissable\n      {...props}\n    >\n      <TabContent>\n        {typeof icon === 'string' ? <Icon name={icon as IconName} /> : icon}\n        <TabContentText>{text}</TabContentText>\n      </TabContent>\n      <EmptyButton\n        as={IconButton}\n        htmlType=\"button\"\n        icon=\"cross\"\n        onClick={onClose}\n        data-type=\"close\"\n        data-testid={testId ? `${testId}-${index}-close` : undefined}\n      />\n      <Indicator\n        $status={status}\n        data-indicator={status}\n        data-testid={testId ? `${testId}-${index}-status` : undefined}\n      />\n    </TabElement>\n  );\n};\n\nTab.displayName = 'FileTab';\n\nFileTabs.Tab = Tab;\n\ninterface FileTabElementProps extends HTMLAttributes<HTMLDivElement> {\n  icon?: IconName | ReactNode;\n  active?: boolean;\n  preview?: boolean;\n}\nexport const FileTabElement = ({\n  icon,\n  children,\n  active = false,\n  preview,\n  ...props\n}: FileTabElementProps) => {\n  return (\n    <TabElement\n      $active={active}\n      $preview={preview}\n      $dismissable={false}\n      $fixedTabElement\n      {...props}\n    >\n      {typeof icon === 'string' ? <Icon name={icon as IconName} /> : icon}\n      {children && <TabContentText>{children}</TabContentText>}\n    </TabElement>\n  );\n};\n"],"names":["ReactSortable","ReactSortableModule","TabsContainer","styled","div","withConfig","componentId","$count","TabsSortableContainer","TabContext","createContext","selectedIndex","undefined","onClose","useSelect","result","useContext","Error","FileTabs","children","onReorderTab","onCloseProp","onSelect","onSelectProp","list","listProp","setList","setListProp","onEnd","direction","group","props","ref","useRef","useState","Children","map","_","index","id","useEffect","splice","value","onWheel","evt","current","scrollLeft","deltaY","jsx","e","preventDefault","stopPropagation","length","sortable","store","newDraggableIndex","oldDraggableIndex","child","TabElement","theme","$active","$preview","$dismissable","$fixedTabElement","click","tabs","fileTabs","icon","size","width","space","y","x","gap","radii","all","color","stroke","default","background","text","typography","label","height","active","hover","Indicator","$status","alert","TabContent","TabContentText","span","EmptyButton","button","closeButton","Tab","onMouseDown","onMouseDownProp","status","testId","preview","currentTarget","scrollIntoView","behavior","block","inline","jsxs","Icon","IconButton","displayName","FileTabElement"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/FileTabs/FileTabs.tsx"],"sourcesContent":["import {\n  HTMLAttributes,\n  createContext,\n  useContext,\n  ReactElement,\n  Children,\n  useState,\n  MouseEvent,\n  useEffect,\n  ReactNode,\n  WheelEvent,\n  useRef,\n  CSSProperties,\n} from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport { Icon } from '@/components/Icon';\nimport { IconButton } from '@/components/IconButton';\nimport type { IconName } from '@/components/Icon/Icon.types';\nimport styles from './FileTabs.module.css';\n\n// TODO: Check if react-sortablejs has ESM version\nimport ReactSortableModule from 'react-sortablejs/dist/index.js';\nimport type {\n  ItemInterface,\n  Sortable,\n  Store,\n  ReactSortableProps,\n} from 'react-sortablejs';\nconst { ReactSortable } = ReactSortableModule;\n\nexport type FileTabStatusType =\n  | 'default'\n  | 'success'\n  | 'neutral'\n  | 'danger'\n  | 'warning'\n  | 'info';\n\ninterface ContextProps {\n  selectedIndex?: number;\n  onClose: (index: number) => void;\n}\n\nexport const TabContext = createContext<ContextProps>({\n  selectedIndex: undefined,\n  onClose: () => null,\n});\n\nexport interface FileTabProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Callback when the tab is closed */\n  onClose?: () => void;\n  /** Index of the tab in the list */\n  index: number;\n  /** Status indicator for the tab */\n  status?: FileTabStatusType;\n  /** Icon to display in the tab */\n  icon?: IconName | ReactNode;\n  /** Text to display in the tab */\n  text: string;\n  /** Test ID for testing */\n  testId?: string;\n  /** Whether the tab is in preview mode (italic text) */\n  preview?: boolean;\n}\nexport interface FileTabsProps extends Omit<\n  ReactSortableProps<ItemInterface>,\n  'onSelect' | 'list' | 'setList'\n> {\n  /** Index of the currently selected tab */\n  selectedIndex?: number;\n  /** The tab elements to render */\n  children: ReactElement<FileTabProps> | ReactElement<FileTabProps>[];\n  /** Callback when a tab is reordered via drag and drop */\n  onReorderTab: (sourcePosition: number, destinationPosition: number) => void;\n  /** Callback when a tab is closed */\n  onClose: (index: number) => void;\n  /** Callback when a tab is selected */\n  onSelect: (index: number) => void;\n  /** List of items for sortable functionality */\n  list?: ItemInterface[];\n  /** Setter for the sortable list */\n  setList?: (newState: ItemInterface[], sortable: Sortable | null, store: Store) => void;\n}\n\nconst useSelect = () => {\n  const result = useContext(TabContext);\n  if (!result) {\n    throw new Error('Context used outside of its Provider!');\n  }\n  return result;\n};\n\nexport const FileTabs = ({\n  selectedIndex,\n  children,\n  onReorderTab,\n  onClose: onCloseProp,\n  onSelect: onSelectProp,\n  list: listProp,\n  setList: setListProp,\n  onEnd,\n  direction,\n  group,\n  className,\n  ...props\n}: FileTabsProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [list, setList] = useState<ItemInterface[]>(\n    Children.map(children, (_, index) => ({\n      id: `tab-element-${index}`,\n    }))\n  );\n  useEffect(() => {\n    setList(\n      Children.map(children, (_, index) => ({\n        id: `tab-element-${index}`,\n      }))\n    );\n  }, [children]);\n\n  const onClose = (index: number) => {\n    onCloseProp(index);\n    setList(list => {\n      list.splice(index, 1);\n      return [...list];\n    });\n  };\n\n  const onSelect = (index: number) => () => {\n    onSelectProp(index);\n  };\n\n  const value = {\n    selectedIndex,\n    onClose,\n  };\n\n  const onWheel = (evt: WheelEvent<HTMLDivElement>) => {\n    if (ref.current) {\n      ref.current.scrollLeft += evt.deltaY;\n    }\n  };\n  return (\n    <TabContext.Provider value={value}>\n      <div\n        ref={ref}\n        onWheel={onWheel}\n        role=\"tablist\"\n        onScroll={e => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        className={styles.tabs}\n        style={\n          {\n            '--file-tabs-count-width': `${(listProp ?? list).length * 200}px`,\n          } as CSSProperties\n        }\n      >\n        <ReactSortable\n          direction={direction ?? 'horizontal'}\n          group={group ?? 'tabbar'}\n          list={listProp ?? list}\n          setList={setListProp ?? setList}\n          onEnd={(evt, sortable, store) => {\n            const { newDraggableIndex, oldDraggableIndex } = evt;\n            if (\n              typeof newDraggableIndex === 'number' &&\n              typeof oldDraggableIndex === 'number' &&\n              oldDraggableIndex !== newDraggableIndex\n            ) {\n              onReorderTab(oldDraggableIndex, newDraggableIndex);\n            }\n            if (typeof onEnd === 'function') {\n              onEnd(evt, sortable, store);\n            }\n          }}\n          revertOnSpill\n          {...props}\n          className={cn(styles['tabs-sortable'], className)}\n        >\n          {Children.map(children, (child, index) => (\n            <div\n              tabIndex={index + 1}\n              role=\"tab\"\n              onClick={onSelect(index)}\n              key={`tab-element-${index}`}\n            >\n              {child}\n            </div>\n          ))}\n        </ReactSortable>\n      </div>\n    </TabContext.Provider>\n  );\n};\n\nconst tabVariants = cva(styles.tab, {\n  variants: {\n    active: {\n      true: styles.tab_active,\n      false: styles.tab_inactive,\n    },\n    fixed: {\n      true: styles.tab_fixed,\n      false: styles['tab_full-width'],\n    },\n    preview: {\n      true: styles.tab_preview,\n      false: '',\n    },\n    dismissable: {\n      true: styles.tab_dismissable,\n      false: '',\n    },\n  },\n  defaultVariants: {\n    fixed: false,\n    preview: false,\n    dismissable: false,\n  },\n});\n\nconst Tab = ({\n  text,\n  index,\n  icon,\n  onMouseDown: onMouseDownProp,\n  status = 'default',\n  testId,\n  preview,\n  className,\n  ...props\n}: FileTabProps) => {\n  const { selectedIndex, onClose: onCloseProp } = useSelect();\n  const onMouseDown = (e: MouseEvent<HTMLDivElement>) => {\n    e.currentTarget.scrollIntoView({\n      behavior: 'smooth',\n      block: 'nearest',\n      inline: 'center',\n    });\n    if (typeof onMouseDownProp === 'function') {\n      onMouseDownProp(e);\n    }\n  };\n\n  const onClose = (e: MouseEvent<HTMLButtonElement>): void => {\n    e.preventDefault();\n    e.stopPropagation();\n    onCloseProp(index);\n  };\n\n  return (\n    <div\n      onMouseDown={onMouseDown}\n      data-testid={testId ? `${testId}-${index}` : undefined}\n      {...props}\n      className={cn(\n        tabVariants({\n          active: selectedIndex === index,\n          preview,\n          dismissable: true,\n        }),\n        className\n      )}\n    >\n      <div className={styles['tab-content']}>\n        {typeof icon === 'string' ? <Icon name={icon as IconName} /> : icon}\n        <span className={styles['tab-content-text']}>{text}</span>\n      </div>\n      <IconButton\n        className={styles['empty-button']}\n        htmlType=\"button\"\n        icon=\"cross\"\n        onClick={onClose}\n        data-type=\"close\"\n        data-testid={testId ? `${testId}-${index}-close` : undefined}\n      />\n      <div\n        className={styles.indicator}\n        data-indicator={status}\n        data-testid={testId ? `${testId}-${index}-status` : undefined}\n      />\n    </div>\n  );\n};\n\nTab.displayName = 'FileTab';\n\nFileTabs.Tab = Tab;\n\ninterface FileTabElementProps extends HTMLAttributes<HTMLDivElement> {\n  icon?: IconName | ReactNode;\n  active?: boolean;\n  preview?: boolean;\n}\nexport const FileTabElement = ({\n  icon,\n  children,\n  active = false,\n  preview,\n  className,\n  ...props\n}: FileTabElementProps) => {\n  return (\n    <div\n      {...props}\n      className={cn(tabVariants({ active, preview, fixed: true }), className)}\n    >\n      {typeof icon === 'string' ? <Icon name={icon as IconName} /> : icon}\n      {children && <span className={styles['tab-content-text']}>{children}</span>}\n    </div>\n  );\n};\n"],"names":["ReactSortable","ReactSortableModule","TabContext","createContext","selectedIndex","undefined","onClose","useSelect","result","useContext","Error","FileTabs","children","onReorderTab","onCloseProp","onSelect","onSelectProp","list","listProp","setList","setListProp","onEnd","direction","group","className","props","ref","useRef","useState","Children","map","_","index","id","useEffect","splice","value","onWheel","evt","current","scrollLeft","deltaY","jsx","e","preventDefault","stopPropagation","styles","tabs","length","sortable","store","newDraggableIndex","oldDraggableIndex","cn","child","tabVariants","cva","tab","variants","active","true","tab_active","false","tab_inactive","fixed","tab_fixed","preview","tab_preview","dismissable","tab_dismissable","defaultVariants","Tab","text","icon","onMouseDown","onMouseDownProp","status","testId","currentTarget","scrollIntoView","behavior","block","inline","jsxs","Icon","IconButton","indicator","displayName","FileTabElement"],"mappings":"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"}

package/dist/cjs/components/FileUpload/FileMultiUpload.cjs

@@ -1,21 +1,15 @@
+require("./FileMultiUpload.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 FileUploadArea = require('./FileUploadArea.cjs');
 const FileUploadItem = require('./FileUploadItem.cjs');
 const useDragAndDrop = require('./useDragAndDrop.cjs');
+const FileMultiUpload_module = require('./FileMultiUpload.module.css.cjs');
 
-const FilesList = styledComponents.styled.div.withConfig({
-  componentId: "sc-1w9rsfj-0"
-})(["display:flex;flex-direction:column;gap:", ";width:100%;margin-top:", ";"], ({
-  theme
-}) => theme.click.fileUpload.sm.space.gap, ({
-  theme
-}) => theme.click.fileUpload.md.space.gap);
 const FileMultiUpload = ({
   title,
   supportedFileTypes = [".txt", ".sql"],
@@ -61,7 +55,7 @@ const FileMultiUpload = ({
   const acceptedFileTypes = supportedFileTypes.join(",");
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(FileUploadArea.FileUploadArea, { title, supportedFileTypes, size: "md", isDragging, isNotSupported, hasFile: false, multiple: true, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, onClick: handleBrowseClick }),
-    files.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(FilesList, { children: files.map((file) => /* @__PURE__ */ jsxRuntime.jsx(FileUploadItem.FileUploadItem, { fileName: file.name, fileSize: file.size, progress: file.progress, showSuccess: file.status === "success", showProgress: file.status === "uploading", failureMessage: file.errorMessage || "Upload failed", onRetry: () => handleRetryUpload(file.id), onRemove: () => handleRemoveFile(file.id), size: "sm", inline: false }, file.id)) }),
+    files.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: FileMultiUpload_module.default["files-list"], children: files.map((file) => /* @__PURE__ */ jsxRuntime.jsx(FileUploadItem.FileUploadItem, { fileName: file.name, fileSize: file.size, progress: file.progress, showSuccess: file.status === "success", showProgress: file.status === "uploading", failureMessage: file.errorMessage || "Upload failed", onRetry: () => handleRetryUpload(file.id), onRemove: () => handleRemoveFile(file.id), size: "sm", inline: false }, file.id)) }),
     /* @__PURE__ */ jsxRuntime.jsx("input", { type: "file", ref: fileInputRef, accept: acceptedFileTypes, onChange: handleFileSelect, multiple: true, style: {
       display: "none"
     } })

package/dist/cjs/components/FileUpload/FileMultiUpload.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileMultiUpload.cjs","sources":["../../../../src/components/FileUpload/FileMultiUpload.tsx"],"sourcesContent":["import { useCallback } from 'react';\nimport { styled } from 'styled-components';\nimport { FileUploadArea } from './FileUploadArea';\nimport { FileUploadItem } from './FileUploadItem';\nimport { useDragAndDrop } from './useDragAndDrop';\n\nexport interface FileUploadItem {\n  id: string;\n  name: string;\n  size: number;\n  status: 'uploading' | 'success' | 'error';\n  progress: number;\n  errorMessage?: string;\n}\n\nexport interface FileMultiUploadProps {\n  title: string;\n  supportedFileTypes?: string[];\n  files: FileUploadItem[];\n  onFileSelect?: (file: File) => void;\n  onFileRetry?: (fileId: string) => void;\n  onFileRemove?: (fileId: string) => void;\n  onFileFailure?: () => void;\n}\n\nconst FilesList = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: ${({ theme }) => theme.click.fileUpload.sm.space.gap};\n  width: 100%;\n  margin-top: ${({ theme }) => theme.click.fileUpload.md.space.gap};\n`;\n\nexport const FileMultiUpload = ({\n  title,\n  supportedFileTypes = ['.txt', '.sql'],\n  files,\n  onFileSelect,\n  onFileRetry,\n  onFileRemove,\n  onFileFailure,\n}: FileMultiUploadProps) => {\n  const handleFilesProcessed = useCallback(\n    (processedFiles: File[]) => {\n      processedFiles.forEach(file => {\n        if (onFileSelect) {\n          onFileSelect(file);\n        }\n      });\n    },\n    [onFileSelect]\n  );\n\n  const {\n    isDragging,\n    isNotSupported,\n    fileInputRef,\n    handleDragEnter,\n    handleDragLeave,\n    handleDragOver,\n    handleDrop,\n    handleFileSelect,\n    handleBrowseClick,\n  } = useDragAndDrop({\n    onFilesProcessed: handleFilesProcessed,\n    supportedFileTypes,\n    onFileFailure,\n    multiple: true,\n  });\n\n  const handleRemoveFile = useCallback(\n    (fileId: string) => {\n      if (onFileRemove) {\n        onFileRemove(fileId);\n      }\n    },\n    [onFileRemove]\n  );\n\n  const handleRetryUpload = useCallback(\n    (fileId: string) => {\n      if (onFileRetry) {\n        onFileRetry(fileId);\n      }\n    },\n    [onFileRetry]\n  );\n\n  const acceptedFileTypes = supportedFileTypes.join(',');\n\n  return (\n    <>\n      <FileUploadArea\n        title={title}\n        supportedFileTypes={supportedFileTypes}\n        size=\"md\"\n        isDragging={isDragging}\n        isNotSupported={isNotSupported}\n        hasFile={false}\n        multiple={true}\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n        onClick={handleBrowseClick}\n      />\n\n      {files.length > 0 && (\n        <FilesList>\n          {files.map(file => (\n            <FileUploadItem\n              key={file.id}\n              fileName={file.name}\n              fileSize={file.size}\n              progress={file.progress}\n              showSuccess={file.status === 'success'}\n              showProgress={file.status === 'uploading'}\n              failureMessage={file.errorMessage || 'Upload failed'}\n              onRetry={() => handleRetryUpload(file.id)}\n              onRemove={() => handleRemoveFile(file.id)}\n              size=\"sm\"\n              inline={false}\n            />\n          ))}\n        </FilesList>\n      )}\n\n      <input\n        type=\"file\"\n        ref={fileInputRef}\n        accept={acceptedFileTypes}\n        onChange={handleFileSelect}\n        multiple\n        style={{ display: 'none' }}\n      />\n    </>\n  );\n};\n"],"names":["FilesList","styled","div","withConfig","componentId","theme","click","fileUpload","sm","space","gap","md","FileMultiUpload","title","supportedFileTypes","files","onFileSelect","onFileRetry","onFileRemove","onFileFailure","handleFilesProcessed","useCallback","processedFiles","forEach","file","isDragging","isNotSupported","fileInputRef","handleDragEnter","handleDragLeave","handleDragOver","handleDrop","handleFileSelect","handleBrowseClick","useDragAndDrop","onFilesProcessed","multiple","handleRemoveFile","fileId","handleRetryUpload","acceptedFileTypes","join","jsxs","Fragment","jsx","FileUploadArea","length","map","FileUploadItem","name","size","progress","status","errorMessage","id","display"],"mappings":"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"}
+{"version":3,"file":"FileMultiUpload.cjs","sources":["../../../../src/components/FileUpload/FileMultiUpload.tsx"],"sourcesContent":["import { useCallback } from 'react';\nimport { FileUploadArea } from './FileUploadArea';\nimport { FileUploadItem } from './FileUploadItem';\nimport { useDragAndDrop } from './useDragAndDrop';\nimport styles from './FileMultiUpload.module.css';\n\nexport interface FileUploadItem {\n  id: string;\n  name: string;\n  size: number;\n  status: 'uploading' | 'success' | 'error';\n  progress: number;\n  errorMessage?: string;\n}\n\nexport interface FileMultiUploadProps {\n  title: string;\n  supportedFileTypes?: string[];\n  files: FileUploadItem[];\n  onFileSelect?: (file: File) => void;\n  onFileRetry?: (fileId: string) => void;\n  onFileRemove?: (fileId: string) => void;\n  onFileFailure?: () => void;\n}\n\nexport const FileMultiUpload = ({\n  title,\n  supportedFileTypes = ['.txt', '.sql'],\n  files,\n  onFileSelect,\n  onFileRetry,\n  onFileRemove,\n  onFileFailure,\n}: FileMultiUploadProps) => {\n  const handleFilesProcessed = useCallback(\n    (processedFiles: File[]) => {\n      processedFiles.forEach(file => {\n        if (onFileSelect) {\n          onFileSelect(file);\n        }\n      });\n    },\n    [onFileSelect]\n  );\n\n  const {\n    isDragging,\n    isNotSupported,\n    fileInputRef,\n    handleDragEnter,\n    handleDragLeave,\n    handleDragOver,\n    handleDrop,\n    handleFileSelect,\n    handleBrowseClick,\n  } = useDragAndDrop({\n    onFilesProcessed: handleFilesProcessed,\n    supportedFileTypes,\n    onFileFailure,\n    multiple: true,\n  });\n\n  const handleRemoveFile = useCallback(\n    (fileId: string) => {\n      if (onFileRemove) {\n        onFileRemove(fileId);\n      }\n    },\n    [onFileRemove]\n  );\n\n  const handleRetryUpload = useCallback(\n    (fileId: string) => {\n      if (onFileRetry) {\n        onFileRetry(fileId);\n      }\n    },\n    [onFileRetry]\n  );\n\n  const acceptedFileTypes = supportedFileTypes.join(',');\n\n  return (\n    <>\n      <FileUploadArea\n        title={title}\n        supportedFileTypes={supportedFileTypes}\n        size=\"md\"\n        isDragging={isDragging}\n        isNotSupported={isNotSupported}\n        hasFile={false}\n        multiple={true}\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n        onClick={handleBrowseClick}\n      />\n\n      {files.length > 0 && (\n        <div className={styles['files-list']}>\n          {files.map(file => (\n            <FileUploadItem\n              key={file.id}\n              fileName={file.name}\n              fileSize={file.size}\n              progress={file.progress}\n              showSuccess={file.status === 'success'}\n              showProgress={file.status === 'uploading'}\n              failureMessage={file.errorMessage || 'Upload failed'}\n              onRetry={() => handleRetryUpload(file.id)}\n              onRemove={() => handleRemoveFile(file.id)}\n              size=\"sm\"\n              inline={false}\n            />\n          ))}\n        </div>\n      )}\n\n      <input\n        type=\"file\"\n        ref={fileInputRef}\n        accept={acceptedFileTypes}\n        onChange={handleFileSelect}\n        multiple\n        style={{ display: 'none' }}\n      />\n    </>\n  );\n};\n"],"names":["FileMultiUpload","title","supportedFileTypes","files","onFileSelect","onFileRetry","onFileRemove","onFileFailure","handleFilesProcessed","useCallback","processedFiles","forEach","file","isDragging","isNotSupported","fileInputRef","handleDragEnter","handleDragLeave","handleDragOver","handleDrop","handleFileSelect","handleBrowseClick","useDragAndDrop","onFilesProcessed","multiple","handleRemoveFile","fileId","handleRetryUpload","acceptedFileTypes","join","jsxs","Fragment","jsx","FileUploadArea","length","styles","map","FileUploadItem","name","size","progress","status","errorMessage","id","display"],"mappings":"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"}

package/dist/cjs/components/FileUpload/FileMultiUpload.css

@@ -0,0 +1,8 @@
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileUpload) */
+.files-list__Of0Ps {
+  display: flex;
+  width: 100%;
+  margin-top: var(--click-fileUpload-md-space-gap);
+  flex-direction: column;
+  gap: var(--click-fileUpload-sm-space-gap);
+}

package/dist/cjs/components/FileUpload/FileMultiUpload.module.css.cjs

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

package/dist/cjs/components/FileUpload/FileMultiUpload.module.css.cjs.map

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

package/dist/cjs/components/FileUpload/FileUpload.stories-common.css

@@ -0,0 +1,14 @@
+.wrapper__LM6zP {
+  width: 100%;
+}
+
+/* 768px == --breakpoint-sizes-md (media queries can't consume a CSS var). */
+/* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+   required for browser compatibility per .browserslistrc */
+@media (min-width: 768px) {
+  .wrapper__LM6zP {
+    width: 100%;
+    max-width: 1024px; /* --breakpoint-sizes-lg */
+    margin: 0 auto;
+  }
+}

package/dist/cjs/components/FileUpload/FileUploadArea.cjs

@@ -1,71 +1,75 @@
+require("./FileUploadArea.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const styledComponents = require('styled-components');
-const Button = require('../Button/index.cjs');
+const cva = require('../../lib/cva.cjs');
+const FileUploadArea_module = require('./FileUploadArea.module.css.cjs');
 const Icon = require('../Icon/index.cjs');
 const Title = require('../Title/index.cjs');
 const Text = require('../Text/index.cjs');
+const Button = require('../Button/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
-const UploadArea = styledComponents.styled.div.withConfig({
-  componentId: "sc-14xz07d-0"
-})(["container-type:inline-size;container-name:uploadArea;box-sizing:border-box;width:100%;background-color:", ";border:", ";border-radius:", ";padding:", ";min-height:", ";display:flex;flex-direction:", ";align-items:center;justify-content:", ";gap:", ";cursor:", ";transition:", ";", " ", ""], ({
-  theme
-}) => theme.click.fileUpload.color.background.default, ({
-  theme
-}) => `1px solid ${theme.click.fileUpload.color.stroke.default}`, ({
-  theme,
-  $hasFile
-}) => $hasFile ? `${theme.click.fileUpload.sm.radii.all}` : `${theme.click.fileUpload.md.radii.all}`, ({
-  theme,
-  $hasFile,
-  $size
-}) => $hasFile || $size === "sm" ? `${theme.click.fileUpload.sm.space.y} ${theme.click.fileUpload.sm.space.x}` : `${theme.click.fileUpload.md.space.y} ${theme.click.fileUpload.md.space.x}`, ({
-  theme,
-  $size
-}) => $size === "sm" ? `calc(${theme.click.fileUpload.sm.space.y} * 2 + ${theme.sizes[8]})` : "auto", (props) => props.$hasFile ? "row" : props.$size === "sm" ? "row" : "column", (props) => props.$hasFile ? "space-between" : props.$size === "sm" ? "space-between" : "center", ({
-  theme,
-  $size
-}) => $size === "sm" ? theme.click.fileUpload.sm.space.gap : theme.click.fileUpload.md.space.gap, (props) => props.$hasFile ? "default" : "pointer", ({
-  theme
-}) => theme.click.fileUpload.transitions.all, (props) => !props.$hasFile && styledComponents.css(["border-style:dashed;border-color:", ";", ""], ({
-  theme
-}) => theme.click.fileUpload.color.stroke.default, props.$isDragging && styledComponents.css(["background-color:", ";border-color:", ";"], ({
-  theme
-}) => theme.click.fileUpload.color.background.active, ({
-  theme
-}) => theme.click.fileUpload.color.stroke.active)), (props) => props.$isError && styledComponents.css(["background-color:", ";border-color:transparent;"], ({
-  theme
-}) => theme.click.fileUpload.color.background.error));
-const FileUploadTitle = styledComponents.styled(Title.Title).withConfig({
-  componentId: "sc-14xz07d-1"
-})(["font:", ";color:", ";"], ({
-  theme
-}) => theme.click.fileUpload.typography.title.default, ({
-  theme,
-  $isNotSupported
-}) => $isNotSupported ? theme.click.fileUpload.color.title.error : theme.click.fileUpload.color.title.default);
-const FileUploadDescription = styledComponents.styled(Text.Text).withConfig({
-  componentId: "sc-14xz07d-2"
-})(["font:", ";color:", ";"], ({
-  theme
-}) => theme.click.fileUpload.typography.description.default, ({
-  theme
-}) => theme.click.fileUpload.color.description.default);
-const UploadIcon = styledComponents.styled(Icon.Icon).withConfig({
-  componentId: "sc-14xz07d-3"
-})(["svg{width:", ";height:", ";color:", ";}"], ({
-  theme
-}) => theme.click.fileUpload.md.icon.size.width, ({
-  theme
-}) => theme.click.fileUpload.md.icon.size.height, ({
-  theme
-}) => theme.click.fileUpload.md.color.icon.default);
-const UploadText = styledComponents.styled.div.withConfig({
-  componentId: "sc-14xz07d-4"
-})(["text-align:", ";", " ", ""], (props) => props.$hasFile || props.$size === "sm" ? "left" : "center", (props) => (props.$hasFile || props.$size === "sm") && styledComponents.css(["flex:1;"]), (props) => !props.$hasFile && props.$size === "md" && styledComponents.css(["display:flex;flex-direction:column;align-items:center;width:100%;"]));
+const uploadAreaVariants = classVarianceAuthority.cva(FileUploadArea_module.default["upload-area"], {
+  variants: {
+    radius: {
+      sm: FileUploadArea_module.default["upload-area_radius_sm"],
+      md: FileUploadArea_module.default["upload-area_radius_md"]
+    },
+    padding: {
+      sm: FileUploadArea_module.default["upload-area_padding_sm"],
+      md: FileUploadArea_module.default["upload-area_padding_md"]
+    },
+    minHeight: {
+      sm: FileUploadArea_module.default["upload-area_min-height_sm"],
+      md: FileUploadArea_module.default["upload-area_min-height_md"]
+    },
+    direction: {
+      row: FileUploadArea_module.default["upload-area_direction_row"],
+      column: FileUploadArea_module.default["upload-area_direction_column"]
+    },
+    justify: {
+      "space-between": FileUploadArea_module.default["upload-area_justify_space-between"],
+      center: FileUploadArea_module.default["upload-area_justify_center"]
+    },
+    gap: {
+      sm: FileUploadArea_module.default["upload-area_gap_sm"],
+      md: FileUploadArea_module.default["upload-area_gap_md"]
+    },
+    cursor: {
+      default: FileUploadArea_module.default["upload-area_cursor_default"],
+      pointer: FileUploadArea_module.default["upload-area_cursor_pointer"]
+    },
+    dashed: {
+      true: FileUploadArea_module.default["upload-area_dashed_true"]
+    },
+    dragging: {
+      true: FileUploadArea_module.default["upload-area_dragging_true"]
+    },
+    error: {
+      true: FileUploadArea_module.default["upload-area_error_true"]
+    }
+  }
+});
+const titleVariants = classVarianceAuthority.cva(FileUploadArea_module.default.title, {
+  variants: {
+    notSupported: {
+      true: FileUploadArea_module.default["title_not-supported_true"]
+    }
+  }
+});
+const uploadTextVariants = classVarianceAuthority.cva(FileUploadArea_module.default["upload-text"], {
+  variants: {
+    centered: {
+      true: FileUploadArea_module.default["upload-text_centered_true"]
+    },
+    grow: {
+      true: FileUploadArea_module.default["upload-text_grow_true"]
+    }
+  }
+});
 const FileUploadArea = ({
   title,
   supportedFileTypes,
@@ -82,11 +86,30 @@ const FileUploadArea = ({
   onClick,
   children
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(UploadArea, { $isDragging: isDragging, $size: size, $hasFile: hasFile, $isError: isError, onDragEnter, onDragLeave, onDragOver, onDrop, onClick: !hasFile ? onClick : void 0, children: !hasFile ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(UploadIcon, { name: "upload" }),
-    /* @__PURE__ */ jsxRuntime.jsxs(UploadText, { $size: size, $hasFile: false, children: [
-      isNotSupported ? /* @__PURE__ */ jsxRuntime.jsx(FileUploadTitle, { $isNotSupported: true, type: "h1", children: "Unsupported file type" }) : /* @__PURE__ */ jsxRuntime.jsx(FileUploadTitle, { $isNotSupported: isNotSupported, type: "h1", children: title }),
-      /* @__PURE__ */ jsxRuntime.jsxs(FileUploadDescription, { children: [
+  const isCompact = hasFile || size === "sm";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cva.cn(uploadAreaVariants({
+    radius: hasFile ? "sm" : "md",
+    padding: isCompact ? "sm" : "md",
+    minHeight: size === "sm" ? "sm" : "md",
+    direction: hasFile || size === "sm" ? "row" : "column",
+    justify: hasFile || size === "sm" ? "space-between" : "center",
+    gap: size === "sm" ? "sm" : "md",
+    cursor: hasFile ? "default" : "pointer",
+    dashed: !hasFile,
+    dragging: !hasFile && isDragging,
+    error: isError
+  })), onDragEnter, onDragLeave, onDragOver, onDrop, onClick: !hasFile ? onClick : void 0, children: !hasFile ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "upload", className: FileUploadArea_module.default["upload-icon"] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cva.cn(uploadTextVariants({
+      centered: !hasFile && size === "md",
+      grow: hasFile || size === "sm"
+    })), children: [
+      isNotSupported ? /* @__PURE__ */ jsxRuntime.jsx(Title.Title, { type: "h1", className: cva.cn(titleVariants({
+        notSupported: true
+      })), children: "Unsupported file type" }) : /* @__PURE__ */ jsxRuntime.jsx(Title.Title, { type: "h1", className: cva.cn(titleVariants({
+        notSupported: isNotSupported
+      })), children: title }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Text.Text, { className: FileUploadArea_module.default.description, children: [
         "Files supported: ",
         supportedFileTypes.join(", ")
       ] })