@intlayer/design-system 6.1.5 → 6.1.6-canary.0

package/dist/components/EditableField/EditableFieldInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldInput.mjs","sources":["../../../src/components/EditableField/EditableFieldInput.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type Ref, useImperativeHandle, useMemo, useRef } from 'react';\nimport { Input, type InputProps } from '../Input';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\ntype EditableFieldInputProps = InputProps & {\n  onSave?: (value: string) => void;\n  onCancel?: () => void;\n};\n\nexport const EditableFieldInput: FC<EditableFieldInputProps> = ({\n  onSave,\n  onCancel,\n  ref,\n  ...props\n}) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleSave = () => {\n    // Your save logic here\n    onSave?.(inputRef.current?.value ?? '');\n  };\n\n  const handleCancel = () => {\n    if (inputRef.current) {\n      inputRef.current.value = inputRef.current.defaultValue ?? '';\n    }\n    onCancel?.();\n  };\n\n  // Expose the input ref to parent components\n  useImperativeHandle(ref as Ref<HTMLElement>, () => inputRef.current!);\n\n  const value = useMemo(\n    () =>\n      (props.value as string) ??\n      inputRef.current?.value ??\n      (props.defaultValue as string),\n\n    [props.value, props.defaultValue, inputRef.current?.value]\n  );\n\n  return (\n    <EditableFieldLayout\n      value={value}\n      onCancel={handleCancel}\n      onSave={handleSave}\n    >\n      <Input ref={inputRef} {...props} />\n    </EditableFieldLayout>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAWO,MAAM,qBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,WAAW,OAAyB,IAAI;AAE9C,QAAM,aAAa,MAAM;AAEvB,aAAS,SAAS,SAAS,SAAS,EAAE;AAAA,EACxC;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,QAAQ,SAAS,QAAQ,gBAAgB;AAAA,IAC5D;AACA,eAAA;AAAA,EACF;AAGA,sBAAoB,KAAyB,MAAM,SAAS,OAAQ;AAEpE,QAAM,QAAQ;AAAA,IACZ,MACG,MAAM,SACP,SAAS,SAAS,SACjB,MAAM;AAAA,IAET,CAAC,MAAM,OAAO,MAAM,cAAc,SAAS,SAAS,KAAK;AAAA,EAAA;AAG3D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,UAAA,oBAAC,OAAA,EAAM,KAAK,UAAW,GAAG,MAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAGvC;"}
+{"version":3,"file":"EditableFieldInput.mjs","sources":["../../../src/components/EditableField/EditableFieldInput.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type Ref, useImperativeHandle, useMemo, useRef } from 'react';\nimport { Input, type InputProps } from '../Input';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\n/**\n * Props for the EditableFieldInput component, extending standard Input props\n */\ntype EditableFieldInputProps = InputProps & {\n  /** Callback function called when the user saves the edited value */\n  onSave?: (value: string) => void;\n  /** Callback function called when the user cancels the edit operation */\n  onCancel?: () => void;\n};\n\n/**\n * EditableFieldInput Component\n *\n * An inline editable input field that displays as read-only text until clicked.\n * When activated, it shows an input field with save and cancel buttons.\n *\n * @example\n * ```tsx\n * <EditableFieldInput\n *   defaultValue=\"Edit me\"\n *   placeholder=\"Click to edit...\"\n *   onSave={(value) => console.log('Saved:', value)}\n *   onCancel={() => console.log('Cancelled')}\n * />\n * ```\n *\n * ## Features\n * - **Inline Editing**: Click to edit, displays as text when not editing\n * - **Save/Cancel Actions**: Built-in save and cancel buttons with callbacks\n * - **Keyboard Support**: Accessible keyboard navigation\n * - **Input Variants**: Supports all Input component variants and sizes\n * - **Auto-save on Click Away**: Saves automatically when clicking outside\n * - **Ref Forwarding**: Exposes the underlying input element reference\n *\n * ## Accessibility\n * - Uses semantic HTML with proper ARIA attributes\n * - Keyboard accessible with tab navigation\n * - Screen reader friendly with descriptive labels\n * - Focus management for edit mode transitions\n *\n * @param props - EditableFieldInputProps extending InputProps\n * @returns React functional component\n */\nexport const EditableFieldInput: FC<EditableFieldInputProps> = ({\n  onSave,\n  onCancel,\n  ref,\n  ...props\n}) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleSave = () => {\n    // Your save logic here\n    onSave?.(inputRef.current?.value ?? '');\n  };\n\n  const handleCancel = () => {\n    if (inputRef.current) {\n      inputRef.current.value = inputRef.current.defaultValue ?? '';\n    }\n    onCancel?.();\n  };\n\n  // Expose the input ref to parent components\n  useImperativeHandle(ref as Ref<HTMLElement>, () => inputRef.current!);\n\n  const value = useMemo(\n    () =>\n      (props.value as string) ??\n      inputRef.current?.value ??\n      (props.defaultValue as string),\n\n    [props.value, props.defaultValue, inputRef.current?.value]\n  );\n\n  return (\n    <EditableFieldLayout\n      value={value}\n      onCancel={handleCancel}\n      onSave={handleSave}\n    >\n      <Input ref={inputRef} {...props} />\n    </EditableFieldLayout>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAiDO,MAAM,qBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,WAAW,OAAyB,IAAI;AAE9C,QAAM,aAAa,MAAM;AAEvB,aAAS,SAAS,SAAS,SAAS,EAAE;AAAA,EACxC;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,QAAQ,SAAS,QAAQ,gBAAgB;AAAA,IAC5D;AACA,eAAA;AAAA,EACF;AAGA,sBAAoB,KAAyB,MAAM,SAAS,OAAQ;AAEpE,QAAM,QAAQ;AAAA,IACZ,MACG,MAAM,SACP,SAAS,SAAS,SACjB,MAAM;AAAA,IAET,CAAC,MAAM,OAAO,MAAM,cAAc,SAAS,SAAS,KAAK;AAAA,EAAA;AAG3D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,UAAA,oBAAC,OAAA,EAAM,KAAK,UAAW,GAAG,MAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAGvC;"}

package/dist/components/EditableField/EditableFieldLayout.cjs

@@ -78,7 +78,11 @@ const EditableFieldLayout = ({
                   Icon: lucideReact.Check,
                   onClick: handleSave,
                   disabled: isDisabled,
-                  className: "!text-current"
+                  className: "!text-current",
+                  role: "button",
+                  tabIndex: 0,
+                  "aria-label": "Save changes",
+                  "data-testid": "editable-field-save-button"
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -91,7 +95,11 @@ const EditableFieldLayout = ({
                   size: components_Button_Button.ButtonSize.ICON_SM,
                   Icon: lucideReact.X,
                   onClick: handleCancel,
-                  disabled: isDisabled
+                  disabled: isDisabled,
+                  role: "button",
+                  tabIndex: 0,
+                  "aria-label": "Cancel changes",
+                  "data-testid": "editable-field-cancel-button"
                 }
               )
             ]

package/dist/components/EditableField/EditableFieldLayout.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldLayout.cjs","sources":["../../../src/components/EditableField/EditableFieldLayout.tsx"],"sourcesContent":["'use client';\n\nimport { Check, Pencil, X } from 'lucide-react';\nimport {\n  type FC,\n  type HTMLAttributes,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\n\ntype EditableFieldLayoutProps = {\n  value?: string | null | undefined;\n  onCancel: () => void;\n  onSave: () => void;\n  children: ReactNode;\n  isDisabled?: boolean;\n} & HTMLAttributes<HTMLSpanElement>;\n\nexport const EditableFieldLayout: FC<EditableFieldLayoutProps> = ({\n  value = '',\n  onCancel,\n  onSave,\n  onClick,\n  children,\n  isDisabled,\n  ...props\n}) => {\n  const [isEditing, setIsEditing] = useState(false);\n  const editableFieldRef = useRef<HTMLSpanElement>(null);\n\n  const handleSave = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    setIsEditing(false);\n    onSave();\n  };\n\n  const handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    setIsEditing(false);\n    onCancel();\n  };\n\n  const result = !value || value === '' ? '-' : value;\n\n  const handleClickOutside = useCallback(\n    (e: MouseEvent) => {\n      // Check if there's any text selected\n      const selection = window.getSelection();\n      if (selection && selection.toString().trim() !== '') {\n        // If there is a selection, do not trigger the save and exit early.\n        return;\n      }\n\n      // Proceed if the click is truly outside the component.\n      if (\n        editableFieldRef.current &&\n        !editableFieldRef.current.contains(e.target as Node)\n      ) {\n        setIsEditing(false);\n        onSave();\n      }\n    },\n    [onSave]\n  );\n\n  useEffect(() => {\n    if (isEditing) {\n      document.addEventListener('click', handleClickOutside);\n    } else {\n      document.removeEventListener('click', handleClickOutside);\n    }\n\n    return () => document.removeEventListener('click', handleClickOutside);\n  }, [handleClickOutside, isEditing]);\n\n  return (\n    <span\n      className=\"group/editable-field flex gap-2\"\n      role=\"button\"\n      tabIndex={0}\n      onClick={(e) => {\n        setIsEditing(true);\n        onClick?.(e);\n      }}\n      ref={editableFieldRef}\n      {...props}\n    >\n      <div\n        className={cn('flex flex-1 gap-2', isEditing ? 'display' : 'hidden')}\n        key={String(isEditing)}\n      >\n        {children}\n        <Button\n          label=\"Save\"\n          variant={ButtonVariant.HOVERABLE}\n          size={ButtonSize.ICON_SM}\n          color={ButtonColor.TEXT}\n          Icon={Check}\n          onClick={handleSave}\n          disabled={isDisabled}\n          className=\"!text-current\"\n        />\n        <Button\n          label=\"Cancel\"\n          color={ButtonColor.TEXT}\n          variant={ButtonVariant.HOVERABLE}\n          className=\"!text-current\"\n          size={ButtonSize.ICON_SM}\n          Icon={X}\n          onClick={handleCancel}\n          disabled={isDisabled}\n        />\n      </div>\n\n      <div\n        className={cn('flex flex-1 gap-2', isEditing ? 'hidden' : 'display')}\n      >\n        <span className=\"ml-2 flex w-full whitespace-pre-wrap p-1 text-sm leading-6\">\n          {result}\n        </span>\n        <Button\n          label=\"Edit\"\n          Icon={Pencil}\n          color={ButtonColor.TEXT}\n          variant={ButtonVariant.HOVERABLE}\n          size={ButtonSize.ICON_SM}\n          className=\"invisible !text-current group-hover/editable-field:visible\"\n          disabled={isDisabled}\n          onClick={(e) => {\n            e.stopPropagation();\n            setIsEditing(true);\n          }}\n        />\n      </div>\n    </span>\n  );\n};\n"],"names":["useState","useRef","useCallback","useEffect","jsxs","cn","jsx","Button","ButtonVariant","ButtonSize","ButtonColor","Check","X","Pencil"],"mappings":"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"}
+{"version":3,"file":"EditableFieldLayout.cjs","sources":["../../../src/components/EditableField/EditableFieldLayout.tsx"],"sourcesContent":["'use client';\n\nimport { Check, Pencil, X } from 'lucide-react';\nimport {\n  type FC,\n  type HTMLAttributes,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\n\ntype EditableFieldLayoutProps = {\n  value?: string | null | undefined;\n  onCancel: () => void;\n  onSave: () => void;\n  children: ReactNode;\n  isDisabled?: boolean;\n} & HTMLAttributes<HTMLSpanElement>;\n\nexport const EditableFieldLayout: FC<EditableFieldLayoutProps> = ({\n  value = '',\n  onCancel,\n  onSave,\n  onClick,\n  children,\n  isDisabled,\n  ...props\n}) => {\n  const [isEditing, setIsEditing] = useState(false);\n  const editableFieldRef = useRef<HTMLSpanElement>(null);\n\n  const handleSave = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    setIsEditing(false);\n    onSave();\n  };\n\n  const handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    setIsEditing(false);\n    onCancel();\n  };\n\n  const result = !value || value === '' ? '-' : value;\n\n  const handleClickOutside = useCallback(\n    (e: MouseEvent) => {\n      // Check if there's any text selected\n      const selection = window.getSelection();\n      if (selection && selection.toString().trim() !== '') {\n        // If there is a selection, do not trigger the save and exit early.\n        return;\n      }\n\n      // Proceed if the click is truly outside the component.\n      if (\n        editableFieldRef.current &&\n        !editableFieldRef.current.contains(e.target as Node)\n      ) {\n        setIsEditing(false);\n        onSave();\n      }\n    },\n    [onSave]\n  );\n\n  useEffect(() => {\n    if (isEditing) {\n      document.addEventListener('click', handleClickOutside);\n    } else {\n      document.removeEventListener('click', handleClickOutside);\n    }\n\n    return () => document.removeEventListener('click', handleClickOutside);\n  }, [handleClickOutside, isEditing]);\n\n  return (\n    <span\n      className=\"group/editable-field flex gap-2\"\n      role=\"button\"\n      tabIndex={0}\n      onClick={(e) => {\n        setIsEditing(true);\n        onClick?.(e);\n      }}\n      ref={editableFieldRef}\n      {...props}\n    >\n      <div\n        className={cn('flex flex-1 gap-2', isEditing ? 'display' : 'hidden')}\n        key={String(isEditing)}\n      >\n        {children}\n        <Button\n          label=\"Save\"\n          variant={ButtonVariant.HOVERABLE}\n          size={ButtonSize.ICON_SM}\n          color={ButtonColor.TEXT}\n          Icon={Check}\n          onClick={handleSave}\n          disabled={isDisabled}\n          className=\"!text-current\"\n          role=\"button\"\n          tabIndex={0}\n          aria-label=\"Save changes\"\n          data-testid=\"editable-field-save-button\"\n        />\n        <Button\n          label=\"Cancel\"\n          color={ButtonColor.TEXT}\n          variant={ButtonVariant.HOVERABLE}\n          className=\"!text-current\"\n          size={ButtonSize.ICON_SM}\n          Icon={X}\n          onClick={handleCancel}\n          disabled={isDisabled}\n          role=\"button\"\n          tabIndex={0}\n          aria-label=\"Cancel changes\"\n          data-testid=\"editable-field-cancel-button\"\n        />\n      </div>\n\n      <div\n        className={cn('flex flex-1 gap-2', isEditing ? 'hidden' : 'display')}\n      >\n        <span className=\"ml-2 flex w-full whitespace-pre-wrap p-1 text-sm leading-6\">\n          {result}\n        </span>\n        <Button\n          label=\"Edit\"\n          Icon={Pencil}\n          color={ButtonColor.TEXT}\n          variant={ButtonVariant.HOVERABLE}\n          size={ButtonSize.ICON_SM}\n          className=\"invisible !text-current group-hover/editable-field:visible\"\n          disabled={isDisabled}\n          onClick={(e) => {\n            e.stopPropagation();\n            setIsEditing(true);\n          }}\n        />\n      </div>\n    </span>\n  );\n};\n"],"names":["useState","useRef","useCallback","useEffect","jsxs","cn","jsx","Button","ButtonVariant","ButtonSize","ButtonColor","Check","X","Pencil"],"mappings":"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"}

package/dist/components/EditableField/EditableFieldLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldLayout.d.ts","sourceRoot":"","sources":["../../../src/components/EditableField/EditableFieldLayout.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,EAAE,EACP,KAAK,cAAc,EACnB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAIf,KAAK,wBAAwB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAClC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAEpC,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAsH5D,CAAC"}
+{"version":3,"file":"EditableFieldLayout.d.ts","sourceRoot":"","sources":["../../../src/components/EditableField/EditableFieldLayout.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,EAAE,EACP,KAAK,cAAc,EACnB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAIf,KAAK,wBAAwB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAClC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAEpC,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CA8H5D,CAAC"}

package/dist/components/EditableField/EditableFieldLayout.mjs

@@ -76,7 +76,11 @@ const EditableFieldLayout = ({
                   Icon: Check,
                   onClick: handleSave,
                   disabled: isDisabled,
-                  className: "!text-current"
+                  className: "!text-current",
+                  role: "button",
+                  tabIndex: 0,
+                  "aria-label": "Save changes",
+                  "data-testid": "editable-field-save-button"
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -89,7 +93,11 @@ const EditableFieldLayout = ({
                   size: ButtonSize.ICON_SM,
                   Icon: X,
                   onClick: handleCancel,
-                  disabled: isDisabled
+                  disabled: isDisabled,
+                  role: "button",
+                  tabIndex: 0,
+                  "aria-label": "Cancel changes",
+                  "data-testid": "editable-field-cancel-button"
                 }
               )
             ]

package/dist/components/EditableField/EditableFieldLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldLayout.mjs","sources":["../../../src/components/EditableField/EditableFieldLayout.tsx"],"sourcesContent":["'use client';\n\nimport { Check, Pencil, X } from 'lucide-react';\nimport {\n  type FC,\n  type HTMLAttributes,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\n\ntype EditableFieldLayoutProps = {\n  value?: string | null | undefined;\n  onCancel: () => void;\n  onSave: () => void;\n  children: ReactNode;\n  isDisabled?: boolean;\n} & HTMLAttributes<HTMLSpanElement>;\n\nexport const EditableFieldLayout: FC<EditableFieldLayoutProps> = ({\n  value = '',\n  onCancel,\n  onSave,\n  onClick,\n  children,\n  isDisabled,\n  ...props\n}) => {\n  const [isEditing, setIsEditing] = useState(false);\n  const editableFieldRef = useRef<HTMLSpanElement>(null);\n\n  const handleSave = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    setIsEditing(false);\n    onSave();\n  };\n\n  const handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    setIsEditing(false);\n    onCancel();\n  };\n\n  const result = !value || value === '' ? '-' : value;\n\n  const handleClickOutside = useCallback(\n    (e: MouseEvent) => {\n      // Check if there's any text selected\n      const selection = window.getSelection();\n      if (selection && selection.toString().trim() !== '') {\n        // If there is a selection, do not trigger the save and exit early.\n        return;\n      }\n\n      // Proceed if the click is truly outside the component.\n      if (\n        editableFieldRef.current &&\n        !editableFieldRef.current.contains(e.target as Node)\n      ) {\n        setIsEditing(false);\n        onSave();\n      }\n    },\n    [onSave]\n  );\n\n  useEffect(() => {\n    if (isEditing) {\n      document.addEventListener('click', handleClickOutside);\n    } else {\n      document.removeEventListener('click', handleClickOutside);\n    }\n\n    return () => document.removeEventListener('click', handleClickOutside);\n  }, [handleClickOutside, isEditing]);\n\n  return (\n    <span\n      className=\"group/editable-field flex gap-2\"\n      role=\"button\"\n      tabIndex={0}\n      onClick={(e) => {\n        setIsEditing(true);\n        onClick?.(e);\n      }}\n      ref={editableFieldRef}\n      {...props}\n    >\n      <div\n        className={cn('flex flex-1 gap-2', isEditing ? 'display' : 'hidden')}\n        key={String(isEditing)}\n      >\n        {children}\n        <Button\n          label=\"Save\"\n          variant={ButtonVariant.HOVERABLE}\n          size={ButtonSize.ICON_SM}\n          color={ButtonColor.TEXT}\n          Icon={Check}\n          onClick={handleSave}\n          disabled={isDisabled}\n          className=\"!text-current\"\n        />\n        <Button\n          label=\"Cancel\"\n          color={ButtonColor.TEXT}\n          variant={ButtonVariant.HOVERABLE}\n          className=\"!text-current\"\n          size={ButtonSize.ICON_SM}\n          Icon={X}\n          onClick={handleCancel}\n          disabled={isDisabled}\n        />\n      </div>\n\n      <div\n        className={cn('flex flex-1 gap-2', isEditing ? 'hidden' : 'display')}\n      >\n        <span className=\"ml-2 flex w-full whitespace-pre-wrap p-1 text-sm leading-6\">\n          {result}\n        </span>\n        <Button\n          label=\"Edit\"\n          Icon={Pencil}\n          color={ButtonColor.TEXT}\n          variant={ButtonVariant.HOVERABLE}\n          size={ButtonSize.ICON_SM}\n          className=\"invisible !text-current group-hover/editable-field:visible\"\n          disabled={isDisabled}\n          onClick={(e) => {\n            e.stopPropagation();\n            setIsEditing(true);\n          }}\n        />\n      </div>\n    </span>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"EditableFieldLayout.mjs","sources":["../../../src/components/EditableField/EditableFieldLayout.tsx"],"sourcesContent":["'use client';\n\nimport { Check, Pencil, X } from 'lucide-react';\nimport {\n  type FC,\n  type HTMLAttributes,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\n\ntype EditableFieldLayoutProps = {\n  value?: string | null | undefined;\n  onCancel: () => void;\n  onSave: () => void;\n  children: ReactNode;\n  isDisabled?: boolean;\n} & HTMLAttributes<HTMLSpanElement>;\n\nexport const EditableFieldLayout: FC<EditableFieldLayoutProps> = ({\n  value = '',\n  onCancel,\n  onSave,\n  onClick,\n  children,\n  isDisabled,\n  ...props\n}) => {\n  const [isEditing, setIsEditing] = useState(false);\n  const editableFieldRef = useRef<HTMLSpanElement>(null);\n\n  const handleSave = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    setIsEditing(false);\n    onSave();\n  };\n\n  const handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    setIsEditing(false);\n    onCancel();\n  };\n\n  const result = !value || value === '' ? '-' : value;\n\n  const handleClickOutside = useCallback(\n    (e: MouseEvent) => {\n      // Check if there's any text selected\n      const selection = window.getSelection();\n      if (selection && selection.toString().trim() !== '') {\n        // If there is a selection, do not trigger the save and exit early.\n        return;\n      }\n\n      // Proceed if the click is truly outside the component.\n      if (\n        editableFieldRef.current &&\n        !editableFieldRef.current.contains(e.target as Node)\n      ) {\n        setIsEditing(false);\n        onSave();\n      }\n    },\n    [onSave]\n  );\n\n  useEffect(() => {\n    if (isEditing) {\n      document.addEventListener('click', handleClickOutside);\n    } else {\n      document.removeEventListener('click', handleClickOutside);\n    }\n\n    return () => document.removeEventListener('click', handleClickOutside);\n  }, [handleClickOutside, isEditing]);\n\n  return (\n    <span\n      className=\"group/editable-field flex gap-2\"\n      role=\"button\"\n      tabIndex={0}\n      onClick={(e) => {\n        setIsEditing(true);\n        onClick?.(e);\n      }}\n      ref={editableFieldRef}\n      {...props}\n    >\n      <div\n        className={cn('flex flex-1 gap-2', isEditing ? 'display' : 'hidden')}\n        key={String(isEditing)}\n      >\n        {children}\n        <Button\n          label=\"Save\"\n          variant={ButtonVariant.HOVERABLE}\n          size={ButtonSize.ICON_SM}\n          color={ButtonColor.TEXT}\n          Icon={Check}\n          onClick={handleSave}\n          disabled={isDisabled}\n          className=\"!text-current\"\n          role=\"button\"\n          tabIndex={0}\n          aria-label=\"Save changes\"\n          data-testid=\"editable-field-save-button\"\n        />\n        <Button\n          label=\"Cancel\"\n          color={ButtonColor.TEXT}\n          variant={ButtonVariant.HOVERABLE}\n          className=\"!text-current\"\n          size={ButtonSize.ICON_SM}\n          Icon={X}\n          onClick={handleCancel}\n          disabled={isDisabled}\n          role=\"button\"\n          tabIndex={0}\n          aria-label=\"Cancel changes\"\n          data-testid=\"editable-field-cancel-button\"\n        />\n      </div>\n\n      <div\n        className={cn('flex flex-1 gap-2', isEditing ? 'hidden' : 'display')}\n      >\n        <span className=\"ml-2 flex w-full whitespace-pre-wrap p-1 text-sm leading-6\">\n          {result}\n        </span>\n        <Button\n          label=\"Edit\"\n          Icon={Pencil}\n          color={ButtonColor.TEXT}\n          variant={ButtonVariant.HOVERABLE}\n          size={ButtonSize.ICON_SM}\n          className=\"invisible !text-current group-hover/editable-field:visible\"\n          disabled={isDisabled}\n          onClick={(e) => {\n            e.stopPropagation();\n            setIsEditing(true);\n          }}\n        />\n      </div>\n    </span>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/EditableField/EditableFieldTextArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldTextArea.cjs","sources":["../../../src/components/EditableField/EditableFieldTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, useImperativeHandle, type FC, type Ref } from 'react';\nimport { AutoSizedTextArea, type AutoSizedTextAreaProps } from '../TextArea';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\ntype EditableFieldTextAreaProps = AutoSizedTextAreaProps & {\n  onSave?: (value: string) => void;\n  onCancel?: () => void;\n};\n\nexport const EditableFieldTextArea: FC<EditableFieldTextAreaProps> = ({\n  onSave,\n  onCancel,\n  ref,\n  ...props\n}) => {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n  // Expose the text area ref to parent components\n  useImperativeHandle(ref as Ref<HTMLElement>, () => textAreaRef.current!);\n\n  const handleSave = () => {\n    // Your save logic here\n    onSave?.(textAreaRef.current?.value ?? '');\n  };\n\n  const handleCancel = () => {\n    if (textAreaRef.current) {\n      textAreaRef.current.value = textAreaRef.current.defaultValue ?? '';\n    }\n    onCancel?.();\n  };\n\n  const memoValue =\n    (props.value as string) ??\n    textAreaRef.current?.value ??\n    (props.defaultValue as string) ??\n    '';\n\n  return (\n    <EditableFieldLayout\n      value={memoValue}\n      onCancel={handleCancel}\n      onSave={handleSave}\n      onClick={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n      }}\n    >\n      <AutoSizedTextArea\n        className=\"leading-6\"\n        ref={textAreaRef}\n        onClick={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        {...props}\n      />\n    </EditableFieldLayout>\n  );\n};\n"],"names":["useRef","useImperativeHandle","jsx","EditableFieldLayout","AutoSizedTextArea"],"mappings":";;;;;;;;;;;;;;;;;AAWO,MAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,cAAcA,aAAAA,OAA4B,IAAI;AAGpDC,eAAAA,oBAAoB,KAAyB,MAAM,YAAY,OAAQ;AAEvE,QAAM,aAAa,MAAM;AAEvB,aAAS,YAAY,SAAS,SAAS,EAAE;AAAA,EAC3C;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,YAAY,SAAS;AACvB,kBAAY,QAAQ,QAAQ,YAAY,QAAQ,gBAAgB;AAAA,IAClE;AACA,eAAA;AAAA,EACF;AAEA,QAAM,YACH,MAAM,SACP,YAAY,SAAS,SACpB,MAAM,gBACP;AAEF,SACEC,2BAAAA;AAAAA,IAACC,6CAAAA;AAAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS,CAAC,MAAM;AACd,UAAE,eAAA;AACF,UAAE,gBAAA;AAAA,MACJ;AAAA,MAEA,UAAAD,2BAAAA;AAAAA,QAACE,qCAAAA;AAAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,KAAK;AAAA,UACL,SAAS,CAAC,MAAM;AACd,cAAE,eAAA;AACF,cAAE,gBAAA;AAAA,UACJ;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN;;"}
+{"version":3,"file":"EditableFieldTextArea.cjs","sources":["../../../src/components/EditableField/EditableFieldTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { useImperativeHandle, useRef, type FC, type Ref } from 'react';\nimport { AutoSizedTextArea, type AutoSizedTextAreaProps } from '../TextArea';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\n/**\n * Props for the EditableFieldTextArea component, extending AutoSizedTextAreaProps\n */\ntype EditableFieldTextAreaProps = AutoSizedTextAreaProps & {\n  /** Callback function called when the user saves the edited value */\n  onSave?: (value: string) => void;\n  /** Callback function called when the user cancels the edit operation */\n  onCancel?: () => void;\n};\n\n/**\n * EditableFieldTextArea Component\n *\n * An inline editable textarea field that displays as read-only text until clicked.\n * When activated, it shows an auto-sized textarea with save and cancel buttons.\n * Perfect for multiline text editing with automatic height adjustment.\n *\n * @example\n * ```tsx\n * <EditableFieldTextArea\n *   defaultValue=\"Multiline text content\"\n *   placeholder=\"Click to edit...\"\n *   maxRows={10}\n *   onSave={(value) => console.log('Saved:', value)}\n *   onCancel={() => console.log('Cancelled')}\n * />\n * ```\n *\n * ## Features\n * - **Inline Editing**: Click to edit, displays as formatted text when not editing\n * - **Auto-Sizing**: Automatically adjusts height to fit content\n * - **Save/Cancel Actions**: Built-in save and cancel buttons with callbacks\n * - **Multiline Support**: Preserves line breaks and formatting\n * - **Max Rows Control**: Configurable maximum height with scroll\n * - **Auto-save on Click Away**: Saves automatically when clicking outside\n * - **Ref Forwarding**: Exposes the underlying textarea element reference\n *\n * ## Accessibility\n * - Uses semantic HTML with proper ARIA attributes\n * - Keyboard accessible with tab navigation\n * - Screen reader friendly with descriptive labels\n * - Focus management for edit mode transitions\n * - Preserves whitespace and formatting for screen readers\n *\n * @param props - EditableFieldTextAreaProps extending AutoSizedTextAreaProps\n * @returns React functional component\n */\nexport const EditableFieldTextArea: FC<EditableFieldTextAreaProps> = ({\n  onSave,\n  onCancel,\n  ref,\n  ...props\n}) => {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n  // Expose the text area ref to parent components\n  useImperativeHandle(ref as Ref<HTMLElement>, () => textAreaRef.current!);\n\n  const handleSave = () => {\n    // Your save logic here\n    onSave?.(textAreaRef.current?.value ?? '');\n  };\n\n  const handleCancel = () => {\n    if (textAreaRef.current) {\n      textAreaRef.current.value = textAreaRef.current.defaultValue ?? '';\n    }\n    onCancel?.();\n  };\n\n  const memoValue =\n    (props.value as string) ??\n    textAreaRef.current?.value ??\n    (props.defaultValue as string) ??\n    '';\n\n  return (\n    <EditableFieldLayout\n      value={memoValue}\n      onCancel={handleCancel}\n      onSave={handleSave}\n      onClick={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n      }}\n    >\n      <AutoSizedTextArea\n        className=\"leading-6\"\n        ref={textAreaRef}\n        onClick={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        {...props}\n      />\n    </EditableFieldLayout>\n  );\n};\n"],"names":["useRef","useImperativeHandle","jsx","EditableFieldLayout","AutoSizedTextArea"],"mappings":";;;;;;;;;;;;;;;;;AAqDO,MAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,cAAcA,aAAAA,OAA4B,IAAI;AAGpDC,eAAAA,oBAAoB,KAAyB,MAAM,YAAY,OAAQ;AAEvE,QAAM,aAAa,MAAM;AAEvB,aAAS,YAAY,SAAS,SAAS,EAAE;AAAA,EAC3C;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,YAAY,SAAS;AACvB,kBAAY,QAAQ,QAAQ,YAAY,QAAQ,gBAAgB;AAAA,IAClE;AACA,eAAA;AAAA,EACF;AAEA,QAAM,YACH,MAAM,SACP,YAAY,SAAS,SACpB,MAAM,gBACP;AAEF,SACEC,2BAAAA;AAAAA,IAACC,6CAAAA;AAAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS,CAAC,MAAM;AACd,UAAE,eAAA;AACF,UAAE,gBAAA;AAAA,MACJ;AAAA,MAEA,UAAAD,2BAAAA;AAAAA,QAACE,qCAAAA;AAAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,KAAK;AAAA,UACL,SAAS,CAAC,MAAM;AACd,cAAE,eAAA;AACF,cAAE,gBAAA;AAAA,UACJ;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN;;"}

package/dist/components/EditableField/EditableFieldTextArea.d.ts

@@ -1,9 +1,51 @@
 import { FC } from 'react';
 import { AutoSizedTextAreaProps } from '../TextArea';
+/**
+ * Props for the EditableFieldTextArea component, extending AutoSizedTextAreaProps
+ */
 type EditableFieldTextAreaProps = AutoSizedTextAreaProps & {
+    /** Callback function called when the user saves the edited value */
     onSave?: (value: string) => void;
+    /** Callback function called when the user cancels the edit operation */
     onCancel?: () => void;
 };
+/**
+ * EditableFieldTextArea Component
+ *
+ * An inline editable textarea field that displays as read-only text until clicked.
+ * When activated, it shows an auto-sized textarea with save and cancel buttons.
+ * Perfect for multiline text editing with automatic height adjustment.
+ *
+ * @example
+ * ```tsx
+ * <EditableFieldTextArea
+ *   defaultValue="Multiline text content"
+ *   placeholder="Click to edit..."
+ *   maxRows={10}
+ *   onSave={(value) => console.log('Saved:', value)}
+ *   onCancel={() => console.log('Cancelled')}
+ * />
+ * ```
+ *
+ * ## Features
+ * - **Inline Editing**: Click to edit, displays as formatted text when not editing
+ * - **Auto-Sizing**: Automatically adjusts height to fit content
+ * - **Save/Cancel Actions**: Built-in save and cancel buttons with callbacks
+ * - **Multiline Support**: Preserves line breaks and formatting
+ * - **Max Rows Control**: Configurable maximum height with scroll
+ * - **Auto-save on Click Away**: Saves automatically when clicking outside
+ * - **Ref Forwarding**: Exposes the underlying textarea element reference
+ *
+ * ## Accessibility
+ * - Uses semantic HTML with proper ARIA attributes
+ * - Keyboard accessible with tab navigation
+ * - Screen reader friendly with descriptive labels
+ * - Focus management for edit mode transitions
+ * - Preserves whitespace and formatting for screen readers
+ *
+ * @param props - EditableFieldTextAreaProps extending AutoSizedTextAreaProps
+ * @returns React functional component
+ */
 export declare const EditableFieldTextArea: FC<EditableFieldTextAreaProps>;
 export {};
 //# sourceMappingURL=EditableFieldTextArea.d.ts.map

package/dist/components/EditableField/EditableFieldTextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldTextArea.d.ts","sourceRoot":"","sources":["../../../src/components/EditableField/EditableFieldTextArea.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,KAAK,EAAE,EAAY,MAAM,OAAO,CAAC;AACvE,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAG7E,KAAK,0BAA0B,GAAG,sBAAsB,GAAG;IACzD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAkDhE,CAAC"}
+{"version":3,"file":"EditableFieldTextArea.d.ts","sourceRoot":"","sources":["../../../src/components/EditableField/EditableFieldTextArea.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,KAAK,EAAE,EAAY,MAAM,OAAO,CAAC;AACvE,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAG7E;;GAEG;AACH,KAAK,0BAA0B,GAAG,sBAAsB,GAAG;IACzD,oEAAoE;IACpE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAkDhE,CAAC"}

package/dist/components/EditableField/EditableFieldTextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldTextArea.mjs","sources":["../../../src/components/EditableField/EditableFieldTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, useImperativeHandle, type FC, type Ref } from 'react';\nimport { AutoSizedTextArea, type AutoSizedTextAreaProps } from '../TextArea';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\ntype EditableFieldTextAreaProps = AutoSizedTextAreaProps & {\n  onSave?: (value: string) => void;\n  onCancel?: () => void;\n};\n\nexport const EditableFieldTextArea: FC<EditableFieldTextAreaProps> = ({\n  onSave,\n  onCancel,\n  ref,\n  ...props\n}) => {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n  // Expose the text area ref to parent components\n  useImperativeHandle(ref as Ref<HTMLElement>, () => textAreaRef.current!);\n\n  const handleSave = () => {\n    // Your save logic here\n    onSave?.(textAreaRef.current?.value ?? '');\n  };\n\n  const handleCancel = () => {\n    if (textAreaRef.current) {\n      textAreaRef.current.value = textAreaRef.current.defaultValue ?? '';\n    }\n    onCancel?.();\n  };\n\n  const memoValue =\n    (props.value as string) ??\n    textAreaRef.current?.value ??\n    (props.defaultValue as string) ??\n    '';\n\n  return (\n    <EditableFieldLayout\n      value={memoValue}\n      onCancel={handleCancel}\n      onSave={handleSave}\n      onClick={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n      }}\n    >\n      <AutoSizedTextArea\n        className=\"leading-6\"\n        ref={textAreaRef}\n        onClick={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        {...props}\n      />\n    </EditableFieldLayout>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAWO,MAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,cAAc,OAA4B,IAAI;AAGpD,sBAAoB,KAAyB,MAAM,YAAY,OAAQ;AAEvE,QAAM,aAAa,MAAM;AAEvB,aAAS,YAAY,SAAS,SAAS,EAAE;AAAA,EAC3C;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,YAAY,SAAS;AACvB,kBAAY,QAAQ,QAAQ,YAAY,QAAQ,gBAAgB;AAAA,IAClE;AACA,eAAA;AAAA,EACF;AAEA,QAAM,YACH,MAAM,SACP,YAAY,SAAS,SACpB,MAAM,gBACP;AAEF,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS,CAAC,MAAM;AACd,UAAE,eAAA;AACF,UAAE,gBAAA;AAAA,MACJ;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,KAAK;AAAA,UACL,SAAS,CAAC,MAAM;AACd,cAAE,eAAA;AACF,cAAE,gBAAA;AAAA,UACJ;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"EditableFieldTextArea.mjs","sources":["../../../src/components/EditableField/EditableFieldTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { useImperativeHandle, useRef, type FC, type Ref } from 'react';\nimport { AutoSizedTextArea, type AutoSizedTextAreaProps } from '../TextArea';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\n/**\n * Props for the EditableFieldTextArea component, extending AutoSizedTextAreaProps\n */\ntype EditableFieldTextAreaProps = AutoSizedTextAreaProps & {\n  /** Callback function called when the user saves the edited value */\n  onSave?: (value: string) => void;\n  /** Callback function called when the user cancels the edit operation */\n  onCancel?: () => void;\n};\n\n/**\n * EditableFieldTextArea Component\n *\n * An inline editable textarea field that displays as read-only text until clicked.\n * When activated, it shows an auto-sized textarea with save and cancel buttons.\n * Perfect for multiline text editing with automatic height adjustment.\n *\n * @example\n * ```tsx\n * <EditableFieldTextArea\n *   defaultValue=\"Multiline text content\"\n *   placeholder=\"Click to edit...\"\n *   maxRows={10}\n *   onSave={(value) => console.log('Saved:', value)}\n *   onCancel={() => console.log('Cancelled')}\n * />\n * ```\n *\n * ## Features\n * - **Inline Editing**: Click to edit, displays as formatted text when not editing\n * - **Auto-Sizing**: Automatically adjusts height to fit content\n * - **Save/Cancel Actions**: Built-in save and cancel buttons with callbacks\n * - **Multiline Support**: Preserves line breaks and formatting\n * - **Max Rows Control**: Configurable maximum height with scroll\n * - **Auto-save on Click Away**: Saves automatically when clicking outside\n * - **Ref Forwarding**: Exposes the underlying textarea element reference\n *\n * ## Accessibility\n * - Uses semantic HTML with proper ARIA attributes\n * - Keyboard accessible with tab navigation\n * - Screen reader friendly with descriptive labels\n * - Focus management for edit mode transitions\n * - Preserves whitespace and formatting for screen readers\n *\n * @param props - EditableFieldTextAreaProps extending AutoSizedTextAreaProps\n * @returns React functional component\n */\nexport const EditableFieldTextArea: FC<EditableFieldTextAreaProps> = ({\n  onSave,\n  onCancel,\n  ref,\n  ...props\n}) => {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n  // Expose the text area ref to parent components\n  useImperativeHandle(ref as Ref<HTMLElement>, () => textAreaRef.current!);\n\n  const handleSave = () => {\n    // Your save logic here\n    onSave?.(textAreaRef.current?.value ?? '');\n  };\n\n  const handleCancel = () => {\n    if (textAreaRef.current) {\n      textAreaRef.current.value = textAreaRef.current.defaultValue ?? '';\n    }\n    onCancel?.();\n  };\n\n  const memoValue =\n    (props.value as string) ??\n    textAreaRef.current?.value ??\n    (props.defaultValue as string) ??\n    '';\n\n  return (\n    <EditableFieldLayout\n      value={memoValue}\n      onCancel={handleCancel}\n      onSave={handleSave}\n      onClick={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n      }}\n    >\n      <AutoSizedTextArea\n        className=\"leading-6\"\n        ref={textAreaRef}\n        onClick={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        {...props}\n      />\n    </EditableFieldLayout>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAqDO,MAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,cAAc,OAA4B,IAAI;AAGpD,sBAAoB,KAAyB,MAAM,YAAY,OAAQ;AAEvE,QAAM,aAAa,MAAM;AAEvB,aAAS,YAAY,SAAS,SAAS,EAAE;AAAA,EAC3C;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,YAAY,SAAS;AACvB,kBAAY,QAAQ,QAAQ,YAAY,QAAQ,gBAAgB;AAAA,IAClE;AACA,eAAA;AAAA,EACF;AAEA,QAAM,YACH,MAAM,SACP,YAAY,SAAS,SACpB,MAAM,gBACP;AAEF,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS,CAAC,MAAM;AACd,UAAE,eAAA;AACF,UAAE,gBAAA;AAAA,MACJ;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,KAAK;AAAA,UACL,SAAS,CAAC,MAAM;AACd,cAAE,eAAA;AACF,cAAE,gBAAA;AAAA,UACJ;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN;"}

package/dist/components/ExpandCollapse/ExpandCollapse.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandCollapse.cjs","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"sourcesContent":["'use client';\n\nimport { FC, ReactNode, useEffect, useRef, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\nexport type ExpandCollapseProps = {\n  isRollable?: boolean;\n  minHeight?: number;\n  children: ReactNode;\n  className?: string;\n};\n\nconst DEFAULT_MIN_HEIGHT = 700;\n\nexport const ExpandCollapse: FC<ExpandCollapseProps> = ({\n  isRollable = true,\n  minHeight = DEFAULT_MIN_HEIGHT,\n  children,\n  className,\n}) => {\n  const [codeContainerHeight, setCodeContainerHeight] = useState(0);\n  const [isCollapsed, setIsCollapsed] = useState(true);\n  const codeContainerRef = useRef<HTMLDivElement>(null);\n  const { expandCollapseContent } = useIntlayer('expand-collapse');\n\n  const isTooBig = codeContainerHeight > minHeight;\n\n  useEffect(() => {\n    if (codeContainerRef.current) {\n      setCodeContainerHeight(codeContainerRef.current.clientHeight);\n    }\n  }, []);\n\n  if (!isRollable) {\n    return children;\n  }\n\n  if (!isTooBig) {\n    return (\n      <div className={cn('grid w-full', className)} ref={codeContainerRef}>\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <MaxHeightSmoother\n      isHidden={isCollapsed}\n      minHeight={minHeight}\n      className=\"w-full overflow-x-scroll overflow-y-hidden\"\n    >\n      <div className={cn('grid w-full', className)} ref={codeContainerRef}>\n        {children}\n      </div>\n      <button\n        className={cn(\n          'absolute bottom-0 right-0 flex justify-center cursor-pointer w-full px-3 py-0.5 hover:py-1 transition-all duration-300 text-md text-neutral-700 dark:text-neutral-400 items-center shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur rounded-t-2xl bg-gradient-to-t from-card/80 to-transparent',\n          !isCollapsed && 'w-auto'\n        )}\n        onClick={() => setIsCollapsed((prev) => !prev)}\n      >\n        {expandCollapseContent(isCollapsed)}\n      </button>\n    </MaxHeightSmoother>\n  );\n};\n"],"names":["useState","useRef","useIntlayer","useEffect","jsx","cn","jsxs","MaxHeightSmoother"],"mappings":";;;;;;;;AAcA,MAAM,qBAAqB;AAEpB,MAAM,iBAA0C,CAAC;AAAA,EACtD,aAAa;AAAA,EACb,YAAY;AAAA,EACZ;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,qBAAqB,sBAAsB,IAAIA,aAAAA,SAAS,CAAC;AAChE,QAAM,CAAC,aAAa,cAAc,IAAIA,aAAAA,SAAS,IAAI;AACnD,QAAM,mBAAmBC,aAAAA,OAAuB,IAAI;AACpD,QAAM,EAAE,sBAAA,IAA0BC,cAAAA,YAAY,iBAAiB;AAE/D,QAAM,WAAW,sBAAsB;AAEvCC,eAAAA,UAAU,MAAM;AACd,QAAI,iBAAiB,SAAS;AAC5B,6BAAuB,iBAAiB,QAAQ,YAAY;AAAA,IAC9D;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,UAAU;AACb,WACEC,+BAAC,SAAI,WAAWC,SAAAA,GAAG,eAAe,SAAS,GAAG,KAAK,kBAChD,SAAA,CACH;AAAA,EAEJ;AAEA,SACEC,2BAAAA;AAAAA,IAACC,mCAAAA;AAAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,WAAU;AAAA,MAEV,UAAA;AAAA,QAAAH,2BAAAA,IAAC,OAAA,EAAI,WAAWC,YAAG,eAAe,SAAS,GAAG,KAAK,kBAChD,UACH;AAAA,QACAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,SAAAA;AAAAA,cACT;AAAA,cACA,CAAC,eAAe;AAAA,YAAA;AAAA,YAElB,SAAS,MAAM,eAAe,CAAC,SAAS,CAAC,IAAI;AAAA,YAE5C,gCAAsB,WAAW;AAAA,UAAA;AAAA,QAAA;AAAA,MACpC;AAAA,IAAA;AAAA,EAAA;AAGN;;"}
+{"version":3,"file":"ExpandCollapse.cjs","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"sourcesContent":["'use client';\n\nimport { FC, ReactNode, useEffect, useRef, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\n/**\n * Props for the ExpandCollapse component\n */\nexport type ExpandCollapseProps = {\n  /** Whether the component should provide expand/collapse functionality. If false, renders children directly */\n  isRollable?: boolean;\n  /** Minimum height in pixels before showing the expand/collapse toggle */\n  minHeight?: number;\n  /** Content that may overflow and trigger the expand/collapse behavior */\n  children: ReactNode;\n  /** Additional CSS classes for styling customization */\n  className?: string;\n};\n\n/** Default minimum height threshold for triggering expand/collapse behavior */\nconst DEFAULT_MIN_HEIGHT = 700;\n\n/**\n * ExpandCollapse Component\n *\n * A smart content container that automatically provides expand/collapse functionality\n * when content exceeds a specified height threshold. Features smooth animations,\n * internationalized toggle text, and intelligent height detection.\n *\n * @example\n * ```tsx\n * <ExpandCollapse minHeight={300}>\n *   <div>Very long content that will be collapsed...</div>\n * </ExpandCollapse>\n * ```\n *\n * ## Key Features\n * - **Smart Detection**: Automatically detects when content exceeds height threshold\n * - **Smooth Animations**: Uses CSS transitions for smooth expand/collapse effects\n * - **Internationalization**: Toggle text supports multiple languages via Intlayer\n * - **Customizable Height**: Configurable minimum height threshold\n * - **Performance Optimized**: Only applies collapse behavior when necessary\n * - **Accessibility**: Proper ARIA attributes and keyboard support\n *\n * ## Behavior Logic\n * 1. **Measurement Phase**: Measures actual content height on mount\n * 2. **Comparison**: Compares content height against minHeight threshold\n * 3. **Conditional Rendering**:\n *    - If content ≤ minHeight: Renders normally without collapse functionality\n *    - If content > minHeight: Enables expand/collapse with toggle button\n * 4. **State Management**: Manages collapsed/expanded state with smooth transitions\n *\n * ## When to Use\n * - Long-form content (articles, documentation, code blocks)\n * - Lists or tables that may grow beyond comfortable viewing height\n * - User-generated content with unpredictable length\n * - FAQ sections or expandable content cards\n * - Code examples or JSON data display\n *\n * ## Accessibility Features\n * - **Keyboard Navigation**: Toggle button is focusable and keyboard accessible\n * - **Screen Reader Support**: Proper ARIA labels and state announcements\n * - **Visual Indicators**: Clear visual cues for collapsed/expanded states\n * - **Smooth Animations**: Respects user preferences for reduced motion\n *\n * ## Internationalization\n * - Supports multiple languages through Intlayer integration\n * - Toggle text automatically adapts to current locale\n * - Includes translations for \"Show all\" and \"Show less\" states\n *\n * @param props - ExpandCollapseProps\n * @returns React functional component\n */\nexport const ExpandCollapse: FC<ExpandCollapseProps> = ({\n  isRollable = true,\n  minHeight = DEFAULT_MIN_HEIGHT,\n  children,\n  className,\n}) => {\n  const [codeContainerHeight, setCodeContainerHeight] = useState(0);\n  const [isCollapsed, setIsCollapsed] = useState(true);\n  const codeContainerRef = useRef<HTMLDivElement>(null);\n  const { expandCollapseContent } = useIntlayer('expand-collapse');\n\n  const isTooBig = codeContainerHeight > minHeight;\n\n  useEffect(() => {\n    if (codeContainerRef.current) {\n      setCodeContainerHeight(codeContainerRef.current.clientHeight);\n    }\n  }, []);\n\n  if (!isRollable) {\n    return children;\n  }\n\n  if (!isTooBig) {\n    return (\n      <div className={cn('grid w-full', className)} ref={codeContainerRef}>\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <MaxHeightSmoother\n      isHidden={isCollapsed}\n      minHeight={minHeight}\n      className=\"w-full overflow-x-scroll overflow-y-hidden\"\n    >\n      <div className={cn('grid w-full', className)} ref={codeContainerRef}>\n        {children}\n      </div>\n      <button\n        className={cn(\n          'absolute bottom-0 right-0 flex justify-center cursor-pointer w-full px-3 py-0.5 hover:py-1 transition-all duration-300 text-md text-neutral-700 dark:text-neutral-400 items-center shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur rounded-t-2xl bg-gradient-to-t from-card/80 to-transparent',\n          !isCollapsed && 'w-auto'\n        )}\n        onClick={() => setIsCollapsed((prev) => !prev)}\n      >\n        {expandCollapseContent(isCollapsed)}\n      </button>\n    </MaxHeightSmoother>\n  );\n};\n"],"names":["useState","useRef","useIntlayer","useEffect","jsx","cn","jsxs","MaxHeightSmoother"],"mappings":";;;;;;;;AAsBA,MAAM,qBAAqB;AAqDpB,MAAM,iBAA0C,CAAC;AAAA,EACtD,aAAa;AAAA,EACb,YAAY;AAAA,EACZ;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,qBAAqB,sBAAsB,IAAIA,aAAAA,SAAS,CAAC;AAChE,QAAM,CAAC,aAAa,cAAc,IAAIA,aAAAA,SAAS,IAAI;AACnD,QAAM,mBAAmBC,aAAAA,OAAuB,IAAI;AACpD,QAAM,EAAE,sBAAA,IAA0BC,cAAAA,YAAY,iBAAiB;AAE/D,QAAM,WAAW,sBAAsB;AAEvCC,eAAAA,UAAU,MAAM;AACd,QAAI,iBAAiB,SAAS;AAC5B,6BAAuB,iBAAiB,QAAQ,YAAY;AAAA,IAC9D;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,UAAU;AACb,WACEC,+BAAC,SAAI,WAAWC,SAAAA,GAAG,eAAe,SAAS,GAAG,KAAK,kBAChD,SAAA,CACH;AAAA,EAEJ;AAEA,SACEC,2BAAAA;AAAAA,IAACC,mCAAAA;AAAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,WAAU;AAAA,MAEV,UAAA;AAAA,QAAAH,2BAAAA,IAAC,OAAA,EAAI,WAAWC,YAAG,eAAe,SAAS,GAAG,KAAK,kBAChD,UACH;AAAA,QACAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,SAAAA;AAAAA,cACT;AAAA,cACA,CAAC,eAAe;AAAA,YAAA;AAAA,YAElB,SAAS,MAAM,eAAe,CAAC,SAAS,CAAC,IAAI;AAAA,YAE5C,gCAAsB,WAAW;AAAA,UAAA;AAAA,QAAA;AAAA,MACpC;AAAA,IAAA;AAAA,EAAA;AAGN;;"}

package/dist/components/ExpandCollapse/ExpandCollapse.d.ts

@@ -1,9 +1,67 @@
 import { FC, ReactNode } from 'react';
+/**
+ * Props for the ExpandCollapse component
+ */
 export type ExpandCollapseProps = {
+    /** Whether the component should provide expand/collapse functionality. If false, renders children directly */
     isRollable?: boolean;
+    /** Minimum height in pixels before showing the expand/collapse toggle */
     minHeight?: number;
+    /** Content that may overflow and trigger the expand/collapse behavior */
     children: ReactNode;
+    /** Additional CSS classes for styling customization */
     className?: string;
 };
+/**
+ * ExpandCollapse Component
+ *
+ * A smart content container that automatically provides expand/collapse functionality
+ * when content exceeds a specified height threshold. Features smooth animations,
+ * internationalized toggle text, and intelligent height detection.
+ *
+ * @example
+ * ```tsx
+ * <ExpandCollapse minHeight={300}>
+ *   <div>Very long content that will be collapsed...</div>
+ * </ExpandCollapse>
+ * ```
+ *
+ * ## Key Features
+ * - **Smart Detection**: Automatically detects when content exceeds height threshold
+ * - **Smooth Animations**: Uses CSS transitions for smooth expand/collapse effects
+ * - **Internationalization**: Toggle text supports multiple languages via Intlayer
+ * - **Customizable Height**: Configurable minimum height threshold
+ * - **Performance Optimized**: Only applies collapse behavior when necessary
+ * - **Accessibility**: Proper ARIA attributes and keyboard support
+ *
+ * ## Behavior Logic
+ * 1. **Measurement Phase**: Measures actual content height on mount
+ * 2. **Comparison**: Compares content height against minHeight threshold
+ * 3. **Conditional Rendering**:
+ *    - If content ≤ minHeight: Renders normally without collapse functionality
+ *    - If content > minHeight: Enables expand/collapse with toggle button
+ * 4. **State Management**: Manages collapsed/expanded state with smooth transitions
+ *
+ * ## When to Use
+ * - Long-form content (articles, documentation, code blocks)
+ * - Lists or tables that may grow beyond comfortable viewing height
+ * - User-generated content with unpredictable length
+ * - FAQ sections or expandable content cards
+ * - Code examples or JSON data display
+ *
+ * ## Accessibility Features
+ * - **Keyboard Navigation**: Toggle button is focusable and keyboard accessible
+ * - **Screen Reader Support**: Proper ARIA labels and state announcements
+ * - **Visual Indicators**: Clear visual cues for collapsed/expanded states
+ * - **Smooth Animations**: Respects user preferences for reduced motion
+ *
+ * ## Internationalization
+ * - Supports multiple languages through Intlayer integration
+ * - Toggle text automatically adapts to current locale
+ * - Includes translations for "Show all" and "Show less" states
+ *
+ * @param props - ExpandCollapseProps
+ * @returns React functional component
+ */
 export declare const ExpandCollapse: FC<ExpandCollapseProps>;
 //# sourceMappingURL=ExpandCollapse.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExpandCollapse.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAKnE,MAAM,MAAM,mBAAmB,GAAG;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAIF,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAmDlD,CAAC"}
+{"version":3,"file":"ExpandCollapse.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAKnE;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,8GAA8G;IAC9G,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,QAAQ,EAAE,SAAS,CAAC;IACpB,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAKF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAmDlD,CAAC"}

package/dist/components/ExpandCollapse/ExpandCollapse.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandCollapse.mjs","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"sourcesContent":["'use client';\n\nimport { FC, ReactNode, useEffect, useRef, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\nexport type ExpandCollapseProps = {\n  isRollable?: boolean;\n  minHeight?: number;\n  children: ReactNode;\n  className?: string;\n};\n\nconst DEFAULT_MIN_HEIGHT = 700;\n\nexport const ExpandCollapse: FC<ExpandCollapseProps> = ({\n  isRollable = true,\n  minHeight = DEFAULT_MIN_HEIGHT,\n  children,\n  className,\n}) => {\n  const [codeContainerHeight, setCodeContainerHeight] = useState(0);\n  const [isCollapsed, setIsCollapsed] = useState(true);\n  const codeContainerRef = useRef<HTMLDivElement>(null);\n  const { expandCollapseContent } = useIntlayer('expand-collapse');\n\n  const isTooBig = codeContainerHeight > minHeight;\n\n  useEffect(() => {\n    if (codeContainerRef.current) {\n      setCodeContainerHeight(codeContainerRef.current.clientHeight);\n    }\n  }, []);\n\n  if (!isRollable) {\n    return children;\n  }\n\n  if (!isTooBig) {\n    return (\n      <div className={cn('grid w-full', className)} ref={codeContainerRef}>\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <MaxHeightSmoother\n      isHidden={isCollapsed}\n      minHeight={minHeight}\n      className=\"w-full overflow-x-scroll overflow-y-hidden\"\n    >\n      <div className={cn('grid w-full', className)} ref={codeContainerRef}>\n        {children}\n      </div>\n      <button\n        className={cn(\n          'absolute bottom-0 right-0 flex justify-center cursor-pointer w-full px-3 py-0.5 hover:py-1 transition-all duration-300 text-md text-neutral-700 dark:text-neutral-400 items-center shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur rounded-t-2xl bg-gradient-to-t from-card/80 to-transparent',\n          !isCollapsed && 'w-auto'\n        )}\n        onClick={() => setIsCollapsed((prev) => !prev)}\n      >\n        {expandCollapseContent(isCollapsed)}\n      </button>\n    </MaxHeightSmoother>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAcA,MAAM,qBAAqB;AAEpB,MAAM,iBAA0C,CAAC;AAAA,EACtD,aAAa;AAAA,EACb,YAAY;AAAA,EACZ;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAS,CAAC;AAChE,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,IAAI;AACnD,QAAM,mBAAmB,OAAuB,IAAI;AACpD,QAAM,EAAE,sBAAA,IAA0B,YAAY,iBAAiB;AAE/D,QAAM,WAAW,sBAAsB;AAEvC,YAAU,MAAM;AACd,QAAI,iBAAiB,SAAS;AAC5B,6BAAuB,iBAAiB,QAAQ,YAAY;AAAA,IAC9D;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,UAAU;AACb,WACE,oBAAC,SAAI,WAAW,GAAG,eAAe,SAAS,GAAG,KAAK,kBAChD,SAAA,CACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAI,WAAW,GAAG,eAAe,SAAS,GAAG,KAAK,kBAChD,UACH;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,CAAC,eAAe;AAAA,YAAA;AAAA,YAElB,SAAS,MAAM,eAAe,CAAC,SAAS,CAAC,IAAI;AAAA,YAE5C,gCAAsB,WAAW;AAAA,UAAA;AAAA,QAAA;AAAA,MACpC;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"ExpandCollapse.mjs","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"sourcesContent":["'use client';\n\nimport { FC, ReactNode, useEffect, useRef, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\n/**\n * Props for the ExpandCollapse component\n */\nexport type ExpandCollapseProps = {\n  /** Whether the component should provide expand/collapse functionality. If false, renders children directly */\n  isRollable?: boolean;\n  /** Minimum height in pixels before showing the expand/collapse toggle */\n  minHeight?: number;\n  /** Content that may overflow and trigger the expand/collapse behavior */\n  children: ReactNode;\n  /** Additional CSS classes for styling customization */\n  className?: string;\n};\n\n/** Default minimum height threshold for triggering expand/collapse behavior */\nconst DEFAULT_MIN_HEIGHT = 700;\n\n/**\n * ExpandCollapse Component\n *\n * A smart content container that automatically provides expand/collapse functionality\n * when content exceeds a specified height threshold. Features smooth animations,\n * internationalized toggle text, and intelligent height detection.\n *\n * @example\n * ```tsx\n * <ExpandCollapse minHeight={300}>\n *   <div>Very long content that will be collapsed...</div>\n * </ExpandCollapse>\n * ```\n *\n * ## Key Features\n * - **Smart Detection**: Automatically detects when content exceeds height threshold\n * - **Smooth Animations**: Uses CSS transitions for smooth expand/collapse effects\n * - **Internationalization**: Toggle text supports multiple languages via Intlayer\n * - **Customizable Height**: Configurable minimum height threshold\n * - **Performance Optimized**: Only applies collapse behavior when necessary\n * - **Accessibility**: Proper ARIA attributes and keyboard support\n *\n * ## Behavior Logic\n * 1. **Measurement Phase**: Measures actual content height on mount\n * 2. **Comparison**: Compares content height against minHeight threshold\n * 3. **Conditional Rendering**:\n *    - If content ≤ minHeight: Renders normally without collapse functionality\n *    - If content > minHeight: Enables expand/collapse with toggle button\n * 4. **State Management**: Manages collapsed/expanded state with smooth transitions\n *\n * ## When to Use\n * - Long-form content (articles, documentation, code blocks)\n * - Lists or tables that may grow beyond comfortable viewing height\n * - User-generated content with unpredictable length\n * - FAQ sections or expandable content cards\n * - Code examples or JSON data display\n *\n * ## Accessibility Features\n * - **Keyboard Navigation**: Toggle button is focusable and keyboard accessible\n * - **Screen Reader Support**: Proper ARIA labels and state announcements\n * - **Visual Indicators**: Clear visual cues for collapsed/expanded states\n * - **Smooth Animations**: Respects user preferences for reduced motion\n *\n * ## Internationalization\n * - Supports multiple languages through Intlayer integration\n * - Toggle text automatically adapts to current locale\n * - Includes translations for \"Show all\" and \"Show less\" states\n *\n * @param props - ExpandCollapseProps\n * @returns React functional component\n */\nexport const ExpandCollapse: FC<ExpandCollapseProps> = ({\n  isRollable = true,\n  minHeight = DEFAULT_MIN_HEIGHT,\n  children,\n  className,\n}) => {\n  const [codeContainerHeight, setCodeContainerHeight] = useState(0);\n  const [isCollapsed, setIsCollapsed] = useState(true);\n  const codeContainerRef = useRef<HTMLDivElement>(null);\n  const { expandCollapseContent } = useIntlayer('expand-collapse');\n\n  const isTooBig = codeContainerHeight > minHeight;\n\n  useEffect(() => {\n    if (codeContainerRef.current) {\n      setCodeContainerHeight(codeContainerRef.current.clientHeight);\n    }\n  }, []);\n\n  if (!isRollable) {\n    return children;\n  }\n\n  if (!isTooBig) {\n    return (\n      <div className={cn('grid w-full', className)} ref={codeContainerRef}>\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <MaxHeightSmoother\n      isHidden={isCollapsed}\n      minHeight={minHeight}\n      className=\"w-full overflow-x-scroll overflow-y-hidden\"\n    >\n      <div className={cn('grid w-full', className)} ref={codeContainerRef}>\n        {children}\n      </div>\n      <button\n        className={cn(\n          'absolute bottom-0 right-0 flex justify-center cursor-pointer w-full px-3 py-0.5 hover:py-1 transition-all duration-300 text-md text-neutral-700 dark:text-neutral-400 items-center shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur rounded-t-2xl bg-gradient-to-t from-card/80 to-transparent',\n          !isCollapsed && 'w-auto'\n        )}\n        onClick={() => setIsCollapsed((prev) => !prev)}\n      >\n        {expandCollapseContent(isCollapsed)}\n      </button>\n    </MaxHeightSmoother>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAsBA,MAAM,qBAAqB;AAqDpB,MAAM,iBAA0C,CAAC;AAAA,EACtD,aAAa;AAAA,EACb,YAAY;AAAA,EACZ;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAS,CAAC;AAChE,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,IAAI;AACnD,QAAM,mBAAmB,OAAuB,IAAI;AACpD,QAAM,EAAE,sBAAA,IAA0B,YAAY,iBAAiB;AAE/D,QAAM,WAAW,sBAAsB;AAEvC,YAAU,MAAM;AACd,QAAI,iBAAiB,SAAS;AAC5B,6BAAuB,iBAAiB,QAAQ,YAAY;AAAA,IAC9D;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,UAAU;AACb,WACE,oBAAC,SAAI,WAAW,GAAG,eAAe,SAAS,GAAG,KAAK,kBAChD,SAAA,CACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAI,WAAW,GAAG,eAAe,SAAS,GAAG,KAAK,kBAChD,UACH;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,CAAC,eAAe;AAAA,YAAA;AAAA,YAElB,SAAS,MAAM,eAAe,CAAC,SAAS,CAAC,IAAI;AAAA,YAE5C,gCAAsB,WAAW;AAAA,UAAA;AAAA,QAAA;AAAA,MACpC;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Footer/index.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport { LogoWithTextBelow } from '../Logo';\nimport { SocialNetworks } from '../SocialNetworks';\nexport type FooterLink = {\n  href: string;\n  text: ReactNode;\n  onClick?: () => void;\n  label: string;\n};\n\nexport type LinkGroup = { title: ReactNode; links: FooterLink[] };\n\ntype FooterProps = { links?: LinkGroup[] };\n\nexport const Footer: FC<FooterProps> = ({ links }) => (\n  <footer className=\"flex flex-auto flex-row flex-wrap items-center justify-around gap-10 p-6\">\n    <aside className=\"flex flex-col items-center justify-between gap-3 md:w-1/4\">\n      <LogoWithTextBelow className=\"size-full max-w-[120px]\" />\n      <span className=\"text-neutral text-center text-xs\">\n        © 2025 Intlayer, Inc.\n      </span>\n      <div className=\"flex flex-row gap-3\">\n        <SocialNetworks />\n      </div>\n    </aside>\n    <div className=\"m-auto flex w-full flex-row flex-wrap justify-around gap-x-3 gap-y-6 md:w-2/3\">\n      {(links ?? []).map(({ title, links }) => (\n        <div\n          className=\"flex flex-col gap-2\"\n          key={links.map((link) => link.href).join(',')}\n        >\n          <strong>{title}</strong>\n          <div className=\"flex flex-col gap-3 text-sm\">\n            {links.map((link) => (\n              <a key={link.href} href={link.href} aria-label={link.label}>\n                {link.text}\n              </a>\n            ))}\n          </div>\n        </div>\n      ))}\n    </div>\n  </footer>\n);\n"],"names":["jsxs","jsx","LogoWithTextBelow","SocialNetworks","links"],"mappings":";;;;;AAcO,MAAM,SAA0B,CAAC,EAAE,YACxCA,2BAAAA,KAAC,UAAA,EAAO,WAAU,4EAChB,UAAA;AAAA,EAAAA,2BAAAA,KAAC,SAAA,EAAM,WAAU,6DACf,UAAA;AAAA,IAAAC,2BAAAA,IAACC,kCAAAA,mBAAA,EAAkB,WAAU,0BAAA,CAA0B;AAAA,IACvDD,2BAAAA,IAAC,QAAA,EAAK,WAAU,oCAAmC,UAAA,yBAEnD;AAAA,mCACC,OAAA,EAAI,WAAU,uBACb,UAAAA,2BAAAA,IAACE,kDAAe,EAAA,CAClB;AAAA,EAAA,GACF;AAAA,EACAF,2BAAAA,IAAC,OAAA,EAAI,WAAU,iFACX,WAAA,SAAS,CAAA,GAAI,IAAI,CAAC,EAAE,OAAO,OAAAG,aAC3BJ,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MAGV,UAAA;AAAA,QAAAC,2BAAAA,IAAC,YAAQ,UAAA,MAAA,CAAM;AAAA,QACfA,2BAAAA,IAAC,SAAI,WAAU,+BACZ,UAAAG,OAAM,IAAI,CAAC,SACVH,2BAAAA,IAAC,KAAA,EAAkB,MAAM,KAAK,MAAM,cAAY,KAAK,OAClD,eAAK,KAAA,GADA,KAAK,IAEb,CACD,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,IATKG,OAAM,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE,KAAK,GAAG;AAAA,EAAA,CAW/C,EAAA,CACH;AAAA,EAAA,CACF;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Footer/index.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport { LogoWithTextBelow } from '../Logo';\nimport { SocialNetworks } from '../SocialNetworks';\n\n/**\n * Represents a single footer link with all necessary attributes\n */\nexport type FooterLink = {\n  /** URL or path for the link */\n  href: string;\n  /** Display text or JSX element for the link */\n  text: ReactNode;\n  /** Optional click handler for custom link behavior */\n  onClick?: () => void;\n  /** Accessible label for screen readers (required for accessibility) */\n  label: string;\n};\n\n/**\n * Represents a group of related links with a title\n */\nexport type LinkGroup = {\n  /** Title for the group of links */\n  title: ReactNode;\n  /** Array of footer links in this group */\n  links: FooterLink[];\n};\n\n/**\n * Props for the Footer component\n */\ntype FooterProps = {\n  /** Optional array of link groups to display in the footer */\n  links?: LinkGroup[];\n};\n\n/**\n * Footer Component\n *\n * A comprehensive footer component that displays the Intlayer logo, copyright information,\n * social networks, and organized groups of navigation links. Designed for responsive\n * layouts and optimal user experience across all devices.\n *\n * @component\n * @example\n * Basic usage without links:\n * ```tsx\n * <Footer />\n * ```\n *\n * @example\n * With organized link groups:\n * ```tsx\n * const footerLinks = [\n *   {\n *     title: 'Product',\n *     links: [\n *       { href: '/features', text: 'Features', label: 'Product features' },\n *       { href: '/pricing', text: 'Pricing', label: 'Pricing information' },\n *       { href: '/docs', text: 'Documentation', label: 'Product documentation' }\n *     ]\n *   },\n *   {\n *     title: 'Company',\n *     links: [\n *       { href: '/about', text: 'About Us', label: 'About the company' },\n *       { href: '/careers', text: 'Careers', label: 'Job opportunities' },\n *       { href: '/contact', text: 'Contact', label: 'Contact information' }\n *     ]\n *   }\n * ];\n *\n * <Footer links={footerLinks} />\n * ```\n *\n * @example\n * With custom click handlers:\n * ```tsx\n * const footerLinks = [\n *   {\n *     title: 'Actions',\n *     links: [\n *       {\n *         href: '#',\n *         text: 'Newsletter',\n *         label: 'Subscribe to newsletter',\n *         onClick: () => openNewsletterModal()\n *       }\n *     ]\n *   }\n * ];\n *\n * <Footer links={footerLinks} />\n * ```\n *\n * Features:\n * - Responsive design that adapts to different screen sizes\n * - Intlayer branding with logo and copyright notice\n * - Integrated social network links\n * - Flexible link organization with titled groups\n * - Accessibility-compliant with proper ARIA labels\n * - Support for custom click handlers alongside href navigation\n * - Clean, modern design with proper spacing and typography\n *\n * Layout Structure:\n * - Left side (or top on mobile): Logo, copyright, and social links\n * - Right side (or bottom on mobile): Organized link groups\n * - Responsive breakpoints for optimal mobile experience\n *\n * Accessibility:\n * - Semantic HTML structure using <footer> tag\n * - All links include required aria-label attributes\n * - Proper heading hierarchy and keyboard navigation\n * - Screen reader friendly content organization\n * - Focus management for interactive elements\n *\n * @param props - Component properties\n * @param props.links - Optional array of link groups to display\n *\n * @returns A rendered footer with branding, social links, and optional navigation links\n */\nexport const Footer: FC<FooterProps> = ({ links }) => (\n  <footer className=\"flex flex-auto flex-row flex-wrap items-center justify-around gap-10 p-6\">\n    <aside className=\"flex flex-col items-center justify-between gap-3 md:w-1/4\">\n      <LogoWithTextBelow className=\"size-full max-w-[120px]\" />\n      <span className=\"text-neutral text-center text-xs\">\n        © 2025 Intlayer, Inc.\n      </span>\n      <div className=\"flex flex-row gap-3\">\n        <SocialNetworks />\n      </div>\n    </aside>\n    <div className=\"m-auto flex w-full flex-row flex-wrap justify-around gap-x-3 gap-y-6 md:w-2/3\">\n      {(links ?? []).map(({ title, links }) => (\n        <div\n          className=\"flex flex-col gap-2\"\n          key={links.map((link) => link.href).join(',')}\n        >\n          <strong>{title}</strong>\n          <div className=\"flex flex-col gap-3 text-sm\">\n            {links.map((link) => (\n              <a key={link.href} href={link.href} aria-label={link.label}>\n                {link.text}\n              </a>\n            ))}\n          </div>\n        </div>\n      ))}\n    </div>\n  </footer>\n);\n"],"names":["jsxs","jsx","LogoWithTextBelow","SocialNetworks","links"],"mappings":";;;;;AAyHO,MAAM,SAA0B,CAAC,EAAE,YACxCA,2BAAAA,KAAC,UAAA,EAAO,WAAU,4EAChB,UAAA;AAAA,EAAAA,2BAAAA,KAAC,SAAA,EAAM,WAAU,6DACf,UAAA;AAAA,IAAAC,2BAAAA,IAACC,kCAAAA,mBAAA,EAAkB,WAAU,0BAAA,CAA0B;AAAA,IACvDD,2BAAAA,IAAC,QAAA,EAAK,WAAU,oCAAmC,UAAA,yBAEnD;AAAA,mCACC,OAAA,EAAI,WAAU,uBACb,UAAAA,2BAAAA,IAACE,kDAAe,EAAA,CAClB;AAAA,EAAA,GACF;AAAA,EACAF,2BAAAA,IAAC,OAAA,EAAI,WAAU,iFACX,WAAA,SAAS,CAAA,GAAI,IAAI,CAAC,EAAE,OAAO,OAAAG,aAC3BJ,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MAGV,UAAA;AAAA,QAAAC,2BAAAA,IAAC,YAAQ,UAAA,MAAA,CAAM;AAAA,QACfA,2BAAAA,IAAC,SAAI,WAAU,+BACZ,UAAAG,OAAM,IAAI,CAAC,SACVH,2BAAAA,IAAC,KAAA,EAAkB,MAAM,KAAK,MAAM,cAAY,KAAK,OAClD,eAAK,KAAA,GADA,KAAK,IAEb,CACD,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,IATKG,OAAM,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE,KAAK,GAAG;AAAA,EAAA,CAW/C,EAAA,CACH;AAAA,EAAA,CACF;;"}

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

@@ -1,17 +1,118 @@
 import { FC, ReactNode } from 'react';
+/**
+ * Represents a single footer link with all necessary attributes
+ */
 export type FooterLink = {
+    /** URL or path for the link */
     href: string;
+    /** Display text or JSX element for the link */
     text: ReactNode;
+    /** Optional click handler for custom link behavior */
     onClick?: () => void;
+    /** Accessible label for screen readers (required for accessibility) */
     label: string;
 };
+/**
+ * Represents a group of related links with a title
+ */
 export type LinkGroup = {
+    /** Title for the group of links */
     title: ReactNode;
+    /** Array of footer links in this group */
     links: FooterLink[];
 };
+/**
+ * Props for the Footer component
+ */
 type FooterProps = {
+    /** Optional array of link groups to display in the footer */
     links?: LinkGroup[];
 };
+/**
+ * Footer Component
+ *
+ * A comprehensive footer component that displays the Intlayer logo, copyright information,
+ * social networks, and organized groups of navigation links. Designed for responsive
+ * layouts and optimal user experience across all devices.
+ *
+ * @component
+ * @example
+ * Basic usage without links:
+ * ```tsx
+ * <Footer />
+ * ```
+ *
+ * @example
+ * With organized link groups:
+ * ```tsx
+ * const footerLinks = [
+ *   {
+ *     title: 'Product',
+ *     links: [
+ *       { href: '/features', text: 'Features', label: 'Product features' },
+ *       { href: '/pricing', text: 'Pricing', label: 'Pricing information' },
+ *       { href: '/docs', text: 'Documentation', label: 'Product documentation' }
+ *     ]
+ *   },
+ *   {
+ *     title: 'Company',
+ *     links: [
+ *       { href: '/about', text: 'About Us', label: 'About the company' },
+ *       { href: '/careers', text: 'Careers', label: 'Job opportunities' },
+ *       { href: '/contact', text: 'Contact', label: 'Contact information' }
+ *     ]
+ *   }
+ * ];
+ *
+ * <Footer links={footerLinks} />
+ * ```
+ *
+ * @example
+ * With custom click handlers:
+ * ```tsx
+ * const footerLinks = [
+ *   {
+ *     title: 'Actions',
+ *     links: [
+ *       {
+ *         href: '#',
+ *         text: 'Newsletter',
+ *         label: 'Subscribe to newsletter',
+ *         onClick: () => openNewsletterModal()
+ *       }
+ *     ]
+ *   }
+ * ];
+ *
+ * <Footer links={footerLinks} />
+ * ```
+ *
+ * Features:
+ * - Responsive design that adapts to different screen sizes
+ * - Intlayer branding with logo and copyright notice
+ * - Integrated social network links
+ * - Flexible link organization with titled groups
+ * - Accessibility-compliant with proper ARIA labels
+ * - Support for custom click handlers alongside href navigation
+ * - Clean, modern design with proper spacing and typography
+ *
+ * Layout Structure:
+ * - Left side (or top on mobile): Logo, copyright, and social links
+ * - Right side (or bottom on mobile): Organized link groups
+ * - Responsive breakpoints for optimal mobile experience
+ *
+ * Accessibility:
+ * - Semantic HTML structure using <footer> tag
+ * - All links include required aria-label attributes
+ * - Proper heading hierarchy and keyboard navigation
+ * - Screen reader friendly content organization
+ * - Focus management for interactive elements
+ *
+ * @param props - Component properties
+ * @param props.links - Optional array of link groups to display
+ *
+ * @returns A rendered footer with branding, social links, and optional navigation links
+ */
 export declare const Footer: FC<FooterProps>;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Footer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3C,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IAAE,KAAK,EAAE,SAAS,CAAC;IAAC,KAAK,EAAE,UAAU,EAAE,CAAA;CAAE,CAAC;AAElE,KAAK,WAAW,GAAG;IAAE,KAAK,CAAC,EAAE,SAAS,EAAE,CAAA;CAAE,CAAC;AAE3C,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA6BlC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Footer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI3C;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,+BAA+B;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,IAAI,EAAE,SAAS,CAAC;IAChB,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,mCAAmC;IACnC,KAAK,EAAE,SAAS,CAAC;IACjB,0CAA0C;IAC1C,KAAK,EAAE,UAAU,EAAE,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,KAAK,WAAW,GAAG;IACjB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoFG;AACH,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA6BlC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/Footer/index.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport { LogoWithTextBelow } from '../Logo';\nimport { SocialNetworks } from '../SocialNetworks';\nexport type FooterLink = {\n  href: string;\n  text: ReactNode;\n  onClick?: () => void;\n  label: string;\n};\n\nexport type LinkGroup = { title: ReactNode; links: FooterLink[] };\n\ntype FooterProps = { links?: LinkGroup[] };\n\nexport const Footer: FC<FooterProps> = ({ links }) => (\n  <footer className=\"flex flex-auto flex-row flex-wrap items-center justify-around gap-10 p-6\">\n    <aside className=\"flex flex-col items-center justify-between gap-3 md:w-1/4\">\n      <LogoWithTextBelow className=\"size-full max-w-[120px]\" />\n      <span className=\"text-neutral text-center text-xs\">\n        © 2025 Intlayer, Inc.\n      </span>\n      <div className=\"flex flex-row gap-3\">\n        <SocialNetworks />\n      </div>\n    </aside>\n    <div className=\"m-auto flex w-full flex-row flex-wrap justify-around gap-x-3 gap-y-6 md:w-2/3\">\n      {(links ?? []).map(({ title, links }) => (\n        <div\n          className=\"flex flex-col gap-2\"\n          key={links.map((link) => link.href).join(',')}\n        >\n          <strong>{title}</strong>\n          <div className=\"flex flex-col gap-3 text-sm\">\n            {links.map((link) => (\n              <a key={link.href} href={link.href} aria-label={link.label}>\n                {link.text}\n              </a>\n            ))}\n          </div>\n        </div>\n      ))}\n    </div>\n  </footer>\n);\n"],"names":["links"],"mappings":";;;AAcO,MAAM,SAA0B,CAAC,EAAE,YACxC,qBAAC,UAAA,EAAO,WAAU,4EAChB,UAAA;AAAA,EAAA,qBAAC,SAAA,EAAM,WAAU,6DACf,UAAA;AAAA,IAAA,oBAAC,mBAAA,EAAkB,WAAU,0BAAA,CAA0B;AAAA,IACvD,oBAAC,QAAA,EAAK,WAAU,oCAAmC,UAAA,yBAEnD;AAAA,wBACC,OAAA,EAAI,WAAU,uBACb,UAAA,oBAAC,kBAAe,EAAA,CAClB;AAAA,EAAA,GACF;AAAA,EACA,oBAAC,OAAA,EAAI,WAAU,iFACX,WAAA,SAAS,CAAA,GAAI,IAAI,CAAC,EAAE,OAAO,OAAAA,aAC3B;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MAGV,UAAA;AAAA,QAAA,oBAAC,YAAQ,UAAA,MAAA,CAAM;AAAA,QACf,oBAAC,SAAI,WAAU,+BACZ,UAAAA,OAAM,IAAI,CAAC,SACV,oBAAC,KAAA,EAAkB,MAAM,KAAK,MAAM,cAAY,KAAK,OAClD,eAAK,KAAA,GADA,KAAK,IAEb,CACD,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,IATKA,OAAM,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE,KAAK,GAAG;AAAA,EAAA,CAW/C,EAAA,CACH;AAAA,EAAA,CACF;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/Footer/index.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport { LogoWithTextBelow } from '../Logo';\nimport { SocialNetworks } from '../SocialNetworks';\n\n/**\n * Represents a single footer link with all necessary attributes\n */\nexport type FooterLink = {\n  /** URL or path for the link */\n  href: string;\n  /** Display text or JSX element for the link */\n  text: ReactNode;\n  /** Optional click handler for custom link behavior */\n  onClick?: () => void;\n  /** Accessible label for screen readers (required for accessibility) */\n  label: string;\n};\n\n/**\n * Represents a group of related links with a title\n */\nexport type LinkGroup = {\n  /** Title for the group of links */\n  title: ReactNode;\n  /** Array of footer links in this group */\n  links: FooterLink[];\n};\n\n/**\n * Props for the Footer component\n */\ntype FooterProps = {\n  /** Optional array of link groups to display in the footer */\n  links?: LinkGroup[];\n};\n\n/**\n * Footer Component\n *\n * A comprehensive footer component that displays the Intlayer logo, copyright information,\n * social networks, and organized groups of navigation links. Designed for responsive\n * layouts and optimal user experience across all devices.\n *\n * @component\n * @example\n * Basic usage without links:\n * ```tsx\n * <Footer />\n * ```\n *\n * @example\n * With organized link groups:\n * ```tsx\n * const footerLinks = [\n *   {\n *     title: 'Product',\n *     links: [\n *       { href: '/features', text: 'Features', label: 'Product features' },\n *       { href: '/pricing', text: 'Pricing', label: 'Pricing information' },\n *       { href: '/docs', text: 'Documentation', label: 'Product documentation' }\n *     ]\n *   },\n *   {\n *     title: 'Company',\n *     links: [\n *       { href: '/about', text: 'About Us', label: 'About the company' },\n *       { href: '/careers', text: 'Careers', label: 'Job opportunities' },\n *       { href: '/contact', text: 'Contact', label: 'Contact information' }\n *     ]\n *   }\n * ];\n *\n * <Footer links={footerLinks} />\n * ```\n *\n * @example\n * With custom click handlers:\n * ```tsx\n * const footerLinks = [\n *   {\n *     title: 'Actions',\n *     links: [\n *       {\n *         href: '#',\n *         text: 'Newsletter',\n *         label: 'Subscribe to newsletter',\n *         onClick: () => openNewsletterModal()\n *       }\n *     ]\n *   }\n * ];\n *\n * <Footer links={footerLinks} />\n * ```\n *\n * Features:\n * - Responsive design that adapts to different screen sizes\n * - Intlayer branding with logo and copyright notice\n * - Integrated social network links\n * - Flexible link organization with titled groups\n * - Accessibility-compliant with proper ARIA labels\n * - Support for custom click handlers alongside href navigation\n * - Clean, modern design with proper spacing and typography\n *\n * Layout Structure:\n * - Left side (or top on mobile): Logo, copyright, and social links\n * - Right side (or bottom on mobile): Organized link groups\n * - Responsive breakpoints for optimal mobile experience\n *\n * Accessibility:\n * - Semantic HTML structure using <footer> tag\n * - All links include required aria-label attributes\n * - Proper heading hierarchy and keyboard navigation\n * - Screen reader friendly content organization\n * - Focus management for interactive elements\n *\n * @param props - Component properties\n * @param props.links - Optional array of link groups to display\n *\n * @returns A rendered footer with branding, social links, and optional navigation links\n */\nexport const Footer: FC<FooterProps> = ({ links }) => (\n  <footer className=\"flex flex-auto flex-row flex-wrap items-center justify-around gap-10 p-6\">\n    <aside className=\"flex flex-col items-center justify-between gap-3 md:w-1/4\">\n      <LogoWithTextBelow className=\"size-full max-w-[120px]\" />\n      <span className=\"text-neutral text-center text-xs\">\n        © 2025 Intlayer, Inc.\n      </span>\n      <div className=\"flex flex-row gap-3\">\n        <SocialNetworks />\n      </div>\n    </aside>\n    <div className=\"m-auto flex w-full flex-row flex-wrap justify-around gap-x-3 gap-y-6 md:w-2/3\">\n      {(links ?? []).map(({ title, links }) => (\n        <div\n          className=\"flex flex-col gap-2\"\n          key={links.map((link) => link.href).join(',')}\n        >\n          <strong>{title}</strong>\n          <div className=\"flex flex-col gap-3 text-sm\">\n            {links.map((link) => (\n              <a key={link.href} href={link.href} aria-label={link.label}>\n                {link.text}\n              </a>\n            ))}\n          </div>\n        </div>\n      ))}\n    </div>\n  </footer>\n);\n"],"names":["links"],"mappings":";;;AAyHO,MAAM,SAA0B,CAAC,EAAE,YACxC,qBAAC,UAAA,EAAO,WAAU,4EAChB,UAAA;AAAA,EAAA,qBAAC,SAAA,EAAM,WAAU,6DACf,UAAA;AAAA,IAAA,oBAAC,mBAAA,EAAkB,WAAU,0BAAA,CAA0B;AAAA,IACvD,oBAAC,QAAA,EAAK,WAAU,oCAAmC,UAAA,yBAEnD;AAAA,wBACC,OAAA,EAAI,WAAU,uBACb,UAAA,oBAAC,kBAAe,EAAA,CAClB;AAAA,EAAA,GACF;AAAA,EACA,oBAAC,OAAA,EAAI,WAAU,iFACX,WAAA,SAAS,CAAA,GAAI,IAAI,CAAC,EAAE,OAAO,OAAAA,aAC3B;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MAGV,UAAA;AAAA,QAAA,oBAAC,YAAQ,UAAA,MAAA,CAAM;AAAA,QACf,oBAAC,SAAI,WAAU,+BACZ,UAAAA,OAAM,IAAI,CAAC,SACV,oBAAC,KAAA,EAAkB,MAAM,KAAK,MAAM,cAAY,KAAK,OAClD,eAAK,KAAA,GADA,KAAK,IAEb,CACD,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,IATKA,OAAM,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE,KAAK,GAAG;AAAA,EAAA,CAW/C,EAAA,CACH;AAAA,EAAA,CACF;"}

package/dist/components/Form/elements/MultiselectElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiselectElement.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/elements/MultiselectElement.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAIvD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,KAAK,mBAAmB,GAAG,IAAI,CAC7B,gBAAgB,CAAC,OAAO,WAAW,CAAC,EACpC,SAAS,CACV,GACC,cAAc,CAAC,OAAO,WAAW,CAAC,GAAG;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEJ,eAAO,MAAM,kBAAkB,GAAI,sFAShC,mBAAmB,4CAgCrB,CAAC"}
+{"version":3,"file":"MultiselectElement.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/elements/MultiselectElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAIvD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,KAAK,mBAAmB,GAAG,IAAI,CAC7B,gBAAgB,CAAC,OAAO,WAAW,CAAC,EACpC,SAAS,CACV,GACC,cAAc,CAAC,OAAO,WAAW,CAAC,GAAG;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEJ,eAAO,MAAM,kBAAkB,GAAI,sFAShC,mBAAmB,4CAgCrB,CAAC"}

package/dist/components/Form/elements/SelectElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectElement.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/elements/SelectElement.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAI7C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,KAAK,mBAAmB,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,MAAM,CAAC,EAAE,SAAS,CAAC,GACzE,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEJ,eAAO,MAAM,aAAa,GAAI,sFAS3B,mBAAmB,4CAgCrB,CAAC"}
+{"version":3,"file":"SelectElement.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/elements/SelectElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAI7C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,KAAK,mBAAmB,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,MAAM,CAAC,EAAE,SAAS,CAAC,GACzE,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEJ,eAAO,MAAM,aAAa,GAAI,sFAS3B,mBAAmB,4CAgCrB,CAAC"}

package/dist/components/Form/elements/SwitchSelectorElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchSelectorElement.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/elements/SwitchSelectorElement.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAItD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,KAAK,0BAA0B,GAAG,IAAI,CACpC,gBAAgB,CAAC,OAAO,cAAc,CAAC,EACvC,SAAS,CACV,GACC,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEJ,eAAO,MAAM,qBAAqB,GAAI,sFASnC,0BAA0B,4CA4B5B,CAAC"}
+{"version":3,"file":"SwitchSelectorElement.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/elements/SwitchSelectorElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAItD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,KAAK,0BAA0B,GAAG,IAAI,CACpC,gBAAgB,CAAC,OAAO,cAAc,CAAC,EACvC,SAAS,CACV,GACC,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEJ,eAAO,MAAM,qBAAqB,GAAI,sFASnC,0BAA0B,4CA4B5B,CAAC"}