npm - @intlayer/design-system - Versions diffs - 8.2.2 → 8.2.3 - Mend

@intlayer/design-system 8.2.2 → 8.2.3

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 (186) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckboxElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/CheckboxElement.tsx"],"sourcesContent":["import { Checkbox } from '@components/Input';\nimport type { ChangeEvent, ComponentProps, FC, ReactNode } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype CheckboxElementProps = Omit<FormElementProps<typeof Checkbox>, 'Element'> &\n ComponentProps<typeof Checkbox> & {\n name: string;\n inputLabel?: ReactNode;\n };\n\ntype CheckboxComponentProps = Omit<\n ComponentProps<typeof Checkbox>,\n 'label' \| 'value' \| 'onChange'\n> & {\n name: string;\n inputLabel?: ComponentProps<typeof Checkbox>['label'];\n // FormElement passes value/onChange, but checkbox needs checked\n value?: boolean;\n onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n};\n\n/*\n Wrapper component that converts FormElement's value/onChange pattern\n * to checkbox's checked/onChange pattern\n */\nconst CheckboxComponent: FC<CheckboxComponentProps> = ({\n inputLabel,\n value,\n onChange,\n ...props\n}) => (\n <Checkbox\n {...props}\n label={inputLabel}\n // Convert value (boolean) to checked prop\n checked={Boolean(value)}\n // Pass through onChange - it receives the event with target.checked\n onChange={onChange}\n />\n);\n\nexport const CheckboxElement: FC<CheckboxElementProps> = ({\n autoComplete,\n ...props\n}) => (\n <FormElement\n Element={CheckboxComponent}\n id={props.name}\n data-testid={props.name}\n autoComplete={autoComplete}\n {...props}\n />\n);\n"],"mappings":"4IAyBA,MAAM,GAAiD,CACrD,aACA,QACA,WACA,GAAG,KAEH,EAAC,~~EAAA~~,~~CACC~~,GAAI,EACJ,MAAO,EAEP,QAAS,EAAQ,EAEP,~~YACV~~,CAGS,GAA6C,CACxD,eACA,GAAG,KAEH,EAAC,~~EAAA~~,~~CACC~~,QAAS,EACT,GAAI,EAAM,KACV,cAAa,EAAM,KACL,eACd,GAAI,~~GACJ~~"}
1	+ {"version":3,"file":"CheckboxElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/CheckboxElement.tsx"],"sourcesContent":["import { Checkbox } from '@components/Input';\nimport type { ChangeEvent, ComponentProps, FC, ReactNode } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype CheckboxElementProps = Omit<FormElementProps<typeof Checkbox>, 'Element'> &\n ComponentProps<typeof Checkbox> & {\n name: string;\n inputLabel?: ReactNode;\n };\n\ntype CheckboxComponentProps = Omit<\n ComponentProps<typeof Checkbox>,\n 'label' \| 'value' \| 'onChange'\n> & {\n name: string;\n inputLabel?: ComponentProps<typeof Checkbox>['label'];\n // FormElement passes value/onChange, but checkbox needs checked\n value?: boolean;\n onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n};\n\n/*\n Wrapper component that converts FormElement's value/onChange pattern\n * to checkbox's checked/onChange pattern\n */\nconst CheckboxComponent: FC<CheckboxComponentProps> = ({\n inputLabel,\n value,\n onChange,\n ...props\n}) => (\n <Checkbox\n {...props}\n label={inputLabel}\n // Convert value (boolean) to checked prop\n checked={Boolean(value)}\n // Pass through onChange - it receives the event with target.checked\n onChange={onChange}\n />\n);\n\nexport const CheckboxElement: FC<CheckboxElementProps> = ({\n autoComplete,\n ...props\n}) => (\n <FormElement\n Element={CheckboxComponent}\n id={props.name}\n data-testid={props.name}\n autoComplete={autoComplete}\n {...props}\n />\n);\n"],"mappings":"4IAyBA,MAAM,GAAiD,CACrD,aACA,QACA,WACA,GAAG,KAEH,EAAC,EAAD,CACE,GAAI,EACJ,MAAO,EAEP,QAAS,EAAQ,EAEP,WACV,CAAA,CAGS,GAA6C,CACxD,eACA,GAAG,KAEH,EAAC,EAAD,CACE,QAAS,EACT,GAAI,EAAM,KACV,cAAa,EAAM,KACL,eACd,GAAI,EACJ,CAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"EditableFieldInputElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/EditableFieldInputElement.tsx"],"sourcesContent":["import { EditableFieldInput } from '@components/EditableField/EditableFieldInput';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype EditableFieldInputElementProps = Omit<\n FormElementProps<typeof EditableFieldInput>,\n 'Element'\n> &\n Omit<\n ComponentProps<typeof EditableFieldInput> & {\n name: string;\n description?: ReactNode;\n placeholder?: string;\n className?: string;\n children?: ReactNode;\n },\n 'aria-label' \| 'aria-labelledby'\n >;\n\nexport const EditableFieldInputElement = (\n props: EditableFieldInputElementProps\n) => (\n <FormElement\n id={props.name}\n data-testid={props.name}\n aria-labelledby={props.label ? `${props.name}-label` : undefined}\n aria-label={props.label ? undefined : props.name}\n Element={EditableFieldInput}\n {...props}\n />\n);\n"],"mappings":"wKAmBA,MAAa,EACX,GAEA,EAAC,~~EAAA~~,~~CACC~~,GAAI,EAAM,KACV,cAAa,EAAM,KACnB,kBAAiB,EAAM,MAAQ,GAAG,EAAM,KAAK,QAAU,IAAA,GACvD,aAAY,EAAM,MAAQ,IAAA,GAAY,EAAM,KAC5C,QAAS,EACT,GAAI,~~GACJ~~"}
1	+ {"version":3,"file":"EditableFieldInputElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/EditableFieldInputElement.tsx"],"sourcesContent":["import { EditableFieldInput } from '@components/EditableField/EditableFieldInput';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype EditableFieldInputElementProps = Omit<\n FormElementProps<typeof EditableFieldInput>,\n 'Element'\n> &\n Omit<\n ComponentProps<typeof EditableFieldInput> & {\n name: string;\n description?: ReactNode;\n placeholder?: string;\n className?: string;\n children?: ReactNode;\n },\n 'aria-label' \| 'aria-labelledby'\n >;\n\nexport const EditableFieldInputElement = (\n props: EditableFieldInputElementProps\n) => (\n <FormElement\n id={props.name}\n data-testid={props.name}\n aria-labelledby={props.label ? `${props.name}-label` : undefined}\n aria-label={props.label ? undefined : props.name}\n Element={EditableFieldInput}\n {...props}\n />\n);\n"],"mappings":"wKAmBA,MAAa,EACX,GAEA,EAAC,EAAD,CACE,GAAI,EAAM,KACV,cAAa,EAAM,KACnB,kBAAiB,EAAM,MAAQ,GAAG,EAAM,KAAK,QAAU,IAAA,GACvD,aAAY,EAAM,MAAQ,IAAA,GAAY,EAAM,KAC5C,QAAS,EACT,GAAI,EACJ,CAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"EditableFieldTextAreaElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/EditableFieldTextAreaElement.tsx"],"sourcesContent":["import { EditableFieldTextArea } from '@components/EditableField/EditableFieldTextArea';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype EditableFieldTextAreaElementProps = Omit<\n FormElementProps<typeof EditableFieldTextArea>,\n 'Element'\n> &\n Omit<\n ComponentProps<typeof EditableFieldTextArea> & {\n name: string;\n description?: ReactNode;\n placeholder?: string;\n className?: string;\n children?: ReactNode;\n },\n 'aria-label' \| 'aria-labelledby'\n >;\n\nexport const EditableFieldTextAreaElement = (\n props: EditableFieldTextAreaElementProps\n) => (\n <FormElement\n id={props.name}\n data-testid={props.name}\n aria-labelledby={props.label ? `${props.name}-label` : undefined}\n aria-label={props.label ? undefined : props.name}\n Element={EditableFieldTextArea}\n {...props}\n />\n);\n"],"mappings":"8KAmBA,MAAa,EACX,GAEA,EAAC,~~EAAA~~,~~CACC~~,GAAI,EAAM,KACV,cAAa,EAAM,KACnB,kBAAiB,EAAM,MAAQ,GAAG,EAAM,KAAK,QAAU,IAAA,GACvD,aAAY,EAAM,MAAQ,IAAA,GAAY,EAAM,KAC5C,QAAS,EACT,GAAI,~~GACJ~~"}
1	+ {"version":3,"file":"EditableFieldTextAreaElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/EditableFieldTextAreaElement.tsx"],"sourcesContent":["import { EditableFieldTextArea } from '@components/EditableField/EditableFieldTextArea';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype EditableFieldTextAreaElementProps = Omit<\n FormElementProps<typeof EditableFieldTextArea>,\n 'Element'\n> &\n Omit<\n ComponentProps<typeof EditableFieldTextArea> & {\n name: string;\n description?: ReactNode;\n placeholder?: string;\n className?: string;\n children?: ReactNode;\n },\n 'aria-label' \| 'aria-labelledby'\n >;\n\nexport const EditableFieldTextAreaElement = (\n props: EditableFieldTextAreaElementProps\n) => (\n <FormElement\n id={props.name}\n data-testid={props.name}\n aria-labelledby={props.label ? `${props.name}-label` : undefined}\n aria-label={props.label ? undefined : props.name}\n Element={EditableFieldTextArea}\n {...props}\n />\n);\n"],"mappings":"8KAmBA,MAAa,EACX,GAEA,EAAC,EAAD,CACE,GAAI,EAAM,KACV,cAAa,EAAM,KACnB,kBAAiB,EAAM,MAAQ,GAAG,EAAM,KAAK,QAAU,IAAA,GACvD,aAAY,EAAM,MAAQ,IAAA,GAAY,EAAM,KAC5C,QAAS,EACT,GAAI,EACJ,CAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FormElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/FormElement.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ElementType, ReactNode } from 'react';\nimport {\n type ControllerRenderProps,\n type FieldValues,\n useFormContext,\n} from 'react-hook-form';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout, type FormItemLayoutProps } from '../layout';\n\nexport type FormElementProps<T extends ElementType> = {\n name: string;\n Element: T;\n label?: ReactNode;\n isRequired?: boolean;\n info?: string;\n showErrorMessage?: boolean;\n focus?: boolean;\n} & Omit<FormItemLayoutProps, 'children'>;\n\ntype FormFieldElementProps<T extends ElementType> = FormElementProps<T> &\n ComponentProps<T> & {\n field: ControllerRenderProps<FieldValues, string>;\n };\n\nconst FormFieldElement = <T extends ElementType>({\n field,\n name,\n label,\n Element,\n isRequired = false,\n info,\n description,\n showErrorMessage = true,\n ...props\n}: FormFieldElementProps<T>) => {\n const { error } = useFormField();\n\n // Ensure controlled inputs and merge onChange with RHF controller\n const {\n value: fieldValue,\n onChange: fieldOnChange,\n ...fieldRest\n } = (field as unknown as {\n value: unknown;\n onChange: (...args: unknown[]) => void;\n }) ?? {};\n\n const propsAny = props as unknown as {\n value?: unknown;\n onChange?: (...args: unknown[]) => void;\n children?: unknown;\n };\n\n const mergedValue =\n propsAny.value !== undefined ? propsAny.value : (fieldValue ?? '');\n\n const mergedOnChange = (...args: unknown[]) => {\n if (typeof fieldOnChange === 'function') fieldOnChange(...args);\n if (typeof propsAny.onChange === 'function') propsAny.onChange(...args);\n };\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 <Element\n data-testid=\"element\"\n id={name}\n {...fieldRest}\n {...props}\n // Force controlled value to avoid uncontrolled-to-controlled warnings\n value={mergedValue as never}\n // Merge onChange so RHF stays in sync while allowing custom handlers\n onChange={mergedOnChange as never}\n >\n {props.children}\n </Element>\n </FormItemLayout>\n );\n};\n\n/*\n FormElement is a component that allows you to create a form element with a label, description, error message, and validation.\n \n The Element prop is the type of the element that will be rendered.\n * This element will interact with the FormContext and will be controlled by the FormControl component.\n * The props used to control the element will be `value` and `onChange`.\n */\nexport const FormElement = <T extends ElementType>(\n props: FormElementProps<T> & ComponentProps<T>\n) => {\n const { control } = useFormContext();\n\n return (\n <Form.Field\n control={control}\n name={props.name}\n render={({ field }) => <FormFieldElement {...props} field={field} />}\n />\n );\n};\n"],"mappings":"uPA2BA,MAAM,GAA2C,CAC/C,QACA,OACA,QACA,UACA,aAAa,GACb,OACA,cACA,mBAAmB,GACnB,GAAG,KAC2B,CAC9B,GAAM,CAAE,SAAU,GAAc,CAG1B,CACJ,MAAO,EACP,SAAU,EACV,GAAG,GACA,GAGC,EAAE,CAEF,EAAW,EAMX,EACJ,EAAS,QAAU,IAAA,GAA8B,GAAc,GAAhC,EAAS,MAEpC,GAAkB,GAAG,IAAoB,CACzC,OAAO,GAAkB,YAAY,EAAc,GAAG,EAAK,CAC3D,OAAO,EAAS,UAAa,YAAY,EAAS,SAAS,GAAG,EAAK,EAGzE,OACE,EAAC,~~EAAA~~,~~CACC~~,QAAS,EACF,QACM,cACD,aACN,OACY,mBAClB,eAAc,CAAC,CAAC,WAEhB,EAAC,~~EAAA~~,~~CACC~~,cAAY,UACZ,GAAI,EACJ,GAAI,EACJ,GAAI,EAEJ,MAAO,EAEP,SAAU,WAET,EAAM,~~UACC~~,~~EACK~~,EAWR,EACX,GACG,CACH,GAAM,CAAE,WAAY,GAAgB,CAEpC,OACE,EAAC,EAAK,~~MAAA~~,~~CACK~~,UACT,KAAM,EAAM,KACZ,QAAS,CAAE,WAAY,EAAC,~~EAAA~~,~~CAAiB~~,GAAI,EAAc,~~SAAS~~,~~EACpE~~"}
1	+ {"version":3,"file":"FormElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/FormElement.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ElementType, ReactNode } from 'react';\nimport {\n type ControllerRenderProps,\n type FieldValues,\n useFormContext,\n} from 'react-hook-form';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout, type FormItemLayoutProps } from '../layout';\n\nexport type FormElementProps<T extends ElementType> = {\n name: string;\n Element: T;\n label?: ReactNode;\n isRequired?: boolean;\n info?: string;\n showErrorMessage?: boolean;\n focus?: boolean;\n} & Omit<FormItemLayoutProps, 'children'>;\n\ntype FormFieldElementProps<T extends ElementType> = FormElementProps<T> &\n ComponentProps<T> & {\n field: ControllerRenderProps<FieldValues, string>;\n };\n\nconst FormFieldElement = <T extends ElementType>({\n field,\n name,\n label,\n Element,\n isRequired = false,\n info,\n description,\n showErrorMessage = true,\n ...props\n}: FormFieldElementProps<T>) => {\n const { error } = useFormField();\n\n // Ensure controlled inputs and merge onChange with RHF controller\n const {\n value: fieldValue,\n onChange: fieldOnChange,\n ...fieldRest\n } = (field as unknown as {\n value: unknown;\n onChange: (...args: unknown[]) => void;\n }) ?? {};\n\n const propsAny = props as unknown as {\n value?: unknown;\n onChange?: (...args: unknown[]) => void;\n children?: unknown;\n };\n\n const mergedValue =\n propsAny.value !== undefined ? propsAny.value : (fieldValue ?? '');\n\n const mergedOnChange = (...args: unknown[]) => {\n if (typeof fieldOnChange === 'function') fieldOnChange(...args);\n if (typeof propsAny.onChange === 'function') propsAny.onChange(...args);\n };\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 <Element\n data-testid=\"element\"\n id={name}\n {...fieldRest}\n {...props}\n // Force controlled value to avoid uncontrolled-to-controlled warnings\n value={mergedValue as never}\n // Merge onChange so RHF stays in sync while allowing custom handlers\n onChange={mergedOnChange as never}\n >\n {props.children}\n </Element>\n </FormItemLayout>\n );\n};\n\n/*\n FormElement is a component that allows you to create a form element with a label, description, error message, and validation.\n \n The Element prop is the type of the element that will be rendered.\n * This element will interact with the FormContext and will be controlled by the FormControl component.\n * The props used to control the element will be `value` and `onChange`.\n */\nexport const FormElement = <T extends ElementType>(\n props: FormElementProps<T> & ComponentProps<T>\n) => {\n const { control } = useFormContext();\n\n return (\n <Form.Field\n control={control}\n name={props.name}\n render={({ field }) => <FormFieldElement {...props} field={field} />}\n />\n );\n};\n"],"mappings":"uPA2BA,MAAM,GAA2C,CAC/C,QACA,OACA,QACA,UACA,aAAa,GACb,OACA,cACA,mBAAmB,GACnB,GAAG,KAC2B,CAC9B,GAAM,CAAE,SAAU,GAAc,CAG1B,CACJ,MAAO,EACP,SAAU,EACV,GAAG,GACA,GAGC,EAAE,CAEF,EAAW,EAMX,EACJ,EAAS,QAAU,IAAA,GAA8B,GAAc,GAAhC,EAAS,MAEpC,GAAkB,GAAG,IAAoB,CACzC,OAAO,GAAkB,YAAY,EAAc,GAAG,EAAK,CAC3D,OAAO,EAAS,UAAa,YAAY,EAAS,SAAS,GAAG,EAAK,EAGzE,OACE,EAAC,EAAD,CACE,QAAS,EACF,QACM,cACD,aACN,OACY,mBAClB,eAAc,CAAC,CAAC,WAEhB,EAAC,EAAD,CACE,cAAY,UACZ,GAAI,EACJ,GAAI,EACJ,GAAI,EAEJ,MAAO,EAEP,SAAU,WAET,EAAM,SACC,CAAA,CACK,CAAA,EAWR,EACX,GACG,CACH,GAAM,CAAE,WAAY,GAAgB,CAEpC,OACE,EAAC,EAAK,MAAN,CACW,UACT,KAAM,EAAM,KACZ,QAAS,CAAE,WAAY,EAAC,EAAD,CAAkB,GAAI,EAAc,QAAS,CAAA,CACpE,CAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FormElementWrapper.mjs","names":[],"sources":["../../../../../src/components/Form/elements/FormElementWrapper.tsx"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport type { FC, FormEvent, HTMLProps } from 'react';\nimport { FormProvider, useForm } from 'react-hook-form';\nimport { z } from 'zod/v4';\n\nconst Schema = z.object({\n test: z.string().min(3, 'test error'),\n});\n\ntype FormElementWrapperProps = HTMLProps<HTMLFormElement> & {\n schema?: z.ZodObject;\n values?: z.infer<z.ZodObject>;\n};\n\nexport const FormElementWrapper: FC<FormElementWrapperProps> = (props) => {\n const objectFormSchema = props.schema ?? Schema;\n\n const form = useForm<z.infer<typeof objectFormSchema>>({\n resolver: zodResolver(objectFormSchema as any),\n values: props.values,\n });\n\n const { children, onSubmit, ...rest } = props;\n\n const onSubmitForm = (\n values: z.infer<typeof objectFormSchema>,\n event: FormEvent<HTMLFormElement>\n ) => {\n const parsedValues = objectFormSchema.safeParse(values);\n if (parsedValues.success) {\n onSubmit?.(event);\n }\n };\n\n return (\n <FormProvider {...form}>\n <form\n {...rest}\n onSubmit={(e) => {\n e.preventDefault();\n form.handleSubmit((values) => onSubmitForm(values, e));\n }}\n >\n {children}\n </form>\n </FormProvider>\n );\n};\n"],"mappings":"kMAOA,MAAM,EAAS,EAAE,OAAO,CACtB,KAAM,EAAE,QAAQ,CAAC,IAAI,EAAG,aAAa,CACtC,CAAC,CAOW,EAAmD,GAAU,CACxE,IAAM,EAAmB,EAAM,QAAU,EAEnC,EAAO,EAA0C,CACrD,SAAU,EAAY,EAAwB,CAC9C,OAAQ,EAAM,OACf,CAAC,CAEI,CAAE,WAAU,WAAU,GAAG,GAAS,EAElC,GACJ,EACA,IACG,CACkB,EAAiB,UAAU,EAAO,CACtC,SACf,IAAW,EAAM,EAIrB,OACE,EAAC,~~EAAA~~,~~CAAa~~,GAAI,WAChB,EAAC,~~OAAA~~,~~CACC~~,GAAI,EACJ,SAAW,GAAM,CACf,EAAE,gBAAgB,CAClB,EAAK,aAAc,GAAW,EAAa,EAAQ,EAAE,CAAC,EAGvD,~~YACI~~,~~EACM~~"}
1	+ {"version":3,"file":"FormElementWrapper.mjs","names":[],"sources":["../../../../../src/components/Form/elements/FormElementWrapper.tsx"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport type { FC, FormEvent, HTMLProps } from 'react';\nimport { FormProvider, useForm } from 'react-hook-form';\nimport { z } from 'zod/v4';\n\nconst Schema = z.object({\n test: z.string().min(3, 'test error'),\n});\n\ntype FormElementWrapperProps = HTMLProps<HTMLFormElement> & {\n schema?: z.ZodObject;\n values?: z.infer<z.ZodObject>;\n};\n\nexport const FormElementWrapper: FC<FormElementWrapperProps> = (props) => {\n const objectFormSchema = props.schema ?? Schema;\n\n const form = useForm<z.infer<typeof objectFormSchema>>({\n resolver: zodResolver(objectFormSchema as any),\n values: props.values,\n });\n\n const { children, onSubmit, ...rest } = props;\n\n const onSubmitForm = (\n values: z.infer<typeof objectFormSchema>,\n event: FormEvent<HTMLFormElement>\n ) => {\n const parsedValues = objectFormSchema.safeParse(values);\n if (parsedValues.success) {\n onSubmit?.(event);\n }\n };\n\n return (\n <FormProvider {...form}>\n <form\n {...rest}\n onSubmit={(e) => {\n e.preventDefault();\n form.handleSubmit((values) => onSubmitForm(values, e));\n }}\n >\n {children}\n </form>\n </FormProvider>\n );\n};\n"],"mappings":"kMAOA,MAAM,EAAS,EAAE,OAAO,CACtB,KAAM,EAAE,QAAQ,CAAC,IAAI,EAAG,aAAa,CACtC,CAAC,CAOW,EAAmD,GAAU,CACxE,IAAM,EAAmB,EAAM,QAAU,EAEnC,EAAO,EAA0C,CACrD,SAAU,EAAY,EAAwB,CAC9C,OAAQ,EAAM,OACf,CAAC,CAEI,CAAE,WAAU,WAAU,GAAG,GAAS,EAElC,GACJ,EACA,IACG,CACkB,EAAiB,UAAU,EAAO,CACtC,SACf,IAAW,EAAM,EAIrB,OACE,EAAC,EAAD,CAAc,GAAI,WAChB,EAAC,OAAD,CACE,GAAI,EACJ,SAAW,GAAM,CACf,EAAE,gBAAgB,CAClB,EAAK,aAAc,GAAW,EAAa,EAAQ,EAAE,CAAC,EAGvD,WACI,CAAA,CACM,CAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InputElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/InputElement.tsx"],"sourcesContent":["import { Input } from '@components/Input';\nimport type { ComponentProps, FC } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype InputElementProps = Omit<FormElementProps<typeof Input>, 'Element'> &\n Omit<\n ComponentProps<typeof Input> & {\n name: string;\n },\n 'aria-label' \| 'aria-labelledby'\n >;\n\nexport const InputElement: FC<InputElementProps> = (props) => (\n <FormElement\n id={props.name}\n data-testid={props.name}\n Element={Input}\n aria-labelledby={props.label ? `${props.name}-label` : undefined}\n aria-label={props.label ? undefined : props.name}\n {...props}\n />\n);\n"],"mappings":"sIAYA,MAAa,EAAuC,GAClD,EAAC,~~EAAA~~,~~CACC~~,GAAI,EAAM,KACV,cAAa,EAAM,KACnB,QAAS,EACT,kBAAiB,EAAM,MAAQ,GAAG,EAAM,KAAK,QAAU,IAAA,GACvD,aAAY,EAAM,MAAQ,IAAA,GAAY,EAAM,KAC5C,GAAI,~~GACJ~~"}
1	+ {"version":3,"file":"InputElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/InputElement.tsx"],"sourcesContent":["import { Input } from '@components/Input';\nimport type { ComponentProps, FC } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype InputElementProps = Omit<FormElementProps<typeof Input>, 'Element'> &\n Omit<\n ComponentProps<typeof Input> & {\n name: string;\n },\n 'aria-label' \| 'aria-labelledby'\n >;\n\nexport const InputElement: FC<InputElementProps> = (props) => (\n <FormElement\n id={props.name}\n data-testid={props.name}\n Element={Input}\n aria-labelledby={props.label ? `${props.name}-label` : undefined}\n aria-label={props.label ? undefined : props.name}\n {...props}\n />\n);\n"],"mappings":"sIAYA,MAAa,EAAuC,GAClD,EAAC,EAAD,CACE,GAAI,EAAM,KACV,cAAa,EAAM,KACnB,QAAS,EACT,kBAAiB,EAAM,MAAQ,GAAG,EAAM,KAAK,QAAU,IAAA,GACvD,aAAY,EAAM,MAAQ,IAAA,GAAY,EAAM,KAC5C,GAAI,EACJ,CAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InputPasswordElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/InputPasswordElement.tsx"],"sourcesContent":["import { InputPassword } from '@components/Input/InputPassword';\nimport type { ComponentProps, FC } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype InputPasswordElementProps = Omit<\n FormElementProps<typeof InputPassword>,\n 'Element'\n> &\n Omit<\n ComponentProps<typeof InputPassword> & {\n name: string;\n autoComplete: 'current-password' \| 'new-password';\n },\n 'aria-label' \| 'aria-labelledby'\n >;\n\nexport const InputPasswordElement: FC<InputPasswordElementProps> = ({\n autoComplete,\n ...props\n}) => (\n <FormElement\n Element={InputPassword}\n id={props.name}\n data-testid={props.name}\n aria-labelledby={props.label ? `${props.name}-label` : undefined}\n aria-label={props.label ? undefined : props.name}\n autoComplete={autoComplete}\n minLength={6}\n maxLength={255}\n {...props}\n />\n);\n"],"mappings":"sJAgBA,MAAa,GAAuD,CAClE,eACA,GAAG,KAEH,EAAC,~~EAAA~~,~~CACC~~,QAAS,EACT,GAAI,EAAM,KACV,cAAa,EAAM,KACnB,kBAAiB,EAAM,MAAQ,GAAG,EAAM,KAAK,QAAU,IAAA,GACvD,aAAY,EAAM,MAAQ,IAAA,GAAY,EAAM,KAC9B,eACd,UAAW,EACX,UAAW,IACX,GAAI,~~GACJ~~"}
1	+ {"version":3,"file":"InputPasswordElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/InputPasswordElement.tsx"],"sourcesContent":["import { InputPassword } from '@components/Input/InputPassword';\nimport type { ComponentProps, FC } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype InputPasswordElementProps = Omit<\n FormElementProps<typeof InputPassword>,\n 'Element'\n> &\n Omit<\n ComponentProps<typeof InputPassword> & {\n name: string;\n autoComplete: 'current-password' \| 'new-password';\n },\n 'aria-label' \| 'aria-labelledby'\n >;\n\nexport const InputPasswordElement: FC<InputPasswordElementProps> = ({\n autoComplete,\n ...props\n}) => (\n <FormElement\n Element={InputPassword}\n id={props.name}\n data-testid={props.name}\n aria-labelledby={props.label ? `${props.name}-label` : undefined}\n aria-label={props.label ? undefined : props.name}\n autoComplete={autoComplete}\n minLength={6}\n maxLength={255}\n {...props}\n />\n);\n"],"mappings":"sJAgBA,MAAa,GAAuD,CAClE,eACA,GAAG,KAEH,EAAC,EAAD,CACE,QAAS,EACT,GAAI,EAAM,KACV,cAAa,EAAM,KACnB,kBAAiB,EAAM,MAAQ,GAAG,EAAM,KAAK,QAAU,IAAA,GACvD,aAAY,EAAM,MAAQ,IAAA,GAAY,EAAM,KAC9B,eACd,UAAW,EACX,UAAW,IACX,GAAI,EACJ,CAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiselectElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/MultiselectElement.tsx"],"sourcesContent":["'use client';\n\nimport { MultiSelect } from '@components/Select/Multiselect';\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<\n FormElementProps<typeof MultiSelect>,\n 'Element'\n> &\n ComponentProps<typeof MultiSelect> & {\n name: string;\n description?: string;\n placeholder?: string;\n className?: string;\n children?: ReactNode;\n };\n\nconst MultiSelectFieldContent = ({\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 <MultiSelect\n onValueChange={field.onChange}\n values={field.value}\n {...props}\n >\n {children}\n </MultiSelect>\n </FormItemLayout>\n );\n};\n\nexport const MultiSelectElement = ({\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 <MultiSelectFieldContent\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 </MultiSelectFieldContent>\n )}\n />\n );\n};\n"],"mappings":"kTAsBA,MAAM,GAA2B,CAC/B,QACA,OACA,QACA,cACA,aACA,OACA,mBACA,WACA,GAAG,KACwD,CAC3D,GAAM,CAAE,SAAU,GAAc,CAEhC,OACE,EAAC,~~EAAA~~,~~CACC~~,QAAS,EACF,QACM,cACD,aACN,OACY,mBAClB,eAAc,CAAC,CAAC,WAEhB,EAAC,~~EAAA~~,~~CACC~~,cAAe,EAAM,SACrB,OAAQ,EAAM,MACd,GAAI,EAEH,~~YACW~~,~~EACC~~,EAIR,GAAsB,CACjC,OACA,cACA,QACA,aACA,OACA,mBACA,WACA,GAAG,KACsB,CACzB,GAAM,CAAE,WAAY,GAAgB,CAEpC,OACE,EAAC,EAAK,~~MAAA~~,~~CACK~~,UACH,OACN,QAAS,CAAE,WACT,EAAC,~~EAAA~~,~~CACQ~~,QACD,OACC,QACM,cACD,aACN,OACY,mBAClB,GAAI,EAEH,~~YACuB~~,~~EAE5B~~"}
1	+ {"version":3,"file":"MultiselectElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/MultiselectElement.tsx"],"sourcesContent":["'use client';\n\nimport { MultiSelect } from '@components/Select/Multiselect';\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<\n FormElementProps<typeof MultiSelect>,\n 'Element'\n> &\n ComponentProps<typeof MultiSelect> & {\n name: string;\n description?: string;\n placeholder?: string;\n className?: string;\n children?: ReactNode;\n };\n\nconst MultiSelectFieldContent = ({\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 <MultiSelect\n onValueChange={field.onChange}\n values={field.value}\n {...props}\n >\n {children}\n </MultiSelect>\n </FormItemLayout>\n );\n};\n\nexport const MultiSelectElement = ({\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 <MultiSelectFieldContent\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 </MultiSelectFieldContent>\n )}\n />\n );\n};\n"],"mappings":"kTAsBA,MAAM,GAA2B,CAC/B,QACA,OACA,QACA,cACA,aACA,OACA,mBACA,WACA,GAAG,KACwD,CAC3D,GAAM,CAAE,SAAU,GAAc,CAEhC,OACE,EAAC,EAAD,CACE,QAAS,EACF,QACM,cACD,aACN,OACY,mBAClB,eAAc,CAAC,CAAC,WAEhB,EAAC,EAAD,CACE,cAAe,EAAM,SACrB,OAAQ,EAAM,MACd,GAAI,EAEH,WACW,CAAA,CACC,CAAA,EAIR,GAAsB,CACjC,OACA,cACA,QACA,aACA,OACA,mBACA,WACA,GAAG,KACsB,CACzB,GAAM,CAAE,WAAY,GAAgB,CAEpC,OACE,EAAC,EAAK,MAAN,CACW,UACH,OACN,QAAS,CAAE,WACT,EAAC,EAAD,CACS,QACD,OACC,QACM,cACD,aACN,OACY,mBAClB,GAAI,EAEH,WACuB,CAAA,CAE5B,CAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"OTPElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/OTPElement.tsx"],"sourcesContent":["'use client';\n\nimport {\n InputIndicator,\n InputOTP,\n InputOTPGroup,\n InputOTPSeparator,\n InputOTPSlot,\n} from '@components/Input/OTPInput';\nimport { useItemSelector } from '@hooks/useItemSelector';\nimport { type ComponentProps, type ReactNode, useEffect, useRef } 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 OTPElementsProps = Omit<FormElementProps<typeof InputOTP>, 'Element'> &\n Omit<ComponentProps<typeof InputOTP>, 'children'> & {\n name: string;\n description?: string;\n placeholder?: string;\n className?: string;\n children?: ReactNode;\n /** Number of OTP slots (default: 6) */\n slots?: number;\n };\n\nconst selector = (option: HTMLElement) =>\n option?.getAttribute('aria-selected') === 'true';\n\nconst OTPFieldContent = ({\n field,\n name,\n label,\n description,\n isRequired,\n info,\n showErrorMessage,\n children,\n slots = 6,\n maxLength = 6,\n ...props\n}: Omit<OTPElementsProps, 'control'> & { field: any }) => {\n const { error } = useFormField();\n\n const optionsRefs = useRef<HTMLElement[]>([]);\n const { choiceIndicatorPosition, calculatePosition } = useItemSelector(\n optionsRefs,\n {\n selector,\n isHoverable: true,\n }\n );\n\n useEffect(() => {\n calculatePosition();\n }, []);\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 <InputOTP\n onChange={field.onChange}\n defaultValue={field.value}\n maxLength={maxLength}\n pattern=\"^[0-9]+$\"\n onActiveSlotChange={calculatePosition}\n {...(props as any)}\n >\n {children ?? (\n <>\n <InputOTPGroup>\n <InputOTPSlot\n index={0}\n ref={(el) => {\n optionsRefs.current[0] = el!;\n }}\n />\n <InputOTPSlot\n index={1}\n ref={(el) => {\n optionsRefs.current[1] = el!;\n }}\n />\n <InputOTPSlot\n index={2}\n ref={(el) => {\n optionsRefs.current[2] = el!;\n }}\n />\n </InputOTPGroup>\n <InputOTPSeparator />\n <InputOTPGroup>\n <InputOTPSlot\n index={3}\n ref={(el) => {\n optionsRefs.current[3] = el!;\n }}\n />\n <InputOTPSlot\n index={4}\n ref={(el) => {\n optionsRefs.current[4] = el!;\n }}\n />\n <InputOTPSlot\n index={5}\n ref={(el) => {\n optionsRefs.current[5] = el!;\n }}\n />\n </InputOTPGroup>\n {choiceIndicatorPosition && (\n <InputIndicator style={choiceIndicatorPosition} />\n )}\n </>\n )}\n </InputOTP>\n </FormItemLayout>\n );\n};\n\nexport const OTPElement = ({\n name,\n description,\n label,\n isRequired,\n info,\n showErrorMessage,\n children,\n slots = 6,\n maxLength = 6,\n ...props\n}: OTPElementsProps) => {\n const { control } = useFormContext();\n\n return (\n <Form.Field\n control={control}\n name={name}\n render={({ field }) => (\n <OTPFieldContent\n field={field}\n name={name}\n label={label}\n description={description}\n isRequired={isRequired}\n info={info}\n showErrorMessage={showErrorMessage}\n slots={slots}\n maxLength={maxLength}\n {...props}\n >\n {children}\n </OTPFieldContent>\n )}\n />\n );\n};\n"],"mappings":"sgBA4BA,MAAM,EAAY,GAChB,GAAQ,aAAa,gBAAgB,GAAK,OAEtC,GAAmB,CACvB,QACA,OACA,QACA,cACA,aACA,OACA,mBACA,WACA,QAAQ,EACR,YAAY,EACZ,GAAG,KACqD,CACxD,GAAM,CAAE,SAAU,GAAc,CAE1B,EAAc,EAAsB,EAAE,CAAC,CACvC,CAAE,0BAAyB,qBAAsB,EACrD,EACA,CACE,WACA,YAAa,GACd,CACF,CAMD,OAJA,MAAgB,CACd,GAAmB,EAClB,EAAE,CAAC,CAGJ,EAAC,~~EAAA~~,~~CACC~~,QAAS,EACF,QACM,cACD,aACN,OACY,mBAClB,eAAc,CAAC,CAAC,WAEhB,EAAC,~~EAAA~~,~~CACC~~,SAAU,EAAM,SAChB,aAAc,EAAM,MACT,YACX,QAAQ,WACR,mBAAoB,EACpB,GAAK,WAEJ,GACC,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,~~EAAA~~,CAAA,SAAA,~~CACC~~,EAAC,~~EAAA~~,~~CACC~~,MAAO,EACP,IAAM,GAAO,CACX,EAAY,QAAQ,GAAK,~~IAE3B~~,CACF,EAAC,~~EAAA~~,~~CACC~~,MAAO,EACP,IAAM,GAAO,CACX,EAAY,QAAQ,GAAK,~~IAE3B~~,CACF,EAAC,~~EAAA~~,~~CACC~~,MAAO,EACP,IAAM,GAAO,CACX,EAAY,QAAQ,GAAK,~~IAE3B~~,~~GACY~~,CAChB,EAAC,~~EAAA~~,~~EAAA~~,~~CAAoB~~,CACrB,EAAC,~~EAAA~~,CAAA,SAAA,~~CACC~~,EAAC,~~EAAA~~,~~CACC~~,MAAO,EACP,IAAM,GAAO,CACX,EAAY,QAAQ,GAAK,~~IAE3B~~,CACF,EAAC,~~EAAA~~,~~CACC~~,MAAO,EACP,IAAM,GAAO,CACX,EAAY,QAAQ,GAAK,~~IAE3B~~,CACF,EAAC,~~EAAA~~,~~CACC~~,MAAO,EACP,IAAM,GAAO,CACX,EAAY,QAAQ,GAAK,~~IAE3B~~,~~GACY~~,CACf,GACC,EAAC,~~EAAA~~,~~CAAe~~,MAAO,~~EAAA~~,~~CAA2B~~,~~GAEnD~~,~~EAEI~~,~~EACI~~,EAIR,GAAc,CACzB,OACA,cACA,QACA,aACA,OACA,mBACA,WACA,QAAQ,EACR,YAAY,EACZ,GAAG,KACmB,CACtB,GAAM,CAAE,WAAY,GAAgB,CAEpC,OACE,EAAC,EAAK,~~MAAA~~,~~CACK~~,UACH,OACN,QAAS,CAAE,WACT,EAAC,~~EAAA~~,~~CACQ~~,QACD,OACC,QACM,cACD,aACN,OACY,mBACX,QACI,YACX,GAAI,EAEH,~~YACe~~,~~EAEpB~~"}
1	+ {"version":3,"file":"OTPElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/OTPElement.tsx"],"sourcesContent":["'use client';\n\nimport {\n InputIndicator,\n InputOTP,\n InputOTPGroup,\n InputOTPSeparator,\n InputOTPSlot,\n} from '@components/Input/OTPInput';\nimport { useItemSelector } from '@hooks/useItemSelector';\nimport { type ComponentProps, type ReactNode, useEffect, useRef } 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 OTPElementsProps = Omit<FormElementProps<typeof InputOTP>, 'Element'> &\n Omit<ComponentProps<typeof InputOTP>, 'children'> & {\n name: string;\n description?: string;\n placeholder?: string;\n className?: string;\n children?: ReactNode;\n /** Number of OTP slots (default: 6) */\n slots?: number;\n };\n\nconst selector = (option: HTMLElement) =>\n option?.getAttribute('aria-selected') === 'true';\n\nconst OTPFieldContent = ({\n field,\n name,\n label,\n description,\n isRequired,\n info,\n showErrorMessage,\n children,\n slots = 6,\n maxLength = 6,\n ...props\n}: Omit<OTPElementsProps, 'control'> & { field: any }) => {\n const { error } = useFormField();\n\n const optionsRefs = useRef<HTMLElement[]>([]);\n const { choiceIndicatorPosition, calculatePosition } = useItemSelector(\n optionsRefs,\n {\n selector,\n isHoverable: true,\n }\n );\n\n useEffect(() => {\n calculatePosition();\n }, []);\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 <InputOTP\n onChange={field.onChange}\n defaultValue={field.value}\n maxLength={maxLength}\n pattern=\"^[0-9]+$\"\n onActiveSlotChange={calculatePosition}\n {...(props as any)}\n >\n {children ?? (\n <>\n <InputOTPGroup>\n <InputOTPSlot\n index={0}\n ref={(el) => {\n optionsRefs.current[0] = el!;\n }}\n />\n <InputOTPSlot\n index={1}\n ref={(el) => {\n optionsRefs.current[1] = el!;\n }}\n />\n <InputOTPSlot\n index={2}\n ref={(el) => {\n optionsRefs.current[2] = el!;\n }}\n />\n </InputOTPGroup>\n <InputOTPSeparator />\n <InputOTPGroup>\n <InputOTPSlot\n index={3}\n ref={(el) => {\n optionsRefs.current[3] = el!;\n }}\n />\n <InputOTPSlot\n index={4}\n ref={(el) => {\n optionsRefs.current[4] = el!;\n }}\n />\n <InputOTPSlot\n index={5}\n ref={(el) => {\n optionsRefs.current[5] = el!;\n }}\n />\n </InputOTPGroup>\n {choiceIndicatorPosition && (\n <InputIndicator style={choiceIndicatorPosition} />\n )}\n </>\n )}\n </InputOTP>\n </FormItemLayout>\n );\n};\n\nexport const OTPElement = ({\n name,\n description,\n label,\n isRequired,\n info,\n showErrorMessage,\n children,\n slots = 6,\n maxLength = 6,\n ...props\n}: OTPElementsProps) => {\n const { control } = useFormContext();\n\n return (\n <Form.Field\n control={control}\n name={name}\n render={({ field }) => (\n <OTPFieldContent\n field={field}\n name={name}\n label={label}\n description={description}\n isRequired={isRequired}\n info={info}\n showErrorMessage={showErrorMessage}\n slots={slots}\n maxLength={maxLength}\n {...props}\n >\n {children}\n </OTPFieldContent>\n )}\n />\n );\n};\n"],"mappings":"sgBA4BA,MAAM,EAAY,GAChB,GAAQ,aAAa,gBAAgB,GAAK,OAEtC,GAAmB,CACvB,QACA,OACA,QACA,cACA,aACA,OACA,mBACA,WACA,QAAQ,EACR,YAAY,EACZ,GAAG,KACqD,CACxD,GAAM,CAAE,SAAU,GAAc,CAE1B,EAAc,EAAsB,EAAE,CAAC,CACvC,CAAE,0BAAyB,qBAAsB,EACrD,EACA,CACE,WACA,YAAa,GACd,CACF,CAMD,OAJA,MAAgB,CACd,GAAmB,EAClB,EAAE,CAAC,CAGJ,EAAC,EAAD,CACE,QAAS,EACF,QACM,cACD,aACN,OACY,mBAClB,eAAc,CAAC,CAAC,WAEhB,EAAC,EAAD,CACE,SAAU,EAAM,SAChB,aAAc,EAAM,MACT,YACX,QAAQ,WACR,mBAAoB,EACpB,GAAK,WAEJ,GACC,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CACE,MAAO,EACP,IAAM,GAAO,CACX,EAAY,QAAQ,GAAK,GAE3B,CAAA,CACF,EAAC,EAAD,CACE,MAAO,EACP,IAAM,GAAO,CACX,EAAY,QAAQ,GAAK,GAE3B,CAAA,CACF,EAAC,EAAD,CACE,MAAO,EACP,IAAM,GAAO,CACX,EAAY,QAAQ,GAAK,GAE3B,CAAA,CACY,CAAA,CAAA,CAChB,EAAC,EAAD,EAAqB,CAAA,CACrB,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CACE,MAAO,EACP,IAAM,GAAO,CACX,EAAY,QAAQ,GAAK,GAE3B,CAAA,CACF,EAAC,EAAD,CACE,MAAO,EACP,IAAM,GAAO,CACX,EAAY,QAAQ,GAAK,GAE3B,CAAA,CACF,EAAC,EAAD,CACE,MAAO,EACP,IAAM,GAAO,CACX,EAAY,QAAQ,GAAK,GAE3B,CAAA,CACY,CAAA,CAAA,CACf,GACC,EAAC,EAAD,CAAgB,MAAO,EAA2B,CAAA,CAEnD,CAAA,CAAA,CAEI,CAAA,CACI,CAAA,EAIR,GAAc,CACzB,OACA,cACA,QACA,aACA,OACA,mBACA,WACA,QAAQ,EACR,YAAY,EACZ,GAAG,KACmB,CACtB,GAAM,CAAE,WAAY,GAAgB,CAEpC,OACE,EAAC,EAAK,MAAN,CACW,UACH,OACN,QAAS,CAAE,WACT,EAAC,EAAD,CACS,QACD,OACC,QACM,cACD,aACN,OACY,mBACX,QACI,YACX,GAAI,EAEH,WACe,CAAA,CAEpB,CAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInputElement.mjs","names":[],"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":"kJAeA,MAAa,EAAmD,GAC9D,EAAC,~~EAAA~~,~~CACC~~,GAAI,EAAM,KACV,cAAa,EAAM,KACnB,QAAS,EACT,kBAAiB,EAAM,MAAQ,GAAG,EAAM,KAAK,QAAU,IAAA,GACvD,aAAY,EAAM,MAAQ,IAAA,GAAY,EAAM,KAC5C,GAAI,~~GACJ~~"}
1	+ {"version":3,"file":"SearchInputElement.mjs","names":[],"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":"kJAeA,MAAa,EAAmD,GAC9D,EAAC,EAAD,CACE,GAAI,EAAM,KACV,cAAa,EAAM,KACnB,QAAS,EACT,kBAAiB,EAAM,MAAQ,GAAG,EAAM,KAAK,QAAU,IAAA,GACvD,aAAY,EAAM,MAAQ,IAAA,GAAY,EAAM,KAC5C,GAAI,EACJ,CAAA"}

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 { 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":"wSAmBA,MAAM,GAAsB,CAC1B,QACA,OACA,QACA,cACA,aACA,OACA,mBACA,WACA,GAAG,KACwD,CAC3D,GAAM,CAAE,SAAU,GAAc,CAEhC,OACE,EAAC,~~EAAA~~,~~CACC~~,QAAS,EACF,QACM,cACD,aACN,OACY,mBAClB,eAAc,CAAC,CAAC,WAEhB,EAAC,~~EAAA~~,~~CACC~~,cAAe,EAAM,SACrB,aAAc,EAAM,MACpB,GAAI,EAEH,~~YACM~~,~~EACM~~,EAIR,GAAiB,CAC5B,OACA,cACA,QACA,aACA,OACA,mBACA,WACA,GAAG,KACsB,CACzB,GAAM,CAAE,WAAY,GAAgB,CAEpC,OACE,EAAC,EAAK,~~MAAA~~,~~CACK~~,UACH,OACN,QAAS,CAAE,WACT,EAAC,~~EAAA~~,~~CACQ~~,QACD,OACC,QACM,cACD,aACN,OACY,mBAClB,GAAI,EAEH,~~YACkB~~,~~EAEvB~~"}
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":"wSAmBA,MAAM,GAAsB,CAC1B,QACA,OACA,QACA,cACA,aACA,OACA,mBACA,WACA,GAAG,KACwD,CAC3D,GAAM,CAAE,SAAU,GAAc,CAEhC,OACE,EAAC,EAAD,CACE,QAAS,EACF,QACM,cACD,aACN,OACY,mBAClB,eAAc,CAAC,CAAC,WAEhB,EAAC,EAAD,CACE,cAAe,EAAM,SACrB,aAAc,EAAM,MACpB,GAAI,EAEH,WACM,CAAA,CACM,CAAA,EAIR,GAAiB,CAC5B,OACA,cACA,QACA,aACA,OACA,mBACA,WACA,GAAG,KACsB,CACzB,GAAM,CAAE,WAAY,GAAgB,CAEpC,OACE,EAAC,EAAK,MAAN,CACW,UACH,OACN,QAAS,CAAE,WACT,EAAC,EAAD,CACS,QACD,OACC,QACM,cACD,aACN,OACY,mBAClB,GAAI,EAEH,WACkB,CAAA,CAEvB,CAAA"}

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 { 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":"uTAsBA,MAAM,GAA8B,CAClC,QACA,OACA,QACA,cACA,aACA,OACA,mBACA,WACA,GAAG,KAC+D,CAClE,GAAM,CAAE,SAAU,GAAc,CAEhC,OACE,EAAC,~~EAAA~~,~~CACC~~,QAAS,EACF,QACM,cACD,aACN,OACY,mBAClB,eAAc,CAAC,CAAC,WAEhB,EAAC,~~EAAA~~,~~CAAe~~,GAAI,EAAO,GAAI,EAC5B,~~YACc~~,~~EACF~~,EAIR,GAAyB,CACpC,OACA,cACA,QACA,aACA,OACA,mBACA,WACA,GAAG,KAC6B,CAChC,GAAM,CAAE,WAAY,GAAgB,CAEpC,OACE,EAAC,EAAK,~~MAAA~~,~~CACK~~,UACH,OACN,QAAS,CAAE,WACT,EAAC,~~EAAA~~,~~CACQ~~,QACD,OACC,QACM,cACD,aACN,OACY,mBAClB,GAAI,EAEH,~~YAC0B~~,~~EAE~~/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":"uTAsBA,MAAM,GAA8B,CAClC,QACA,OACA,QACA,cACA,aACA,OACA,mBACA,WACA,GAAG,KAC+D,CAClE,GAAM,CAAE,SAAU,GAAc,CAEhC,OACE,EAAC,EAAD,CACE,QAAS,EACF,QACM,cACD,aACN,OACY,mBAClB,eAAc,CAAC,CAAC,WAEhB,EAAC,EAAD,CAAgB,GAAI,EAAO,GAAI,EAC5B,WACc,CAAA,CACF,CAAA,EAIR,GAAyB,CACpC,OACA,cACA,QACA,aACA,OACA,mBACA,WACA,GAAG,KAC6B,CAChC,GAAM,CAAE,WAAY,GAAgB,CAEpC,OACE,EAAC,EAAK,MAAN,CACW,UACH,OACN,QAAS,CAAE,WACT,EAAC,EAAD,CACS,QACD,OACC,QACM,cACD,aACN,OACY,mBAClB,GAAI,EAEH,WAC0B,CAAA,CAE/B,CAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextAreaElement.mjs","names":[],"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":"+IAeA,MAAa,EAA8C,GACzD,EAAC,~~EAAA~~,~~CACC~~,QAAS,EACT,GAAI,EAAM,KACV,kBAAiB,EAAM,MAAQ,GAAG,EAAM,KAAK,QAAU,IAAA,GACvD,aAAY,EAAM,MAAQ,IAAA,GAAY,EAAM,KAC5C,cAAa,EAAM,KACnB,GAAI,~~GACJ~~"}
1	+ {"version":3,"file":"TextAreaElement.mjs","names":[],"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":"+IAeA,MAAa,EAA8C,GACzD,EAAC,EAAD,CACE,QAAS,EACT,GAAI,EAAM,KACV,kBAAiB,EAAM,MAAQ,GAAG,EAAM,KAAK,QAAU,IAAA,GACvD,aAAY,EAAM,MAAQ,IAAA,GAAY,EAAM,KAC5C,cAAa,EAAM,KACnB,GAAI,EACJ,CAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FormItemLayout.mjs","names":[],"sources":["../../../../../src/components/Form/layout/FormItemLayout.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport { Form } from '../Form';\nimport { FormLabelLayout, type FormLabelLayoutProps } from './FormLabelLayout';\n\nexport type FormItemLayoutProps = Omit<FormLabelLayoutProps, 'children'> & {\n label?: ReactNode;\n description?: ReactNode;\n children: ReactNode;\n showErrorMessage?: boolean;\n};\n\nexport const FormItemLayout: FC<FormItemLayoutProps> = ({\n label,\n description,\n isRequired,\n info,\n children,\n showErrorMessage = true,\n htmlFor,\n}) => (\n <Form.Item className=\"flex w-full flex-col flex-wrap gap-2 px-1 py-2\">\n {(description \|\| label) && (\n <div className=\"flex flex-col gap-1 p-1 leading-none\">\n {label && (\n <FormLabelLayout\n isRequired={isRequired}\n info={info}\n htmlFor={htmlFor}\n >\n {label}\n </FormLabelLayout>\n )}\n {description && <Form.Description>{description}</Form.Description>}\n </div>\n )}\n <Form.Control>{children}</Form.Control>\n\n {showErrorMessage && <Form.Message data-testid=\"error-message\" />}\n </Form.Item>\n);\n"],"mappings":"6IAWA,MAAa,GAA2C,CACtD,QACA,cACA,aACA,OACA,WACA,mBAAmB,GACnB,aAEA,EAAC,EAAK,~~KAAA~~,~~CAAK~~,UAAU,~~4DACjB~~,GAAe,IACf,EAAC,~~MAAA~~,~~CAAI~~,UAAU,~~iDACZ~~,GACC,EAAC,~~EAAA~~,~~CACa~~,aACN,OACG,mBAER,~~GACe~~,CAEnB,GAAe,EAAC,EAAK,~~YAAA~~,CAAA,~~SAAa~~,~~EAAA,CAA~~+B,CAAA,~~EAC9D~~,~~CAER~~,EAAC,EAAK,~~QAAA~~,~~CAAS~~,~~WAAA~~,~~CAAwB~~,CAEtC,GAAoB,EAAC,EAAK,~~QAAA~~,~~CAAQ~~,cAAY,~~gBAAA~~,~~CAAkB~~,~~GACvD~~"}
1	+ {"version":3,"file":"FormItemLayout.mjs","names":[],"sources":["../../../../../src/components/Form/layout/FormItemLayout.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport { Form } from '../Form';\nimport { FormLabelLayout, type FormLabelLayoutProps } from './FormLabelLayout';\n\nexport type FormItemLayoutProps = Omit<FormLabelLayoutProps, 'children'> & {\n label?: ReactNode;\n description?: ReactNode;\n children: ReactNode;\n showErrorMessage?: boolean;\n};\n\nexport const FormItemLayout: FC<FormItemLayoutProps> = ({\n label,\n description,\n isRequired,\n info,\n children,\n showErrorMessage = true,\n htmlFor,\n}) => (\n <Form.Item className=\"flex w-full flex-col flex-wrap gap-2 px-1 py-2\">\n {(description \|\| label) && (\n <div className=\"flex flex-col gap-1 p-1 leading-none\">\n {label && (\n <FormLabelLayout\n isRequired={isRequired}\n info={info}\n htmlFor={htmlFor}\n >\n {label}\n </FormLabelLayout>\n )}\n {description && <Form.Description>{description}</Form.Description>}\n </div>\n )}\n <Form.Control>{children}</Form.Control>\n\n {showErrorMessage && <Form.Message data-testid=\"error-message\" />}\n </Form.Item>\n);\n"],"mappings":"6IAWA,MAAa,GAA2C,CACtD,QACA,cACA,aACA,OACA,WACA,mBAAmB,GACnB,aAEA,EAAC,EAAK,KAAN,CAAW,UAAU,0DAArB,EACI,GAAe,IACf,EAAC,MAAD,CAAK,UAAU,gDAAf,CACG,GACC,EAAC,EAAD,CACc,aACN,OACG,mBAER,EACe,CAAA,CAEnB,GAAe,EAAC,EAAK,YAAN,CAAA,SAAmB,EAA+B,CAAA,CAC9D,GAER,EAAC,EAAK,QAAN,CAAe,WAAwB,CAAA,CAEtC,GAAoB,EAAC,EAAK,QAAN,CAAc,cAAY,gBAAkB,CAAA,CACvD"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FormLabelLayout.mjs","names":[],"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":"6OAcA,MAAa,GAA6C,CACxD,WACA,aACA,OACA,UACA,eAEA,EAAC,~~MAAA~~,~~CAAI~~,UAAU,~~gEACZ~~,GACC,EAAC,~~EAAA~~,~~CACU~~,UACT,GAAI,GAAG,EAAQ,QACf,yBAAA,GACA,UAAW,EAAK,YAAa,EAAU,~~WAEtC~~,EACD,EAAC,~~EAAA~~,~~CAAyB~~,~~aAAA~~,~~CAAc,~~CAAA,~~EAC9B~~,~~CAEb~~,GAAQ,EAAC,~~EAAA~~,~~CAAe~~,QAAS,~~EAAA~~,~~CAAQ,~~CAAA,~~EACtC~~"}
1	+ {"version":3,"file":"FormLabelLayout.mjs","names":[],"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":"6OAcA,MAAa,GAA6C,CACxD,WACA,aACA,OACA,UACA,eAEA,EAAC,MAAD,CAAK,UAAU,+DAAf,CACG,GACC,EAAC,EAAD,CACW,UACT,GAAI,GAAG,EAAQ,QACf,yBAAA,GACA,UAAW,EAAK,YAAa,EAAU,UAJzC,CAMG,EACD,EAAC,EAAD,CAA0B,aAAc,CAAA,CAC9B,GAEb,GAAQ,EAAC,EAAD,CAAgB,QAAS,EAAQ,CAAA,CACtC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RequiredStar.mjs","names":[],"sources":["../../../../../src/components/Form/layout/RequiredStar.tsx"],"sourcesContent":["import type { FC } from 'react';\n\ntype RequiredStarProps = {\n isRequired?: boolean;\n};\n\nexport const RequiredStar: FC<RequiredStarProps> = ({ isRequired }) =>\n isRequired ? (\n <span aria-label=\"Asterisk meaning the field is required\">*</span>\n ) : (\n <></>\n );\n"],"mappings":"sDAMA,MAAa,GAAuC,CAAE,gBACpD,EACE,EAAC,~~OAAA~~,~~CAAK~~,aAAW,kDAAyC,~~KAAQ~~,CAElE,EAAA,EAAA,~~EAAA~~,~~CAAK~~"}
1	+ {"version":3,"file":"RequiredStar.mjs","names":[],"sources":["../../../../../src/components/Form/layout/RequiredStar.tsx"],"sourcesContent":["import type { FC } from 'react';\n\ntype RequiredStarProps = {\n isRequired?: boolean;\n};\n\nexport const RequiredStar: FC<RequiredStarProps> = ({ isRequired }) =>\n isRequired ? (\n <span aria-label=\"Asterisk meaning the field is required\">*</span>\n ) : (\n <></>\n );\n"],"mappings":"sDAMA,MAAa,GAAuC,CAAE,gBACpD,EACE,EAAC,OAAD,CAAM,aAAW,kDAAyC,IAAQ,CAAA,CAElE,EAAA,EAAA,EAAK,CAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"HTMLRender.mjs","names":[],"sources":["../../../../src/components/HTMLRender/HTMLRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types';\nimport type { ComponentProps, FC } from 'react';\nimport {\n type HTMLRenderer as HTMLRendererIntlayer,\n type RenderHTMLProps,\n renderHTML,\n} from 'react-intlayer';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport { Link } from '../Link';\n\ntype HTMLRendererProps = {\n children: string;\n isDarkMode?: boolean;\n locale?: LocalesValues;\n components?: ComponentProps<typeof HTMLRendererIntlayer>['components'];\n};\n\nexport const getIntlayerHTMLOptions: (isDarkMode: boolean) => RenderHTMLProps =\n () => ({\n components: {\n h1: (props) => <H1 isClickable={true} {...props} />,\n h2: (props) => <H2 isClickable={true} className=\"mt-16\" {...props} />,\n h3: (props) => <H3 isClickable={true} className=\"mt-5\" {...props} />,\n h4: (props) => <H4 isClickable={true} className=\"mt-3\" {...props} />,\n h5: (props) => <H5 isClickable={true} className=\"mt-3\" {...props} />,\n h6: (props) => <H6 isClickable={true} className=\"mt-3\" {...props} />,\n a: (props) => (\n <Link\n isExternalLink={props.href?.startsWith('http')}\n underlined={true}\n label=\"\"\n {...props}\n color=\"neutral\"\n />\n ),\n },\n });\n\n/*\n HTMLRenderer Component\n \n A comprehensive HTML renderer that transforms HTML text into rich,\n * interactive content with custom styling and Intlayer integration.\n */\nexport const HTMLRenderer: FC<HTMLRendererProps> = ({\n children,\n isDarkMode,\n locale,\n components: componentsProp,\n}) => {\n const htmlOptions = getIntlayerHTMLOptions(isDarkMode ?? false);\n\n const htmlContent = renderHTML(children, {\n components: {\n ...htmlOptions.components,\n a: (props) => (\n <Link\n isExternalLink={props.href?.startsWith('http')}\n underlined={true}\n locale={locale}\n label=\"\"\n {...props}\n color=\"neutral\"\n />\n ),\n ...componentsProp,\n },\n });\n\n return <>{htmlContent}</>;\n};\n"],"mappings":"4NAiBA,MAAa,OACJ,CACL,WAAY,CACV,GAAK,GAAU,EAAC,~~EAAA~~,~~CAAG~~,YAAa,GAAM,GAAI,~~GAAS~~,CACnD,GAAK,GAAU,EAAC,~~EAAA~~,~~CAAG~~,YAAa,GAAM,UAAU,QAAQ,GAAI,~~GAAS~~,CACrE,GAAK,GAAU,EAAC,~~EAAA~~,~~CAAG~~,YAAa,GAAM,UAAU,OAAO,GAAI,~~GAAS~~,CACpE,GAAK,GAAU,EAAC,~~EAAA~~,~~CAAG~~,YAAa,GAAM,UAAU,OAAO,GAAI,~~GAAS~~,CACpE,GAAK,GAAU,EAAC,~~EAAA~~,~~CAAG~~,YAAa,GAAM,UAAU,OAAO,GAAI,~~GAAS~~,CACpE,GAAK,GAAU,EAAC,~~EAAA~~,~~CAAG~~,YAAa,GAAM,UAAU,OAAO,GAAI,~~GAAS~~,CACpE,EAAI,GACF,EAAC,~~EAAA~~,~~CACC~~,eAAgB,EAAM,MAAM,WAAW,OAAO,CAC9C,WAAY,GACZ,MAAM,GACN,GAAI,EACJ,MAAM,~~WACN~~,CAEL,CACF,EAQU,GAAuC,CAClD,WACA,aACA,SACA,WAAY,KAqBL,EAAA,EAAA,CAAA,SAjBa,EAAW,EAAU,CACvC,WAAY,CACV,GAJgB,EAAuB,GAAc,GAAM,CAI5C,WACf,EAAI,GACF,EAAC,~~EAAA~~,~~CACC~~,eAAgB,EAAM,MAAM,WAAW,OAAO,CAC9C,WAAY,GACJ,SACR,MAAM,GACN,GAAI,EACJ,MAAM,~~WACN~~,CAEJ,GAAG,EACJ,CACF,CAAC,CAAA~~,CAEuB~~"}
1	+ {"version":3,"file":"HTMLRender.mjs","names":[],"sources":["../../../../src/components/HTMLRender/HTMLRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types';\nimport type { ComponentProps, FC } from 'react';\nimport {\n type HTMLRenderer as HTMLRendererIntlayer,\n type RenderHTMLProps,\n renderHTML,\n} from 'react-intlayer';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport { Link } from '../Link';\n\ntype HTMLRendererProps = {\n children: string;\n isDarkMode?: boolean;\n locale?: LocalesValues;\n components?: ComponentProps<typeof HTMLRendererIntlayer>['components'];\n};\n\nexport const getIntlayerHTMLOptions: (isDarkMode: boolean) => RenderHTMLProps =\n () => ({\n components: {\n h1: (props) => <H1 isClickable={true} {...props} />,\n h2: (props) => <H2 isClickable={true} className=\"mt-16\" {...props} />,\n h3: (props) => <H3 isClickable={true} className=\"mt-5\" {...props} />,\n h4: (props) => <H4 isClickable={true} className=\"mt-3\" {...props} />,\n h5: (props) => <H5 isClickable={true} className=\"mt-3\" {...props} />,\n h6: (props) => <H6 isClickable={true} className=\"mt-3\" {...props} />,\n a: (props) => (\n <Link\n isExternalLink={props.href?.startsWith('http')}\n underlined={true}\n label=\"\"\n {...props}\n color=\"neutral\"\n />\n ),\n },\n });\n\n/*\n HTMLRenderer Component\n \n A comprehensive HTML renderer that transforms HTML text into rich,\n * interactive content with custom styling and Intlayer integration.\n */\nexport const HTMLRenderer: FC<HTMLRendererProps> = ({\n children,\n isDarkMode,\n locale,\n components: componentsProp,\n}) => {\n const htmlOptions = getIntlayerHTMLOptions(isDarkMode ?? false);\n\n const htmlContent = renderHTML(children, {\n components: {\n ...htmlOptions.components,\n a: (props) => (\n <Link\n isExternalLink={props.href?.startsWith('http')}\n underlined={true}\n locale={locale}\n label=\"\"\n {...props}\n color=\"neutral\"\n />\n ),\n ...componentsProp,\n },\n });\n\n return <>{htmlContent}</>;\n};\n"],"mappings":"4NAiBA,MAAa,OACJ,CACL,WAAY,CACV,GAAK,GAAU,EAAC,EAAD,CAAI,YAAa,GAAM,GAAI,EAAS,CAAA,CACnD,GAAK,GAAU,EAAC,EAAD,CAAI,YAAa,GAAM,UAAU,QAAQ,GAAI,EAAS,CAAA,CACrE,GAAK,GAAU,EAAC,EAAD,CAAI,YAAa,GAAM,UAAU,OAAO,GAAI,EAAS,CAAA,CACpE,GAAK,GAAU,EAAC,EAAD,CAAI,YAAa,GAAM,UAAU,OAAO,GAAI,EAAS,CAAA,CACpE,GAAK,GAAU,EAAC,EAAD,CAAI,YAAa,GAAM,UAAU,OAAO,GAAI,EAAS,CAAA,CACpE,GAAK,GAAU,EAAC,EAAD,CAAI,YAAa,GAAM,UAAU,OAAO,GAAI,EAAS,CAAA,CACpE,EAAI,GACF,EAAC,EAAD,CACE,eAAgB,EAAM,MAAM,WAAW,OAAO,CAC9C,WAAY,GACZ,MAAM,GACN,GAAI,EACJ,MAAM,UACN,CAAA,CAEL,CACF,EAQU,GAAuC,CAClD,WACA,aACA,SACA,WAAY,KAqBL,EAAA,EAAA,CAAA,SAjBa,EAAW,EAAU,CACvC,WAAY,CACV,GAJgB,EAAuB,GAAc,GAAM,CAI5C,WACf,EAAI,GACF,EAAC,EAAD,CACE,eAAgB,EAAM,MAAM,WAAW,OAAO,CAC9C,WAAY,GACJ,SACR,MAAM,GACN,GAAI,EACJ,MAAM,UACN,CAAA,CAEJ,GAAG,EACJ,CACF,CAAC,CAEuB,CAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[],"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":"gFAGA,MAAM,EAAgB,mDAShB,GAAoD,CACxD,YACA,GAAG,KACC,EAAC,KAAA,CAAG,UAAW,EAAG,qBAAsB,EAAU,CAAE,GAAI,GAAS,CAQjE,GAAoD,CACxD,YACA,GAAG,KAEH,EAAC,KAAA,CACC,UAAW,EAAG,0BAA2B,EAAe,EAAU,CAClE,GAAI,GACJ,CASE,GAAoD,CACxD,YACA,GAAG,KAEH,EAAC,KAAA,CACC,UAAW,EAAG,yBAA0B,EAAe,EAAU,CACjE,GAAI,GACJ,CASE,GAAoD,CACxD,YACA,GAAG,KAEH,EAAC,KAAA,CACC,UAAW,EAAG,oBAAqB,EAAe,EAAU,CAC5D,GAAI,GACJ,CASE,GAAoD,CACxD,YACA,GAAG,KAEH,EAAC,KAAA,CACC,UAAW,EAAG,sBAAuB,EAAe,EAAU,CAC9D,GAAI,GACJ,CAGE,GAAoD,CACxD,YACA,GAAG,KAEH,EAAC,KAAA,CACC,UAAW,EAAG,2BAA4B,EAAe,EAAU,CACnE,GAAI,GACJ,CA8BE,EAAS,GACb,OAAO,EAAS,CAEb,UAAU,MAAM,CAChB,QAAQ,mBAAoB,GAAG,CAE/B,QAAQ,OAAQ,IAAI,CACpB,aAAa,CAMZ,EAAgB,GAAe,CAGnC,IAAM,GAFU,SAAS,eAAe,EAAG,EAG/B,uBAAuB,EAAE,KAAO,GAAK,OAAO,QAFzC,IAIf,OAAO,SAAS,CAAE,IAAK,EAAG,SAAU,SAAU,CAAC,EAS3C,GAAc,EAAqB,IAAsC,CAC7E,IAAM,EAAa,EAAW,uBAAuB,CAAC,KAChD,EAAY,EAAW,uBAAuB,CAAC,IAE/C,EAAQ,OAAO,iBAAiB,EAAY,SAAS,CAErD,EAAa,EAAa,SAAS,EAAM,iBAAiB,OAAO,CAAE,GAAG,CACtE,EAAW,EAAa,SAAS,EAAM,MAAO,GAAG,CAEjD,EAAc,EAAY,SAAS,EAAM,iBAAiB,MAAM,CAAE,GAAG,CACrE,EAAY,EAAc,SAAS,EAAM,OAAQ,GAAG,CAEpD,EAAS,EAAE,QACX,EAAS,EAAE,QAQjB,OALE,GAAU,GACV,GAAU,GACV,GAAU,GACV,GAAU,GAkBR,GAA+B,CACnC,IACA,WACA,YACA,cACA,GAAG,KACC,CACJ,IAAM,EAAK,OAAO,GAAa,SAAW,EAAM,EAAS,CAAG,IAAA,GAkB5D,OACE,EAAC,EAAA,CACK,KACJ,QAAS,EAnBI,GAAsC,CACrD,GAAM,CAAE,MAAO,EAAE,cAIjB,GAFuB,EAAW,EAAE,cAAe,EAAE,EAE/B,OAAO,GAAO,SAAU,CAE5C,IAAM,EAAM,GADW,OAAO,SAAS,KAAK,MAAM,IAAI,CAAC,GACzB,GAAG,IAGjC,UAAU,UAAU,UAAU,EAAI,CAElC,EAAa,EAAG,GAOiB,IAAA,GACjC,aACE,EACI,8BAA8B,EAAG,qCACjC,IAAA,GAEN,UAAW,EAAG,GAAe,gQAAa,EAAU,CACpD,GAAI,EAEH,YACC,EAgBK,GAAwB,CAAE,YAAa,EAAG,GAAG,KACxD,EAAC,EAAA,CAAS,GAAI,EAAA,CAAS,CAeZ,GAAwB,CAAE,cAAc,GAAO,GAAG,KAC7D,EAAC,EAAA,CAAe,EAAG,EAAuB,cAAa,GAAI,GAAS,CAezD,GAAwB,CAAE,cAAc,GAAO,GAAG,KAC7D,EAAC,EAAA,CAAe,EAAG,EAAuB,cAAa,GAAI,GAAS,CAezD,GAAwB,CAAE,cAAc,GAAO,GAAG,KAC7D,EAAC,EAAA,CAAe,EAAG,EAAuB,cAAa,GAAI,GAAS,CAezD,GAAwB,CAAE,cAAc,GAAO,GAAG,KAC7D,EAAC,EAAA,CAAe,EAAG,EAAuB,cAAa,GAAI,GAAS,CAGzD,GAAwB,CAAE,cAAc,GAAO,GAAG,KAC7D,EAAC,EAAA,CAAe,EAAG,EAAuB,cAAa,GAAI,GAAS"}
1	+ {"version":3,"file":"index.mjs","names":[],"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":"gFAGA,MAAM,EAAgB,mDAShB,GAAoD,CACxD,YACA,GAAG,KACC,EAAC,KAAD,CAAI,UAAW,EAAG,qBAAsB,EAAU,CAAE,GAAI,EAAS,CAAA,CAQjE,GAAoD,CACxD,YACA,GAAG,KAEH,EAAC,KAAD,CACE,UAAW,EAAG,0BAA2B,EAAe,EAAU,CAClE,GAAI,EACJ,CAAA,CASE,GAAoD,CACxD,YACA,GAAG,KAEH,EAAC,KAAD,CACE,UAAW,EAAG,yBAA0B,EAAe,EAAU,CACjE,GAAI,EACJ,CAAA,CASE,GAAoD,CACxD,YACA,GAAG,KAEH,EAAC,KAAD,CACE,UAAW,EAAG,oBAAqB,EAAe,EAAU,CAC5D,GAAI,EACJ,CAAA,CASE,GAAoD,CACxD,YACA,GAAG,KAEH,EAAC,KAAD,CACE,UAAW,EAAG,sBAAuB,EAAe,EAAU,CAC9D,GAAI,EACJ,CAAA,CAGE,GAAoD,CACxD,YACA,GAAG,KAEH,EAAC,KAAD,CACE,UAAW,EAAG,2BAA4B,EAAe,EAAU,CACnE,GAAI,EACJ,CAAA,CA8BE,EAAS,GACb,OAAO,EAAS,CAEb,UAAU,MAAM,CAChB,QAAQ,mBAAoB,GAAG,CAE/B,QAAQ,OAAQ,IAAI,CACpB,aAAa,CAMZ,EAAgB,GAAe,CAGnC,IAAM,GAFU,SAAS,eAAe,EAAG,EAG/B,uBAAuB,EAAE,KAAO,GAAK,OAAO,QAFzC,IAIf,OAAO,SAAS,CAAE,IAAK,EAAG,SAAU,SAAU,CAAC,EAS3C,GAAc,EAAqB,IAAsC,CAC7E,IAAM,EAAa,EAAW,uBAAuB,CAAC,KAChD,EAAY,EAAW,uBAAuB,CAAC,IAE/C,EAAQ,OAAO,iBAAiB,EAAY,SAAS,CAErD,EAAa,EAAa,SAAS,EAAM,iBAAiB,OAAO,CAAE,GAAG,CACtE,EAAW,EAAa,SAAS,EAAM,MAAO,GAAG,CAEjD,EAAc,EAAY,SAAS,EAAM,iBAAiB,MAAM,CAAE,GAAG,CACrE,EAAY,EAAc,SAAS,EAAM,OAAQ,GAAG,CAEpD,EAAS,EAAE,QACX,EAAS,EAAE,QAQjB,OALE,GAAU,GACV,GAAU,GACV,GAAU,GACV,GAAU,GAkBR,GAA+B,CACnC,IACA,WACA,YACA,cACA,GAAG,KACC,CACJ,IAAM,EAAK,OAAO,GAAa,SAAW,EAAM,EAAS,CAAG,IAAA,GAkB5D,OACE,EAAC,EAAD,CACM,KACJ,QAAS,EAnBI,GAAsC,CACrD,GAAM,CAAE,MAAO,EAAE,cAIjB,GAFuB,EAAW,EAAE,cAAe,EAAE,EAE/B,OAAO,GAAO,SAAU,CAE5C,IAAM,EAAM,GADW,OAAO,SAAS,KAAK,MAAM,IAAI,CAAC,GACzB,GAAG,IAGjC,UAAU,UAAU,UAAU,EAAI,CAElC,EAAa,EAAG,GAOiB,IAAA,GACjC,aACE,EACI,8BAA8B,EAAG,qCACjC,IAAA,GAEN,UAAW,EAAG,GAAe,gQAAa,EAAU,CACpD,GAAI,EAEH,WACC,CAAA,EAgBK,GAAwB,CAAE,YAAa,EAAG,GAAG,KACxD,EAAC,EAAD,CAAU,GAAI,EAAS,CAAA,CAeZ,GAAwB,CAAE,cAAc,GAAO,GAAG,KAC7D,EAAC,EAAD,CAAgB,EAAG,EAAuB,cAAa,GAAI,EAAS,CAAA,CAezD,GAAwB,CAAE,cAAc,GAAO,GAAG,KAC7D,EAAC,EAAD,CAAgB,EAAG,EAAuB,cAAa,GAAI,EAAS,CAAA,CAezD,GAAwB,CAAE,cAAc,GAAO,GAAG,KAC7D,EAAC,EAAD,CAAgB,EAAG,EAAuB,cAAa,GAAI,EAAS,CAAA,CAezD,GAAwB,CAAE,cAAc,GAAO,GAAG,KAC7D,EAAC,EAAD,CAAgB,EAAG,EAAuB,cAAa,GAAI,EAAS,CAAA,CAGzD,GAAwB,CAAE,cAAc,GAAO,GAAG,KAC7D,EAAC,EAAD,CAAgB,EAAG,EAAuB,cAAa,GAAI,EAAS,CAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[],"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":"0KAgHA,MAAa,GAA4D,CACvE,gBACA,YACA,YAAY,EACZ,WACA,YACA,GAAG,KACC,CACJ,IAAM,EAAe,EAAuB,KAAK,CAC3C,CAAC,EAAQ,GAAa,EAAS,EAAc,CAC7C,CAAC,EAAY,GAAiB,EAAS,GAAM,CAQ7C,EAAgB,EAElB,GAGG,CACH,EAAc,GAAK,CACnB,EAAe,gBAAgB,EAEjC,EAAE,CACH,CAMK,EAAe,MAAkB,CACrC,EAAc,GAAM,EACnB,EAAE,CAAC,CAQA,EAAS,EACZ,GAA4C,CAC3C,IAAM,EAAY,EAAa,QAC/B,GAAI,GAAc,EAAW,CAC3B,GAAM,CAAE,OAAQ,EAAiB,IAAK,GACpC,EAAU,uBAAuB,CAE/B,EAAU,EACV,aAA0B,WAC5B,EAAU,EAAe,QAChB,aAA0B,aACnC,EAAU,EAAe,QAAQ,GAAG,SAItC,IAAM,EAAY,GADO,EAAU,GAI/B,EAAkB,KAAK,IAAI,EAAW,EAAU,CAChD,IAAc,IAAA,KAChB,EAAkB,KAAK,IAAI,EAAiB,EAAU,EAGxD,EAAU,EAAgB,GAG9B,CAAC,EAAY,EAAW,EAAU,CACnC,CAoBD,OAdA,OACE,OAAO,iBAAiB,YAAa,EAAQ,CAAE,QAAS,GAAM,CAAC,CAC/D,OAAO,iBAAiB,UAAW,EAAa,CAChD,OAAO,iBAAiB,YAAa,EAAQ,CAAE,QAAS,GAAM,CAAC,CAC/D,OAAO,iBAAiB,WAAY,EAAa,KAEpC,CACX,OAAO,oBAAoB,YAAa,EAAO,CAC/C,OAAO,oBAAoB,UAAW,EAAa,CACnD,OAAO,oBAAoB,YAAa,EAAO,CAC/C,OAAO,oBAAoB,WAAY,EAAa,GAErD,CAAC,EAAQ,EAAa,CAAC,CAGxB,EAAC,~~MAAA~~,~~CACC~~,UAAW,EACT,2HACA,mSACA,0HACA,EACD,CACD,MAAO,CACL,OAAQ,GAAG,EAAO,IAClB,UAAW,EAAY,GAAG,EAAU,IAAM,IAAA,GAC1C,UAAW,GAAG,EAAU,IACzB,CACD,IAAK,EACL,YAAa,EACb,aAAc,EACd,gBAAe,EACf,gBAAe,EACf,gBAAe,EACf,aAAW,yDACX,KAAK,SACL,SAAU,EACV,GAAI,WAEJ,EAAC,~~MAAA~~,~~CACC~~,UAAU,iEACV,YAAc,GAAM,EAAE,iBAAiB,CACvC,aAAe,GAAM,EAAE,iBAAiB,CAEvC,~~YACG~~,~~EACF~~"}
1	+ {"version":3,"file":"index.mjs","names":[],"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":"0KAgHA,MAAa,GAA4D,CACvE,gBACA,YACA,YAAY,EACZ,WACA,YACA,GAAG,KACC,CACJ,IAAM,EAAe,EAAuB,KAAK,CAC3C,CAAC,EAAQ,GAAa,EAAS,EAAc,CAC7C,CAAC,EAAY,GAAiB,EAAS,GAAM,CAQ7C,EAAgB,EAElB,GAGG,CACH,EAAc,GAAK,CACnB,EAAe,gBAAgB,EAEjC,EAAE,CACH,CAMK,EAAe,MAAkB,CACrC,EAAc,GAAM,EACnB,EAAE,CAAC,CAQA,EAAS,EACZ,GAA4C,CAC3C,IAAM,EAAY,EAAa,QAC/B,GAAI,GAAc,EAAW,CAC3B,GAAM,CAAE,OAAQ,EAAiB,IAAK,GACpC,EAAU,uBAAuB,CAE/B,EAAU,EACV,aAA0B,WAC5B,EAAU,EAAe,QAChB,aAA0B,aACnC,EAAU,EAAe,QAAQ,GAAG,SAItC,IAAM,EAAY,GADO,EAAU,GAI/B,EAAkB,KAAK,IAAI,EAAW,EAAU,CAChD,IAAc,IAAA,KAChB,EAAkB,KAAK,IAAI,EAAiB,EAAU,EAGxD,EAAU,EAAgB,GAG9B,CAAC,EAAY,EAAW,EAAU,CACnC,CAoBD,OAdA,OACE,OAAO,iBAAiB,YAAa,EAAQ,CAAE,QAAS,GAAM,CAAC,CAC/D,OAAO,iBAAiB,UAAW,EAAa,CAChD,OAAO,iBAAiB,YAAa,EAAQ,CAAE,QAAS,GAAM,CAAC,CAC/D,OAAO,iBAAiB,WAAY,EAAa,KAEpC,CACX,OAAO,oBAAoB,YAAa,EAAO,CAC/C,OAAO,oBAAoB,UAAW,EAAa,CACnD,OAAO,oBAAoB,YAAa,EAAO,CAC/C,OAAO,oBAAoB,WAAY,EAAa,GAErD,CAAC,EAAQ,EAAa,CAAC,CAGxB,EAAC,MAAD,CACE,UAAW,EACT,2HACA,mSACA,0HACA,EACD,CACD,MAAO,CACL,OAAQ,GAAG,EAAO,IAClB,UAAW,EAAY,GAAG,EAAU,IAAM,IAAA,GAC1C,UAAW,GAAG,EAAU,IACzB,CACD,IAAK,EACL,YAAa,EACb,aAAc,EACd,gBAAe,EACf,gBAAe,EACf,gBAAe,EACf,aAAW,yDACX,KAAK,SACL,SAAU,EACV,GAAI,WAEJ,EAAC,MAAD,CACE,UAAU,iEACV,YAAc,GAAM,EAAE,iBAAiB,CACvC,aAAe,GAAM,EAAE,iBAAiB,CAEvC,WACG,CAAA,CACF,CAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[],"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":"+NAgCA,MAAM,GAAgB,EAAa,EAAY,IAC7C,EAAI,QAAY,OAAO,OAAO,EAAU,GAAI,IAAI,CAAE,MAAW,CAElD,GAA+B,CAC1C,OACA,YACA,qBAAqB,EACrB,WAAW,IACX,mBAAmB,OACf,CACJ,GAAM,CAAC,EAAY,GAAiB,EAAS,GAAM,CAC7C,EAAe,EAAsB,KAAK,CAE1C,EAAa,MAAc,CAC/B,GAAI,CAAC,EAAM,MAAO,GAClB,GAAI,GAAsB,EAAG,OAAO,EAAS,OAAO,EAAK,OAAO,CAChE,IAAM,EAAS,EAAK,MAAM,EAAG,EAAmB,CAC1C,EAAY,KAAK,IAAI,EAAG,EAAK,OAAS,EAAmB,CAC/D,OAAO,EAAa,GAAG,IAAS,EAAS,OAAO,EAAU,GAAG,EAC5D,CAAC,EAAM,EAAoB,EAAS,CAAC,CAExC,UACe,CACX,AAEE,EAAa,WADb,OAAO,aAAa,EAAa,QAAQ,CAClB,OAG1B,EAAE,CAAC,CAEN,IAAM,MAAe,CACf,IACJ,EAAc,GAAK,CACnB,AAEE,EAAa,WADb,OAAO,aAAa,EAAa,QAAQ,CAClB,MAEzB,EAAa,QAAU,OAAO,eAAiB,CAC7C,EAAc,GAAM,EACnB,EAAiB,GAGhB,MAAa,CACjB,EAAc,GAAM,CAEpB,AAEE,EAAa,WADb,OAAO,aAAa,EAAa,QAAQ,CAClB,OAIrB,EAAgB,EAAa,EAAS,EAE5C,OACE,EAAC,~~OAAA~~,~~CACC~~,UAAW,EACT,sGACA,EACD,CACD,QAAS,EAAa,EAAO,EAC7B,UAAY,GAAM,EACZ,EAAE,MAAQ,SAAW,EAAE,MAAQ,OACjC,EAAE,gBAAgB,CAClB,EAAa,GAAM,CAAG,GAAQ,GAGlC,KAAK,SACL,SAAU,~~YAEV~~,EAAC,~~OAAA~~,~~CAAK~~,UAAU,6BACb,EAAa,EAAO,~~GAChB~~,CACP,EAAC,~~EAAA~~,~~CAAc~~,UAAU,~~uCAAA~~,~~CAAyC,~~CAAA,~~EAC7D~~"}
1	+ {"version":3,"file":"index.mjs","names":[],"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":"+NAgCA,MAAM,GAAgB,EAAa,EAAY,IAC7C,EAAI,QAAY,OAAO,OAAO,EAAU,GAAI,IAAI,CAAE,MAAW,CAElD,GAA+B,CAC1C,OACA,YACA,qBAAqB,EACrB,WAAW,IACX,mBAAmB,OACf,CACJ,GAAM,CAAC,EAAY,GAAiB,EAAS,GAAM,CAC7C,EAAe,EAAsB,KAAK,CAE1C,EAAa,MAAc,CAC/B,GAAI,CAAC,EAAM,MAAO,GAClB,GAAI,GAAsB,EAAG,OAAO,EAAS,OAAO,EAAK,OAAO,CAChE,IAAM,EAAS,EAAK,MAAM,EAAG,EAAmB,CAC1C,EAAY,KAAK,IAAI,EAAG,EAAK,OAAS,EAAmB,CAC/D,OAAO,EAAa,GAAG,IAAS,EAAS,OAAO,EAAU,GAAG,EAC5D,CAAC,EAAM,EAAoB,EAAS,CAAC,CAExC,UACe,CACX,AAEE,EAAa,WADb,OAAO,aAAa,EAAa,QAAQ,CAClB,OAG1B,EAAE,CAAC,CAEN,IAAM,MAAe,CACf,IACJ,EAAc,GAAK,CACnB,AAEE,EAAa,WADb,OAAO,aAAa,EAAa,QAAQ,CAClB,MAEzB,EAAa,QAAU,OAAO,eAAiB,CAC7C,EAAc,GAAM,EACnB,EAAiB,GAGhB,MAAa,CACjB,EAAc,GAAM,CAEpB,AAEE,EAAa,WADb,OAAO,aAAa,EAAa,QAAQ,CAClB,OAIrB,EAAgB,EAAa,EAAS,EAE5C,OACE,EAAC,OAAD,CACE,UAAW,EACT,sGACA,EACD,CACD,QAAS,EAAa,EAAO,EAC7B,UAAY,GAAM,EACZ,EAAE,MAAQ,SAAW,EAAE,MAAQ,OACjC,EAAE,gBAAgB,CAClB,EAAa,GAAM,CAAG,GAAQ,GAGlC,KAAK,SACL,SAAU,WAbZ,CAeE,EAAC,OAAD,CAAM,UAAU,6BACb,EAAa,EAAO,EAChB,CAAA,CACP,EAAC,EAAD,CAAe,UAAU,uCAAyC,CAAA,CAC7D"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Code.mjs","names":[],"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":"imBAmCA,MAEa,GAA2B,CACtC,WACA,WACA,aACA,aAAa,GACb,kBAAkB,GAClB,YACA,WACA,iBACA,aACA,2BACA,aAAa,GACb,GAAG,KACC,CACJ,IAAM,EAAO,GAAU,SAAS;EAAK,CAAG,EAAS,MAAM,EAAG,GAAG,CAAG,EAE1D,EACJ,GAAkB,GAAc,EAElC,OACE,EAAC,~~EAAA~~,~~CACiB~~,iBACJ,aACc,oCAE1B,EAAC,~~EAAA~~,~~CACC~~,UAAW,EACT,gDACA,GAAmB,wBACnB,EACD,CACD,aAAa,KACb,GAAI,~~YAEH~~,GACC,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,~~MAAA~~,~~CAAI~~,UAAU,~~yIACb~~,EAAC,~~OAAA~~,~~CAAK~~,UAAU,oBAAY,GAAY,~~GAAgB~~,CACxD,EAAC,~~MAAA~~,~~CAAI~~,UAAU,~~oCACZ~~,GAAkB,EAAC,~~EAAA~~,~~EAAA~~,~~CAAyB~~,CAC5C,GAAc,EAAC,~~EAAA~~,~~EAAA~~,~~CAAqB~~,CACpC,GACC,EAAC,~~EAAA~~,~~EAAA~~,~~CAAmC~~,~~GAElC~~,~~CAAA~~,~~EACF~~,~~CACN,~~EAAC,~~MAAA~~,~~CAAI~~,UAAU,8BACb,EAAC,~~MAAA~~,~~CACC~~,UAAW,EACT,kDACA,GAAqB,OACtB,UAED,EAAC,~~EAAA~~,~~CAAe~~,~~OAAA~~,~~CAAQ~~,~~EACpB~~,~~EACF,~~CAAA,CAAA,CACL,CAEL,EAAC,~~EAAA~~,~~CACC~~,UAAW,IACC,aACZ,UAAU,kDAEV,EAAC,~~EAAA~~,~~CAAU~~,KAAM,EAAsB,sBACpC,~~GACS~~,~~EACG~~,CAAA,~~EACP~~,~~EACU~~"}
1	+ {"version":3,"file":"Code.mjs","names":[],"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":"imBAmCA,MAEa,GAA2B,CACtC,WACA,WACA,aACA,aAAa,GACb,kBAAkB,GAClB,YACA,WACA,iBACA,aACA,2BACA,aAAa,GACb,GAAG,KACC,CACJ,IAAM,EAAO,GAAU,SAAS;EAAK,CAAG,EAAS,MAAM,EAAG,GAAG,CAAG,EAE1D,EACJ,GAAkB,GAAc,EAElC,OACE,EAAC,EAAD,CACkB,iBACJ,aACc,oCAE1B,EAAC,EAAD,CACE,UAAW,EACT,gDACA,GAAmB,wBACnB,EACD,CACD,aAAa,KACb,GAAI,WAPN,CASG,GACC,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,MAAD,CAAK,UAAU,wIAAf,CACE,EAAC,OAAD,CAAM,UAAU,oBAAY,GAAY,EAAgB,CAAA,CACxD,EAAC,MAAD,CAAK,UAAU,mCAAf,CACG,GAAkB,EAAC,EAAD,EAA0B,CAAA,CAC5C,GAAc,EAAC,EAAD,EAAsB,CAAA,CACpC,GACC,EAAC,EAAD,EAAoC,CAAA,CAElC,GACF,GACN,EAAC,MAAD,CAAK,UAAU,8BACb,EAAC,MAAD,CACE,UAAW,EACT,kDACA,GAAqB,OACtB,UAED,EAAC,EAAD,CAAgB,OAAQ,CAAA,CACpB,CAAA,CACF,CAAA,CACL,CAAA,CAAA,CAEL,EAAC,EAAD,CACE,UAAW,IACC,aACZ,UAAU,kDAEV,EAAC,EAAD,CAAW,KAAM,EAAsB,sBACpC,EACS,CAAA,CACG,CAAA,CACP,GACU,CAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeBlockClient.mjs","names":[],"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 {typeof children === 'string'\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 : children}\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":"2HAIA,MAAa,GAAyC,CAAE,cACtD,EAAC,~~MAAA~~,~~CAAI~~,UAAU,8CACb,EAAC,~~MAAA~~,~~CAAI~~,UAAU,6HACb,EAAC,~~OAAA~~,CAAA,~~SACE~~,OAAO,GAAa,SACjB,EAAS,MAAM;EAAK,CAAC,KAAK,EAAM,IAC9B,EAAC,~~OAAA~~,~~CACC~~,UAAU,6BAGT,~~GAFI~~,QAAQ,EAAM,GAAG,EAAK,MAAM,EAAG,GAAG,GAGlC,CACP,CACF,~~EAAA~~,~~CACC~~,~~EACH~~,~~EACF~~,CAIF,EAAiB,MACrB,OAAO,wBAAoB,KAAM,IAAS,CACxC,QAAS,EAAI,eACd,EAAE,CACJ,CAUY,GAAiC,CAC5C,YACA,WACA,aACA,WACA,OACA,aACA,GAAG,KAEH,EAAC,~~MAAA~~,~~CACC~~,UAAW,EAAG,iDAAkD,EAAU,CAC1E,GAAI,WAEJ,EAAC,~~EAAA~~,~~CAAS~~,SAAU,EAAC,~~EAAA~~,~~CAAa~~,~~WAAA~~,~~CAAuB~~,UACvD,EAAC,~~EAAA~~,~~CAAqB~~,OAAkB,aACrC,~~YACc~~,~~EACR~~,~~EACP~~"}
1	+ {"version":3,"file":"CodeBlockClient.mjs","names":[],"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 {typeof children === 'string'\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 : children}\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":"2HAIA,MAAa,GAAyC,CAAE,cACtD,EAAC,MAAD,CAAK,UAAU,8CACb,EAAC,MAAD,CAAK,UAAU,6HACb,EAAC,OAAD,CAAA,SACG,OAAO,GAAa,SACjB,EAAS,MAAM;EAAK,CAAC,KAAK,EAAM,IAC9B,EAAC,OAAD,CACE,UAAU,6BAGT,EACI,CAHA,QAAQ,EAAM,GAAG,EAAK,MAAM,EAAG,GAAG,GAGlC,CACP,CACF,EACC,CAAA,CACH,CAAA,CACF,CAAA,CAIF,EAAiB,MACrB,OAAO,wBAAoB,KAAM,IAAS,CACxC,QAAS,EAAI,eACd,EAAE,CACJ,CAUY,GAAiC,CAC5C,YACA,WACA,aACA,WACA,OACA,aACA,GAAG,KAEH,EAAC,MAAD,CACE,UAAW,EAAG,iDAAkD,EAAU,CAC1E,GAAI,WAEJ,EAAC,EAAD,CAAU,SAAU,EAAC,EAAD,CAAc,WAAuB,CAAA,UACvD,EAAC,EAAD,CAAsB,OAAkB,aACrC,WACc,CAAA,CACR,CAAA,CACP,CAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeBlockServer.mjs","names":[],"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 {typeof children === 'string'\n ? children.split('\\n').map((line, index) => (\n <span className=\"line block w-full\" key={index}>\n {line}\n </span>\n ))\n : children}\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":"0YAiBA,MAAa,GAAkB,MAAO,CACpC,WACA,OACA,aACA,WACA,GAAG,KAkBD,EAAC,~~MAAA~~,~~CACC~~,wBAAyB,CAAE,OAJnB,MAAM,EAAW,EAb0C,CACrE,OACA,MAAO,EAAa,cAAgB,eACpC,aAAc,CACZ,GAAyB,CACzB,GAA8B,CAC9B,GAAkC,CAClC,GAA+B,CAC/B,GAA0B,CAC1B,GAA8B,CAC/B,CACF,CAEmD,CAIR,CACxC,GAAI,EACJ,MAAO,CAAE,gBAAiB,cAAe,~~EACzC~~,EAIA,GAAmC,CACvC,WACA,aACA,aACA,WACA,GAAG,KAEH,EAAC,~~MAAA~~,~~CAAI~~,gBAAiB,EAAY,GAAI,WACpC,EAAC,~~MAAA~~,CAAA,~~SACC~~,EAAC,~~OAAA~~,CAAA,~~SACE~~,OAAO,GAAa,SACjB,EAAS,MAAM;EAAK,CAAC,KAAK,EAAM,IAC9B,EAAC,~~OAAA~~,~~CAAK~~,UAAU,6BACb,~~GADsC~~,EAElC,CACP,CACF,~~EAAA~~,~~CACC,~~CAAA,CACH,~~EACF~~,CAWK,GAAiC,CAC5C,YACA,WACA,aACA,GAAG,KAEH,EAAC,~~EAAA~~,~~CAAS~~,SAAU,EAAC,~~EAAA~~,~~CAAY~~,GAAI,~~EAAA~~,~~CAAS~~,UAC5C,EAAC,~~EAAA~~,~~CACC~~,UAAW,EAAG,cAAe,EAAU,CACvC,gBAAiB,EACjB,QAAU,GAAM,IAAW,EAAE,cAAc,aAAe,GAAG,CAC7D,GAAI,~~GACJ~~,~~EACO~~"}
1	+ {"version":3,"file":"CodeBlockServer.mjs","names":[],"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 {typeof children === 'string'\n ? children.split('\\n').map((line, index) => (\n <span className=\"line block w-full\" key={index}>\n {line}\n </span>\n ))\n : children}\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":"0YAiBA,MAAa,GAAkB,MAAO,CACpC,WACA,OACA,aACA,WACA,GAAG,KAkBD,EAAC,MAAD,CACE,wBAAyB,CAAE,OAJnB,MAAM,EAAW,EAb0C,CACrE,OACA,MAAO,EAAa,cAAgB,eACpC,aAAc,CACZ,GAAyB,CACzB,GAA8B,CAC9B,GAAkC,CAClC,GAA+B,CAC/B,GAA0B,CAC1B,GAA8B,CAC/B,CACF,CAEmD,CAIR,CACxC,GAAI,EACJ,MAAO,CAAE,gBAAiB,cAAe,CACzC,CAAA,EAIA,GAAmC,CACvC,WACA,aACA,aACA,WACA,GAAG,KAEH,EAAC,MAAD,CAAK,gBAAiB,EAAY,GAAI,WACpC,EAAC,MAAD,CAAA,SACE,EAAC,OAAD,CAAA,SACG,OAAO,GAAa,SACjB,EAAS,MAAM;EAAK,CAAC,KAAK,EAAM,IAC9B,EAAC,OAAD,CAAM,UAAU,6BACb,EACI,CAFkC,EAElC,CACP,CACF,EACC,CAAA,CACH,CAAA,CACF,CAAA,CAWK,GAAiC,CAC5C,YACA,WACA,aACA,GAAG,KAEH,EAAC,EAAD,CAAU,SAAU,EAAC,EAAD,CAAa,GAAI,EAAS,CAAA,UAC5C,EAAC,EAAD,CACE,UAAW,EAAG,cAAe,EAAU,CACvC,gBAAiB,EACjB,QAAU,GAAM,IAAW,EAAE,cAAc,aAAe,GAAG,CAC7D,GAAI,EACJ,CAAA,CACO,CAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeBlockShiki.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockShiki.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, useEffect, useState } from 'react';\nimport type {\n BundledLanguage,\n BundledTheme,\n HighlighterGeneric,\n} from 'shiki/bundle/web';\nimport { CodeDefault } from './CodeBlockClient';\n\n// Map of loaded modules to avoid re-importing\nconst languageCache = new Map<BundledLanguage, any>();\nconst themeCache = new Map<BundledTheme, any>();\n\n// Lazy load language modules\nconst loadLanguage = async (lang: BundledLanguage): Promise<any> => {\n if (languageCache.has(lang)) return languageCache.get(lang);\n\n let languageModule: any;\n switch (lang) {\n case 'typescript':\n case 'ts':\n languageModule = await import('shiki/langs/typescript.mjs');\n break;\n case 'javascript':\n case 'js':\n languageModule = await import('shiki/langs/javascript.mjs');\n break;\n case 'bash':\n case 'sh':\n case 'shell':\n languageModule = await import('shiki/langs/bash.mjs');\n break;\n case 'json':\n languageModule = await import('shiki/langs/json.mjs');\n break;\n case 'tsx':\n languageModule = await import('shiki/langs/tsx.mjs');\n break;\n case 'vue':\n languageModule = await import('shiki/langs/vue.mjs');\n break;\n case 'html':\n languageModule = await import('shiki/langs/html.mjs');\n break;\n default:\n languageModule = await import('shiki/langs/typescript.mjs');\n break;\n }\n\n const language = languageModule.default;\n languageCache.set(lang, language);\n return language;\n};\n\n// Lazy load theme modules\nconst loadTheme = async (themeName: BundledTheme): Promise<any> => {\n if (themeCache.has(themeName)) return themeCache.get(themeName);\n\n let themeModule: any;\n switch (themeName) {\n case 'github-dark':\n themeModule = await import('shiki/themes/github-dark.mjs');\n break;\n case 'github-light':\n default:\n themeModule = await import('shiki/themes/github-light.mjs');\n break;\n }\n\n const theme = themeModule.default;\n themeCache.set(themeName, theme);\n return theme;\n};\n\n// Singleton Highlighter Instance\nlet highlighterPromise: Promise<HighlighterGeneric<any, any>> \| null = null;\n\nconst getHighlighterInstance = async () => {\n if (!highlighterPromise) {\n highlighterPromise = import('shiki/bundle/web').then(\n ({ createHighlighter }) =>\n createHighlighter({\n langs: [],\n themes: [],\n })\n );\n }\n return highlighterPromise;\n};\n\n// Create a promise for highlighting\nconst highlightCode = async (\n code: string,\n lang: BundledLanguage,\n isDarkMode?: boolean\n): Promise<string> => {\n const themeName: BundledTheme = isDarkMode ? 'github-dark' : 'github-light';\n\n // Load highlighter, language, and theme in parallel\n const [highlighter, languageModule, themeModule] = await Promise.all([\n getHighlighterInstance(),\n loadLanguage(lang),\n loadTheme(themeName),\n ]);\n\n // Load into the singleton instance if not already loaded\n if (!highlighter.getLoadedLanguages().includes(lang)) {\n await highlighter.loadLanguage(languageModule);\n }\n if (!highlighter.getLoadedThemes().includes(themeName)) {\n await highlighter.loadTheme(themeModule);\n }\n\n return highlighter.codeToHtml(code, {\n lang,\n theme: themeName,\n });\n};\n\nexport type CodeBlockShikiProps = {\n children: string;\n lang: BundledLanguage;\n isDarkMode?: boolean;\n};\n\nexport const CodeBlockShiki: FC<CodeBlockShikiProps> = ({\n children,\n lang,\n isDarkMode,\n}) => {\n const [html, setHtml] = useState<string \| null>(null);\n\n useEffect(() => {\n let isCancelled = false;\n\n highlightCode(children, lang, isDarkMode)\n .then((result) => {\n if (!isCancelled) setHtml(result);\n })\n .catch((error) => {\n console.error('Failed to highlight code:', error);\n if (!isCancelled && html === null) setHtml('');\n });\n\n return () => {\n isCancelled = true;\n };\n }, [children, lang, isDarkMode]);\n\n return (\n <div className=\"min-w-0 max-w-full overflow-auto bg-transparent [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&_pre::-webkit-scrollbar]:hidden [&_pre]:[-ms-overflow-style:none] [&_pre]:[scrollbar-width:none]\">\n {html ? (\n // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki generates safe HTML for code highlighting\n <div dangerouslySetInnerHTML={{ __html: html }} />\n ) : (\n <CodeDefault>{children}</CodeDefault>\n )}\n </div>\n );\n};\n"],"mappings":"yJAWA,MAAM,EAAgB,IAAI,IACpB,EAAa,IAAI,IAGjB,EAAe,KAAO,IAAwC,CAClE,GAAI,EAAc,IAAI,EAAK,CAAE,OAAO,EAAc,IAAI,EAAK,CAE3D,IAAI,EACJ,OAAQ,EAAR,CACE,IAAK,aACL,IAAK,KACH,EAAiB,MAAM,OAAO,8BAC9B,MACF,IAAK,aACL,IAAK,KACH,EAAiB,MAAM,OAAO,8BAC9B,MACF,IAAK,OACL,IAAK,KACL,IAAK,QACH,EAAiB,MAAM,OAAO,wBAC9B,MACF,IAAK,OACH,EAAiB,MAAM,OAAO,wBAC9B,MACF,IAAK,MACH,EAAiB,MAAM,OAAO,uBAC9B,MACF,IAAK,MACH,EAAiB,MAAM,OAAO,uBAC9B,MACF,IAAK,OACH,EAAiB,MAAM,OAAO,wBAC9B,MACF,QACE,EAAiB,MAAM,OAAO,8BAC9B,MAGJ,IAAM,EAAW,EAAe,QAEhC,OADA,EAAc,IAAI,EAAM,EAAS,CAC1B,GAIH,EAAY,KAAO,IAA0C,CACjE,GAAI,EAAW,IAAI,EAAU,CAAE,OAAO,EAAW,IAAI,EAAU,CAE/D,IAAI,EACJ,OAAQ,EAAR,CACE,IAAK,cACH,EAAc,MAAM,OAAO,gCAC3B,MAEF,QACE,EAAc,MAAM,OAAO,iCAC3B,MAGJ,IAAM,EAAQ,EAAY,QAE1B,OADA,EAAW,IAAI,EAAW,EAAM,CACzB,GAIT,IAAI,EAAmE,KAEvE,MAAM,EAAyB,UAC7B,AACE,IAAqB,OAAO,oBAAoB,MAC7C,CAAE,uBACD,EAAkB,CAChB,MAAO,EAAE,CACT,OAAQ,EAAE,CACX,CAAC,CACL,CAEI,GAIH,EAAgB,MACpB,EACA,EACA,IACoB,CACpB,IAAM,EAA0B,EAAa,cAAgB,eAGvD,CAAC,EAAa,EAAgB,GAAe,MAAM,QAAQ,IAAI,CACnE,GAAwB,CACxB,EAAa,EAAK,CAClB,EAAU,EAAU,CACrB,CAAC,CAUF,OAPK,EAAY,oBAAoB,CAAC,SAAS,EAAK,EAClD,MAAM,EAAY,aAAa,EAAe,CAE3C,EAAY,iBAAiB,CAAC,SAAS,EAAU,EACpD,MAAM,EAAY,UAAU,EAAY,CAGnC,EAAY,WAAW,EAAM,CAClC,OACA,MAAO,EACR,CAAC,EASS,GAA2C,CACtD,WACA,OACA,gBACI,CACJ,GAAM,CAAC,EAAM,GAAW,EAAwB,KAAK,CAmBrD,OAjBA,MAAgB,CACd,IAAI,EAAc,GAWlB,OATA,EAAc,EAAU,EAAM,EAAW,CACtC,KAAM,GAAW,CACX,GAAa,EAAQ,EAAO,EACjC,CACD,MAAO,GAAU,CAChB,QAAQ,MAAM,4BAA6B,EAAM,CAC7C,CAAC,GAAe,IAAS,MAAM,EAAQ,GAAG,EAC9C,KAES,CACX,EAAc,KAEf,CAAC,EAAU,EAAM,EAAW,CAAC,CAG9B,EAAC,~~MAAA~~,~~CAAI~~,UAAU,6OACZ,EAEC,EAAC,~~MAAA~~,~~CAAI~~,wBAAyB,CAAE,OAAQ,EAAM,CAAA,~~CAAI,~~CAElD,EAAC,~~EAAA~~,~~CAAa~~,~~WAAA~~,~~CAAuB~~,~~EAEnC~~"}
1	+ {"version":3,"file":"CodeBlockShiki.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockShiki.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, useEffect, useState } from 'react';\nimport type {\n BundledLanguage,\n BundledTheme,\n HighlighterGeneric,\n} from 'shiki/bundle/web';\nimport { CodeDefault } from './CodeBlockClient';\n\n// Map of loaded modules to avoid re-importing\nconst languageCache = new Map<BundledLanguage, any>();\nconst themeCache = new Map<BundledTheme, any>();\n\n// Lazy load language modules\nconst loadLanguage = async (lang: BundledLanguage): Promise<any> => {\n if (languageCache.has(lang)) return languageCache.get(lang);\n\n let languageModule: any;\n switch (lang) {\n case 'typescript':\n case 'ts':\n languageModule = await import('shiki/langs/typescript.mjs');\n break;\n case 'javascript':\n case 'js':\n languageModule = await import('shiki/langs/javascript.mjs');\n break;\n case 'bash':\n case 'sh':\n case 'shell':\n languageModule = await import('shiki/langs/bash.mjs');\n break;\n case 'json':\n languageModule = await import('shiki/langs/json.mjs');\n break;\n case 'tsx':\n languageModule = await import('shiki/langs/tsx.mjs');\n break;\n case 'vue':\n languageModule = await import('shiki/langs/vue.mjs');\n break;\n case 'html':\n languageModule = await import('shiki/langs/html.mjs');\n break;\n default:\n languageModule = await import('shiki/langs/typescript.mjs');\n break;\n }\n\n const language = languageModule.default;\n languageCache.set(lang, language);\n return language;\n};\n\n// Lazy load theme modules\nconst loadTheme = async (themeName: BundledTheme): Promise<any> => {\n if (themeCache.has(themeName)) return themeCache.get(themeName);\n\n let themeModule: any;\n switch (themeName) {\n case 'github-dark':\n themeModule = await import('shiki/themes/github-dark.mjs');\n break;\n case 'github-light':\n default:\n themeModule = await import('shiki/themes/github-light.mjs');\n break;\n }\n\n const theme = themeModule.default;\n themeCache.set(themeName, theme);\n return theme;\n};\n\n// Singleton Highlighter Instance\nlet highlighterPromise: Promise<HighlighterGeneric<any, any>> \| null = null;\n\nconst getHighlighterInstance = async () => {\n if (!highlighterPromise) {\n highlighterPromise = import('shiki/bundle/web').then(\n ({ createHighlighter }) =>\n createHighlighter({\n langs: [],\n themes: [],\n })\n );\n }\n return highlighterPromise;\n};\n\n// Create a promise for highlighting\nconst highlightCode = async (\n code: string,\n lang: BundledLanguage,\n isDarkMode?: boolean\n): Promise<string> => {\n const themeName: BundledTheme = isDarkMode ? 'github-dark' : 'github-light';\n\n // Load highlighter, language, and theme in parallel\n const [highlighter, languageModule, themeModule] = await Promise.all([\n getHighlighterInstance(),\n loadLanguage(lang),\n loadTheme(themeName),\n ]);\n\n // Load into the singleton instance if not already loaded\n if (!highlighter.getLoadedLanguages().includes(lang)) {\n await highlighter.loadLanguage(languageModule);\n }\n if (!highlighter.getLoadedThemes().includes(themeName)) {\n await highlighter.loadTheme(themeModule);\n }\n\n return highlighter.codeToHtml(code, {\n lang,\n theme: themeName,\n });\n};\n\nexport type CodeBlockShikiProps = {\n children: string;\n lang: BundledLanguage;\n isDarkMode?: boolean;\n};\n\nexport const CodeBlockShiki: FC<CodeBlockShikiProps> = ({\n children,\n lang,\n isDarkMode,\n}) => {\n const [html, setHtml] = useState<string \| null>(null);\n\n useEffect(() => {\n let isCancelled = false;\n\n highlightCode(children, lang, isDarkMode)\n .then((result) => {\n if (!isCancelled) setHtml(result);\n })\n .catch((error) => {\n console.error('Failed to highlight code:', error);\n if (!isCancelled && html === null) setHtml('');\n });\n\n return () => {\n isCancelled = true;\n };\n }, [children, lang, isDarkMode]);\n\n return (\n <div className=\"min-w-0 max-w-full overflow-auto bg-transparent [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&_pre::-webkit-scrollbar]:hidden [&_pre]:[-ms-overflow-style:none] [&_pre]:[scrollbar-width:none]\">\n {html ? (\n // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki generates safe HTML for code highlighting\n <div dangerouslySetInnerHTML={{ __html: html }} />\n ) : (\n <CodeDefault>{children}</CodeDefault>\n )}\n </div>\n );\n};\n"],"mappings":"yJAWA,MAAM,EAAgB,IAAI,IACpB,EAAa,IAAI,IAGjB,EAAe,KAAO,IAAwC,CAClE,GAAI,EAAc,IAAI,EAAK,CAAE,OAAO,EAAc,IAAI,EAAK,CAE3D,IAAI,EACJ,OAAQ,EAAR,CACE,IAAK,aACL,IAAK,KACH,EAAiB,MAAM,OAAO,8BAC9B,MACF,IAAK,aACL,IAAK,KACH,EAAiB,MAAM,OAAO,8BAC9B,MACF,IAAK,OACL,IAAK,KACL,IAAK,QACH,EAAiB,MAAM,OAAO,wBAC9B,MACF,IAAK,OACH,EAAiB,MAAM,OAAO,wBAC9B,MACF,IAAK,MACH,EAAiB,MAAM,OAAO,uBAC9B,MACF,IAAK,MACH,EAAiB,MAAM,OAAO,uBAC9B,MACF,IAAK,OACH,EAAiB,MAAM,OAAO,wBAC9B,MACF,QACE,EAAiB,MAAM,OAAO,8BAC9B,MAGJ,IAAM,EAAW,EAAe,QAEhC,OADA,EAAc,IAAI,EAAM,EAAS,CAC1B,GAIH,EAAY,KAAO,IAA0C,CACjE,GAAI,EAAW,IAAI,EAAU,CAAE,OAAO,EAAW,IAAI,EAAU,CAE/D,IAAI,EACJ,OAAQ,EAAR,CACE,IAAK,cACH,EAAc,MAAM,OAAO,gCAC3B,MAEF,QACE,EAAc,MAAM,OAAO,iCAC3B,MAGJ,IAAM,EAAQ,EAAY,QAE1B,OADA,EAAW,IAAI,EAAW,EAAM,CACzB,GAIT,IAAI,EAAmE,KAEvE,MAAM,EAAyB,UAC7B,AACE,IAAqB,OAAO,oBAAoB,MAC7C,CAAE,uBACD,EAAkB,CAChB,MAAO,EAAE,CACT,OAAQ,EAAE,CACX,CAAC,CACL,CAEI,GAIH,EAAgB,MACpB,EACA,EACA,IACoB,CACpB,IAAM,EAA0B,EAAa,cAAgB,eAGvD,CAAC,EAAa,EAAgB,GAAe,MAAM,QAAQ,IAAI,CACnE,GAAwB,CACxB,EAAa,EAAK,CAClB,EAAU,EAAU,CACrB,CAAC,CAUF,OAPK,EAAY,oBAAoB,CAAC,SAAS,EAAK,EAClD,MAAM,EAAY,aAAa,EAAe,CAE3C,EAAY,iBAAiB,CAAC,SAAS,EAAU,EACpD,MAAM,EAAY,UAAU,EAAY,CAGnC,EAAY,WAAW,EAAM,CAClC,OACA,MAAO,EACR,CAAC,EASS,GAA2C,CACtD,WACA,OACA,gBACI,CACJ,GAAM,CAAC,EAAM,GAAW,EAAwB,KAAK,CAmBrD,OAjBA,MAAgB,CACd,IAAI,EAAc,GAWlB,OATA,EAAc,EAAU,EAAM,EAAW,CACtC,KAAM,GAAW,CACX,GAAa,EAAQ,EAAO,EACjC,CACD,MAAO,GAAU,CAChB,QAAQ,MAAM,4BAA6B,EAAM,CAC7C,CAAC,GAAe,IAAS,MAAM,EAAQ,GAAG,EAC9C,KAES,CACX,EAAc,KAEf,CAAC,EAAU,EAAM,EAAW,CAAC,CAG9B,EAAC,MAAD,CAAK,UAAU,6OACZ,EAEC,EAAC,MAAD,CAAK,wBAAyB,CAAE,OAAQ,EAAM,CAAI,CAAA,CAElD,EAAC,EAAD,CAAc,WAAuB,CAAA,CAEnC,CAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeConditionalRenderer.mjs","names":[],"sources":["../../../../src/components/IDE/CodeConditionalRenderer.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, PropsWithChildren } from 'react';\nimport type { CodeCompAttributes } from './Code';\nimport { useCodeContext } from './CodeContext';\n\nexport const CodeConditionalRender: FC<\n PropsWithChildren<CodeCompAttributes>\n> = ({ children, ...props }) => {\n const { packageManager, codeFormat, contentDeclarationFormat } =\n useCodeContext();\n\n const isPackageManagerUndefined = typeof props.packageManager === 'undefined';\n const isPackageManagerSelected = packageManager === props.packageManager;\n\n const isCodeFormatUndefined = typeof props.codeFormat === 'undefined';\n const isCodeFormatSelected = codeFormat === props.codeFormat;\n\n const isContentDeclarationFormatUndefined =\n typeof props.contentDeclarationFormat === 'undefined';\n const isContentDeclarationFormatSelected =\n contentDeclarationFormat === props.contentDeclarationFormat;\n\n if (\n (isPackageManagerUndefined \|\| isPackageManagerSelected) &&\n (isCodeFormatUndefined \|\| isCodeFormatSelected) &&\n (isContentDeclarationFormatUndefined \|\| isContentDeclarationFormatSelected)\n ) {\n return children;\n }\n\n return <></>;\n};\n"],"mappings":"sHAMA,MAAa,GAER,CAAE,WAAU,GAAG,KAAY,CAC9B,GAAM,CAAE,iBAAgB,aAAY,4BAClC,GAAgB,CAEZ,EAAmC,EAAM,iBAAmB,OAC5D,EAA2B,IAAmB,EAAM,eAEpD,EAA+B,EAAM,aAAe,OACpD,EAAuB,IAAe,EAAM,WAE5C,EACG,EAAM,2BAA6B,OACtC,EACJ,IAA6B,EAAM,yBAUrC,OAPG,GAA6B,KAC7B,GAAyB,KACzB,GAAuC,GAEjC,EAGF,EAAA,EAAA,~~EAAA~~,~~CAAK~~"}
1	+ {"version":3,"file":"CodeConditionalRenderer.mjs","names":[],"sources":["../../../../src/components/IDE/CodeConditionalRenderer.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, PropsWithChildren } from 'react';\nimport type { CodeCompAttributes } from './Code';\nimport { useCodeContext } from './CodeContext';\n\nexport const CodeConditionalRender: FC<\n PropsWithChildren<CodeCompAttributes>\n> = ({ children, ...props }) => {\n const { packageManager, codeFormat, contentDeclarationFormat } =\n useCodeContext();\n\n const isPackageManagerUndefined = typeof props.packageManager === 'undefined';\n const isPackageManagerSelected = packageManager === props.packageManager;\n\n const isCodeFormatUndefined = typeof props.codeFormat === 'undefined';\n const isCodeFormatSelected = codeFormat === props.codeFormat;\n\n const isContentDeclarationFormatUndefined =\n typeof props.contentDeclarationFormat === 'undefined';\n const isContentDeclarationFormatSelected =\n contentDeclarationFormat === props.contentDeclarationFormat;\n\n if (\n (isPackageManagerUndefined \|\| isPackageManagerSelected) &&\n (isCodeFormatUndefined \|\| isCodeFormatSelected) &&\n (isContentDeclarationFormatUndefined \|\| isContentDeclarationFormatSelected)\n ) {\n return children;\n }\n\n return <></>;\n};\n"],"mappings":"sHAMA,MAAa,GAER,CAAE,WAAU,GAAG,KAAY,CAC9B,GAAM,CAAE,iBAAgB,aAAY,4BAClC,GAAgB,CAEZ,EAAmC,EAAM,iBAAmB,OAC5D,EAA2B,IAAmB,EAAM,eAEpD,EAA+B,EAAM,aAAe,OACpD,EAAuB,IAAe,EAAM,WAE5C,EACG,EAAM,2BAA6B,OACtC,EACJ,IAA6B,EAAM,yBAUrC,OAPG,GAA6B,KAC7B,GAAyB,KACzB,GAAuC,GAEjC,EAGF,EAAA,EAAA,EAAK,CAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeContext.mjs","names":[],"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":"iLAgCA,MAAa,EAAc,EAAgC,CACzD,eAAgB,MAChB,sBAAyB,GACzB,WAAY,aACZ,kBAAqB,GACrB,yBAA0B,aAC1B,gCAAmC,GACpC,CAAC,CAKW,MAAuB,EAAW,EAAY,CAK9C,GAAuC,CAAE,cAAe,CACnE,GAAM,CAAC,EAAgB,GAAqB,EAC1C,iBACA,MACD,CACK,CAAC,EAAY,GAAiB,EAClC,aACA,aACD,CACK,CAAC,EAA0B,GAC/B,EACE,2BACA,aACD,CAEH,OACE,EAAC,~~EAAA~~,~~CACC~~,MAAO,CACL,iBACA,oBACA,aACA,gBACA,2BACA,8BACD,CAEA,~~YACW~~"}
1	+ {"version":3,"file":"CodeContext.mjs","names":[],"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":"iLAgCA,MAAa,EAAc,EAAgC,CACzD,eAAgB,MAChB,sBAAyB,GACzB,WAAY,aACZ,kBAAqB,GACrB,yBAA0B,aAC1B,gCAAmC,GACpC,CAAC,CAKW,MAAuB,EAAW,EAAY,CAK9C,GAAuC,CAAE,cAAe,CACnE,GAAM,CAAC,EAAgB,GAAqB,EAC1C,iBACA,MACD,CACK,CAAC,EAAY,GAAiB,EAClC,aACA,aACD,CACK,CAAC,EAA0B,GAC/B,EACE,2BACA,aACD,CAEH,OACE,EAAC,EAAD,CACE,MAAO,CACL,iBACA,oBACA,aACA,gBACA,2BACA,8BACD,CAEA,WACW,CAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeFormatSelector.mjs","names":[],"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":"6MAOA,MAAa,MAA+B,CAC1C,GAAM,CAAE,aAAY,gBAAe,+BACjC,GAAgB,CACZ,EAAU,EAAY,iBAAiB,CAE7C,OACE,EAAC,~~EAAA~~,~~CACC~~,MAAO,EACP,cAAgB,GAAU,CACxB,EAAc,EAA2B,CACzC,EAA4B,EAA2B,~~YAGzD~~,EAAC,EAAO,~~QAAA~~,~~CACN~~,UAAU,QACV,aAAY,EAAQ,WAAW,MAAM,eAErC,EAAC,EAAO,~~MAAA~~,~~CAAM~~,YAAa,EAAQ,WAAW,YAAY,~~MAAA~~,~~CAAS~~,~~EACpD~~,CACjB,EAAC,EAAO,~~QAAA~~,CAAA,SAAA,~~CACN~~,EAAC,EAAO,~~KAAA~~,~~CAAK~~,MAAM,sBAAa,~~cAAwB~~,CACxD,EAAC,EAAO,~~KAAA~~,~~CAAK~~,MAAM,eAAM,~~OAAiB~~,CAC1C,EAAC,EAAO,~~KAAA~~,~~CAAK~~,MAAM,oBAAW,~~YAAsB~~,~~GACrC~~,CAAA,~~EACV~~"}
1	+ {"version":3,"file":"CodeFormatSelector.mjs","names":[],"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":"6MAOA,MAAa,MAA+B,CAC1C,GAAM,CAAE,aAAY,gBAAe,+BACjC,GAAgB,CACZ,EAAU,EAAY,iBAAiB,CAE7C,OACE,EAAC,EAAD,CACE,MAAO,EACP,cAAgB,GAAU,CACxB,EAAc,EAA2B,CACzC,EAA4B,EAA2B,WAJ3D,CAOE,EAAC,EAAO,QAAR,CACE,UAAU,QACV,aAAY,EAAQ,WAAW,MAAM,eAErC,EAAC,EAAO,MAAR,CAAc,YAAa,EAAQ,WAAW,YAAY,MAAS,CAAA,CACpD,CAAA,CACjB,EAAC,EAAO,QAAR,CAAA,SAAA,CACE,EAAC,EAAO,KAAR,CAAa,MAAM,sBAAa,aAAwB,CAAA,CACxD,EAAC,EAAO,KAAR,CAAa,MAAM,eAAM,MAAiB,CAAA,CAC1C,EAAC,EAAO,KAAR,CAAa,MAAM,oBAAW,WAAsB,CAAA,CACrC,CAAA,CAAA,CACV"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ContentDeclarationFormatSelector.mjs","names":[],"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":"6MAOA,MAAa,MAA6C,CACxD,GAAM,CAAE,2BAA0B,+BAChC,GAAgB,CACZ,EAAU,EAAY,iBAAiB,CAE7C,OACE,EAAC,~~EAAA~~,~~CACC~~,MAAO,EACP,cAAe,~~YAEf~~,EAAC,EAAO,~~QAAA~~,~~CACN~~,UAAU,QACV,aAAY,EAAQ,yBAAyB,MAAM,eAEnD,EAAC,EAAO,~~MAAA~~,~~CACN~~,YAAa,EAAQ,yBAAyB,YAAY,~~MAAA~~,~~CAC1D~~,~~EACa~~,CACjB,EAAC,EAAO,~~QAAA~~,CAAA,SAAA,~~CACN~~,EAAC,EAAO,~~KAAA~~,~~CAAK~~,MAAM,sBAAa,~~cAAwB~~,CACxD,EAAC,EAAO,~~KAAA~~,~~CAAK~~,MAAM,oBAAW,~~YAAsB~~,CACpD,EAAC,EAAO,~~KAAA~~,~~CAAK~~,MAAM,eAAM,~~OAAiB~~,CAC1C,EAAC,EAAO,~~KAAA~~,~~CAAK~~,MAAM,gBAAO,~~QAAkB~~,~~GAC7B~~,CAAA,~~EACV~~"}
1	+ {"version":3,"file":"ContentDeclarationFormatSelector.mjs","names":[],"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":"6MAOA,MAAa,MAA6C,CACxD,GAAM,CAAE,2BAA0B,+BAChC,GAAgB,CACZ,EAAU,EAAY,iBAAiB,CAE7C,OACE,EAAC,EAAD,CACE,MAAO,EACP,cAAe,WAFjB,CAIE,EAAC,EAAO,QAAR,CACE,UAAU,QACV,aAAY,EAAQ,yBAAyB,MAAM,eAEnD,EAAC,EAAO,MAAR,CACE,YAAa,EAAQ,yBAAyB,YAAY,MAC1D,CAAA,CACa,CAAA,CACjB,EAAC,EAAO,QAAR,CAAA,SAAA,CACE,EAAC,EAAO,KAAR,CAAa,MAAM,sBAAa,aAAwB,CAAA,CACxD,EAAC,EAAO,KAAR,CAAa,MAAM,oBAAW,WAAsB,CAAA,CACpD,EAAC,EAAO,KAAR,CAAa,MAAM,eAAM,MAAiB,CAAA,CAC1C,EAAC,EAAO,KAAR,CAAa,MAAM,gBAAO,OAAkB,CAAA,CAC7B,CAAA,CAAA,CACV"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CopyCode.mjs","names":[],"sources":["../../../../src/components/IDE/CopyCode.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { CopyButton } from '../CopyButton';\nimport { Popover, PopoverXAlign } from '../Popover';\n\ntype CopyCodeProps = {\n code: string;\n};\n\nexport const CopyCode: FC<CopyCodeProps> = ({ code }) => {\n const { title, description } = useIntlayer('code');\n\n return (\n <Popover identifier=\"copy\">\n <CopyButton content={code} />\n\n <Popover.Detail\n identifier=\"copy\"\n className=\"flex min-w-64 flex-col gap-3 p-3 text-sm\"\n xAlign={PopoverXAlign.END}\n >\n <strong>{title}</strong>\n <p className=\"text-neutral\">{description}</p>\n </Popover.Detail>\n </Popover>\n );\n};\n"],"mappings":"wQAWA,MAAa,GAA+B,CAAE,UAAW,CACvD,GAAM,CAAE,QAAO,eAAgB,EAAY,OAAO,CAElD,OACE,EAAC,~~EAAA~~,~~CAAQ~~,WAAW,~~iBAClB~~,EAAC,~~EAAA~~,~~CAAW~~,QAAS,~~EAAA~~,~~CAAQ~~,CAE7B,EAAC,EAAQ,~~OAAA~~,~~CACP~~,WAAW,OACX,UAAU,2CACV,OAAQ,EAAc,~~cAEtB~~,EAAC,~~SAAA~~,CAAA,~~SAAQ~~,~~EAAA~~,~~CAAe~~,CACxB,EAAC,~~IAAA~~,~~CAAE~~,UAAU,wBAAgB,~~GAAgB~~,CAAA,~~EAC9B~~,~~CAAA,EACT~~"}
1	+ {"version":3,"file":"CopyCode.mjs","names":[],"sources":["../../../../src/components/IDE/CopyCode.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { CopyButton } from '../CopyButton';\nimport { Popover, PopoverXAlign } from '../Popover';\n\ntype CopyCodeProps = {\n code: string;\n};\n\nexport const CopyCode: FC<CopyCodeProps> = ({ code }) => {\n const { title, description } = useIntlayer('code');\n\n return (\n <Popover identifier=\"copy\">\n <CopyButton content={code} />\n\n <Popover.Detail\n identifier=\"copy\"\n className=\"flex min-w-64 flex-col gap-3 p-3 text-sm\"\n xAlign={PopoverXAlign.END}\n >\n <strong>{title}</strong>\n <p className=\"text-neutral\">{description}</p>\n </Popover.Detail>\n </Popover>\n );\n};\n"],"mappings":"wQAWA,MAAa,GAA+B,CAAE,UAAW,CACvD,GAAM,CAAE,QAAO,eAAgB,EAAY,OAAO,CAElD,OACE,EAAC,EAAD,CAAS,WAAW,gBAApB,CACE,EAAC,EAAD,CAAY,QAAS,EAAQ,CAAA,CAE7B,EAAC,EAAQ,OAAT,CACE,WAAW,OACX,UAAU,2CACV,OAAQ,EAAc,aAHxB,CAKE,EAAC,SAAD,CAAA,SAAS,EAAe,CAAA,CACxB,EAAC,IAAD,CAAG,UAAU,wBAAgB,EAAgB,CAAA,CAC9B,GACT"}