@adgytec/adgytec-web-ui-components 2.1.7 → 2.1.8

package/dist/chunks/TabList.map

@@ -1 +1 @@
-{"version":3,"file":"TabList","names":[],"sources":["../../src/components/Tabs/TabList/tabList.module.css","../../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["/* configurable tokens\n*\n* --md-tab-list-divider-color\n* --md-tabs-active-indicator-color\n*\n* --md-tabs-color\n* --md-tabs-active-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n    .tab-list {\n        --_md-tabs-color: var(\n            --md-tabs-color,\n            var(--md-sys-color-on-surface-variant)\n        );\n        --_md-tabs-active-color: var(\n            --md-tabs-active-color,\n            var(--md-sys-color-on-surface)\n        );\n\n        --_md-tab-list-divider-width: calc(1 * var(--dp, 1px));\n        --_md-tab-list-divider-color: var(\n            --md-tab-list-divider-color,\n            var(--md-sys-color-surface-variant)\n        );\n\n        --_md-tabs-active-indicator-size: calc(2 * var(--dp, 1px));\n        --_md-tabs-active-indicator-color: var(\n            --md-tabs-active-indicator-color,\n            var(--md-sys-color-primary)\n        );\n\n        [data-selection-indicator] {\n            background-color: var(--_md-tabs-active-indicator-color);\n        }\n\n        &[data-orientation=\"horizontal\"] {\n            --_focus-inset-block-end-active: var(--md-sys-layout-space-8);\n            --_focus-inset-inline-end-active: var(--md-sys-layout-space-4);\n\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n\n            overflow-x: auto;\n\n            border-block-end: var(--_md-tab-list-divider-width) solid\n                var(--_md-tab-list-divider-color);\n\n            [data-tab] {\n                flex: 1;\n                text-align: center;\n            }\n\n            [data-selection-indicator] {\n                inset-inline-start: 0;\n                inset-block-end: 0px;\n\n                inline-size: 100%;\n                block-size: var(--_md-tabs-active-indicator-size);\n\n                transition-property: translate, inline-size;\n            }\n        }\n\n        &[data-orientation=\"vertical\"] {\n            --_focus-inset-block-end-active: var(--md-sys-layout-space-4);\n            --_focus-inset-inline-end-active: var(--md-sys-layout-space-8);\n\n            border-inline-end: var(--_md-tab-list-divider-width) solid\n                var(--_md-tab-list-divider-color);\n\n            [data-selection-indicator] {\n                inset-block-start: 0;\n                inset-inline-end: 0px;\n\n                block-size: 100%;\n                inline-size: var(--_md-tabs-active-indicator-size);\n\n                transition-property: translate, block-size;\n            }\n        }\n    }\n}\n","import clsx from \"clsx\";\nimport { TabList as AriaTabList } from \"react-aria-components\";\nimport styles from \"./tabList.module.css\";\n\nexport const TabList = <T extends object>({\n    className,\n    ...props\n}: React.ComponentPropsWithRef<typeof AriaTabList<T>>) => {\n    return (\n        <AriaTabList\n            className={(renderProps) =>\n                clsx(\n                    styles[\"tab-list\"],\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            {...props}\n        />\n    );\n};\n"],"mappings":";;;;8CCIa,KAA6B,EACtC,cACA,GAAG,QAGC,kBAAC,GAAD;CACI,YAAY,MACR,EACI,EAAO,aACP,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;CAEJ,GAAI;AACP,CAAA"}
+{"version":3,"file":"TabList","names":[],"sources":["../../src/components/Tabs/TabList/tabList.module.css","../../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["/* configurable tokens\n*\n* --md-tab-list-divider-color\n* --md-tabs-active-indicator-color\n*\n* --md-tabs-color\n* --md-tabs-active-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n    .tab-list {\n        --_md-tabs-color: var(\n            --md-tabs-color,\n            var(--md-sys-color-on-surface-variant)\n        );\n        --_md-tabs-active-color: var(\n            --md-tabs-active-color,\n            var(--md-sys-color-on-surface)\n        );\n\n        --_md-tab-list-divider-width: calc(1 * var(--dp, 1px));\n        --_md-tab-list-divider-color: var(\n            --md-tab-list-divider-color,\n            var(--md-sys-color-surface-variant)\n        );\n\n        --_md-tabs-active-indicator-size: calc(2 * var(--dp, 1px));\n        --_md-tabs-active-indicator-color: var(\n            --md-tabs-active-indicator-color,\n            var(--md-sys-color-primary)\n        );\n\n        [data-selection-indicator] {\n            background-color: var(--_md-tabs-active-indicator-color);\n        }\n\n        &[data-orientation=\"horizontal\"] {\n            --_focus-inset-block-end-active: var(--md-sys-layout-space-8);\n            --_focus-inset-inline-end-active: var(--md-sys-layout-space-4);\n\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n\n            overflow-x: auto;\n\n            border-block-end: var(--_md-tab-list-divider-width) solid\n                var(--_md-tab-list-divider-color);\n\n            [data-tab] {\n                flex: 1;\n                text-align: center;\n            }\n\n            [data-selection-indicator] {\n                inset-inline-start: 0;\n                inset-block-end: 0px;\n\n                inline-size: 100%;\n                block-size: var(--_md-tabs-active-indicator-size);\n\n                transition-property: translate, inline-size;\n            }\n        }\n\n        &[data-orientation=\"vertical\"] {\n            --_focus-inset-block-end-active: var(--md-sys-layout-space-4);\n            --_focus-inset-inline-end-active: var(--md-sys-layout-space-8);\n\n            border-inline-end: var(--_md-tab-list-divider-width) solid\n                var(--_md-tab-list-divider-color);\n\n            [data-selection-indicator] {\n                inset-block-start: 0;\n                inset-inline-end: 0px;\n\n                block-size: 100%;\n                inline-size: var(--_md-tabs-active-indicator-size);\n\n                transition-property: translate, block-size;\n            }\n        }\n    }\n}\n","import clsx from \"clsx\";\nimport { TabList as AriaTabList } from \"react-aria-components\";\nimport styles from \"./tabList.module.css\";\n\nexport const TabList = <T extends object>({\n    className,\n    ...props\n}: React.ComponentPropsWithRef<typeof AriaTabList<T>>) => {\n    return (\n        <AriaTabList\n            className={(renderProps) =>\n                clsx(\n                    styles[\"tab-list\"],\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            {...props}\n        />\n    );\n};\n"],"mappings":";;;;;uDCIa,KAAU,MAAA;CAAA,IAAA,KAAA,GAAA,EAAA,EAAA,CAAA,CAAA,GAAA,GAAA;CAAA,AAAA,EAAA,OAAA,KAG8B,IAAA,EAAA,IAAA,IAAA,EAAA,OAHX,kBAAA,KAAA,GAGW,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAAA,AAAA,EAAA,OAAA,IASpC,IAAA,EAAA,MANM,KAAA,MACP,EACI,EAAO,aACP,OAAO,KAAc,aACf,EAAU,CACF,IAFd,CAGJ,GAAC,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAGP,OAHO,EAAA,OAAA,KAAA,EAAA,OAAA,KAPT,IAAA,kBAAC,GAAD;EACe,WAAA;EAMN,GAED;CAAK,CAAA,GACX,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,KAAA,IAAA,EAAA,IAVF;AAUE"}

package/dist/chunks/TabPanel

@@ -1,12 +1,20 @@
-import e from "clsx";
-import { jsx as t } from "react/jsx-runtime";
-import { TabPanel as n } from "react-aria-components";
+import { t as e } from "./compiler-runtime";
+import t from "clsx";
+import { jsx as n } from "react/jsx-runtime";
+import { TabPanel as r } from "react-aria-components";
 import '../assets/TabPanel.css';//#region src/components/Tabs/TabPanel/tabPanel.module.css
-var r = { "tab-panel": "_tab-panel_1q4o7_2" }, i = ({ className: i, ...a }) => /* @__PURE__ */ t(n, {
-	className: (t) => e(r["tab-panel"], typeof i == "function" ? i(t) : i),
-	...a
-});
+var i = e(), a = { "tab-panel": "_tab-panel_1q4o7_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);
+	let l;
+	o[3] === s ? l = o[4] : (l = (e) => t(a["tab-panel"], typeof s == "function" ? s(e) : s), o[3] = s, o[4] = l);
+	let u;
+	return o[5] !== c || o[6] !== l ? (u = /* @__PURE__ */ n(r, {
+		className: l,
+		...c
+	}), o[5] = c, o[6] = l, o[7] = u) : u = o[7], u;
+};
 //#endregion
-export { i as t };
+export { o as t };
 
 //# sourceMappingURL=TabPanel.map

package/dist/chunks/TabPanel.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel","names":[],"sources":["../../src/components/Tabs/TabPanel/tabPanel.module.css","../../src/components/Tabs/TabPanel/TabPanel.tsx"],"sourcesContent":["@layer adgytec.comps {\n    .tab-panel {\n        transition: opacity var(--md-sys-motion-expressive-slow-effects)\n            var(--md-sys-motion-expressive-slow-effects-duration);\n\n        @media (prefers-reduced-motion) {\n            transition: none;\n        }\n\n        &[data-entering] {\n            opacity: 0;\n        }\n\n        &[data-exiting] {\n            display: none;\n        }\n    }\n}\n","import clsx from \"clsx\";\nimport { TabPanel as AriaTabPanel } from \"react-aria-components\";\nimport styles from \"./tabPanel.module.css\";\n\nexport const TabPanel: React.FC<\n    React.ComponentPropsWithRef<typeof AriaTabPanel>\n> = ({ className, ...props }) => {\n    return (\n        <AriaTabPanel\n            className={(renderProps) =>\n                clsx(\n                    styles[\"tab-panel\"],\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            {...props}\n        />\n    );\n};\n"],"mappings":";;;;+CCIa,KAER,EAAE,cAAW,GAAG,QAEb,kBAAC,GAAD;CACI,YAAY,MACR,EACI,EAAO,cACP,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;CAEJ,GAAI;AACP,CAAA"}
+{"version":3,"file":"TabPanel","names":[],"sources":["../../src/components/Tabs/TabPanel/tabPanel.module.css","../../src/components/Tabs/TabPanel/TabPanel.tsx"],"sourcesContent":["@layer adgytec.comps {\n    .tab-panel {\n        transition: opacity var(--md-sys-motion-expressive-slow-effects)\n            var(--md-sys-motion-expressive-slow-effects-duration);\n\n        @media (prefers-reduced-motion) {\n            transition: none;\n        }\n\n        &[data-entering] {\n            opacity: 0;\n        }\n\n        &[data-exiting] {\n            display: none;\n        }\n    }\n}\n","import clsx from \"clsx\";\nimport { TabPanel as AriaTabPanel } from \"react-aria-components\";\nimport styles from \"./tabPanel.module.css\";\n\nexport const TabPanel: React.FC<\n    React.ComponentPropsWithRef<typeof AriaTabPanel>\n> = ({ className, ...props }) => {\n    return (\n        <AriaTabPanel\n            className={(renderProps) =>\n                clsx(\n                    styles[\"tab-panel\"],\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            {...props}\n        />\n    );\n};\n"],"mappings":";;;;;wDCIa,KAET,MAAA;CAAA,IAAA,KAAA,GAAA,EAAA,EAAA,CAAA,CAAA,GAAA,GAAA;CAAA,AAAA,EAAA,OAAA,KAAwB,IAAA,EAAA,IAAA,IAAA,EAAA,OAAvB,kBAAA,KAAA,GAAuB,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAAA,AAAA,EAAA,OAAA,IASX,IAAA,EAAA,MANM,KAAA,MACP,EACI,EAAO,cACP,OAAO,KAAc,aACf,EAAU,CACF,IAFd,CAGJ,GAAC,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAGP,OAHO,EAAA,OAAA,KAAA,EAAA,OAAA,KAPT,IAAA,kBAAC,GAAD;EACe,WAAA;EAMN,GAED;CAAK,CAAA,GACX,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,KAAA,IAAA,EAAA,IAVF;AAUE"}

package/dist/chunks/TabPanels

@@ -1,13 +1,21 @@
-import e from "clsx";
-import { jsx as t } from "react/jsx-runtime";
-import { TabPanels as n } from "react-aria-components";
+import { t as e } from "./compiler-runtime";
+import t from "clsx";
+import { jsx as n } from "react/jsx-runtime";
+import { TabPanels as r } from "react-aria-components";
 import '../assets/TabPanels.css';//#region src/components/Tabs/TabPanels/tabPanels.module.css
-var r = { "tab-panels": "_tab-panels_u5x73_2" }, i = ({ className: i, ...a }) => /* @__PURE__ */ t(n, {
-	className: e(r["tab-panels"], i),
-	...a,
-	"data-tab-panels": !0
-});
+var i = e(), a = { "tab-panels": "_tab-panels_u5x73_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);
+	let l;
+	o[3] === s ? l = o[4] : (l = t(a["tab-panels"], s), o[3] = s, o[4] = l);
+	let u;
+	return o[5] !== c || o[6] !== l ? (u = /* @__PURE__ */ n(r, {
+		className: l,
+		...c,
+		"data-tab-panels": !0
+	}), o[5] = c, o[6] = l, o[7] = u) : u = o[7], u;
+};
 //#endregion
-export { i as t };
+export { o as t };
 
 //# sourceMappingURL=TabPanels.map

package/dist/chunks/TabPanels.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanels","names":[],"sources":["../../src/components/Tabs/TabPanels/tabPanels.module.css","../../src/components/Tabs/TabPanels/TabPanels.tsx"],"sourcesContent":["@layer adgytec.comps {\n    .tab-panels {\n        position: relative;\n\n        height: var(--tab-panel-height);\n        transition: height var(--md-sys-motion-standard-fast-spatial)\n            var(--md-sys-motion-standard-fast-spatial-duration);\n\n        @media (prefers-reduced-motion) {\n            transition: none;\n        }\n    }\n}\n","import clsx from \"clsx\";\nimport { TabPanels as AriaTabPanels } from \"react-aria-components\";\nimport styles from \"./tabPanels.module.css\";\n\nexport const TabPanels = <T extends object>({\n    className,\n    ...props\n}: React.ComponentPropsWithRef<typeof AriaTabPanels<T>>) => {\n    return (\n        <AriaTabPanels\n            className={clsx(styles[\"tab-panels\"], className)}\n            {...props}\n            data-tab-panels={true}\n        />\n    );\n};\n"],"mappings":";;;;iDCIa,KAA+B,EACxC,cACA,GAAG,QAGC,kBAAC,GAAD;CACI,WAAW,EAAK,EAAO,eAAe,CAAS;CAC/C,GAAI;CACJ,mBAAiB;AACpB,CAAA"}
+{"version":3,"file":"TabPanels","names":[],"sources":["../../src/components/Tabs/TabPanels/tabPanels.module.css","../../src/components/Tabs/TabPanels/TabPanels.tsx"],"sourcesContent":["@layer adgytec.comps {\n    .tab-panels {\n        position: relative;\n\n        height: var(--tab-panel-height);\n        transition: height var(--md-sys-motion-standard-fast-spatial)\n            var(--md-sys-motion-standard-fast-spatial-duration);\n\n        @media (prefers-reduced-motion) {\n            transition: none;\n        }\n    }\n}\n","import clsx from \"clsx\";\nimport { TabPanels as AriaTabPanels } from \"react-aria-components\";\nimport styles from \"./tabPanels.module.css\";\n\nexport const TabPanels = <T extends object>({\n    className,\n    ...props\n}: React.ComponentPropsWithRef<typeof AriaTabPanels<T>>) => {\n    return (\n        <AriaTabPanels\n            className={clsx(styles[\"tab-panels\"], className)}\n            {...props}\n            data-tab-panels={true}\n        />\n    );\n};\n"],"mappings":";;;;;0DCIa,KAAY,MAAA;CAAA,IAAA,KAAA,GAAA,EAAA,EAAA,CAAA,CAAA,GAAA,GAAA;CAAA,AAAA,EAAA,OAAA,KAG8B,IAAA,EAAA,IAAA,IAAA,EAAA,OAHX,kBAAA,KAAA,GAGW,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAAA,AAAA,EAAA,OAAA,IAGK,IAAA,EAAA,MAArC,IAAA,EAAK,EAAO,eAAe,CAAS,GAAC,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAGlD,OAHkD,EAAA,OAAA,KAAA,EAAA,OAAA,KADpD,IAAA,kBAAC,GAAD;EACe,WAAA;EAAqC,GAC5C;EACa,mBAAA;CAAI,CAAA,GACvB,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,KAAA,IAAA,EAAA,IAJF;AAIE"}

package/dist/chunks/Tabs

@@ -1,11 +1,20 @@
-import e from "clsx";
-import { jsx as t } from "react/jsx-runtime";
-import { Tabs as n } from "react-aria-components";
-import '../assets/Tabs.css';var r = { tabs: "_tabs_1mme9_2" }, i = ({ className: i, ...a }) => /* @__PURE__ */ t(n, {
-	className: (t) => e(r.tabs, typeof i == "function" ? i(t) : i),
-	...a
-});
+import { t as e } from "./compiler-runtime";
+import t from "clsx";
+import { jsx as n } from "react/jsx-runtime";
+import { Tabs as r } from "react-aria-components";
+import '../assets/Tabs.css';//#region src/components/Tabs/Tabs/tabs.module.css
+var i = e(), a = { tabs: "_tabs_1mme9_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);
+	let l;
+	o[3] === s ? l = o[4] : (l = (e) => t(a.tabs, typeof s == "function" ? s(e) : s), o[3] = s, o[4] = l);
+	let u;
+	return o[5] !== c || o[6] !== l ? (u = /* @__PURE__ */ n(r, {
+		className: l,
+		...c
+	}), o[5] = c, o[6] = l, o[7] = u) : u = o[7], u;
+};
 //#endregion
-export { i as t };
+export { o as t };
 
 //# sourceMappingURL=Tabs.map

package/dist/chunks/Tabs.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs","names":[],"sources":["../../src/components/Tabs/Tabs/tabs.module.css","../../src/components/Tabs/Tabs/Tabs.tsx"],"sourcesContent":["@layer adgytec.comps {\n    .tabs {\n        display: grid;\n        gap: var(--md-sys-layout-space-16);\n\n        &[data-orientation=\"vertical\"] {\n            grid-template-columns: auto 1fr;\n        }\n\n        &[data-orientation=\"horizontal\"] {\n            grid-template-rows: auto 1fr;\n        }\n    }\n}\n","import clsx from \"clsx\";\nimport { Tabs as AriaTabs } from \"react-aria-components\";\nimport styles from \"./tabs.module.css\";\n\nexport const Tabs: React.FC<React.ComponentPropsWithRef<typeof AriaTabs>> = ({\n    className,\n    ...props\n}) => {\n    return (\n        <AriaTabs\n            className={(renderProps) =>\n                clsx(\n                    styles[\"tabs\"],\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            {...props}\n        />\n    );\n};\n"],"mappings":";;;mCCIa,KAAgE,EACzE,cACA,GAAG,QAGC,kBAAC,GAAD;CACI,YAAY,MACR,EACI,EAAO,MACP,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;CAEJ,GAAI;AACP,CAAA"}
+{"version":3,"file":"Tabs","names":[],"sources":["../../src/components/Tabs/Tabs/tabs.module.css","../../src/components/Tabs/Tabs/Tabs.tsx"],"sourcesContent":["@layer adgytec.comps {\n    .tabs {\n        display: grid;\n        gap: var(--md-sys-layout-space-16);\n\n        &[data-orientation=\"vertical\"] {\n            grid-template-columns: auto 1fr;\n        }\n\n        &[data-orientation=\"horizontal\"] {\n            grid-template-rows: auto 1fr;\n        }\n    }\n}\n","import clsx from \"clsx\";\nimport { Tabs as AriaTabs } from \"react-aria-components\";\nimport styles from \"./tabs.module.css\";\n\nexport const Tabs: React.FC<React.ComponentPropsWithRef<typeof AriaTabs>> = ({\n    className,\n    ...props\n}) => {\n    return (\n        <AriaTabs\n            className={(renderProps) =>\n                clsx(\n                    styles[\"tabs\"],\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            {...props}\n        />\n    );\n};\n"],"mappings":";;;;;4CCIa,KAA+D,MAAA;CAAA,IAAA,KAAA,GAAA,EAAA,EAAA,CAAA,CAAA,GAAA,GAAA;CAAA,AAAA,EAAA,OAAA,KAG3E,IAAA,EAAA,IAAA,IAAA,EAAA,OAH4E,kBAAA,KAAA,GAG5E,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAAA,AAAA,EAAA,OAAA,IASgB,IAAA,EAAA,MANM,KAAA,MACP,EACI,EAAM,MACN,OAAO,KAAc,aACf,EAAU,CACF,IAFd,CAGJ,GAAC,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAGP,OAHO,EAAA,OAAA,KAAA,EAAA,OAAA,KAPT,IAAA,kBAAC,GAAD;EACe,WAAA;EAMN,GAED;CAAK,CAAA,GACX,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,KAAA,IAAA,EAAA,IAVF;AAUE"}

package/dist/chunks/Tag.map

@@ -1 +1 @@
-{"version":3,"file":"Tag","names":[],"sources":["../../src/components/Tag/core.ts","../../src/components/Tag/tag.module.css","../../src/components/Tag/Tag.tsx"],"sourcesContent":["export const TagIconSize = 18;\nexport const AvatarSize = 24;\n","/* configurable tokens\n*\n* --md-chip-background-color\n* --md-chip-selected-background-color\n*\n* --md-chip-icon-color\n* --md-chip-selected-icon-color\n*\n* --md-chip-label-color\n* --md-chip-selected-label-color\n*\n* configurable tokens end */\n\n@layer adgytec.overrides {\n    .tag {\n        [data-visual-button] {\n            --focus-indicator-offset: calc(-4 * var(--dp, 1px));\n        }\n    }\n}\n\n@layer adgytec.comps {\n    .tag {\n        --_md-chip-background-color: var(\n            --md-chip-background-color,\n            var(--md-sys-color-surface-container-low)\n        );\n        --_md-chip-selected-background-color: var(\n            --md-chip-selected-background-color,\n            var(--md-sys-color-secondary-container)\n        );\n        --_md-chip-icon-color: var(\n            --md-chip-icon-color,\n            var(--md-sys-color-primary)\n        );\n        --_md-chip-selected-icon-color: var(\n            --md-chip-selected-icon-color,\n            var(--md-sys-color-on-secondary-container)\n        );\n        --_md-chip-label-color: var(\n            --md-chip-label-color,\n            var(--md-sys-color-on-surface-variant)\n        );\n        --_md-chip-selected-label-color: var(\n            --md-chip-selected-label-color,\n            var(--md-sys-color-on-secondary-container)\n        );\n\n        /* derived */\n        --_background: var(--_md-chip-background-color);\n        --_label-color: var(--_md-chip-label-color);\n        --_icon-color: var(--_md-chip-icon-color);\n\n        --_state-layer-opacity: 0;\n\n        --_state-layer-color: rgb(\n            from var(--_label-color) r g b /\n            var(--_state-layer-opacity)\n        );\n\n        /* styles  */\n\n        display: flex;\n        align-items: center;\n        gap: var(--md-sys-layout-space-8);\n\n        position: relative;\n        overflow: clip;\n\n        background-color: var(--_background);\n        color: var(--_icon-color);\n\n        padding-inline: var(--md-sys-layout-space-12);\n        padding-block: calc(5 * var(--dp, 1px));\n        border-radius: var(--md-sys-shape-corner-radius-small);\n\n        border: calc(1 * var(--dp, 1px)) solid\n            var(--md-sys-color-outline-variant);\n        outline: none;\n\n        transition:\n            background-color var(--md-sys-motion-expressive-fast-effects)\n            var(--md-sys-motion-expressive-fast-effects-duration),\n            color var(--md-sys-motion-expressive-fast-effects)\n            var(--md-sys-motion-expressive-fast-effects-duration),\n            border-color var(--md-sys-motion-expressive-fast-effects)\n            var(--md-sys-motion-expressive-fast-effects-duration),\n            padding var(--md-sys-motion-expressive-fast-spatial)\n            var(--md-sys-motion-expressive-fast-spatial-duration);\n\n        @media (prefers-reduced-motion) {\n            transition: none;\n        }\n\n        &[data-icon] {\n            padding-inline-start: var(--md-sys-layout-space-8);\n        }\n\n        &[data-avatar] {\n            padding-block: calc(3 * var(--dp, 1px));\n            padding-inline-start: var(--md-sys-layout-space-4);\n        }\n\n        &[data-allows-removing] {\n            padding-block: 0;\n            padding-inline-end: calc(2 * var(--dp, 1px));\n        }\n\n        &[data-selection-mode] {\n            cursor: pointer;\n        }\n\n        &[data-selected] {\n            --_background: var(--_md-chip-selected-background-color);\n            --_label-color: var(--_md-chip-selected-label-color);\n            --_icon-color: var(--_md-chip-selected-icon-color);\n\n            border-color: transparent;\n        }\n\n        &[data-hovered] {\n            --_state-layer-opacity: var(--md-sys-state-hover);\n        }\n\n        &[data-focus-visible] {\n            --_state-layer-opacity: var(--md-sys-state-focus);\n        }\n\n        &[data-pressed] {\n            --_state-layer-opacity: var(--md-sys-state-pressed);\n        }\n\n        &[data-disabled] {\n            cursor: default;\n            border-color: transparent;\n\n            --_background: rgb(\n                from var(--md-sys-color-on-surface) r g b /\n                var(--md-sys-state-disabled-container)\n            );\n            --_label-color: rgb(\n                from var(--md-sys-color-on-surface) r g b /\n                var(--md-sys-state-disabled-content)\n            );\n            --_icon-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    /* state layer */\n    .tag::before {\n        content: \"\";\n\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n\n        background-color: var(--_state-layer-color);\n\n        transition: background-color var(--md-sys-motion-standard-fast-spatial)\n            var(--md-sys-motion-standard-fast-spatial-duration);\n\n        @media (prefers-reduced-motion) {\n            transition: none;\n        }\n    }\n\n    /* focus indicator */\n    .tag[data-focus-visible] {\n        --focus-indicator-thickness: calc(3 * var(--dp, 1px));\n        --focus-indicator-offset: calc(2 * var(--dp, 1px));\n        --focus-indicator-color: var(--md-sys-color-secondary);\n\n        outline-width: var(--focus-indicator-thickness);\n        outline-style: solid;\n        outline-offset: var(--focus-indicator-offset);\n        outline-color: var(--focus-indicator-color);\n\n        z-index: 1;\n    }\n\n    .label {\n        color: var(--_label-color);\n\n        transition: color var(--md-sys-motion-expressive-fast-effects)\n            var(--md-sys-motion-expressive-fast-effects-duration);\n\n        @media (prefers-reduced-motion) {\n            transition: none;\n        }\n    }\n\n    .avatar-constraint {\n        inline-size: var(--md-sys-layout-space-24);\n        max-inline-size: var(--md-sys-layout-space-24);\n\n        block-size: var(--md-sys-layout-space-24);\n        max-block-size: var(--md-sys-layout-space-24);\n\n        aspect-ratio: 1 / 1;\n        border-radius: 50%;\n\n        overflow: clip;\n\n        &[data-disabled] {\n            position: relative;\n\n            &::before {\n                content: \"\";\n                position: absolute;\n                inset: 0;\n                border-radius: 50%;\n\n                background: rgb(\n                    from var(--md-sys-color-on-surface) r g b /\n                    var(--md-sys-state-disabled-content)\n                );\n            }\n        }\n    }\n}\n","import clsx from \"clsx\";\nimport { Check, X } from \"lucide-react\";\nimport { Tag as AriaTag } from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport { IconButton } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { Splash } from \"../Splash/Splash\";\nimport { useSplash } from \"../Splash/useSplash\";\nimport { TagIconSize } from \"./core\";\nimport styles from \"./tag.module.css\";\nimport type { TagProps } from \"./types\";\n\nexport const Tag: React.FC<TagProps> = ({\n    icon,\n    avatar,\n    label,\n    className,\n    onPress,\n    textValue = label,\n    ...props\n}) => {\n    const { splashInfo, handlePress } = useSplash(onPress);\n\n    return (\n        <AriaTag\n            onPress={handlePress}\n            className={(renderProps) =>\n                clsx(\n                    styles[\"tag\"],\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            textValue={textValue}\n            {...props}\n            data-avatar={avatar ? true : undefined}\n            data-icon={!avatar && icon ? true : undefined}\n        >\n            {({ isSelected, allowsRemoving, isDisabled }) => (\n                <>\n                    {splashInfo && <Splash {...splashInfo} />}\n                    {avatar ? (\n                        <div\n                            className={clsx(styles[\"avatar-constraint\"])}\n                            data-disabled={isDisabled || undefined}\n                        >\n                            {avatar}\n                        </div>\n                    ) : isSelected ? (\n                        <Icon icon={Check} size={TagIconSize} />\n                    ) : (\n                        icon && <Icon icon={icon} size={TagIconSize} />\n                    )}\n\n                    <p className={clsx(typography.labelLarge, styles[\"label\"])}>\n                        {label}\n                    </p>\n\n                    {allowsRemoving && (\n                        <IconButton\n                            slot=\"remove\"\n                            icon={X}\n                            size=\"extra-small\"\n                            color=\"standard\"\n                        />\n                    )}\n                </>\n            )}\n        </AriaTag>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAa,IAAc,IACd,IAAa;;;;GEWb,KAA2B,EACpC,SACA,WACA,UACA,cACA,YACA,eAAY,GACZ,GAAG,QACD;CACF,IAAM,EAAE,eAAY,mBAAgB,EAAU,CAAO;CAErD,OACI,kBAAC,GAAD;EACI,SAAS;EACT,YAAY,MACR,EACI,EAAO,KACP,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;EAEO;EACX,GAAI;EACJ,eAAa,IAAS,KAAO,KAAA;EAC7B,aAAW,CAAC,KAAU,IAAO,KAAO,KAAA;aAElC,EAAE,eAAY,mBAAgB,oBAC5B,kBAAA,GAAA,EAAA,UAAA;GACK,KAAc,kBAAC,GAAD,EAAQ,GAAI,EAAa,CAAA;GACvC,IACG,kBAAC,OAAD;IACI,WAAW,EAAK,EAAO,oBAAoB;IAC3C,iBAAe,KAAc,KAAA;cAE5B;GACA,CAAA,IACL,IACA,kBAAC,GAAD;IAAM,MAAM;IAAO,MAAA;GAAoB,CAAA,IAEvC,KAAQ,kBAAC,GAAD;IAAY;IAAM,MAAA;GAAoB,CAAA;GAGlD,kBAAC,KAAD;IAAG,WAAW,EAAK,EAAW,YAAY,EAAO,KAAQ;cACpD;GACF,CAAA;GAEF,KACG,kBAAC,GAAD;IACI,MAAK;IACL,MAAM;IACN,MAAK;IACL,OAAM;GACT,CAAA;EAEP,EAAA,CAAA;CAED,CAAA;AAEjB"}
+{"version":3,"file":"Tag","names":[],"sources":["../../src/components/Tag/core.ts","../../src/components/Tag/tag.module.css","../../src/components/Tag/Tag.tsx"],"sourcesContent":["export const TagIconSize = 18;\nexport const AvatarSize = 24;\n","/* configurable tokens\n*\n* --md-chip-background-color\n* --md-chip-selected-background-color\n*\n* --md-chip-icon-color\n* --md-chip-selected-icon-color\n*\n* --md-chip-label-color\n* --md-chip-selected-label-color\n*\n* configurable tokens end */\n\n@layer adgytec.overrides {\n    .tag {\n        [data-visual-button] {\n            --focus-indicator-offset: calc(-4 * var(--dp, 1px));\n        }\n    }\n}\n\n@layer adgytec.comps {\n    .tag {\n        --_md-chip-background-color: var(\n            --md-chip-background-color,\n            var(--md-sys-color-surface-container-low)\n        );\n        --_md-chip-selected-background-color: var(\n            --md-chip-selected-background-color,\n            var(--md-sys-color-secondary-container)\n        );\n        --_md-chip-icon-color: var(\n            --md-chip-icon-color,\n            var(--md-sys-color-primary)\n        );\n        --_md-chip-selected-icon-color: var(\n            --md-chip-selected-icon-color,\n            var(--md-sys-color-on-secondary-container)\n        );\n        --_md-chip-label-color: var(\n            --md-chip-label-color,\n            var(--md-sys-color-on-surface-variant)\n        );\n        --_md-chip-selected-label-color: var(\n            --md-chip-selected-label-color,\n            var(--md-sys-color-on-secondary-container)\n        );\n\n        /* derived */\n        --_background: var(--_md-chip-background-color);\n        --_label-color: var(--_md-chip-label-color);\n        --_icon-color: var(--_md-chip-icon-color);\n\n        --_state-layer-opacity: 0;\n\n        --_state-layer-color: rgb(\n            from var(--_label-color) r g b /\n            var(--_state-layer-opacity)\n        );\n\n        /* styles  */\n\n        display: flex;\n        align-items: center;\n        gap: var(--md-sys-layout-space-8);\n\n        position: relative;\n        overflow: clip;\n\n        background-color: var(--_background);\n        color: var(--_icon-color);\n\n        padding-inline: var(--md-sys-layout-space-12);\n        padding-block: calc(5 * var(--dp, 1px));\n        border-radius: var(--md-sys-shape-corner-radius-small);\n\n        border: calc(1 * var(--dp, 1px)) solid\n            var(--md-sys-color-outline-variant);\n        outline: none;\n\n        transition:\n            background-color var(--md-sys-motion-expressive-fast-effects)\n            var(--md-sys-motion-expressive-fast-effects-duration),\n            color var(--md-sys-motion-expressive-fast-effects)\n            var(--md-sys-motion-expressive-fast-effects-duration),\n            border-color var(--md-sys-motion-expressive-fast-effects)\n            var(--md-sys-motion-expressive-fast-effects-duration),\n            padding var(--md-sys-motion-expressive-fast-spatial)\n            var(--md-sys-motion-expressive-fast-spatial-duration);\n\n        @media (prefers-reduced-motion) {\n            transition: none;\n        }\n\n        &[data-icon] {\n            padding-inline-start: var(--md-sys-layout-space-8);\n        }\n\n        &[data-avatar] {\n            padding-block: calc(3 * var(--dp, 1px));\n            padding-inline-start: var(--md-sys-layout-space-4);\n        }\n\n        &[data-allows-removing] {\n            padding-block: 0;\n            padding-inline-end: calc(2 * var(--dp, 1px));\n        }\n\n        &[data-selection-mode] {\n            cursor: pointer;\n        }\n\n        &[data-selected] {\n            --_background: var(--_md-chip-selected-background-color);\n            --_label-color: var(--_md-chip-selected-label-color);\n            --_icon-color: var(--_md-chip-selected-icon-color);\n\n            border-color: transparent;\n        }\n\n        &[data-hovered] {\n            --_state-layer-opacity: var(--md-sys-state-hover);\n        }\n\n        &[data-focus-visible] {\n            --_state-layer-opacity: var(--md-sys-state-focus);\n        }\n\n        &[data-pressed] {\n            --_state-layer-opacity: var(--md-sys-state-pressed);\n        }\n\n        &[data-disabled] {\n            cursor: default;\n            border-color: transparent;\n\n            --_background: rgb(\n                from var(--md-sys-color-on-surface) r g b /\n                var(--md-sys-state-disabled-container)\n            );\n            --_label-color: rgb(\n                from var(--md-sys-color-on-surface) r g b /\n                var(--md-sys-state-disabled-content)\n            );\n            --_icon-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    /* state layer */\n    .tag::before {\n        content: \"\";\n\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n\n        background-color: var(--_state-layer-color);\n\n        transition: background-color var(--md-sys-motion-standard-fast-spatial)\n            var(--md-sys-motion-standard-fast-spatial-duration);\n\n        @media (prefers-reduced-motion) {\n            transition: none;\n        }\n    }\n\n    /* focus indicator */\n    .tag[data-focus-visible] {\n        --focus-indicator-thickness: calc(3 * var(--dp, 1px));\n        --focus-indicator-offset: calc(2 * var(--dp, 1px));\n        --focus-indicator-color: var(--md-sys-color-secondary);\n\n        outline-width: var(--focus-indicator-thickness);\n        outline-style: solid;\n        outline-offset: var(--focus-indicator-offset);\n        outline-color: var(--focus-indicator-color);\n\n        z-index: 1;\n    }\n\n    .label {\n        color: var(--_label-color);\n\n        transition: color var(--md-sys-motion-expressive-fast-effects)\n            var(--md-sys-motion-expressive-fast-effects-duration);\n\n        @media (prefers-reduced-motion) {\n            transition: none;\n        }\n    }\n\n    .avatar-constraint {\n        inline-size: var(--md-sys-layout-space-24);\n        max-inline-size: var(--md-sys-layout-space-24);\n\n        block-size: var(--md-sys-layout-space-24);\n        max-block-size: var(--md-sys-layout-space-24);\n\n        aspect-ratio: 1 / 1;\n        border-radius: 50%;\n\n        overflow: clip;\n\n        &[data-disabled] {\n            position: relative;\n\n            &::before {\n                content: \"\";\n                position: absolute;\n                inset: 0;\n                border-radius: 50%;\n\n                background: rgb(\n                    from var(--md-sys-color-on-surface) r g b /\n                    var(--md-sys-state-disabled-content)\n                );\n            }\n        }\n    }\n}\n","import clsx from \"clsx\";\nimport { Check, X } from \"lucide-react\";\nimport { Tag as AriaTag } from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport { IconButton } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { Splash } from \"../Splash/Splash\";\nimport { useSplash } from \"../Splash/useSplash\";\nimport { TagIconSize } from \"./core\";\nimport styles from \"./tag.module.css\";\nimport type { TagProps } from \"./types\";\n\nexport const Tag: React.FC<TagProps> = ({\n    icon,\n    avatar,\n    label,\n    className,\n    onPress,\n    textValue = label,\n    ...props\n}) => {\n    const { splashInfo, handlePress } = useSplash(onPress);\n\n    return (\n        <AriaTag\n            onPress={handlePress}\n            className={(renderProps) =>\n                clsx(\n                    styles[\"tag\"],\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            textValue={textValue}\n            {...props}\n            data-avatar={avatar ? true : undefined}\n            data-icon={!avatar && icon ? true : undefined}\n        >\n            {({ isSelected, allowsRemoving, isDisabled }) => (\n                <>\n                    {splashInfo && <Splash {...splashInfo} />}\n                    {avatar ? (\n                        <div\n                            className={clsx(styles[\"avatar-constraint\"])}\n                            data-disabled={isDisabled || undefined}\n                        >\n                            {avatar}\n                        </div>\n                    ) : isSelected ? (\n                        <Icon icon={Check} size={TagIconSize} />\n                    ) : (\n                        icon && <Icon icon={icon} size={TagIconSize} />\n                    )}\n\n                    <p className={clsx(typography.labelLarge, styles[\"label\"])}>\n                        {label}\n                    </p>\n\n                    {allowsRemoving && (\n                        <IconButton\n                            slot=\"remove\"\n                            icon={X}\n                            size=\"extra-small\"\n                            color=\"standard\"\n                        />\n                    )}\n                </>\n            )}\n        </AriaTag>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAa,IAAc,IACd,IAAa;;;;GEWb,KAA2B,EACpC,SACA,WACA,UACA,cACA,YACA,eAAY,GACZ,GAAG,QACD;CACF,IAAM,EAAE,eAAY,mBAAgB,EAAU,CAAO;CAErD,OACI,kBAAC,GAAD;EACI,SAAS;EACT,YAAY,MACR,EACI,EAAO,KACP,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;EAEO;EACX,GAAI;EACJ,eAAa,IAAS,KAAO,KAAA;EAC7B,aAAW,CAAC,KAAU,IAAO,KAAO,KAAA;aAElC,EAAE,eAAY,mBAAgB,oBAC5B,kBAAA,GAAA,EAAA,UAAA;GACK,KAAc,kBAAC,GAAD,EAAQ,GAAI,EAAW,CAAA;GACrC,IACG,kBAAC,OAAD;IACI,WAAW,EAAK,EAAO,oBAAoB;IAC3C,iBAAe,KAAc,KAAA;cAE5B;GACA,CAAA,IACL,IACA,kBAAC,GAAD;IAAM,MAAM;IAAO,MAAA;GAAkB,CAAA,IAErC,KAAQ,kBAAC,GAAD;IAAY;IAAM,MAAA;GAAkB,CAAA;GAGhD,kBAAC,KAAD;IAAG,WAAW,EAAK,EAAW,YAAY,EAAO,KAAQ;cACpD;GACF,CAAA;GAEF,KACG,kBAAC,GAAD;IACI,MAAK;IACL,MAAM;IACN,MAAK;IACL,OAAM;GAAU,CAAA;EAG5B,EAAA,CAAA;CAEC,CAAA;AAEjB"}

package/dist/chunks/ThemeSelector

@@ -1,22 +1,23 @@
-import { t as e } from "./base";
-import { r as t } from "./core";
-import { t as n } from "./ConnectedButtonGroup";
-import { t as r } from "./Switch";
-import i from "clsx";
-import { useLayoutEffect as a, useMemo as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { useLocalStorage as l, useMediaQuery as u } from "usehooks-ts";
+import { t as e } from "./compiler-runtime";
+import { t } from "./base";
+import { r as n } from "./core";
+import { t as r } from "./ConnectedButtonGroup";
+import { t as i } from "./Switch";
+import a from "clsx";
+import { useLayoutEffect as o, useMemo as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useLocalStorage as u, useMediaQuery as d } from "usehooks-ts";
 import '../assets/ThemeSelector.css';//#region src/utils/theme/build.ts
-var d = ({ isDarkMode: e, isMonochrome: t, contrast: n }) => {
+var f = ({ isDarkMode: e, isMonochrome: t, contrast: n }) => {
 	let r = e ? "dark" : "light";
 	return t ? `monochrome-${r}` : `${r}${n === "standard" ? "" : n === "medium" ? "-medium-contrast" : "-high-contrast"}`;
-}, f = "(prefers-color-scheme: dark)", p = "application-theme";
-function m({ defaultThemeMode: e = "system", defaultContrast: t = "standard", isMonochrome: n = !1, localStorageKey: r = p, initializeWithValue: i = !0 } = {}) {
+}, p = "(prefers-color-scheme: dark)", m = "application-theme";
+function h({ defaultThemeMode: e = "system", defaultContrast: t = "standard", isMonochrome: n = !1, localStorageKey: r = m, initializeWithValue: i = !0 } = {}) {
 	let a = {
 		mode: e,
 		contrast: t,
 		isMonochrome: n
-	}, o = u(f, { initializeWithValue: i }), [s, c] = l(r, a, { initializeWithValue: i }), d = s.mode === "dark" || s.mode === "system" && o, m = (e) => {
+	}, o = d(p, { initializeWithValue: i }), [s, c] = u(r, a, { initializeWithValue: i }), l = s.mode === "dark" || s.mode === "system" && o, f = (e) => {
 		c((t) => ({
 			...t,
 			mode: e
@@ -34,29 +35,29 @@ function m({ defaultThemeMode: e = "system", defaultContrast: t = "standard", is
 	};
 	return {
 		...s,
-		isDarkMode: d,
-		setMode: m,
+		isDarkMode: l,
+		setMode: f,
 		setContrast: h,
 		setMonochrome: g
 	};
 }
 //#endregion
 //#region src/components/ThemeSelector/ThemeProvider.tsx
-var h = ({ children: e }) => {
-	let { isDarkMode: t, isMonochrome: n, contrast: r } = m();
-	return a(() => {
-		let e = d({
-			isDarkMode: t,
-			isMonochrome: n,
-			contrast: r
+var g = e(), _ = (e) => {
+	let t = (0, g.c)(5), { children: n } = e, { isDarkMode: r, isMonochrome: i, contrast: a } = h(), s, c;
+	return t[0] !== a || t[1] !== r || t[2] !== i ? (s = () => {
+		let e = f({
+			isDarkMode: r,
+			isMonochrome: i,
+			contrast: a
 		});
 		document.documentElement.setAttribute("data-theme", e);
-	}, [
-		t,
-		n,
-		r
-	]), e;
-}, g = (e) => [
+	}, c = [
+		r,
+		i,
+		a
+	], t[0] = a, t[1] = r, t[2] = i, t[3] = s, t[4] = c) : (s = t[3], c = t[4]), o(s, c), n;
+}, v = (e) => [
 	{
 		id: "system",
 		value: e.system
@@ -69,7 +70,7 @@ var h = ({ children: e }) => {
 		id: "dark",
 		value: e.dark
 	}
-], _ = (e) => [
+], y = (e) => [
 	{
 		id: "standard",
 		value: e.standard
@@ -83,103 +84,103 @@ var h = ({ children: e }) => {
 		value: e.high
 	}
 ];
-function v(e) {
+function b(e) {
 	return e === "system" || e === "dark" || e === "light";
 }
-function y(e) {
+function x(e) {
 	return e === "standard" || e === "medium" || e === "high";
 }
-var b = {
+var S = {
 	selector: "_selector_o55o3_2",
 	"theme-item": "_theme-item_o55o3_7",
 	"theme-item-info": "_theme-item-info_o55o3_12"
-}, x = ({ heading: t, description: n, children: r, className: a, useInline: o = !1 }) => o ? /* @__PURE__ */ c("span", {
-	className: i(b["theme-item"], a),
-	children: [/* @__PURE__ */ c("span", {
-		className: i(b["theme-item-info"]),
-		children: [/* @__PURE__ */ s("span", {
-			className: i(e.titleMedium),
+}, C = ({ heading: e, description: n, children: r, className: i, useInline: o = !1 }) => o ? /* @__PURE__ */ l("span", {
+	className: a(S["theme-item"], i),
+	children: [/* @__PURE__ */ l("span", {
+		className: a(S["theme-item-info"]),
+		children: [/* @__PURE__ */ c("span", {
+			className: a(t.titleMedium),
 			slot: "label",
-			children: t
-		}), n && /* @__PURE__ */ s("span", {
-			className: i(e.bodyMedium),
+			children: e
+		}), n && /* @__PURE__ */ c("span", {
+			className: a(t.bodyMedium),
 			slot: "description",
 			children: n
 		})]
 	}), r]
-}) : /* @__PURE__ */ c("div", {
-	className: i(b["theme-item"], a),
-	children: [/* @__PURE__ */ c("div", {
-		className: i(b["theme-item-info"]),
-		children: [/* @__PURE__ */ s("h3", {
-			className: i(e.titleMedium),
-			children: t
-		}), n && /* @__PURE__ */ s("p", {
-			className: i(e.bodyMedium),
+}) : /* @__PURE__ */ l("div", {
+	className: a(S["theme-item"], i),
+	children: [/* @__PURE__ */ l("div", {
+		className: a(S["theme-item-info"]),
+		children: [/* @__PURE__ */ c("h3", {
+			className: a(t.titleMedium),
+			children: e
+		}), n && /* @__PURE__ */ c("p", {
+			className: a(t.bodyMedium),
 			children: n
 		})]
 	}), r]
-}), S = {
+}), w = {
 	heading: "Theme Mode",
 	description: "Choose how the interface appearance is displayed across the app. You can follow your system settings or manually use light or dark mode.",
 	system: "System",
 	dark: "Dark",
 	light: "Light"
-}, C = {
+}, T = {
 	heading: "Theme Contrast",
 	description: "Adjust the interface contrast level to improve visibility and readability based on your visual preference and viewing environment.",
 	standard: "Standard",
 	medium: "Medium",
 	high: "High"
-}, w = {
+}, E = {
 	heading: "Monochrome",
 	description: "Use a monochrome appearance with neutral tones instead of the default colorful theme. This can provide a cleaner and more focused visual experience."
-}, T = ({ modeDetails: e = S, contrastDetails: a = C, monochromeDetails: l = w }) => {
-	let { mode: u, isMonochrome: d, contrast: f, setContrast: p, setMode: h, setMonochrome: T } = m(), E = o(() => g(e), [e]), D = o(() => _(a), [a]);
-	return /* @__PURE__ */ c("div", {
-		className: i(b.selector),
+}, D = ({ modeDetails: e = w, contrastDetails: t = T, monochromeDetails: o = E }) => {
+	let { mode: u, isMonochrome: d, contrast: f, setContrast: p, setMode: m, setMonochrome: g } = h(), _ = s(() => v(e), [e]), D = s(() => y(t), [t]);
+	return /* @__PURE__ */ l("div", {
+		className: a(S.selector),
 		children: [
-			/* @__PURE__ */ s(x, {
+			/* @__PURE__ */ c(C, {
 				heading: e.heading,
 				description: e.description,
-				children: /* @__PURE__ */ s(n, {
+				children: /* @__PURE__ */ c(r, {
 					selectionMode: "single",
 					selectedKeys: [u],
 					onSelectionChange: (e) => {
 						let t = Array.from(e)[0];
-						v(t) && h(t);
+						b(t) && m(t);
 					},
-					children: E.map((e) => /* @__PURE__ */ s(t, {
+					children: _.map((e) => /* @__PURE__ */ c(n, {
 						id: e.id,
 						children: e.value
 					}, e.id))
 				})
 			}),
-			/* @__PURE__ */ s(x, {
-				heading: a.heading,
-				description: a.description,
-				children: /* @__PURE__ */ s(n, {
+			/* @__PURE__ */ c(C, {
+				heading: t.heading,
+				description: t.description,
+				children: /* @__PURE__ */ c(r, {
 					color: "tonal",
 					selectionMode: "single",
 					selectedKeys: [f],
 					onSelectionChange: (e) => {
 						let t = Array.from(e)[0];
-						y(t) && p(t);
+						x(t) && p(t);
 					},
 					isDisabled: d,
-					children: D.map((e) => /* @__PURE__ */ s(t, {
+					children: D.map((e) => /* @__PURE__ */ c(n, {
 						id: e.id,
 						children: e.value
 					}, e.id))
 				})
 			}),
-			/* @__PURE__ */ s(r, {
+			/* @__PURE__ */ c(i, {
 				isSelected: d,
-				onChange: T,
+				onChange: g,
 				containerStateLayer: !0,
-				children: /* @__PURE__ */ s(x, {
-					heading: l.heading,
-					description: l.description,
+				children: /* @__PURE__ */ c(C, {
+					heading: o.heading,
+					description: o.description,
 					useInline: !0
 				})
 			})
@@ -187,6 +188,6 @@ var b = {
 	});
 };
 //#endregion
-export { d as i, h as n, m as r, T as t };
+export { f as i, _ as n, h as r, D as t };
 
 //# sourceMappingURL=ThemeSelector.map

package/dist/chunks/ThemeSelector.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeSelector","names":[],"sources":["../../src/utils/theme/build.ts","../../src/utils/theme/useTheme.ts","../../src/components/ThemeSelector/ThemeProvider.tsx","../../src/components/ThemeSelector/core.ts","../../src/components/ThemeSelector/themeSelector.module.css","../../src/components/ThemeSelector/ThemeItem.tsx","../../src/components/ThemeSelector/ThemeSelector.tsx"],"sourcesContent":["import type { ThemeBuildOptions } from \"./types\";\n\nexport const buildThemeString = ({\n    isDarkMode,\n    isMonochrome,\n    contrast,\n}: ThemeBuildOptions) => {\n    const mode = isDarkMode ? \"dark\" : \"light\";\n    if (isMonochrome) return `monochrome-${mode}`;\n\n    const contrastSuffix =\n        contrast === \"standard\"\n            ? \"\"\n            : contrast === \"medium\"\n              ? \"-medium-contrast\"\n              : \"-high-contrast\";\n\n    return `${mode}${contrastSuffix}`;\n};\n","import { useLocalStorage, useMediaQuery } from \"usehooks-ts\";\nimport type {\n    ThemeContrast,\n    ThemeMode,\n    ThemeOptions,\n    ThemeReturn,\n    ThemeStorage,\n} from \"./types\";\n\nconst COLOR_SCHEME_QUERY = \"(prefers-color-scheme: dark)\";\nconst LOCAL_STORAGE_KEY = \"application-theme\";\n\nexport function useTheme({\n    defaultThemeMode = \"system\",\n    defaultContrast = \"standard\",\n    isMonochrome = false,\n    localStorageKey = LOCAL_STORAGE_KEY,\n    initializeWithValue = true,\n}: ThemeOptions = {}): ThemeReturn {\n    const defaultValue: ThemeStorage = {\n        mode: defaultThemeMode,\n        contrast: defaultContrast,\n        isMonochrome,\n    };\n\n    const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY, { initializeWithValue });\n    const [theme, setTheme] = useLocalStorage<ThemeStorage>(\n        localStorageKey,\n        defaultValue,\n        {\n            initializeWithValue,\n        }\n    );\n\n    const isDarkMode =\n        theme.mode === \"dark\" || (theme.mode === \"system\" && isDarkOS);\n\n    const setMode = (mode: ThemeMode) => {\n        setTheme((prev) => ({ ...prev, mode }));\n    };\n\n    const setContrast = (contrast: ThemeContrast) => {\n        setTheme((prev) => ({ ...prev, contrast }));\n    };\n\n    const setMonochrome = (isMonochrome: boolean) => {\n        setTheme((prev) => ({ ...prev, isMonochrome }));\n    };\n\n    return {\n        ...theme,\n        isDarkMode,\n        setMode,\n        setContrast,\n        setMonochrome,\n    };\n}\n","import { type ReactNode, useLayoutEffect } from \"react\";\nimport { buildThemeString, useTheme } from \"@/utils\";\n\nexport const ThemeProvider = ({ children }: { children?: ReactNode }) => {\n    const { isDarkMode, isMonochrome, contrast } = useTheme();\n\n    useLayoutEffect(() => {\n        const themeString = buildThemeString({\n            isDarkMode,\n            isMonochrome,\n            contrast,\n        });\n        document.documentElement.setAttribute(\"data-theme\", themeString);\n    }, [isDarkMode, isMonochrome, contrast]);\n\n    return children;\n};\n","import type { Key } from \"react-aria-components\";\nimport type { ThemeContrast, ThemeMode } from \"@/utils\";\nimport type { ThemeContrastTranslations, ThemeModeTranslations } from \"./types\";\n\nexport const modeItems = (\n    modeDetails: ThemeModeTranslations\n): {\n    id: ThemeMode;\n    value: string;\n}[] => {\n    return [\n        { id: \"system\", value: modeDetails.system },\n        { id: \"light\", value: modeDetails.light },\n        { id: \"dark\", value: modeDetails.dark },\n    ];\n};\n\nexport const contrastItems = (\n    contrastDetails: ThemeContrastTranslations\n): {\n    id: ThemeContrast;\n    value: string;\n}[] => {\n    return [\n        { id: \"standard\", value: contrastDetails.standard },\n        { id: \"medium\", value: contrastDetails.medium },\n        { id: \"high\", value: contrastDetails.high },\n    ];\n};\n\nexport function isThemeMode(value: Key): value is ThemeMode {\n    return value === \"system\" || value === \"dark\" || value === \"light\";\n}\n\nexport function isThemeContrast(value: Key): value is ThemeContrast {\n    return value === \"standard\" || value === \"medium\" || value === \"high\";\n}\n","@layer adgytec.comps {\n    .selector {\n        display: grid;\n        gap: var(--md-sys-layout-space-24);\n    }\n\n    .theme-item {\n        display: grid;\n        gap: var(--md-sys-layout-space-16);\n    }\n\n    .theme-item-info {\n        display: grid;\n    }\n}\n","import clsx from \"clsx\";\nimport type { ReactNode } from \"react\";\nimport { typography } from \"@/utils\";\nimport styles from \"./themeSelector.module.css\";\n\nexport const ThemeItem = ({\n    heading,\n    description,\n    children,\n    className,\n    useInline = false,\n}: {\n    heading: string;\n    description?: string;\n    children?: ReactNode;\n    className?: string;\n    useInline?: boolean;\n}) => {\n    if (useInline) {\n        return (\n            <span className={clsx(styles[\"theme-item\"], className)}>\n                <span className={clsx(styles[\"theme-item-info\"])}>\n                    <span className={clsx(typography.titleMedium)} slot=\"label\">\n                        {heading}\n                    </span>\n\n                    {description && (\n                        <span\n                            className={clsx(typography.bodyMedium)}\n                            slot=\"description\"\n                        >\n                            {description}\n                        </span>\n                    )}\n                </span>\n\n                {children}\n            </span>\n        );\n    }\n    return (\n        <div className={clsx(styles[\"theme-item\"], className)}>\n            <div className={clsx(styles[\"theme-item-info\"])}>\n                <h3 className={clsx(typography.titleMedium)}>{heading}</h3>\n\n                {description && (\n                    <p className={clsx(typography.bodyMedium)}>{description}</p>\n                )}\n            </div>\n\n            {children}\n        </div>\n    );\n};\n","import clsx from \"clsx\";\nimport { useMemo } from \"react\";\nimport { useTheme } from \"@/utils\";\nimport { ConnectedButton, ConnectedButtonGroup } from \"../Button\";\nimport { Switch } from \"../Input\";\nimport { contrastItems, isThemeContrast, isThemeMode, modeItems } from \"./core\";\nimport { ThemeItem } from \"./ThemeItem\";\nimport styles from \"./themeSelector.module.css\";\nimport type {\n    ThemeContrastTranslations,\n    ThemeModeTranslations,\n    ThemeMonochromeTranslations,\n    ThemeSelectorProps,\n} from \"./types\";\n\nconst defaultMode: ThemeModeTranslations = {\n    heading: \"Theme Mode\",\n    description:\n        \"Choose how the interface appearance is displayed across the app. You can follow your system settings or manually use light or dark mode.\",\n\n    system: \"System\",\n    dark: \"Dark\",\n    light: \"Light\",\n};\n\nconst defaultContrast: ThemeContrastTranslations = {\n    heading: \"Theme Contrast\",\n    description:\n        \"Adjust the interface contrast level to improve visibility and readability based on your visual preference and viewing environment.\",\n\n    standard: \"Standard\",\n    medium: \"Medium\",\n    high: \"High\",\n};\n\nconst defaultMonochrome: ThemeMonochromeTranslations = {\n    heading: \"Monochrome\",\n    description:\n        \"Use a monochrome appearance with neutral tones instead of the default colorful theme. This can provide a cleaner and more focused visual experience.\",\n};\n\nexport const ThemeSelector: React.FC<ThemeSelectorProps> = ({\n    modeDetails = defaultMode,\n    contrastDetails = defaultContrast,\n    monochromeDetails = defaultMonochrome,\n}) => {\n    const {\n        mode,\n        isMonochrome,\n        contrast,\n        setContrast,\n        setMode,\n        setMonochrome,\n    } = useTheme();\n\n    const themeModeItems = useMemo(() => modeItems(modeDetails), [modeDetails]);\n    const themeContrastItems = useMemo(\n        () => contrastItems(contrastDetails),\n        [contrastDetails]\n    );\n\n    return (\n        <div className={clsx(styles[\"selector\"])}>\n            <ThemeItem\n                heading={modeDetails.heading}\n                description={modeDetails.description}\n            >\n                <ConnectedButtonGroup\n                    selectionMode=\"single\"\n                    selectedKeys={[mode]}\n                    onSelectionChange={(keys) => {\n                        const themeMode = Array.from(keys)[0];\n                        if (!isThemeMode(themeMode)) return;\n\n                        setMode(themeMode);\n                    }}\n                >\n                    {themeModeItems.map((item) => (\n                        <ConnectedButton key={item.id} id={item.id}>\n                            {item.value}\n                        </ConnectedButton>\n                    ))}\n                </ConnectedButtonGroup>\n            </ThemeItem>\n\n            <ThemeItem\n                heading={contrastDetails.heading}\n                description={contrastDetails.description}\n            >\n                <ConnectedButtonGroup\n                    color=\"tonal\"\n                    selectionMode=\"single\"\n                    selectedKeys={[contrast]}\n                    onSelectionChange={(keys) => {\n                        const themeContrast = Array.from(keys)[0];\n                        if (!isThemeContrast(themeContrast)) return;\n\n                        setContrast(themeContrast);\n                    }}\n                    isDisabled={isMonochrome}\n                >\n                    {themeContrastItems.map((item) => (\n                        <ConnectedButton key={item.id} id={item.id}>\n                            {item.value}\n                        </ConnectedButton>\n                    ))}\n                </ConnectedButtonGroup>\n            </ThemeItem>\n\n            <Switch\n                isSelected={isMonochrome}\n                onChange={setMonochrome}\n                containerStateLayer\n            >\n                <ThemeItem\n                    heading={monochromeDetails.heading}\n                    description={monochromeDetails.description}\n                    useInline\n                ></ThemeItem>\n            </Switch>\n        </div>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ThemeSelector","names":["prev","isMonochrome","keys","item"],"sources":["../../src/utils/theme/build.ts","../../src/utils/theme/useTheme.ts","../../src/components/ThemeSelector/ThemeProvider.tsx","../../src/components/ThemeSelector/core.ts","../../src/components/ThemeSelector/themeSelector.module.css","../../src/components/ThemeSelector/ThemeItem.tsx","../../src/components/ThemeSelector/ThemeSelector.tsx"],"sourcesContent":["import type { ThemeBuildOptions } from \"./types\";\n\nexport const buildThemeString = ({\n    isDarkMode,\n    isMonochrome,\n    contrast,\n}: ThemeBuildOptions) => {\n    const mode = isDarkMode ? \"dark\" : \"light\";\n    if (isMonochrome) return `monochrome-${mode}`;\n\n    const contrastSuffix =\n        contrast === \"standard\"\n            ? \"\"\n            : contrast === \"medium\"\n              ? \"-medium-contrast\"\n              : \"-high-contrast\";\n\n    return `${mode}${contrastSuffix}`;\n};\n","import { useLocalStorage, useMediaQuery } from \"usehooks-ts\";\nimport type {\n    ThemeContrast,\n    ThemeMode,\n    ThemeOptions,\n    ThemeReturn,\n    ThemeStorage,\n} from \"./types\";\n\nconst COLOR_SCHEME_QUERY = \"(prefers-color-scheme: dark)\";\nconst LOCAL_STORAGE_KEY = \"application-theme\";\n\nexport function useTheme({\n    defaultThemeMode = \"system\",\n    defaultContrast = \"standard\",\n    isMonochrome = false,\n    localStorageKey = LOCAL_STORAGE_KEY,\n    initializeWithValue = true,\n}: ThemeOptions = {}): ThemeReturn {\n    const defaultValue: ThemeStorage = {\n        mode: defaultThemeMode,\n        contrast: defaultContrast,\n        isMonochrome,\n    };\n\n    const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY, { initializeWithValue });\n    const [theme, setTheme] = useLocalStorage<ThemeStorage>(\n        localStorageKey,\n        defaultValue,\n        {\n            initializeWithValue,\n        }\n    );\n\n    const isDarkMode =\n        theme.mode === \"dark\" || (theme.mode === \"system\" && isDarkOS);\n\n    const setMode = (mode: ThemeMode) => {\n        setTheme((prev) => ({ ...prev, mode }));\n    };\n\n    const setContrast = (contrast: ThemeContrast) => {\n        setTheme((prev) => ({ ...prev, contrast }));\n    };\n\n    const setMonochrome = (isMonochrome: boolean) => {\n        setTheme((prev) => ({ ...prev, isMonochrome }));\n    };\n\n    return {\n        ...theme,\n        isDarkMode,\n        setMode,\n        setContrast,\n        setMonochrome,\n    };\n}\n","import { type ReactNode, useLayoutEffect } from \"react\";\nimport { buildThemeString, useTheme } from \"@/utils\";\n\nexport const ThemeProvider = ({ children }: { children?: ReactNode }) => {\n    const { isDarkMode, isMonochrome, contrast } = useTheme();\n\n    useLayoutEffect(() => {\n        const themeString = buildThemeString({\n            isDarkMode,\n            isMonochrome,\n            contrast,\n        });\n        document.documentElement.setAttribute(\"data-theme\", themeString);\n    }, [isDarkMode, isMonochrome, contrast]);\n\n    return children;\n};\n","import type { Key } from \"react-aria-components\";\nimport type { ThemeContrast, ThemeMode } from \"@/utils\";\nimport type { ThemeContrastTranslations, ThemeModeTranslations } from \"./types\";\n\nexport const modeItems = (\n    modeDetails: ThemeModeTranslations\n): {\n    id: ThemeMode;\n    value: string;\n}[] => {\n    return [\n        { id: \"system\", value: modeDetails.system },\n        { id: \"light\", value: modeDetails.light },\n        { id: \"dark\", value: modeDetails.dark },\n    ];\n};\n\nexport const contrastItems = (\n    contrastDetails: ThemeContrastTranslations\n): {\n    id: ThemeContrast;\n    value: string;\n}[] => {\n    return [\n        { id: \"standard\", value: contrastDetails.standard },\n        { id: \"medium\", value: contrastDetails.medium },\n        { id: \"high\", value: contrastDetails.high },\n    ];\n};\n\nexport function isThemeMode(value: Key): value is ThemeMode {\n    return value === \"system\" || value === \"dark\" || value === \"light\";\n}\n\nexport function isThemeContrast(value: Key): value is ThemeContrast {\n    return value === \"standard\" || value === \"medium\" || value === \"high\";\n}\n","@layer adgytec.comps {\n    .selector {\n        display: grid;\n        gap: var(--md-sys-layout-space-24);\n    }\n\n    .theme-item {\n        display: grid;\n        gap: var(--md-sys-layout-space-16);\n    }\n\n    .theme-item-info {\n        display: grid;\n    }\n}\n","import clsx from \"clsx\";\nimport type { ReactNode } from \"react\";\nimport { typography } from \"@/utils\";\nimport styles from \"./themeSelector.module.css\";\n\nexport const ThemeItem = ({\n    heading,\n    description,\n    children,\n    className,\n    useInline = false,\n}: {\n    heading: string;\n    description?: string;\n    children?: ReactNode;\n    className?: string;\n    useInline?: boolean;\n}) => {\n    if (useInline) {\n        return (\n            <span className={clsx(styles[\"theme-item\"], className)}>\n                <span className={clsx(styles[\"theme-item-info\"])}>\n                    <span className={clsx(typography.titleMedium)} slot=\"label\">\n                        {heading}\n                    </span>\n\n                    {description && (\n                        <span\n                            className={clsx(typography.bodyMedium)}\n                            slot=\"description\"\n                        >\n                            {description}\n                        </span>\n                    )}\n                </span>\n\n                {children}\n            </span>\n        );\n    }\n    return (\n        <div className={clsx(styles[\"theme-item\"], className)}>\n            <div className={clsx(styles[\"theme-item-info\"])}>\n                <h3 className={clsx(typography.titleMedium)}>{heading}</h3>\n\n                {description && (\n                    <p className={clsx(typography.bodyMedium)}>{description}</p>\n                )}\n            </div>\n\n            {children}\n        </div>\n    );\n};\n","import clsx from \"clsx\";\nimport { useMemo } from \"react\";\nimport { useTheme } from \"@/utils\";\nimport { ConnectedButton, ConnectedButtonGroup } from \"../Button\";\nimport { Switch } from \"../Input\";\nimport { contrastItems, isThemeContrast, isThemeMode, modeItems } from \"./core\";\nimport { ThemeItem } from \"./ThemeItem\";\nimport styles from \"./themeSelector.module.css\";\nimport type {\n    ThemeContrastTranslations,\n    ThemeModeTranslations,\n    ThemeMonochromeTranslations,\n    ThemeSelectorProps,\n} from \"./types\";\n\nconst defaultMode: ThemeModeTranslations = {\n    heading: \"Theme Mode\",\n    description:\n        \"Choose how the interface appearance is displayed across the app. You can follow your system settings or manually use light or dark mode.\",\n\n    system: \"System\",\n    dark: \"Dark\",\n    light: \"Light\",\n};\n\nconst defaultContrast: ThemeContrastTranslations = {\n    heading: \"Theme Contrast\",\n    description:\n        \"Adjust the interface contrast level to improve visibility and readability based on your visual preference and viewing environment.\",\n\n    standard: \"Standard\",\n    medium: \"Medium\",\n    high: \"High\",\n};\n\nconst defaultMonochrome: ThemeMonochromeTranslations = {\n    heading: \"Monochrome\",\n    description:\n        \"Use a monochrome appearance with neutral tones instead of the default colorful theme. This can provide a cleaner and more focused visual experience.\",\n};\n\nexport const ThemeSelector: React.FC<ThemeSelectorProps> = ({\n    modeDetails = defaultMode,\n    contrastDetails = defaultContrast,\n    monochromeDetails = defaultMonochrome,\n}) => {\n    const {\n        mode,\n        isMonochrome,\n        contrast,\n        setContrast,\n        setMode,\n        setMonochrome,\n    } = useTheme();\n\n    const themeModeItems = useMemo(() => modeItems(modeDetails), [modeDetails]);\n    const themeContrastItems = useMemo(\n        () => contrastItems(contrastDetails),\n        [contrastDetails]\n    );\n\n    return (\n        <div className={clsx(styles[\"selector\"])}>\n            <ThemeItem\n                heading={modeDetails.heading}\n                description={modeDetails.description}\n            >\n                <ConnectedButtonGroup\n                    selectionMode=\"single\"\n                    selectedKeys={[mode]}\n                    onSelectionChange={(keys) => {\n                        const themeMode = Array.from(keys)[0];\n                        if (!isThemeMode(themeMode)) return;\n\n                        setMode(themeMode);\n                    }}\n                >\n                    {themeModeItems.map((item) => (\n                        <ConnectedButton key={item.id} id={item.id}>\n                            {item.value}\n                        </ConnectedButton>\n                    ))}\n                </ConnectedButtonGroup>\n            </ThemeItem>\n\n            <ThemeItem\n                heading={contrastDetails.heading}\n                description={contrastDetails.description}\n            >\n                <ConnectedButtonGroup\n                    color=\"tonal\"\n                    selectionMode=\"single\"\n                    selectedKeys={[contrast]}\n                    onSelectionChange={(keys) => {\n                        const themeContrast = Array.from(keys)[0];\n                        if (!isThemeContrast(themeContrast)) return;\n\n                        setContrast(themeContrast);\n                    }}\n                    isDisabled={isMonochrome}\n                >\n                    {themeContrastItems.map((item) => (\n                        <ConnectedButton key={item.id} id={item.id}>\n                            {item.value}\n                        </ConnectedButton>\n                    ))}\n                </ConnectedButtonGroup>\n            </ThemeItem>\n\n            <Switch\n                isSelected={isMonochrome}\n                onChange={setMonochrome}\n                containerStateLayer\n            >\n                <ThemeItem\n                    heading={monochromeDetails.heading}\n                    description={monochromeDetails.description}\n                    useInline\n                ></ThemeItem>\n            </Switch>\n        </div>\n    );\n};\n"],"mappings":"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"}

package/dist/chunks/Toolbar

@@ -1,19 +1,27 @@
-import e from "clsx";
-import { jsx as t } from "react/jsx-runtime";
-import { ToggleButtonGroup as n, Toolbar as r } from "react-aria-components";
-import '../assets/Toolbar.css';var i = {
+import { t as e } from "./compiler-runtime";
+import t from "clsx";
+import { jsx as n } from "react/jsx-runtime";
+import { ToggleButtonGroup as r, Toolbar as i } from "react-aria-components";
+import '../assets/Toolbar.css';var a = {
 	toolbar: "_toolbar_9s41z_16",
 	section: "_section_9s41z_60"
-}, a = ({ className: n, variant: a = "docked", color: o = "standard", ...s }) => /* @__PURE__ */ t(r, {
-	className: (t) => e(i.toolbar, typeof n == "function" ? n(t) : n),
+}, o = ({ className: e, variant: r = "docked", color: o = "standard", ...s }) => /* @__PURE__ */ n(i, {
+	className: (n) => t(a.toolbar, typeof e == "function" ? e(n) : e),
 	...s,
-	"data-variant": a,
+	"data-variant": r,
 	"data-color": o
-}), o = ({ className: r, ...a }) => /* @__PURE__ */ t(n, {
-	className: (t) => e(i.section, typeof r == "function" ? r(t) : r),
-	...a
-});
+}), s = e(), c = (e) => {
+	let i = (0, s.c)(8), o, c;
+	i[0] === e ? (o = i[1], c = i[2]) : ({className: o, ...c} = e, i[0] = e, i[1] = o, i[2] = c);
+	let l;
+	i[3] === o ? l = i[4] : (l = (e) => t(a.section, typeof o == "function" ? o(e) : o), i[3] = o, i[4] = l);
+	let u;
+	return i[5] !== c || i[6] !== l ? (u = /* @__PURE__ */ n(r, {
+		className: l,
+		...c
+	}), i[5] = c, i[6] = l, i[7] = u) : u = i[7], u;
+};
 //#endregion
-export { a as n, o as t };
+export { o as n, c as t };
 
 //# sourceMappingURL=Toolbar.map

package/dist/chunks/Toolbar.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar","names":[],"sources":["../../src/components/Toolbar/toolbar.module.css","../../src/components/Toolbar/Toolbar.tsx","../../src/components/Toolbar/ToolbarToggleButtonGroup.tsx"],"sourcesContent":["/* configurable tokens\n*\n* --md-toolbar-background\n*\n* --md-toolbar-button-background\n* --md-toolbar-toggle-button-background\n* --md-toolbar-toggle-button-selected-background\n*\n* --md-toolbar-button-color\n* --md-toolbar-toggle-button-color\n* --md-toolbar-toggle-button-selected-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n    .toolbar {\n        --_md-toolbar-background: var(\n            --md-toolbar-background,\n            var(--_md-toolbar-background-default)\n        );\n        --_md-toolbar-button-background: var(\n            --md-toolbar-button-background,\n            var(--_md-toolbar-button-background-default)\n        );\n        --_md-toolbar-toggle-button-background: var(\n            --md-toolbar-toggle-button-background,\n            var(--_md-toolbar-toggle-button-background-default)\n        );\n        --_md-toolbar-toggle-button-selected-background: var(\n            --md-toolbar-toggle-button-selected-background,\n            var(--_md-toolbar-toggle-button-selected-background-default)\n        );\n        --_md-toolbar-button-color: var(\n            --md-toolbar-button-color,\n            var(--_md-toolbar-button-color-default)\n        );\n        --_md-toolbar-toggle-button-color: var(\n            --md-toolbar-toggle-button-color,\n            var(--_md-toolbar-toggle-button-color-default)\n        );\n        --_md-toolbar-toggle-button-selected-color: var(\n            --md-toolbar-toggle-button-selected-color,\n            var(--_md-toolbar-toggle-button-selected-color-default)\n        );\n\n        --md-divider-color: var(--_md-toolbar-button-color);\n\n        --_md-toolbar-space-between-actions: var(--md-sys-layout-space-4);\n\n        border-radius: var(--md-sys-shape-corner-radius-full);\n        padding: var(--md-sys-layout-space-8);\n\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: var(--_md-toolbar-space-between-actions);\n\n        background-color: var(--_md-toolbar-background);\n\n        .section {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            gap: var(--_md-toolbar-space-between-actions);\n        }\n\n        &[data-variant=\"floating\"] {\n            box-shadow: var(--md-sys-elevation-shadow-3);\n        }\n\n        &[data-orientation=\"vertical\"] {\n            flex-direction: column;\n\n            .section {\n                flex-direction: column;\n            }\n        }\n    }\n\n    .toolbar[data-color=\"standard\"] {\n        --_md-toolbar-background-default: var(--md-sys-color-surface-container);\n\n        --_md-toolbar-button-background-default: var(\n            --md-sys-color-surface-container\n        );\n\n        --_md-toolbar-toggle-button-background-default: var(\n            --md-sys-color-surface-container\n        );\n\n        --_md-toolbar-toggle-button-selected-background-default: var(\n            --md-sys-color-secondary-container\n        );\n\n        --_md-toolbar-button-color-default: var(\n            --md-sys-color-on-surface-variant\n        );\n\n        --_md-toolbar-toggle-button-color-default: var(\n            --md-sys-color-on-surface-variant\n        );\n\n        --_md-toolbar-toggle-button-selected-color-default: var(\n            --md-sys-color-on-secondary-container\n        );\n    }\n\n    .toolbar[data-color=\"vibrant\"] {\n        --_md-toolbar-background-default: var(--md-sys-color-primary-container);\n\n        --_md-toolbar-button-background-default: var(\n            --md-sys-color-primary-container\n        );\n\n        --_md-toolbar-toggle-button-background-default: var(\n            --md-sys-color-primary-container\n        );\n\n        --_md-toolbar-toggle-button-selected-background-default: var(\n            --md-sys-color-surface-container\n        );\n\n        --_md-toolbar-button-color-default: var(\n            --md-sys-color-on-primary-container\n        );\n\n        --_md-toolbar-toggle-button-color-default: var(\n            --md-sys-color-on-primary-container\n        );\n\n        --_md-toolbar-toggle-button-selected-color-default: var(\n            --md-sys-color-on-surface\n        );\n    }\n}\n\n@layer adgytec.overrides {\n    .toolbar[data-orientation=\"horizontal\"] [data-divider] {\n        block-size: auto;\n        align-self: stretch;\n    }\n\n    /* button reset */\n    .toolbar [data-visual-button] {\n        /* outlined button */\n        --_md-button-outline-width: 0px;\n        border: none;\n\n        /* elevated button */\n        box-shadow: none;\n\n        --_md-toggle-button-selected-shape: var(--_md-button-shape);\n\n        &[data-disabled] {\n            background-color: transparent;\n        }\n    }\n\n    .toolbar [data-button]:not([data-color=\"filled\"]),\n    .toolbar [data-toggle-button] {\n        /* colors */\n        --md-button-background: var(--_md-toolbar-button-background);\n        --md-toggle-button-selected-background: var(\n            --_md-toolbar-toggle-button-selected-background\n        );\n        --md-toggle-button-background: var(\n            --_md-toolbar-toggle-button-background\n        );\n\n        --md-button-color: var(--_md-toolbar-button-color);\n        --md-toggle-button-selected-color: var(\n            --_md-toolbar-toggle-button-selected-color\n        );\n        --md-toggle-button-color: var(--_md-toolbar-toggle-button-color);\n    }\n}\n","import clsx from \"clsx\";\nimport { Toolbar as AriaToolbar } from \"react-aria-components\";\nimport styles from \"./toolbar.module.css\";\nimport type { ToolbarProps } from \"./types\";\n\nexport const Toolbar: React.FC<ToolbarProps> = ({\n    className,\n    variant = \"docked\",\n    color = \"standard\",\n    ...props\n}) => {\n    return (\n        <AriaToolbar\n            className={(renderProps) =>\n                clsx(\n                    styles[\"toolbar\"],\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            {...props}\n            data-variant={variant}\n            data-color={color}\n        />\n    );\n};\n","import clsx from \"clsx\";\nimport { ToggleButtonGroup } from \"react-aria-components\";\nimport styles from \"./toolbar.module.css\";\n\nexport const ToolbarToggleButtonGroup: React.FC<\n    React.ComponentPropsWithRef<typeof ToggleButtonGroup>\n> = ({ className, ...props }) => {\n    return (\n        <ToggleButtonGroup\n            className={(renderProps) =>\n                clsx(\n                    styles[\"section\"],\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            {...props}\n        />\n    );\n};\n"],"mappings":";;;;;;GCKa,KAAmC,EAC5C,cACA,aAAU,UACV,WAAQ,YACR,GAAG,QAGC,kBAAC,GAAD;CACI,YAAY,MACR,EACI,EAAO,SACP,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;CAEJ,GAAI;CACJ,gBAAc;CACd,cAAY;AACf,CAAA,GCpBI,KAER,EAAE,cAAW,GAAG,QAEb,kBAAC,GAAD;CACI,YAAY,MACR,EACI,EAAO,SACP,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;CAEJ,GAAI;AACP,CAAA"}
+{"version":3,"file":"Toolbar","names":[],"sources":["../../src/components/Toolbar/toolbar.module.css","../../src/components/Toolbar/Toolbar.tsx","../../src/components/Toolbar/ToolbarToggleButtonGroup.tsx"],"sourcesContent":["/* configurable tokens\n*\n* --md-toolbar-background\n*\n* --md-toolbar-button-background\n* --md-toolbar-toggle-button-background\n* --md-toolbar-toggle-button-selected-background\n*\n* --md-toolbar-button-color\n* --md-toolbar-toggle-button-color\n* --md-toolbar-toggle-button-selected-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n    .toolbar {\n        --_md-toolbar-background: var(\n            --md-toolbar-background,\n            var(--_md-toolbar-background-default)\n        );\n        --_md-toolbar-button-background: var(\n            --md-toolbar-button-background,\n            var(--_md-toolbar-button-background-default)\n        );\n        --_md-toolbar-toggle-button-background: var(\n            --md-toolbar-toggle-button-background,\n            var(--_md-toolbar-toggle-button-background-default)\n        );\n        --_md-toolbar-toggle-button-selected-background: var(\n            --md-toolbar-toggle-button-selected-background,\n            var(--_md-toolbar-toggle-button-selected-background-default)\n        );\n        --_md-toolbar-button-color: var(\n            --md-toolbar-button-color,\n            var(--_md-toolbar-button-color-default)\n        );\n        --_md-toolbar-toggle-button-color: var(\n            --md-toolbar-toggle-button-color,\n            var(--_md-toolbar-toggle-button-color-default)\n        );\n        --_md-toolbar-toggle-button-selected-color: var(\n            --md-toolbar-toggle-button-selected-color,\n            var(--_md-toolbar-toggle-button-selected-color-default)\n        );\n\n        --md-divider-color: var(--_md-toolbar-button-color);\n\n        --_md-toolbar-space-between-actions: var(--md-sys-layout-space-4);\n\n        border-radius: var(--md-sys-shape-corner-radius-full);\n        padding: var(--md-sys-layout-space-8);\n\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: var(--_md-toolbar-space-between-actions);\n\n        background-color: var(--_md-toolbar-background);\n\n        .section {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            gap: var(--_md-toolbar-space-between-actions);\n        }\n\n        &[data-variant=\"floating\"] {\n            box-shadow: var(--md-sys-elevation-shadow-3);\n        }\n\n        &[data-orientation=\"vertical\"] {\n            flex-direction: column;\n\n            .section {\n                flex-direction: column;\n            }\n        }\n    }\n\n    .toolbar[data-color=\"standard\"] {\n        --_md-toolbar-background-default: var(--md-sys-color-surface-container);\n\n        --_md-toolbar-button-background-default: var(\n            --md-sys-color-surface-container\n        );\n\n        --_md-toolbar-toggle-button-background-default: var(\n            --md-sys-color-surface-container\n        );\n\n        --_md-toolbar-toggle-button-selected-background-default: var(\n            --md-sys-color-secondary-container\n        );\n\n        --_md-toolbar-button-color-default: var(\n            --md-sys-color-on-surface-variant\n        );\n\n        --_md-toolbar-toggle-button-color-default: var(\n            --md-sys-color-on-surface-variant\n        );\n\n        --_md-toolbar-toggle-button-selected-color-default: var(\n            --md-sys-color-on-secondary-container\n        );\n    }\n\n    .toolbar[data-color=\"vibrant\"] {\n        --_md-toolbar-background-default: var(--md-sys-color-primary-container);\n\n        --_md-toolbar-button-background-default: var(\n            --md-sys-color-primary-container\n        );\n\n        --_md-toolbar-toggle-button-background-default: var(\n            --md-sys-color-primary-container\n        );\n\n        --_md-toolbar-toggle-button-selected-background-default: var(\n            --md-sys-color-surface-container\n        );\n\n        --_md-toolbar-button-color-default: var(\n            --md-sys-color-on-primary-container\n        );\n\n        --_md-toolbar-toggle-button-color-default: var(\n            --md-sys-color-on-primary-container\n        );\n\n        --_md-toolbar-toggle-button-selected-color-default: var(\n            --md-sys-color-on-surface\n        );\n    }\n}\n\n@layer adgytec.overrides {\n    .toolbar[data-orientation=\"horizontal\"] [data-divider] {\n        block-size: auto;\n        align-self: stretch;\n    }\n\n    /* button reset */\n    .toolbar [data-visual-button] {\n        /* outlined button */\n        --_md-button-outline-width: 0px;\n        border: none;\n\n        /* elevated button */\n        box-shadow: none;\n\n        --_md-toggle-button-selected-shape: var(--_md-button-shape);\n\n        &[data-disabled] {\n            background-color: transparent;\n        }\n    }\n\n    .toolbar [data-button]:not([data-color=\"filled\"]),\n    .toolbar [data-toggle-button] {\n        /* colors */\n        --md-button-background: var(--_md-toolbar-button-background);\n        --md-toggle-button-selected-background: var(\n            --_md-toolbar-toggle-button-selected-background\n        );\n        --md-toggle-button-background: var(\n            --_md-toolbar-toggle-button-background\n        );\n\n        --md-button-color: var(--_md-toolbar-button-color);\n        --md-toggle-button-selected-color: var(\n            --_md-toolbar-toggle-button-selected-color\n        );\n        --md-toggle-button-color: var(--_md-toolbar-toggle-button-color);\n    }\n}\n","import clsx from \"clsx\";\nimport { Toolbar as AriaToolbar } from \"react-aria-components\";\nimport styles from \"./toolbar.module.css\";\nimport type { ToolbarProps } from \"./types\";\n\nexport const Toolbar: React.FC<ToolbarProps> = ({\n    className,\n    variant = \"docked\",\n    color = \"standard\",\n    ...props\n}) => {\n    return (\n        <AriaToolbar\n            className={(renderProps) =>\n                clsx(\n                    styles[\"toolbar\"],\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            {...props}\n            data-variant={variant}\n            data-color={color}\n        />\n    );\n};\n","import clsx from \"clsx\";\nimport { ToggleButtonGroup } from \"react-aria-components\";\nimport styles from \"./toolbar.module.css\";\n\nexport const ToolbarToggleButtonGroup: React.FC<\n    React.ComponentPropsWithRef<typeof ToggleButtonGroup>\n> = ({ className, ...props }) => {\n    return (\n        <ToggleButtonGroup\n            className={(renderProps) =>\n                clsx(\n                    styles[\"section\"],\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            {...props}\n        />\n    );\n};\n"],"mappings":";;;;;;;GCKa,KAAmC,EAC5C,cACA,aAAU,UACV,WAAQ,YACR,GAAG,QAGC,kBAAC,GAAD;CACI,YAAY,MACR,EACI,EAAO,SACP,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;CAEJ,GAAI;CACJ,gBAAc;CACd,cAAY;AAAM,CAAA,YCnBjB,KAET,MAAA;CAAA,IAAA,KAAA,GAAA,EAAA,EAAA,CAAA,CAAA,GAAA,GAAA;CAAA,AAAA,EAAA,OAAA,KAAwB,IAAA,EAAA,IAAA,IAAA,EAAA,OAAvB,kBAAA,KAAA,GAAuB,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAAA,AAAA,EAAA,OAAA,IASX,IAAA,EAAA,MANM,KAAA,MACP,EACI,EAAM,SACN,OAAO,KAAc,aACf,EAAU,CACF,IAFd,CAGJ,GAAC,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAGP,OAHO,EAAA,OAAA,KAAA,EAAA,OAAA,KAPT,IAAA,kBAAC,GAAD;EACe,WAAA;EAMN,GAED;CAAK,CAAA,GACX,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,KAAA,IAAA,EAAA,IAVF;AAUE"}