@vodafone_de/brix-components 3.1.7 → 3.1.9

package/dist/components/Checkbox/index.js

@@ -0,0 +1,218 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { iv as iconSizeSm, eB as NotificationErrorIcon } from "../../index-Cbojl4_Q.js";
+import { useState, useEffect } from "react";
+import FormHelperMessage from "../FormHelperMessage/index.js";
+import { a as inputStateError } from "../../props-DDpgcryb.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-eg_mz82k.js";
+import { a as opacityDisabled } from "../../Opacity-smkGiwsf.js";
+import { a as spacingMd } from "../../Spacing-B-7SYaM_.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/Checkbox/props.d.ts

@@ -0,0 +1,20 @@
+import { InputHTMLAttributes } from 'react';
+import { InputSharedProps } from '../Input/props';
+export interface CheckboxProps extends InputSharedProps, InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * mandatory value to be assigned to checkbox
+     */
+    value: string;
+    /**
+     * The label that appears next to the checkbox
+     */
+    label: string;
+    /**
+     * function that is called on every update.
+     */
+    onUpdate?: (value: string, checked: boolean) => void;
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'Checkbox';
+}

package/dist/components/Checkbox/styled.d.ts

@@ -0,0 +1,13 @@
+import { CheckboxProps } from './props';
+export declare const CheckboxLabelStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../Label').LabelProps, never>> & string & Omit<import('react').FC<import('../Label').LabelProps>, keyof import('react').Component<any, {}, any>>;
+export declare const CheckboxOuterContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<CheckboxProps, "bottomSpacing">>> & string;
+export declare const CheckboxInnerContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<CheckboxProps, "disabled"> & {
+    hasMessage: boolean;
+}>> & string;
+export declare const CheckboxStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const CheckboxSVGStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').SVGProps<SVGSVGElement>, never>> & string;
+export declare const CheckboxUncheckedSVGStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').SVGProps<SVGPathElement>, Pick<CheckboxProps, "status">>> & string;
+export declare const CheckboxCheckedBorderPathStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').SVGProps<SVGPathElement>, Pick<CheckboxProps, "status">>> & string;
+export declare const CheckboxCheckedFillingPathStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').SVGProps<SVGPathElement>, never>> & string;
+export declare const CheckboxCheckedTickPathStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').SVGProps<SVGPathElement>, never>> & string;
+export declare const CheckboxInputStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;

package/dist/components/CheckboxGroup/index.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { CheckboxGroupProps } from './props';
+declare const CheckboxGroup: FC<CheckboxGroupProps>;
+export default CheckboxGroup;
+export * from './props';

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, a as spacingMd, c as spacingNone } from "../../Spacing-B-7SYaM_.js";
+import styled from "styled-components";
+import { F as FlexStyled } from "../../styled-BWxYFp57.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/CheckboxGroup/props.d.ts

@@ -0,0 +1,21 @@
+import { CheckboxProps } from '../Checkbox/props';
+import { FieldsetSharedProps } from '../Fieldset/props';
+import { FlexOrientation } from '../Flex/props';
+export interface CheckboxGroupProps extends FieldsetSharedProps {
+    /**
+     * list of checkboxes
+     */
+    checkboxes: CheckboxProps[];
+    /**
+     * Indicate whether the checkboxes are rendered horizontally or vertically
+     */
+    orientation?: FlexOrientation;
+    /**
+     * function that is called on every update.
+     */
+    onUpdate?: (a: string[]) => void;
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'CheckboxGroup';
+}

package/dist/components/CheckboxGroup/styled.d.ts

@@ -0,0 +1,2 @@
+import { FlexProps } from '../Flex/props';
+export declare const CheckboxGroupStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof FlexProps> & FlexProps, FlexProps>> & string;

package/dist/components/Collapsible/index.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { CollapsibleProps } from './props';
+declare const Collapsible: FC<CollapsibleProps>;
+export default Collapsible;
+export * from './props';

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-eg_mz82k.js";
+import { c as spacingNone } from "../../Spacing-B-7SYaM_.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/Collapsible/props.d.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes } from 'react';
+import { PatternProps } from '../../foundations/PatternProps';
+export interface CollapsibleProps extends PatternProps, HTMLAttributes<HTMLDivElement> {
+    /**
+     * indicate if it's expaned or not
+     */
+    expanded?: boolean;
+    /**
+     * set to false if no animation should be used
+     */
+    animated?: boolean;
+    /** Pin component's name from string to the concrete name */
+    component?: 'Collapsible';
+    onTransition?: (open: boolean) => void;
+}

package/dist/components/Collapsible/styled.d.ts

@@ -0,0 +1,3 @@
+import { CollapsibleProps } from './props';
+export declare const CollapsibleStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, CollapsibleProps>> & string;
+export declare const CollapsibleContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/ColorSwatch/index.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ColorSwatchProps } from './props';
+declare const ColorSwatch: FC<ColorSwatchProps>;
+export default ColorSwatch;
+export * from './props';

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 { iu as iconSizeMd } from "../../index-Cbojl4_Q.js";
+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 { c as spacingNone } from "../../Spacing-B-7SYaM_.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/ColorSwatch/props.d.ts

@@ -0,0 +1,19 @@
+import { HTMLAttributes } from 'react';
+import { PatternProps } from '../../foundations/PatternProps';
+export declare const colorSwatchSizeSmall = "sm";
+export declare const colorSwatchSizeMedium = "md";
+export type ColorSwatchSizes = typeof colorSwatchSizeSmall | typeof colorSwatchSizeMedium;
+export interface ColorSwatchProps extends PatternProps, HTMLAttributes<HTMLUListElement> {
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'ColorSwatch';
+    /**
+     * Color of the color swatch
+     */
+    color: string;
+    /**
+     * Size of the color swatch
+     */
+    size?: ColorSwatchSizes;
+}

package/dist/components/ColorSwatch/styled.d.ts

@@ -0,0 +1,5 @@
+import { ColorSwatchProps } from './props';
+export declare const ColorSwatchSVGStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').SVGProps<SVGSVGElement>, ColorSwatchProps & {
+    needsBorder: boolean;
+}>> & string;
+export declare const ColorSwatchCircleStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').SVGProps<SVGCircleElement>, Pick<ColorSwatchProps, "size">>> & string;

package/dist/components/ColorSwatchGroup/index.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ColorSwatchGroupProps } from './props';
+declare const ColorSwatchGroup: FC<ColorSwatchGroupProps>;
+export default ColorSwatchGroup;
+export * from './props';

package/dist/components/ColorSwatchGroup/index.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { a as spacingMd, d as spacing2Xs } from "../../Spacing-B-7SYaM_.js";
+import ColorSwatch, { colorSwatchSizeSmall } from "../ColorSwatch/index.js";
+import { iu as iconSizeMd } from "../../index-Cbojl4_Q.js";
+import styled from "styled-components";
+import { F as FlexStyled } from "../../styled-BWxYFp57.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/ColorSwatchGroup/props.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from 'react';
+import { PatternProps } from '../../foundations/PatternProps';
+import { ColorSwatchProps, ColorSwatchSizes } from '../ColorSwatch/props';
+export interface ColorSwatchGroupProps extends PatternProps, HTMLAttributes<HTMLUListElement> {
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'ColorSwatchGroup';
+    /**
+     * An array of strings that contains color values
+     */
+    colorSwatches: ColorSwatchProps[];
+    /**
+     * Size of the color swatches
+     */
+    size?: ColorSwatchSizes;
+}

package/dist/components/ColorSwatchGroup/styled.d.ts

@@ -0,0 +1,4 @@
+import { FlexProps } from '../Flex/props';
+import { ColorSwatchGroupProps } from './props';
+export declare const ColorSwatchListStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof FlexProps> & FlexProps, Pick<FlexProps, "bottomSpacing">>> & string;
+export declare const ColorSwatchItemStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, Pick<ColorSwatchGroupProps, "size">>> & string;