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/NavigationSectionLabel CHANGED Viewed

@@ -3,7 +3,7 @@ import { t } from "./base";
 import n from "clsx";
 import { jsx as r } from "react/jsx-runtime";
 import { Heading as i } from "react-aria-components";
-import '../assets/NavigationSectionLabel.css';//#region src/components/Navigation/NavigationSection/NavigationSectionLabel/navigationSectionLabel.module.css
+import '../assets/NavigationSectionLabel.css';// src/components/Navigation/NavigationSection/NavigationSectionLabel/navigationSectionLabel.module.css
 var a = e(), o = { label: "_label_6sxxv_2" }, s = (e) => {
 	let s = (0, a.c)(8), c, l;
 	s[0] === e ? (c = s[1], l = s[2]) : ({className: c, ...l} = e, s[0] = e, s[1] = c, s[2] = l);
@@ -15,7 +15,6 @@ var a = e(), o = { label: "_label_6sxxv_2" }, s = (e) => {
 		...l
 	}), s[5] = l, s[6] = u, s[7] = d) : d = s[7], d;
 };
-//#endregion
 export { s as t };
 //# sourceMappingURL=NavigationSectionLabel.map

package/dist/chunks/NavigationSectionLabel.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NavigationSectionLabel","names":["_c","clsx","styles","require_compiler_runtime","clsx$1","import_compiler_runtime","navigationSectionLabel_module_default","NavigationSectionLabel","$","className","props","t0","t1","typography","t2","Heading"],"sources":["../../src/components/Navigation/NavigationSection/NavigationSectionLabel/navigationSectionLabel.module.css","../../src/components/Navigation/NavigationSection/NavigationSectionLabel/NavigationSectionLabel.tsx"],"sourcesContent":["@layer adgytec.comps {\n .label {\n --_md-navigation-section-label-color: var(\n --md-navigation-section-label-color,\n var(--md-sys-color-on-surface-variant)\n );\n\n padding-inline: var(--md-sys-layout-space-16);\n padding-block-end: var(--md-sys-layout-space-4);\n\n color: var(--_md-navigation-section-label-color);\n }\n}\n","import clsx from \"clsx\";\nimport { Heading } from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport styles from \"./navigationSectionLabel.module.css\";\n\n/*\n Props for the [`NavigationSectionLabel`](~~file:///home/rohan/work/adgytec/adgytec-web-ui-components/~~src/components/Navigation/NavigationSection/NavigationSectionLabel/NavigationSectionLabel.tsx) component.\n /\nexport interface NavigationSectionLabelProps\n extends React.ComponentPropsWithRef<typeof Heading> {}\n\n/\n Styled title heading for a [`NavigationSection`](~~file:///home/rohan/work/adgytec/adgytec-web-ui-components/~~src/components/Navigation/NavigationSection/NavigationSection/NavigationSection.tsx).\n \n Rendered with Material Design 3 `titleSmall` typography and accessible heading semantics.\n \n @example\n * ```tsx\n * <NavigationSectionLabel>Workspaces</NavigationSectionLabel>\n * ```\n */\nexport const NavigationSectionLabel: React.FC<NavigationSectionLabelProps> = ({\n className,\n ...props\n}) => {\n return (\n <Heading\n className={clsx(styles[\"label\"], typography.titleSmall, className)}\n {...props}\n />\n );\n};\n"],"mappings":";;;;;;8CCqBaO,KAAgE,MAAA;CAAA,IAAAC,KAAA,GAAAR,EAAAA,EAAAA,CAAA,CAAA,GAAAS,GAAAC;CAAA,AAAAF,EAAA,OAAAG,KAG5E,IAAAH,EAAA,IAAA,IAAAA,EAAA,OAH6E,eAAA,GAAAE,KAAAC,GAG7E,EAAA,KAAAA,GAAA,EAAA,KAAAF,GAAA,EAAA,KAAAC;CAAA,IAAAE;CAAA,AAAAJ,EAAA,OAAAC,IAG6E,IAAAD,EAAA,MAAvD,IAAAP,EAAKC,EAAM,OAAWW,EAAU,YAAaJ,CAAS,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAG;CAAA,IAAAE;CAEpE,OAFoEN,EAAA,OAAAE,KAAAF,EAAA,OAAAI,KADtE,IAAA,kBAACG,GAAD;EACe,WAAAH;EAAuD,GAC9DF;CAAK,CAAA,GACX,EAAA,KAAAA,GAAA,EAAA,KAAAE,GAAA,EAAA,KAAAE,KAAA,IAAAN,EAAA,IAHFM;AAGE"}
1	+ {"version":3,"file":"NavigationSectionLabel","names":["_c","clsx","styles","require_compiler_runtime","clsx$1","import_compiler_runtime","navigationSectionLabel_module_default","NavigationSectionLabel","$","className","props","t0","t1","typography","t2","Heading"],"sources":["../../src/components/Navigation/NavigationSection/NavigationSectionLabel/navigationSectionLabel.module.css","../../src/components/Navigation/NavigationSection/NavigationSectionLabel/NavigationSectionLabel.tsx"],"sourcesContent":["@layer adgytec.comps {\n .label {\n --_md-navigation-section-label-color: var(\n --md-navigation-section-label-color,\n var(--md-sys-color-on-surface-variant)\n );\n\n padding-inline: var(--md-sys-layout-space-16);\n padding-block-end: var(--md-sys-layout-space-4);\n\n color: var(--_md-navigation-section-label-color);\n }\n}\n","import clsx from \"clsx\";\nimport { Heading } from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport styles from \"./navigationSectionLabel.module.css\";\n\n/*\n Props for the [`NavigationSectionLabel`](src/components/Navigation/NavigationSection/NavigationSectionLabel/NavigationSectionLabel.tsx) component.\n /\nexport interface NavigationSectionLabelProps\n extends React.ComponentPropsWithRef<typeof Heading> {}\n\n/\n Styled title heading for a [`NavigationSection`](src/components/Navigation/NavigationSection/NavigationSection/NavigationSection.tsx).\n \n Rendered with Material Design 3 `titleSmall` typography and accessible heading semantics.\n \n @example\n * ```tsx\n * <NavigationSectionLabel>Workspaces</NavigationSectionLabel>\n * ```\n */\nexport const NavigationSectionLabel: React.FC<NavigationSectionLabelProps> = ({\n className,\n ...props\n}) => {\n return (\n <Heading\n className={clsx(styles[\"label\"], typography.titleSmall, className)}\n {...props}\n />\n );\n};\n"],"mappings":";;;;;;A,8CCqBaO,KAAgE,MAAA;CAAA,IAAAC,KAAA,GAAAR,EAAAA,EAAAA,CAAA,CAAA,GAAAS,GAAAC;CAAA,AAAAF,EAAA,OAAAG,KAG5E,IAAAH,EAAA,IAAA,IAAAA,EAAA,OAH6E,eAAA,GAAAE,KAAAC,GAG7E,EAAA,KAAAA,GAAA,EAAA,KAAAF,GAAA,EAAA,KAAAC;CAAA,IAAAE;CAAA,AAAAJ,EAAA,OAAAC,IAG6E,IAAAD,EAAA,MAAvD,IAAAP,EAAKC,EAAM,OAAWW,EAAU,YAAaJ,CAAS,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAG;CAAA,IAAAE;CAEpE,OAFoEN,EAAA,OAAAE,KAAAF,EAAA,OAAAI,KADtE,IAAA,kBAACG,GAAD;EACe,WAAAH;EAAuD,GAC9DF;CAAK,CAAA,GACX,EAAA,KAAAA,GAAA,EAAA,KAAAE,GAAA,EAAA,KAAAE,KAAA,IAAAN,EAAA,IAHFM;AAGE"}

package/dist/chunks/Popover CHANGED Viewed

@@ -2,7 +2,7 @@ import { t as e } from "./compiler-runtime";
 import t from "clsx";
 import { jsx as n } from "react/jsx-runtime";
 import { Popover as r } from "react-aria-components";
-import '../assets/Popover.css';//#region src/components/Popover/popover.module.css
+import '../assets/Popover.css';// src/components/Popover/popover.module.css
 var i = e(), a = { popover: "_popover_gsd0s_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);
@@ -14,7 +14,6 @@ var i = e(), a = { popover: "_popover_gsd0s_2" }, o = (e) => {
 		...c
 	}), o[5] = c, o[6] = l, o[7] = u) : u = o[7], u;
 };
-//#endregion
 export { o as t };
 //# sourceMappingURL=Popover.map

package/dist/chunks/Popover.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Popover","names":["Popover","_c","clsx","styles","AriaPopover","require_compiler_runtime","clsx$1","import_compiler_runtime","popover_module_default","Popover$1","$","className","props","t0","t1","renderProps","t2","Popover"],"sources":["../../src/components/Popover/popover.module.css","../../src/components/Popover/Popover.tsx"],"sourcesContent":["@layer adgytec.comps {\n .popover {\n --_offset: calc(4 * var(--dp, 1px));\n\n transform: translate3d(0, 0, 0);\n transition:\n transform var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration),\n opacity var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n &[data-placement=\"bottom\"] {\n --_origin: translateY(calc(-1 * var(--_offset)));\n }\n\n &[data-placement=\"top\"] {\n --_origin: translateY(var(--_offset));\n }\n\n &[data-placement=\"right\"] {\n --_origin: translateX(calc(-1 * var(--_offset)));\n }\n\n &[data-placement=\"left\"] {\n --_origin: translateX(var(--_offset));\n }\n\n &[data-entering],\n &[data-exiting] {\n transform: var(--_origin);\n opacity: 0;\n }\n }\n}\n","import clsx from \"clsx\";\nimport { Popover as AriaPopover } from \"react-aria-components\";\nimport styles from \"./popover.module.css\";\n\n/*\n Props for the [`Popover`](~~file:///home/rohan/work/adgytec/adgytec-web-ui-components/~~src/components/Popover/Popover.tsx) component.\n \n Extends all properties from React Aria's `Popover`, including positioning (`placement`, `offset`, `crossOffset`),\n * portal containers, and entry/exit transition states.\n /\nexport interface PopoverProps\n extends React.ComponentPropsWithRef<typeof AriaPopover> {}\n\n/\n Overlay surface container that presents content anchored to a trigger element.\n \n Built on React Aria's `Popover` with Material Design 3 surface colors, shadow elevation,\n * and built-in entry/exit animations responsive to placement directions.\n \n @example\n * ```tsx\n * import {\n * Popover,\n * Button,\n * DialogTrigger,\n * Dialog,\n * } from \"@adgytec/web-ui-components\";\n \n <DialogTrigger>\n * <Button label=\"Open Popover\" />\n * <Popover>\n * <Dialog>\n * <p>This is the content inside the popover.</p>\n * </Dialog>\n * </Popover>\n * </DialogTrigger>\n * ```\n */\nexport const Popover: React.FC<PopoverProps> = ({ className, ...props }) => {\n return (\n <AriaPopover\n className={(renderProps) =>\n clsx(\n styles[\"popover\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n />\n );\n};\n"],"mappings":";;;;;kDCsCaA,KAAkC,MAAA;CAAA,IAAAU,KAAA,GAAAT,EAAAA,EAAAA,CAAA,CAAA,GAAAU,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,IAStD,IAAAD,EAAA,MANM,KAAA,MACPR,EACIC,EAAM,SACN,OAAOQ,KAAc,aACfA,EAAUI,CACF,IAFdJ,CAGJ,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAG;CAAA,IAAAE;CAGP,OAHON,EAAA,OAAAE,KAAAF,EAAA,OAAAI,KAPT,IAAA,kBAACV,GAAD;EACe,WAAAU;EAMN,GAEDF;CAAK,CAAA,GACX,EAAA,KAAAA,GAAA,EAAA,KAAAE,GAAA,EAAA,KAAAE,KAAA,IAAAN,EAAA,IAVFM;AAUE"}
1	+ {"version":3,"file":"Popover","names":["Popover","_c","clsx","styles","AriaPopover","require_compiler_runtime","clsx$1","import_compiler_runtime","popover_module_default","Popover$1","$","className","props","t0","t1","renderProps","t2","Popover"],"sources":["../../src/components/Popover/popover.module.css","../../src/components/Popover/Popover.tsx"],"sourcesContent":["@layer adgytec.comps {\n .popover {\n --_offset: calc(4 * var(--dp, 1px));\n\n transform: translate3d(0, 0, 0);\n transition:\n transform var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration),\n opacity var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n &[data-placement=\"bottom\"] {\n --_origin: translateY(calc(-1 * var(--_offset)));\n }\n\n &[data-placement=\"top\"] {\n --_origin: translateY(var(--_offset));\n }\n\n &[data-placement=\"right\"] {\n --_origin: translateX(calc(-1 * var(--_offset)));\n }\n\n &[data-placement=\"left\"] {\n --_origin: translateX(var(--_offset));\n }\n\n &[data-entering],\n &[data-exiting] {\n transform: var(--_origin);\n opacity: 0;\n }\n }\n}\n","import clsx from \"clsx\";\nimport { Popover as AriaPopover } from \"react-aria-components\";\nimport styles from \"./popover.module.css\";\n\n/*\n Props for the [`Popover`](src/components/Popover/Popover.tsx) component.\n \n Extends all properties from React Aria's `Popover`, including positioning (`placement`, `offset`, `crossOffset`),\n * portal containers, and entry/exit transition states.\n /\nexport interface PopoverProps\n extends React.ComponentPropsWithRef<typeof AriaPopover> {}\n\n/\n Overlay surface container that presents content anchored to a trigger element.\n \n Built on React Aria's `Popover` with Material Design 3 surface colors, shadow elevation,\n * and built-in entry/exit animations responsive to placement directions.\n \n @example\n * ```tsx\n * import {\n * Popover,\n * Button,\n * DialogTrigger,\n * Dialog,\n * } from \"@adgytec/web-ui-components\";\n \n <DialogTrigger>\n * <Button label=\"Open Popover\" />\n * <Popover>\n * <Dialog>\n * <p>This is the content inside the popover.</p>\n * </Dialog>\n * </Popover>\n * </DialogTrigger>\n * ```\n */\nexport const Popover: React.FC<PopoverProps> = ({ className, ...props }) => {\n return (\n <AriaPopover\n className={(renderProps) =>\n clsx(\n styles[\"popover\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n />\n );\n};\n"],"mappings":";;;;;A,kDCsCaA,KAAkC,MAAA;CAAA,IAAAU,KAAA,GAAAT,EAAAA,EAAAA,CAAA,CAAA,GAAAU,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,IAStD,IAAAD,EAAA,MANM,KAAA,MACPR,EACIC,EAAM,SACN,OAAOQ,KAAc,aACfA,EAAUI,CACF,IAFdJ,CAGJ,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAG;CAAA,IAAAE;CAGP,OAHON,EAAA,OAAAE,KAAAF,EAAA,OAAAI,KAPT,IAAA,kBAACV,GAAD;EACe,WAAAU;EAMN,GAEDF;CAAK,CAAA,GACX,EAAA,KAAAA,GAAA,EAAA,KAAAE,GAAA,EAAA,KAAAE,KAAA,IAAAN,EAAA,IAVFM;AAUE"}

package/dist/chunks/RadialGlowDecorator CHANGED Viewed

@@ -104,7 +104,6 @@ import '../assets/RadialGlowDecorator.css';var i = {
 		] })
 	]
 });
-//#endregion
 export { a as t };
 //# sourceMappingURL=RadialGlowDecorator.map

package/dist/chunks/RadialGlowDecorator.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadialGlowDecorator","names":["clsx","styles","_Fragment","clsx$1","radialGlowDecorator_module_default","RadialGlowDecorator","\"container\"","className","variant","style","Fragment","\"blob\""],"sources":["../../src/components/Decorators/RadialGlowDecorator/radialGlowDecorator.module.css","../../src/components/Decorators/RadialGlowDecorator/RadialGlowDecorator.tsx"],"sourcesContent":["@layer adgytec.comps {\n .container {\n position: fixed;\n inset: 0;\n pointer-events: none;\n overflow: hidden;\n\n /* Default Opacity (Light mode/Base defaults) - higher visibility /\n --glow-opacity-18: 28%;\n --glow-opacity-15: 24%;\n --glow-opacity-14: 22%;\n --glow-opacity-12: 20%;\n --glow-opacity-10: 16%;\n --glow-opacity-8: 12%;\n }\n\n :global([data-theme=\"dark\"]) .container,\n :global([data-theme=\"dark-high-contrast\"]) .container,\n :global([data-theme=\"dark-medium-contrast\"]) .container,\n :global([data-theme=\"monochrome-dark\"]) .container {\n --glow-opacity-18: 15%;\n --glow-opacity-15: 12%;\n --glow-opacity-14: 11%;\n --glow-opacity-12: 10%;\n --glow-opacity-10: 8%;\n --glow-opacity-8: 6%;\n }\n\n @media (prefers-color-scheme: dark) {\n .container {\n --glow-opacity-18: 15%;\n --glow-opacity-15: 12%;\n --glow-opacity-14: 11%;\n --glow-opacity-12: 10%;\n --glow-opacity-10: 8%;\n --glow-opacity-8: 6%;\n }\n }\n\n :global([data-theme=\"light\"]) .container,\n :global([data-theme=\"light-high-contrast\"]) .container,\n :global([data-theme=\"light-medium-contrast\"]) .container,\n :global([data-theme=\"monochrome-light\"]) .container {\n --glow-opacity-18: 28%;\n --glow-opacity-15: 24%;\n --glow-opacity-14: 22%;\n --glow-opacity-12: 20%;\n --glow-opacity-10: 16%;\n --glow-opacity-8: 12%;\n }\n\n .blob {\n position: absolute;\n border-radius: 50%;\n filter: blur(180px);\n pointer-events: none;\n will-change: transform, filter;\n }\n\n / DEFAULT VARIANT /\n .default-primary {\n inline-size: 50vmax;\n block-size: 50vmax;\n top: -10vmax;\n left: -10vmax;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-primary) var(--glow-opacity-15),\n transparent\n );\n }\n\n .default-secondary {\n inline-size: 45vmax;\n block-size: 45vmax;\n bottom: -15vmax;\n right: -10vmax;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-tertiary) var(--glow-opacity-12),\n transparent\n );\n }\n\n .default-tertiary {\n inline-size: 40vmax;\n block-size: 40vmax;\n top: 25vh;\n right: 15vw;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-secondary) var(--glow-opacity-10),\n transparent\n );\n }\n\n / SPLIT VARIANT /\n .split-left {\n inline-size: 60vmax;\n block-size: 60vmax;\n top: 20vh;\n left: -20vmax;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-primary) var(--glow-opacity-12),\n transparent\n );\n }\n\n .split-right {\n inline-size: 60vmax;\n block-size: 60vmax;\n top: 20vh;\n right: -20vmax;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-tertiary) var(--glow-opacity-10),\n transparent\n );\n }\n\n / TOP-BAR VARIANT /\n .top-bar-primary {\n inline-size: 35vmax;\n block-size: 20vmax;\n top: -10vmax;\n left: 10vw;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-primary) var(--glow-opacity-18),\n transparent\n );\n }\n\n .top-bar-secondary {\n inline-size: 35vmax;\n block-size: 20vmax;\n top: -10vmax;\n left: 40vw;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-tertiary) var(--glow-opacity-15),\n transparent\n );\n }\n\n .top-bar-tertiary {\n inline-size: 35vmax;\n block-size: 20vmax;\n top: -10vmax;\n left: 70vw;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-secondary) var(--glow-opacity-12),\n transparent\n );\n }\n\n / CORNERS VARIANT /\n .corner-tl {\n inline-size: 30vmax;\n block-size: 30vmax;\n top: -10vmax;\n left: -10vmax;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-primary) var(--glow-opacity-15),\n transparent\n );\n }\n\n .corner-tr {\n inline-size: 30vmax;\n block-size: 30vmax;\n top: -10vmax;\n right: -10vmax;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-tertiary) var(--glow-opacity-12),\n transparent\n );\n }\n\n .corner-bl {\n inline-size: 30vmax;\n block-size: 30vmax;\n bottom: -10vmax;\n left: -10vmax;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-secondary) var(--glow-opacity-12),\n transparent\n );\n }\n\n .corner-br {\n inline-size: 30vmax;\n block-size: 30vmax;\n bottom: -10vmax;\n right: -10vmax;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-primary) var(--glow-opacity-10),\n transparent\n );\n }\n\n / AURORA VARIANT /\n .aurora-1 {\n inline-size: 55vmax;\n block-size: 40vmax;\n top: -15vmax;\n left: 5vw;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-primary) var(--glow-opacity-12),\n transparent\n );\n animation: aurora-float-1 25s ease-in-out infinite alternate;\n }\n\n .aurora-2 {\n inline-size: 50vmax;\n block-size: 45vmax;\n top: -10vmax;\n left: 30vw;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-tertiary) var(--glow-opacity-10),\n transparent\n );\n animation: aurora-float-2 22s ease-in-out infinite alternate;\n }\n\n .aurora-3 {\n inline-size: 60vmax;\n block-size: 40vmax;\n top: -20vmax;\n right: 5vw;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-secondary) var(--glow-opacity-12),\n transparent\n );\n animation: aurora-float-3 28s ease-in-out infinite alternate;\n }\n\n .aurora-4 {\n inline-size: 45vmax;\n block-size: 40vmax;\n bottom: -15vmax;\n left: 25vw;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-primary) var(--glow-opacity-8),\n transparent\n );\n animation: aurora-float-4 26s ease-in-out infinite alternate;\n }\n\n / SPOTLIGHT VARIANT /\n .spotlight-primary {\n inline-size: 55vmax;\n block-size: 55vmax;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-primary) var(--glow-opacity-14),\n transparent\n );\n animation: spotlight-pulse-1 12s ease-in-out infinite alternate;\n }\n\n .spotlight-secondary {\n inline-size: 45vmax;\n block-size: 45vmax;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-tertiary) var(--glow-opacity-10),\n transparent\n );\n animation: spotlight-pulse-2 16s ease-in-out infinite alternate;\n }\n\n .spotlight-tertiary {\n inline-size: 35vmax;\n block-size: 35vmax;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-secondary) var(--glow-opacity-8),\n transparent\n );\n animation: spotlight-pulse-3 10s ease-in-out infinite alternate;\n }\n\n / NEBULA VARIANT /\n .nebula-1 {\n inline-size: 65vmax;\n block-size: 65vmax;\n top: 10vh;\n left: 10vw;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-primary) var(--glow-opacity-12),\n transparent\n );\n animation: nebula-drift-1 30s ease-in-out infinite;\n }\n\n .nebula-2 {\n inline-size: 55vmax;\n block-size: 55vmax;\n bottom: 10vh;\n right: 10vw;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-tertiary) var(--glow-opacity-12),\n transparent\n );\n animation: nebula-drift-2 35s ease-in-out infinite;\n }\n\n .nebula-3 {\n inline-size: 50vmax;\n block-size: 50vmax;\n top: 30vh;\n right: 15vw;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-secondary) var(--glow-opacity-10),\n transparent\n );\n animation: nebula-drift-3 28s ease-in-out infinite;\n }\n\n .nebula-4 {\n inline-size: 45vmax;\n block-size: 45vmax;\n bottom: 20vh;\n left: 15vw;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-primary) var(--glow-opacity-8),\n transparent\n );\n animation: nebula-drift-4 32s ease-in-out infinite;\n }\n\n / HORIZON VARIANT /\n .horizon-primary {\n inline-size: 55vmax;\n block-size: 30vmax;\n bottom: -15vmax;\n left: 10vw;\n border-radius: 50% 50% 0 0;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-primary) var(--glow-opacity-15),\n transparent\n );\n animation: horizon-pulse-1 8s ease-in-out infinite alternate;\n }\n\n .horizon-secondary {\n inline-size: 60vmax;\n block-size: 35vmax;\n bottom: -20vmax;\n left: 30vw;\n border-radius: 50% 50% 0 0;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-tertiary) var(--glow-opacity-12),\n transparent\n );\n animation: horizon-pulse-2 11s ease-in-out infinite alternate;\n }\n\n .horizon-tertiary {\n inline-size: 50vmax;\n block-size: 28vmax;\n bottom: -18vmax;\n right: 10vw;\n border-radius: 50% 50% 0 0;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-secondary) var(--glow-opacity-10),\n transparent\n );\n animation: horizon-pulse-3 9s ease-in-out infinite alternate;\n }\n\n / SPIRAL VARIANT /\n .spiral-1 {\n inline-size: 45vmax;\n block-size: 45vmax;\n top: calc(50% - 22.5vmax);\n left: calc(50% - 22.5vmax);\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-primary) var(--glow-opacity-12),\n transparent\n );\n animation: spiral-orbit-1 25s linear infinite;\n }\n\n .spiral-2 {\n inline-size: 40vmax;\n block-size: 40vmax;\n top: calc(50% - 20vmax);\n left: calc(50% - 20vmax);\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-tertiary) var(--glow-opacity-10),\n transparent\n );\n animation: spiral-orbit-2 30s linear infinite;\n }\n\n .spiral-3 {\n inline-size: 35vmax;\n block-size: 35vmax;\n top: calc(50% - 17.5vmax);\n left: calc(50% - 17.5vmax);\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-secondary) var(--glow-opacity-10),\n transparent\n );\n animation: spiral-orbit-3 20s linear infinite;\n }\n}\n\n/ Animations for premium organic feeling /\n@keyframes aurora-float-1 {\n 0% {\n transform: translate(0, 0) scale(1);\n }\n 100% {\n transform: translate(5vw, 5vh) scale(1.1);\n }\n}\n\n@keyframes aurora-float-2 {\n 0% {\n transform: translate(0, 0) scale(1.1);\n }\n 100% {\n transform: translate(-4vw, -6vh) scale(0.95);\n }\n}\n\n@keyframes aurora-float-3 {\n 0% {\n transform: translate(0, 0) scale(0.95);\n }\n 100% {\n transform: translate(6vw, -4vh) scale(1.05);\n }\n}\n\n@keyframes aurora-float-4 {\n 0% {\n transform: translate(0, 0) scale(1.05);\n }\n 100% {\n transform: translate(-5vw, 4vh) scale(1);\n }\n}\n\n@keyframes spotlight-pulse-1 {\n 0% {\n transform: translate(-50%, -50%) scale(0.9);\n }\n 100% {\n transform: translate(-50%, -50%) scale(1.1);\n }\n}\n\n@keyframes spotlight-pulse-2 {\n 0% {\n transform: translate(-48%, -52%) scale(1.1);\n }\n 100% {\n transform: translate(-52%, -48%) scale(0.9);\n }\n}\n\n@keyframes spotlight-pulse-3 {\n 0% {\n transform: translate(-52%, -48%) scale(0.95);\n }\n 100% {\n transform: translate(-48%, -52%) scale(1.05);\n }\n}\n\n@keyframes nebula-drift-1 {\n 0% {\n transform: translate(0, 0) scale(1) rotate(0deg);\n }\n 33% {\n transform: translate(10vw, 15vh) scale(1.15) rotate(120deg);\n }\n 66% {\n transform: translate(-10vw, 10vh) scale(0.9) rotate(240deg);\n }\n 100% {\n transform: translate(0, 0) scale(1) rotate(360deg);\n }\n}\n\n@keyframes nebula-drift-2 {\n 0% {\n transform: translate(0, 0) scale(1) rotate(0deg);\n }\n 33% {\n transform: translate(-15vw, -10vh) scale(0.9) rotate(-120deg);\n }\n 66% {\n transform: translate(5vw, -15vh) scale(1.1) rotate(-240deg);\n }\n 100% {\n transform: translate(0, 0) scale(1) rotate(-360deg);\n }\n}\n\n@keyframes nebula-drift-3 {\n 0% {\n transform: translate(0, 0) scale(1);\n }\n 50% {\n transform: translate(-8vw, 12vh) scale(1.2);\n }\n 100% {\n transform: translate(0, 0) scale(1);\n }\n}\n\n@keyframes nebula-drift-4 {\n 0% {\n transform: translate(0, 0) scale(1.1);\n }\n 50% {\n transform: translate(12vw, -10vh) scale(0.9);\n }\n 100% {\n transform: translate(0, 0) scale(1.1);\n }\n}\n\n@keyframes horizon-pulse-1 {\n 0% {\n transform: translateY(0) scale(0.95);\n }\n 100% {\n transform: translateY(-2vmax) scale(1.05);\n }\n}\n\n@keyframes horizon-pulse-2 {\n 0% {\n transform: translateY(0) scale(1.05);\n }\n 100% {\n transform: translateY(-3vmax) scale(0.95);\n }\n}\n\n@keyframes horizon-pulse-3 {\n 0% {\n transform: translateY(0) scale(0.9);\n }\n 100% {\n transform: translateY(-2vmax) scale(1.1);\n }\n}\n\n@keyframes spiral-orbit-1 {\n 0% {\n transform: rotate(0deg) translate(15vmax) rotate(0deg) scale(0.9);\n }\n 50% {\n transform: rotate(180deg) translate(15vmax) rotate(-180deg) scale(1.1);\n }\n 100% {\n transform: rotate(360deg) translate(15vmax) rotate(-360deg) scale(0.9);\n }\n}\n\n@keyframes spiral-orbit-2 {\n 0% {\n transform: rotate(0deg) translate(-12vmax) rotate(0deg) scale(1.1);\n }\n 50% {\n transform: rotate(-180deg) translate(-12vmax) rotate(180deg) scale(0.9);\n }\n 100% {\n transform: rotate(-360deg) translate(-12vmax) rotate(360deg) scale(1.1);\n }\n}\n\n@keyframes spiral-orbit-3 {\n 0% {\n transform: rotate(90deg) translate(10vmax) rotate(-90deg) scale(1);\n }\n 50% {\n transform: rotate(270deg) translate(10vmax) rotate(-270deg) scale(0.85);\n }\n 100% {\n transform: rotate(450deg) translate(10vmax) rotate(-450deg) scale(1);\n }\n}\n","import clsx from \"clsx\";\nimport type React from \"react\";\nimport styles from \"./radialGlowDecorator.module.css\";\n\n/\n Predefined layout, blob placement, and motion variants for the {@link RadialGlowDecorator} component.\n \n - `\"default\"`: 3 static blobs (primary, secondary, tertiary) spread across the viewport.\n * - `\"split\"`: 2 static blobs separated left and right, ideal for two-column or split layouts.\n * - `\"top-bar\"`: 3 horizontal blobs aligned across the top fold or header area.\n * - `\"corners\"`: 4 static blobs anchored in each of the four screen corners.\n * - `\"aurora\"`: 4 organic floating blobs with continuous drift animation for atmospheric ambiance.\n * - `\"spotlight\"`: 3 centered, layered blobs with an organic pulsating scale animation.\n * - `\"nebula\"`: 4 orbiting and drifting blobs creating an immersive, fluid cosmic look.\n * - `\"horizon\"`: 3 bottom-anchored blobs with rising and pulsating motion for footers and page bottoms.\n * - `\"spiral\"`: 3 blobs following a circular orbiting path for dynamic centerpiece effects.\n /\nexport type RadialGlowDecoratorVariant =\n \| \"default\"\n \| \"split\"\n \| \"top-bar\"\n \| \"corners\"\n \| \"aurora\"\n \| \"spotlight\"\n \| \"nebula\"\n \| \"horizon\"\n \| \"spiral\";\n\n/\n Props for the {@link RadialGlowDecorator} component.\n /\nexport interface RadialGlowDecoratorProps {\n /\n Z-index layer depth for the decorator container.\n \n @default -10\n /\n zIndex?: number;\n\n /* Additional CSS class names to apply to the decorator container. /\n className?: string;\n\n /* Custom inline styles to apply to the decorator container. /\n style?: React.CSSProperties;\n\n /\n Predefined layout, blob placement, and animation variant.\n \n @default \"default\"\n /\n variant?: RadialGlowDecoratorVariant;\n}\n\n/\n A non-blocking decorative background component that renders smooth, theme-aware radial glow gradients.\n \n Layers multiple blurred color blobs to produce premium ambient lighting and background washes.\n * Automatically scales opacities between light and dark modes to ensure visual balance.\n * Spans the full page with `pointer-events: none` and `aria-hidden=\"true\"`, ensuring no interference\n * with user interactions or accessibility trees.\n \n @example\n * ```tsx\n * import { RadialGlowDecorator } from '@adgytec/web-ui-components';\n \n // Static multi-color radial gradient\n * <RadialGlowDecorator variant=\"default\" />\n \n // Continuous floating aurora animation with custom z-index\n * <RadialGlowDecorator variant=\"aurora\" zIndex={-20} />\n \n // Centered pulsating spotlight for hero sections\n * <RadialGlowDecorator variant=\"spotlight\" />\n * ```\n */\nexport const RadialGlowDecorator: React.FC<RadialGlowDecoratorProps> = ({\n zIndex = -10,\n className,\n style,\n variant = \"default\",\n}) => {\n return (\n <div\n className={clsx(styles[\"container\"], className)}\n aria-hidden=\"true\"\n data-variant={variant}\n style={{ zIndex, ...style }}\n >\n {variant === \"default\" && (\n <>\n <div\n className={clsx(\n styles[\"blob\"],\n styles[\"default-primary\"]\n )}\n />\n <div\n className={clsx(\n styles[\"blob\"],\n styles[\"default-secondary\"]\n )}\n />\n <div\n className={clsx(\n styles[\"blob\"],\n styles[\"default-tertiary\"]\n )}\n />\n </>\n )}\n {variant === \"split\" && (\n <>\n <div\n className={clsx(styles[\"blob\"], styles[\"split-left\"])}\n />\n <div\n className={clsx(styles[\"blob\"], styles[\"split-right\"])}\n />\n </>\n )}\n {variant === \"top-bar\" && (\n <>\n <div\n className={clsx(\n styles[\"blob\"],\n styles[\"top-bar-primary\"]\n )}\n />\n <div\n className={clsx(\n styles[\"blob\"],\n styles[\"top-bar-secondary\"]\n )}\n />\n <div\n className={clsx(\n styles[\"blob\"],\n styles[\"top-bar-tertiary\"]\n )}\n />\n </>\n )}\n {variant === \"corners\" && (\n <>\n <div\n className={clsx(styles[\"blob\"], styles[\"corner-tl\"])}\n />\n <div\n className={clsx(styles[\"blob\"], styles[\"corner-tr\"])}\n />\n <div\n className={clsx(styles[\"blob\"], styles[\"corner-bl\"])}\n />\n <div\n className={clsx(styles[\"blob\"], styles[\"corner-br\"])}\n />\n </>\n )}\n {variant === \"aurora\" && (\n <>\n <div className={clsx(styles[\"blob\"], styles[\"aurora-1\"])} />\n <div className={clsx(styles[\"blob\"], styles[\"aurora-2\"])} />\n <div className={clsx(styles[\"blob\"], styles[\"aurora-3\"])} />\n <div className={clsx(styles[\"blob\"], styles[\"aurora-4\"])} />\n </>\n )}\n {variant === \"spotlight\" && (\n <>\n <div\n className={clsx(\n styles[\"blob\"],\n styles[\"spotlight-primary\"]\n )}\n />\n <div\n className={clsx(\n styles[\"blob\"],\n styles[\"spotlight-secondary\"]\n )}\n />\n <div\n className={clsx(\n styles[\"blob\"],\n styles[\"spotlight-tertiary\"]\n )}\n />\n </>\n )}\n {variant === \"nebula\" && (\n <>\n <div className={clsx(styles[\"blob\"], styles[\"nebula-1\"])} />\n <div className={clsx(styles[\"blob\"], styles[\"nebula-2\"])} />\n <div className={clsx(styles[\"blob\"], styles[\"nebula-3\"])} />\n <div className={clsx(styles[\"blob\"], styles[\"nebula-4\"])} />\n </>\n )}\n {variant === \"horizon\" && (\n <>\n <div\n className={clsx(\n styles[\"blob\"],\n styles[\"horizon-primary\"]\n )}\n />\n <div\n className={clsx(\n styles[\"blob\"],\n styles[\"horizon-secondary\"]\n )}\n />\n <div\n className={clsx(\n styles[\"blob\"],\n styles[\"horizon-tertiary\"]\n )}\n />\n </>\n )}\n {variant === \"spiral\" && (\n <>\n <div className={clsx(styles[\"blob\"], styles[\"spiral-1\"])} />\n <div className={clsx(styles[\"blob\"], styles[\"spiral-2\"])} />\n <div className={clsx(styles[\"blob\"], styles[\"spiral-3\"])} />\n </>\n )}\n </div>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"RadialGlowDecorator","names":["clsx","styles","_Fragment","clsx$1","radialGlowDecorator_module_default","RadialGlowDecorator","\"container\"","className","variant","style","Fragment","\"blob\""],"sources":["../../src/components/Decorators/RadialGlowDecorator/radialGlowDecorator.module.css","../../src/components/Decorators/RadialGlowDecorator/RadialGlowDecorator.tsx"],"sourcesContent":["@layer adgytec.comps {\n .container {\n position: fixed;\n inset: 0;\n pointer-events: none;\n overflow: hidden;\n\n /* Default Opacity (Light mode/Base defaults) - higher visibility /\n --glow-opacity-18: 28%;\n --glow-opacity-15: 24%;\n --glow-opacity-14: 22%;\n --glow-opacity-12: 20%;\n --glow-opacity-10: 16%;\n --glow-opacity-8: 12%;\n }\n\n :global([data-theme=\"dark\"]) .container,\n :global([data-theme=\"dark-high-contrast\"]) .container,\n :global([data-theme=\"dark-medium-contrast\"]) .container,\n :global([data-theme=\"monochrome-dark\"]) .container {\n --glow-opacity-18: 15%;\n --glow-opacity-15: 12%;\n --glow-opacity-14: 11%;\n --glow-opacity-12: 10%;\n --glow-opacity-10: 8%;\n --glow-opacity-8: 6%;\n }\n\n @media (prefers-color-scheme: dark) {\n .container {\n --glow-opacity-18: 15%;\n --glow-opacity-15: 12%;\n --glow-opacity-14: 11%;\n --glow-opacity-12: 10%;\n --glow-opacity-10: 8%;\n --glow-opacity-8: 6%;\n }\n }\n\n :global([data-theme=\"light\"]) .container,\n :global([data-theme=\"light-high-contrast\"]) .container,\n :global([data-theme=\"light-medium-contrast\"]) .container,\n :global([data-theme=\"monochrome-light\"]) .container {\n --glow-opacity-18: 28%;\n --glow-opacity-15: 24%;\n --glow-opacity-14: 22%;\n --glow-opacity-12: 20%;\n --glow-opacity-10: 16%;\n --glow-opacity-8: 12%;\n }\n\n .blob {\n position: absolute;\n border-radius: 50%;\n filter: blur(180px);\n pointer-events: none;\n will-change: transform, filter;\n }\n\n / DEFAULT VARIANT /\n .default-primary {\n inline-size: 50vmax;\n block-size: 50vmax;\n top: -10vmax;\n left: -10vmax;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-primary) var(--glow-opacity-15),\n transparent\n );\n }\n\n .default-secondary {\n inline-size: 45vmax;\n block-size: 45vmax;\n bottom: -15vmax;\n right: -10vmax;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-tertiary) var(--glow-opacity-12),\n transparent\n );\n }\n\n .default-tertiary {\n inline-size: 40vmax;\n block-size: 40vmax;\n top: 25vh;\n right: 15vw;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-secondary) var(--glow-opacity-10),\n transparent\n );\n }\n\n / SPLIT VARIANT /\n .split-left {\n inline-size: 60vmax;\n block-size: 60vmax;\n top: 20vh;\n left: -20vmax;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-primary) var(--glow-opacity-12),\n transparent\n );\n }\n\n .split-right {\n inline-size: 60vmax;\n block-size: 60vmax;\n top: 20vh;\n right: -20vmax;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-tertiary) var(--glow-opacity-10),\n transparent\n );\n }\n\n / TOP-BAR VARIANT /\n .top-bar-primary {\n inline-size: 35vmax;\n block-size: 20vmax;\n top: -10vmax;\n left: 10vw;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-primary) var(--glow-opacity-18),\n transparent\n );\n }\n\n .top-bar-secondary {\n inline-size: 35vmax;\n block-size: 20vmax;\n top: -10vmax;\n left: 40vw;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-tertiary) var(--glow-opacity-15),\n transparent\n );\n }\n\n .top-bar-tertiary {\n inline-size: 35vmax;\n block-size: 20vmax;\n top: -10vmax;\n left: 70vw;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-secondary) var(--glow-opacity-12),\n transparent\n );\n }\n\n / CORNERS VARIANT /\n .corner-tl {\n inline-size: 30vmax;\n block-size: 30vmax;\n top: -10vmax;\n left: -10vmax;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-primary) var(--glow-opacity-15),\n transparent\n );\n }\n\n .corner-tr {\n inline-size: 30vmax;\n block-size: 30vmax;\n top: -10vmax;\n right: -10vmax;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-tertiary) var(--glow-opacity-12),\n transparent\n );\n }\n\n .corner-bl {\n inline-size: 30vmax;\n block-size: 30vmax;\n bottom: -10vmax;\n left: -10vmax;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-secondary) var(--glow-opacity-12),\n transparent\n );\n }\n\n .corner-br {\n inline-size: 30vmax;\n block-size: 30vmax;\n bottom: -10vmax;\n right: -10vmax;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-primary) var(--glow-opacity-10),\n transparent\n );\n }\n\n / AURORA VARIANT /\n .aurora-1 {\n inline-size: 55vmax;\n block-size: 40vmax;\n top: -15vmax;\n left: 5vw;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-primary) var(--glow-opacity-12),\n transparent\n );\n animation: aurora-float-1 25s ease-in-out infinite alternate;\n }\n\n .aurora-2 {\n inline-size: 50vmax;\n block-size: 45vmax;\n top: -10vmax;\n left: 30vw;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-tertiary) var(--glow-opacity-10),\n transparent\n );\n animation: aurora-float-2 22s ease-in-out infinite alternate;\n }\n\n .aurora-3 {\n inline-size: 60vmax;\n block-size: 40vmax;\n top: -20vmax;\n right: 5vw;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-secondary) var(--glow-opacity-12),\n transparent\n );\n animation: aurora-float-3 28s ease-in-out infinite alternate;\n }\n\n .aurora-4 {\n inline-size: 45vmax;\n block-size: 40vmax;\n bottom: -15vmax;\n left: 25vw;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-primary) var(--glow-opacity-8),\n transparent\n );\n animation: aurora-float-4 26s ease-in-out infinite alternate;\n }\n\n / SPOTLIGHT VARIANT /\n .spotlight-primary {\n inline-size: 55vmax;\n block-size: 55vmax;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-primary) var(--glow-opacity-14),\n transparent\n );\n animation: spotlight-pulse-1 12s ease-in-out infinite alternate;\n }\n\n .spotlight-secondary {\n inline-size: 45vmax;\n block-size: 45vmax;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-tertiary) var(--glow-opacity-10),\n transparent\n );\n animation: spotlight-pulse-2 16s ease-in-out infinite alternate;\n }\n\n .spotlight-tertiary {\n inline-size: 35vmax;\n block-size: 35vmax;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-secondary) var(--glow-opacity-8),\n transparent\n );\n animation: spotlight-pulse-3 10s ease-in-out infinite alternate;\n }\n\n / NEBULA VARIANT /\n .nebula-1 {\n inline-size: 65vmax;\n block-size: 65vmax;\n top: 10vh;\n left: 10vw;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-primary) var(--glow-opacity-12),\n transparent\n );\n animation: nebula-drift-1 30s ease-in-out infinite;\n }\n\n .nebula-2 {\n inline-size: 55vmax;\n block-size: 55vmax;\n bottom: 10vh;\n right: 10vw;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-tertiary) var(--glow-opacity-12),\n transparent\n );\n animation: nebula-drift-2 35s ease-in-out infinite;\n }\n\n .nebula-3 {\n inline-size: 50vmax;\n block-size: 50vmax;\n top: 30vh;\n right: 15vw;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-secondary) var(--glow-opacity-10),\n transparent\n );\n animation: nebula-drift-3 28s ease-in-out infinite;\n }\n\n .nebula-4 {\n inline-size: 45vmax;\n block-size: 45vmax;\n bottom: 20vh;\n left: 15vw;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-primary) var(--glow-opacity-8),\n transparent\n );\n animation: nebula-drift-4 32s ease-in-out infinite;\n }\n\n / HORIZON VARIANT /\n .horizon-primary {\n inline-size: 55vmax;\n block-size: 30vmax;\n bottom: -15vmax;\n left: 10vw;\n border-radius: 50% 50% 0 0;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-primary) var(--glow-opacity-15),\n transparent\n );\n animation: horizon-pulse-1 8s ease-in-out infinite alternate;\n }\n\n .horizon-secondary {\n inline-size: 60vmax;\n block-size: 35vmax;\n bottom: -20vmax;\n left: 30vw;\n border-radius: 50% 50% 0 0;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-tertiary) var(--glow-opacity-12),\n transparent\n );\n animation: horizon-pulse-2 11s ease-in-out infinite alternate;\n }\n\n .horizon-tertiary {\n inline-size: 50vmax;\n block-size: 28vmax;\n bottom: -18vmax;\n right: 10vw;\n border-radius: 50% 50% 0 0;\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-secondary) var(--glow-opacity-10),\n transparent\n );\n animation: horizon-pulse-3 9s ease-in-out infinite alternate;\n }\n\n / SPIRAL VARIANT /\n .spiral-1 {\n inline-size: 45vmax;\n block-size: 45vmax;\n top: calc(50% - 22.5vmax);\n left: calc(50% - 22.5vmax);\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-primary) var(--glow-opacity-12),\n transparent\n );\n animation: spiral-orbit-1 25s linear infinite;\n }\n\n .spiral-2 {\n inline-size: 40vmax;\n block-size: 40vmax;\n top: calc(50% - 20vmax);\n left: calc(50% - 20vmax);\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-tertiary) var(--glow-opacity-10),\n transparent\n );\n animation: spiral-orbit-2 30s linear infinite;\n }\n\n .spiral-3 {\n inline-size: 35vmax;\n block-size: 35vmax;\n top: calc(50% - 17.5vmax);\n left: calc(50% - 17.5vmax);\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-secondary) var(--glow-opacity-10),\n transparent\n );\n animation: spiral-orbit-3 20s linear infinite;\n }\n}\n\n/ Animations for premium organic feeling /\n@keyframes aurora-float-1 {\n 0% {\n transform: translate(0, 0) scale(1);\n }\n 100% {\n transform: translate(5vw, 5vh) scale(1.1);\n }\n}\n\n@keyframes aurora-float-2 {\n 0% {\n transform: translate(0, 0) scale(1.1);\n }\n 100% {\n transform: translate(-4vw, -6vh) scale(0.95);\n }\n}\n\n@keyframes aurora-float-3 {\n 0% {\n transform: translate(0, 0) scale(0.95);\n }\n 100% {\n transform: translate(6vw, -4vh) scale(1.05);\n }\n}\n\n@keyframes aurora-float-4 {\n 0% {\n transform: translate(0, 0) scale(1.05);\n }\n 100% {\n transform: translate(-5vw, 4vh) scale(1);\n }\n}\n\n@keyframes spotlight-pulse-1 {\n 0% {\n transform: translate(-50%, -50%) scale(0.9);\n }\n 100% {\n transform: translate(-50%, -50%) scale(1.1);\n }\n}\n\n@keyframes spotlight-pulse-2 {\n 0% {\n transform: translate(-48%, -52%) scale(1.1);\n }\n 100% {\n transform: translate(-52%, -48%) scale(0.9);\n }\n}\n\n@keyframes spotlight-pulse-3 {\n 0% {\n transform: translate(-52%, -48%) scale(0.95);\n }\n 100% {\n transform: translate(-48%, -52%) scale(1.05);\n }\n}\n\n@keyframes nebula-drift-1 {\n 0% {\n transform: translate(0, 0) scale(1) rotate(0deg);\n }\n 33% {\n transform: translate(10vw, 15vh) scale(1.15) rotate(120deg);\n }\n 66% {\n transform: translate(-10vw, 10vh) scale(0.9) rotate(240deg);\n }\n 100% {\n transform: translate(0, 0) scale(1) rotate(360deg);\n }\n}\n\n@keyframes nebula-drift-2 {\n 0% {\n transform: translate(0, 0) scale(1) rotate(0deg);\n }\n 33% {\n transform: translate(-15vw, -10vh) scale(0.9) rotate(-120deg);\n }\n 66% {\n transform: translate(5vw, -15vh) scale(1.1) rotate(-240deg);\n }\n 100% {\n transform: translate(0, 0) scale(1) rotate(-360deg);\n }\n}\n\n@keyframes nebula-drift-3 {\n 0% {\n transform: translate(0, 0) scale(1);\n }\n 50% {\n transform: translate(-8vw, 12vh) scale(1.2);\n }\n 100% {\n transform: translate(0, 0) scale(1);\n }\n}\n\n@keyframes nebula-drift-4 {\n 0% {\n transform: translate(0, 0) scale(1.1);\n }\n 50% {\n transform: translate(12vw, -10vh) scale(0.9);\n }\n 100% {\n transform: translate(0, 0) scale(1.1);\n }\n}\n\n@keyframes horizon-pulse-1 {\n 0% {\n transform: translateY(0) scale(0.95);\n }\n 100% {\n transform: translateY(-2vmax) scale(1.05);\n }\n}\n\n@keyframes horizon-pulse-2 {\n 0% {\n transform: translateY(0) scale(1.05);\n }\n 100% {\n transform: translateY(-3vmax) scale(0.95);\n }\n}\n\n@keyframes horizon-pulse-3 {\n 0% {\n transform: translateY(0) scale(0.9);\n }\n 100% {\n transform: translateY(-2vmax) scale(1.1);\n }\n}\n\n@keyframes spiral-orbit-1 {\n 0% {\n transform: rotate(0deg) translate(15vmax) rotate(0deg) scale(0.9);\n }\n 50% {\n transform: rotate(180deg) translate(15vmax) rotate(-180deg) scale(1.1);\n }\n 100% {\n transform: rotate(360deg) translate(15vmax) rotate(-360deg) scale(0.9);\n }\n}\n\n@keyframes spiral-orbit-2 {\n 0% {\n transform: rotate(0deg) translate(-12vmax) rotate(0deg) scale(1.1);\n }\n 50% {\n transform: rotate(-180deg) translate(-12vmax) rotate(180deg) scale(0.9);\n }\n 100% {\n transform: rotate(-360deg) translate(-12vmax) rotate(360deg) scale(1.1);\n }\n}\n\n@keyframes spiral-orbit-3 {\n 0% {\n transform: rotate(90deg) translate(10vmax) rotate(-90deg) scale(1);\n }\n 50% {\n transform: rotate(270deg) translate(10vmax) rotate(-270deg) scale(0.85);\n }\n 100% {\n transform: rotate(450deg) translate(10vmax) rotate(-450deg) scale(1);\n }\n}\n","import clsx from \"clsx\";\nimport type React from \"react\";\nimport styles from \"./radialGlowDecorator.module.css\";\n\n/\n Predefined layout, blob placement, and motion variants for the {@link RadialGlowDecorator} component.\n \n - `\"default\"`: 3 static blobs (primary, secondary, tertiary) spread across the viewport.\n * - `\"split\"`: 2 static blobs separated left and right, ideal for two-column or split layouts.\n * - `\"top-bar\"`: 3 horizontal blobs aligned across the top fold or header area.\n * - `\"corners\"`: 4 static blobs anchored in each of the four screen corners.\n * - `\"aurora\"`: 4 organic floating blobs with continuous drift animation for atmospheric ambiance.\n * - `\"spotlight\"`: 3 centered, layered blobs with an organic pulsating scale animation.\n * - `\"nebula\"`: 4 orbiting and drifting blobs creating an immersive, fluid cosmic look.\n * - `\"horizon\"`: 3 bottom-anchored blobs with rising and pulsating motion for footers and page bottoms.\n * - `\"spiral\"`: 3 blobs following a circular orbiting path for dynamic centerpiece effects.\n /\nexport type RadialGlowDecoratorVariant =\n \| \"default\"\n \| \"split\"\n \| \"top-bar\"\n \| \"corners\"\n \| \"aurora\"\n \| \"spotlight\"\n \| \"nebula\"\n \| \"horizon\"\n \| \"spiral\";\n\n/\n Props for the {@link RadialGlowDecorator} component.\n /\nexport interface RadialGlowDecoratorProps {\n /\n Z-index layer depth for the decorator container.\n \n @default -10\n /\n zIndex?: number;\n\n /* Additional CSS class names to apply to the decorator container. /\n className?: string;\n\n /* Custom inline styles to apply to the decorator container. /\n style?: React.CSSProperties;\n\n /\n Predefined layout, blob placement, and animation variant.\n \n @default \"default\"\n /\n variant?: RadialGlowDecoratorVariant;\n}\n\n/\n A non-blocking decorative background component that renders smooth, theme-aware radial glow gradients.\n \n Layers multiple blurred color blobs to produce premium ambient lighting and background washes.\n * Automatically scales opacities between light and dark modes to ensure visual balance.\n * Spans the full page with `pointer-events: none` and `aria-hidden=\"true\"`, ensuring no interference\n * with user interactions or accessibility trees.\n \n @example\n * ```tsx\n * import { RadialGlowDecorator } from '@adgytec/web-ui-components';\n \n // Static multi-color radial gradient\n * <RadialGlowDecorator variant=\"default\" />\n \n // Continuous floating aurora animation with custom z-index\n * <RadialGlowDecorator variant=\"aurora\" zIndex={-20} />\n \n // Centered pulsating spotlight for hero sections\n * <RadialGlowDecorator variant=\"spotlight\" />\n * ```\n */\nexport const RadialGlowDecorator: React.FC<RadialGlowDecoratorProps> = ({\n zIndex = -10,\n className,\n style,\n variant = \"default\",\n}) => {\n return (\n <div\n className={clsx(styles[\"container\"], className)}\n aria-hidden=\"true\"\n data-variant={variant}\n style={{ zIndex, ...style }}\n >\n {variant === \"default\" && (\n <>\n <div\n className={clsx(\n styles[\"blob\"],\n styles[\"default-primary\"]\n )}\n />\n <div\n className={clsx(\n styles[\"blob\"],\n styles[\"default-secondary\"]\n )}\n />\n <div\n className={clsx(\n styles[\"blob\"],\n styles[\"default-tertiary\"]\n )}\n />\n </>\n )}\n {variant === \"split\" && (\n <>\n <div\n className={clsx(styles[\"blob\"], styles[\"split-left\"])}\n />\n <div\n className={clsx(styles[\"blob\"], styles[\"split-right\"])}\n />\n </>\n )}\n {variant === \"top-bar\" && (\n <>\n <div\n className={clsx(\n styles[\"blob\"],\n styles[\"top-bar-primary\"]\n )}\n />\n <div\n className={clsx(\n styles[\"blob\"],\n styles[\"top-bar-secondary\"]\n )}\n />\n <div\n className={clsx(\n styles[\"blob\"],\n styles[\"top-bar-tertiary\"]\n )}\n />\n </>\n )}\n {variant === \"corners\" && (\n <>\n <div\n className={clsx(styles[\"blob\"], styles[\"corner-tl\"])}\n />\n <div\n className={clsx(styles[\"blob\"], styles[\"corner-tr\"])}\n />\n <div\n className={clsx(styles[\"blob\"], styles[\"corner-bl\"])}\n />\n <div\n className={clsx(styles[\"blob\"], styles[\"corner-br\"])}\n />\n </>\n )}\n {variant === \"aurora\" && (\n <>\n <div className={clsx(styles[\"blob\"], styles[\"aurora-1\"])} />\n <div className={clsx(styles[\"blob\"], styles[\"aurora-2\"])} />\n <div className={clsx(styles[\"blob\"], styles[\"aurora-3\"])} />\n <div className={clsx(styles[\"blob\"], styles[\"aurora-4\"])} />\n </>\n )}\n {variant === \"spotlight\" && (\n <>\n <div\n className={clsx(\n styles[\"blob\"],\n styles[\"spotlight-primary\"]\n )}\n />\n <div\n className={clsx(\n styles[\"blob\"],\n styles[\"spotlight-secondary\"]\n )}\n />\n <div\n className={clsx(\n styles[\"blob\"],\n styles[\"spotlight-tertiary\"]\n )}\n />\n </>\n )}\n {variant === \"nebula\" && (\n <>\n <div className={clsx(styles[\"blob\"], styles[\"nebula-1\"])} />\n <div className={clsx(styles[\"blob\"], styles[\"nebula-2\"])} />\n <div className={clsx(styles[\"blob\"], styles[\"nebula-3\"])} />\n <div className={clsx(styles[\"blob\"], styles[\"nebula-4\"])} />\n </>\n )}\n {variant === \"horizon\" && (\n <>\n <div\n className={clsx(\n styles[\"blob\"],\n styles[\"horizon-primary\"]\n )}\n />\n <div\n className={clsx(\n styles[\"blob\"],\n styles[\"horizon-secondary\"]\n )}\n />\n <div\n className={clsx(\n styles[\"blob\"],\n styles[\"horizon-tertiary\"]\n )}\n />\n </>\n )}\n {variant === \"spiral\" && (\n <>\n <div className={clsx(styles[\"blob\"], styles[\"spiral-1\"])} />\n <div className={clsx(styles[\"blob\"], styles[\"spiral-2\"])} />\n <div className={clsx(styles[\"blob\"], styles[\"spiral-3\"])} />\n </>\n )}\n </div>\n );\n};\n"],"mappings":"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"}

package/dist/chunks/Radio CHANGED Viewed

@@ -7,78 +7,65 @@ import { Label as a } from "../components/Input/Label/index.js";
 import { clsx as o } from "clsx";
 import { createContext as s, useContext as c } from "react";
 import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
-import { Radio as f, RadioGroup as p } from "react-aria-components";
-import '../assets/Radio.css';//#region src/components/Input/Radio/context.ts
-var m = e(), h = s({}), g = {
-	"radio-group": "_radio-group_12t9w_15",
-	"radio-items": "_radio-items_12t9w_58",
-	radio: "_radio_12t9w_15",
-	"state-layer": "_state-layer_12t9w_149",
-	indicator: "_indicator_12t9w_169",
-	"indicator-icon": "_indicator-icon_12t9w_252"
-}, _ = (e) => {
-	let r = (0, m.c)(17), i, a, s, p, _;
-	r[0] === e ? (i = r[1], a = r[2], s = r[3], p = r[4], _ = r[5]) : ({className: a, children: i, labelPlacement: p, containerStateLayer: s, ..._} = e, r[0] = e, r[1] = i, r[2] = a, r[3] = s, r[4] = p, r[5] = _);
-	let { labelPlacement: v, containerStateLayer: y } = c(h), b = p ?? v ?? "end", x = s ?? y ?? !1, S;
-	r[6] !== a || r[7] !== x ? (S = (e) => o(g.radio, x && g["state-layer"], n.labelLarge, typeof a == "function" ? a(e) : a), r[6] = a, r[7] = x, r[8] = S) : S = r[8];
-	let C;
-	r[9] !== i || r[10] !== b || r[11] !== x ? (C = (e) => {
-		let { isSelected: n, isHovered: r, isDisabled: a, isFocused: s, isFocusVisible: c, isPressed: f, isInvalid: p } = e, m = {
-			"data-selected": n || void 0,
-			"data-hovered": r || void 0,
-			"data-disabled": a || void 0,
-			"data-focused": s || void 0,
-			"data-focus-visible": c || void 0,
-			"data-pressed": f || void 0,
-			"data-show-state-layer": !x || void 0,
-			"data-invalid": p || void 0
-		}, h = typeof i == "function" ? i(e) : i;
-		return /* @__PURE__ */ d(l, { children: [
-			b === "start" && h,
-			/* @__PURE__ */ u("span", {
-				className: o(g.indicator, t),
-				...m,
-				children: /* @__PURE__ */ u("span", {
-					className: o(g["indicator-icon"]),
-					...m
-				})
-			}),
-			b === "end" && h
-		] });
-	}, r[9] = i, r[10] = b, r[11] = x, r[12] = C) : C = r[12];
-	let w;
-	return r[13] !== _ || r[14] !== S || r[15] !== C ? (w = /* @__PURE__ */ u(f, {
-		className: S,
-		..._,
-		"data-radio": !0,
-		children: C
-	}), r[13] = _, r[14] = S, r[15] = C, r[16] = w) : w = r[16], w;
-}, v = ({ label: e, description: t, errorMessage: n, showDescriptionOnInvalid: s = !1, children: c, className: f, radioItemsGap: m = 24, labelPlacement: _, containerStateLayer: v, ...y }) => /* @__PURE__ */ u(h, {
-	value: {
-		labelPlacement: _,
-		containerStateLayer: v
-	},
-	children: /* @__PURE__ */ u(p, {
-		className: (e) => o(g["radio-group"], typeof f == "function" ? f(e) : f),
-		...y,
+import { RadioButton as f, RadioField as p, RadioGroup as m } from "react-aria-components";
+import '../assets/Radio.css';// src/components/Input/Radio/context.ts
+var h = e(), g = s({}), _ = {
+	"radio-group": "_radio-group_59fre_15",
+	radio: "_radio_59fre_15",
+	indicator: "_indicator_59fre_141",
+	"indicator-icon": "_indicator-icon_59fre_224"
+}, v = (e) => {
+	let r = (0, h.c)(10), i, a, s;
+	r[0] === e ? (i = r[1], a = r[2], s = r[3]) : ({children: i, labelPlacement: a, ...s} = e, r[0] = e, r[1] = i, r[2] = a, r[3] = s);
+	let { labelPlacement: m } = c(g), v = a ?? m ?? "end", y;
+	r[4] !== i || r[5] !== v ? (y = (e) => {
+		let r = typeof i == "function" ? i(e) : i;
+		return /* @__PURE__ */ u(f, {
+			className: o(_.radio, n.labelLarge),
+			children: (e) => {
+				let { isSelected: n, isHovered: i, isDisabled: a, isFocused: s, isFocusVisible: c, isPressed: f, isInvalid: p } = e, m = {
+					"data-selected": n || void 0,
+					"data-hovered": i || void 0,
+					"data-disabled": a || void 0,
+					"data-focused": s || void 0,
+					"data-focus-visible": c || void 0,
+					"data-pressed": f || void 0,
+					"data-invalid": p || void 0
+				};
+				return /* @__PURE__ */ d(l, { children: [
+					v === "start" && r,
+					/* @__PURE__ */ u("span", {
+						className: o(_.indicator, t),
+						...m,
+						children: /* @__PURE__ */ u("span", {
+							className: o(_["indicator-icon"]),
+							...m
+						})
+					}),
+					v === "end" && r
+				] });
+			}
+		});
+	}, r[4] = i, r[5] = v, r[6] = y) : y = r[6];
+	let b;
+	return r[7] !== s || r[8] !== y ? (b = /* @__PURE__ */ u(p, {
+		...s,
+		children: y
+	}), r[7] = s, r[8] = y, r[9] = b) : b = r[9], b;
+}, y = ({ label: e, description: t, errorMessage: n, showDescriptionOnInvalid: s = !1, children: c, className: f, labelPlacement: p, ...h }) => /* @__PURE__ */ u(g, {
+	value: { labelPlacement: p },
+	children: /* @__PURE__ */ u(m, {
+		className: (e) => o(_["radio-group"], typeof f == "function" ? f(e) : f),
+		...h,
 		"data-radio-group": !0,
-		children: ({ orientation: f, isInvalid: p }) => {
-			let h = t && (!p || p && s);
-			return /* @__PURE__ */ d(l, { children: [
-				e && /* @__PURE__ */ u(a, { children: e }),
-				/* @__PURE__ */ u("div", {
-					"data-orientation": f,
-					className: o(g["radio-items"]),
-					style: { gap: `calc(${m} * var(--dp, 1px))` },
-					children: c
-				}),
-				h && /* @__PURE__ */ u(r, { children: t }),
-				/* @__PURE__ */ u(i, { children: n })
-			] });
-		}
+		children: ({ isInvalid: o }) => /* @__PURE__ */ d(l, { children: [
+			e && /* @__PURE__ */ u(a, { children: e }),
+			c,
+			t && (!o || o && s) && /* @__PURE__ */ u(r, { children: t }),
+			/* @__PURE__ */ u(i, { children: n })
+		] })
 	})
 });
-//#endregion
-export { _ as n, v as t };
+export { v as n, y as t };
 //# sourceMappingURL=Radio.map

package/dist/chunks/Radio.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio","names":["renderProps","Radio","_c","styles","_Fragment","AriaRadio","RadioGroup","AriaRadioGroup","styles","_Fragment","Label","FieldError","require_compiler_runtime","typography","FieldError$1","Label$1","import_compiler_runtime","RadioGroupContext","createContext","radio_module_default","Radio$1","$","children","className","containerStateLayer","labelPlacement","props","t0","groupLabelPlacement","groupContainerStateLayer","useContext","placement","stateLayer","t1","clsx","renderProps","t2","renderProps_0","dataAttrs","isSelected","isHovered","isDisabled","isFocused","isFocusVisible","isPressed","isInvalid","label","Fragment","TapTarget","t3","Radio","RadioGroup$1","RadioGroup","showDescription","description","showDescriptionOnInvalid","orientation","radioItemsGap","Description","errorMessage"],"sources":["../../src/components/Input/Radio/context.ts","../../src/components/Input/Radio/radio.module.css","../../src/components/Input/Radio/Radio.tsx","../../src/components/Input/Radio/RadioGroup.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport type { RadioLabelPlacement } from \"./types\";\n\n/*\n Shared context value provided by {@link RadioGroup} to child {@link Radio} components.\n /\nexport interface RadioGroupContextValue {\n /* Inherited label placement. /\n labelPlacement?: RadioLabelPlacement;\n /* Inherited container state layer flag. /\n containerStateLayer?: boolean;\n}\n\n/\n Context communicating group-level styling configurations to nested radio buttons.\n /\nexport const RadioGroupContext = createContext<RadioGroupContextValue>({});\n","/ configurable tokens\n\n --md-radio-icon-color\n* --md-radio-selected-icon-color\n\n --md-radio-interaction-icon-color\n* --md-radio-selected-interaction-icon-color\n\n --md-radio-state-layer-color\n* --md-radio-selected-state-layer-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .radio-group {\n / configurable tokens /\n --_md-radio-icon-color: var(\n --md-radio-icon-color,\n var(--md-sys-color-on-surface-variant)\n );\n --_md-radio-selected-icon-color: var(\n --md-radio-selected-icon-color,\n var(--md-sys-color-primary)\n );\n\n --_md-radio-interaction-icon-color: var(\n --md-radio-interaction-icon-color,\n var(--md-sys-color-on-surface)\n );\n --_md-radio-selected-interaction-icon-color: var(\n --md-radio-selected-interaction-icon-color,\n var(--_md-radio-selected-icon-color)\n );\n\n --_md-radio-state-layer-color: var(\n --md-radio-state-layer-color,\n var(--md-sys-color-on-surface)\n );\n --_md-radio-selected-state-layer-color: var(\n --md-radio-selected-state-layer-color,\n var(--_md-radio-selected-icon-color)\n );\n\n / configurable tokens end /\n\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 .radio-items {\n display: grid;\n\n &[data-orientation=\"horizontal\"] {\n display: flex;\n }\n }\n\n .radio {\n / invalid tokens /\n --_md-radio-invalid-icon-color: var(--md-sys-color-error);\n --_md-radio-invalid-state-layer-color: var(\n --_md-radio-invalid-icon-color\n );\n\n / indicator tokens /\n --_md-radio-size: calc(20 var(--dp, 1px));\n --_md-radio-icon-size: calc(\n var(--_md-radio-size) -\n calc(10 * var(--dp, 1px))\n );\n --_md-radio-state-layer-size: calc(40 * var(--dp, 1px));\n\n /* state layer tokens /\n --_md-radio-pressed-state-layer-color: var(\n --_md-radio-selected-state-layer-color\n );\n --_md-radio-pressed-selected-state-layer-color: var(\n --_md-radio-state-layer-color\n );\n\n --_state-layer-opacity: 0;\n --_state-color: var(--_md-radio-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 align-items: center;\n gap: var(--md-sys-layout-space-16);\n\n color: inherit;\n cursor: pointer;\n\n & {\n cursor: inherit;\n }\n\n &[data-disabled] {\n cursor: default;\n }\n\n &[data-selected] {\n --_state-color: var(--_md-radio-selected-state-layer-color);\n }\n\n &[data-pressed] {\n --_state-layer-opacity: var(--md-sys-state-pressed);\n --_state-color: var(--_md-radio-pressed-state-layer-color);\n\n &[data-selected] {\n --_state-color: var(\n --_md-radio-pressed-selected-state-layer-color\n );\n }\n }\n\n &[data-invalid] {\n --_state-color: var(--_md-radio-invalid-state-layer-color);\n\n &[data-selected] {\n --_state-color: var(--_md-radio-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 --_indicator-color: var(--_md-radio-icon-color);\n\n position: relative;\n\n inline-size: var(--_md-radio-size);\n aspect-ratio: 1 / 1;\n border-radius: var(--md-sys-shape-corner-radius-full);\n\n border: var(--md-sys-shape-border-width-thick) solid\n var(--_indicator-color);\n\n transition: 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-selected] {\n --_indicator-color: var(--_md-radio-selected-icon-color);\n }\n\n &[data-invalid] {\n --_indicator-color: var(--_md-radio-invalid-icon-color);\n }\n\n &[data-pressed],\n &[data-hovered],\n &[data-focus-visible] {\n --_indicator-color: var(--_md-radio-interaction-icon-color);\n\n &[data-selected] {\n --_indicator-color: var(\n --_md-radio-selected-interaction-icon-color\n );\n }\n\n &[data-invalid] {\n --_indicator-color: var(--_md-radio-invalid-icon-color);\n }\n }\n\n &[data-disabled] {\n --_indicator-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n\n &[data-selected] {\n --_indicator-color: 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-block-start: 50%;\n inset-inline-start: 50%;\n transform: translate(-50%, -50%);\n\n inline-size: var(--_md-radio-state-layer-size);\n aspect-ratio: 1 / 1;\n border-radius: var(--md-sys-shape-corner-radius-full);\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 center icon /\n .indicator-icon {\n content: \"\";\n\n position: absolute;\n inline-size: var(--_md-radio-icon-size);\n aspect-ratio: 1 / 1;\n\n inset-inline-start: 50%;\n inset-block-start: 50%;\n translate: -50% -50%;\n\n background-color: var(--_indicator-color);\n border-radius: var(--md-sys-shape-corner-radius-full);\n\n scale: 0;\n\n transition:\n background-color var(--md-sys-motion-expressive-default-effects)\n var(--md-sys-motion-expressive-default-effects-duration),\n scale var(--md-sys-motion-standard-default-spatial)\n var(--md-sys-motion-standard-default-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-selected] {\n scale: 1;\n }\n }\n\n .indicator[data-focus-visible] {\n --focus-indicator-color: var(--md-sys-color-secondary);\n --focus-indicator-thickness: calc(3 var(--dp, 1px));\n --focus-indicator-offset: calc(2 * var(--dp, 1px));\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","import { clsx } from \"clsx\";\nimport { useContext } from \"react\";\nimport { Radio as AriaRadio } from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport { TapTarget } from \"@/utils/tapTarget\";\nimport { RadioGroupContext } from \"./context\";\nimport styles from \"./radio.module.css\";\nimport type { RadioProps } from \"./types\";\n\n/*\n A radio button control implementing Material Design 3 Radio guidelines.\n \n Designed for single-choice options within a {@link RadioGroup}. Features animated\n * selection dot scaling, state layers, and flexible label positioning.\n \n @example\n * ```tsx\n * import { RadioGroup, Radio } from '@adgytec/web-ui-components';\n \n <RadioGroup label=\"Select an option\">\n * <Radio value=\"1\">Option One</Radio>\n * <Radio value=\"2\">Option Two</Radio>\n * </RadioGroup>\n * ```\n /\nexport const Radio: React.FC<RadioProps> = ({\n className,\n children,\n labelPlacement,\n containerStateLayer,\n ...props\n}) => {\n const {\n labelPlacement: groupLabelPlacement,\n containerStateLayer: groupContainerStateLayer,\n } = useContext(RadioGroupContext);\n const placement = labelPlacement ?? groupLabelPlacement ?? \"end\";\n const stateLayer = containerStateLayer ?? groupContainerStateLayer ?? false;\n\n return (\n <AriaRadio\n className={(renderProps) =>\n clsx(\n styles[\"radio\"],\n stateLayer && styles[\"state-layer\"],\n typography.labelLarge,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-radio\n >\n {(renderProps) => {\n const {\n isSelected,\n isHovered,\n isDisabled,\n isFocused,\n isFocusVisible,\n isPressed,\n isInvalid,\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-show-state-layer\": !stateLayer \|\| undefined,\n \"data-invalid\": isInvalid \|\| 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 <span\n className={clsx(styles[\"indicator-icon\"])}\n {...dataAttrs}\n ></span>\n </span>\n\n {placement === \"end\" && label}\n </>\n );\n }}\n </AriaRadio>\n );\n};\n","import { clsx } from \"clsx\";\nimport { RadioGroup as AriaRadioGroup } from \"react-aria-components\";\nimport { Description } from \"../Description\";\nimport { FieldError } from \"../FieldError\";\nimport { Label } from \"../Label\";\nimport { RadioGroupContext } from \"./context\";\nimport styles from \"./radio.module.css\";\nimport type { RadioGroupProps } from \"./types\";\n\n/\n A container managing mutually exclusive {@link Radio} options.\n \n Coordinates single-selection radio values, keyboard navigation arrow-key roving,\n * accessible labels, helper descriptions, and validation error messages.\n \n @example\n * ```tsx\n * import { RadioGroup, Radio } from '@adgytec/web-ui-components';\n \n <RadioGroup label=\"Delivery Speed\" defaultValue=\"standard\">\n * <Radio value=\"standard\">Standard (3-5 days)</Radio>\n * <Radio value=\"express\">Express (1-2 days)</Radio>\n * <Radio value=\"overnight\">Overnight</Radio>\n * </RadioGroup>\n * ```\n /\nexport const RadioGroup: React.FC<RadioGroupProps> = ({\n label,\n description,\n errorMessage,\n showDescriptionOnInvalid = false,\n children,\n className,\n radioItemsGap = 24,\n labelPlacement,\n containerStateLayer,\n ...props\n}) => {\n return (\n <RadioGroupContext value={{ labelPlacement, containerStateLayer }}>\n <AriaRadioGroup\n className={(renderProps) =>\n clsx(\n styles[\"radio-group\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-radio-group\n >\n {({ orientation, isInvalid }) => {\n const showDescription =\n description &&\n (!isInvalid \|\| (isInvalid && showDescriptionOnInvalid));\n\n return (\n <>\n {label && <Label>{label}</Label>}\n\n <div\n data-orientation={orientation}\n className={clsx(styles[\"radio-items\"])}\n style={{\n gap: `calc(${radioItemsGap} 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 </AriaRadioGroup>\n </RadioGroupContext>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"Radio","names":["_c","styles","_Fragment","RadioGroup","AriaRadioGroup","styles","_Fragment","Label","FieldError","require_compiler_runtime","typography","FieldError$1","Label$1","import_compiler_runtime","RadioGroupContext","createContext","radio_module_default","Radio","$","children","labelPlacement","props","t0","groupLabelPlacement","useContext","placement","t1","label","renderProps","RadioButton","clsx","buttonRenderProps","dataAttrs","isSelected","isHovered","isDisabled","isFocused","isFocusVisible","isPressed","isInvalid","Fragment","TapTarget","t2","RadioField","RadioGroup$1","RadioGroup","className","description","showDescriptionOnInvalid","Description","errorMessage"],"sources":["../../src/components/Input/Radio/context.ts","../../src/components/Input/Radio/radio.module.css","../../src/components/Input/Radio/Radio.tsx","../../src/components/Input/Radio/RadioGroup.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport type { RadioLabelPlacement } from \"./types\";\n\n/*\n Configuration context value passed down from [`RadioGroup`](src/components/Input/Radio/RadioGroup.tsx) to child [`Radio`](src/components/Input/Radio/Radio.tsx) components.\n /\nexport interface RadioGroupContextValue {\n /* Inherited label placement for child radio items. /\n labelPlacement?: RadioLabelPlacement;\n}\n\n/\n Context communicating group-level styling configurations to nested radio buttons.\n /\nexport const RadioGroupContext = createContext<RadioGroupContextValue>({});\n","/ configurable tokens\n\n --md-radio-icon-color\n* --md-radio-selected-icon-color\n\n --md-radio-interaction-icon-color\n* --md-radio-selected-interaction-icon-color\n\n --md-radio-state-layer-color\n* --md-radio-selected-state-layer-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .radio-group {\n / configurable tokens /\n --_md-radio-icon-color: var(\n --md-radio-icon-color,\n var(--md-sys-color-on-surface-variant)\n );\n --_md-radio-selected-icon-color: var(\n --md-radio-selected-icon-color,\n var(--md-sys-color-primary)\n );\n\n --_md-radio-interaction-icon-color: var(\n --md-radio-interaction-icon-color,\n var(--md-sys-color-on-surface)\n );\n --_md-radio-selected-interaction-icon-color: var(\n --md-radio-selected-interaction-icon-color,\n var(--_md-radio-selected-icon-color)\n );\n\n --_md-radio-state-layer-color: var(\n --md-radio-state-layer-color,\n var(--md-sys-color-on-surface)\n );\n --_md-radio-selected-state-layer-color: var(\n --md-radio-selected-state-layer-color,\n var(--_md-radio-selected-icon-color)\n );\n\n / configurable tokens end /\n\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 .radio {\n / invalid tokens /\n --_md-radio-invalid-icon-color: var(--md-sys-color-error);\n --_md-radio-invalid-state-layer-color: var(\n --_md-radio-invalid-icon-color\n );\n\n / indicator tokens /\n --_md-radio-size: calc(20 var(--dp, 1px));\n --_md-radio-icon-size: calc(\n var(--_md-radio-size) -\n calc(10 * var(--dp, 1px))\n );\n --_md-radio-state-layer-size: calc(40 * var(--dp, 1px));\n\n /* state layer tokens /\n --_md-radio-pressed-state-layer-color: var(\n --_md-radio-selected-state-layer-color\n );\n --_md-radio-pressed-selected-state-layer-color: var(\n --_md-radio-state-layer-color\n );\n\n --_state-layer-opacity: 0;\n --_state-color: var(--_md-radio-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 align-items: center;\n gap: var(--md-sys-layout-space-16);\n\n color: inherit;\n cursor: pointer;\n\n & {\n cursor: inherit;\n }\n\n &[data-disabled] {\n cursor: default;\n }\n\n &[data-selected] {\n --_state-color: var(--_md-radio-selected-state-layer-color);\n }\n\n &[data-pressed] {\n --_state-layer-opacity: var(--md-sys-state-pressed);\n --_state-color: var(--_md-radio-pressed-state-layer-color);\n\n &[data-selected] {\n --_state-color: var(\n --_md-radio-pressed-selected-state-layer-color\n );\n }\n }\n\n &[data-invalid] {\n --_state-color: var(--_md-radio-invalid-state-layer-color);\n\n &[data-selected] {\n --_state-color: var(--_md-radio-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 --_indicator-color: var(--_md-radio-icon-color);\n\n position: relative;\n\n inline-size: var(--_md-radio-size);\n aspect-ratio: 1 / 1;\n border-radius: var(--md-sys-shape-corner-radius-full);\n\n border: var(--md-sys-shape-border-width-thick) solid\n var(--_indicator-color);\n\n transition: 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-selected] {\n --_indicator-color: var(--_md-radio-selected-icon-color);\n }\n\n &[data-invalid] {\n --_indicator-color: var(--_md-radio-invalid-icon-color);\n }\n\n &[data-pressed],\n &[data-hovered],\n &[data-focus-visible] {\n --_indicator-color: var(--_md-radio-interaction-icon-color);\n\n &[data-selected] {\n --_indicator-color: var(\n --_md-radio-selected-interaction-icon-color\n );\n }\n\n &[data-invalid] {\n --_indicator-color: var(--_md-radio-invalid-icon-color);\n }\n }\n\n &[data-disabled] {\n --_indicator-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n\n &[data-selected] {\n --_indicator-color: 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-block-start: 50%;\n inset-inline-start: 50%;\n transform: translate(-50%, -50%);\n\n inline-size: var(--_md-radio-state-layer-size);\n aspect-ratio: 1 / 1;\n border-radius: var(--md-sys-shape-corner-radius-full);\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 center icon /\n .indicator-icon {\n content: \"\";\n\n position: absolute;\n inline-size: var(--_md-radio-icon-size);\n aspect-ratio: 1 / 1;\n\n inset-inline-start: 50%;\n inset-block-start: 50%;\n translate: -50% -50%;\n\n background-color: var(--_indicator-color);\n border-radius: var(--md-sys-shape-corner-radius-full);\n\n scale: 0;\n\n transition:\n background-color var(--md-sys-motion-expressive-default-effects)\n var(--md-sys-motion-expressive-default-effects-duration),\n scale var(--md-sys-motion-standard-default-spatial)\n var(--md-sys-motion-standard-default-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-selected] {\n scale: 1;\n }\n }\n\n .indicator[data-focus-visible] {\n --focus-indicator-color: var(--md-sys-color-secondary);\n --focus-indicator-thickness: calc(3 var(--dp, 1px));\n --focus-indicator-offset: calc(2 * var(--dp, 1px));\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","import { clsx } from \"clsx\";\nimport { useContext } from \"react\";\nimport { RadioButton, RadioField } from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport { TapTarget } from \"@/utils/tapTarget\";\nimport { RadioGroupContext } from \"./context\";\nimport styles from \"./radio.module.css\";\nimport type { RadioProps } from \"./types\";\n\n/*\n A radio button control implementing Material Design 3 Radio guidelines.\n \n Designed for single-choice options within a [`RadioGroup`](src/components/Input/Radio/RadioGroup.tsx).\n * Features animated selection dot scaling, an accessible touch target, interaction state layers,\n * and configurable label positioning. Built on React Aria's `RadioField` and `RadioButton`.\n \n @example\n * ```tsx\n * import { RadioGroup, Radio } from \"@adgytec/web-ui-components\";\n \n <RadioGroup label=\"Select an option\">\n * <Radio value=\"1\">Option One</Radio>\n * <Radio value=\"2\" labelPlacement=\"start\">Option Two</Radio>\n * </RadioGroup>\n * ```\n /\nexport const Radio: React.FC<RadioProps> = ({\n children,\n labelPlacement,\n ...props\n}) => {\n const { labelPlacement: groupLabelPlacement } =\n useContext(RadioGroupContext);\n const placement = labelPlacement ?? groupLabelPlacement ?? \"end\";\n\n return (\n <RadioField {...props}>\n {(renderProps) => {\n const label =\n typeof children === \"function\"\n ? children(renderProps)\n : children;\n return (\n <RadioButton\n className={clsx(styles[\"radio\"], typography.labelLarge)}\n >\n {(buttonRenderProps) => {\n const {\n isSelected,\n isHovered,\n isDisabled,\n isFocused,\n isFocusVisible,\n isPressed,\n isInvalid,\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 };\n\n return (\n <>\n {placement === \"start\" && label}\n\n <span\n className={clsx(\n styles[\"indicator\"],\n TapTarget\n )}\n {...dataAttrs}\n >\n <span\n className={clsx(\n styles[\"indicator-icon\"]\n )}\n {...dataAttrs}\n ></span>\n </span>\n\n {placement === \"end\" && label}\n </>\n );\n }}\n </RadioButton>\n );\n }}\n </RadioField>\n );\n};\n","import { clsx } from \"clsx\";\nimport { RadioGroup as AriaRadioGroup } from \"react-aria-components\";\nimport { Description } from \"../Description\";\nimport { FieldError } from \"../FieldError\";\nimport { Label } from \"../Label\";\nimport { RadioGroupContext } from \"./context\";\nimport styles from \"./radio.module.css\";\nimport type { RadioGroupProps } from \"./types\";\n\n/\n A container managing mutually exclusive [`Radio`](src/components/Input/Radio/Radio.tsx) options.\n \n Coordinates single-selection radio values, keyboard navigation arrow-key roving,\n * accessible labels, helper descriptions, and validation error messages.\n \n @example\n * ```tsx\n * import { RadioGroup, Radio } from \"@adgytec/web-ui-components\";\n \n <RadioGroup label=\"Delivery Speed\" defaultValue=\"standard\">\n * <Radio value=\"standard\">Standard (3-5 days)</Radio>\n * <Radio value=\"express\">Express (1-2 days)</Radio>\n * <Radio value=\"overnight\">Overnight</Radio>\n * </RadioGroup>\n * ```\n */\nexport const RadioGroup: React.FC<RadioGroupProps> = ({\n label,\n description,\n errorMessage,\n showDescriptionOnInvalid = false,\n children,\n className,\n labelPlacement,\n ...props\n}) => {\n return (\n <RadioGroupContext value={{ labelPlacement }}>\n <AriaRadioGroup\n className={(renderProps) =>\n clsx(\n styles[\"radio-group\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-radio-group\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\n <FieldError>{errorMessage}</FieldError>\n </>\n );\n }}\n </AriaRadioGroup>\n </RadioGroupContext>\n );\n};\n"],"mappings":";;;;;;;;;;;A,aAcac,IAAoBC,EAAsC,CAAC,CAAC,G;;;;;A,GEY5DE,KAA8B,MAAA;CAAA,IAAAC,KAAA,GAAAlB,EAAAA,EAAAA,CAAA,EAAA,GAAAmB,GAAAC,GAAAC;CAAA,AAAAH,EAAA,OAAAI,KAI1C,IAAAJ,EAAA,IAAA,IAAAA,EAAA,IAAA,IAAAA,EAAA,OAJ2C,iCAAA,GAAAG,KAAAC,GAI3C,EAAA,KAAAA,GAAA,EAAA,KAAAH,GAAA,EAAA,KAAAC,GAAA,EAAA,KAAAC;CACG,IAAA,EAAA,gBAAAE,MACIC,EAAWV,CAAiB,GAChCW,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,OAEf,kBAACU,GAAD;GACe,WAAAC,EAAK7B,EAAM,OAAWS,EAAU,UAAW;GAErD,WAAA,MAAA;IACG,IAAA,EAAA,eAAA,cAAA,eAAA,cAAA,mBAAA,cAAA,iBAQIqB,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;IACpB;IAAE,OAGE,kBAAArC,GAAA,EAAA,UAAA;KACKuB,MAAc,WAAdE;KAED,kBAAA,QAAA;MACe,WAAAG,EACP7B,EAAM,WACNwC,CACJ;MAAC,GACGT;MAEJ,UAAA,kBAAA,QAAA;OACe,WAAAF,EACP7B,EAAO,iBACX;OAAC,GACG+B;MAAS,CAAA;KAEd,CAAA;KAENP,MAAc,SAAdE;IAA4B,EAAA,CAAA;GAC9B;EA7CH,CAAA;CAgDE,GAErB,EAAA,KAAAR,GAAA,EAAA,KAAAM,GAAA,EAAA,KAAAC,KAAA,IAAAR,EAAA;CAAA,IAAAwB;CACQ,OADRxB,EAAA,OAAAG,KAAAH,EAAA,OAAAQ,KAzDL,IAAA,kBAACiB,GAAD;EAAW,GAAKtB;EACX,UAAAK;CADM,CAAA,GA0DE,EAAA,KAAAL,GAAA,EAAA,KAAAK,GAAA,EAAA,KAAAgB,KAAA,IAAAxB,EAAA,IA1DbwB;AA0Da,GCpERvC,KAAyC,EAClD,UACA,gBACA,iBACA,8BAA2B,IAC3B,aACA,cACA,mBACA,GAAGkB,QAGC,kBAACP,GAAD;CAAmB,OAAO,EAAE,kBAAe;CACvC,UAAA,kBAACV,GAAD;EACI,YAAY,MACR0B,EACIzB,EAAO,gBACP,OAAOyC,KAAc,aACfA,EAAUlB,CAAW,IACrBkB,CACV;EAEJ,GAAIzB;EACJ,oBAAA;EAEE,WAAA,EAAE,mBAMI,kBAAAf,GAAA,EAAA,UAAA;GACKqB,KAAS,kBAACpB,GAAD,EAAA,UAAQoB,EAAa,CAAA;GAE9BR;GAPL4B,MACC,CAACR,KAAcA,KAAaS,MASrB,kBAACC,GAAD,EAAA,UAAcF,EAAyB,CAAA;GAG3C,kBAACvC,GAAD,EAAA,UAAa0C,EAAyB,CAAA;EAC1C,EAAA,CAAA;CAGI,CAAA;AACD,CAAA"}

package/dist/chunks/RichTooltip CHANGED Viewed

@@ -1,7 +1,7 @@
 import { t as e } from "./compiler-runtime";
 import t from "clsx";
 import { jsx as n } from "react/jsx-runtime";
-import '../assets/RichTooltip.css';//#region src/components/Tooltip/RichTooltip/RichTooltip/richTooltip.module.css
+import '../assets/RichTooltip.css';// src/components/Tooltip/RichTooltip/RichTooltip/richTooltip.module.css
 var r = e(), i = { tooltip: "_tooltip_m5ize_9" }, a = (e) => {
 	let a = (0, r.c)(8), o, s;
 	a[0] === e ? (o = a[1], s = a[2]) : ({className: o, ...s} = e, a[0] = e, a[1] = o, a[2] = s);
@@ -14,7 +14,6 @@ var r = e(), i = { tooltip: "_tooltip_m5ize_9" }, a = (e) => {
 		"data-rich-tooltip": !0
 	}), a[5] = s, a[6] = c, a[7] = l) : l = a[7], l;
 };
-//#endregion
 export { a as t };
 //# sourceMappingURL=RichTooltip.map

package/dist/chunks/RichTooltip.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTooltip","names":["_c","clsx","styles","require_compiler_runtime","clsx$1","import_compiler_runtime","richTooltip_module_default","RichTooltip","$","className","props","t0","t1","t2"],"sources":["../../src/components/Tooltip/RichTooltip/RichTooltip/richTooltip.module.css","../../src/components/Tooltip/RichTooltip/RichTooltip/RichTooltip.tsx"],"sourcesContent":["/* configurable tokens\n\n --md-rich-tooltip-background\n* --md-rich-tooltip-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .tooltip {\n --_md-rich-tooltip-background: var(\n --md-rich-tooltip-background,\n var(--md-sys-color-surface-container)\n );\n --_md-rich-tooltip-color: var(\n --md-rich-tooltip-color,\n var(--md-sys-color-on-surface-variant)\n );\n\n display: grid;\n gap: var(--md-sys-layout-space-12);\n\n padding-block-start: var(--md-sys-layout-space-12);\n padding-block-end: var(--md-sys-layout-space-8);\n\n background-color: var(--_md-rich-tooltip-background);\n color: var(--_md-rich-tooltip-color);\n\n border-radius: var(--md-sys-shape-corner-radius-medium);\n box-shadow: var(--md-sys-elevation-shadow-2);\n\n max-inline-size: calc(300 var(--dp, 1px));\n }\n}\n","// https://m3.material.io/components/tooltips/guidelines#00e87770-86d0-436d-b50b-436ff3cefe75\n// use this with popover, for more details read the article\n\nimport clsx from \"clsx\";\nimport styles from \"./richTooltip.module.css\";\n\n/*\n Props for the {@link RichTooltip} component.\n * Extends standard `HTMLDivElement` attributes.\n \n Configurable CSS tokens:\n * - `--md-rich-tooltip-background`: Background color of the rich tooltip (`var(--md-sys-color-surface-container)`).\n * - `--md-rich-tooltip-color`: Text color of the rich tooltip (`var(--md-sys-color-on-surface-variant)`).\n /\nexport interface RichTooltipProps extends React.ComponentPropsWithRef<\"div\"> {}\n\n/\n Container component implementing [Material 3 Rich Tooltips](https://m3.material.io/components/tooltips/overview#89f33800-4f51-4043-9884-219159f427f7).\n \n Rich tooltips provide contextual information, descriptive subheads, body copy, and optional actions.\n * Typically rendered inside a `Popover` component triggered by a ~~`DialogTrigger`.\~~n \n Configurable CSS tokens:\n * - `--md-rich-tooltip-background`: Background color of the rich tooltip (`var(--md-sys-color-surface-container)`).\n * - `--md-rich-tooltip-color`: Text color of the rich tooltip (`var(--md-sys-color-on-surface-variant)`).\n \n @example\n * ```tsx\n * import {\n * Button,\n * Popover,\n * RichTooltip,\n * RichTooltipActions,\n * RichTooltipInfo,\n * RichTooltipSubhead,\n * RichTooltipText,\n * } from \"@adgytec/web-ui-components\";\n * import { DialogTrigger } from \"react-aria-components\";\n \n export function Example() {\n * return (\n * <~~DialogTrigger~~>\n * <Button label=\"More Info\" />\n * <Popover>\n * <RichTooltip>\n * <RichTooltipInfo>\n * <RichTooltipSubhead>Feature Overview</RichTooltipSubhead>\n * <RichTooltipText>\n * Detailed explanation of this feature and its benefits.\n * </RichTooltipText>\n * </RichTooltipInfo>\n * <RichTooltipActions>\n * <Button label=\"Learn More\" size=\"small\" color=\"text\" />\n * </RichTooltipActions>\n * </RichTooltip>\n * </Popover>\n * </~~DialogTrigger~~>\n * );\n * }\n * ```\n */\nexport const RichTooltip: React.FC<RichTooltipProps> = ({\n className,\n ...props\n}) => {\n return (\n <div\n className={clsx(styles[\"tooltip\"], className)}\n {...props}\n data-rich-tooltip\n />\n );\n};\n"],"mappings":";;;;kDC6DaO,KAA0C,MAAA;CAAA,IAAAC,KAAA,GAAAR,EAAAA,EAAAA,CAAA,CAAA,GAAAS,GAAAC;CAAA,AAAAF,EAAA,OAAAG,KAGtD,IAAAH,EAAA,IAAA,IAAAA,EAAA,OAHuD,eAAA,GAAAE,KAAAC,GAGvD,EAAA,KAAAA,GAAA,EAAA,KAAAF,GAAA,EAAA,KAAAC;CAAA,IAAAE;CAAA,AAAAJ,EAAA,OAAAC,IAGwD,IAAAD,EAAA,MAAlC,IAAAP,EAAKC,EAAM,SAAaO,CAAS,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAG;CAAA,IAAAC;CAG/C,OAH+CL,EAAA,OAAAE,KAAAF,EAAA,OAAAI,KADjD,IAAA,kBAAA,OAAA;EACe,WAAAA;EAAkC,GACzCF;EACJ,qBAAA;CAAiB,CAAA,GACnB,EAAA,KAAAA,GAAA,EAAA,KAAAE,GAAA,EAAA,KAAAC,KAAA,IAAAL,EAAA,IAJFK;AAIE"}
1	+ {"version":3,"file":"RichTooltip","names":["_c","clsx","styles","require_compiler_runtime","clsx$1","import_compiler_runtime","richTooltip_module_default","RichTooltip","$","className","props","t0","t1","t2"],"sources":["../../src/components/Tooltip/RichTooltip/RichTooltip/richTooltip.module.css","../../src/components/Tooltip/RichTooltip/RichTooltip/RichTooltip.tsx"],"sourcesContent":["/* configurable tokens\n\n --md-rich-tooltip-background\n* --md-rich-tooltip-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .tooltip {\n --_md-rich-tooltip-background: var(\n --md-rich-tooltip-background,\n var(--md-sys-color-surface-container)\n );\n --_md-rich-tooltip-color: var(\n --md-rich-tooltip-color,\n var(--md-sys-color-on-surface-variant)\n );\n\n display: grid;\n gap: var(--md-sys-layout-space-12);\n\n padding-block-start: var(--md-sys-layout-space-12);\n padding-block-end: var(--md-sys-layout-space-8);\n\n background-color: var(--_md-rich-tooltip-background);\n color: var(--_md-rich-tooltip-color);\n\n border-radius: var(--md-sys-shape-corner-radius-medium);\n box-shadow: var(--md-sys-elevation-shadow-2);\n\n max-inline-size: calc(300 var(--dp, 1px));\n }\n}\n","// https://m3.material.io/components/tooltips/guidelines#00e87770-86d0-436d-b50b-436ff3cefe75\n// use this with popover, for more details read the article\n\nimport clsx from \"clsx\";\nimport styles from \"./richTooltip.module.css\";\n\n/*\n Props for the {@link RichTooltip} component.\n * Extends standard `HTMLDivElement` attributes.\n \n Configurable CSS tokens:\n * - `--md-rich-tooltip-background`: Background color of the rich tooltip (`var(--md-sys-color-surface-container)`).\n * - `--md-rich-tooltip-color`: Text color of the rich tooltip (`var(--md-sys-color-on-surface-variant)`).\n /\nexport interface RichTooltipProps extends React.ComponentPropsWithRef<\"div\"> {}\n\n/\n Container component implementing [Material 3 Rich Tooltips](https://m3.material.io/components/tooltips/overview#89f33800-4f51-4043-9884-219159f427f7).\n \n Rich tooltips provide contextual information, descriptive subheads, body copy, and optional actions.\n * Typically rendered inside a `Popover` component triggered by a {@link RichTooltipTrigger}.\n \n Configurable CSS tokens:\n * - `--md-rich-tooltip-background`: Background color of the rich tooltip (`var(--md-sys-color-surface-container)`).\n * - `--md-rich-tooltip-color`: Text color of the rich tooltip (`var(--md-sys-color-on-surface-variant)`).\n \n @example\n * ```tsx\n * import {\n * Button,\n * Popover,\n * RichTooltip,\n * RichTooltipActions,\n * RichTooltipInfo,\n * RichTooltipSubhead,\n * RichTooltipText,\n * RichTooltipTrigger,\n * } from \"@adgytec/web-ui-components\";\n \n export function Example() {\n * return (\n * <RichTooltipTrigger>\n * <Button label=\"More Info\" />\n * <Popover>\n * <RichTooltip>\n * <RichTooltipInfo>\n * <RichTooltipSubhead>Feature Overview</RichTooltipSubhead>\n * <RichTooltipText>\n * Detailed explanation of this feature and its benefits.\n * </RichTooltipText>\n * </RichTooltipInfo>\n * <RichTooltipActions>\n * <Button label=\"Learn More\" size=\"small\" color=\"text\" />\n * </RichTooltipActions>\n * </RichTooltip>\n * </Popover>\n * </RichTooltipTrigger>\n * );\n * }\n * ```\n */\nexport const RichTooltip: React.FC<RichTooltipProps> = ({\n className,\n ...props\n}) => {\n return (\n <div\n className={clsx(styles[\"tooltip\"], className)}\n {...props}\n data-rich-tooltip\n />\n );\n};\n"],"mappings":";;;;A,kDC6DaO,KAA0C,MAAA;CAAA,IAAAC,KAAA,GAAAR,EAAAA,EAAAA,CAAA,CAAA,GAAAS,GAAAC;CAAA,AAAAF,EAAA,OAAAG,KAGtD,IAAAH,EAAA,IAAA,IAAAA,EAAA,OAHuD,eAAA,GAAAE,KAAAC,GAGvD,EAAA,KAAAA,GAAA,EAAA,KAAAF,GAAA,EAAA,KAAAC;CAAA,IAAAE;CAAA,AAAAJ,EAAA,OAAAC,IAGwD,IAAAD,EAAA,MAAlC,IAAAP,EAAKC,EAAM,SAAaO,CAAS,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAG;CAAA,IAAAC;CAG/C,OAH+CL,EAAA,OAAAE,KAAAF,EAAA,OAAAI,KADjD,IAAA,kBAAA,OAAA;EACe,WAAAA;EAAkC,GACzCF;EACJ,qBAAA;CAAiB,CAAA,GACnB,EAAA,KAAAA,GAAA,EAAA,KAAAE,GAAA,EAAA,KAAAC,KAAA,IAAAL,EAAA,IAJFK;AAIE"}

package/dist/chunks/RichTooltipActions CHANGED Viewed

@@ -1,7 +1,7 @@
 import { t as e } from "./compiler-runtime";
 import t from "clsx";
 import { jsx as n } from "react/jsx-runtime";
-import '../assets/RichTooltipActions.css';//#region src/components/Tooltip/RichTooltip/RichTooltipActions/richTooltipActions.module.css
+import '../assets/RichTooltipActions.css';// src/components/Tooltip/RichTooltip/RichTooltipActions/richTooltipActions.module.css
 var r = e(), i = { actions: "_actions_yji6y_2" }, a = (e) => {
 	let a = (0, r.c)(8), o, s;
 	a[0] === e ? (o = a[1], s = a[2]) : ({className: o, ...s} = e, a[0] = e, a[1] = o, a[2] = s);
@@ -13,7 +13,6 @@ var r = e(), i = { actions: "_actions_yji6y_2" }, a = (e) => {
 		...s
 	}), a[5] = s, a[6] = c, a[7] = l) : l = a[7], l;
 };
-//#endregion
 export { a as t };
 //# sourceMappingURL=RichTooltipActions.map

package/dist/chunks/RichTooltipActions.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTooltipActions","names":["_c","clsx","styles","require_compiler_runtime","clsx$1","import_compiler_runtime","richTooltipActions_module_default","RichTooltipActions","$","className","props","t0","t1","t2"],"sources":["../../src/components/Tooltip/RichTooltip/RichTooltipActions/richTooltipActions.module.css","../../src/components/Tooltip/RichTooltip/RichTooltipActions/RichTooltipActions.tsx"],"sourcesContent":["@layer adgytec.comps {\n .actions {\n display: flex;\n align-items: center;\n gap: var(--md-sys-layout-space-4);\n }\n}\n","import clsx from \"clsx\";\nimport styles from \"./richTooltipActions.module.css\";\n\n/*\n Props for the {@link RichTooltipActions} component.\n * Extends standard `HTMLDivElement` attributes.\n /\nexport interface RichTooltipActionsProps\n extends React.ComponentPropsWithRef<\"div\"> {}\n\n/\n Action button container for a {@link RichTooltip}.\n \n Renders action elements at the bottom of the rich tooltip with proper horizontal alignment and spacing.\n * Recommended to contain buttons with `size=\"small\"` and `color=\"text\"`.\n \n @example\n * ```tsx\n * import { Button, RichTooltipActions } from \"@adgytec/web-ui-components\";\n \n export function Example() {\n * return (\n * <RichTooltipActions>\n * <Button label=\"Dismiss\" size=\"small\" color=\"text\" />\n * <Button label=\"Learn More\" size=\"small\" color=\"text\" />\n * </RichTooltipActions>\n * );\n * }\n * ```\n */\nexport const RichTooltipActions: React.FC<RichTooltipActionsProps> = ({\n className,\n ...props\n}) => {\n return <div className={clsx(styles[\"actions\"], className)} {...props} />;\n};\n"],"mappings":";;;;kDC8BaO,KAAwD,MAAA;CAAA,IAAAC,KAAA,GAAAR,EAAAA,EAAAA,CAAA,CAAA,GAAAS,GAAAC;CAAA,AAAAF,EAAA,OAAAG,KAGpE,IAAAH,EAAA,IAAA,IAAAA,EAAA,OAHqE,eAAA,GAAAE,KAAAC,GAGrE,EAAA,KAAAA,GAAA,EAAA,KAAAF,GAAA,EAAA,KAAAC;CAAA,IAAAE;CAAA,AAAAJ,EAAA,OAAAC,IAC4D,IAAAD,EAAA,MAAlC,IAAAP,EAAKC,EAAM,SAAaO,CAAS,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAG;CAAA,IAAAC;CAAe,OAAfL,EAAA,OAAAE,KAAAF,EAAA,OAAAI,KAAlD,IAAA,kBAAA,OAAA;EAAgB,WAAAA;EAAkC,GAAMF;CAAK,CAAA,GAAI,EAAA,KAAAA,GAAA,EAAA,KAAAE,GAAA,EAAA,KAAAC,KAAA,IAAAL,EAAA,IAAjEK;AAAiE"}
1	+ {"version":3,"file":"RichTooltipActions","names":["_c","clsx","styles","require_compiler_runtime","clsx$1","import_compiler_runtime","richTooltipActions_module_default","RichTooltipActions","$","className","props","t0","t1","t2"],"sources":["../../src/components/Tooltip/RichTooltip/RichTooltipActions/richTooltipActions.module.css","../../src/components/Tooltip/RichTooltip/RichTooltipActions/RichTooltipActions.tsx"],"sourcesContent":["@layer adgytec.comps {\n .actions {\n display: flex;\n align-items: center;\n gap: var(--md-sys-layout-space-4);\n }\n}\n","import clsx from \"clsx\";\nimport styles from \"./richTooltipActions.module.css\";\n\n/*\n Props for the {@link RichTooltipActions} component.\n * Extends standard `HTMLDivElement` attributes.\n /\nexport interface RichTooltipActionsProps\n extends React.ComponentPropsWithRef<\"div\"> {}\n\n/\n Action button container for a {@link RichTooltip}.\n \n Renders action elements at the bottom of the rich tooltip with proper horizontal alignment and spacing.\n * Recommended to contain buttons with `size=\"small\"` and `color=\"text\"`.\n \n @example\n * ```tsx\n * import { Button, RichTooltipActions } from \"@adgytec/web-ui-components\";\n \n export function Example() {\n * return (\n * <RichTooltipActions>\n * <Button label=\"Dismiss\" size=\"small\" color=\"text\" />\n * <Button label=\"Learn More\" size=\"small\" color=\"text\" />\n * </RichTooltipActions>\n * );\n * }\n * ```\n */\nexport const RichTooltipActions: React.FC<RichTooltipActionsProps> = ({\n className,\n ...props\n}) => {\n return <div className={clsx(styles[\"actions\"], className)} {...props} />;\n};\n"],"mappings":";;;;A,kDC8BaO,KAAwD,MAAA;CAAA,IAAAC,KAAA,GAAAR,EAAAA,EAAAA,CAAA,CAAA,GAAAS,GAAAC;CAAA,AAAAF,EAAA,OAAAG,KAGpE,IAAAH,EAAA,IAAA,IAAAA,EAAA,OAHqE,eAAA,GAAAE,KAAAC,GAGrE,EAAA,KAAAA,GAAA,EAAA,KAAAF,GAAA,EAAA,KAAAC;CAAA,IAAAE;CAAA,AAAAJ,EAAA,OAAAC,IAC4D,IAAAD,EAAA,MAAlC,IAAAP,EAAKC,EAAM,SAAaO,CAAS,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAG;CAAA,IAAAC;CAAe,OAAfL,EAAA,OAAAE,KAAAF,EAAA,OAAAI,KAAlD,IAAA,kBAAA,OAAA;EAAgB,WAAAA;EAAkC,GAAMF;CAAK,CAAA,GAAI,EAAA,KAAAA,GAAA,EAAA,KAAAE,GAAA,EAAA,KAAAC,KAAA,IAAAL,EAAA,IAAjEK;AAAiE"}

package/dist/chunks/RichTooltipInfo CHANGED Viewed

@@ -1,7 +1,7 @@
 import { t as e } from "./compiler-runtime";
 import t from "clsx";
 import { jsx as n } from "react/jsx-runtime";
-import '../assets/RichTooltipInfo.css';//#region src/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipInfo/richTooltipInfo.module.css
+import '../assets/RichTooltipInfo.css';// src/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipInfo/richTooltipInfo.module.css
 var r = e(), i = { info: "_info_xsenv_2" }, a = (e) => {
 	let a = (0, r.c)(8), o, s;
 	a[0] === e ? (o = a[1], s = a[2]) : ({className: o, ...s} = e, a[0] = e, a[1] = o, a[2] = s);
@@ -13,7 +13,6 @@ var r = e(), i = { info: "_info_xsenv_2" }, a = (e) => {
 		...s
 	}), a[5] = s, a[6] = c, a[7] = l) : l = a[7], l;
 };
-//#endregion
 export { a as t };
 //# sourceMappingURL=RichTooltipInfo.map

package/dist/chunks/RichTooltipInfo.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTooltipInfo","names":["_c","clsx","styles","require_compiler_runtime","clsx$1","import_compiler_runtime","richTooltipInfo_module_default","RichTooltipInfo","$","className","props","t0","t1","t2"],"sources":["../../src/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipInfo/richTooltipInfo.module.css","../../src/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipInfo/RichTooltipInfo.tsx"],"sourcesContent":["@layer adgytec.comps {\n .info {\n padding-inline: var(--md-sys-layout-space-16);\n\n display: grid;\n gap: var(--md-sys-layout-space-4);\n }\n}\n","import clsx from \"clsx\";\nimport styles from \"./richTooltipInfo.module.css\";\n\n/*\n Props for the {@link RichTooltipInfo} component.\n * Extends standard `HTMLDivElement` attributes.\n /\nexport interface RichTooltipInfoProps\n extends React.ComponentPropsWithRef<\"div\"> {}\n\n/\n Text content container for a {@link RichTooltip}.\n \n Houses the {@link RichTooltipSubhead} title and {@link RichTooltipText} description\n * with proper Material 3 padding and spacing.\n \n @example\n * ```tsx\n * import {\n * RichTooltipInfo,\n * RichTooltipSubhead,\n * RichTooltipText,\n * } from \"@adgytec/web-ui-components\";\n \n export function Example() {\n * return (\n * <RichTooltipInfo>\n * <RichTooltipSubhead>Header Title</RichTooltipSubhead>\n * <RichTooltipText>Informative description goes here.</RichTooltipText>\n * </RichTooltipInfo>\n * );\n * }\n * ```\n */\nexport const RichTooltipInfo: React.FC<RichTooltipInfoProps> = ({\n className,\n ...props\n}) => {\n return <div className={clsx(styles[\"info\"], className)} {...props} />;\n};\n"],"mappings":";;;;4CCkCaO,KAAkD,MAAA;CAAA,IAAAC,KAAA,GAAAR,EAAAA,EAAAA,CAAA,CAAA,GAAAS,GAAAC;CAAA,AAAAF,EAAA,OAAAG,KAG9D,IAAAH,EAAA,IAAA,IAAAA,EAAA,OAH+D,eAAA,GAAAE,KAAAC,GAG/D,EAAA,KAAAA,GAAA,EAAA,KAAAF,GAAA,EAAA,KAAAC;CAAA,IAAAE;CAAA,AAAAJ,EAAA,OAAAC,IACyD,IAAAD,EAAA,MAA/B,IAAAP,EAAKC,EAAM,MAAUO,CAAS,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAG;CAAA,IAAAC;CAAe,OAAfL,EAAA,OAAAE,KAAAF,EAAA,OAAAI,KAA/C,IAAA,kBAAA,OAAA;EAAgB,WAAAA;EAA+B,GAAMF;CAAK,CAAA,GAAI,EAAA,KAAAA,GAAA,EAAA,KAAAE,GAAA,EAAA,KAAAC,KAAA,IAAAL,EAAA,IAA9DK;AAA8D"}
1	+ {"version":3,"file":"RichTooltipInfo","names":["_c","clsx","styles","require_compiler_runtime","clsx$1","import_compiler_runtime","richTooltipInfo_module_default","RichTooltipInfo","$","className","props","t0","t1","t2"],"sources":["../../src/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipInfo/richTooltipInfo.module.css","../../src/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipInfo/RichTooltipInfo.tsx"],"sourcesContent":["@layer adgytec.comps {\n .info {\n padding-inline: var(--md-sys-layout-space-16);\n\n display: grid;\n gap: var(--md-sys-layout-space-4);\n }\n}\n","import clsx from \"clsx\";\nimport styles from \"./richTooltipInfo.module.css\";\n\n/*\n Props for the {@link RichTooltipInfo} component.\n * Extends standard `HTMLDivElement` attributes.\n /\nexport interface RichTooltipInfoProps\n extends React.ComponentPropsWithRef<\"div\"> {}\n\n/\n Text content container for a {@link RichTooltip}.\n \n Houses the {@link RichTooltipSubhead} title and {@link RichTooltipText} description\n * with proper Material 3 padding and spacing.\n \n @example\n * ```tsx\n * import {\n * RichTooltipInfo,\n * RichTooltipSubhead,\n * RichTooltipText,\n * } from \"@adgytec/web-ui-components\";\n \n export function Example() {\n * return (\n * <RichTooltipInfo>\n * <RichTooltipSubhead>Header Title</RichTooltipSubhead>\n * <RichTooltipText>Informative description goes here.</RichTooltipText>\n * </RichTooltipInfo>\n * );\n * }\n * ```\n */\nexport const RichTooltipInfo: React.FC<RichTooltipInfoProps> = ({\n className,\n ...props\n}) => {\n return <div className={clsx(styles[\"info\"], className)} {...props} />;\n};\n"],"mappings":";;;;A,4CCkCaO,KAAkD,MAAA;CAAA,IAAAC,KAAA,GAAAR,EAAAA,EAAAA,CAAA,CAAA,GAAAS,GAAAC;CAAA,AAAAF,EAAA,OAAAG,KAG9D,IAAAH,EAAA,IAAA,IAAAA,EAAA,OAH+D,eAAA,GAAAE,KAAAC,GAG/D,EAAA,KAAAA,GAAA,EAAA,KAAAF,GAAA,EAAA,KAAAC;CAAA,IAAAE;CAAA,AAAAJ,EAAA,OAAAC,IACyD,IAAAD,EAAA,MAA/B,IAAAP,EAAKC,EAAM,MAAUO,CAAS,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAG;CAAA,IAAAC;CAAe,OAAfL,EAAA,OAAAE,KAAAF,EAAA,OAAAI,KAA/C,IAAA,kBAAA,OAAA;EAAgB,WAAAA;EAA+B,GAAMF;CAAK,CAAA,GAAI,EAAA,KAAAA,GAAA,EAAA,KAAAE,GAAA,EAAA,KAAAC,KAAA,IAAAL,EAAA,IAA9DK;AAA8D"}

package/dist/chunks/SearchField CHANGED Viewed

@@ -29,7 +29,6 @@ import '../assets/SearchField.css';var d = {
 		})
 	] })
 });
-//#endregion
 export { f as t };
 //# sourceMappingURL=SearchField.map