@vodafone_de/publish-test 0.0.1 → 53.0.0

package/dist/components/Collapsible/index.js

@@ -0,0 +1,123 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import styled from "styled-components";
+import { translateLayoutPropsToCss } from "../../foundations/layout/index.js";
+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 { g as getSpacing } from "../../index-l-i-mIeP.js";
+import { b as borderWidthFocus } from "../../BorderWidth-CwrNKc0Q.js";
+import { b as spacingNone } from "../../Spacing-Dj-qX3Z5.js";
+import { s as shouldForwardProp } from "../../shouldForwardProp-CONMmlMa.js";
+const CollapsibleStyled = styled.div.withConfig({
+  shouldForwardProp,
+  displayName: "CollapsibleStyled",
+  componentId: "sc-mzfhe2-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"
+  };
+}, ({
+  layout
+}) => layout && translateLayoutPropsToCss(layout));
+const CollapsibleContentStyled = styled.div.withConfig({
+  shouldForwardProp,
+  displayName: "CollapsibleContentStyled",
+  componentId: "sc-mzfhe2-1"
+})({
+  overflow: "hidden"
+}, ({
+  innerTopSpacing = spacingNone
+}) => {
+  return {
+    marginTop: getSpacing(innerTopSpacing)
+  };
+}, ({
+  expanded,
+  innerTopSpacing = spacingNone
+}) => {
+  return expanded ? {
+    padding: `${getBorderWidth(borderWidthFocus)}`,
+    marginLeft: `calc(${getBorderWidth(borderWidthFocus)} * -1)`,
+    marginBottom: `calc(${getBorderWidth(borderWidthFocus)} * -1)`,
+    marginTop: `calc(${getBorderWidth(borderWidthFocus)} * -1 + ${getSpacing(innerTopSpacing)})`
+  } : {};
+}, ({
+  expanded,
+  hideContent
+}) => {
+  if (hideContent) {
+    return expanded ? {
+      visibility: "visible",
+      transitionProperty: "visibility",
+      transitionDuration: "0s",
+      transitionDelay: "0s"
+    } : {
+      visibility: "hidden",
+      transitionProperty: "visibility",
+      transitionDuration: "0s",
+      transitionDelay: "0.5s"
+      // matches closing animation duration
+    };
+  } else {
+    return {};
+  }
+});
+const Collapsible = ({
+  expanded,
+  onTransition,
+  children,
+  animated = true,
+  hideContent = 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, { expanded, innerTopSpacing: props.innerTopSpacing, "aria-hidden": hideContent ? !expanded : void 0, hideContent, children }) });
+};
+export {
+  Collapsible as default
+};

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

@@ -0,0 +1,38 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { BrixComponentProps } from '../../foundations/BrixComponentProps';
+import { Spacing } from '../../foundations/types/Spacing';
+import { collapsibleComponentName } from './componentName';
+/**
+ * Props for the Collapsible component.
+ * An animated container that expands/collapses its content with a height transition.
+ */
+export interface CollapsibleProps extends BrixComponentProps, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    children?: ReactNode;
+    /**
+     * Whether the collapsible content is currently visible.
+     */
+    expanded?: boolean;
+    /**
+     * Top margin applied inside the collapsible content area.
+     */
+    innerTopSpacing?: Spacing;
+    /**
+     * When `false`, disables the expand/collapse animation.
+     * @default true
+     */
+    animated?: boolean;
+    /**
+     * Internal component name used for CMS and dynamic rendering.
+     */
+    component?: typeof collapsibleComponentName;
+    /**
+     * If true, content is removed from the DOM when collapsed.
+     * If false, content remains in the DOM but is visually hidden.
+     * @default true
+     */
+    hideContent?: boolean;
+    /**
+     * Callback fired when the expand/collapse transition completes. Receives the final open state.
+     */
+    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').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof CollapsibleProps> & CollapsibleProps, never> & Partial<Pick<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof CollapsibleProps> & CollapsibleProps, never>>> & string;
+export declare const CollapsibleContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "expanded" | "innerTopSpacing" | "hideContent"> & Pick<CollapsibleProps, "expanded" | "innerTopSpacing" | "hideContent">, never> & Partial<Pick<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "expanded" | "innerTopSpacing" | "hideContent"> & Pick<CollapsibleProps, "expanded" | "innerTopSpacing" | "hideContent">, never>>> & string;

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

@@ -0,0 +1,102 @@
+import { default as z } from 'zod';
+import { CmsProps } from '../../foundations/BrixComponentProps';
+import { ValidationResult } from '../../utils/validation/Validation';
+import { CollapsibleProps } from './props';
+export type CollapsibleCmsProps = CmsProps<CollapsibleProps>;
+export declare const collapsibleSchema: z.ZodObject<{
+    uid: z.ZodString;
+    sysId: z.ZodString;
+    customId: z.ZodOptional<z.ZodString>;
+    enableStructuredData: z.ZodOptional<z.ZodBoolean>;
+    tracking: z.ZodOptional<z.ZodObject<{
+        contact_action: z.ZodOptional<z.ZodString>;
+        contact_subject: z.ZodOptional<z.ZodString>;
+        contact_available_tools: z.ZodOptional<z.ZodString>;
+        contact_tool: z.ZodOptional<z.ZodString>;
+        contact_trigger: z.ZodOptional<z.ZodString>;
+        contact_variant: z.ZodOptional<z.ZodString>;
+        information_action: z.ZodOptional<z.ZodString>;
+        information_name: z.ZodOptional<z.ZodString>;
+        information_ui_type: z.ZodOptional<z.ZodString>;
+        information_trigger: z.ZodOptional<z.ZodString>;
+        information_ui_location: z.ZodOptional<z.ZodString>;
+        information_id: z.ZodOptional<z.ZodString>;
+        information_ui_size: z.ZodOptional<z.ZodString>;
+        error_action: z.ZodOptional<z.ZodString>;
+        error_type: z.ZodOptional<z.ZodString>;
+        error_message: z.ZodOptional<z.ZodString>;
+        error_ui_type: z.ZodOptional<z.ZodString>;
+        error_trigger: z.ZodOptional<z.ZodString>;
+        error_trigger_name: z.ZodOptional<z.ZodString>;
+        error_code: z.ZodOptional<z.ZodString>;
+        error_details: z.ZodOptional<z.ZodString>;
+        error_location: z.ZodOptional<z.ZodString>;
+    }, z.core.$loose>>;
+    bottomSpacing: z.ZodOptional<z.ZodEnum<{
+        sm: "sm";
+        md: "md";
+        lg: "lg";
+        none: "none";
+        "2xs": "2xs";
+        xs: "xs";
+        xl: "xl";
+        "2xl": "2xl";
+        "3xl": "3xl";
+        "4xl": "4xl";
+        "5xl": "5xl";
+        "6xl": "6xl";
+        "7xl": "7xl";
+        None: "None";
+        "2Xs": "2Xs";
+        Xs: "Xs";
+        Sm: "Sm";
+        Md: "Md";
+        Lg: "Lg";
+        Xl: "Xl";
+        "2Xl": "2Xl";
+        "3Xl": "3Xl";
+        "4Xl": "4Xl";
+        "5Xl": "5Xl";
+        "6Xl": "6Xl";
+        "7Xl": "7Xl";
+    }>>;
+    layout: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodObject<{
+        sm: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+        md: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+        lg: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+    }, z.core.$strip>]>>>;
+    component: z.ZodLiteral<"Collapsible">;
+    expanded: z.ZodOptional<z.ZodBoolean>;
+    innerTopSpacing: z.ZodOptional<z.ZodEnum<{
+        sm: "sm";
+        md: "md";
+        lg: "lg";
+        none: "none";
+        "2xs": "2xs";
+        xs: "xs";
+        xl: "xl";
+        "2xl": "2xl";
+        "3xl": "3xl";
+        "4xl": "4xl";
+        "5xl": "5xl";
+        "6xl": "6xl";
+        "7xl": "7xl";
+        None: "None";
+        "2Xs": "2Xs";
+        Xs: "Xs";
+        Sm: "Sm";
+        Md: "Md";
+        Lg: "Lg";
+        Xl: "Xl";
+        "2Xl": "2Xl";
+        "3Xl": "3Xl";
+        "4Xl": "4Xl";
+        "5Xl": "5Xl";
+        "6Xl": "6Xl";
+        "7Xl": "7Xl";
+    }>>;
+    animated: z.ZodOptional<z.ZodBoolean>;
+    onTransition: z.ZodOptional<z.ZodNever>;
+}, z.core.$loose>;
+export declare const validateCollapsibleProps: (props: unknown) => ValidationResult<CollapsibleCmsProps>;
+export declare const isCollapsibleProps: (props: unknown) => props is CollapsibleCmsProps;

package/dist/components/Collapsible/validate.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export declare const colorSwatchComponentName: "ColorSwatch";

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

@@ -0,0 +1,4 @@
+import { ColorSwatchProps } from './props';
+declare const ColorSwatch: ({ color, size, bottomSpacing, ...props }: ColorSwatchProps) => import("react/jsx-runtime").JSX.Element;
+export default ColorSwatch;
+export * from './props';

package/dist/components/ColorSwatch/index.js

@@ -0,0 +1,90 @@
+"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-DiOpGumx.js";
+import styled from "styled-components";
+import { translateLayoutPropsToCss } from "../../foundations/layout/index.js";
+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-BACbvI20.js";
+import { h as iconSizeMd } from "../../IconSize-Da9zhR76.js";
+import { b as spacingNone } from "../../Spacing-Dj-qX3Z5.js";
+import { c as capitalize } from "../../index-l-i-mIeP.js";
+import { s as shouldForwardProp } from "../../shouldForwardProp-CONMmlMa.js";
+import { a as colorSwatchSizeSmall } from "../../props-D2ykLHP1.js";
+import { c } from "../../props-D2ykLHP1.js";
+const ColorSwatchSVGStyled = styled.svg.withConfig({
+  shouldForwardProp,
+  displayName: "ColorSwatchSVGStyled",
+  componentId: "sc-1vyg3r8-0"
+})({
+  strokeWidth: 1,
+  display: "block"
+}, ({
+  size
+}) => {
+  return {
+    width: size === colorSwatchSizeSmall ? "12px" : `var(--iconSize${capitalize(iconSizeMd)})`,
+    height: size === colorSwatchSizeSmall ? "12px" : `var(--iconSize${capitalize(iconSizeMd)})`
+  };
+}, ({
+  needsBorder,
+  color
+}) => {
+  return {
+    ...forcedColors({
+      stroke: needsBorder ? "CanvasText" : color
+    }),
+    stroke: needsBorder ? getBorderColor(colorBorderNeutral) : color
+  };
+}, ({
+  bottomSpacing = spacingNone
+}) => getBottomSpacing({
+  bottomSpacing
+}), ({
+  layout
+}) => layout && translateLayoutPropsToCss(layout));
+const ColorSwatchCircleStyled = styled.circle.withConfig({
+  shouldForwardProp,
+  displayName: "ColorSwatchCircleStyled",
+  componentId: "sc-1vyg3r8-1"
+})(({
+  size
+}) => {
+  const swatchSize = size === colorSwatchSizeSmall ? "12px" : `var(--iconSize${capitalize(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);
+      }
+    }
+  }, [color]);
+  return /* @__PURE__ */ jsx(ColorSwatchSVGStyled, { className: props.className, size, ref, color, needsBorder, role: "img", "aria-label": props["aria-label"], "aria-roledescription": "Farbfeld", bottomSpacing, layout: props.layout, children: /* @__PURE__ */ jsx(ColorSwatchCircleStyled, { fill: color, size }) });
+};
+export {
+  c as colorSwatchSizeMedium,
+  colorSwatchSizeSmall,
+  ColorSwatch as default
+};

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

@@ -0,0 +1,24 @@
+import { HTMLAttributes } from 'react';
+import { BrixComponentProps } from '../../foundations/BrixComponentProps';
+import { colorSwatchComponentName } from './componentName';
+export declare const colorSwatchSizeSmall: "sm";
+export declare const colorSwatchSizeMedium: "md";
+export type ColorSwatchSizes = typeof colorSwatchSizeSmall | typeof colorSwatchSizeMedium;
+/**
+ * Props for the ColorSwatch component.
+ * A list of selectable color options rendered as circular swatches.
+ */
+export interface ColorSwatchProps extends BrixComponentProps, Omit<HTMLAttributes<HTMLUListElement>, 'children'> {
+    /**
+     * Pin component's name
+     */
+    component?: typeof colorSwatchComponentName;
+    /**
+     * Color of the color swatch
+     */
+    color: string;
+    /**
+     * Size of the color swatch
+     */
+    size?: ColorSwatchSizes;
+}

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

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

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

@@ -0,0 +1,75 @@
+import { z } from 'zod';
+import { ColorSwatchCmsProps } from '../../contentful/props';
+import { ValidationResult } from '../../utils/validation/Validation';
+export declare const colorSwatchSizes: readonly ["sm", "md"];
+export declare const colorSwatchSchema: z.ZodObject<{
+    uid: z.ZodString;
+    sysId: z.ZodString;
+    customId: z.ZodOptional<z.ZodString>;
+    enableStructuredData: z.ZodOptional<z.ZodBoolean>;
+    tracking: z.ZodOptional<z.ZodObject<{
+        contact_action: z.ZodOptional<z.ZodString>;
+        contact_subject: z.ZodOptional<z.ZodString>;
+        contact_available_tools: z.ZodOptional<z.ZodString>;
+        contact_tool: z.ZodOptional<z.ZodString>;
+        contact_trigger: z.ZodOptional<z.ZodString>;
+        contact_variant: z.ZodOptional<z.ZodString>;
+        information_action: z.ZodOptional<z.ZodString>;
+        information_name: z.ZodOptional<z.ZodString>;
+        information_ui_type: z.ZodOptional<z.ZodString>;
+        information_trigger: z.ZodOptional<z.ZodString>;
+        information_ui_location: z.ZodOptional<z.ZodString>;
+        information_id: z.ZodOptional<z.ZodString>;
+        information_ui_size: z.ZodOptional<z.ZodString>;
+        error_action: z.ZodOptional<z.ZodString>;
+        error_type: z.ZodOptional<z.ZodString>;
+        error_message: z.ZodOptional<z.ZodString>;
+        error_ui_type: z.ZodOptional<z.ZodString>;
+        error_trigger: z.ZodOptional<z.ZodString>;
+        error_trigger_name: z.ZodOptional<z.ZodString>;
+        error_code: z.ZodOptional<z.ZodString>;
+        error_details: z.ZodOptional<z.ZodString>;
+        error_location: z.ZodOptional<z.ZodString>;
+    }, z.core.$loose>>;
+    bottomSpacing: z.ZodOptional<z.ZodEnum<{
+        sm: "sm";
+        md: "md";
+        lg: "lg";
+        none: "none";
+        "2xs": "2xs";
+        xs: "xs";
+        xl: "xl";
+        "2xl": "2xl";
+        "3xl": "3xl";
+        "4xl": "4xl";
+        "5xl": "5xl";
+        "6xl": "6xl";
+        "7xl": "7xl";
+        None: "None";
+        "2Xs": "2Xs";
+        Xs: "Xs";
+        Sm: "Sm";
+        Md: "Md";
+        Lg: "Lg";
+        Xl: "Xl";
+        "2Xl": "2Xl";
+        "3Xl": "3Xl";
+        "4Xl": "4Xl";
+        "5Xl": "5Xl";
+        "6Xl": "6Xl";
+        "7Xl": "7Xl";
+    }>>;
+    layout: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodObject<{
+        sm: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+        md: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+        lg: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+    }, z.core.$strip>]>>>;
+    component: z.ZodLiteral<"ColorSwatch">;
+    color: z.ZodString;
+    size: z.ZodOptional<z.ZodEnum<{
+        sm: "sm";
+        md: "md";
+    }>>;
+}, z.core.$loose>;
+export declare const validateColorSwatchProps: (props: unknown) => ValidationResult<ColorSwatchCmsProps>;
+export declare const isColorSwatchProps: (props: unknown) => props is ColorSwatchCmsProps;

package/dist/components/ColorSwatch/validate.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export declare const colorSwatchGroupComponentName: "ColorSwatchGroup";

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

@@ -0,0 +1,4 @@
+import { ColorSwatchGroupProps } from './props';
+declare const ColorSwatchGroup: ({ colorSwatches, size, bottomSpacing, ...props }: ColorSwatchGroupProps) => import("react/jsx-runtime").JSX.Element | null;
+export default ColorSwatchGroup;
+export * from './props';

package/dist/components/ColorSwatchGroup/index.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import ColorSwatch from "../ColorSwatch/index.js";
+import { s as spacingMd, f as spacing2Xs } from "../../Spacing-Dj-qX3Z5.js";
+import styled from "styled-components";
+import { a as colorSwatchSizeSmall } from "../../props-D2ykLHP1.js";
+import { F as FlexStyled } from "../../styled-DyZTV652.js";
+import { translateLayoutPropsToCss } from "../../foundations/layout/index.js";
+import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
+import { h as iconSizeMd } from "../../IconSize-Da9zhR76.js";
+import { c as capitalize } from "../../index-l-i-mIeP.js";
+import { g as getCssVar } from "../../getCssVar-BP6T9pFM.js";
+import { s as shouldForwardProp } from "../../shouldForwardProp-CONMmlMa.js";
+const ColorSwatchListStyled = styled(FlexStyled).withConfig({
+  shouldForwardProp,
+  displayName: "ColorSwatchListStyled",
+  componentId: "sc-2npy48-0"
+})(({
+  bottomSpacing = spacingMd
+}) => getBottomSpacing({
+  bottomSpacing
+}), ({
+  layout
+}) => layout && translateLayoutPropsToCss(layout));
+const ColorSwatchItemStyled = styled.li.withConfig({
+  shouldForwardProp,
+  displayName: "ColorSwatchItemStyled",
+  componentId: "sc-2npy48-1"
+})(({
+  size
+}) => {
+  return {
+    width: size === colorSwatchSizeSmall ? "12px" : getCssVar(`iconSize${capitalize(iconSizeMd)}`),
+    height: size === colorSwatchSizeSmall ? "12px" : getCssVar(`iconSize${capitalize(iconSizeMd)}`)
+  };
+});
+const ColorSwatchGroup = ({
+  colorSwatches,
+  size,
+  bottomSpacing,
+  ...props
+}) => {
+  const colorSwatchesMap = colorSwatches.map((colorSwatch, index) => /* @__PURE__ */ jsx(ColorSwatchItemStyled, { size, children: /* @__PURE__ */ jsx(ColorSwatch, { ...colorSwatch, size }) }, `${props.uid}-${index}`));
+  return colorSwatchesMap.length ? /* @__PURE__ */ jsx(ColorSwatchListStyled, { className: props.className, gapSpacing: spacing2Xs, as: "ul", "aria-label": props["aria-label"], bottomSpacing, layout: props.layout, children: colorSwatchesMap }) : null;
+};
+export {
+  ColorSwatchGroup as default
+};

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

@@ -0,0 +1,24 @@
+import { HTMLAttributes } from 'react';
+import { ColorSwatchProps, ColorSwatchSizes } from '../ColorSwatch';
+import { BrixComponentProps } from '../../foundations/BrixComponentProps';
+import { colorSwatchGroupComponentName } from './componentName';
+/**
+ * Props for the ColorSwatchGroup component.
+ * A group of color swatches for selecting product colors.
+ */
+export interface ColorSwatchGroupProps extends BrixComponentProps, Omit<HTMLAttributes<HTMLUListElement>, 'children'> {
+    /**
+     * Internal component name used for CMS and dynamic rendering.
+     */
+    component?: typeof colorSwatchGroupComponentName;
+    /**
+     * Array of color swatch configurations.
+     */
+    colorSwatches: ColorSwatchProps[];
+    /**
+     * Size applied to all swatches in the group.
+     * - `sm`: Small (compact)
+     * - `md`: Medium (standard)
+     */
+    size?: ColorSwatchSizes;
+}

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

@@ -0,0 +1,10 @@
+import { FlexProps } from '../Flex/props';
+import { ColorSwatchGroupProps } from './props';
+export declare const ColorSwatchListStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('styled-components').FastOmit<import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof FlexProps> & FlexProps, never> & Partial<Pick<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof FlexProps> & FlexProps, never>>, "as" | "forwardedAs"> & {
+    as?: import('styled-components').WebTarget | undefined;
+    forwardedAs?: import('styled-components').WebTarget | undefined;
+}, "layout"> & Pick<FlexProps, "layout">, never> & Partial<Pick<import('styled-components').FastOmit<import('styled-components').FastOmit<import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof FlexProps> & FlexProps, never> & Partial<Pick<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof FlexProps> & FlexProps, never>>, "as" | "forwardedAs"> & {
+    as?: import('styled-components').WebTarget | undefined;
+    forwardedAs?: import('styled-components').WebTarget | undefined;
+}, "layout"> & Pick<FlexProps, "layout">, never>>> & string;
+export declare const ColorSwatchItemStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "size"> & Pick<ColorSwatchGroupProps, "size">, never> & Partial<Pick<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "size"> & Pick<ColorSwatchGroupProps, "size">, never>>> & string;

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

@@ -0,0 +1,74 @@
+import { z } from 'zod';
+import { ColorSwatchGroupCmsProps } from '../../contentful/props';
+import { ValidationResult } from '../../utils/validation/Validation';
+export declare const colorSwatchGroupSchema: z.ZodObject<{
+    uid: z.ZodString;
+    sysId: z.ZodString;
+    customId: z.ZodOptional<z.ZodString>;
+    enableStructuredData: z.ZodOptional<z.ZodBoolean>;
+    tracking: z.ZodOptional<z.ZodObject<{
+        contact_action: z.ZodOptional<z.ZodString>;
+        contact_subject: z.ZodOptional<z.ZodString>;
+        contact_available_tools: z.ZodOptional<z.ZodString>;
+        contact_tool: z.ZodOptional<z.ZodString>;
+        contact_trigger: z.ZodOptional<z.ZodString>;
+        contact_variant: z.ZodOptional<z.ZodString>;
+        information_action: z.ZodOptional<z.ZodString>;
+        information_name: z.ZodOptional<z.ZodString>;
+        information_ui_type: z.ZodOptional<z.ZodString>;
+        information_trigger: z.ZodOptional<z.ZodString>;
+        information_ui_location: z.ZodOptional<z.ZodString>;
+        information_id: z.ZodOptional<z.ZodString>;
+        information_ui_size: z.ZodOptional<z.ZodString>;
+        error_action: z.ZodOptional<z.ZodString>;
+        error_type: z.ZodOptional<z.ZodString>;
+        error_message: z.ZodOptional<z.ZodString>;
+        error_ui_type: z.ZodOptional<z.ZodString>;
+        error_trigger: z.ZodOptional<z.ZodString>;
+        error_trigger_name: z.ZodOptional<z.ZodString>;
+        error_code: z.ZodOptional<z.ZodString>;
+        error_details: z.ZodOptional<z.ZodString>;
+        error_location: z.ZodOptional<z.ZodString>;
+    }, z.core.$loose>>;
+    bottomSpacing: z.ZodOptional<z.ZodEnum<{
+        sm: "sm";
+        md: "md";
+        lg: "lg";
+        none: "none";
+        "2xs": "2xs";
+        xs: "xs";
+        xl: "xl";
+        "2xl": "2xl";
+        "3xl": "3xl";
+        "4xl": "4xl";
+        "5xl": "5xl";
+        "6xl": "6xl";
+        "7xl": "7xl";
+        None: "None";
+        "2Xs": "2Xs";
+        Xs: "Xs";
+        Sm: "Sm";
+        Md: "Md";
+        Lg: "Lg";
+        Xl: "Xl";
+        "2Xl": "2Xl";
+        "3Xl": "3Xl";
+        "4Xl": "4Xl";
+        "5Xl": "5Xl";
+        "6Xl": "6Xl";
+        "7Xl": "7Xl";
+    }>>;
+    layout: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodObject<{
+        sm: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+        md: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+        lg: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+    }, z.core.$strip>]>>>;
+    component: z.ZodLiteral<"ColorSwatchGroup">;
+    colorSwatches: z.ZodArray<z.ZodUnknown>;
+    size: z.ZodOptional<z.ZodEnum<{
+        sm: "sm";
+        md: "md";
+    }>>;
+}, z.core.$loose>;
+export declare const validateColorSwatchGroupProps: (props: unknown) => ValidationResult<ColorSwatchGroupCmsProps>;
+export declare const isColorSwatchGroupProps: (props: unknown) => props is ColorSwatchGroupCmsProps;

package/dist/components/ColorSwatchGroup/validate.test.d.ts

@@ -0,0 +1 @@
+export {};