braid-design-system 32.16.0 → 32.16.2

package/dist/lib/components/private/Placeholder/Placeholder.cjs

@@ -0,0 +1,71 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_components_Box_BackgroundContext_cjs = require("../../Box/BackgroundContext.cjs");
+const lib_css_atoms_atoms_cjs = require("../../../css/atoms/atoms.cjs");
+const lib_components_private_Placeholder_Placeholder_css_cjs = require("./Placeholder.css.cjs");
+const lib_components_Box_Box_cjs = require("../../Box/Box.cjs");
+const lib_themes_wireframe_wireframeTheme_css_cjs = require("../../../themes/wireframe/wireframeTheme.css.cjs");
+const lib_components_Text_Text_cjs = require("../../Text/Text.cjs");
+const resolveToPxIfUnitless = (value) => typeof value === "string" && /[0-9]$/.test(value) ? `${value}px` : value;
+const PlaceholderContent = ({
+  label,
+  image
+}) => {
+  if (image) {
+    return null;
+  }
+  if (label) {
+    return /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.PublicBox, { paddingX: "xsmall", paddingY: "xxsmall", children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_Text_cjs.Text, { size: "small", weight: "strong", align: "center", baseline: false, children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.PublicBox, { className: lib_components_private_Placeholder_Placeholder_css_cjs.label, children: label }) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      className: lib_css_atoms_atoms_cjs.atoms({
+        reset: "svg",
+        position: "absolute",
+        width: "full",
+        height: "full"
+      }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("line", { className: lib_components_private_Placeholder_Placeholder_css_cjs.line, x1: 0, y1: 0, x2: "100%", y2: "100%" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { className: lib_components_private_Placeholder_Placeholder_css_cjs.line, x1: "100%", y1: 0, x2: 0, y2: "100%" })
+      ]
+    }
+  );
+};
+const Placeholder = ({
+  label,
+  width = "auto",
+  height = 120,
+  shape = "rectangle",
+  image,
+  imageSize = "cover"
+}) => {
+  const lightness = lib_components_Box_BackgroundContext_cjs.useBackgroundLightness();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    lib_components_Box_Box_cjs.PublicBox,
+    {
+      position: "relative",
+      overflow: "hidden",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: shape === "round" ? "full" : void 0,
+      className: [
+        lib_themes_wireframe_wireframeTheme_css_cjs.wireframe.vanillaTheme,
+        lib_components_private_Placeholder_Placeholder_css_cjs.lightTheme[lightness.lightMode],
+        lib_components_private_Placeholder_Placeholder_css_cjs.darkTheme[lightness.darkMode],
+        !image ? lib_components_private_Placeholder_Placeholder_css_cjs.box : void 0
+      ],
+      style: {
+        width: resolveToPxIfUnitless(width),
+        height: resolveToPxIfUnitless(height),
+        background: image ? `url(${image}) no-repeat center center` : void 0,
+        backgroundSize: imageSize
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(PlaceholderContent, { label, image })
+    }
+  );
+};
+exports.Placeholder = Placeholder;

package/dist/lib/components/private/Placeholder/Placeholder.css.cjs

@@ -0,0 +1,61 @@
+"use strict";
+const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const lib_css_colorModeStyle_cjs = require("../../../css/colorModeStyle.cjs");
+__vanilla_filescope__.setFileScope("src/lib/components/private/Placeholder/Placeholder.css.ts", "braid-design-system");
+const vars = css.createThemeContract({
+  background: null,
+  borderColor: null,
+  labelColor: null,
+  lineColor: null
+});
+const lightContextVars = {
+  vars: css.assignVars(vars, {
+    background: "hsla(0, 0%, 20%, 0.08)",
+    borderColor: "hsla(0, 0%, 20%, 0.3)",
+    labelColor: "hsla(0, 0%, 20%, 0.4)",
+    lineColor: "hsla(0, 0%, 20%, 0.1)"
+  })
+};
+const darkContextVars = {
+  vars: css.assignVars(vars, {
+    background: "hsla(0, 0%, 100%, 0.05)",
+    borderColor: "hsla(0, 0%, 100%, 0.4)",
+    labelColor: "hsla(0, 0%, 100%, 0.6)",
+    lineColor: "hsla(0, 0%, 100%, 0.2)"
+  })
+};
+const lightTheme = css.styleVariants({
+  light: lib_css_colorModeStyle_cjs.colorModeStyle({
+    lightMode: lightContextVars
+  }),
+  dark: lib_css_colorModeStyle_cjs.colorModeStyle({
+    lightMode: darkContextVars
+  })
+}, "lightTheme");
+const darkTheme = css.styleVariants({
+  light: lib_css_colorModeStyle_cjs.colorModeStyle({
+    darkMode: lightContextVars
+  }),
+  dark: lib_css_colorModeStyle_cjs.colorModeStyle({
+    darkMode: darkContextVars
+  })
+}, "darkTheme");
+const borderWidth = "2px";
+const box = css.style({
+  background: vars.background,
+  border: `${borderWidth} solid ${vars.borderColor}`
+}, "box");
+const label = css.style({
+  color: vars.labelColor
+}, "label");
+const line = css.style({
+  strokeWidth: borderWidth,
+  stroke: vars.lineColor
+}, "line");
+__vanilla_filescope__.endFileScope();
+exports.box = box;
+exports.darkTheme = darkTheme;
+exports.label = label;
+exports.lightTheme = lightTheme;
+exports.line = line;

package/dist/lib/components/private/Placeholder/Placeholder.mjs

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useBackgroundLightness } from "../../Box/BackgroundContext.mjs";
+import { atoms } from "../../../css/atoms/atoms.mjs";
+import { lightTheme, darkTheme, box, label, line } from "./Placeholder.css.mjs";
+import { PublicBox } from "../../Box/Box.mjs";
+import { wireframe } from "../../../themes/wireframe/wireframeTheme.css.mjs";
+import { Text } from "../../Text/Text.mjs";
+const resolveToPxIfUnitless = (value) => typeof value === "string" && /[0-9]$/.test(value) ? `${value}px` : value;
+const PlaceholderContent = ({
+  label: label$1,
+  image
+}) => {
+  if (image) {
+    return null;
+  }
+  if (label$1) {
+    return /* @__PURE__ */ jsx(PublicBox, { paddingX: "xsmall", paddingY: "xxsmall", children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "strong", align: "center", baseline: false, children: /* @__PURE__ */ jsx(PublicBox, { className: label, children: label$1 }) }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      className: atoms({
+        reset: "svg",
+        position: "absolute",
+        width: "full",
+        height: "full"
+      }),
+      children: [
+        /* @__PURE__ */ jsx("line", { className: line, x1: 0, y1: 0, x2: "100%", y2: "100%" }),
+        /* @__PURE__ */ jsx("line", { className: line, x1: "100%", y1: 0, x2: 0, y2: "100%" })
+      ]
+    }
+  );
+};
+const Placeholder = ({
+  label: label2,
+  width = "auto",
+  height = 120,
+  shape = "rectangle",
+  image,
+  imageSize = "cover"
+}) => {
+  const lightness = useBackgroundLightness();
+  return /* @__PURE__ */ jsx(
+    PublicBox,
+    {
+      position: "relative",
+      overflow: "hidden",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: shape === "round" ? "full" : void 0,
+      className: [
+        wireframe.vanillaTheme,
+        lightTheme[lightness.lightMode],
+        darkTheme[lightness.darkMode],
+        !image ? box : void 0
+      ],
+      style: {
+        width: resolveToPxIfUnitless(width),
+        height: resolveToPxIfUnitless(height),
+        background: image ? `url(${image}) no-repeat center center` : void 0,
+        backgroundSize: imageSize
+      },
+      children: /* @__PURE__ */ jsx(PlaceholderContent, { label: label2, image })
+    }
+  );
+};
+export {
+  Placeholder
+};

package/dist/lib/components/private/Typography/Typography.cjs

@@ -0,0 +1,81 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_components_Box_Box_cjs = require("../../Box/Box.cjs");
+const lib_components_private_buildDataAttributes_cjs = require("../buildDataAttributes.cjs");
+const lib_components_private_MaxLines_MaxLines_cjs = require("../MaxLines/MaxLines.cjs");
+const lib_utils_align_cjs = require("../../../utils/align.cjs");
+const dedent = require("dedent");
+const lib_components_private_MaxLines_MaxLines_css_cjs = require("../MaxLines/MaxLines.css.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const dedent__default = /* @__PURE__ */ _interopDefaultCompat(dedent);
+const Typography = ({
+  id,
+  component = "span",
+  className,
+  align,
+  truncate = false,
+  maxLines,
+  icon,
+  data,
+  children,
+  ...restProps
+}) => {
+  const lines = truncate ? 1 : maxLines;
+  const isTruncated = typeof lines === "number";
+  const contents = isTruncated ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_private_MaxLines_MaxLines_cjs.MaxLines, { lines, children }) : children;
+  if (process.env.NODE_ENV !== "production") {
+    if (truncate) {
+      console.warn(
+        dedent__default.default`
+          The "truncate" prop has been deprecated and will be removed in a future version. Use "maxLines" instead.
+             <Text
+            %c-   truncate
+            %c+   maxLines={1}
+             %c/>
+        `,
+        "color: red",
+        "color: green",
+        "color: inherit"
+      );
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    lib_components_Box_Box_cjs.Box,
+    {
+      id,
+      display: "block",
+      component,
+      textAlign: align,
+      className: [
+        className,
+        isTruncated ? lib_components_private_MaxLines_MaxLines_css_cjs.descenderCropFixForWebkitBox : void 0
+      ],
+      ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
+      children: icon ? /* @__PURE__ */ jsxRuntime.jsxs(
+        lib_components_Box_Box_cjs.Box,
+        {
+          component: "span",
+          display: "flex",
+          justifyContent: lib_utils_align_cjs.alignToFlexAlign(align),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              lib_components_Box_Box_cjs.Box,
+              {
+                component: "span",
+                display: "block",
+                paddingRight: "xsmall",
+                flexGrow: 0,
+                flexShrink: 0,
+                minWidth: 0,
+                textAlign: align,
+                children: icon
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { component: "span", display: "block", minWidth: 0, children: contents })
+          ]
+        }
+      ) : contents
+    }
+  );
+};
+exports.Typography = Typography;

package/dist/lib/components/private/Typography/Typography.mjs

@@ -0,0 +1,80 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box } from "../../Box/Box.mjs";
+import { buildDataAttributes } from "../buildDataAttributes.mjs";
+import { MaxLines } from "../MaxLines/MaxLines.mjs";
+import { alignToFlexAlign } from "../../../utils/align.mjs";
+import dedent from "dedent";
+import { descenderCropFixForWebkitBox } from "../MaxLines/MaxLines.css.mjs";
+const Typography = ({
+  id,
+  component = "span",
+  className,
+  align,
+  truncate = false,
+  maxLines,
+  icon,
+  data,
+  children,
+  ...restProps
+}) => {
+  const lines = truncate ? 1 : maxLines;
+  const isTruncated = typeof lines === "number";
+  const contents = isTruncated ? /* @__PURE__ */ jsx(MaxLines, { lines, children }) : children;
+  if (process.env.NODE_ENV !== "production") {
+    if (truncate) {
+      console.warn(
+        dedent`
+          The "truncate" prop has been deprecated and will be removed in a future version. Use "maxLines" instead.
+             <Text
+            %c-   truncate
+            %c+   maxLines={1}
+             %c/>
+        `,
+        "color: red",
+        "color: green",
+        "color: inherit"
+      );
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      id,
+      display: "block",
+      component,
+      textAlign: align,
+      className: [
+        className,
+        isTruncated ? descenderCropFixForWebkitBox : void 0
+      ],
+      ...buildDataAttributes({ data, validateRestProps: restProps }),
+      children: icon ? /* @__PURE__ */ jsxs(
+        Box,
+        {
+          component: "span",
+          display: "flex",
+          justifyContent: alignToFlexAlign(align),
+          children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                component: "span",
+                display: "block",
+                paddingRight: "xsmall",
+                flexGrow: 0,
+                flexShrink: 0,
+                minWidth: 0,
+                textAlign: align,
+                children: icon
+              }
+            ),
+            /* @__PURE__ */ jsx(Box, { component: "span", display: "block", minWidth: 0, children: contents })
+          ]
+        }
+      ) : contents
+    }
+  );
+};
+export {
+  Typography
+};

package/dist/lib/components/private/buildDataAttributes.cjs

@@ -0,0 +1,54 @@
+"use strict";
+const dedent = require("dedent");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const dedent__default = /* @__PURE__ */ _interopDefaultCompat(dedent);
+const buildDataAttributes = ({ data, validateRestProps }) => {
+  if (process.env.NODE_ENV !== "production") {
+    if (validateRestProps !== false) {
+      const dataAttrs = Object.keys(validateRestProps).filter(
+        (prop) => prop.startsWith("data-")
+      );
+      const formatter = (v) => {
+        if (typeof v === "boolean") {
+          return v ? "" : `={false}`;
+        }
+        if (typeof v === "number") {
+          return `={${v}}`;
+        }
+        return `="${v}"`;
+      };
+      if (dataAttrs.length > 0) {
+        console.warn(
+          dedent__default.default`
+          Braid components do not support the native data attribute format. Use the “data” prop instead.
+            <Component
+          %c${dataAttrs.map((attr) => `-    ${attr}${formatter(validateRestProps[attr])}`).join("\n")}
+          %c+    data={{
+          ${dataAttrs.map((attr) => {
+            const attributeName = attr.replace(/^data-/, "");
+            const property = attributeName.includes("-") ? `'${attributeName}'` : attributeName;
+            return `+      ${property}: ${typeof validateRestProps[attr] === "string" ? `'${validateRestProps[attr]}'` : validateRestProps[attr]},`;
+          }).join("\n")}
+          +    }}
+            %c/>
+           For more details, see the “Data Attributes” documentation:
+           https://seek-oss.github.io/braid-design-system/components/Box#data-attributes
+        `,
+          "color: red",
+          "color: green",
+          "color: inherit"
+        );
+      }
+    }
+  }
+  if (!data) {
+    return;
+  }
+  const keys = Object.keys(data);
+  const dataAttributes = {};
+  for (const key of keys) {
+    dataAttributes[`data-${key}`] = data[key];
+  }
+  return dataAttributes;
+};
+exports.buildDataAttributes = buildDataAttributes;

package/dist/lib/components/private/buildDataAttributes.mjs

@@ -0,0 +1,53 @@
+import dedent from "dedent";
+const buildDataAttributes = ({ data, validateRestProps }) => {
+  if (process.env.NODE_ENV !== "production") {
+    if (validateRestProps !== false) {
+      const dataAttrs = Object.keys(validateRestProps).filter(
+        (prop) => prop.startsWith("data-")
+      );
+      const formatter = (v) => {
+        if (typeof v === "boolean") {
+          return v ? "" : `={false}`;
+        }
+        if (typeof v === "number") {
+          return `={${v}}`;
+        }
+        return `="${v}"`;
+      };
+      if (dataAttrs.length > 0) {
+        console.warn(
+          dedent`
+          Braid components do not support the native data attribute format. Use the “data” prop instead.
+            <Component
+          %c${dataAttrs.map((attr) => `-    ${attr}${formatter(validateRestProps[attr])}`).join("\n")}
+          %c+    data={{
+          ${dataAttrs.map((attr) => {
+            const attributeName = attr.replace(/^data-/, "");
+            const property = attributeName.includes("-") ? `'${attributeName}'` : attributeName;
+            return `+      ${property}: ${typeof validateRestProps[attr] === "string" ? `'${validateRestProps[attr]}'` : validateRestProps[attr]},`;
+          }).join("\n")}
+          +    }}
+            %c/>
+           For more details, see the “Data Attributes” documentation:
+           https://seek-oss.github.io/braid-design-system/components/Box#data-attributes
+        `,
+          "color: red",
+          "color: green",
+          "color: inherit"
+        );
+      }
+    }
+  }
+  if (!data) {
+    return;
+  }
+  const keys = Object.keys(data);
+  const dataAttributes = {};
+  for (const key of keys) {
+    dataAttributes[`data-${key}`] = data[key];
+  }
+  return dataAttributes;
+};
+export {
+  buildDataAttributes
+};

package/dist/lib/components/private/defaultTextProps.cjs

@@ -0,0 +1,38 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const DefaultTextPropsContext = React.createContext({
+  tone: void 0,
+  weight: void 0,
+  size: void 0
+});
+const DefaultTextPropsProvider = ({
+  size,
+  weight,
+  tone,
+  children
+}) => {
+  const defaultTextProps = React.useMemo(
+    () => ({
+      size,
+      weight,
+      tone
+    }),
+    [size, weight, tone]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(DefaultTextPropsContext.Provider, { value: defaultTextProps, children });
+};
+const useDefaultTextProps = ({
+  size: sizeProp,
+  weight: weightProp,
+  tone: toneProp
+}) => {
+  const { size, weight, tone } = React.useContext(DefaultTextPropsContext);
+  return {
+    size: sizeProp ?? size ?? "standard",
+    weight: weightProp ?? weight ?? "regular",
+    tone: toneProp ?? tone ?? "neutral"
+  };
+};
+exports.DefaultTextPropsProvider = DefaultTextPropsProvider;
+exports.useDefaultTextProps = useDefaultTextProps;

package/dist/lib/components/private/defaultTextProps.mjs

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useMemo, useContext } from "react";
+const DefaultTextPropsContext = createContext({
+  tone: void 0,
+  weight: void 0,
+  size: void 0
+});
+const DefaultTextPropsProvider = ({
+  size,
+  weight,
+  tone,
+  children
+}) => {
+  const defaultTextProps = useMemo(
+    () => ({
+      size,
+      weight,
+      tone
+    }),
+    [size, weight, tone]
+  );
+  return /* @__PURE__ */ jsx(DefaultTextPropsContext.Provider, { value: defaultTextProps, children });
+};
+const useDefaultTextProps = ({
+  size: sizeProp,
+  weight: weightProp,
+  tone: toneProp
+}) => {
+  const { size, weight, tone } = useContext(DefaultTextPropsContext);
+  return {
+    size: sizeProp ?? size ?? "standard",
+    weight: weightProp ?? weight ?? "regular",
+    tone: toneProp ?? tone ?? "neutral"
+  };
+};
+export {
+  DefaultTextPropsProvider,
+  useDefaultTextProps
+};

package/dist/lib/components/private/getNextIndex.cjs

@@ -0,0 +1,16 @@
+"use strict";
+function getNextIndex(moveAmount, current, total) {
+  const maxIndex = total - 1;
+  if (current === null) {
+    return moveAmount > 0 ? 0 : maxIndex;
+  }
+  const nextIndex = moveAmount + current;
+  if (nextIndex > maxIndex) {
+    return 0;
+  }
+  if (nextIndex < 0) {
+    return maxIndex;
+  }
+  return nextIndex;
+}
+exports.getNextIndex = getNextIndex;

package/dist/lib/components/private/getNextIndex.mjs

@@ -0,0 +1,17 @@
+function getNextIndex(moveAmount, current, total) {
+  const maxIndex = total - 1;
+  if (current === null) {
+    return moveAmount > 0 ? 0 : maxIndex;
+  }
+  const nextIndex = moveAmount + current;
+  if (nextIndex > maxIndex) {
+    return 0;
+  }
+  if (nextIndex < 0) {
+    return maxIndex;
+  }
+  return nextIndex;
+}
+export {
+  getNextIndex
+};

package/dist/lib/components/private/hideFocusRings/hideFocusRings.css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const lib_components_private_hideFocusRings_hideFocusRingsDataAttribute_cjs = require("./hideFocusRingsDataAttribute.cjs");
+__vanilla_filescope__.setFileScope("src/lib/components/private/hideFocusRings/hideFocusRings.css.ts", "braid-design-system");
+const hideFocusRingsClassName = css.style({
+  selectors: {
+    [`[${lib_components_private_hideFocusRings_hideFocusRingsDataAttribute_cjs.hideFocusRingsDataAttribute}] &`]: {
+      opacity: "0 !important"
+    }
+  }
+}, "hideFocusRingsClassName");
+__vanilla_filescope__.endFileScope();
+exports.hideFocusRingsClassName = hideFocusRingsClassName;

package/dist/lib/components/private/hideFocusRings/useHideFocusRings.cjs

@@ -0,0 +1,18 @@
+"use strict";
+const React = require("react");
+const lib_components_private_hideFocusRings_hideFocusRingsDataAttribute_cjs = require("./hideFocusRingsDataAttribute.cjs");
+const hideFocusRings = () => document.body.setAttribute(lib_components_private_hideFocusRings_hideFocusRingsDataAttribute_cjs.hideFocusRingsDataAttribute, "true");
+const showFocusRings = () => document.body.removeAttribute(lib_components_private_hideFocusRings_hideFocusRingsDataAttribute_cjs.hideFocusRingsDataAttribute);
+const useHideFocusRings = (enabled = true) => {
+  React.useEffect(() => {
+    if (enabled) {
+      window.addEventListener("keydown", showFocusRings);
+      window.addEventListener("mousemove", hideFocusRings);
+      return () => {
+        window.removeEventListener("keydown", showFocusRings);
+        window.removeEventListener("mousemove", hideFocusRings);
+      };
+    }
+  }, [enabled]);
+};
+exports.useHideFocusRings = useHideFocusRings;

package/dist/lib/components/private/hideFocusRings/useHideFocusRings.mjs

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { hideFocusRingsDataAttribute } from "./hideFocusRingsDataAttribute.mjs";
+const hideFocusRings = () => document.body.setAttribute(hideFocusRingsDataAttribute, "true");
+const showFocusRings = () => document.body.removeAttribute(hideFocusRingsDataAttribute);
+const useHideFocusRings = (enabled = true) => {
+  useEffect(() => {
+    if (enabled) {
+      window.addEventListener("keydown", showFocusRings);
+      window.addEventListener("mousemove", hideFocusRings);
+      return () => {
+        window.removeEventListener("keydown", showFocusRings);
+        window.removeEventListener("mousemove", hideFocusRings);
+      };
+    }
+  }, [enabled]);
+};
+export {
+  useHideFocusRings
+};

package/dist/lib/components/private/mergeIds.cjs

@@ -0,0 +1,9 @@
+"use strict";
+const mergeIds = (...ids) => {
+  const validIds = ids.filter(Boolean);
+  if (validIds.length === 0) {
+    return void 0;
+  }
+  return validIds.join(" ");
+};
+exports.mergeIds = mergeIds;

package/dist/lib/components/private/mergeIds.mjs

@@ -0,0 +1,10 @@
+const mergeIds = (...ids) => {
+  const validIds = ids.filter(Boolean);
+  if (validIds.length === 0) {
+    return void 0;
+  }
+  return validIds.join(" ");
+};
+export {
+  mergeIds
+};

package/dist/lib/components/private/normalizeKey.cjs

@@ -0,0 +1,11 @@
+"use strict";
+function normalizeKey({ key, keyCode }) {
+  if (keyCode >= 37 && keyCode <= 40 && key.indexOf("Arrow") !== 0) {
+    return `Arrow${key}`;
+  }
+  if (keyCode === 27) {
+    return "Escape";
+  }
+  return key;
+}
+exports.normalizeKey = normalizeKey;