@intlayer/design-system 5.1.5 → 5.1.7

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Command/index.tsx"],"sourcesContent":["/* eslint-disable react/no-unknown-property */\n'use client';\n\nimport {\n  Dialog,\n  DialogContent,\n  type DialogProps,\n} from '@radix-ui/react-dialog';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { Search } from 'lucide-react';\nimport { type ComponentProps, type FC, type HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport const CommandRoot: FC<ComponentProps<typeof CommandPrimitive>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive\n    className={cn(\n      'flex size-full flex-col overflow-hidden rounded-md',\n      className\n    )}\n    {...props}\n  />\n);\n\ntype CommandDialogProps = DialogProps;\n\nconst CommandDialog: FC<CommandDialogProps> = ({ children, ...props }) => (\n  <Dialog {...props}>\n    <DialogContent className=\"overflow-hidden p-0\">\n      <CommandRoot className=\"[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]_svg]:size-5\">\n        {children}\n      </CommandRoot>\n    </DialogContent>\n  </Dialog>\n);\n\nconst CommandInput: FC<ComponentProps<typeof CommandPrimitive.Input>> = ({\n  className,\n  ...props\n}) => (\n  <div className=\"flex w-full items-center\" cmdk-input-wrapper=\"\">\n    <Search className=\"mr-2 size-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      className={cn(\n        'placeholder:text-muted-foreground flex w-full rounded-md bg-transparent text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n        className\n      )}\n      {...props}\n    />\n  </div>\n);\n\nconst CommandList: FC<ComponentProps<typeof CommandPrimitive.List>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive.List\n    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}\n    {...props}\n  />\n);\n\nconst CommandEmpty: FC<ComponentProps<typeof CommandPrimitive.Empty>> = (\n  props\n) => <CommandPrimitive.Empty className=\"py-6 text-center text-sm\" {...props} />;\n\nconst CommandGroup: FC<ComponentProps<typeof CommandPrimitive.Group>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive.Group\n    className={cn(\n      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst CommandSeparator: FC<\n  ComponentProps<typeof CommandPrimitive.Separator>\n> = ({ className, ...props }) => (\n  <CommandPrimitive.Separator\n    className={cn('bg-border -mx-1 h-px', className)}\n    {...props}\n  />\n);\n\nconst CommandItem: FC<ComponentProps<typeof CommandPrimitive.Item>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive.Item\n    className={cn(\n      'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        'text-muted-foreground ml-auto text-xs tracking-widest',\n        className\n      )}\n      {...props}\n    />\n  );\n};\n\n/**\n * Usage example:\n * ```jsx\n * <Command>\n *   <Command.Trigger>\n *     <Command.Input placeholder=\"Search...\" />\n *   </Command.Trigger>\n *   <Command.Dialog>\n *     <Command.List>\n *       <Command.Item>Item 1</Command.Item>\n *       <Command.Item>Item 2</Command.Item>\n *       <Command.Item>Item 3</Command.Item>\n *     </Command.List>\n *   </Command.Dialog>\n * </Command>\n * ```\n */\nexport const Command = {\n  ...CommandRoot,\n  Dialog: CommandDialog,\n  Input: CommandInput,\n  List: CommandList,\n  Empty: CommandEmpty,\n  Group: CommandGroup,\n  Separator: CommandSeparator,\n  Item: CommandItem,\n  Shortcut: CommandShortcut,\n};\n"],"names":["jsx","CommandPrimitive","cn","Dialog","DialogContent","jsxs","Search"],"mappings":";;;;;;;;AAaO,MAAM,cAA2D,CAAC;AAAA,EACvE;AAAA,EACA,GAAG;AACL,MACEA,2BAAA;AAAA,EAACC,KAAA;AAAA,EAAA;AAAA,IACC,WAAWC,SAAA;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,EAAA;AACN;AAKF,MAAM,gBAAwC,CAAC,EAAE,UAAU,GAAG,MAAM,qCACjEC,YAAAA,QAAQ,EAAA,GAAG,OACV,UAACH,2BAAAA,IAAAI,YAAAA,eAAA,EAAc,WAAU,uBACvB,UAAAJ,2BAAAA,IAAC,eAAY,WAAU,uSACpB,UACH,EAAA,CACF,EACF,CAAA;AAGF,MAAM,eAAkE,CAAC;AAAA,EACvE;AAAA,EACA,GAAG;AACL,MACGK,2BAAAA,KAAA,OAAA,EAAI,WAAU,4BAA2B,sBAAmB,IAC3D,UAAA;AAAA,EAACL,2BAAAA,IAAAM,YAAA,QAAA,EAAO,WAAU,kCAAkC,CAAA;AAAA,EACpDN,2BAAA;AAAA,IAACC,KAAAA,QAAiB;AAAA,IAAjB;AAAA,MACC,WAAWC,SAAA;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AACN,GACF;AAGF,MAAM,cAAgE,CAAC;AAAA,EACrE;AAAA,EACA,GAAG;AACL,MACEF,2BAAA;AAAA,EAACC,KAAAA,QAAiB;AAAA,EAAjB;AAAA,IACC,WAAWC,SAAAA,GAAG,mDAAmD,SAAS;AAAA,IACzE,GAAG;AAAA,EAAA;AACN;AAGF,MAAM,eAAkE,CACtE,UACIF,2BAAAA,IAAAC,KAAA,QAAiB,OAAjB,EAAuB,WAAU,4BAA4B,GAAG,OAAO;AAE7E,MAAM,eAAkE,CAAC;AAAA,EACvE;AAAA,EACA,GAAG;AACL,MACED,2BAAA;AAAA,EAACC,KAAAA,QAAiB;AAAA,EAAjB;AAAA,IACC,WAAWC,SAAA;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,EAAA;AACN;AAGF,MAAM,mBAEF,CAAC,EAAE,WAAW,GAAG,MACnB,MAAAF,2BAAA;AAAA,EAACC,KAAAA,QAAiB;AAAA,EAAjB;AAAA,IACC,WAAWC,SAAAA,GAAG,wBAAwB,SAAS;AAAA,IAC9C,GAAG;AAAA,EAAA;AACN;AAGF,MAAM,cAAgE,CAAC;AAAA,EACrE;AAAA,EACA,GAAG;AACL,MACEF,2BAAA;AAAA,EAACC,KAAAA,QAAiB;AAAA,EAAjB;AAAA,IACC,WAAWC,SAAA;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,EAAA;AACN;AAGF,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA,GAAG;AACL,MAAuC;AAEnC,SAAAF,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWE,SAAA;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;AAmBO,MAAM,UAAU;AAAA,EACrB,GAAG;AAAA,EACH,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,WAAW;AAAA,EACX,MAAM;AAAA,EACN,UAAU;AACZ;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Command/index.tsx"],"sourcesContent":["/* eslint-disable react/no-unknown-property */\n'use client';\n\nimport {\n  Dialog,\n  DialogContent,\n  type DialogProps,\n} from '@radix-ui/react-dialog';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { Search } from 'lucide-react';\nimport { type ComponentProps, type FC, type HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport const CommandRoot: FC<ComponentProps<typeof CommandPrimitive>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive\n    className={cn(\n      'flex size-full flex-col overflow-hidden rounded-md',\n      className\n    )}\n    {...props}\n  />\n);\n\ntype CommandDialogProps = DialogProps;\n\nconst CommandDialog: FC<CommandDialogProps> = ({ children, ...props }) => (\n  <Dialog {...props}>\n    <DialogContent className=\"overflow-hidden p-0\">\n      <CommandRoot className=\"[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]_svg]:size-5\">\n        {children}\n      </CommandRoot>\n    </DialogContent>\n  </Dialog>\n);\n\nconst CommandInput: FC<ComponentProps<typeof CommandPrimitive.Input>> = ({\n  className,\n  ...props\n}) => (\n  <div className=\"flex w-full items-center\" cmdk-input-wrapper=\"\">\n    <Search className=\"mr-2 size-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      className={cn(\n        'placeholder:text-muted-foreground outline-hidden flex w-full rounded-md bg-transparent text-sm disabled:cursor-not-allowed disabled:opacity-50',\n        className\n      )}\n      {...props}\n    />\n  </div>\n);\n\nconst CommandList: FC<ComponentProps<typeof CommandPrimitive.List>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive.List\n    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}\n    {...props}\n  />\n);\n\nconst CommandEmpty: FC<ComponentProps<typeof CommandPrimitive.Empty>> = (\n  props\n) => <CommandPrimitive.Empty className=\"py-6 text-center text-sm\" {...props} />;\n\nconst CommandGroup: FC<ComponentProps<typeof CommandPrimitive.Group>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive.Group\n    className={cn(\n      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst CommandSeparator: FC<\n  ComponentProps<typeof CommandPrimitive.Separator>\n> = ({ className, ...props }) => (\n  <CommandPrimitive.Separator\n    className={cn('bg-border -mx-1 h-px', className)}\n    {...props}\n  />\n);\n\nconst CommandItem: FC<ComponentProps<typeof CommandPrimitive.Item>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive.Item\n    className={cn(\n      'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        'text-muted-foreground ml-auto text-xs tracking-widest',\n        className\n      )}\n      {...props}\n    />\n  );\n};\n\n/**\n * Usage example:\n * ```jsx\n * <Command>\n *   <Command.Trigger>\n *     <Command.Input placeholder=\"Search...\" />\n *   </Command.Trigger>\n *   <Command.Dialog>\n *     <Command.List>\n *       <Command.Item>Item 1</Command.Item>\n *       <Command.Item>Item 2</Command.Item>\n *       <Command.Item>Item 3</Command.Item>\n *     </Command.List>\n *   </Command.Dialog>\n * </Command>\n * ```\n */\nexport const Command = {\n  ...CommandRoot,\n  Dialog: CommandDialog,\n  Input: CommandInput,\n  List: CommandList,\n  Empty: CommandEmpty,\n  Group: CommandGroup,\n  Separator: CommandSeparator,\n  Item: CommandItem,\n  Shortcut: CommandShortcut,\n};\n"],"names":["jsx","CommandPrimitive","cn","Dialog","DialogContent","jsxs","Search"],"mappings":";;;;;;;;AAaO,MAAM,cAA2D,CAAC;AAAA,EACvE;AAAA,EACA,GAAG;AACL,MACEA,2BAAA;AAAA,EAACC,KAAA;AAAA,EAAA;AAAA,IACC,WAAWC,SAAA;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,EAAA;AACN;AAKF,MAAM,gBAAwC,CAAC,EAAE,UAAU,GAAG,MAAM,qCACjEC,YAAAA,QAAQ,EAAA,GAAG,OACV,UAACH,2BAAAA,IAAAI,YAAAA,eAAA,EAAc,WAAU,uBACvB,UAAAJ,2BAAAA,IAAC,eAAY,WAAU,uSACpB,UACH,EAAA,CACF,EACF,CAAA;AAGF,MAAM,eAAkE,CAAC;AAAA,EACvE;AAAA,EACA,GAAG;AACL,MACGK,2BAAAA,KAAA,OAAA,EAAI,WAAU,4BAA2B,sBAAmB,IAC3D,UAAA;AAAA,EAACL,2BAAAA,IAAAM,YAAA,QAAA,EAAO,WAAU,kCAAkC,CAAA;AAAA,EACpDN,2BAAA;AAAA,IAACC,KAAAA,QAAiB;AAAA,IAAjB;AAAA,MACC,WAAWC,SAAA;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AACN,GACF;AAGF,MAAM,cAAgE,CAAC;AAAA,EACrE;AAAA,EACA,GAAG;AACL,MACEF,2BAAA;AAAA,EAACC,KAAAA,QAAiB;AAAA,EAAjB;AAAA,IACC,WAAWC,SAAAA,GAAG,mDAAmD,SAAS;AAAA,IACzE,GAAG;AAAA,EAAA;AACN;AAGF,MAAM,eAAkE,CACtE,UACIF,2BAAAA,IAAAC,KAAA,QAAiB,OAAjB,EAAuB,WAAU,4BAA4B,GAAG,OAAO;AAE7E,MAAM,eAAkE,CAAC;AAAA,EACvE;AAAA,EACA,GAAG;AACL,MACED,2BAAA;AAAA,EAACC,KAAAA,QAAiB;AAAA,EAAjB;AAAA,IACC,WAAWC,SAAA;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,EAAA;AACN;AAGF,MAAM,mBAEF,CAAC,EAAE,WAAW,GAAG,MACnB,MAAAF,2BAAA;AAAA,EAACC,KAAAA,QAAiB;AAAA,EAAjB;AAAA,IACC,WAAWC,SAAAA,GAAG,wBAAwB,SAAS;AAAA,IAC9C,GAAG;AAAA,EAAA;AACN;AAGF,MAAM,cAAgE,CAAC;AAAA,EACrE;AAAA,EACA,GAAG;AACL,MACEF,2BAAA;AAAA,EAACC,KAAAA,QAAiB;AAAA,EAAjB;AAAA,IACC,WAAWC,SAAA;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,EAAA;AACN;AAGF,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA,GAAG;AACL,MAAuC;AAEnC,SAAAF,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWE,SAAA;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;AAmBO,MAAM,UAAU;AAAA,EACrB,GAAG;AAAA,EACH,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,WAAW;AAAA,EACX,MAAM;AAAA,EACN,UAAU;AACZ;;;"}

package/dist/components/Command/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Command/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,MAAM,CAAC;AAEnD,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAG1E,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAWnE,CAAC;AA8FF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,OAAO;;;cAWuoV,MAAO,GAAG;;;;;;;;mBA1IroV,MAAO,SAAS;;cA0Im9R,MAAO,GAAG;;;;;;;mBA1I7+R,MAAO,SAAS;;cA0I4wd,MAAO,GAAG;;;;;mBA1Ityd,MAAO,SAAS;;cA0I0yW,MAAO,GAAG;;;;kBAAmO,MAAO,SAAS;;;;;cAAqe,MAAO,GAAG;;;;;;;mBA1ItiY,MAAO,SAAS;;cA0Ik+S,MAAO,GAAG;;;;;;;;;;wCAxCzhT,cAAc,CAAC,eAAe,CAAC;;;CAuCjC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Command/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,MAAM,CAAC;AAEnD,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAG1E,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAWnE,CAAC;AA8FF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,OAAO;;;cAWmoV,MAAO,GAAG;;;;;;;;mBA1IjoV,MAAO,SAAS;;cA0I+8R,MAAO,GAAG;;;;;;;mBA1Iz+R,MAAO,SAAS;;cA0Iwwd,MAAO,GAAG;;;;;mBA1Ilyd,MAAO,SAAS;;cA0IsyW,MAAO,GAAG;;;;kBAAmO,MAAO,SAAS;;;;;cAAqe,MAAO,GAAG;;;;;;;mBA1IliY,MAAO,SAAS;;cA0I89S,MAAO,GAAG;;;;;;;;;;wCAxCrhT,cAAc,CAAC,eAAe,CAAC;;;CAuCjC,CAAC"}

package/dist/components/Command/index.mjs

@@ -27,7 +27,7 @@ const CommandInput = ({
     Command$1.Input,
     {
       className: cn(
-        "placeholder:text-muted-foreground flex w-full rounded-md bg-transparent text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        "placeholder:text-muted-foreground outline-hidden flex w-full rounded-md bg-transparent text-sm disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
       ...props
@@ -72,7 +72,7 @@ const CommandItem = ({
   Command$1.Item,
   {
     className: cn(
-      "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+      "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
       className
     ),
     ...props

package/dist/components/Command/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/Command/index.tsx"],"sourcesContent":["/* eslint-disable react/no-unknown-property */\n'use client';\n\nimport {\n  Dialog,\n  DialogContent,\n  type DialogProps,\n} from '@radix-ui/react-dialog';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { Search } from 'lucide-react';\nimport { type ComponentProps, type FC, type HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport const CommandRoot: FC<ComponentProps<typeof CommandPrimitive>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive\n    className={cn(\n      'flex size-full flex-col overflow-hidden rounded-md',\n      className\n    )}\n    {...props}\n  />\n);\n\ntype CommandDialogProps = DialogProps;\n\nconst CommandDialog: FC<CommandDialogProps> = ({ children, ...props }) => (\n  <Dialog {...props}>\n    <DialogContent className=\"overflow-hidden p-0\">\n      <CommandRoot className=\"[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]_svg]:size-5\">\n        {children}\n      </CommandRoot>\n    </DialogContent>\n  </Dialog>\n);\n\nconst CommandInput: FC<ComponentProps<typeof CommandPrimitive.Input>> = ({\n  className,\n  ...props\n}) => (\n  <div className=\"flex w-full items-center\" cmdk-input-wrapper=\"\">\n    <Search className=\"mr-2 size-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      className={cn(\n        'placeholder:text-muted-foreground flex w-full rounded-md bg-transparent text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n        className\n      )}\n      {...props}\n    />\n  </div>\n);\n\nconst CommandList: FC<ComponentProps<typeof CommandPrimitive.List>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive.List\n    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}\n    {...props}\n  />\n);\n\nconst CommandEmpty: FC<ComponentProps<typeof CommandPrimitive.Empty>> = (\n  props\n) => <CommandPrimitive.Empty className=\"py-6 text-center text-sm\" {...props} />;\n\nconst CommandGroup: FC<ComponentProps<typeof CommandPrimitive.Group>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive.Group\n    className={cn(\n      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst CommandSeparator: FC<\n  ComponentProps<typeof CommandPrimitive.Separator>\n> = ({ className, ...props }) => (\n  <CommandPrimitive.Separator\n    className={cn('bg-border -mx-1 h-px', className)}\n    {...props}\n  />\n);\n\nconst CommandItem: FC<ComponentProps<typeof CommandPrimitive.Item>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive.Item\n    className={cn(\n      'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        'text-muted-foreground ml-auto text-xs tracking-widest',\n        className\n      )}\n      {...props}\n    />\n  );\n};\n\n/**\n * Usage example:\n * ```jsx\n * <Command>\n *   <Command.Trigger>\n *     <Command.Input placeholder=\"Search...\" />\n *   </Command.Trigger>\n *   <Command.Dialog>\n *     <Command.List>\n *       <Command.Item>Item 1</Command.Item>\n *       <Command.Item>Item 2</Command.Item>\n *       <Command.Item>Item 3</Command.Item>\n *     </Command.List>\n *   </Command.Dialog>\n * </Command>\n * ```\n */\nexport const Command = {\n  ...CommandRoot,\n  Dialog: CommandDialog,\n  Input: CommandInput,\n  List: CommandList,\n  Empty: CommandEmpty,\n  Group: CommandGroup,\n  Separator: CommandSeparator,\n  Item: CommandItem,\n  Shortcut: CommandShortcut,\n};\n"],"names":["CommandPrimitive"],"mappings":";;;;;;AAaO,MAAM,cAA2D,CAAC;AAAA,EACvE;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAACA;AAAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,EAAA;AACN;AAKF,MAAM,gBAAwC,CAAC,EAAE,UAAU,GAAG,MAAM,0BACjE,QAAQ,EAAA,GAAG,OACV,UAAC,oBAAA,eAAA,EAAc,WAAU,uBACvB,UAAA,oBAAC,eAAY,WAAU,uSACpB,UACH,EAAA,CACF,EACF,CAAA;AAGF,MAAM,eAAkE,CAAC;AAAA,EACvE;AAAA,EACA,GAAG;AACL,MACG,qBAAA,OAAA,EAAI,WAAU,4BAA2B,sBAAmB,IAC3D,UAAA;AAAA,EAAC,oBAAA,QAAA,EAAO,WAAU,kCAAkC,CAAA;AAAA,EACpD;AAAA,IAACA,UAAiB;AAAA,IAAjB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AACN,GACF;AAGF,MAAM,cAAgE,CAAC;AAAA,EACrE;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAACA,UAAiB;AAAA,EAAjB;AAAA,IACC,WAAW,GAAG,mDAAmD,SAAS;AAAA,IACzE,GAAG;AAAA,EAAA;AACN;AAGF,MAAM,eAAkE,CACtE,UACI,oBAAAA,UAAiB,OAAjB,EAAuB,WAAU,4BAA4B,GAAG,OAAO;AAE7E,MAAM,eAAkE,CAAC;AAAA,EACvE;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAACA,UAAiB;AAAA,EAAjB;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,EAAA;AACN;AAGF,MAAM,mBAEF,CAAC,EAAE,WAAW,GAAG,MACnB,MAAA;AAAA,EAACA,UAAiB;AAAA,EAAjB;AAAA,IACC,WAAW,GAAG,wBAAwB,SAAS;AAAA,IAC9C,GAAG;AAAA,EAAA;AACN;AAGF,MAAM,cAAgE,CAAC;AAAA,EACrE;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAACA,UAAiB;AAAA,EAAjB;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,EAAA;AACN;AAGF,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA,GAAG;AACL,MAAuC;AAEnC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;AAmBO,MAAM,UAAU;AAAA,EACrB,GAAG;AAAA,EACH,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,WAAW;AAAA,EACX,MAAM;AAAA,EACN,UAAU;AACZ;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/Command/index.tsx"],"sourcesContent":["/* eslint-disable react/no-unknown-property */\n'use client';\n\nimport {\n  Dialog,\n  DialogContent,\n  type DialogProps,\n} from '@radix-ui/react-dialog';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { Search } from 'lucide-react';\nimport { type ComponentProps, type FC, type HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport const CommandRoot: FC<ComponentProps<typeof CommandPrimitive>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive\n    className={cn(\n      'flex size-full flex-col overflow-hidden rounded-md',\n      className\n    )}\n    {...props}\n  />\n);\n\ntype CommandDialogProps = DialogProps;\n\nconst CommandDialog: FC<CommandDialogProps> = ({ children, ...props }) => (\n  <Dialog {...props}>\n    <DialogContent className=\"overflow-hidden p-0\">\n      <CommandRoot className=\"[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]_svg]:size-5\">\n        {children}\n      </CommandRoot>\n    </DialogContent>\n  </Dialog>\n);\n\nconst CommandInput: FC<ComponentProps<typeof CommandPrimitive.Input>> = ({\n  className,\n  ...props\n}) => (\n  <div className=\"flex w-full items-center\" cmdk-input-wrapper=\"\">\n    <Search className=\"mr-2 size-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      className={cn(\n        'placeholder:text-muted-foreground outline-hidden flex w-full rounded-md bg-transparent text-sm disabled:cursor-not-allowed disabled:opacity-50',\n        className\n      )}\n      {...props}\n    />\n  </div>\n);\n\nconst CommandList: FC<ComponentProps<typeof CommandPrimitive.List>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive.List\n    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}\n    {...props}\n  />\n);\n\nconst CommandEmpty: FC<ComponentProps<typeof CommandPrimitive.Empty>> = (\n  props\n) => <CommandPrimitive.Empty className=\"py-6 text-center text-sm\" {...props} />;\n\nconst CommandGroup: FC<ComponentProps<typeof CommandPrimitive.Group>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive.Group\n    className={cn(\n      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst CommandSeparator: FC<\n  ComponentProps<typeof CommandPrimitive.Separator>\n> = ({ className, ...props }) => (\n  <CommandPrimitive.Separator\n    className={cn('bg-border -mx-1 h-px', className)}\n    {...props}\n  />\n);\n\nconst CommandItem: FC<ComponentProps<typeof CommandPrimitive.Item>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive.Item\n    className={cn(\n      'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        'text-muted-foreground ml-auto text-xs tracking-widest',\n        className\n      )}\n      {...props}\n    />\n  );\n};\n\n/**\n * Usage example:\n * ```jsx\n * <Command>\n *   <Command.Trigger>\n *     <Command.Input placeholder=\"Search...\" />\n *   </Command.Trigger>\n *   <Command.Dialog>\n *     <Command.List>\n *       <Command.Item>Item 1</Command.Item>\n *       <Command.Item>Item 2</Command.Item>\n *       <Command.Item>Item 3</Command.Item>\n *     </Command.List>\n *   </Command.Dialog>\n * </Command>\n * ```\n */\nexport const Command = {\n  ...CommandRoot,\n  Dialog: CommandDialog,\n  Input: CommandInput,\n  List: CommandList,\n  Empty: CommandEmpty,\n  Group: CommandGroup,\n  Separator: CommandSeparator,\n  Item: CommandItem,\n  Shortcut: CommandShortcut,\n};\n"],"names":["CommandPrimitive"],"mappings":";;;;;;AAaO,MAAM,cAA2D,CAAC;AAAA,EACvE;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAACA;AAAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,EAAA;AACN;AAKF,MAAM,gBAAwC,CAAC,EAAE,UAAU,GAAG,MAAM,0BACjE,QAAQ,EAAA,GAAG,OACV,UAAC,oBAAA,eAAA,EAAc,WAAU,uBACvB,UAAA,oBAAC,eAAY,WAAU,uSACpB,UACH,EAAA,CACF,EACF,CAAA;AAGF,MAAM,eAAkE,CAAC;AAAA,EACvE;AAAA,EACA,GAAG;AACL,MACG,qBAAA,OAAA,EAAI,WAAU,4BAA2B,sBAAmB,IAC3D,UAAA;AAAA,EAAC,oBAAA,QAAA,EAAO,WAAU,kCAAkC,CAAA;AAAA,EACpD;AAAA,IAACA,UAAiB;AAAA,IAAjB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AACN,GACF;AAGF,MAAM,cAAgE,CAAC;AAAA,EACrE;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAACA,UAAiB;AAAA,EAAjB;AAAA,IACC,WAAW,GAAG,mDAAmD,SAAS;AAAA,IACzE,GAAG;AAAA,EAAA;AACN;AAGF,MAAM,eAAkE,CACtE,UACI,oBAAAA,UAAiB,OAAjB,EAAuB,WAAU,4BAA4B,GAAG,OAAO;AAE7E,MAAM,eAAkE,CAAC;AAAA,EACvE;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAACA,UAAiB;AAAA,EAAjB;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,EAAA;AACN;AAGF,MAAM,mBAEF,CAAC,EAAE,WAAW,GAAG,MACnB,MAAA;AAAA,EAACA,UAAiB;AAAA,EAAjB;AAAA,IACC,WAAW,GAAG,wBAAwB,SAAS;AAAA,IAC9C,GAAG;AAAA,EAAA;AACN;AAGF,MAAM,cAAgE,CAAC;AAAA,EACrE;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAACA,UAAiB;AAAA,EAAjB;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,EAAA;AACN;AAGF,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA,GAAG;AACL,MAAuC;AAEnC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;AAmBO,MAAM,UAAU;AAAA,EACrB,GAAG;AAAA,EACH,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,WAAW;AAAA,EACX,MAAM;AAAA,EACN,UAAU;AACZ;"}

package/dist/components/Container/index.cjs

@@ -3,89 +3,76 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const classVarianceAuthority = require("class-variance-authority");
 const utils_cn = require("../../utils/cn.cjs");
-const containerVariants = classVarianceAuthority.cva(
-  "flex text-text flex-col backdrop-blur dark:text-text-dark",
-  {
-    variants: {
-      roundedSize: {
-        none: "rounded-none",
-        sm: "rounded-sm",
-        md: "rounded-md",
-        lg: "rounded-lg",
-        xl: "rounded-xl",
-        "2xl": "rounded-2xl",
-        "3xl": "rounded-3xl",
-        full: "rounded-full"
-      },
-      transparency: {
-        none: "",
-        full: "bg-none",
-        sm: "bg-opacity-90 dark:bg-opacity-90",
-        md: "bg-opacity-70 dark:bg-opacity-70",
-        lg: "bg-opacity-40 dark:bg-opacity-40",
-        xl: "bg-opacity-20 dark:bg-opacity-20"
-      },
-      backgroundColor: {
-        none: "bg-card dark:bg-card-dark",
-        primary: "bg-primary dark:bg-primary-dark",
-        secondary: "bg-secondary dark:bg-secondary-dark",
-        neutral: "bg-neutral dark:bg-neutral-dark",
-        text: "bg-text dark:bg-text-dark",
-        card: "bg-card dark:bg-card-dark",
-        contrast: "bg-background-dark dark:bg-background"
-      },
-      padding: {
-        none: "p-0",
-        sm: "p-1",
-        md: "p-2",
-        lg: "p-3",
-        xl: "p-4"
-      },
-      separator: {
-        without: "",
-        x: "divide-x divide-dashed divide-text/20 dark:divide-text-dark/20",
-        y: "divide-y divide-dashed divide-text/20 dark:divide-text-dark/20",
-        both: "divide-x divide-y divide-dashed divide-text/20 dark:divide-text-dark/20"
-      },
-      border: {
-        none: "",
-        with: "border-[1.5px]"
-      },
-      borderColor: {
-        primary: "border-primary dark:border-primary-dark",
-        secondary: "border-secondary dark:border-secondary-dark",
-        neutral: "border-neutral dark:border-neutral-dark",
-        text: "border-text dark:border-text-dark",
-        error: "border-error dark:border-error-dark",
-        warning: "border-warning dark:border-warning-dark",
-        success: "border-success dark:border-success-dark"
-      },
-      background: {
-        none: "bg-inherit dark:bg-inherit",
-        hoverable: "!bg-opacity-5 backdrop-blur-0 hover:!bg-opacity-10 hover:backdrop-blur focus:!bg-opacity-10 focus:backdrop-blur aria-selected:!bg-opacity-15 aria-selected:backdrop-blur",
-        with: ""
-      },
-      gap: {
-        none: "gap-0",
-        sm: "gap-1",
-        md: "gap-3",
-        lg: "gap-5",
-        xl: "gap-8",
-        "2xl": "gap-10"
-      }
+const containerVariants = classVarianceAuthority.cva("flex text-text flex-col backdrop-blur", {
+  variants: {
+    roundedSize: {
+      none: "rounded-none",
+      sm: "rounded-sm",
+      md: "rounded-md",
+      lg: "rounded-lg",
+      xl: "rounded-xl",
+      "2xl": "rounded-2xl",
+      "3xl": "rounded-3xl",
+      full: "rounded-full"
+    },
+    transparency: {
+      none: "bg-card",
+      sm: "bg-card/90",
+      md: "bg-card/70",
+      lg: "bg-card/40",
+      xl: "bg-card/20",
+      full: ""
+    },
+    padding: {
+      none: "p-0",
+      sm: "p-1",
+      md: "p-2",
+      lg: "p-3",
+      xl: "p-4"
+    },
+    separator: {
+      without: "",
+      x: "divide-x divide-dashed divide-text/20",
+      y: "divide-y divide-dashed divide-text/20",
+      both: "divide-x divide-y divide-dashed divide-text/20"
     },
-    defaultVariants: {
-      roundedSize: "md",
-      border: "none",
-      borderColor: "text",
-      backgroundColor: "card",
-      transparency: "md",
-      padding: "none",
-      separator: "without",
-      gap: "none"
+    border: {
+      none: "",
+      with: "border-[1.5px]"
+    },
+    borderColor: {
+      primary: "border-primary",
+      secondary: "border-secondary",
+      neutral: "border-neutral",
+      text: "border-text ",
+      error: "border-error",
+      warning: "border-warning",
+      success: "border-success"
+    },
+    background: {
+      none: "bg-inherit",
+      hoverable: "!bg-opacity-5 backdrop-blur-0 hover:!bg-opacity-10 hover:backdrop-blur focus:!bg-opacity-10 focus:backdrop-blur aria-selected:!bg-opacity-15 aria-selected:backdrop-blur",
+      with: ""
+    },
+    gap: {
+      none: "gap-0",
+      sm: "gap-1",
+      md: "gap-3",
+      lg: "gap-5",
+      xl: "gap-8",
+      "2xl": "gap-10"
     }
+  },
+  defaultVariants: {
+    roundedSize: "md",
+    border: "none",
+    borderColor: "text",
+    transparency: "md",
+    padding: "none",
+    separator: "without",
+    gap: "none"
   }
-);
+});
 const Container = ({
   children,
   roundedSize,
@@ -95,7 +82,6 @@ const Container = ({
   className,
   border,
   borderColor,
-  backgroundColor,
   background,
   ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -109,7 +95,6 @@ const Container = ({
         separator,
         border: typeof border === "boolean" ? border ? "with" : "none" : void 0,
         background,
-        backgroundColor,
         borderColor,
         className
       })

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Container/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type PropsWithChildren,\n  type HTMLAttributes,\n  type FC,\n  type DetailedHTMLProps,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst containerVariants = cva(\n  'flex text-text flex-col backdrop-blur dark:text-text-dark',\n  {\n    variants: {\n      roundedSize: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        md: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        '3xl': 'rounded-3xl',\n        full: 'rounded-full',\n      },\n      transparency: {\n        none: '',\n        full: 'bg-none',\n        sm: 'bg-opacity-90 dark:bg-opacity-90',\n        md: 'bg-opacity-70 dark:bg-opacity-70',\n        lg: 'bg-opacity-40 dark:bg-opacity-40',\n        xl: 'bg-opacity-20 dark:bg-opacity-20',\n      },\n      backgroundColor: {\n        none: 'bg-card dark:bg-card-dark',\n        primary: 'bg-primary dark:bg-primary-dark',\n        secondary: 'bg-secondary dark:bg-secondary-dark',\n        neutral: 'bg-neutral dark:bg-neutral-dark',\n        text: 'bg-text dark:bg-text-dark',\n        card: 'bg-card dark:bg-card-dark',\n        contrast: 'bg-background-dark dark:bg-background',\n      },\n      padding: {\n        none: 'p-0',\n        sm: 'p-1',\n        md: 'p-2',\n        lg: 'p-3',\n        xl: 'p-4',\n      },\n      separator: {\n        without: '',\n        x: 'divide-x divide-dashed divide-text/20 dark:divide-text-dark/20',\n        y: 'divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n        both: 'divide-x divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n      },\n      border: {\n        none: '',\n        with: 'border-[1.5px]',\n      },\n      borderColor: {\n        primary: 'border-primary dark:border-primary-dark',\n        secondary: 'border-secondary dark:border-secondary-dark',\n        neutral: 'border-neutral dark:border-neutral-dark',\n        text: 'border-text dark:border-text-dark',\n        error: 'border-error dark:border-error-dark',\n        warning: 'border-warning dark:border-warning-dark',\n        success: 'border-success dark:border-success-dark',\n      },\n      background: {\n        none: 'bg-inherit dark:bg-inherit',\n        hoverable:\n          '!bg-opacity-5 backdrop-blur-0 hover:!bg-opacity-10 hover:backdrop-blur focus:!bg-opacity-10 focus:backdrop-blur aria-selected:!bg-opacity-15 aria-selected:backdrop-blur',\n        with: '',\n      },\n      gap: {\n        none: 'gap-0',\n        sm: 'gap-1',\n        md: 'gap-3',\n        lg: 'gap-5',\n        xl: 'gap-8',\n        '2xl': 'gap-10',\n      },\n    },\n\n    defaultVariants: {\n      roundedSize: 'md',\n      border: 'none',\n      borderColor: 'text',\n      backgroundColor: 'card',\n      transparency: 'md',\n      padding: 'none',\n      separator: 'without',\n      gap: 'none',\n    },\n  }\n);\n\nexport type ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border'>\n> &\n  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {\n    border?: boolean;\n  };\n\nexport const Container: FC<ContainerProps> = ({\n  children,\n  roundedSize,\n  padding,\n  transparency,\n  separator,\n  className,\n  border,\n  borderColor,\n  backgroundColor,\n  background,\n  ...props\n}) => (\n  <div\n    className={cn(\n      containerVariants({\n        roundedSize,\n        transparency,\n        padding,\n        separator,\n        border:\n          typeof border === 'boolean' ? (border ? 'with' : 'none') : undefined,\n        background,\n        backgroundColor,\n        borderColor,\n        className,\n      })\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n"],"names":["cva","jsx","cn"],"mappings":";;;;;AASA,MAAM,oBAAoBA,uBAAA;AAAA,EACxB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA,QACX,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,QACZ,MAAM;AAAA,QACN,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,iBAAiB;AAAA,QACf,MAAM;AAAA,QACN,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,QACN,MAAM;AAAA,QACN,UAAU;AAAA,MACZ;AAAA,MACA,SAAS;AAAA,QACP,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,WAAW;AAAA,QACT,SAAS;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,QACH,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,aAAa;AAAA,QACX,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,MACX;AAAA,MACA,YAAY;AAAA,QACV,MAAM;AAAA,QACN,WACE;AAAA,QACF,MAAM;AAAA,MACR;AAAA,MACA,KAAK;AAAA,QACH,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IAEA,iBAAiB;AAAA,MACf,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,iBAAiB;AAAA,MACjB,cAAc;AAAA,MACd,SAAS;AAAA,MACT,WAAW;AAAA,MACX,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ;AASO,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEC,2BAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAA;AAAA,MACT,kBAAkB;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QACE,OAAO,WAAW,YAAa,SAAS,SAAS,SAAU;AAAA,QAC7D;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,CAAA;AAAA,IACH;AAAA,IACC,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Container/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type PropsWithChildren,\n  type HTMLAttributes,\n  type FC,\n  type DetailedHTMLProps,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst containerVariants = cva('flex text-text flex-col backdrop-blur', {\n  variants: {\n    roundedSize: {\n      none: 'rounded-none',\n      sm: 'rounded-sm',\n      md: 'rounded-md',\n      lg: 'rounded-lg',\n      xl: 'rounded-xl',\n      '2xl': 'rounded-2xl',\n      '3xl': 'rounded-3xl',\n      full: 'rounded-full',\n    },\n    transparency: {\n      none: 'bg-card',\n      sm: 'bg-card/90',\n      md: 'bg-card/70',\n      lg: 'bg-card/40',\n      xl: 'bg-card/20',\n      full: '',\n    },\n    padding: {\n      none: 'p-0',\n      sm: 'p-1',\n      md: 'p-2',\n      lg: 'p-3',\n      xl: 'p-4',\n    },\n    separator: {\n      without: '',\n      x: 'divide-x divide-dashed divide-text/20',\n      y: 'divide-y divide-dashed divide-text/20',\n      both: 'divide-x divide-y divide-dashed divide-text/20',\n    },\n    border: {\n      none: '',\n      with: 'border-[1.5px]',\n    },\n    borderColor: {\n      primary: 'border-primary',\n      secondary: 'border-secondary',\n      neutral: 'border-neutral',\n      text: 'border-text ',\n      error: 'border-error',\n      warning: 'border-warning',\n      success: 'border-success',\n    },\n    background: {\n      none: 'bg-inherit',\n      hoverable:\n        '!bg-opacity-5 backdrop-blur-0 hover:!bg-opacity-10 hover:backdrop-blur focus:!bg-opacity-10 focus:backdrop-blur aria-selected:!bg-opacity-15 aria-selected:backdrop-blur',\n      with: '',\n    },\n    gap: {\n      none: 'gap-0',\n      sm: 'gap-1',\n      md: 'gap-3',\n      lg: 'gap-5',\n      xl: 'gap-8',\n      '2xl': 'gap-10',\n    },\n  },\n  defaultVariants: {\n    roundedSize: 'md',\n    border: 'none',\n    borderColor: 'text',\n    transparency: 'md',\n    padding: 'none',\n    separator: 'without',\n    gap: 'none',\n  },\n});\n\nexport type ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border'>\n> &\n  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {\n    border?: boolean;\n  };\n\nexport const Container: FC<ContainerProps> = ({\n  children,\n  roundedSize,\n  padding,\n  transparency,\n  separator,\n  className,\n  border,\n  borderColor,\n  background,\n  ...props\n}) => (\n  <div\n    className={cn(\n      containerVariants({\n        roundedSize,\n        transparency,\n        padding,\n        separator,\n        border:\n          typeof border === 'boolean' ? (border ? 'with' : 'none') : undefined,\n        background,\n        borderColor,\n        className,\n      })\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n"],"names":["cva","jsx","cn"],"mappings":";;;;;AASA,MAAM,oBAAoBA,2BAAI,yCAAyC;AAAA,EACrE,UAAU;AAAA,IACR,aAAa;AAAA,MACX,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,IACA,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,MAAM;AAAA,IACR;AAAA,IACA,SAAS;AAAA,MACP,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MACH,MAAM;AAAA,IACR;AAAA,IACA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,IACA,aAAa;AAAA,MACX,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,MACN,WACE;AAAA,MACF,MAAM;AAAA,IACR;AAAA,IACA,KAAK;AAAA,MACH,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,IAAA;AAAA,EAEX;AAAA,EACA,iBAAiB;AAAA,IACf,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,cAAc;AAAA,IACd,SAAS;AAAA,IACT,WAAW;AAAA,IACX,KAAK;AAAA,EAAA;AAET,CAAC;AASM,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEC,2BAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAA;AAAA,MACT,kBAAkB;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QACE,OAAO,WAAW,YAAa,SAAS,SAAS,SAAU;AAAA,QAC7D;AAAA,QACA;AAAA,QACA;AAAA,MACD,CAAA;AAAA,IACH;AAAA,IACC,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;;"}

package/dist/components/Container/index.d.ts

@@ -1,15 +1,14 @@
 import { VariantProps } from 'class-variance-authority';
 import { PropsWithChildren, HTMLAttributes, FC, DetailedHTMLProps } from 'react';
 declare const containerVariants: (props?: ({
-    roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full" | null | undefined;
-    transparency?: "sm" | "md" | "lg" | "xl" | "none" | "full" | null | undefined;
-    backgroundColor?: "contrast" | "none" | "text" | "card" | "primary" | "secondary" | "neutral" | null | undefined;
-    padding?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+    roundedSize?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
+    transparency?: "none" | "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
+    padding?: "none" | "sm" | "md" | "lg" | "xl" | null | undefined;
     separator?: "x" | "y" | "without" | "both" | null | undefined;
     border?: "none" | "with" | null | undefined;
-    borderColor?: "text" | "success" | "warning" | "error" | "primary" | "secondary" | "neutral" | null | undefined;
+    borderColor?: "text" | "error" | "primary" | "secondary" | "neutral" | "success" | "warning" | null | undefined;
     background?: "none" | "hoverable" | "with" | null | undefined;
-    gap?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | null | undefined;
+    gap?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type ContainerProps = PropsWithChildren<Omit<VariantProps<typeof containerVariants>, 'border'>> & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
     border?: boolean;

package/dist/components/Container/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Container/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,EAAE,EACP,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAGf,QAAA,MAAM,iBAAiB;;;;;;;;;;8EAoFtB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,iBAAiB,CAC5C,IAAI,CAAC,YAAY,CAAC,OAAO,iBAAiB,CAAC,EAAE,QAAQ,CAAC,CACvD,GACC,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,GAAG;IAClE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEJ,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAgCxC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Container/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,EAAE,EACP,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAGf,QAAA,MAAM,iBAAiB;;;;;;;;;8EAsErB,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,iBAAiB,CAC5C,IAAI,CAAC,YAAY,CAAC,OAAO,iBAAiB,CAAC,EAAE,QAAQ,CAAC,CACvD,GACC,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,GAAG;IAClE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEJ,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CA8BxC,CAAC"}

package/dist/components/Container/index.mjs

@@ -1,89 +1,76 @@
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.mjs";
-const containerVariants = cva(
-  "flex text-text flex-col backdrop-blur dark:text-text-dark",
-  {
-    variants: {
-      roundedSize: {
-        none: "rounded-none",
-        sm: "rounded-sm",
-        md: "rounded-md",
-        lg: "rounded-lg",
-        xl: "rounded-xl",
-        "2xl": "rounded-2xl",
-        "3xl": "rounded-3xl",
-        full: "rounded-full"
-      },
-      transparency: {
-        none: "",
-        full: "bg-none",
-        sm: "bg-opacity-90 dark:bg-opacity-90",
-        md: "bg-opacity-70 dark:bg-opacity-70",
-        lg: "bg-opacity-40 dark:bg-opacity-40",
-        xl: "bg-opacity-20 dark:bg-opacity-20"
-      },
-      backgroundColor: {
-        none: "bg-card dark:bg-card-dark",
-        primary: "bg-primary dark:bg-primary-dark",
-        secondary: "bg-secondary dark:bg-secondary-dark",
-        neutral: "bg-neutral dark:bg-neutral-dark",
-        text: "bg-text dark:bg-text-dark",
-        card: "bg-card dark:bg-card-dark",
-        contrast: "bg-background-dark dark:bg-background"
-      },
-      padding: {
-        none: "p-0",
-        sm: "p-1",
-        md: "p-2",
-        lg: "p-3",
-        xl: "p-4"
-      },
-      separator: {
-        without: "",
-        x: "divide-x divide-dashed divide-text/20 dark:divide-text-dark/20",
-        y: "divide-y divide-dashed divide-text/20 dark:divide-text-dark/20",
-        both: "divide-x divide-y divide-dashed divide-text/20 dark:divide-text-dark/20"
-      },
-      border: {
-        none: "",
-        with: "border-[1.5px]"
-      },
-      borderColor: {
-        primary: "border-primary dark:border-primary-dark",
-        secondary: "border-secondary dark:border-secondary-dark",
-        neutral: "border-neutral dark:border-neutral-dark",
-        text: "border-text dark:border-text-dark",
-        error: "border-error dark:border-error-dark",
-        warning: "border-warning dark:border-warning-dark",
-        success: "border-success dark:border-success-dark"
-      },
-      background: {
-        none: "bg-inherit dark:bg-inherit",
-        hoverable: "!bg-opacity-5 backdrop-blur-0 hover:!bg-opacity-10 hover:backdrop-blur focus:!bg-opacity-10 focus:backdrop-blur aria-selected:!bg-opacity-15 aria-selected:backdrop-blur",
-        with: ""
-      },
-      gap: {
-        none: "gap-0",
-        sm: "gap-1",
-        md: "gap-3",
-        lg: "gap-5",
-        xl: "gap-8",
-        "2xl": "gap-10"
-      }
+const containerVariants = cva("flex text-text flex-col backdrop-blur", {
+  variants: {
+    roundedSize: {
+      none: "rounded-none",
+      sm: "rounded-sm",
+      md: "rounded-md",
+      lg: "rounded-lg",
+      xl: "rounded-xl",
+      "2xl": "rounded-2xl",
+      "3xl": "rounded-3xl",
+      full: "rounded-full"
+    },
+    transparency: {
+      none: "bg-card",
+      sm: "bg-card/90",
+      md: "bg-card/70",
+      lg: "bg-card/40",
+      xl: "bg-card/20",
+      full: ""
+    },
+    padding: {
+      none: "p-0",
+      sm: "p-1",
+      md: "p-2",
+      lg: "p-3",
+      xl: "p-4"
+    },
+    separator: {
+      without: "",
+      x: "divide-x divide-dashed divide-text/20",
+      y: "divide-y divide-dashed divide-text/20",
+      both: "divide-x divide-y divide-dashed divide-text/20"
     },
-    defaultVariants: {
-      roundedSize: "md",
-      border: "none",
-      borderColor: "text",
-      backgroundColor: "card",
-      transparency: "md",
-      padding: "none",
-      separator: "without",
-      gap: "none"
+    border: {
+      none: "",
+      with: "border-[1.5px]"
+    },
+    borderColor: {
+      primary: "border-primary",
+      secondary: "border-secondary",
+      neutral: "border-neutral",
+      text: "border-text ",
+      error: "border-error",
+      warning: "border-warning",
+      success: "border-success"
+    },
+    background: {
+      none: "bg-inherit",
+      hoverable: "!bg-opacity-5 backdrop-blur-0 hover:!bg-opacity-10 hover:backdrop-blur focus:!bg-opacity-10 focus:backdrop-blur aria-selected:!bg-opacity-15 aria-selected:backdrop-blur",
+      with: ""
+    },
+    gap: {
+      none: "gap-0",
+      sm: "gap-1",
+      md: "gap-3",
+      lg: "gap-5",
+      xl: "gap-8",
+      "2xl": "gap-10"
     }
+  },
+  defaultVariants: {
+    roundedSize: "md",
+    border: "none",
+    borderColor: "text",
+    transparency: "md",
+    padding: "none",
+    separator: "without",
+    gap: "none"
   }
-);
+});
 const Container = ({
   children,
   roundedSize,
@@ -93,7 +80,6 @@ const Container = ({
   className,
   border,
   borderColor,
-  backgroundColor,
   background,
   ...props
 }) => /* @__PURE__ */ jsx(
@@ -107,7 +93,6 @@ const Container = ({
         separator,
         border: typeof border === "boolean" ? border ? "with" : "none" : void 0,
         background,
-        backgroundColor,
         borderColor,
         className
       })

package/dist/components/Container/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/Container/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type PropsWithChildren,\n  type HTMLAttributes,\n  type FC,\n  type DetailedHTMLProps,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst containerVariants = cva(\n  'flex text-text flex-col backdrop-blur dark:text-text-dark',\n  {\n    variants: {\n      roundedSize: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        md: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        '3xl': 'rounded-3xl',\n        full: 'rounded-full',\n      },\n      transparency: {\n        none: '',\n        full: 'bg-none',\n        sm: 'bg-opacity-90 dark:bg-opacity-90',\n        md: 'bg-opacity-70 dark:bg-opacity-70',\n        lg: 'bg-opacity-40 dark:bg-opacity-40',\n        xl: 'bg-opacity-20 dark:bg-opacity-20',\n      },\n      backgroundColor: {\n        none: 'bg-card dark:bg-card-dark',\n        primary: 'bg-primary dark:bg-primary-dark',\n        secondary: 'bg-secondary dark:bg-secondary-dark',\n        neutral: 'bg-neutral dark:bg-neutral-dark',\n        text: 'bg-text dark:bg-text-dark',\n        card: 'bg-card dark:bg-card-dark',\n        contrast: 'bg-background-dark dark:bg-background',\n      },\n      padding: {\n        none: 'p-0',\n        sm: 'p-1',\n        md: 'p-2',\n        lg: 'p-3',\n        xl: 'p-4',\n      },\n      separator: {\n        without: '',\n        x: 'divide-x divide-dashed divide-text/20 dark:divide-text-dark/20',\n        y: 'divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n        both: 'divide-x divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n      },\n      border: {\n        none: '',\n        with: 'border-[1.5px]',\n      },\n      borderColor: {\n        primary: 'border-primary dark:border-primary-dark',\n        secondary: 'border-secondary dark:border-secondary-dark',\n        neutral: 'border-neutral dark:border-neutral-dark',\n        text: 'border-text dark:border-text-dark',\n        error: 'border-error dark:border-error-dark',\n        warning: 'border-warning dark:border-warning-dark',\n        success: 'border-success dark:border-success-dark',\n      },\n      background: {\n        none: 'bg-inherit dark:bg-inherit',\n        hoverable:\n          '!bg-opacity-5 backdrop-blur-0 hover:!bg-opacity-10 hover:backdrop-blur focus:!bg-opacity-10 focus:backdrop-blur aria-selected:!bg-opacity-15 aria-selected:backdrop-blur',\n        with: '',\n      },\n      gap: {\n        none: 'gap-0',\n        sm: 'gap-1',\n        md: 'gap-3',\n        lg: 'gap-5',\n        xl: 'gap-8',\n        '2xl': 'gap-10',\n      },\n    },\n\n    defaultVariants: {\n      roundedSize: 'md',\n      border: 'none',\n      borderColor: 'text',\n      backgroundColor: 'card',\n      transparency: 'md',\n      padding: 'none',\n      separator: 'without',\n      gap: 'none',\n    },\n  }\n);\n\nexport type ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border'>\n> &\n  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {\n    border?: boolean;\n  };\n\nexport const Container: FC<ContainerProps> = ({\n  children,\n  roundedSize,\n  padding,\n  transparency,\n  separator,\n  className,\n  border,\n  borderColor,\n  backgroundColor,\n  background,\n  ...props\n}) => (\n  <div\n    className={cn(\n      containerVariants({\n        roundedSize,\n        transparency,\n        padding,\n        separator,\n        border:\n          typeof border === 'boolean' ? (border ? 'with' : 'none') : undefined,\n        background,\n        backgroundColor,\n        borderColor,\n        className,\n      })\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n"],"names":[],"mappings":";;;AASA,MAAM,oBAAoB;AAAA,EACxB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA,QACX,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,QACZ,MAAM;AAAA,QACN,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,iBAAiB;AAAA,QACf,MAAM;AAAA,QACN,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,QACN,MAAM;AAAA,QACN,UAAU;AAAA,MACZ;AAAA,MACA,SAAS;AAAA,QACP,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,WAAW;AAAA,QACT,SAAS;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,QACH,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,aAAa;AAAA,QACX,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,MACX;AAAA,MACA,YAAY;AAAA,QACV,MAAM;AAAA,QACN,WACE;AAAA,QACF,MAAM;AAAA,MACR;AAAA,MACA,KAAK;AAAA,QACH,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IAEA,iBAAiB;AAAA,MACf,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,iBAAiB;AAAA,MACjB,cAAc;AAAA,MACd,SAAS;AAAA,MACT,WAAW;AAAA,MACX,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ;AASO,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT,kBAAkB;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QACE,OAAO,WAAW,YAAa,SAAS,SAAS,SAAU;AAAA,QAC7D;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,CAAA;AAAA,IACH;AAAA,IACC,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/Container/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type PropsWithChildren,\n  type HTMLAttributes,\n  type FC,\n  type DetailedHTMLProps,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst containerVariants = cva('flex text-text flex-col backdrop-blur', {\n  variants: {\n    roundedSize: {\n      none: 'rounded-none',\n      sm: 'rounded-sm',\n      md: 'rounded-md',\n      lg: 'rounded-lg',\n      xl: 'rounded-xl',\n      '2xl': 'rounded-2xl',\n      '3xl': 'rounded-3xl',\n      full: 'rounded-full',\n    },\n    transparency: {\n      none: 'bg-card',\n      sm: 'bg-card/90',\n      md: 'bg-card/70',\n      lg: 'bg-card/40',\n      xl: 'bg-card/20',\n      full: '',\n    },\n    padding: {\n      none: 'p-0',\n      sm: 'p-1',\n      md: 'p-2',\n      lg: 'p-3',\n      xl: 'p-4',\n    },\n    separator: {\n      without: '',\n      x: 'divide-x divide-dashed divide-text/20',\n      y: 'divide-y divide-dashed divide-text/20',\n      both: 'divide-x divide-y divide-dashed divide-text/20',\n    },\n    border: {\n      none: '',\n      with: 'border-[1.5px]',\n    },\n    borderColor: {\n      primary: 'border-primary',\n      secondary: 'border-secondary',\n      neutral: 'border-neutral',\n      text: 'border-text ',\n      error: 'border-error',\n      warning: 'border-warning',\n      success: 'border-success',\n    },\n    background: {\n      none: 'bg-inherit',\n      hoverable:\n        '!bg-opacity-5 backdrop-blur-0 hover:!bg-opacity-10 hover:backdrop-blur focus:!bg-opacity-10 focus:backdrop-blur aria-selected:!bg-opacity-15 aria-selected:backdrop-blur',\n      with: '',\n    },\n    gap: {\n      none: 'gap-0',\n      sm: 'gap-1',\n      md: 'gap-3',\n      lg: 'gap-5',\n      xl: 'gap-8',\n      '2xl': 'gap-10',\n    },\n  },\n  defaultVariants: {\n    roundedSize: 'md',\n    border: 'none',\n    borderColor: 'text',\n    transparency: 'md',\n    padding: 'none',\n    separator: 'without',\n    gap: 'none',\n  },\n});\n\nexport type ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border'>\n> &\n  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {\n    border?: boolean;\n  };\n\nexport const Container: FC<ContainerProps> = ({\n  children,\n  roundedSize,\n  padding,\n  transparency,\n  separator,\n  className,\n  border,\n  borderColor,\n  background,\n  ...props\n}) => (\n  <div\n    className={cn(\n      containerVariants({\n        roundedSize,\n        transparency,\n        padding,\n        separator,\n        border:\n          typeof border === 'boolean' ? (border ? 'with' : 'none') : undefined,\n        background,\n        borderColor,\n        className,\n      })\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n"],"names":[],"mappings":";;;AASA,MAAM,oBAAoB,IAAI,yCAAyC;AAAA,EACrE,UAAU;AAAA,IACR,aAAa;AAAA,MACX,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,IACA,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,MAAM;AAAA,IACR;AAAA,IACA,SAAS;AAAA,MACP,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MACH,MAAM;AAAA,IACR;AAAA,IACA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,IACA,aAAa;AAAA,MACX,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,MACN,WACE;AAAA,MACF,MAAM;AAAA,IACR;AAAA,IACA,KAAK;AAAA,MACH,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,IAAA;AAAA,EAEX;AAAA,EACA,iBAAiB;AAAA,IACf,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,cAAc;AAAA,IACd,SAAS;AAAA,IACT,WAAW;AAAA,IACX,KAAK;AAAA,EAAA;AAET,CAAC;AASM,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT,kBAAkB;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QACE,OAAO,WAAW,YAAa,SAAS,SAAS,SAAU;AAAA,QAC7D;AAAA,QACA;AAAA,QACA;AAAA,MACD,CAAA;AAAA,IACH;AAAA,IACC,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;"}

package/dist/components/ContentEditor/ContentEditor.cjs

@@ -28,7 +28,7 @@ const ContentEditor = ({
       components_TextArea_AutoSizeTextArea.AutoSizedTextArea,
       {
         className: utils_cn.cn(
-          "break-word m-3 inline w-full bg-transparent outline-none",
+          "break-word outline-hidden m-3 inline w-full bg-transparent",
           isEditing ? "cursor-text" : "cursor-pointer"
         ),
         onChange: handleOnContentChange,

package/dist/components/ContentEditor/ContentEditor.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentEditor.cjs","sources":["../../../src/components/ContentEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n  type HTMLAttributes,\n  useState,\n  type FC,\n  type ChangeEventHandler,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { AutoSizedTextArea } from '../TextArea/AutoSizeTextArea';\n\nexport type ContentEditorProps = {\n  children: string;\n  onContentChange: (content: string) => void;\n  isEditing?: boolean;\n} & HTMLAttributes<HTMLTextAreaElement>;\n\nexport const ContentEditor: FC<ContentEditorProps> = ({\n  children,\n  onContentChange,\n  isEditing,\n  ...props\n}) => {\n  const [newValue, setNewValue] = useState<string>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the div on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.target.value ?? '');\n\n  return (\n    <div className=\"flex flex-row items-center justify-between gap-2\">\n      <AutoSizedTextArea\n        className={cn(\n          'break-word m-3 inline w-full bg-transparent outline-none',\n          isEditing ? 'cursor-text' : 'cursor-pointer'\n        )}\n        onChange={handleOnContentChange}\n        key={resetIncrementor}\n        variant=\"invisible\"\n        defaultValue={children}\n        {...props}\n      />\n      {isEdited && (\n        <div className=\"flex flex-row items-center justify-between gap-2\">\n          <Check\n            className=\"cursor-pointer hover:scale-110\"\n            size={16}\n            onClick={handleValid}\n          />\n          <X\n            className=\"cursor-pointer hover:scale-110\"\n            size={16}\n            onClick={handleCancel}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["useState","jsxs","jsx","AutoSizedTextArea","cn","Check","X"],"mappings":";;;;;;;;AAkBO,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAIA,aAAAA,SAAiB,QAAQ;AACzD,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,aAAAA,SAAiB,CAAC;AAClE,QAAM,WAAoB,aAAa;AAEvC,QAAM,eAAe,MAAM;AACzB,gBAAY,QAAQ;AACA,wBAAA,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC;AACA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAAiE,CAAC,MACtE,YAAY,EAAE,OAAO,SAAS,EAAE;AAGhC,SAAAC,2BAAA,KAAC,OAAI,EAAA,WAAU,oDACb,UAAA;AAAA,IAAAC,2BAAA;AAAA,MAACC,qCAAA;AAAA,MAAA;AAAA,QACC,WAAWC,SAAA;AAAA,UACT;AAAA,UACA,YAAY,gBAAgB;AAAA,QAC9B;AAAA,QACA,UAAU;AAAA,QAEV,SAAQ;AAAA,QACR,cAAc;AAAA,QACb,GAAG;AAAA,MAAA;AAAA,MAHC;AAAA,IAIP;AAAA,IACC,YACCH,2BAAA,KAAC,OAAI,EAAA,WAAU,oDACb,UAAA;AAAA,MAAAC,2BAAA;AAAA,QAACG,YAAA;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,MACAH,2BAAA;AAAA,QAACI,YAAA;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACX,EACF,CAAA;AAAA,EAAA,GAEJ;AAEJ;;"}
+{"version":3,"file":"ContentEditor.cjs","sources":["../../../src/components/ContentEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n  type HTMLAttributes,\n  useState,\n  type FC,\n  type ChangeEventHandler,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { AutoSizedTextArea } from '../TextArea/AutoSizeTextArea';\n\nexport type ContentEditorProps = {\n  children: string;\n  onContentChange: (content: string) => void;\n  isEditing?: boolean;\n} & HTMLAttributes<HTMLTextAreaElement>;\n\nexport const ContentEditor: FC<ContentEditorProps> = ({\n  children,\n  onContentChange,\n  isEditing,\n  ...props\n}) => {\n  const [newValue, setNewValue] = useState<string>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the div on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.target.value ?? '');\n\n  return (\n    <div className=\"flex flex-row items-center justify-between gap-2\">\n      <AutoSizedTextArea\n        className={cn(\n          'break-word outline-hidden m-3 inline w-full bg-transparent',\n          isEditing ? 'cursor-text' : 'cursor-pointer'\n        )}\n        onChange={handleOnContentChange}\n        key={resetIncrementor}\n        variant=\"invisible\"\n        defaultValue={children}\n        {...props}\n      />\n      {isEdited && (\n        <div className=\"flex flex-row items-center justify-between gap-2\">\n          <Check\n            className=\"cursor-pointer hover:scale-110\"\n            size={16}\n            onClick={handleValid}\n          />\n          <X\n            className=\"cursor-pointer hover:scale-110\"\n            size={16}\n            onClick={handleCancel}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["useState","jsxs","jsx","AutoSizedTextArea","cn","Check","X"],"mappings":";;;;;;;;AAkBO,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAIA,aAAAA,SAAiB,QAAQ;AACzD,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,aAAAA,SAAiB,CAAC;AAClE,QAAM,WAAoB,aAAa;AAEvC,QAAM,eAAe,MAAM;AACzB,gBAAY,QAAQ;AACA,wBAAA,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC;AACA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAAiE,CAAC,MACtE,YAAY,EAAE,OAAO,SAAS,EAAE;AAGhC,SAAAC,2BAAA,KAAC,OAAI,EAAA,WAAU,oDACb,UAAA;AAAA,IAAAC,2BAAA;AAAA,MAACC,qCAAA;AAAA,MAAA;AAAA,QACC,WAAWC,SAAA;AAAA,UACT;AAAA,UACA,YAAY,gBAAgB;AAAA,QAC9B;AAAA,QACA,UAAU;AAAA,QAEV,SAAQ;AAAA,QACR,cAAc;AAAA,QACb,GAAG;AAAA,MAAA;AAAA,MAHC;AAAA,IAIP;AAAA,IACC,YACCH,2BAAA,KAAC,OAAI,EAAA,WAAU,oDACb,UAAA;AAAA,MAAAC,2BAAA;AAAA,QAACG,YAAA;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,MACAH,2BAAA;AAAA,QAACI,YAAA;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACX,EACF,CAAA;AAAA,EAAA,GAEJ;AAEJ;;"}

package/dist/components/ContentEditor/ContentEditor.mjs

@@ -26,7 +26,7 @@ const ContentEditor = ({
       AutoSizedTextArea,
       {
         className: cn(
-          "break-word m-3 inline w-full bg-transparent outline-none",
+          "break-word outline-hidden m-3 inline w-full bg-transparent",
           isEditing ? "cursor-text" : "cursor-pointer"
         ),
         onChange: handleOnContentChange,

package/dist/components/ContentEditor/ContentEditor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentEditor.mjs","sources":["../../../src/components/ContentEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n  type HTMLAttributes,\n  useState,\n  type FC,\n  type ChangeEventHandler,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { AutoSizedTextArea } from '../TextArea/AutoSizeTextArea';\n\nexport type ContentEditorProps = {\n  children: string;\n  onContentChange: (content: string) => void;\n  isEditing?: boolean;\n} & HTMLAttributes<HTMLTextAreaElement>;\n\nexport const ContentEditor: FC<ContentEditorProps> = ({\n  children,\n  onContentChange,\n  isEditing,\n  ...props\n}) => {\n  const [newValue, setNewValue] = useState<string>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the div on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.target.value ?? '');\n\n  return (\n    <div className=\"flex flex-row items-center justify-between gap-2\">\n      <AutoSizedTextArea\n        className={cn(\n          'break-word m-3 inline w-full bg-transparent outline-none',\n          isEditing ? 'cursor-text' : 'cursor-pointer'\n        )}\n        onChange={handleOnContentChange}\n        key={resetIncrementor}\n        variant=\"invisible\"\n        defaultValue={children}\n        {...props}\n      />\n      {isEdited && (\n        <div className=\"flex flex-row items-center justify-between gap-2\">\n          <Check\n            className=\"cursor-pointer hover:scale-110\"\n            size={16}\n            onClick={handleValid}\n          />\n          <X\n            className=\"cursor-pointer hover:scale-110\"\n            size={16}\n            onClick={handleCancel}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAkBO,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAiB,QAAQ;AACzD,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAiB,CAAC;AAClE,QAAM,WAAoB,aAAa;AAEvC,QAAM,eAAe,MAAM;AACzB,gBAAY,QAAQ;AACA,wBAAA,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC;AACA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAAiE,CAAC,MACtE,YAAY,EAAE,OAAO,SAAS,EAAE;AAGhC,SAAA,qBAAC,OAAI,EAAA,WAAU,oDACb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,YAAY,gBAAgB;AAAA,QAC9B;AAAA,QACA,UAAU;AAAA,QAEV,SAAQ;AAAA,QACR,cAAc;AAAA,QACb,GAAG;AAAA,MAAA;AAAA,MAHC;AAAA,IAIP;AAAA,IACC,YACC,qBAAC,OAAI,EAAA,WAAU,oDACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACX,EACF,CAAA;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"ContentEditor.mjs","sources":["../../../src/components/ContentEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n  type HTMLAttributes,\n  useState,\n  type FC,\n  type ChangeEventHandler,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { AutoSizedTextArea } from '../TextArea/AutoSizeTextArea';\n\nexport type ContentEditorProps = {\n  children: string;\n  onContentChange: (content: string) => void;\n  isEditing?: boolean;\n} & HTMLAttributes<HTMLTextAreaElement>;\n\nexport const ContentEditor: FC<ContentEditorProps> = ({\n  children,\n  onContentChange,\n  isEditing,\n  ...props\n}) => {\n  const [newValue, setNewValue] = useState<string>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the div on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.target.value ?? '');\n\n  return (\n    <div className=\"flex flex-row items-center justify-between gap-2\">\n      <AutoSizedTextArea\n        className={cn(\n          'break-word outline-hidden m-3 inline w-full bg-transparent',\n          isEditing ? 'cursor-text' : 'cursor-pointer'\n        )}\n        onChange={handleOnContentChange}\n        key={resetIncrementor}\n        variant=\"invisible\"\n        defaultValue={children}\n        {...props}\n      />\n      {isEdited && (\n        <div className=\"flex flex-row items-center justify-between gap-2\">\n          <Check\n            className=\"cursor-pointer hover:scale-110\"\n            size={16}\n            onClick={handleValid}\n          />\n          <X\n            className=\"cursor-pointer hover:scale-110\"\n            size={16}\n            onClick={handleCancel}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAkBO,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAiB,QAAQ;AACzD,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAiB,CAAC;AAClE,QAAM,WAAoB,aAAa;AAEvC,QAAM,eAAe,MAAM;AACzB,gBAAY,QAAQ;AACA,wBAAA,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC;AACA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAAiE,CAAC,MACtE,YAAY,EAAE,OAAO,SAAS,EAAE;AAGhC,SAAA,qBAAC,OAAI,EAAA,WAAU,oDACb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,YAAY,gBAAgB;AAAA,QAC9B;AAAA,QACA,UAAU;AAAA,QAEV,SAAQ;AAAA,QACR,cAAc;AAAA,QACb,GAAG;AAAA,MAAA;AAAA,MAHC;AAAA,IAIP;AAAA,IACC,YACC,qBAAC,OAAI,EAAA,WAAU,oDACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACX,EACF,CAAA;AAAA,EAAA,GAEJ;AAEJ;"}