boreal-ui 0.0.72 → 0.0.74

package/dist/core/Checkbox-JWFInEW_.cjs

@@ -0,0 +1,192 @@
+"use strict";
+const jsxRuntime = 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-C1UIwOFN.cjs");
+const CheckboxBase = React.forwardRef(
+  ({
+    checked,
+    onChange,
+    indeterminate = false,
+    theme = borealStyleConfig.getDefaultTheme(),
+    rounding = borealStyleConfig.getDefaultRounding(),
+    size = borealStyleConfig.getDefaultSize(),
+    shadow = borealStyleConfig.getDefaultShadow(),
+    state = "",
+    disabled = false,
+    required = false,
+    invalid = false,
+    label = "",
+    description,
+    errorMessage,
+    labelPosition = "right",
+    className = "",
+    id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-errormessage": ariaErrorMessage,
+    "data-testid": testId = "checkbox",
+    classMap,
+    ...props
+  }, ref) => {
+    const internalId = React.useId();
+    const checkboxId = id || internalId;
+    const labelId = label ? `${checkboxId}-label` : void 0;
+    const descriptionId = description ? `${checkboxId}-description` : void 0;
+    const errorId = errorMessage ? `${checkboxId}-error` : void 0;
+    const inputRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => inputRef.current);
+    React.useEffect(() => {
+      if (inputRef.current) {
+        inputRef.current.indeterminate = indeterminate;
+      }
+    }, [indeterminate]);
+    const combinedClassName = React.useMemo(
+      () => classNames.combineClassNames(
+        classMap.checkbox,
+        classMap[theme],
+        classMap[state],
+        classMap[labelPosition],
+        classMap[size],
+        shadow && classMap[`shadow${capitalize.capitalize(shadow)}`],
+        rounding && classMap[`round${capitalize.capitalize(rounding)}`],
+        disabled && classMap.disabled,
+        invalid && classMap.invalid,
+        className
+      ),
+      [
+        classMap,
+        theme,
+        state,
+        labelPosition,
+        size,
+        shadow,
+        rounding,
+        disabled,
+        invalid,
+        className
+      ]
+    );
+    const resolvedAriaLabelledBy = ariaLabelledBy ?? (!ariaLabel ? labelId : void 0);
+    const resolvedAriaDescribedBy = [ariaDescribedBy, descriptionId, errorId].filter(Boolean).join(" ") || void 0;
+    const resolvedAriaErrorMessage = ariaErrorMessage ?? errorId;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: combinedClassName,
+        "data-testid": testId ? `${testId}-wrapper` : void 0,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: checkboxId, className: classMap.labelWrapper, children: [
+            label && labelPosition === "left" && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: classMap.label,
+                id: labelId,
+                "data-testid": testId ? `${testId}-label` : void 0,
+                children: label
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                id: checkboxId,
+                ref: inputRef,
+                type: "checkbox",
+                className: classMap.input,
+                checked,
+                onChange: (e) => onChange(e.target.checked),
+                disabled,
+                required,
+                "aria-label": ariaLabel,
+                "aria-labelledby": resolvedAriaLabelledBy,
+                "aria-describedby": resolvedAriaDescribedBy,
+                "aria-invalid": invalid || state === "error" ? true : void 0,
+                "aria-errormessage": invalid || state === "error" ? resolvedAriaErrorMessage : void 0,
+                "aria-checked": indeterminate ? "mixed" : checked,
+                ...props
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: classNames.combineClassNames(
+                  classMap.box,
+                  indeterminate && classMap.indeterminate
+                ),
+                "aria-hidden": "true",
+                "data-testid": testId ? `${testId}-box` : void 0
+              }
+            ),
+            label && labelPosition === "right" && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: classMap.label,
+                id: labelId,
+                "data-testid": testId ? `${testId}-label` : void 0,
+                children: label
+              }
+            )
+          ] }),
+          description && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: descriptionId,
+              className: classMap.description,
+              "data-testid": testId ? `${testId}-description` : void 0,
+              children: description
+            }
+          ),
+          errorMessage && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: errorId,
+              className: classMap.errorMessage,
+              "data-testid": testId ? `${testId}-error` : void 0,
+              children: errorMessage
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+CheckboxBase.displayName = "CheckboxBase";
+const classes = {
+  checkbox: "checkbox",
+  primary: "checkbox_primary",
+  secondary: "checkbox_secondary",
+  tertiary: "checkbox_tertiary",
+  quaternary: "checkbox_quaternary",
+  success: "checkbox_success",
+  error: "checkbox_error",
+  warning: "checkbox_warning",
+  clear: "checkbox_clear",
+  disabled: "checkbox_disabled",
+  indeterminate: "checkbox_indeterminate",
+  left: "checkbox_left",
+  right: "checkbox_right",
+  xs: "checkbox_xs",
+  small: "checkbox_small",
+  medium: "checkbox_medium",
+  large: "checkbox_large",
+  xl: "checkbox_xl",
+  shadowNone: "checkbox_shadow-None",
+  shadowLight: "checkbox_shadow-Light",
+  shadowMedium: "checkbox_shadow-Medium",
+  shadowStrong: "checkbox_shadow-Strong",
+  shadowIntense: "checkbox_shadow-Intense",
+  roundNone: "checkbox_round-None",
+  roundSmall: "checkbox_round-Small",
+  roundMedium: "checkbox_round-Medium",
+  roundLarge: "checkbox_round-Large",
+  labelWrapper: "checkbox_label-wrapper",
+  label: "checkbox_label",
+  input: "checkbox_input",
+  box: "checkbox_box"
+};
+const Checkbox = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(CheckboxBase, { ...props, classMap: classes, ref }));
+Checkbox.displayName = "Checkbox";
+exports.Checkbox = Checkbox;
+//# sourceMappingURL=Checkbox-JWFInEW_.cjs.map

package/dist/core/Checkbox-JWFInEW_.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox-JWFInEW_.cjs","sources":["../../src/components/Checkbox/CheckboxBase.tsx","../../src/components/Checkbox/core/Checkbox.tsx"],"sourcesContent":["import {\r\n  forwardRef,\r\n  useId,\r\n  useRef,\r\n  useEffect,\r\n  useImperativeHandle,\r\n  useMemo,\r\n} from \"react\";\r\nimport type { CheckboxBaseProps } from \"./Checkbox.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultSize,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst CheckboxBase = forwardRef<HTMLInputElement, CheckboxBaseProps>(\r\n  (\r\n    {\r\n      checked,\r\n      onChange,\r\n      indeterminate = false,\r\n      theme = getDefaultTheme(),\r\n      rounding = getDefaultRounding(),\r\n      size = getDefaultSize(),\r\n      shadow = getDefaultShadow(),\r\n      state = \"\",\r\n      disabled = false,\r\n      required = false,\r\n      invalid = false,\r\n      label = \"\",\r\n      description,\r\n      errorMessage,\r\n      labelPosition = \"right\",\r\n      className = \"\",\r\n      id,\r\n      \"aria-label\": ariaLabel,\r\n      \"aria-labelledby\": ariaLabelledBy,\r\n      \"aria-describedby\": ariaDescribedBy,\r\n      \"aria-errormessage\": ariaErrorMessage,\r\n      \"data-testid\": testId = \"checkbox\",\r\n      classMap,\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => {\r\n    const internalId = useId();\r\n    const checkboxId = id || internalId;\r\n\r\n    const labelId = label ? `${checkboxId}-label` : undefined;\r\n    const descriptionId = description ? `${checkboxId}-description` : undefined;\r\n    const errorId = errorMessage ? `${checkboxId}-error` : undefined;\r\n\r\n    const inputRef = useRef<HTMLInputElement>(null);\r\n    useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\r\n\r\n    useEffect(() => {\r\n      if (inputRef.current) {\r\n        inputRef.current.indeterminate = indeterminate;\r\n      }\r\n    }, [indeterminate]);\r\n\r\n    const combinedClassName = useMemo(\r\n      () =>\r\n        combineClassNames(\r\n          classMap.checkbox,\r\n          classMap[theme],\r\n          classMap[state],\r\n          classMap[labelPosition],\r\n          classMap[size],\r\n          shadow && classMap[`shadow${capitalize(shadow)}`],\r\n          rounding && classMap[`round${capitalize(rounding)}`],\r\n          disabled && classMap.disabled,\r\n          invalid && classMap.invalid,\r\n          className,\r\n        ),\r\n      [\r\n        classMap,\r\n        theme,\r\n        state,\r\n        labelPosition,\r\n        size,\r\n        shadow,\r\n        rounding,\r\n        disabled,\r\n        invalid,\r\n        className,\r\n      ],\r\n    );\r\n\r\n    const resolvedAriaLabelledBy =\r\n      ariaLabelledBy ?? (!ariaLabel ? labelId : undefined);\r\n\r\n    const resolvedAriaDescribedBy =\r\n      [ariaDescribedBy, descriptionId, errorId].filter(Boolean).join(\" \") ||\r\n      undefined;\r\n\r\n    const resolvedAriaErrorMessage = ariaErrorMessage ?? errorId;\r\n\r\n    return (\r\n      <div\r\n        className={combinedClassName}\r\n        data-testid={testId ? `${testId}-wrapper` : undefined}\r\n      >\r\n        <label htmlFor={checkboxId} className={classMap.labelWrapper}>\r\n          {label && labelPosition === \"left\" && (\r\n            <span\r\n              className={classMap.label}\r\n              id={labelId}\r\n              data-testid={testId ? `${testId}-label` : undefined}\r\n            >\r\n              {label}\r\n            </span>\r\n          )}\r\n\r\n          <input\r\n            id={checkboxId}\r\n            ref={inputRef}\r\n            type=\"checkbox\"\r\n            className={classMap.input}\r\n            checked={checked}\r\n            onChange={(e) => onChange(e.target.checked)}\r\n            disabled={disabled}\r\n            required={required}\r\n            aria-label={ariaLabel}\r\n            aria-labelledby={resolvedAriaLabelledBy}\r\n            aria-describedby={resolvedAriaDescribedBy}\r\n            aria-invalid={invalid || state === \"error\" ? true : undefined}\r\n            aria-errormessage={\r\n              invalid || state === \"error\"\r\n                ? resolvedAriaErrorMessage\r\n                : undefined\r\n            }\r\n            aria-checked={indeterminate ? \"mixed\" : checked}\r\n            {...props}\r\n          />\r\n\r\n          <span\r\n            className={combineClassNames(\r\n              classMap.box,\r\n              indeterminate && classMap.indeterminate,\r\n            )}\r\n            aria-hidden=\"true\"\r\n            data-testid={testId ? `${testId}-box` : undefined}\r\n          />\r\n\r\n          {label && labelPosition === \"right\" && (\r\n            <span\r\n              className={classMap.label}\r\n              id={labelId}\r\n              data-testid={testId ? `${testId}-label` : undefined}\r\n            >\r\n              {label}\r\n            </span>\r\n          )}\r\n        </label>\r\n\r\n        {description && (\r\n          <div\r\n            id={descriptionId}\r\n            className={classMap.description}\r\n            data-testid={testId ? `${testId}-description` : undefined}\r\n          >\r\n            {description}\r\n          </div>\r\n        )}\r\n\r\n        {errorMessage && (\r\n          <div\r\n            id={errorId}\r\n            className={classMap.errorMessage}\r\n            data-testid={testId ? `${testId}-error` : undefined}\r\n          >\r\n            {errorMessage}\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nCheckboxBase.displayName = \"CheckboxBase\";\r\nexport default CheckboxBase;\r\n","import { forwardRef } from \"react\";\r\nimport CheckboxBase from \"../CheckboxBase\";\r\nimport \"./CheckBox.scss\";\r\nimport { CheckBoxProps } from \"../Checkbox.types\";\r\n\r\nconst classes = {\r\n  checkbox: \"checkbox\",\r\n\r\n  primary: \"checkbox_primary\",\r\n  secondary: \"checkbox_secondary\",\r\n  tertiary: \"checkbox_tertiary\",\r\n  quaternary: \"checkbox_quaternary\",\r\n\r\n  success: \"checkbox_success\",\r\n  error: \"checkbox_error\",\r\n  warning: \"checkbox_warning\",\r\n\r\n  clear: \"checkbox_clear\",\r\n\r\n  disabled: \"checkbox_disabled\",\r\n  indeterminate: \"checkbox_indeterminate\",\r\n\r\n  left: \"checkbox_left\",\r\n  right: \"checkbox_right\",\r\n\r\n  xs: \"checkbox_xs\",\r\n  small: \"checkbox_small\",\r\n  medium: \"checkbox_medium\",\r\n  large: \"checkbox_large\",\r\n  xl: \"checkbox_xl\",\r\n\r\n  shadowNone: \"checkbox_shadow-None\",\r\n  shadowLight: \"checkbox_shadow-Light\",\r\n  shadowMedium: \"checkbox_shadow-Medium\",\r\n  shadowStrong: \"checkbox_shadow-Strong\",\r\n  shadowIntense: \"checkbox_shadow-Intense\",\r\n\r\n  roundNone: \"checkbox_round-None\",\r\n  roundSmall: \"checkbox_round-Small\",\r\n  roundMedium: \"checkbox_round-Medium\",\r\n  roundLarge: \"checkbox_round-Large\",\r\n\r\n  labelWrapper: \"checkbox_label-wrapper\",\r\n  label: \"checkbox_label\",\r\n  input: \"checkbox_input\",\r\n  box: \"checkbox_box\",\r\n};\r\n\r\nconst Checkbox = forwardRef<HTMLInputElement, CheckBoxProps>((props, ref) => (\r\n  <CheckboxBase {...props} classMap={classes} ref={ref} />\r\n));\r\nCheckbox.displayName = \"Checkbox\";\r\nexport default Checkbox;\r\n"],"names":["forwardRef","getDefaultTheme","getDefaultRounding","getDefaultSize","getDefaultShadow","useId","useRef","useImperativeHandle","useEffect","useMemo","combineClassNames","capitalize","jsxs","jsx"],"mappings":"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"}

package/dist/core/Chip-DV-l08jr.cjs

@@ -0,0 +1,194 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const ReactDOM = require("react-dom");
+const classNames = require("./classNames-BcWMx052.cjs");
+const capitalize = require("./capitalize-DoV-nOmN.cjs");
+const borealStyleConfig = require("./boreal-style-config-C1UIwOFN.cjs");
+const CloseIcon = require("./CloseIcon-DSnN6ggf.cjs");
+const IconButton = require("./IconButton-C_ktew-6.cjs");
+const ChipBase = ({
+  id,
+  message,
+  visible,
+  onClose,
+  icon: Icon,
+  iconDecorative = true,
+  iconAriaLabel,
+  size = borealStyleConfig.getDefaultSize(),
+  theme = borealStyleConfig.getDefaultTheme(),
+  rounding = borealStyleConfig.getDefaultRounding(),
+  shadow = borealStyleConfig.getDefaultShadow(),
+  state = "",
+  position = "topCenter",
+  usePortal = true,
+  className = "",
+  autoClose = true,
+  duration = 3e3,
+  closeIcon: CloseIcon2,
+  IconButtonComponent,
+  classMap,
+  stackIndex,
+  role = "alert",
+  closeButtonAriaLabel = "Close notification",
+  messageId,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-live": ariaLive,
+  "aria-atomic": ariaAtomic,
+  "aria-relevant": ariaRelevant,
+  "aria-hidden": ariaHidden,
+  "data-testid": testId = "chip",
+  ...rest
+}) => {
+  const [closing, setClosing] = React.useState(false);
+  const resolvedMessageId = React.useMemo(
+    () => messageId ?? `${id || testId}-message`,
+    [messageId, id, testId]
+  );
+  const handleClose = React.useCallback(() => {
+    setClosing(true);
+    setTimeout(() => onClose == null ? void 0 : onClose(), 300);
+  }, [onClose]);
+  React.useEffect(() => {
+    if (autoClose && visible) {
+      const timer = setTimeout(() => handleClose(), duration);
+      return () => clearTimeout(timer);
+    }
+  }, [autoClose, duration, visible, handleClose]);
+  React.useEffect(() => {
+    if (visible) setClosing(false);
+  }, [visible]);
+  React.useEffect(() => {
+    if (!visible) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") handleClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [visible, handleClose]);
+  if (!visible && !closing) return null;
+  const chipClassName = classNames.combineClassNames(
+    classMap.chip,
+    classMap[theme],
+    classMap[state],
+    classMap[size],
+    classMap[position],
+    shadow && classMap[`shadow${capitalize.capitalize(shadow)}`],
+    rounding && classMap[`round${capitalize.capitalize(rounding)}`],
+    closing && classMap.fadeout,
+    usePortal && classMap.fixed,
+    className
+  );
+  const portalEl = typeof window !== "undefined" ? document.getElementById("widget-portal") : null;
+  const chipElement = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      id,
+      className: chipClassName,
+      role,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      "aria-live": ariaLive ?? (role === "alert" ? "assertive" : "polite"),
+      "aria-atomic": ariaAtomic ?? true,
+      "aria-relevant": ariaRelevant,
+      "aria-hidden": ariaHidden,
+      "data-testid": testId,
+      style: stackIndex != null ? { zIndex: stackIndex } : void 0,
+      ...rest,
+      children: [
+        Icon && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: classMap.icon,
+            "aria-hidden": iconDecorative ? "true" : void 0,
+            "aria-label": !iconDecorative ? iconAriaLabel : void 0,
+            "data-testid": `${testId}-icon`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: classMap.inner_icon })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: classMap.message,
+            id: resolvedMessageId,
+            "data-testid": `${testId}-message`,
+            children: message
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconButtonComponent,
+          {
+            icon: CloseIcon2,
+            size,
+            theme: "clear",
+            "aria-label": closeButtonAriaLabel,
+            "aria-controls": resolvedMessageId,
+            className: classMap.close,
+            onClick: handleClose,
+            shadow: "none",
+            "data-testid": `${testId}-chip-close`
+          }
+        )
+      ]
+    },
+    id
+  );
+  if (usePortal && portalEl) {
+    return ReactDOM.createPortal(chipElement, portalEl);
+  }
+  return chipElement;
+};
+ChipBase.displayName = "ChipBase";
+const classes = {
+  chip: "chip",
+  icon: "chip_icon",
+  inner_icon: "chip_icon_inner",
+  message: "chip_message",
+  close: "chip_close",
+  relative: "chip_relative",
+  fixed: "chip_fixed",
+  fadeout: "chip_fadeout",
+  topCenter: "chip_top_center",
+  bottomCenter: "chip_bottom_center",
+  topLeft: "chip_top_left",
+  topRight: "chip_top_right",
+  bottomLeft: "chip_bottom_left",
+  bottomRight: "chip_bottom_right",
+  primary: "chip_primary",
+  secondary: "chip_secondary",
+  tertiary: "chip_tertiary",
+  quaternary: "chip_quaternary",
+  success: "chip_success",
+  error: "chip_error",
+  warning: "chip_warning",
+  clear: "chip_clear",
+  xs: "chip_xs",
+  small: "chip_small",
+  medium: "chip_medium",
+  large: "chip_large",
+  xl: "chip_xl",
+  shadowNone: "chip_shadow-None",
+  shadowLight: "chip_shadow-Light",
+  shadowMedium: "chip_shadow-Medium",
+  shadowStrong: "chip_shadow-Strong",
+  shadowIntense: "chip_shadow-Intense",
+  roundNone: "chip_round-None",
+  roundSmall: "chip_round-Small",
+  roundMedium: "chip_round-Medium",
+  roundLarge: "chip_round-Large"
+};
+const Chip = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  ChipBase,
+  {
+    ...props,
+    classMap: classes,
+    IconButtonComponent: IconButton.IconButton,
+    closeIcon: CloseIcon.CloseIcon
+  }
+);
+Chip.displayName = "Chip";
+exports.Chip = Chip;
+//# sourceMappingURL=Chip-DV-l08jr.cjs.map

package/dist/core/Chip-DV-l08jr.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip-DV-l08jr.cjs","sources":["../../src/components/Chip/ChipBase.tsx","../../src/components/Chip/core/Chip.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\r\nimport { createPortal } from \"react-dom\";\r\nimport { ChipBaseProps } from \"./Chip.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultSize,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst ChipBase: React.FC<ChipBaseProps> = ({\r\n  id,\r\n  message,\r\n  visible,\r\n  onClose,\r\n  icon: Icon,\r\n  iconDecorative = true,\r\n  iconAriaLabel,\r\n  size = getDefaultSize(),\r\n  theme = getDefaultTheme(),\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  state = \"\",\r\n  position = \"topCenter\",\r\n  usePortal = true,\r\n  className = \"\",\r\n  autoClose = true,\r\n  duration = 3000,\r\n  closeIcon: CloseIcon,\r\n  IconButtonComponent,\r\n  classMap,\r\n  stackIndex,\r\n  role = \"alert\",\r\n  closeButtonAriaLabel = \"Close notification\",\r\n  messageId,\r\n  \"aria-label\": ariaLabel,\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  \"aria-live\": ariaLive,\r\n  \"aria-atomic\": ariaAtomic,\r\n  \"aria-relevant\": ariaRelevant,\r\n  \"aria-hidden\": ariaHidden,\r\n  \"data-testid\": testId = \"chip\",\r\n  ...rest\r\n}) => {\r\n  const [closing, setClosing] = useState(false);\r\n\r\n  const resolvedMessageId = useMemo(\r\n    () => messageId ?? `${id || testId}-message`,\r\n    [messageId, id, testId],\r\n  );\r\n\r\n  const handleClose = useCallback(() => {\r\n    setClosing(true);\r\n    setTimeout(() => onClose?.(), 300);\r\n  }, [onClose]);\r\n\r\n  useEffect(() => {\r\n    if (autoClose && visible) {\r\n      const timer = setTimeout(() => handleClose(), duration);\r\n      return () => clearTimeout(timer);\r\n    }\r\n  }, [autoClose, duration, visible, handleClose]);\r\n\r\n  useEffect(() => {\r\n    if (visible) setClosing(false);\r\n  }, [visible]);\r\n\r\n  useEffect(() => {\r\n    if (!visible) return;\r\n\r\n    const onKey = (e: globalThis.KeyboardEvent) => {\r\n      if (e.key === \"Escape\") handleClose();\r\n    };\r\n\r\n    window.addEventListener(\"keydown\", onKey);\r\n    return () => window.removeEventListener(\"keydown\", onKey);\r\n  }, [visible, handleClose]);\r\n\r\n  if (!visible && !closing) return null;\r\n\r\n  const chipClassName = combineClassNames(\r\n    classMap.chip,\r\n    classMap[theme],\r\n    classMap[state],\r\n    classMap[size],\r\n    classMap[position],\r\n    shadow && classMap[`shadow${capitalize(shadow)}`],\r\n    rounding && classMap[`round${capitalize(rounding)}`],\r\n    closing && classMap.fadeout,\r\n    usePortal && classMap.fixed,\r\n    className,\r\n  );\r\n\r\n  const portalEl =\r\n    typeof window !== \"undefined\"\r\n      ? document.getElementById(\"widget-portal\")\r\n      : null;\r\n\r\n  const chipElement = (\r\n    <div\r\n      key={id}\r\n      id={id}\r\n      className={chipClassName}\r\n      role={role}\r\n      aria-label={ariaLabel}\r\n      aria-labelledby={ariaLabelledBy}\r\n      aria-describedby={ariaDescribedBy}\r\n      aria-live={ariaLive ?? (role === \"alert\" ? \"assertive\" : \"polite\")}\r\n      aria-atomic={ariaAtomic ?? true}\r\n      aria-relevant={ariaRelevant}\r\n      aria-hidden={ariaHidden}\r\n      data-testid={testId}\r\n      style={stackIndex != null ? { zIndex: stackIndex } : undefined}\r\n      {...rest}\r\n    >\r\n      {Icon && (\r\n        <span\r\n          className={classMap.icon}\r\n          aria-hidden={iconDecorative ? \"true\" : undefined}\r\n          aria-label={!iconDecorative ? iconAriaLabel : undefined}\r\n          data-testid={`${testId}-icon`}\r\n        >\r\n          <Icon className={classMap.inner_icon} />\r\n        </span>\r\n      )}\r\n\r\n      <span\r\n        className={classMap.message}\r\n        id={resolvedMessageId}\r\n        data-testid={`${testId}-message`}\r\n      >\r\n        {message}\r\n      </span>\r\n\r\n      <IconButtonComponent\r\n        icon={CloseIcon}\r\n        size={size}\r\n        theme=\"clear\"\r\n        aria-label={closeButtonAriaLabel}\r\n        aria-controls={resolvedMessageId}\r\n        className={classMap.close}\r\n        onClick={handleClose}\r\n        shadow=\"none\"\r\n        data-testid={`${testId}-chip-close`}\r\n      />\r\n    </div>\r\n  );\r\n\r\n  if (usePortal && portalEl) {\r\n    return createPortal(chipElement, portalEl);\r\n  }\r\n\r\n  return chipElement;\r\n};\r\n\r\nChipBase.displayName = \"ChipBase\";\r\nexport default ChipBase;\r\n","import React from \"react\";\r\nimport ChipBase from \"../ChipBase\";\r\nimport { CloseIcon } from \"@/Icons\";\r\nimport \"./Chip.scss\";\r\nimport IconButton from \"../../IconButton/core/IconButton\";\r\nimport { ChipProps } from \"../Chip.types\";\r\n\r\nconst classes = {\r\n  chip: \"chip\",\r\n  icon: \"chip_icon\",\r\n  inner_icon: \"chip_icon_inner\",\r\n  message: \"chip_message\",\r\n  close: \"chip_close\",\r\n  relative: \"chip_relative\",\r\n  fixed: \"chip_fixed\",\r\n  fadeout: \"chip_fadeout\",\r\n\r\n  topCenter: \"chip_top_center\",\r\n  bottomCenter: \"chip_bottom_center\",\r\n  topLeft: \"chip_top_left\",\r\n  topRight: \"chip_top_right\",\r\n  bottomLeft: \"chip_bottom_left\",\r\n  bottomRight: \"chip_bottom_right\",\r\n\r\n  primary: \"chip_primary\",\r\n  secondary: \"chip_secondary\",\r\n  tertiary: \"chip_tertiary\",\r\n  quaternary: \"chip_quaternary\",\r\n\r\n  success: \"chip_success\",\r\n  error: \"chip_error\",\r\n  warning: \"chip_warning\",\r\n\r\n  clear: \"chip_clear\",\r\n\r\n  xs: \"chip_xs\",\r\n  small: \"chip_small\",\r\n  medium: \"chip_medium\",\r\n  large: \"chip_large\",\r\n  xl: \"chip_xl\",\r\n\r\n  shadowNone: \"chip_shadow-None\",\r\n  shadowLight: \"chip_shadow-Light\",\r\n  shadowMedium: \"chip_shadow-Medium\",\r\n  shadowStrong: \"chip_shadow-Strong\",\r\n  shadowIntense: \"chip_shadow-Intense\",\r\n\r\n  roundNone: \"chip_round-None\",\r\n  roundSmall: \"chip_round-Small\",\r\n  roundMedium: \"chip_round-Medium\",\r\n  roundLarge: \"chip_round-Large\",\r\n};\r\n\r\nconst Chip: React.FC<ChipProps> = (props) => (\r\n  <ChipBase\r\n    {...props}\r\n    classMap={classes}\r\n    IconButtonComponent={IconButton}\r\n    closeIcon={CloseIcon}\r\n  />\r\n);\r\nChip.displayName = \"Chip\";\r\nexport default Chip;\r\n"],"names":["getDefaultSize","getDefaultTheme","getDefaultRounding","getDefaultShadow","CloseIcon","useState","useMemo","useCallback","useEffect","combineClassNames","capitalize","jsxs","jsx","createPortal","IconButton"],"mappings":"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"}

package/dist/core/Chip-DoRSxZKk.js

@@ -0,0 +1,195 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useMemo, useCallback, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
+import { c as capitalize } from "./capitalize-C0TSQSPh.js";
+import { c as getDefaultSize, d as getDefaultTheme, a as getDefaultRounding, b as getDefaultShadow } from "./boreal-style-config-DsaRlxmw.js";
+import { C as CloseIcon } from "./CloseIcon-C3eQm4EK.js";
+import { I as IconButton } from "./IconButton-By8zuXrs.js";
+const ChipBase = ({
+  id,
+  message,
+  visible,
+  onClose,
+  icon: Icon,
+  iconDecorative = true,
+  iconAriaLabel,
+  size = getDefaultSize(),
+  theme = getDefaultTheme(),
+  rounding = getDefaultRounding(),
+  shadow = getDefaultShadow(),
+  state = "",
+  position = "topCenter",
+  usePortal = true,
+  className = "",
+  autoClose = true,
+  duration = 3e3,
+  closeIcon: CloseIcon2,
+  IconButtonComponent,
+  classMap,
+  stackIndex,
+  role = "alert",
+  closeButtonAriaLabel = "Close notification",
+  messageId,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-live": ariaLive,
+  "aria-atomic": ariaAtomic,
+  "aria-relevant": ariaRelevant,
+  "aria-hidden": ariaHidden,
+  "data-testid": testId = "chip",
+  ...rest
+}) => {
+  const [closing, setClosing] = useState(false);
+  const resolvedMessageId = useMemo(
+    () => messageId ?? `${id || testId}-message`,
+    [messageId, id, testId]
+  );
+  const handleClose = useCallback(() => {
+    setClosing(true);
+    setTimeout(() => onClose == null ? void 0 : onClose(), 300);
+  }, [onClose]);
+  useEffect(() => {
+    if (autoClose && visible) {
+      const timer = setTimeout(() => handleClose(), duration);
+      return () => clearTimeout(timer);
+    }
+  }, [autoClose, duration, visible, handleClose]);
+  useEffect(() => {
+    if (visible) setClosing(false);
+  }, [visible]);
+  useEffect(() => {
+    if (!visible) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") handleClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [visible, handleClose]);
+  if (!visible && !closing) return null;
+  const chipClassName = combineClassNames(
+    classMap.chip,
+    classMap[theme],
+    classMap[state],
+    classMap[size],
+    classMap[position],
+    shadow && classMap[`shadow${capitalize(shadow)}`],
+    rounding && classMap[`round${capitalize(rounding)}`],
+    closing && classMap.fadeout,
+    usePortal && classMap.fixed,
+    className
+  );
+  const portalEl = typeof window !== "undefined" ? document.getElementById("widget-portal") : null;
+  const chipElement = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id,
+      className: chipClassName,
+      role,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      "aria-live": ariaLive ?? (role === "alert" ? "assertive" : "polite"),
+      "aria-atomic": ariaAtomic ?? true,
+      "aria-relevant": ariaRelevant,
+      "aria-hidden": ariaHidden,
+      "data-testid": testId,
+      style: stackIndex != null ? { zIndex: stackIndex } : void 0,
+      ...rest,
+      children: [
+        Icon && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: classMap.icon,
+            "aria-hidden": iconDecorative ? "true" : void 0,
+            "aria-label": !iconDecorative ? iconAriaLabel : void 0,
+            "data-testid": `${testId}-icon`,
+            children: /* @__PURE__ */ jsx(Icon, { className: classMap.inner_icon })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: classMap.message,
+            id: resolvedMessageId,
+            "data-testid": `${testId}-message`,
+            children: message
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButtonComponent,
+          {
+            icon: CloseIcon2,
+            size,
+            theme: "clear",
+            "aria-label": closeButtonAriaLabel,
+            "aria-controls": resolvedMessageId,
+            className: classMap.close,
+            onClick: handleClose,
+            shadow: "none",
+            "data-testid": `${testId}-chip-close`
+          }
+        )
+      ]
+    },
+    id
+  );
+  if (usePortal && portalEl) {
+    return createPortal(chipElement, portalEl);
+  }
+  return chipElement;
+};
+ChipBase.displayName = "ChipBase";
+const classes = {
+  chip: "chip",
+  icon: "chip_icon",
+  inner_icon: "chip_icon_inner",
+  message: "chip_message",
+  close: "chip_close",
+  relative: "chip_relative",
+  fixed: "chip_fixed",
+  fadeout: "chip_fadeout",
+  topCenter: "chip_top_center",
+  bottomCenter: "chip_bottom_center",
+  topLeft: "chip_top_left",
+  topRight: "chip_top_right",
+  bottomLeft: "chip_bottom_left",
+  bottomRight: "chip_bottom_right",
+  primary: "chip_primary",
+  secondary: "chip_secondary",
+  tertiary: "chip_tertiary",
+  quaternary: "chip_quaternary",
+  success: "chip_success",
+  error: "chip_error",
+  warning: "chip_warning",
+  clear: "chip_clear",
+  xs: "chip_xs",
+  small: "chip_small",
+  medium: "chip_medium",
+  large: "chip_large",
+  xl: "chip_xl",
+  shadowNone: "chip_shadow-None",
+  shadowLight: "chip_shadow-Light",
+  shadowMedium: "chip_shadow-Medium",
+  shadowStrong: "chip_shadow-Strong",
+  shadowIntense: "chip_shadow-Intense",
+  roundNone: "chip_round-None",
+  roundSmall: "chip_round-Small",
+  roundMedium: "chip_round-Medium",
+  roundLarge: "chip_round-Large"
+};
+const Chip = (props) => /* @__PURE__ */ jsx(
+  ChipBase,
+  {
+    ...props,
+    classMap: classes,
+    IconButtonComponent: IconButton,
+    closeIcon: CloseIcon
+  }
+);
+Chip.displayName = "Chip";
+export {
+  Chip as C
+};
+//# sourceMappingURL=Chip-DoRSxZKk.js.map

package/dist/core/Chip-DoRSxZKk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip-DoRSxZKk.js","sources":["../../src/components/Chip/ChipBase.tsx","../../src/components/Chip/core/Chip.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\r\nimport { createPortal } from \"react-dom\";\r\nimport { ChipBaseProps } from \"./Chip.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultSize,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst ChipBase: React.FC<ChipBaseProps> = ({\r\n  id,\r\n  message,\r\n  visible,\r\n  onClose,\r\n  icon: Icon,\r\n  iconDecorative = true,\r\n  iconAriaLabel,\r\n  size = getDefaultSize(),\r\n  theme = getDefaultTheme(),\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  state = \"\",\r\n  position = \"topCenter\",\r\n  usePortal = true,\r\n  className = \"\",\r\n  autoClose = true,\r\n  duration = 3000,\r\n  closeIcon: CloseIcon,\r\n  IconButtonComponent,\r\n  classMap,\r\n  stackIndex,\r\n  role = \"alert\",\r\n  closeButtonAriaLabel = \"Close notification\",\r\n  messageId,\r\n  \"aria-label\": ariaLabel,\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  \"aria-live\": ariaLive,\r\n  \"aria-atomic\": ariaAtomic,\r\n  \"aria-relevant\": ariaRelevant,\r\n  \"aria-hidden\": ariaHidden,\r\n  \"data-testid\": testId = \"chip\",\r\n  ...rest\r\n}) => {\r\n  const [closing, setClosing] = useState(false);\r\n\r\n  const resolvedMessageId = useMemo(\r\n    () => messageId ?? `${id || testId}-message`,\r\n    [messageId, id, testId],\r\n  );\r\n\r\n  const handleClose = useCallback(() => {\r\n    setClosing(true);\r\n    setTimeout(() => onClose?.(), 300);\r\n  }, [onClose]);\r\n\r\n  useEffect(() => {\r\n    if (autoClose && visible) {\r\n      const timer = setTimeout(() => handleClose(), duration);\r\n      return () => clearTimeout(timer);\r\n    }\r\n  }, [autoClose, duration, visible, handleClose]);\r\n\r\n  useEffect(() => {\r\n    if (visible) setClosing(false);\r\n  }, [visible]);\r\n\r\n  useEffect(() => {\r\n    if (!visible) return;\r\n\r\n    const onKey = (e: globalThis.KeyboardEvent) => {\r\n      if (e.key === \"Escape\") handleClose();\r\n    };\r\n\r\n    window.addEventListener(\"keydown\", onKey);\r\n    return () => window.removeEventListener(\"keydown\", onKey);\r\n  }, [visible, handleClose]);\r\n\r\n  if (!visible && !closing) return null;\r\n\r\n  const chipClassName = combineClassNames(\r\n    classMap.chip,\r\n    classMap[theme],\r\n    classMap[state],\r\n    classMap[size],\r\n    classMap[position],\r\n    shadow && classMap[`shadow${capitalize(shadow)}`],\r\n    rounding && classMap[`round${capitalize(rounding)}`],\r\n    closing && classMap.fadeout,\r\n    usePortal && classMap.fixed,\r\n    className,\r\n  );\r\n\r\n  const portalEl =\r\n    typeof window !== \"undefined\"\r\n      ? document.getElementById(\"widget-portal\")\r\n      : null;\r\n\r\n  const chipElement = (\r\n    <div\r\n      key={id}\r\n      id={id}\r\n      className={chipClassName}\r\n      role={role}\r\n      aria-label={ariaLabel}\r\n      aria-labelledby={ariaLabelledBy}\r\n      aria-describedby={ariaDescribedBy}\r\n      aria-live={ariaLive ?? (role === \"alert\" ? \"assertive\" : \"polite\")}\r\n      aria-atomic={ariaAtomic ?? true}\r\n      aria-relevant={ariaRelevant}\r\n      aria-hidden={ariaHidden}\r\n      data-testid={testId}\r\n      style={stackIndex != null ? { zIndex: stackIndex } : undefined}\r\n      {...rest}\r\n    >\r\n      {Icon && (\r\n        <span\r\n          className={classMap.icon}\r\n          aria-hidden={iconDecorative ? \"true\" : undefined}\r\n          aria-label={!iconDecorative ? iconAriaLabel : undefined}\r\n          data-testid={`${testId}-icon`}\r\n        >\r\n          <Icon className={classMap.inner_icon} />\r\n        </span>\r\n      )}\r\n\r\n      <span\r\n        className={classMap.message}\r\n        id={resolvedMessageId}\r\n        data-testid={`${testId}-message`}\r\n      >\r\n        {message}\r\n      </span>\r\n\r\n      <IconButtonComponent\r\n        icon={CloseIcon}\r\n        size={size}\r\n        theme=\"clear\"\r\n        aria-label={closeButtonAriaLabel}\r\n        aria-controls={resolvedMessageId}\r\n        className={classMap.close}\r\n        onClick={handleClose}\r\n        shadow=\"none\"\r\n        data-testid={`${testId}-chip-close`}\r\n      />\r\n    </div>\r\n  );\r\n\r\n  if (usePortal && portalEl) {\r\n    return createPortal(chipElement, portalEl);\r\n  }\r\n\r\n  return chipElement;\r\n};\r\n\r\nChipBase.displayName = \"ChipBase\";\r\nexport default ChipBase;\r\n","import React from \"react\";\r\nimport ChipBase from \"../ChipBase\";\r\nimport { CloseIcon } from \"@/Icons\";\r\nimport \"./Chip.scss\";\r\nimport IconButton from \"../../IconButton/core/IconButton\";\r\nimport { ChipProps } from \"../Chip.types\";\r\n\r\nconst classes = {\r\n  chip: \"chip\",\r\n  icon: \"chip_icon\",\r\n  inner_icon: \"chip_icon_inner\",\r\n  message: \"chip_message\",\r\n  close: \"chip_close\",\r\n  relative: \"chip_relative\",\r\n  fixed: \"chip_fixed\",\r\n  fadeout: \"chip_fadeout\",\r\n\r\n  topCenter: \"chip_top_center\",\r\n  bottomCenter: \"chip_bottom_center\",\r\n  topLeft: \"chip_top_left\",\r\n  topRight: \"chip_top_right\",\r\n  bottomLeft: \"chip_bottom_left\",\r\n  bottomRight: \"chip_bottom_right\",\r\n\r\n  primary: \"chip_primary\",\r\n  secondary: \"chip_secondary\",\r\n  tertiary: \"chip_tertiary\",\r\n  quaternary: \"chip_quaternary\",\r\n\r\n  success: \"chip_success\",\r\n  error: \"chip_error\",\r\n  warning: \"chip_warning\",\r\n\r\n  clear: \"chip_clear\",\r\n\r\n  xs: \"chip_xs\",\r\n  small: \"chip_small\",\r\n  medium: \"chip_medium\",\r\n  large: \"chip_large\",\r\n  xl: \"chip_xl\",\r\n\r\n  shadowNone: \"chip_shadow-None\",\r\n  shadowLight: \"chip_shadow-Light\",\r\n  shadowMedium: \"chip_shadow-Medium\",\r\n  shadowStrong: \"chip_shadow-Strong\",\r\n  shadowIntense: \"chip_shadow-Intense\",\r\n\r\n  roundNone: \"chip_round-None\",\r\n  roundSmall: \"chip_round-Small\",\r\n  roundMedium: \"chip_round-Medium\",\r\n  roundLarge: \"chip_round-Large\",\r\n};\r\n\r\nconst Chip: React.FC<ChipProps> = (props) => (\r\n  <ChipBase\r\n    {...props}\r\n    classMap={classes}\r\n    IconButtonComponent={IconButton}\r\n    closeIcon={CloseIcon}\r\n  />\r\n);\r\nChip.displayName = \"Chip\";\r\nexport default Chip;\r\n"],"names":["CloseIcon"],"mappings":"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"}

package/dist/core/Chip.cjs.js

@@ -1,4 +1,4 @@
 "use strict";
-const Chip = require("./Chip-9iK2hsJj.cjs");
+const Chip = require("./Chip-DV-l08jr.cjs");
 module.exports = Chip.Chip;
 //# sourceMappingURL=Chip.cjs.js.map

package/dist/core/Chip.js

@@ -1,4 +1,4 @@
-import { C } from "./Chip-BN-6gv8X.js";
+import { C } from "./Chip-DoRSxZKk.js";
 export {
   C as default
 };