@intlayer/design-system 3.5.3 → 3.5.5

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/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":"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"}
+{"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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"}

package/dist/components/IDE/CodeRender copy.cjs

@@ -0,0 +1,141 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../jsx-runtime-XHKiWCTo.cjs");
+const react = require("@monaco-editor/react");
+const lucideReact = require("lucide-react");
+const require$$0 = require("react");
+const CopyToClipboard = require("react-copy-to-clipboard");
+const utils_cn = require("../../utils/cn.cjs");
+const components_Button_Button = require("../Button/Button.cjs");
+const components_Loader_index = require("../Loader/index.cjs");
+const MonacoCode = ({
+  children,
+  language,
+  isDarkMode,
+  showLineNumbers,
+  showCopyButton = true,
+  isReadOnly = false,
+  onChange
+}) => {
+  const [copied, setCopied] = require$$0.useState(false);
+  const containerRef = require$$0.useRef(null);
+  const ideRef = require$$0.useRef(null);
+  const [editorSize, setEditorSize] = require$$0.useState({ height: 0, width: 0 });
+  require$$0.useEffect(() => {
+    const timer = setTimeout(() => {
+      setCopied(false);
+    }, 1e3);
+    return () => clearTimeout(timer);
+  }, [copied]);
+  const handleMountIde = require$$0.useCallback(
+    (editor, monaco) => {
+      ideRef.current = editor;
+      const contentHeight = (editor.getContentHeight() ?? 0) + 25;
+      monaco.editor.defineTheme("transparent-theme", {
+        base: isDarkMode ? "vs-dark" : "vs",
+        inherit: true,
+        rules: [],
+        colors: {
+          "editor.background": "#00000000"
+        }
+      });
+      monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+        noSemanticValidation: true,
+        // Disables type checking
+        noSyntaxValidation: true
+        // Disables syntax errors
+      });
+      monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+        noSemanticValidation: true,
+        noSyntaxValidation: true
+      });
+      monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+        noLib: true,
+        allowNonTsExtensions: true
+      });
+      monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+        noLib: true,
+        allowNonTsExtensions: true
+      });
+      setEditorSize({
+        height: contentHeight,
+        width: containerRef.current?.clientWidth ?? 0
+      });
+    },
+    [isDarkMode]
+  );
+  const isShowLineNumbers = showLineNumbers ?? children.split("\n").length > 1;
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: utils_cn.cn(
+        "relative h-full w-full text-sm",
+        showLineNumbers && "ml-0"
+      ),
+      children: [
+        showCopyButton && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(CopyToClipboard, { text: children, onCopy: () => setCopied(true), children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          components_Button_Button.Button,
+          {
+            className: utils_cn.cn(
+              "absolute right-3 top-3 z-50",
+              copied && "!text-success/70 !dark:text-success-dark/70"
+            ),
+            label: "Cpoy code",
+            variant: "hoverable",
+            color: "text",
+            size: "icon-sm",
+            Icon: copied ? lucideReact.CopyCheckIcon : lucideReact.CopyIcon
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "grid size-full grid-cols-[0px] overflow-auto",
+            ref: containerRef,
+            children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+              react.Editor,
+              {
+                ...editorSize,
+                defaultLanguage: "typescript",
+                language,
+                loading: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_Loader_index.Loader, {}),
+                defaultValue: String(children).replace(/\n$/, ""),
+                onMount: handleMountIde,
+                onChange,
+                options: {
+                  readOnly: isReadOnly,
+                  cursorStyle: "line",
+                  minimap: { enabled: false },
+                  scrollbar: {
+                    vertical: "hidden",
+                    verticalScrollbarSize: 0,
+                    alwaysConsumeMouseWheel: false
+                  },
+                  folding: false,
+                  // Disable code folding
+                  renderValidationDecorations: "off",
+                  // Disable error/warning decorations
+                  quickSuggestions: false,
+                  // Disable IntelliSense
+                  parameterHints: { enabled: false },
+                  // Disable parameter hints
+                  suggestOnTriggerCharacters: false,
+                  // Disable suggestions on typing
+                  mouseWheelScrollSensitivity: 0,
+                  fastScrollSensitivity: 0,
+                  scrollBeyondLastLine: false,
+                  lineNumbers: isShowLineNumbers ? "on" : "off"
+                },
+                theme: "transparent-theme",
+                className: "my-2 rounded-md"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+exports.MonacoCode = MonacoCode;
+//# sourceMappingURL=CodeRender copy.cjs.map

package/dist/components/IDE/CodeRender copy.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeRender copy.cjs","sources":["../../../src/components/IDE/CodeRender copy.tsx"],"sourcesContent":["'use client';\n\nimport { Editor, OnChange, OnMount } from '@monaco-editor/react';\nimport { CopyCheckIcon, CopyIcon } from 'lucide-react';\nimport { type FC, useEffect, useState, useRef, useCallback } from 'react';\nimport CopyToClipboard from 'react-copy-to-clipboard';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { Loader } from '../Loader';\n\ntype CodeCompProps = {\n  children: string;\n  language: string;\n  isDarkMode?: boolean;\n  showLineNumbers?: boolean;\n  showCopyButton?: boolean;\n  isReadOnly?: boolean;\n  onChange?: OnChange;\n};\n\nexport const MonacoCode: FC<CodeCompProps> = ({\n  children,\n  language,\n  isDarkMode,\n  showLineNumbers,\n  showCopyButton = true,\n  isReadOnly = false,\n  onChange,\n}) => {\n  const [copied, setCopied] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const ideRef = useRef(null);\n  const [editorSize, setEditorSize] = useState<{\n    height: number;\n    width: number;\n  }>({ height: 0, width: 0 });\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setCopied(false);\n    }, 1000);\n    return () => clearTimeout(timer);\n  }, [copied]);\n\n  const handleMountIde: OnMount = useCallback(\n    (editor, monaco) => {\n      // first time you set the height based on content Height\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      ideRef.current = editor as any;\n      const contentHeight = (editor.getContentHeight() ?? 0) + 25;\n\n      monaco.editor.defineTheme('transparent-theme', {\n        base: isDarkMode ? 'vs-dark' : 'vs',\n        inherit: true,\n        rules: [],\n        colors: {\n          'editor.background': '#00000000',\n        },\n      });\n\n      // Disable TypeScript diagnostics\n      monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({\n        noSemanticValidation: true, // Disables type checking\n        noSyntaxValidation: true, // Disables syntax errors\n      });\n\n      // Disable JavaScript diagnostics\n      monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({\n        noSemanticValidation: true,\n        noSyntaxValidation: true,\n      });\n\n      // Disable unnecessary language features (e.g., suggestions, quick fixes)\n      monaco.languages.typescript.typescriptDefaults.setCompilerOptions({\n        noLib: true,\n        allowNonTsExtensions: true,\n      });\n\n      monaco.languages.typescript.javascriptDefaults.setCompilerOptions({\n        noLib: true,\n        allowNonTsExtensions: true,\n      });\n\n      setEditorSize({\n        height: contentHeight,\n        width: containerRef.current?.clientWidth ?? 0,\n      });\n    },\n    [isDarkMode]\n  );\n\n  const isShowLineNumbers = showLineNumbers ?? children.split('\\n').length > 1;\n\n  return (\n    <div\n      className={cn(\n        'relative h-full w-full text-sm',\n        showLineNumbers && 'ml-0'\n      )}\n    >\n      {showCopyButton && (\n        <CopyToClipboard text={children} onCopy={() => setCopied(true)}>\n          <Button\n            className={cn(\n              'absolute right-3 top-3 z-50',\n              copied && '!text-success/70 !dark:text-success-dark/70'\n            )}\n            label=\"Cpoy code\"\n            variant=\"hoverable\"\n            color=\"text\"\n            size=\"icon-sm\"\n            Icon={copied ? CopyCheckIcon : CopyIcon}\n          />\n        </CopyToClipboard>\n      )}\n      <div\n        className=\"grid size-full grid-cols-[0px] overflow-auto\"\n        ref={containerRef}\n      >\n        <Editor\n          {...editorSize}\n          defaultLanguage=\"typescript\"\n          language={language}\n          loading={<Loader />}\n          defaultValue={String(children).replace(/\\n$/, '')}\n          onMount={handleMountIde}\n          onChange={onChange}\n          options={{\n            readOnly: isReadOnly,\n            cursorStyle: 'line',\n            minimap: { enabled: false },\n            scrollbar: {\n              vertical: 'hidden',\n              verticalScrollbarSize: 0,\n              alwaysConsumeMouseWheel: false,\n            },\n            folding: false, // Disable code folding\n            renderValidationDecorations: 'off', // Disable error/warning decorations\n            quickSuggestions: false, // Disable IntelliSense\n            parameterHints: { enabled: false }, // Disable parameter hints\n            suggestOnTriggerCharacters: false, // Disable suggestions on typing\n\n            mouseWheelScrollSensitivity: 0,\n            fastScrollSensitivity: 0,\n            scrollBeyondLastLine: false,\n            lineNumbers: isShowLineNumbers ? 'on' : 'off',\n          }}\n          theme=\"transparent-theme\"\n          className=\"my-2 rounded-md\"\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":["useState","useRef","useEffect","useCallback","jsxs","cn","jsx","Button","CopyCheckIcon","CopyIcon","Editor","Loader"],"mappings":"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"}

package/dist/components/IDE/CodeRender copy.d.ts

@@ -0,0 +1,14 @@
+import { OnChange } from '@monaco-editor/react';
+import { FC } from 'react';
+type CodeCompProps = {
+    children: string;
+    language: string;
+    isDarkMode?: boolean;
+    showLineNumbers?: boolean;
+    showCopyButton?: boolean;
+    isReadOnly?: boolean;
+    onChange?: OnChange;
+};
+export declare const MonacoCode: FC<CodeCompProps>;
+export {};
+//# sourceMappingURL=CodeRender%20copy.d.ts.map

package/dist/components/IDE/CodeRender copy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeRender copy.d.ts","sourceRoot":"","sources":["../../../src/components/IDE/CodeRender copy.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,QAAQ,EAAW,MAAM,sBAAsB,CAAC;AAEjE,OAAO,EAAE,KAAK,EAAE,EAA4C,MAAM,OAAO,CAAC;AAM1E,KAAK,aAAa,GAAG;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,aAAa,CAqIxC,CAAC"}

package/dist/components/IDE/CodeRender copy.mjs

@@ -0,0 +1,141 @@
+"use client";
+import { j as jsxRuntimeExports } from "../../jsx-runtime-DaNGiM0W.js";
+import { Editor } from "@monaco-editor/react";
+import { CopyCheckIcon, CopyIcon } from "lucide-react";
+import { useState, useRef, useEffect, useCallback } from "react";
+import CopyToClipboard from "react-copy-to-clipboard";
+import { cn } from "../../utils/cn.mjs";
+import { Button } from "../Button/Button.mjs";
+import { Loader } from "../Loader/index.mjs";
+const MonacoCode = ({
+  children,
+  language,
+  isDarkMode,
+  showLineNumbers,
+  showCopyButton = true,
+  isReadOnly = false,
+  onChange
+}) => {
+  const [copied, setCopied] = useState(false);
+  const containerRef = useRef(null);
+  const ideRef = useRef(null);
+  const [editorSize, setEditorSize] = useState({ height: 0, width: 0 });
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setCopied(false);
+    }, 1e3);
+    return () => clearTimeout(timer);
+  }, [copied]);
+  const handleMountIde = useCallback(
+    (editor, monaco) => {
+      ideRef.current = editor;
+      const contentHeight = (editor.getContentHeight() ?? 0) + 25;
+      monaco.editor.defineTheme("transparent-theme", {
+        base: isDarkMode ? "vs-dark" : "vs",
+        inherit: true,
+        rules: [],
+        colors: {
+          "editor.background": "#00000000"
+        }
+      });
+      monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+        noSemanticValidation: true,
+        // Disables type checking
+        noSyntaxValidation: true
+        // Disables syntax errors
+      });
+      monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+        noSemanticValidation: true,
+        noSyntaxValidation: true
+      });
+      monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+        noLib: true,
+        allowNonTsExtensions: true
+      });
+      monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+        noLib: true,
+        allowNonTsExtensions: true
+      });
+      setEditorSize({
+        height: contentHeight,
+        width: containerRef.current?.clientWidth ?? 0
+      });
+    },
+    [isDarkMode]
+  );
+  const isShowLineNumbers = showLineNumbers ?? children.split("\n").length > 1;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: cn(
+        "relative h-full w-full text-sm",
+        showLineNumbers && "ml-0"
+      ),
+      children: [
+        showCopyButton && /* @__PURE__ */ jsxRuntimeExports.jsx(CopyToClipboard, { text: children, onCopy: () => setCopied(true), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button,
+          {
+            className: cn(
+              "absolute right-3 top-3 z-50",
+              copied && "!text-success/70 !dark:text-success-dark/70"
+            ),
+            label: "Cpoy code",
+            variant: "hoverable",
+            color: "text",
+            size: "icon-sm",
+            Icon: copied ? CopyCheckIcon : CopyIcon
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "grid size-full grid-cols-[0px] overflow-auto",
+            ref: containerRef,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Editor,
+              {
+                ...editorSize,
+                defaultLanguage: "typescript",
+                language,
+                loading: /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, {}),
+                defaultValue: String(children).replace(/\n$/, ""),
+                onMount: handleMountIde,
+                onChange,
+                options: {
+                  readOnly: isReadOnly,
+                  cursorStyle: "line",
+                  minimap: { enabled: false },
+                  scrollbar: {
+                    vertical: "hidden",
+                    verticalScrollbarSize: 0,
+                    alwaysConsumeMouseWheel: false
+                  },
+                  folding: false,
+                  // Disable code folding
+                  renderValidationDecorations: "off",
+                  // Disable error/warning decorations
+                  quickSuggestions: false,
+                  // Disable IntelliSense
+                  parameterHints: { enabled: false },
+                  // Disable parameter hints
+                  suggestOnTriggerCharacters: false,
+                  // Disable suggestions on typing
+                  mouseWheelScrollSensitivity: 0,
+                  fastScrollSensitivity: 0,
+                  scrollBeyondLastLine: false,
+                  lineNumbers: isShowLineNumbers ? "on" : "off"
+                },
+                theme: "transparent-theme",
+                className: "my-2 rounded-md"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  MonacoCode
+};
+//# sourceMappingURL=CodeRender copy.mjs.map

package/dist/components/IDE/CodeRender copy.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeRender copy.mjs","sources":["../../../src/components/IDE/CodeRender copy.tsx"],"sourcesContent":["'use client';\n\nimport { Editor, OnChange, OnMount } from '@monaco-editor/react';\nimport { CopyCheckIcon, CopyIcon } from 'lucide-react';\nimport { type FC, useEffect, useState, useRef, useCallback } from 'react';\nimport CopyToClipboard from 'react-copy-to-clipboard';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { Loader } from '../Loader';\n\ntype CodeCompProps = {\n  children: string;\n  language: string;\n  isDarkMode?: boolean;\n  showLineNumbers?: boolean;\n  showCopyButton?: boolean;\n  isReadOnly?: boolean;\n  onChange?: OnChange;\n};\n\nexport const MonacoCode: FC<CodeCompProps> = ({\n  children,\n  language,\n  isDarkMode,\n  showLineNumbers,\n  showCopyButton = true,\n  isReadOnly = false,\n  onChange,\n}) => {\n  const [copied, setCopied] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const ideRef = useRef(null);\n  const [editorSize, setEditorSize] = useState<{\n    height: number;\n    width: number;\n  }>({ height: 0, width: 0 });\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setCopied(false);\n    }, 1000);\n    return () => clearTimeout(timer);\n  }, [copied]);\n\n  const handleMountIde: OnMount = useCallback(\n    (editor, monaco) => {\n      // first time you set the height based on content Height\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      ideRef.current = editor as any;\n      const contentHeight = (editor.getContentHeight() ?? 0) + 25;\n\n      monaco.editor.defineTheme('transparent-theme', {\n        base: isDarkMode ? 'vs-dark' : 'vs',\n        inherit: true,\n        rules: [],\n        colors: {\n          'editor.background': '#00000000',\n        },\n      });\n\n      // Disable TypeScript diagnostics\n      monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({\n        noSemanticValidation: true, // Disables type checking\n        noSyntaxValidation: true, // Disables syntax errors\n      });\n\n      // Disable JavaScript diagnostics\n      monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({\n        noSemanticValidation: true,\n        noSyntaxValidation: true,\n      });\n\n      // Disable unnecessary language features (e.g., suggestions, quick fixes)\n      monaco.languages.typescript.typescriptDefaults.setCompilerOptions({\n        noLib: true,\n        allowNonTsExtensions: true,\n      });\n\n      monaco.languages.typescript.javascriptDefaults.setCompilerOptions({\n        noLib: true,\n        allowNonTsExtensions: true,\n      });\n\n      setEditorSize({\n        height: contentHeight,\n        width: containerRef.current?.clientWidth ?? 0,\n      });\n    },\n    [isDarkMode]\n  );\n\n  const isShowLineNumbers = showLineNumbers ?? children.split('\\n').length > 1;\n\n  return (\n    <div\n      className={cn(\n        'relative h-full w-full text-sm',\n        showLineNumbers && 'ml-0'\n      )}\n    >\n      {showCopyButton && (\n        <CopyToClipboard text={children} onCopy={() => setCopied(true)}>\n          <Button\n            className={cn(\n              'absolute right-3 top-3 z-50',\n              copied && '!text-success/70 !dark:text-success-dark/70'\n            )}\n            label=\"Cpoy code\"\n            variant=\"hoverable\"\n            color=\"text\"\n            size=\"icon-sm\"\n            Icon={copied ? CopyCheckIcon : CopyIcon}\n          />\n        </CopyToClipboard>\n      )}\n      <div\n        className=\"grid size-full grid-cols-[0px] overflow-auto\"\n        ref={containerRef}\n      >\n        <Editor\n          {...editorSize}\n          defaultLanguage=\"typescript\"\n          language={language}\n          loading={<Loader />}\n          defaultValue={String(children).replace(/\\n$/, '')}\n          onMount={handleMountIde}\n          onChange={onChange}\n          options={{\n            readOnly: isReadOnly,\n            cursorStyle: 'line',\n            minimap: { enabled: false },\n            scrollbar: {\n              vertical: 'hidden',\n              verticalScrollbarSize: 0,\n              alwaysConsumeMouseWheel: false,\n            },\n            folding: false, // Disable code folding\n            renderValidationDecorations: 'off', // Disable error/warning decorations\n            quickSuggestions: false, // Disable IntelliSense\n            parameterHints: { enabled: false }, // Disable parameter hints\n            suggestOnTriggerCharacters: false, // Disable suggestions on typing\n\n            mouseWheelScrollSensitivity: 0,\n            fastScrollSensitivity: 0,\n            scrollBeyondLastLine: false,\n            lineNumbers: isShowLineNumbers ? 'on' : 'off',\n          }}\n          theme=\"transparent-theme\"\n          className=\"my-2 rounded-md\"\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":["jsxs","jsx"],"mappings":"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"}