@intlayer/design-system 5.7.8 → 5.8.1-canary.0

package/dist/components/Container/index.cjs

@@ -73,6 +73,66 @@ const containerVariants = classVarianceAuthority.cva("flex text-text flex-col ba
     gap: "none"
   }
 });
+var ContainerRoundedSize = /* @__PURE__ */ ((ContainerRoundedSize2) => {
+  ContainerRoundedSize2["NONE"] = "none";
+  ContainerRoundedSize2["SM"] = "sm";
+  ContainerRoundedSize2["MD"] = "md";
+  ContainerRoundedSize2["LG"] = "lg";
+  ContainerRoundedSize2["XL"] = "xl";
+  ContainerRoundedSize2["TWO_XL"] = "2xl";
+  ContainerRoundedSize2["THREE_XL"] = "3xl";
+  ContainerRoundedSize2["FULL"] = "full";
+  return ContainerRoundedSize2;
+})(ContainerRoundedSize || {});
+var ContainerTransparency = /* @__PURE__ */ ((ContainerTransparency2) => {
+  ContainerTransparency2["NONE"] = "none";
+  ContainerTransparency2["SM"] = "sm";
+  ContainerTransparency2["MD"] = "md";
+  ContainerTransparency2["LG"] = "lg";
+  ContainerTransparency2["XL"] = "xl";
+  ContainerTransparency2["FULL"] = "full";
+  return ContainerTransparency2;
+})(ContainerTransparency || {});
+var ContainerPadding = /* @__PURE__ */ ((ContainerPadding2) => {
+  ContainerPadding2["NONE"] = "none";
+  ContainerPadding2["SM"] = "sm";
+  ContainerPadding2["MD"] = "md";
+  ContainerPadding2["LG"] = "lg";
+  ContainerPadding2["XL"] = "xl";
+  return ContainerPadding2;
+})(ContainerPadding || {});
+var ContainerSeparator = /* @__PURE__ */ ((ContainerSeparator2) => {
+  ContainerSeparator2["WITHOUT"] = "without";
+  ContainerSeparator2["X"] = "x";
+  ContainerSeparator2["Y"] = "y";
+  ContainerSeparator2["BOTH"] = "both";
+  return ContainerSeparator2;
+})(ContainerSeparator || {});
+var ContainerBorderColor = /* @__PURE__ */ ((ContainerBorderColor2) => {
+  ContainerBorderColor2["PRIMARY"] = "primary";
+  ContainerBorderColor2["SECONDARY"] = "secondary";
+  ContainerBorderColor2["NEUTRAL"] = "neutral";
+  ContainerBorderColor2["TEXT"] = "text";
+  ContainerBorderColor2["ERROR"] = "error";
+  ContainerBorderColor2["WARNING"] = "warning";
+  ContainerBorderColor2["SUCCESS"] = "success";
+  return ContainerBorderColor2;
+})(ContainerBorderColor || {});
+var ContainerBackground = /* @__PURE__ */ ((ContainerBackground2) => {
+  ContainerBackground2["NONE"] = "none";
+  ContainerBackground2["HOVERABLE"] = "hoverable";
+  ContainerBackground2["WITH"] = "with";
+  return ContainerBackground2;
+})(ContainerBackground || {});
+var ContainerGap = /* @__PURE__ */ ((ContainerGap2) => {
+  ContainerGap2["NONE"] = "none";
+  ContainerGap2["SM"] = "sm";
+  ContainerGap2["MD"] = "md";
+  ContainerGap2["LG"] = "lg";
+  ContainerGap2["XL"] = "xl";
+  ContainerGap2["TWO_XL"] = "2xl";
+  return ContainerGap2;
+})(ContainerGap || {});
 const Container = ({
   children,
   roundedSize,
@@ -104,5 +164,12 @@ const Container = ({
   }
 );
 exports.Container = Container;
+exports.ContainerBackground = ContainerBackground;
+exports.ContainerBorderColor = ContainerBorderColor;
+exports.ContainerGap = ContainerGap;
+exports.ContainerPadding = ContainerPadding;
+exports.ContainerRoundedSize = ContainerRoundedSize;
+exports.ContainerSeparator = ContainerSeparator;
+exports.ContainerTransparency = ContainerTransparency;
 exports.containerVariants = containerVariants;
 //# sourceMappingURL=index.cjs.map

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 DetailedHTMLProps,\n  type FC,\n  type HTMLAttributes,\n  type PropsWithChildren,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nexport const 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/95',\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":";;;;;AASO,MAAM,oBAAoBA,uBAAAA,IAAI,yCAAyC;AAAA,EAC5E,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,IAAA;AAAA,IAER,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,MAAM;AAAA,IAAA;AAAA,IAER,SAAS;AAAA,MACP,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,IAEN,WAAW;AAAA,MACT,SAAS;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MACH,MAAM;AAAA,IAAA;AAAA,IAER,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,IAER,aAAa;AAAA,MACX,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,IAEX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,WACE;AAAA,MACF,MAAM;AAAA,IAAA;AAAA,IAER,KAAK;AAAA,MACH,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,IAAA;AAAA,EACT;AAAA,EAEF,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,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAAA;AAAAA,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,MAAA,CACD;AAAA,IAAA;AAAA,IAEF,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 DetailedHTMLProps,\n  type FC,\n  type HTMLAttributes,\n  type PropsWithChildren,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nexport const 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/95',\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 enum ContainerRoundedSize {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  TWO_XL = '2xl',\n  THREE_XL = '3xl',\n  FULL = 'full',\n}\n\nexport enum ContainerTransparency {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  FULL = 'full',\n}\n\nexport enum ContainerPadding {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n}\n\nexport enum ContainerSeparator {\n  WITHOUT = 'without',\n  X = 'x',\n  Y = 'y',\n  BOTH = 'both',\n}\n\nexport enum ContainerBorderColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  NEUTRAL = 'neutral',\n  TEXT = 'text',\n  ERROR = 'error',\n  WARNING = 'warning',\n  SUCCESS = 'success',\n}\n\nexport enum ContainerBackground {\n  NONE = 'none',\n  HOVERABLE = 'hoverable',\n  WITH = 'with',\n}\n\nexport enum ContainerGap {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  TWO_XL = '2xl',\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","ContainerRoundedSize","ContainerTransparency","ContainerPadding","ContainerSeparator","ContainerBorderColor","ContainerBackground","ContainerGap","jsx","cn"],"mappings":"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"}

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

@@ -10,6 +10,59 @@ export declare const containerVariants: (props?: ({
     background?: "none" | "hoverable" | "with" | null | undefined;
     gap?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare enum ContainerRoundedSize {
+    NONE = "none",
+    SM = "sm",
+    MD = "md",
+    LG = "lg",
+    XL = "xl",
+    TWO_XL = "2xl",
+    THREE_XL = "3xl",
+    FULL = "full"
+}
+export declare enum ContainerTransparency {
+    NONE = "none",
+    SM = "sm",
+    MD = "md",
+    LG = "lg",
+    XL = "xl",
+    FULL = "full"
+}
+export declare enum ContainerPadding {
+    NONE = "none",
+    SM = "sm",
+    MD = "md",
+    LG = "lg",
+    XL = "xl"
+}
+export declare enum ContainerSeparator {
+    WITHOUT = "without",
+    X = "x",
+    Y = "y",
+    BOTH = "both"
+}
+export declare enum ContainerBorderColor {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    NEUTRAL = "neutral",
+    TEXT = "text",
+    ERROR = "error",
+    WARNING = "warning",
+    SUCCESS = "success"
+}
+export declare enum ContainerBackground {
+    NONE = "none",
+    HOVERABLE = "hoverable",
+    WITH = "with"
+}
+export declare enum ContainerGap {
+    NONE = "none",
+    SM = "sm",
+    MD = "md",
+    LG = "lg",
+    XL = "xl",
+    TWO_XL = "2xl"
+}
 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,EAAE,EACP,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAGf,eAAO,MAAM,iBAAiB;;;;;;;;;8EAsE5B,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"}
+{"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,EAAE,EACP,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAGf,eAAO,MAAM,iBAAiB;;;;;;;;;8EAsE5B,CAAC;AAEH,oBAAY,oBAAoB;IAC9B,IAAI,SAAS;IACb,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,MAAM,QAAQ;IACd,QAAQ,QAAQ;IAChB,IAAI,SAAS;CACd;AAED,oBAAY,qBAAqB;IAC/B,IAAI,SAAS;IACb,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,IAAI,SAAS;CACd;AAED,oBAAY,gBAAgB;IAC1B,IAAI,SAAS;IACb,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;CACV;AAED,oBAAY,kBAAkB;IAC5B,OAAO,YAAY;IACnB,CAAC,MAAM;IACP,CAAC,MAAM;IACP,IAAI,SAAS;CACd;AAED,oBAAY,oBAAoB;IAC9B,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,OAAO,YAAY;CACpB;AAED,oBAAY,mBAAmB;IAC7B,IAAI,SAAS;IACb,SAAS,cAAc;IACvB,IAAI,SAAS;CACd;AAED,oBAAY,YAAY;IACtB,IAAI,SAAS;IACb,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,MAAM,QAAQ;CACf;AAED,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

@@ -71,6 +71,66 @@ const containerVariants = cva("flex text-text flex-col backdrop-blur", {
     gap: "none"
   }
 });
+var ContainerRoundedSize = /* @__PURE__ */ ((ContainerRoundedSize2) => {
+  ContainerRoundedSize2["NONE"] = "none";
+  ContainerRoundedSize2["SM"] = "sm";
+  ContainerRoundedSize2["MD"] = "md";
+  ContainerRoundedSize2["LG"] = "lg";
+  ContainerRoundedSize2["XL"] = "xl";
+  ContainerRoundedSize2["TWO_XL"] = "2xl";
+  ContainerRoundedSize2["THREE_XL"] = "3xl";
+  ContainerRoundedSize2["FULL"] = "full";
+  return ContainerRoundedSize2;
+})(ContainerRoundedSize || {});
+var ContainerTransparency = /* @__PURE__ */ ((ContainerTransparency2) => {
+  ContainerTransparency2["NONE"] = "none";
+  ContainerTransparency2["SM"] = "sm";
+  ContainerTransparency2["MD"] = "md";
+  ContainerTransparency2["LG"] = "lg";
+  ContainerTransparency2["XL"] = "xl";
+  ContainerTransparency2["FULL"] = "full";
+  return ContainerTransparency2;
+})(ContainerTransparency || {});
+var ContainerPadding = /* @__PURE__ */ ((ContainerPadding2) => {
+  ContainerPadding2["NONE"] = "none";
+  ContainerPadding2["SM"] = "sm";
+  ContainerPadding2["MD"] = "md";
+  ContainerPadding2["LG"] = "lg";
+  ContainerPadding2["XL"] = "xl";
+  return ContainerPadding2;
+})(ContainerPadding || {});
+var ContainerSeparator = /* @__PURE__ */ ((ContainerSeparator2) => {
+  ContainerSeparator2["WITHOUT"] = "without";
+  ContainerSeparator2["X"] = "x";
+  ContainerSeparator2["Y"] = "y";
+  ContainerSeparator2["BOTH"] = "both";
+  return ContainerSeparator2;
+})(ContainerSeparator || {});
+var ContainerBorderColor = /* @__PURE__ */ ((ContainerBorderColor2) => {
+  ContainerBorderColor2["PRIMARY"] = "primary";
+  ContainerBorderColor2["SECONDARY"] = "secondary";
+  ContainerBorderColor2["NEUTRAL"] = "neutral";
+  ContainerBorderColor2["TEXT"] = "text";
+  ContainerBorderColor2["ERROR"] = "error";
+  ContainerBorderColor2["WARNING"] = "warning";
+  ContainerBorderColor2["SUCCESS"] = "success";
+  return ContainerBorderColor2;
+})(ContainerBorderColor || {});
+var ContainerBackground = /* @__PURE__ */ ((ContainerBackground2) => {
+  ContainerBackground2["NONE"] = "none";
+  ContainerBackground2["HOVERABLE"] = "hoverable";
+  ContainerBackground2["WITH"] = "with";
+  return ContainerBackground2;
+})(ContainerBackground || {});
+var ContainerGap = /* @__PURE__ */ ((ContainerGap2) => {
+  ContainerGap2["NONE"] = "none";
+  ContainerGap2["SM"] = "sm";
+  ContainerGap2["MD"] = "md";
+  ContainerGap2["LG"] = "lg";
+  ContainerGap2["XL"] = "xl";
+  ContainerGap2["TWO_XL"] = "2xl";
+  return ContainerGap2;
+})(ContainerGap || {});
 const Container = ({
   children,
   roundedSize,
@@ -103,6 +163,13 @@ const Container = ({
 );
 export {
   Container,
+  ContainerBackground,
+  ContainerBorderColor,
+  ContainerGap,
+  ContainerPadding,
+  ContainerRoundedSize,
+  ContainerSeparator,
+  ContainerTransparency,
   containerVariants
 };
 //# sourceMappingURL=index.mjs.map

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 DetailedHTMLProps,\n  type FC,\n  type HTMLAttributes,\n  type PropsWithChildren,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nexport const 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/95',\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":";;;AASO,MAAM,oBAAoB,IAAI,yCAAyC;AAAA,EAC5E,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,IAAA;AAAA,IAER,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,MAAM;AAAA,IAAA;AAAA,IAER,SAAS;AAAA,MACP,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,IAEN,WAAW;AAAA,MACT,SAAS;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MACH,MAAM;AAAA,IAAA;AAAA,IAER,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,IAER,aAAa;AAAA,MACX,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,IAEX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,WACE;AAAA,MACF,MAAM;AAAA,IAAA;AAAA,IAER,KAAK;AAAA,MACH,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,IAAA;AAAA,EACT;AAAA,EAEF,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,MAAA,CACD;AAAA,IAAA;AAAA,IAEF,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 DetailedHTMLProps,\n  type FC,\n  type HTMLAttributes,\n  type PropsWithChildren,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nexport const 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/95',\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 enum ContainerRoundedSize {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  TWO_XL = '2xl',\n  THREE_XL = '3xl',\n  FULL = 'full',\n}\n\nexport enum ContainerTransparency {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  FULL = 'full',\n}\n\nexport enum ContainerPadding {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n}\n\nexport enum ContainerSeparator {\n  WITHOUT = 'without',\n  X = 'x',\n  Y = 'y',\n  BOTH = 'both',\n}\n\nexport enum ContainerBorderColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  NEUTRAL = 'neutral',\n  TEXT = 'text',\n  ERROR = 'error',\n  WARNING = 'warning',\n  SUCCESS = 'success',\n}\n\nexport enum ContainerBackground {\n  NONE = 'none',\n  HOVERABLE = 'hoverable',\n  WITH = 'with',\n}\n\nexport enum ContainerGap {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  TWO_XL = '2xl',\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":["ContainerRoundedSize","ContainerTransparency","ContainerPadding","ContainerSeparator","ContainerBorderColor","ContainerBackground","ContainerGap"],"mappings":"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"}

package/dist/components/ContentEditor/ContentEditor.cjs

@@ -5,6 +5,8 @@ const jsxRuntime = require("react/jsx-runtime");
 const lucideReact = require("lucide-react");
 const ReactExports = require("react");
 const utils_cn = require("../../utils/cn.cjs");
+const components_Input_Input = require("../Input/Input.cjs");
+require("../Input/Checkbox.cjs");
 const components_TextArea_AutoSizeTextArea = require("../TextArea/AutoSizeTextArea.cjs");
 const ContentEditor = ({
   children,
@@ -32,7 +34,7 @@ const ContentEditor = ({
           isEditing ? "cursor-text" : "cursor-pointer"
         ),
         onChange: handleOnContentChange,
-        variant: "invisible",
+        variant: components_Input_Input.InputVariant.INVISIBLE,
         defaultValue: children,
         ...props
       },

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 { useState, type FC, type ChangeEventHandler } from 'react';\nimport { cn } from '../../utils/cn';\nimport {\n  AutoSizedTextArea,\n  AutoSizedTextAreaProps,\n} from '../TextArea/AutoSizeTextArea';\n\nexport type ContentEditorProps = {\n  children: string;\n  onContentChange: (content: string) => void;\n  isEditing?: boolean;\n} & AutoSizedTextAreaProps;\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":";;;;;;;;AAgBO,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;AACpB,wBAAoB,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;AAElC,SACEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,oDACb,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAACC,qCAAAA;AAAAA,MAAA;AAAA,QACC,WAAWC,SAAAA;AAAAA,UACT;AAAA,UACA,YAAY,gBAAgB;AAAA,QAAA;AAAA,QAE9B,UAAU;AAAA,QAEV,SAAQ;AAAA,QACR,cAAc;AAAA,QACb,GAAG;AAAA,MAAA;AAAA,MAHC;AAAA,IAAA;AAAA,IAKN,YACCH,2BAAAA,KAAC,OAAA,EAAI,WAAU,oDACb,UAAA;AAAA,MAAAC,2BAAAA;AAAAA,QAACG,YAAAA;AAAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,MAEXH,2BAAAA;AAAAA,QAACI,YAAAA;AAAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACX,EAAA,CACF;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 { useState, type ChangeEventHandler, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { InputVariant } from '../Input';\nimport {\n  AutoSizedTextArea,\n  AutoSizedTextAreaProps,\n} from '../TextArea/AutoSizeTextArea';\n\nexport type ContentEditorProps = {\n  children: string;\n  onContentChange: (content: string) => void;\n  isEditing?: boolean;\n} & AutoSizedTextAreaProps;\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={InputVariant.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","InputVariant","Check","X"],"mappings":";;;;;;;;;;AAiBO,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;AACpB,wBAAoB,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;AAElC,SACEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,oDACb,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAACC,qCAAAA;AAAAA,MAAA;AAAA,QACC,WAAWC,SAAAA;AAAAA,UACT;AAAA,UACA,YAAY,gBAAgB;AAAA,QAAA;AAAA,QAE9B,UAAU;AAAA,QAEV,SAASC,uBAAAA,aAAa;AAAA,QACtB,cAAc;AAAA,QACb,GAAG;AAAA,MAAA;AAAA,MAHC;AAAA,IAAA;AAAA,IAKN,YACCJ,2BAAAA,KAAC,OAAA,EAAI,WAAU,oDACb,UAAA;AAAA,MAAAC,2BAAAA;AAAAA,QAACI,YAAAA;AAAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,MAEXJ,2BAAAA;AAAAA,QAACK,YAAAA;AAAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACX,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;;"}

package/dist/components/ContentEditor/ContentEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentEditor.d.ts","sourceRoot":"","sources":["../../../src/components/ContentEditor/ContentEditor.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,KAAK,EAAE,EAA2B,MAAM,OAAO,CAAC;AAEnE,OAAO,EAEL,sBAAsB,EACvB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,sBAAsB,CAAC;AAE3B,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAkDhD,CAAC"}
+{"version":3,"file":"ContentEditor.d.ts","sourceRoot":"","sources":["../../../src/components/ContentEditor/ContentEditor.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqC,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAGnE,OAAO,EAEL,sBAAsB,EACvB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,sBAAsB,CAAC;AAE3B,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAkDhD,CAAC"}

package/dist/components/ContentEditor/ContentEditor.mjs

@@ -3,6 +3,8 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { Check, X } from "lucide-react";
 import { useState } from "react";
 import { cn } from "../../utils/cn.mjs";
+import { InputVariant } from "../Input/Input.mjs";
+import "../Input/Checkbox.mjs";
 import { AutoSizedTextArea } from "../TextArea/AutoSizeTextArea.mjs";
 const ContentEditor = ({
   children,
@@ -30,7 +32,7 @@ const ContentEditor = ({
           isEditing ? "cursor-text" : "cursor-pointer"
         ),
         onChange: handleOnContentChange,
-        variant: "invisible",
+        variant: InputVariant.INVISIBLE,
         defaultValue: children,
         ...props
       },

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 { useState, type FC, type ChangeEventHandler } from 'react';\nimport { cn } from '../../utils/cn';\nimport {\n  AutoSizedTextArea,\n  AutoSizedTextAreaProps,\n} from '../TextArea/AutoSizeTextArea';\n\nexport type ContentEditorProps = {\n  children: string;\n  onContentChange: (content: string) => void;\n  isEditing?: boolean;\n} & AutoSizedTextAreaProps;\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":";;;;;;AAgBO,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;AACpB,wBAAoB,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;AAElC,SACE,qBAAC,OAAA,EAAI,WAAU,oDACb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,YAAY,gBAAgB;AAAA,QAAA;AAAA,QAE9B,UAAU;AAAA,QAEV,SAAQ;AAAA,QACR,cAAc;AAAA,QACb,GAAG;AAAA,MAAA;AAAA,MAHC;AAAA,IAAA;AAAA,IAKN,YACC,qBAAC,OAAA,EAAI,WAAU,oDACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,MAEX;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACX,EAAA,CACF;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 { useState, type ChangeEventHandler, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { InputVariant } from '../Input';\nimport {\n  AutoSizedTextArea,\n  AutoSizedTextAreaProps,\n} from '../TextArea/AutoSizeTextArea';\n\nexport type ContentEditorProps = {\n  children: string;\n  onContentChange: (content: string) => void;\n  isEditing?: boolean;\n} & AutoSizedTextAreaProps;\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={InputVariant.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":";;;;;;;;AAiBO,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;AACpB,wBAAoB,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;AAElC,SACE,qBAAC,OAAA,EAAI,WAAU,oDACb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,YAAY,gBAAgB;AAAA,QAAA;AAAA,QAE9B,UAAU;AAAA,QAEV,SAAS,aAAa;AAAA,QACtB,cAAc;AAAA,QACb,GAAG;AAAA,MAAA;AAAA,MAHC;AAAA,IAAA;AAAA,IAKN,YACC,qBAAC,OAAA,EAAI,WAAU,oDACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,MAEX;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACX,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/ContentEditor/ContentEditorInput.cjs

@@ -42,7 +42,7 @@ const ContentEditorInput = ({
           {
             onChange: handleOnContentChange,
             "aria-label": "value",
-            variant: "invisible",
+            variant: components_Input_Input.InputVariant.INVISIBLE,
             className: "size-full",
             defaultValue: children,
             ...props
@@ -56,9 +56,9 @@ const ContentEditorInput = ({
               {
                 Icon: lucideReact.Check,
                 label: "Validate",
-                variant: "hoverable",
-                color: "text",
-                size: "icon-sm",
+                variant: components_Button_Button.ButtonVariant.HOVERABLE,
+                color: components_Button_Button.ButtonColor.TEXT,
+                size: components_Button_Button.ButtonSize.ICON_SM,
                 className: "cursor-pointer hover:scale-110",
                 disabled: disabled || !isValid,
                 onClick: handleValid
@@ -69,9 +69,9 @@ const ContentEditorInput = ({
               {
                 Icon: lucideReact.X,
                 label: "Cancel",
-                variant: "hoverable",
-                size: "icon-sm",
-                color: "text",
+                variant: components_Button_Button.ButtonVariant.HOVERABLE,
+                size: components_Button_Button.ButtonSize.ICON_SM,
+                color: components_Button_Button.ButtonColor.TEXT,
                 className: "cursor-pointer hover:scale-110",
                 onClick: handleCancel
               }

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

@@ -1 +1 @@
-{"version":3,"file":"ContentEditorInput.cjs","sources":["../../../src/components/ContentEditor/ContentEditorInput.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n  type ReactNode,\n  useState,\n  type FC,\n  type ChangeEventHandler,\n  useEffect,\n} from 'react';\nimport { Button } from '../Button';\nimport { type InputProps, Input } from '../Input';\n\nexport type ContentEditorInputProps = {\n  children: InputProps['value'];\n  onContentChange: (content: InputProps['value']) => void;\n  disabled?: boolean;\n  validate?: (content: InputProps['value']) => boolean;\n  additionalButtons?: ReactNode;\n} & Omit<InputProps, 'children'>;\n\nexport const ContentEditorInput: FC<ContentEditorInputProps> = ({\n  children,\n  onContentChange,\n  disabled,\n  validate,\n  additionalButtons,\n  ...props\n}) => {\n  const [newValue, setNewValue] = useState<InputProps['value']>(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<HTMLInputElement> = (e) => {\n    setNewValue(e.currentTarget.value);\n  };\n\n  useEffect(() => {\n    setNewValue(children);\n  }, [children]);\n\n  const isValid = validate?.(newValue) ?? true;\n\n  return (\n    <div\n      className=\"flex size-full flex-col items-center justify-between gap-2\"\n      key={String(children)}\n    >\n      <Input\n        onChange={handleOnContentChange}\n        key={resetIncrementor}\n        aria-label=\"value\"\n        variant=\"invisible\"\n        className=\"size-full\"\n        defaultValue={children}\n        {...props}\n      />\n      {(isEdited || additionalButtons) && (\n        <div className=\"flex w-full items-center justify-end gap-2\">\n          {isEdited && (\n            <>\n              <Button\n                Icon={Check}\n                label=\"Validate\"\n                variant=\"hoverable\"\n                color=\"text\"\n                size=\"icon-sm\"\n                className=\"cursor-pointer hover:scale-110\"\n                disabled={disabled || !isValid}\n                onClick={handleValid}\n              />\n              <Button\n                Icon={X}\n                label=\"Cancel\"\n                variant=\"hoverable\"\n                size=\"icon-sm\"\n                color=\"text\"\n                className=\"cursor-pointer hover:scale-110\"\n                onClick={handleCancel}\n              />\n            </>\n          )}\n          {additionalButtons}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["useState","useEffect","jsxs","jsx","Input","Fragment","Button","Check","X"],"mappings":";;;;;;;;;AAqBO,MAAM,qBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAIA,aAAAA,SAA8B,QAAQ;AACtE,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,aAAAA,SAAiB,CAAC;AAClE,QAAM,WAAoB,aAAa;AAEvC,QAAM,eAAe,MAAM;AACzB,gBAAY,QAAQ;AACpB,wBAAoB,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC;AACA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAA8D,CAAC,MAAM;AACzE,gBAAY,EAAE,cAAc,KAAK;AAAA,EACnC;AAEAC,eAAAA,UAAU,MAAM;AACd,gBAAY,QAAQ;AAAA,EACtB,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,UAAU,WAAW,QAAQ,KAAK;AAExC,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MAGV,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAACC,uBAAAA;AAAAA,UAAA;AAAA,YACC,UAAU;AAAA,YAEV,cAAW;AAAA,YACX,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,cAAc;AAAA,YACb,GAAG;AAAA,UAAA;AAAA,UALC;AAAA,QAAA;AAAA,SAOL,YAAY,sBACZF,2BAAAA,KAAC,OAAA,EAAI,WAAU,8CACZ,UAAA;AAAA,UAAA,YACCA,2BAAAA,KAAAG,qBAAA,EACE,UAAA;AAAA,YAAAF,2BAAAA;AAAAA,cAACG,yBAAAA;AAAAA,cAAA;AAAA,gBACC,MAAMC,YAAAA;AAAAA,gBACN,OAAM;AAAA,gBACN,SAAQ;AAAA,gBACR,OAAM;AAAA,gBACN,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,UAAU,YAAY,CAAC;AAAA,gBACvB,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,YAEXJ,2BAAAA;AAAAA,cAACG,yBAAAA;AAAAA,cAAA;AAAA,gBACC,MAAME,YAAAA;AAAAA,gBACN,OAAM;AAAA,gBACN,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,OAAM;AAAA,gBACN,WAAU;AAAA,gBACV,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UACX,GACF;AAAA,UAED;AAAA,QAAA,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,IArCG,OAAO,QAAQ;AAAA,EAAA;AAyC1B;;"}
+{"version":3,"file":"ContentEditorInput.cjs","sources":["../../../src/components/ContentEditor/ContentEditorInput.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n  type ChangeEventHandler,\n  type FC,\n  type ReactNode,\n  useEffect,\n  useState,\n} from 'react';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { type InputProps, Input, InputVariant } from '../Input';\n\nexport type ContentEditorInputProps = {\n  children: InputProps['value'];\n  onContentChange: (content: InputProps['value']) => void;\n  disabled?: boolean;\n  validate?: (content: InputProps['value']) => boolean;\n  additionalButtons?: ReactNode;\n} & Omit<InputProps, 'children'>;\n\nexport const ContentEditorInput: FC<ContentEditorInputProps> = ({\n  children,\n  onContentChange,\n  disabled,\n  validate,\n  additionalButtons,\n  ...props\n}) => {\n  const [newValue, setNewValue] = useState<InputProps['value']>(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<HTMLInputElement> = (e) => {\n    setNewValue(e.currentTarget.value);\n  };\n\n  useEffect(() => {\n    setNewValue(children);\n  }, [children]);\n\n  const isValid = validate?.(newValue) ?? true;\n\n  return (\n    <div\n      className=\"flex size-full flex-col items-center justify-between gap-2\"\n      key={String(children)}\n    >\n      <Input\n        onChange={handleOnContentChange}\n        key={resetIncrementor}\n        aria-label=\"value\"\n        variant={InputVariant.INVISIBLE}\n        className=\"size-full\"\n        defaultValue={children}\n        {...props}\n      />\n      {(isEdited || additionalButtons) && (\n        <div className=\"flex w-full items-center justify-end gap-2\">\n          {isEdited && (\n            <>\n              <Button\n                Icon={Check}\n                label=\"Validate\"\n                variant={ButtonVariant.HOVERABLE}\n                color={ButtonColor.TEXT}\n                size={ButtonSize.ICON_SM}\n                className=\"cursor-pointer hover:scale-110\"\n                disabled={disabled || !isValid}\n                onClick={handleValid}\n              />\n              <Button\n                Icon={X}\n                label=\"Cancel\"\n                variant={ButtonVariant.HOVERABLE}\n                size={ButtonSize.ICON_SM}\n                color={ButtonColor.TEXT}\n                className=\"cursor-pointer hover:scale-110\"\n                onClick={handleCancel}\n              />\n            </>\n          )}\n          {additionalButtons}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["useState","useEffect","jsxs","jsx","Input","InputVariant","Fragment","Button","Check","ButtonVariant","ButtonColor","ButtonSize","X"],"mappings":";;;;;;;;;AAqBO,MAAM,qBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAIA,aAAAA,SAA8B,QAAQ;AACtE,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,aAAAA,SAAiB,CAAC;AAClE,QAAM,WAAoB,aAAa;AAEvC,QAAM,eAAe,MAAM;AACzB,gBAAY,QAAQ;AACpB,wBAAoB,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC;AACA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAA8D,CAAC,MAAM;AACzE,gBAAY,EAAE,cAAc,KAAK;AAAA,EACnC;AAEAC,eAAAA,UAAU,MAAM;AACd,gBAAY,QAAQ;AAAA,EACtB,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,UAAU,WAAW,QAAQ,KAAK;AAExC,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MAGV,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAACC,uBAAAA;AAAAA,UAAA;AAAA,YACC,UAAU;AAAA,YAEV,cAAW;AAAA,YACX,SAASC,uBAAAA,aAAa;AAAA,YACtB,WAAU;AAAA,YACV,cAAc;AAAA,YACb,GAAG;AAAA,UAAA;AAAA,UALC;AAAA,QAAA;AAAA,SAOL,YAAY,sBACZH,2BAAAA,KAAC,OAAA,EAAI,WAAU,8CACZ,UAAA;AAAA,UAAA,YACCA,2BAAAA,KAAAI,qBAAA,EACE,UAAA;AAAA,YAAAH,2BAAAA;AAAAA,cAACI,yBAAAA;AAAAA,cAAA;AAAA,gBACC,MAAMC,YAAAA;AAAAA,gBACN,OAAM;AAAA,gBACN,SAASC,yBAAAA,cAAc;AAAA,gBACvB,OAAOC,yBAAAA,YAAY;AAAA,gBACnB,MAAMC,yBAAAA,WAAW;AAAA,gBACjB,WAAU;AAAA,gBACV,UAAU,YAAY,CAAC;AAAA,gBACvB,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,YAEXR,2BAAAA;AAAAA,cAACI,yBAAAA;AAAAA,cAAA;AAAA,gBACC,MAAMK,YAAAA;AAAAA,gBACN,OAAM;AAAA,gBACN,SAASH,yBAAAA,cAAc;AAAA,gBACvB,MAAME,yBAAAA,WAAW;AAAA,gBACjB,OAAOD,yBAAAA,YAAY;AAAA,gBACnB,WAAU;AAAA,gBACV,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UACX,GACF;AAAA,UAED;AAAA,QAAA,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,IArCG,OAAO,QAAQ;AAAA,EAAA;AAyC1B;;"}

package/dist/components/ContentEditor/ContentEditorInput.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { InputProps } from '../Input';
 export type ContentEditorInputProps = {
     children: InputProps['value'];

package/dist/components/ContentEditor/ContentEditorInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentEditorInput.d.ts","sourceRoot":"","sources":["../../../src/components/ContentEditor/ContentEditorInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,SAAS,EAEd,KAAK,EAAE,EAGR,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,UAAU,EAAS,MAAM,UAAU,CAAC;AAElD,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC9B,eAAe,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC,KAAK,OAAO,CAAC;IACrD,iBAAiB,CAAC,EAAE,SAAS,CAAC;CAC/B,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;AAEjC,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CA0E1D,CAAC"}
+{"version":3,"file":"ContentEditorInput.d.ts","sourceRoot":"","sources":["../../../src/components/ContentEditor/ContentEditorInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,EAAE,EACP,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,UAAU,EAAuB,MAAM,UAAU,CAAC;AAEhE,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC9B,eAAe,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC,KAAK,OAAO,CAAC;IACrD,iBAAiB,CAAC,EAAE,SAAS,CAAC;CAC/B,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;AAEjC,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CA0E1D,CAAC"}

package/dist/components/ContentEditor/ContentEditorInput.mjs

@@ -2,8 +2,8 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { Check, X } from "lucide-react";
 import { useState, useEffect } from "react";
-import { Button } from "../Button/Button.mjs";
-import { Input } from "../Input/Input.mjs";
+import { Button, ButtonSize, ButtonColor, ButtonVariant } from "../Button/Button.mjs";
+import { Input, InputVariant } from "../Input/Input.mjs";
 import "../Input/Checkbox.mjs";
 const ContentEditorInput = ({
   children,
@@ -40,7 +40,7 @@ const ContentEditorInput = ({
           {
             onChange: handleOnContentChange,
             "aria-label": "value",
-            variant: "invisible",
+            variant: InputVariant.INVISIBLE,
             className: "size-full",
             defaultValue: children,
             ...props
@@ -54,9 +54,9 @@ const ContentEditorInput = ({
               {
                 Icon: Check,
                 label: "Validate",
-                variant: "hoverable",
-                color: "text",
-                size: "icon-sm",
+                variant: ButtonVariant.HOVERABLE,
+                color: ButtonColor.TEXT,
+                size: ButtonSize.ICON_SM,
                 className: "cursor-pointer hover:scale-110",
                 disabled: disabled || !isValid,
                 onClick: handleValid
@@ -67,9 +67,9 @@ const ContentEditorInput = ({
               {
                 Icon: X,
                 label: "Cancel",
-                variant: "hoverable",
-                size: "icon-sm",
-                color: "text",
+                variant: ButtonVariant.HOVERABLE,
+                size: ButtonSize.ICON_SM,
+                color: ButtonColor.TEXT,
                 className: "cursor-pointer hover:scale-110",
                 onClick: handleCancel
               }

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

@@ -1 +1 @@
-{"version":3,"file":"ContentEditorInput.mjs","sources":["../../../src/components/ContentEditor/ContentEditorInput.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n  type ReactNode,\n  useState,\n  type FC,\n  type ChangeEventHandler,\n  useEffect,\n} from 'react';\nimport { Button } from '../Button';\nimport { type InputProps, Input } from '../Input';\n\nexport type ContentEditorInputProps = {\n  children: InputProps['value'];\n  onContentChange: (content: InputProps['value']) => void;\n  disabled?: boolean;\n  validate?: (content: InputProps['value']) => boolean;\n  additionalButtons?: ReactNode;\n} & Omit<InputProps, 'children'>;\n\nexport const ContentEditorInput: FC<ContentEditorInputProps> = ({\n  children,\n  onContentChange,\n  disabled,\n  validate,\n  additionalButtons,\n  ...props\n}) => {\n  const [newValue, setNewValue] = useState<InputProps['value']>(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<HTMLInputElement> = (e) => {\n    setNewValue(e.currentTarget.value);\n  };\n\n  useEffect(() => {\n    setNewValue(children);\n  }, [children]);\n\n  const isValid = validate?.(newValue) ?? true;\n\n  return (\n    <div\n      className=\"flex size-full flex-col items-center justify-between gap-2\"\n      key={String(children)}\n    >\n      <Input\n        onChange={handleOnContentChange}\n        key={resetIncrementor}\n        aria-label=\"value\"\n        variant=\"invisible\"\n        className=\"size-full\"\n        defaultValue={children}\n        {...props}\n      />\n      {(isEdited || additionalButtons) && (\n        <div className=\"flex w-full items-center justify-end gap-2\">\n          {isEdited && (\n            <>\n              <Button\n                Icon={Check}\n                label=\"Validate\"\n                variant=\"hoverable\"\n                color=\"text\"\n                size=\"icon-sm\"\n                className=\"cursor-pointer hover:scale-110\"\n                disabled={disabled || !isValid}\n                onClick={handleValid}\n              />\n              <Button\n                Icon={X}\n                label=\"Cancel\"\n                variant=\"hoverable\"\n                size=\"icon-sm\"\n                color=\"text\"\n                className=\"cursor-pointer hover:scale-110\"\n                onClick={handleCancel}\n              />\n            </>\n          )}\n          {additionalButtons}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAqBO,MAAM,qBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAA8B,QAAQ;AACtE,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAiB,CAAC;AAClE,QAAM,WAAoB,aAAa;AAEvC,QAAM,eAAe,MAAM;AACzB,gBAAY,QAAQ;AACpB,wBAAoB,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC;AACA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAA8D,CAAC,MAAM;AACzE,gBAAY,EAAE,cAAc,KAAK;AAAA,EACnC;AAEA,YAAU,MAAM;AACd,gBAAY,QAAQ;AAAA,EACtB,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,UAAU,WAAW,QAAQ,KAAK;AAExC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MAGV,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,UAAU;AAAA,YAEV,cAAW;AAAA,YACX,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,cAAc;AAAA,YACb,GAAG;AAAA,UAAA;AAAA,UALC;AAAA,QAAA;AAAA,SAOL,YAAY,sBACZ,qBAAC,OAAA,EAAI,WAAU,8CACZ,UAAA;AAAA,UAAA,YACC,qBAAA,UAAA,EACE,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN,OAAM;AAAA,gBACN,SAAQ;AAAA,gBACR,OAAM;AAAA,gBACN,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,UAAU,YAAY,CAAC;AAAA,gBACvB,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,YAEX;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN,OAAM;AAAA,gBACN,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,OAAM;AAAA,gBACN,WAAU;AAAA,gBACV,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UACX,GACF;AAAA,UAED;AAAA,QAAA,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,IArCG,OAAO,QAAQ;AAAA,EAAA;AAyC1B;"}
+{"version":3,"file":"ContentEditorInput.mjs","sources":["../../../src/components/ContentEditor/ContentEditorInput.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n  type ChangeEventHandler,\n  type FC,\n  type ReactNode,\n  useEffect,\n  useState,\n} from 'react';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { type InputProps, Input, InputVariant } from '../Input';\n\nexport type ContentEditorInputProps = {\n  children: InputProps['value'];\n  onContentChange: (content: InputProps['value']) => void;\n  disabled?: boolean;\n  validate?: (content: InputProps['value']) => boolean;\n  additionalButtons?: ReactNode;\n} & Omit<InputProps, 'children'>;\n\nexport const ContentEditorInput: FC<ContentEditorInputProps> = ({\n  children,\n  onContentChange,\n  disabled,\n  validate,\n  additionalButtons,\n  ...props\n}) => {\n  const [newValue, setNewValue] = useState<InputProps['value']>(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<HTMLInputElement> = (e) => {\n    setNewValue(e.currentTarget.value);\n  };\n\n  useEffect(() => {\n    setNewValue(children);\n  }, [children]);\n\n  const isValid = validate?.(newValue) ?? true;\n\n  return (\n    <div\n      className=\"flex size-full flex-col items-center justify-between gap-2\"\n      key={String(children)}\n    >\n      <Input\n        onChange={handleOnContentChange}\n        key={resetIncrementor}\n        aria-label=\"value\"\n        variant={InputVariant.INVISIBLE}\n        className=\"size-full\"\n        defaultValue={children}\n        {...props}\n      />\n      {(isEdited || additionalButtons) && (\n        <div className=\"flex w-full items-center justify-end gap-2\">\n          {isEdited && (\n            <>\n              <Button\n                Icon={Check}\n                label=\"Validate\"\n                variant={ButtonVariant.HOVERABLE}\n                color={ButtonColor.TEXT}\n                size={ButtonSize.ICON_SM}\n                className=\"cursor-pointer hover:scale-110\"\n                disabled={disabled || !isValid}\n                onClick={handleValid}\n              />\n              <Button\n                Icon={X}\n                label=\"Cancel\"\n                variant={ButtonVariant.HOVERABLE}\n                size={ButtonSize.ICON_SM}\n                color={ButtonColor.TEXT}\n                className=\"cursor-pointer hover:scale-110\"\n                onClick={handleCancel}\n              />\n            </>\n          )}\n          {additionalButtons}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAqBO,MAAM,qBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAA8B,QAAQ;AACtE,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAiB,CAAC;AAClE,QAAM,WAAoB,aAAa;AAEvC,QAAM,eAAe,MAAM;AACzB,gBAAY,QAAQ;AACpB,wBAAoB,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC;AACA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAA8D,CAAC,MAAM;AACzE,gBAAY,EAAE,cAAc,KAAK;AAAA,EACnC;AAEA,YAAU,MAAM;AACd,gBAAY,QAAQ;AAAA,EACtB,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,UAAU,WAAW,QAAQ,KAAK;AAExC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MAGV,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,UAAU;AAAA,YAEV,cAAW;AAAA,YACX,SAAS,aAAa;AAAA,YACtB,WAAU;AAAA,YACV,cAAc;AAAA,YACb,GAAG;AAAA,UAAA;AAAA,UALC;AAAA,QAAA;AAAA,SAOL,YAAY,sBACZ,qBAAC,OAAA,EAAI,WAAU,8CACZ,UAAA;AAAA,UAAA,YACC,qBAAA,UAAA,EACE,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN,OAAM;AAAA,gBACN,SAAS,cAAc;AAAA,gBACvB,OAAO,YAAY;AAAA,gBACnB,MAAM,WAAW;AAAA,gBACjB,WAAU;AAAA,gBACV,UAAU,YAAY,CAAC;AAAA,gBACvB,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,YAEX;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN,OAAM;AAAA,gBACN,SAAS,cAAc;AAAA,gBACvB,MAAM,WAAW;AAAA,gBACjB,OAAO,YAAY;AAAA,gBACnB,WAAU;AAAA,gBACV,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UACX,GACF;AAAA,UAED;AAAA,QAAA,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,IArCG,OAAO,QAAQ;AAAA,EAAA;AAyC1B;"}

package/dist/components/CopyButton/CopyButton.content.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.content.cjs","sources":["../../../src/components/CopyButton/CopyButton.content.ts"],"sourcesContent":["import { t, type Dictionary } from 'intlayer';\n\nexport const copyContentContent = {\n  key: 'copy-button',\n  content: {\n    label: t({\n      en: 'Copy content',\n      fr: 'Copier le contenu',\n      es: 'Copiar contenido',\n      'en-GB': 'Copy content',\n      de: 'Inhalt kopieren',\n      ja: 'コンテンツをコピー',\n      ko: '콘텐츠 복사',\n      zh: '复制内容',\n      it: 'Copia contenuto',\n      pt: 'Copiar conteúdo',\n      hi: 'सामग्री कॉपी करें',\n      ar: 'نسخ المحتوى',\n      ru: 'Копировать содержимое',\n    }),\n  },\n} satisfies Dictionary;\n\nexport default copyContentContent;\n"],"names":["t"],"mappings":";;;AAEO,MAAM,qBAAqB;AAAA,EAChC,KAAK;AAAA,EACL,SAAS;AAAA,IACP,OAAOA,SAAAA,EAAE;AAAA,MACP,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,CACL;AAAA,EAAA;AAEL;;;"}

package/dist/components/CopyButton/CopyButton.content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.content.d.ts","sourceRoot":"","sources":["../../../src/components/CopyButton/CopyButton.content.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmBT,CAAC;AAEvB,eAAe,kBAAkB,CAAC"}

package/dist/components/CopyButton/CopyButton.content.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.content.mjs","sources":["../../../src/components/CopyButton/CopyButton.content.ts"],"sourcesContent":["import { t, type Dictionary } from 'intlayer';\n\nexport const copyContentContent = {\n  key: 'copy-button',\n  content: {\n    label: t({\n      en: 'Copy content',\n      fr: 'Copier le contenu',\n      es: 'Copiar contenido',\n      'en-GB': 'Copy content',\n      de: 'Inhalt kopieren',\n      ja: 'コンテンツをコピー',\n      ko: '콘텐츠 복사',\n      zh: '复制内容',\n      it: 'Copia contenuto',\n      pt: 'Copiar conteúdo',\n      hi: 'सामग्री कॉपी करें',\n      ar: 'نسخ المحتوى',\n      ru: 'Копировать содержимое',\n    }),\n  },\n} satisfies Dictionary;\n\nexport default copyContentContent;\n"],"names":[],"mappings":";AAEO,MAAM,qBAAqB;AAAA,EAChC,KAAK;AAAA,EACL,SAAS;AAAA,IACP,OAAO,EAAE;AAAA,MACP,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,CACL;AAAA,EAAA;AAEL;"}

package/dist/components/CopyButton/index.cjs

@@ -6,10 +6,9 @@ const lucideReact = require("lucide-react");
 const ReactExports = require("react");
 const reactIntlayer = require("react-intlayer");
 const components_Button_Button = require("../Button/Button.cjs");
-const components_IDE_CopyButton_content = require("../IDE/CopyButton.content.cjs");
 const CopyButton = ({ content, ...props }) => {
   const [copied, setCopied] = ReactExports.useState(false);
-  const { label } = reactIntlayer.useDictionary(components_IDE_CopyButton_content.copyContentContent);
+  const { label } = reactIntlayer.useIntlayer("copy-button");
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(content);
@@ -29,9 +28,9 @@ const CopyButton = ({ content, ...props }) => {
     {
       Icon: copied ? lucideReact.CopyCheckIcon : lucideReact.CopyIcon,
       onClick: handleCopy,
-      variant: "hoverable",
-      color: "text",
-      size: "icon-sm",
+      variant: components_Button_Button.ButtonVariant.HOVERABLE,
+      color: components_Button_Button.ButtonColor.TEXT,
+      size: components_Button_Button.ButtonSize.ICON_SM,
       ...props,
       label: props.label ?? label.value
     }

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/CopyButton/index.tsx"],"sourcesContent":["'use client';\n\nimport { CopyCheckIcon, CopyIcon } from 'lucide-react';\nimport { useEffect, useState, type FC } from 'react';\nimport { useDictionary } from 'react-intlayer';\nimport { Button, ButtonProps } from '../Button';\nimport { copyContentContent } from '../IDE/CopyButton.content';\n\ntype CopyButtonProps = {\n  content: string;\n} & Partial<ButtonProps>;\n\nexport const CopyButton: FC<CopyButtonProps> = ({ content, ...props }) => {\n  const [copied, setCopied] = useState(false);\n  const { label } = useDictionary(copyContentContent);\n\n  const handleCopy = async () => {\n    try {\n      await navigator.clipboard.writeText(content);\n      setCopied(true);\n    } catch (error) {\n      console.error('Failed to copy text: ', error);\n    }\n  };\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setCopied(false);\n    }, 1000);\n    return () => clearTimeout(timer);\n  }, [copied]);\n\n  return (\n    <Button\n      Icon={copied ? CopyCheckIcon : CopyIcon}\n      onClick={handleCopy}\n      variant=\"hoverable\"\n      color=\"text\"\n      size=\"icon-sm\"\n      {...props}\n      label={props.label ?? label.value}\n    />\n  );\n};\n"],"names":["useState","useDictionary","copyContentContent","useEffect","jsx","Button","CopyCheckIcon","CopyIcon"],"mappings":";;;;;;;;;AAYO,MAAM,aAAkC,CAAC,EAAE,SAAS,GAAG,YAAY;AACxE,QAAM,CAAC,QAAQ,SAAS,IAAIA,aAAAA,SAAS,KAAK;AAC1C,QAAM,EAAE,MAAA,IAAUC,cAAAA,cAAcC,oDAAkB;AAElD,QAAM,aAAa,YAAY;AAC7B,QAAI;AACF,YAAM,UAAU,UAAU,UAAU,OAAO;AAC3C,gBAAU,IAAI;AAAA,IAChB,SAAS,OAAO;AACd,cAAQ,MAAM,yBAAyB,KAAK;AAAA,IAC9C;AAAA,EACF;AAEAC,eAAAA,UAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM;AAC7B,gBAAU,KAAK;AAAA,IACjB,GAAG,GAAI;AACP,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,MAAM,CAAC;AAEX,SACEC,2BAAAA;AAAAA,IAACC,yBAAAA;AAAAA,IAAA;AAAA,MACC,MAAM,SAASC,YAAAA,gBAAgBC,YAAAA;AAAAA,MAC/B,SAAS;AAAA,MACT,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ,OAAO,MAAM,SAAS,MAAM;AAAA,IAAA;AAAA,EAAA;AAGlC;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/CopyButton/index.tsx"],"sourcesContent":["'use client';\n\nimport { CopyCheckIcon, CopyIcon } from 'lucide-react';\nimport { useEffect, useState, type FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport {\n  Button,\n  ButtonColor,\n  ButtonProps,\n  ButtonSize,\n  ButtonVariant,\n} from '../Button';\n\ntype CopyButtonProps = {\n  content: string;\n} & Partial<ButtonProps>;\n\nexport const CopyButton: FC<CopyButtonProps> = ({ content, ...props }) => {\n  const [copied, setCopied] = useState(false);\n  const { label } = useIntlayer('copy-button');\n\n  const handleCopy = async () => {\n    try {\n      await navigator.clipboard.writeText(content);\n      setCopied(true);\n    } catch (error) {\n      console.error('Failed to copy text: ', error);\n    }\n  };\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setCopied(false);\n    }, 1000);\n    return () => clearTimeout(timer);\n  }, [copied]);\n\n  return (\n    <Button\n      Icon={copied ? CopyCheckIcon : CopyIcon}\n      onClick={handleCopy}\n      variant={ButtonVariant.HOVERABLE}\n      color={ButtonColor.TEXT}\n      size={ButtonSize.ICON_SM}\n      {...props}\n      label={props.label ?? label.value}\n    />\n  );\n};\n"],"names":["useState","useIntlayer","useEffect","jsx","Button","CopyCheckIcon","CopyIcon","ButtonVariant","ButtonColor","ButtonSize"],"mappings":";;;;;;;;AAiBO,MAAM,aAAkC,CAAC,EAAE,SAAS,GAAG,YAAY;AACxE,QAAM,CAAC,QAAQ,SAAS,IAAIA,aAAAA,SAAS,KAAK;AAC1C,QAAM,EAAE,MAAA,IAAUC,cAAAA,YAAY,aAAa;AAE3C,QAAM,aAAa,YAAY;AAC7B,QAAI;AACF,YAAM,UAAU,UAAU,UAAU,OAAO;AAC3C,gBAAU,IAAI;AAAA,IAChB,SAAS,OAAO;AACd,cAAQ,MAAM,yBAAyB,KAAK;AAAA,IAC9C;AAAA,EACF;AAEAC,eAAAA,UAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM;AAC7B,gBAAU,KAAK;AAAA,IACjB,GAAG,GAAI;AACP,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,MAAM,CAAC;AAEX,SACEC,2BAAAA;AAAAA,IAACC,yBAAAA;AAAAA,IAAA;AAAA,MACC,MAAM,SAASC,YAAAA,gBAAgBC,YAAAA;AAAAA,MAC/B,SAAS;AAAA,MACT,SAASC,yBAAAA,cAAc;AAAA,MACvB,OAAOC,yBAAAA,YAAY;AAAA,MACnB,MAAMC,yBAAAA,WAAW;AAAA,MAChB,GAAG;AAAA,MACJ,OAAO,MAAM,SAAS,MAAM;AAAA,IAAA;AAAA,EAAA;AAGlC;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CopyButton/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAuB,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;AAGhD,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;CACjB,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;AAEzB,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA+B1C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CopyButton/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAuB,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAGL,WAAW,EAGZ,MAAM,WAAW,CAAC;AAEnB,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;CACjB,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;AAEzB,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA+B1C,CAAC"}

package/dist/components/CopyButton/index.mjs

@@ -2,12 +2,11 @@
 import { jsx } from "react/jsx-runtime";
 import { CopyCheckIcon, CopyIcon } from "lucide-react";
 import { useState, useEffect } from "react";
-import { useDictionary } from "react-intlayer";
-import { Button } from "../Button/Button.mjs";
-import { copyContentContent } from "../IDE/CopyButton.content.mjs";
+import { useIntlayer } from "react-intlayer";
+import { Button, ButtonSize, ButtonColor, ButtonVariant } from "../Button/Button.mjs";
 const CopyButton = ({ content, ...props }) => {
   const [copied, setCopied] = useState(false);
-  const { label } = useDictionary(copyContentContent);
+  const { label } = useIntlayer("copy-button");
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(content);
@@ -27,9 +26,9 @@ const CopyButton = ({ content, ...props }) => {
     {
       Icon: copied ? CopyCheckIcon : CopyIcon,
       onClick: handleCopy,
-      variant: "hoverable",
-      color: "text",
-      size: "icon-sm",
+      variant: ButtonVariant.HOVERABLE,
+      color: ButtonColor.TEXT,
+      size: ButtonSize.ICON_SM,
       ...props,
       label: props.label ?? label.value
     }