boreal-ui 0.0.11 → 0.0.13
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.
- package/dist/core/CheveronDownIcon-B2codmaq.cjs +26 -0
- package/dist/core/CheveronDownIcon-B2codmaq.cjs.map +1 -0
- package/dist/core/CheveronDownIcon-Cn9jj-ku.js +27 -0
- package/dist/core/CheveronDownIcon-Cn9jj-ku.js.map +1 -0
- package/dist/core/{Footer-D_-eBUqK.js → Footer-7ixaMvFc.js} +2 -2
- package/dist/core/{Footer-D_-eBUqK.js.map → Footer-7ixaMvFc.js.map} +1 -1
- package/dist/core/{Footer-DxYjXCde.cjs → Footer-Dc_CuIC1.cjs} +2 -2
- package/dist/core/{Footer-DxYjXCde.cjs.map → Footer-Dc_CuIC1.cjs.map} +1 -1
- package/dist/core/Footer.cjs.js +1 -1
- package/dist/core/Footer.js +1 -1
- package/dist/core/{Select-DhUEQ4W_.cjs → Select-CitauzQm.cjs} +3 -25
- package/dist/core/Select-CitauzQm.cjs.map +1 -0
- package/dist/core/{Select-BDwB-XRV.js → Select-_12yQ-yj.js} +3 -25
- package/dist/core/Select-_12yQ-yj.js.map +1 -0
- package/dist/core/Select.cjs.js +1 -1
- package/dist/core/Select.js +1 -1
- package/dist/core/Sidebar-CqTJJULG.cjs +216 -0
- package/dist/core/Sidebar-CqTJJULG.cjs.map +1 -0
- package/dist/core/Sidebar-z0mG5nn_.js +217 -0
- package/dist/core/Sidebar-z0mG5nn_.js.map +1 -0
- package/dist/core/Sidebar.cjs.js +4 -0
- package/dist/core/Sidebar.cjs.js.map +1 -0
- package/dist/core/Sidebar.js +5 -0
- package/dist/core/Sidebar.js.map +1 -0
- package/dist/core/index.cjs.js +4 -211
- package/dist/core/index.cjs.js.map +1 -1
- package/dist/core/index.js +6 -215
- package/dist/core/index.js.map +1 -1
- package/dist/core/style.css +2454 -2454
- package/dist/next/CheveronDownIcon-Cn9jj-ku.js +27 -0
- package/dist/next/CheveronDownIcon-Cn9jj-ku.js.map +1 -0
- package/dist/next/CheveronDownIcon-CyoOZUNY.cjs +26 -0
- package/dist/next/CheveronDownIcon-CyoOZUNY.cjs.map +1 -0
- package/dist/next/{Footer-C6gSCcdC.cjs → Footer-J0Tb7-n4.cjs} +2 -2
- package/dist/next/{Footer-C6gSCcdC.cjs.map → Footer-J0Tb7-n4.cjs.map} +1 -1
- package/dist/next/{Footer-BPjfubyG.js → Footer-bb_8EH_R.js} +2 -2
- package/dist/next/{Footer-BPjfubyG.js.map → Footer-bb_8EH_R.js.map} +1 -1
- package/dist/next/Footer.cjs.js +1 -1
- package/dist/next/Footer.js +1 -1
- package/dist/next/NavBar-CRbRBzGq.js +163 -0
- package/dist/next/NavBar-CRbRBzGq.js.map +1 -0
- package/dist/next/NavBar-JPkuek76.cjs +162 -0
- package/dist/next/NavBar-JPkuek76.cjs.map +1 -0
- package/dist/next/NavBar.cjs.js +1 -1
- package/dist/next/NavBar.js +1 -1
- package/dist/next/{Select-BKprqV3i.cjs → Select-Bln5-seQ.cjs} +3 -25
- package/dist/next/Select-Bln5-seQ.cjs.map +1 -0
- package/dist/next/{Select-_C8mTVb1.js → Select-CdWyrGrV.js} +3 -25
- package/dist/next/Select-CdWyrGrV.js.map +1 -0
- package/dist/next/Select.cjs.js +1 -1
- package/dist/next/Select.js +1 -1
- package/dist/next/Sidebar-B9jHy0wy.js +285 -0
- package/dist/next/Sidebar-B9jHy0wy.js.map +1 -0
- package/dist/next/Sidebar-PUffGMhm.cjs +284 -0
- package/dist/next/Sidebar-PUffGMhm.cjs.map +1 -0
- package/dist/next/Sidebar.cjs.js +4 -0
- package/dist/next/Sidebar.cjs.js.map +1 -0
- package/dist/next/Sidebar.js +5 -0
- package/dist/next/Sidebar.js.map +1 -0
- package/dist/next/index.cjs.js +23 -297
- package/dist/next/index.cjs.js.map +1 -1
- package/dist/next/index.js +26 -303
- package/dist/next/index.js.map +1 -1
- package/dist/next/{NavBar-CLfsYv5E.js → navigation-DTwYCgCL.js} +3 -160
- package/dist/next/navigation-DTwYCgCL.js.map +1 -0
- package/dist/next/{NavBar-COPlmHzy.cjs → navigation-m012syo9.cjs} +1 -158
- package/dist/next/navigation-m012syo9.cjs.map +1 -0
- package/dist/next/style.css +2642 -2642
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/dist/types/components/Sidebar/Sidebar.types.d.ts +0 -5
- package/dist/types/components/Sidebar/Sidebar.types.d.ts.map +1 -1
- package/dist/types/components/Sidebar/SidebarBase.d.ts +4 -1
- package/dist/types/components/Sidebar/SidebarBase.d.ts.map +1 -1
- package/package.json +11 -1
- package/dist/core/Select-BDwB-XRV.js.map +0 -1
- package/dist/core/Select-DhUEQ4W_.cjs.map +0 -1
- package/dist/next/NavBar-CLfsYv5E.js.map +0 -1
- package/dist/next/NavBar-COPlmHzy.cjs.map +0 -1
- package/dist/next/Select-BKprqV3i.cjs.map +0 -1
- package/dist/next/Select-_C8mTVb1.js.map +0 -1
|
@@ -1,31 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
const require$$2 = require("react/jsx-runtime");
|
|
3
3
|
const React = require("react");
|
|
4
|
+
const CheveronDownIcon = require("./CheveronDownIcon-CyoOZUNY.cjs");
|
|
4
5
|
const classNames = require("./classNames-BcWMx052.cjs");
|
|
5
6
|
const capitalize = require("./capitalize-DoV-nOmN.cjs");
|
|
6
7
|
const borealStyleConfig = require("./boreal-style-config-Rr5d5Qts.cjs");
|
|
7
|
-
const ChevronDownIcon = (props) => /* @__PURE__ */ require$$2.jsx(
|
|
8
|
-
"svg",
|
|
9
|
-
{
|
|
10
|
-
width: "24px",
|
|
11
|
-
height: "24px",
|
|
12
|
-
viewBox: "0 0 24 24",
|
|
13
|
-
strokeWidth: "1.5",
|
|
14
|
-
fill: "none",
|
|
15
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
16
|
-
color: "currentColor",
|
|
17
|
-
...props,
|
|
18
|
-
children: /* @__PURE__ */ require$$2.jsx(
|
|
19
|
-
"path",
|
|
20
|
-
{
|
|
21
|
-
fillRule: "evenodd",
|
|
22
|
-
clipRule: "evenodd",
|
|
23
|
-
d: "M5.30711 8.71299C5.4232 8.43273 5.69668 8.25 6.00002 8.25H18C18.3034 8.25 18.5768 8.43273 18.6929 8.71299C18.809 8.99324 18.7449 9.31583 18.5304 9.53033L12.5304 15.5303C12.2375 15.8232 11.7626 15.8232 11.4697 15.5303L5.46969 9.53033C5.25519 9.31583 5.19103 8.99324 5.30711 8.71299Z",
|
|
24
|
-
fill: "currentColor"
|
|
25
|
-
}
|
|
26
|
-
)
|
|
27
|
-
}
|
|
28
|
-
);
|
|
29
8
|
const BaseSelect = React.forwardRef(
|
|
30
9
|
({
|
|
31
10
|
theme = borealStyleConfig.getDefaultTheme(),
|
|
@@ -134,7 +113,7 @@ const BaseSelect = React.forwardRef(
|
|
|
134
113
|
className: `${classMap.icon} ${classMap[theme]} ${disabled2 && classMap.disabled ? classMap.disabled : ""}`,
|
|
135
114
|
"aria-hidden": "true",
|
|
136
115
|
"data-testid": `${testId}-icon`,
|
|
137
|
-
children: /* @__PURE__ */ require$$2.jsx(ChevronDownIcon, {})
|
|
116
|
+
children: /* @__PURE__ */ require$$2.jsx(CheveronDownIcon.ChevronDownIcon, {})
|
|
138
117
|
}
|
|
139
118
|
),
|
|
140
119
|
ariaDescription && /* @__PURE__ */ require$$2.jsx(
|
|
@@ -225,6 +204,5 @@ const Select = React.forwardRef(
|
|
|
225
204
|
}
|
|
226
205
|
);
|
|
227
206
|
Select.displayName = "Select";
|
|
228
|
-
exports.ChevronDownIcon = ChevronDownIcon;
|
|
229
207
|
exports.Select = Select;
|
|
230
|
-
//# sourceMappingURL=Select-
|
|
208
|
+
//# sourceMappingURL=Select-Bln5-seQ.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Select-Bln5-seQ.cjs","sources":["../../src/components/Select/SelectBase.tsx","../../src/components/Select/next/Select.tsx"],"sourcesContent":["import {\r\n forwardRef,\r\n ChangeEvent,\r\n useId,\r\n useMemo,\r\n useEffect,\r\n useState,\r\n} from \"react\";\r\nimport { SelectProps } from \"./Select.types\";\r\nimport { ChevronDownIcon } from \"../../Icons\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\ninterface BaseSelectProps extends SelectProps {\r\n classMap: Record<string, string>;\r\n}\r\n\r\nconst BaseSelect = forwardRef<HTMLSelectElement, BaseSelectProps>(\r\n (\r\n {\r\n theme = getDefaultTheme(),\r\n state = \"\",\r\n outline = false,\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n options,\r\n value,\r\n onChange,\r\n placeholder = \"Select an option\",\r\n ariaLabel,\r\n ariaDescription,\r\n disabled = false,\r\n className = \"\",\r\n classMap,\r\n asyncOptions,\r\n pollInterval = 0,\r\n \"data-testid\": testId = \"select\",\r\n },\r\n ref\r\n ) => {\r\n const id = useId();\r\n const selectId = `${id}-select`;\r\n const descId = ariaDescription ? `${id}-desc` : undefined;\r\n\r\n const [internalOptions, setInternalOptions] = useState(options);\r\n\r\n useEffect(() => {\r\n if (!asyncOptions) return;\r\n\r\n let isMounted = true;\r\n\r\n const load = async () => {\r\n try {\r\n const fetched = await asyncOptions(\"\");\r\n if (isMounted) setInternalOptions(fetched);\r\n } catch (err) {\r\n console.error(\"Failed to load options:\", err);\r\n }\r\n };\r\n\r\n load();\r\n\r\n if (pollInterval > 0) {\r\n const intervalId = setInterval(load, pollInterval);\r\n return () => {\r\n clearInterval(intervalId);\r\n isMounted = false;\r\n };\r\n }\r\n\r\n return () => {\r\n isMounted = false;\r\n };\r\n }, [asyncOptions, pollInterval]);\r\n\r\n const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {\r\n onChange(event.target.value);\r\n };\r\n\r\n const wrapperClasses = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.wrapper,\r\n classMap[theme],\r\n classMap[state],\r\n className,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n outline ? classMap.outline : \"\",\r\n disabled ? classMap.disabled : \"\"\r\n ),\r\n [classMap, theme, state, className, shadow, rounding, outline, disabled]\r\n );\r\n\r\n const selectClasses = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.select,\r\n classMap[theme],\r\n classMap[state],\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n outline ? classMap.outline : \"\"\r\n ),\r\n [classMap, theme, state, outline]\r\n );\r\n\r\n return (\r\n <div className={wrapperClasses} data-testid={testId}>\r\n <select\r\n ref={ref}\r\n id={selectId}\r\n value={value}\r\n onChange={handleChange}\r\n className={selectClasses}\r\n aria-label={ariaLabel || placeholder}\r\n aria-describedby={descId}\r\n aria-disabled={disabled}\r\n disabled={disabled}\r\n data-testid={`${testId}-input`}\r\n >\r\n <option value=\"\" disabled hidden>\r\n {placeholder}\r\n </option>\r\n {(asyncOptions ? internalOptions : options).map((option) => (\r\n <option\r\n key={option.value}\r\n value={option.value}\r\n data-testid={`${testId}-option-${option.value}`}\r\n >\r\n {option.label}\r\n </option>\r\n ))}\r\n </select>\r\n\r\n <div\r\n className={`${classMap.icon} ${classMap[theme]} ${\r\n disabled && classMap.disabled ? classMap.disabled : \"\"\r\n }`}\r\n aria-hidden=\"true\"\r\n data-testid={`${testId}-icon`}\r\n >\r\n <ChevronDownIcon />\r\n </div>\r\n\r\n {ariaDescription && (\r\n <span\r\n id={descId}\r\n className=\"sr-only\"\r\n data-testid={`${testId}-description`}\r\n >\r\n {ariaDescription}\r\n </span>\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nBaseSelect.displayName = \"BaseSelect\";\r\nexport default BaseSelect;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport BaseSelect from \"../SelectBase\";\r\nimport styles from \"./Select.module.scss\";\r\nimport { SelectProps } from \"../Select.types\";\r\n\r\nconst Select = React.forwardRef<HTMLSelectElement, SelectProps>(\r\n (props, ref) => {\r\n return <BaseSelect {...props} ref={ref} classMap={styles} />;\r\n }\r\n);\r\n\r\nSelect.displayName = \"Select\";\r\nexport default Select;\r\n"],"names":["forwardRef","getDefaultTheme","outline","getDefaultRounding","getDefaultShadow","disabled","useId","useState","useEffect","useMemo","combineClassNames","capitalize","jsxs","jsx","ChevronDownIcon"],"mappings":"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"}
|
|
@@ -1,30 +1,9 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import React, { forwardRef, useId, useState, useEffect, useMemo } from "react";
|
|
3
|
+
import { C as ChevronDownIcon } from "./CheveronDownIcon-Cn9jj-ku.js";
|
|
3
4
|
import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
|
|
4
5
|
import { c as capitalize } from "./capitalize-C0TSQSPh.js";
|
|
5
6
|
import { a as getDefaultRounding, b as getDefaultShadow, d as getDefaultTheme } from "./boreal-style-config-BILmxkZG.js";
|
|
6
|
-
const ChevronDownIcon = (props) => /* @__PURE__ */ jsx(
|
|
7
|
-
"svg",
|
|
8
|
-
{
|
|
9
|
-
width: "24px",
|
|
10
|
-
height: "24px",
|
|
11
|
-
viewBox: "0 0 24 24",
|
|
12
|
-
strokeWidth: "1.5",
|
|
13
|
-
fill: "none",
|
|
14
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
15
|
-
color: "currentColor",
|
|
16
|
-
...props,
|
|
17
|
-
children: /* @__PURE__ */ jsx(
|
|
18
|
-
"path",
|
|
19
|
-
{
|
|
20
|
-
fillRule: "evenodd",
|
|
21
|
-
clipRule: "evenodd",
|
|
22
|
-
d: "M5.30711 8.71299C5.4232 8.43273 5.69668 8.25 6.00002 8.25H18C18.3034 8.25 18.5768 8.43273 18.6929 8.71299C18.809 8.99324 18.7449 9.31583 18.5304 9.53033L12.5304 15.5303C12.2375 15.8232 11.7626 15.8232 11.4697 15.5303L5.46969 9.53033C5.25519 9.31583 5.19103 8.99324 5.30711 8.71299Z",
|
|
23
|
-
fill: "currentColor"
|
|
24
|
-
}
|
|
25
|
-
)
|
|
26
|
-
}
|
|
27
|
-
);
|
|
28
7
|
const BaseSelect = forwardRef(
|
|
29
8
|
({
|
|
30
9
|
theme = getDefaultTheme(),
|
|
@@ -225,7 +204,6 @@ const Select = React.forwardRef(
|
|
|
225
204
|
);
|
|
226
205
|
Select.displayName = "Select";
|
|
227
206
|
export {
|
|
228
|
-
ChevronDownIcon as C,
|
|
229
207
|
Select as S
|
|
230
208
|
};
|
|
231
|
-
//# sourceMappingURL=Select-
|
|
209
|
+
//# sourceMappingURL=Select-CdWyrGrV.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Select-CdWyrGrV.js","sources":["../../src/components/Select/SelectBase.tsx","../../src/components/Select/next/Select.tsx"],"sourcesContent":["import {\r\n forwardRef,\r\n ChangeEvent,\r\n useId,\r\n useMemo,\r\n useEffect,\r\n useState,\r\n} from \"react\";\r\nimport { SelectProps } from \"./Select.types\";\r\nimport { ChevronDownIcon } from \"../../Icons\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\ninterface BaseSelectProps extends SelectProps {\r\n classMap: Record<string, string>;\r\n}\r\n\r\nconst BaseSelect = forwardRef<HTMLSelectElement, BaseSelectProps>(\r\n (\r\n {\r\n theme = getDefaultTheme(),\r\n state = \"\",\r\n outline = false,\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n options,\r\n value,\r\n onChange,\r\n placeholder = \"Select an option\",\r\n ariaLabel,\r\n ariaDescription,\r\n disabled = false,\r\n className = \"\",\r\n classMap,\r\n asyncOptions,\r\n pollInterval = 0,\r\n \"data-testid\": testId = \"select\",\r\n },\r\n ref\r\n ) => {\r\n const id = useId();\r\n const selectId = `${id}-select`;\r\n const descId = ariaDescription ? `${id}-desc` : undefined;\r\n\r\n const [internalOptions, setInternalOptions] = useState(options);\r\n\r\n useEffect(() => {\r\n if (!asyncOptions) return;\r\n\r\n let isMounted = true;\r\n\r\n const load = async () => {\r\n try {\r\n const fetched = await asyncOptions(\"\");\r\n if (isMounted) setInternalOptions(fetched);\r\n } catch (err) {\r\n console.error(\"Failed to load options:\", err);\r\n }\r\n };\r\n\r\n load();\r\n\r\n if (pollInterval > 0) {\r\n const intervalId = setInterval(load, pollInterval);\r\n return () => {\r\n clearInterval(intervalId);\r\n isMounted = false;\r\n };\r\n }\r\n\r\n return () => {\r\n isMounted = false;\r\n };\r\n }, [asyncOptions, pollInterval]);\r\n\r\n const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {\r\n onChange(event.target.value);\r\n };\r\n\r\n const wrapperClasses = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.wrapper,\r\n classMap[theme],\r\n classMap[state],\r\n className,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n outline ? classMap.outline : \"\",\r\n disabled ? classMap.disabled : \"\"\r\n ),\r\n [classMap, theme, state, className, shadow, rounding, outline, disabled]\r\n );\r\n\r\n const selectClasses = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.select,\r\n classMap[theme],\r\n classMap[state],\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n outline ? classMap.outline : \"\"\r\n ),\r\n [classMap, theme, state, outline]\r\n );\r\n\r\n return (\r\n <div className={wrapperClasses} data-testid={testId}>\r\n <select\r\n ref={ref}\r\n id={selectId}\r\n value={value}\r\n onChange={handleChange}\r\n className={selectClasses}\r\n aria-label={ariaLabel || placeholder}\r\n aria-describedby={descId}\r\n aria-disabled={disabled}\r\n disabled={disabled}\r\n data-testid={`${testId}-input`}\r\n >\r\n <option value=\"\" disabled hidden>\r\n {placeholder}\r\n </option>\r\n {(asyncOptions ? internalOptions : options).map((option) => (\r\n <option\r\n key={option.value}\r\n value={option.value}\r\n data-testid={`${testId}-option-${option.value}`}\r\n >\r\n {option.label}\r\n </option>\r\n ))}\r\n </select>\r\n\r\n <div\r\n className={`${classMap.icon} ${classMap[theme]} ${\r\n disabled && classMap.disabled ? classMap.disabled : \"\"\r\n }`}\r\n aria-hidden=\"true\"\r\n data-testid={`${testId}-icon`}\r\n >\r\n <ChevronDownIcon />\r\n </div>\r\n\r\n {ariaDescription && (\r\n <span\r\n id={descId}\r\n className=\"sr-only\"\r\n data-testid={`${testId}-description`}\r\n >\r\n {ariaDescription}\r\n </span>\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nBaseSelect.displayName = \"BaseSelect\";\r\nexport default BaseSelect;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport BaseSelect from \"../SelectBase\";\r\nimport styles from \"./Select.module.scss\";\r\nimport { SelectProps } from \"../Select.types\";\r\n\r\nconst Select = React.forwardRef<HTMLSelectElement, SelectProps>(\r\n (props, ref) => {\r\n return <BaseSelect {...props} ref={ref} classMap={styles} />;\r\n }\r\n);\r\n\r\nSelect.displayName = \"Select\";\r\nexport default Select;\r\n"],"names":["outline","disabled"],"mappings":"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"}
|
package/dist/next/Select.cjs.js
CHANGED
package/dist/next/Select.js
CHANGED
|
@@ -0,0 +1,285 @@
|
|
|
1
|
+
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { L as Link } from "./link-Bik5xH00.js";
|
|
3
|
+
import { n as navigation } from "./navigation-DTwYCgCL.js";
|
|
4
|
+
import { useState, useRef, useMemo } from "react";
|
|
5
|
+
import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
|
|
6
|
+
import { a as getDefaultRounding, b as getDefaultShadow, d as getDefaultTheme } from "./boreal-style-config-BILmxkZG.js";
|
|
7
|
+
import { c as capitalize } from "./capitalize-C0TSQSPh.js";
|
|
8
|
+
import { C as ChevronDownIcon } from "./CheveronDownIcon-Cn9jj-ku.js";
|
|
9
|
+
const SidebarBase = ({
|
|
10
|
+
links,
|
|
11
|
+
classMap,
|
|
12
|
+
currentPath,
|
|
13
|
+
LinkComponent = "a",
|
|
14
|
+
theme = getDefaultTheme(),
|
|
15
|
+
rounding = getDefaultRounding(),
|
|
16
|
+
shadow = getDefaultShadow(),
|
|
17
|
+
state = "",
|
|
18
|
+
showFooter = false,
|
|
19
|
+
footerLinks,
|
|
20
|
+
footerVersion: footerVersion2,
|
|
21
|
+
outline: outline2 = false,
|
|
22
|
+
className = "",
|
|
23
|
+
"data-testid": testId = "sidebar",
|
|
24
|
+
ariaLabel = "Sidebar navigation",
|
|
25
|
+
...rest
|
|
26
|
+
}) => {
|
|
27
|
+
const [openItems, setOpenItems] = useState({});
|
|
28
|
+
const toggleItem = (key) => {
|
|
29
|
+
setOpenItems((prev) => ({ ...prev, [key]: !prev[key] }));
|
|
30
|
+
};
|
|
31
|
+
const submenuRefs = useRef({});
|
|
32
|
+
const setSubmenuRef = (key, el) => {
|
|
33
|
+
submenuRefs.current[key] = el;
|
|
34
|
+
};
|
|
35
|
+
const getSubmenuHeight = (key) => {
|
|
36
|
+
const el = submenuRefs.current[key];
|
|
37
|
+
return el ? `${el.scrollHeight}px` : "0px";
|
|
38
|
+
};
|
|
39
|
+
const containerClasses = useMemo(
|
|
40
|
+
() => combineClassNames(
|
|
41
|
+
classMap.wrapper,
|
|
42
|
+
className,
|
|
43
|
+
classMap[theme],
|
|
44
|
+
classMap[state],
|
|
45
|
+
shadow && classMap[`shadow${capitalize(shadow)}`],
|
|
46
|
+
rounding && classMap[`round${capitalize(rounding)}`],
|
|
47
|
+
outline2 ? classMap.outline : ""
|
|
48
|
+
),
|
|
49
|
+
[className, theme, state, outline2, rounding, shadow]
|
|
50
|
+
);
|
|
51
|
+
const renderLinks = (items, isChild = false) => /* @__PURE__ */ jsx(
|
|
52
|
+
"ul",
|
|
53
|
+
{
|
|
54
|
+
className: combineClassNames(
|
|
55
|
+
classMap.list,
|
|
56
|
+
isChild ? classMap.childList : ""
|
|
57
|
+
),
|
|
58
|
+
"data-testid": `${testId}-list`,
|
|
59
|
+
children: items.map(({ label, href, children, icon }) => {
|
|
60
|
+
const isActive = href && currentPath === href;
|
|
61
|
+
const isOpen = openItems[label] || false;
|
|
62
|
+
return /* @__PURE__ */ jsx(
|
|
63
|
+
"li",
|
|
64
|
+
{
|
|
65
|
+
className: classMap.item,
|
|
66
|
+
"data-testid": `${testId}-listItems`,
|
|
67
|
+
children: children && children.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
68
|
+
/* @__PURE__ */ jsxs(
|
|
69
|
+
"button",
|
|
70
|
+
{
|
|
71
|
+
type: "button",
|
|
72
|
+
className: combineClassNames(
|
|
73
|
+
classMap.link,
|
|
74
|
+
isOpen ? classMap.active : ""
|
|
75
|
+
),
|
|
76
|
+
onClick: () => toggleItem(label),
|
|
77
|
+
"aria-expanded": isOpen,
|
|
78
|
+
"data-testid": `${testId}-exapndItemButton`,
|
|
79
|
+
children: [
|
|
80
|
+
icon && /* @__PURE__ */ jsx("span", { className: classMap.icon, children: icon }),
|
|
81
|
+
/* @__PURE__ */ jsx("span", { "data-testid": `${testId}-exapndItemLabel`, children: label }),
|
|
82
|
+
/* @__PURE__ */ jsx(
|
|
83
|
+
ChevronDownIcon,
|
|
84
|
+
{
|
|
85
|
+
className: combineClassNames(
|
|
86
|
+
classMap.chevron,
|
|
87
|
+
isOpen ? classMap.chevronOpen : ""
|
|
88
|
+
),
|
|
89
|
+
"data-testid": `${testId}-exapndIcon`
|
|
90
|
+
}
|
|
91
|
+
)
|
|
92
|
+
]
|
|
93
|
+
}
|
|
94
|
+
),
|
|
95
|
+
/* @__PURE__ */ jsx(
|
|
96
|
+
"div",
|
|
97
|
+
{
|
|
98
|
+
ref: (el) => setSubmenuRef(label, el),
|
|
99
|
+
className: combineClassNames(
|
|
100
|
+
classMap.submenu,
|
|
101
|
+
isOpen ? classMap.submenuOpen : ""
|
|
102
|
+
),
|
|
103
|
+
style: {
|
|
104
|
+
maxHeight: isOpen ? getSubmenuHeight(label) : "0px"
|
|
105
|
+
},
|
|
106
|
+
"data-testid": `${testId}-subMenu`,
|
|
107
|
+
children: renderLinks(children, true)
|
|
108
|
+
}
|
|
109
|
+
)
|
|
110
|
+
] }) : href ? /* @__PURE__ */ jsxs(
|
|
111
|
+
LinkComponent,
|
|
112
|
+
{
|
|
113
|
+
href,
|
|
114
|
+
className: combineClassNames(
|
|
115
|
+
classMap.link,
|
|
116
|
+
isChild ? classMap.childLink : "",
|
|
117
|
+
isActive ? classMap.active : ""
|
|
118
|
+
),
|
|
119
|
+
"aria-current": isActive ? "page" : void 0,
|
|
120
|
+
"data-testid": `${testId}-sidebarLink`,
|
|
121
|
+
children: [
|
|
122
|
+
icon && /* @__PURE__ */ jsx("span", { className: classMap.icon, children: icon }),
|
|
123
|
+
label
|
|
124
|
+
]
|
|
125
|
+
}
|
|
126
|
+
) : /* @__PURE__ */ jsxs(
|
|
127
|
+
"span",
|
|
128
|
+
{
|
|
129
|
+
className: combineClassNames(
|
|
130
|
+
classMap.link,
|
|
131
|
+
isChild ? classMap.childLink : ""
|
|
132
|
+
),
|
|
133
|
+
"data-testid": `${testId}-sidebarLabel`,
|
|
134
|
+
children: [
|
|
135
|
+
icon && /* @__PURE__ */ jsx("span", { className: classMap.icon, children: icon }),
|
|
136
|
+
label
|
|
137
|
+
]
|
|
138
|
+
}
|
|
139
|
+
)
|
|
140
|
+
},
|
|
141
|
+
label
|
|
142
|
+
);
|
|
143
|
+
})
|
|
144
|
+
}
|
|
145
|
+
);
|
|
146
|
+
return /* @__PURE__ */ jsxs(
|
|
147
|
+
"nav",
|
|
148
|
+
{
|
|
149
|
+
className: containerClasses,
|
|
150
|
+
"aria-label": ariaLabel,
|
|
151
|
+
...rest,
|
|
152
|
+
"data-testid": testId,
|
|
153
|
+
children: [
|
|
154
|
+
/* @__PURE__ */ jsx("nav", { className: classMap.nav, children: renderLinks(links) }),
|
|
155
|
+
showFooter && /* @__PURE__ */ jsxs("footer", { className: classMap.footer, "data-testid": `${testId}-footer`, children: [
|
|
156
|
+
footerLinks == null ? void 0 : footerLinks.map(({ label, href }) => /* @__PURE__ */ jsx(
|
|
157
|
+
LinkComponent,
|
|
158
|
+
{
|
|
159
|
+
href,
|
|
160
|
+
className: classMap.footerLink,
|
|
161
|
+
"data-testid": `${testId}-footerLink`,
|
|
162
|
+
children: label
|
|
163
|
+
},
|
|
164
|
+
label
|
|
165
|
+
)),
|
|
166
|
+
footerVersion2 && /* @__PURE__ */ jsx(
|
|
167
|
+
"span",
|
|
168
|
+
{
|
|
169
|
+
className: classMap.footerVersion,
|
|
170
|
+
"data-testid": `${testId}-footerVersion`,
|
|
171
|
+
children: footerVersion2
|
|
172
|
+
}
|
|
173
|
+
)
|
|
174
|
+
] })
|
|
175
|
+
]
|
|
176
|
+
}
|
|
177
|
+
);
|
|
178
|
+
};
|
|
179
|
+
SidebarBase.displayName = "SidebarBase";
|
|
180
|
+
const noScroll = "_noScroll_y1c07_91";
|
|
181
|
+
const errorMessage = "_errorMessage_y1c07_92";
|
|
182
|
+
const loadingContainer = "_loadingContainer_y1c07_93";
|
|
183
|
+
const hideScrollbar = "_hideScrollbar_y1c07_85";
|
|
184
|
+
const sr_only = "_sr_only_y1c07_94";
|
|
185
|
+
const wrapper = "_wrapper_y1c07_479";
|
|
186
|
+
const roundNone = "_roundNone_y1c07_490";
|
|
187
|
+
const roundSmall = "_roundSmall_y1c07_493";
|
|
188
|
+
const roundMedium = "_roundMedium_y1c07_496";
|
|
189
|
+
const roundLarge = "_roundLarge_y1c07_499";
|
|
190
|
+
const roundFull = "_roundFull_y1c07_502";
|
|
191
|
+
const shadowNone = "_shadowNone_y1c07_505";
|
|
192
|
+
const shadowLight = "_shadowLight_y1c07_508";
|
|
193
|
+
const shadowMedium = "_shadowMedium_y1c07_511";
|
|
194
|
+
const shadowStrong = "_shadowStrong_y1c07_514";
|
|
195
|
+
const shadowIntense = "_shadowIntense_y1c07_517";
|
|
196
|
+
const primary = "_primary_y1c07_521";
|
|
197
|
+
const active = "_active_y1c07_521";
|
|
198
|
+
const outline = "_outline_y1c07_525";
|
|
199
|
+
const clear = "_clear_y1c07_530";
|
|
200
|
+
const secondary = "_secondary_y1c07_534";
|
|
201
|
+
const tertiary = "_tertiary_y1c07_547";
|
|
202
|
+
const quaternary = "_quaternary_y1c07_560";
|
|
203
|
+
const success = "_success_y1c07_588";
|
|
204
|
+
const error = "_error_y1c07_92";
|
|
205
|
+
const warning = "_warning_y1c07_602";
|
|
206
|
+
const nav = "_nav_y1c07_609";
|
|
207
|
+
const list = "_list_y1c07_614";
|
|
208
|
+
const link = "_link_y1c07_620";
|
|
209
|
+
const childLink = "_childLink_y1c07_650";
|
|
210
|
+
const chevron = "_chevron_y1c07_654";
|
|
211
|
+
const chevronOpen = "_chevronOpen_y1c07_658";
|
|
212
|
+
const submenu = "_submenu_y1c07_662";
|
|
213
|
+
const childList = "_childList_y1c07_668";
|
|
214
|
+
const footer = "_footer_y1c07_673";
|
|
215
|
+
const footerLink = "_footerLink_y1c07_685";
|
|
216
|
+
const footerVersion = "_footerVersion_y1c07_693";
|
|
217
|
+
const spin = "_spin_y1c07_1";
|
|
218
|
+
const pulse = "_pulse_y1c07_1";
|
|
219
|
+
const styles = {
|
|
220
|
+
noScroll,
|
|
221
|
+
errorMessage,
|
|
222
|
+
loadingContainer,
|
|
223
|
+
hideScrollbar,
|
|
224
|
+
sr_only,
|
|
225
|
+
wrapper,
|
|
226
|
+
roundNone,
|
|
227
|
+
roundSmall,
|
|
228
|
+
roundMedium,
|
|
229
|
+
roundLarge,
|
|
230
|
+
roundFull,
|
|
231
|
+
shadowNone,
|
|
232
|
+
shadowLight,
|
|
233
|
+
shadowMedium,
|
|
234
|
+
shadowStrong,
|
|
235
|
+
shadowIntense,
|
|
236
|
+
primary,
|
|
237
|
+
active,
|
|
238
|
+
outline,
|
|
239
|
+
clear,
|
|
240
|
+
secondary,
|
|
241
|
+
tertiary,
|
|
242
|
+
quaternary,
|
|
243
|
+
success,
|
|
244
|
+
error,
|
|
245
|
+
warning,
|
|
246
|
+
nav,
|
|
247
|
+
list,
|
|
248
|
+
link,
|
|
249
|
+
childLink,
|
|
250
|
+
chevron,
|
|
251
|
+
chevronOpen,
|
|
252
|
+
submenu,
|
|
253
|
+
childList,
|
|
254
|
+
footer,
|
|
255
|
+
footerLink,
|
|
256
|
+
footerVersion,
|
|
257
|
+
"fade-in": "_fade-in_y1c07_1",
|
|
258
|
+
"slide-up": "_slide-up_y1c07_1",
|
|
259
|
+
"spin-3d": "_spin-3d_y1c07_1",
|
|
260
|
+
spin,
|
|
261
|
+
pulse,
|
|
262
|
+
"fade-in-up": "_fade-in-up_y1c07_1",
|
|
263
|
+
"progress-grow": "_progress-grow_y1c07_1",
|
|
264
|
+
"indeterminate-move": "_indeterminate-move_y1c07_1",
|
|
265
|
+
"skeleton-loading": "_skeleton-loading_y1c07_1"
|
|
266
|
+
};
|
|
267
|
+
const Sidebar = ({ links, ...rest }) => {
|
|
268
|
+
const currentPath = navigation.usePathname();
|
|
269
|
+
const { currentPath: _ignored, ...safeRest } = rest;
|
|
270
|
+
return /* @__PURE__ */ jsx(
|
|
271
|
+
SidebarBase,
|
|
272
|
+
{
|
|
273
|
+
links,
|
|
274
|
+
classMap: styles,
|
|
275
|
+
currentPath,
|
|
276
|
+
LinkComponent: Link,
|
|
277
|
+
...safeRest
|
|
278
|
+
},
|
|
279
|
+
currentPath
|
|
280
|
+
);
|
|
281
|
+
};
|
|
282
|
+
export {
|
|
283
|
+
Sidebar as S
|
|
284
|
+
};
|
|
285
|
+
//# sourceMappingURL=Sidebar-B9jHy0wy.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Sidebar-B9jHy0wy.js","sources":["../../src/components/Sidebar/SidebarBase.tsx","../../src/components/Sidebar/next/Sidebar.tsx"],"sourcesContent":["import React, { useState, useMemo, useRef, useEffect } from \"react\";\nimport { SidebarProps } from \"./Sidebar.types\";\nimport { combineClassNames } from \"@/utils/classNames\";\nimport {\n getDefaultRounding,\n getDefaultShadow,\n getDefaultTheme,\n} from \"@/config/boreal-style-config\";\nimport { capitalize } from \"@/utils/capitalize\";\nimport { ChevronDownIcon } from \"@/Icons\";\n\nexport interface BaseSidebarProps extends SidebarProps {\n classMap: Record<string, string>;\n}\n\nconst SidebarBase: React.FC<BaseSidebarProps> = ({\n links,\n classMap,\n currentPath,\n LinkComponent = \"a\",\n theme = getDefaultTheme(),\n rounding = getDefaultRounding(),\n shadow = getDefaultShadow(),\n state = \"\",\n showFooter = false,\n footerLinks,\n footerVersion,\n outline = false,\n className = \"\",\n \"data-testid\": testId = \"sidebar\",\n ariaLabel = \"Sidebar navigation\",\n ...rest\n}) => {\n const [openItems, setOpenItems] = useState<Record<string, boolean>>({});\n\n const toggleItem = (key: string) => {\n setOpenItems((prev) => ({ ...prev, [key]: !prev[key] }));\n };\n\n const submenuRefs = useRef<Record<string, HTMLDivElement | null>>({});\n\n const setSubmenuRef = (key: string, el: HTMLDivElement | null) => {\n submenuRefs.current[key] = el;\n };\n\n const getSubmenuHeight = (key: string) => {\n const el = submenuRefs.current[key];\n return el ? `${el.scrollHeight}px` : \"0px\";\n };\n\n const containerClasses = useMemo(\n () =>\n combineClassNames(\n classMap.wrapper,\n className,\n classMap[theme],\n classMap[state],\n shadow && classMap[`shadow${capitalize(shadow)}`],\n rounding && classMap[`round${capitalize(rounding)}`],\n outline ? classMap.outline : \"\"\n ),\n [className, theme, state, outline, rounding, shadow]\n );\n\n const renderLinks = (items: typeof links, isChild = false) => (\n <ul\n className={combineClassNames(\n classMap.list,\n isChild ? classMap.childList : \"\"\n )}\n data-testid={`${testId}-list`}\n >\n {items.map(({ label, href, children, icon }) => {\n const isActive = href && currentPath === href;\n const isOpen = openItems[label] || false;\n\n return (\n <li\n key={label}\n className={classMap.item}\n data-testid={`${testId}-listItems`}\n >\n {children && children.length > 0 ? (\n <>\n <button\n type=\"button\"\n className={combineClassNames(\n classMap.link,\n isOpen ? classMap.active : \"\"\n )}\n onClick={() => toggleItem(label)}\n aria-expanded={isOpen}\n data-testid={`${testId}-exapndItemButton`}\n >\n {icon && <span className={classMap.icon}>{icon}</span>}\n <span data-testid={`${testId}-exapndItemLabel`}>{label}</span>\n <ChevronDownIcon\n className={combineClassNames(\n classMap.chevron,\n isOpen ? classMap.chevronOpen : \"\"\n )}\n data-testid={`${testId}-exapndIcon`}\n />\n </button>\n <div\n ref={(el) => setSubmenuRef(label, el)}\n className={combineClassNames(\n classMap.submenu,\n isOpen ? classMap.submenuOpen : \"\"\n )}\n style={{\n maxHeight: isOpen ? getSubmenuHeight(label) : \"0px\",\n }}\n data-testid={`${testId}-subMenu`}\n >\n {renderLinks(children, true)}\n </div>\n </>\n ) : href ? (\n <LinkComponent\n href={href}\n className={combineClassNames(\n classMap.link,\n isChild ? classMap.childLink : \"\",\n isActive ? classMap.active : \"\"\n )}\n aria-current={isActive ? \"page\" : undefined}\n data-testid={`${testId}-sidebarLink`}\n >\n {icon && <span className={classMap.icon}>{icon}</span>}\n {label}\n </LinkComponent>\n ) : (\n <span\n className={combineClassNames(\n classMap.link,\n isChild ? classMap.childLink : \"\"\n )}\n data-testid={`${testId}-sidebarLabel`}\n >\n {icon && <span className={classMap.icon}>{icon}</span>}\n {label}\n </span>\n )}\n </li>\n );\n })}\n </ul>\n );\n\n return (\n <nav\n className={containerClasses}\n aria-label={ariaLabel}\n {...rest}\n data-testid={testId}\n >\n <nav className={classMap.nav}>{renderLinks(links)}</nav>\n {showFooter && (\n <footer className={classMap.footer} data-testid={`${testId}-footer`}>\n {footerLinks?.map(({ label, href }) => (\n <LinkComponent\n key={label}\n href={href}\n className={classMap.footerLink}\n data-testid={`${testId}-footerLink`}\n >\n {label}\n </LinkComponent>\n ))}\n\n {footerVersion && (\n <span\n className={classMap.footerVersion}\n data-testid={`${testId}-footerVersion`}\n >\n {footerVersion}\n </span>\n )}\n </footer>\n )}\n </nav>\n );\n};\n\nSidebarBase.displayName = \"SidebarBase\";\n\nexport default SidebarBase;\n","\"use client\";\n\nimport React from \"react\";\nimport Link from \"next/link\";\nimport { usePathname } from \"next/navigation\";\nimport SidebarBase from \"../SidebarBase\";\nimport styles from \"./Sidebar.module.scss\";\nimport { SidebarProps } from \"../Sidebar.types\";\n\nconst Sidebar: React.FC<SidebarProps> = ({ links, ...rest }) => {\n const currentPath = usePathname();\n\n const { currentPath: _ignored, ...safeRest } = rest;\n\n return (\n <SidebarBase\n links={links}\n classMap={styles}\n currentPath={currentPath}\n LinkComponent={Link}\n key={currentPath}\n {...safeRest}\n />\n );\n};\n\nexport default Sidebar;\n"],"names":["footerVersion","outline","usePathname"],"mappings":";;;;;;;;AAeA,MAAM,cAA0C,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,QAAQ,gBAAA;AAAA,EACR,WAAW,mBAAA;AAAA,EACX,SAAS,iBAAA;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AAAA,EACb;AAAA,EACA,eAAAA;AAAA,EACA,SAAAC,WAAU;AAAA,EACV,YAAY;AAAA,EACZ,eAAe,SAAS;AAAA,EACxB,YAAY;AAAA,EACZ,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,WAAW,YAAY,IAAI,SAAkC,CAAA,CAAE;AAEtE,QAAM,aAAa,CAAC,QAAgB;AAClC,iBAAa,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,GAAG,GAAG,CAAC,KAAK,GAAG,EAAA,EAAI;AAAA,EACzD;AAEA,QAAM,cAAc,OAA8C,EAAE;AAEpE,QAAM,gBAAgB,CAAC,KAAa,OAA8B;AAChE,gBAAY,QAAQ,GAAG,IAAI;AAAA,EAC7B;AAEA,QAAM,mBAAmB,CAAC,QAAgB;AACxC,UAAM,KAAK,YAAY,QAAQ,GAAG;AAClC,WAAO,KAAK,GAAG,GAAG,YAAY,OAAO;AAAA,EACvC;AAEA,QAAM,mBAAmB;AAAA,IACvB,MACE;AAAA,MACE,SAAS;AAAA,MACT;AAAA,MACA,SAAS,KAAK;AAAA,MACd,SAAS,KAAK;AAAA,MACd,UAAU,SAAS,SAAS,WAAW,MAAM,CAAC,EAAE;AAAA,MAChD,YAAY,SAAS,QAAQ,WAAW,QAAQ,CAAC,EAAE;AAAA,MACnDA,WAAU,SAAS,UAAU;AAAA,IAAA;AAAA,IAEjC,CAAC,WAAW,OAAO,OAAOA,UAAS,UAAU,MAAM;AAAA,EAAA;AAGrD,QAAM,cAAc,CAAC,OAAqB,UAAU,UAClD;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,SAAS;AAAA,QACT,UAAU,SAAS,YAAY;AAAA,MAAA;AAAA,MAEjC,eAAa,GAAG,MAAM;AAAA,MAErB,UAAA,MAAM,IAAI,CAAC,EAAE,OAAO,MAAM,UAAU,WAAW;AAC9C,cAAM,WAAW,QAAQ,gBAAgB;AACzC,cAAM,SAAS,UAAU,KAAK,KAAK;AAEnC,eACE;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAW,SAAS;AAAA,YACpB,eAAa,GAAG,MAAM;AAAA,YAErB,UAAA,YAAY,SAAS,SAAS,IAC7B,qBAAA,UAAA,EACE,UAAA;AAAA,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,WAAW;AAAA,oBACT,SAAS;AAAA,oBACT,SAAS,SAAS,SAAS;AAAA,kBAAA;AAAA,kBAE7B,SAAS,MAAM,WAAW,KAAK;AAAA,kBAC/B,iBAAe;AAAA,kBACf,eAAa,GAAG,MAAM;AAAA,kBAErB,UAAA;AAAA,oBAAA,QAAQ,oBAAC,QAAA,EAAK,WAAW,SAAS,MAAO,UAAA,MAAK;AAAA,wCAC9C,QAAA,EAAK,eAAa,GAAG,MAAM,oBAAqB,UAAA,OAAM;AAAA,oBACvD;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,WAAW;AAAA,0BACT,SAAS;AAAA,0BACT,SAAS,SAAS,cAAc;AAAA,wBAAA;AAAA,wBAElC,eAAa,GAAG,MAAM;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACxB;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEF;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,KAAK,CAAC,OAAO,cAAc,OAAO,EAAE;AAAA,kBACpC,WAAW;AAAA,oBACT,SAAS;AAAA,oBACT,SAAS,SAAS,cAAc;AAAA,kBAAA;AAAA,kBAElC,OAAO;AAAA,oBACL,WAAW,SAAS,iBAAiB,KAAK,IAAI;AAAA,kBAAA;AAAA,kBAEhD,eAAa,GAAG,MAAM;AAAA,kBAErB,UAAA,YAAY,UAAU,IAAI;AAAA,gBAAA;AAAA,cAAA;AAAA,YAC7B,EAAA,CACF,IACE,OACF;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC;AAAA,gBACA,WAAW;AAAA,kBACT,SAAS;AAAA,kBACT,UAAU,SAAS,YAAY;AAAA,kBAC/B,WAAW,SAAS,SAAS;AAAA,gBAAA;AAAA,gBAE/B,gBAAc,WAAW,SAAS;AAAA,gBAClC,eAAa,GAAG,MAAM;AAAA,gBAErB,UAAA;AAAA,kBAAA,QAAQ,oBAAC,QAAA,EAAK,WAAW,SAAS,MAAO,UAAA,MAAK;AAAA,kBAC9C;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA,IAGH;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW;AAAA,kBACT,SAAS;AAAA,kBACT,UAAU,SAAS,YAAY;AAAA,gBAAA;AAAA,gBAEjC,eAAa,GAAG,MAAM;AAAA,gBAErB,UAAA;AAAA,kBAAA,QAAQ,oBAAC,QAAA,EAAK,WAAW,SAAS,MAAO,UAAA,MAAK;AAAA,kBAC9C;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACH;AAAA,UAhEG;AAAA,QAAA;AAAA,MAoEX,CAAC;AAAA,IAAA;AAAA,EAAA;AAIL,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,cAAY;AAAA,MACX,GAAG;AAAA,MACJ,eAAa;AAAA,MAEb,UAAA;AAAA,QAAA,oBAAC,SAAI,WAAW,SAAS,KAAM,UAAA,YAAY,KAAK,GAAE;AAAA,QACjD,mCACE,UAAA,EAAO,WAAW,SAAS,QAAQ,eAAa,GAAG,MAAM,WACvD,UAAA;AAAA,UAAA,2CAAa,IAAI,CAAC,EAAE,OAAO,WAC1B;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC;AAAA,cACA,WAAW,SAAS;AAAA,cACpB,eAAa,GAAG,MAAM;AAAA,cAErB,UAAA;AAAA,YAAA;AAAA,YALI;AAAA,UAAA;AAAA,UASRD,kBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,SAAS;AAAA,cACpB,eAAa,GAAG,MAAM;AAAA,cAErB,UAAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;AAEA,YAAY,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AChL1B,MAAM,UAAkC,CAAC,EAAE,OAAO,GAAG,WAAW;AAC9D,QAAM,cAAcE,WAAAA,YAAA;AAEpB,QAAM,EAAE,aAAa,UAAU,GAAG,aAAa;AAE/C,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,eAAe;AAAA,MAEd,GAAG;AAAA,IAAA;AAAA,IADC;AAAA,EAAA;AAIX;"}
|