@vodafone_de/brix-components 3.1.8 → 3.1.9

package/components/Checkbox/index.js

@@ -1,217 +0,0 @@
-"use client";
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const index = require("../../index-_A9hEpl9.cjs");
-const react = require("react");
-const components_FormHelperMessage = require("../FormHelperMessage/index.js");
-const props = require("../../props-DJ2g0nfk.cjs");
-const styled = require("styled-components");
-const components_Label = require("../Label/index.js");
-const foundations_mediaQuery_forcedColors = require("../../foundations/media-query/forcedColors/index.js");
-const foundations_token_getBodySize = require("../../foundations/token/getBodySize/index.js");
-const foundations_token_getBorderColor = require("../../foundations/token/getBorderColor/index.js");
-const foundations_token_getBorderRadius = require("../../foundations/token/getBorderRadius/index.js");
-const foundations_token_getBorderWidth = require("../../foundations/token/getBorderWidth/index.js");
-const foundations_token_getBottomSpacing = require("../../foundations/token/getBottomSpacing/index.js");
-const foundations_token_getIconColor = require("../../foundations/token/getIconColor/index.js");
-const foundations_token_getObjectColor = require("../../foundations/token/getObjectColor/index.js");
-const foundations_token_getOpacity = require("../../foundations/token/getOpacity/index.js");
-const foundations_token_getSpacing = require("../../foundations/token/getSpacing/index.js");
-const BorderColor = require("../../BorderColor-Bl18ZGTj.cjs");
-const BorderRadius = require("../../BorderRadius-tg_0N_aM.cjs");
-const BorderWidth = require("../../BorderWidth-BLS_JGlE.cjs");
-const Opacity = require("../../Opacity-gfDZhzig.cjs");
-const Spacing = require("../../Spacing-Cu_j2b83.cjs");
-const filterProps = require("../../filterProps-D3K8rtOg.cjs");
-const getCssVar = require("../../getCssVar-CyR1mrKh.cjs");
-const CheckboxLabelStyled = styled(components_Label).withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "CheckboxLabelStyled",
-  componentId: "sc-1lo7iho-0"
-})({
-  cursor: "pointer"
-});
-const CheckboxOuterContainerStyled = styled.div.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "CheckboxOuterContainerStyled",
-  componentId: "sc-1lo7iho-1"
-})(({
-  bottomSpacing = Spacing.spacingMd
-}) => foundations_token_getBottomSpacing.getBottomSpacing({
-  bottomSpacing
-}));
-const CheckboxInnerContainerStyled = styled.div.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "CheckboxInnerContainerStyled",
-  componentId: "sc-1lo7iho-2"
-})({
-  display: "flex",
-  gap: foundations_token_getSpacing.getSpacing("Xs")
-}, ({
-  hasMessage
-}) => {
-  return {
-    marginBottom: hasMessage ? foundations_token_getSpacing.getSpacing("Md") : foundations_token_getSpacing.getSpacing("None")
-  };
-}, ({
-  disabled
-}) => {
-  if (disabled) {
-    return {
-      pointerEvents: "none",
-      opacity: foundations_token_getOpacity.getOpacity(Opacity.opacityDisabled)
-    };
-  }
-});
-const CheckboxStyled = styled.span.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "CheckboxStyled",
-  componentId: "sc-1lo7iho-3"
-})({
-  position: "relative",
-  width: `calc(${foundations_token_getBodySize.getBodySize("md").fontSize} * ${foundations_token_getBodySize.getBodySize("md").lineHeight})`,
-  height: `calc(${foundations_token_getBodySize.getBodySize("md").fontSize} * ${foundations_token_getBodySize.getBodySize("md").lineHeight})`,
-  cursor: "pointer",
-  borderRadius: foundations_token_getBorderRadius.getBorderRadius(BorderRadius.borderRadiusSm),
-  "&:has(:focus-visible)": {
-    svg: {
-      outline: `${foundations_token_getBorderWidth.getBorderWidth(BorderWidth.borderWidthFocus)} solid ${foundations_token_getBorderColor.getBorderColor(BorderColor.colorBorderFocus)}`,
-      borderRadius: foundations_token_getBorderRadius.getBorderRadius(BorderRadius.borderRadiusSm),
-      ...foundations_mediaQuery_forcedColors.default({
-        outline: `${foundations_token_getBorderWidth.getBorderWidth(BorderWidth.borderWidthFocus)} solid CanvasText`
-      })
-    }
-  }
-});
-const CheckboxSVGStyled = styled.svg.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "CheckboxSVGStyled",
-  componentId: "sc-1lo7iho-4"
-})({
-  width: getCssVar.getCssVar(index.iconSizeSm),
-  height: getCssVar.getCssVar(index.iconSizeSm),
-  fill: "none"
-});
-const CheckboxUncheckedSVGStyled = styled.path.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "CheckboxUncheckedSVGStyled",
-  componentId: "sc-1lo7iho-5"
-})({
-  fill: foundations_token_getObjectColor.getObjectColor("colorObjectInverse")
-}, foundations_mediaQuery_forcedColors.default({
-  fill: "Field"
-}), ({
-  status
-}) => {
-  return {
-    stroke: status === "error" ? foundations_token_getBorderColor.getBorderColor("colorBorderCritical") : foundations_token_getBorderColor.getBorderColor("colorBorderUnselected"),
-    ...foundations_mediaQuery_forcedColors.default({
-      stroke: "FieldText"
-    })
-  };
-});
-const CheckboxCheckedBorderPathStyled = styled.path.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "CheckboxCheckedBorderPathStyled",
-  componentId: "sc-1lo7iho-6"
-})(({
-  status
-}) => {
-  return {
-    stroke: status === "error" ? foundations_token_getBorderColor.getBorderColor("colorBorderCritical") : foundations_token_getBorderColor.getBorderColor("colorBorderSelected"),
-    ...foundations_mediaQuery_forcedColors.default({
-      stroke: "FieldText"
-    })
-  };
-});
-const CheckboxCheckedFillingPathStyled = styled.path.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "CheckboxCheckedFillingPathStyled",
-  componentId: "sc-1lo7iho-7"
-})({
-  fill: foundations_token_getObjectColor.getObjectColor("colorObjectSelected")
-}, foundations_mediaQuery_forcedColors.default({
-  fill: "FieldText"
-}));
-const CheckboxCheckedTickPathStyled = styled.path.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "CheckboxCheckedTickPathStyled",
-  componentId: "sc-1lo7iho-8"
-})({
-  stroke: foundations_token_getIconColor.getIconColor("colorIconInverseStatic")
-}, foundations_mediaQuery_forcedColors.default({
-  stroke: "Field"
-}));
-const CheckboxInputStyled = styled.input.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "CheckboxInputStyled",
-  componentId: "sc-1lo7iho-9"
-})({
-  position: "absolute",
-  width: "100%",
-  height: "100%",
-  top: 0,
-  left: 0,
-  zIndex: 1,
-  margin: 0,
-  padding: 0,
-  cursor: "inherit",
-  appearance: "none",
-  "&:focus, &:focus-visible": {
-    outline: "none"
-  }
-});
-const CheckedBox = ({
-  status
-}) => /* @__PURE__ */ jsxRuntime.jsxs(CheckboxSVGStyled, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "none", children: [
-  /* @__PURE__ */ jsxRuntime.jsx(CheckboxCheckedFillingPathStyled, { d: "M0 3C0 1.34315 1.34315 0 3 0H17C18.6569 0 20 1.34315 20 3V17C20 18.6569 18.6569 20 17 20H3C1.34315 20 0 18.6569 0 17V3Z" }),
-  /* @__PURE__ */ jsxRuntime.jsx(CheckboxCheckedBorderPathStyled, { status, d: "M0.5 3C0.5 1.61929 1.61929 0.5 3 0.5H17C18.3807 0.5 19.5 1.61929 19.5 3V17C19.5 18.3807 18.3807 19.5 17 19.5H3C1.61929 19.5 0.5 18.3807 0.5 17V3Z" }),
-  /* @__PURE__ */ jsxRuntime.jsx(CheckboxCheckedTickPathStyled, { d: "M15 6L8.15789 13L5 9.76923", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })
-] });
-const UncheckedBox = ({
-  status
-}) => /* @__PURE__ */ jsxRuntime.jsx(CheckboxSVGStyled, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxUncheckedSVGStyled, { status, d: "M0.5 3C0.5 1.61929 1.61929 0.5 3 0.5H17C18.3807 0.5 19.5 1.61929 19.5 3V17C19.5 18.3807 18.3807 19.5 17 19.5H3C1.61929 19.5 0.5 18.3807 0.5 17V3Z" }) });
-const Checkbox = ({
-  uid,
-  status,
-  label,
-  errorMessage,
-  helperText,
-  onUpdate,
-  disabled,
-  bottomSpacing,
-  ...props$1
-}) => {
-  const [checked, setChecked] = react.useState(true === props$1.checked);
-  react.useEffect(() => {
-    if (checked === props$1.checked) {
-      return;
-    }
-    setChecked(true === props$1.checked);
-  }, [props$1.checked]);
-  const messageId = `text-${uid}`;
-  const inputProps = {
-    ...props$1,
-    id: uid,
-    "aria-describedby": props.inputStateError !== status && helperText || props.inputStateError === status && errorMessage ? messageId : void 0,
-    "aria-invalid": props.inputStateError === status ? true : void 0
-  };
-  const handleChange = (event) => {
-    setChecked(!checked);
-    if (!onUpdate) {
-      return;
-    }
-    onUpdate(event.target.value, event.target.checked === true);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(CheckboxOuterContainerStyled, { className: props$1.className, bottomSpacing, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(CheckboxInnerContainerStyled, { hasMessage: props.inputStateError !== status && helperText || props.inputStateError === status && errorMessage ? true : false, disabled, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(CheckboxStyled, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(CheckboxInputStyled, { ...inputProps, type: "checkbox", onChange: handleChange, checked, disabled }),
-        checked ? /* @__PURE__ */ jsxRuntime.jsx(CheckedBox, { status }) : /* @__PURE__ */ jsxRuntime.jsx(UncheckedBox, { status })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(CheckboxLabelStyled, { htmlFor: uid, children: label })
-    ] }),
-    (props.inputStateError !== status && helperText || props.inputStateError === status && errorMessage) && /* @__PURE__ */ jsxRuntime.jsx(components_FormHelperMessage, { id: messageId, status, message: props.inputStateError === status ? errorMessage : helperText, children: props.inputStateError === status ? /* @__PURE__ */ jsxRuntime.jsx(index.NotificationErrorIcon, { size: index.iconSizeSm }) : null })
-  ] });
-};
-module.exports = Checkbox;

package/components/CheckboxGroup/index.js

@@ -1,57 +0,0 @@
-"use client";
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const components_Checkbox = require("../Checkbox/index.js");
-const components_Fieldset = require("../Fieldset/index.js");
-const Spacing = require("../../Spacing-Cu_j2b83.cjs");
-const styled = require("styled-components");
-const styled$1 = require("../../styled-CL1J-PFC.cjs");
-const foundations_token_getBottomSpacing = require("../../foundations/token/getBottomSpacing/index.js");
-const foundations_token_getSpacing = require("../../foundations/token/getSpacing/index.js");
-const filterProps = require("../../filterProps-D3K8rtOg.cjs");
-const CheckboxGroupStyled = styled(styled$1.FlexStyled).withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "CheckboxGroupStyled",
-  componentId: "sc-b81jcu-0"
-})({
-  rowGap: foundations_token_getSpacing.getSpacing(Spacing.spacingMd),
-  columnGap: foundations_token_getSpacing.getSpacing(Spacing.spacingLg)
-}, foundations_token_getBottomSpacing.getBottomSpacing({
-  bottomSpacing: Spacing.spacingMd
-}));
-const CheckboxGroup = ({
-  component: _component,
-  checkboxes,
-  onUpdate,
-  status,
-  disabled,
-  orientation,
-  ...props
-}) => {
-  const initialCheckedState = () => checkboxes.filter((checkboxes2) => checkboxes2.checked).map((checkboxes2) => checkboxes2.value);
-  const [checkedValues, setCheckedValues] = react.useState(initialCheckedState());
-  react.useEffect(() => {
-    const values = checkboxes.filter((checkboxes2) => checkboxes2.checked).map((checkboxes2) => checkboxes2.value);
-    if (checkedValues === values) {
-      return;
-    }
-    setCheckedValues(values);
-  }, [checkboxes]);
-  const handleUpdate = (value, isChecked) => {
-    let update = checkedValues;
-    if (isChecked) {
-      update.push(value);
-    } else {
-      update = update.filter((val) => val !== value);
-    }
-    setCheckedValues(update);
-    if (onUpdate) {
-      onUpdate(update);
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(components_Fieldset, { ...props, status, disabled, children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxGroupStyled, { orientation, children: checkboxes.map((checkbox) => {
-    return /* @__PURE__ */ react.createElement(components_Checkbox, { ...checkbox, onUpdate: handleUpdate, checked: checkedValues.includes(checkbox.value), key: checkbox.uid, status, disabled, bottomSpacing: Spacing.spacingNone, errorMessage: void 0, helperText: void 0 });
-  }) }) });
-};
-module.exports = CheckboxGroup;

package/components/Collapsible/index.js

@@ -1,84 +0,0 @@
-"use client";
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const styled = require("styled-components");
-const foundations_mediaQuery_reducedMotion = require("../../foundations/media-query/reducedMotion/index.js");
-const easing = require("../../easing-CWOuUocw.cjs");
-const foundations_token_getBorderWidth = require("../../foundations/token/getBorderWidth/index.js");
-const foundations_token_getSpacing = require("../../foundations/token/getSpacing/index.js");
-const BorderWidth = require("../../BorderWidth-BLS_JGlE.cjs");
-const Spacing = require("../../Spacing-Cu_j2b83.cjs");
-const filterProps = require("../../filterProps-D3K8rtOg.cjs");
-const CollapsibleStyled = styled.div.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "CollapsibleStyled",
-  componentId: "sc-12wf2lg-0"
-})({
-  display: "grid",
-  padding: foundations_token_getSpacing.getSpacing(Spacing.spacingNone),
-  transitionProperty: `grid-template-rows`,
-  transitionDuration: `0.001s`,
-  transitionTimingFunction: `${easing.ease_in_out_sine}`,
-  ...foundations_mediaQuery_reducedMotion.noReducedMotion({
-    transitionDuration: `0.5s`
-  })
-}, ({
-  animated = true
-}) => {
-  if (animated) {
-    return {};
-  }
-  return {
-    ...foundations_mediaQuery_reducedMotion.noReducedMotion({
-      transitionDuration: `0.001s`
-    })
-  };
-}, ({
-  expanded
-}) => {
-  return expanded ? {
-    gridTemplateRows: "1fr"
-  } : {
-    gridTemplateRows: "0fr"
-  };
-});
-const CollapsibleContentStyled = styled.div.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "CollapsibleContentStyled",
-  componentId: "sc-12wf2lg-1"
-})({
-  overflow: "hidden",
-  padding: `${foundations_token_getSpacing.getSpacing(Spacing.spacingNone)} ${foundations_token_getBorderWidth.getBorderWidth(BorderWidth.borderWidthFocus)}`,
-  marginLeft: `calc(${foundations_token_getBorderWidth.getBorderWidth(BorderWidth.borderWidthFocus)} * -1)`
-});
-const Collapsible = ({
-  expanded,
-  onTransition,
-  children,
-  animated = true,
-  ...props
-}) => {
-  const ref = react.useRef(null);
-  const isOpenRef = react.useRef(expanded);
-  react.useEffect(() => {
-    isOpenRef.current = expanded;
-  }, [expanded]);
-  const transitionEndHandler = () => {
-    if (onTransition) {
-      onTransition(true === isOpenRef.current);
-    }
-  };
-  react.useEffect(() => {
-    if (!ref || !ref.current) {
-      return;
-    }
-    const element = ref.current;
-    element.addEventListener("transitionend", transitionEndHandler);
-    return () => {
-      element.removeEventListener("transitionend", transitionEndHandler);
-    };
-  }, [ref]);
-  return /* @__PURE__ */ jsxRuntime.jsx(CollapsibleStyled, { ref, ...props, expanded, animated, children: /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContentStyled, { children }) });
-};
-module.exports = Collapsible;

package/components/ColorSwatch/index.js

@@ -1,87 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const colorUtils = require("../../colorUtils-DlX47rtH.cjs");
-const index = require("../../index-_A9hEpl9.cjs");
-const styled = require("styled-components");
-const foundations_mediaQuery_forcedColors = require("../../foundations/media-query/forcedColors/index.js");
-const foundations_token_getBorderColor = require("../../foundations/token/getBorderColor/index.js");
-const foundations_token_getBottomSpacing = require("../../foundations/token/getBottomSpacing/index.js");
-const BorderColor = require("../../BorderColor-Bl18ZGTj.cjs");
-const Spacing = require("../../Spacing-Cu_j2b83.cjs");
-const filterProps = require("../../filterProps-D3K8rtOg.cjs");
-const getCssVar = require("../../getCssVar-CyR1mrKh.cjs");
-const colorSwatchSizeSmall = "sm";
-const colorSwatchSizeMedium = "md";
-const ColorSwatchSVGStyled = styled.svg.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "ColorSwatchSVGStyled",
-  componentId: "sc-ghmea2-0"
-})({
-  strokeWidth: 1,
-  display: "block"
-}, ({
-  size
-}) => {
-  return {
-    width: size === colorSwatchSizeSmall ? "12px" : getCssVar.getCssVar(index.iconSizeMd),
-    height: size === colorSwatchSizeSmall ? "12px" : getCssVar.getCssVar(index.iconSizeMd)
-  };
-}, ({
-  needsBorder,
-  color
-}) => {
-  return {
-    ...foundations_mediaQuery_forcedColors.default({
-      stroke: needsBorder ? "CanvasText" : color
-    }),
-    stroke: needsBorder ? foundations_token_getBorderColor.getBorderColor(BorderColor.colorBorderNeutral) : color
-  };
-}, ({
-  bottomSpacing = Spacing.spacingNone
-}) => foundations_token_getBottomSpacing.getBottomSpacing({
-  bottomSpacing
-}));
-const ColorSwatchCircleStyled = styled.circle.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "ColorSwatchCircleStyled",
-  componentId: "sc-ghmea2-1"
-})(({
-  size
-}) => {
-  const swatchSize = size === colorSwatchSizeSmall ? "12px" : getCssVar.getCssVar(index.iconSizeMd);
-  return {
-    cx: `calc(${swatchSize}/2)`,
-    cy: `calc(${swatchSize}/2)`,
-    r: `calc(${swatchSize}/2 - 0.5px)`,
-    width: "100%",
-    height: "100%"
-  };
-});
-const ColorSwatch = ({
-  color,
-  size,
-  bottomSpacing,
-  ...props
-}) => {
-  const [needsBorder, setNeedsBorder] = react.useState(false);
-  const ref = react.useRef(null);
-  react.useEffect(() => {
-    if (ref.current) {
-      const backgroundColor = colorUtils.getComputedBackgroundColor(ref.current);
-      const swatchColor = colorUtils.parseColorToRgbObject(color);
-      const contrastRatio = colorUtils.getContrastRatio(backgroundColor, swatchColor);
-      if (contrastRatio < 3) {
-        setNeedsBorder(true);
-      } else {
-        setNeedsBorder(false);
-      }
-    }
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(ColorSwatchSVGStyled, { className: props.className, size, ref, color, needsBorder, role: "img", "aria-label": props["aria-label"], "aria-roledescription": "Farbfeld", bottomSpacing, children: /* @__PURE__ */ jsxRuntime.jsx(ColorSwatchCircleStyled, { fill: color, size }) });
-};
-exports.colorSwatchSizeMedium = colorSwatchSizeMedium;
-exports.colorSwatchSizeSmall = colorSwatchSizeSmall;
-exports.default = ColorSwatch;

package/components/ColorSwatchGroup/index.js

@@ -1,42 +0,0 @@
-"use client";
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const Spacing = require("../../Spacing-Cu_j2b83.cjs");
-const components_ColorSwatch = require("../ColorSwatch/index.js");
-const index = require("../../index-_A9hEpl9.cjs");
-const styled = require("styled-components");
-const styled$1 = require("../../styled-CL1J-PFC.cjs");
-const foundations_token_getBottomSpacing = require("../../foundations/token/getBottomSpacing/index.js");
-const filterProps = require("../../filterProps-D3K8rtOg.cjs");
-const getCssVar = require("../../getCssVar-CyR1mrKh.cjs");
-const ColorSwatchListStyled = styled(styled$1.FlexStyled).withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "ColorSwatchListStyled",
-  componentId: "sc-vf24mf-0"
-})(({
-  bottomSpacing = Spacing.spacingMd
-}) => foundations_token_getBottomSpacing.getBottomSpacing({
-  bottomSpacing
-}));
-const ColorSwatchItemStyled = styled.li.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "ColorSwatchItemStyled",
-  componentId: "sc-vf24mf-1"
-})(({
-  size
-}) => {
-  return {
-    width: size === components_ColorSwatch.colorSwatchSizeSmall ? "12px" : getCssVar.getCssVar(index.iconSizeMd),
-    height: size === components_ColorSwatch.colorSwatchSizeSmall ? "12px" : getCssVar.getCssVar(index.iconSizeMd)
-  };
-});
-const ColorSwatchGroup = ({
-  colorSwatches,
-  size,
-  bottomSpacing,
-  ...props
-}) => {
-  const colorSwatchesMap = colorSwatches.map((colorSwatch) => /* @__PURE__ */ jsxRuntime.jsx(ColorSwatchItemStyled, { size, children: /* @__PURE__ */ jsxRuntime.jsx(components_ColorSwatch.default, { ...colorSwatch, size }) }, colorSwatch.color));
-  return colorSwatchesMap.length ? /* @__PURE__ */ jsxRuntime.jsx(ColorSwatchListStyled, { className: props.className, gapSpacing: Spacing.spacing2Xs, as: "ul", "aria-label": props["aria-label"], bottomSpacing, children: colorSwatchesMap }) : null;
-};
-module.exports = ColorSwatchGroup;

package/components/Container/index.js

@@ -1,76 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const styled = require("styled-components");
-const foundations_token_getBackgroundColor = require("../../foundations/token/getBackgroundColor/index.js");
-const foundations_token_getBorderColor = require("../../foundations/token/getBorderColor/index.js");
-const foundations_token_getBorderWidth = require("../../foundations/token/getBorderWidth/index.js");
-const foundations_token_getSpacing = require("../../foundations/token/getSpacing/index.js");
-const foundations_token_getTextColor = require("../../foundations/token/getTextColor/index.js");
-const BorderColor = require("../../BorderColor-Bl18ZGTj.cjs");
-const BorderWidth = require("../../BorderWidth-BLS_JGlE.cjs");
-const Spacing = require("../../Spacing-Cu_j2b83.cjs");
-const TextColor = require("../../TextColor-BZDXH1wP.cjs");
-const filterProps = require("../../filterProps-D3K8rtOg.cjs");
-const BackgroundColor = require("../../BackgroundColor-C3dayRDw.cjs");
-const ContainerAppearanceColor = {
-  primary: BackgroundColor.colorBackgroundNeutral,
-  secondary: BackgroundColor.colorBackgroundSubtle,
-  tertiary: BackgroundColor.colorBackgroundBrandGradient,
-  alternative: BackgroundColor.colorBackgroundBrand
-};
-const ContainerBackgroundStyled = styled.div.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "ContainerBackgroundStyled",
-  componentId: "sc-a9r652-0"
-})({
-  color: foundations_token_getTextColor.getTextColor(TextColor.colorTextNeutral)
-}, ({
-  padding = Spacing.spacingXl
-}) => ({
-  paddingTop: foundations_token_getSpacing.getSpacing(padding),
-  paddingBottom: foundations_token_getSpacing.getSpacing(padding)
-}), ({
-  appearance = "primary"
-}) => {
-  return {
-    background: foundations_token_getBackgroundColor.getBackgroundColor(ContainerAppearanceColor[appearance])
-  };
-}, ({
-  border = false
-}) => {
-  if (!border) {
-    return {};
-  }
-  return {
-    borderBottom: `${foundations_token_getBorderWidth.getBorderWidth(BorderWidth.borderWidthDivider)} solid ${foundations_token_getBorderColor.getBorderColor(BorderColor.colorBorderSubtle)}`
-  };
-});
-const maxWidthBreakpoint = "1280px";
-const maxWidthViewport = (stylesInViewport) => {
-  return {
-    [`@media screen and (min-width: ${maxWidthBreakpoint})`]: {
-      ...stylesInViewport
-    }
-  };
-};
-const ContainerCenterStyled = styled.div.withConfig({
-  displayName: "ContainerCenterStyled",
-  componentId: "sc-a9r652-1"
-})({
-  marginLeft: foundations_token_getSpacing.getSpacing(Spacing.spacingMd),
-  marginRight: foundations_token_getSpacing.getSpacing(Spacing.spacingMd)
-}, maxWidthViewport({
-  maxWidth: `1240px`,
-  marginLeft: "auto",
-  marginRight: "auto"
-}));
-const Container = ({
-  className,
-  children,
-  appearance = "primary",
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(ContainerBackgroundStyled, { className: `${className ? className : ""} ${["tertiary", "alternative"].indexOf(appearance) > -1 ? "Dark" : props.theme}`, appearance, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ContainerCenterStyled, { children }) });
-exports.ContainerAppearanceColor = ContainerAppearanceColor;
-exports.default = Container;

package/components/DateInput/index.js

@@ -1,85 +0,0 @@
-"use client";
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const index = require("../../index-_A9hEpl9.cjs");
-const react = require("react");
-const components_FormElement = require("../FormElement/index.js");
-const components_FormHelperLabel = require("../FormHelperLabel/index.js");
-const components_FormHelperMessage = require("../FormHelperMessage/index.js");
-const components_FormHelperStatusIcon = require("../FormHelperStatusIcon/index.js");
-const props = require("../../props-DJ2g0nfk.cjs");
-const styled$1 = require("../../styled-rjPMMnSd.cjs");
-const Spacing = require("../../Spacing-Cu_j2b83.cjs");
-const styled = require("styled-components");
-const CalendarMonthIconStyled = styled(index.CalendarMonthIcon).withConfig({
-  displayName: "CalendarMonthIconStyled",
-  componentId: "sc-12ai2q6-0"
-})(() => {
-  return {
-    "@-moz-document url-prefix()": {
-      "&": {
-        display: "none",
-        opacity: 0
-      }
-    }
-  };
-});
-const DateInputStyled = styled(styled$1.InputStyled).withConfig({
-  displayName: "DateInputStyled",
-  componentId: "sc-12ai2q6-1"
-})({
-  "&::-webkit-calendar-picker-indicator": {
-    opacity: 0,
-    display: "none"
-  }
-});
-const DateInput = react.forwardRef(({
-  uid,
-  status,
-  errorMessage,
-  helperText,
-  label,
-  onUpdate,
-  bottomSpacing = Spacing.spacingMd,
-  ...props$1
-}, outerRef) => {
-  const innerRef = react.useRef(null);
-  react.useImperativeHandle(outerRef, () => innerRef.current, []);
-  const messageId = `text-${uid}`;
-  const inputProps = {
-    ...props$1,
-    id: uid,
-    "aria-describedby": props.inputStateError !== status && helperText || props.inputStateError === status && errorMessage ? messageId : void 0,
-    "aria-invalid": props.inputStateError === status ? true : void 0
-  };
-  const handleCalendarClick = () => {
-    if (null === innerRef || null === innerRef.current) {
-      return;
-    }
-    innerRef.current.showPicker();
-    setTimeout(() => {
-      if (null === innerRef || null === innerRef.current) {
-        return;
-      }
-      innerRef.current.focus();
-    }, 1);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(components_FormElement, { className: props$1.className, bottomSpacing, disabled: props$1.disabled, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(components_FormHelperLabel, { label, uid }),
-    /* @__PURE__ */ jsxRuntime.jsxs(styled$1.InputWrapperStyled, { status, bottomSpacing: props.inputStateError !== status && helperText || props.inputStateError === status && errorMessage ? Spacing.spacingXs : void 0, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DateInputStyled, { ...inputProps, ref: innerRef, type: "date", onBlur: (event) => {
-        if (props$1.onBlur) {
-          props$1.onBlur(event);
-        }
-        if (!onUpdate) {
-          return;
-        }
-        onUpdate(event.target.value);
-      } }),
-      /* @__PURE__ */ jsxRuntime.jsx(components_FormHelperStatusIcon.default, { status }),
-      /* @__PURE__ */ jsxRuntime.jsx(CalendarMonthIconStyled, { size: index.iconSizeSm, onClick: handleCalendarClick })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(components_FormHelperMessage, { id: messageId, status, message: props.inputStateError === status ? errorMessage : helperText })
-  ] });
-});
-module.exports = DateInput;

package/components/DemoBox/index.js

@@ -1,20 +0,0 @@
-"use client";
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const components_IconSnippet = require("../IconSnippet/index.js");
-const HeadingSize = require("../../HeadingSize-cjNplkhN.cjs");
-const components_RichText = require("../../index-DORk60LP.cjs");
-const styled = require("../../styled-IZHOHnAD.cjs");
-const heading = {
-  component: "Heading",
-  children: "Child component",
-  size: HeadingSize.textHeadingXs,
-  uid: components_RichText.getUid()
-};
-const richText = {
-  component: "RichText",
-  html: "<p>This is a placeholder.</p>",
-  uid: components_RichText.getUid()
-};
-const DemoBox = (props) => /* @__PURE__ */ jsxRuntime.jsx(styled.DemoBoxStyled, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(components_IconSnippet.default, { size: "small", icon: "Sync", bottomSpacing: "None", contents: [heading, richText] }) });
-module.exports = DemoBox;