braid-design-system 32.16.0 → 32.16.2

package/dist/styles/lib/components/Stepper/Stepper.mjs

@@ -1,124 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import assert from "assert";
-import { Children } from "react";
-import { flattenChildren, Text } from "../Accordion/AccordionItem.mjs";
-import { buildDataAttributes } from "../Accordion/Accordion.mjs";
-import { Box } from "../Box/Box.mjs";
-import { Hidden } from "../Hidden/Hidden.mjs";
-import { StepContext, StepperContextProvider } from "./Step.mjs";
-import { stretch, stretchLastAboveTablet, progressTrack } from "./Stepper.css.mjs";
-const resolveActiveStep = (mode, progress, activeStep) => {
-  if (mode === "linear" && (typeof activeStep === "undefined" || activeStep > progress)) {
-    return progress;
-  }
-  return activeStep || 0;
-};
-const Stepper = ({
-  activeStep,
-  label,
-  mode = "linear",
-  tone,
-  children,
-  data,
-  align = "center",
-  id,
-  onStepClick,
-  ...restProps
-}) => {
-  const steps = flattenChildren(children);
-  const stepCount = steps.length;
-  const isLinear = mode === "linear";
-  const progress = "progress" in restProps ? restProps.progress : 0;
-  const activeStepNumber = resolveActiveStep(mode, progress, activeStep);
-  let stepName = "";
-  const stepItems = Children.map(steps, (child, index) => {
-    const stepNumber = index + 1;
-    const isLast = stepNumber === stepCount;
-    assert(
-      !child || child.type.__isStep__,
-      "Only Step elements can be direct children of a Stepper. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/Stepper"
-    );
-    if (stepNumber === activeStepNumber && typeof child === "object") {
-      stepName = child.props.children;
-    }
-    return /* @__PURE__ */ jsx(
-      StepContext.Provider,
-      {
-        value: {
-          stepNumber,
-          isLast
-        },
-        children: /* @__PURE__ */ jsx(
-          Box,
-          {
-            component: "li",
-            className: [
-              !isLast ? stretch : void 0,
-              isLast && align === "center" ? stretchLastAboveTablet : void 0
-            ],
-            children: child
-          }
-        )
-      }
-    );
-  });
-  return /* @__PURE__ */ jsx(
-    StepperContextProvider,
-    {
-      activeStep: activeStepNumber,
-      tone,
-      align,
-      progress,
-      stepCount: stepItems.length,
-      isLinear,
-      onStepClick,
-      children: /* @__PURE__ */ jsxs(
-        Box,
-        {
-          component: "nav",
-          position: "relative",
-          "aria-label": label,
-          id,
-          ...buildDataAttributes({ data, validateRestProps: restProps }),
-          children: [
-            /* @__PURE__ */ jsx(
-              Box,
-              {
-                component: "ol",
-                display: "flex",
-                paddingBottom: { mobile: "medium", tablet: "none" },
-                justifyContent: {
-                  mobile: "spaceBetween",
-                  tablet: align === "center" ? "center" : void 0
-                },
-                children: stepItems
-              }
-            ),
-            isLinear ? /* @__PURE__ */ jsx(
-              Box,
-              {
-                component: "span",
-                position: "absolute",
-                pointerEvents: "none",
-                className: progressTrack,
-                role: "progressbar",
-                "aria-valuemin": 0,
-                "aria-valuemax": stepCount - 1,
-                "aria-valuenow": progress > 0 ? progress - 1 : void 0,
-                "aria-valuetext": progress > 0 ? label : void 0,
-                style: {
-                  left: `${(100 - (stepCount - 1) / stepCount * 100) / 2}%`,
-                  width: `${(progress - 1) / stepCount * 100}%`
-                }
-              }
-            ) : null,
-            /* @__PURE__ */ jsx(Hidden, { above: "mobile", children: /* @__PURE__ */ jsx(Text, { weight: "strong", children: stepName }) })
-          ]
-        }
-      )
-    }
-  );
-};
-export {
-  Stepper
-};

package/dist/styles/lib/components/Strong/Strong.cjs

@@ -1,14 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const styles_lib_components_Accordion_Accordion_cjs = require("../Accordion/Accordion.cjs");
-const styles_lib_css_typography_css_cjs = require("../../css/typography.css.cjs");
-const Strong = ({ children, data, id, ...restProps }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "strong",
-  {
-    className: styles_lib_css_typography_css_cjs.fontWeight.strong,
-    id,
-    ...styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
-    children
-  }
-);
-exports.Strong = Strong;

package/dist/styles/lib/components/Strong/Strong.mjs

@@ -1,15 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { buildDataAttributes } from "../Accordion/Accordion.mjs";
-import { fontWeight } from "../../css/typography.css.mjs";
-const Strong = ({ children, data, id, ...restProps }) => /* @__PURE__ */ jsx(
-  "strong",
-  {
-    className: fontWeight.strong,
-    id,
-    ...buildDataAttributes({ data, validateRestProps: restProps }),
-    children
-  }
-);
-export {
-  Strong
-};

package/dist/styles/lib/components/Tabs/Tab.cjs

@@ -1,394 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const assert = require("assert");
-const styles_lib_components_Box_Box_cjs = require("../Box/Box.cjs");
-const styles_lib_components_Autosuggest_Autosuggest_cjs = require("../Autosuggest/Autosuggest.cjs");
-const styles_lib_components_Accordion_AccordionItem_cjs = require("../Accordion/AccordionItem.cjs");
-const styles_lib_components_Accordion_Accordion_cjs = require("../Accordion/Accordion.cjs");
-const sideEffects_lib_components_BraidProvider_BraidProvider_cjs = require("../../../../side-effects/lib/components/BraidProvider/BraidProvider.cjs");
-const styles_lib_components_Tabs_Tabs_css_cjs = require("./Tabs.css.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
-const useSpace = () => sideEffects_lib_components_BraidProvider_BraidProvider_cjs.useBraidTheme().space;
-const TAB_BUTTON_RIGHT = 0;
-const TAB_BUTTON_LEFT = 1;
-const TAB_BUTTON_HOME = 2;
-const TAB_BUTTON_END = 3;
-const TAB_BUTTON_TAB = 4;
-const TAB_BUTTON_ENTER = 5;
-const TAB_BUTTON_SPACE = 6;
-const TAB_BUTTON_CLICK = 7;
-const TAB_LIST_UPDATED = 8;
-const TAB_LIST_FOCUSED = 9;
-const TAB_PANELS_UPDATED = 10;
-const TAB_BUTTON_REGISTER = 11;
-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
-  })
-});
-const TabsContext = React.createContext(null);
-const TabsProvider = ({
-  children,
-  onChange,
-  id,
-  selectedItem
-}) => {
-  const [tabsState, dispatch] = React.useReducer(
-    (state, action) => {
-      switch (action.type) {
-        case TAB_BUTTON_LEFT: {
-          return {
-            ...state,
-            focusedTabIndex: styles_lib_components_Autosuggest_Autosuggest_cjs.getNextIndex(
-              -1,
-              state.focusedTabIndex,
-              state.tabItems.length
-            )
-          };
-        }
-        case TAB_BUTTON_RIGHT: {
-          return {
-            ...state,
-            focusedTabIndex: styles_lib_components_Autosuggest_Autosuggest_cjs.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__ */ jsxRuntime.jsx(
-    TabsContext.Provider,
-    {
-      value: {
-        ...tabsState,
-        selectedIndex: typeof selectedItem !== "undefined" ? tabsState.tabItems.indexOf(selectedItem) : tabsState.selectedIndex,
-        selectedItem,
-        dispatch,
-        a11y: tabA11y({ uniqueId: id }),
-        onChange
-      },
-      children
-    }
-  );
-};
-const TabListContext = React.createContext(null);
-const paddingX = "small";
-const Tab = ({
-  children,
-  data,
-  badge,
-  icon,
-  item,
-  ...restProps
-}) => {
-  const tabsContext = React.useContext(TabsContext);
-  const tabListContext = React.useContext(TabListContext);
-  const tabRef = React.useRef(null);
-  assert__default.default(
-    tabListContext !== null,
-    "A Tab must be rendered as a child of Tabs. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/Tab"
-  );
-  assert__default.default(
-    // @ts-expect-error
-    !badge || badge.type.__isBadge__,
-    `Tab badge prop can only be an instance of Badge. e.g. <Tab badge={<Badge>New</Badge>}>`
-  );
-  assert__default.default(
-    !badge || badge.props.bleedY === void 0,
-    "Badge elements cannot set the 'bleedY' prop when passed to a Tab component"
-  );
-  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 Tab component"
-  );
-  if (!tabListContext) {
-    throw new Error("Tab rendered outside Tabs context");
-  }
-  if (!tabsContext) {
-    throw new Error("Tab rendered outside TabsProvider");
-  }
-  const {
-    focusedTabIndex,
-    selectedIndex,
-    selectedItem,
-    dispatch,
-    a11y,
-    onChange
-  } = tabsContext;
-  const { tabListItemIndex, scrollContainer, isLast } = tabListContext;
-  const isSelected = selectedIndex > -1 ? selectedIndex === tabListItemIndex : selectedItem === item;
-  const isFocused = focusedTabIndex === tabListItemIndex;
-  const { grid, space } = useSpace();
-  React.useEffect(() => {
-    if (tabRef.current && isFocused) {
-      tabRef.current.focus();
-    }
-  }, [isFocused]);
-  const firstRenderRef = React.useRef(true);
-  const isMobile = styles_lib_components_Autosuggest_Autosuggest_cjs.useResponsiveValue()({
-    mobile: true,
-    tablet: false
-  });
-  React.useEffect(() => {
-    if (!tabRef.current || !scrollContainer) {
-      return;
-    }
-    if (isSelected || isFocused) {
-      if (isMobile) {
-        styles_lib_components_Autosuggest_Autosuggest_cjs.smoothScroll(tabRef.current, {
-          scrollContainer,
-          direction: "horizontal",
-          offset: space[paddingX] * grid * 3,
-          ...firstRenderRef.current ? { duration: 0 } : { speed: 0.7 }
-        });
-      } else {
-        styles_lib_components_Autosuggest_Autosuggest_cjs.smoothScrollIntoView(tabRef.current, {
-          scrollContainer,
-          direction: "horizontal",
-          offset: space[paddingX] * grid * 6,
-          ...firstRenderRef.current ? { duration: 0 } : { speed: 0.7 }
-        });
-      }
-    }
-    firstRenderRef.current = false;
-  }, [isSelected, isFocused, scrollContainer, space, grid, isMobile]);
-  React.useEffect(() => {
-    if (tabRef.current) {
-      dispatch({
-        type: TAB_BUTTON_REGISTER,
-        tabEl: tabRef.current,
-        tabListItemIndex
-      });
-    }
-  }, [dispatch, tabListItemIndex]);
-  const onKeyUp = (event) => {
-    const targetKey = styles_lib_components_Autosuggest_Autosuggest_cjs.normalizeKey(event);
-    if (targetKey === "Tab") {
-      return;
-    }
-    if (onChange && (targetKey === "Enter" || targetKey === " ")) {
-      onChange(tabListItemIndex, item);
-    }
-    const action = {
-      ArrowRight: { type: TAB_BUTTON_RIGHT },
-      ArrowLeft: { type: TAB_BUTTON_LEFT },
-      Home: { type: TAB_BUTTON_HOME },
-      End: { type: TAB_BUTTON_END },
-      Enter: { type: TAB_BUTTON_ENTER, value: tabListItemIndex },
-      " ": { type: TAB_BUTTON_SPACE, value: tabListItemIndex }
-    };
-    if (action[targetKey]) {
-      dispatch(action[targetKey]);
-    }
-  };
-  const onKeyDown = (event) => {
-    const targetKey = styles_lib_components_Autosuggest_Autosuggest_cjs.normalizeKey(event);
-    if (targetKey === "Tab" && focusedTabIndex !== null) {
-      dispatch({ type: TAB_BUTTON_TAB });
-      return;
-    }
-    const isArrowPress = targetKey.indexOf("Arrow") === 0;
-    const isActionKeyPress = targetKey === "Enter" || targetKey === " ";
-    if (isArrowPress || isActionKeyPress) {
-      event.preventDefault();
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    styles_lib_components_Box_Box_cjs.Box,
-    {
-      component: "button",
-      type: "button",
-      ...a11y.tabProps({ tabIndex: tabListItemIndex, isSelected }),
-      ref: tabRef,
-      onKeyUp,
-      onKeyDown,
-      onClick: (event) => {
-        event.stopPropagation();
-        event.preventDefault();
-        if (onChange) {
-          onChange(tabListItemIndex, item);
-        }
-        dispatch({ type: TAB_BUTTON_CLICK, value: tabListItemIndex });
-      },
-      onFocus: isSelected ? () => dispatch({
-        type: TAB_LIST_FOCUSED,
-        value: tabListItemIndex
-      }) : void 0,
-      display: "flex",
-      alignItems: "center",
-      textAlign: "left",
-      borderRadius: "standard",
-      cursor: "pointer",
-      outline: "none",
-      position: "relative",
-      zIndex: 1,
-      paddingLeft: tabListItemIndex > 0 ? paddingX : void 0,
-      paddingRight: !isLast ? paddingX : void 0,
-      paddingY: "medium",
-      className: styles_lib_components_Tabs_Tabs_css_cjs.tab,
-      ...styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          styles_lib_components_Box_Box_cjs.Box,
-          {
-            component: "span",
-            display: "block",
-            position: "absolute",
-            "aria-hidden": true,
-            transition: "fast",
-            opacity: isSelected ? 0 : void 0,
-            className: icon ? styles_lib_components_Tabs_Tabs_css_cjs.cropToIconX : void 0,
-            children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.Text, { tone: "secondary", icon, children })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          styles_lib_components_Box_Box_cjs.Box,
-          {
-            component: "span",
-            display: "block",
-            position: "absolute",
-            "aria-hidden": true,
-            transition: "fast",
-            opacity: 0,
-            className: [
-              !isSelected ? styles_lib_components_Tabs_Tabs_css_cjs.hoveredTab : void 0,
-              icon ? styles_lib_components_Tabs_Tabs_css_cjs.cropToIconX : void 0
-            ],
-            children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.Text, { icon, children })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          styles_lib_components_Box_Box_cjs.Box,
-          {
-            component: "span",
-            display: "block",
-            transition: "fast",
-            opacity: !isSelected ? 0 : void 0,
-            className: icon ? styles_lib_components_Tabs_Tabs_css_cjs.cropToIconX : void 0,
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              styles_lib_components_Accordion_AccordionItem_cjs.Text,
-              {
-                ...a11y.tabLabelProps({ tabIndex: tabListItemIndex }),
-                tone: "formAccent",
-                icon,
-                children
-              }
-            )
-          }
-        ),
-        badge ? /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { component: "span", paddingLeft: "xsmall", children: React.cloneElement(badge, { bleedY: true }) }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          styles_lib_components_Accordion_AccordionItem_cjs.Overlay,
-          {
-            component: "span",
-            zIndex: 1,
-            boxShadow: "outlineFocus",
-            borderRadius: "standard",
-            className: styles_lib_components_Tabs_Tabs_css_cjs.tabFocusRing,
-            visible: false,
-            transition: "fast",
-            onlyVisibleForKeyboardNavigation: true
-          }
-        )
-      ]
-    }
-  );
-};
-Tab.__isTab__ = true;
-exports.TAB_LIST_UPDATED = TAB_LIST_UPDATED;
-exports.TAB_PANELS_UPDATED = TAB_PANELS_UPDATED;
-exports.Tab = Tab;
-exports.TabListContext = TabListContext;
-exports.TabsContext = TabsContext;
-exports.TabsProvider = TabsProvider;
-exports.useSpace = useSpace;