@intlayer/design-system 3.5.4 → 3.5.6

package/dist/components/DictionaryFieldEditor/index.cjs

@@ -3,7 +3,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const components_DictionaryFieldEditor_DictionariesSelector_DictionariesSelector = require("./DictionariesSelector/DictionariesSelector.cjs");
 const components_DictionaryFieldEditor_DictionaryCreationForm_DictionaryCreationForm = require("./DictionaryCreationForm/DictionaryCreationForm.cjs");
 const components_DictionaryFieldEditor_DictionaryFieldEditor = require("./DictionaryFieldEditor.cjs");
+const components_DictionaryFieldEditor_VersionSwitcherDropDown_VersionSwitcher = require("./VersionSwitcherDropDown/VersionSwitcher.cjs");
+const components_DictionaryFieldEditor_VersionSwitcherDropDown_VersionSwitcherContext = require("./VersionSwitcherDropDown/VersionSwitcherContext.cjs");
 exports.DictionariesSelector = components_DictionaryFieldEditor_DictionariesSelector_DictionariesSelector.DictionariesSelector;
 exports.DictionaryCreationForm = components_DictionaryFieldEditor_DictionaryCreationForm_DictionaryCreationForm.DictionaryCreationForm;
 exports.DictionaryFieldEditor = components_DictionaryFieldEditor_DictionaryFieldEditor.DictionaryFieldEditor;
+exports.VersionSwitcher = components_DictionaryFieldEditor_VersionSwitcherDropDown_VersionSwitcher.VersionSwitcher;
+exports.VersionSwitcherProvider = components_DictionaryFieldEditor_VersionSwitcherDropDown_VersionSwitcherContext.VersionSwitcherProvider;
+exports.useVersionSwitcher = components_DictionaryFieldEditor_VersionSwitcherDropDown_VersionSwitcherContext.useVersionSwitcher;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

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

@@ -1,4 +1,5 @@
 export * from './DictionariesSelector/DictionariesSelector';
 export * from './DictionaryCreationForm/DictionaryCreationForm';
 export * from './DictionaryFieldEditor';
+export * from './VersionSwitcherDropDown';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryFieldEditor/index.ts"],"names":[],"mappings":"AAAA,cAAc,6CAA6C,CAAC;AAC5D,cAAc,iDAAiD,CAAC;AAChE,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryFieldEditor/index.ts"],"names":[],"mappings":"AAAA,cAAc,6CAA6C,CAAC;AAC5D,cAAc,iDAAiD,CAAC;AAChE,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC"}

package/dist/components/DictionaryFieldEditor/index.mjs

@@ -1,9 +1,14 @@
 import { DictionariesSelector } from "./DictionariesSelector/DictionariesSelector.mjs";
 import { DictionaryCreationForm } from "./DictionaryCreationForm/DictionaryCreationForm.mjs";
 import { DictionaryFieldEditor } from "./DictionaryFieldEditor.mjs";
+import { VersionSwitcher } from "./VersionSwitcherDropDown/VersionSwitcher.mjs";
+import { VersionSwitcherProvider, useVersionSwitcher } from "./VersionSwitcherDropDown/VersionSwitcherContext.mjs";
 export {
   DictionariesSelector,
   DictionaryCreationForm,
-  DictionaryFieldEditor
+  DictionaryFieldEditor,
+  VersionSwitcher,
+  VersionSwitcherProvider,
+  useVersionSwitcher
 };
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/DropDown/index.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport type { DropDownType, PanelProps, TriggerProps } from './types';\n\n/**\n * Trigger allowing to open a dropdown menu.\n *\n * Example:\n * ```jsx\n * <DropDown identifier=\"dropdown\">\n *   <DropDown.Trigger>\n *     Open dropdown\n *   </DropDown.Trigger>\n *\n *   <DropDown.Panel identifier=\"dropdown\">\n *     <div>Content</div>\n *   </DropDown.Panel>\n * </DropDown>\n * ```\n *\n * > Note DropDown.Trigger can be replaced by a button. Don't add a button inside the trigger.\n */\nexport const DropDown: DropDownType = ({\n  children,\n  className,\n  identifier,\n  ...props\n}) => (\n  <div\n    className={cn(`group/dropdown relative flex`, className)}\n    aria-label={`DropDown ${identifier}`}\n    id={`unrollable-panel-button-${identifier}`}\n    aria-haspopup\n    {...props}\n  >\n    {children}\n  </div>\n);\n\n/**\n * Trigger allowing to open a dropdown menu.\n *\n * Example:\n * ```jsx\n * <DropDown.Trigger identifier=\"dropdown\">\n *   <div>Open dropdown</div>\n * </DropDown.Trigger>\n * ```\n *\n * > Note DropDown.Trigger can be replaced by a button. Don't add a button inside the trigger.\n */\nconst Trigger: FC<TriggerProps> = ({\n  children,\n  identifier,\n  className,\n  ...props\n}) => (\n  <button\n    className={cn('w-full cursor-pointer', className)}\n    aria-label={`Open panel ${identifier}`}\n    {...props}\n  >\n    {children}\n  </button>\n);\n\n/**\n * Component that opens a dropdown menu when the trigger is clicked.\n *\n * Example:\n * ```jsx\n * <DropDown.Panel identifier=\"dropdown\">\n *   <div>Content</div>\n * </DropDown.Panel>\n * ```\n */\nconst Panel: FC<PanelProps> = ({\n  children,\n  isHidden = undefined,\n  isOverable = false,\n  isFocusable = false,\n  align = 'start',\n  identifier,\n  className,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'absolute top-[calc(100%+0.5rem)] z-[1000] min-w-full',\n      align === 'start' && 'left-0',\n      align === 'end' && 'right-0',\n      className\n    )}\n    aria-hidden={isHidden}\n    role=\"region\"\n    aria-labelledby={`unrollable-panel-button-${identifier}`}\n    id={`unrollable-panel-${identifier}`}\n  >\n    <MaxHeightSmoother\n      isHidden={isHidden}\n      className={cn(\n        'overflow-x-visible',\n        isHidden !== false ? 'invisible' : 'visible',\n        isOverable &&\n          'group-hover/dropdown:visible group-hover/dropdown:grid-rows-[1fr]',\n        isFocusable &&\n          'group-focus-within/dropdown:visible group-focus-within/dropdown:grid-rows-[1fr]'\n      )}\n      {...props}\n    >\n      {children}\n    </MaxHeightSmoother>\n  </div>\n);\n\nDropDown.Trigger = Trigger;\nDropDown.Panel = Panel;\n"],"names":["jsx","cn","MaxHeightSmoother"],"mappings":";;;;;AAuBO,MAAM,WAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,2BAAA,kBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAG,GAAA,gCAAgC,SAAS;AAAA,IACvD,cAAY,YAAY,UAAU;AAAA,IAClC,IAAI,2BAA2B,UAAU;AAAA,IACzC,iBAAa;AAAA,IACZ,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAeF,MAAM,UAA4B,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACED,2BAAA,kBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAAA,GAAG,yBAAyB,SAAS;AAAA,IAChD,cAAY,cAAc,UAAU;AAAA,IACnC,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAaF,MAAM,QAAwB,CAAC;AAAA,EAC7B;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACED,2BAAA,kBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAA;AAAA,MACT;AAAA,MACA,UAAU,WAAW;AAAA,MACrB,UAAU,SAAS;AAAA,MACnB;AAAA,IACF;AAAA,IACA,eAAa;AAAA,IACb,MAAK;AAAA,IACL,mBAAiB,2BAA2B,UAAU;AAAA,IACtD,IAAI,oBAAoB,UAAU;AAAA,IAElC,UAAAD,2BAAA,kBAAA;AAAA,MAACE,mCAAA;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWD,SAAA;AAAA,UACT;AAAA,UACA,aAAa,QAAQ,cAAc;AAAA,UACnC,cACE;AAAA,UACF,eACE;AAAA,QACJ;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;AAGF,SAAS,UAAU;AACnB,SAAS,QAAQ;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/DropDown/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\nexport type DropDownProps = HTMLAttributes<HTMLDivElement> & {\n  identifier: string;\n};\n\nexport type DropDownType = FC<DropDownProps> & {\n  Trigger: FC<TriggerProps>;\n  Panel: FC<PanelProps>;\n};\n\n/**\n * Trigger allowing to open a dropdown menu.\n *\n * Example:\n * ```jsx\n * <DropDown identifier=\"dropdown\">\n *   <DropDown.Trigger>\n *     Open dropdown\n *   </DropDown.Trigger>\n *\n *   <DropDown.Panel identifier=\"dropdown\">\n *     <div>Content</div>\n *   </DropDown.Panel>\n * </DropDown>\n * ```\n *\n * > Note DropDown.Trigger can be replaced by a button. Don't add a button inside the trigger.\n */\nexport const DropDown: DropDownType = ({\n  children,\n  className,\n  identifier,\n  ...props\n}) => (\n  <div\n    className={cn(`group/dropdown relative flex`, className)}\n    aria-label={`DropDown ${identifier}`}\n    id={`unrollable-panel-button-${identifier}`}\n    aria-haspopup\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nexport type TriggerProps = HTMLAttributes<HTMLButtonElement> & {\n  identifier: string;\n};\n\n/**\n * Trigger allowing to open a dropdown menu.\n *\n * Example:\n * ```jsx\n * <DropDown.Trigger identifier=\"dropdown\">\n *   <div>Open dropdown</div>\n * </DropDown.Trigger>\n * ```\n *\n * > Note DropDown.Trigger can be replaced by a button. Don't add a button inside the trigger.\n */\nconst Trigger: FC<TriggerProps> = ({\n  children,\n  identifier,\n  className,\n  ...props\n}) => (\n  <button\n    className={cn('w-full cursor-pointer', className)}\n    aria-label={`Open panel ${identifier}`}\n    {...props}\n  >\n    {children}\n  </button>\n);\n\nexport type PanelProps = HTMLAttributes<HTMLDivElement> & {\n  isFocusable?: boolean;\n  isHidden?: boolean;\n  isOverable?: boolean;\n  identifier: string;\n  align?: 'start' | 'end';\n};\n\n/**\n * Component that opens a dropdown menu when the trigger is clicked.\n *\n * Example:\n * ```jsx\n * <DropDown.Panel identifier=\"dropdown\">\n *   <div>Content</div>\n * </DropDown.Panel>\n * ```\n */\nconst Panel: FC<PanelProps> = ({\n  children,\n  isHidden = undefined,\n  isOverable = false,\n  isFocusable = false,\n  align = 'start',\n  identifier,\n  className,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'absolute top-[calc(100%+0.5rem)] z-[1000] min-w-full',\n      align === 'start' && 'left-0',\n      align === 'end' && 'right-0',\n      className\n    )}\n    aria-hidden={isHidden}\n    role=\"region\"\n    aria-labelledby={`unrollable-panel-button-${identifier}`}\n    id={`unrollable-panel-${identifier}`}\n  >\n    <MaxHeightSmoother\n      isHidden={isHidden}\n      className={cn(\n        'overflow-x-visible',\n        isHidden !== false ? 'invisible' : 'visible',\n        isOverable &&\n          'group-hover/dropdown:visible group-hover/dropdown:grid-rows-[1fr]',\n        isFocusable &&\n          'group-focus-within/dropdown:visible group-focus-within/dropdown:grid-rows-[1fr]'\n      )}\n      {...props}\n    >\n      {children}\n    </MaxHeightSmoother>\n  </div>\n);\n\nDropDown.Trigger = Trigger;\nDropDown.Panel = Panel;\n"],"names":["jsx","cn","MaxHeightSmoother"],"mappings":";;;;;AA+BO,MAAM,WAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,2BAAA,kBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAG,GAAA,gCAAgC,SAAS;AAAA,IACvD,cAAY,YAAY,UAAU;AAAA,IAClC,IAAI,2BAA2B,UAAU;AAAA,IACzC,iBAAa;AAAA,IACZ,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAmBF,MAAM,UAA4B,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACED,2BAAA,kBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAAA,GAAG,yBAAyB,SAAS;AAAA,IAChD,cAAY,cAAc,UAAU;AAAA,IACnC,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAqBF,MAAM,QAAwB,CAAC;AAAA,EAC7B;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACED,2BAAA,kBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAA;AAAA,MACT;AAAA,MACA,UAAU,WAAW;AAAA,MACrB,UAAU,SAAS;AAAA,MACnB;AAAA,IACF;AAAA,IACA,eAAa;AAAA,IACb,MAAK;AAAA,IACL,mBAAiB,2BAA2B,UAAU;AAAA,IACtD,IAAI,oBAAoB,UAAU;AAAA,IAElC,UAAAD,2BAAA,kBAAA;AAAA,MAACE,mCAAA;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWD,SAAA;AAAA,UACT;AAAA,UACA,aAAa,QAAQ,cAAc;AAAA,UACnC,cACE;AAAA,UACF,eACE;AAAA,QACJ;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;AAGF,SAAS,UAAU;AACnB,SAAS,QAAQ;;"}

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

@@ -1,4 +1,11 @@
-import { DropDownType } from './types';
+import { FC, HTMLAttributes } from 'react';
+export type DropDownProps = HTMLAttributes<HTMLDivElement> & {
+    identifier: string;
+};
+export type DropDownType = FC<DropDownProps> & {
+    Trigger: FC<TriggerProps>;
+    Panel: FC<PanelProps>;
+};
 /**
  * Trigger allowing to open a dropdown menu.
  *
@@ -18,4 +25,14 @@ import { DropDownType } from './types';
  * > Note DropDown.Trigger can be replaced by a button. Don't add a button inside the trigger.
  */
 export declare const DropDown: DropDownType;
+export type TriggerProps = HTMLAttributes<HTMLButtonElement> & {
+    identifier: string;
+};
+export type PanelProps = HTMLAttributes<HTMLDivElement> & {
+    isFocusable?: boolean;
+    isHidden?: boolean;
+    isOverable?: boolean;
+    identifier: string;
+    align?: 'start' | 'end';
+};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropDown/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAA4B,MAAM,SAAS,CAAC;AAEtE;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,QAAQ,EAAE,YAetB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropDown/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIhD,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC3D,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,EAAE,CAAC,aAAa,CAAC,GAAG;IAC7C,OAAO,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC;IAC1B,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,QAAQ,EAAE,YAetB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,iBAAiB,CAAC,GAAG;IAC7D,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AA6BF,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACzB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/DropDown/index.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport type { DropDownType, PanelProps, TriggerProps } from './types';\n\n/**\n * Trigger allowing to open a dropdown menu.\n *\n * Example:\n * ```jsx\n * <DropDown identifier=\"dropdown\">\n *   <DropDown.Trigger>\n *     Open dropdown\n *   </DropDown.Trigger>\n *\n *   <DropDown.Panel identifier=\"dropdown\">\n *     <div>Content</div>\n *   </DropDown.Panel>\n * </DropDown>\n * ```\n *\n * > Note DropDown.Trigger can be replaced by a button. Don't add a button inside the trigger.\n */\nexport const DropDown: DropDownType = ({\n  children,\n  className,\n  identifier,\n  ...props\n}) => (\n  <div\n    className={cn(`group/dropdown relative flex`, className)}\n    aria-label={`DropDown ${identifier}`}\n    id={`unrollable-panel-button-${identifier}`}\n    aria-haspopup\n    {...props}\n  >\n    {children}\n  </div>\n);\n\n/**\n * Trigger allowing to open a dropdown menu.\n *\n * Example:\n * ```jsx\n * <DropDown.Trigger identifier=\"dropdown\">\n *   <div>Open dropdown</div>\n * </DropDown.Trigger>\n * ```\n *\n * > Note DropDown.Trigger can be replaced by a button. Don't add a button inside the trigger.\n */\nconst Trigger: FC<TriggerProps> = ({\n  children,\n  identifier,\n  className,\n  ...props\n}) => (\n  <button\n    className={cn('w-full cursor-pointer', className)}\n    aria-label={`Open panel ${identifier}`}\n    {...props}\n  >\n    {children}\n  </button>\n);\n\n/**\n * Component that opens a dropdown menu when the trigger is clicked.\n *\n * Example:\n * ```jsx\n * <DropDown.Panel identifier=\"dropdown\">\n *   <div>Content</div>\n * </DropDown.Panel>\n * ```\n */\nconst Panel: FC<PanelProps> = ({\n  children,\n  isHidden = undefined,\n  isOverable = false,\n  isFocusable = false,\n  align = 'start',\n  identifier,\n  className,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'absolute top-[calc(100%+0.5rem)] z-[1000] min-w-full',\n      align === 'start' && 'left-0',\n      align === 'end' && 'right-0',\n      className\n    )}\n    aria-hidden={isHidden}\n    role=\"region\"\n    aria-labelledby={`unrollable-panel-button-${identifier}`}\n    id={`unrollable-panel-${identifier}`}\n  >\n    <MaxHeightSmoother\n      isHidden={isHidden}\n      className={cn(\n        'overflow-x-visible',\n        isHidden !== false ? 'invisible' : 'visible',\n        isOverable &&\n          'group-hover/dropdown:visible group-hover/dropdown:grid-rows-[1fr]',\n        isFocusable &&\n          'group-focus-within/dropdown:visible group-focus-within/dropdown:grid-rows-[1fr]'\n      )}\n      {...props}\n    >\n      {children}\n    </MaxHeightSmoother>\n  </div>\n);\n\nDropDown.Trigger = Trigger;\nDropDown.Panel = Panel;\n"],"names":["jsx"],"mappings":";;;AAuBO,MAAM,WAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,kCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,gCAAgC,SAAS;AAAA,IACvD,cAAY,YAAY,UAAU;AAAA,IAClC,IAAI,2BAA2B,UAAU;AAAA,IACzC,iBAAa;AAAA,IACZ,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAeF,MAAM,UAA4B,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,kCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,yBAAyB,SAAS;AAAA,IAChD,cAAY,cAAc,UAAU;AAAA,IACnC,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAaF,MAAM,QAAwB,CAAC;AAAA,EAC7B;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,kCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA,UAAU,WAAW;AAAA,MACrB,UAAU,SAAS;AAAA,MACnB;AAAA,IACF;AAAA,IACA,eAAa;AAAA,IACb,MAAK;AAAA,IACL,mBAAiB,2BAA2B,UAAU;AAAA,IACtD,IAAI,oBAAoB,UAAU;AAAA,IAElC,UAAAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,aAAa,QAAQ,cAAc;AAAA,UACnC,cACE;AAAA,UACF,eACE;AAAA,QACJ;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;AAGF,SAAS,UAAU;AACnB,SAAS,QAAQ;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/DropDown/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\nexport type DropDownProps = HTMLAttributes<HTMLDivElement> & {\n  identifier: string;\n};\n\nexport type DropDownType = FC<DropDownProps> & {\n  Trigger: FC<TriggerProps>;\n  Panel: FC<PanelProps>;\n};\n\n/**\n * Trigger allowing to open a dropdown menu.\n *\n * Example:\n * ```jsx\n * <DropDown identifier=\"dropdown\">\n *   <DropDown.Trigger>\n *     Open dropdown\n *   </DropDown.Trigger>\n *\n *   <DropDown.Panel identifier=\"dropdown\">\n *     <div>Content</div>\n *   </DropDown.Panel>\n * </DropDown>\n * ```\n *\n * > Note DropDown.Trigger can be replaced by a button. Don't add a button inside the trigger.\n */\nexport const DropDown: DropDownType = ({\n  children,\n  className,\n  identifier,\n  ...props\n}) => (\n  <div\n    className={cn(`group/dropdown relative flex`, className)}\n    aria-label={`DropDown ${identifier}`}\n    id={`unrollable-panel-button-${identifier}`}\n    aria-haspopup\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nexport type TriggerProps = HTMLAttributes<HTMLButtonElement> & {\n  identifier: string;\n};\n\n/**\n * Trigger allowing to open a dropdown menu.\n *\n * Example:\n * ```jsx\n * <DropDown.Trigger identifier=\"dropdown\">\n *   <div>Open dropdown</div>\n * </DropDown.Trigger>\n * ```\n *\n * > Note DropDown.Trigger can be replaced by a button. Don't add a button inside the trigger.\n */\nconst Trigger: FC<TriggerProps> = ({\n  children,\n  identifier,\n  className,\n  ...props\n}) => (\n  <button\n    className={cn('w-full cursor-pointer', className)}\n    aria-label={`Open panel ${identifier}`}\n    {...props}\n  >\n    {children}\n  </button>\n);\n\nexport type PanelProps = HTMLAttributes<HTMLDivElement> & {\n  isFocusable?: boolean;\n  isHidden?: boolean;\n  isOverable?: boolean;\n  identifier: string;\n  align?: 'start' | 'end';\n};\n\n/**\n * Component that opens a dropdown menu when the trigger is clicked.\n *\n * Example:\n * ```jsx\n * <DropDown.Panel identifier=\"dropdown\">\n *   <div>Content</div>\n * </DropDown.Panel>\n * ```\n */\nconst Panel: FC<PanelProps> = ({\n  children,\n  isHidden = undefined,\n  isOverable = false,\n  isFocusable = false,\n  align = 'start',\n  identifier,\n  className,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'absolute top-[calc(100%+0.5rem)] z-[1000] min-w-full',\n      align === 'start' && 'left-0',\n      align === 'end' && 'right-0',\n      className\n    )}\n    aria-hidden={isHidden}\n    role=\"region\"\n    aria-labelledby={`unrollable-panel-button-${identifier}`}\n    id={`unrollable-panel-${identifier}`}\n  >\n    <MaxHeightSmoother\n      isHidden={isHidden}\n      className={cn(\n        'overflow-x-visible',\n        isHidden !== false ? 'invisible' : 'visible',\n        isOverable &&\n          'group-hover/dropdown:visible group-hover/dropdown:grid-rows-[1fr]',\n        isFocusable &&\n          'group-focus-within/dropdown:visible group-focus-within/dropdown:grid-rows-[1fr]'\n      )}\n      {...props}\n    >\n      {children}\n    </MaxHeightSmoother>\n  </div>\n);\n\nDropDown.Trigger = Trigger;\nDropDown.Panel = Panel;\n"],"names":["jsx"],"mappings":";;;AA+BO,MAAM,WAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,kCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,gCAAgC,SAAS;AAAA,IACvD,cAAY,YAAY,UAAU;AAAA,IAClC,IAAI,2BAA2B,UAAU;AAAA,IACzC,iBAAa;AAAA,IACZ,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAmBF,MAAM,UAA4B,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,kCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,yBAAyB,SAAS;AAAA,IAChD,cAAY,cAAc,UAAU;AAAA,IACnC,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAqBF,MAAM,QAAwB,CAAC;AAAA,EAC7B;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,kCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA,UAAU,WAAW;AAAA,MACrB,UAAU,SAAS;AAAA,MACnB;AAAA,IACF;AAAA,IACA,eAAa;AAAA,IACb,MAAK;AAAA,IACL,mBAAiB,2BAA2B,UAAU;AAAA,IACtD,IAAI,oBAAoB,UAAU;AAAA,IAElC,UAAAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,aAAa,QAAQ,cAAc;AAAA,UACnC,cACE;AAAA,UACF,eACE;AAAA,QACJ;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;AAGF,SAAS,UAAU;AACnB,SAAS,QAAQ;"}

package/dist/components/EditableField/EditableFieldInput.cjs

@@ -19,7 +19,11 @@ const EditableFieldInput = require$$0.forwardRef(({ onSave, onCancel, ...props }
     onCancel?.();
   };
   require$$0.useImperativeHandle(ref, () => inputRef.current);
-  const value = inputRef.current?.value ?? inputRef.current?.defaultValue ?? props.value ?? props.defaultValue;
+  const value = require$$0.useMemo(
+    () => props.value ?? inputRef.current?.value ?? props.defaultValue,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.value, props.defaultValue, inputRef.current?.value]
+  );
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
     components_EditableField_EditableFieldLayout.EditableFieldLayout,
     {

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

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldInput.cjs","sources":["../../../src/components/EditableField/EditableFieldInput.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useImperativeHandle, 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 = forwardRef<\n  HTMLInputElement,\n  EditableFieldInputProps\n>(({ onSave, onCancel, ...props }, ref) => {\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, () => inputRef.current!);\n\n  const value =\n    inputRef.current?.value ??\n    inputRef.current?.defaultValue ??\n    (props.value as string) ??\n    (props.defaultValue as string);\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\nEditableFieldInput.displayName = 'EditableFieldInput';\n"],"names":["forwardRef","useRef","useImperativeHandle","jsx","EditableFieldLayout","Input"],"mappings":";;;;;;;;;AAWa,MAAA,qBAAqBA,sBAGhC,CAAC,EAAE,QAAQ,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnC,QAAA,WAAWC,kBAAyB,IAAI;AAE9C,QAAM,aAAa,MAAM;AAEd,aAAA,SAAS,SAAS,SAAS,EAAE;AAAA,EACxC;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,QAAQ,SAAS,QAAQ,gBAAgB;AAAA,IAAA;AAEjD,eAAA;AAAA,EACb;AAGoBC,aAAAA,oBAAA,KAAK,MAAM,SAAS,OAAQ;AAE1C,QAAA,QACJ,SAAS,SAAS,SAClB,SAAS,SAAS,gBACjB,MAAM,SACN,MAAM;AAGP,SAAAC,2BAAA,kBAAA;AAAA,IAACC,6CAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,UAACD,2BAAA,kBAAA,IAAAE,uBAAA,OAAA,EAAM,KAAK,UAAW,GAAG,MAAO,CAAA;AAAA,IAAA;AAAA,EACnC;AAEJ,CAAC;AAED,mBAAmB,cAAc;;"}
+{"version":3,"file":"EditableFieldInput.cjs","sources":["../../../src/components/EditableField/EditableFieldInput.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, 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 = forwardRef<\n  HTMLInputElement,\n  EditableFieldInputProps\n>(({ onSave, onCancel, ...props }, ref) => {\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, () => inputRef.current!);\n\n  const value = useMemo(\n    () =>\n      (props.value as string) ??\n      inputRef.current?.value ??\n      (props.defaultValue as string),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\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\nEditableFieldInput.displayName = 'EditableFieldInput';\n"],"names":["forwardRef","useRef","useImperativeHandle","useMemo","jsx","EditableFieldLayout","Input"],"mappings":";;;;;;;;;AAWa,MAAA,qBAAqBA,sBAGhC,CAAC,EAAE,QAAQ,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnC,QAAA,WAAWC,kBAAyB,IAAI;AAE9C,QAAM,aAAa,MAAM;AAEd,aAAA,SAAS,SAAS,SAAS,EAAE;AAAA,EACxC;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,QAAQ,SAAS,QAAQ,gBAAgB;AAAA,IAAA;AAEjD,eAAA;AAAA,EACb;AAGoBC,aAAAA,oBAAA,KAAK,MAAM,SAAS,OAAQ;AAEhD,QAAM,QAAQC,WAAA;AAAA,IACZ,MACG,MAAM,SACP,SAAS,SAAS,SACjB,MAAM;AAAA;AAAA,IAET,CAAC,MAAM,OAAO,MAAM,cAAc,SAAS,SAAS,KAAK;AAAA,EAC3D;AAGE,SAAAC,2BAAA,kBAAA;AAAA,IAACC,6CAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,UAACD,2BAAA,kBAAA,IAAAE,uBAAA,OAAA,EAAM,KAAK,UAAW,GAAG,MAAO,CAAA;AAAA,IAAA;AAAA,EACnC;AAEJ,CAAC;AAED,mBAAmB,cAAc;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldInput.d.ts","sourceRoot":"","sources":["../../../src/components/EditableField/EditableFieldInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAGlD,KAAK,uBAAuB,GAAG,UAAU,GAAG;IAC1C,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,mIAoC7B,CAAC"}
+{"version":3,"file":"EditableFieldInput.d.ts","sourceRoot":"","sources":["../../../src/components/EditableField/EditableFieldInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAGlD,KAAK,uBAAuB,GAAG,UAAU,GAAG;IAC1C,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,mIAuC7B,CAAC"}

package/dist/components/EditableField/EditableFieldInput.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { j as jsxRuntimeExports } from "../../jsx-runtime-DaNGiM0W.js";
-import { forwardRef, useRef, useImperativeHandle } from "react";
+import { forwardRef, useRef, useImperativeHandle, useMemo } from "react";
 import { Input } from "../Input/Input.mjs";
 import "../Input/InputPassword.mjs";
 import "../Input/Checkbox.mjs";
@@ -17,7 +17,11 @@ const EditableFieldInput = forwardRef(({ onSave, onCancel, ...props }, ref) => {
     onCancel?.();
   };
   useImperativeHandle(ref, () => inputRef.current);
-  const value = inputRef.current?.value ?? inputRef.current?.defaultValue ?? props.value ?? props.defaultValue;
+  const value = useMemo(
+    () => props.value ?? inputRef.current?.value ?? props.defaultValue,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.value, props.defaultValue, inputRef.current?.value]
+  );
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     EditableFieldLayout,
     {

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 { forwardRef, useImperativeHandle, 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 = forwardRef<\n  HTMLInputElement,\n  EditableFieldInputProps\n>(({ onSave, onCancel, ...props }, ref) => {\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, () => inputRef.current!);\n\n  const value =\n    inputRef.current?.value ??\n    inputRef.current?.defaultValue ??\n    (props.value as string) ??\n    (props.defaultValue as string);\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\nEditableFieldInput.displayName = 'EditableFieldInput';\n"],"names":["jsx"],"mappings":";;;;;;;AAWa,MAAA,qBAAqB,WAGhC,CAAC,EAAE,QAAQ,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnC,QAAA,WAAW,OAAyB,IAAI;AAE9C,QAAM,aAAa,MAAM;AAEd,aAAA,SAAS,SAAS,SAAS,EAAE;AAAA,EACxC;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,QAAQ,SAAS,QAAQ,gBAAgB;AAAA,IAAA;AAEjD,eAAA;AAAA,EACb;AAGoB,sBAAA,KAAK,MAAM,SAAS,OAAQ;AAE1C,QAAA,QACJ,SAAS,SAAS,SAClB,SAAS,SAAS,gBACjB,MAAM,SACN,MAAM;AAGP,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,UAACA,kCAAA,IAAA,OAAA,EAAM,KAAK,UAAW,GAAG,MAAO,CAAA;AAAA,IAAA;AAAA,EACnC;AAEJ,CAAC;AAED,mBAAmB,cAAc;"}
+{"version":3,"file":"EditableFieldInput.mjs","sources":["../../../src/components/EditableField/EditableFieldInput.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, 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 = forwardRef<\n  HTMLInputElement,\n  EditableFieldInputProps\n>(({ onSave, onCancel, ...props }, ref) => {\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, () => inputRef.current!);\n\n  const value = useMemo(\n    () =>\n      (props.value as string) ??\n      inputRef.current?.value ??\n      (props.defaultValue as string),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\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\nEditableFieldInput.displayName = 'EditableFieldInput';\n"],"names":["jsx"],"mappings":";;;;;;;AAWa,MAAA,qBAAqB,WAGhC,CAAC,EAAE,QAAQ,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnC,QAAA,WAAW,OAAyB,IAAI;AAE9C,QAAM,aAAa,MAAM;AAEd,aAAA,SAAS,SAAS,SAAS,EAAE;AAAA,EACxC;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,QAAQ,SAAS,QAAQ,gBAAgB;AAAA,IAAA;AAEjD,eAAA;AAAA,EACb;AAGoB,sBAAA,KAAK,MAAM,SAAS,OAAQ;AAEhD,QAAM,QAAQ;AAAA,IACZ,MACG,MAAM,SACP,SAAS,SAAS,SACjB,MAAM;AAAA;AAAA,IAET,CAAC,MAAM,OAAO,MAAM,cAAc,SAAS,SAAS,KAAK;AAAA,EAC3D;AAGE,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,UAACA,kCAAA,IAAA,OAAA,EAAM,KAAK,UAAW,GAAG,MAAO,CAAA;AAAA,IAAA;AAAA,EACnC;AAEJ,CAAC;AAED,mBAAmB,cAAc;"}

package/dist/components/EditableField/EditableFieldTextArea.cjs

@@ -19,14 +19,9 @@ const EditableFieldTextArea = require$$0.forwardRef(({ onSave, onCancel, ...prop
     onCancel?.();
   };
   const memoValue = require$$0.useMemo(
-    () => textAreaRef.current?.value ?? textAreaRef.current?.defaultValue ?? props.value ?? props.defaultValue ?? "",
+    () => props.value ?? textAreaRef.current?.value ?? props.defaultValue ?? "",
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      props.value,
-      props.defaultValue,
-      textAreaRef.current?.value,
-      textAreaRef.current?.defaultValue
-    ]
+    [props.value, props.defaultValue, textAreaRef.current?.value]
   );
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
     components_EditableField_EditableFieldLayout.EditableFieldLayout,
@@ -41,7 +36,6 @@ const EditableFieldTextArea = require$$0.forwardRef(({ onSave, onCancel, ...prop
       children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
         components_TextArea_AutoSizeTextArea.AutoSizedTextArea,
         {
-          defaultValue: memoValue,
           className: "leading-6",
           ref: textAreaRef,
           onClick: (e) => {

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 { forwardRef, useRef, useImperativeHandle, useMemo } 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 = forwardRef<\n  HTMLTextAreaElement,\n  EditableFieldTextAreaProps\n>(({ onSave, onCancel, ...props }, ref) => {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n  // Expose the text area ref to parent components\n  useImperativeHandle(ref, () => 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 = useMemo(\n    () =>\n      textAreaRef.current?.value ??\n      textAreaRef.current?.defaultValue ??\n      (props.value as string) ??\n      (props.defaultValue as string) ??\n      '',\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      props.value,\n      props.defaultValue,\n      textAreaRef.current?.value,\n      textAreaRef.current?.defaultValue,\n    ]\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        defaultValue={memoValue}\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\nEditableFieldTextArea.displayName = 'EditableFieldTextArea';\n"],"names":["forwardRef","useRef","useImperativeHandle","useMemo","jsx","EditableFieldLayout","AutoSizedTextArea"],"mappings":";;;;;;;;AAWa,MAAA,wBAAwBA,sBAGnC,CAAC,EAAE,QAAQ,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnC,QAAA,cAAcC,kBAA4B,IAAI;AAGhCC,aAAAA,oBAAA,KAAK,MAAM,YAAY,OAAQ;AAEnD,QAAM,aAAa,MAAM;AAEd,aAAA,YAAY,SAAS,SAAS,EAAE;AAAA,EAC3C;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,YAAY,SAAS;AACvB,kBAAY,QAAQ,QAAQ,YAAY,QAAQ,gBAAgB;AAAA,IAAA;AAEvD,eAAA;AAAA,EACb;AAEA,QAAM,YAAYC,WAAA;AAAA,IAChB,MACE,YAAY,SAAS,SACrB,YAAY,SAAS,gBACpB,MAAM,SACN,MAAM,gBACP;AAAA;AAAA,IAEF;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,YAAY,SAAS;AAAA,MACrB,YAAY,SAAS;AAAA,IAAA;AAAA,EAEzB;AAGE,SAAAC,2BAAA,kBAAA;AAAA,IAACC,6CAAA;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS,CAAC,MAAM;AACd,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAAA,MACpB;AAAA,MAEA,UAAAD,2BAAA,kBAAA;AAAA,QAACE,qCAAA;AAAA,QAAA;AAAA,UACC,cAAc;AAAA,UACd,WAAU;AAAA,UACV,KAAK;AAAA,UACL,SAAS,CAAC,MAAM;AACd,cAAE,eAAe;AACjB,cAAE,gBAAgB;AAAA,UACpB;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ,CAAC;AAED,sBAAsB,cAAc;;"}
+{"version":3,"file":"EditableFieldTextArea.cjs","sources":["../../../src/components/EditableField/EditableFieldTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useRef, useImperativeHandle, useMemo } 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 = forwardRef<\n  HTMLTextAreaElement,\n  EditableFieldTextAreaProps\n>(({ onSave, onCancel, ...props }, ref) => {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n  // Expose the text area ref to parent components\n  useImperativeHandle(ref, () => 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 = useMemo(\n    () =>\n      (props.value as string) ??\n      textAreaRef.current?.value ??\n      (props.defaultValue as string) ??\n      '',\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [props.value, props.defaultValue, textAreaRef.current?.value]\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\nEditableFieldTextArea.displayName = 'EditableFieldTextArea';\n"],"names":["forwardRef","useRef","useImperativeHandle","useMemo","jsx","EditableFieldLayout","AutoSizedTextArea"],"mappings":";;;;;;;;AAWa,MAAA,wBAAwBA,sBAGnC,CAAC,EAAE,QAAQ,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnC,QAAA,cAAcC,kBAA4B,IAAI;AAGhCC,aAAAA,oBAAA,KAAK,MAAM,YAAY,OAAQ;AAEnD,QAAM,aAAa,MAAM;AAEd,aAAA,YAAY,SAAS,SAAS,EAAE;AAAA,EAC3C;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,YAAY,SAAS;AACvB,kBAAY,QAAQ,QAAQ,YAAY,QAAQ,gBAAgB;AAAA,IAAA;AAEvD,eAAA;AAAA,EACb;AAEA,QAAM,YAAYC,WAAA;AAAA,IAChB,MACG,MAAM,SACP,YAAY,SAAS,SACpB,MAAM,gBACP;AAAA;AAAA,IAEF,CAAC,MAAM,OAAO,MAAM,cAAc,YAAY,SAAS,KAAK;AAAA,EAC9D;AAGE,SAAAC,2BAAA,kBAAA;AAAA,IAACC,6CAAA;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS,CAAC,MAAM;AACd,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAAA,MACpB;AAAA,MAEA,UAAAD,2BAAA,kBAAA;AAAA,QAACE,qCAAA;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,KAAK;AAAA,UACL,SAAS,CAAC,MAAM;AACd,cAAE,eAAe;AACjB,cAAE,gBAAgB;AAAA,UACpB;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ,CAAC;AAED,sBAAsB,cAAc;;"}

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":"AAGA,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,yIA2DhC,CAAC"}
+{"version":3,"file":"EditableFieldTextArea.d.ts","sourceRoot":"","sources":["../../../src/components/EditableField/EditableFieldTextArea.tsx"],"names":[],"mappings":"AAGA,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,yIAoDhC,CAAC"}

package/dist/components/EditableField/EditableFieldTextArea.mjs

@@ -17,14 +17,9 @@ const EditableFieldTextArea = forwardRef(({ onSave, onCancel, ...props }, ref) =
     onCancel?.();
   };
   const memoValue = useMemo(
-    () => textAreaRef.current?.value ?? textAreaRef.current?.defaultValue ?? props.value ?? props.defaultValue ?? "",
+    () => props.value ?? textAreaRef.current?.value ?? props.defaultValue ?? "",
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      props.value,
-      props.defaultValue,
-      textAreaRef.current?.value,
-      textAreaRef.current?.defaultValue
-    ]
+    [props.value, props.defaultValue, textAreaRef.current?.value]
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     EditableFieldLayout,
@@ -39,7 +34,6 @@ const EditableFieldTextArea = forwardRef(({ onSave, onCancel, ...props }, ref) =
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         AutoSizedTextArea,
         {
-          defaultValue: memoValue,
           className: "leading-6",
           ref: textAreaRef,
           onClick: (e) => {

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 { forwardRef, useRef, useImperativeHandle, useMemo } 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 = forwardRef<\n  HTMLTextAreaElement,\n  EditableFieldTextAreaProps\n>(({ onSave, onCancel, ...props }, ref) => {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n  // Expose the text area ref to parent components\n  useImperativeHandle(ref, () => 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 = useMemo(\n    () =>\n      textAreaRef.current?.value ??\n      textAreaRef.current?.defaultValue ??\n      (props.value as string) ??\n      (props.defaultValue as string) ??\n      '',\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      props.value,\n      props.defaultValue,\n      textAreaRef.current?.value,\n      textAreaRef.current?.defaultValue,\n    ]\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        defaultValue={memoValue}\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\nEditableFieldTextArea.displayName = 'EditableFieldTextArea';\n"],"names":["jsx"],"mappings":";;;;;;AAWa,MAAA,wBAAwB,WAGnC,CAAC,EAAE,QAAQ,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnC,QAAA,cAAc,OAA4B,IAAI;AAGhC,sBAAA,KAAK,MAAM,YAAY,OAAQ;AAEnD,QAAM,aAAa,MAAM;AAEd,aAAA,YAAY,SAAS,SAAS,EAAE;AAAA,EAC3C;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,YAAY,SAAS;AACvB,kBAAY,QAAQ,QAAQ,YAAY,QAAQ,gBAAgB;AAAA,IAAA;AAEvD,eAAA;AAAA,EACb;AAEA,QAAM,YAAY;AAAA,IAChB,MACE,YAAY,SAAS,SACrB,YAAY,SAAS,gBACpB,MAAM,SACN,MAAM,gBACP;AAAA;AAAA,IAEF;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,YAAY,SAAS;AAAA,MACrB,YAAY,SAAS;AAAA,IAAA;AAAA,EAEzB;AAGE,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS,CAAC,MAAM;AACd,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAAA,MACpB;AAAA,MAEA,UAAAA,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,cAAc;AAAA,UACd,WAAU;AAAA,UACV,KAAK;AAAA,UACL,SAAS,CAAC,MAAM;AACd,cAAE,eAAe;AACjB,cAAE,gBAAgB;AAAA,UACpB;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ,CAAC;AAED,sBAAsB,cAAc;"}
+{"version":3,"file":"EditableFieldTextArea.mjs","sources":["../../../src/components/EditableField/EditableFieldTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useRef, useImperativeHandle, useMemo } 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 = forwardRef<\n  HTMLTextAreaElement,\n  EditableFieldTextAreaProps\n>(({ onSave, onCancel, ...props }, ref) => {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n  // Expose the text area ref to parent components\n  useImperativeHandle(ref, () => 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 = useMemo(\n    () =>\n      (props.value as string) ??\n      textAreaRef.current?.value ??\n      (props.defaultValue as string) ??\n      '',\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [props.value, props.defaultValue, textAreaRef.current?.value]\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\nEditableFieldTextArea.displayName = 'EditableFieldTextArea';\n"],"names":["jsx"],"mappings":";;;;;;AAWa,MAAA,wBAAwB,WAGnC,CAAC,EAAE,QAAQ,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnC,QAAA,cAAc,OAA4B,IAAI;AAGhC,sBAAA,KAAK,MAAM,YAAY,OAAQ;AAEnD,QAAM,aAAa,MAAM;AAEd,aAAA,YAAY,SAAS,SAAS,EAAE;AAAA,EAC3C;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,YAAY,SAAS;AACvB,kBAAY,QAAQ,QAAQ,YAAY,QAAQ,gBAAgB;AAAA,IAAA;AAEvD,eAAA;AAAA,EACb;AAEA,QAAM,YAAY;AAAA,IAChB,MACG,MAAM,SACP,YAAY,SAAS,SACpB,MAAM,gBACP;AAAA;AAAA,IAEF,CAAC,MAAM,OAAO,MAAM,cAAc,YAAY,SAAS,KAAK;AAAA,EAC9D;AAGE,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS,CAAC,MAAM;AACd,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAAA,MACpB;AAAA,MAEA,UAAAA,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,KAAK;AAAA,UACL,SAAS,CAAC,MAAM;AACd,cAAE,eAAe;AACjB,cAAE,gBAAgB;AAAA,UACpB;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ,CAAC;AAED,sBAAsB,cAAc;"}

package/dist/components/Form/FormLabel.cjs

@@ -6,12 +6,16 @@ const require$$0 = require("react");
 const utils_cn = require("../../utils/cn.cjs");
 const components_Label_index = require("../Label/index.cjs");
 const components_Form_FormField = require("./FormField.cjs");
-const FormLabel = require$$0.forwardRef((props, ref) => {
+const FormLabel = require$$0.forwardRef(({ className, ...props }, ref) => {
   const { error, formItemId } = components_Form_FormField.useFormField();
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
     components_Label_index.Label,
     {
-      className: utils_cn.cn(error && "text-error dark:text-error-dark"),
+      className: utils_cn.cn(
+        "mb-2",
+        error && "text-error dark:text-error-dark",
+        className
+      ),
       ref,
       htmlFor: formItemId,
       ...props

package/dist/components/Form/FormLabel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.cjs","sources":["../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  type ElementRef,\n  type ComponentPropsWithoutRef,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Label } from '../Label';\nimport { useFormField } from './FormField';\n\nexport const FormLabel = forwardRef<\n  ElementRef<typeof Label>,\n  ComponentPropsWithoutRef<typeof Label>\n>((props, ref) => {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <Label\n      className={cn(error && 'text-error dark:text-error-dark')}\n      ref={ref}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n});\nFormLabel.displayName = 'FormLabel';\n"],"names":["forwardRef","useFormField","jsx","Label","cn"],"mappings":";;;;;;;;AAWO,MAAM,YAAYA,WAAA,WAGvB,CAAC,OAAO,QAAQ;AAChB,QAAM,EAAE,OAAO,WAAW,IAAIC,uCAAa;AAGzC,SAAAC,2BAAA,kBAAA;AAAA,IAACC,uBAAA;AAAA,IAAA;AAAA,MACC,WAAWC,SAAAA,GAAG,SAAS,iCAAiC;AAAA,MACxD;AAAA,MACA,SAAS;AAAA,MACR,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;AACD,UAAU,cAAc;;"}
+{"version":3,"file":"FormLabel.cjs","sources":["../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  type ElementRef,\n  type ComponentPropsWithoutRef,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Label } from '../Label';\nimport { useFormField } from './FormField';\n\nexport const FormLabel = forwardRef<\n  ElementRef<typeof Label>,\n  ComponentPropsWithoutRef<typeof Label>\n>(({ className, ...props }, ref) => {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <Label\n      className={cn(\n        'mb-2',\n        error && 'text-error dark:text-error-dark',\n        className\n      )}\n      ref={ref}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n});\nFormLabel.displayName = 'FormLabel';\n"],"names":["forwardRef","useFormField","jsx","Label","cn"],"mappings":";;;;;;;;AAWa,MAAA,YAAYA,sBAGvB,CAAC,EAAE,WAAW,GAAG,SAAS,QAAQ;AAClC,QAAM,EAAE,OAAO,WAAW,IAAIC,uCAAa;AAGzC,SAAAC,2BAAA,kBAAA;AAAA,IAACC,uBAAA;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA;AAAA,QACT;AAAA,QACA,SAAS;AAAA,QACT;AAAA,MACF;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACR,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;AACD,UAAU,cAAc;;"}

package/dist/components/Form/FormLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.d.ts","sourceRoot":"","sources":["../../../src/components/Form/FormLabel.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,SAAS,mNAcpB,CAAC"}
+{"version":3,"file":"FormLabel.d.ts","sourceRoot":"","sources":["../../../src/components/Form/FormLabel.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,SAAS,mNAkBpB,CAAC"}

package/dist/components/Form/FormLabel.mjs

@@ -4,12 +4,16 @@ import { forwardRef } from "react";
 import { cn } from "../../utils/cn.mjs";
 import { Label } from "../Label/index.mjs";
 import { useFormField } from "./FormField.mjs";
-const FormLabel = forwardRef((props, ref) => {
+const FormLabel = forwardRef(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Label,
     {
-      className: cn(error && "text-error dark:text-error-dark"),
+      className: cn(
+        "mb-2",
+        error && "text-error dark:text-error-dark",
+        className
+      ),
       ref,
       htmlFor: formItemId,
       ...props

package/dist/components/Form/FormLabel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.mjs","sources":["../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  type ElementRef,\n  type ComponentPropsWithoutRef,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Label } from '../Label';\nimport { useFormField } from './FormField';\n\nexport const FormLabel = forwardRef<\n  ElementRef<typeof Label>,\n  ComponentPropsWithoutRef<typeof Label>\n>((props, ref) => {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <Label\n      className={cn(error && 'text-error dark:text-error-dark')}\n      ref={ref}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n});\nFormLabel.displayName = 'FormLabel';\n"],"names":["jsx"],"mappings":";;;;;;AAWO,MAAM,YAAY,WAGvB,CAAC,OAAO,QAAQ;AAChB,QAAM,EAAE,OAAO,WAAW,IAAI,aAAa;AAGzC,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,SAAS,iCAAiC;AAAA,MACxD;AAAA,MACA,SAAS;AAAA,MACR,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;AACD,UAAU,cAAc;"}
+{"version":3,"file":"FormLabel.mjs","sources":["../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  type ElementRef,\n  type ComponentPropsWithoutRef,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Label } from '../Label';\nimport { useFormField } from './FormField';\n\nexport const FormLabel = forwardRef<\n  ElementRef<typeof Label>,\n  ComponentPropsWithoutRef<typeof Label>\n>(({ className, ...props }, ref) => {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <Label\n      className={cn(\n        'mb-2',\n        error && 'text-error dark:text-error-dark',\n        className\n      )}\n      ref={ref}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n});\nFormLabel.displayName = 'FormLabel';\n"],"names":["jsx"],"mappings":";;;;;;AAWa,MAAA,YAAY,WAGvB,CAAC,EAAE,WAAW,GAAG,SAAS,QAAQ;AAClC,QAAM,EAAE,OAAO,WAAW,IAAI,aAAa;AAGzC,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,SAAS;AAAA,QACT;AAAA,MACF;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACR,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;AACD,UAAU,cAAc;"}

package/dist/components/Form/elements/EditableFieldInputElement.d.ts

@@ -3,7 +3,7 @@ import { EditableFieldInput } from '../../EditableField/EditableFieldInput';
 import { FormElementProps } from './FormElement';
 type EditableFieldInputElementProps = Omit<FormElementProps<typeof EditableFieldInput>, 'Element'> & Omit<ComponentProps<typeof EditableFieldInput>, 'onChange'> & {
     name: string;
-    description?: string;
+    description?: ReactNode;
     placeholder?: string;
     className?: string;
     children?: ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldInputElement.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/elements/EditableFieldInputElement.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnE,KAAK,8BAA8B,GAAG,IAAI,CACxC,gBAAgB,CAAC,OAAO,kBAAkB,CAAC,EAC3C,SAAS,CACV,GACC,IAAI,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,EAAE,UAAU,CAAC,GAAG;IAC5D,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,yBAAyB,UAC7B,8BAA8B,4CAQtC,CAAC"}
+{"version":3,"file":"EditableFieldInputElement.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/elements/EditableFieldInputElement.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnE,KAAK,8BAA8B,GAAG,IAAI,CACxC,gBAAgB,CAAC,OAAO,kBAAkB,CAAC,EAC3C,SAAS,CACV,GACC,IAAI,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,EAAE,UAAU,CAAC,GAAG;IAC5D,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEJ,eAAO,MAAM,yBAAyB,UAC7B,8BAA8B,4CAQtC,CAAC"}

package/dist/components/Form/elements/EditableFieldTextAreaElement.d.ts

@@ -3,7 +3,7 @@ import { EditableFieldTextArea } from '../../EditableField/EditableFieldTextArea
 import { FormElementProps } from './FormElement';
 type EditableFieldTextAreaElementProps = Omit<FormElementProps<typeof EditableFieldTextArea>, 'Element'> & Omit<ComponentProps<typeof EditableFieldTextArea>, 'onChange'> & {
     name: string;
-    description?: string;
+    description?: ReactNode;
     placeholder?: string;
     className?: string;
     children?: ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldTextAreaElement.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/elements/EditableFieldTextAreaElement.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AAClF,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnE,KAAK,iCAAiC,GAAG,IAAI,CAC3C,gBAAgB,CAAC,OAAO,qBAAqB,CAAC,EAC9C,SAAS,CACV,GACC,IAAI,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,EAAE,UAAU,CAAC,GAAG;IAC/D,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,4BAA4B,UAChC,iCAAiC,4CAQzC,CAAC"}
+{"version":3,"file":"EditableFieldTextAreaElement.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/elements/EditableFieldTextAreaElement.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AAClF,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnE,KAAK,iCAAiC,GAAG,IAAI,CAC3C,gBAAgB,CAAC,OAAO,qBAAqB,CAAC,EAC9C,SAAS,CACV,GACC,IAAI,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,EAAE,UAAU,CAAC,GAAG;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEJ,eAAO,MAAM,4BAA4B,UAChC,iCAAiC,4CAQzC,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":"AACA,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,yFASvB,mBAAmB,4CAiCrB,CAAC"}
+{"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,yFASvB,mBAAmB,4CAgCrB,CAAC"}

package/dist/components/Headers/index.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../jsx-runtime-XHKiWCTo.cjs");
 const utils_cn = require("../../utils/cn.cjs");
-const styledHeading = `relative scroll-m-8 scroll-p-8`;
+const styledHeading = `relative scroll-mb-8 scroll-mt-[30vh] scroll-p-8`;
 const styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:hover:cursor-pointer dark:after:text-neutral-dark after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;
 const StyledH1 = ({
   className,

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Headers/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, MouseEvent } from 'react';\nimport { cn } from '../../utils/cn';\n\nconst styledHeading = `relative scroll-m-8 scroll-p-8`;\nconst styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:hover:cursor-pointer dark:after:text-neutral-dark after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;\n\nconst StyledH1: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h1 className={cn('mt-5 text-2xl font-bold', className)} {...props} />\n);\n\nconst StyledH2: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h2\n    className={cn('mt-5 text-2xl font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH3: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h3\n    className={cn('mt-3 text-xl font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH4: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h4\n    className={cn('mt-3 text-lg font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH5: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h5\n    className={cn('mt-3 text-base font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\ntype HeadingProps = HTMLAttributes<HTMLHeadingElement> & {\n  isClickable?: boolean;\n};\ntype HeadingGlobalProps = HeadingProps & {\n  H: FC<HTMLAttributes<HTMLHeadingElement>>;\n};\ntype HeadingType = (props: HeadingGlobalProps) => JSX.Element;\n\nconst getId = (children: string) =>\n  String(children)\n    // replace accents\n    .normalize('NFD')\n    .replace(/[\\u0300-\\u036f]/g, '')\n    // replace spaces\n    .replace(/\\s+/g, '-')\n    .toLowerCase();\n\nconst scrollToHash = (id: string) => {\n  const element = document.getElementById(id);\n  const offset = 150;\n  const y =\n    (element?.getBoundingClientRect()?.top ?? 0) + window.scrollY - offset;\n\n  window.scrollTo({ top: y, behavior: 'smooth' });\n};\n\nconst afterClick = (parentElem: Element, e: MouseEvent<HTMLHeadingElement>) => {\n  const parentLeft = parentElem.getBoundingClientRect().left,\n    parentTop = parentElem.getBoundingClientRect().top;\n\n  const after = window.getComputedStyle(parentElem, ':after');\n\n  const afterStart = parentLeft + parseInt(after.getPropertyValue('left'), 10),\n    afterEnd = afterStart + parseInt(after.width, 10);\n\n  const afterYStart = parentTop + parseInt(after.getPropertyValue('top'), 10),\n    afterYEnd = afterYStart + parseInt(after.height, 10);\n\n  const mouseX = e.clientX,\n    mouseY = e.clientY;\n\n  const isAfterClicked: boolean =\n    mouseX >= afterStart &&\n    mouseX <= afterEnd &&\n    mouseY >= afterYStart &&\n    mouseY <= afterYEnd;\n\n  return isAfterClicked;\n};\n\nconst HeadingWrapper: HeadingType = ({\n  H,\n  children,\n  className,\n  isClickable,\n  ...props\n}) => {\n  const id = typeof children === 'string' ? getId(children) : undefined;\n\n  const onClick = (e: MouseEvent<HTMLHeadingElement>) => {\n    const { id } = e.currentTarget;\n\n    const isAfterClicker = afterClick(e.currentTarget, e);\n\n    if (isAfterClicker && typeof id === 'string') {\n      const urlWithoutHash = window.location.href.split('#')[0];\n      const url = `${urlWithoutHash}#${id}`;\n\n      // copy the url to the clipboard\n      navigator.clipboard.writeText(url);\n\n      scrollToHash(id);\n    }\n  };\n\n  return (\n    <H\n      id={id}\n      onClick={isClickable ? onClick : undefined}\n      aria-label={\n        isClickable\n          ? `Click to scroll to section ${id} and copy the link to the clipboard`\n          : undefined\n      }\n      className={cn(isClickable && styledAfter, className)}\n      {...props}\n    >\n      {children}\n    </H>\n  );\n};\n\nexport const H1: FC<HeadingProps> = ({ isClickable: _, ...props }) => (\n  <StyledH1 {...props} />\n);\n\nexport const H2: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH2} isClickable={isClickable} {...props} />\n);\nexport const H3: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH3} isClickable={isClickable} {...props} />\n);\nexport const H4: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH4} isClickable={isClickable} {...props} />\n);\nexport const H5: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH5} isClickable={isClickable} {...props} />\n);\n"],"names":["jsx","cn","id"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Headers/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, MouseEvent } from 'react';\nimport { cn } from '../../utils/cn';\n\nconst styledHeading = `relative scroll-mb-8 scroll-mt-[30vh] scroll-p-8`;\nconst styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:hover:cursor-pointer dark:after:text-neutral-dark after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;\n\nconst StyledH1: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h1 className={cn('mt-5 text-2xl font-bold', className)} {...props} />\n);\n\nconst StyledH2: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h2\n    className={cn('mt-5 text-2xl font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH3: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h3\n    className={cn('mt-3 text-xl font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH4: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h4\n    className={cn('mt-3 text-lg font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH5: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h5\n    className={cn('mt-3 text-base font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\ntype HeadingProps = HTMLAttributes<HTMLHeadingElement> & {\n  isClickable?: boolean;\n};\ntype HeadingGlobalProps = HeadingProps & {\n  H: FC<HTMLAttributes<HTMLHeadingElement>>;\n};\ntype HeadingType = (props: HeadingGlobalProps) => JSX.Element;\n\nconst getId = (children: string) =>\n  String(children)\n    // replace accents\n    .normalize('NFD')\n    .replace(/[\\u0300-\\u036f]/g, '')\n    // replace spaces\n    .replace(/\\s+/g, '-')\n    .toLowerCase();\n\nconst scrollToHash = (id: string) => {\n  const element = document.getElementById(id);\n  const offset = 150;\n  const y =\n    (element?.getBoundingClientRect()?.top ?? 0) + window.scrollY - offset;\n\n  window.scrollTo({ top: y, behavior: 'smooth' });\n};\n\nconst afterClick = (parentElem: Element, e: MouseEvent<HTMLHeadingElement>) => {\n  const parentLeft = parentElem.getBoundingClientRect().left,\n    parentTop = parentElem.getBoundingClientRect().top;\n\n  const after = window.getComputedStyle(parentElem, ':after');\n\n  const afterStart = parentLeft + parseInt(after.getPropertyValue('left'), 10),\n    afterEnd = afterStart + parseInt(after.width, 10);\n\n  const afterYStart = parentTop + parseInt(after.getPropertyValue('top'), 10),\n    afterYEnd = afterYStart + parseInt(after.height, 10);\n\n  const mouseX = e.clientX,\n    mouseY = e.clientY;\n\n  const isAfterClicked: boolean =\n    mouseX >= afterStart &&\n    mouseX <= afterEnd &&\n    mouseY >= afterYStart &&\n    mouseY <= afterYEnd;\n\n  return isAfterClicked;\n};\n\nconst HeadingWrapper: HeadingType = ({\n  H,\n  children,\n  className,\n  isClickable,\n  ...props\n}) => {\n  const id = typeof children === 'string' ? getId(children) : undefined;\n\n  const onClick = (e: MouseEvent<HTMLHeadingElement>) => {\n    const { id } = e.currentTarget;\n\n    const isAfterClicker = afterClick(e.currentTarget, e);\n\n    if (isAfterClicker && typeof id === 'string') {\n      const urlWithoutHash = window.location.href.split('#')[0];\n      const url = `${urlWithoutHash}#${id}`;\n\n      // copy the url to the clipboard\n      navigator.clipboard.writeText(url);\n\n      scrollToHash(id);\n    }\n  };\n\n  return (\n    <H\n      id={id}\n      onClick={isClickable ? onClick : undefined}\n      aria-label={\n        isClickable\n          ? `Click to scroll to section ${id} and copy the link to the clipboard`\n          : undefined\n      }\n      className={cn(isClickable && styledAfter, className)}\n      {...props}\n    >\n      {children}\n    </H>\n  );\n};\n\nexport const H1: FC<HeadingProps> = ({ isClickable: _, ...props }) => (\n  <StyledH1 {...props} />\n);\n\nexport const H2: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH2} isClickable={isClickable} {...props} />\n);\nexport const H3: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH3} isClickable={isClickable} {...props} />\n);\nexport const H4: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH4} isClickable={isClickable} {...props} />\n);\nexport const H5: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH5} isClickable={isClickable} {...props} />\n);\n"],"names":["jsx","cn","id"],"mappings":"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"}

package/dist/components/Headers/index.mjs

@@ -1,6 +1,6 @@
 import { j as jsxRuntimeExports } from "../../jsx-runtime-DaNGiM0W.js";
 import { cn } from "../../utils/cn.mjs";
-const styledHeading = `relative scroll-m-8 scroll-p-8`;
+const styledHeading = `relative scroll-mb-8 scroll-mt-[30vh] scroll-p-8`;
 const styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:hover:cursor-pointer dark:after:text-neutral-dark after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;
 const StyledH1 = ({
   className,

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/Headers/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, MouseEvent } from 'react';\nimport { cn } from '../../utils/cn';\n\nconst styledHeading = `relative scroll-m-8 scroll-p-8`;\nconst styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:hover:cursor-pointer dark:after:text-neutral-dark after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;\n\nconst StyledH1: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h1 className={cn('mt-5 text-2xl font-bold', className)} {...props} />\n);\n\nconst StyledH2: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h2\n    className={cn('mt-5 text-2xl font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH3: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h3\n    className={cn('mt-3 text-xl font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH4: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h4\n    className={cn('mt-3 text-lg font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH5: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h5\n    className={cn('mt-3 text-base font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\ntype HeadingProps = HTMLAttributes<HTMLHeadingElement> & {\n  isClickable?: boolean;\n};\ntype HeadingGlobalProps = HeadingProps & {\n  H: FC<HTMLAttributes<HTMLHeadingElement>>;\n};\ntype HeadingType = (props: HeadingGlobalProps) => JSX.Element;\n\nconst getId = (children: string) =>\n  String(children)\n    // replace accents\n    .normalize('NFD')\n    .replace(/[\\u0300-\\u036f]/g, '')\n    // replace spaces\n    .replace(/\\s+/g, '-')\n    .toLowerCase();\n\nconst scrollToHash = (id: string) => {\n  const element = document.getElementById(id);\n  const offset = 150;\n  const y =\n    (element?.getBoundingClientRect()?.top ?? 0) + window.scrollY - offset;\n\n  window.scrollTo({ top: y, behavior: 'smooth' });\n};\n\nconst afterClick = (parentElem: Element, e: MouseEvent<HTMLHeadingElement>) => {\n  const parentLeft = parentElem.getBoundingClientRect().left,\n    parentTop = parentElem.getBoundingClientRect().top;\n\n  const after = window.getComputedStyle(parentElem, ':after');\n\n  const afterStart = parentLeft + parseInt(after.getPropertyValue('left'), 10),\n    afterEnd = afterStart + parseInt(after.width, 10);\n\n  const afterYStart = parentTop + parseInt(after.getPropertyValue('top'), 10),\n    afterYEnd = afterYStart + parseInt(after.height, 10);\n\n  const mouseX = e.clientX,\n    mouseY = e.clientY;\n\n  const isAfterClicked: boolean =\n    mouseX >= afterStart &&\n    mouseX <= afterEnd &&\n    mouseY >= afterYStart &&\n    mouseY <= afterYEnd;\n\n  return isAfterClicked;\n};\n\nconst HeadingWrapper: HeadingType = ({\n  H,\n  children,\n  className,\n  isClickable,\n  ...props\n}) => {\n  const id = typeof children === 'string' ? getId(children) : undefined;\n\n  const onClick = (e: MouseEvent<HTMLHeadingElement>) => {\n    const { id } = e.currentTarget;\n\n    const isAfterClicker = afterClick(e.currentTarget, e);\n\n    if (isAfterClicker && typeof id === 'string') {\n      const urlWithoutHash = window.location.href.split('#')[0];\n      const url = `${urlWithoutHash}#${id}`;\n\n      // copy the url to the clipboard\n      navigator.clipboard.writeText(url);\n\n      scrollToHash(id);\n    }\n  };\n\n  return (\n    <H\n      id={id}\n      onClick={isClickable ? onClick : undefined}\n      aria-label={\n        isClickable\n          ? `Click to scroll to section ${id} and copy the link to the clipboard`\n          : undefined\n      }\n      className={cn(isClickable && styledAfter, className)}\n      {...props}\n    >\n      {children}\n    </H>\n  );\n};\n\nexport const H1: FC<HeadingProps> = ({ isClickable: _, ...props }) => (\n  <StyledH1 {...props} />\n);\n\nexport const H2: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH2} isClickable={isClickable} {...props} />\n);\nexport const H3: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH3} isClickable={isClickable} {...props} />\n);\nexport const H4: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH4} isClickable={isClickable} {...props} />\n);\nexport const H5: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH5} isClickable={isClickable} {...props} />\n);\n"],"names":["jsx","id"],"mappings":";;AAGA,MAAM,gBAAgB;AACtB,MAAM,cAAc;AAEpB,MAAM,WAAmD,CAAC;AAAA,EACxD;AAAA,EACA,GAAG;AACL;AAAA;AAAA,EAEEA,sCAAC,QAAG,WAAW,GAAG,2BAA2B,SAAS,GAAI,GAAG,MAAO,CAAA;AAAA;AAGtE,MAAM,WAAmD,CAAC;AAAA,EACxD;AAAA,EACA,GAAG;AACL;AAAA;AAAA,EAEEA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,2BAA2B,eAAe,SAAS;AAAA,MAChE,GAAG;AAAA,IAAA;AAAA,EAAA;AAAA;AAIR,MAAM,WAAmD,CAAC;AAAA,EACxD;AAAA,EACA,GAAG;AACL;AAAA;AAAA,EAEEA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,0BAA0B,eAAe,SAAS;AAAA,MAC/D,GAAG;AAAA,IAAA;AAAA,EAAA;AAAA;AAIR,MAAM,WAAmD,CAAC;AAAA,EACxD;AAAA,EACA,GAAG;AACL;AAAA;AAAA,EAEEA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,0BAA0B,eAAe,SAAS;AAAA,MAC/D,GAAG;AAAA,IAAA;AAAA,EAAA;AAAA;AAIR,MAAM,WAAmD,CAAC;AAAA,EACxD;AAAA,EACA,GAAG;AACL;AAAA;AAAA,EAEEA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,4BAA4B,eAAe,SAAS;AAAA,MACjE,GAAG;AAAA,IAAA;AAAA,EAAA;AAAA;AAYR,MAAM,QAAQ,CAAC,aACb,OAAO,QAAQ,EAEZ,UAAU,KAAK,EACf,QAAQ,oBAAoB,EAAE,EAE9B,QAAQ,QAAQ,GAAG,EACnB,YAAY;AAEjB,MAAM,eAAe,CAAC,OAAe;AAC7B,QAAA,UAAU,SAAS,eAAe,EAAE;AAC1C,QAAM,SAAS;AACf,QAAM,KACH,SAAS,sBAAA,GAAyB,OAAO,KAAK,OAAO,UAAU;AAElE,SAAO,SAAS,EAAE,KAAK,GAAG,UAAU,UAAU;AAChD;AAEA,MAAM,aAAa,CAAC,YAAqB,MAAsC;AACvE,QAAA,aAAa,WAAW,sBAAsB,EAAE,MACpD,YAAY,WAAW,wBAAwB;AAEjD,QAAM,QAAQ,OAAO,iBAAiB,YAAY,QAAQ;AAE1D,QAAM,aAAa,aAAa,SAAS,MAAM,iBAAiB,MAAM,GAAG,EAAE,GACzE,WAAW,aAAa,SAAS,MAAM,OAAO,EAAE;AAElD,QAAM,cAAc,YAAY,SAAS,MAAM,iBAAiB,KAAK,GAAG,EAAE,GACxE,YAAY,cAAc,SAAS,MAAM,QAAQ,EAAE;AAErD,QAAM,SAAS,EAAE,SACf,SAAS,EAAE;AAEb,QAAM,iBACJ,UAAU,cACV,UAAU,YACV,UAAU,eACV,UAAU;AAEL,SAAA;AACT;AAEA,MAAM,iBAA8B,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,KAAK,OAAO,aAAa,WAAW,MAAM,QAAQ,IAAI;AAEtD,QAAA,UAAU,CAAC,MAAsC;AACrD,UAAM,EAAE,IAAAC,IAAG,IAAI,EAAE;AAEjB,UAAM,iBAAiB,WAAW,EAAE,eAAe,CAAC;AAEhD,QAAA,kBAAkB,OAAOA,QAAO,UAAU;AAC5C,YAAM,iBAAiB,OAAO,SAAS,KAAK,MAAM,GAAG,EAAE,CAAC;AACxD,YAAM,MAAM,GAAG,cAAc,IAAIA,GAAE;AAGzB,gBAAA,UAAU,UAAU,GAAG;AAEjC,mBAAaA,GAAE;AAAA,IAAA;AAAA,EAEnB;AAGE,SAAAD,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS,cAAc,UAAU;AAAA,MACjC,cACE,cACI,8BAA8B,EAAE,wCAChC;AAAA,MAEN,WAAW,GAAG,eAAe,aAAa,SAAS;AAAA,MAClD,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;AAEa,MAAA,KAAuB,CAAC,EAAE,aAAa,GAAG,GAAG,MACxD,MAAAA,sCAAC,UAAU,EAAA,GAAG,MAAO,CAAA;AAGhB,MAAM,KAAuB,CAAC,EAAE,cAAc,OAAO,GAAG,MAC7D,MAAAA,sCAAC,gBAAe,EAAA,GAAG,UAAU,aAA2B,GAAG,MAAO,CAAA;AAE7D,MAAM,KAAuB,CAAC,EAAE,cAAc,OAAO,GAAG,MAC7D,MAAAA,sCAAC,gBAAe,EAAA,GAAG,UAAU,aAA2B,GAAG,MAAO,CAAA;AAE7D,MAAM,KAAuB,CAAC,EAAE,cAAc,OAAO,GAAG,MAC7D,MAAAA,sCAAC,gBAAe,EAAA,GAAG,UAAU,aAA2B,GAAG,MAAO,CAAA;AAE7D,MAAM,KAAuB,CAAC,EAAE,cAAc,OAAO,GAAG,MAC7D,MAAAA,sCAAC,gBAAe,EAAA,GAAG,UAAU,aAA2B,GAAG,MAAO,CAAA;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/Headers/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, MouseEvent } from 'react';\nimport { cn } from '../../utils/cn';\n\nconst styledHeading = `relative scroll-mb-8 scroll-mt-[30vh] scroll-p-8`;\nconst styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:hover:cursor-pointer dark:after:text-neutral-dark after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;\n\nconst StyledH1: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h1 className={cn('mt-5 text-2xl font-bold', className)} {...props} />\n);\n\nconst StyledH2: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h2\n    className={cn('mt-5 text-2xl font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH3: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h3\n    className={cn('mt-3 text-xl font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH4: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h4\n    className={cn('mt-3 text-lg font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH5: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h5\n    className={cn('mt-3 text-base font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\ntype HeadingProps = HTMLAttributes<HTMLHeadingElement> & {\n  isClickable?: boolean;\n};\ntype HeadingGlobalProps = HeadingProps & {\n  H: FC<HTMLAttributes<HTMLHeadingElement>>;\n};\ntype HeadingType = (props: HeadingGlobalProps) => JSX.Element;\n\nconst getId = (children: string) =>\n  String(children)\n    // replace accents\n    .normalize('NFD')\n    .replace(/[\\u0300-\\u036f]/g, '')\n    // replace spaces\n    .replace(/\\s+/g, '-')\n    .toLowerCase();\n\nconst scrollToHash = (id: string) => {\n  const element = document.getElementById(id);\n  const offset = 150;\n  const y =\n    (element?.getBoundingClientRect()?.top ?? 0) + window.scrollY - offset;\n\n  window.scrollTo({ top: y, behavior: 'smooth' });\n};\n\nconst afterClick = (parentElem: Element, e: MouseEvent<HTMLHeadingElement>) => {\n  const parentLeft = parentElem.getBoundingClientRect().left,\n    parentTop = parentElem.getBoundingClientRect().top;\n\n  const after = window.getComputedStyle(parentElem, ':after');\n\n  const afterStart = parentLeft + parseInt(after.getPropertyValue('left'), 10),\n    afterEnd = afterStart + parseInt(after.width, 10);\n\n  const afterYStart = parentTop + parseInt(after.getPropertyValue('top'), 10),\n    afterYEnd = afterYStart + parseInt(after.height, 10);\n\n  const mouseX = e.clientX,\n    mouseY = e.clientY;\n\n  const isAfterClicked: boolean =\n    mouseX >= afterStart &&\n    mouseX <= afterEnd &&\n    mouseY >= afterYStart &&\n    mouseY <= afterYEnd;\n\n  return isAfterClicked;\n};\n\nconst HeadingWrapper: HeadingType = ({\n  H,\n  children,\n  className,\n  isClickable,\n  ...props\n}) => {\n  const id = typeof children === 'string' ? getId(children) : undefined;\n\n  const onClick = (e: MouseEvent<HTMLHeadingElement>) => {\n    const { id } = e.currentTarget;\n\n    const isAfterClicker = afterClick(e.currentTarget, e);\n\n    if (isAfterClicker && typeof id === 'string') {\n      const urlWithoutHash = window.location.href.split('#')[0];\n      const url = `${urlWithoutHash}#${id}`;\n\n      // copy the url to the clipboard\n      navigator.clipboard.writeText(url);\n\n      scrollToHash(id);\n    }\n  };\n\n  return (\n    <H\n      id={id}\n      onClick={isClickable ? onClick : undefined}\n      aria-label={\n        isClickable\n          ? `Click to scroll to section ${id} and copy the link to the clipboard`\n          : undefined\n      }\n      className={cn(isClickable && styledAfter, className)}\n      {...props}\n    >\n      {children}\n    </H>\n  );\n};\n\nexport const H1: FC<HeadingProps> = ({ isClickable: _, ...props }) => (\n  <StyledH1 {...props} />\n);\n\nexport const H2: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH2} isClickable={isClickable} {...props} />\n);\nexport const H3: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH3} isClickable={isClickable} {...props} />\n);\nexport const H4: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH4} isClickable={isClickable} {...props} />\n);\nexport const H5: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH5} isClickable={isClickable} {...props} />\n);\n"],"names":["jsx","id"],"mappings":"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"}