@intlayer/design-system 8.1.2 → 8.1.3

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

@@ -1,204 +1,2 @@
-import { cn } from "../../utils/cn.mjs";
-import { cva } from "class-variance-authority";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/components/Container/index.tsx
-/**
-* Container component variants using class-variance-authority
-* Provides flexible styling options for background, padding, borders, and layout
-*/
-const containerVariants = cva("flex flex-col text-text backdrop-blur", {
-	variants: {
-		roundedSize: {
-			none: "rounded-none",
-			sm: "rounded-sm [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-md",
-			md: "rounded-md [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-lg",
-			lg: "rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl",
-			xl: "rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl",
-			"2xl": "rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl",
-			"3xl": "rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl",
-			"4xl": "rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]",
-			full: "rounded-full [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-full"
-		},
-		transparency: {
-			none: "bg-card",
-			xs: "bg-card/95",
-			sm: "bg-card/90",
-			md: "bg-card/70",
-			lg: "bg-card/40",
-			xl: "bg-card/20",
-			full: ""
-		},
-		padding: {
-			none: "p-0",
-			sm: "px-3 py-2",
-			md: "px-4 py-3",
-			lg: "px-6 py-4",
-			xl: "px-8 py-6",
-			"2xl": "px-10 py-8"
-		},
-		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"
-		},
-		border: {
-			none: "",
-			with: "border-[1.3px]"
-		},
-		borderColor: {
-			primary: "border-primary",
-			secondary: "border-secondary",
-			neutral: "border-neutral",
-			card: "border-card",
-			text: "border-text",
-			error: "border-error",
-			warning: "border-warning",
-			success: "border-success"
-		},
-		background: {
-			none: "",
-			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: "lg",
-		border: "none",
-		borderColor: "text",
-		transparency: "md",
-		padding: "none",
-		separator: "without",
-		gap: "none"
-	},
-	compoundVariants: [{
-		background: "none",
-		class: "bg-transparent"
-	}]
-});
-/** Available rounded corner sizes for the container */
-let ContainerRoundedSize = /* @__PURE__ */ function(ContainerRoundedSize) {
-	ContainerRoundedSize["NONE"] = "none";
-	ContainerRoundedSize["SM"] = "sm";
-	ContainerRoundedSize["MD"] = "md";
-	ContainerRoundedSize["LG"] = "lg";
-	ContainerRoundedSize["XL"] = "xl";
-	ContainerRoundedSize["2xl"] = "2xl";
-	ContainerRoundedSize["3xl"] = "3xl";
-	ContainerRoundedSize["4xl"] = "4xl";
-	ContainerRoundedSize["5xl"] = "5xl";
-	ContainerRoundedSize["FULL"] = "full";
-	return ContainerRoundedSize;
-}({});
-/** Background transparency levels for the container */
-let ContainerTransparency = /* @__PURE__ */ function(ContainerTransparency) {
-	ContainerTransparency["NONE"] = "none";
-	ContainerTransparency["SM"] = "sm";
-	ContainerTransparency["MD"] = "md";
-	ContainerTransparency["LG"] = "lg";
-	ContainerTransparency["XL"] = "xl";
-	ContainerTransparency["FULL"] = "full";
-	return ContainerTransparency;
-}({});
-/** Padding sizes for container content */
-let ContainerPadding = /* @__PURE__ */ function(ContainerPadding) {
-	ContainerPadding["NONE"] = "none";
-	ContainerPadding["SM"] = "sm";
-	ContainerPadding["MD"] = "md";
-	ContainerPadding["LG"] = "lg";
-	ContainerPadding["XL"] = "xl";
-	return ContainerPadding;
-}({});
-/** Separator options for dividing container children */
-let ContainerSeparator = /* @__PURE__ */ function(ContainerSeparator) {
-	ContainerSeparator["WITHOUT"] = "without";
-	ContainerSeparator["X"] = "x";
-	ContainerSeparator["Y"] = "y";
-	ContainerSeparator["BOTH"] = "both";
-	return ContainerSeparator;
-}({});
-/** Border color options for the container */
-let ContainerBorderColor = /* @__PURE__ */ function(ContainerBorderColor) {
-	ContainerBorderColor["PRIMARY"] = "primary";
-	ContainerBorderColor["SECONDARY"] = "secondary";
-	ContainerBorderColor["NEUTRAL"] = "neutral";
-	ContainerBorderColor["CARD"] = "card";
-	ContainerBorderColor["TEXT"] = "text";
-	ContainerBorderColor["ERROR"] = "error";
-	ContainerBorderColor["WARNING"] = "warning";
-	ContainerBorderColor["SUCCESS"] = "success";
-	return ContainerBorderColor;
-}({});
-/** Background interaction states for the container */
-let ContainerBackground = /* @__PURE__ */ function(ContainerBackground) {
-	ContainerBackground["NONE"] = "none";
-	ContainerBackground["HOVERABLE"] = "hoverable";
-	ContainerBackground["WITH"] = "with";
-	return ContainerBackground;
-}({});
-/** Gap sizes between container children */
-let ContainerGap = /* @__PURE__ */ function(ContainerGap) {
-	ContainerGap["NONE"] = "none";
-	ContainerGap["SM"] = "sm";
-	ContainerGap["MD"] = "md";
-	ContainerGap["LG"] = "lg";
-	ContainerGap["XL"] = "xl";
-	ContainerGap["2xl"] = "2xl";
-	return ContainerGap;
-}({});
-/**
-* Container Component
-*
-* A flexible container component for organizing content with customizable styling options.
-* Supports various visual states, layouts, and accessibility features.
-*
-* ## Features
-* - **Flexible Layout**: Supports different padding, gap, and separator options
-* - **Visual Variants**: Multiple background transparency levels and border styles
-* - **Responsive Design**: Configurable rounded corners and spacing
-* - **Semantic HTML**: Proper div element with extensible attributes
-*
-* ## Accessibility
-* - Inherits all standard div accessibility features
-* - Supports ARIA attributes through spread props
-* - Maintains proper semantic structure for screen readers
-*
-* @param children - The content to display inside the container
-* @param roundedSize - Border radius size (default: 'md')
-* @param transparency - Background transparency level (default: 'md')
-* @param padding - Internal padding size (default: 'none')
-* @param separator - Divider lines between children (default: 'without')
-* @param border - Whether to show border (default: false)
-* @param borderColor - Color of the border (default: 'text')
-* @param background - Background interaction behavior (default: 'none')
-* @param gap - Space between child elements (default: 'none')
-* @param className - Additional CSS classes
-* @param props - Additional HTML div attributes including ARIA attributes
-*/
-const Container = ({ children, roundedSize, padding, transparency, separator, className, border, borderColor, background, gap, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn(containerVariants({
-		roundedSize,
-		transparency,
-		padding,
-		separator,
-		border: typeof border === "boolean" ? border ? "with" : "none" : void 0,
-		background,
-		borderColor,
-		gap
-	}), className),
-	...props,
-	children
-});
-
-//#endregion
-export { Container, ContainerBackground, ContainerBorderColor, ContainerGap, ContainerPadding, ContainerRoundedSize, ContainerSeparator, ContainerTransparency, containerVariants };
+import{cn as e}from"../../utils/cn.mjs";import{cva as t}from"class-variance-authority";import{jsx as n}from"react/jsx-runtime";const r=t(`flex flex-col text-text backdrop-blur`,{variants:{roundedSize:{none:`rounded-none`,sm:`rounded-sm [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-md`,md:`rounded-md [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-lg`,lg:`rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl`,xl:`rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl`,"2xl":`rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl`,"3xl":`rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl`,"4xl":`rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]`,full:`rounded-full [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-full`},transparency:{none:`bg-card`,xs:`bg-card/95`,sm:`bg-card/90`,md:`bg-card/70`,lg:`bg-card/40`,xl:`bg-card/20`,full:``},padding:{none:`p-0`,sm:`px-3 py-2`,md:`px-4 py-3`,lg:`px-6 py-4`,xl:`px-8 py-6`,"2xl":`px-10 py-8`},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`},border:{none:``,with:`border-[1.3px]`},borderColor:{primary:`border-primary`,secondary:`border-secondary`,neutral:`border-neutral`,card:`border-card`,text:`border-text`,error:`border-error`,warning:`border-warning`,success:`border-success`},background:{none:``,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:`lg`,border:`none`,borderColor:`text`,transparency:`md`,padding:`none`,separator:`without`,gap:`none`},compoundVariants:[{background:`none`,class:`bg-transparent`}]});let i=function(e){return e.NONE=`none`,e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e.XL=`xl`,e[`2xl`]=`2xl`,e[`3xl`]=`3xl`,e[`4xl`]=`4xl`,e[`5xl`]=`5xl`,e.FULL=`full`,e}({}),a=function(e){return e.NONE=`none`,e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e.XL=`xl`,e.FULL=`full`,e}({}),o=function(e){return e.NONE=`none`,e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e.XL=`xl`,e}({}),s=function(e){return e.WITHOUT=`without`,e.X=`x`,e.Y=`y`,e.BOTH=`both`,e}({}),c=function(e){return e.PRIMARY=`primary`,e.SECONDARY=`secondary`,e.NEUTRAL=`neutral`,e.CARD=`card`,e.TEXT=`text`,e.ERROR=`error`,e.WARNING=`warning`,e.SUCCESS=`success`,e}({}),l=function(e){return e.NONE=`none`,e.HOVERABLE=`hoverable`,e.WITH=`with`,e}({}),u=function(e){return e.NONE=`none`,e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e.XL=`xl`,e[`2xl`]=`2xl`,e}({});const d=({children:t,roundedSize:i,padding:a,transparency:o,separator:s,className:c,border:l,borderColor:u,background:d,gap:f,...p})=>n(`div`,{className:e(r({roundedSize:i,transparency:o,padding:a,separator:s,border:typeof l==`boolean`?l?`with`:`none`:void 0,background:d,borderColor:u,gap:f}),c),...p,children:t});export{d as Container,l as ContainerBackground,c as ContainerBorderColor,u as ContainerGap,o as ContainerPadding,i as ContainerRoundedSize,s as ContainerSeparator,a as ContainerTransparency,r as containerVariants};
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Container/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n  DetailedHTMLProps,\n  FC,\n  HTMLAttributes,\n  PropsWithChildren,\n} from 'react';\n\n/**\n * Container component variants using class-variance-authority\n * Provides flexible styling options for background, padding, borders, and layout\n */\nexport const containerVariants = cva('flex flex-col text-text backdrop-blur', {\n  variants: {\n    roundedSize: {\n      none: 'rounded-none',\n      sm: 'rounded-sm [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-md',\n      md: 'rounded-md [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-lg',\n      lg: 'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',\n      xl: 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n      '2xl':\n        'rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl',\n      '3xl':\n        'rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl',\n      '4xl':\n        'rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]',\n      full: 'rounded-full [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-full',\n    },\n    transparency: {\n      none: 'bg-card',\n      xs: 'bg-card/95',\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: 'px-3 py-2',\n      md: 'px-4 py-3',\n      lg: 'px-6 py-4',\n      xl: 'px-8 py-6',\n      '2xl': 'px-10 py-8',\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.3px]',\n    },\n    borderColor: {\n      primary: 'border-primary',\n      secondary: 'border-secondary',\n      neutral: 'border-neutral',\n      card: 'border-card',\n      text: 'border-text',\n      error: 'border-error',\n      warning: 'border-warning',\n      success: 'border-success',\n    },\n    background: {\n      none: '',\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: 'lg',\n    border: 'none',\n    borderColor: 'text',\n    transparency: 'md',\n    padding: 'none',\n    separator: 'without',\n    gap: 'none',\n  },\n  compoundVariants: [\n    {\n      background: 'none',\n      class: 'bg-transparent',\n    },\n  ],\n});\n\n/** Available rounded corner sizes for the container */\nexport enum ContainerRoundedSize {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  '2xl' = '2xl',\n  '3xl' = '3xl',\n  '4xl' = '4xl',\n  '5xl' = '5xl',\n  FULL = 'full',\n}\n\n/** Background transparency levels for the container */\nexport enum ContainerTransparency {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  FULL = 'full',\n}\n\n/** Padding sizes for container content */\nexport enum ContainerPadding {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n}\n\n/** Separator options for dividing container children */\nexport enum ContainerSeparator {\n  WITHOUT = 'without',\n  X = 'x',\n  Y = 'y',\n  BOTH = 'both',\n}\n\n/** Border color options for the container */\nexport enum ContainerBorderColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  NEUTRAL = 'neutral',\n  CARD = 'card',\n  TEXT = 'text',\n  ERROR = 'error',\n  WARNING = 'warning',\n  SUCCESS = 'success',\n}\n\n/** Background interaction states for the container */\nexport enum ContainerBackground {\n  NONE = 'none',\n  HOVERABLE = 'hoverable',\n  WITH = 'with',\n}\n\n/** Gap sizes between container children */\nexport enum ContainerGap {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  '2xl' = '2xl',\n}\n\n/** Container component props extending HTML div attributes */\nexport type ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border'>\n> &\n  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {\n    /** Whether to show a border around the container */\n    border?: boolean;\n  };\n\n/**\n * Container Component\n *\n * A flexible container component for organizing content with customizable styling options.\n * Supports various visual states, layouts, and accessibility features.\n *\n * ## Features\n * - **Flexible Layout**: Supports different padding, gap, and separator options\n * - **Visual Variants**: Multiple background transparency levels and border styles\n * - **Responsive Design**: Configurable rounded corners and spacing\n * - **Semantic HTML**: Proper div element with extensible attributes\n *\n * ## Accessibility\n * - Inherits all standard div accessibility features\n * - Supports ARIA attributes through spread props\n * - Maintains proper semantic structure for screen readers\n *\n * @param children - The content to display inside the container\n * @param roundedSize - Border radius size (default: 'md')\n * @param transparency - Background transparency level (default: 'md')\n * @param padding - Internal padding size (default: 'none')\n * @param separator - Divider lines between children (default: 'without')\n * @param border - Whether to show border (default: false)\n * @param borderColor - Color of the border (default: 'text')\n * @param background - Background interaction behavior (default: 'none')\n * @param gap - Space between child elements (default: 'none')\n * @param className - Additional CSS classes\n * @param props - Additional HTML div attributes including ARIA attributes\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  gap,\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        gap,\n      }),\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n"],"mappings":";;;;;;;;;AAaA,MAAa,oBAAoB,IAAI,yCAAyC;CAC5E,UAAU;EACR,aAAa;GACX,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OACE;GACF,OACE;GACF,OACE;GACF,MAAM;GACP;EACD,cAAc;GACZ,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GACP;EACD,SAAS;GACP,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;GACR;EACD,WAAW;GACT,SAAS;GACT,GAAG;GACH,GAAG;GACH,MAAM;GACP;EACD,QAAQ;GACN,MAAM;GACN,MAAM;GACP;EACD,aAAa;GACX,SAAS;GACT,WAAW;GACX,SAAS;GACT,MAAM;GACN,MAAM;GACN,OAAO;GACP,SAAS;GACT,SAAS;GACV;EACD,YAAY;GACV,MAAM;GACN,WACE;GACF,MAAM;GACP;EACD,KAAK;GACH,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;GACR;EACF;CACD,iBAAiB;EACf,aAAa;EACb,QAAQ;EACR,aAAa;EACb,cAAc;EACd,SAAS;EACT,WAAW;EACX,KAAK;EACN;CACD,kBAAkB,CAChB;EACE,YAAY;EACZ,OAAO;EACR,CACF;CACF,CAAC;;AAGF,IAAY,sEAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIF,IAAY,wEAAL;AACL;AACA;AACA;AACA;AACA;AACA;;;;AAIF,IAAY,8DAAL;AACL;AACA;AACA;AACA;AACA;;;;AAIF,IAAY,kEAAL;AACL;AACA;AACA;AACA;;;;AAIF,IAAY,sEAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIF,IAAY,oEAAL;AACL;AACA;AACA;;;;AAIF,IAAY,sDAAL;AACL;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCF,MAAa,aAAiC,EAC5C,UACA,aACA,SACA,cACA,WACA,WACA,QACA,aACA,YACA,KACA,GAAG,YAEH,oBAAC;CACC,WAAW,GACT,kBAAkB;EAChB;EACA;EACA;EACA;EACA,QACE,OAAO,WAAW,YAAa,SAAS,SAAS,SAAU;EAC7D;EACA;EACA;EACD,CAAC,EACF,UACD;CACD,GAAI;CAEH;EACG"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Container/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n  DetailedHTMLProps,\n  FC,\n  HTMLAttributes,\n  PropsWithChildren,\n} from 'react';\n\n/**\n * Container component variants using class-variance-authority\n * Provides flexible styling options for background, padding, borders, and layout\n */\nexport const containerVariants = cva('flex flex-col text-text backdrop-blur', {\n  variants: {\n    roundedSize: {\n      none: 'rounded-none',\n      sm: 'rounded-sm [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-md',\n      md: 'rounded-md [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-lg',\n      lg: 'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',\n      xl: 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n      '2xl':\n        'rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl',\n      '3xl':\n        'rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl',\n      '4xl':\n        'rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]',\n      full: 'rounded-full [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-full',\n    },\n    transparency: {\n      none: 'bg-card',\n      xs: 'bg-card/95',\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: 'px-3 py-2',\n      md: 'px-4 py-3',\n      lg: 'px-6 py-4',\n      xl: 'px-8 py-6',\n      '2xl': 'px-10 py-8',\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.3px]',\n    },\n    borderColor: {\n      primary: 'border-primary',\n      secondary: 'border-secondary',\n      neutral: 'border-neutral',\n      card: 'border-card',\n      text: 'border-text',\n      error: 'border-error',\n      warning: 'border-warning',\n      success: 'border-success',\n    },\n    background: {\n      none: '',\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: 'lg',\n    border: 'none',\n    borderColor: 'text',\n    transparency: 'md',\n    padding: 'none',\n    separator: 'without',\n    gap: 'none',\n  },\n  compoundVariants: [\n    {\n      background: 'none',\n      class: 'bg-transparent',\n    },\n  ],\n});\n\n/** Available rounded corner sizes for the container */\nexport enum ContainerRoundedSize {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  '2xl' = '2xl',\n  '3xl' = '3xl',\n  '4xl' = '4xl',\n  '5xl' = '5xl',\n  FULL = 'full',\n}\n\n/** Background transparency levels for the container */\nexport enum ContainerTransparency {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  FULL = 'full',\n}\n\n/** Padding sizes for container content */\nexport enum ContainerPadding {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n}\n\n/** Separator options for dividing container children */\nexport enum ContainerSeparator {\n  WITHOUT = 'without',\n  X = 'x',\n  Y = 'y',\n  BOTH = 'both',\n}\n\n/** Border color options for the container */\nexport enum ContainerBorderColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  NEUTRAL = 'neutral',\n  CARD = 'card',\n  TEXT = 'text',\n  ERROR = 'error',\n  WARNING = 'warning',\n  SUCCESS = 'success',\n}\n\n/** Background interaction states for the container */\nexport enum ContainerBackground {\n  NONE = 'none',\n  HOVERABLE = 'hoverable',\n  WITH = 'with',\n}\n\n/** Gap sizes between container children */\nexport enum ContainerGap {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  '2xl' = '2xl',\n}\n\n/** Container component props extending HTML div attributes */\nexport type ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border'>\n> &\n  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {\n    /** Whether to show a border around the container */\n    border?: boolean;\n  };\n\n/**\n * Container Component\n *\n * A flexible container component for organizing content with customizable styling options.\n * Supports various visual states, layouts, and accessibility features.\n *\n * ## Features\n * - **Flexible Layout**: Supports different padding, gap, and separator options\n * - **Visual Variants**: Multiple background transparency levels and border styles\n * - **Responsive Design**: Configurable rounded corners and spacing\n * - **Semantic HTML**: Proper div element with extensible attributes\n *\n * ## Accessibility\n * - Inherits all standard div accessibility features\n * - Supports ARIA attributes through spread props\n * - Maintains proper semantic structure for screen readers\n *\n * @param children - The content to display inside the container\n * @param roundedSize - Border radius size (default: 'md')\n * @param transparency - Background transparency level (default: 'md')\n * @param padding - Internal padding size (default: 'none')\n * @param separator - Divider lines between children (default: 'without')\n * @param border - Whether to show border (default: false)\n * @param borderColor - Color of the border (default: 'text')\n * @param background - Background interaction behavior (default: 'none')\n * @param gap - Space between child elements (default: 'none')\n * @param className - Additional CSS classes\n * @param props - Additional HTML div attributes including ARIA attributes\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  gap,\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        gap,\n      }),\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n"],"mappings":"+HAaA,MAAa,EAAoB,EAAI,wCAAyC,CAC5E,SAAU,CACR,YAAa,CACX,KAAM,eACN,GAAI,iFACJ,GAAI,iFACJ,GAAI,iFACJ,GAAI,kFACJ,MACE,mFACF,MACE,mFACF,MACE,wFACF,KAAM,qFACP,CACD,aAAc,CACZ,KAAM,UACN,GAAI,aACJ,GAAI,aACJ,GAAI,aACJ,GAAI,aACJ,GAAI,aACJ,KAAM,GACP,CACD,QAAS,CACP,KAAM,MACN,GAAI,YACJ,GAAI,YACJ,GAAI,YACJ,GAAI,YACJ,MAAO,aACR,CACD,UAAW,CACT,QAAS,GACT,EAAG,wCACH,EAAG,wCACH,KAAM,iDACP,CACD,OAAQ,CACN,KAAM,GACN,KAAM,iBACP,CACD,YAAa,CACX,QAAS,iBACT,UAAW,mBACX,QAAS,iBACT,KAAM,cACN,KAAM,cACN,MAAO,eACP,QAAS,iBACT,QAAS,iBACV,CACD,WAAY,CACV,KAAM,GACN,UACE,2KACF,KAAM,GACP,CACD,IAAK,CACH,KAAM,QACN,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,MAAO,SACR,CACF,CACD,gBAAiB,CACf,YAAa,KACb,OAAQ,OACR,YAAa,OACb,aAAc,KACd,QAAS,OACT,UAAW,UACX,IAAK,OACN,CACD,iBAAkB,CAChB,CACE,WAAY,OACZ,MAAO,iBACR,CACF,CACF,CAAC,CAGF,IAAY,EAAA,SAAA,EAAL,OACL,GAAA,KAAA,OACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,OAAA,MACA,EAAA,OAAA,MACA,EAAA,OAAA,MACA,EAAA,OAAA,MACA,EAAA,KAAA,cAIU,EAAA,SAAA,EAAL,OACL,GAAA,KAAA,OACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,KAAA,cAIU,EAAA,SAAA,EAAL,OACL,GAAA,KAAA,OACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,YAIU,EAAA,SAAA,EAAL,OACL,GAAA,QAAA,UACA,EAAA,EAAA,IACA,EAAA,EAAA,IACA,EAAA,KAAA,cAIU,EAAA,SAAA,EAAL,OACL,GAAA,QAAA,UACA,EAAA,UAAA,YACA,EAAA,QAAA,UACA,EAAA,KAAA,OACA,EAAA,KAAA,OACA,EAAA,MAAA,QACA,EAAA,QAAA,UACA,EAAA,QAAA,iBAIU,EAAA,SAAA,EAAL,OACL,GAAA,KAAA,OACA,EAAA,UAAA,YACA,EAAA,KAAA,cAIU,EAAA,SAAA,EAAL,OACL,GAAA,KAAA,OACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,OAAA,aAyCF,MAAa,GAAiC,CAC5C,WACA,cACA,UACA,eACA,YACA,YACA,SACA,cACA,aACA,MACA,GAAG,KAEH,EAAC,MAAA,CACC,UAAW,EACT,EAAkB,CAChB,cACA,eACA,UACA,YACA,OACE,OAAO,GAAW,UAAa,EAAS,OAAS,OAAU,IAAA,GAC7D,aACA,cACA,MACD,CAAC,CACF,EACD,CACD,GAAI,EAEH,YACG"}

package/dist/esm/components/ContentEditor/ContentEditor.mjs

@@ -1,108 +1,2 @@
-'use client';
-
-import { cn } from "../../utils/cn.mjs";
-import { InputVariant } from "../Input/Input.mjs";
-import { AutoSizedTextArea } from "../TextArea/AutoSizeTextArea.mjs";
-import { Check, X } from "lucide-react";
-import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/components/ContentEditor/ContentEditor.tsx
-/**
-* ContentEditor Component
-*
-* An inline editing component that allows users to edit text content with
-* validation and cancellation options. Built on top of AutoSizedTextArea
-* for flexible text editing experiences.
-*
-* ## Features
-* - **Inline Editing**: Edit content directly in place with visual feedback
-* - **Auto-sizing**: Textarea automatically adjusts to content size
-* - **Validation Controls**: Check and X buttons appear when content is modified
-* - **Keyboard Support**: Full keyboard navigation and accessibility
-* - **State Management**: Handles editing states and content validation
-*
-* ## Accessibility
-* - Proper ARIA labels for all interactive elements
-* - Keyboard navigation support (Tab, Enter, Escape)
-* - Screen reader announcements for state changes
-* - Focus management between edit and display modes
-*
-* @param children - The current content to display and edit
-* @param onContentChange - Callback when content is saved
-* @param isEditing - Whether editor is in editing mode
-* @param props - Additional AutoSizedTextArea props
-*/
-const ContentEditor = ({ children, onContentChange, isEditing, ...props }) => {
-	const [newValue, setNewValue] = useState(children);
-	const [resetIncrementor, setResetIncrementor] = useState(0);
-	const isEdited = newValue !== children;
-	const handleCancel = () => {
-		setNewValue(children);
-		setResetIncrementor((prev) => prev + 1);
-	};
-	const handleValid = () => {
-		onContentChange(newValue);
-	};
-	const handleOnContentChange = (e) => setNewValue(e.target.value ?? "");
-	const handleKeyDown = (e) => {
-		if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-			e.preventDefault();
-			handleValid();
-		} else if (e.key === "Escape") {
-			e.preventDefault();
-			handleCancel();
-		}
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-row items-center justify-between gap-2",
-		role: "group",
-		"aria-label": "Content editor",
-		children: [/* @__PURE__ */ jsx(AutoSizedTextArea, {
-			className: cn("break-word m-3 inline w-full bg-transparent outline-hidden", isEditing ? "cursor-text" : "cursor-pointer"),
-			onChange: handleOnContentChange,
-			onKeyDown: handleKeyDown,
-			variant: InputVariant.INVISIBLE,
-			defaultValue: children,
-			"aria-label": "Editable content",
-			"aria-describedby": isEdited ? "content-editor-actions" : void 0,
-			...props
-		}, resetIncrementor), isEdited && /* @__PURE__ */ jsxs("div", {
-			id: "content-editor-actions",
-			className: "flex flex-row items-center justify-between gap-2",
-			role: "group",
-			"aria-label": "Edit actions",
-			children: [/* @__PURE__ */ jsx(Check, {
-				className: "cursor-pointer text-green-600 hover:scale-110",
-				size: 16,
-				onClick: handleValid,
-				role: "button",
-				tabIndex: 0,
-				"aria-label": "Save changes (Ctrl+Enter)",
-				onKeyDown: (e) => {
-					if (e.key === "Enter" || e.key === " ") {
-						e.preventDefault();
-						handleValid();
-					}
-				}
-			}), /* @__PURE__ */ jsx(X, {
-				className: "cursor-pointer text-red-600 hover:scale-110",
-				size: 16,
-				onClick: handleCancel,
-				role: "button",
-				tabIndex: 0,
-				"aria-label": "Cancel changes (Escape)",
-				onKeyDown: (e) => {
-					if (e.key === "Enter" || e.key === " ") {
-						e.preventDefault();
-						handleCancel();
-					}
-				}
-			})]
-		})]
-	});
-};
-
-//#endregion
-export { ContentEditor };
+"use client";import{cn as e}from"../../utils/cn.mjs";import{InputVariant as t}from"../Input/Input.mjs";import{AutoSizedTextArea as n}from"../TextArea/AutoSizeTextArea.mjs";import{Check as r,X as i}from"lucide-react";import{useState as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";const c=({children:c,onContentChange:l,isEditing:u,...d})=>{let[f,p]=a(c),[m,h]=a(0),g=f!==c,_=()=>{p(c),h(e=>e+1)},v=()=>{l(f)},y=e=>p(e.target.value??``),b=e=>{e.key===`Enter`&&(e.metaKey||e.ctrlKey)?(e.preventDefault(),v()):e.key===`Escape`&&(e.preventDefault(),_())};return s(`div`,{className:`flex flex-row items-center justify-between gap-2`,role:`group`,"aria-label":`Content editor`,children:[o(n,{className:e(`break-word m-3 inline w-full bg-transparent outline-hidden`,u?`cursor-text`:`cursor-pointer`),onChange:y,onKeyDown:b,variant:t.INVISIBLE,defaultValue:c,"aria-label":`Editable content`,"aria-describedby":g?`content-editor-actions`:void 0,...d},m),g&&s(`div`,{id:`content-editor-actions`,className:`flex flex-row items-center justify-between gap-2`,role:`group`,"aria-label":`Edit actions`,children:[o(r,{className:`cursor-pointer text-green-600 hover:scale-110`,size:16,onClick:v,role:`button`,tabIndex:0,"aria-label":`Save changes (Ctrl+Enter)`,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),v())}}),o(i,{className:`cursor-pointer text-red-600 hover:scale-110`,size:16,onClick:_,role:`button`,tabIndex:0,"aria-label":`Cancel changes (Escape)`,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),_())}})]})]})};export{c as ContentEditor};
 //# sourceMappingURL=ContentEditor.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContentEditor.mjs","names":[],"sources":["../../../../src/components/ContentEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { Check, X } from 'lucide-react';\nimport { type ChangeEventHandler, type FC, useState } from 'react';\nimport { InputVariant } from '../Input';\nimport {\n  AutoSizedTextArea,\n  type AutoSizedTextAreaProps,\n} from '../TextArea/AutoSizeTextArea';\n\n/** Props for the ContentEditor component */\nexport type ContentEditorProps = {\n  /** The current content to display and edit */\n  children: string;\n  /** Callback function called when content is saved/validated */\n  onContentChange: (content: string) => void;\n  /** Whether the editor is currently in editing mode */\n  isEditing?: boolean;\n} & AutoSizedTextAreaProps;\n\n/**\n * ContentEditor Component\n *\n * An inline editing component that allows users to edit text content with\n * validation and cancellation options. Built on top of AutoSizedTextArea\n * for flexible text editing experiences.\n *\n * ## Features\n * - **Inline Editing**: Edit content directly in place with visual feedback\n * - **Auto-sizing**: Textarea automatically adjusts to content size\n * - **Validation Controls**: Check and X buttons appear when content is modified\n * - **Keyboard Support**: Full keyboard navigation and accessibility\n * - **State Management**: Handles editing states and content validation\n *\n * ## Accessibility\n * - Proper ARIA labels for all interactive elements\n * - Keyboard navigation support (Tab, Enter, Escape)\n * - Screen reader announcements for state changes\n * - Focus management between edit and display modes\n *\n * @param children - The current content to display and edit\n * @param onContentChange - Callback when content is saved\n * @param isEditing - Whether editor is in editing mode\n * @param props - Additional AutoSizedTextArea props\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\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.target.value ?? '');\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {\n      e.preventDefault();\n      handleValid();\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      handleCancel();\n    }\n  };\n\n  return (\n    <div\n      className=\"flex flex-row items-center justify-between gap-2\"\n      role=\"group\"\n      aria-label=\"Content editor\"\n    >\n      <AutoSizedTextArea\n        className={cn(\n          'break-word m-3 inline w-full bg-transparent outline-hidden',\n          isEditing ? 'cursor-text' : 'cursor-pointer'\n        )}\n        onChange={handleOnContentChange}\n        onKeyDown={handleKeyDown}\n        key={resetIncrementor}\n        variant={InputVariant.INVISIBLE}\n        defaultValue={children}\n        aria-label=\"Editable content\"\n        aria-describedby={isEdited ? 'content-editor-actions' : undefined}\n        {...props}\n      />\n      {isEdited && (\n        <div\n          id=\"content-editor-actions\"\n          className=\"flex flex-row items-center justify-between gap-2\"\n          role=\"group\"\n          aria-label=\"Edit actions\"\n        >\n          <Check\n            className=\"cursor-pointer text-green-600 hover:scale-110\"\n            size={16}\n            onClick={handleValid}\n            role=\"button\"\n            tabIndex={0}\n            aria-label=\"Save changes (Ctrl+Enter)\"\n            onKeyDown={(e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                handleValid();\n              }\n            }}\n          />\n          <X\n            className=\"cursor-pointer text-red-600 hover:scale-110\"\n            size={16}\n            onClick={handleCancel}\n            role=\"button\"\n            tabIndex={0}\n            aria-label=\"Cancel changes (Escape)\"\n            onKeyDown={(e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                handleCancel();\n              }\n            }}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAa,iBAAyC,EACpD,UACA,iBACA,WACA,GAAG,YACC;CACJ,MAAM,CAAC,UAAU,eAAe,SAAiB,SAAS;CAC1D,MAAM,CAAC,kBAAkB,uBAAuB,SAAiB,EAAE;CACnE,MAAM,WAAoB,aAAa;CAEvC,MAAM,qBAAqB;AACzB,cAAY,SAAS;AACrB,uBAAqB,SAAS,OAAO,EAAE;;CAGzC,MAAM,oBAAoB;AACxB,kBAAgB,SAAS;;CAG3B,MAAM,yBAAkE,MACtE,YAAY,EAAE,OAAO,SAAS,GAAG;CAEnC,MAAM,iBAAiB,MAAgD;AACrE,MAAI,EAAE,QAAQ,YAAY,EAAE,WAAW,EAAE,UAAU;AACjD,KAAE,gBAAgB;AAClB,gBAAa;aACJ,EAAE,QAAQ,UAAU;AAC7B,KAAE,gBAAgB;AAClB,iBAAc;;;AAIlB,QACE,qBAAC;EACC,WAAU;EACV,MAAK;EACL,cAAW;aAEX,oBAAC;GACC,WAAW,GACT,8DACA,YAAY,gBAAgB,iBAC7B;GACD,UAAU;GACV,WAAW;GAEX,SAAS,aAAa;GACtB,cAAc;GACd,cAAW;GACX,oBAAkB,WAAW,2BAA2B;GACxD,GAAI;KALC,iBAML,EACD,YACC,qBAAC;GACC,IAAG;GACH,WAAU;GACV,MAAK;GACL,cAAW;cAEX,oBAAC;IACC,WAAU;IACV,MAAM;IACN,SAAS;IACT,MAAK;IACL,UAAU;IACV,cAAW;IACX,YAAY,MAAM;AAChB,SAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,gBAAgB;AAClB,mBAAa;;;KAGjB,EACF,oBAAC;IACC,WAAU;IACV,MAAM;IACN,SAAS;IACT,MAAK;IACL,UAAU;IACV,cAAW;IACX,YAAY,MAAM;AAChB,SAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,gBAAgB;AAClB,oBAAc;;;KAGlB;IACE;GAEJ"}
+{"version":3,"file":"ContentEditor.mjs","names":[],"sources":["../../../../src/components/ContentEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { Check, X } from 'lucide-react';\nimport { type ChangeEventHandler, type FC, useState } from 'react';\nimport { InputVariant } from '../Input';\nimport {\n  AutoSizedTextArea,\n  type AutoSizedTextAreaProps,\n} from '../TextArea/AutoSizeTextArea';\n\n/** Props for the ContentEditor component */\nexport type ContentEditorProps = {\n  /** The current content to display and edit */\n  children: string;\n  /** Callback function called when content is saved/validated */\n  onContentChange: (content: string) => void;\n  /** Whether the editor is currently in editing mode */\n  isEditing?: boolean;\n} & AutoSizedTextAreaProps;\n\n/**\n * ContentEditor Component\n *\n * An inline editing component that allows users to edit text content with\n * validation and cancellation options. Built on top of AutoSizedTextArea\n * for flexible text editing experiences.\n *\n * ## Features\n * - **Inline Editing**: Edit content directly in place with visual feedback\n * - **Auto-sizing**: Textarea automatically adjusts to content size\n * - **Validation Controls**: Check and X buttons appear when content is modified\n * - **Keyboard Support**: Full keyboard navigation and accessibility\n * - **State Management**: Handles editing states and content validation\n *\n * ## Accessibility\n * - Proper ARIA labels for all interactive elements\n * - Keyboard navigation support (Tab, Enter, Escape)\n * - Screen reader announcements for state changes\n * - Focus management between edit and display modes\n *\n * @param children - The current content to display and edit\n * @param onContentChange - Callback when content is saved\n * @param isEditing - Whether editor is in editing mode\n * @param props - Additional AutoSizedTextArea props\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\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.target.value ?? '');\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {\n      e.preventDefault();\n      handleValid();\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      handleCancel();\n    }\n  };\n\n  return (\n    <div\n      className=\"flex flex-row items-center justify-between gap-2\"\n      role=\"group\"\n      aria-label=\"Content editor\"\n    >\n      <AutoSizedTextArea\n        className={cn(\n          'break-word m-3 inline w-full bg-transparent outline-hidden',\n          isEditing ? 'cursor-text' : 'cursor-pointer'\n        )}\n        onChange={handleOnContentChange}\n        onKeyDown={handleKeyDown}\n        key={resetIncrementor}\n        variant={InputVariant.INVISIBLE}\n        defaultValue={children}\n        aria-label=\"Editable content\"\n        aria-describedby={isEdited ? 'content-editor-actions' : undefined}\n        {...props}\n      />\n      {isEdited && (\n        <div\n          id=\"content-editor-actions\"\n          className=\"flex flex-row items-center justify-between gap-2\"\n          role=\"group\"\n          aria-label=\"Edit actions\"\n        >\n          <Check\n            className=\"cursor-pointer text-green-600 hover:scale-110\"\n            size={16}\n            onClick={handleValid}\n            role=\"button\"\n            tabIndex={0}\n            aria-label=\"Save changes (Ctrl+Enter)\"\n            onKeyDown={(e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                handleValid();\n              }\n            }}\n          />\n          <X\n            className=\"cursor-pointer text-red-600 hover:scale-110\"\n            size={16}\n            onClick={handleCancel}\n            role=\"button\"\n            tabIndex={0}\n            aria-label=\"Cancel changes (Escape)\"\n            onKeyDown={(e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                handleCancel();\n              }\n            }}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"2SA8CA,MAAa,GAAyC,CACpD,WACA,kBACA,YACA,GAAG,KACC,CACJ,GAAM,CAAC,EAAU,GAAe,EAAiB,EAAS,CACpD,CAAC,EAAkB,GAAuB,EAAiB,EAAE,CAC7D,EAAoB,IAAa,EAEjC,MAAqB,CACzB,EAAY,EAAS,CACrB,EAAqB,GAAS,EAAO,EAAE,EAGnC,MAAoB,CACxB,EAAgB,EAAS,EAGrB,EAAkE,GACtE,EAAY,EAAE,OAAO,OAAS,GAAG,CAE7B,EAAiB,GAAgD,CACjE,EAAE,MAAQ,UAAY,EAAE,SAAW,EAAE,UACvC,EAAE,gBAAgB,CAClB,GAAa,EACJ,EAAE,MAAQ,WACnB,EAAE,gBAAgB,CAClB,GAAc,GAIlB,OACE,EAAC,MAAA,CACC,UAAU,mDACV,KAAK,QACL,aAAW,2BAEX,EAAC,EAAA,CACC,UAAW,EACT,6DACA,EAAY,cAAgB,iBAC7B,CACD,SAAU,EACV,UAAW,EAEX,QAAS,EAAa,UACtB,aAAc,EACd,aAAW,mBACX,mBAAkB,EAAW,yBAA2B,IAAA,GACxD,GAAI,GALC,EAML,CACD,GACC,EAAC,MAAA,CACC,GAAG,yBACH,UAAU,mDACV,KAAK,QACL,aAAW,yBAEX,EAAC,EAAA,CACC,UAAU,gDACV,KAAM,GACN,QAAS,EACT,KAAK,SACL,SAAU,EACV,aAAW,4BACX,UAAY,GAAM,EACZ,EAAE,MAAQ,SAAW,EAAE,MAAQ,OACjC,EAAE,gBAAgB,CAClB,GAAa,IAGjB,CACF,EAAC,EAAA,CACC,UAAU,8CACV,KAAM,GACN,QAAS,EACT,KAAK,SACL,SAAU,EACV,aAAW,0BACX,UAAY,GAAM,EACZ,EAAE,MAAQ,SAAW,EAAE,MAAQ,OACjC,EAAE,gBAAgB,CAClB,GAAc,IAGlB,CAAA,EACE,CAAA,EAEJ"}

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

@@ -1,111 +1,2 @@
-'use client';
-
-import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
-import { Input, InputVariant } from "../Input/Input.mjs";
-import { Check, X } from "lucide-react";
-import { useEffect, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/components/ContentEditor/ContentEditorInput.tsx
-/**
-* ContentEditorInput Component
-*
-* An inline editing component for single-line text input with validation,
-* cancel/save functionality, and support for additional action buttons.
-*
-* ## Features
-* - **Inline Input Editing**: Edit single-line content with immediate feedback
-* - **Validation Support**: Optional content validation with visual feedback
-* - **Action Buttons**: Built-in save/cancel with support for additional buttons
-* - **Keyboard Shortcuts**: Enter to save, Escape to cancel
-* - **Accessibility**: Full ARIA support and keyboard navigation
-* - **State Management**: Handles editing states and validation
-*
-* ## Accessibility
-* - Proper ARIA labels and descriptions for all controls
-* - Keyboard navigation (Tab, Enter, Escape)
-* - Screen reader support for validation states
-* - Focus management and visual indicators
-*
-* @param children - Current input value
-* @param onContentChange - Callback when content is saved
-* @param disabled - Whether the editor is disabled
-* @param validate - Optional validation function
-* @param additionalButtons - Extra buttons to display
-* @param props - Additional Input component props
-*/
-const ContentEditorInput = ({ children, onContentChange, disabled, validate, additionalButtons, ...props }) => {
-	const [newValue, setNewValue] = useState(children);
-	const [resetIncrementor, setResetIncrementor] = useState(0);
-	const isEdited = newValue !== children;
-	const handleCancel = () => {
-		setNewValue(children);
-		setResetIncrementor((prev) => prev + 1);
-	};
-	const handleValid = () => {
-		onContentChange(newValue);
-	};
-	const handleOnContentChange = (e) => {
-		setNewValue(e.currentTarget.value);
-	};
-	const handleKeyDown = (e) => {
-		if (e.key === "Enter" && !disabled && isValid) {
-			e.preventDefault();
-			handleValid();
-		} else if (e.key === "Escape") {
-			e.preventDefault();
-			handleCancel();
-		}
-	};
-	useEffect(() => {
-		setNewValue(children);
-		setResetIncrementor((prev) => prev + 1);
-	}, [children]);
-	const isValid = validate?.(newValue) ?? true;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex size-full flex-col items-center justify-between gap-2",
-		role: "group",
-		"aria-label": "Content editor input",
-		children: [/* @__PURE__ */ jsx(Input, {
-			onChange: handleOnContentChange,
-			onKeyDown: handleKeyDown,
-			"aria-label": "Editable input value",
-			"aria-describedby": isEdited || additionalButtons ? "content-editor-input-actions" : void 0,
-			"aria-invalid": !isValid,
-			variant: InputVariant.INVISIBLE,
-			className: "size-full",
-			defaultValue: children,
-			disabled,
-			...props
-		}, resetIncrementor), (isEdited || additionalButtons) && /* @__PURE__ */ jsxs("div", {
-			id: "content-editor-input-actions",
-			className: "flex w-full items-center justify-end gap-2",
-			role: "group",
-			"aria-label": "Edit actions",
-			children: [isEdited && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
-				Icon: Check,
-				label: `Save changes${!isValid ? " (invalid content)" : ""}`,
-				variant: ButtonVariant.HOVERABLE,
-				color: ButtonColor.TEXT,
-				size: ButtonSize.ICON_SM,
-				className: "cursor-pointer hover:scale-110",
-				disabled: disabled || !isValid,
-				onClick: handleValid,
-				"aria-describedby": !isValid ? "validation-error" : void 0
-			}), /* @__PURE__ */ jsx(Button, {
-				Icon: X,
-				label: "Cancel changes",
-				variant: ButtonVariant.HOVERABLE,
-				size: ButtonSize.ICON_SM,
-				color: ButtonColor.TEXT,
-				className: "cursor-pointer hover:scale-110",
-				onClick: handleCancel,
-				disabled
-			})] }), additionalButtons]
-		})]
-	}, String(children));
-};
-
-//#endregion
-export { ContentEditorInput };
+"use client";import{Button as e,ButtonColor as t,ButtonSize as n,ButtonVariant as r}from"../Button/Button.mjs";import{Input as i,InputVariant as a}from"../Input/Input.mjs";import{Check as o,X as s}from"lucide-react";import{useEffect as c,useState as l}from"react";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";const p=({children:p,onContentChange:m,disabled:h,validate:g,additionalButtons:_,...v})=>{let[y,b]=l(p),[x,S]=l(0),C=y!==p,w=()=>{b(p),S(e=>e+1)},T=()=>{m(y)},E=e=>{b(e.currentTarget.value)},D=e=>{e.key===`Enter`&&!h&&O?(e.preventDefault(),T()):e.key===`Escape`&&(e.preventDefault(),w())};c(()=>{b(p),S(e=>e+1)},[p]);let O=g?.(y)??!0;return f(`div`,{className:`flex size-full flex-col items-center justify-between gap-2`,role:`group`,"aria-label":`Content editor input`,children:[d(i,{onChange:E,onKeyDown:D,"aria-label":`Editable input value`,"aria-describedby":C||_?`content-editor-input-actions`:void 0,"aria-invalid":!O,variant:a.INVISIBLE,className:`size-full`,defaultValue:p,disabled:h,...v},x),(C||_)&&f(`div`,{id:`content-editor-input-actions`,className:`flex w-full items-center justify-end gap-2`,role:`group`,"aria-label":`Edit actions`,children:[C&&f(u,{children:[d(e,{Icon:o,label:`Save changes${O?``:` (invalid content)`}`,variant:r.HOVERABLE,color:t.TEXT,size:n.ICON_SM,className:`cursor-pointer hover:scale-110`,disabled:h||!O,onClick:T,"aria-describedby":O?void 0:`validation-error`}),d(e,{Icon:s,label:`Cancel changes`,variant:r.HOVERABLE,size:n.ICON_SM,color:t.TEXT,className:`cursor-pointer hover:scale-110`,onClick:w,disabled:h})]}),_]})]},String(p))};export{p as ContentEditorInput};
 //# sourceMappingURL=ContentEditorInput.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContentEditorInput.mjs","names":[],"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 { Input, type InputProps, InputVariant } from '../Input';\n\n/** Props for the ContentEditorInput component */\nexport type ContentEditorInputProps = {\n  /** The current content to display and edit */\n  children: InputProps['value'];\n  /** Callback function called when content is saved/validated */\n  onContentChange: (content: InputProps['value']) => void;\n  /** Whether the editor is disabled */\n  disabled?: boolean;\n  /** Optional validation function to check content validity */\n  validate?: (content: InputProps['value']) => boolean;\n  /** Additional buttons to display alongside edit actions */\n  additionalButtons?: ReactNode;\n} & Omit<InputProps, 'children'>;\n\n/**\n * ContentEditorInput Component\n *\n * An inline editing component for single-line text input with validation,\n * cancel/save functionality, and support for additional action buttons.\n *\n * ## Features\n * - **Inline Input Editing**: Edit single-line content with immediate feedback\n * - **Validation Support**: Optional content validation with visual feedback\n * - **Action Buttons**: Built-in save/cancel with support for additional buttons\n * - **Keyboard Shortcuts**: Enter to save, Escape to cancel\n * - **Accessibility**: Full ARIA support and keyboard navigation\n * - **State Management**: Handles editing states and validation\n *\n * ## Accessibility\n * - Proper ARIA labels and descriptions for all controls\n * - Keyboard navigation (Tab, Enter, Escape)\n * - Screen reader support for validation states\n * - Focus management and visual indicators\n *\n * @param children - Current input value\n * @param onContentChange - Callback when content is saved\n * @param disabled - Whether the editor is disabled\n * @param validate - Optional validation function\n * @param additionalButtons - Extra buttons to display\n * @param props - Additional Input component props\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\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n    setNewValue(e.currentTarget.value);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Enter' && !disabled && isValid) {\n      e.preventDefault();\n      handleValid();\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      handleCancel();\n    }\n  };\n\n  useEffect(() => {\n    setNewValue(children);\n    // Force input to reset when children changes externally\n    setResetIncrementor((prev) => prev + 1);\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      role=\"group\"\n      aria-label=\"Content editor input\"\n    >\n      <Input\n        onChange={handleOnContentChange}\n        onKeyDown={handleKeyDown}\n        key={resetIncrementor}\n        aria-label=\"Editable input value\"\n        aria-describedby={\n          isEdited || additionalButtons\n            ? 'content-editor-input-actions'\n            : undefined\n        }\n        aria-invalid={!isValid}\n        variant={InputVariant.INVISIBLE}\n        className=\"size-full\"\n        defaultValue={children}\n        disabled={disabled}\n        {...props}\n      />\n      {(isEdited || additionalButtons) && (\n        <div\n          id=\"content-editor-input-actions\"\n          className=\"flex w-full items-center justify-end gap-2\"\n          role=\"group\"\n          aria-label=\"Edit actions\"\n        >\n          {isEdited && (\n            <>\n              <Button\n                Icon={Check}\n                label={`Save changes${!isValid ? ' (invalid content)' : ''}`}\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                aria-describedby={!isValid ? 'validation-error' : undefined}\n              />\n              <Button\n                Icon={X}\n                label=\"Cancel changes\"\n                variant={ButtonVariant.HOVERABLE}\n                size={ButtonSize.ICON_SM}\n                color={ButtonColor.TEXT}\n                className=\"cursor-pointer hover:scale-110\"\n                onClick={handleCancel}\n                disabled={disabled}\n              />\n            </>\n          )}\n          {additionalButtons}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,MAAa,sBAAmD,EAC9D,UACA,iBACA,UACA,UACA,mBACA,GAAG,YACC;CACJ,MAAM,CAAC,UAAU,eAAe,SAA8B,SAAS;CACvE,MAAM,CAAC,kBAAkB,uBAAuB,SAAiB,EAAE;CACnE,MAAM,WAAoB,aAAa;CAEvC,MAAM,qBAAqB;AACzB,cAAY,SAAS;AACrB,uBAAqB,SAAS,OAAO,EAAE;;CAGzC,MAAM,oBAAoB;AACxB,kBAAgB,SAAS;;CAG3B,MAAM,yBAA+D,MAAM;AACzE,cAAY,EAAE,cAAc,MAAM;;CAGpC,MAAM,iBAAiB,MAA6C;AAClE,MAAI,EAAE,QAAQ,WAAW,CAAC,YAAY,SAAS;AAC7C,KAAE,gBAAgB;AAClB,gBAAa;aACJ,EAAE,QAAQ,UAAU;AAC7B,KAAE,gBAAgB;AAClB,iBAAc;;;AAIlB,iBAAgB;AACd,cAAY,SAAS;AAErB,uBAAqB,SAAS,OAAO,EAAE;IACtC,CAAC,SAAS,CAAC;CAEd,MAAM,UAAU,WAAW,SAAS,IAAI;AAExC,QACE,qBAAC;EACC,WAAU;EAEV,MAAK;EACL,cAAW;aAEX,oBAAC;GACC,UAAU;GACV,WAAW;GAEX,cAAW;GACX,oBACE,YAAY,oBACR,iCACA;GAEN,gBAAc,CAAC;GACf,SAAS,aAAa;GACtB,WAAU;GACV,cAAc;GACJ;GACV,GAAI;KAZC,iBAaL,GACA,YAAY,sBACZ,qBAAC;GACC,IAAG;GACH,WAAU;GACV,MAAK;GACL,cAAW;cAEV,YACC,8CACE,oBAAC;IACC,MAAM;IACN,OAAO,eAAe,CAAC,UAAU,uBAAuB;IACxD,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,WAAU;IACV,UAAU,YAAY,CAAC;IACvB,SAAS;IACT,oBAAkB,CAAC,UAAU,qBAAqB;KAClD,EACF,oBAAC;IACC,MAAM;IACN,OAAM;IACN,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAU;IACV,SAAS;IACC;KACV,IACD,EAEJ;IACG;IAtDH,OAAO,SAAS,CAwDjB"}
+{"version":3,"file":"ContentEditorInput.mjs","names":[],"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 { Input, type InputProps, InputVariant } from '../Input';\n\n/** Props for the ContentEditorInput component */\nexport type ContentEditorInputProps = {\n  /** The current content to display and edit */\n  children: InputProps['value'];\n  /** Callback function called when content is saved/validated */\n  onContentChange: (content: InputProps['value']) => void;\n  /** Whether the editor is disabled */\n  disabled?: boolean;\n  /** Optional validation function to check content validity */\n  validate?: (content: InputProps['value']) => boolean;\n  /** Additional buttons to display alongside edit actions */\n  additionalButtons?: ReactNode;\n} & Omit<InputProps, 'children'>;\n\n/**\n * ContentEditorInput Component\n *\n * An inline editing component for single-line text input with validation,\n * cancel/save functionality, and support for additional action buttons.\n *\n * ## Features\n * - **Inline Input Editing**: Edit single-line content with immediate feedback\n * - **Validation Support**: Optional content validation with visual feedback\n * - **Action Buttons**: Built-in save/cancel with support for additional buttons\n * - **Keyboard Shortcuts**: Enter to save, Escape to cancel\n * - **Accessibility**: Full ARIA support and keyboard navigation\n * - **State Management**: Handles editing states and validation\n *\n * ## Accessibility\n * - Proper ARIA labels and descriptions for all controls\n * - Keyboard navigation (Tab, Enter, Escape)\n * - Screen reader support for validation states\n * - Focus management and visual indicators\n *\n * @param children - Current input value\n * @param onContentChange - Callback when content is saved\n * @param disabled - Whether the editor is disabled\n * @param validate - Optional validation function\n * @param additionalButtons - Extra buttons to display\n * @param props - Additional Input component props\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\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n    setNewValue(e.currentTarget.value);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Enter' && !disabled && isValid) {\n      e.preventDefault();\n      handleValid();\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      handleCancel();\n    }\n  };\n\n  useEffect(() => {\n    setNewValue(children);\n    // Force input to reset when children changes externally\n    setResetIncrementor((prev) => prev + 1);\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      role=\"group\"\n      aria-label=\"Content editor input\"\n    >\n      <Input\n        onChange={handleOnContentChange}\n        onKeyDown={handleKeyDown}\n        key={resetIncrementor}\n        aria-label=\"Editable input value\"\n        aria-describedby={\n          isEdited || additionalButtons\n            ? 'content-editor-input-actions'\n            : undefined\n        }\n        aria-invalid={!isValid}\n        variant={InputVariant.INVISIBLE}\n        className=\"size-full\"\n        defaultValue={children}\n        disabled={disabled}\n        {...props}\n      />\n      {(isEdited || additionalButtons) && (\n        <div\n          id=\"content-editor-input-actions\"\n          className=\"flex w-full items-center justify-end gap-2\"\n          role=\"group\"\n          aria-label=\"Edit actions\"\n        >\n          {isEdited && (\n            <>\n              <Button\n                Icon={Check}\n                label={`Save changes${!isValid ? ' (invalid content)' : ''}`}\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                aria-describedby={!isValid ? 'validation-error' : undefined}\n              />\n              <Button\n                Icon={X}\n                label=\"Cancel changes\"\n                variant={ButtonVariant.HOVERABLE}\n                size={ButtonSize.ICON_SM}\n                color={ButtonColor.TEXT}\n                className=\"cursor-pointer hover:scale-110\"\n                onClick={handleCancel}\n                disabled={disabled}\n              />\n            </>\n          )}\n          {additionalButtons}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"wUAsDA,MAAa,GAAmD,CAC9D,WACA,kBACA,WACA,WACA,oBACA,GAAG,KACC,CACJ,GAAM,CAAC,EAAU,GAAe,EAA8B,EAAS,CACjE,CAAC,EAAkB,GAAuB,EAAiB,EAAE,CAC7D,EAAoB,IAAa,EAEjC,MAAqB,CACzB,EAAY,EAAS,CACrB,EAAqB,GAAS,EAAO,EAAE,EAGnC,MAAoB,CACxB,EAAgB,EAAS,EAGrB,EAA+D,GAAM,CACzE,EAAY,EAAE,cAAc,MAAM,EAG9B,EAAiB,GAA6C,CAC9D,EAAE,MAAQ,SAAW,CAAC,GAAY,GACpC,EAAE,gBAAgB,CAClB,GAAa,EACJ,EAAE,MAAQ,WACnB,EAAE,gBAAgB,CAClB,GAAc,GAIlB,MAAgB,CACd,EAAY,EAAS,CAErB,EAAqB,GAAS,EAAO,EAAE,EACtC,CAAC,EAAS,CAAC,CAEd,IAAM,EAAU,IAAW,EAAS,EAAI,GAExC,OACE,EAAC,MAAA,CACC,UAAU,6DAEV,KAAK,QACL,aAAW,iCAEX,EAAC,EAAA,CACC,SAAU,EACV,UAAW,EAEX,aAAW,uBACX,mBACE,GAAY,EACR,+BACA,IAAA,GAEN,eAAc,CAAC,EACf,QAAS,EAAa,UACtB,UAAU,YACV,aAAc,EACJ,WACV,GAAI,GAZC,EAaL,EACA,GAAY,IACZ,EAAC,MAAA,CACC,GAAG,+BACH,UAAU,6CACV,KAAK,QACL,aAAW,yBAEV,GACC,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,EAAA,CACC,KAAM,EACN,MAAO,eAAgB,EAAiC,GAAvB,uBACjC,QAAS,EAAc,UACvB,MAAO,EAAY,KACnB,KAAM,EAAW,QACjB,UAAU,iCACV,SAAU,GAAY,CAAC,EACvB,QAAS,EACT,mBAAmB,EAA+B,IAAA,GAArB,oBAC7B,CACF,EAAC,EAAA,CACC,KAAM,EACN,MAAM,iBACN,QAAS,EAAc,UACvB,KAAM,EAAW,QACjB,MAAO,EAAY,KACnB,UAAU,iCACV,QAAS,EACC,YACV,CAAA,CAAA,CACD,CAEJ,EAAA,EACG,CAAA,EAtDH,OAAO,EAAS,CAwDjB"}