boreal-ui 0.0.1

package/dist/next/Select-DwWTQcCU.js

@@ -0,0 +1,230 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { forwardRef, useId, useState, useEffect, useMemo } from "react";
+import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
+import { c as capitalize } from "./capitalize-C0TSQSPh.js";
+import { a as getDefaultRounding, b as getDefaultShadow, d as getDefaultTheme } from "./boreal-style-config-BILmxkZG.js";
+const ChevronDownIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "24px",
+    height: "24px",
+    viewBox: "0 0 24 24",
+    strokeWidth: "1.5",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    color: "currentColor",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        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",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+const BaseSelect = forwardRef(
+  ({
+    theme = getDefaultTheme(),
+    state = "",
+    outline: outline2 = false,
+    rounding = getDefaultRounding(),
+    shadow = getDefaultShadow(),
+    options,
+    value,
+    onChange,
+    placeholder = "Select an option",
+    ariaLabel,
+    ariaDescription,
+    disabled: disabled2 = false,
+    className = "",
+    classMap,
+    asyncOptions,
+    pollInterval = 0,
+    "data-testid": testId = "select"
+  }, ref) => {
+    const id = useId();
+    const selectId = `${id}-select`;
+    const descId = ariaDescription ? `${id}-desc` : void 0;
+    const [internalOptions, setInternalOptions] = useState(options);
+    useEffect(() => {
+      if (!asyncOptions) return;
+      let isMounted = true;
+      const load = async () => {
+        try {
+          const fetched = await asyncOptions("");
+          if (isMounted) setInternalOptions(fetched);
+        } catch (err) {
+          console.error("Failed to load options:", err);
+        }
+      };
+      load();
+      if (pollInterval > 0) {
+        const intervalId = setInterval(load, pollInterval);
+        return () => {
+          clearInterval(intervalId);
+          isMounted = false;
+        };
+      }
+      return () => {
+        isMounted = false;
+      };
+    }, [asyncOptions, pollInterval]);
+    const handleChange = (event) => {
+      onChange(event.target.value);
+    };
+    const wrapperClasses = useMemo(
+      () => combineClassNames(
+        classMap.wrapper,
+        classMap[theme],
+        classMap[state],
+        className,
+        shadow && classMap[`shadow${capitalize(shadow)}`],
+        rounding && classMap[`round${capitalize(rounding)}`],
+        outline2 ? classMap.outline : "",
+        disabled2 ? classMap.disabled : ""
+      ),
+      [classMap, theme, state, className, shadow, rounding, outline2, disabled2]
+    );
+    const selectClasses = useMemo(
+      () => combineClassNames(
+        classMap.select,
+        classMap[theme],
+        classMap[state],
+        shadow && classMap[`shadow${capitalize(shadow)}`],
+        rounding && classMap[`round${capitalize(rounding)}`],
+        outline2 ? classMap.outline : ""
+      ),
+      [classMap, theme, state, outline2]
+    );
+    return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, "data-testid": testId, children: [
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          ref,
+          id: selectId,
+          value,
+          onChange: handleChange,
+          className: selectClasses,
+          "aria-label": ariaLabel || placeholder,
+          "aria-describedby": descId,
+          "aria-disabled": disabled2,
+          disabled: disabled2,
+          "data-testid": `${testId}-input`,
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", disabled: true, hidden: true, children: placeholder }),
+            (asyncOptions ? internalOptions : options).map((option) => /* @__PURE__ */ jsx(
+              "option",
+              {
+                value: option.value,
+                "data-testid": `${testId}-option-${option.value}`,
+                children: option.label
+              },
+              option.value
+            ))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${classMap.icon} ${classMap[theme]} ${disabled2 && classMap.disabled ? classMap.disabled : ""}`,
+          "aria-hidden": "true",
+          "data-testid": `${testId}-icon`,
+          children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+        }
+      ),
+      ariaDescription && /* @__PURE__ */ jsx(
+        "span",
+        {
+          id: descId,
+          className: "sr-only",
+          "data-testid": `${testId}-description`,
+          children: ariaDescription
+        }
+      )
+    ] });
+  }
+);
+BaseSelect.displayName = "BaseSelect";
+const noScroll = "_noScroll_f6onq_91";
+const errorMessage = "_errorMessage_f6onq_92";
+const loadingContainer = "_loadingContainer_f6onq_93";
+const hideScrollbar = "_hideScrollbar_f6onq_85";
+const sr_only = "_sr_only_f6onq_94";
+const wrapper = "_wrapper_f6onq_479";
+const disabled = "_disabled_f6onq_489";
+const icon = "_icon_f6onq_495";
+const select = "_select_f6onq_508";
+const primary = "_primary_f6onq_525";
+const outline = "_outline_f6onq_531";
+const clear = "_clear_f6onq_535";
+const secondary = "_secondary_f6onq_538";
+const tertiary = "_tertiary_f6onq_551";
+const quaternary = "_quaternary_f6onq_564";
+const success = "_success_f6onq_592";
+const error = "_error_f6onq_92";
+const warning = "_warning_f6onq_618";
+const roundNone = "_roundNone_f6onq_632";
+const roundSmall = "_roundSmall_f6onq_636";
+const roundMedium = "_roundMedium_f6onq_640";
+const roundLarge = "_roundLarge_f6onq_644";
+const roundFull = "_roundFull_f6onq_648";
+const shadowNone = "_shadowNone_f6onq_652";
+const shadowLight = "_shadowLight_f6onq_656";
+const shadowMedium = "_shadowMedium_f6onq_660";
+const shadowStrong = "_shadowStrong_f6onq_664";
+const shadowIntense = "_shadowIntense_f6onq_668";
+const spin = "_spin_f6onq_1";
+const pulse = "_pulse_f6onq_1";
+const styles = {
+  noScroll,
+  errorMessage,
+  loadingContainer,
+  hideScrollbar,
+  sr_only,
+  wrapper,
+  disabled,
+  icon,
+  select,
+  primary,
+  outline,
+  clear,
+  secondary,
+  tertiary,
+  quaternary,
+  success,
+  error,
+  warning,
+  roundNone,
+  roundSmall,
+  roundMedium,
+  roundLarge,
+  roundFull,
+  shadowNone,
+  shadowLight,
+  shadowMedium,
+  shadowStrong,
+  shadowIntense,
+  "fade-in": "_fade-in_f6onq_1",
+  "slide-up": "_slide-up_f6onq_1",
+  "spin-3d": "_spin-3d_f6onq_1",
+  spin,
+  pulse,
+  "fade-in-up": "_fade-in-up_f6onq_1",
+  "progress-grow": "_progress-grow_f6onq_1",
+  "indeterminate-move": "_indeterminate-move_f6onq_1",
+  "skeleton-loading": "_skeleton-loading_f6onq_1"
+};
+const Select = React.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx(BaseSelect, { ...props, ref, classMap: styles });
+  }
+);
+Select.displayName = "Select";
+export {
+  Select as S
+};
+//# sourceMappingURL=Select-DwWTQcCU.js.map

package/dist/next/Select-DwWTQcCU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select-DwWTQcCU.js","sources":["../../src/Icons/CheveronDownIcon.tsx","../../src/components/Select/SelectBase.tsx","../../src/components/Select/next/Select.tsx"],"sourcesContent":["const ChevronDownIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\r\n  <svg\r\n    width=\"24px\"\r\n    height=\"24px\"\r\n    viewBox=\"0 0 24 24\"\r\n    strokeWidth=\"1.5\"\r\n    fill=\"none\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    color=\"currentColor\"\r\n    {...props}\r\n  >\r\n    <path\r\n      fillRule=\"evenodd\"\r\n      clipRule=\"evenodd\"\r\n      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\"\r\n      fill=\"currentColor\"\r\n    ></path>\r\n  </svg>\r\n);\r\n\r\nexport default ChevronDownIcon;\r\n","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-_f1aZuKO.cjs

@@ -0,0 +1,229 @@
+"use strict";
+const require$$2 = require("react/jsx-runtime");
+const React = require("react");
+const classNames = require("./classNames-BcWMx052.cjs");
+const capitalize = require("./capitalize-DoV-nOmN.cjs");
+const borealStyleConfig = require("./boreal-style-config-Rr5d5Qts.cjs");
+const ChevronDownIcon = (props) => /* @__PURE__ */ require$$2.jsx(
+  "svg",
+  {
+    width: "24px",
+    height: "24px",
+    viewBox: "0 0 24 24",
+    strokeWidth: "1.5",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    color: "currentColor",
+    ...props,
+    children: /* @__PURE__ */ require$$2.jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        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",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+const BaseSelect = React.forwardRef(
+  ({
+    theme = borealStyleConfig.getDefaultTheme(),
+    state = "",
+    outline: outline2 = false,
+    rounding = borealStyleConfig.getDefaultRounding(),
+    shadow = borealStyleConfig.getDefaultShadow(),
+    options,
+    value,
+    onChange,
+    placeholder = "Select an option",
+    ariaLabel,
+    ariaDescription,
+    disabled: disabled2 = false,
+    className = "",
+    classMap,
+    asyncOptions,
+    pollInterval = 0,
+    "data-testid": testId = "select"
+  }, ref) => {
+    const id = React.useId();
+    const selectId = `${id}-select`;
+    const descId = ariaDescription ? `${id}-desc` : void 0;
+    const [internalOptions, setInternalOptions] = React.useState(options);
+    React.useEffect(() => {
+      if (!asyncOptions) return;
+      let isMounted = true;
+      const load = async () => {
+        try {
+          const fetched = await asyncOptions("");
+          if (isMounted) setInternalOptions(fetched);
+        } catch (err) {
+          console.error("Failed to load options:", err);
+        }
+      };
+      load();
+      if (pollInterval > 0) {
+        const intervalId = setInterval(load, pollInterval);
+        return () => {
+          clearInterval(intervalId);
+          isMounted = false;
+        };
+      }
+      return () => {
+        isMounted = false;
+      };
+    }, [asyncOptions, pollInterval]);
+    const handleChange = (event) => {
+      onChange(event.target.value);
+    };
+    const wrapperClasses = React.useMemo(
+      () => classNames.combineClassNames(
+        classMap.wrapper,
+        classMap[theme],
+        classMap[state],
+        className,
+        shadow && classMap[`shadow${capitalize.capitalize(shadow)}`],
+        rounding && classMap[`round${capitalize.capitalize(rounding)}`],
+        outline2 ? classMap.outline : "",
+        disabled2 ? classMap.disabled : ""
+      ),
+      [classMap, theme, state, className, shadow, rounding, outline2, disabled2]
+    );
+    const selectClasses = React.useMemo(
+      () => classNames.combineClassNames(
+        classMap.select,
+        classMap[theme],
+        classMap[state],
+        shadow && classMap[`shadow${capitalize.capitalize(shadow)}`],
+        rounding && classMap[`round${capitalize.capitalize(rounding)}`],
+        outline2 ? classMap.outline : ""
+      ),
+      [classMap, theme, state, outline2]
+    );
+    return /* @__PURE__ */ require$$2.jsxs("div", { className: wrapperClasses, "data-testid": testId, children: [
+      /* @__PURE__ */ require$$2.jsxs(
+        "select",
+        {
+          ref,
+          id: selectId,
+          value,
+          onChange: handleChange,
+          className: selectClasses,
+          "aria-label": ariaLabel || placeholder,
+          "aria-describedby": descId,
+          "aria-disabled": disabled2,
+          disabled: disabled2,
+          "data-testid": `${testId}-input`,
+          children: [
+            /* @__PURE__ */ require$$2.jsx("option", { value: "", disabled: true, hidden: true, children: placeholder }),
+            (asyncOptions ? internalOptions : options).map((option) => /* @__PURE__ */ require$$2.jsx(
+              "option",
+              {
+                value: option.value,
+                "data-testid": `${testId}-option-${option.value}`,
+                children: option.label
+              },
+              option.value
+            ))
+          ]
+        }
+      ),
+      /* @__PURE__ */ require$$2.jsx(
+        "div",
+        {
+          className: `${classMap.icon} ${classMap[theme]} ${disabled2 && classMap.disabled ? classMap.disabled : ""}`,
+          "aria-hidden": "true",
+          "data-testid": `${testId}-icon`,
+          children: /* @__PURE__ */ require$$2.jsx(ChevronDownIcon, {})
+        }
+      ),
+      ariaDescription && /* @__PURE__ */ require$$2.jsx(
+        "span",
+        {
+          id: descId,
+          className: "sr-only",
+          "data-testid": `${testId}-description`,
+          children: ariaDescription
+        }
+      )
+    ] });
+  }
+);
+BaseSelect.displayName = "BaseSelect";
+const noScroll = "_noScroll_f6onq_91";
+const errorMessage = "_errorMessage_f6onq_92";
+const loadingContainer = "_loadingContainer_f6onq_93";
+const hideScrollbar = "_hideScrollbar_f6onq_85";
+const sr_only = "_sr_only_f6onq_94";
+const wrapper = "_wrapper_f6onq_479";
+const disabled = "_disabled_f6onq_489";
+const icon = "_icon_f6onq_495";
+const select = "_select_f6onq_508";
+const primary = "_primary_f6onq_525";
+const outline = "_outline_f6onq_531";
+const clear = "_clear_f6onq_535";
+const secondary = "_secondary_f6onq_538";
+const tertiary = "_tertiary_f6onq_551";
+const quaternary = "_quaternary_f6onq_564";
+const success = "_success_f6onq_592";
+const error = "_error_f6onq_92";
+const warning = "_warning_f6onq_618";
+const roundNone = "_roundNone_f6onq_632";
+const roundSmall = "_roundSmall_f6onq_636";
+const roundMedium = "_roundMedium_f6onq_640";
+const roundLarge = "_roundLarge_f6onq_644";
+const roundFull = "_roundFull_f6onq_648";
+const shadowNone = "_shadowNone_f6onq_652";
+const shadowLight = "_shadowLight_f6onq_656";
+const shadowMedium = "_shadowMedium_f6onq_660";
+const shadowStrong = "_shadowStrong_f6onq_664";
+const shadowIntense = "_shadowIntense_f6onq_668";
+const spin = "_spin_f6onq_1";
+const pulse = "_pulse_f6onq_1";
+const styles = {
+  noScroll,
+  errorMessage,
+  loadingContainer,
+  hideScrollbar,
+  sr_only,
+  wrapper,
+  disabled,
+  icon,
+  select,
+  primary,
+  outline,
+  clear,
+  secondary,
+  tertiary,
+  quaternary,
+  success,
+  error,
+  warning,
+  roundNone,
+  roundSmall,
+  roundMedium,
+  roundLarge,
+  roundFull,
+  shadowNone,
+  shadowLight,
+  shadowMedium,
+  shadowStrong,
+  shadowIntense,
+  "fade-in": "_fade-in_f6onq_1",
+  "slide-up": "_slide-up_f6onq_1",
+  "spin-3d": "_spin-3d_f6onq_1",
+  spin,
+  pulse,
+  "fade-in-up": "_fade-in-up_f6onq_1",
+  "progress-grow": "_progress-grow_f6onq_1",
+  "indeterminate-move": "_indeterminate-move_f6onq_1",
+  "skeleton-loading": "_skeleton-loading_f6onq_1"
+};
+const Select = React.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ require$$2.jsx(BaseSelect, { ...props, ref, classMap: styles });
+  }
+);
+Select.displayName = "Select";
+exports.Select = Select;
+//# sourceMappingURL=Select-_f1aZuKO.cjs.map

package/dist/next/Select-_f1aZuKO.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select-_f1aZuKO.cjs","sources":["../../src/Icons/CheveronDownIcon.tsx","../../src/components/Select/SelectBase.tsx","../../src/components/Select/next/Select.tsx"],"sourcesContent":["const ChevronDownIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\r\n  <svg\r\n    width=\"24px\"\r\n    height=\"24px\"\r\n    viewBox=\"0 0 24 24\"\r\n    strokeWidth=\"1.5\"\r\n    fill=\"none\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    color=\"currentColor\"\r\n    {...props}\r\n  >\r\n    <path\r\n      fillRule=\"evenodd\"\r\n      clipRule=\"evenodd\"\r\n      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\"\r\n      fill=\"currentColor\"\r\n    ></path>\r\n  </svg>\r\n);\r\n\r\nexport default ChevronDownIcon;\r\n","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":["jsx","forwardRef","getDefaultTheme","outline","getDefaultRounding","getDefaultShadow","disabled","useId","useState","useEffect","useMemo","combineClassNames","capitalize","jsxs"],"mappings":"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"}

package/dist/next/Select.cjs.js

@@ -0,0 +1,4 @@
+"use strict";
+const Select = require("./Select-_f1aZuKO.cjs");
+module.exports = Select.Select;
+//# sourceMappingURL=Select.cjs.js.map

package/dist/next/Select.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/next/Select.js

@@ -0,0 +1,5 @@
+import { S } from "./Select-DwWTQcCU.js";
+export {
+  S as default
+};
+//# sourceMappingURL=Select.js.map

package/dist/next/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/next/Skeleton-BWBHgsOM.js

@@ -0,0 +1,104 @@
+import { jsx } from "react/jsx-runtime";
+import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
+import { c as capitalize } from "./capitalize-C0TSQSPh.js";
+import { a as getDefaultRounding, b as getDefaultShadow } from "./boreal-style-config-BILmxkZG.js";
+const noScroll = "_noScroll_1vcpz_91";
+const errorMessage = "_errorMessage_1vcpz_92";
+const loadingContainer = "_loadingContainer_1vcpz_93";
+const hideScrollbar = "_hideScrollbar_1vcpz_85";
+const sr_only = "_sr_only_1vcpz_94";
+const skeletonLoader = "_skeletonLoader_1vcpz_479";
+const roundNone = "_roundNone_1vcpz_496";
+const roundSmall = "_roundSmall_1vcpz_500";
+const roundMedium = "_roundMedium_1vcpz_504";
+const roundLarge = "_roundLarge_1vcpz_508";
+const roundFull = "_roundFull_1vcpz_512";
+const shadowNone = "_shadowNone_1vcpz_516";
+const shadowLight = "_shadowLight_1vcpz_520";
+const shadowMedium = "_shadowMedium_1vcpz_524";
+const shadowStrong = "_shadowStrong_1vcpz_528";
+const shadowIntense = "_shadowIntense_1vcpz_532";
+const spin = "_spin_1vcpz_1";
+const pulse = "_pulse_1vcpz_1";
+const styles = {
+  noScroll,
+  errorMessage,
+  loadingContainer,
+  hideScrollbar,
+  sr_only,
+  skeletonLoader,
+  "skeleton-loading": "_skeleton-loading_1vcpz_1",
+  roundNone,
+  roundSmall,
+  roundMedium,
+  roundLarge,
+  roundFull,
+  shadowNone,
+  shadowLight,
+  shadowMedium,
+  shadowStrong,
+  shadowIntense,
+  "fade-in": "_fade-in_1vcpz_1",
+  "slide-up": "_slide-up_1vcpz_1",
+  "spin-3d": "_spin-3d_1vcpz_1",
+  spin,
+  pulse,
+  "fade-in-up": "_fade-in-up_1vcpz_1",
+  "progress-grow": "_progress-grow_1vcpz_1",
+  "indeterminate-move": "_indeterminate-move_1vcpz_1"
+};
+const SkeletonBase = ({
+  width = "100%",
+  height = "100%",
+  rounding = getDefaultRounding(),
+  shadow = getDefaultShadow(),
+  className = "",
+  label = "Loading content...",
+  "data-testid": testId = "skeleton-loader",
+  classMap,
+  ...rest
+}) => {
+  const descriptionId = `${testId}-desc`;
+  const skeletonClasses = combineClassNames(
+    shadow && classMap[`shadow${capitalize(shadow)}`],
+    rounding && classMap[`round${capitalize(rounding)}`],
+    className
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: skeletonClasses,
+      style: { width, height },
+      role: "status",
+      "aria-busy": "true",
+      "aria-live": "polite",
+      "aria-describedby": descriptionId,
+      "data-testid": testId,
+      "aria-label": label,
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          id: descriptionId,
+          className: "sr_only",
+          "data-testid": `${testId}-description`,
+          children: label
+        }
+      )
+    }
+  );
+};
+const SkeletonLoader = (props) => {
+  return /* @__PURE__ */ jsx(
+    SkeletonBase,
+    {
+      ...props,
+      className: combineClassNames(styles.skeletonLoader, props.className),
+      classMap: styles
+    }
+  );
+};
+export {
+  SkeletonLoader as S
+};
+//# sourceMappingURL=Skeleton-BWBHgsOM.js.map

package/dist/next/Skeleton-BWBHgsOM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton-BWBHgsOM.js","sources":["../../src/components/Skeleton/SkeletonBase.tsx","../../src/components/Skeleton/next/Skeleton.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { SkeletonProps } from \"./Skeleton.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nexport interface SkeletonBaseProps extends SkeletonProps {\r\n  classMap: Record<string, string>;\r\n}\r\n\r\nconst SkeletonBase: React.FC<SkeletonBaseProps> = ({\r\n  width = \"100%\",\r\n  height = \"100%\",\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  className = \"\",\r\n  label = \"Loading content...\",\r\n  \"data-testid\": testId = \"skeleton-loader\",\r\n  classMap,\r\n  ...rest\r\n}) => {\r\n  const descriptionId = `${testId}-desc`;\r\n\r\n  const skeletonClasses = combineClassNames(\r\n    shadow && classMap[`shadow${capitalize(shadow)}`],\r\n    rounding && classMap[`round${capitalize(rounding)}`],\r\n    className\r\n  );\r\n\r\n  return (\r\n    <div\r\n      className={skeletonClasses}\r\n      style={{ width, height }}\r\n      role=\"status\"\r\n      aria-busy=\"true\"\r\n      aria-live=\"polite\"\r\n      aria-describedby={descriptionId}\r\n      data-testid={testId}\r\n      aria-label={label}\r\n      {...rest}\r\n    >\r\n      <span\r\n        id={descriptionId}\r\n        className=\"sr_only\"\r\n        data-testid={`${testId}-description`}\r\n      >\r\n        {label}\r\n      </span>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default SkeletonBase;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport styles from \"./Skeleton.module.scss\";\r\nimport SkeletonBase from \"../SkeletonBase\";\r\nimport { SkeletonProps } from \"../Skeleton.types\";\r\nimport { combineClassNames } from \"@/utils/classNames\";\r\n\r\nconst SkeletonLoader: React.FC<SkeletonProps> = (props) => {\r\n  return (\r\n    <SkeletonBase\r\n      {...props}\r\n      className={combineClassNames(styles.skeletonLoader, props.className)}\r\n      classMap={styles}\r\n    />\r\n  );\r\n};\r\n\r\nexport default SkeletonLoader;\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,eAA4C,CAAC;AAAA,EACjD,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,WAAW,mBAAmB;AAAA,EAC9B,SAAS,iBAAiB;AAAA,EAC1B,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,eAAe,SAAS;AAAA,EACxB;AAAA,EACA,GAAG;AACL,MAAM;AACE,QAAA,gBAAgB,GAAG,MAAM;AAE/B,QAAM,kBAAkB;AAAA,IACtB,UAAU,SAAS,SAAS,WAAW,MAAM,CAAC,EAAE;AAAA,IAChD,YAAY,SAAS,QAAQ,WAAW,QAAQ,CAAC,EAAE;AAAA,IACnD;AAAA,EACF;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO,EAAE,OAAO,OAAO;AAAA,MACvB,MAAK;AAAA,MACL,aAAU;AAAA,MACV,aAAU;AAAA,MACV,oBAAkB;AAAA,MAClB,eAAa;AAAA,MACb,cAAY;AAAA,MACX,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ,WAAU;AAAA,UACV,eAAa,GAAG,MAAM;AAAA,UAErB,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EACF;AAEJ;AC7CM,MAAA,iBAA0C,CAAC,UAAU;AAEvD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,kBAAkB,OAAO,gBAAgB,MAAM,SAAS;AAAA,MACnE,UAAU;AAAA,IAAA;AAAA,EACZ;AAEJ;"}