braid-design-system 32.16.0 → 32.16.2

package/dist/lib/components/Tabs/TabsProvider.cjs

@@ -0,0 +1,120 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const lib_components_private_getNextIndex_cjs = require("../private/getNextIndex.cjs");
+const lib_components_Tabs_Tabs_actions_cjs = require("./Tabs.actions.cjs");
+const lib_components_Tabs_tabA11y_cjs = require("./tabA11y.cjs");
+const TabsContext = React.createContext(null);
+const TabsProvider = ({
+  children,
+  onChange,
+  id,
+  selectedItem
+}) => {
+  const [tabsState, dispatch] = React.useReducer(
+    (state, action) => {
+      switch (action.type) {
+        case lib_components_Tabs_Tabs_actions_cjs.TAB_BUTTON_LEFT: {
+          return {
+            ...state,
+            focusedTabIndex: lib_components_private_getNextIndex_cjs.getNextIndex(
+              -1,
+              state.focusedTabIndex,
+              state.tabItems.length
+            )
+          };
+        }
+        case lib_components_Tabs_Tabs_actions_cjs.TAB_BUTTON_RIGHT: {
+          return {
+            ...state,
+            focusedTabIndex: lib_components_private_getNextIndex_cjs.getNextIndex(
+              1,
+              state.focusedTabIndex,
+              state.tabItems.length
+            )
+          };
+        }
+        case lib_components_Tabs_Tabs_actions_cjs.TAB_BUTTON_HOME: {
+          return {
+            ...state,
+            focusedTabIndex: 0
+          };
+        }
+        case lib_components_Tabs_Tabs_actions_cjs.TAB_BUTTON_END: {
+          return {
+            ...state,
+            focusedTabIndex: state.tabItems.length - 1
+          };
+        }
+        case lib_components_Tabs_Tabs_actions_cjs.TAB_BUTTON_TAB: {
+          return {
+            ...state,
+            focusedTabIndex: null
+          };
+        }
+        case lib_components_Tabs_Tabs_actions_cjs.TAB_BUTTON_ENTER:
+        case lib_components_Tabs_Tabs_actions_cjs.TAB_BUTTON_SPACE:
+        case lib_components_Tabs_Tabs_actions_cjs.TAB_BUTTON_CLICK: {
+          return {
+            ...state,
+            focusedTabIndex: action.value,
+            selectedIndex: action.value
+          };
+        }
+        case lib_components_Tabs_Tabs_actions_cjs.TAB_BUTTON_REGISTER: {
+          return {
+            ...state,
+            tabButtonElements: {
+              ...state.tabButtonElements,
+              [action.tabListItemIndex.toString()]: action.tabEl
+            }
+          };
+        }
+        case lib_components_Tabs_Tabs_actions_cjs.TAB_LIST_FOCUSED: {
+          return {
+            ...state,
+            focusedTabIndex: action.value || 0
+          };
+        }
+        case lib_components_Tabs_Tabs_actions_cjs.TAB_LIST_UPDATED: {
+          return {
+            ...state,
+            tabItems: action.tabItems,
+            selectedIndex: 0
+          };
+        }
+        case lib_components_Tabs_Tabs_actions_cjs.TAB_PANELS_UPDATED: {
+          return {
+            ...state,
+            panels: action.panels
+          };
+        }
+        default:
+          return state;
+      }
+    },
+    {
+      selectedIndex: 0,
+      focusedTabIndex: null,
+      tabItems: [],
+      panels: [],
+      tabButtonElements: {}
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsContext.Provider,
+    {
+      value: {
+        ...tabsState,
+        selectedIndex: typeof selectedItem !== "undefined" ? tabsState.tabItems.indexOf(selectedItem) : tabsState.selectedIndex,
+        selectedItem,
+        dispatch,
+        a11y: lib_components_Tabs_tabA11y_cjs.tabA11y({ uniqueId: id }),
+        onChange
+      },
+      children
+    }
+  );
+};
+exports.TabsContext = TabsContext;
+exports.TabsProvider = TabsProvider;

package/dist/lib/components/Tabs/TabsProvider.mjs

@@ -0,0 +1,121 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useReducer } from "react";
+import { getNextIndex } from "../private/getNextIndex.mjs";
+import { TAB_PANELS_UPDATED, TAB_LIST_UPDATED, TAB_LIST_FOCUSED, TAB_BUTTON_REGISTER, TAB_BUTTON_CLICK, TAB_BUTTON_SPACE, TAB_BUTTON_ENTER, TAB_BUTTON_TAB, TAB_BUTTON_END, TAB_BUTTON_HOME, TAB_BUTTON_RIGHT, TAB_BUTTON_LEFT } from "./Tabs.actions.mjs";
+import { tabA11y } from "./tabA11y.mjs";
+const TabsContext = createContext(null);
+const TabsProvider = ({
+  children,
+  onChange,
+  id,
+  selectedItem
+}) => {
+  const [tabsState, dispatch] = useReducer(
+    (state, action) => {
+      switch (action.type) {
+        case TAB_BUTTON_LEFT: {
+          return {
+            ...state,
+            focusedTabIndex: getNextIndex(
+              -1,
+              state.focusedTabIndex,
+              state.tabItems.length
+            )
+          };
+        }
+        case TAB_BUTTON_RIGHT: {
+          return {
+            ...state,
+            focusedTabIndex: getNextIndex(
+              1,
+              state.focusedTabIndex,
+              state.tabItems.length
+            )
+          };
+        }
+        case TAB_BUTTON_HOME: {
+          return {
+            ...state,
+            focusedTabIndex: 0
+          };
+        }
+        case TAB_BUTTON_END: {
+          return {
+            ...state,
+            focusedTabIndex: state.tabItems.length - 1
+          };
+        }
+        case TAB_BUTTON_TAB: {
+          return {
+            ...state,
+            focusedTabIndex: null
+          };
+        }
+        case TAB_BUTTON_ENTER:
+        case TAB_BUTTON_SPACE:
+        case TAB_BUTTON_CLICK: {
+          return {
+            ...state,
+            focusedTabIndex: action.value,
+            selectedIndex: action.value
+          };
+        }
+        case TAB_BUTTON_REGISTER: {
+          return {
+            ...state,
+            tabButtonElements: {
+              ...state.tabButtonElements,
+              [action.tabListItemIndex.toString()]: action.tabEl
+            }
+          };
+        }
+        case TAB_LIST_FOCUSED: {
+          return {
+            ...state,
+            focusedTabIndex: action.value || 0
+          };
+        }
+        case TAB_LIST_UPDATED: {
+          return {
+            ...state,
+            tabItems: action.tabItems,
+            selectedIndex: 0
+          };
+        }
+        case TAB_PANELS_UPDATED: {
+          return {
+            ...state,
+            panels: action.panels
+          };
+        }
+        default:
+          return state;
+      }
+    },
+    {
+      selectedIndex: 0,
+      focusedTabIndex: null,
+      tabItems: [],
+      panels: [],
+      tabButtonElements: {}
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    TabsContext.Provider,
+    {
+      value: {
+        ...tabsState,
+        selectedIndex: typeof selectedItem !== "undefined" ? tabsState.tabItems.indexOf(selectedItem) : tabsState.selectedIndex,
+        selectedItem,
+        dispatch,
+        a11y: tabA11y({ uniqueId: id }),
+        onChange
+      },
+      children
+    }
+  );
+};
+export {
+  TabsContext,
+  TabsProvider
+};

package/dist/lib/components/Tabs/tabA11y.cjs

@@ -0,0 +1,28 @@
+"use strict";
+const getTabLabelId = (uniqueId, index) => `${uniqueId}_${index + 1}_label`;
+const getPanelId = (uniqueId, index) => `${uniqueId}_${index + 1}_panel`;
+const tabA11y = ({ uniqueId }) => ({
+  tabListProps: ({ label }) => ({
+    role: "tablist",
+    "aria-orientation": "horizontal",
+    "aria-label": label
+  }),
+  tabProps: ({ tabIndex, isSelected }) => ({
+    role: "tab",
+    tabIndex: isSelected ? void 0 : -1,
+    "aria-selected": isSelected,
+    "aria-controls": getPanelId(uniqueId, tabIndex),
+    id: `${uniqueId}_${tabIndex + 1}`
+  }),
+  tabLabelProps: ({ tabIndex }) => ({
+    id: getTabLabelId(uniqueId, tabIndex)
+  }),
+  tabPanelProps: ({ panelIndex, isSelected }) => ({
+    role: "tabpanel",
+    "aria-labelledby": getTabLabelId(uniqueId, panelIndex),
+    "aria-hidden": isSelected ? void 0 : true,
+    id: getPanelId(uniqueId, panelIndex),
+    tabIndex: isSelected ? 0 : void 0
+  })
+});
+exports.tabA11y = tabA11y;

package/dist/lib/components/Tabs/tabA11y.mjs

@@ -0,0 +1,29 @@
+const getTabLabelId = (uniqueId, index) => `${uniqueId}_${index + 1}_label`;
+const getPanelId = (uniqueId, index) => `${uniqueId}_${index + 1}_panel`;
+const tabA11y = ({ uniqueId }) => ({
+  tabListProps: ({ label }) => ({
+    role: "tablist",
+    "aria-orientation": "horizontal",
+    "aria-label": label
+  }),
+  tabProps: ({ tabIndex, isSelected }) => ({
+    role: "tab",
+    tabIndex: isSelected ? void 0 : -1,
+    "aria-selected": isSelected,
+    "aria-controls": getPanelId(uniqueId, tabIndex),
+    id: `${uniqueId}_${tabIndex + 1}`
+  }),
+  tabLabelProps: ({ tabIndex }) => ({
+    id: getTabLabelId(uniqueId, tabIndex)
+  }),
+  tabPanelProps: ({ panelIndex, isSelected }) => ({
+    role: "tabpanel",
+    "aria-labelledby": getTabLabelId(uniqueId, panelIndex),
+    "aria-hidden": isSelected ? void 0 : true,
+    id: getPanelId(uniqueId, panelIndex),
+    tabIndex: isSelected ? 0 : void 0
+  })
+});
+export {
+  tabA11y
+};

package/dist/lib/components/Tag/Tag.cjs

@@ -0,0 +1,66 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const assert = require("assert");
+const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
+const lib_components_Text_Text_cjs = require("../Text/Text.cjs");
+const lib_components_ButtonIcon_ButtonIcon_cjs = require("../ButtonIcon/ButtonIcon.cjs");
+const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
+const lib_components_Tag_Tag_css_cjs = require("./Tag.css.cjs");
+const lib_components_icons_IconClear_IconClear_cjs = require("../icons/IconClear/IconClear.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
+const Tag = ({
+  onClear,
+  clearLabel = "Clear",
+  data,
+  id,
+  icon,
+  children,
+  ...restProps
+}) => {
+  assert__default.default(
+    typeof children === "undefined" || typeof children === "string",
+    "Tag may only contain a string"
+  );
+  assert__default.default(
+    !icon || icon.props.size === void 0 || icon.props.tone === void 0,
+    "Icons cannot set the 'size' or 'tone' prop when passed to a Tag component"
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    lib_components_Box_Box_cjs.Box,
+    {
+      id,
+      display: "flex",
+      ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        lib_components_Box_Box_cjs.Box,
+        {
+          display: "flex",
+          minWidth: 0,
+          alignItems: "center",
+          background: "neutralLight",
+          paddingY: onClear ? void 0 : "xxsmall",
+          paddingLeft: icon ? "xsmall" : "small",
+          paddingRight: onClear ? void 0 : "small",
+          borderRadius: "full",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { minWidth: 0, title: children, children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_Text_cjs.Text, { baseline: false, maxLines: 1, icon, children }) }),
+            onClear ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { flexShrink: 0, display: "flex", className: lib_components_Tag_Tag_css_cjs.clearGutter, children: /* @__PURE__ */ jsxRuntime.jsx(
+              lib_components_ButtonIcon_ButtonIcon_cjs.ButtonIcon,
+              {
+                id: id ? `${id}-clear` : void 0,
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconClear_IconClear_cjs.IconClear, {}),
+                label: clearLabel,
+                tone: "secondary",
+                variant: "transparent",
+                bleed: false,
+                onClick: onClear
+              }
+            ) }) : null
+          ]
+        }
+      )
+    }
+  );
+};
+exports.Tag = Tag;

package/dist/lib/components/Tag/Tag.mjs

@@ -0,0 +1,65 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import assert from "assert";
+import { Box } from "../Box/Box.mjs";
+import { Text } from "../Text/Text.mjs";
+import { ButtonIcon } from "../ButtonIcon/ButtonIcon.mjs";
+import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
+import { clearGutter } from "./Tag.css.mjs";
+import { IconClear } from "../icons/IconClear/IconClear.mjs";
+const Tag = ({
+  onClear,
+  clearLabel = "Clear",
+  data,
+  id,
+  icon,
+  children,
+  ...restProps
+}) => {
+  assert(
+    typeof children === "undefined" || typeof children === "string",
+    "Tag may only contain a string"
+  );
+  assert(
+    !icon || icon.props.size === void 0 || icon.props.tone === void 0,
+    "Icons cannot set the 'size' or 'tone' prop when passed to a Tag component"
+  );
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      id,
+      display: "flex",
+      ...buildDataAttributes({ data, validateRestProps: restProps }),
+      children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          display: "flex",
+          minWidth: 0,
+          alignItems: "center",
+          background: "neutralLight",
+          paddingY: onClear ? void 0 : "xxsmall",
+          paddingLeft: icon ? "xsmall" : "small",
+          paddingRight: onClear ? void 0 : "small",
+          borderRadius: "full",
+          children: [
+            /* @__PURE__ */ jsx(Box, { minWidth: 0, title: children, children: /* @__PURE__ */ jsx(Text, { baseline: false, maxLines: 1, icon, children }) }),
+            onClear ? /* @__PURE__ */ jsx(Box, { flexShrink: 0, display: "flex", className: clearGutter, children: /* @__PURE__ */ jsx(
+              ButtonIcon,
+              {
+                id: id ? `${id}-clear` : void 0,
+                icon: /* @__PURE__ */ jsx(IconClear, {}),
+                label: clearLabel,
+                tone: "secondary",
+                variant: "transparent",
+                bleed: false,
+                onClick: onClear
+              }
+            ) }) : null
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  Tag
+};

package/dist/lib/components/Tag/Tag.playroom.cjs

@@ -0,0 +1,16 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_playroom_utils_cjs = require("../../playroom/utils.cjs");
+const lib_components_Tag_Tag_cjs = require("./Tag.cjs");
+const Tag = ({ icon, id, ...restProps }) => {
+  const fallbackId = lib_playroom_utils_cjs.useFallbackId();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    lib_components_Tag_Tag_cjs.Tag,
+    {
+      id: id ?? fallbackId,
+      icon: typeof icon !== "boolean" ? icon : void 0,
+      ...restProps
+    }
+  );
+};
+exports.Tag = Tag;

package/dist/lib/components/Tag/Tag.playroom.mjs

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { useFallbackId } from "../../playroom/utils.mjs";
+import { Tag as Tag$1 } from "./Tag.mjs";
+const Tag = ({ icon, id, ...restProps }) => {
+  const fallbackId = useFallbackId();
+  return /* @__PURE__ */ jsx(
+    Tag$1,
+    {
+      id: id ?? fallbackId,
+      icon: typeof icon !== "boolean" ? icon : void 0,
+      ...restProps
+    }
+  );
+};
+export {
+  Tag
+};

package/dist/lib/components/Text/Text.cjs

@@ -0,0 +1,44 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const assert = require("assert");
+const lib_components_Text_TextContext_cjs = require("./TextContext.cjs");
+const lib_components_private_defaultTextProps_cjs = require("../private/defaultTextProps.cjs");
+const lib_css_typography_cjs = require("../../css/typography.cjs");
+const lib_components_private_Typography_Typography_cjs = require("../private/Typography/Typography.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
+const Text = ({
+  size: sizeProp,
+  tone: toneProp,
+  weight: weightProp,
+  baseline = true,
+  ...typographyProps
+}) => {
+  assert__default.default(
+    !React.useContext(lib_components_Text_TextContext_cjs.TextContext),
+    "Text components should not be nested within each other"
+  );
+  const { size, weight, tone } = lib_components_private_defaultTextProps_cjs.useDefaultTextProps({
+    size: sizeProp,
+    weight: weightProp,
+    tone: toneProp
+  });
+  const textStylingProps = React.useMemo(
+    () => ({
+      tone,
+      size,
+      weight,
+      baseline
+    }),
+    [tone, size, weight, baseline]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_TextContext_cjs.TextContext.Provider, { value: textStylingProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+    lib_components_private_Typography_Typography_cjs.Typography,
+    {
+      ...typographyProps,
+      className: lib_css_typography_cjs.textStyles(textStylingProps)
+    }
+  ) });
+};
+exports.Text = Text;

package/dist/lib/components/Text/Text.mjs

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import assert from "assert";
+import { TextContext } from "./TextContext.mjs";
+import { useDefaultTextProps } from "../private/defaultTextProps.mjs";
+import { textStyles } from "../../css/typography.mjs";
+import { Typography } from "../private/Typography/Typography.mjs";
+const Text = ({
+  size: sizeProp,
+  tone: toneProp,
+  weight: weightProp,
+  baseline = true,
+  ...typographyProps
+}) => {
+  assert(
+    !useContext(TextContext),
+    "Text components should not be nested within each other"
+  );
+  const { size, weight, tone } = useDefaultTextProps({
+    size: sizeProp,
+    weight: weightProp,
+    tone: toneProp
+  });
+  const textStylingProps = useMemo(
+    () => ({
+      tone,
+      size,
+      weight,
+      baseline
+    }),
+    [tone, size, weight, baseline]
+  );
+  return /* @__PURE__ */ jsx(TextContext.Provider, { value: textStylingProps, children: /* @__PURE__ */ jsx(
+    Typography,
+    {
+      ...typographyProps,
+      className: textStyles(textStylingProps)
+    }
+  ) });
+};
+export {
+  Text
+};

package/dist/lib/components/Text/TextContext.cjs

@@ -0,0 +1,4 @@
+"use strict";
+const React = require("react");
+const TextContext = React.createContext(null);
+exports.TextContext = TextContext;

package/dist/lib/components/Text/TextContext.mjs

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+const TextContext = createContext(null);
+export {
+  TextContext
+};

package/dist/lib/components/TextDropdown/TextDropdown.cjs

@@ -0,0 +1,92 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const assert = require("assert");
+const lib_components_private_Overlay_Overlay_cjs = require("../private/Overlay/Overlay.cjs");
+const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
+const lib_components_Text_TextContext_cjs = require("../Text/TextContext.cjs");
+const lib_components_Heading_HeadingContext_cjs = require("../Heading/HeadingContext.cjs");
+const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
+const lib_components_TextDropdown_TextDropdown_css_cjs = require("./TextDropdown.css.cjs");
+const lib_components_icons_IconChevron_IconChevron_cjs = require("../icons/IconChevron/IconChevron.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
+function parseSimpleToComplexOption(option) {
+  return typeof option === "object" && option !== null && "text" in option && "value" in option ? option : { value: option, text: String(option) };
+}
+function TextDropdown({
+  id,
+  value,
+  onChange,
+  onBlur,
+  options,
+  label,
+  data,
+  ...restProps
+}) {
+  assert__default.default(
+    (() => {
+      const inText = React.useContext(lib_components_Text_TextContext_cjs.TextContext);
+      const inHeading = React.useContext(lib_components_Heading_HeadingContext_cjs.HeadingContext);
+      return inText || inHeading;
+    })(),
+    "TextDropdown components must be rendered within a Text or Heading component. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/TextDropdown"
+  );
+  const parsedOptions = options.map(parseSimpleToComplexOption);
+  const [currentText] = parsedOptions.filter((o) => value === o.value);
+  if (!currentText || !currentText.text) {
+    throw new Error(
+      `The provided value of "${value}" does not exist in the provided \`options\` list.`
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    lib_components_Box_Box_cjs.Box,
+    {
+      display: "inlineBlock",
+      position: "relative",
+      ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Box_Box_cjs.Box, { pointerEvents: "none", userSelect: "none", children: [
+          currentText.text,
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconChevron_IconChevron_cjs.IconChevron, { alignY: "lowercase" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          lib_components_Box_Box_cjs.Box,
+          {
+            component: "select",
+            position: "absolute",
+            inset: 0,
+            width: "full",
+            opacity: 0,
+            className: lib_components_TextDropdown_TextDropdown_css_cjs.select,
+            "aria-label": label,
+            title: label,
+            id,
+            value: String(value),
+            onChange: (ev) => {
+              if (typeof onChange === "function") {
+                const newValue = parsedOptions[ev.currentTarget.selectedIndex].value;
+                onChange(newValue);
+              }
+            },
+            onBlur,
+            children: /* @__PURE__ */ jsxRuntime.jsx("optgroup", { label, children: parsedOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: String(option.value), children: option.text }, String(option.value))) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          lib_components_private_Overlay_Overlay_cjs.Overlay,
+          {
+            boxShadow: "outlineFocus",
+            borderRadius: "standard",
+            transition: "fast",
+            onlyVisibleForKeyboardNavigation: true,
+            className: lib_components_TextDropdown_TextDropdown_css_cjs.focusOverlay
+          }
+        )
+      ]
+    }
+  );
+}
+exports.TextDropdown = TextDropdown;
+exports.parseSimpleToComplexOption = parseSimpleToComplexOption;

package/dist/lib/components/TextDropdown/TextDropdown.css.cjs

@@ -0,0 +1,25 @@
+"use strict";
+const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const cssUtils = require("@vanilla-extract/css-utils");
+const lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
+const lib_components_private_touchable_virtualTouchableRules_cjs = require("../private/touchable/virtualTouchableRules.cjs");
+__vanilla_filescope__.setFileScope("src/lib/components/TextDropdown/TextDropdown.css.ts", "braid-design-system");
+const select = css.style({
+  ...lib_components_private_touchable_virtualTouchableRules_cjs.virtualTouchableRules
+}, "select");
+const focusOverlay = [css.style({
+  selectors: {
+    [`${select}:focus ~ &`]: {
+      opacity: 1
+    }
+  }
+}, "focusOverlay"), css.style({
+  top: cssUtils.calc.negate(lib_themes_vars_css_cjs.vars.space.xxsmall),
+  bottom: cssUtils.calc.negate(lib_themes_vars_css_cjs.vars.space.xxsmall),
+  left: cssUtils.calc.negate(lib_themes_vars_css_cjs.vars.space.xxsmall),
+  right: cssUtils.calc.negate(lib_themes_vars_css_cjs.vars.space.xxsmall)
+}, "focusOverlay")];
+__vanilla_filescope__.endFileScope();
+exports.focusOverlay = focusOverlay;
+exports.select = select;