@vodafone_de/brix-components 3.0.0 → 3.0.2

package/dist/components/Checkbox/index.js

@@ -0,0 +1,218 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { iconSizeSm, NotificationErrorIcon } from "@vfde-react/inline-icon-library";
+import { useState, useEffect } from "react";
+import FormHelperMessage from "../FormHelperMessage/index.js";
+import { i as inputStateError } from "../../props-Czq9XX2J.js";
+import styled from "styled-components";
+import Label from "../Label/index.js";
+import forcedColors from "../../foundations/media-query/forcedColors/index.js";
+import { getBodySize } from "../../foundations/token/getBodySize/index.js";
+import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
+import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
+import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
+import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
+import { getIconColor } from "../../foundations/token/getIconColor/index.js";
+import { getObjectColor } from "../../foundations/token/getObjectColor/index.js";
+import { getOpacity } from "../../foundations/token/getOpacity/index.js";
+import { getSpacing } from "../../foundations/token/getSpacing/index.js";
+import { c as colorBorderFocus } from "../../BorderColor-BummoQ1-.js";
+import { d as borderRadiusSm } from "../../BorderRadius-ClUShVLu.js";
+import { a as borderWidthFocus } from "../../BorderWidth-DfOlyKK7.js";
+import { a as opacityDisabled } from "../../Opacity-smkGiwsf.js";
+import { s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import { g as getCssVar } from "../../getCssVar-BP6T9pFM.js";
+const CheckboxLabelStyled = styled(Label).withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "CheckboxLabelStyled",
+  componentId: "sc-1lo7iho-0"
+})({
+  cursor: "pointer"
+});
+const CheckboxOuterContainerStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "CheckboxOuterContainerStyled",
+  componentId: "sc-1lo7iho-1"
+})(({
+  bottomSpacing = spacingMd
+}) => getBottomSpacing({
+  bottomSpacing
+}));
+const CheckboxInnerContainerStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "CheckboxInnerContainerStyled",
+  componentId: "sc-1lo7iho-2"
+})({
+  display: "flex",
+  gap: getSpacing("Xs")
+}, ({
+  hasMessage
+}) => {
+  return {
+    marginBottom: hasMessage ? getSpacing("Md") : getSpacing("None")
+  };
+}, ({
+  disabled
+}) => {
+  if (disabled) {
+    return {
+      pointerEvents: "none",
+      opacity: getOpacity(opacityDisabled)
+    };
+  }
+});
+const CheckboxStyled = styled.span.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "CheckboxStyled",
+  componentId: "sc-1lo7iho-3"
+})({
+  position: "relative",
+  width: `calc(${getBodySize("md").fontSize} * ${getBodySize("md").lineHeight})`,
+  height: `calc(${getBodySize("md").fontSize} * ${getBodySize("md").lineHeight})`,
+  cursor: "pointer",
+  borderRadius: getBorderRadius(borderRadiusSm),
+  "&:has(:focus-visible)": {
+    svg: {
+      outline: `${getBorderWidth(borderWidthFocus)} solid ${getBorderColor(colorBorderFocus)}`,
+      borderRadius: getBorderRadius(borderRadiusSm),
+      ...forcedColors({
+        outline: `${getBorderWidth(borderWidthFocus)} solid CanvasText`
+      })
+    }
+  }
+});
+const CheckboxSVGStyled = styled.svg.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "CheckboxSVGStyled",
+  componentId: "sc-1lo7iho-4"
+})({
+  width: getCssVar(iconSizeSm),
+  height: getCssVar(iconSizeSm),
+  fill: "none"
+});
+const CheckboxUncheckedSVGStyled = styled.path.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "CheckboxUncheckedSVGStyled",
+  componentId: "sc-1lo7iho-5"
+})({
+  fill: getObjectColor("colorObjectInverse")
+}, forcedColors({
+  fill: "Field"
+}), ({
+  status
+}) => {
+  return {
+    stroke: status === "error" ? getBorderColor("colorBorderCritical") : getBorderColor("colorBorderUnselected"),
+    ...forcedColors({
+      stroke: "FieldText"
+    })
+  };
+});
+const CheckboxCheckedBorderPathStyled = styled.path.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "CheckboxCheckedBorderPathStyled",
+  componentId: "sc-1lo7iho-6"
+})(({
+  status
+}) => {
+  return {
+    stroke: status === "error" ? getBorderColor("colorBorderCritical") : getBorderColor("colorBorderSelected"),
+    ...forcedColors({
+      stroke: "FieldText"
+    })
+  };
+});
+const CheckboxCheckedFillingPathStyled = styled.path.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "CheckboxCheckedFillingPathStyled",
+  componentId: "sc-1lo7iho-7"
+})({
+  fill: getObjectColor("colorObjectSelected")
+}, forcedColors({
+  fill: "FieldText"
+}));
+const CheckboxCheckedTickPathStyled = styled.path.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "CheckboxCheckedTickPathStyled",
+  componentId: "sc-1lo7iho-8"
+})({
+  stroke: getIconColor("colorIconInverseStatic")
+}, forcedColors({
+  stroke: "Field"
+}));
+const CheckboxInputStyled = styled.input.withConfig({
+  shouldForwardProp: 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__ */ jsxs(CheckboxSVGStyled, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "none", children: [
+  /* @__PURE__ */ 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__ */ 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__ */ jsx(CheckboxCheckedTickPathStyled, { d: "M15 6L8.15789 13L5 9.76923", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })
+] });
+const UncheckedBox = ({
+  status
+}) => /* @__PURE__ */ jsx(CheckboxSVGStyled, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ 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
+}) => {
+  const [checked, setChecked] = useState(true === props.checked);
+  useEffect(() => {
+    if (checked === props.checked) {
+      return;
+    }
+    setChecked(true === props.checked);
+  }, [props.checked]);
+  const messageId = `text-${uid}`;
+  const inputProps = {
+    ...props,
+    id: uid,
+    "aria-describedby": inputStateError !== status && helperText || inputStateError === status && errorMessage ? messageId : void 0,
+    "aria-invalid": inputStateError === status ? true : void 0
+  };
+  const handleChange = (event) => {
+    setChecked(!checked);
+    if (!onUpdate) {
+      return;
+    }
+    onUpdate(event.target.value, event.target.checked === true);
+  };
+  return /* @__PURE__ */ jsxs(CheckboxOuterContainerStyled, { className: props.className, bottomSpacing, children: [
+    /* @__PURE__ */ jsxs(CheckboxInnerContainerStyled, { hasMessage: inputStateError !== status && helperText || inputStateError === status && errorMessage ? true : false, disabled, children: [
+      /* @__PURE__ */ jsxs(CheckboxStyled, { children: [
+        /* @__PURE__ */ jsx(CheckboxInputStyled, { ...inputProps, type: "checkbox", onChange: handleChange, checked, disabled }),
+        checked ? /* @__PURE__ */ jsx(CheckedBox, { status }) : /* @__PURE__ */ jsx(UncheckedBox, { status })
+      ] }),
+      /* @__PURE__ */ jsx(CheckboxLabelStyled, { htmlFor: uid, children: label })
+    ] }),
+    (inputStateError !== status && helperText || inputStateError === status && errorMessage) && /* @__PURE__ */ jsx(FormHelperMessage, { id: messageId, status, message: inputStateError === status ? errorMessage : helperText, children: inputStateError === status ? /* @__PURE__ */ jsx(NotificationErrorIcon, { size: iconSizeSm }) : null })
+  ] });
+};
+export {
+  Checkbox as default
+};

package/dist/components/CheckboxGroup/index.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect, createElement } from "react";
+import Checkbox from "../Checkbox/index.js";
+import Fieldset from "../Fieldset/index.js";
+import { f as spacingLg, s as spacingMd, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
+import styled from "styled-components";
+import { F as FlexStyled } from "../../styled-CpoX5USb.js";
+import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
+import { getSpacing } from "../../foundations/token/getSpacing/index.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+const CheckboxGroupStyled = styled(FlexStyled).withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "CheckboxGroupStyled",
+  componentId: "sc-b81jcu-0"
+})({
+  rowGap: getSpacing(spacingMd),
+  columnGap: getSpacing(spacingLg)
+}, getBottomSpacing({
+  bottomSpacing: 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] = useState(initialCheckedState());
+  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__ */ jsx(Fieldset, { ...props, status, disabled, children: /* @__PURE__ */ jsx(CheckboxGroupStyled, { orientation, children: checkboxes.map((checkbox) => {
+    return /* @__PURE__ */ createElement(Checkbox, { ...checkbox, onUpdate: handleUpdate, checked: checkedValues.includes(checkbox.value), key: checkbox.uid, status, disabled, bottomSpacing: spacingNone, errorMessage: void 0, helperText: void 0 });
+  }) }) });
+};
+export {
+  CheckboxGroup as default
+};

package/dist/components/Collapsible/index.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import styled from "styled-components";
+import { noReducedMotion } from "../../foundations/media-query/reducedMotion/index.js";
+import { a as ease_in_out_sine } from "../../easing-Dm-pO8SY.js";
+import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
+import { getSpacing } from "../../foundations/token/getSpacing/index.js";
+import { a as borderWidthFocus } from "../../BorderWidth-DfOlyKK7.js";
+import { b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+const CollapsibleStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "CollapsibleStyled",
+  componentId: "sc-12wf2lg-0"
+})({
+  display: "grid",
+  padding: getSpacing(spacingNone),
+  transitionProperty: `grid-template-rows`,
+  transitionDuration: `0.001s`,
+  transitionTimingFunction: `${ease_in_out_sine}`,
+  ...noReducedMotion({
+    transitionDuration: `0.5s`
+  })
+}, ({
+  animated = true
+}) => {
+  if (animated) {
+    return {};
+  }
+  return {
+    ...noReducedMotion({
+      transitionDuration: `0.001s`
+    })
+  };
+}, ({
+  expanded
+}) => {
+  return expanded ? {
+    gridTemplateRows: "1fr"
+  } : {
+    gridTemplateRows: "0fr"
+  };
+});
+const CollapsibleContentStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "CollapsibleContentStyled",
+  componentId: "sc-12wf2lg-1"
+})({
+  overflow: "hidden",
+  padding: `${getSpacing(spacingNone)} ${getBorderWidth(borderWidthFocus)}`,
+  marginLeft: `calc(${getBorderWidth(borderWidthFocus)} * -1)`
+});
+const Collapsible = ({
+  expanded,
+  onTransition,
+  children,
+  animated = true,
+  ...props
+}) => {
+  const ref = useRef(null);
+  const isOpenRef = useRef(expanded);
+  useEffect(() => {
+    isOpenRef.current = expanded;
+  }, [expanded]);
+  const transitionEndHandler = () => {
+    if (onTransition) {
+      onTransition(true === isOpenRef.current);
+    }
+  };
+  useEffect(() => {
+    if (!ref || !ref.current) {
+      return;
+    }
+    const element = ref.current;
+    element.addEventListener("transitionend", transitionEndHandler);
+    return () => {
+      element.removeEventListener("transitionend", transitionEndHandler);
+    };
+  }, [ref]);
+  return /* @__PURE__ */ jsx(CollapsibleStyled, { ref, ...props, expanded, animated, children: /* @__PURE__ */ jsx(CollapsibleContentStyled, { children }) });
+};
+export {
+  Collapsible as default
+};

package/dist/components/ColorSwatch/index.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { a as getComputedBackgroundColor, p as parseColorToRgbObject, b as getContrastRatio } from "../../colorUtils-uLZF5UIN.js";
+import { iconSizeMd } from "@vfde-react/inline-icon-library";
+import styled from "styled-components";
+import forcedColors from "../../foundations/media-query/forcedColors/index.js";
+import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
+import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
+import { a as colorBorderNeutral } from "../../BorderColor-BummoQ1-.js";
+import { b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import { g as getCssVar } from "../../getCssVar-BP6T9pFM.js";
+const colorSwatchSizeSmall = "sm";
+const colorSwatchSizeMedium = "md";
+const ColorSwatchSVGStyled = styled.svg.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "ColorSwatchSVGStyled",
+  componentId: "sc-ghmea2-0"
+})({
+  strokeWidth: 1,
+  display: "block"
+}, ({
+  size
+}) => {
+  return {
+    width: size === colorSwatchSizeSmall ? "12px" : getCssVar(iconSizeMd),
+    height: size === colorSwatchSizeSmall ? "12px" : getCssVar(iconSizeMd)
+  };
+}, ({
+  needsBorder,
+  color
+}) => {
+  return {
+    ...forcedColors({
+      stroke: needsBorder ? "CanvasText" : color
+    }),
+    stroke: needsBorder ? getBorderColor(colorBorderNeutral) : color
+  };
+}, ({
+  bottomSpacing = spacingNone
+}) => getBottomSpacing({
+  bottomSpacing
+}));
+const ColorSwatchCircleStyled = styled.circle.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "ColorSwatchCircleStyled",
+  componentId: "sc-ghmea2-1"
+})(({
+  size
+}) => {
+  const swatchSize = size === colorSwatchSizeSmall ? "12px" : getCssVar(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] = useState(false);
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) {
+      const backgroundColor = getComputedBackgroundColor(ref.current);
+      const swatchColor = parseColorToRgbObject(color);
+      const contrastRatio = getContrastRatio(backgroundColor, swatchColor);
+      if (contrastRatio < 3) {
+        setNeedsBorder(true);
+      } else {
+        setNeedsBorder(false);
+      }
+    }
+  });
+  return /* @__PURE__ */ jsx(ColorSwatchSVGStyled, { className: props.className, size, ref, color, needsBorder, role: "img", "aria-label": props["aria-label"], "aria-roledescription": "Farbfeld", bottomSpacing, children: /* @__PURE__ */ jsx(ColorSwatchCircleStyled, { fill: color, size }) });
+};
+export {
+  colorSwatchSizeMedium,
+  colorSwatchSizeSmall,
+  ColorSwatch as default
+};

package/dist/components/ColorSwatchGroup/index.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { s as spacingMd, e as spacing2Xs } from "../../Spacing-D0HQH9YJ.js";
+import ColorSwatch, { colorSwatchSizeSmall } from "../ColorSwatch/index.js";
+import { iconSizeMd } from "@vfde-react/inline-icon-library";
+import styled from "styled-components";
+import { F as FlexStyled } from "../../styled-CpoX5USb.js";
+import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import { g as getCssVar } from "../../getCssVar-BP6T9pFM.js";
+const ColorSwatchListStyled = styled(FlexStyled).withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "ColorSwatchListStyled",
+  componentId: "sc-vf24mf-0"
+})(({
+  bottomSpacing = spacingMd
+}) => getBottomSpacing({
+  bottomSpacing
+}));
+const ColorSwatchItemStyled = styled.li.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "ColorSwatchItemStyled",
+  componentId: "sc-vf24mf-1"
+})(({
+  size
+}) => {
+  return {
+    width: size === colorSwatchSizeSmall ? "12px" : getCssVar(iconSizeMd),
+    height: size === colorSwatchSizeSmall ? "12px" : getCssVar(iconSizeMd)
+  };
+});
+const ColorSwatchGroup = ({
+  colorSwatches,
+  size,
+  bottomSpacing,
+  ...props
+}) => {
+  const colorSwatchesMap = colorSwatches.map((colorSwatch) => /* @__PURE__ */ jsx(ColorSwatchItemStyled, { size, children: /* @__PURE__ */ jsx(ColorSwatch, { ...colorSwatch, size }) }, colorSwatch.color));
+  return colorSwatchesMap.length ? /* @__PURE__ */ jsx(ColorSwatchListStyled, { className: props.className, gapSpacing: spacing2Xs, as: "ul", "aria-label": props["aria-label"], bottomSpacing, children: colorSwatchesMap }) : null;
+};
+export {
+  ColorSwatchGroup as default
+};

package/dist/components/Container/index.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
+import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
+import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
+import { getSpacing } from "../../foundations/token/getSpacing/index.js";
+import { getTextColor } from "../../foundations/token/getTextColor/index.js";
+import { j as colorBorderSubtle } from "../../BorderColor-BummoQ1-.js";
+import { e as borderWidthDivider } from "../../BorderWidth-DfOlyKK7.js";
+import { d as spacingXl, s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
+import { a as colorTextNeutral } from "../../TextColor-BXiR5Uq9.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import { e as colorBackgroundBrand, d as colorBackgroundBrandGradient, f as colorBackgroundSubtle, c as colorBackgroundNeutral } from "../../BackgroundColor-JObp_2xA.js";
+const ContainerAppearanceColor = {
+  primary: colorBackgroundNeutral,
+  secondary: colorBackgroundSubtle,
+  tertiary: colorBackgroundBrandGradient,
+  alternative: colorBackgroundBrand
+};
+const ContainerBackgroundStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "ContainerBackgroundStyled",
+  componentId: "sc-a9r652-0"
+})({
+  color: getTextColor(colorTextNeutral)
+}, ({
+  padding = spacingXl
+}) => ({
+  paddingTop: getSpacing(padding),
+  paddingBottom: getSpacing(padding)
+}), ({
+  appearance = "primary"
+}) => {
+  return {
+    background: getBackgroundColor(ContainerAppearanceColor[appearance])
+  };
+}, ({
+  border = false
+}) => {
+  if (!border) {
+    return {};
+  }
+  return {
+    borderBottom: `${getBorderWidth(borderWidthDivider)} solid ${getBorderColor(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: getSpacing(spacingMd),
+  marginRight: getSpacing(spacingMd)
+}, maxWidthViewport({
+  maxWidth: `1240px`,
+  marginLeft: "auto",
+  marginRight: "auto"
+}));
+const Container = ({
+  className,
+  children,
+  appearance = "primary",
+  ...props
+}) => /* @__PURE__ */ jsx(ContainerBackgroundStyled, { className: `${className ? className : ""} ${["tertiary", "alternative"].indexOf(appearance) > -1 ? "Dark" : props.theme}`, appearance, ...props, children: /* @__PURE__ */ jsx(ContainerCenterStyled, { children }) });
+export {
+  ContainerAppearanceColor,
+  Container as default
+};

package/dist/components/DateInput/index.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { CalendarMonthIcon, iconSizeSm } from "@vfde-react/inline-icon-library";
+import { forwardRef, useRef, useImperativeHandle } from "react";
+import FormElement from "../FormElement/index.js";
+import FormHelperLabel from "../FormHelperLabel/index.js";
+import FormHelperMessage from "../FormHelperMessage/index.js";
+import FormHelperStatusIcon from "../FormHelperStatusIcon/index.js";
+import { i as inputStateError } from "../../props-Czq9XX2J.js";
+import { a as InputStyled, I as InputWrapperStyled } from "../../styled-CDWclYAa.js";
+import { s as spacingMd, a as spacingXs } from "../../Spacing-D0HQH9YJ.js";
+import styled from "styled-components";
+const CalendarMonthIconStyled = styled(CalendarMonthIcon).withConfig({
+  displayName: "CalendarMonthIconStyled",
+  componentId: "sc-12ai2q6-0"
+})(() => {
+  return {
+    "@-moz-document url-prefix()": {
+      "&": {
+        display: "none",
+        opacity: 0
+      }
+    }
+  };
+});
+const DateInputStyled = styled(InputStyled).withConfig({
+  displayName: "DateInputStyled",
+  componentId: "sc-12ai2q6-1"
+})({
+  "&::-webkit-calendar-picker-indicator": {
+    opacity: 0,
+    display: "none"
+  }
+});
+const DateInput = forwardRef(({
+  uid,
+  status,
+  errorMessage,
+  helperText,
+  label,
+  onUpdate,
+  bottomSpacing = spacingMd,
+  ...props
+}, outerRef) => {
+  const innerRef = useRef(null);
+  useImperativeHandle(outerRef, () => innerRef.current, []);
+  const messageId = `text-${uid}`;
+  const inputProps = {
+    ...props,
+    id: uid,
+    "aria-describedby": inputStateError !== status && helperText || inputStateError === status && errorMessage ? messageId : void 0,
+    "aria-invalid": 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__ */ jsxs(FormElement, { className: props.className, bottomSpacing, disabled: props.disabled, children: [
+    /* @__PURE__ */ jsx(FormHelperLabel, { label, uid }),
+    /* @__PURE__ */ jsxs(InputWrapperStyled, { status, bottomSpacing: inputStateError !== status && helperText || inputStateError === status && errorMessage ? spacingXs : void 0, children: [
+      /* @__PURE__ */ jsx(DateInputStyled, { ...inputProps, ref: innerRef, type: "date", onBlur: (event) => {
+        if (props.onBlur) {
+          props.onBlur(event);
+        }
+        if (!onUpdate) {
+          return;
+        }
+        onUpdate(event.target.value);
+      } }),
+      /* @__PURE__ */ jsx(FormHelperStatusIcon, { status }),
+      /* @__PURE__ */ jsx(CalendarMonthIconStyled, { size: iconSizeSm, onClick: handleCalendarClick })
+    ] }),
+    /* @__PURE__ */ jsx(FormHelperMessage, { id: messageId, status, message: inputStateError === status ? errorMessage : helperText })
+  ] });
+});
+export {
+  DateInput as default
+};

package/dist/components/DemoBox/index.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import IconSnippet from "../IconSnippet/index.js";
+import { t as textHeadingXs } from "../../HeadingSize-CfCRn3Lh.js";
+import { g as getUid } from "../../index-D6hvbziL.js";
+import { D as DemoBoxStyled } from "../../styled-CXSdomF5.js";
+const heading = {
+  component: "Heading",
+  children: "Child component",
+  size: textHeadingXs,
+  uid: getUid()
+};
+const richText = {
+  component: "RichText",
+  html: "<p>This is a placeholder.</p>",
+  uid: getUid()
+};
+const DemoBox = (props) => /* @__PURE__ */ jsx(DemoBoxStyled, { ...props, children: /* @__PURE__ */ jsx(IconSnippet, { size: "small", icon: "Sync", bottomSpacing: "None", contents: [heading, richText] }) });
+export {
+  DemoBox as default
+};