@vodafone_de/brix-components 3.1.6 → 3.1.8

package/esm/components/Dialog/index.js

@@ -0,0 +1,171 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+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 Heading from "../Heading/index.js";
+import styled from "styled-components";
+import ButtonGroup from "../ButtonGroup/index.js";
+import Card from "../Card/index.js";
+import IconButton from "../IconButton/index.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 { f as filterProps } from "../../../filterProps-Cewck8OH.js";
+import Flex from "../Flex/index.js";
+const DialogOverlayStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "DialogOverlayStyled",
+  componentId: "sc-z6nqyy-0"
+})({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  padding: `0 ${getSpacing(spacingMd)}`,
+  flexDirection: "column",
+  justifyContent: "center",
+  background: getBackgroundColor(colorBackgroundOverlayStatic),
+  height: "100%",
+  width: "100%",
+  zIndex: "22"
+}, ({
+  open
+}) => ({
+  display: open ? "flex" : "none"
+}));
+const DialogCardStyled = styled(Card).withConfig({
+  displayName: "DialogCardStyled",
+  componentId: "sc-z6nqyy-1"
+})({
+  height: "auto",
+  maxHeight: `calc(100% - 2*${getSpacing(spacingMd)})`,
+  maxWidth: "1240px",
+  alignSelf: "center",
+  padding: `${getSpacing(spacingMd)} calc(${getSpacing(spacingMd)} - ${getBorderWidth(borderWidthFocus)})`
+});
+const DialogIconButtonStyled = styled(IconButton).withConfig({
+  displayName: "DialogIconButtonStyled",
+  componentId: "sc-z6nqyy-2"
+})({
+  flex: "0 0 auto"
+});
+const DialogButtonGroupStyled = styled(ButtonGroup).withConfig({
+  displayName: "DialogButtonGroupStyled",
+  componentId: "sc-z6nqyy-3"
+})({
+  justifyContent: "flex-end",
+  padding: `0 ${getBorderWidth(borderWidthFocus)}`
+});
+const DialogChildrenContainerStyled = styled("div").withConfig({
+  displayName: "DialogChildrenContainerStyled",
+  componentId: "sc-z6nqyy-4"
+})({
+  padding: `${getBorderWidth(borderWidthFocus)} ${getBorderWidth(borderWidthFocus)} 0`,
+  marginBottom: getSpacing(spacingMd),
+  overflowY: "auto"
+});
+const DialogHeadingContainerStyled = styled(Flex).withConfig({
+  displayName: "DialogHeadingContainerStyled",
+  componentId: "sc-z6nqyy-5"
+})({
+  padding: `0 ${getBorderWidth(borderWidthFocus)}`,
+  marginBottom: `calc(${getSpacing(spacingMd)} - ${getBorderWidth(borderWidthFocus)})`
+});
+const Dialog = ({
+  heading,
+  children,
+  uid,
+  focusElementOnOpen,
+  focusElementOnClose,
+  buttons,
+  dismissable = true,
+  // This default is set as the 'wrapper' element is currently containing the majority of the content of pages from our CMS.
+  contentElements = ".wrapper",
+  ...props
+}) => {
+  const [open, setOpen] = useState(props.open === true);
+  const invokingElement = useRef(null);
+  const headingId = `${uid}-dialog-heading`;
+  const headingProps = {
+    ...heading,
+    size: textHeadingMd,
+    weight: fontWeightBold,
+    uid: headingId,
+    bottomSpacing: spacingNone
+  };
+  const closeWithEscape = (event) => {
+    if (event.key !== "Escape") return;
+    closeDialog();
+  };
+  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 openDialog = (event) => {
+    if (invokingElement) invokingElement.current = event.target;
+    setOpen(true);
+  };
+  const closeDialog = () => {
+    var _a;
+    (_a = props.onToggle) == null ? void 0 : _a.call(props, false);
+    setOpen(false);
+  };
+  useEffect(() => {
+    setOpen(true === props.open);
+  }, [props.open]);
+  useEffect(() => {
+    const openingElements = document.querySelectorAll(`[data-action='dialog-${uid}']`);
+    for (const openingElement of openingElements) {
+      openingElement.addEventListener("click", openDialog);
+    }
+    return () => {
+      for (const openingElement of openingElements) {
+        openingElement.removeEventListener("click", openDialog);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    var _a;
+    if (open) {
+      updateElements(true);
+      focusElementOnOpen && ((_a = document.getElementById(focusElementOnOpen)) == null ? void 0 : _a.focus());
+      dismissable && 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();
+      dismissable && document.removeEventListener("keydown", closeWithEscape);
+    };
+  }, [open]);
+  const onCloseIconButtonClick = (event) => {
+    event.preventDefault();
+    closeDialog();
+  };
+  const dialog = /* @__PURE__ */ jsx(DialogOverlayStyled, { open, id: `dialog-${uid}`, className: props.className, children: /* @__PURE__ */ jsxs(DialogCardStyled, { role: "dialog", "aria-modal": "true", "aria-describedby": headingId, children: [
+    /* @__PURE__ */ jsxs(DialogHeadingContainerStyled, { justify: "between", bottomSpacing: spacingNone, children: [
+      /* @__PURE__ */ jsx(Heading, { ...headingProps }),
+      dismissable && /* @__PURE__ */ jsx(DialogIconButtonStyled, { label: "Schließen", iconName: "Close", appearance: "tertiary", bottomSpacing: spacingNone, onClick: onCloseIconButtonClick })
+    ] }),
+    /* @__PURE__ */ jsx(DialogChildrenContainerStyled, { children }),
+    /* @__PURE__ */ jsx(DialogButtonGroupStyled, { ...buttons, orientation: "horizontal", justifyHorizontal: "end", isReversed: true })
+  ] }) });
+  return open ? createPortal(dialog, document.body) : null;
+};
+export {
+  Dialog as default
+};

package/esm/components/DiscoveryCard/index.js

@@ -0,0 +1,129 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { R as RichText } from "../../../index-D3VTZbkv.js";
+import { f as fontWeightBold } from "../../../FontWeight-CR22KTex.js";
+import { b as textHeadingSm } from "../../../HeadingSize-CfCRn3Lh.js";
+import { s as spacingMd, b as spacingNone, a as spacingXs, c as spacingSm } from "../../../Spacing-D0HQH9YJ.js";
+import { s as smallSize } from "../../../SizeTypes-Ck_RdzIf.js";
+import { b as BadgeStyled, B as Badge } from "../../../index-DXcRBKzd.js";
+import Body, { bodyAlignLeft, bodyAlignCenter } from "../Body/index.js";
+import Heading from "../Heading/index.js";
+import Link from "../Link/index.js";
+import { P as Price, b as priceSizeSm, f as priceAlignLeft, g as priceAlignCenter, a as priceOrientationVertical } from "../../../index-CgzBmq4n.js";
+import Image, { aspectRatio16_9, aspectRatio1_1 } from "../Image/index.js";
+import { a as cornerRounded } from "../../../CornerStyle-JEbGNArR.js";
+import styled from "styled-components";
+import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
+import { getSpacing } from "../../foundations/token/getSpacing/index.js";
+import { f as filterProps } from "../../../filterProps-Cewck8OH.js";
+import Card from "../Card/index.js";
+import { a as LinkStyled } from "../../../index-RUfLpIPk.js";
+const discoveryCardOrientationVertical = "vertical";
+const discoveryCardOrientationHorizontal = "horizontal";
+const DiscoveryCardStyled = styled(Card).withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "DiscoveryCardStyled",
+  componentId: "sc-6ng9yt-0"
+})(({
+  orientation
+}) => {
+  const isVertical = orientation === discoveryCardOrientationVertical;
+  return {
+    ...isVertical ? {
+      [`& ${BadgeStyled}`]: {
+        marginLeft: "auto",
+        marginRight: "auto"
+      },
+      [`& ${LinkStyled}`]: {
+        marginLeft: "auto",
+        marginRight: "auto"
+      }
+    } : {
+      display: "flex",
+      flexDirection: "row-reverse",
+      gap: getSpacing(spacingMd),
+      alignItems: "center",
+      textAlign: "center"
+    }
+  };
+}, ({
+  bottomSpacing = spacingMd
+}) => getBottomSpacing({
+  bottomSpacing
+}));
+const DiscoveryCardContentyled = styled.div.withConfig({
+  displayName: "DiscoveryCardContentyled",
+  componentId: "sc-6ng9yt-1"
+})({
+  flex: 1,
+  display: "flex",
+  flexDirection: "column"
+});
+const DiscoveryCardImageLinkStyled = styled.a.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "DiscoveryCardImageLinkStyled",
+  componentId: "sc-6ng9yt-2"
+})(({
+  orientation
+}) => {
+  if (orientation === discoveryCardOrientationVertical) {
+    return {
+      width: "100%"
+    };
+  }
+  return {
+    flex: 1,
+    maxWidth: "320px"
+  };
+}, ({
+  bottomSpacing = spacingNone
+}) => getBottomSpacing({
+  bottomSpacing
+}));
+styled(Image).withConfig({
+  displayName: "DiscoveryCardImageStyled",
+  componentId: "sc-6ng9yt-3"
+})({
+  width: "100%",
+  height: "100%"
+});
+const DiscoveryCardLinkedImage = ({
+  uid,
+  image,
+  link: {
+    icon: _icon,
+    component: _component,
+    ...linkProps
+  },
+  orientation = discoveryCardOrientationVertical,
+  bottomSpacing
+}) => /* @__PURE__ */ jsx(DiscoveryCardImageLinkStyled, { ...linkProps, tabIndex: -1, "aria-describedby": `headingId-${uid}`, orientation, bottomSpacing, children: /* @__PURE__ */ jsx(Image, { ...image, aspectRatio: orientation === discoveryCardOrientationVertical ? aspectRatio16_9 : aspectRatio1_1, corners: cornerRounded }) });
+const DiscoveryCard = ({
+  orientation = discoveryCardOrientationVertical,
+  uid,
+  image,
+  heading,
+  link,
+  badge,
+  body,
+  price,
+  ...props
+}) => {
+  const ContentWrapper = orientation === discoveryCardOrientationHorizontal ? DiscoveryCardContentyled : Fragment;
+  return /* @__PURE__ */ jsxs(DiscoveryCardStyled, { ...props, orientation, children: [
+    /* @__PURE__ */ jsx(DiscoveryCardLinkedImage, { uid, orientation, link, image, bottomSpacing: discoveryCardOrientationHorizontal === orientation ? spacingNone : spacingMd }),
+    /* @__PURE__ */ jsxs(ContentWrapper, { children: [
+      badge && /* @__PURE__ */ jsx(Badge, { ...badge, size: smallSize, bottomSpacing: spacingXs }),
+      /* @__PURE__ */ jsx(Heading, { ...heading, size: textHeadingSm, weight: fontWeightBold, align: discoveryCardOrientationHorizontal === orientation ? bodyAlignLeft : bodyAlignCenter, id: `headingId-${uid}`, bottomSpacing: !body && !price ? spacingSm : spacingXs, children: heading.children }),
+      body && body.component === "Body" && /* @__PURE__ */ jsx(Body, { ...body, align: discoveryCardOrientationHorizontal === orientation ? bodyAlignLeft : bodyAlignCenter, bottomSpacing: !price ? spacingSm : spacingXs, children: body.children }),
+      body && body.component === "RichText" && /* @__PURE__ */ jsx(RichText, { ...body, bottomSpacing: !price ? spacingSm : spacingXs }),
+      price && /* @__PURE__ */ jsx(Price, { ...price, orientation: priceOrientationVertical, align: discoveryCardOrientationHorizontal === orientation ? priceAlignLeft : priceAlignCenter, size: priceSizeSm, bottomSpacing: spacingSm }),
+      /* @__PURE__ */ jsx(Link, { ...link, "aria-describedby": `headingId-${uid}`, bottomSpacing: spacingNone })
+    ] })
+  ] });
+};
+export {
+  DiscoveryCard as default,
+  discoveryCardOrientationHorizontal,
+  discoveryCardOrientationVertical
+};

package/esm/components/DiscoveryCardGroup/index.js

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import DiscoveryCard, { discoveryCardOrientationVertical } from "../DiscoveryCard/index.js";
+import Grid from "../Grid/index.js";
+import GridItem from "../GridItem/index.js";
+import { getSpacing } from "../../foundations/token/getSpacing/index.js";
+import { s as spacingMd } from "../../../Spacing-D0HQH9YJ.js";
+import { a as LinkStyled } from "../../../index-RUfLpIPk.js";
+const DiscoveryCardGroupGridStyled = styled(Grid).withConfig({
+  displayName: "DiscoveryCardGroupGridStyled",
+  componentId: "sc-6axszn-0"
+})({
+  alignItems: "stretch"
+});
+const DiscoveryCardGroupGridItemStyled = styled(GridItem).withConfig({
+  displayName: "DiscoveryCardGroupGridItemStyled",
+  componentId: "sc-6axszn-1"
+})({
+  gap: getSpacing(spacingMd)
+});
+const DiscoveryCardStyled = styled(DiscoveryCard).withConfig({
+  displayName: "DiscoveryCardStyled",
+  componentId: "sc-6axszn-2"
+})({
+  flex: 1,
+  marginBottom: 0
+}, ({
+  orientation
+}) => {
+  const css = {};
+  if (orientation === discoveryCardOrientationVertical) {
+    const buttonSelector = `& ${LinkStyled.toString()}`;
+    css[buttonSelector] = {
+      marginTop: "auto"
+    };
+  }
+  return css;
+});
+const DiscoveryCardGroup = ({
+  component: _component,
+  discoveryCardsList,
+  ...props
+}) => /* @__PURE__ */ jsxs(DiscoveryCardGroupGridStyled, { ...props, children: [
+  /* @__PURE__ */ jsx(DiscoveryCardGroupGridItemStyled, { sm: 12, md: 6, children: /* @__PURE__ */ jsx(DiscoveryCardStyled, { ...discoveryCardsList[0] }) }),
+  /* @__PURE__ */ jsxs(DiscoveryCardGroupGridItemStyled, { sm: 12, md: 6, children: [
+    /* @__PURE__ */ jsx(DiscoveryCardStyled, { ...discoveryCardsList[1] }),
+    /* @__PURE__ */ jsx(DiscoveryCardStyled, { ...discoveryCardsList[2] })
+  ] })
+] });
+export {
+  DiscoveryCardGroup as default
+};

package/esm/components/Divider/index.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import forcedColors from "../../foundations/media-query/forcedColors/index.js";
+import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
+import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
+import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
+import { j as colorBorderSubtle } from "../../../BorderColor-BummoQ1-.js";
+import { s as spacingMd } from "../../../Spacing-D0HQH9YJ.js";
+import { f as filterProps } from "../../../filterProps-Cewck8OH.js";
+const DividerLineStyled = styled.hr.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "DividerLineStyled",
+  componentId: "sc-1lpd5g7-0"
+})({
+  ...forcedColors({
+    border: `${getBorderWidth("Divider")} solid CanvasText`
+  }),
+  border: `${getBorderWidth("Divider")} solid ${getBorderColor(colorBorderSubtle)}`,
+  borderBottom: "none",
+  width: "100%"
+}, ({
+  bottomSpacing = spacingMd
+}) => getBottomSpacing({
+  bottomSpacing
+}));
+const Divider = (props) => /* @__PURE__ */ jsx(DividerLineStyled, { ...props });
+export {
+  Divider as default
+};

package/esm/components/Fieldset/index.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { eB as NotificationErrorIcon } from "../../../index-Cbojl4_Q.js";
+import { forwardRef } from "react";
+import FormHelperMessage from "../FormHelperMessage/index.js";
+import { a as inputStateError } from "../../../props-DDpgcryb.js";
+import Legend from "../Legend/index.js";
+import { s as spacingMd } from "../../../Spacing-D0HQH9YJ.js";
+import styled from "styled-components";
+import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
+import { f as filterProps } from "../../../filterProps-Cewck8OH.js";
+const FieldsetStyled = styled.fieldset.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "FieldsetStyled",
+  componentId: "sc-1838z8i-0"
+})(
+  // Chrome gives a fieldset a min-width equal to its content, so we need to reset it here
+  {
+    minWidth: "0px"
+  },
+  getBottomSpacing
+);
+const Fieldset = forwardRef(({
+  uid,
+  legend,
+  errorMessage,
+  helperText,
+  bottomSpacing = spacingMd,
+  children,
+  status,
+  ...props
+}, ref) => {
+  return /* @__PURE__ */ jsxs(FieldsetStyled, { ...props, uid, "aria-labelledby": inputStateError !== status && helperText || inputStateError === status && errorMessage ? `fieldset-legend-${uid} fieldset-message-${uid}` : props["aria-labelledby"], bottomSpacing, ref, children: [
+    legend && /* @__PURE__ */ jsx(Legend, { ...legend, id: inputStateError !== status && helperText || inputStateError === status && errorMessage ? `fieldset-legend-${uid}` : props["id"] }),
+    children,
+    inputStateError !== status && helperText || inputStateError === status && errorMessage ? /* @__PURE__ */ jsx(FormHelperMessage, { id: `fieldset-message-${uid}`, message: inputStateError === status ? errorMessage : helperText, status, children: status === inputStateError && /* @__PURE__ */ jsx(NotificationErrorIcon, { size: "iconSizeXs" }) }) : null
+  ] });
+});
+export {
+  Fieldset as default
+};

package/esm/components/FilterGroup/index.js

@@ -0,0 +1,147 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { df as IconLoader, iv as iconSizeSm } from "../../../index-Cbojl4_Q.js";
+import { useState } from "react";
+import Fieldset from "../Fieldset/index.js";
+import styled from "styled-components";
+import { s as screenreaderOnly } from "../../../index-DQhtQZ85.js";
+import forcedColors from "../../foundations/media-query/forcedColors/index.js";
+import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/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 { getHoverColor } from "../../foundations/token/getHoverColor/index.js";
+import { getObjectColor } from "../../foundations/token/getObjectColor/index.js";
+import { getSpacing } from "../../foundations/token/getSpacing/index.js";
+import { getTextColor } from "../../foundations/token/getTextColor/index.js";
+import { c as colorBackgroundNeutral } from "../../../BackgroundColor-JObp_2xA.js";
+import { b as colorBorderUnselected, i as colorBorderSelected, c as colorBorderFocus } from "../../../BorderColor-BummoQ1-.js";
+import { c as borderRadiusFull } from "../../../BorderRadius-ClUShVLu.js";
+import { b as borderWidthUnselected, a as borderWidthFocus } from "../../../BorderWidth-DfOlyKK7.js";
+import { b as colorObjectSelected } from "../../../ObjectColor-BZDBuV8H.js";
+import { a as spacingXs, b as spacingNone, e as spacing2Xs, c as spacingSm } from "../../../Spacing-D0HQH9YJ.js";
+import { t as textBodyMd } from "../../../TextBodySize-BcZR9mh2.js";
+import { a as colorTextNeutral, b as colorTextInverseStatic } from "../../../TextColor-DsntmDNw.js";
+import { f as filterProps } from "../../../filterProps-Cewck8OH.js";
+const FilterGroupStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "FilterGroupStyled",
+  componentId: "sc-170zpd1-0"
+})({
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "center",
+  color: getTextColor(colorTextNeutral)
+}, {
+  gap: getSpacing(spacingXs)
+});
+const FilterStyled = styled.label.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "FilterStyled",
+  componentId: "sc-170zpd1-1"
+})({
+  textDecoration: "none",
+  whiteSpace: "nowrap",
+  userSelect: "none",
+  marginBottom: 0,
+  display: "flex",
+  alignItems: "center",
+  outline: "none",
+  cursor: "pointer",
+  padding: `${getSpacing(spacingXs)} ${getSpacing(spacingSm)}`,
+  borderRadius: getBorderRadius(borderRadiusFull),
+  borderStyle: "solid",
+  borderWidth: getBorderWidth(borderWidthUnselected),
+  gap: `${getSpacing(spacingNone)} ${getSpacing(spacing2Xs)}`
+}, getBodySize(textBodyMd), ({
+  checked = false
+}) => {
+  if (!checked) {
+    return {
+      background: getBackgroundColor(colorBackgroundNeutral),
+      color: getTextColor(colorTextNeutral),
+      borderColor: getBorderColor(colorBorderUnselected),
+      "&:hover, &:focus-within": {
+        background: getHoverColor(colorBackgroundNeutral)
+      },
+      ...forcedColors({
+        color: "CanvasText",
+        background: "Canvas"
+      })
+    };
+  }
+  return {
+    background: getObjectColor(colorObjectSelected),
+    color: getTextColor(colorTextInverseStatic),
+    borderColor: getBorderColor(colorBorderSelected),
+    "&:hover, &:focus-within": {
+      background: getHoverColor(colorObjectSelected)
+    },
+    ...forcedColors({
+      color: "SelectedItemText",
+      background: "SelectedItem",
+      "&:hover, &:focus-within": {
+        background: "SelectedItem"
+      }
+    })
+  };
+}, {
+  "&:has(:focus-visible)": {
+    ...forcedColors({
+      outline: `${getBorderWidth(borderWidthFocus)} solid CanvasText`
+    }),
+    boxShadow: `${getBorderColor(colorBorderFocus)} 0px 0px 0px ${getBorderWidth(borderWidthFocus)}`,
+    outline: "none"
+  }
+});
+const FilterIconStyled = styled(IconLoader).withConfig({
+  displayName: "FilterIconStyled",
+  componentId: "sc-170zpd1-2"
+})({
+  pointerEvents: "none"
+});
+const FilterInputStyled = styled.input.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "FilterInputStyled",
+  componentId: "sc-170zpd1-3"
+})(screenreaderOnly);
+const FilterGroup = ({
+  component: _component,
+  uid,
+  elements,
+  onUpdate,
+  ...props
+}) => {
+  const getValuesFromCheckedItems = () => {
+    return elements.reduce((valuesArr, element) => {
+      if (element.checked) {
+        valuesArr.push(element.value);
+      }
+      return valuesArr;
+    }, []);
+  };
+  const [checkedValues, setCheckedValues] = useState(getValuesFromCheckedItems());
+  const handleChange = (evt) => {
+    const value = evt.target.value;
+    const index = checkedValues.indexOf(value);
+    const updateChecked = [...checkedValues];
+    index === -1 ? updateChecked.push(value) : updateChecked.splice(index, 1);
+    setCheckedValues(updateChecked);
+    onUpdate(updateChecked);
+  };
+  const getFilters = elements.map(({
+    children,
+    ...element
+  }) => {
+    const isChecked = element.value ? checkedValues.includes(element.value) : false;
+    return /* @__PURE__ */ jsxs(FilterStyled, { ...element.optionalLabelProps, checked: isChecked, children: [
+      element.iconName ? /* @__PURE__ */ jsx(FilterIconStyled, { name: element.iconName, size: iconSizeSm }) : null,
+      /* @__PURE__ */ jsx(FilterInputStyled, { ...element, type: "checkbox", defaultChecked: isChecked, onChange: handleChange }),
+      children
+    ] }, element.value);
+  });
+  return /* @__PURE__ */ jsx(Fieldset, { ...props, uid: `fieldset-${uid}`, children: /* @__PURE__ */ jsx(FilterGroupStyled, { children: getFilters }) });
+};
+export {
+  FilterGroup as default
+};

package/esm/components/Flex/index.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { F as FlexStyled } from "../../../styled-B7ngqPIu.js";
+import { e, d, c, b, f, a } from "../../../styled-B7ngqPIu.js";
+const Flex = ({
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(FlexStyled, { ...props, children });
+export {
+  Flex as default,
+  e as flexJustifyBetween,
+  d as flexJustifyCenter,
+  c as flexJustifyEnd,
+  b as flexJustifyStart,
+  f as flexOrientationHorizontal,
+  a as flexOrientationVertical
+};

package/esm/components/FlexItem/index.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import { cloneElement } from "react";
+import { b as spacingNone } from "../../../Spacing-D0HQH9YJ.js";
+import styled from "styled-components";
+import { f as filterProps } from "../../../filterProps-Cewck8OH.js";
+const flexItemFullGrow = "full";
+const flexItemAutoGrow = "auto";
+const FlexItemStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "FlexItemStyled",
+  componentId: "sc-1qdfzcw-0"
+})(({
+  grow = flexItemAutoGrow
+}) => ({
+  flexGrow: grow === "full" ? 1 : 0
+}));
+const removeBottomSpacing = (children) => {
+  if (children && Array.isArray(children)) {
+    return children.map((child) => {
+      return cloneElement(child, {
+        bottomSpacing: spacingNone
+      });
+    });
+  }
+  if (children && !Array.isArray(children)) {
+    return cloneElement(children, {
+      bottomSpacing: spacingNone
+    });
+  }
+  return children;
+};
+const FlexItem = ({
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(FlexItemStyled, { ...props, children: removeBottomSpacing(children) });
+export {
+  FlexItem as default,
+  flexItemAutoGrow,
+  flexItemFullGrow
+};

package/esm/components/FootnoteContent/index.js

@@ -0,0 +1,38 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import Link from "../Link/index.js";
+import styled, { keyframes, css } from "styled-components";
+import forcedColors from "../../foundations/media-query/forcedColors/index.js";
+import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
+import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
+import { c as colorBorderFocus } from "../../../BorderColor-BummoQ1-.js";
+import { a as borderWidthFocus } from "../../../BorderWidth-DfOlyKK7.js";
+import { f as filterProps } from "../../../filterProps-Cewck8OH.js";
+const rotate = keyframes(["0%{box-shadow:transparent 0px 0px 0px 0px;}50%{box-shadow:", " 0px 0px 2px ", ";}100%{box-shadow:transparent 0px 0px 0px 0px;}}"], getBorderColor(colorBorderFocus), getBorderWidth(borderWidthFocus));
+const FootnoteContentStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "FootnoteContentStyled",
+  componentId: "sc-1everik-0"
+})({
+  marginTop: getBorderWidth(borderWidthFocus),
+  "&:target": {
+    outline: "none",
+    ...forcedColors({
+      outline: `${getBorderWidth(borderWidthFocus)} solid CanvasText`
+    })
+  }
+}, css(["&:target{animation-duration:1s;animation-timing-function:ease-in-out;animation-iteration-count:2;animation-name:", ";}"], rotate));
+const FootnoteContent = ({
+  linkUid,
+  backlinkText,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxs(FootnoteContentStyled, { id: props.uid, ...props, tabIndex: -1, children: [
+  children,
+  /* @__PURE__ */ jsx(Link, { id: `back-${props.uid}`, icon: {
+    position: "right",
+    name: "ArrowUp"
+  }, href: `#${linkUid}`, children: backlinkText })
+] });
+export {
+  FootnoteContent as default
+};