boreal-ui 0.0.72 → 0.0.74

package/dist/core/ScrollToTop-CK74BkzY.cjs

@@ -0,0 +1,135 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const capitalize = require("./capitalize-DoV-nOmN.cjs");
+const classNames = require("./classNames-BcWMx052.cjs");
+const borealStyleConfig = require("./boreal-style-config-C1UIwOFN.cjs");
+const ArrowUpIcon = (props) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M12 21L12 3M12 3L20.5 11.5M12 3L3.5 11.5",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+const ScrollToTopBase = ({
+  classMap,
+  rounding = borealStyleConfig.getDefaultRounding(),
+  shadow = borealStyleConfig.getDefaultShadow(),
+  IconComponent,
+  offset = 300,
+  className = "",
+  "aria-label": ariaLabel = "Scroll to top",
+  "aria-describedby": ariaDescribedBy,
+  "aria-labelledby": ariaLabelledBy,
+  title,
+  role,
+  wrapperAriaLabel,
+  id,
+  "data-testid": testId = "scroll"
+}) => {
+  const [isVisible, setIsVisible] = React.useState(false);
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    let ticking = false;
+    const update = () => {
+      setIsVisible(window.scrollY > offset);
+      ticking = false;
+    };
+    const onScroll = () => {
+      if (!ticking) {
+        ticking = true;
+        requestAnimationFrame(update);
+      }
+    };
+    update();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, [offset]);
+  const scrollToTop = () => {
+    var _a;
+    if (typeof window === "undefined") return;
+    const prefersReduced = (_a = window.matchMedia) == null ? void 0 : _a.call(
+      window,
+      "(prefers-reduced-motion: reduce)"
+    ).matches;
+    window.scrollTo({
+      top: 0,
+      behavior: prefersReduced ? "auto" : "smooth"
+    });
+  };
+  const buttonClass = React.useMemo(
+    () => classNames.combineClassNames(
+      classMap.button,
+      shadow && classMap[`shadow${capitalize.capitalize(shadow)}`],
+      rounding && classMap[`round${capitalize.capitalize(rounding)}`]
+    ),
+    [classMap, shadow, rounding]
+  );
+  const iconClass = React.useMemo(() => classNames.combineClassNames(classMap.icon), [classMap]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      id,
+      className: classNames.combineClassNames(classMap.wrapper, className),
+      "data-testid": testId,
+      role,
+      "aria-label": role && wrapperAriaLabel ? wrapperAriaLabel : void 0,
+      children: isVisible && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: scrollToTop,
+          className: buttonClass,
+          "aria-label": ariaLabelledBy ? void 0 : ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          "aria-describedby": ariaDescribedBy,
+          title: title ?? ariaLabel,
+          "data-testid": `${testId}-button`,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            IconComponent,
+            {
+              className: iconClass,
+              "aria-hidden": "true",
+              focusable: false
+            }
+          )
+        }
+      )
+    }
+  );
+};
+ScrollToTopBase.displayName = "ScrollToTopBase";
+const classes = {
+  wrapper: "scrollToTop",
+  button: "scrollToTop_button",
+  icon: "scrollToTop_icon",
+  shadowNone: "scrollToTop_shadow-None",
+  shadowLight: "scrollToTop_shadow-Light",
+  shadowMedium: "scrollToTop_shadow-Medium",
+  shadowStrong: "scrollToTop_shadow-Strong",
+  shadowIntense: "scrollToTop_shadow-Intense",
+  roundNone: "scrollToTop_round-None",
+  roundSmall: "scrollToTop_round-Small",
+  roundMedium: "scrollToTop_round-Medium",
+  roundLarge: "scrollToTop_round-Large"
+};
+const ScrollToTopButton = (props) => /* @__PURE__ */ jsxRuntime.jsx(ScrollToTopBase, { ...props, classMap: classes, IconComponent: ArrowUpIcon });
+ScrollToTopButton.displayName = "ScrollToTopButton";
+exports.ScrollToTopButton = ScrollToTopButton;
+//# sourceMappingURL=ScrollToTop-CK74BkzY.cjs.map

package/dist/core/ScrollToTop-CK74BkzY.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollToTop-CK74BkzY.cjs","sources":["../../src/Icons/ArrowUpIcon.tsx","../../src/components/ScrollToTop/ScrollToTopBase.tsx","../../src/components/ScrollToTop/core/ScrollToTop.tsx"],"sourcesContent":["const ArrowUpIcon: 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      d=\"M12 21L12 3M12 3L20.5 11.5M12 3L3.5 11.5\"\r\n      stroke=\"currentColor\"\r\n      strokeWidth=\"1.5\"\r\n      strokeLinecap=\"round\"\r\n      strokeLinejoin=\"round\"\r\n    ></path>\r\n  </svg>\r\n);\r\n\r\nexport default ArrowUpIcon;\r\n","import React, { useEffect, useState, useMemo } from \"react\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n} from \"../../config/boreal-style-config\";\r\nimport { ScrollToTopBaseProps } from \"./ScrollToTop.types\";\r\n\r\nconst ScrollToTopBase: React.FC<ScrollToTopBaseProps> = ({\r\n  classMap,\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  IconComponent,\r\n  offset = 300,\r\n  className = \"\",\r\n  \"aria-label\": ariaLabel = \"Scroll to top\",\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  title,\r\n  role,\r\n  wrapperAriaLabel,\r\n  id,\r\n  \"data-testid\": testId = \"scroll\",\r\n}) => {\r\n  const [isVisible, setIsVisible] = useState(false);\r\n\r\n  useEffect(() => {\r\n    if (typeof window === \"undefined\") return;\r\n\r\n    let ticking = false;\r\n\r\n    const update = () => {\r\n      setIsVisible(window.scrollY > offset);\r\n      ticking = false;\r\n    };\r\n\r\n    const onScroll = () => {\r\n      if (!ticking) {\r\n        ticking = true;\r\n        requestAnimationFrame(update);\r\n      }\r\n    };\r\n\r\n    update();\r\n\r\n    window.addEventListener(\"scroll\", onScroll, { passive: true });\r\n    return () => window.removeEventListener(\"scroll\", onScroll);\r\n  }, [offset]);\r\n\r\n  const scrollToTop = () => {\r\n    if (typeof window === \"undefined\") return;\r\n\r\n    const prefersReduced = window.matchMedia?.(\r\n      \"(prefers-reduced-motion: reduce)\",\r\n    ).matches;\r\n\r\n    window.scrollTo({\r\n      top: 0,\r\n      behavior: prefersReduced ? \"auto\" : \"smooth\",\r\n    });\r\n  };\r\n\r\n  const buttonClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.button,\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n      ),\r\n    [classMap, shadow, rounding],\r\n  );\r\n\r\n  const iconClass = useMemo(() => combineClassNames(classMap.icon), [classMap]);\r\n\r\n  return (\r\n    <div\r\n      id={id}\r\n      className={combineClassNames(classMap.wrapper, className)}\r\n      data-testid={testId}\r\n      role={role}\r\n      aria-label={role && wrapperAriaLabel ? wrapperAriaLabel : undefined}\r\n    >\r\n      {isVisible && (\r\n        <button\r\n          type=\"button\"\r\n          onClick={scrollToTop}\r\n          className={buttonClass}\r\n          aria-label={ariaLabelledBy ? undefined : ariaLabel}\r\n          aria-labelledby={ariaLabelledBy}\r\n          aria-describedby={ariaDescribedBy}\r\n          title={title ?? ariaLabel}\r\n          data-testid={`${testId}-button`}\r\n        >\r\n          <IconComponent\r\n            className={iconClass}\r\n            aria-hidden=\"true\"\r\n            focusable={false}\r\n          />\r\n        </button>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nScrollToTopBase.displayName = \"ScrollToTopBase\";\r\nexport default ScrollToTopBase;\r\n","import React from \"react\";\r\nimport ScrollToTopBase from \"../ScrollToTopBase\";\r\nimport \"./STT.scss\";\r\nimport { ArrowUpIcon } from \"@/Icons\";\r\nimport { ScrollToTopProps } from \"../ScrollToTop.types\";\r\n\r\nconst classes = {\r\n  wrapper: \"scrollToTop\",\r\n  button: \"scrollToTop_button\",\r\n  icon: \"scrollToTop_icon\",\r\n\r\n  shadowNone: \"scrollToTop_shadow-None\",\r\n  shadowLight: \"scrollToTop_shadow-Light\",\r\n  shadowMedium: \"scrollToTop_shadow-Medium\",\r\n  shadowStrong: \"scrollToTop_shadow-Strong\",\r\n  shadowIntense: \"scrollToTop_shadow-Intense\",\r\n\r\n  roundNone: \"scrollToTop_round-None\",\r\n  roundSmall: \"scrollToTop_round-Small\",\r\n  roundMedium: \"scrollToTop_round-Medium\",\r\n  roundLarge: \"scrollToTop_round-Large\",\r\n};\r\n\r\nconst ScrollToTopButton: React.FC<ScrollToTopProps> = (props) => (\r\n  <ScrollToTopBase {...props} classMap={classes} IconComponent={ArrowUpIcon} />\r\n);\r\nScrollToTopButton.displayName = \"ScrollToTopButton\";\r\nexport default ScrollToTopButton;\r\n"],"names":["jsx","getDefaultRounding","getDefaultShadow","useState","useEffect","useMemo","combineClassNames","capitalize"],"mappings":"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"}

package/dist/core/ScrollToTop.cjs.js

@@ -1,4 +1,4 @@
 "use strict";
-const ScrollToTop = require("./ScrollToTop-CLBwqdLe.cjs");
+const ScrollToTop = require("./ScrollToTop-CK74BkzY.cjs");
 module.exports = ScrollToTop.ScrollToTopButton;
 //# sourceMappingURL=ScrollToTop.cjs.js.map

package/dist/core/ScrollToTop.js

@@ -1,4 +1,4 @@
-import { S } from "./ScrollToTop-BwntJ7A5.js";
+import { S } from "./ScrollToTop-BYyKPqix.js";
 export {
   S as default
 };

package/dist/core/Select-BXIz5BbU.js

@@ -0,0 +1,229 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useId, useState, useMemo, useEffect } from "react";
+import { C as ChevronDownIcon } from "./CheveronDownIcon-Cn9jj-ku.js";
+import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
+import { c as capitalize } from "./capitalize-C0TSQSPh.js";
+import { d as getDefaultTheme, a as getDefaultRounding, b as getDefaultShadow } from "./boreal-style-config-DsaRlxmw.js";
+const BaseSelect = forwardRef(
+  ({
+    theme = getDefaultTheme(),
+    state = "",
+    outline = false,
+    rounding = getDefaultRounding(),
+    shadow = getDefaultShadow(),
+    options,
+    value,
+    onChange,
+    placeholder = "Select an option",
+    disabled = false,
+    className = "",
+    classMap,
+    asyncOptions,
+    pollInterval = 0,
+    required,
+    name,
+    label,
+    labelPosition = "top",
+    id,
+    form,
+    autoComplete,
+    role,
+    tabIndex,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-description": ariaDescription,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid,
+    "aria-required": ariaRequired,
+    "aria-busy": ariaBusy,
+    "aria-live": ariaLive = "polite",
+    "data-testid": testId = "select"
+  }, ref) => {
+    const generatedId = useId();
+    const selectId = id || `${generatedId}-select`;
+    const internalDescriptionId = ariaDescription ? `${generatedId}-desc` : void 0;
+    const [internalOptions, setInternalOptions] = useState(options);
+    const [loading, setLoading] = useState(false);
+    const hasLabel = Boolean(label);
+    const layoutClasses = useMemo(() => {
+      const posClass = hasLabel ? classMap[`label${capitalize(labelPosition)}`] : void 0;
+      return combineClassNames(classMap.layout, posClass);
+    }, [classMap, hasLabel, labelPosition]);
+    const labelClasses = useMemo(
+      () => combineClassNames(classMap.label, classMap.labelOverlay),
+      [classMap]
+    );
+    const computedDescribedBy = useMemo(() => {
+      const ids = [ariaDescribedBy, internalDescriptionId].filter(Boolean);
+      return ids.length > 0 ? ids.join(" ") : void 0;
+    }, [ariaDescribedBy, internalDescriptionId]);
+    const computedAriaLabel = ariaLabelledBy ? void 0 : ariaLabel || placeholder;
+    const labelNode = hasLabel ? /* @__PURE__ */ jsx("div", { className: labelClasses, "data-testid": `${testId}-label`, children: label }) : null;
+    useEffect(() => {
+      if (!asyncOptions) return;
+      let isMounted = true;
+      const load = async () => {
+        try {
+          setLoading(true);
+          const fetched = await asyncOptions("");
+          if (isMounted) setInternalOptions(fetched);
+        } catch (err) {
+          console.error("Failed to load options:", err);
+        } finally {
+          if (isMounted) setLoading(false);
+        }
+      };
+      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)}`],
+        outline && classMap.outline,
+        disabled && classMap.disabled
+      ),
+      [classMap, theme, state, className, shadow, rounding, outline, disabled]
+    );
+    const selectClasses = useMemo(
+      () => combineClassNames(classMap.select, outline && classMap.outline),
+      [classMap, outline]
+    );
+    const iconClasses = useMemo(
+      () => combineClassNames(
+        classMap.icon,
+        classMap[theme],
+        disabled && classMap.disabled
+      ),
+      [classMap, theme, disabled]
+    );
+    const opts = asyncOptions ? internalOptions : options;
+    return /* @__PURE__ */ jsxs("div", { className: layoutClasses, "data-testid": `${testId}-layout`, children: [
+      (labelPosition === "top" || labelPosition === "left") && labelNode,
+      /* @__PURE__ */ jsxs("div", { className: wrapperClasses, "data-testid": testId, children: [
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            ref,
+            id: selectId,
+            name,
+            form,
+            autoComplete,
+            role,
+            tabIndex,
+            value: value ?? "",
+            onChange: handleChange,
+            className: selectClasses,
+            "aria-label": computedAriaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-description": ariaDescription,
+            "aria-describedby": computedDescribedBy,
+            "aria-disabled": disabled || void 0,
+            "aria-invalid": ariaInvalid ?? (state === "error" || void 0),
+            "aria-required": ariaRequired ?? (required || void 0),
+            "aria-busy": ariaBusy ?? (loading || void 0),
+            disabled,
+            required,
+            "data-testid": `${testId}-input`,
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", disabled: true, hidden: true, children: placeholder }),
+              opts.map((option) => /* @__PURE__ */ jsx(
+                "option",
+                {
+                  value: option.value,
+                  disabled: option.disabled,
+                  "data-testid": `${testId}-option-${option.value}`,
+                  children: option.label
+                },
+                option.value
+              ))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: iconClasses,
+            "aria-hidden": "true",
+            "data-testid": `${testId}-icon`,
+            children: /* @__PURE__ */ jsx(ChevronDownIcon, { "aria-hidden": "true", focusable: false })
+          }
+        ),
+        ariaDescription && /* @__PURE__ */ jsx(
+          "span",
+          {
+            id: internalDescriptionId,
+            className: "sr_only",
+            "data-testid": `${testId}-description`,
+            children: ariaDescription
+          }
+        ),
+        loading && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: classMap.loading,
+            "aria-live": ariaLive,
+            "data-testid": `${testId}-loading`,
+            children: "Loading options…"
+          }
+        )
+      ] }),
+      (labelPosition === "bottom" || labelPosition === "right") && labelNode
+    ] });
+  }
+);
+BaseSelect.displayName = "BaseSelect";
+const classes = {
+  wrapper: "select_wrapper",
+  select: "select",
+  outline: "select_outline",
+  layout: "select_layout",
+  label: "select_label",
+  labelTop: "select_label_top",
+  labelBottom: "select_label_bottom",
+  labelLeft: "select_label_left",
+  labelRight: "select_label_right",
+  primary: "select_primary",
+  secondary: "select_secondary",
+  tertiary: "select_tertiary",
+  quaternary: "select_quaternary",
+  success: "select_success",
+  error: "select_error",
+  warning: "select_warning",
+  clear: "select_clear",
+  icon: "select_icon",
+  disabled: "select_disabled",
+  shadowNone: "select_shadow-None",
+  shadowLight: "select_shadow-Light",
+  shadowMedium: "select_shadow-Medium",
+  shadowStrong: "select_shadow-Strong",
+  shadowIntense: "select_shadow-Intense",
+  roundNone: "select_round-None",
+  roundSmall: "select_round-Small",
+  roundMedium: "select_round-Medium",
+  roundLarge: "select_round-Large"
+};
+const Select = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(BaseSelect, { ...props, ref, classMap: classes });
+});
+Select.displayName = "Select";
+export {
+  Select as S
+};
+//# sourceMappingURL=Select-BXIz5BbU.js.map

package/dist/core/Select-BXIz5BbU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select-BXIz5BbU.js","sources":["../../src/components/Select/SelectBase.tsx","../../src/components/Select/core/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 { 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\nimport { BaseSelectProps } from \"./Select.types\";\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      disabled = false,\r\n      className = \"\",\r\n      classMap,\r\n      asyncOptions,\r\n      pollInterval = 0,\r\n      required,\r\n      name,\r\n      label,\r\n      labelPosition = \"top\",\r\n      id,\r\n      form,\r\n      autoComplete,\r\n      role,\r\n      tabIndex,\r\n      \"aria-label\": ariaLabel,\r\n      \"aria-labelledby\": ariaLabelledBy,\r\n      \"aria-description\": ariaDescription,\r\n      \"aria-describedby\": ariaDescribedBy,\r\n      \"aria-invalid\": ariaInvalid,\r\n      \"aria-required\": ariaRequired,\r\n      \"aria-busy\": ariaBusy,\r\n      \"aria-live\": ariaLive = \"polite\",\r\n      \"data-testid\": testId = \"select\",\r\n    },\r\n    ref,\r\n  ) => {\r\n    const generatedId = useId();\r\n    const selectId = id || `${generatedId}-select`;\r\n    const internalDescriptionId = ariaDescription\r\n      ? `${generatedId}-desc`\r\n      : undefined;\r\n\r\n    const [internalOptions, setInternalOptions] = useState(options);\r\n    const [loading, setLoading] = useState(false);\r\n\r\n    const hasLabel = Boolean(label);\r\n\r\n    const layoutClasses = useMemo(() => {\r\n      const posClass = hasLabel\r\n        ? classMap[`label${capitalize(labelPosition)}`]\r\n        : undefined;\r\n\r\n      return combineClassNames(classMap.layout, posClass);\r\n    }, [classMap, hasLabel, labelPosition]);\r\n\r\n    const labelClasses = useMemo(\r\n      () => combineClassNames(classMap.label, classMap.labelOverlay),\r\n      [classMap],\r\n    );\r\n\r\n    const computedDescribedBy = useMemo(() => {\r\n      const ids = [ariaDescribedBy, internalDescriptionId].filter(Boolean);\r\n      return ids.length > 0 ? ids.join(\" \") : undefined;\r\n    }, [ariaDescribedBy, internalDescriptionId]);\r\n\r\n    const computedAriaLabel = ariaLabelledBy\r\n      ? undefined\r\n      : ariaLabel || placeholder;\r\n\r\n    const labelNode = hasLabel ? (\r\n      <div className={labelClasses} data-testid={`${testId}-label`}>\r\n        {label}\r\n      </div>\r\n    ) : null;\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          setLoading(true);\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        } finally {\r\n          if (isMounted) setLoading(false);\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      () => combineClassNames(classMap.select, outline && classMap.outline),\r\n      [classMap, outline],\r\n    );\r\n\r\n    const iconClasses = useMemo(\r\n      () =>\r\n        combineClassNames(\r\n          classMap.icon,\r\n          classMap[theme],\r\n          disabled && classMap.disabled,\r\n        ),\r\n      [classMap, theme, disabled],\r\n    );\r\n\r\n    const opts = asyncOptions ? internalOptions : options;\r\n\r\n    return (\r\n      <div className={layoutClasses} data-testid={`${testId}-layout`}>\r\n        {(labelPosition === \"top\" || labelPosition === \"left\") && labelNode}\r\n\r\n        <div className={wrapperClasses} data-testid={testId}>\r\n          <select\r\n            ref={ref}\r\n            id={selectId}\r\n            name={name}\r\n            form={form}\r\n            autoComplete={autoComplete}\r\n            role={role}\r\n            tabIndex={tabIndex}\r\n            value={value ?? \"\"}\r\n            onChange={handleChange}\r\n            className={selectClasses}\r\n            aria-label={computedAriaLabel}\r\n            aria-labelledby={ariaLabelledBy}\r\n            aria-description={ariaDescription}\r\n            aria-describedby={computedDescribedBy}\r\n            aria-disabled={disabled || undefined}\r\n            aria-invalid={ariaInvalid ?? (state === \"error\" || undefined)}\r\n            aria-required={ariaRequired ?? (required || undefined)}\r\n            aria-busy={ariaBusy ?? (loading || undefined)}\r\n            disabled={disabled}\r\n            required={required}\r\n            data-testid={`${testId}-input`}\r\n          >\r\n            <option value=\"\" disabled hidden>\r\n              {placeholder}\r\n            </option>\r\n\r\n            {opts.map((option) => (\r\n              <option\r\n                key={option.value}\r\n                value={option.value}\r\n                disabled={option.disabled}\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={iconClasses}\r\n            aria-hidden=\"true\"\r\n            data-testid={`${testId}-icon`}\r\n          >\r\n            <ChevronDownIcon aria-hidden=\"true\" focusable={false} />\r\n          </div>\r\n\r\n          {ariaDescription && (\r\n            <span\r\n              id={internalDescriptionId}\r\n              className=\"sr_only\"\r\n              data-testid={`${testId}-description`}\r\n            >\r\n              {ariaDescription}\r\n            </span>\r\n          )}\r\n\r\n          {loading && (\r\n            <span\r\n              className={classMap.loading}\r\n              aria-live={ariaLive}\r\n              data-testid={`${testId}-loading`}\r\n            >\r\n              Loading options…\r\n            </span>\r\n          )}\r\n        </div>\r\n\r\n        {(labelPosition === \"bottom\" || labelPosition === \"right\") && labelNode}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nBaseSelect.displayName = \"BaseSelect\";\r\nexport default BaseSelect;\r\n","import { forwardRef } from \"react\";\r\nimport BaseSelect from \"../SelectBase\";\r\nimport \"./Select.scss\";\r\nimport { SelectProps } from \"../Select.types\";\r\n\r\nconst classes = {\r\n  wrapper: \"select_wrapper\",\r\n  select: \"select\",\r\n  outline: \"select_outline\",\r\n\r\n  layout: \"select_layout\",\r\n  label: \"select_label\",\r\n  labelTop: \"select_label_top\",\r\n  labelBottom: \"select_label_bottom\",\r\n  labelLeft: \"select_label_left\",\r\n  labelRight: \"select_label_right\",\r\n\r\n  primary: \"select_primary\",\r\n  secondary: \"select_secondary\",\r\n  tertiary: \"select_tertiary\",\r\n  quaternary: \"select_quaternary\",\r\n\r\n  success: \"select_success\",\r\n  error: \"select_error\",\r\n  warning: \"select_warning\",\r\n\r\n  clear: \"select_clear\",\r\n\r\n  icon: \"select_icon\",\r\n  disabled: \"select_disabled\",\r\n\r\n  shadowNone: \"select_shadow-None\",\r\n  shadowLight: \"select_shadow-Light\",\r\n  shadowMedium: \"select_shadow-Medium\",\r\n  shadowStrong: \"select_shadow-Strong\",\r\n  shadowIntense: \"select_shadow-Intense\",\r\n\r\n  roundNone: \"select_round-None\",\r\n  roundSmall: \"select_round-Small\",\r\n  roundMedium: \"select_round-Medium\",\r\n  roundLarge: \"select_round-Large\",\r\n};\r\n\r\nconst Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {\r\n  return <BaseSelect {...props} ref={ref} classMap={classes} />;\r\n});\r\n\r\nSelect.displayName = \"Select\";\r\nexport default Select;\r\n"],"names":[],"mappings":";;;;;;AAkBA,MAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE,QAAQ,gBAAA;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,WAAW,mBAAA;AAAA,IACX,SAAS,iBAAA;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,WAAW;AAAA,IACX,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,aAAa,WAAW;AAAA,IACxB,eAAe,SAAS;AAAA,EAAA,GAE1B,QACG;AACH,UAAM,cAAc,MAAA;AACpB,UAAM,WAAW,MAAM,GAAG,WAAW;AACrC,UAAM,wBAAwB,kBAC1B,GAAG,WAAW,UACd;AAEJ,UAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,OAAO;AAC9D,UAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,UAAM,WAAW,QAAQ,KAAK;AAE9B,UAAM,gBAAgB,QAAQ,MAAM;AAClC,YAAM,WAAW,WACb,SAAS,QAAQ,WAAW,aAAa,CAAC,EAAE,IAC5C;AAEJ,aAAO,kBAAkB,SAAS,QAAQ,QAAQ;AAAA,IACpD,GAAG,CAAC,UAAU,UAAU,aAAa,CAAC;AAEtC,UAAM,eAAe;AAAA,MACnB,MAAM,kBAAkB,SAAS,OAAO,SAAS,YAAY;AAAA,MAC7D,CAAC,QAAQ;AAAA,IAAA;AAGX,UAAM,sBAAsB,QAAQ,MAAM;AACxC,YAAM,MAAM,CAAC,iBAAiB,qBAAqB,EAAE,OAAO,OAAO;AACnE,aAAO,IAAI,SAAS,IAAI,IAAI,KAAK,GAAG,IAAI;AAAA,IAC1C,GAAG,CAAC,iBAAiB,qBAAqB,CAAC;AAE3C,UAAM,oBAAoB,iBACtB,SACA,aAAa;AAEjB,UAAM,YAAY,WAChB,oBAAC,OAAA,EAAI,WAAW,cAAc,eAAa,GAAG,MAAM,UACjD,UAAA,MAAA,CACH,IACE;AAEJ,cAAU,MAAM;AACd,UAAI,CAAC,aAAc;AAEnB,UAAI,YAAY;AAEhB,YAAM,OAAO,YAAY;AACvB,YAAI;AACF,qBAAW,IAAI;AACf,gBAAM,UAAU,MAAM,aAAa,EAAE;AACrC,cAAI,8BAA8B,OAAO;AAAA,QAC3C,SAAS,KAAK;AACZ,kBAAQ,MAAM,2BAA2B,GAAG;AAAA,QAC9C,UAAA;AACE,cAAI,sBAAsB,KAAK;AAAA,QACjC;AAAA,MACF;AAEA,WAAA;AAEA,UAAI,eAAe,GAAG;AACpB,cAAM,aAAa,YAAY,MAAM,YAAY;AACjD,eAAO,MAAM;AACX,wBAAc,UAAU;AACxB,sBAAY;AAAA,QACd;AAAA,MACF;AAEA,aAAO,MAAM;AACX,oBAAY;AAAA,MACd;AAAA,IACF,GAAG,CAAC,cAAc,YAAY,CAAC;AAE/B,UAAM,eAAe,CAAC,UAA0C;AAC9D,eAAS,MAAM,OAAO,KAAK;AAAA,IAC7B;AAEA,UAAM,iBAAiB;AAAA,MACrB,MACE;AAAA,QACE,SAAS;AAAA,QACT,SAAS,KAAK;AAAA,QACd,SAAS,KAAK;AAAA,QACd;AAAA,QACA,UAAU,SAAS,SAAS,WAAW,MAAM,CAAC,EAAE;AAAA,QAChD,YAAY,SAAS,QAAQ,WAAW,QAAQ,CAAC,EAAE;AAAA,QACnD,WAAW,SAAS;AAAA,QACpB,YAAY,SAAS;AAAA,MAAA;AAAA,MAEzB,CAAC,UAAU,OAAO,OAAO,WAAW,QAAQ,UAAU,SAAS,QAAQ;AAAA,IAAA;AAGzE,UAAM,gBAAgB;AAAA,MACpB,MAAM,kBAAkB,SAAS,QAAQ,WAAW,SAAS,OAAO;AAAA,MACpE,CAAC,UAAU,OAAO;AAAA,IAAA;AAGpB,UAAM,cAAc;AAAA,MAClB,MACE;AAAA,QACE,SAAS;AAAA,QACT,SAAS,KAAK;AAAA,QACd,YAAY,SAAS;AAAA,MAAA;AAAA,MAEzB,CAAC,UAAU,OAAO,QAAQ;AAAA,IAAA;AAG5B,UAAM,OAAO,eAAe,kBAAkB;AAE9C,gCACG,OAAA,EAAI,WAAW,eAAe,eAAa,GAAG,MAAM,WACjD,UAAA;AAAA,OAAA,kBAAkB,SAAS,kBAAkB,WAAW;AAAA,MAE1D,qBAAC,OAAA,EAAI,WAAW,gBAAgB,eAAa,QAC3C,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,IAAI;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,OAAO,SAAS;AAAA,YAChB,UAAU;AAAA,YACV,WAAW;AAAA,YACX,cAAY;AAAA,YACZ,mBAAiB;AAAA,YACjB,oBAAkB;AAAA,YAClB,oBAAkB;AAAA,YAClB,iBAAe,YAAY;AAAA,YAC3B,gBAAc,gBAAgB,UAAU,WAAW;AAAA,YACnD,iBAAe,iBAAiB,YAAY;AAAA,YAC5C,aAAW,aAAa,WAAW;AAAA,YACnC;AAAA,YACA;AAAA,YACA,eAAa,GAAG,MAAM;AAAA,YAEtB,UAAA;AAAA,cAAA,oBAAC,YAAO,OAAM,IAAG,UAAQ,MAAC,QAAM,MAC7B,UAAA,YAAA,CACH;AAAA,cAEC,KAAK,IAAI,CAAC,WACT;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,OAAO,OAAO;AAAA,kBACd,UAAU,OAAO;AAAA,kBACjB,eAAa,GAAG,MAAM,WAAW,OAAO,KAAK;AAAA,kBAE5C,UAAA,OAAO;AAAA,gBAAA;AAAA,gBALH,OAAO;AAAA,cAAA,CAOf;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGH;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,YACX,eAAY;AAAA,YACZ,eAAa,GAAG,MAAM;AAAA,YAEtB,UAAA,oBAAC,iBAAA,EAAgB,eAAY,QAAO,WAAW,MAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAGvD,mBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ,WAAU;AAAA,YACV,eAAa,GAAG,MAAM;AAAA,YAErB,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAIJ,WACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,SAAS;AAAA,YACpB,aAAW;AAAA,YACX,eAAa,GAAG,MAAM;AAAA,YACvB,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED,GAEJ;AAAA,OAEE,kBAAkB,YAAY,kBAAkB,YAAY;AAAA,IAAA,GAChE;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AC7OzB,MAAM,UAAU;AAAA,EACd,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EAET,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,WAAW;AAAA,EACX,YAAY;AAAA,EAEZ,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EAEZ,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EAET,OAAO;AAAA,EAEP,MAAM;AAAA,EACN,UAAU;AAAA,EAEV,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EAEf,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,YAAY;AACd;AAEA,MAAM,SAAS,WAA2C,CAAC,OAAO,QAAQ;AACxE,6BAAQ,YAAA,EAAY,GAAG,OAAO,KAAU,UAAU,SAAS;AAC7D,CAAC;AAED,OAAO,cAAc;"}

package/dist/core/Select-KiOrD0xY.cjs

@@ -0,0 +1,228 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const CheveronDownIcon = require("./CheveronDownIcon-B2codmaq.cjs");
+const classNames = require("./classNames-BcWMx052.cjs");
+const capitalize = require("./capitalize-DoV-nOmN.cjs");
+const borealStyleConfig = require("./boreal-style-config-C1UIwOFN.cjs");
+const BaseSelect = React.forwardRef(
+  ({
+    theme = borealStyleConfig.getDefaultTheme(),
+    state = "",
+    outline = false,
+    rounding = borealStyleConfig.getDefaultRounding(),
+    shadow = borealStyleConfig.getDefaultShadow(),
+    options,
+    value,
+    onChange,
+    placeholder = "Select an option",
+    disabled = false,
+    className = "",
+    classMap,
+    asyncOptions,
+    pollInterval = 0,
+    required,
+    name,
+    label,
+    labelPosition = "top",
+    id,
+    form,
+    autoComplete,
+    role,
+    tabIndex,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-description": ariaDescription,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid,
+    "aria-required": ariaRequired,
+    "aria-busy": ariaBusy,
+    "aria-live": ariaLive = "polite",
+    "data-testid": testId = "select"
+  }, ref) => {
+    const generatedId = React.useId();
+    const selectId = id || `${generatedId}-select`;
+    const internalDescriptionId = ariaDescription ? `${generatedId}-desc` : void 0;
+    const [internalOptions, setInternalOptions] = React.useState(options);
+    const [loading, setLoading] = React.useState(false);
+    const hasLabel = Boolean(label);
+    const layoutClasses = React.useMemo(() => {
+      const posClass = hasLabel ? classMap[`label${capitalize.capitalize(labelPosition)}`] : void 0;
+      return classNames.combineClassNames(classMap.layout, posClass);
+    }, [classMap, hasLabel, labelPosition]);
+    const labelClasses = React.useMemo(
+      () => classNames.combineClassNames(classMap.label, classMap.labelOverlay),
+      [classMap]
+    );
+    const computedDescribedBy = React.useMemo(() => {
+      const ids = [ariaDescribedBy, internalDescriptionId].filter(Boolean);
+      return ids.length > 0 ? ids.join(" ") : void 0;
+    }, [ariaDescribedBy, internalDescriptionId]);
+    const computedAriaLabel = ariaLabelledBy ? void 0 : ariaLabel || placeholder;
+    const labelNode = hasLabel ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: labelClasses, "data-testid": `${testId}-label`, children: label }) : null;
+    React.useEffect(() => {
+      if (!asyncOptions) return;
+      let isMounted = true;
+      const load = async () => {
+        try {
+          setLoading(true);
+          const fetched = await asyncOptions("");
+          if (isMounted) setInternalOptions(fetched);
+        } catch (err) {
+          console.error("Failed to load options:", err);
+        } finally {
+          if (isMounted) setLoading(false);
+        }
+      };
+      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)}`],
+        outline && classMap.outline,
+        disabled && classMap.disabled
+      ),
+      [classMap, theme, state, className, shadow, rounding, outline, disabled]
+    );
+    const selectClasses = React.useMemo(
+      () => classNames.combineClassNames(classMap.select, outline && classMap.outline),
+      [classMap, outline]
+    );
+    const iconClasses = React.useMemo(
+      () => classNames.combineClassNames(
+        classMap.icon,
+        classMap[theme],
+        disabled && classMap.disabled
+      ),
+      [classMap, theme, disabled]
+    );
+    const opts = asyncOptions ? internalOptions : options;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: layoutClasses, "data-testid": `${testId}-layout`, children: [
+      (labelPosition === "top" || labelPosition === "left") && labelNode,
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, "data-testid": testId, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "select",
+          {
+            ref,
+            id: selectId,
+            name,
+            form,
+            autoComplete,
+            role,
+            tabIndex,
+            value: value ?? "",
+            onChange: handleChange,
+            className: selectClasses,
+            "aria-label": computedAriaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-description": ariaDescription,
+            "aria-describedby": computedDescribedBy,
+            "aria-disabled": disabled || void 0,
+            "aria-invalid": ariaInvalid ?? (state === "error" || void 0),
+            "aria-required": ariaRequired ?? (required || void 0),
+            "aria-busy": ariaBusy ?? (loading || void 0),
+            disabled,
+            required,
+            "data-testid": `${testId}-input`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, hidden: true, children: placeholder }),
+              opts.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+                "option",
+                {
+                  value: option.value,
+                  disabled: option.disabled,
+                  "data-testid": `${testId}-option-${option.value}`,
+                  children: option.label
+                },
+                option.value
+              ))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: iconClasses,
+            "aria-hidden": "true",
+            "data-testid": `${testId}-icon`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(CheveronDownIcon.ChevronDownIcon, { "aria-hidden": "true", focusable: false })
+          }
+        ),
+        ariaDescription && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            id: internalDescriptionId,
+            className: "sr_only",
+            "data-testid": `${testId}-description`,
+            children: ariaDescription
+          }
+        ),
+        loading && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: classMap.loading,
+            "aria-live": ariaLive,
+            "data-testid": `${testId}-loading`,
+            children: "Loading options…"
+          }
+        )
+      ] }),
+      (labelPosition === "bottom" || labelPosition === "right") && labelNode
+    ] });
+  }
+);
+BaseSelect.displayName = "BaseSelect";
+const classes = {
+  wrapper: "select_wrapper",
+  select: "select",
+  outline: "select_outline",
+  layout: "select_layout",
+  label: "select_label",
+  labelTop: "select_label_top",
+  labelBottom: "select_label_bottom",
+  labelLeft: "select_label_left",
+  labelRight: "select_label_right",
+  primary: "select_primary",
+  secondary: "select_secondary",
+  tertiary: "select_tertiary",
+  quaternary: "select_quaternary",
+  success: "select_success",
+  error: "select_error",
+  warning: "select_warning",
+  clear: "select_clear",
+  icon: "select_icon",
+  disabled: "select_disabled",
+  shadowNone: "select_shadow-None",
+  shadowLight: "select_shadow-Light",
+  shadowMedium: "select_shadow-Medium",
+  shadowStrong: "select_shadow-Strong",
+  shadowIntense: "select_shadow-Intense",
+  roundNone: "select_round-None",
+  roundSmall: "select_round-Small",
+  roundMedium: "select_round-Medium",
+  roundLarge: "select_round-Large"
+};
+const Select = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(BaseSelect, { ...props, ref, classMap: classes });
+});
+Select.displayName = "Select";
+exports.Select = Select;
+//# sourceMappingURL=Select-KiOrD0xY.cjs.map