braid-design-system 32.16.0 → 32.16.2

package/dist/styles/lib/components/Rating/Rating.css.cjs

@@ -1,27 +0,0 @@
-"use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const styles_lib_css_colorModeStyle_cjs = require("../../css/colorModeStyle.cjs");
-const styles_lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
-__vanilla_filescope__.setFileScope("src/lib/components/Rating/Rating.css.ts", "braid-design-system");
-const lightModeStarColor = css.style(styles_lib_css_colorModeStyle_cjs.colorModeStyle({
-  lightMode: {
-    color: styles_lib_themes_vars_css_cjs.vars.foregroundColor.rating
-  }
-}), "lightModeStarColor");
-const darkModeStarColor = css.style(styles_lib_css_colorModeStyle_cjs.colorModeStyle({
-  darkMode: {
-    color: styles_lib_themes_vars_css_cjs.vars.foregroundColor.rating
-  }
-}), "darkModeStarColor");
-const starSpacing = css.style({
-  paddingRight: "1px"
-}, "starSpacing");
-const textSpacing = css.style({
-  paddingLeft: "0.4em"
-}, "textSpacing");
-__vanilla_filescope__.endFileScope();
-exports.darkModeStarColor = darkModeStarColor;
-exports.lightModeStarColor = lightModeStarColor;
-exports.starSpacing = starSpacing;
-exports.textSpacing = textSpacing;

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

@@ -1,124 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import assert from "assert";
-import dedent from "dedent";
-import { useBackground } from "../Box/BackgroundContext.mjs";
-import { useIcon } from "../../hooks/useIcon/index.mjs";
-import { Box } from "../Box/Box.mjs";
-import { Text, IconStarSvg, IconStarActiveSvg } from "../Accordion/AccordionItem.mjs";
-import { starSpacing, textSpacing, lightModeStarColor, darkModeStarColor } from "./Rating.css.mjs";
-const IconStarHalfSvg = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    viewBox: "0 0 24 24",
-    focusable: "false",
-    fill: "currentColor",
-    "aria-labelledby": titleId,
-    ...props,
-    children: [
-      title ? /* @__PURE__ */ jsx("title", { id: titleId, children: title }) : null,
-      /* @__PURE__ */ jsx("path", { d: "M22.951 8.954a1 1 0 0 0-.806-.68l-6.391-.935-2.858-5.782a1.042 1.042 0 0 0-1.793 0L8.246 7.339l-6.39.934a1 1 0 0 0-.553 1.706l4.623 4.498-1.091 6.354a1 1 0 0 0 1.45 1.054L12 18.883l5.715 3.002a1 1 0 0 0 1.45-1.054l-1.09-6.354 4.622-4.497a1.002 1.002 0 0 0 .254-1.026Zm-6.648 4.456a1 1 0 0 0-.288.886l.837 4.877-4.387-2.305a.99.99 0 0 0-.465-.115V4.257l2.193 4.44a1 1 0 0 0 .752.545l4.905.717Z" })
-    ]
-  }
-);
-const getPercent = (rating, position) => Math.round(Math.min(Math.max(rating - position, 0), 1) * 100);
-const RatingStar = ({ percent, ...restProps }) => {
-  const currentBg = useBackground();
-  const { className, ...iconProps } = useIcon(restProps);
-  let component = IconStarSvg;
-  if (percent >= 25 && percent < 75) {
-    component = IconStarHalfSvg;
-  }
-  if (percent >= 75) {
-    component = IconStarActiveSvg;
-  }
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      component,
-      ...iconProps,
-      className: [
-        className,
-        {
-          [lightModeStarColor]: currentBg.lightMode === "body" || currentBg.lightMode === "surface"
-        },
-        {
-          [darkModeStarColor]: currentBg.darkMode === "body" || currentBg.darkMode === "surface"
-        }
-      ]
-    }
-  );
-};
-const ratingArr = [...Array(5)];
-const Rating = ({
-  rating,
-  size = "standard",
-  weight,
-  showTextRating,
-  variant: variantProp,
-  "aria-label": ariaLabel,
-  data
-}) => {
-  assert(
-    !rating || rating >= 0 && rating <= 5,
-    "Rating must be between 0 and 5"
-  );
-  const variant = variantProp || "full";
-  const resolvedVariant = showTextRating === false && !variantProp ? "starsOnly" : variant;
-  if (process.env.NODE_ENV !== "production") {
-    if (typeof showTextRating !== "undefined") {
-      console.warn(
-        dedent`
-          The "showTextRating" prop has been deprecated and will be removed in a future version. Use \`variant="starsOnly"\` instead.
-             <Rating
-            %c-   showTextRating={false}
-            %c+   variant="starsOnly"
-             %c/>
-        `,
-        "color: red",
-        "color: green",
-        "color: inherit"
-      );
-    }
-    if (typeof weight !== "undefined" && resolvedVariant === "starsOnly") {
-      console.warn(
-        dedent`
-          The "weight" prop is not valid with the "starsOnly" variant as there is no visible text. Either remove the \`weight\` prop or choose an alternative \`variant\`.
-             <Rating
-            %c-  weight="strong"
-            %c   variant="starsOnly"
-             />
-        `,
-        "color: red",
-        "color: inherit"
-      );
-    }
-  }
-  return /* @__PURE__ */ jsxs(Text, { size, data, weight, children: [
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        display: "inlineBlock",
-        "aria-label": ariaLabel || `${rating.toFixed(1)} out of ${ratingArr.length}`,
-        children: resolvedVariant === "minimal" ? /* @__PURE__ */ jsx(Box, { display: "inlineBlock", "aria-hidden": true, children: /* @__PURE__ */ jsx(RatingStar, { percent: 100 }) }) : ratingArr.map((_, position) => /* @__PURE__ */ jsx(
-          Box,
-          {
-            display: "inlineBlock",
-            "aria-hidden": true,
-            className: {
-              [starSpacing]: position !== ratingArr.length - 1
-            },
-            children: /* @__PURE__ */ jsx(RatingStar, { percent: getPercent(rating, position) })
-          },
-          position
-        ))
-      }
-    ),
-    resolvedVariant !== "starsOnly" && /* @__PURE__ */ jsx(Box, { component: "span", className: textSpacing, "aria-hidden": true, children: rating.toFixed(1) })
-  ] });
-};
-export {
-  Rating
-};

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

@@ -1,19 +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 Secondary = ({
-  children,
-  data,
-  id,
-  ...restProps
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  "span",
-  {
-    className: styles_lib_css_typography_css_cjs.tone.secondary,
-    id,
-    ...styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
-    children
-  }
-);
-exports.Secondary = Secondary;

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

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

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

@@ -1,141 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const styles_lib_components_Accordion_AccordionItem_cjs = require("../Accordion/AccordionItem.cjs");
-const assert = require("assert");
-const styles_lib_components_Box_Box_cjs = require("../Box/Box.cjs");
-const styles_lib_components_Divider_Divider_cjs = require("../Divider/Divider.cjs");
-const styles_lib_components_Hidden_Hidden_cjs = require("../Hidden/Hidden.cjs");
-const styles_lib_components_Hidden_Hidden_css_cjs = require("../Hidden/Hidden.css.cjs");
-const styles_lib_utils_align_cjs = require("../../utils/align.cjs");
-const styles_lib_components_Column_Column_cjs = require("../Column/Column.cjs");
-const styles_lib_css_negativeMargin_negativeMargin_cjs = require("../../css/negativeMargin/negativeMargin.cjs");
-const styles_lib_css_atoms_sprinkles_css_cjs = require("../../css/atoms/sprinkles.css.cjs");
-const styles_lib_components_Accordion_Accordion_cjs = require("../Accordion/Accordion.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
-const alignToDisplay = {
-  left: "block",
-  center: "flex",
-  right: "flex"
-};
-const validStackComponents = ["div", "span", "ol", "ul"];
-const useStackItem = ({ align, space, component }) => ({
-  paddingTop: space,
-  display: component === "span" ? "block" : void 0,
-  // If we're aligned left across all screen sizes,
-  // there's actually no alignment work to do.
-  ...align === "left" ? null : {
-    display: styles_lib_css_atoms_sprinkles_css_cjs.mapResponsiveValue(align, (value) => alignToDisplay[value]),
-    flexDirection: "column",
-    alignItems: styles_lib_utils_align_cjs.alignToFlexAlign(align)
-  }
-});
-const extractHiddenPropsFromChild = (child) => child && typeof child === "object" && "type" in child && child.type === styles_lib_components_Hidden_Hidden_cjs.Hidden ? child.props : null;
-const resolveHiddenProps = ({ screen, above, below }) => screen ? [true, true, true, true] : styles_lib_components_Hidden_Hidden_cjs.resolveResponsiveRangeProps({
-  above,
-  below
-});
-const calculateHiddenStackItemProps = (stackItemProps, [hiddenOnMobile, hiddenOnTablet, hiddenOnDesktop, hiddenOnWide]) => {
-  const normalizedValue = styles_lib_css_atoms_sprinkles_css_cjs.normalizeResponsiveValue(
-    stackItemProps.display !== void 0 ? stackItemProps.display : "block"
-  );
-  const {
-    mobile: displayMobile = "block",
-    tablet: displayTablet = displayMobile,
-    desktop: displayDesktop = displayTablet,
-    wide: displayWide = displayDesktop
-  } = normalizedValue;
-  return {
-    ...stackItemProps,
-    display: styles_lib_components_Column_Column_cjs.optimizeResponsiveArray([
-      hiddenOnMobile ? "none" : displayMobile,
-      hiddenOnTablet ? "none" : displayTablet,
-      hiddenOnDesktop ? "none" : displayDesktop,
-      hiddenOnWide ? "none" : displayWide
-    ])
-  };
-};
-const Stack = ({
-  component = "div",
-  children,
-  space = "none",
-  align = "left",
-  dividers = false,
-  data,
-  ...restProps
-}) => {
-  assert__default.default(
-    validStackComponents.includes(component),
-    `Invalid Stack component: '${component}'. Should be one of [${validStackComponents.map((c) => `'${c}'`).join(", ")}]`
-  );
-  const stackItemProps = useStackItem({ space, align, component });
-  const stackItems = styles_lib_components_Accordion_AccordionItem_cjs.flattenChildren(children);
-  const isList = component === "ol" || component === "ul";
-  const stackItemComponent = isList ? "li" : component;
-  let firstItemOnMobile = null;
-  let firstItemOnTablet = null;
-  let firstItemOnDesktop = null;
-  let firstItemOnWide = null;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    styles_lib_components_Box_Box_cjs.Box,
-    {
-      component,
-      display: component === "span" ? "block" : void 0,
-      className: styles_lib_css_negativeMargin_negativeMargin_cjs.negativeMargin("top", space),
-      ...styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
-      children: React.Children.map(stackItems, (child, index) => {
-        assert__default.default(
-          !(typeof child === "object" && child.type === styles_lib_components_Hidden_Hidden_cjs.Hidden && child.props.inline !== void 0),
-          'The "inline" prop is invalid on Hidden elements within a Stack'
-        );
-        const hiddenProps = extractHiddenPropsFromChild(child);
-        const hidden = hiddenProps ? resolveHiddenProps(hiddenProps) : [false, false, false, false];
-        const [hiddenOnMobile, hiddenOnTablet, hiddenOnDesktop, hiddenOnWide] = hidden;
-        const responsivelyHidden = hiddenOnMobile || hiddenOnTablet || hiddenOnDesktop || hiddenOnWide;
-        if (firstItemOnMobile === null && !hiddenOnMobile) {
-          firstItemOnMobile = index;
-        }
-        if (firstItemOnTablet === null && !hiddenOnTablet) {
-          firstItemOnTablet = index;
-        }
-        if (firstItemOnDesktop === null && !hiddenOnDesktop) {
-          firstItemOnDesktop = index;
-        }
-        if (firstItemOnWide === null && !hiddenOnWide) {
-          firstItemOnWide = index;
-        }
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          styles_lib_components_Box_Box_cjs.Box,
-          {
-            component: stackItemComponent,
-            className: [
-              hiddenProps && hiddenProps.print ? styles_lib_components_Hidden_Hidden_css_cjs.hiddenOnPrint : null
-            ],
-            ...responsivelyHidden ? calculateHiddenStackItemProps(stackItemProps, hidden) : stackItemProps,
-            children: [
-              dividers && index > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-                styles_lib_components_Box_Box_cjs.Box,
-                {
-                  component: "span",
-                  width: "full",
-                  paddingBottom: space,
-                  display: styles_lib_components_Column_Column_cjs.optimizeResponsiveArray([
-                    index === firstItemOnMobile ? "none" : "block",
-                    index === firstItemOnTablet ? "none" : "block",
-                    index === firstItemOnDesktop ? "none" : "block",
-                    index === firstItemOnWide ? "none" : "block"
-                  ]),
-                  children: typeof dividers === "string" ? /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Divider_Divider_cjs.Divider, { weight: dividers }) : /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Divider_Divider_cjs.Divider, {})
-                }
-              ) : null,
-              hiddenProps ? hiddenProps.children : child
-            ]
-          }
-        );
-      })
-    }
-  );
-};
-exports.Stack = Stack;
-exports.validStackComponents = validStackComponents;

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

@@ -1,140 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Children } from "react";
-import { flattenChildren } from "../Accordion/AccordionItem.mjs";
-import assert from "assert";
-import { Box } from "../Box/Box.mjs";
-import { Divider } from "../Divider/Divider.mjs";
-import { Hidden, resolveResponsiveRangeProps } from "../Hidden/Hidden.mjs";
-import { hiddenOnPrint } from "../Hidden/Hidden.css.mjs";
-import { alignToFlexAlign } from "../../utils/align.mjs";
-import { optimizeResponsiveArray } from "../Column/Column.mjs";
-import { negativeMargin } from "../../css/negativeMargin/negativeMargin.mjs";
-import { mapResponsiveValue, normalizeResponsiveValue } from "../../css/atoms/sprinkles.css.mjs";
-import { buildDataAttributes } from "../Accordion/Accordion.mjs";
-const alignToDisplay = {
-  left: "block",
-  center: "flex",
-  right: "flex"
-};
-const validStackComponents = ["div", "span", "ol", "ul"];
-const useStackItem = ({ align, space, component }) => ({
-  paddingTop: space,
-  display: component === "span" ? "block" : void 0,
-  // If we're aligned left across all screen sizes,
-  // there's actually no alignment work to do.
-  ...align === "left" ? null : {
-    display: mapResponsiveValue(align, (value) => alignToDisplay[value]),
-    flexDirection: "column",
-    alignItems: alignToFlexAlign(align)
-  }
-});
-const extractHiddenPropsFromChild = (child) => child && typeof child === "object" && "type" in child && child.type === Hidden ? child.props : null;
-const resolveHiddenProps = ({ screen, above, below }) => screen ? [true, true, true, true] : resolveResponsiveRangeProps({
-  above,
-  below
-});
-const calculateHiddenStackItemProps = (stackItemProps, [hiddenOnMobile, hiddenOnTablet, hiddenOnDesktop, hiddenOnWide]) => {
-  const normalizedValue = normalizeResponsiveValue(
-    stackItemProps.display !== void 0 ? stackItemProps.display : "block"
-  );
-  const {
-    mobile: displayMobile = "block",
-    tablet: displayTablet = displayMobile,
-    desktop: displayDesktop = displayTablet,
-    wide: displayWide = displayDesktop
-  } = normalizedValue;
-  return {
-    ...stackItemProps,
-    display: optimizeResponsiveArray([
-      hiddenOnMobile ? "none" : displayMobile,
-      hiddenOnTablet ? "none" : displayTablet,
-      hiddenOnDesktop ? "none" : displayDesktop,
-      hiddenOnWide ? "none" : displayWide
-    ])
-  };
-};
-const Stack = ({
-  component = "div",
-  children,
-  space = "none",
-  align = "left",
-  dividers = false,
-  data,
-  ...restProps
-}) => {
-  assert(
-    validStackComponents.includes(component),
-    `Invalid Stack component: '${component}'. Should be one of [${validStackComponents.map((c) => `'${c}'`).join(", ")}]`
-  );
-  const stackItemProps = useStackItem({ space, align, component });
-  const stackItems = flattenChildren(children);
-  const isList = component === "ol" || component === "ul";
-  const stackItemComponent = isList ? "li" : component;
-  let firstItemOnMobile = null;
-  let firstItemOnTablet = null;
-  let firstItemOnDesktop = null;
-  let firstItemOnWide = null;
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      component,
-      display: component === "span" ? "block" : void 0,
-      className: negativeMargin("top", space),
-      ...buildDataAttributes({ data, validateRestProps: restProps }),
-      children: Children.map(stackItems, (child, index) => {
-        assert(
-          !(typeof child === "object" && child.type === Hidden && child.props.inline !== void 0),
-          'The "inline" prop is invalid on Hidden elements within a Stack'
-        );
-        const hiddenProps = extractHiddenPropsFromChild(child);
-        const hidden = hiddenProps ? resolveHiddenProps(hiddenProps) : [false, false, false, false];
-        const [hiddenOnMobile, hiddenOnTablet, hiddenOnDesktop, hiddenOnWide] = hidden;
-        const responsivelyHidden = hiddenOnMobile || hiddenOnTablet || hiddenOnDesktop || hiddenOnWide;
-        if (firstItemOnMobile === null && !hiddenOnMobile) {
-          firstItemOnMobile = index;
-        }
-        if (firstItemOnTablet === null && !hiddenOnTablet) {
-          firstItemOnTablet = index;
-        }
-        if (firstItemOnDesktop === null && !hiddenOnDesktop) {
-          firstItemOnDesktop = index;
-        }
-        if (firstItemOnWide === null && !hiddenOnWide) {
-          firstItemOnWide = index;
-        }
-        return /* @__PURE__ */ jsxs(
-          Box,
-          {
-            component: stackItemComponent,
-            className: [
-              hiddenProps && hiddenProps.print ? hiddenOnPrint : null
-            ],
-            ...responsivelyHidden ? calculateHiddenStackItemProps(stackItemProps, hidden) : stackItemProps,
-            children: [
-              dividers && index > 0 ? /* @__PURE__ */ jsx(
-                Box,
-                {
-                  component: "span",
-                  width: "full",
-                  paddingBottom: space,
-                  display: optimizeResponsiveArray([
-                    index === firstItemOnMobile ? "none" : "block",
-                    index === firstItemOnTablet ? "none" : "block",
-                    index === firstItemOnDesktop ? "none" : "block",
-                    index === firstItemOnWide ? "none" : "block"
-                  ]),
-                  children: typeof dividers === "string" ? /* @__PURE__ */ jsx(Divider, { weight: dividers }) : /* @__PURE__ */ jsx(Divider, {})
-                }
-              ) : null,
-              hiddenProps ? hiddenProps.children : child
-            ]
-          }
-        );
-      })
-    }
-  );
-};
-export {
-  Stack,
-  validStackComponents
-};