@intlayer/design-system 6.1.6 → 7.0.0-canary.1

package/dist/components/Container/index.mjs

@@ -1,177 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
-import { cn } from "../../utils/cn.mjs";
-const containerVariants = cva("flex text-text flex-col backdrop-blur", {
-  variants: {
-    roundedSize: {
-      none: "rounded-none",
-      sm: "rounded-sm",
-      md: "rounded-md",
-      lg: "rounded-lg",
-      xl: "rounded-xl",
-      "2xl": "rounded-2xl",
-      "3xl": "rounded-3xl",
-      full: "rounded-full"
-    },
-    transparency: {
-      none: "bg-card",
-      sm: "bg-card/95",
-      md: "bg-card/70",
-      lg: "bg-card/40",
-      xl: "bg-card/20",
-      full: ""
-    },
-    padding: {
-      none: "p-0",
-      sm: "p-1",
-      md: "p-2",
-      lg: "p-3",
-      xl: "p-4"
-    },
-    separator: {
-      without: "",
-      x: "divide-x divide-dashed divide-text/20",
-      y: "divide-y divide-dashed divide-text/20",
-      both: "divide-x divide-y divide-dashed divide-text/20"
-    },
-    border: {
-      none: "",
-      with: "border-[1.5px]"
-    },
-    borderColor: {
-      primary: "border-primary",
-      secondary: "border-secondary",
-      neutral: "border-neutral",
-      text: "border-text ",
-      error: "border-error",
-      warning: "border-warning",
-      success: "border-success"
-    },
-    background: {
-      none: "bg-inherit",
-      hoverable: "!bg-opacity-5 backdrop-blur-0 hover:!bg-opacity-10 hover:backdrop-blur focus:!bg-opacity-10 focus:backdrop-blur aria-selected:!bg-opacity-15 aria-selected:backdrop-blur",
-      with: ""
-    },
-    gap: {
-      none: "gap-0",
-      sm: "gap-1",
-      md: "gap-3",
-      lg: "gap-5",
-      xl: "gap-8",
-      "2xl": "gap-10"
-    }
-  },
-  defaultVariants: {
-    roundedSize: "md",
-    border: "none",
-    borderColor: "text",
-    transparency: "md",
-    padding: "none",
-    separator: "without",
-    gap: "none"
-  }
-});
-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,
-  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
-  }
-);
-export {
-  Container,
-  ContainerBackground,
-  ContainerBorderColor,
-  ContainerGap,
-  ContainerPadding,
-  ContainerRoundedSize,
-  ContainerSeparator,
-  ContainerTransparency,
-  containerVariants
-};
-//# sourceMappingURL=index.mjs.map

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

@@ -1 +0,0 @@
-{"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\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 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\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  TWO_XL = '2xl',\n  THREE_XL = '3xl',\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  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  TWO_XL = '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        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

@@ -1,111 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-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,
-  onContentChange,
-  isEditing,
-  ...props
-}) => {
-  const [newValue, setNewValue] = ReactExports.useState(children);
-  const [resetIncrementor, setResetIncrementor] = ReactExports.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__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: "flex flex-row items-center justify-between gap-2",
-      role: "group",
-      "aria-label": "Content editor",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          components_TextArea_AutoSizeTextArea.AutoSizedTextArea,
-          {
-            className: utils_cn.cn(
-              "break-word outline-hidden m-3 inline w-full bg-transparent",
-              isEditing ? "cursor-text" : "cursor-pointer"
-            ),
-            onChange: handleOnContentChange,
-            onKeyDown: handleKeyDown,
-            variant: components_Input_Input.InputVariant.INVISIBLE,
-            defaultValue: children,
-            "aria-label": "Editable content",
-            "aria-describedby": isEdited ? "content-editor-actions" : void 0,
-            ...props
-          },
-          resetIncrementor
-        ),
-        isEdited && /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            id: "content-editor-actions",
-            className: "flex flex-row items-center justify-between gap-2",
-            role: "group",
-            "aria-label": "Edit actions",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                lucideReact.Check,
-                {
-                  className: "cursor-pointer hover:scale-110 text-green-600",
-                  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__ */ jsxRuntime.jsx(
-                lucideReact.X,
-                {
-                  className: "cursor-pointer hover:scale-110 text-red-600",
-                  size: 16,
-                  onClick: handleCancel,
-                  role: "button",
-                  tabIndex: 0,
-                  "aria-label": "Cancel changes (Escape)",
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
-                      handleCancel();
-                    }
-                  }
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-exports.ContentEditor = ContentEditor;
-//# sourceMappingURL=ContentEditor.cjs.map

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

@@ -1 +0,0 @@
-{"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\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 outline-hidden m-3 inline w-full bg-transparent',\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 hover:scale-110 text-green-600\"\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 hover:scale-110 text-red-600\"\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"],"names":["useState","jsxs","jsx","AutoSizedTextArea","cn","InputVariant","Check","X"],"mappings":";;;;;;;;;;AA8CO,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;AAEA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAAiE,CAAC,MACtE,YAAY,EAAE,OAAO,SAAS,EAAE;AAElC,QAAM,gBAAgB,CAAC,MAAgD;AACrE,QAAI,EAAE,QAAQ,YAAY,EAAE,WAAW,EAAE,UAAU;AACjD,QAAE,eAAA;AACF,kBAAA;AAAA,IACF,WAAW,EAAE,QAAQ,UAAU;AAC7B,QAAE,eAAA;AACF,mBAAA;AAAA,IACF;AAAA,EACF;AAEA,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAW;AAAA,MAEX,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAACC,qCAAAA;AAAAA,UAAA;AAAA,YACC,WAAWC,SAAAA;AAAAA,cACT;AAAA,cACA,YAAY,gBAAgB;AAAA,YAAA;AAAA,YAE9B,UAAU;AAAA,YACV,WAAW;AAAA,YAEX,SAASC,uBAAAA,aAAa;AAAA,YACtB,cAAc;AAAA,YACd,cAAW;AAAA,YACX,oBAAkB,WAAW,2BAA2B;AAAA,YACvD,GAAG;AAAA,UAAA;AAAA,UALC;AAAA,QAAA;AAAA,QAON,YACCJ,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,WAAU;AAAA,YACV,MAAK;AAAA,YACL,cAAW;AAAA,YAEX,UAAA;AAAA,cAAAC,2BAAAA;AAAAA,gBAACI,YAAAA;AAAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,MAAM;AAAA,kBACN,SAAS;AAAA,kBACT,MAAK;AAAA,kBACL,UAAU;AAAA,kBACV,cAAW;AAAA,kBACX,WAAW,CAAC,MAAM;AAChB,wBAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,wBAAE,eAAA;AACF,kCAAA;AAAA,oBACF;AAAA,kBACF;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEFJ,2BAAAA;AAAAA,gBAACK,YAAAA;AAAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,MAAM;AAAA,kBACN,SAAS;AAAA,kBACT,MAAK;AAAA,kBACL,UAAU;AAAA,kBACV,cAAW;AAAA,kBACX,WAAW,CAAC,MAAM;AAChB,wBAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,wBAAE,eAAA;AACF,mCAAA;AAAA,oBACF;AAAA,kBACF;AAAA,gBAAA;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;;"}

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

@@ -1,38 +0,0 @@
-import { FC } from 'react';
-import { AutoSizedTextAreaProps } from '../TextArea/AutoSizeTextArea';
-/** Props for the ContentEditor component */
-export type ContentEditorProps = {
-    /** The current content to display and edit */
-    children: string;
-    /** Callback function called when content is saved/validated */
-    onContentChange: (content: string) => void;
-    /** Whether the editor is currently in editing mode */
-    isEditing?: boolean;
-} & AutoSizedTextAreaProps;
-/**
- * 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
- */
-export declare const ContentEditor: FC<ContentEditorProps>;
-//# sourceMappingURL=ContentEditor.d.ts.map

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

@@ -1 +0,0 @@
-{"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,4CAA4C;AAC5C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,8CAA8C;IAC9C,QAAQ,EAAE,MAAM,CAAC;IACjB,+DAA+D;IAC/D,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,sBAAsB,CAAC;AAE3B;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA2FhD,CAAC"}

package/dist/components/ContentEditor/ContentEditor.mjs

@@ -1,111 +0,0 @@
-"use client";
-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,
-  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 outline-hidden m-3 inline w-full bg-transparent",
-              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 hover:scale-110 text-green-600",
-                  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 hover:scale-110 text-red-600",
-                  size: 16,
-                  onClick: handleCancel,
-                  role: "button",
-                  tabIndex: 0,
-                  "aria-label": "Cancel changes (Escape)",
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
-                      handleCancel();
-                    }
-                  }
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  ContentEditor
-};
-//# sourceMappingURL=ContentEditor.mjs.map

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

@@ -1 +0,0 @@
-{"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\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 outline-hidden m-3 inline w-full bg-transparent',\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 hover:scale-110 text-green-600\"\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 hover:scale-110 text-red-600\"\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"],"names":[],"mappings":";;;;;;;;AA8CO,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;AAEA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAAiE,CAAC,MACtE,YAAY,EAAE,OAAO,SAAS,EAAE;AAElC,QAAM,gBAAgB,CAAC,MAAgD;AACrE,QAAI,EAAE,QAAQ,YAAY,EAAE,WAAW,EAAE,UAAU;AACjD,QAAE,eAAA;AACF,kBAAA;AAAA,IACF,WAAW,EAAE,QAAQ,UAAU;AAC7B,QAAE,eAAA;AACF,mBAAA;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAW;AAAA,MAEX,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,YAAY,gBAAgB;AAAA,YAAA;AAAA,YAE9B,UAAU;AAAA,YACV,WAAW;AAAA,YAEX,SAAS,aAAa;AAAA,YACtB,cAAc;AAAA,YACd,cAAW;AAAA,YACX,oBAAkB,WAAW,2BAA2B;AAAA,YACvD,GAAG;AAAA,UAAA;AAAA,UALC;AAAA,QAAA;AAAA,QAON,YACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,WAAU;AAAA,YACV,MAAK;AAAA,YACL,cAAW;AAAA,YAEX,UAAA;AAAA,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,MAAM;AAAA,kBACN,SAAS;AAAA,kBACT,MAAK;AAAA,kBACL,UAAU;AAAA,kBACV,cAAW;AAAA,kBACX,WAAW,CAAC,MAAM;AAChB,wBAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,wBAAE,eAAA;AACF,kCAAA;AAAA,oBACF;AAAA,kBACF;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEF;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,MAAM;AAAA,kBACN,SAAS;AAAA,kBACT,MAAK;AAAA,kBACL,UAAU;AAAA,kBACV,cAAW;AAAA,kBACX,WAAW,CAAC,MAAM;AAChB,wBAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,wBAAE,eAAA;AACF,mCAAA;AAAA,oBACF;AAAA,kBACF;AAAA,gBAAA;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/ContentEditor/ContentEditorInput.cjs

@@ -1,115 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const lucideReact = require("lucide-react");
-const ReactExports = require("react");
-const components_Button_Button = require("../Button/Button.cjs");
-const components_Input_Input = require("../Input/Input.cjs");
-require("../Input/Checkbox.cjs");
-const ContentEditorInput = ({
-  children,
-  onContentChange,
-  disabled,
-  validate,
-  additionalButtons,
-  ...props
-}) => {
-  const [newValue, setNewValue] = ReactExports.useState(children);
-  const [resetIncrementor, setResetIncrementor] = ReactExports.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();
-    }
-  };
-  ReactExports.useEffect(() => {
-    setNewValue(children);
-    setResetIncrementor((prev) => prev + 1);
-  }, [children]);
-  const isValid = validate?.(newValue) ?? true;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: "flex size-full flex-col items-center justify-between gap-2",
-      role: "group",
-      "aria-label": "Content editor input",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          components_Input_Input.Input,
-          {
-            onChange: handleOnContentChange,
-            onKeyDown: handleKeyDown,
-            "aria-label": "Editable input value",
-            "aria-describedby": isEdited || additionalButtons ? "content-editor-input-actions" : void 0,
-            "aria-invalid": !isValid,
-            variant: components_Input_Input.InputVariant.INVISIBLE,
-            className: "size-full",
-            defaultValue: children,
-            disabled,
-            ...props
-          },
-          resetIncrementor
-        ),
-        (isEdited || additionalButtons) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  components_Button_Button.Button,
-                  {
-                    Icon: lucideReact.Check,
-                    label: `Save changes${!isValid ? " (invalid content)" : ""}`,
-                    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,
-                    "aria-describedby": !isValid ? "validation-error" : void 0
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  components_Button_Button.Button,
-                  {
-                    Icon: lucideReact.X,
-                    label: "Cancel changes",
-                    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,
-                    disabled
-                  }
-                )
-              ] }),
-              additionalButtons
-            ]
-          }
-        )
-      ]
-    },
-    String(children)
-  );
-};
-exports.ContentEditorInput = ContentEditorInput;
-//# sourceMappingURL=ContentEditorInput.cjs.map

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

@@ -1 +0,0 @@
-{"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\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"],"names":["useState","useEffect","jsxs","jsx","Input","InputVariant","Fragment","Button","Check","ButtonVariant","ButtonColor","ButtonSize","X"],"mappings":";;;;;;;;;AAsDO,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;AAEA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAA8D,CAAC,MAAM;AACzE,gBAAY,EAAE,cAAc,KAAK;AAAA,EACnC;AAEA,QAAM,gBAAgB,CAAC,MAA6C;AAClE,QAAI,EAAE,QAAQ,WAAW,CAAC,YAAY,SAAS;AAC7C,QAAE,eAAA;AACF,kBAAA;AAAA,IACF,WAAW,EAAE,QAAQ,UAAU;AAC7B,QAAE,eAAA;AACF,mBAAA;AAAA,IACF;AAAA,EACF;AAEAC,eAAAA,UAAU,MAAM;AACd,gBAAY,QAAQ;AAEpB,wBAAoB,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,UAAU,WAAW,QAAQ,KAAK;AAExC,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MAEV,MAAK;AAAA,MACL,cAAW;AAAA,MAEX,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAACC,uBAAAA;AAAAA,UAAA;AAAA,YACC,UAAU;AAAA,YACV,WAAW;AAAA,YAEX,cAAW;AAAA,YACX,oBACE,YAAY,oBACR,iCACA;AAAA,YAEN,gBAAc,CAAC;AAAA,YACf,SAASC,uBAAAA,aAAa;AAAA,YACtB,WAAU;AAAA,YACV,cAAc;AAAA,YACd;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,UAZC;AAAA,QAAA;AAAA,SAcL,YAAY,sBACZH,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,WAAU;AAAA,YACV,MAAK;AAAA,YACL,cAAW;AAAA,YAEV,UAAA;AAAA,cAAA,YACCA,2BAAAA,KAAAI,qBAAA,EACE,UAAA;AAAA,gBAAAH,2BAAAA;AAAAA,kBAACI,yBAAAA;AAAAA,kBAAA;AAAA,oBACC,MAAMC,YAAAA;AAAAA,oBACN,OAAO,eAAe,CAAC,UAAU,uBAAuB,EAAE;AAAA,oBAC1D,SAASC,yBAAAA,cAAc;AAAA,oBACvB,OAAOC,yBAAAA,YAAY;AAAA,oBACnB,MAAMC,yBAAAA,WAAW;AAAA,oBACjB,WAAU;AAAA,oBACV,UAAU,YAAY,CAAC;AAAA,oBACvB,SAAS;AAAA,oBACT,oBAAkB,CAAC,UAAU,qBAAqB;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEpDR,2BAAAA;AAAAA,kBAACI,yBAAAA;AAAAA,kBAAA;AAAA,oBACC,MAAMK,YAAAA;AAAAA,oBACN,OAAM;AAAA,oBACN,SAASH,yBAAAA,cAAc;AAAA,oBACvB,MAAME,yBAAAA,WAAW;AAAA,oBACjB,OAAOD,yBAAAA,YAAY;AAAA,oBACnB,WAAU;AAAA,oBACV,SAAS;AAAA,oBACT;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF,GACF;AAAA,cAED;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,IAtDG,OAAO,QAAQ;AAAA,EAAA;AA0D1B;;"}