npm - @adgytec/adgytec-web-ui-components - Versions diffs - 2.3.1 → 2.4.0 - Mend

@adgytec/adgytec-web-ui-components 2.3.1 → 2.4.0

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

package/dist/chunks/Input.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input","names":["renderProps","Checkbox","_c","clsx","styles","_Fragment","AriaCheckbox","CheckboxGroup","AriaCheckboxGroup","clsx","styles","_Fragment","Label","FieldError","require_compiler_runtime","typography","FieldError$1","Label$1","clsx$1","import_compiler_runtime","checkbox_module_default","CheckboxGroupContext","createContext","Checkbox$1","$","children","className","containerStateLayer","labelPlacement","props","t0","groupLabelPlacement","groupContainerStateLayer","useContext","placement","stateLayer","t1","renderProps","t2","renderProps_0","dataAttrs","isSelected","isHovered","isDisabled","isFocused","isFocusVisible","isPressed","isInvalid","isIndeterminate","label","Fragment","TapTarget","t3","Checkbox","CheckboxGroup$1","CheckboxGroup","showDescription","description","showDescriptionOnInvalid","checkboxItemsGap","Description","errorMessage"],"sources":["../../src/components/Input/Checkbox/checkbox.module.css","../../src/components/Input/Checkbox/context.ts","../../src/components/Input/Checkbox/Checkbox.tsx","../../src/components/Input/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["/* configurable tokens\n\n --md-checkbox-outline-color\n* --md-checkbox-container-color\n\n --md-checkbox-interaction-outline-color\n\n --md-checkbox-icon-color\n\n --md-checkbox-state-layer-color\n* --md-checkbox-selected-state-layer-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .checkbox-group {\n display: grid;\n gap: var(--md-sys-layout-space-16);\n\n &[data-disabled] {\n color: rgb(\n from currentcolor r g b /\n var(--md-sys-state-disabled-content)\n );\n cursor: default;\n }\n }\n\n .checkbox-items {\n display: grid;\n }\n\n .checkbox {\n / configurable tokens /\n --_md-checkbox-outline-color: var(\n --md-checkbox-outline-color,\n var(--md-sys-color-on-surface-variant)\n );\n --_md-checkbox-container-color: var(\n --md-checkbox-container-color,\n var(--md-sys-color-primary)\n );\n\n --_md-checkbox-interaction-outline-color: var(\n --md-checkbox-interaction-outline-color,\n var(--md-sys-color-on-surface)\n );\n\n --_md-checkbox-icon-color: var(\n --md-checkbox-icon-color,\n var(--md-sys-color-on-primary)\n );\n\n --_md-checkbox-state-layer-color: var(\n --md-checkbox-state-layer-color,\n var(--md-sys-color-on-surface)\n );\n --_md-checkbox-selected-state-layer-color: var(\n --md-checkbox-selected-state-layer-color,\n var(--_md-checkbox-container-color)\n );\n\n / configurable tokens end /\n\n / invalid tokens /\n --_md-checkbox-invalid-outline-color: var(--md-sys-color-error);\n --_md-checkbox-invalid-container-color: var(--md-sys-color-error);\n --_md-checkbox-invalid-icon-color: var(--md-sys-color-on-error);\n\n --_md-checkbox-invalid-state-layer-color: var(\n --_md-checkbox-invalid-container-color\n );\n\n / checkbox tokens /\n --_md-checkbox-outline-width: var(--md-sys-shape-border-width-thick);\n --_md-checkbox-container-shape: calc(2 var(--dp, 1px));\n --_md-checkbox-container-size: calc(18 * var(--dp, 1px));\n\n /* state layer tokens /\n --_md-checkbox-state-layer-size: var(--md-sys-layout-space-40);\n --_md-checkbox-state-layer-shape: var(\n --md-sys-shape-corner-radius-full\n );\n\n --_md-checkbox-pressed-state-layer-color: var(\n --_md-checkbox-selected-state-layer-color\n );\n --_md-checkbox-pressed-selected-state-layer-color: var(\n --_md-checkbox-state-layer-color\n );\n\n --_state-layer-opacity: 0;\n --_state-color: var(--_md-checkbox-state-layer-color);\n\n --_state-layer-color: rgb(\n from var(--_state-color) r g b /\n var(--_state-layer-opacity)\n );\n\n / styles /\n position: relative;\n\n display: flex;\n gap: var(--md-sys-layout-space-16);\n align-items: center;\n\n color: inherit;\n cursor: pointer;\n\n & {\n cursor: inherit;\n }\n\n &[data-disabled] {\n color: rgb(\n from currentColor r g b /\n var(--md-sys-state-disabled-content)\n );\n cursor: default;\n }\n\n &[data-indeterminate] {\n --_state-color: var(--_md-checkbox-selected-state-layer-color);\n }\n &[data-selected] {\n --_state-color: var(--_md-checkbox-selected-state-layer-color);\n }\n\n &[data-pressed] {\n --_state-layer-opacity: var(--md-sys-state-pressed);\n --_state-color: var(--_md-checkbox-pressed-state-layer-color);\n\n &[data-indeterminate] {\n --_state-color: var(\n --_md-checkbox-pressed-selected-state-layer-color\n );\n }\n &[data-selected] {\n --_state-color: var(\n --_md-checkbox-pressed-selected-state-layer-color\n );\n }\n }\n\n &[data-invalid] {\n --_state-color: var(--_md-checkbox-invalid-state-layer-color);\n\n &[data-indeterminate] {\n --_state-color: var(--_md-checkbox-invalid-state-layer-color);\n }\n &[data-selected] {\n --_state-color: var(--_md-checkbox-invalid-state-layer-color);\n }\n }\n\n &[data-hovered] {\n --_state-layer-opacity: var(--md-sys-state-hover);\n z-index: 1;\n }\n\n &[data-focus-visible] {\n --_state-layer-opacity: var(--md-sys-state-focus);\n z-index: 1;\n }\n }\n\n .state-layer::before {\n content: \"\";\n\n position: absolute;\n inset: calc(-1 * var(--md-sys-layout-space-12));\n\n background-color: var(--_state-layer-color);\n border-radius: var(--md-sys-shape-corner-radius-extra-small);\n\n pointer-events: none;\n\n transition: background-color\n var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .indicator {\n --_outline-color: var(--_md-checkbox-outline-color);\n --_background: transparent;\n --_icon-color: var(--_md-checkbox-icon-color);\n\n position: relative;\n\n inline-size: var(--_md-checkbox-container-size);\n aspect-ratio: 1;\n border-radius: var(--_md-checkbox-container-shape);\n\n background-color: var(--_background);\n border: var(--_md-checkbox-outline-width) solid var(--_outline-color);\n\n transition:\n background-color var(--md-sys-motion-expressive-default-effects)\n var(--md-sys-motion-expressive-default-effects-duration),\n border-color var(--md-sys-motion-expressive-default-effects)\n var(--md-sys-motion-expressive-default-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-filled] {\n --_outline-color: transparent;\n --_background: var(--_md-checkbox-container-color);\n }\n\n &[data-invalid] {\n --_outline-color: var(--_md-checkbox-invalid-outline-color);\n --_icon-color: var(--_md-checkbox-invalid-icon-color);\n --_background: transparent;\n\n &[data-filled] {\n --_outline-color: transparent;\n --_background: var(--_md-checkbox-invalid-container-color);\n }\n }\n\n &[data-pressed],\n &[data-hovered],\n &[data-focus-visible] {\n --_outline-color: var(--_md-checkbox-interaction-outline-color);\n\n &[data-invalid] {\n --_outline-color: var(--_md-checkbox-invalid-outline-color);\n }\n\n &[data-filled] {\n --_outline-color: transparent;\n }\n }\n\n &[data-disabled] {\n --_icon-color: var(--md-sys-color-surface);\n --_outline-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n --_background: transparent;\n\n &[data-filled] {\n --_outline-color: transparent;\n --_background: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n }\n }\n }\n\n /* state layer /\n .indicator[data-show-state-layer]::before {\n content: \"\";\n\n position: absolute;\n inset-inline-start: 50%;\n inset-block-start: 50%;\n transform: translate(-50%, -50%);\n\n inline-size: var(--_md-checkbox-state-layer-size);\n aspect-ratio: 1 / 1;\n border-radius: var(--_md-checkbox-state-layer-shape);\n\n background-color: var(--_state-layer-color);\n\n transition: background-color\n var(--md-sys-motion-expressive-default-effects)\n var(--md-sys-motion-expressive-default-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .indicator[data-focus-visible] {\n --focus-indicator-thickness: calc(3 var(--dp, 1px));\n --focus-indicator-offset: calc(2 * var(--dp, 1px));\n --focus-indicator-color: var(--md-sys-color-secondary);\n\n outline-width: var(--focus-indicator-thickness);\n outline-style: solid;\n outline-offset: var(--focus-indicator-offset);\n outline-color: var(--focus-indicator-color);\n }\n\n /* https://react-aria.adobe.com/Checkbox /\n / ref this for check animation /\n .svg {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-start: 50%;\n transform: translate(-50%, -50%);\n\n width: calc(12 var(--dp, 1px));\n aspect-ratio: 1 / 1;\n fill: none;\n\n stroke: var(--_icon-color);\n\n stroke-width: calc(3 * var(--dp, 1px));\n stroke-dasharray: calc(22 * var(--dp, 1px));\n stroke-dashoffset: 66;\n stroke-linecap: round;\n stroke-linejoin: round;\n\n transition: stroke-dashoffset\n var(--md-sys-motion-expressive-default-effects)\n var(--md-sys-motion-expressive-default-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-selected] {\n stroke-dashoffset: 44;\n }\n\n &[data-indeterminate] {\n stroke: none;\n fill: var(--_icon-color);\n }\n }\n}\n","import { createContext } from \"react\";\nimport type { CheckboxLabelPlacement } from \"./types\";\n\n/*\n Shared context value provided by {@link CheckboxGroup} to child {@link Checkbox} components.\n /\nexport interface CheckboxGroupContextValue {\n /* Inherited label placement. /\n labelPlacement?: CheckboxLabelPlacement;\n /* Inherited container state layer flag. /\n containerStateLayer?: boolean;\n}\n\n/\n Context communicating group-level styling configurations to nested checkboxes.\n /\nexport const CheckboxGroupContext = createContext<CheckboxGroupContextValue>(\n {}\n);\n","import clsx from \"clsx\";\nimport { useContext } from \"react\";\nimport { Checkbox as AriaCheckbox } from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport { TapTarget } from \"@/utils/tapTarget\";\nimport styles from \"./checkbox.module.css\";\nimport { CheckboxGroupContext } from \"./context\";\nimport type { CheckboxProps } from \"./types\";\n\n/\n A checkbox control implementing Material Design 3 Checkbox guidelines.\n \n Supports unchecked, checked, and indeterminate states with smooth animated SVG paths,\n * accessible keyboard activation, and flexible label positioning.\n \n @example\n * ```tsx\n * import { Checkbox } from '@adgytec/web-ui-components';\n \n <Checkbox isSelected={agree} onChange={setAgree}>\n * I accept the terms and conditions\n * </Checkbox>\n * ```\n /\nexport const Checkbox: React.FC<CheckboxProps> = ({\n children,\n className,\n labelPlacement,\n containerStateLayer,\n ...props\n}) => {\n const {\n labelPlacement: groupLabelPlacement,\n containerStateLayer: groupContainerStateLayer,\n } = useContext(CheckboxGroupContext);\n const placement = labelPlacement ?? groupLabelPlacement ?? \"end\";\n const stateLayer = containerStateLayer ?? groupContainerStateLayer ?? false;\n\n return (\n <AriaCheckbox\n className={(renderProps) =>\n clsx(\n styles[\"checkbox\"],\n stateLayer && styles[\"state-layer\"],\n typography.labelLarge,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-checkbox\n >\n {(renderProps) => {\n const {\n isSelected,\n isHovered,\n isDisabled,\n isFocused,\n isFocusVisible,\n isPressed,\n isInvalid,\n isIndeterminate,\n } = renderProps;\n\n const dataAttrs = {\n \"data-selected\": isSelected \|\| undefined,\n \"data-hovered\": isHovered \|\| undefined,\n \"data-disabled\": isDisabled \|\| undefined,\n \"data-focused\": isFocused \|\| undefined,\n \"data-focus-visible\": isFocusVisible \|\| undefined,\n \"data-pressed\": isPressed \|\| undefined,\n \"data-invalid\": isInvalid \|\| undefined,\n \"data-indeterminate\": isIndeterminate \|\| undefined,\n \"data-show-state-layer\": !stateLayer \|\| undefined,\n \"data-filled\": isSelected \|\| isIndeterminate \|\| undefined,\n };\n\n const label =\n typeof children === \"function\"\n ? children(renderProps)\n : children;\n return (\n <>\n {placement === \"start\" && label}\n\n <span\n className={clsx(styles[\"indicator\"], TapTarget)}\n {...dataAttrs}\n >\n <svg\n viewBox=\"0 0 18 18\"\n aria-hidden=\"true\"\n key={\n isIndeterminate ? \"indeterminate\" : \"check\"\n }\n className={styles[\"svg\"]}\n {...dataAttrs}\n >\n {isIndeterminate ? (\n <rect x={1} y={7.5} width={16} height={3} />\n ) : (\n <polyline points=\"2 9 7 14 16 4\" />\n )}\n </svg>\n </span>\n\n {placement === \"end\" && label}\n </>\n );\n }}\n </AriaCheckbox>\n );\n};\n","import clsx from \"clsx\";\nimport { CheckboxGroup as AriaCheckboxGroup } from \"react-aria-components\";\nimport { Description } from \"../Description\";\nimport { FieldError } from \"../FieldError\";\nimport { Label } from \"../Label\";\nimport styles from \"./checkbox.module.css\";\nimport { CheckboxGroupContext } from \"./context\";\nimport type { CheckboxGroupProps } from \"./types\";\n\n/\n A container managing a set of related {@link Checkbox} controls.\n \n Coordinates group selection values, accessible group labels, helper descriptions,\n * error validation messages, and consistent item spacing.\n \n @example\n * ```tsx\n * import { CheckboxGroup, Checkbox } from '@adgytec/web-ui-components';\n \n <CheckboxGroup label=\"Notification Preferences\">\n * <Checkbox value=\"email\">Email</Checkbox>\n * <Checkbox value=\"sms\">SMS</Checkbox>\n * <Checkbox value=\"push\">Push notifications</Checkbox>\n * </CheckboxGroup>\n * ```\n /\nexport const CheckboxGroup: React.FC<CheckboxGroupProps> = ({\n label,\n description,\n errorMessage,\n children,\n className,\n checkboxItemsGap = 24,\n labelPlacement,\n containerStateLayer,\n showDescriptionOnInvalid = false,\n ...props\n}) => {\n return (\n <CheckboxGroupContext value={{ labelPlacement, containerStateLayer }}>\n <AriaCheckboxGroup\n className={(renderProps) =>\n clsx(\n styles[\"checkbox-group\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n >\n {({ isInvalid }) => {\n const showDescription =\n description &&\n (!isInvalid \|\| (isInvalid && showDescriptionOnInvalid));\n\n return (\n <>\n {label && <Label>{label}</Label>}\n\n <div\n className={clsx(styles[\"checkbox-items\"])}\n style={{\n gap: `calc(${checkboxItemsGap} var(--dp, 1px))`,\n }}\n >\n {children}\n </div>\n\n {showDescription && (\n <Description>{description}</Description>\n )}\n <FieldError>{errorMessage}</FieldError>\n </>\n );\n }}\n </AriaCheckboxGroup>\n </CheckboxGroupContext>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"Input","names":["_c","clsx","styles","_Fragment","CheckboxGroup","AriaCheckboxGroup","clsx","styles","_Fragment","Label","FieldError","require_compiler_runtime","typography","FieldError$1","Label$1","clsx$1","import_compiler_runtime","checkbox_module_default","CheckboxGroupContext","createContext","Checkbox","$","children","labelPlacement","props","t0","groupLabelPlacement","useContext","placement","t1","label","renderProps","CheckboxButton","buttonRenderProps","dataAttrs","isSelected","isHovered","isDisabled","isFocused","isFocusVisible","isPressed","isInvalid","isIndeterminate","Fragment","TapTarget","t2","CheckboxField","CheckboxGroup$1","CheckboxGroup","className","description","showDescriptionOnInvalid","Description","errorMessage"],"sources":["../../src/components/Input/Checkbox/checkbox.module.css","../../src/components/Input/Checkbox/context.ts","../../src/components/Input/Checkbox/Checkbox.tsx","../../src/components/Input/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["/* configurable tokens\n\n --md-checkbox-outline-color\n* --md-checkbox-container-color\n\n --md-checkbox-interaction-outline-color\n\n --md-checkbox-icon-color\n\n --md-checkbox-state-layer-color\n* --md-checkbox-selected-state-layer-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .checkbox-group {\n display: grid;\n gap: var(--md-sys-layout-space-16);\n\n &[data-disabled] {\n color: rgb(\n from currentcolor r g b /\n var(--md-sys-state-disabled-content)\n );\n cursor: default;\n }\n }\n\n .checkbox {\n / configurable tokens /\n --_md-checkbox-outline-color: var(\n --md-checkbox-outline-color,\n var(--md-sys-color-on-surface-variant)\n );\n --_md-checkbox-container-color: var(\n --md-checkbox-container-color,\n var(--md-sys-color-primary)\n );\n\n --_md-checkbox-interaction-outline-color: var(\n --md-checkbox-interaction-outline-color,\n var(--md-sys-color-on-surface)\n );\n\n --_md-checkbox-icon-color: var(\n --md-checkbox-icon-color,\n var(--md-sys-color-on-primary)\n );\n\n --_md-checkbox-state-layer-color: var(\n --md-checkbox-state-layer-color,\n var(--md-sys-color-on-surface)\n );\n --_md-checkbox-selected-state-layer-color: var(\n --md-checkbox-selected-state-layer-color,\n var(--_md-checkbox-container-color)\n );\n\n / configurable tokens end /\n\n / invalid tokens /\n --_md-checkbox-invalid-outline-color: var(--md-sys-color-error);\n --_md-checkbox-invalid-container-color: var(--md-sys-color-error);\n --_md-checkbox-invalid-icon-color: var(--md-sys-color-on-error);\n\n --_md-checkbox-invalid-state-layer-color: var(\n --_md-checkbox-invalid-container-color\n );\n\n / checkbox tokens /\n --_md-checkbox-outline-width: var(--md-sys-shape-border-width-thick);\n --_md-checkbox-container-shape: calc(2 var(--dp, 1px));\n --_md-checkbox-container-size: calc(18 * var(--dp, 1px));\n\n /* state layer tokens /\n --_md-checkbox-state-layer-size: var(--md-sys-layout-space-40);\n --_md-checkbox-state-layer-shape: var(\n --md-sys-shape-corner-radius-full\n );\n\n --_md-checkbox-pressed-state-layer-color: var(\n --_md-checkbox-selected-state-layer-color\n );\n --_md-checkbox-pressed-selected-state-layer-color: var(\n --_md-checkbox-state-layer-color\n );\n\n --_state-layer-opacity: 0;\n --_state-color: var(--_md-checkbox-state-layer-color);\n\n --_state-layer-color: rgb(\n from var(--_state-color) r g b /\n var(--_state-layer-opacity)\n );\n\n / styles /\n position: relative;\n\n display: flex;\n gap: var(--md-sys-layout-space-16);\n align-items: center;\n\n color: inherit;\n cursor: pointer;\n\n & {\n cursor: inherit;\n }\n\n &[data-disabled] {\n color: rgb(\n from currentColor r g b /\n var(--md-sys-state-disabled-content)\n );\n cursor: default;\n }\n\n &[data-indeterminate] {\n --_state-color: var(--_md-checkbox-selected-state-layer-color);\n }\n &[data-selected] {\n --_state-color: var(--_md-checkbox-selected-state-layer-color);\n }\n\n &[data-pressed] {\n --_state-layer-opacity: var(--md-sys-state-pressed);\n --_state-color: var(--_md-checkbox-pressed-state-layer-color);\n\n &[data-indeterminate] {\n --_state-color: var(\n --_md-checkbox-pressed-selected-state-layer-color\n );\n }\n &[data-selected] {\n --_state-color: var(\n --_md-checkbox-pressed-selected-state-layer-color\n );\n }\n }\n\n &[data-invalid] {\n --_state-color: var(--_md-checkbox-invalid-state-layer-color);\n\n &[data-indeterminate] {\n --_state-color: var(--_md-checkbox-invalid-state-layer-color);\n }\n &[data-selected] {\n --_state-color: var(--_md-checkbox-invalid-state-layer-color);\n }\n }\n\n &[data-hovered] {\n --_state-layer-opacity: var(--md-sys-state-hover);\n z-index: 1;\n }\n\n &[data-focus-visible] {\n --_state-layer-opacity: var(--md-sys-state-focus);\n z-index: 1;\n }\n }\n\n .indicator {\n --_outline-color: var(--_md-checkbox-outline-color);\n --_background: transparent;\n --_icon-color: var(--_md-checkbox-icon-color);\n\n position: relative;\n\n inline-size: var(--_md-checkbox-container-size);\n aspect-ratio: 1;\n border-radius: var(--_md-checkbox-container-shape);\n\n background-color: var(--_background);\n border: var(--_md-checkbox-outline-width) solid var(--_outline-color);\n\n transition:\n background-color var(--md-sys-motion-expressive-default-effects)\n var(--md-sys-motion-expressive-default-effects-duration),\n border-color var(--md-sys-motion-expressive-default-effects)\n var(--md-sys-motion-expressive-default-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-filled] {\n --_outline-color: transparent;\n --_background: var(--_md-checkbox-container-color);\n }\n\n &[data-invalid] {\n --_outline-color: var(--_md-checkbox-invalid-outline-color);\n --_icon-color: var(--_md-checkbox-invalid-icon-color);\n --_background: transparent;\n\n &[data-filled] {\n --_outline-color: transparent;\n --_background: var(--_md-checkbox-invalid-container-color);\n }\n }\n\n &[data-pressed],\n &[data-hovered],\n &[data-focus-visible] {\n --_outline-color: var(--_md-checkbox-interaction-outline-color);\n\n &[data-invalid] {\n --_outline-color: var(--_md-checkbox-invalid-outline-color);\n }\n\n &[data-filled] {\n --_outline-color: transparent;\n }\n }\n\n &[data-disabled] {\n --_icon-color: var(--md-sys-color-surface);\n --_outline-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n --_background: transparent;\n\n &[data-filled] {\n --_outline-color: transparent;\n --_background: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n }\n }\n }\n\n /* state layer /\n .indicator::before {\n content: \"\";\n\n position: absolute;\n inset-inline-start: 50%;\n inset-block-start: 50%;\n transform: translate(-50%, -50%);\n\n inline-size: var(--_md-checkbox-state-layer-size);\n aspect-ratio: 1 / 1;\n border-radius: var(--_md-checkbox-state-layer-shape);\n\n background-color: var(--_state-layer-color);\n\n transition: background-color\n var(--md-sys-motion-expressive-default-effects)\n var(--md-sys-motion-expressive-default-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .indicator[data-focus-visible] {\n --focus-indicator-thickness: calc(3 var(--dp, 1px));\n --focus-indicator-offset: calc(2 * var(--dp, 1px));\n --focus-indicator-color: var(--md-sys-color-secondary);\n\n outline-width: var(--focus-indicator-thickness);\n outline-style: solid;\n outline-offset: var(--focus-indicator-offset);\n outline-color: var(--focus-indicator-color);\n }\n\n /* https://react-aria.adobe.com/Checkbox /\n / ref this for check animation /\n .svg {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-start: 50%;\n transform: translate(-50%, -50%);\n\n width: calc(12 var(--dp, 1px));\n aspect-ratio: 1 / 1;\n fill: none;\n\n stroke: var(--_icon-color);\n\n stroke-width: calc(3 * var(--dp, 1px));\n stroke-dasharray: calc(22 * var(--dp, 1px));\n stroke-dashoffset: 66;\n stroke-linecap: round;\n stroke-linejoin: round;\n\n transition: stroke-dashoffset\n var(--md-sys-motion-expressive-default-effects)\n var(--md-sys-motion-expressive-default-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-selected] {\n stroke-dashoffset: 44;\n }\n\n &[data-indeterminate] {\n stroke: none;\n fill: var(--_icon-color);\n }\n }\n}\n","import { createContext } from \"react\";\nimport type { CheckboxLabelPlacement } from \"./types\";\n\n/*\n Configuration context value passed down from [`CheckboxGroup`](src/components/Input/Checkbox/CheckboxGroup.tsx) to child [`Checkbox`](src/components/Input/Checkbox/Checkbox.tsx) components.\n /\nexport interface CheckboxGroupContextValue {\n /* Inherited label placement for child checkbox items. /\n labelPlacement?: CheckboxLabelPlacement;\n}\n\n/\n Context communicating group-level styling configurations to nested checkboxes.\n /\nexport const CheckboxGroupContext = createContext<CheckboxGroupContextValue>(\n {}\n);\n","import clsx from \"clsx\";\nimport { useContext } from \"react\";\nimport { CheckboxButton, CheckboxField } from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport { TapTarget } from \"@/utils/tapTarget\";\nimport styles from \"./checkbox.module.css\";\nimport { CheckboxGroupContext } from \"./context\";\nimport type { CheckboxProps } from \"./types\";\n\n/\n A checkbox control implementing Material Design 3 Checkbox guidelines.\n \n Supports unchecked, checked, and indeterminate states with animated SVG paths,\n * accessible keyboard activation, state layers, and flexible label positioning.\n * Built on React Aria's `CheckboxField` and `CheckboxButton` components.\n \n @example\n * ```tsx\n * import { Checkbox } from \"@adgytec/web-ui-components\";\n \n <Checkbox isSelected={agree} onChange={setAgree}>\n * I accept the terms and conditions\n * </Checkbox>\n * ```\n \n @example\n * ```tsx\n * // Indeterminate checkbox with start label placement\n * import { Checkbox } from \"@adgytec/web-ui-components\";\n \n <Checkbox isIndeterminate labelPlacement=\"start\">\n * Select all items\n * </Checkbox>\n * ```\n /\nexport const Checkbox: React.FC<CheckboxProps> = ({\n children,\n labelPlacement,\n ...props\n}) => {\n const { labelPlacement: groupLabelPlacement } =\n useContext(CheckboxGroupContext);\n const placement = labelPlacement ?? groupLabelPlacement ?? \"end\";\n\n return (\n <CheckboxField {...props} data-checkbox>\n {(renderProps) => {\n const label =\n typeof children === \"function\"\n ? children(renderProps)\n : children;\n\n return (\n <CheckboxButton\n className={clsx(\n styles[\"checkbox\"],\n typography.labelLarge\n )}\n >\n {(buttonRenderProps) => {\n const {\n isSelected,\n isHovered,\n isDisabled,\n isFocused,\n isFocusVisible,\n isPressed,\n isInvalid,\n isIndeterminate,\n } = buttonRenderProps;\n\n const dataAttrs = {\n \"data-selected\": isSelected \|\| undefined,\n \"data-hovered\": isHovered \|\| undefined,\n \"data-disabled\": isDisabled \|\| undefined,\n \"data-focused\": isFocused \|\| undefined,\n \"data-focus-visible\":\n isFocusVisible \|\| undefined,\n \"data-pressed\": isPressed \|\| undefined,\n \"data-invalid\": isInvalid \|\| undefined,\n \"data-indeterminate\":\n isIndeterminate \|\| undefined,\n \"data-filled\":\n isSelected \|\| isIndeterminate \|\| undefined,\n };\n\n return (\n <>\n {placement === \"start\" && label}\n\n <span\n className={clsx(\n styles[\"indicator\"],\n TapTarget\n )}\n {...dataAttrs}\n >\n <svg\n viewBox=\"0 0 18 18\"\n aria-hidden=\"true\"\n key={\n isIndeterminate\n ? \"indeterminate\"\n : \"check\"\n }\n className={styles[\"svg\"]}\n {...dataAttrs}\n >\n {isIndeterminate ? (\n <rect\n x={1}\n y={7.5}\n width={16}\n height={3}\n />\n ) : (\n <polyline points=\"2 9 7 14 16 4\" />\n )}\n </svg>\n </span>\n\n {placement === \"end\" && label}\n </>\n );\n }}\n </CheckboxButton>\n );\n }}\n </CheckboxField>\n );\n};\n","import clsx from \"clsx\";\nimport { CheckboxGroup as AriaCheckboxGroup } from \"react-aria-components\";\nimport { Description } from \"../Description\";\nimport { FieldError } from \"../FieldError\";\nimport { Label } from \"../Label\";\nimport styles from \"./checkbox.module.css\";\nimport { CheckboxGroupContext } from \"./context\";\nimport type { CheckboxGroupProps } from \"./types\";\n\n/\n A container managing a set of related [`Checkbox`](src/components/Input/Checkbox/Checkbox.tsx) controls.\n \n Coordinates group selection values, accessible group labels, helper descriptions,\n * and error validation messages.\n \n @example\n * ```tsx\n * import { CheckboxGroup, Checkbox } from \"@adgytec/web-ui-components\";\n \n <CheckboxGroup label=\"Notification Preferences\">\n * <Checkbox value=\"email\">Email</Checkbox>\n * <Checkbox value=\"sms\">SMS</Checkbox>\n * <Checkbox value=\"push\">Push notifications</Checkbox>\n * </CheckboxGroup>\n * ```\n */\nexport const CheckboxGroup: React.FC<CheckboxGroupProps> = ({\n label,\n description,\n errorMessage,\n children,\n className,\n labelPlacement,\n showDescriptionOnInvalid = false,\n ...props\n}) => {\n return (\n <CheckboxGroupContext value={{ labelPlacement }}>\n <AriaCheckboxGroup\n className={(renderProps) =>\n clsx(\n styles[\"checkbox-group\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n >\n {({ isInvalid }) => {\n const showDescription =\n description &&\n (!isInvalid \|\| (isInvalid && showDescriptionOnInvalid));\n\n return (\n <>\n {label && <Label>{label}</Label>}\n\n {children}\n\n {showDescription && (\n <Description>{description}</Description>\n )}\n <FieldError>{errorMessage}</FieldError>\n </>\n );\n }}\n </AriaCheckboxGroup>\n </CheckboxGroupContext>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;A,GCcakB,IAAuBC,EAChC,CAAC,CACL,GCmBaC,KAAoC,MAAA;CAAA,IAAAC,KAAA,GAAArB,EAAAA,EAAAA,CAAA,EAAA,GAAAsB,GAAAC,GAAAC;CAAA,AAAAH,EAAA,OAAAI,KAIhD,IAAAJ,EAAA,IAAA,IAAAA,EAAA,IAAA,IAAAA,EAAA,OAJiD,iCAAA,GAAAG,KAAAC,GAIjD,EAAA,KAAAA,GAAA,EAAA,KAAAH,GAAA,EAAA,KAAAC,GAAA,EAAA,KAAAC;CACG,IAAA,EAAA,gBAAAE,MACIC,EAAWT,CAAoB,GACnCU,IAAkBL,KAAAG,KAAA,OAA+CG;CAAA,AAAAR,EAAA,OAAAC,KAAAD,EAAA,OAAAO,KAIxD,KAAA,MAAA;EACG,IAAAE,IACI,OAAOR,KAAa,aACdA,EAASS,CACF,IAFbT;EAEe,OAGf,kBAACU,GAAD;GACe,WAAA/B,EACPC,EAAM,UACNU,EAAU,UACd;GAEC,WAAA,MAAA;IACG,IAAA,EAAA,eAAA,cAAA,eAAA,cAAA,mBAAA,cAAA,cAAA,uBASIqB,GAEJC,IAAkB;KAAA,iBACGC,KAAA,KAAA;KAAuB,gBACxBC,KAAA,KAAA;KAAsB,iBACrBC,KAAA,KAAA;KAAuB,gBACxBC,KAAA,KAAA;KAAsB,sBAElCC,KAAA,KAAA;KAA2B,gBACfC,KAAA,KAAA;KAAsB,gBACtBC,KAAA,KAAA;KAAsB,sBAElCC,KAAA,KAAA;KAA4B,eAE5BP,KAAAO,KAAA,KAAA;IACR;IAAE,OAGE,kBAAAvC,GAAA,EAAA,UAAA;KACKyB,MAAc,WAAdE;KAED,kBAAA,QAAA;MACe,WAAA7B,EACPC,EAAM,WACN0C,CACJ;MAAC,GACGV;MAEJ,UAAA,kBAAA,OAAA;OACY,SAAA;OACI,eAAA;OAMD,WAAAhC,EAAM;OAAO,GACpBgC;OAEH,UAAAQ,IACG,kBAAA,QAAA;QACO,GAAA;QACA,GAAA;QACI,OAAA;QACC,QAAA;OAAC,CAAA,IAGb,kBAAA,YAAA,EAAiB,QAAA,gBAAe,CAAA;MAElC,GAjBEA,IAAA,kBAAA,OAiBF;KACH,CAAA;KAENd,MAAc,SAAdE;IAA4B,EAAA,CAAA;GAC9B;EArEA,CAAA;CAwEE,GAExB,EAAA,KAAAR,GAAA,EAAA,KAAAM,GAAA,EAAA,KAAAC,KAAA,IAAAR,EAAA;CAAA,IAAAwB;CACW,OADXxB,EAAA,OAAAG,KAAAH,EAAA,OAAAQ,KAlFL,IAAA,kBAACiB,GAAD;EAAc,GAAKtB;EAAO,iBAAA;EACrB,UAAAK;CADS,CAAA,GAmFE,EAAA,KAAAL,GAAA,EAAA,KAAAK,GAAA,EAAA,KAAAgB,KAAA,IAAAxB,EAAA,IAnFhBwB;AAmFgB,GCtGXzC,KAA+C,EACxD,UACA,gBACA,iBACA,aACA,cACA,mBACA,8BAA2B,IAC3B,GAAGoB,QAGC,kBAACN,GAAD;CAAsB,OAAO,EAAE,kBAAe;CAC1C,UAAA,kBAACb,GAAD;EACI,YAAY,MACRC,EACIC,EAAO,mBACP,OAAO0C,KAAc,aACfA,EAAUlB,CAAW,IACrBkB,CACV;EAEJ,GAAIzB;EAEF,WAAA,EAAE,mBAMI,kBAAAhB,GAAA,EAAA,UAAA;GACKsB,KAAS,kBAACrB,GAAD,EAAA,UAAQqB,EAAa,CAAA;GAE9BR;GAPL4B,MACC,CAACT,KAAcA,KAAaU,MASrB,kBAACC,GAAD,EAAA,UAAcF,EAAyB,CAAA;GAE3C,kBAACxC,GAAD,EAAA,UAAa2C,EAAyB,CAAA;EAC1C,EAAA,CAAA;CAGO,CAAA;AACD,CAAA"}

package/dist/chunks/Input2 CHANGED Viewed

@@ -13,7 +13,7 @@ import v from "clsx";
 import { cloneElement as y, isValidElement as b, useCallback as x, useMemo as S, useRef as C } from "react";
 import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
 import { Input as D, TextField as O } from "react-aria-components";
-import '../assets/Input2.css';//#region node_modules/react-aria/dist/private/utils/useObjectRef.mjs
+import '../assets/Input2.css';// node_modules/react-aria/dist/private/utils/useObjectRef.mjs
 function k(e) {
 	let t = C(null), n = C(void 0), r = x((t) => {
 		if (typeof e == "function") {
@@ -35,8 +35,7 @@ function k(e) {
 		}
 	}), [r]);
 }
-//#endregion
-//#region src/components/Input/Input/input.module.css
+// src/components/Input/Input/input.module.css
 var A = e(), j = { button: "_button_650ys_2" }, M = (e) => {
 	let t = (0, A.c)(10), n, i, a;
 	t[0] === e ? (n = t[1], i = t[2], a = t[3]) : ({icon: i, className: n, ...a} = e, t[0] = e, t[1] = n, t[2] = i, t[3] = a);
@@ -52,16 +51,14 @@ var A = e(), j = { button: "_button_650ys_2" }, M = (e) => {
 		...a
 	}), t[6] = i, t[7] = a, t[8] = o, t[9] = s) : s = t[9], s;
 };
-//#endregion
-//#region src/components/Input/Input/handleInputButton.ts
+// src/components/Input/Input/handleInputButton.ts
 function N({ node: e, isInvalid: t, isDisabled: n }) {
 	return !b(e) || e.type !== M ? e : y(e, {
 		"data-invalid": t || void 0,
 		isDisabled: n
 	});
 }
-//#endregion
-//#region src/components/Input/Input/Input.tsx
+// src/components/Input/Input/Input.tsx
 var P = ({ label: e, description: r, errorMessage: y, showDescriptionOnInvalid: b = !1, placeholder: x, editorDir: S, prefix: C, suffix: A, leadingIcon: j, trailing: M, className: P, showCharacterCount: F, maxLength: I, value: L, defaultValue: R, ref: z, onChange: B, ...V }) => {
 	let H = k(z), { currentValue: U, setValue: W } = _({
 		value: L,
@@ -159,7 +156,6 @@ var P = ({ label: e, description: r, errorMessage: y, showDescriptionOnInvalid:
 		}
 	});
 };
-//#endregion
 export { M as n, P as t };
 //# sourceMappingURL=Input2.map

package/dist/chunks/Input2.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input2","names":["$i6EpZ$useRef","$i6EpZ$useCallback","$i6EpZ$useMemo","icon","_c","clsx","styles","Input","useObjectRef","useFocusRing","useHover","AriaTextField","clsx","_Fragment","Label","AriaInput","FieldError","require_compiler_runtime","Icon","FieldError$1","Label$1","EditorInputGroupStyles","UnsetStyles","SupportingTextStyles","Colors","EditorInputStyles","EditorStyles","$0c4a58759813079a$export$4e328f61c538687f","$e969f22b6713ca4a$export$ae780daf29e6d456","clsx$1","$03e8ab2d84d7657a$export$4338b53315abf666","objRef","useRef","cleanupRef","refEffect","useCallback","ref","refCallback","refCleanup","instance","useMemo","value","import_compiler_runtime","input_module_default","InputButton","$","className","icon","props","t0","t1","renderProps","t2","IconButton","addStateAttrsToInputButton","isValidElement","node","cloneElement","isInvalid","Input$1","hasCharacterCount","inputRef","useControllableState","layoutDataAttrs","trailing","leadingIcon","TextField","InputGroupStyles","currentValue","setValue","dataAttrs","isHovered","isFocused","isFocusVisible","isDisabled","hasDescription","description","showDescriptionOnInvalid","Fragment","label","target","hoverProps","typography","prefix","Input","focusProps","editorDir","suffix","Description","CharacterCount","errorMessage"],"sources":["../../node_modules/react-aria/dist/private/utils/useObjectRef.mjs","../../src/components/Input/Input/input.module.css","../../src/components/Input/Input/InputButton.tsx","../../src/components/Input/Input/handleInputButton.ts","../../src/components/Input/Input/Input.tsx"],"sourcesContent":["import {useRef as $i6EpZ$useRef, useCallback as $i6EpZ$useCallback, useMemo as $i6EpZ$useMemo} from \"react\";\n\n/\n Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n / \nfunction $03e8ab2d84d7657a$export$4338b53315abf666(ref) {\n const objRef = (0, $i6EpZ$useRef)(null);\n const cleanupRef = (0, $i6EpZ$useRef)(undefined);\n const refEffect = (0, $i6EpZ$useCallback)((instance)=>{\n if (typeof ref === 'function') {\n const refCallback = ref;\n const refCleanup = refCallback(instance);\n return ()=>{\n if (typeof refCleanup === 'function') refCleanup();\n else refCallback(null);\n };\n } else if (ref) {\n // oxlint-disable-next-line react/react-compiler\n ref.current = instance;\n return ()=>{\n ref.current = null;\n };\n }\n }, [\n ref\n ]);\n return (0, $i6EpZ$useMemo)(()=>({\n get current () {\n return objRef.current;\n },\n set current (value){\n objRef.current = value;\n if (cleanupRef.current) {\n cleanupRef.current();\n cleanupRef.current = undefined;\n }\n if (value != null) cleanupRef.current = refEffect(value);\n }\n }), // oxlint-disable-next-line react/react-compiler\n [\n refEffect\n ]);\n}\n\n\nexport {$03e8ab2d84d7657a$export$4338b53315abf666 as useObjectRef};\n//# sourceMappingURL=useObjectRef.mjs.map\n","@layer adgytec.overrides {\n .button[data-invalid] {\n --md-button-color: var(--group-color);\n }\n}\n","import clsx from \"clsx\";\nimport { IconButton, type IconButtonProps } from \"@/components/Button\";\nimport styles from \"./input.module.css\";\n\n/\n Props for the {@link InputButton} component.\n * Extends {@link IconButtonProps} omitting fixed size, color, and width configurations.\n /\nexport interface InputButtonProps\n extends Omit<IconButtonProps, \"color\" \| \"size\" \| \"width\"> {}\n\n/\n An action button tailored for placement within an {@link Input} container (e.g. password visibility toggle, clear button).\n /\nexport const InputButton: React.FC<InputButtonProps> = ({\n icon,\n className,\n ...props\n}) => {\n return (\n <IconButton\n className={(renderProps) =>\n clsx(\n styles[\"button\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n icon={icon}\n color=\"standard\"\n size=\"small\"\n width=\"default\"\n {...props}\n />\n );\n};\n","import { cloneElement, isValidElement, type ReactNode } from \"react\";\nimport { InputButton } from \"./InputButton\";\n\ntype InputButtonElementProps = React.ComponentProps<typeof InputButton> & {\n \"data-invalid\"?: boolean;\n};\n\n/\n Injects input validation and disabled states into child {@link InputButton} elements.\n \n @param params - Configuration containing `node`, `isInvalid`, and `isDisabled`.\n * @returns Cloned element with attached state data attributes, or the original node if not an InputButton.\n /\nexport function addStateAttrsToInputButton({\n node,\n isInvalid,\n isDisabled,\n}: {\n node: ReactNode;\n isInvalid: boolean;\n isDisabled: boolean;\n}) {\n if (!isValidElement<InputButtonElementProps>(node)) {\n return node;\n }\n\n if (node.type !== InputButton) return node;\n\n return cloneElement(node, {\n \"data-invalid\": isInvalid \|\| undefined,\n isDisabled,\n });\n}\n","import clsx from \"clsx\";\nimport { useFocusRing } from \"react-aria/useFocusRing\";\nimport { useHover } from \"react-aria/useHover\";\nimport { useObjectRef } from \"react-aria/useObjectRef\";\nimport {\n Input as AriaInput,\n TextField as AriaTextField,\n} from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { typography } from \"@/utils\";\nimport { CharacterCount } from \"../CharacterCount\";\nimport {\n Colors,\n EditorInputGroupStyles,\n EditorInputStyles,\n EditorStyles,\n InputGroupStyles,\n SupportingTextStyles,\n TextFieldIconSize,\n UnsetStyles,\n} from \"../core\";\nimport { Description } from \"../Description\";\nimport { FieldError } from \"../FieldError\";\nimport { useControllableState } from \"../hooks\";\nimport { Label } from \"../Label\";\nimport { addStateAttrsToInputButton } from \"./handleInputButton\";\nimport type { InputProps } from \"./types\";\n\n/\n A single-line text input field implementing Material Design 3 Text Field guidelines.\n \n Supports accessible labels, helper descriptions, error messages, prefix/suffix text,\n * leading icons, trailing actions via {@link InputButton}, and character counter indicators.\n \n @example\n * ```tsx\n * import { Input, InputButton } from '@adgytec/web-ui-components';\n * import { Eye, Mail } from 'lucide-react';\n \n // Basic text input with label and helper text\n * <Input\n * label=\"Email Address\"\n * placeholder=\"user@example.com\"\n * leadingIcon={Mail}\n * description=\"We'll never share your email.\"\n * />\n \n // Password field with trailing visibility button\n * <Input\n * label=\"Password\"\n * type=\"password\"\n * trailing={<InputButton icon={Eye} onPress={() => {}} />}\n * />\n * ```\n /\nexport const Input: React.FC<InputProps> = ({\n label,\n description,\n errorMessage,\n showDescriptionOnInvalid = false,\n placeholder,\n editorDir,\n prefix,\n suffix,\n leadingIcon,\n trailing,\n className,\n showCharacterCount: hasCharacterCount,\n maxLength,\n value,\n defaultValue,\n ref,\n onChange,\n ...props\n}) => {\n const inputRef = useObjectRef(ref);\n\n const { currentValue, setValue } = useControllableState({\n value,\n defaultValue,\n onChange,\n });\n\n const { isFocused, isFocusVisible, focusProps } = useFocusRing();\n const { isHovered, hoverProps } = useHover({});\n\n const layoutDataAttrs = {\n \"data-trailing\": trailing ? true : undefined,\n \"data-leading\": leadingIcon ? true : undefined,\n };\n\n return (\n <AriaTextField\n className={(renderProps) =>\n clsx(\n Colors,\n InputGroupStyles,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n maxLength={maxLength}\n value={currentValue}\n defaultValue={defaultValue}\n onChange={setValue}\n {...props}\n {...layoutDataAttrs}\n >\n {({ isDisabled, isInvalid }) => {\n const dataAttrs = {\n ...layoutDataAttrs,\n \"data-hovered\": isHovered \|\| undefined,\n \"data-focused\": isFocused \|\| undefined,\n \"data-focus-visible\": isFocusVisible \|\| undefined,\n \"data-disabled\": isDisabled \|\| undefined,\n \"data-invalid\": isInvalid \|\| undefined,\n };\n\n const hasDescription =\n description &&\n (!isInvalid \|\| (isInvalid && showDescriptionOnInvalid));\n\n return (\n <>\n {label && <Label>{label}</Label>}\n\n <span\n onPointerDown={(e) => {\n const target = e.target as HTMLElement;\n\n if (\n inputRef.current?.contains(target) \|\|\n target.closest(\"button, a, [role='button']\")\n ) {\n return;\n }\n\n e.preventDefault();\n inputRef.current?.focus();\n }}\n {...hoverProps}\n {...dataAttrs}\n className={clsx(EditorStyles)}\n data-input={true}\n >\n {leadingIcon && (\n <Icon\n icon={leadingIcon}\n size={TextFieldIconSize}\n />\n )}\n <span\n className={clsx(\n EditorInputGroupStyles,\n typography.bodyLarge\n )}\n >\n {prefix && typeof prefix === \"function\"\n ? prefix({ isDisabled, isInvalid })\n : prefix}\n <AriaInput\n ref={inputRef}\n className={clsx(\n UnsetStyles,\n EditorInputStyles,\n typography.bodyLarge\n )}\n {...focusProps}\n placeholder={placeholder}\n dir={editorDir}\n data-input={true}\n />\n {suffix && typeof suffix === \"function\"\n ? suffix({ isDisabled, isInvalid })\n : suffix}\n </span>\n\n {trailing && typeof trailing === \"function\"\n ? trailing({ isDisabled, isInvalid })\n : addStateAttrsToInputButton({\n node: trailing,\n isDisabled,\n isInvalid,\n })}\n </span>\n\n {hasDescription && (\n <span\n {...layoutDataAttrs}\n className={clsx(SupportingTextStyles)}\n >\n <Description>{description}</Description>\n\n {hasCharacterCount && (\n <CharacterCount\n count={currentValue.length}\n maxLength={maxLength}\n />\n )}\n </span>\n )}\n\n {!hasDescription && hasCharacterCount && (\n <span\n {...layoutDataAttrs}\n className={clsx(SupportingTextStyles)}\n >\n <FieldError>{errorMessage}</FieldError>\n\n <CharacterCount\n count={currentValue.length}\n maxLength={maxLength}\n />\n </span>\n )}\n\n {/ Error placement */}\n {hasDescription \|\| !hasCharacterCount ? (\n <FieldError className={clsx(SupportingTextStyles)}>\n {errorMessage}\n </FieldError>\n ) : null}\n </>\n );\n }}\n </AriaTextField>\n );\n};\n"],"ignoreList":[0],"mappings":"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"}
1	+ {"version":3,"file":"Input2","names":["$i6EpZ$useRef","$i6EpZ$useCallback","$i6EpZ$useMemo","icon","_c","clsx","styles","Input","useObjectRef","useFocusRing","useHover","AriaTextField","clsx","_Fragment","Label","AriaInput","FieldError","require_compiler_runtime","Icon","FieldError$1","Label$1","EditorInputGroupStyles","UnsetStyles","SupportingTextStyles","Colors","EditorInputStyles","EditorStyles","$0c4a58759813079a$export$4e328f61c538687f","$e969f22b6713ca4a$export$ae780daf29e6d456","clsx$1","$03e8ab2d84d7657a$export$4338b53315abf666","objRef","useRef","cleanupRef","refEffect","useCallback","ref","refCallback","refCleanup","instance","useMemo","value","import_compiler_runtime","input_module_default","InputButton","$","className","icon","props","t0","t1","renderProps","t2","IconButton","addStateAttrsToInputButton","isValidElement","node","cloneElement","isInvalid","Input$1","hasCharacterCount","inputRef","useControllableState","layoutDataAttrs","trailing","leadingIcon","TextField","InputGroupStyles","currentValue","setValue","dataAttrs","isHovered","isFocused","isFocusVisible","isDisabled","hasDescription","description","showDescriptionOnInvalid","Fragment","label","target","hoverProps","typography","prefix","Input","focusProps","editorDir","suffix","Description","CharacterCount","errorMessage"],"sources":["../../node_modules/react-aria/dist/private/utils/useObjectRef.mjs","../../src/components/Input/Input/input.module.css","../../src/components/Input/Input/InputButton.tsx","../../src/components/Input/Input/handleInputButton.ts","../../src/components/Input/Input/Input.tsx"],"sourcesContent":["import {useRef as $i6EpZ$useRef, useCallback as $i6EpZ$useCallback, useMemo as $i6EpZ$useMemo} from \"react\";\n\n/\n Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n / \nfunction $03e8ab2d84d7657a$export$4338b53315abf666(ref) {\n const objRef = (0, $i6EpZ$useRef)(null);\n const cleanupRef = (0, $i6EpZ$useRef)(undefined);\n const refEffect = (0, $i6EpZ$useCallback)((instance)=>{\n if (typeof ref === 'function') {\n const refCallback = ref;\n const refCleanup = refCallback(instance);\n return ()=>{\n if (typeof refCleanup === 'function') refCleanup();\n else refCallback(null);\n };\n } else if (ref) {\n // oxlint-disable-next-line react/react-compiler\n ref.current = instance;\n return ()=>{\n ref.current = null;\n };\n }\n }, [\n ref\n ]);\n return (0, $i6EpZ$useMemo)(()=>({\n get current () {\n return objRef.current;\n },\n set current (value){\n objRef.current = value;\n if (cleanupRef.current) {\n cleanupRef.current();\n cleanupRef.current = undefined;\n }\n if (value != null) cleanupRef.current = refEffect(value);\n }\n }), // oxlint-disable-next-line react/react-compiler\n [\n refEffect\n ]);\n}\n\n\nexport {$03e8ab2d84d7657a$export$4338b53315abf666 as useObjectRef};\n//# sourceMappingURL=useObjectRef.mjs.map\n","@layer adgytec.overrides {\n .button[data-invalid] {\n --md-button-color: var(--group-color);\n }\n}\n","import clsx from \"clsx\";\nimport { IconButton, type IconButtonProps } from \"@/components/Button\";\nimport styles from \"./input.module.css\";\n\n/\n Props for the {@link InputButton} component.\n * Extends {@link IconButtonProps} omitting fixed size, color, and width configurations.\n /\nexport interface InputButtonProps\n extends Omit<IconButtonProps, \"color\" \| \"size\" \| \"width\"> {}\n\n/\n An action button tailored for placement within an {@link Input} container (e.g. password visibility toggle, clear button).\n /\nexport const InputButton: React.FC<InputButtonProps> = ({\n icon,\n className,\n ...props\n}) => {\n return (\n <IconButton\n className={(renderProps) =>\n clsx(\n styles[\"button\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n icon={icon}\n color=\"standard\"\n size=\"small\"\n width=\"default\"\n {...props}\n />\n );\n};\n","import { cloneElement, isValidElement, type ReactNode } from \"react\";\nimport { InputButton } from \"./InputButton\";\n\ntype InputButtonElementProps = React.ComponentProps<typeof InputButton> & {\n \"data-invalid\"?: boolean;\n};\n\n/\n Injects input validation and disabled states into child {@link InputButton} elements.\n \n @param params - Configuration containing `node`, `isInvalid`, and `isDisabled`.\n * @returns Cloned element with attached state data attributes, or the original node if not an InputButton.\n /\nexport function addStateAttrsToInputButton({\n node,\n isInvalid,\n isDisabled,\n}: {\n node: ReactNode;\n isInvalid: boolean;\n isDisabled: boolean;\n}) {\n if (!isValidElement<InputButtonElementProps>(node)) {\n return node;\n }\n\n if (node.type !== InputButton) return node;\n\n return cloneElement(node, {\n \"data-invalid\": isInvalid \|\| undefined,\n isDisabled,\n });\n}\n","import clsx from \"clsx\";\nimport { useFocusRing } from \"react-aria/useFocusRing\";\nimport { useHover } from \"react-aria/useHover\";\nimport { useObjectRef } from \"react-aria/useObjectRef\";\nimport {\n Input as AriaInput,\n TextField as AriaTextField,\n} from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { typography } from \"@/utils\";\nimport { CharacterCount } from \"../CharacterCount\";\nimport {\n Colors,\n EditorInputGroupStyles,\n EditorInputStyles,\n EditorStyles,\n InputGroupStyles,\n SupportingTextStyles,\n TextFieldIconSize,\n UnsetStyles,\n} from \"../core\";\nimport { Description } from \"../Description\";\nimport { FieldError } from \"../FieldError\";\nimport { useControllableState } from \"../hooks\";\nimport { Label } from \"../Label\";\nimport { addStateAttrsToInputButton } from \"./handleInputButton\";\nimport type { InputProps } from \"./types\";\n\n/\n A single-line text input field implementing Material Design 3 Text Field guidelines.\n \n Supports accessible labels, helper descriptions, error messages, prefix/suffix text,\n * leading icons, trailing actions via {@link InputButton}, and character counter indicators.\n \n @example\n * ```tsx\n * import { Input, InputButton } from '@adgytec/web-ui-components';\n * import { Eye, Mail } from 'lucide-react';\n \n // Basic text input with label and helper text\n * <Input\n * label=\"Email Address\"\n * placeholder=\"user@example.com\"\n * leadingIcon={Mail}\n * description=\"We'll never share your email.\"\n * />\n \n // Password field with trailing visibility button\n * <Input\n * label=\"Password\"\n * type=\"password\"\n * trailing={<InputButton icon={Eye} onPress={() => {}} />}\n * />\n * ```\n /\nexport const Input: React.FC<InputProps> = ({\n label,\n description,\n errorMessage,\n showDescriptionOnInvalid = false,\n placeholder,\n editorDir,\n prefix,\n suffix,\n leadingIcon,\n trailing,\n className,\n showCharacterCount: hasCharacterCount,\n maxLength,\n value,\n defaultValue,\n ref,\n onChange,\n ...props\n}) => {\n const inputRef = useObjectRef(ref);\n\n const { currentValue, setValue } = useControllableState({\n value,\n defaultValue,\n onChange,\n });\n\n const { isFocused, isFocusVisible, focusProps } = useFocusRing();\n const { isHovered, hoverProps } = useHover({});\n\n const layoutDataAttrs = {\n \"data-trailing\": trailing ? true : undefined,\n \"data-leading\": leadingIcon ? true : undefined,\n };\n\n return (\n <AriaTextField\n className={(renderProps) =>\n clsx(\n Colors,\n InputGroupStyles,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n maxLength={maxLength}\n value={currentValue}\n defaultValue={defaultValue}\n onChange={setValue}\n {...props}\n {...layoutDataAttrs}\n >\n {({ isDisabled, isInvalid }) => {\n const dataAttrs = {\n ...layoutDataAttrs,\n \"data-hovered\": isHovered \|\| undefined,\n \"data-focused\": isFocused \|\| undefined,\n \"data-focus-visible\": isFocusVisible \|\| undefined,\n \"data-disabled\": isDisabled \|\| undefined,\n \"data-invalid\": isInvalid \|\| undefined,\n };\n\n const hasDescription =\n description &&\n (!isInvalid \|\| (isInvalid && showDescriptionOnInvalid));\n\n return (\n <>\n {label && <Label>{label}</Label>}\n\n <span\n onPointerDown={(e) => {\n const target = e.target as HTMLElement;\n\n if (\n inputRef.current?.contains(target) \|\|\n target.closest(\"button, a, [role='button']\")\n ) {\n return;\n }\n\n e.preventDefault();\n inputRef.current?.focus();\n }}\n {...hoverProps}\n {...dataAttrs}\n className={clsx(EditorStyles)}\n data-input={true}\n >\n {leadingIcon && (\n <Icon\n icon={leadingIcon}\n size={TextFieldIconSize}\n />\n )}\n <span\n className={clsx(\n EditorInputGroupStyles,\n typography.bodyLarge\n )}\n >\n {prefix && typeof prefix === \"function\"\n ? prefix({ isDisabled, isInvalid })\n : prefix}\n <AriaInput\n ref={inputRef}\n className={clsx(\n UnsetStyles,\n EditorInputStyles,\n typography.bodyLarge\n )}\n {...focusProps}\n placeholder={placeholder}\n dir={editorDir}\n data-input={true}\n />\n {suffix && typeof suffix === \"function\"\n ? suffix({ isDisabled, isInvalid })\n : suffix}\n </span>\n\n {trailing && typeof trailing === \"function\"\n ? trailing({ isDisabled, isInvalid })\n : addStateAttrsToInputButton({\n node: trailing,\n isDisabled,\n isInvalid,\n })}\n </span>\n\n {hasDescription && (\n <span\n {...layoutDataAttrs}\n className={clsx(SupportingTextStyles)}\n >\n <Description>{description}</Description>\n\n {hasCharacterCount && (\n <CharacterCount\n count={currentValue.length}\n maxLength={maxLength}\n />\n )}\n </span>\n )}\n\n {!hasDescription && hasCharacterCount && (\n <span\n {...layoutDataAttrs}\n className={clsx(SupportingTextStyles)}\n >\n <FieldError>{errorMessage}</FieldError>\n\n <CharacterCount\n count={currentValue.length}\n maxLength={maxLength}\n />\n </span>\n )}\n\n {/ Error placement */}\n {hasDescription \|\| !hasCharacterCount ? (\n <FieldError className={clsx(SupportingTextStyles)}>\n {errorMessage}\n </FieldError>\n ) : null}\n </>\n );\n }}\n </AriaTextField>\n );\n};\n"],"ignoreList":[0],"mappings":"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"}

package/dist/chunks/ListAction CHANGED Viewed

@@ -7,7 +7,6 @@ import '../assets/AppBarAction.css';var r = { action: "_action_106b8_2" }, i = (
 	color: i,
 	...o
 });
-//#endregion
 export { i as t };
 //# sourceMappingURL=ListAction.map

package/dist/chunks/ListAction.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListAction","names":["clsx","styles","clsx$1","listAction_module_default","ListAction","props","IconButton","\"action\"","className","renderProps"],"sources":["../../src/components/List/ListAction/listAction.module.css","../../src/components/List/ListAction/ListAction.tsx"],"sourcesContent":["@layer adgytec.comps {\n .action {\n inline-size: var(--md-sys-layout-space-48);\n block-size: var(--md-sys-layout-space-48);\n\n display: flex;\n align-items: center;\n justify-content: center;\n }\n}\n","import clsx from \"clsx\";\nimport { IconButton, type IconButtonProps } from \"@/components/Button\";\nimport styles from \"./listAction.module.css\";\n\n/*\n Props for the [`ListAction`](~~file:///home/rohan/work/adgytec/adgytec-web-ui-components/~~src/components/List/ListAction/ListAction.tsx) component.\n /\nexport interface ListActionProps extends Omit<IconButtonProps, \"size\"> {}\n\n/\n Pre-configured trailing action icon button for a [`ListItem`](~~file:///home/rohan/work/adgytec/adgytec-web-ui-components/~~src/components/List/ListItem/ListItem.tsx).\n \n Hardcodes `size=\"small\"` while ensuring a full 48px touch target area for accessibility,\n * defaulting to the `\"standard\"` icon button color style.\n \n @example\n * ```tsx\n * import { MoreVertical } from \"lucide-react\";\n \n <ListAction\n * icon={MoreVertical}\n * aria-label=\"More options\"\n * onPress={() => handleOpenMenu()}\n * />\n * ```\n */\nexport const ListAction: React.FC<ListActionProps> = ({\n color = \"standard\",\n className,\n ...props\n}) => {\n return (\n <IconButton\n className={(renderProps) =>\n clsx(\n styles[\"action\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n size=\"small\"\n color={color}\n {...props}\n />\n );\n};\n"],"mappings":";;;uCC0BaI,KAAyC,EAClD,WAAQ,YACR,cACA,GAAGC,QAGC,kBAACC,GAAD;CACI,YAAY,MACRN,EACIC,EAAOM,QACP,OAAOC,KAAc,aACfA,EAAUC,CAAW,IACrBD,CACV;CAEJ,MAAK;CACE;CACP,GAAIH;AAAM,CAAA"}
1	+ {"version":3,"file":"ListAction","names":["clsx","styles","clsx$1","listAction_module_default","ListAction","props","IconButton","\"action\"","className","renderProps"],"sources":["../../src/components/List/ListAction/listAction.module.css","../../src/components/List/ListAction/ListAction.tsx"],"sourcesContent":["@layer adgytec.comps {\n .action {\n inline-size: var(--md-sys-layout-space-48);\n block-size: var(--md-sys-layout-space-48);\n\n display: flex;\n align-items: center;\n justify-content: center;\n }\n}\n","import clsx from \"clsx\";\nimport { IconButton, type IconButtonProps } from \"@/components/Button\";\nimport styles from \"./listAction.module.css\";\n\n/*\n Props for the [`ListAction`](src/components/List/ListAction/ListAction.tsx) component.\n /\nexport interface ListActionProps extends Omit<IconButtonProps, \"size\"> {}\n\n/\n Pre-configured trailing action icon button for a [`ListItem`](src/components/List/ListItem/ListItem.tsx).\n \n Hardcodes `size=\"small\"` while ensuring a full 48px touch target area for accessibility,\n * defaulting to the `\"standard\"` icon button color style.\n \n @example\n * ```tsx\n * import { MoreVertical } from \"lucide-react\";\n \n <ListAction\n * icon={MoreVertical}\n * aria-label=\"More options\"\n * onPress={() => handleOpenMenu()}\n * />\n * ```\n */\nexport const ListAction: React.FC<ListActionProps> = ({\n color = \"standard\",\n className,\n ...props\n}) => {\n return (\n <IconButton\n className={(renderProps) =>\n clsx(\n styles[\"action\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n size=\"small\"\n color={color}\n {...props}\n />\n );\n};\n"],"mappings":";;;A,uCC0BaI,KAAyC,EAClD,WAAQ,YACR,cACA,GAAGC,QAGC,kBAACC,GAAD;CACI,YAAY,MACRN,EACIC,EAAOM,QACP,OAAOC,KAAc,aACfA,EAAUC,CAAW,IACrBD,CACV;CAEJ,MAAK;CACE;CACP,GAAIH;AAAM,CAAA"}

package/dist/chunks/ListAvatar CHANGED Viewed

@@ -2,7 +2,7 @@ import { t as e } from "./compiler-runtime";
 import { t } from "./base";
 import n from "clsx";
 import { jsx as r } from "react/jsx-runtime";
-import '../assets/ListAvatar.css';//#region src/components/List/ListAvatar/listAvatar.module.css
+import '../assets/ListAvatar.css';// src/components/List/ListAvatar/listAvatar.module.css
 var i = e(), a = { avatar: "_avatar_1wa68_9" }, o = (e) => {
 	let o = (0, i.c)(8), s, c;
 	o[0] === e ? (s = o[1], c = o[2]) : ({className: s, ...c} = e, o[0] = e, o[1] = s, o[2] = c);
@@ -14,7 +14,6 @@ var i = e(), a = { avatar: "_avatar_1wa68_9" }, o = (e) => {
 		...c
 	}), o[5] = c, o[6] = l, o[7] = u) : u = o[7], u;
 };
-//#endregion
 export { o as t };
 //# sourceMappingURL=ListAvatar.map

package/dist/chunks/ListAvatar.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListAvatar","names":["_c","clsx","styles","require_compiler_runtime","clsx$1","import_compiler_runtime","listAvatar_module_default","ListAvatar","$","className","props","t0","t1","typography","t2"],"sources":["../../src/components/List/ListAvatar/listAvatar.module.css","../../src/components/List/ListAvatar/ListAvatar.tsx"],"sourcesContent":["/* configurable tokens\n\n --md-list-avatar-background\n* --md-list-avatar-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .avatar {\n --_md-list-avatar-size: var(--md-sys-layout-space-40);\n\n --_md-list-avatar-background: var(\n --md-list-avatar-background,\n var(--md-sys-color-primary-container)\n );\n\n --_md-list-avatar-color: var(\n --md-list-avatar-color,\n var(--md-sys-color-on-primary-container)\n );\n\n --_md-list-color: var(--_md-list-avatar-color);\n\n inline-size: var(--_md-list-avatar-size);\n max-inline-size: var(--_md-list-avatar-size);\n\n block-size: var(--_md-list-avatar-size);\n max-block-size: var(--_md-list-avatar-size);\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n border-radius: 50%;\n overflow: clip;\n text-align: center;\n\n background-color: var(--_md-list-avatar-background);\n color: var(--_md-list-avatar-color);\n\n & img {\n inline-size: 100%;\n block-size: 100%;\n object-fit: cover;\n }\n }\n}\n","import clsx from \"clsx\";\nimport { typography } from \"@/utils\";\nimport styles from \"./listAvatar.module.css\";\n\n/\n Props for the [`ListAvatar`](~~file:///home/rohan/work/adgytec/adgytec-web-ui-components/~~src/components/List/ListAvatar/ListAvatar.tsx) component.\n /\nexport interface ListAvatarProps extends React.ComponentPropsWithRef<\"div\"> {}\n\n/\n Circular 40px avatar container for user initials or profile images inside a [`ListItem`](~~file:///home/rohan/work/adgytec/adgytec-web-ui-components/~~src/components/List/ListItem/ListItem.tsx).\n \n Automatically styles text content with Material Design 3 `titleMedium` typography,\n * and scales nested `<img>` elements with `object-fit: cover`.\n \n @example\n * ```tsx\n * // Initials avatar\n * <ListAvatar>JD</ListAvatar>\n \n // Image avatar\n * <ListAvatar>\n * <img src=\"/avatars/user.jpg\" alt=\"Jane Doe\" />\n * </ListAvatar>\n * ```\n */\nexport const ListAvatar: React.FC<ListAvatarProps> = ({\n className,\n ...props\n}) => {\n return (\n <div\n className={clsx(\n styles[\"avatar\"],\n typography.titleMedium,\n className\n )}\n {...props}\n />\n );\n};\n"],"mappings":";;;;;gDC0BaO,KAAwC,MAAA;CAAA,IAAAC,KAAA,GAAAR,EAAAA,EAAAA,CAAA,CAAA,GAAAS,GAAAC;CAAA,AAAAF,EAAA,OAAAG,KAGpD,IAAAH,EAAA,IAAA,IAAAA,EAAA,OAHqD,eAAA,GAAAE,KAAAC,GAGrD,EAAA,KAAAA,GAAA,EAAA,KAAAF,GAAA,EAAA,KAAAC;CAAA,IAAAE;CAAA,AAAAJ,EAAA,OAAAC,IAOY,IAAAD,EAAA,MAJU,IAAAP,EACPC,EAAM,QACNW,EAAU,aACVJ,CACJ,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAG;CAAA,IAAAE;CAEH,OAFGN,EAAA,OAAAE,KAAAF,EAAA,OAAAI,KALL,IAAA,kBAAA,OAAA;EACe,WAAAA;EAIV,GACGF;CAAK,CAAA,GACX,EAAA,KAAAA,GAAA,EAAA,KAAAE,GAAA,EAAA,KAAAE,KAAA,IAAAN,EAAA,IAPFM;AAOE"}
1	+ {"version":3,"file":"ListAvatar","names":["_c","clsx","styles","require_compiler_runtime","clsx$1","import_compiler_runtime","listAvatar_module_default","ListAvatar","$","className","props","t0","t1","typography","t2"],"sources":["../../src/components/List/ListAvatar/listAvatar.module.css","../../src/components/List/ListAvatar/ListAvatar.tsx"],"sourcesContent":["/* configurable tokens\n\n --md-list-avatar-background\n* --md-list-avatar-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .avatar {\n --_md-list-avatar-size: var(--md-sys-layout-space-40);\n\n --_md-list-avatar-background: var(\n --md-list-avatar-background,\n var(--md-sys-color-primary-container)\n );\n\n --_md-list-avatar-color: var(\n --md-list-avatar-color,\n var(--md-sys-color-on-primary-container)\n );\n\n --_md-list-color: var(--_md-list-avatar-color);\n\n inline-size: var(--_md-list-avatar-size);\n max-inline-size: var(--_md-list-avatar-size);\n\n block-size: var(--_md-list-avatar-size);\n max-block-size: var(--_md-list-avatar-size);\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n border-radius: 50%;\n overflow: clip;\n text-align: center;\n\n background-color: var(--_md-list-avatar-background);\n color: var(--_md-list-avatar-color);\n\n & img {\n inline-size: 100%;\n block-size: 100%;\n object-fit: cover;\n }\n }\n}\n","import clsx from \"clsx\";\nimport { typography } from \"@/utils\";\nimport styles from \"./listAvatar.module.css\";\n\n/\n Props for the [`ListAvatar`](src/components/List/ListAvatar/ListAvatar.tsx) component.\n /\nexport interface ListAvatarProps extends React.ComponentPropsWithRef<\"div\"> {}\n\n/\n Circular 40px avatar container for user initials or profile images inside a [`ListItem`](src/components/List/ListItem/ListItem.tsx).\n \n Automatically styles text content with Material Design 3 `titleMedium` typography,\n * and scales nested `<img>` elements with `object-fit: cover`.\n \n @example\n * ```tsx\n * // Initials avatar\n * <ListAvatar>JD</ListAvatar>\n \n // Image avatar\n * <ListAvatar>\n * <img src=\"/avatars/user.jpg\" alt=\"Jane Doe\" />\n * </ListAvatar>\n * ```\n */\nexport const ListAvatar: React.FC<ListAvatarProps> = ({\n className,\n ...props\n}) => {\n return (\n <div\n className={clsx(\n styles[\"avatar\"],\n typography.titleMedium,\n className\n )}\n {...props}\n />\n );\n};\n"],"mappings":";;;;;A,gDC0BaO,KAAwC,MAAA;CAAA,IAAAC,KAAA,GAAAR,EAAAA,EAAAA,CAAA,CAAA,GAAAS,GAAAC;CAAA,AAAAF,EAAA,OAAAG,KAGpD,IAAAH,EAAA,IAAA,IAAAA,EAAA,OAHqD,eAAA,GAAAE,KAAAC,GAGrD,EAAA,KAAAA,GAAA,EAAA,KAAAF,GAAA,EAAA,KAAAC;CAAA,IAAAE;CAAA,AAAAJ,EAAA,OAAAC,IAOY,IAAAD,EAAA,MAJU,IAAAP,EACPC,EAAM,QACNW,EAAU,aACVJ,CACJ,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAG;CAAA,IAAAE;CAEH,OAFGN,EAAA,OAAAE,KAAAF,EAAA,OAAAI,KALL,IAAA,kBAAA,OAAA;EACe,WAAAA;EAIV,GACGF;CAAK,CAAA,GACX,EAAA,KAAAA,GAAA,EAAA,KAAAE,GAAA,EAAA,KAAAE,KAAA,IAAAN,EAAA,IAPFM;AAOE"}

package/dist/chunks/ListBox CHANGED Viewed

@@ -1,16 +1,19 @@
-import e from "clsx";
-import { jsx as t } from "react/jsx-runtime";
-import { ListBox as n } from "react-aria-components";
-import '../assets/ListBox.css';var r = {
+import { ListBoxConfigContext as e } from "../components/List/core/index.js";
+import t from "clsx";
+import { jsx as n } from "react/jsx-runtime";
+import { ListBox as r } from "react-aria-components";
+import '../assets/ListBox.css';var i = {
 	"list-box": "_list-box_gd8vc_2",
 	start: "_start_gd8vc_24",
 	center: "_center_gd8vc_28",
 	end: "_end_gd8vc_32"
-}, i = ({ alignY: i = "center", className: a, ...o }) => /* @__PURE__ */ t(n, {
-	className: (t) => e(r["list-box"], r[i], typeof a == "function" ? a(t) : a),
-	...o
+}, a = ({ alignY: a = "center", className: o, selectionIndicator: s, ...c }) => /* @__PURE__ */ n(e, {
+	value: { selectionIndicator: s },
+	children: /* @__PURE__ */ n(r, {
+		className: (e) => t(i["list-box"], i[a], typeof o == "function" ? o(e) : o),
+		...c
+	})
 });
-//#endregion
-export { i as t };
+export { a as t };
 //# sourceMappingURL=ListBox.map

package/dist/chunks/ListBox.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListBox","names":["ListBox","AriaListBox","clsx","styles","clsx$1","listBox_module_default","ListBox$1","props","ListBox","alignY","className","renderProps"],"sources":["../../src/components/List/ListBox/listBox.module.css","../../src/components/List/ListBox/ListBox.tsx"],"sourcesContent":["@layer adgytec.overrides {\n .list-box > [data-list-item]:first-child {\n border-start-start-radius: var(--_md-list-shape);\n border-start-end-radius: var(--_md-list-shape);\n }\n\n .list-box > [data-list-item]:last-child {\n border-end-start-radius: var(--_md-list-shape);\n border-end-end-radius: var(--_md-list-shape);\n }\n}\n\n@layer adgytec.comps {\n .list-box {\n --_md-list-shape: var(--md-sys-shape-corner-radius-large);\n --_md-list-spacing: calc(2 * var(--dp, 1px));\n\n display: grid;\n gap: var(--_md-list-spacing);\n\n border-radius: var(--_md-list-shape);\n }\n\n .start {\n --md-list-align-y: start;\n }\n\n .center {\n --md-list-align-y: center;\n }\n\n .end {\n --md-list-align-y: end;\n }\n}\n","import clsx from \"clsx\";\nimport { ListBox as AriaListBox } from \"react-aria-components\";\nimport styles from \"./listBox.module.css\";\nimport type { ListBoxProps } from \"./types\";\n\n/*\n Material Design 3 List container component.\n \n Coordinates vertical indexing of items, keyboard navigation, single/multiple selection,\n * ~~and~~ unified vertical alignment of ~~leading~~ ~~media~~, ~~text~~ ~~content,~~ ~~and~~ ~~trailing~~ ~~actions~~.\n \n @example\n * ```tsx\n * import {\n * ListBox,\n * ListItem,\n * ListIcon,\n * ListLabelText,\n * ListSupportingText,\n * } from \"@adgytec/web-ui-components\";\n * import { Mail } from \"lucide-react\";\n \n <ListBox selectionMode=\"single\">\n * <ListItem\n * id=\"inbox\"\n * leading={<ListIcon icon={Mail} />}\n * label={<ListLabelText>Inbox</ListLabelText>}\n * supporting={<ListSupportingText>2 unread messages</ListSupportingText>}\n * />\n * </ListBox>\n * ```\n */\nexport const ListBox = <T extends object>({\n alignY = \"center\",\n className,\n ...props\n}: ListBoxProps<T>) => {\n return (\n <AriaListBox\n className={(renderProps) =>\n clsx(\n styles[\"list-box\"],\n styles[alignY],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n />\n );\n};\n"],"mappings":"~~;;;;;;;;GCgCaA~~,KAA6B,EACtC,YAAS,UACT,cACA,GAAGO,QAGC,~~kBAACN~~,GAAD;~~CACI~~,YAAY,MACRC,EACIC,EAAO,aACPA,~~EAAOM~~,IACP,OAAOC,KAAc,aACfA,EAAUC,CAAW,IACrBD,CACV;~~CAEJ~~,~~GAAIH~~;~~AAAM~~,CAAA"}
1	+ {"version":3,"file":"ListBox","names":["ListBox","AriaListBox","clsx","styles","clsx$1","listBox_module_default","ListBox$1","props","ListBoxConfigContext","ListBox","alignY","className","renderProps"],"sources":["../../src/components/List/ListBox/listBox.module.css","../../src/components/List/ListBox/ListBox.tsx"],"sourcesContent":["@layer adgytec.overrides {\n .list-box > [data-list-item]:first-child {\n border-start-start-radius: var(--_md-list-shape);\n border-start-end-radius: var(--_md-list-shape);\n }\n\n .list-box > [data-list-item]:last-child {\n border-end-start-radius: var(--_md-list-shape);\n border-end-end-radius: var(--_md-list-shape);\n }\n}\n\n@layer adgytec.comps {\n .list-box {\n --_md-list-shape: var(--md-sys-shape-corner-radius-large);\n --_md-list-spacing: calc(2 * var(--dp, 1px));\n\n display: grid;\n gap: var(--_md-list-spacing);\n\n border-radius: var(--_md-list-shape);\n }\n\n .start {\n --md-list-align-y: start;\n }\n\n .center {\n --md-list-align-y: center;\n }\n\n .end {\n --md-list-align-y: end;\n }\n}\n","import clsx from \"clsx\";\nimport { ListBox as AriaListBox } from \"react-aria-components\";\nimport { ListBoxConfigContext } from \"../core\";\nimport styles from \"./listBox.module.css\";\nimport type { ListBoxProps } from \"./types\";\n\n/*\n Material Design 3 List container component.\n \n Coordinates vertical indexing of items, keyboard navigation, single/multiple selection,\n * unified vertical alignment of elements (`alignY`), and contextual selection indicator placement (`selectionIndicator`).\n \n @example\n * ```tsx\n * import {\n * ListBox,\n * ListItem,\n * ListIcon,\n * ListLabelText,\n * ListSupportingText,\n * } from \"@adgytec/web-ui-components\";\n * import { Mail } from \"lucide-react\";\n \n <ListBox selectionMode=\"single\" selectionIndicator=\"leading\">\n * <ListItem\n * id=\"inbox\"\n * leading={<ListIcon icon={Mail} />}\n * label={<ListLabelText>Inbox</ListLabelText>}\n * supporting={<ListSupportingText>2 unread messages</ListSupportingText>}\n * />\n * </ListBox>\n * ```\n */\nexport const ListBox = <T extends object>({\n alignY = \"center\",\n className,\n selectionIndicator,\n ...props\n}: ListBoxProps<T>) => {\n return (\n <ListBoxConfigContext value={{ selectionIndicator }}>\n <AriaListBox\n className={(renderProps) =>\n clsx(\n styles[\"list-box\"],\n styles[alignY],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n />\n </ListBoxConfigContext>\n );\n};\n"],"mappings":";;;;;;;;;A,GCiCaA,KAA6B,EACtC,YAAS,UACT,cACA,uBACA,GAAGO,QAGC,kBAACC,GAAD;CAAsB,OAAO,EAAE,sBAAmB;CAC9C,UAAA,kBAACP,GAAD;EACI,YAAY,MACRC,EACIC,EAAO,aACPA,EAAOO,IACP,OAAOC,KAAc,aACfA,EAAUC,CAAW,IACrBD,CACV;EAEJ,GAAIJ;CAAM,CAAA;AAEI,CAAA"}

package/dist/chunks/ListIcon CHANGED Viewed

@@ -2,7 +2,7 @@ import { t as e } from "./compiler-runtime";
 import { t } from "./Icon";
 import n from "clsx";
 import { jsx as r } from "react/jsx-runtime";
-import '../assets/ListIcon.css';//#region src/components/List/ListIcon/listIcon.module.css
+import '../assets/ListIcon.css';// src/components/List/ListIcon/listIcon.module.css
 var i = e(), a = { icon: "_icon_877ov_2" }, o = (e) => {
 	let o = (0, i.c)(8), s, c;
 	o[0] === e ? (s = o[1], c = o[2]) : ({className: s, ...c} = e, o[0] = e, o[1] = s, o[2] = c);
@@ -15,7 +15,6 @@ var i = e(), a = { icon: "_icon_877ov_2" }, o = (e) => {
 		...c
 	}), o[5] = c, o[6] = l, o[7] = u) : u = o[7], u;
 };
-//#endregion
 export { o as t };
 //# sourceMappingURL=ListIcon.map

package/dist/chunks/ListIcon.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListIcon","names":["_c","clsx","styles","require_compiler_runtime","clsx$1","import_compiler_runtime","listIcon_module_default","ListIcon","$","className","props","t0","t1","t2","Icon"],"sources":["../../src/components/List/ListIcon/listIcon.module.css","../../src/components/List/ListIcon/ListIcon.tsx"],"sourcesContent":["@layer adgytec.comps {\n .icon {\n color: var(--_md-list-color);\n\n transition: color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n}\n","import clsx from \"clsx\";\nimport { Icon } from \"@/components/Icon\";\nimport styles from \"./listIcon.module.css\";\n\n/*\n Props for the [`ListIcon`](~~file:///home/rohan/work/adgytec/adgytec-web-ui-components/~~src/components/List/ListIcon/ListIcon.tsx) component.\n /\nexport interface ListIconProps\n extends Omit<\n React.ComponentPropsWithRef<typeof Icon>,\n \"size\" \| \"withText\"\n > {}\n\n/\n Standardized leading icon component for a [`ListItem`](~~file:///home/rohan/work/adgytec/adgytec-web-ui-components/~~src/components/List/ListItem/ListItem.tsx).\n \n Hardcodes a standard 20px dimension while dynamically inheriting the list item's\n * text and interaction state colors.\n \n @example\n * ```tsx\n * import { Mail } from \"lucide-react\";\n \n <ListIcon icon={Mail} />\n * ```\n */\nexport const ListIcon: React.FC<ListIconProps> = ({ className, ...props }) => {\n return (\n <Icon\n className={clsx(styles[\"icon\"], className)}\n size={20}\n {...props}\n />\n );\n};\n"],"mappings":";;;;;4CC0BaO,KAAoC,MAAA;CAAA,IAAAC,KAAA,GAAAR,EAAAA,EAAAA,CAAA,CAAA,GAAAS,GAAAC;CAAA,AAAAF,EAAA,OAAAG,KAAwB,IAAAH,EAAA,IAAA,IAAAA,EAAA,OAAvB,eAAA,GAAAE,KAAAC,GAAuB,EAAA,KAAAA,GAAA,EAAA,KAAAF,GAAA,EAAA,KAAAC;CAAA,IAAAE;CAAA,AAAAJ,EAAA,OAAAC,IAGnB,IAAAD,EAAA,MAA/B,IAAAP,EAAKC,EAAM,MAAUO,CAAS,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAG;CAAA,IAAAC;CAG5C,OAH4CL,EAAA,OAAAE,KAAAF,EAAA,OAAAI,KAD9C,IAAA,kBAACE,GAAD;EACe,WAAAF;EACL,MAAA;EAAE,GACJF;CAAK,CAAA,GACX,EAAA,KAAAA,GAAA,EAAA,KAAAE,GAAA,EAAA,KAAAC,KAAA,IAAAL,EAAA,IAJFK;AAIE"}
1	+ {"version":3,"file":"ListIcon","names":["_c","clsx","styles","require_compiler_runtime","clsx$1","import_compiler_runtime","listIcon_module_default","ListIcon","$","className","props","t0","t1","t2","Icon"],"sources":["../../src/components/List/ListIcon/listIcon.module.css","../../src/components/List/ListIcon/ListIcon.tsx"],"sourcesContent":["@layer adgytec.comps {\n .icon {\n color: var(--_md-list-color);\n\n transition: color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n}\n","import clsx from \"clsx\";\nimport { Icon } from \"@/components/Icon\";\nimport styles from \"./listIcon.module.css\";\n\n/*\n Props for the [`ListIcon`](src/components/List/ListIcon/ListIcon.tsx) component.\n /\nexport interface ListIconProps\n extends Omit<\n React.ComponentPropsWithRef<typeof Icon>,\n \"size\" \| \"withText\"\n > {}\n\n/\n Standardized leading icon component for a [`ListItem`](src/components/List/ListItem/ListItem.tsx).\n \n Hardcodes a standard 20px dimension while dynamically inheriting the list item's\n * text and interaction state colors.\n \n @example\n * ```tsx\n * import { Mail } from \"lucide-react\";\n \n <ListIcon icon={Mail} />\n * ```\n */\nexport const ListIcon: React.FC<ListIconProps> = ({ className, ...props }) => {\n return (\n <Icon\n className={clsx(styles[\"icon\"], className)}\n size={20}\n {...props}\n />\n );\n};\n"],"mappings":";;;;;A,4CC0BaO,KAAoC,MAAA;CAAA,IAAAC,KAAA,GAAAR,EAAAA,EAAAA,CAAA,CAAA,GAAAS,GAAAC;CAAA,AAAAF,EAAA,OAAAG,KAAwB,IAAAH,EAAA,IAAA,IAAAA,EAAA,OAAvB,eAAA,GAAAE,KAAAC,GAAuB,EAAA,KAAAA,GAAA,EAAA,KAAAF,GAAA,EAAA,KAAAC;CAAA,IAAAE;CAAA,AAAAJ,EAAA,OAAAC,IAGnB,IAAAD,EAAA,MAA/B,IAAAP,EAAKC,EAAM,MAAUO,CAAS,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAG;CAAA,IAAAC;CAG5C,OAH4CL,EAAA,OAAAE,KAAAF,EAAA,OAAAI,KAD9C,IAAA,kBAACE,GAAD;EACe,WAAAF;EACL,MAAA;EAAE,GACJF;CAAK,CAAA,GACX,EAAA,KAAAA,GAAA,EAAA,KAAAE,GAAA,EAAA,KAAAC,KAAA,IAAAL,EAAA,IAJFK;AAIE"}

package/dist/chunks/ListItem CHANGED Viewed

@@ -1,63 +1,76 @@
 import { t as e } from "./compiler-runtime";
 import { n as t, t as n } from "./useSplash";
-import { clsx as r } from "clsx";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { CheckboxContext as o, ListBoxItem as s, Provider as c, SwitchContext as l } from "react-aria-components";
-import '../assets/ListItem.css';//#region src/components/List/ListItem/listItem.module.css
-var u = e(), d = {
-	"list-item": "_list-item_1jxwa_13",
-	leading: "_leading_1jxwa_198",
-	trailing: "_trailing_1jxwa_203",
-	content: "_content_1jxwa_210"
-}, f = (e) => {
-	let f = (0, u.c)(24), p, m, h, g, _, v, y, b;
-	f[0] === e ? (p = f[1], m = f[2], h = f[3], g = f[4], _ = f[5], v = f[6], y = f[7], b = f[8]) : ({leading: h, overline: _, label: m, supporting: y, trailing: b, className: p, onPress: g, ...v} = e, f[0] = e, f[1] = p, f[2] = m, f[3] = h, f[4] = g, f[5] = _, f[6] = v, f[7] = y, f[8] = b);
-	let { handlePress: x, splashInfo: S } = n(g), C = (b?.length ?? 0) > 0, w;
-	f[9] === p ? w = f[10] : (w = (e) => r(d["list-item"], typeof p == "function" ? p(e) : p), f[9] = p, f[10] = w);
-	let T;
-	f[11] !== C || f[12] !== m || f[13] !== h || f[14] !== _ || f[15] !== S || f[16] !== y || f[17] !== b ? (T = (e) => {
-		let { isSelected: n, isDisabled: s } = e;
-		return /* @__PURE__ */ a(c, {
-			values: [[o, { slots: { selection: {
-				isSelected: n,
-				isDisabled: s,
-				isReadOnly: !0
-			} } }], [l, { slots: { selection: {
-				isSelected: n,
-				isDisabled: s,
-				isReadOnly: !0
-			} } }]],
+import { useListBoxConfig as r } from "../components/List/core/index.js";
+import { t as i } from "./ListIcon";
+import { clsx as a } from "clsx";
+import { cloneElement as o, isValidElement as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { CheckboxFieldContext as u, DEFAULT_SLOT as d, ListBoxItem as f, Provider as p, SwitchFieldContext as m } from "react-aria-components";
+import { Check as h } from "lucide-react";
+import { useId as g } from "react-aria";
+import '../assets/ListItem.css';// src/components/List/ListItem/listItem.module.css
+var _ = e(), v = {
+	"list-item": "_list-item_1o0k6_13",
+	leading: "_leading_1o0k6_200",
+	trailing: "_trailing_1o0k6_205",
+	content: "_content_1o0k6_212"
+}, y = (e) => {
+	let y = (0, _.c)(27), b, x, S, C, w, T, E, D, O;
+	y[0] === e ? (b = y[1], x = y[2], S = y[3], C = y[4], w = y[5], T = y[6], E = y[7], D = y[8], O = y[9]) : ({leading: S, overline: w, label: x, supporting: D, trailing: O, className: b, onPress: C, selectionIndicator: E, ...T} = e, y[0] = e, y[1] = b, y[2] = x, y[3] = S, y[4] = C, y[5] = w, y[6] = T, y[7] = E, y[8] = D, y[9] = O);
+	let { selectionIndicator: k } = r(), A = E ?? k ?? "none", j = g(s(x) ? x.props.id : void 0), { handlePress: M, splashInfo: N } = n(C), P = (O?.length ?? 0) > 0, F;
+	y[10] === b ? F = y[11] : (F = (e) => a(v["list-item"], typeof b == "function" ? b(e) : b), y[10] = b, y[11] = F);
+	let I;
+	y[12] !== P || y[13] !== x || y[14] !== j || y[15] !== S || y[16] !== A || y[17] !== w || y[18] !== N || y[19] !== D || y[20] !== O ? (I = (e) => {
+		let { isSelected: n, isDisabled: r, selectionMode: f } = e, g = n && A === "leading", _ = n && A === "trailing";
+		return /* @__PURE__ */ l(p, {
+			values: [[u, { slots: {
+				[d]: {},
+				selection: {
+					isSelected: n,
+					isDisabled: r || f === "none",
+					isReadOnly: !0,
+					"aria-labelledby": j
+				}
+			} }], [m, { slots: { [d]: { "aria-labelledby": j } } }]],
 			children: [
-				S && /* @__PURE__ */ i(t, { ...S }),
-				h && /* @__PURE__ */ i("div", {
-					className: r(d.leading),
-					children: h
+				N && /* @__PURE__ */ c(t, { ...N }),
+				g ? /* @__PURE__ */ c("div", {
+					className: a(v.leading),
+					children: /* @__PURE__ */ c(i, { icon: h })
+				}) : S && /* @__PURE__ */ c("div", {
+					className: a(v.leading),
+					children: S
 				}),
-				/* @__PURE__ */ a("div", {
-					className: r(d.content),
+				/* @__PURE__ */ l("div", {
+					className: a(v.content),
 					children: [
-						_ && _,
-						m,
-						y && y
+						w && w,
+						s(x) ? o(x, { id: j }) : /* @__PURE__ */ c("span", {
+							id: j,
+							children: x
+						}),
+						D && D
 					]
 				}),
-				C && /* @__PURE__ */ i("div", {
-					className: d.trailing,
-					children: b
+				_ ? /* @__PURE__ */ c("div", {
+					className: v.trailing,
+					children: /* @__PURE__ */ c(i, { icon: h })
+				}) : P && /* @__PURE__ */ c("div", {
+					className: v.trailing,
+					children: O
 				})
 			]
 		});
-	}, f[11] = C, f[12] = m, f[13] = h, f[14] = _, f[15] = S, f[16] = y, f[17] = b, f[18] = T) : T = f[18];
-	let E;
-	return f[19] !== x || f[20] !== v || f[21] !== w || f[22] !== T ? (E = /* @__PURE__ */ i(s, {
-		className: w,
-		onPress: x,
+	}, y[12] = P, y[13] = x, y[14] = j, y[15] = S, y[16] = A, y[17] = w, y[18] = N, y[19] = D, y[20] = O, y[21] = I) : I = y[21];
+	let L;
+	return y[22] !== M || y[23] !== T || y[24] !== F || y[25] !== I ? (L = /* @__PURE__ */ c(f, {
+		className: F,
+		onPress: M,
 		"data-list-item": !0,
-		...v,
-		children: T
-	}), f[19] = x, f[20] = v, f[21] = w, f[22] = T, f[23] = E) : E = f[23], E;
+		...T,
+		children: I
+	}), y[22] = M, y[23] = T, y[24] = F, y[25] = I, y[26] = L) : L = y[26], L;
 };
-//#endregion
-export { f as t };
+export { y as t };
 //# sourceMappingURL=ListItem.map