@vodafone_de/brix-components 3.0.0 → 3.0.2

package/dist/components/Switch/index.js

@@ -0,0 +1,169 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { IconLoader, iconSize2xs } from "@vfde-react/inline-icon-library";
+import styled from "styled-components";
+import forcedColors from "../../foundations/media-query/forcedColors/index.js";
+import { e as ease_in_sine } from "../../easing-Dm-pO8SY.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 { 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 { c as borderRadiusFull } from "../../BorderRadius-ClUShVLu.js";
+import { a as borderWidthFocus, c as borderWidthSm } from "../../BorderWidth-DfOlyKK7.js";
+import { a as colorObjectInverse, b as colorObjectSelected, d as colorObjectUnselected } from "../../ObjectColor-BZDBuV8H.js";
+import { a as opacityDisabled } from "../../Opacity-smkGiwsf.js";
+import { a as spacingXs, s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import Label from "../Label/index.js";
+const getHandleIcon = (checked) => {
+  const iconName = checked ? "Tick" : "Close";
+  return /* @__PURE__ */ jsx(IconLoader, { size: iconSize2xs, name: iconName });
+};
+const SwitchButtonBorderRadius = "32px";
+const SwitchLabelWrapperStyled = styled(Label).withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "SwitchLabelWrapperStyled",
+  componentId: "sc-1n5qceo-0"
+})({
+  display: "flex",
+  alignItems: "center",
+  gap: getSpacing(spacingXs),
+  cursor: "pointer"
+}, ({
+  disabled
+}) => ({
+  ...disabled && {
+    opacity: getOpacity(opacityDisabled)
+  }
+}), ({
+  bottomSpacing = spacingMd
+}) => getBottomSpacing({
+  bottomSpacing
+}));
+const SwitchButtonStyled = styled.span.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "SwitchButtonStyled",
+  componentId: "sc-1n5qceo-1"
+})({
+  position: "relative",
+  display: "flex",
+  "&:has(:focus-visible)": {
+    outline: `${getBorderWidth(borderWidthFocus)} solid ${getBorderColor(colorBorderFocus)}`,
+    borderRadius: SwitchButtonBorderRadius,
+    ...forcedColors({
+      outline: `${getBorderWidth(borderWidthFocus)} solid CanvasText`
+    })
+  }
+});
+const SwitchHandleWrapperStyled = styled.span.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "SwitchHandleWrapperStyled",
+  componentId: "sc-1n5qceo-2"
+})({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  padding: "1px",
+  transition: `all .2s ${ease_in_sine}`
+}, ({
+  checked
+}) => ({
+  transform: checked ? "translateX(20px)" : "translateX(0)"
+}));
+const SwitchInputElementStyled = styled.input.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "SwitchInputElementStyled",
+  componentId: "sc-1n5qceo-3"
+})({
+  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 SwitchHandleStyled = styled.span.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "SwitchHandleStyled",
+  componentId: "sc-1n5qceo-4"
+})({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "30px",
+  height: "30px",
+  background: getObjectColor(colorObjectInverse),
+  borderRadius: getBorderRadius(borderRadiusFull)
+}, ({
+  checked
+}) => ({
+  ...forcedColors({
+    color: checked ? "FieldText" : "Field",
+    background: checked ? "Field" : "FieldText"
+  }),
+  color: checked ? getObjectColor(colorObjectSelected) : getObjectColor(colorObjectUnselected)
+}));
+const SwitchTrackStyled = styled.span.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "SwitchTrackStyled",
+  componentId: "sc-1n5qceo-5"
+})(({
+  checked
+}) => ({
+  ...forcedColors({
+    background: checked ? "FieldText" : "Field",
+    border: `${getBorderWidth(borderWidthSm)} solid FieldText`
+  }),
+  width: "52px",
+  height: "32px",
+  background: checked ? getObjectColor(colorObjectSelected) : getObjectColor(colorObjectUnselected),
+  borderRadius: SwitchButtonBorderRadius
+}));
+const SwitchLabelStyled = styled.span.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "SwitchLabelStyled",
+  componentId: "sc-1n5qceo-6"
+})({});
+const Switch = ({
+  uid,
+  label,
+  onUpdate,
+  disabled,
+  bottomSpacing,
+  ...props
+}) => {
+  const [checked, setChecked] = useState(Boolean(props.checked));
+  useEffect(() => {
+    setChecked(props.checked ?? false);
+  }, [props.checked]);
+  const handleChange = () => {
+    const newChecked = !checked;
+    setChecked(!checked);
+    onUpdate == null ? void 0 : onUpdate(newChecked);
+  };
+  return /* @__PURE__ */ jsxs(SwitchLabelWrapperStyled, { bottomSpacing, disabled, htmlFor: uid, children: [
+    /* @__PURE__ */ jsxs(SwitchButtonStyled, { children: [
+      /* @__PURE__ */ jsxs(SwitchHandleWrapperStyled, { checked, children: [
+        /* @__PURE__ */ jsx(SwitchInputElementStyled, { ...props, id: uid, type: "checkbox", onChange: handleChange, checked, disabled, "aria-label": label, "aria-checked": checked, role: "switch" }),
+        /* @__PURE__ */ jsx(SwitchHandleStyled, { checked, children: getHandleIcon(checked) })
+      ] }),
+      /* @__PURE__ */ jsx(SwitchTrackStyled, { checked })
+    ] }),
+    /* @__PURE__ */ jsx(SwitchLabelStyled, { children: label })
+  ] });
+};
+export {
+  Switch as default
+};

package/dist/components/TabularPrice/index.js

@@ -0,0 +1,8 @@
+"use client";
+import "react/jsx-runtime";
+import { T } from "../../index-CeJsIf3Z.js";
+import "../../index-DQhtQZ85.js";
+import "../../renderInlineRichTextFromOpenText-CA52y1-B.js";
+export {
+  T as default
+};

package/dist/components/TextList/index.js

@@ -0,0 +1,10 @@
+"use client";
+import "react/jsx-runtime";
+import { T, a } from "../../index-D6hvbziL.js";
+import "../../tags-DI6H1biK.js";
+import "../../Spacing-D0HQH9YJ.js";
+import "../../renderInlineRichTextFromOpenText-CA52y1-B.js";
+export {
+  T as TextListItem,
+  a as default
+};

package/dist/components/Textarea/index.js

@@ -0,0 +1,156 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useImperativeHandle, useState, useEffect } from "react";
+import FormElement from "../FormElement/index.js";
+import FormHelperLabel from "../FormHelperLabel/index.js";
+import FormHelperMessage from "../FormHelperMessage/index.js";
+import { i as inputStateError } from "../../props-Czq9XX2J.js";
+import { c as spacingSm, d as spacingXl, s as spacingMd, a as spacingXs } from "../../Spacing-D0HQH9YJ.js";
+import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-CA52y1-B.js";
+import styled from "styled-components";
+import FormHelperStatusIcon from "../FormHelperStatusIcon/index.js";
+import forcedColors from "../../foundations/media-query/forcedColors/index.js";
+import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
+import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
+import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
+import { getHeadingSize } from "../../foundations/token/getHeadingSize/index.js";
+import { getSpacing } from "../../foundations/token/getSpacing/index.js";
+import { getTextColor } from "../../foundations/token/getTextColor/index.js";
+import { a as colorBorderNeutral, c as colorBorderFocus, b as colorBorderUnselected, d as colorBorderSuccess, e as colorBorderCritical } from "../../BorderColor-BummoQ1-.js";
+import { b as borderRadiusMd } from "../../BorderRadius-ClUShVLu.js";
+import { t as textHeadingXs } from "../../HeadingSize-CfCRn3Lh.js";
+import { e as colorTextPlaceholder, a as colorTextNeutral } from "../../TextColor-BXiR5Uq9.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+const TextareaWrapperStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "TextareaWrapperStyled",
+  componentId: "sc-b8i4y6-0"
+})({
+  position: "relative",
+  width: "100%"
+}, getBottomSpacing);
+const TextareaStyled = styled.textarea.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "TextareaStyled",
+  componentId: "sc-b8i4y6-1"
+})({
+  ...forcedColors({
+    backgroundColor: "Field",
+    border: "1px solid FieldText"
+  }),
+  display: "block",
+  width: "100%",
+  resize: "vertical",
+  borderRadius: getBorderRadius(borderRadiusMd),
+  border: "none",
+  fontFamily: "VodafoneVari, Arial, sans-serif",
+  color: getTextColor(colorTextNeutral),
+  backgroundColor: "transparent",
+  minHeight: `calc((${getHeadingSize(textHeadingXs).fontSize} * ${getHeadingSize(textHeadingXs).lineHeight}) + (2 * ${getSpacing(spacingSm)}))`,
+  "&:placeholder-shown": {
+    color: getTextColor(colorTextPlaceholder)
+  }
+}, ({
+  status
+}) => {
+  if (!status) {
+    return {
+      border: `1px solid ${getBorderColor(colorBorderUnselected)}`,
+      padding: getSpacing(spacingSm),
+      "&:focus-visible": {
+        ...forcedColors({
+          outline: "4px solid CanvasText"
+        }),
+        outline: `4px solid ${getBorderColor(colorBorderFocus)}`,
+        border: `1px solid ${getBorderColor(colorBorderNeutral)}`
+      }
+    };
+  }
+  if ("success" === status) {
+    return {
+      border: `2px solid ${getBorderColor(colorBorderSuccess)}`,
+      padding: `calc(${getSpacing(spacingSm)} - 1px)`,
+      "&:focus-visible": {
+        ...forcedColors({
+          outline: "4px solid CanvasText"
+        }),
+        outline: `4px solid ${getBorderColor(colorBorderFocus)}`,
+        border: `2px solid ${getBorderColor(colorBorderSuccess)}`
+      }
+    };
+  }
+  if ("error" === status) {
+    return {
+      border: `2px solid ${getBorderColor(colorBorderCritical)}`,
+      padding: `calc(${getSpacing(spacingSm)} - 1px)`,
+      "&:focus-visible": {
+        ...forcedColors({
+          outline: "4px solid CanvasText"
+        }),
+        outline: `4px solid ${getBorderColor(colorBorderFocus)}`,
+        border: `2px solid ${getBorderColor(colorBorderCritical)}`
+      }
+    };
+  }
+}, ({
+  isResizable
+}) => {
+  return {
+    resize: isResizable ? "vertical" : "none"
+  };
+}, getHeadingSize(textHeadingXs));
+const TextareaStatusIcon = styled(FormHelperStatusIcon).withConfig({
+  displayName: "TextareaStatusIcon",
+  componentId: "sc-b8i4y6-2"
+})({
+  position: "absolute",
+  top: getSpacing(spacingSm)
+}, ({
+  hasScrollbar
+}) => {
+  return {
+    right: hasScrollbar ? getSpacing(spacingXl) : getSpacing(spacingSm)
+  };
+});
+const Textarea = forwardRef(({
+  uid,
+  helperText,
+  errorMessage,
+  status,
+  label,
+  rows = 4,
+  placeholder,
+  isResizable = false,
+  bottomSpacing = spacingMd,
+  disabled,
+  ...props
+}, outerRef) => {
+  const innerRef = useRef(null);
+  useImperativeHandle(outerRef, () => innerRef.current, []);
+  const [hasScrollbar, setHasScrollbar] = useState(false);
+  const messageId = `text-${uid}`;
+  const textAreaProps = {
+    ...props,
+    id: uid,
+    "aria-describedby": inputStateError !== status && helperText || inputStateError === status && errorMessage ? messageId : props["aria-describedby"],
+    "aria-invalid": inputStateError === status ? true : void 0
+  };
+  useEffect(() => {
+    if (!innerRef.current) {
+      return;
+    }
+    const element = innerRef.current;
+    new ResizeObserver(() => setHasScrollbar(element.clientHeight < element.scrollHeight)).observe(element);
+  }, [innerRef]);
+  return /* @__PURE__ */ jsxs(FormElement, { bottomSpacing, disabled, children: [
+    /* @__PURE__ */ jsx(FormHelperLabel, { label, uid }),
+    /* @__PURE__ */ jsxs(TextareaWrapperStyled, { bottomSpacing: inputStateError !== status && helperText || inputStateError === status && errorMessage ? spacingXs : void 0, children: [
+      /* @__PURE__ */ jsx(TextareaStyled, { ...textAreaProps, rows, status, placeholder: renderInlineRichTextFromOpenText(placeholder), isResizable, ref: innerRef }),
+      /* @__PURE__ */ jsx(TextareaStatusIcon, { status, hasScrollbar })
+    ] }),
+    /* @__PURE__ */ jsx(FormHelperMessage, { id: messageId, status, message: inputStateError === status ? errorMessage : helperText })
+  ] });
+});
+export {
+  Textarea as default
+};

package/dist/components/Tray/index.js

@@ -0,0 +1,218 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+import ButtonGroup from "../ButtonGroup/index.js";
+import Heading from "../Heading/index.js";
+import { f as fontWeightBold } from "../../FontWeight-CR22KTex.js";
+import { a as textHeadingMd } from "../../HeadingSize-CfCRn3Lh.js";
+import { s as spacingMd, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
+import styled from "styled-components";
+import Card from "../Card/index.js";
+import Flex from "../Flex/index.js";
+import IconButton from "../IconButton/index.js";
+import { v as viewport } from "../../index-Ck2bCrhT.js";
+import { s as shadow28 } from "../../shadow-u158mzuN.js";
+import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
+import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
+import { getSpacing } from "../../foundations/token/getSpacing/index.js";
+import { b as colorBackgroundOverlayStatic } from "../../BackgroundColor-JObp_2xA.js";
+import { a as borderWidthFocus } from "../../BorderWidth-DfOlyKK7.js";
+import { g as getCssVar } from "../../getCssVar-BP6T9pFM.js";
+import { b as flexOrientationVertical } from "../../styled-CpoX5USb.js";
+const TrayOverlayStyled = styled("div").withConfig({
+  displayName: "TrayOverlayStyled",
+  componentId: "sc-os3mq3-0"
+})({
+  position: "fixed",
+  top: 0,
+  left: 0,
+  flexDirection: "column",
+  justifyContent: "center",
+  height: "100%",
+  width: "100%",
+  transition: "background-color 0.5s, visibility 0.5s",
+  alignItems: "flex-end",
+  overflowX: "hidden",
+  display: "flex",
+  zIndex: "22",
+  "&.trayOpen": {
+    backgroundColor: getBackgroundColor(colorBackgroundOverlayStatic)
+  },
+  "&.trayClosed": {
+    backgroundColor: "rgba(0, 0, 0, 0)"
+  }
+}, ({
+  open
+}) => ({
+  visibility: open ? "visible" : "hidden"
+}));
+const TrayStyled = styled(Card).withConfig({
+  displayName: "TrayStyled",
+  componentId: "sc-os3mq3-1"
+})({
+  height: "100%",
+  width: "320px",
+  ...viewport.md({
+    width: "420px"
+  }),
+  ...viewport.lg({
+    width: "475px"
+  }),
+  borderTopRightRadius: "0",
+  borderBottomRightRadius: "0",
+  transition: "transform 0.5s",
+  padding: `${getSpacing(spacingMd)} 0 0`,
+  display: "flex",
+  "&.trayOpen": {
+    transform: "translateX(0)"
+  },
+  "&.trayClosed": {
+    transform: "translateX(100%)"
+  }
+}, ({
+  buttons
+}) => ({
+  paddingBottom: buttons ? "0" : getSpacing(spacingMd)
+}));
+const TrayHeadingContainerStyled = styled(Flex).withConfig({
+  displayName: "TrayHeadingContainerStyled",
+  componentId: "sc-os3mq3-2"
+})({
+  padding: `0 ${getSpacing(spacingMd)}`,
+  marginBottom: `calc(${getSpacing(spacingMd)} - ${getBorderWidth(borderWidthFocus)})`
+});
+const TrayCloseButtonStyled = styled(IconButton).withConfig({
+  displayName: "TrayCloseButtonStyled",
+  componentId: "sc-os3mq3-3"
+})({
+  flex: "0 0 auto"
+});
+const TrayChildrenContainerStyled = styled("div").withConfig({
+  displayName: "TrayChildrenContainerStyled",
+  componentId: "sc-os3mq3-4"
+})({
+  overflowY: "auto",
+  padding: `${getBorderWidth(borderWidthFocus)} ${getSpacing(spacingMd)} 0`
+});
+const TrayButtonContainerStyled = styled("div").withConfig({
+  displayName: "TrayButtonContainerStyled",
+  componentId: "sc-os3mq3-5"
+})({
+  position: "relative",
+  transform: "none",
+  transition: "none",
+  padding: getSpacing(spacingMd),
+  boxShadow: getCssVar(shadow28),
+  marginTop: "auto"
+});
+const Tray = ({
+  heading,
+  // This default is set as the 'wrapper' element is currently containing the majority of the content of pages from our CMS.
+  contentElements = ".wrapper",
+  uid,
+  focusElementOnOpen,
+  focusElementOnClose,
+  children,
+  buttons,
+  ...props
+}) => {
+  const [open, setOpen] = useState(props.open === true);
+  const invokingElement = useRef(null);
+  const headingId = `${uid}-tray-heading`;
+  const overlay = useRef(null);
+  useEffect(() => {
+    setOpen(true === props.open);
+  }, [props.open]);
+  const headingProps = {
+    ...heading,
+    size: textHeadingMd,
+    weight: fontWeightBold,
+    id: headingId,
+    bottomSpacing: spacingNone
+  };
+  const onCloseIconButtonClick = (event) => {
+    event.preventDefault();
+    closeTray();
+  };
+  const closeWithEscape = (event) => {
+    if (event.key !== "Escape") return;
+    closeTray();
+  };
+  const closeOnOverlayClick = (event) => {
+    if (uid && event.target === document.getElementById(`${uid}-overlay`)) {
+      closeTray();
+    }
+  };
+  const updateAttributes = (element, open2) => {
+    if (open2) {
+      element.setAttribute("aria-hidden", "true");
+    } else {
+      element.removeAttribute("aria-hidden");
+    }
+    element.toggleAttribute("inert", open2);
+  };
+  const updateElements = (open2) => {
+    const content = document.querySelectorAll(contentElements);
+    for (const element of content) {
+      updateAttributes(element, open2);
+    }
+    document.body.classList.toggle("HideOverflowY", open2);
+  };
+  const openTray = (event) => {
+    var _a;
+    if (invokingElement) invokingElement.current = event.target;
+    (_a = props.onToggle) == null ? void 0 : _a.call(props, true);
+    setOpen(true);
+  };
+  const closeTray = () => {
+    var _a;
+    (_a = props.onToggle) == null ? void 0 : _a.call(props, false);
+    setOpen(false);
+  };
+  const manageFocusOnOpen = () => {
+    var _a, _b, _c;
+    focusElementOnOpen ? (_a = document.getElementById(focusElementOnOpen)) == null ? void 0 : _a.focus() : (_b = document.getElementById(headingId)) == null ? void 0 : _b.focus();
+    (_c = overlay.current) == null ? void 0 : _c.removeEventListener("transitionend", manageFocusOnOpen);
+  };
+  useEffect(() => {
+    const openingElements = document.querySelectorAll(`[data-action='tray-${uid}']`);
+    for (const openingElement of openingElements) {
+      openingElement.addEventListener("click", openTray);
+    }
+    return () => {
+      for (const openingElement of openingElements) {
+        openingElement.removeEventListener("click", openTray);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    var _a;
+    if (open) {
+      updateElements(true);
+      (_a = overlay.current) == null ? void 0 : _a.addEventListener("transitionend", manageFocusOnOpen);
+      document.addEventListener("keydown", closeWithEscape);
+    }
+    return () => {
+      var _a2, _b;
+      updateElements(false);
+      focusElementOnClose ? (_a2 = document.getElementById(focusElementOnClose)) == null ? void 0 : _a2.focus() : (_b = invokingElement.current) == null ? void 0 : _b.focus();
+      document.removeEventListener("keydown", closeWithEscape);
+    };
+  }, [open]);
+  useEffect(() => {
+    overlay.current = document.getElementById(`${uid}-overlay`);
+  }, []);
+  const tray = /* @__PURE__ */ jsx(TrayOverlayStyled, { className: open ? "trayOpen" : "trayClosed", open, id: `${uid}-overlay`, onClick: closeOnOverlayClick, children: /* @__PURE__ */ jsxs(TrayStyled, { className: open ? "trayOpen" : "trayClosed", role: "dialog", "aria-modal": "true", "aria-labelledby": headingId, buttons, children: [
+    /* @__PURE__ */ jsxs(TrayHeadingContainerStyled, { justify: "between", bottomSpacing: spacingNone, children: [
+      /* @__PURE__ */ jsx(Heading, { ...headingProps, tabIndex: -1 }),
+      /* @__PURE__ */ jsx(TrayCloseButtonStyled, { label: "Schließen", iconName: "Close", appearance: "tertiary", bottomSpacing: spacingNone, onClick: onCloseIconButtonClick, type: "button" })
+    ] }),
+    /* @__PURE__ */ jsx(TrayChildrenContainerStyled, { children }),
+    buttons && /* @__PURE__ */ jsx(TrayButtonContainerStyled, { children: /* @__PURE__ */ jsx(ButtonGroup, { ...buttons, orientation: flexOrientationVertical, bottomSpacing: spacingNone }) })
+  ] }) });
+  return createPortal(tray, document.body);
+};
+export {
+  Tray as default
+};

package/dist/easing-Dm-pO8SY.js

@@ -0,0 +1,6 @@
+const ease_in_sine = "cubic-bezier(.47, 0, .745, .715)";
+const ease_in_out_sine = "cubic-bezier(.445, .05, .55, .95)";
+export {
+  ease_in_out_sine as a,
+  ease_in_sine as e
+};

package/dist/filterProps-Cewck8OH.js

@@ -0,0 +1,13 @@
+const propsNotPassToDomDefault = ["accordionType", "activeId", "activeIndex", "setActiveId", "align", "animated", "appearance", "aspectRatio", "autoLayout", "apiKey", "badge", "borderBottom", "bottomSpacing", "buttonLink", "buttons", "coloringMode", "colorSwatch", "component", "corners", "description", "expanded", "filterItems", "gapSpacing", "grow", "handleOnClick", "handleOnToogle", "hasOverlay", "heading", "heightSm", "heightMd", "heightLg", "horizontalAlignment", "icon", "iconAlign", "iconName", "iconPosition", "images", "isActive", "isChecked", "isDisabled", "isFullscreen", "isOpen", "isOrdered", "isSelected", "isTransparentBackground", "items", "jumpToClickedItem", "justify", "justifyHorizontal", "lg", "loadingSpinnerChild", "mapId", "md", "message", "more", "nextAriaLabel", "notificationType", "objectFit", "objectPosition", "offset", "onUpdate", "openMultiple", "orientation", "padding", "prefix", "prefixWeight", "prevAriaLabel", "price", "productId", "promoPrice", "screenReaderInstruction", "showList", "size", "sm", "spacing", "spinnerType", "status", "stretch", "strikePrice", "suffix", "tag", "textContent", "uid", "variant", "verticalPadding", "viewportHeight", "weight", "width"];
+const filterProps = (propsNotPassToDom = []) => {
+  const shouldForwardProp = (prop) => {
+    if ("string" !== typeof prop) {
+      return false;
+    }
+    return ![...propsNotPassToDom, ...propsNotPassToDomDefault].includes(prop);
+  };
+  return shouldForwardProp;
+};
+export {
+  filterProps as f
+};