npm - @intlayer/design-system - Versions diffs - 7.5.9 → 7.5.11 - Mend

@intlayer/design-system 7.5.9 → 7.5.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (282) hide show

package/dist/esm/components/Form/elements/SearchInputElement.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInputElement.mjs","names":["SearchInputElement: FC<SearchInputElementProps>"],"sources":["../../../../../src/components/Form/elements/SearchInputElement.tsx"],"sourcesContent":["import ~~type~~ { ~~ComponentProps,~~ FC } from '~~react~~';\nimport { ~~SearchInput~~ } from '~~../../../components/Input~~';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype SearchInputElementProps = Omit<\n FormElementProps<typeof SearchInput>,\n 'Element'\n> &\n Omit<\n ComponentProps<typeof SearchInput> & {\n name: string;\n },\n 'aria-label' \| 'aria-labelledby'\n >;\n\nexport const SearchInputElement: FC<SearchInputElementProps> = (props) => (\n <FormElement\n id={props.name}\n data-testid={props.name}\n Element={SearchInput}\n aria-labelledby={props.label ? `${props.name}-label` : undefined}\n aria-label={props.label ? undefined : props.name}\n {...props}\n />\n);\n"],"mappings":";;;;;AAeA,MAAaA,sBAAmD,UAC9D,oBAAC;CACC,IAAI,MAAM;CACV,eAAa,MAAM;CACnB,SAAS;CACT,mBAAiB,MAAM,QAAQ,GAAG,MAAM,KAAK,UAAU;CACvD,cAAY,MAAM,QAAQ,SAAY,MAAM;CAC5C,GAAI;EACJ"}
1	+ {"version":3,"file":"SearchInputElement.mjs","names":["SearchInputElement: FC<SearchInputElementProps>"],"sources":["../../../../../src/components/Form/elements/SearchInputElement.tsx"],"sourcesContent":["import { SearchInput } from '@components/Input';\nimport type { ComponentProps, FC } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype SearchInputElementProps = Omit<\n FormElementProps<typeof SearchInput>,\n 'Element'\n> &\n Omit<\n ComponentProps<typeof SearchInput> & {\n name: string;\n },\n 'aria-label' \| 'aria-labelledby'\n >;\n\nexport const SearchInputElement: FC<SearchInputElementProps> = (props) => (\n <FormElement\n id={props.name}\n data-testid={props.name}\n Element={SearchInput}\n aria-labelledby={props.label ? `${props.name}-label` : undefined}\n aria-label={props.label ? undefined : props.name}\n {...props}\n />\n);\n"],"mappings":";;;;;AAeA,MAAaA,sBAAmD,UAC9D,oBAAC;CACC,IAAI,MAAM;CACV,eAAa,MAAM;CACnB,SAAS;CACT,mBAAiB,MAAM,QAAQ,GAAG,MAAM,KAAK,UAAU;CACvD,cAAY,MAAM,QAAQ,SAAY,MAAM;CAC5C,GAAI;EACJ"}

package/dist/esm/components/Form/elements/SelectElement.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/SelectElement.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { ~~Select } from '../../Select/Select';\nimport {~~ Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype SelectElementsProps = Omit<FormElementProps<typeof Select>, 'Element'> &\n ComponentProps<typeof Select> & {\n name: string;\n description?: string;\n placeholder?: string;\n className?: string;\n children?: ReactNode;\n };\n\nconst SelectFieldContent = ({\n field,\n name,\n label,\n description,\n isRequired,\n info,\n showErrorMessage,\n children,\n ...props\n}: Omit<SelectElementsProps, 'control'> & { field: any }) => {\n const { error } = useFormField();\n\n return (\n <FormItemLayout\n htmlFor={name}\n label={label}\n description={description}\n isRequired={isRequired}\n info={info}\n showErrorMessage={showErrorMessage}\n aria-invalid={!!error}\n >\n <Select\n onValueChange={field.onChange}\n defaultValue={field.value}\n {...props}\n >\n {children}\n </Select>\n </FormItemLayout>\n );\n};\n\nexport const SelectElement = ({\n name,\n description,\n label,\n isRequired,\n info,\n showErrorMessage,\n children,\n ...props\n}: SelectElementsProps) => {\n const { control } = useFormContext();\n\n return (\n <Form.Field\n control={control}\n name={name}\n render={({ field }) => (\n <SelectFieldContent\n field={field}\n name={name}\n label={label}\n description={description}\n isRequired={isRequired}\n info={info}\n showErrorMessage={showErrorMessage}\n {...props}\n >\n {children}\n </SelectFieldContent>\n )}\n />\n );\n};\n"],"mappings":";;;;;;;;;;AAmBA,MAAM,sBAAsB,EAC1B,OACA,MACA,OACA,aACA,YACA,MACA,kBACA,UACA,GAAG,YACwD;CAC3D,MAAM,EAAE,UAAU,cAAc;AAEhC,QACE,oBAAC;EACC,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;YAEhB,oBAAC;GACC,eAAe,MAAM;GACrB,cAAc,MAAM;GACpB,GAAI;GAEH;IACM;GACM;;AAIrB,MAAa,iBAAiB,EAC5B,MACA,aACA,OACA,YACA,MACA,kBACA,UACA,GAAG,YACsB;CACzB,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK;EACK;EACH;EACN,SAAS,EAAE,YACT,oBAAC;GACQ;GACD;GACC;GACM;GACD;GACN;GACY;GAClB,GAAI;GAEH;IACkB;GAEvB"}
1	+ {"version":3,"file":"SelectElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/SelectElement.tsx"],"sourcesContent":["'use client';\n\nimport { Select } from '@components/Select/Select';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype SelectElementsProps = Omit<FormElementProps<typeof Select>, 'Element'> &\n ComponentProps<typeof Select> & {\n name: string;\n description?: string;\n placeholder?: string;\n className?: string;\n children?: ReactNode;\n };\n\nconst SelectFieldContent = ({\n field,\n name,\n label,\n description,\n isRequired,\n info,\n showErrorMessage,\n children,\n ...props\n}: Omit<SelectElementsProps, 'control'> & { field: any }) => {\n const { error } = useFormField();\n\n return (\n <FormItemLayout\n htmlFor={name}\n label={label}\n description={description}\n isRequired={isRequired}\n info={info}\n showErrorMessage={showErrorMessage}\n aria-invalid={!!error}\n >\n <Select\n onValueChange={field.onChange}\n defaultValue={field.value}\n {...props}\n >\n {children}\n </Select>\n </FormItemLayout>\n );\n};\n\nexport const SelectElement = ({\n name,\n description,\n label,\n isRequired,\n info,\n showErrorMessage,\n children,\n ...props\n}: SelectElementsProps) => {\n const { control } = useFormContext();\n\n return (\n <Form.Field\n control={control}\n name={name}\n render={({ field }) => (\n <SelectFieldContent\n field={field}\n name={name}\n label={label}\n description={description}\n isRequired={isRequired}\n info={info}\n showErrorMessage={showErrorMessage}\n {...props}\n >\n {children}\n </SelectFieldContent>\n )}\n />\n );\n};\n"],"mappings":";;;;;;;;;;AAmBA,MAAM,sBAAsB,EAC1B,OACA,MACA,OACA,aACA,YACA,MACA,kBACA,UACA,GAAG,YACwD;CAC3D,MAAM,EAAE,UAAU,cAAc;AAEhC,QACE,oBAAC;EACC,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;YAEhB,oBAAC;GACC,eAAe,MAAM;GACrB,cAAc,MAAM;GACpB,GAAI;GAEH;IACM;GACM;;AAIrB,MAAa,iBAAiB,EAC5B,MACA,aACA,OACA,YACA,MACA,kBACA,UACA,GAAG,YACsB;CACzB,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK;EACK;EACH;EACN,SAAS,EAAE,YACT,oBAAC;GACQ;GACD;GACC;GACM;GACD;GACN;GACY;GAClB,GAAI;GAEH;IACkB;GAEvB"}

package/dist/esm/components/Form/elements/SwitchSelectorElement.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SwitchSelectorElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/SwitchSelectorElement.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { ~~SwitchSelector } from '../../SwitchSelector';\nimport {~~ Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype SwitchSelectorElementProps = Omit<\n FormElementProps<typeof SwitchSelector>,\n 'Element'\n> &\n ComponentProps<typeof SwitchSelector> & {\n name: string;\n description?: string;\n placeholder?: string;\n className?: string;\n children?: ReactNode;\n };\n\nconst SwitchSelectorFieldContent = ({\n field,\n name,\n label,\n description,\n isRequired,\n info,\n showErrorMessage,\n children,\n ...props\n}: Omit<SwitchSelectorElementProps, 'control'> & { field: any }) => {\n const { error } = useFormField();\n\n return (\n <FormItemLayout\n htmlFor={name}\n label={label}\n description={description}\n isRequired={isRequired}\n info={info}\n showErrorMessage={showErrorMessage}\n aria-invalid={!!error}\n >\n <SwitchSelector {...field} {...props}>\n {children}\n </SwitchSelector>\n </FormItemLayout>\n );\n};\n\nexport const SwitchSelectorElement = ({\n name,\n description,\n label,\n isRequired,\n info,\n showErrorMessage,\n children,\n ...props\n}: SwitchSelectorElementProps) => {\n const { control } = useFormContext();\n\n return (\n <Form.Field\n control={control}\n name={name}\n render={({ field }) => (\n <SwitchSelectorFieldContent\n field={field}\n name={name}\n label={label}\n description={description}\n isRequired={isRequired}\n info={info}\n showErrorMessage={showErrorMessage}\n {...props}\n >\n {children}\n </SwitchSelectorFieldContent>\n )}\n />\n );\n};\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,8BAA8B,EAClC,OACA,MACA,OACA,aACA,YACA,MACA,kBACA,UACA,GAAG,YAC+D;CAClE,MAAM,EAAE,UAAU,cAAc;AAEhC,QACE,oBAAC;EACC,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;YAEhB,oBAAC;GAAe,GAAI;GAAO,GAAI;GAC5B;IACc;GACF;;AAIrB,MAAa,yBAAyB,EACpC,MACA,aACA,OACA,YACA,MACA,kBACA,UACA,GAAG,YAC6B;CAChC,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK;EACK;EACH;EACN,SAAS,EAAE,YACT,oBAAC;GACQ;GACD;GACC;GACM;GACD;GACN;GACY;GAClB,GAAI;GAEH;IAC0B;GAE/B"}
1	+ {"version":3,"file":"SwitchSelectorElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/SwitchSelectorElement.tsx"],"sourcesContent":["'use client';\n\nimport { SwitchSelector } from '@components/SwitchSelector';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype SwitchSelectorElementProps = Omit<\n FormElementProps<typeof SwitchSelector>,\n 'Element'\n> &\n ComponentProps<typeof SwitchSelector> & {\n name: string;\n description?: string;\n placeholder?: string;\n className?: string;\n children?: ReactNode;\n };\n\nconst SwitchSelectorFieldContent = ({\n field,\n name,\n label,\n description,\n isRequired,\n info,\n showErrorMessage,\n children,\n ...props\n}: Omit<SwitchSelectorElementProps, 'control'> & { field: any }) => {\n const { error } = useFormField();\n\n return (\n <FormItemLayout\n htmlFor={name}\n label={label}\n description={description}\n isRequired={isRequired}\n info={info}\n showErrorMessage={showErrorMessage}\n aria-invalid={!!error}\n >\n <SwitchSelector {...field} {...props}>\n {children}\n </SwitchSelector>\n </FormItemLayout>\n );\n};\n\nexport const SwitchSelectorElement = ({\n name,\n description,\n label,\n isRequired,\n info,\n showErrorMessage,\n children,\n ...props\n}: SwitchSelectorElementProps) => {\n const { control } = useFormContext();\n\n return (\n <Form.Field\n control={control}\n name={name}\n render={({ field }) => (\n <SwitchSelectorFieldContent\n field={field}\n name={name}\n label={label}\n description={description}\n isRequired={isRequired}\n info={info}\n showErrorMessage={showErrorMessage}\n {...props}\n >\n {children}\n </SwitchSelectorFieldContent>\n )}\n />\n );\n};\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,8BAA8B,EAClC,OACA,MACA,OACA,aACA,YACA,MACA,kBACA,UACA,GAAG,YAC+D;CAClE,MAAM,EAAE,UAAU,cAAc;AAEhC,QACE,oBAAC;EACC,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;YAEhB,oBAAC;GAAe,GAAI;GAAO,GAAI;GAC5B;IACc;GACF;;AAIrB,MAAa,yBAAyB,EACpC,MACA,aACA,OACA,YACA,MACA,kBACA,UACA,GAAG,YAC6B;CAChC,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK;EACK;EACH;EACN,SAAS,EAAE,YACT,oBAAC;GACQ;GACD;GACC;GACM;GACD;GACN;GACY;GAClB,GAAI;GAEH;IAC0B;GAE/B"}

package/dist/esm/components/Form/elements/TextAreaElement.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextAreaElement.mjs","names":["TextAreaElement: FC<TextAreaElementsProps>"],"sources":["../../../../../src/components/Form/elements/TextAreaElement.tsx"],"sourcesContent":["import ~~type~~ { ~~ComponentProps,~~ FC } from '~~react~~';\nimport { ~~TextArea~~ } from '~~../../TextArea/TextArea~~';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype TextAreaElementsProps = Omit<\n FormElementProps<typeof TextArea>,\n 'Element'\n> &\n Omit<\n ComponentProps<typeof TextArea> & {\n name: string;\n },\n 'aria-label' \| 'aria-labelledby'\n >;\n\nexport const TextAreaElement: FC<TextAreaElementsProps> = (props) => (\n <FormElement\n Element={TextArea}\n id={props.name}\n aria-labelledby={props.label ? `${props.name}-label` : undefined}\n aria-label={props.label ? undefined : props.name}\n data-testid={props.name}\n {...props}\n />\n);\n"],"mappings":";;;;;AAeA,MAAaA,mBAA8C,UACzD,oBAAC;CACC,SAAS;CACT,IAAI,MAAM;CACV,mBAAiB,MAAM,QAAQ,GAAG,MAAM,KAAK,UAAU;CACvD,cAAY,MAAM,QAAQ,SAAY,MAAM;CAC5C,eAAa,MAAM;CACnB,GAAI;EACJ"}
1	+ {"version":3,"file":"TextAreaElement.mjs","names":["TextAreaElement: FC<TextAreaElementsProps>"],"sources":["../../../../../src/components/Form/elements/TextAreaElement.tsx"],"sourcesContent":["import { TextArea } from '@components/TextArea/TextArea';\nimport type { ComponentProps, FC } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype TextAreaElementsProps = Omit<\n FormElementProps<typeof TextArea>,\n 'Element'\n> &\n Omit<\n ComponentProps<typeof TextArea> & {\n name: string;\n },\n 'aria-label' \| 'aria-labelledby'\n >;\n\nexport const TextAreaElement: FC<TextAreaElementsProps> = (props) => (\n <FormElement\n Element={TextArea}\n id={props.name}\n aria-labelledby={props.label ? `${props.name}-label` : undefined}\n aria-label={props.label ? undefined : props.name}\n data-testid={props.name}\n {...props}\n />\n);\n"],"mappings":";;;;;AAeA,MAAaA,mBAA8C,UACzD,oBAAC;CACC,SAAS;CACT,IAAI,MAAM;CACV,mBAAiB,MAAM,QAAQ,GAAG,MAAM,KAAK,UAAU;CACvD,cAAY,MAAM,QAAQ,SAAY,MAAM;CAC5C,eAAa,MAAM;CACnB,GAAI;EACJ"}

package/dist/esm/components/Form/layout/FormLabelLayout.mjs CHANGED Viewed

@@ -10,6 +10,7 @@ const FormLabelLayout = ({ children, isRequired, info, htmlFor, className }) =>
 	children: [children && /* @__PURE__ */ jsxs(FormLabel, {
 		htmlFor,
 		id: `${htmlFor}-label`,
+		suppressHydrationWarning: true,
 		className: clsx("font-bold", className),
 		children: [children, /* @__PURE__ */ jsx(RequiredStar, { isRequired })]
 	}), info && /* @__PURE__ */ jsx(InformationTag, { content: info })]

package/dist/esm/components/Form/layout/FormLabelLayout.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormLabelLayout.mjs","names":["FormLabelLayout: FC<FormLabelLayoutProps>"],"sources":["../../../../../src/components/Form/layout/FormLabelLayout.tsx"],"sourcesContent":["import { ~~clsx~~ } from '~~clsx~~';\nimport ~~type~~ { ~~FC,~~ ~~ReactNode~~ } from '~~react~~';\nimport { ~~InformationTag~~ } from '~~../../InformationTag~~';\nimport { FormLabel } from '../FormLabel';\nimport { RequiredStar } from './RequiredStar';\n\nexport type FormLabelLayoutProps = {\n children?: ReactNode;\n isRequired?: boolean;\n info?: string;\n htmlFor?: string;\n className?: string;\n};\n\nexport const FormLabelLayout: FC<FormLabelLayoutProps> = ({\n children,\n isRequired,\n info,\n htmlFor,\n className,\n}) => (\n <div className=\"ml-1 flex gap-1 align-middle text-base leading-none\">\n {children && (\n <FormLabel\n htmlFor={htmlFor}\n id={`${htmlFor}-label`}\n className={clsx('font-bold', className)}\n >\n {children}\n <RequiredStar isRequired={isRequired} />\n </FormLabel>\n )}\n {info && <InformationTag content={info} />}\n </div>\n);\n"],"mappings":";;;;;;;AAcA,MAAaA,mBAA6C,EACxD,UACA,YACA,MACA,SACA,gBAEA,qBAAC;CAAI,WAAU;YACZ,YACC,qBAAC;EACU;EACT,IAAI,GAAG,QAAQ;EACf,WAAW,KAAK,aAAa,UAAU;aAEtC,UACD,oBAAC,gBAAyB,aAAc;GAC9B,EAEb,QAAQ,oBAAC,kBAAe,SAAS,OAAQ;EACtC"}
1	+ {"version":3,"file":"FormLabelLayout.mjs","names":["FormLabelLayout: FC<FormLabelLayoutProps>"],"sources":["../../../../../src/components/Form/layout/FormLabelLayout.tsx"],"sourcesContent":["import { InformationTag } from '@components/InformationTag';\nimport { clsx } from 'clsx';\nimport type { FC, ReactNode } from 'react';\nimport { FormLabel } from '../FormLabel';\nimport { RequiredStar } from './RequiredStar';\n\nexport type FormLabelLayoutProps = {\n children?: ReactNode;\n isRequired?: boolean;\n info?: string;\n htmlFor?: string;\n className?: string;\n};\n\nexport const FormLabelLayout: FC<FormLabelLayoutProps> = ({\n children,\n isRequired,\n info,\n htmlFor,\n className,\n}) => (\n <div className=\"ml-1 flex gap-1 align-middle text-base leading-none\">\n {children && (\n <FormLabel\n htmlFor={htmlFor}\n id={`${htmlFor}-label`}\n suppressHydrationWarning\n className={clsx('font-bold', className)}\n >\n {children}\n <RequiredStar isRequired={isRequired} />\n </FormLabel>\n )}\n {info && <InformationTag content={info} />}\n </div>\n);\n"],"mappings":";;;;;;;AAcA,MAAaA,mBAA6C,EACxD,UACA,YACA,MACA,SACA,gBAEA,qBAAC;CAAI,WAAU;YACZ,YACC,qBAAC;EACU;EACT,IAAI,GAAG,QAAQ;EACf;EACA,WAAW,KAAK,aAAa,UAAU;aAEtC,UACD,oBAAC,gBAAyB,aAAc;GAC9B,EAEb,QAAQ,oBAAC,kBAAe,SAAS,OAAQ;EACtC"}

package/dist/esm/components/Headers/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":["StyledH1: FC<HTMLAttributes<HTMLHeadingElement>>","StyledH2: FC<HTMLAttributes<HTMLHeadingElement>>","StyledH3: FC<HTMLAttributes<HTMLHeadingElement>>","StyledH4: FC<HTMLAttributes<HTMLHeadingElement>>","StyledH5: FC<HTMLAttributes<HTMLHeadingElement>>","StyledH6: FC<HTMLAttributes<HTMLHeadingElement>>","HeadingWrapper: HeadingType","id","H1: FC<HeadingProps>","H2: FC<HeadingProps>","H3: FC<HeadingProps>","H4: FC<HeadingProps>","H5: FC<HeadingProps>","H6: FC<HeadingProps>"],"sources":["../../../../src/components/Headers/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, JSX, 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:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;\n\n/*\n Styled H1 Component\n \n Primary heading component for page titles and main content headers.\n * Does not include clickable anchor functionality.\n /\nconst StyledH1: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n className,\n ...props\n}) => <h1 className={cn('font-bold text-2xl', className)} {...props} />;\n\n/\n Styled H2 Component\n \n Secondary heading component with anchor link functionality when wrapped.\n * Used for major section headers in content.\n /\nconst StyledH2: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n className,\n ...props\n}) => (\n <h2\n className={cn('mb-2 font-bold text-2xl', styledHeading, className)}\n {...props}\n />\n);\n\n/\n Styled H3 Component\n \n Tertiary heading component with anchor link functionality when wrapped.\n * Used for subsection headers in content.\n /\nconst StyledH3: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n className,\n ...props\n}) => (\n <h3\n className={cn('mb-2 font-bold text-xl', styledHeading, className)}\n {...props}\n />\n);\n\n/\n Styled H4 Component\n \n Quaternary heading component with anchor link functionality when wrapped.\n * Used for minor section headers in content.\n /\nconst StyledH4: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n className,\n ...props\n}) => (\n <h4\n className={cn('font-bold text-lg', styledHeading, className)}\n {...props}\n />\n);\n\n/\n Styled H5 Component\n \n Fifth-level heading component with anchor link functionality when wrapped.\n * Used for detailed subsection headers in content.\n /\nconst StyledH5: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n className,\n ...props\n}) => (\n <h5\n className={cn('font-bold text-base', styledHeading, className)}\n {...props}\n />\n);\n\nconst StyledH6: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n className,\n ...props\n}) => (\n <h6\n className={cn('ml-3 font-bold text-base', styledHeading, className)}\n {...props}\n />\n);\n\n/\n Props for heading components\n /\nexport type HeadingProps = HTMLAttributes<HTMLHeadingElement> & {\n /\n Whether the heading should be clickable with anchor link functionality.\n * Enables copy-to-clipboard URL behavior and smooth scrolling.\n * @default false (for H1), true (for H2-H5)\n /\n isClickable?: boolean;\n};\n\n/\n Internal props for the HeadingWrapper component\n /\ninterface HeadingGlobalProps extends HeadingProps {\n /* The styled heading component to render /\n H: FC<HTMLAttributes<HTMLHeadingElement>>;\n}\n\ntype HeadingType = (props: HeadingGlobalProps) => JSX.Element;\n\n/\n Utility function to generate URL-friendly ID from heading text\n * @param children - The heading text content\n * @returns URL-friendly string for use as element ID\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\n/\n Utility function to smoothly scroll to an element by ID\n * @param id - The element ID to scroll to\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\n/\n Utility function to detect if the pseudo-element (#) after the heading was clicked\n * @param parentElem - The heading element\n * @param e - Mouse event\n * @returns Whether the after pseudo-element was clicked\n /\nconst afterClick = (parentElem: Element, e: MouseEvent<HTMLHeadingElement>) => {\n const parentLeft = parentElem.getBoundingClientRect().left;\n const parentTop = parentElem.getBoundingClientRect().top;\n\n const after = window.getComputedStyle(parentElem, ':after');\n\n const afterStart = parentLeft + parseInt(after.getPropertyValue('left'), 10);\n const afterEnd = afterStart + parseInt(after.width, 10);\n\n const afterYStart = parentTop + parseInt(after.getPropertyValue('top'), 10);\n const afterYEnd = afterYStart + parseInt(after.height, 10);\n\n const mouseX = e.clientX;\n const 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\n/\n HeadingWrapper Component\n \n Internal wrapper component that adds anchor link functionality to headings.\n * Handles ID generation, click-to-copy URL behavior, and smooth scrolling.\n \n @component\n * @accessibility\n * - Generates URL-friendly IDs for deep linking\n * - Provides accessible labels for anchor link functionality\n * - Maintains proper heading hierarchy and semantics\n * - Supports keyboard navigation and screen readers\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\n/\n H1 Component\n \n Primary page heading component. Does not include clickable anchor functionality\n * as it's typically used for main page titles rather than content sections.\n \n @example\n * ```tsx\n * <H1>Welcome to Our Website</H1>\n * <H1 className=\"text-blue-600\">Custom Styled Title</H1>\n * ```\n /\nexport const H1: FC<HeadingProps> = ({ isClickable: _, ...props }) => (\n <StyledH1 {...props} />\n);\n\n/\n H2 Component\n \n Secondary heading component with optional anchor link functionality.\n * Perfect for major section headers with deep-linking capabilities.\n \n @example\n * ```tsx\n * <H2>Getting Started</H2>\n * <H2 isClickable>API Reference</H2>\n * ```\n /\nexport const H2: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n <HeadingWrapper H={StyledH2} isClickable={isClickable} {...props} />\n);\n\n/\n H3 Component\n \n Tertiary heading component with optional anchor link functionality.\n * Used for subsection headers within major sections.\n \n @example\n * ```tsx\n * <H3>Configuration Options</H3>\n * <H3 isClickable>Advanced Settings</H3>\n * ```\n /\nexport const H3: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n <HeadingWrapper H={StyledH3} isClickable={isClickable} {...props} />\n);\n\n/\n H4 Component\n \n Fourth-level heading component with optional anchor link functionality.\n * Used for detailed section organization.\n \n @example\n * ```tsx\n * <H4>Implementation Details</H4>\n * <H4 isClickable>Code Examples</H4>\n * ```\n /\nexport const H4: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n <HeadingWrapper H={StyledH4} isClickable={isClickable} {...props} />\n);\n\n/\n H5 Component\n \n Fifth-level heading component with optional anchor link functionality.\n * Used for fine-grained content organization.\n \n @example\n * ```tsx\n * <H5>Technical Notes</H5>\n * <H5 isClickable>Best Practices</H5>\n * ```\n */\nexport const H5: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n <HeadingWrapper H={StyledH5} isClickable={isClickable} {...props} />\n);\n\nexport const H6: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n <HeadingWrapper H={StyledH6} isClickable={isClickable} {...props} />\n);\n"],"mappings":";;;;AAGA,MAAM,gBAAgB;AACtB,MAAM,cAAc;;;;;;;AAQpB,MAAMA,YAAoD,EACxD,WACA,GAAG,YACC,oBAAC;CAAG,WAAW,GAAG,sBAAsB,UAAU;CAAE,GAAI;EAAS;;;;;;;AAQvE,MAAMC,YAAoD,EACxD,WACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG,2BAA2B,eAAe,UAAU;CAClE,GAAI;EACJ;;;;;;;AASJ,MAAMC,YAAoD,EACxD,WACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG,0BAA0B,eAAe,UAAU;CACjE,GAAI;EACJ;;;;;;;AASJ,MAAMC,YAAoD,EACxD,WACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG,qBAAqB,eAAe,UAAU;CAC5D,GAAI;EACJ;;;;;;;AASJ,MAAMC,YAAoD,EACxD,WACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG,uBAAuB,eAAe,UAAU;CAC9D,GAAI;EACJ;AAGJ,MAAMC,YAAoD,EACxD,WACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG,4BAA4B,eAAe,UAAU;CACnE,GAAI;EACJ;;;;;;AA8BJ,MAAM,SAAS,aACb,OAAO,SAAS,CAEb,UAAU,MAAM,CAChB,QAAQ,oBAAoB,GAAG,CAE/B,QAAQ,QAAQ,IAAI,CACpB,aAAa;;;;;AAMlB,MAAM,gBAAgB,OAAe;CAGnC,MAAM,KAFU,SAAS,eAAe,GAAG,EAG/B,uBAAuB,EAAE,OAAO,KAAK,OAAO,UAFzC;AAIf,QAAO,SAAS;EAAE,KAAK;EAAG,UAAU;EAAU,CAAC;;;;;;;;AASjD,MAAM,cAAc,YAAqB,MAAsC;CAC7E,MAAM,aAAa,WAAW,uBAAuB,CAAC;CACtD,MAAM,YAAY,WAAW,uBAAuB,CAAC;CAErD,MAAM,QAAQ,OAAO,iBAAiB,YAAY,SAAS;CAE3D,MAAM,aAAa,aAAa,SAAS,MAAM,iBAAiB,OAAO,EAAE,GAAG;CAC5E,MAAM,WAAW,aAAa,SAAS,MAAM,OAAO,GAAG;CAEvD,MAAM,cAAc,YAAY,SAAS,MAAM,iBAAiB,MAAM,EAAE,GAAG;CAC3E,MAAM,YAAY,cAAc,SAAS,MAAM,QAAQ,GAAG;CAE1D,MAAM,SAAS,EAAE;CACjB,MAAM,SAAS,EAAE;AAQjB,QALE,UAAU,cACV,UAAU,YACV,UAAU,eACV,UAAU;;;;;;;;;;;;;;;AAkBd,MAAMC,kBAA+B,EACnC,GACA,UACA,WACA,aACA,GAAG,YACC;CACJ,MAAM,KAAK,OAAO,aAAa,WAAW,MAAM,SAAS,GAAG;CAE5D,MAAM,WAAW,MAAsC;EACrD,MAAM,EAAE,aAAO,EAAE;AAIjB,MAFuB,WAAW,EAAE,eAAe,EAAE,IAE/B,OAAOC,SAAO,UAAU;GAE5C,MAAM,MAAM,GADW,OAAO,SAAS,KAAK,MAAM,IAAI,CAAC,GACzB,GAAGA;AAGjC,aAAU,UAAU,UAAU,IAAI;AAElC,gBAAaA,KAAG;;;AAIpB,QACE,oBAAC;EACK;EACJ,SAAS,cAAc,UAAU;EACjC,cACE,cACI,8BAA8B,GAAG,uCACjC;EAEN,WAAW,GAAG,eAAe,aAAa,UAAU;EACpD,GAAI;EAEH;GACC;;;;;;;;;;;;;;AAgBR,MAAaC,MAAwB,EAAE,aAAa,GAAG,GAAG,YACxD,oBAAC,YAAS,GAAI,QAAS;;;;;;;;;;;;;AAezB,MAAaC,MAAwB,EAAE,cAAc,OAAO,GAAG,YAC7D,oBAAC;CAAe,GAAG;CAAuB;CAAa,GAAI;EAAS;;;;;;;;;;;;;AAetE,MAAaC,MAAwB,EAAE,cAAc,OAAO,GAAG,YAC7D,oBAAC;CAAe,GAAG;CAAuB;CAAa,GAAI;EAAS;;;;;;;;;;;;;AAetE,MAAaC,MAAwB,EAAE,cAAc,OAAO,GAAG,YAC7D,oBAAC;CAAe,GAAG;CAAuB;CAAa,GAAI;EAAS;;;;;;;;;;;;;AAetE,MAAaC,MAAwB,EAAE,cAAc,OAAO,GAAG,YAC7D,oBAAC;CAAe,GAAG;CAAuB;CAAa,GAAI;EAAS;AAGtE,MAAaC,MAAwB,EAAE,cAAc,OAAO,GAAG,YAC7D,oBAAC;CAAe,GAAG;CAAuB;CAAa,GAAI;EAAS"}
1	+ {"version":3,"file":"index.mjs","names":["StyledH1: FC<HTMLAttributes<HTMLHeadingElement>>","StyledH2: FC<HTMLAttributes<HTMLHeadingElement>>","StyledH3: FC<HTMLAttributes<HTMLHeadingElement>>","StyledH4: FC<HTMLAttributes<HTMLHeadingElement>>","StyledH5: FC<HTMLAttributes<HTMLHeadingElement>>","StyledH6: FC<HTMLAttributes<HTMLHeadingElement>>","HeadingWrapper: HeadingType","id","H1: FC<HeadingProps>","H2: FC<HeadingProps>","H3: FC<HeadingProps>","H4: FC<HeadingProps>","H5: FC<HeadingProps>","H6: FC<HeadingProps>"],"sources":["../../../../src/components/Headers/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes, JSX, MouseEvent } from 'react';\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:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;\n\n/*\n Styled H1 Component\n \n Primary heading component for page titles and main content headers.\n * Does not include clickable anchor functionality.\n /\nconst StyledH1: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n className,\n ...props\n}) => <h1 className={cn('font-bold text-2xl', className)} {...props} />;\n\n/\n Styled H2 Component\n \n Secondary heading component with anchor link functionality when wrapped.\n * Used for major section headers in content.\n /\nconst StyledH2: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n className,\n ...props\n}) => (\n <h2\n className={cn('mb-2 font-bold text-2xl', styledHeading, className)}\n {...props}\n />\n);\n\n/\n Styled H3 Component\n \n Tertiary heading component with anchor link functionality when wrapped.\n * Used for subsection headers in content.\n /\nconst StyledH3: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n className,\n ...props\n}) => (\n <h3\n className={cn('mb-2 font-bold text-xl', styledHeading, className)}\n {...props}\n />\n);\n\n/\n Styled H4 Component\n \n Quaternary heading component with anchor link functionality when wrapped.\n * Used for minor section headers in content.\n /\nconst StyledH4: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n className,\n ...props\n}) => (\n <h4\n className={cn('font-bold text-lg', styledHeading, className)}\n {...props}\n />\n);\n\n/\n Styled H5 Component\n \n Fifth-level heading component with anchor link functionality when wrapped.\n * Used for detailed subsection headers in content.\n /\nconst StyledH5: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n className,\n ...props\n}) => (\n <h5\n className={cn('font-bold text-base', styledHeading, className)}\n {...props}\n />\n);\n\nconst StyledH6: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n className,\n ...props\n}) => (\n <h6\n className={cn('ml-3 font-bold text-base', styledHeading, className)}\n {...props}\n />\n);\n\n/\n Props for heading components\n /\nexport type HeadingProps = HTMLAttributes<HTMLHeadingElement> & {\n /\n Whether the heading should be clickable with anchor link functionality.\n * Enables copy-to-clipboard URL behavior and smooth scrolling.\n * @default false (for H1), true (for H2-H5)\n /\n isClickable?: boolean;\n};\n\n/\n Internal props for the HeadingWrapper component\n /\ninterface HeadingGlobalProps extends HeadingProps {\n /* The styled heading component to render /\n H: FC<HTMLAttributes<HTMLHeadingElement>>;\n}\n\ntype HeadingType = (props: HeadingGlobalProps) => JSX.Element;\n\n/\n Utility function to generate URL-friendly ID from heading text\n * @param children - The heading text content\n * @returns URL-friendly string for use as element ID\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\n/\n Utility function to smoothly scroll to an element by ID\n * @param id - The element ID to scroll to\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\n/\n Utility function to detect if the pseudo-element (#) after the heading was clicked\n * @param parentElem - The heading element\n * @param e - Mouse event\n * @returns Whether the after pseudo-element was clicked\n /\nconst afterClick = (parentElem: Element, e: MouseEvent<HTMLHeadingElement>) => {\n const parentLeft = parentElem.getBoundingClientRect().left;\n const parentTop = parentElem.getBoundingClientRect().top;\n\n const after = window.getComputedStyle(parentElem, ':after');\n\n const afterStart = parentLeft + parseInt(after.getPropertyValue('left'), 10);\n const afterEnd = afterStart + parseInt(after.width, 10);\n\n const afterYStart = parentTop + parseInt(after.getPropertyValue('top'), 10);\n const afterYEnd = afterYStart + parseInt(after.height, 10);\n\n const mouseX = e.clientX;\n const 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\n/\n HeadingWrapper Component\n \n Internal wrapper component that adds anchor link functionality to headings.\n * Handles ID generation, click-to-copy URL behavior, and smooth scrolling.\n \n @component\n * @accessibility\n * - Generates URL-friendly IDs for deep linking\n * - Provides accessible labels for anchor link functionality\n * - Maintains proper heading hierarchy and semantics\n * - Supports keyboard navigation and screen readers\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\n/\n H1 Component\n \n Primary page heading component. Does not include clickable anchor functionality\n * as it's typically used for main page titles rather than content sections.\n \n @example\n * ```tsx\n * <H1>Welcome to Our Website</H1>\n * <H1 className=\"text-blue-600\">Custom Styled Title</H1>\n * ```\n /\nexport const H1: FC<HeadingProps> = ({ isClickable: _, ...props }) => (\n <StyledH1 {...props} />\n);\n\n/\n H2 Component\n \n Secondary heading component with optional anchor link functionality.\n * Perfect for major section headers with deep-linking capabilities.\n \n @example\n * ```tsx\n * <H2>Getting Started</H2>\n * <H2 isClickable>API Reference</H2>\n * ```\n /\nexport const H2: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n <HeadingWrapper H={StyledH2} isClickable={isClickable} {...props} />\n);\n\n/\n H3 Component\n \n Tertiary heading component with optional anchor link functionality.\n * Used for subsection headers within major sections.\n \n @example\n * ```tsx\n * <H3>Configuration Options</H3>\n * <H3 isClickable>Advanced Settings</H3>\n * ```\n /\nexport const H3: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n <HeadingWrapper H={StyledH3} isClickable={isClickable} {...props} />\n);\n\n/\n H4 Component\n \n Fourth-level heading component with optional anchor link functionality.\n * Used for detailed section organization.\n \n @example\n * ```tsx\n * <H4>Implementation Details</H4>\n * <H4 isClickable>Code Examples</H4>\n * ```\n /\nexport const H4: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n <HeadingWrapper H={StyledH4} isClickable={isClickable} {...props} />\n);\n\n/\n H5 Component\n \n Fifth-level heading component with optional anchor link functionality.\n * Used for fine-grained content organization.\n \n @example\n * ```tsx\n * <H5>Technical Notes</H5>\n * <H5 isClickable>Best Practices</H5>\n * ```\n */\nexport const H5: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n <HeadingWrapper H={StyledH5} isClickable={isClickable} {...props} />\n);\n\nexport const H6: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n <HeadingWrapper H={StyledH6} isClickable={isClickable} {...props} />\n);\n"],"mappings":";;;;AAGA,MAAM,gBAAgB;AACtB,MAAM,cAAc;;;;;;;AAQpB,MAAMA,YAAoD,EACxD,WACA,GAAG,YACC,oBAAC;CAAG,WAAW,GAAG,sBAAsB,UAAU;CAAE,GAAI;EAAS;;;;;;;AAQvE,MAAMC,YAAoD,EACxD,WACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG,2BAA2B,eAAe,UAAU;CAClE,GAAI;EACJ;;;;;;;AASJ,MAAMC,YAAoD,EACxD,WACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG,0BAA0B,eAAe,UAAU;CACjE,GAAI;EACJ;;;;;;;AASJ,MAAMC,YAAoD,EACxD,WACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG,qBAAqB,eAAe,UAAU;CAC5D,GAAI;EACJ;;;;;;;AASJ,MAAMC,YAAoD,EACxD,WACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG,uBAAuB,eAAe,UAAU;CAC9D,GAAI;EACJ;AAGJ,MAAMC,YAAoD,EACxD,WACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG,4BAA4B,eAAe,UAAU;CACnE,GAAI;EACJ;;;;;;AA8BJ,MAAM,SAAS,aACb,OAAO,SAAS,CAEb,UAAU,MAAM,CAChB,QAAQ,oBAAoB,GAAG,CAE/B,QAAQ,QAAQ,IAAI,CACpB,aAAa;;;;;AAMlB,MAAM,gBAAgB,OAAe;CAGnC,MAAM,KAFU,SAAS,eAAe,GAAG,EAG/B,uBAAuB,EAAE,OAAO,KAAK,OAAO,UAFzC;AAIf,QAAO,SAAS;EAAE,KAAK;EAAG,UAAU;EAAU,CAAC;;;;;;;;AASjD,MAAM,cAAc,YAAqB,MAAsC;CAC7E,MAAM,aAAa,WAAW,uBAAuB,CAAC;CACtD,MAAM,YAAY,WAAW,uBAAuB,CAAC;CAErD,MAAM,QAAQ,OAAO,iBAAiB,YAAY,SAAS;CAE3D,MAAM,aAAa,aAAa,SAAS,MAAM,iBAAiB,OAAO,EAAE,GAAG;CAC5E,MAAM,WAAW,aAAa,SAAS,MAAM,OAAO,GAAG;CAEvD,MAAM,cAAc,YAAY,SAAS,MAAM,iBAAiB,MAAM,EAAE,GAAG;CAC3E,MAAM,YAAY,cAAc,SAAS,MAAM,QAAQ,GAAG;CAE1D,MAAM,SAAS,EAAE;CACjB,MAAM,SAAS,EAAE;AAQjB,QALE,UAAU,cACV,UAAU,YACV,UAAU,eACV,UAAU;;;;;;;;;;;;;;;AAkBd,MAAMC,kBAA+B,EACnC,GACA,UACA,WACA,aACA,GAAG,YACC;CACJ,MAAM,KAAK,OAAO,aAAa,WAAW,MAAM,SAAS,GAAG;CAE5D,MAAM,WAAW,MAAsC;EACrD,MAAM,EAAE,aAAO,EAAE;AAIjB,MAFuB,WAAW,EAAE,eAAe,EAAE,IAE/B,OAAOC,SAAO,UAAU;GAE5C,MAAM,MAAM,GADW,OAAO,SAAS,KAAK,MAAM,IAAI,CAAC,GACzB,GAAGA;AAGjC,aAAU,UAAU,UAAU,IAAI;AAElC,gBAAaA,KAAG;;;AAIpB,QACE,oBAAC;EACK;EACJ,SAAS,cAAc,UAAU;EACjC,cACE,cACI,8BAA8B,GAAG,uCACjC;EAEN,WAAW,GAAG,eAAe,aAAa,UAAU;EACpD,GAAI;EAEH;GACC;;;;;;;;;;;;;;AAgBR,MAAaC,MAAwB,EAAE,aAAa,GAAG,GAAG,YACxD,oBAAC,YAAS,GAAI,QAAS;;;;;;;;;;;;;AAezB,MAAaC,MAAwB,EAAE,cAAc,OAAO,GAAG,YAC7D,oBAAC;CAAe,GAAG;CAAuB;CAAa,GAAI;EAAS;;;;;;;;;;;;;AAetE,MAAaC,MAAwB,EAAE,cAAc,OAAO,GAAG,YAC7D,oBAAC;CAAe,GAAG;CAAuB;CAAa,GAAI;EAAS;;;;;;;;;;;;;AAetE,MAAaC,MAAwB,EAAE,cAAc,OAAO,GAAG,YAC7D,oBAAC;CAAe,GAAG;CAAuB;CAAa,GAAI;EAAS;;;;;;;;;;;;;AAetE,MAAaC,MAAwB,EAAE,cAAc,OAAO,GAAG,YAC7D,oBAAC;CAAe,GAAG;CAAuB;CAAa,GAAI;EAAS;AAGtE,MAAaC,MAAwB,EAAE,cAAc,OAAO,GAAG,YAC7D,oBAAC;CAAe,GAAG;CAAuB;CAAa,GAAI;EAAS"}

package/dist/esm/components/HeightResizer/index.mjs CHANGED Viewed

@@ -134,7 +134,7 @@ const HeightResizer = ({ initialHeight, maxHeight, minHeight = 0, children, clas
 		};
 	}, [resize, stopResizing]);
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("relative h-full max-h-[80%] w-full cursor-ns-resize border-neutral-200 border-t-[2px] transition dark:border-neutral-950", "before:-translate-y-1/2 before:-translate-x-1/2 before:absolute before:top-0 before:left-1/2 before:z-10 before:block before:h-2 before:w-10 before:transform before:cursor-ns-resize before:rounded-full before:bg-neutral-200 before:transition before:content-[\"\"] dark:before:bg-neutral-950", "active:border-neutral-400 active:before:bg-neutral-400 dark:active:border-neutral-600 active:dark:before:bg-neutral-600", className),
+		className: cn("relative h-full max-h-[80%] w-full cursor-ns-resize border-neutral-200 border-t-[2px] transition dark:border-neutral-950", "before:absolute before:top-0 before:left-1/2 before:z-10 before:block before:h-2 before:w-10 before:-translate-x-1/2 before:-translate-y-1/2 before:transform before:cursor-ns-resize before:rounded-full before:bg-neutral-200 before:transition before:content-[\"\"] dark:before:bg-neutral-950", "active:border-neutral-400 active:before:bg-neutral-400 dark:active:border-neutral-600 active:dark:before:bg-neutral-600", className),
 		style: {
 			height: `${height}px`,
 			maxHeight: maxHeight ? `${maxHeight}px` : void 0,

package/dist/esm/components/HeightResizer/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":["HeightResizer: FC<PropsWithChildren<HeightResizerProps>>"],"sources":["../../../../src/components/HeightResizer/index.tsx"],"sourcesContent":["'use client';\n\nimport type React from 'react';\nimport {\n type DetailedHTMLProps,\n type FC,\n type HTMLAttributes,\n type PropsWithChildren,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\~~nimport { cn } from '../../utils/cn';\~~n\n/*\n Props for the HeightResizer component\n \n @interface HeightResizerProps\n /\ntype HeightResizerProps = {\n /\n Initial height in pixels for the resizable container\n * Sets the default size when the component first loads\n * @example 200\n /\n initialHeight: number;\n\n /\n Maximum height in pixels that the user can resize to (optional)\n * When undefined, no maximum limit is enforced\n * @example 500\n /\n maxHeight?: number;\n\n /\n Minimum height in pixels that the user can resize to (optional)\n * Prevents the container from being resized below this threshold\n * @default 0\n * @example 50\n /\n minHeight?: number;\n} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n\n/\n HeightResizer Component\n \n A resizable container component that allows users to dynamically adjust the height\n * by dragging a visual handle at the top. Provides smooth resizing with optional\n * minimum and maximum height constraints.\n \n ## Key Features\n * - Interactive Resizing: Drag handle to resize container vertically\n * - Touch Support: Full support for touch devices and mobile interactions\n * - Height Constraints: Optional minimum and maximum height limits\n * - Visual Feedback: Handle with hover and active states for clear interaction\n * - Accessibility: ARIA slider role with value announcements for screen readers\n * - Smooth Animation: CSS transitions for polished user experience\n \n ## Use Cases\n * - Code editors with resizable panels\n * - Chat interfaces with adjustable message areas\n * - Dashboard widgets with user-customizable sizes\n * - Documentation viewers with resizable content panes\n * - Settings panels with expandable sections\n \n ## Interaction Model\n * The component uses a drag interaction model where users click and drag the visual\n * handle (rounded bar) at the top of the container. The resize calculation is based\n * on the difference between the current cursor position and the container's top edge.\n \n ## Accessibility Features\n * - ARIA Slider: Proper slider role for assistive technologies\n * - Value Announcements: Current, min, and max values announced to screen readers\n * - Keyboard Navigation: Focusable with standard slider keyboard support\n * - Visual Indicators: Clear visual handle for drag interaction\n \n @component\n * @example\n * ```tsx\n * // Basic usage\n * <HeightResizer initialHeight={200}>\n * <div>Your resizable content here</div>\n * </HeightResizer>\n \n // With height constraints\n * <HeightResizer\n * initialHeight={300}\n * minHeight={100}\n * maxHeight={600}\n * >\n * <div>Content with size limits</div>\n * </HeightResizer>\n \n // In a code editor context\n * <HeightResizer\n * initialHeight={400}\n * minHeight={150}\n * className=\"border rounded-lg\"\n * >\n * <CodeEditor />\n * </HeightResizer>\n * ```\n \n @param props - HeightResizer component props\n * @param props.initialHeight - Starting height in pixels\n * @param props.minHeight - Optional minimum height constraint\n * @param props.maxHeight - Optional maximum height constraint\n * @param props.children - Content to display in the resizable container\n * @param props.className - Additional CSS classes for styling\n * @returns Interactive resizable container component\n /\nexport const HeightResizer: FC<PropsWithChildren<HeightResizerProps>> = ({\n initialHeight,\n maxHeight,\n minHeight = 0,\n children,\n className,\n ...props\n}) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const [height, setHeight] = useState(initialHeight);\n const [isResizing, setIsResizing] = useState(false);\n\n /\n Handler to initiate the resizing process\n * Prevents default browser behavior and sets the resizing state\n \n @param mouseDownEvent - Mouse or touch event from the drag handle\n /\n const startResizing = useCallback(\n (\n mouseDownEvent:\n \| React.MouseEvent<HTMLDivElement>\n \| React.TouchEvent<HTMLDivElement>\n ) => {\n setIsResizing(true);\n mouseDownEvent.preventDefault();\n },\n []\n );\n\n /\n Handler to stop the resizing process\n * Resets the resizing state when user releases the drag handle\n /\n const stopResizing = useCallback(() => {\n setIsResizing(false);\n }, []);\n\n /\n Core resize logic that calculates new height based on cursor position\n * Handles both mouse and touch events with boundary checking\n \n @param mouseMoveEvent - Mouse or touch move event during drag\n /\n const resize = useCallback(\n (mouseMoveEvent: MouseEvent \| TouchEvent) => {\n const container = containerRef.current;\n if (isResizing && container) {\n const { height: containerHeight, top: containerTop } =\n container.getBoundingClientRect();\n\n let clientY = 0;\n if (mouseMoveEvent instanceof MouseEvent) {\n clientY = mouseMoveEvent.clientY;\n } else if (mouseMoveEvent instanceof TouchEvent) {\n clientY = mouseMoveEvent.touches[0].clientY;\n }\n\n const resizeDifference = clientY - containerTop;\n const newHeight = containerHeight - resizeDifference;\n\n // Apply height constraints\n let correctedHeight = Math.max(newHeight, minHeight);\n if (maxHeight !== undefined) {\n correctedHeight = Math.min(correctedHeight, maxHeight);\n }\n\n setHeight(correctedHeight);\n }\n },\n [isResizing, minHeight, maxHeight]\n );\n\n /\n Effect to manage global event listeners for resize interactions\n * Handles both mouse and touch events with proper cleanup\n */\n useEffect(() => {\n window.addEventListener('mousemove', resize, { passive: true });\n window.addEventListener('mouseup', stopResizing);\n window.addEventListener('touchmove', resize, { passive: true });\n window.addEventListener('touchend', stopResizing);\n\n return () => {\n window.removeEventListener('mousemove', resize);\n window.removeEventListener('mouseup', stopResizing);\n window.removeEventListener('touchmove', resize);\n window.removeEventListener('touchend', stopResizing);\n };\n }, [resize, stopResizing]);\n\n return (\n <div\n className={cn(\n 'relative h-full max-h-[80%] w-full cursor-ns-resize border-neutral-200 border-t-[2px] transition dark:border-neutral-950',\n 'before~~:-translate-y-1/2 before:-translate-x-1/2 before~~:absolute before:top-0 before:left-1/2 before:z-10 before:block before:h-2 before:w-10 before:transform before:cursor-ns-resize before:rounded-full before:bg-neutral-200 before:transition before:content-[\"\"] dark:before:bg-neutral-950',\n 'active:border-neutral-400 active:before:bg-neutral-400 dark:active:border-neutral-600 active:dark:before:bg-neutral-600',\n className\n )}\n style={{\n height: `${height}px`,\n maxHeight: maxHeight ? `${maxHeight}px` : undefined,\n minHeight: `${minHeight}px`,\n }}\n ref={containerRef}\n onMouseDown={startResizing}\n onTouchStart={startResizing}\n aria-valuemin={minHeight}\n aria-valuemax={maxHeight}\n aria-valuenow={height}\n aria-label=\"Resizable component - drag the handle to adjust height\"\n role=\"slider\"\n tabIndex={0}\n {...props}\n >\n <div\n className=\"absolute top-0 left-0 size-full cursor-default overflow-hidden\"\n onMouseDown={(e) => e.stopPropagation()}\n onTouchStart={(e) => e.stopPropagation()}\n >\n {children}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgHA,MAAaA,iBAA4D,EACvE,eACA,WACA,YAAY,GACZ,UACA,WACA,GAAG,YACC;CACJ,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,CAAC,QAAQ,aAAa,SAAS,cAAc;CACnD,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;;;;;;;CAQnD,MAAM,gBAAgB,aAElB,mBAGG;AACH,gBAAc,KAAK;AACnB,iBAAe,gBAAgB;IAEjC,EAAE,CACH;;;;;CAMD,MAAM,eAAe,kBAAkB;AACrC,gBAAc,MAAM;IACnB,EAAE,CAAC;;;;;;;CAQN,MAAM,SAAS,aACZ,mBAA4C;EAC3C,MAAM,YAAY,aAAa;AAC/B,MAAI,cAAc,WAAW;GAC3B,MAAM,EAAE,QAAQ,iBAAiB,KAAK,iBACpC,UAAU,uBAAuB;GAEnC,IAAI,UAAU;AACd,OAAI,0BAA0B,WAC5B,WAAU,eAAe;YAChB,0BAA0B,WACnC,WAAU,eAAe,QAAQ,GAAG;GAItC,MAAM,YAAY,mBADO,UAAU;GAInC,IAAI,kBAAkB,KAAK,IAAI,WAAW,UAAU;AACpD,OAAI,cAAc,OAChB,mBAAkB,KAAK,IAAI,iBAAiB,UAAU;AAGxD,aAAU,gBAAgB;;IAG9B;EAAC;EAAY;EAAW;EAAU,CACnC;;;;;AAMD,iBAAgB;AACd,SAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM,CAAC;AAC/D,SAAO,iBAAiB,WAAW,aAAa;AAChD,SAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM,CAAC;AAC/D,SAAO,iBAAiB,YAAY,aAAa;AAEjD,eAAa;AACX,UAAO,oBAAoB,aAAa,OAAO;AAC/C,UAAO,oBAAoB,WAAW,aAAa;AACnD,UAAO,oBAAoB,aAAa,OAAO;AAC/C,UAAO,oBAAoB,YAAY,aAAa;;IAErD,CAAC,QAAQ,aAAa,CAAC;AAE1B,QACE,oBAAC;EACC,WAAW,GACT,4HACA,sSACA,2HACA,UACD;EACD,OAAO;GACL,QAAQ,GAAG,OAAO;GAClB,WAAW,YAAY,GAAG,UAAU,MAAM;GAC1C,WAAW,GAAG,UAAU;GACzB;EACD,KAAK;EACL,aAAa;EACb,cAAc;EACd,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,cAAW;EACX,MAAK;EACL,UAAU;EACV,GAAI;YAEJ,oBAAC;GACC,WAAU;GACV,cAAc,MAAM,EAAE,iBAAiB;GACvC,eAAe,MAAM,EAAE,iBAAiB;GAEvC;IACG;GACF"}
1	+ {"version":3,"file":"index.mjs","names":["HeightResizer: FC<PropsWithChildren<HeightResizerProps>>"],"sources":["../../../../src/components/HeightResizer/index.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport type React from 'react';\nimport {\n type DetailedHTMLProps,\n type FC,\n type HTMLAttributes,\n type PropsWithChildren,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\n/*\n Props for the HeightResizer component\n \n @interface HeightResizerProps\n /\ntype HeightResizerProps = {\n /\n Initial height in pixels for the resizable container\n * Sets the default size when the component first loads\n * @example 200\n /\n initialHeight: number;\n\n /\n Maximum height in pixels that the user can resize to (optional)\n * When undefined, no maximum limit is enforced\n * @example 500\n /\n maxHeight?: number;\n\n /\n Minimum height in pixels that the user can resize to (optional)\n * Prevents the container from being resized below this threshold\n * @default 0\n * @example 50\n /\n minHeight?: number;\n} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n\n/\n HeightResizer Component\n \n A resizable container component that allows users to dynamically adjust the height\n * by dragging a visual handle at the top. Provides smooth resizing with optional\n * minimum and maximum height constraints.\n \n ## Key Features\n * - Interactive Resizing: Drag handle to resize container vertically\n * - Touch Support: Full support for touch devices and mobile interactions\n * - Height Constraints: Optional minimum and maximum height limits\n * - Visual Feedback: Handle with hover and active states for clear interaction\n * - Accessibility: ARIA slider role with value announcements for screen readers\n * - Smooth Animation: CSS transitions for polished user experience\n \n ## Use Cases\n * - Code editors with resizable panels\n * - Chat interfaces with adjustable message areas\n * - Dashboard widgets with user-customizable sizes\n * - Documentation viewers with resizable content panes\n * - Settings panels with expandable sections\n \n ## Interaction Model\n * The component uses a drag interaction model where users click and drag the visual\n * handle (rounded bar) at the top of the container. The resize calculation is based\n * on the difference between the current cursor position and the container's top edge.\n \n ## Accessibility Features\n * - ARIA Slider: Proper slider role for assistive technologies\n * - Value Announcements: Current, min, and max values announced to screen readers\n * - Keyboard Navigation: Focusable with standard slider keyboard support\n * - Visual Indicators: Clear visual handle for drag interaction\n \n @component\n * @example\n * ```tsx\n * // Basic usage\n * <HeightResizer initialHeight={200}>\n * <div>Your resizable content here</div>\n * </HeightResizer>\n \n // With height constraints\n * <HeightResizer\n * initialHeight={300}\n * minHeight={100}\n * maxHeight={600}\n * >\n * <div>Content with size limits</div>\n * </HeightResizer>\n \n // In a code editor context\n * <HeightResizer\n * initialHeight={400}\n * minHeight={150}\n * className=\"border rounded-lg\"\n * >\n * <CodeEditor />\n * </HeightResizer>\n * ```\n \n @param props - HeightResizer component props\n * @param props.initialHeight - Starting height in pixels\n * @param props.minHeight - Optional minimum height constraint\n * @param props.maxHeight - Optional maximum height constraint\n * @param props.children - Content to display in the resizable container\n * @param props.className - Additional CSS classes for styling\n * @returns Interactive resizable container component\n /\nexport const HeightResizer: FC<PropsWithChildren<HeightResizerProps>> = ({\n initialHeight,\n maxHeight,\n minHeight = 0,\n children,\n className,\n ...props\n}) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const [height, setHeight] = useState(initialHeight);\n const [isResizing, setIsResizing] = useState(false);\n\n /\n Handler to initiate the resizing process\n * Prevents default browser behavior and sets the resizing state\n \n @param mouseDownEvent - Mouse or touch event from the drag handle\n /\n const startResizing = useCallback(\n (\n mouseDownEvent:\n \| React.MouseEvent<HTMLDivElement>\n \| React.TouchEvent<HTMLDivElement>\n ) => {\n setIsResizing(true);\n mouseDownEvent.preventDefault();\n },\n []\n );\n\n /\n Handler to stop the resizing process\n * Resets the resizing state when user releases the drag handle\n /\n const stopResizing = useCallback(() => {\n setIsResizing(false);\n }, []);\n\n /\n Core resize logic that calculates new height based on cursor position\n * Handles both mouse and touch events with boundary checking\n \n @param mouseMoveEvent - Mouse or touch move event during drag\n /\n const resize = useCallback(\n (mouseMoveEvent: MouseEvent \| TouchEvent) => {\n const container = containerRef.current;\n if (isResizing && container) {\n const { height: containerHeight, top: containerTop } =\n container.getBoundingClientRect();\n\n let clientY = 0;\n if (mouseMoveEvent instanceof MouseEvent) {\n clientY = mouseMoveEvent.clientY;\n } else if (mouseMoveEvent instanceof TouchEvent) {\n clientY = mouseMoveEvent.touches[0].clientY;\n }\n\n const resizeDifference = clientY - containerTop;\n const newHeight = containerHeight - resizeDifference;\n\n // Apply height constraints\n let correctedHeight = Math.max(newHeight, minHeight);\n if (maxHeight !== undefined) {\n correctedHeight = Math.min(correctedHeight, maxHeight);\n }\n\n setHeight(correctedHeight);\n }\n },\n [isResizing, minHeight, maxHeight]\n );\n\n /\n Effect to manage global event listeners for resize interactions\n * Handles both mouse and touch events with proper cleanup\n */\n useEffect(() => {\n window.addEventListener('mousemove', resize, { passive: true });\n window.addEventListener('mouseup', stopResizing);\n window.addEventListener('touchmove', resize, { passive: true });\n window.addEventListener('touchend', stopResizing);\n\n return () => {\n window.removeEventListener('mousemove', resize);\n window.removeEventListener('mouseup', stopResizing);\n window.removeEventListener('touchmove', resize);\n window.removeEventListener('touchend', stopResizing);\n };\n }, [resize, stopResizing]);\n\n return (\n <div\n className={cn(\n 'relative h-full max-h-[80%] w-full cursor-ns-resize border-neutral-200 border-t-[2px] transition dark:border-neutral-950',\n 'before:absolute before:top-0 before:left-1/2 before:z-10 before:block before:h-2 before:w-10 before:-translate-x-1/2 before:-translate-y-1/2 before:transform before:cursor-ns-resize before:rounded-full before:bg-neutral-200 before:transition before:content-[\"\"] dark:before:bg-neutral-950',\n 'active:border-neutral-400 active:before:bg-neutral-400 dark:active:border-neutral-600 active:dark:before:bg-neutral-600',\n className\n )}\n style={{\n height: `${height}px`,\n maxHeight: maxHeight ? `${maxHeight}px` : undefined,\n minHeight: `${minHeight}px`,\n }}\n ref={containerRef}\n onMouseDown={startResizing}\n onTouchStart={startResizing}\n aria-valuemin={minHeight}\n aria-valuemax={maxHeight}\n aria-valuenow={height}\n aria-label=\"Resizable component - drag the handle to adjust height\"\n role=\"slider\"\n tabIndex={0}\n {...props}\n >\n <div\n className=\"absolute top-0 left-0 size-full cursor-default overflow-hidden\"\n onMouseDown={(e) => e.stopPropagation()}\n onTouchStart={(e) => e.stopPropagation()}\n >\n {children}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgHA,MAAaA,iBAA4D,EACvE,eACA,WACA,YAAY,GACZ,UACA,WACA,GAAG,YACC;CACJ,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,CAAC,QAAQ,aAAa,SAAS,cAAc;CACnD,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;;;;;;;CAQnD,MAAM,gBAAgB,aAElB,mBAGG;AACH,gBAAc,KAAK;AACnB,iBAAe,gBAAgB;IAEjC,EAAE,CACH;;;;;CAMD,MAAM,eAAe,kBAAkB;AACrC,gBAAc,MAAM;IACnB,EAAE,CAAC;;;;;;;CAQN,MAAM,SAAS,aACZ,mBAA4C;EAC3C,MAAM,YAAY,aAAa;AAC/B,MAAI,cAAc,WAAW;GAC3B,MAAM,EAAE,QAAQ,iBAAiB,KAAK,iBACpC,UAAU,uBAAuB;GAEnC,IAAI,UAAU;AACd,OAAI,0BAA0B,WAC5B,WAAU,eAAe;YAChB,0BAA0B,WACnC,WAAU,eAAe,QAAQ,GAAG;GAItC,MAAM,YAAY,mBADO,UAAU;GAInC,IAAI,kBAAkB,KAAK,IAAI,WAAW,UAAU;AACpD,OAAI,cAAc,OAChB,mBAAkB,KAAK,IAAI,iBAAiB,UAAU;AAGxD,aAAU,gBAAgB;;IAG9B;EAAC;EAAY;EAAW;EAAU,CACnC;;;;;AAMD,iBAAgB;AACd,SAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM,CAAC;AAC/D,SAAO,iBAAiB,WAAW,aAAa;AAChD,SAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM,CAAC;AAC/D,SAAO,iBAAiB,YAAY,aAAa;AAEjD,eAAa;AACX,UAAO,oBAAoB,aAAa,OAAO;AAC/C,UAAO,oBAAoB,WAAW,aAAa;AACnD,UAAO,oBAAoB,aAAa,OAAO;AAC/C,UAAO,oBAAoB,YAAY,aAAa;;IAErD,CAAC,QAAQ,aAAa,CAAC;AAE1B,QACE,oBAAC;EACC,WAAW,GACT,4HACA,sSACA,2HACA,UACD;EACD,OAAO;GACL,QAAQ,GAAG,OAAO;GAClB,WAAW,YAAY,GAAG,UAAU,MAAM;GAC1C,WAAW,GAAG,UAAU;GACzB;EACD,KAAK;EACL,aAAa;EACb,cAAc;EACd,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,cAAW;EACX,MAAK;EACL,UAAU;EACV,GAAI;YAEJ,oBAAC;GACC,WAAU;GACV,cAAc,MAAM,EAAE,iBAAiB;GACvC,eAAe,MAAM,EAAE,iBAAiB;GAEvC;IACG;GACF"}

package/dist/esm/components/HideShow/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":["HideShow: FC<HideShowProps>"],"sources":["../../../../src/components/HideShow/index.tsx"],"sourcesContent":["'use client';\n\nimport { Eye, EyeOff } from 'lucide-react';\nimport { type FC, useEffect, useMemo, useRef, useState } from 'react';\~~nimport { cn } from '../../utils/cn';\~~n\n/*\n Props for the HideShow component\n /\nexport interface HideShowProps {\n /\n Sensitive text to display masked. Copy is only allowed when revealed.\n /\n text: string;\n\n /* Wrapper classes /\n className?: string;\n\n /* Number of prefix characters to keep visible when masked. Default: 6 /\n visiblePrefixChars?: number;\n\n /* Character used to mask hidden portion. Default: '•' /\n maskChar?: string;\n\n /* Reveal duration in ms before auto-hiding. Default: 10000 (10s) /\n revealDurationMs?: number;\n\n /* Copy error callback */\n onCopyError?: (error: Error) => void;\n}\n\n// Insert zero-width spaces every N chars so Safari can wrap long runs\nconst insertBreaks = (str: string, groupSize = 6) =>\n str.replace(new RegExp(`.{1,${groupSize}}`, 'g'), '$&\\u200b');\n\nexport const HideShow: FC<HideShowProps> = ({\n text,\n className,\n visiblePrefixChars = 6,\n maskChar = '•',\n revealDurationMs = 10000,\n}) => {\n const [isRevealed, setIsRevealed] = useState(false);\n const hideTimerRef = useRef<number \| null>(null);\n\n const maskedText = useMemo(() => {\n if (!text) return '';\n if (visiblePrefixChars <= 0) return maskChar.repeat(text.length);\n const prefix = text.slice(0, visiblePrefixChars);\n const remaining = Math.max(0, text.length - visiblePrefixChars);\n return insertBreaks(`${prefix}${maskChar.repeat(remaining)}`);\n }, [text, visiblePrefixChars, maskChar]);\n\n useEffect(() => {\n return () => {\n if (hideTimerRef.current) {\n window.clearTimeout(hideTimerRef.current);\n hideTimerRef.current = null;\n }\n };\n }, []);\n\n const reveal = () => {\n if (isRevealed) return;\n setIsRevealed(true);\n if (hideTimerRef.current) {\n window.clearTimeout(hideTimerRef.current);\n hideTimerRef.current = null;\n }\n hideTimerRef.current = window.setTimeout(() => {\n setIsRevealed(false);\n }, revealDurationMs);\n };\n\n const hide = () => {\n setIsRevealed(false);\n\n if (hideTimerRef.current) {\n window.clearTimeout(hideTimerRef.current);\n hideTimerRef.current = null;\n }\n };\n\n const IconComponent = isRevealed ? EyeOff : Eye;\n\n return (\n <span\n className={cn(\n 'inline-flex max-w-full items-center gap-2 rounded-md p-0.5 hover:cursor-pointer hover:bg-neutral/10',\n className\n )}\n onClick={isRevealed ? hide : reveal}\n onKeyDown={(e) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n isRevealed ? hide() : reveal();\n }\n }}\n role=\"button\"\n tabIndex={0}\n >\n <span className=\"min-w-0 break-all\">\n {isRevealed ? text : maskedText}\n </span>\n <IconComponent className=\"ml-1 ml-auto size-4 min-w-4 shrink-0\" />\n </span>\n );\n};\n"],"mappings":";;;;;;;;AAgCA,MAAM,gBAAgB,KAAa,YAAY,MAC7C,IAAI,QAAQ,IAAI,OAAO,OAAO,UAAU,IAAI,IAAI,EAAE,MAAW;AAE/D,MAAaA,YAA+B,EAC1C,MACA,WACA,qBAAqB,GACrB,WAAW,KACX,mBAAmB,UACf;CACJ,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,eAAe,OAAsB,KAAK;CAEhD,MAAM,aAAa,cAAc;AAC/B,MAAI,CAAC,KAAM,QAAO;AAClB,MAAI,sBAAsB,EAAG,QAAO,SAAS,OAAO,KAAK,OAAO;EAChE,MAAM,SAAS,KAAK,MAAM,GAAG,mBAAmB;EAChD,MAAM,YAAY,KAAK,IAAI,GAAG,KAAK,SAAS,mBAAmB;AAC/D,SAAO,aAAa,GAAG,SAAS,SAAS,OAAO,UAAU,GAAG;IAC5D;EAAC;EAAM;EAAoB;EAAS,CAAC;AAExC,iBAAgB;AACd,eAAa;AACX,OAAI,aAAa,SAAS;AACxB,WAAO,aAAa,aAAa,QAAQ;AACzC,iBAAa,UAAU;;;IAG1B,EAAE,CAAC;CAEN,MAAM,eAAe;AACnB,MAAI,WAAY;AAChB,gBAAc,KAAK;AACnB,MAAI,aAAa,SAAS;AACxB,UAAO,aAAa,aAAa,QAAQ;AACzC,gBAAa,UAAU;;AAEzB,eAAa,UAAU,OAAO,iBAAiB;AAC7C,iBAAc,MAAM;KACnB,iBAAiB;;CAGtB,MAAM,aAAa;AACjB,gBAAc,MAAM;AAEpB,MAAI,aAAa,SAAS;AACxB,UAAO,aAAa,aAAa,QAAQ;AACzC,gBAAa,UAAU;;;CAI3B,MAAM,gBAAgB,aAAa,SAAS;AAE5C,QACE,qBAAC;EACC,WAAW,GACT,uGACA,UACD;EACD,SAAS,aAAa,OAAO;EAC7B,YAAY,MAAM;AAChB,OAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,MAAE,gBAAgB;AAClB,iBAAa,MAAM,GAAG,QAAQ;;;EAGlC,MAAK;EACL,UAAU;aAEV,oBAAC;GAAK,WAAU;aACb,aAAa,OAAO;IAChB,EACP,oBAAC,iBAAc,WAAU,yCAAyC;GAC7D"}
1	+ {"version":3,"file":"index.mjs","names":["HideShow: FC<HideShowProps>"],"sources":["../../../../src/components/HideShow/index.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { Eye, EyeOff } from 'lucide-react';\nimport { type FC, useEffect, useMemo, useRef, useState } from 'react';\n\n/*\n Props for the HideShow component\n /\nexport interface HideShowProps {\n /\n Sensitive text to display masked. Copy is only allowed when revealed.\n /\n text: string;\n\n /* Wrapper classes /\n className?: string;\n\n /* Number of prefix characters to keep visible when masked. Default: 6 /\n visiblePrefixChars?: number;\n\n /* Character used to mask hidden portion. Default: '•' /\n maskChar?: string;\n\n /* Reveal duration in ms before auto-hiding. Default: 10000 (10s) /\n revealDurationMs?: number;\n\n /* Copy error callback */\n onCopyError?: (error: Error) => void;\n}\n\n// Insert zero-width spaces every N chars so Safari can wrap long runs\nconst insertBreaks = (str: string, groupSize = 6) =>\n str.replace(new RegExp(`.{1,${groupSize}}`, 'g'), '$&\\u200b');\n\nexport const HideShow: FC<HideShowProps> = ({\n text,\n className,\n visiblePrefixChars = 6,\n maskChar = '•',\n revealDurationMs = 10000,\n}) => {\n const [isRevealed, setIsRevealed] = useState(false);\n const hideTimerRef = useRef<number \| null>(null);\n\n const maskedText = useMemo(() => {\n if (!text) return '';\n if (visiblePrefixChars <= 0) return maskChar.repeat(text.length);\n const prefix = text.slice(0, visiblePrefixChars);\n const remaining = Math.max(0, text.length - visiblePrefixChars);\n return insertBreaks(`${prefix}${maskChar.repeat(remaining)}`);\n }, [text, visiblePrefixChars, maskChar]);\n\n useEffect(() => {\n return () => {\n if (hideTimerRef.current) {\n window.clearTimeout(hideTimerRef.current);\n hideTimerRef.current = null;\n }\n };\n }, []);\n\n const reveal = () => {\n if (isRevealed) return;\n setIsRevealed(true);\n if (hideTimerRef.current) {\n window.clearTimeout(hideTimerRef.current);\n hideTimerRef.current = null;\n }\n hideTimerRef.current = window.setTimeout(() => {\n setIsRevealed(false);\n }, revealDurationMs);\n };\n\n const hide = () => {\n setIsRevealed(false);\n\n if (hideTimerRef.current) {\n window.clearTimeout(hideTimerRef.current);\n hideTimerRef.current = null;\n }\n };\n\n const IconComponent = isRevealed ? EyeOff : Eye;\n\n return (\n <span\n className={cn(\n 'inline-flex max-w-full items-center gap-2 rounded-md p-0.5 hover:cursor-pointer hover:bg-neutral/10',\n className\n )}\n onClick={isRevealed ? hide : reveal}\n onKeyDown={(e) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n isRevealed ? hide() : reveal();\n }\n }}\n role=\"button\"\n tabIndex={0}\n >\n <span className=\"min-w-0 break-all\">\n {isRevealed ? text : maskedText}\n </span>\n <IconComponent className=\"ml-1 ml-auto size-4 min-w-4 shrink-0\" />\n </span>\n );\n};\n"],"mappings":";;;;;;;;AAgCA,MAAM,gBAAgB,KAAa,YAAY,MAC7C,IAAI,QAAQ,IAAI,OAAO,OAAO,UAAU,IAAI,IAAI,EAAE,MAAW;AAE/D,MAAaA,YAA+B,EAC1C,MACA,WACA,qBAAqB,GACrB,WAAW,KACX,mBAAmB,UACf;CACJ,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,eAAe,OAAsB,KAAK;CAEhD,MAAM,aAAa,cAAc;AAC/B,MAAI,CAAC,KAAM,QAAO;AAClB,MAAI,sBAAsB,EAAG,QAAO,SAAS,OAAO,KAAK,OAAO;EAChE,MAAM,SAAS,KAAK,MAAM,GAAG,mBAAmB;EAChD,MAAM,YAAY,KAAK,IAAI,GAAG,KAAK,SAAS,mBAAmB;AAC/D,SAAO,aAAa,GAAG,SAAS,SAAS,OAAO,UAAU,GAAG;IAC5D;EAAC;EAAM;EAAoB;EAAS,CAAC;AAExC,iBAAgB;AACd,eAAa;AACX,OAAI,aAAa,SAAS;AACxB,WAAO,aAAa,aAAa,QAAQ;AACzC,iBAAa,UAAU;;;IAG1B,EAAE,CAAC;CAEN,MAAM,eAAe;AACnB,MAAI,WAAY;AAChB,gBAAc,KAAK;AACnB,MAAI,aAAa,SAAS;AACxB,UAAO,aAAa,aAAa,QAAQ;AACzC,gBAAa,UAAU;;AAEzB,eAAa,UAAU,OAAO,iBAAiB;AAC7C,iBAAc,MAAM;KACnB,iBAAiB;;CAGtB,MAAM,aAAa;AACjB,gBAAc,MAAM;AAEpB,MAAI,aAAa,SAAS;AACxB,UAAO,aAAa,aAAa,QAAQ;AACzC,gBAAa,UAAU;;;CAI3B,MAAM,gBAAgB,aAAa,SAAS;AAE5C,QACE,qBAAC;EACC,WAAW,GACT,uGACA,UACD;EACD,SAAS,aAAa,OAAO;EAC7B,YAAY,MAAM;AAChB,OAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,MAAE,gBAAgB;AAClB,iBAAa,MAAM,GAAG,QAAQ;;;EAGlC,MAAK;EACL,UAAU;aAEV,oBAAC;GAAK,WAAU;aACb,aAAa,OAAO;IAChB,EACP,oBAAC,iBAAc,WAAU,yCAAyC;GAC7D"}

package/dist/esm/components/IDE/Code.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Code.mjs","names":["Code: FC<CodeCompProps>"],"sources":["../../../../src/components/IDE/Code.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { ~~cn } from '../../utils/cn';\nimport {~~ Container } from '../Container';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { CodeBlock } from './CodeBlockClient';\nimport { CodeConditionalRender } from './CodeConditionalRenderer';\nimport type {\n CodeFormat,\n ContentDeclarationFormat,\n PackageManager,\n} from './CodeContext';\nimport { CodeFormatSelector } from './CodeFormatSelector';\nimport { ContentDeclarationFormatSelector } from './ContentDeclarationFormatSelector';\nimport { CopyCode } from './CopyCode';\nimport { PackageManagerSelector } from './PackageManagerSelector';\n\nexport type CodeCompAttributes = {\n fileName?: string;\n packageManager?: PackageManager;\n codeFormat?: CodeFormat;\n contentDeclarationFormat?: ContentDeclarationFormat;\n};\n\ntype CodeCompProps = {\n children: string;\n fileName?: string;\n language: BundledLanguage;\n isDarkMode?: boolean;\n showHeader?: boolean;\n showLineNumbers?: boolean;\n isRollable?: boolean;\n} & CodeCompAttributes &\n HTMLAttributes<HTMLDivElement>;\n\nconst MIN_HEIGHT = 700;\n\nexport const Code: FC<CodeCompProps> = ({\n children,\n language,\n isDarkMode,\n showHeader = true,\n showLineNumbers = true,\n className,\n fileName,\n packageManager,\n codeFormat,\n contentDeclarationFormat,\n isRollable = true,\n ...props\n}) => {\n const code = children?.endsWith('\\n') ? children.slice(0, -1) : children;\n\n const hadSelectInHeader =\n packageManager \|\| codeFormat \|\| contentDeclarationFormat;\n\n return (\n <CodeConditionalRender\n packageManager={packageManager}\n codeFormat={codeFormat}\n contentDeclarationFormat={contentDeclarationFormat}\n >\n <Container\n className={cn(\n 'relative min-w-0 max-w-full text-sm leading-6',\n showLineNumbers && 'with-line-number ml-0',\n className\n )}\n transparency=\"lg\"\n {...props}\n >\n {showHeader && (\n <>\n <div className=\"grid w-full grid-cols-[1fr_auto] items-center justify-between rounded-t-xl bg-card/50 py-1.5 pr-12 pl-4 text-neutral text-xs\">\n <span className=\"truncate\">{fileName ?? language}</span>\n <div className=\"flex items-center gap-2\">\n {packageManager && <PackageManagerSelector />}\n {codeFormat && <CodeFormatSelector />}\n {contentDeclarationFormat && (\n <ContentDeclarationFormatSelector />\n )}\n </div>\n </div>\n <div className=\"sticky top-46 z-20\">\n <div\n className={cn(\n 'absolute right-2 bottom-0 flex h-7 items-center',\n hadSelectInHeader && 'h-11'\n )}\n >\n <CopyCode code={code} />\n </div>\n </div>\n </>\n )}\n <ExpandCollapse\n minHeight={MIN_HEIGHT}\n isRollable={isRollable}\n className=\"min-w-0 max-w-full overflow-x-auto p-2\"\n >\n <CodeBlock lang={language} isDarkMode={isDarkMode}>\n {code}\n </CodeBlock>\n </ExpandCollapse>\n </Container>\n </CodeConditionalRender>\n );\n};\n"],"mappings":";;;;;;;;;;;;AAmCA,MAAM,aAAa;AAEnB,MAAaA,QAA2B,EACtC,UACA,UACA,YACA,aAAa,MACb,kBAAkB,MAClB,WACA,UACA,gBACA,YACA,0BACA,aAAa,MACb,GAAG,YACC;CACJ,MAAM,OAAO,UAAU,SAAS,KAAK,GAAG,SAAS,MAAM,GAAG,GAAG,GAAG;CAEhE,MAAM,oBACJ,kBAAkB,cAAc;AAElC,QACE,oBAAC;EACiB;EACJ;EACc;YAE1B,qBAAC;GACC,WAAW,GACT,iDACA,mBAAmB,yBACnB,UACD;GACD,cAAa;GACb,GAAI;cAEH,cACC,4CACE,qBAAC;IAAI,WAAU;eACb,oBAAC;KAAK,WAAU;eAAY,YAAY;MAAgB,EACxD,qBAAC;KAAI,WAAU;;MACZ,kBAAkB,oBAAC,2BAAyB;MAC5C,cAAc,oBAAC,uBAAqB;MACpC,4BACC,oBAAC,qCAAmC;;MAElC;KACF,EACN,oBAAC;IAAI,WAAU;cACb,oBAAC;KACC,WAAW,GACT,mDACA,qBAAqB,OACtB;eAED,oBAAC,YAAe,OAAQ;MACpB;KACF,IACL,EAEL,oBAAC;IACC,WAAW;IACC;IACZ,WAAU;cAEV,oBAAC;KAAU,MAAM;KAAsB;eACpC;MACS;KACG;IACP;GACU"}
1	+ {"version":3,"file":"Code.mjs","names":["Code: FC<CodeCompProps>"],"sources":["../../../../src/components/IDE/Code.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes } from 'react';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { Container } from '../Container';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { CodeBlock } from './CodeBlockClient';\nimport { CodeConditionalRender } from './CodeConditionalRenderer';\nimport type {\n CodeFormat,\n ContentDeclarationFormat,\n PackageManager,\n} from './CodeContext';\nimport { CodeFormatSelector } from './CodeFormatSelector';\nimport { ContentDeclarationFormatSelector } from './ContentDeclarationFormatSelector';\nimport { CopyCode } from './CopyCode';\nimport { PackageManagerSelector } from './PackageManagerSelector';\n\nexport type CodeCompAttributes = {\n fileName?: string;\n packageManager?: PackageManager;\n codeFormat?: CodeFormat;\n contentDeclarationFormat?: ContentDeclarationFormat;\n};\n\ntype CodeCompProps = {\n children: string;\n fileName?: string;\n language: BundledLanguage;\n isDarkMode?: boolean;\n showHeader?: boolean;\n showLineNumbers?: boolean;\n isRollable?: boolean;\n} & CodeCompAttributes &\n HTMLAttributes<HTMLDivElement>;\n\nconst MIN_HEIGHT = 700;\n\nexport const Code: FC<CodeCompProps> = ({\n children,\n language,\n isDarkMode,\n showHeader = true,\n showLineNumbers = true,\n className,\n fileName,\n packageManager,\n codeFormat,\n contentDeclarationFormat,\n isRollable = true,\n ...props\n}) => {\n const code = children?.endsWith('\\n') ? children.slice(0, -1) : children;\n\n const hadSelectInHeader =\n packageManager \|\| codeFormat \|\| contentDeclarationFormat;\n\n return (\n <CodeConditionalRender\n packageManager={packageManager}\n codeFormat={codeFormat}\n contentDeclarationFormat={contentDeclarationFormat}\n >\n <Container\n className={cn(\n 'relative min-w-0 max-w-full text-sm leading-6',\n showLineNumbers && 'with-line-number ml-0',\n className\n )}\n transparency=\"lg\"\n {...props}\n >\n {showHeader && (\n <>\n <div className=\"grid w-full grid-cols-[1fr_auto] items-center justify-between rounded-t-xl bg-card/50 py-1.5 pr-12 pl-4 text-neutral text-xs\">\n <span className=\"truncate\">{fileName ?? language}</span>\n <div className=\"flex items-center gap-2\">\n {packageManager && <PackageManagerSelector />}\n {codeFormat && <CodeFormatSelector />}\n {contentDeclarationFormat && (\n <ContentDeclarationFormatSelector />\n )}\n </div>\n </div>\n <div className=\"sticky top-46 z-20\">\n <div\n className={cn(\n 'absolute right-2 bottom-0 flex h-7 items-center',\n hadSelectInHeader && 'h-11'\n )}\n >\n <CopyCode code={code} />\n </div>\n </div>\n </>\n )}\n <ExpandCollapse\n minHeight={MIN_HEIGHT}\n isRollable={isRollable}\n className=\"min-w-0 max-w-full overflow-x-auto p-2\"\n >\n <CodeBlock lang={language} isDarkMode={isDarkMode}>\n {code}\n </CodeBlock>\n </ExpandCollapse>\n </Container>\n </CodeConditionalRender>\n );\n};\n"],"mappings":";;;;;;;;;;;;AAmCA,MAAM,aAAa;AAEnB,MAAaA,QAA2B,EACtC,UACA,UACA,YACA,aAAa,MACb,kBAAkB,MAClB,WACA,UACA,gBACA,YACA,0BACA,aAAa,MACb,GAAG,YACC;CACJ,MAAM,OAAO,UAAU,SAAS,KAAK,GAAG,SAAS,MAAM,GAAG,GAAG,GAAG;CAEhE,MAAM,oBACJ,kBAAkB,cAAc;AAElC,QACE,oBAAC;EACiB;EACJ;EACc;YAE1B,qBAAC;GACC,WAAW,GACT,iDACA,mBAAmB,yBACnB,UACD;GACD,cAAa;GACb,GAAI;cAEH,cACC,4CACE,qBAAC;IAAI,WAAU;eACb,oBAAC;KAAK,WAAU;eAAY,YAAY;MAAgB,EACxD,qBAAC;KAAI,WAAU;;MACZ,kBAAkB,oBAAC,2BAAyB;MAC5C,cAAc,oBAAC,uBAAqB;MACpC,4BACC,oBAAC,qCAAmC;;MAElC;KACF,EACN,oBAAC;IAAI,WAAU;cACb,oBAAC;KACC,WAAW,GACT,mDACA,qBAAqB,OACtB;eAED,oBAAC,YAAe,OAAQ;MACpB;KACF,IACL,EAEL,oBAAC;IACC,WAAW;IACC;IACZ,WAAU;cAEV,oBAAC;KAAU,MAAM;KAAsB;eACpC;MACS;KACG;IACP;GACU"}

package/dist/esm/components/IDE/CodeBlockClient.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeBlockClient.mjs","names":["CodeDefault: FC<{ children: string }>","CodeBlock: FC<CodeBlockProps>"],"sources":["../../../../src/components/IDE/CodeBlockClient.tsx"],"sourcesContent":["import { type FC, type HTMLAttributes, lazy, Suspense } from 'react';\nimport type { BundledLanguage } from 'shiki/bundle/web';\~~nimport { cn } from '../../utils/cn';\~~n\nexport const CodeDefault: FC<{ children: string }> = ({ children }) => (\n <div className=\"min-w-0 max-w-full overflow-x-auto\">\n <pre className=\"min-w-0 max-w-full overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n <code>\n {children.split('\\n').map((line, index) => (\n <span\n className=\"line block w-full\"\n key={`line-${index}-${line.slice(0, 10)}`}\n >\n {line}\n </span>\n ))}\n </code>\n </pre>\n </div>\n);\n\n// Lazy load the Shiki component\nconst CodeBlockShiki = lazy(() =>\n import('./CodeBlockShiki').then((mod) => ({\n default: mod.CodeBlockShiki,\n }))\n);\n\nexport type CodeBlockProps = {\n children: string;\n lang: BundledLanguage;\n isDarkMode?: boolean;\n isEditable?: boolean;\n onChange?: (content: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nexport const CodeBlock: FC<CodeBlockProps> = ({\n className,\n onChange,\n isEditable,\n children,\n lang,\n isDarkMode,\n ...props\n}) => (\n <div\n className={cn('flex w-full min-w-0 max-w-full overflow-x-auto', className)}\n {...props}\n >\n <Suspense fallback={<CodeDefault>{children}</CodeDefault>}>\n <CodeBlockShiki lang={lang} isDarkMode={isDarkMode}>\n {children}\n </CodeBlockShiki>\n </Suspense>\n </div>\n);\n"],"mappings":";;;;;AAIA,MAAaA,eAAyC,EAAE,eACtD,oBAAC;CAAI,WAAU;WACb,oBAAC;EAAI,WAAU;YACb,oBAAC,oBACE,SAAS,MAAM,KAAK,CAAC,KAAK,MAAM,UAC/B,oBAAC;GACC,WAAU;aAGT;KAFI,QAAQ,MAAM,GAAG,KAAK,MAAM,GAAG,GAAG,GAGlC,CACP,GACG;GACH;EACF;AAIR,MAAM,iBAAiB,WACrB,OAAO,wBAAoB,MAAM,SAAS,EACxC,SAAS,IAAI,gBACd,EAAE,CACJ;AAUD,MAAaC,aAAiC,EAC5C,WACA,UACA,YACA,UACA,MACA,YACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG,kDAAkD,UAAU;CAC1E,GAAI;WAEJ,oBAAC;EAAS,UAAU,oBAAC,eAAa,WAAuB;YACvD,oBAAC;GAAqB;GAAkB;GACrC;IACc;GACR;EACP"}
1	+ {"version":3,"file":"CodeBlockClient.mjs","names":["CodeDefault: FC<{ children: string }>","CodeBlock: FC<CodeBlockProps>"],"sources":["../../../../src/components/IDE/CodeBlockClient.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { type FC, type HTMLAttributes, lazy, Suspense } from 'react';\nimport type { BundledLanguage } from 'shiki/bundle/web';\n\nexport const CodeDefault: FC<{ children: string }> = ({ children }) => (\n <div className=\"min-w-0 max-w-full overflow-x-auto\">\n <pre className=\"min-w-0 max-w-full overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n <code>\n {children.split('\\n').map((line, index) => (\n <span\n className=\"line block w-full\"\n key={`line-${index}-${line.slice(0, 10)}`}\n >\n {line}\n </span>\n ))}\n </code>\n </pre>\n </div>\n);\n\n// Lazy load the Shiki component\nconst CodeBlockShiki = lazy(() =>\n import('./CodeBlockShiki').then((mod) => ({\n default: mod.CodeBlockShiki,\n }))\n);\n\nexport type CodeBlockProps = {\n children: string;\n lang: BundledLanguage;\n isDarkMode?: boolean;\n isEditable?: boolean;\n onChange?: (content: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nexport const CodeBlock: FC<CodeBlockProps> = ({\n className,\n onChange,\n isEditable,\n children,\n lang,\n isDarkMode,\n ...props\n}) => (\n <div\n className={cn('flex w-full min-w-0 max-w-full overflow-x-auto', className)}\n {...props}\n >\n <Suspense fallback={<CodeDefault>{children}</CodeDefault>}>\n <CodeBlockShiki lang={lang} isDarkMode={isDarkMode}>\n {children}\n </CodeBlockShiki>\n </Suspense>\n </div>\n);\n"],"mappings":";;;;;AAIA,MAAaA,eAAyC,EAAE,eACtD,oBAAC;CAAI,WAAU;WACb,oBAAC;EAAI,WAAU;YACb,oBAAC,oBACE,SAAS,MAAM,KAAK,CAAC,KAAK,MAAM,UAC/B,oBAAC;GACC,WAAU;aAGT;KAFI,QAAQ,MAAM,GAAG,KAAK,MAAM,GAAG,GAAG,GAGlC,CACP,GACG;GACH;EACF;AAIR,MAAM,iBAAiB,WACrB,OAAO,wBAAoB,MAAM,SAAS,EACxC,SAAS,IAAI,gBACd,EAAE,CACJ;AAUD,MAAaC,aAAiC,EAC5C,WACA,UACA,YACA,UACA,MACA,YACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG,kDAAkD,UAAU;CAC1E,GAAI;WAEJ,oBAAC;EAAS,UAAU,oBAAC,eAAa,WAAuB;YACvD,oBAAC;GAAqB;GAAkB;GACrC;IACc;GACR;EACP"}

package/dist/esm/components/IDE/CodeBlockServer.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeBlockServer.mjs","names":["CodeDefault: FC<CodeBlockProps>","CodeBlock: FC<CodeBlockProps>"],"sources":["../../../../src/components/IDE/CodeBlockServer.tsx"],"sourcesContent":["import {\n transformerMetaHighlight,\n transformerMetaWordHighlight,\n transformerNotationDiff,\n transformerNotationErrorLevel,\n transformerNotationHighlight,\n transformerNotationWordHighlight,\n} from '@shikijs/transformers';\nimport { type FC, type HTMLAttributes, Suspense } from 'react';\nimport {\n type BundledLanguage,\n type BundledTheme,\n type CodeToHastOptions,\n codeToHtml,\n} from 'shiki/bundle/web';\~~nimport { cn } from '../../utils/cn';\~~n\nexport const CodeBlockShiki = (async ({\n children,\n lang,\n isDarkMode,\n onChange,\n ...props\n}: CodeBlockProps) => {\n const shikiOptions: CodeToHastOptions<BundledLanguage, BundledTheme> = {\n lang,\n theme: isDarkMode ? 'github-dark' : 'github-light',\n transformers: [\n transformerNotationDiff(),\n transformerNotationHighlight(),\n transformerNotationWordHighlight(),\n transformerNotationErrorLevel(),\n transformerMetaHighlight(),\n transformerMetaWordHighlight(),\n ],\n };\n\n const out = await codeToHtml(children, shikiOptions);\n\n return (\n <div\n dangerouslySetInnerHTML={{ __html: out }}\n {...props}\n style={{ backgroundColor: 'transparent' }}\n />\n );\n}) as unknown as FC<CodeBlockProps>;\n\nconst CodeDefault: FC<CodeBlockProps> = ({\n children,\n isEditable,\n isDarkMode,\n onChange,\n ...props\n}) => (\n <div contentEditable={isEditable} {...props}>\n <pre>\n <code>\n {children.split('\\n').map((line, index) => (\n <span className=\"line block w-full\" key={index}>\n {line}\n </span>\n ))}\n </code>\n </pre>\n </div>\n);\n\nexport type CodeBlockProps = {\n children: string;\n lang: BundledLanguage;\n isDarkMode?: boolean;\n isEditable?: boolean;\n onChange?: (content: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nexport const CodeBlock: FC<CodeBlockProps> = ({\n className,\n onChange,\n isEditable,\n ...props\n}) => (\n <Suspense fallback={<CodeDefault {...props} />}>\n <CodeBlockShiki\n className={cn('flex w-full', className)}\n contentEditable={isEditable}\n onInput={(e) => onChange?.(e.currentTarget.textContent ?? '')}\n {...props}\n />\n </Suspense>\n);\n"],"mappings":";;;;;;;AAiBA,MAAa,kBAAkB,OAAO,EACpC,UACA,MACA,YACA,UACA,GAAG,YACiB;AAgBpB,QACE,oBAAC;EACC,yBAAyB,EAAE,QAJnB,MAAM,WAAW,UAb0C;GACrE;GACA,OAAO,aAAa,gBAAgB;GACpC,cAAc;IACZ,yBAAyB;IACzB,8BAA8B;IAC9B,kCAAkC;IAClC,+BAA+B;IAC/B,0BAA0B;IAC1B,8BAA8B;IAC/B;GACF,CAEmD,EAIR;EACxC,GAAI;EACJ,OAAO,EAAE,iBAAiB,eAAe;GACzC;;AAIN,MAAMA,eAAmC,EACvC,UACA,YACA,YACA,UACA,GAAG,YAEH,oBAAC;CAAI,iBAAiB;CAAY,GAAI;WACpC,oBAAC,mBACC,oBAAC,oBACE,SAAS,MAAM,KAAK,CAAC,KAAK,MAAM,UAC/B,oBAAC;EAAK,WAAU;YACb;IADsC,MAElC,CACP,GACG,GACH;EACF;AAWR,MAAaC,aAAiC,EAC5C,WACA,UACA,YACA,GAAG,YAEH,oBAAC;CAAS,UAAU,oBAAC,eAAY,GAAI,QAAS;WAC5C,oBAAC;EACC,WAAW,GAAG,eAAe,UAAU;EACvC,iBAAiB;EACjB,UAAU,MAAM,WAAW,EAAE,cAAc,eAAe,GAAG;EAC7D,GAAI;GACJ;EACO"}
1	+ {"version":3,"file":"CodeBlockServer.mjs","names":["CodeDefault: FC<CodeBlockProps>","CodeBlock: FC<CodeBlockProps>"],"sources":["../../../../src/components/IDE/CodeBlockServer.tsx"],"sourcesContent":["import {\n transformerMetaHighlight,\n transformerMetaWordHighlight,\n transformerNotationDiff,\n transformerNotationErrorLevel,\n transformerNotationHighlight,\n transformerNotationWordHighlight,\n} from '@shikijs/transformers';\nimport { cn } from '@utils/cn';\nimport { type FC, type HTMLAttributes, Suspense } from 'react';\nimport {\n type BundledLanguage,\n type BundledTheme,\n type CodeToHastOptions,\n codeToHtml,\n} from 'shiki/bundle/web';\n\nexport const CodeBlockShiki = (async ({\n children,\n lang,\n isDarkMode,\n onChange,\n ...props\n}: CodeBlockProps) => {\n const shikiOptions: CodeToHastOptions<BundledLanguage, BundledTheme> = {\n lang,\n theme: isDarkMode ? 'github-dark' : 'github-light',\n transformers: [\n transformerNotationDiff(),\n transformerNotationHighlight(),\n transformerNotationWordHighlight(),\n transformerNotationErrorLevel(),\n transformerMetaHighlight(),\n transformerMetaWordHighlight(),\n ],\n };\n\n const out = await codeToHtml(children, shikiOptions);\n\n return (\n <div\n dangerouslySetInnerHTML={{ __html: out }}\n {...props}\n style={{ backgroundColor: 'transparent' }}\n />\n );\n}) as unknown as FC<CodeBlockProps>;\n\nconst CodeDefault: FC<CodeBlockProps> = ({\n children,\n isEditable,\n isDarkMode,\n onChange,\n ...props\n}) => (\n <div contentEditable={isEditable} {...props}>\n <pre>\n <code>\n {children.split('\\n').map((line, index) => (\n <span className=\"line block w-full\" key={index}>\n {line}\n </span>\n ))}\n </code>\n </pre>\n </div>\n);\n\nexport type CodeBlockProps = {\n children: string;\n lang: BundledLanguage;\n isDarkMode?: boolean;\n isEditable?: boolean;\n onChange?: (content: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nexport const CodeBlock: FC<CodeBlockProps> = ({\n className,\n onChange,\n isEditable,\n ...props\n}) => (\n <Suspense fallback={<CodeDefault {...props} />}>\n <CodeBlockShiki\n className={cn('flex w-full', className)}\n contentEditable={isEditable}\n onInput={(e) => onChange?.(e.currentTarget.textContent ?? '')}\n {...props}\n />\n </Suspense>\n);\n"],"mappings":";;;;;;;AAiBA,MAAa,kBAAkB,OAAO,EACpC,UACA,MACA,YACA,UACA,GAAG,YACiB;AAgBpB,QACE,oBAAC;EACC,yBAAyB,EAAE,QAJnB,MAAM,WAAW,UAb0C;GACrE;GACA,OAAO,aAAa,gBAAgB;GACpC,cAAc;IACZ,yBAAyB;IACzB,8BAA8B;IAC9B,kCAAkC;IAClC,+BAA+B;IAC/B,0BAA0B;IAC1B,8BAA8B;IAC/B;GACF,CAEmD,EAIR;EACxC,GAAI;EACJ,OAAO,EAAE,iBAAiB,eAAe;GACzC;;AAIN,MAAMA,eAAmC,EACvC,UACA,YACA,YACA,UACA,GAAG,YAEH,oBAAC;CAAI,iBAAiB;CAAY,GAAI;WACpC,oBAAC,mBACC,oBAAC,oBACE,SAAS,MAAM,KAAK,CAAC,KAAK,MAAM,UAC/B,oBAAC;EAAK,WAAU;YACb;IADsC,MAElC,CACP,GACG,GACH;EACF;AAWR,MAAaC,aAAiC,EAC5C,WACA,UACA,YACA,GAAG,YAEH,oBAAC;CAAS,UAAU,oBAAC,eAAY,GAAI,QAAS;WAC5C,oBAAC;EACC,WAAW,GAAG,eAAe,UAAU;EACvC,iBAAiB;EACjB,UAAU,MAAM,WAAW,EAAE,cAAc,eAAe,GAAG;EAC7D,GAAI;GACJ;EACO"}

package/dist/esm/components/IDE/CodeContext.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeContext.mjs","names":["CodeProvider: FC<PropsWithChildren>"],"sources":["../../../../src/components/IDE/CodeContext.tsx"],"sourcesContent":["'use client';\n\nimport {\n createContext,\n type FC,\n type PropsWithChildren,\n useContext,\n} from 'react';\~~nimport { usePersistedStore } from '../../hooks';\~~n\nexport type PackageManager = 'npm' \| 'pnpm' \| 'yarn' \| 'bun';\nexport type CodeFormat = 'typescript' \| 'commonjs' \| 'esm';\nexport type ContentDeclarationFormat =\n \| 'typescript'\n \| 'commonjs'\n \| 'esm'\n \| 'json';\n\ntype CodeContextValue = {\n packageManager: PackageManager;\n setPackageManager: (packageManager: PackageManager) => void;\n codeFormat: CodeFormat;\n setCodeFormat: (codeFormat: CodeFormat) => void;\n contentDeclarationFormat: ContentDeclarationFormat;\n setContentDeclarationFormat: (\n contentDeclarationFormat: ContentDeclarationFormat\n ) => void;\n};\n\n/*\n Context that store the current locale on the client side\n /\nexport const CodeContext = createContext<CodeContextValue>({\n packageManager: 'npm',\n setPackageManager: () => {},\n codeFormat: 'typescript',\n setCodeFormat: () => {},\n contentDeclarationFormat: 'typescript',\n setContentDeclarationFormat: () => {},\n});\n\n/\n Hook that provides the current locale\n /\nexport const useCodeContext = () => useContext(CodeContext);\n\n/\n Provider that store the current locale on the client side\n */\nexport const CodeProvider: FC<PropsWithChildren> = ({ children }) => {\n const [packageManager, setPackageManager] = usePersistedStore<PackageManager>(\n 'packageManager',\n 'npm'\n );\n const [codeFormat, setCodeFormat] = usePersistedStore<CodeFormat>(\n 'codeFormat',\n 'typescript'\n );\n const [contentDeclarationFormat, setContentDeclarationFormat] =\n usePersistedStore<ContentDeclarationFormat>(\n 'contentDeclarationFormat',\n 'typescript'\n );\n\n return (\n <CodeContext\n value={{\n packageManager,\n setPackageManager,\n codeFormat,\n setCodeFormat,\n contentDeclarationFormat,\n setContentDeclarationFormat,\n }}\n >\n {children}\n </CodeContext>\n );\n};\n"],"mappings":";;;;;;;;;;AAgCA,MAAa,cAAc,cAAgC;CACzD,gBAAgB;CAChB,yBAAyB;CACzB,YAAY;CACZ,qBAAqB;CACrB,0BAA0B;CAC1B,mCAAmC;CACpC,CAAC;;;;AAKF,MAAa,uBAAuB,WAAW,YAAY;;;;AAK3D,MAAaA,gBAAuC,EAAE,eAAe;CACnE,MAAM,CAAC,gBAAgB,qBAAqB,kBAC1C,kBACA,MACD;CACD,MAAM,CAAC,YAAY,iBAAiB,kBAClC,cACA,aACD;CACD,MAAM,CAAC,0BAA0B,+BAC/B,kBACE,4BACA,aACD;AAEH,QACE,oBAAC;EACC,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACD;EAEA;GACW"}
1	+ {"version":3,"file":"CodeContext.mjs","names":["CodeProvider: FC<PropsWithChildren>"],"sources":["../../../../src/components/IDE/CodeContext.tsx"],"sourcesContent":["'use client';\n\nimport { usePersistedStore } from '@hooks/usePersistedStore';\nimport {\n createContext,\n type FC,\n type PropsWithChildren,\n useContext,\n} from 'react';\n\nexport type PackageManager = 'npm' \| 'pnpm' \| 'yarn' \| 'bun';\nexport type CodeFormat = 'typescript' \| 'commonjs' \| 'esm';\nexport type ContentDeclarationFormat =\n \| 'typescript'\n \| 'commonjs'\n \| 'esm'\n \| 'json';\n\ntype CodeContextValue = {\n packageManager: PackageManager;\n setPackageManager: (packageManager: PackageManager) => void;\n codeFormat: CodeFormat;\n setCodeFormat: (codeFormat: CodeFormat) => void;\n contentDeclarationFormat: ContentDeclarationFormat;\n setContentDeclarationFormat: (\n contentDeclarationFormat: ContentDeclarationFormat\n ) => void;\n};\n\n/*\n Context that store the current locale on the client side\n /\nexport const CodeContext = createContext<CodeContextValue>({\n packageManager: 'npm',\n setPackageManager: () => {},\n codeFormat: 'typescript',\n setCodeFormat: () => {},\n contentDeclarationFormat: 'typescript',\n setContentDeclarationFormat: () => {},\n});\n\n/\n Hook that provides the current locale\n /\nexport const useCodeContext = () => useContext(CodeContext);\n\n/\n Provider that store the current locale on the client side\n */\nexport const CodeProvider: FC<PropsWithChildren> = ({ children }) => {\n const [packageManager, setPackageManager] = usePersistedStore<PackageManager>(\n 'packageManager',\n 'npm'\n );\n const [codeFormat, setCodeFormat] = usePersistedStore<CodeFormat>(\n 'codeFormat',\n 'typescript'\n );\n const [contentDeclarationFormat, setContentDeclarationFormat] =\n usePersistedStore<ContentDeclarationFormat>(\n 'contentDeclarationFormat',\n 'typescript'\n );\n\n return (\n <CodeContext\n value={{\n packageManager,\n setPackageManager,\n codeFormat,\n setCodeFormat,\n contentDeclarationFormat,\n setContentDeclarationFormat,\n }}\n >\n {children}\n </CodeContext>\n );\n};\n"],"mappings":";;;;;;;;;;AAgCA,MAAa,cAAc,cAAgC;CACzD,gBAAgB;CAChB,yBAAyB;CACzB,YAAY;CACZ,qBAAqB;CACrB,0BAA0B;CAC1B,mCAAmC;CACpC,CAAC;;;;AAKF,MAAa,uBAAuB,WAAW,YAAY;;;;AAK3D,MAAaA,gBAAuC,EAAE,eAAe;CACnE,MAAM,CAAC,gBAAgB,qBAAqB,kBAC1C,kBACA,MACD;CACD,MAAM,CAAC,YAAY,iBAAiB,kBAClC,cACA,aACD;CACD,MAAM,CAAC,0BAA0B,+BAC/B,kBACE,4BACA,aACD;AAEH,QACE,oBAAC;EACC,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACD;EAEA;GACW"}

package/dist/esm/components/IDE/CodeFormatSelector.mjs CHANGED Viewed

@@ -8,7 +8,7 @@ import { useIntlayer } from "react-intlayer";
 //#region src/components/IDE/CodeFormatSelector.tsx
 const CodeFormatSelector = () => {
 	const { codeFormat, setCodeFormat, setContentDeclarationFormat } = useCodeContext();
-	const { codeFormat: codeFormatContent } = useIntlayer("code-selectors");
+	const content = useIntlayer("code-selectors");
 	return /* @__PURE__ */ jsxs(Select, {
 		value: codeFormat,
 		onValueChange: (value) => {
@@ -16,9 +16,9 @@ const CodeFormatSelector = () => {
 			setContentDeclarationFormat(value);
 		},
 		children: [/* @__PURE__ */ jsx(Select.Trigger, {
-			className: "py-1",
-			"aria-label": codeFormatContent.label,
-			children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Code Format" })
+			className: "py-1!",
+			"aria-label": content.codeFormat.label.value,
+			children: /* @__PURE__ */ jsx(Select.Value, { placeholder: content.codeFormat.placeholder.value })
 		}), /* @__PURE__ */ jsxs(Select.Content, { children: [
 			/* @__PURE__ */ jsx(Select.Item, {
 				value: "typescript",

package/dist/esm/components/IDE/CodeFormatSelector.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeFormatSelector.mjs","names":["CodeFormatSelector: FC"],"sources":["../../../../src/components/IDE/CodeFormatSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Select } from '../Select';\nimport { useCodeContext } from './CodeContext';\n\nexport const CodeFormatSelector: FC = () => {\n const { codeFormat, setCodeFormat, setContentDeclarationFormat } =\n useCodeContext();\n const { ~~codeFormat: codeFormatContent }~~ = useIntlayer('code-selectors');\n\n return (\n <Select\n value={codeFormat}\n onValueChange={(value) => {\n setCodeFormat(value as typeof codeFormat);\n setContentDeclarationFormat(value as typeof codeFormat);\n }}\n >\n <Select.Trigger className=\"py-1\" aria-label={~~codeFormatContent~~.label}>\n <Select.Value placeholder~~=\"Code~~ ~~Format\"~~ />\n </Select.Trigger>\n <Select.Content>\n <Select.Item value=\"typescript\">TypeScript</Select.Item>\n <Select.Item value=\"esm\">ESM</Select.Item>\n <Select.Item value=\"commonjs\">CommonJS</Select.Item>\n </Select.Content>\n </Select>\n );\n};\n"],"mappings":";;;;;;;;AAOA,MAAaA,2BAA+B;CAC1C,MAAM,EAAE,YAAY,eAAe,gCACjC,gBAAgB;CAClB,MAAM,~~EAAE~~,YAAY,~~sBAAsB,YAAY,~~iBAAiB;~~AAEvE~~,QACE,qBAAC;EACC,OAAO;EACP,gBAAgB,UAAU;AACxB,iBAAc,MAA2B;AACzC,+BAA4B,MAA2B;;aAGzD,oBAAC,OAAO;~~GAAQ~~,WAAU;~~GAAO~~,cAAY,~~kBAAkB~~;~~aAC7D~~,oBAAC,OAAO,SAAM,~~aAAY~~,~~gBAAgB~~;~~IAC3B~~,EACjB,qBAAC,OAAO;GACN,oBAAC,OAAO;IAAK,OAAM;cAAa;KAAwB;GACxD,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;GAC1C,oBAAC,OAAO;IAAK,OAAM;cAAW;KAAsB;MACrC;GACV"}
1	+ {"version":3,"file":"CodeFormatSelector.mjs","names":["CodeFormatSelector: FC"],"sources":["../../../../src/components/IDE/CodeFormatSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Select } from '../Select';\nimport { useCodeContext } from './CodeContext';\n\nexport const CodeFormatSelector: FC = () => {\n const { codeFormat, setCodeFormat, setContentDeclarationFormat } =\n useCodeContext();\n const content = useIntlayer('code-selectors');\n\n return (\n <Select\n value={codeFormat}\n onValueChange={(value) => {\n setCodeFormat(value as typeof codeFormat);\n setContentDeclarationFormat(value as typeof codeFormat);\n }}\n >\n <Select.Trigger\n className=\"py-1!\"\n aria-label={content.codeFormat.label.value}\n >\n <Select.Value placeholder={content.codeFormat.placeholder.value} />\n </Select.Trigger>\n <Select.Content>\n <Select.Item value=\"typescript\">TypeScript</Select.Item>\n <Select.Item value=\"esm\">ESM</Select.Item>\n <Select.Item value=\"commonjs\">CommonJS</Select.Item>\n </Select.Content>\n </Select>\n );\n};\n"],"mappings":";;;;;;;;AAOA,MAAaA,2BAA+B;CAC1C,MAAM,EAAE,YAAY,eAAe,gCACjC,gBAAgB;CAClB,MAAM,UAAU,YAAY,iBAAiB;AAE7C,QACE,qBAAC;EACC,OAAO;EACP,gBAAgB,UAAU;AACxB,iBAAc,MAA2B;AACzC,+BAA4B,MAA2B;;aAGzD,oBAAC,OAAO;GACN,WAAU;GACV,cAAY,QAAQ,WAAW,MAAM;aAErC,oBAAC,OAAO,SAAM,aAAa,QAAQ,WAAW,YAAY,QAAS;IACpD,EACjB,qBAAC,OAAO;GACN,oBAAC,OAAO;IAAK,OAAM;cAAa;KAAwB;GACxD,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;GAC1C,oBAAC,OAAO;IAAK,OAAM;cAAW;KAAsB;MACrC;GACV"}

package/dist/esm/components/IDE/ContentDeclarationFormatSelector.mjs CHANGED Viewed

@@ -8,14 +8,14 @@ import { useIntlayer } from "react-intlayer";
 //#region src/components/IDE/ContentDeclarationFormatSelector.tsx
 const ContentDeclarationFormatSelector = () => {
 	const { contentDeclarationFormat, setContentDeclarationFormat } = useCodeContext();
-	const { contentDeclarationFormat: contentDeclarationFormatContent } = useIntlayer("code-selectors");
+	const content = useIntlayer("code-selectors");
 	return /* @__PURE__ */ jsxs(Select, {
 		value: contentDeclarationFormat,
 		onValueChange: setContentDeclarationFormat,
 		children: [/* @__PURE__ */ jsx(Select.Trigger, {
-			className: "py-1",
-			"aria-label": contentDeclarationFormatContent.label,
-			children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Dictionary Format" })
+			className: "py-1!",
+			"aria-label": content.contentDeclarationFormat.label.value,
+			children: /* @__PURE__ */ jsx(Select.Value, { placeholder: content.contentDeclarationFormat.placeholder.value })
 		}), /* @__PURE__ */ jsxs(Select.Content, { children: [
 			/* @__PURE__ */ jsx(Select.Item, {
 				value: "typescript",

package/dist/esm/components/IDE/ContentDeclarationFormatSelector.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContentDeclarationFormatSelector.mjs","names":["ContentDeclarationFormatSelector: FC"],"sources":["../../../../src/components/IDE/ContentDeclarationFormatSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Select } from '../Select';\nimport { useCodeContext } from './CodeContext';\n\nexport const ContentDeclarationFormatSelector: FC = () => {\n const { contentDeclarationFormat, setContentDeclarationFormat } =\n useCodeContext();\n const { ~~contentDeclarationFormat:~~ ~~contentDeclarationFormatContent } =\n~~ useIntlayer('code-selectors');\n\n return (\n <Select\n value={contentDeclarationFormat}\n onValueChange={setContentDeclarationFormat}\n >\n <Select.Trigger\n className=\"py-1\"\n aria-label={~~contentDeclarationFormatContent~~.label}\n >\n <Select.Value placeholder~~=\"Dictionary Format~~\" />\n </Select.Trigger>\n <Select.Content>\n <Select.Item value=\"typescript\">TypeScript</Select.Item>\n <Select.Item value=\"commonjs\">CommonJS</Select.Item>\n <Select.Item value=\"esm\">ESM</Select.Item>\n <Select.Item value=\"json\">JSON</Select.Item>\n </Select.Content>\n </Select>\n );\n};\n"],"mappings":";;;;;;;;AAOA,MAAaA,yCAA6C;CACxD,MAAM,EAAE,0BAA0B,gCAChC,gBAAgB;CAClB,MAAM,~~EAAE~~,~~0BAA0B,oCAChC,~~YAAY,iBAAiB;~~AAE/B~~,QACE,qBAAC;EACC,OAAO;EACP,eAAe;aAEf,oBAAC,OAAO;GACN,WAAU;GACV,cAAY,~~gCAAgC~~;~~aAE5C~~,oBAAC,OAAO,~~SAAM~~,~~aAAY~~,~~sBAAsB~~;~~IACjC~~,EACjB,qBAAC,OAAO;GACN,oBAAC,OAAO;IAAK,OAAM;cAAa;KAAwB;GACxD,oBAAC,OAAO;IAAK,OAAM;cAAW;KAAsB;GACpD,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;GAC1C,oBAAC,OAAO;IAAK,OAAM;cAAO;KAAkB;MAC7B;GACV"}
1	+ {"version":3,"file":"ContentDeclarationFormatSelector.mjs","names":["ContentDeclarationFormatSelector: FC"],"sources":["../../../../src/components/IDE/ContentDeclarationFormatSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Select } from '../Select';\nimport { useCodeContext } from './CodeContext';\n\nexport const ContentDeclarationFormatSelector: FC = () => {\n const { contentDeclarationFormat, setContentDeclarationFormat } =\n useCodeContext();\n const content = useIntlayer('code-selectors');\n\n return (\n <Select\n value={contentDeclarationFormat}\n onValueChange={setContentDeclarationFormat}\n >\n <Select.Trigger\n className=\"py-1!\"\n aria-label={content.contentDeclarationFormat.label.value}\n >\n <Select.Value\n placeholder={content.contentDeclarationFormat.placeholder.value}\n />\n </Select.Trigger>\n <Select.Content>\n <Select.Item value=\"typescript\">TypeScript</Select.Item>\n <Select.Item value=\"commonjs\">CommonJS</Select.Item>\n <Select.Item value=\"esm\">ESM</Select.Item>\n <Select.Item value=\"json\">JSON</Select.Item>\n </Select.Content>\n </Select>\n );\n};\n"],"mappings":";;;;;;;;AAOA,MAAaA,yCAA6C;CACxD,MAAM,EAAE,0BAA0B,gCAChC,gBAAgB;CAClB,MAAM,UAAU,YAAY,iBAAiB;AAE7C,QACE,qBAAC;EACC,OAAO;EACP,eAAe;aAEf,oBAAC,OAAO;GACN,WAAU;GACV,cAAY,QAAQ,yBAAyB,MAAM;aAEnD,oBAAC,OAAO,SACN,aAAa,QAAQ,yBAAyB,YAAY,QAC1D;IACa,EACjB,qBAAC,OAAO;GACN,oBAAC,OAAO;IAAK,OAAM;cAAa;KAAwB;GACxD,oBAAC,OAAO;IAAK,OAAM;cAAW;KAAsB;GACpD,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;GAC1C,oBAAC,OAAO;IAAK,OAAM;cAAO;KAAkB;MAC7B;GACV"}

package/dist/esm/components/IDE/CopyCode.mjs CHANGED Viewed

@@ -1,8 +1,8 @@
 'use client';
-import { CopyButton } from "../CopyButton/index.mjs";
 import { PopoverXAlign } from "../Popover/static.mjs";
 import { Popover } from "../Popover/dynamic.mjs";
+import { CopyButton } from "../CopyButton/index.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useIntlayer } from "react-intlayer";

package/dist/esm/components/IDE/FileTree.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileTree.mjs","names":["FileItem: FC<FileItemProps>","path","FileTree: FC<FileTreeProps>"],"sources":["../../../../src/components/IDE/FileTree.tsx"],"sourcesContent":["'use client';\n\nimport { ~~ChevronRight~~ } from '~~lucide-react~~';\nimport { ~~type~~ ~~FC, useState~~ } from 'react';\nimport { cn } from '~~../../utils/cn~~';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport { createFileTree, type FilePath } from './createFileTree';\n\ntype FileTreeProps = {\n filesPaths: string[];\n activeFile?: string;\n onClickFile?: (filePath: string) => void;\n prePaths?: string[];\n};\n\nconst concatFilePath = (paths: string[]) => paths.join('/');\n\ntype FileItemProps = {\n filesPaths: string[];\n subPath?: FilePath[];\n path: string;\n onClickFile?: (title: string) => void;\n activeFile?: string;\n prePaths: string[];\n isFile: boolean;\n};\n\nconst FileItem: FC<FileItemProps> = ({\n filesPaths,\n path,\n subPath,\n onClickFile,\n activeFile,\n prePaths,\n isFile,\n}) => {\n const [subPathOpen, setSubPathOpen] = useState(true);\n\n const level = prePaths.length + 1;\n const currentPath = concatFilePath([\n ...prePaths.slice(level - 1, level),\n path,\n ]);\n const totalPath = concatFilePath([...prePaths, path]);\n\n const filteredFilePaths = filesPaths\n .map(\n (path) => path.replace(/^\\/?/, '') // This regex matches the first slash, if it exists, at the start of the string)\n )\n .filter((filePath) => filePath.startsWith(currentPath));\n\n const newPath = filteredFilePaths.map((path) =>\n path.replace(currentPath, '').replace(/^\\/?/, '')\n );\n\n const isActive = totalPath === activeFile;\n\n const indentation = new Array(level).fill(' ').join('');\n\n return (\n <>\n <button\n className={cn(\n 'flex w-full items-start justify-start whitespace-pre text-nowrap px-2 py-1 text-xs transition',\n isActive\n ? 'bg-neutral-200 dark:bg-neutral-700'\n : 'cursor-pointer hover:bg-neutral-300 dark:hover:bg-neutral-900'\n )}\n key={path}\n onClick={() => {\n if (isFile) {\n onClickFile?.(totalPath);\n } else {\n setSubPathOpen(!subPathOpen);\n }\n }}\n >\n <span className={cn('whitespace-pre', isFile && 'ml-2')}>\n {indentation}\n </span>\n\n {!isFile && (\n <ChevronRight\n className={cn(`transition`, subPathOpen && `rotate-90 transform`)}\n size={16}\n />\n )}\n {path}\n </button>\n {subPath && (\n <MaxHeightSmoother\n isHidden={!subPathOpen}\n className=\"overflow-x-hidden\"\n >\n <FileTree\n filesPaths={newPath}\n activeFile={activeFile}\n onClickFile={onClickFile}\n prePaths={[...prePaths, path]}\n />\n </MaxHeightSmoother>\n )}\n </>\n );\n};\n\nexport const FileTree: FC<FileTreeProps> = ({\n filesPaths,\n activeFile,\n onClickFile,\n prePaths = [],\n}) => {\n const fileTree = createFileTree(filesPaths);\n\n return (\n <div className=\"flex size-full flex-col items-start justify-start py-1 text-neutral\">\n {fileTree.map(({ path, subPath, isFile }) => (\n <FileItem\n key={path}\n isFile={isFile}\n subPath={subPath}\n path={path}\n onClickFile={onClickFile}\n activeFile={activeFile}\n prePaths={prePaths}\n filesPaths={filesPaths}\n />\n ))}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;AAeA,MAAM,kBAAkB,UAAoB,MAAM,KAAK,IAAI;AAY3D,MAAMA,YAA+B,EACnC,YACA,MACA,SACA,aACA,YACA,UACA,aACI;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CAEpD,MAAM,QAAQ,SAAS,SAAS;CAChC,MAAM,cAAc,eAAe,CACjC,GAAG,SAAS,MAAM,QAAQ,GAAG,MAAM,EACnC,KACD,CAAC;CACF,MAAM,YAAY,eAAe,CAAC,GAAG,UAAU,KAAK,CAAC;CAQrD,MAAM,UANoB,WACvB,KACE,WAASC,OAAK,QAAQ,QAAQ,GAAG,CACnC,CACA,QAAQ,aAAa,SAAS,WAAW,YAAY,CAAC,CAEvB,KAAK,WACrCA,OAAK,QAAQ,aAAa,GAAG,CAAC,QAAQ,QAAQ,GAAG,CAClD;CAED,MAAM,WAAW,cAAc;CAE/B,MAAM,cAAc,IAAI,MAAM,MAAM,CAAC,KAAK,KAAK,CAAC,KAAK,GAAG;AAExD,QACE,8CACE,qBAAC;EACC,WAAW,GACT,iGACA,WACI,uCACA,gEACL;EAED,eAAe;AACb,OAAI,OACF,eAAc,UAAU;OAExB,gBAAe,CAAC,YAAY;;;GAIhC,oBAAC;IAAK,WAAW,GAAG,kBAAkB,UAAU,OAAO;cACpD;KACI;GAEN,CAAC,UACA,oBAAC;IACC,WAAW,GAAG,cAAc,eAAe,sBAAsB;IACjE,MAAM;KACN;GAEH;;IAnBI,KAoBE,EACR,WACC,oBAAC;EACC,UAAU,CAAC;EACX,WAAU;YAEV,oBAAC;GACC,YAAY;GACA;GACC;GACb,UAAU,CAAC,GAAG,UAAU,KAAK;IAC7B;GACgB,IAErB;;AAIP,MAAaC,YAA+B,EAC1C,YACA,YACA,aACA,WAAW,EAAE,OACT;AAGJ,QACE,oBAAC;EAAI,WAAU;YAHA,eAAe,WAAW,CAI7B,KAAK,EAAE,MAAM,SAAS,aAC9B,oBAAC;GAES;GACC;GACH;GACO;GACD;GACF;GACE;KAPP,KAQL,CACF;GACE"}
1	+ {"version":3,"file":"FileTree.mjs","names":["FileItem: FC<FileItemProps>","path","FileTree: FC<FileTreeProps>"],"sources":["../../../../src/components/IDE/FileTree.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { ChevronRight } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport { createFileTree, type FilePath } from './createFileTree';\n\ntype FileTreeProps = {\n filesPaths: string[];\n activeFile?: string;\n onClickFile?: (filePath: string) => void;\n prePaths?: string[];\n};\n\nconst concatFilePath = (paths: string[]) => paths.join('/');\n\ntype FileItemProps = {\n filesPaths: string[];\n subPath?: FilePath[];\n path: string;\n onClickFile?: (title: string) => void;\n activeFile?: string;\n prePaths: string[];\n isFile: boolean;\n};\n\nconst FileItem: FC<FileItemProps> = ({\n filesPaths,\n path,\n subPath,\n onClickFile,\n activeFile,\n prePaths,\n isFile,\n}) => {\n const [subPathOpen, setSubPathOpen] = useState(true);\n\n const level = prePaths.length + 1;\n const currentPath = concatFilePath([\n ...prePaths.slice(level - 1, level),\n path,\n ]);\n const totalPath = concatFilePath([...prePaths, path]);\n\n const filteredFilePaths = filesPaths\n .map(\n (path) => path.replace(/^\\/?/, '') // This regex matches the first slash, if it exists, at the start of the string)\n )\n .filter((filePath) => filePath.startsWith(currentPath));\n\n const newPath = filteredFilePaths.map((path) =>\n path.replace(currentPath, '').replace(/^\\/?/, '')\n );\n\n const isActive = totalPath === activeFile;\n\n const indentation = new Array(level).fill(' ').join('');\n\n return (\n <>\n <button\n className={cn(\n 'flex w-full items-start justify-start whitespace-pre text-nowrap px-2 py-1 text-xs transition',\n isActive\n ? 'bg-neutral-200 dark:bg-neutral-700'\n : 'cursor-pointer hover:bg-neutral-300 dark:hover:bg-neutral-900'\n )}\n key={path}\n onClick={() => {\n if (isFile) {\n onClickFile?.(totalPath);\n } else {\n setSubPathOpen(!subPathOpen);\n }\n }}\n >\n <span className={cn('whitespace-pre', isFile && 'ml-2')}>\n {indentation}\n </span>\n\n {!isFile && (\n <ChevronRight\n className={cn(`transition`, subPathOpen && `rotate-90 transform`)}\n size={16}\n />\n )}\n {path}\n </button>\n {subPath && (\n <MaxHeightSmoother\n isHidden={!subPathOpen}\n className=\"overflow-x-hidden\"\n >\n <FileTree\n filesPaths={newPath}\n activeFile={activeFile}\n onClickFile={onClickFile}\n prePaths={[...prePaths, path]}\n />\n </MaxHeightSmoother>\n )}\n </>\n );\n};\n\nexport const FileTree: FC<FileTreeProps> = ({\n filesPaths,\n activeFile,\n onClickFile,\n prePaths = [],\n}) => {\n const fileTree = createFileTree(filesPaths);\n\n return (\n <div className=\"flex size-full flex-col items-start justify-start py-1 text-neutral\">\n {fileTree.map(({ path, subPath, isFile }) => (\n <FileItem\n key={path}\n isFile={isFile}\n subPath={subPath}\n path={path}\n onClickFile={onClickFile}\n activeFile={activeFile}\n prePaths={prePaths}\n filesPaths={filesPaths}\n />\n ))}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;AAeA,MAAM,kBAAkB,UAAoB,MAAM,KAAK,IAAI;AAY3D,MAAMA,YAA+B,EACnC,YACA,MACA,SACA,aACA,YACA,UACA,aACI;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CAEpD,MAAM,QAAQ,SAAS,SAAS;CAChC,MAAM,cAAc,eAAe,CACjC,GAAG,SAAS,MAAM,QAAQ,GAAG,MAAM,EACnC,KACD,CAAC;CACF,MAAM,YAAY,eAAe,CAAC,GAAG,UAAU,KAAK,CAAC;CAQrD,MAAM,UANoB,WACvB,KACE,WAASC,OAAK,QAAQ,QAAQ,GAAG,CACnC,CACA,QAAQ,aAAa,SAAS,WAAW,YAAY,CAAC,CAEvB,KAAK,WACrCA,OAAK,QAAQ,aAAa,GAAG,CAAC,QAAQ,QAAQ,GAAG,CAClD;CAED,MAAM,WAAW,cAAc;CAE/B,MAAM,cAAc,IAAI,MAAM,MAAM,CAAC,KAAK,KAAK,CAAC,KAAK,GAAG;AAExD,QACE,8CACE,qBAAC;EACC,WAAW,GACT,iGACA,WACI,uCACA,gEACL;EAED,eAAe;AACb,OAAI,OACF,eAAc,UAAU;OAExB,gBAAe,CAAC,YAAY;;;GAIhC,oBAAC;IAAK,WAAW,GAAG,kBAAkB,UAAU,OAAO;cACpD;KACI;GAEN,CAAC,UACA,oBAAC;IACC,WAAW,GAAG,cAAc,eAAe,sBAAsB;IACjE,MAAM;KACN;GAEH;;IAnBI,KAoBE,EACR,WACC,oBAAC;EACC,UAAU,CAAC;EACX,WAAU;YAEV,oBAAC;GACC,YAAY;GACA;GACC;GACb,UAAU,CAAC,GAAG,UAAU,KAAK;IAC7B;GACgB,IAErB;;AAIP,MAAaC,YAA+B,EAC1C,YACA,YACA,aACA,WAAW,EAAE,OACT;AAGJ,QACE,oBAAC;EAAI,WAAU;YAHA,eAAe,WAAW,CAI7B,KAAK,EAAE,MAAM,SAAS,aAC9B,oBAAC;GAES;GACC;GACH;GACO;GACD;GACF;GACE;KAPP,KAQL,CACF;GACE"}

package/dist/esm/components/IDE/IDE.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IDE.mjs","names":["IDE: FC<IDEProps>","path"],"sources":["../../../../src/components/IDE/IDE.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type HTMLAttributes, useEffect, useState } from 'react';\nimport { ~~cn } from '../../utils/cn';\nimport {~~ Container } from '../Container';\nimport { WithResizer } from '../WithResizer';\nimport { FileTree } from './FileTree';\nimport { MarkdownRenderer } from './MarkDownRender';\n\nexport type IDEProps = {\n pages: {\n path: string;\n content: string;\n isOpen?: boolean;\n }[];\n isDarkMode?: boolean;\n activeTab?: number;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const IDE: FC<IDEProps> = ({\n pages: initialPages,\n isDarkMode,\n className,\n activeTab: defaultActiveTab,\n ...props\n}) => {\n const [pages, setPages] = useState(initialPages);\n const tabs = pages.filter(({ isOpen }) => isOpen);\n\n const firstTabIndex = tabs.findIndex(({ isOpen }) => isOpen);\n const [activeTab, setActiveTab] = useState(defaultActiveTab ?? firstTabIndex);\n\n useEffect(() => {\n setActiveTab(defaultActiveTab ?? firstTabIndex);\n }, [initialPages, defaultActiveTab]);\n\n const { content, path } = pages[activeTab];\n const filePaths = initialPages.map(({ path: title }) => title);\n\n const handleClickFile = (title: string) => {\n const page = pages.find(({ path: tabTitle }) => tabTitle === title);\n if (!page) return;\n\n const newPages = pages.map((page) => {\n if (page.path === title) {\n return { ...page, isOpen: true };\n }\n return page;\n });\n\n setPages(newPages);\n\n const newPageIndex = newPages.findIndex(\n ({ path: tabTitle }) => tabTitle === title\n );\n\n setActiveTab(newPageIndex);\n };\n\n return (\n <Container\n className={cn(\n 'flex size-full flex-col justify-start overflow-hidden shadow-lg',\n className\n )}\n roundedSize=\"3xl\"\n transparency=\"none\"\n {...props}\n >\n <div className=\"flex w-auto flex-row items-center justify-start gap-1 bg-neutral-200 text-neutral text-xs dark:bg-neutral-950\">\n <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n <div className=\"size-3 rounded-full bg-red-500\" />\n <div className=\"size-3 rounded-full bg-yellow-500\" />\n <div className=\"size-3 rounded-full bg-green-500\" />\n </div>\n <div className=\"flex size-full overflow-y-auto\">\n {tabs.map(({ path }, index) => {\n const fullPath = path.split('/');\n const title = fullPath[fullPath.length - 1];\n const isActive = index === activeTab;\n\n return (\n <button\n className={cn(\n 'flex h-8 min-w-20 items-center justify-start px-3 py-1 transition',\n isActive\n ? 'bg-card'\n : 'cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950'\n )}\n key={title}\n onClick={() => setActiveTab(index)}\n >\n {title}\n </button>\n );\n })}\n </div>\n </div>\n <div className=\"relative flex size-full flex-1 flex-row justify-start\">\n <div className=\"absolute top-0 left-0 size-full\">\n <div className=\"flex size-full\">\n <WithResizer initialWidth={150}>\n <FileTree\n filesPaths={filePaths}\n activeFile={path}\n onClickFile={handleClickFile}\n />\n </WithResizer>\n\n <div className=\"size-full flex-1 overflow-auto pt-2 text-xs\">\n <MarkdownRenderer isDarkMode={isDarkMode}>\n {content}\n </MarkdownRenderer>\n </div>\n </div>\n </div>\n </div>\n </Container>\n );\n};\n"],"mappings":";;;;;;;;;;;AAmBA,MAAaA,OAAqB,EAChC,OAAO,cACP,YACA,WACA,WAAW,kBACX,GAAG,YACC;CACJ,MAAM,CAAC,OAAO,YAAY,SAAS,aAAa;CAChD,MAAM,OAAO,MAAM,QAAQ,EAAE,aAAa,OAAO;CAEjD,MAAM,gBAAgB,KAAK,WAAW,EAAE,aAAa,OAAO;CAC5D,MAAM,CAAC,WAAW,gBAAgB,SAAS,oBAAoB,cAAc;AAE7E,iBAAgB;AACd,eAAa,oBAAoB,cAAc;IAC9C,CAAC,cAAc,iBAAiB,CAAC;CAEpC,MAAM,EAAE,SAAS,SAAS,MAAM;CAChC,MAAM,YAAY,aAAa,KAAK,EAAE,MAAM,YAAY,MAAM;CAE9D,MAAM,mBAAmB,UAAkB;AAEzC,MAAI,CADS,MAAM,MAAM,EAAE,MAAM,eAAe,aAAa,MAAM,CACxD;EAEX,MAAM,WAAW,MAAM,KAAK,SAAS;AACnC,OAAI,KAAK,SAAS,MAChB,QAAO;IAAE,GAAG;IAAM,QAAQ;IAAM;AAElC,UAAO;IACP;AAEF,WAAS,SAAS;AAMlB,eAJqB,SAAS,WAC3B,EAAE,MAAM,eAAe,aAAa,MACtC,CAEyB;;AAG5B,QACE,qBAAC;EACC,WAAW,GACT,mEACA,UACD;EACD,aAAY;EACZ,cAAa;EACb,GAAI;aAEJ,qBAAC;GAAI,WAAU;cACb,qBAAC;IAAI,WAAU;;KACb,oBAAC,SAAI,WAAU,mCAAmC;KAClD,oBAAC,SAAI,WAAU,sCAAsC;KACrD,oBAAC,SAAI,WAAU,qCAAqC;;KAChD,EACN,oBAAC;IAAI,WAAU;cACZ,KAAK,KAAK,EAAE,gBAAQ,UAAU;KAC7B,MAAM,WAAWC,OAAK,MAAM,IAAI;KAChC,MAAM,QAAQ,SAAS,SAAS,SAAS;AAGzC,YACE,oBAAC;MACC,WAAW,GACT,qEALW,UAAU,YAOjB,YACA,yEACL;MAED,eAAe,aAAa,MAAM;gBAEjC;QAHI,MAIE;MAEX;KACE;IACF,EACN,oBAAC;GAAI,WAAU;aACb,oBAAC;IAAI,WAAU;cACb,qBAAC;KAAI,WAAU;gBACb,oBAAC;MAAY,cAAc;gBACzB,oBAAC;OACC,YAAY;OACZ,YAAY;OACZ,aAAa;QACb;OACU,EAEd,oBAAC;MAAI,WAAU;gBACb,oBAAC;OAA6B;iBAC3B;QACgB;OACf;MACF;KACF;IACF;GACI"}
1	+ {"version":3,"file":"IDE.mjs","names":["IDE: FC<IDEProps>","path"],"sources":["../../../../src/components/IDE/IDE.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { type FC, type HTMLAttributes, useEffect, useState } from 'react';\nimport { Container } from '../Container';\nimport { WithResizer } from '../WithResizer';\nimport { FileTree } from './FileTree';\nimport { MarkdownRenderer } from './MarkDownRender';\n\nexport type IDEProps = {\n pages: {\n path: string;\n content: string;\n isOpen?: boolean;\n }[];\n isDarkMode?: boolean;\n activeTab?: number;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const IDE: FC<IDEProps> = ({\n pages: initialPages,\n isDarkMode,\n className,\n activeTab: defaultActiveTab,\n ...props\n}) => {\n const [pages, setPages] = useState(initialPages);\n const tabs = pages.filter(({ isOpen }) => isOpen);\n\n const firstTabIndex = tabs.findIndex(({ isOpen }) => isOpen);\n const [activeTab, setActiveTab] = useState(defaultActiveTab ?? firstTabIndex);\n\n useEffect(() => {\n setActiveTab(defaultActiveTab ?? firstTabIndex);\n }, [initialPages, defaultActiveTab]);\n\n const { content, path } = pages[activeTab];\n const filePaths = initialPages.map(({ path: title }) => title);\n\n const handleClickFile = (title: string) => {\n const page = pages.find(({ path: tabTitle }) => tabTitle === title);\n if (!page) return;\n\n const newPages = pages.map((page) => {\n if (page.path === title) {\n return { ...page, isOpen: true };\n }\n return page;\n });\n\n setPages(newPages);\n\n const newPageIndex = newPages.findIndex(\n ({ path: tabTitle }) => tabTitle === title\n );\n\n setActiveTab(newPageIndex);\n };\n\n return (\n <Container\n className={cn(\n 'flex size-full flex-col justify-start overflow-hidden shadow-lg',\n className\n )}\n roundedSize=\"3xl\"\n transparency=\"none\"\n {...props}\n >\n <div className=\"flex w-auto flex-row items-center justify-start gap-1 bg-neutral-200 text-neutral text-xs dark:bg-neutral-950\">\n <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n <div className=\"size-3 rounded-full bg-red-500\" />\n <div className=\"size-3 rounded-full bg-yellow-500\" />\n <div className=\"size-3 rounded-full bg-green-500\" />\n </div>\n <div className=\"flex size-full overflow-y-auto\">\n {tabs.map(({ path }, index) => {\n const fullPath = path.split('/');\n const title = fullPath[fullPath.length - 1];\n const isActive = index === activeTab;\n\n return (\n <button\n className={cn(\n 'flex h-8 min-w-20 items-center justify-start px-3 py-1 transition',\n isActive\n ? 'bg-card'\n : 'cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950'\n )}\n key={title}\n onClick={() => setActiveTab(index)}\n >\n {title}\n </button>\n );\n })}\n </div>\n </div>\n <div className=\"relative flex size-full flex-1 flex-row justify-start\">\n <div className=\"absolute top-0 left-0 size-full\">\n <div className=\"flex size-full\">\n <WithResizer initialWidth={150}>\n <FileTree\n filesPaths={filePaths}\n activeFile={path}\n onClickFile={handleClickFile}\n />\n </WithResizer>\n\n <div className=\"size-full flex-1 overflow-auto pt-2 text-xs\">\n <MarkdownRenderer isDarkMode={isDarkMode}>\n {content}\n </MarkdownRenderer>\n </div>\n </div>\n </div>\n </div>\n </Container>\n );\n};\n"],"mappings":";;;;;;;;;;;AAmBA,MAAaA,OAAqB,EAChC,OAAO,cACP,YACA,WACA,WAAW,kBACX,GAAG,YACC;CACJ,MAAM,CAAC,OAAO,YAAY,SAAS,aAAa;CAChD,MAAM,OAAO,MAAM,QAAQ,EAAE,aAAa,OAAO;CAEjD,MAAM,gBAAgB,KAAK,WAAW,EAAE,aAAa,OAAO;CAC5D,MAAM,CAAC,WAAW,gBAAgB,SAAS,oBAAoB,cAAc;AAE7E,iBAAgB;AACd,eAAa,oBAAoB,cAAc;IAC9C,CAAC,cAAc,iBAAiB,CAAC;CAEpC,MAAM,EAAE,SAAS,SAAS,MAAM;CAChC,MAAM,YAAY,aAAa,KAAK,EAAE,MAAM,YAAY,MAAM;CAE9D,MAAM,mBAAmB,UAAkB;AAEzC,MAAI,CADS,MAAM,MAAM,EAAE,MAAM,eAAe,aAAa,MAAM,CACxD;EAEX,MAAM,WAAW,MAAM,KAAK,SAAS;AACnC,OAAI,KAAK,SAAS,MAChB,QAAO;IAAE,GAAG;IAAM,QAAQ;IAAM;AAElC,UAAO;IACP;AAEF,WAAS,SAAS;AAMlB,eAJqB,SAAS,WAC3B,EAAE,MAAM,eAAe,aAAa,MACtC,CAEyB;;AAG5B,QACE,qBAAC;EACC,WAAW,GACT,mEACA,UACD;EACD,aAAY;EACZ,cAAa;EACb,GAAI;aAEJ,qBAAC;GAAI,WAAU;cACb,qBAAC;IAAI,WAAU;;KACb,oBAAC,SAAI,WAAU,mCAAmC;KAClD,oBAAC,SAAI,WAAU,sCAAsC;KACrD,oBAAC,SAAI,WAAU,qCAAqC;;KAChD,EACN,oBAAC;IAAI,WAAU;cACZ,KAAK,KAAK,EAAE,gBAAQ,UAAU;KAC7B,MAAM,WAAWC,OAAK,MAAM,IAAI;KAChC,MAAM,QAAQ,SAAS,SAAS,SAAS;AAGzC,YACE,oBAAC;MACC,WAAW,GACT,qEALW,UAAU,YAOjB,YACA,yEACL;MAED,eAAe,aAAa,MAAM;gBAEjC;QAHI,MAIE;MAEX;KACE;IACF,EACN,oBAAC;GAAI,WAAU;aACb,oBAAC;IAAI,WAAU;cACb,qBAAC;KAAI,WAAU;gBACb,oBAAC;MAAY,cAAc;gBACzB,oBAAC;OACC,YAAY;OACZ,YAAY;OACZ,aAAa;QACb;OACU,EAEd,oBAAC;MAAI,WAAU;gBACb,oBAAC;OAA6B;iBAC3B;QACgB;OACf;MACF;KACF;IACF;GACI"}

package/dist/esm/components/IDE/MonacoCode.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MonacoCode.mjs","names":["MonacoCode: FC<CodeCompProps>","handleMountIde: OnMount"],"sources":["../../../../src/components/IDE/MonacoCode.tsx"],"sourcesContent":["'use client';\n\nimport { Editor, type OnChange, type OnMount } from '@monaco-editor/react';\nimport { type FC, useMemo, useRef, useState } from 'react';\nimport { ~~cn } from '../../utils/cn';\nimport {~~ CopyButton } from '../CopyButton';\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 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 const theme = useMemo(\n () => (isDarkMode ? 'vs-dark-transparent' : 'hc-light-theme'),\n [isDarkMode]\n );\n\n const handleMountIde: OnMount = (editor, monaco) => {\n // first time you set the height based on content Height\n\n ideRef.current = editor as any;\n const contentHeight = (editor.getContentHeight() ?? 0) + 25;\n\n monaco.editor.defineTheme('vs-dark-transparent', {\n base: 'vs-dark',\n inherit: true,\n rules: [],\n colors: {\n 'editor.background': '#00000000',\n },\n });\n monaco.editor.defineTheme('hc-light-theme', {\n base: 'vs',\n inherit: true,\n rules: [],\n colors: {\n 'editor.background': '#00000000',\n },\n });\n\n monaco.editor.setTheme(theme);\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\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 <div className=\"sticky top-5 z-10\">\n <div\n className={cn('absolute right-2 bottom-0 flex h-7 items-center')}\n >\n <CopyButton content={children} />\n </div>\n </div>\n )}\n <div\n className=\"z-0 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={theme}\n className=\"my-2 rounded-md\"\n />\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;AAkBA,MAAaA,cAAiC,EAC5C,UACA,UACA,YACA,iBACA,iBAAiB,MACjB,aAAa,OACb,eACI;CACJ,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,SAAS,OAAO,KAAK;CAC3B,MAAM,CAAC,YAAY,iBAAiB,SAGjC;EAAE,QAAQ;EAAG,OAAO;EAAG,CAAC;CAE3B,MAAM,QAAQ,cACL,aAAa,wBAAwB,kBAC5C,CAAC,WAAW,CACb;CAED,MAAMC,kBAA2B,QAAQ,WAAW;AAGlD,SAAO,UAAU;EACjB,MAAM,iBAAiB,OAAO,kBAAkB,IAAI,KAAK;AAEzD,SAAO,OAAO,YAAY,uBAAuB;GAC/C,MAAM;GACN,SAAS;GACT,OAAO,EAAE;GACT,QAAQ,EACN,qBAAqB,aACtB;GACF,CAAC;AACF,SAAO,OAAO,YAAY,kBAAkB;GAC1C,MAAM;GACN,SAAS;GACT,OAAO,EAAE;GACT,QAAQ,EACN,qBAAqB,aACtB;GACF,CAAC;AAEF,SAAO,OAAO,SAAS,MAAM;AAG7B,SAAO,UAAU,WAAW,mBAAmB,sBAAsB;GACnE,sBAAsB;GACtB,oBAAoB;GACrB,CAAC;AAGF,SAAO,UAAU,WAAW,mBAAmB,sBAAsB;GACnE,sBAAsB;GACtB,oBAAoB;GACrB,CAAC;AAGF,SAAO,UAAU,WAAW,mBAAmB,mBAAmB;GAChE,OAAO;GACP,sBAAsB;GACvB,CAAC;AAEF,SAAO,UAAU,WAAW,mBAAmB,mBAAmB;GAChE,OAAO;GACP,sBAAsB;GACvB,CAAC;AAEF,gBAAc;GACZ,QAAQ;GACR,OAAO,aAAa,SAAS,eAAe;GAC7C,CAAC;;CAGJ,MAAM,oBAAoB,mBAAmB,SAAS,MAAM,KAAK,CAAC,SAAS;AAE3E,QACE,qBAAC;EACC,WAAW,GACT,kCACA,mBAAmB,OACpB;aAEA,kBACC,oBAAC;GAAI,WAAU;aACb,oBAAC;IACC,WAAW,GAAG,kDAAkD;cAEhE,oBAAC,cAAW,SAAS,WAAY;KAC7B;IACF,EAER,oBAAC;GACC,WAAU;GACV,KAAK;aAEL,oBAAC;IACC,GAAI;IACJ,iBAAgB;IACN;IACV,SAAS,oBAAC,WAAS;IACnB,cAAc,OAAO,SAAS,CAAC,QAAQ,OAAO,GAAG;IACjD,SAAS;IACC;IACV,SAAS;KACP,UAAU;KACV,aAAa;KACb,SAAS,EAAE,SAAS,OAAO;KAC3B,WAAW;MACT,UAAU;MACV,uBAAuB;MACvB,yBAAyB;MAC1B;KACD,SAAS;KACT,6BAA6B;KAC7B,kBAAkB;KAClB,gBAAgB,EAAE,SAAS,OAAO;KAClC,4BAA4B;KAE5B,6BAA6B;KAC7B,uBAAuB;KACvB,sBAAsB;KACtB,aAAa,oBAAoB,OAAO;KACzC;IACM;IACP,WAAU;KACV;IACE;GACF"}
1	+ {"version":3,"file":"MonacoCode.mjs","names":["MonacoCode: FC<CodeCompProps>","handleMountIde: OnMount"],"sources":["../../../../src/components/IDE/MonacoCode.tsx"],"sourcesContent":["'use client';\n\nimport { Editor, type OnChange, type OnMount } from '@monaco-editor/react';\nimport { cn } from '@utils/cn';\nimport { type FC, useMemo, useRef, useState } from 'react';\nimport { CopyButton } from '../CopyButton';\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 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 const theme = useMemo(\n () => (isDarkMode ? 'vs-dark-transparent' : 'hc-light-theme'),\n [isDarkMode]\n );\n\n const handleMountIde: OnMount = (editor, monaco) => {\n // first time you set the height based on content Height\n\n ideRef.current = editor as any;\n const contentHeight = (editor.getContentHeight() ?? 0) + 25;\n\n monaco.editor.defineTheme('vs-dark-transparent', {\n base: 'vs-dark',\n inherit: true,\n rules: [],\n colors: {\n 'editor.background': '#00000000',\n },\n });\n monaco.editor.defineTheme('hc-light-theme', {\n base: 'vs',\n inherit: true,\n rules: [],\n colors: {\n 'editor.background': '#00000000',\n },\n });\n\n monaco.editor.setTheme(theme);\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\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 <div className=\"sticky top-5 z-10\">\n <div\n className={cn('absolute right-2 bottom-0 flex h-7 items-center')}\n >\n <CopyButton content={children} />\n </div>\n </div>\n )}\n <div\n className=\"z-0 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={theme}\n className=\"my-2 rounded-md\"\n />\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;AAkBA,MAAaA,cAAiC,EAC5C,UACA,UACA,YACA,iBACA,iBAAiB,MACjB,aAAa,OACb,eACI;CACJ,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,SAAS,OAAO,KAAK;CAC3B,MAAM,CAAC,YAAY,iBAAiB,SAGjC;EAAE,QAAQ;EAAG,OAAO;EAAG,CAAC;CAE3B,MAAM,QAAQ,cACL,aAAa,wBAAwB,kBAC5C,CAAC,WAAW,CACb;CAED,MAAMC,kBAA2B,QAAQ,WAAW;AAGlD,SAAO,UAAU;EACjB,MAAM,iBAAiB,OAAO,kBAAkB,IAAI,KAAK;AAEzD,SAAO,OAAO,YAAY,uBAAuB;GAC/C,MAAM;GACN,SAAS;GACT,OAAO,EAAE;GACT,QAAQ,EACN,qBAAqB,aACtB;GACF,CAAC;AACF,SAAO,OAAO,YAAY,kBAAkB;GAC1C,MAAM;GACN,SAAS;GACT,OAAO,EAAE;GACT,QAAQ,EACN,qBAAqB,aACtB;GACF,CAAC;AAEF,SAAO,OAAO,SAAS,MAAM;AAG7B,SAAO,UAAU,WAAW,mBAAmB,sBAAsB;GACnE,sBAAsB;GACtB,oBAAoB;GACrB,CAAC;AAGF,SAAO,UAAU,WAAW,mBAAmB,sBAAsB;GACnE,sBAAsB;GACtB,oBAAoB;GACrB,CAAC;AAGF,SAAO,UAAU,WAAW,mBAAmB,mBAAmB;GAChE,OAAO;GACP,sBAAsB;GACvB,CAAC;AAEF,SAAO,UAAU,WAAW,mBAAmB,mBAAmB;GAChE,OAAO;GACP,sBAAsB;GACvB,CAAC;AAEF,gBAAc;GACZ,QAAQ;GACR,OAAO,aAAa,SAAS,eAAe;GAC7C,CAAC;;CAGJ,MAAM,oBAAoB,mBAAmB,SAAS,MAAM,KAAK,CAAC,SAAS;AAE3E,QACE,qBAAC;EACC,WAAW,GACT,kCACA,mBAAmB,OACpB;aAEA,kBACC,oBAAC;GAAI,WAAU;aACb,oBAAC;IACC,WAAW,GAAG,kDAAkD;cAEhE,oBAAC,cAAW,SAAS,WAAY;KAC7B;IACF,EAER,oBAAC;GACC,WAAU;GACV,KAAK;aAEL,oBAAC;IACC,GAAI;IACJ,iBAAgB;IACN;IACV,SAAS,oBAAC,WAAS;IACnB,cAAc,OAAO,SAAS,CAAC,QAAQ,OAAO,GAAG;IACjD,SAAS;IACC;IACV,SAAS;KACP,UAAU;KACV,aAAa;KACb,SAAS,EAAE,SAAS,OAAO;KAC3B,WAAW;MACT,UAAU;MACV,uBAAuB;MACvB,yBAAyB;MAC1B;KACD,SAAS;KACT,6BAA6B;KAC7B,kBAAkB;KAClB,gBAAgB,EAAE,SAAS,OAAO;KAClC,4BAA4B;KAE5B,6BAA6B;KAC7B,uBAAuB;KACvB,sBAAsB;KACtB,aAAa,oBAAoB,OAAO;KACzC;IACM;IACP,WAAU;KACV;IACE;GACF"}

package/dist/esm/components/IDE/PackageManagerSelector.mjs CHANGED Viewed

@@ -8,14 +8,15 @@ import { useIntlayer } from "react-intlayer";
 //#region src/components/IDE/PackageManagerSelector.tsx
 const PackageManagerSelector = () => {
 	const { packageManager, setPackageManager } = useCodeContext();
-	const { packageManager: packageManagerContent } = useIntlayer("code-selectors");
+	const content = useIntlayer("code-selectors");
+	useIntlayer("code-selectors");
 	return /* @__PURE__ */ jsxs(Select, {
 		value: packageManager,
 		onValueChange: setPackageManager,
 		children: [/* @__PURE__ */ jsx(Select.Trigger, {
-			className: "py-1",
-			"aria-label": packageManagerContent.label,
-			children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Package Manager" })
+			className: "py-1!",
+			"aria-label": content.packageManager.label.value,
+			children: /* @__PURE__ */ jsx(Select.Value, { placeholder: content.packageManager.placeholder.value })
 		}), /* @__PURE__ */ jsxs(Select.Content, { children: [
 			/* @__PURE__ */ jsx(Select.Item, {
 				value: "npm",

package/dist/esm/components/IDE/PackageManagerSelector.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PackageManagerSelector.mjs","names":["PackageManagerSelector: FC"],"sources":["../../../../src/components/IDE/PackageManagerSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Select } from '../Select';\nimport { useCodeContext } from './CodeContext';\n\nexport const PackageManagerSelector: FC = () => {\n const { packageManager, setPackageManager } = useCodeContext();\n const { ~~packageManager:~~ ~~packageManagerContent } =\~~n useIntlayer('code-selectors');\n\n return (\n <Select value={packageManager} onValueChange={setPackageManager}>\n <Select.Trigger className=\"py-1\" aria-label={~~packageManagerContent~~.label}>\n <Select.Value placeholder~~=\"Package~~ ~~Manager\"~~ />\n </Select.Trigger>\n <Select.Content>\n <Select.Item value=\"npm\">npm</Select.Item>\n <Select.Item value=\"pnpm\">pnpm</Select.Item>\n <Select.Item value=\"yarn\">yarn</Select.Item>\n <Select.Item value=\"bun\">bun</Select.Item>\n </Select.Content>\n </Select>\n );\n};\n"],"mappings":";;;;;;;;AAOA,MAAaA,+BAAmC;CAC9C,MAAM,EAAE,gBAAgB,sBAAsB,gBAAgB;CAC9D,MAAM,~~EAAE~~,~~gBAAgB~~,~~0BACtB~~,~~YAAY~~,iBAAiB;~~AAE/B~~,QACE,qBAAC;EAAO,OAAO;EAAgB,eAAe;aAC5C,oBAAC,OAAO;~~GAAQ~~,WAAU;~~GAAO~~,cAAY,~~sBAAsB~~;~~aACjE~~,oBAAC,OAAO,SAAM,~~aAAY~~,~~oBAAoB~~;~~IAC/B~~,EACjB,qBAAC,OAAO;GACN,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;GAC1C,oBAAC,OAAO;IAAK,OAAM;cAAO;KAAkB;GAC5C,oBAAC,OAAO;IAAK,OAAM;cAAO;KAAkB;GAC5C,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;MAC3B;GACV"}
1	+ {"version":3,"file":"PackageManagerSelector.mjs","names":["PackageManagerSelector: FC"],"sources":["../../../../src/components/IDE/PackageManagerSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Select } from '../Select';\nimport { useCodeContext } from './CodeContext';\n\nexport const PackageManagerSelector: FC = () => {\n const { packageManager, setPackageManager } = useCodeContext();\n const content = useIntlayer('code-selectors');\n useIntlayer('code-selectors');\n\n return (\n <Select value={packageManager} onValueChange={setPackageManager}>\n <Select.Trigger\n className=\"py-1!\"\n aria-label={content.packageManager.label.value}\n >\n <Select.Value placeholder={content.packageManager.placeholder.value} />\n </Select.Trigger>\n <Select.Content>\n <Select.Item value=\"npm\">npm</Select.Item>\n <Select.Item value=\"pnpm\">pnpm</Select.Item>\n <Select.Item value=\"yarn\">yarn</Select.Item>\n <Select.Item value=\"bun\">bun</Select.Item>\n </Select.Content>\n </Select>\n );\n};\n"],"mappings":";;;;;;;;AAOA,MAAaA,+BAAmC;CAC9C,MAAM,EAAE,gBAAgB,sBAAsB,gBAAgB;CAC9D,MAAM,UAAU,YAAY,iBAAiB;AAC7C,aAAY,iBAAiB;AAE7B,QACE,qBAAC;EAAO,OAAO;EAAgB,eAAe;aAC5C,oBAAC,OAAO;GACN,WAAU;GACV,cAAY,QAAQ,eAAe,MAAM;aAEzC,oBAAC,OAAO,SAAM,aAAa,QAAQ,eAAe,YAAY,QAAS;IACxD,EACjB,qBAAC,OAAO;GACN,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;GAC1C,oBAAC,OAAO;IAAK,OAAM;cAAO;KAAkB;GAC5C,oBAAC,OAAO;IAAK,OAAM;cAAO;KAAkB;GAC5C,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;MAC3B;GACV"}