@vodafone_de/publish-test 0.0.1 → 53.0.0

package/dist/index-BQEVd7At.js

@@ -0,0 +1,247 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { B as Badge } from "./index-yLLyPEd9.js";
+import ColorSwatch from "./components/ColorSwatch/index.js";
+import styled from "styled-components";
+import IconLoader from "./components/IconLoader/index.js";
+import Image from "./components/Image/index.js";
+import { b as aspectRatio1_1 } from "./props-CLadRD1u.js";
+import { u as useViewport, a as viewportSm } from "./index-DlENLqPq.js";
+import { getHeadingSize } from "./foundations/token/getHeadingSize/index.js";
+import { t as textHeadingXs } from "./HeadingSize-O__w72MO.js";
+import { getBodySize } from "./foundations/token/getBodySize/index.js";
+import { t as textBodyMd } from "./TextBodySize-CP9q4gRv.js";
+import { h as iconSizeMd } from "./IconSize-Da9zhR76.js";
+import { f as spacing2Xs, s as spacingMd, c as spacingSm, b as spacingNone } from "./Spacing-Dj-qX3Z5.js";
+import { s as screenreaderOnly } from "./index-p6eyyJpy.js";
+import forcedColors from "./foundations/media-query/forcedColors/index.js";
+import { v as viewport } from "./index-CG4uiVbZ.js";
+import { getBackgroundColor } from "./foundations/token/getBackgroundColor/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 { getFontWeight } from "./foundations/token/getFontWeight/index.js";
+import { getHoverColor } from "./foundations/token/getHoverColor/index.js";
+import { getOpacity } from "./foundations/token/getOpacity/index.js";
+import { g as getSpacing } from "./index-l-i-mIeP.js";
+import { getTextColor } from "./foundations/token/getTextColor/index.js";
+import { a as colorBackgroundNeutral } from "./BackgroundColor-Ba4D10TC.js";
+import { b as borderRadiusMd } from "./BorderRadius-0jhn76gB.js";
+import { b as borderWidthFocus, c as borderWidthSelected } from "./BorderWidth-CwrNKc0Q.js";
+import { f as fontWeightRegular, a as fontWeightBold } from "./FontWeight-C8c-UnWu.js";
+import { o as opacityOverlay } from "./Opacity-smkGiwsf.js";
+import { a as colorTextNeutral } from "./TextColor-DsntmDNw.js";
+import { s as shouldForwardProp } from "./shouldForwardProp-CONMmlMa.js";
+const PickerElementIconStyled = styled(IconLoader).withConfig({
+  displayName: "PickerElementIconStyled",
+  componentId: "sc-q127g0-0"
+})({
+  marginLeft: "auto",
+  marginRight: "auto",
+  display: "block"
+});
+const PickerElementSystemIcon = (props) => /* @__PURE__ */ jsx(PickerElementIconStyled, { ...props });
+const PickerElementImage = (props) => {
+  const viewport2 = useViewport();
+  return /* @__PURE__ */ jsx(Image, { ...props, aspectRatio: aspectRatio1_1, width: viewport2 === viewportSm ? 96 : 120, height: viewport2 === viewportSm ? 96 : 120, objectFit: "contain" });
+};
+const PickerElementLabelStyled = styled.span.withConfig({
+  displayName: "PickerElementLabelStyled",
+  componentId: "sc-aozgig-0"
+})({
+  display: "block"
+}, getHeadingSize(textHeadingXs));
+const PickerElementSuffixStyled = styled.span.withConfig({
+  displayName: "PickerElementSuffixStyled",
+  componentId: "sc-1yqn4iq-0"
+})({
+  display: "block"
+}, getBodySize(textBodyMd));
+const PickerGridItemStyled = styled.div.withConfig({
+  shouldForwardProp,
+  displayName: "PickerGridItemStyled",
+  componentId: "sc-me5z6y-0"
+})(({
+  gridConfig
+}) => ({
+  gridColumn: `span ${(gridConfig == null ? void 0 : gridConfig.sm) ?? 12}`,
+  ...viewport.md({
+    gridColumn: `span ${(gridConfig == null ? void 0 : gridConfig.md) ?? (gridConfig == null ? void 0 : gridConfig.sm) ?? 12}`
+  }),
+  ...viewport.lg({
+    gridColumn: `span ${(gridConfig == null ? void 0 : gridConfig.lg) ?? (gridConfig == null ? void 0 : gridConfig.md) ?? (gridConfig == null ? void 0 : gridConfig.sm) ?? 12}`
+  })
+}));
+const PickerLabelElementStyled = styled.label.withConfig({
+  shouldForwardProp,
+  displayName: "PickerLabelElementStyled",
+  componentId: "sc-me5z6y-1"
+})({
+  height: "100%",
+  position: "relative",
+  cursor: "pointer"
+}, ({
+  isDisabled
+}) => {
+  if (!isDisabled) {
+    return {};
+  }
+  return {
+    cursor: "not-allowed",
+    pointerEvents: "none"
+  };
+});
+const PickerCardStyled = styled.span.withConfig({
+  shouldForwardProp,
+  displayName: "PickerCardStyled",
+  componentId: "sc-me5z6y-2"
+})(
+  {
+    height: "100%",
+    flexDirection: "column",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    textAlign: "center",
+    padding: `${getSpacing(spacingMd)} ${getSpacing(spacingSm)}`,
+    gap: getSpacing(spacing2Xs),
+    fontWeight: getFontWeight(fontWeightRegular),
+    transition: `font-weight 0.3s ease-out`,
+    borderRadius: getBorderRadius(borderRadiusMd)
+  },
+  () => {
+    const backgroundColor = getBackgroundColor(colorBackgroundNeutral);
+    const color = getTextColor(colorTextNeutral);
+    return {
+      ...forcedColors({
+        border: "1px solid CanvasText"
+      }),
+      backgroundColor,
+      color
+    };
+  },
+  // everything related to "borders"
+  ({
+    isChecked
+  }) => {
+    const focusColor = getBorderColor("colorBorderFocus");
+    const selectedBorderColor = getBorderColor("colorBorderSelected");
+    const unselectedBorderColor = getBorderColor("colorBorderUnselected");
+    const hoverBorderColor = getBorderColor("colorBorderNeutral");
+    if (isChecked) {
+      return {
+        boxShadow: `inset ${selectedBorderColor} 0px 0px 0px ${getBorderWidth(borderWidthSelected)}`,
+        "&:has(:focus-visible)": {
+          ...forcedColors({
+            outline: `${getBorderWidth(borderWidthFocus)} solid CanvasText`
+          }),
+          boxShadow: `${focusColor} 0px 0px 0px ${getBorderWidth(borderWidthFocus)}, inset ${selectedBorderColor} 0px 0px 0px ${getBorderWidth(borderWidthSelected)}`
+        },
+        "&:hover": {
+          ...forcedColors({
+            background: "SelectedItem"
+          }),
+          background: getHoverColor(colorBackgroundNeutral)
+        }
+      };
+    }
+    return {
+      boxShadow: `inset ${unselectedBorderColor} 0px 0px 0px 1px`,
+      "&:hover": {
+        background: getHoverColor(colorBackgroundNeutral),
+        boxShadow: `inset ${hoverBorderColor} 0px 0px 0px 1px`
+      },
+      "&:has(:focus-visible)": {
+        ...forcedColors({
+          outline: `${getBorderWidth(borderWidthFocus)} solid CanvasText`
+        }),
+        boxShadow: `${focusColor} 0px 0px 0px 4px, inset ${unselectedBorderColor} 0px 0px 0px 1px`
+      }
+    };
+  },
+  ({
+    isChecked
+  }) => {
+    if (!isChecked) {
+      return {};
+    }
+    return {
+      ...forcedColors({
+        background: "SelectedItem",
+        color: "SelectedItemText"
+      }),
+      outline: "none",
+      fontWeight: getFontWeight(fontWeightBold)
+    };
+  },
+  ({
+    isDisabled
+  }) => {
+    if (!isDisabled) {
+      return {};
+    }
+    return {
+      opacity: getOpacity(opacityOverlay)
+    };
+  }
+);
+const PickerInputElementStyled = styled.input.withConfig({
+  displayName: "PickerInputElementStyled",
+  componentId: "sc-me5z6y-3"
+})(screenreaderOnly);
+const PickerGroupContext = createContext(null);
+const createChildren = ({
+  value,
+  ...props
+}) => {
+  const children = [];
+  if (props.imageSrc) {
+    children.push(/* @__PURE__ */ jsx(PickerElementImage, { src: props.imageSrc, alt: props.label }, `${value}-image`));
+  }
+  if (props.colorValue) {
+    children.push(/* @__PURE__ */ jsx(ColorSwatch, { color: props.colorValue, size: "md" }, `${value}-color`));
+  }
+  if (props.icon) {
+    children.push(/* @__PURE__ */ jsx(PickerElementSystemIcon, { size: iconSizeMd, name: props.icon }, `${value}-icon`));
+  }
+  children.push(/* @__PURE__ */ jsx(PickerElementLabelStyled, { children: props.label }, `${value}-label`));
+  if (props.suffix) {
+    children.push(/* @__PURE__ */ jsx(PickerElementSuffixStyled, { children: props.suffix }, `${value}-subline`));
+  }
+  if (props.badge) {
+    children.push(/* @__PURE__ */ jsx(Badge, { ...props.badge, bottomSpacing: spacingNone }, props.badge.uid));
+  }
+  return children;
+};
+const Picker = ({
+  labelProps = {},
+  inputProps = {},
+  ...props
+}) => {
+  const pickerGroupContext = useContext(PickerGroupContext);
+  const children = createChildren(props);
+  const isChecked = (pickerGroupContext == null ? void 0 : pickerGroupContext.checkedValue) === props.value;
+  const isDisabled = props.disabled === true || (pickerGroupContext == null ? void 0 : pickerGroupContext.disabled) === true;
+  const name = (pickerGroupContext == null ? void 0 : pickerGroupContext.name) ?? props.name;
+  const onChange = (event) => {
+    if (inputProps.onChange) {
+      inputProps.onChange(event);
+    }
+    if (pickerGroupContext) {
+      pickerGroupContext.onChange(props.value);
+      return;
+    }
+    if (props.handleChange) {
+      props.handleChange(props.value);
+    }
+  };
+  return /* @__PURE__ */ jsx(PickerLabelElementStyled, { ...labelProps, isChecked, isDisabled, children: /* @__PURE__ */ jsxs(PickerCardStyled, { isChecked, isDisabled, children: [
+    /* @__PURE__ */ jsx(PickerInputElementStyled, { ...inputProps, type: "radio", name, value: props.value, checked: isChecked, disabled: isDisabled, onChange }),
+    children
+  ] }) });
+};
+export {
+  Picker as P,
+  PickerGridItemStyled as a,
+  PickerGroupContext as b
+};

package/dist/index-CG4uiVbZ.js

@@ -0,0 +1,32 @@
+const breakpoint_medium_number = 768;
+const breakpoint_medium = `${breakpoint_medium_number}px`;
+const breakpoint_large_number = 1025;
+const breakpoint_large = `${breakpoint_large_number}px`;
+const mediumMediaQuery = `screen and (min-width: ${breakpoint_medium})`;
+const largeMediaQuery = `screen and (min-width: ${breakpoint_large})`;
+const md = (stylesInViewport) => {
+  return {
+    [`@media ${mediumMediaQuery}`]: {
+      ...stylesInViewport
+    }
+  };
+};
+const lg = (stylesInViewport) => {
+  return {
+    [`@media ${largeMediaQuery}`]: {
+      ...stylesInViewport
+    }
+  };
+};
+const viewport = {
+  md,
+  lg
+};
+export {
+  breakpoint_large as a,
+  breakpoint_medium as b,
+  breakpoint_medium_number as c,
+  largeMediaQuery as l,
+  mediumMediaQuery as m,
+  viewport as v
+};

package/dist/index-CP5FSD7n.js

@@ -0,0 +1,175 @@
+import { jsxs, jsx, Fragment as Fragment$1 } from "react/jsx-runtime";
+import { useId, Fragment } from "react";
+import styled from "styled-components";
+import { translateLayoutPropsToCss } from "./foundations/layout/index.js";
+import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
+import { getFontWeight } from "./foundations/token/getFontWeight/index.js";
+import { getHeadingSize } from "./foundations/token/getHeadingSize/index.js";
+import { g as getSpacing } from "./index-l-i-mIeP.js";
+import { getTextColor } from "./foundations/token/getTextColor/index.js";
+import { getTextDecoration } from "./foundations/token/getTextDecoration/index.js";
+import { a as fontWeightBold, f as fontWeightRegular } from "./FontWeight-C8c-UnWu.js";
+import { s as spacingMd, b as spacingNone, a as spacingXs } from "./Spacing-Dj-qX3Z5.js";
+import { g as colorTextCritical, a as colorTextNeutral } from "./TextColor-DsntmDNw.js";
+import { a as shouldForwardPropExcluding, s as shouldForwardProp } from "./shouldForwardProp-CONMmlMa.js";
+import { S as ScreenreaderOnly } from "./index-p6eyyJpy.js";
+import "./props-n71pckjd.js";
+const textDecorationStrikethrough = "Strikethrough";
+const PriceOuterWrapperStyled = styled.div.attrs({
+  role: "group"
+}).withConfig({
+  displayName: "PriceOuterWrapperStyled",
+  componentId: "sc-gmxz3p-0"
+})([""]);
+const PriceInnerWrapperStyled = styled.div.withConfig({
+  shouldForwardProp: shouldForwardPropExcluding(["aria-live"]),
+  displayName: "PriceInnerWrapperStyled",
+  componentId: "sc-gmxz3p-1"
+})(({
+  align
+}) => ({
+  textAlign: align
+}), ({
+  bottomSpacing = spacingMd
+}) => getBottomSpacing({
+  bottomSpacing
+}), ({
+  layout
+}) => layout && translateLayoutPropsToCss(layout));
+const StrikePriceStyled = styled.div.withConfig({
+  displayName: "StrikePriceStyled",
+  componentId: "sc-gmxz3p-2"
+})(getHeadingSize("xs"), {
+  fontWeight: getFontWeight(fontWeightBold),
+  textDecoration: getTextDecoration(textDecorationStrikethrough),
+  color: getTextColor(colorTextCritical)
+});
+const PriceOrientationStyled = styled.div.withConfig({
+  shouldForwardProp,
+  displayName: "PriceOrientationStyled",
+  componentId: "sc-gmxz3p-3"
+})(({
+  orientation
+}) => {
+  if ("horizontal" === orientation) {
+    return {
+      display: "flex",
+      gap: `${getSpacing(spacingNone)} ${getSpacing(spacingXs)}`,
+      alignItems: "baseline"
+    };
+  }
+  return {};
+}, ({
+  orientation,
+  align
+}) => {
+  if ("horizontal" !== orientation) {
+    return {};
+  }
+  return {
+    justifyContent: align
+  };
+});
+const PriceStyled = styled.div.withConfig({
+  shouldForwardProp,
+  displayName: "PriceStyled",
+  componentId: "sc-gmxz3p-4"
+})(({
+  size
+}) => getHeadingSize(size), {
+  fontWeight: getFontWeight(fontWeightBold),
+  color: getTextColor(colorTextNeutral)
+});
+const PriceSuffixStyled = styled.div.withConfig({
+  shouldForwardProp,
+  displayName: "PriceSuffixStyled",
+  componentId: "sc-gmxz3p-5"
+})(getHeadingSize("xs"), {
+  color: getTextColor(colorTextNeutral)
+});
+const TabularPriceInnerWrapperStyled = styled.div.withConfig({
+  shouldForwardProp: shouldForwardPropExcluding(["aria-live"]),
+  displayName: "TabularPriceInnerWrapperStyled",
+  componentId: "sc-k10e74-0"
+})({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "baseline",
+  gap: `${getSpacing(spacingNone)} ${getSpacing(spacingXs)}`
+}, ({
+  bottomSpacing = spacingMd
+}) => getBottomSpacing({
+  bottomSpacing
+}), ({
+  layout
+}) => layout && translateLayoutPropsToCss(layout));
+const TabularPricePrefixStyled = styled.div.withConfig({
+  shouldForwardProp,
+  displayName: "TabularPricePrefixStyled",
+  componentId: "sc-k10e74-1"
+})(getHeadingSize("xs"), {
+  flexGrow: 1,
+  minWidth: 0,
+  overflowWrap: "break-word",
+  wordBreak: "break-word",
+  color: getTextColor(colorTextNeutral)
+}, ({
+  prefixWeight = fontWeightRegular
+}) => ({
+  fontWeight: getFontWeight(prefixWeight)
+}));
+const TabularPriceStrikePriceStyled = styled(StrikePriceStyled).withConfig({
+  displayName: "TabularPriceStrikePriceStyled",
+  componentId: "sc-k10e74-2"
+})({
+  flexShrink: 0
+});
+const TabularPricePriceStyled = styled(PriceStyled).withConfig({
+  displayName: "TabularPricePriceStyled",
+  componentId: "sc-k10e74-3"
+})({
+  flexShrink: 0
+});
+const TabularPrice = ({
+  prefixWeight,
+  productName,
+  ...props
+}) => {
+  const priceIdBase = useId();
+  const prefixLines = props.prefix.split("\n");
+  const prefixTextId = `${priceIdBase}-visible-prefix`;
+  const priceTextId = `${priceIdBase}-price`;
+  const strikePriceTextId = `${priceIdBase}-strike`;
+  const standardPriceTextId = `${priceIdBase}-standard-label`;
+  const offerPriceTextId = `${priceIdBase}-offer-label`;
+  const ariaLabelledBy = props.strikePrice ? `${prefixTextId} ${standardPriceTextId} ${strikePriceTextId} ${offerPriceTextId} ${priceTextId}` : `${prefixTextId} ${priceTextId}`;
+  return /* @__PURE__ */ jsxs(PriceOuterWrapperStyled, { className: props.className, ...{
+    "aria-live": props["aria-live"]
+  }, ...{
+    "aria-labelledby": ariaLabelledBy
+  }, children: [
+    productName && /* @__PURE__ */ jsx("meta", { itemProp: "name", content: productName }),
+    /* @__PURE__ */ jsxs(TabularPriceInnerWrapperStyled, { ...props, itemProp: productName ? "offers" : void 0, itemType: productName ? "https://schema.org/Offer" : void 0, itemScope: productName ? true : void 0, children: [
+      productName && /* @__PURE__ */ jsx("meta", { itemProp: "priceCurrency", content: "EUR" }),
+      /* @__PURE__ */ jsx(TabularPricePrefixStyled, { id: prefixTextId, prefixWeight, children: prefixLines.map((line, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        line,
+        index < prefixLines.length - 1 && /* @__PURE__ */ jsx("br", {})
+      ] }, index)) }),
+      props.strikePrice ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsx(ScreenreaderOnly, { id: standardPriceTextId, children: "Standardpreis" }),
+        /* @__PURE__ */ jsx(TabularPriceStrikePriceStyled, { id: strikePriceTextId, children: props.strikePrice }),
+        /* @__PURE__ */ jsx(ScreenreaderOnly, { id: offerPriceTextId, children: "Angebotspreis" })
+      ] }) : null,
+      /* @__PURE__ */ jsx(TabularPricePriceStyled, { id: priceTextId, size: props.size, itemProp: productName ? "price" : void 0, content: productName ? props.price : void 0, children: props.price })
+    ] })
+  ] });
+};
+export {
+  PriceOuterWrapperStyled as P,
+  StrikePriceStyled as S,
+  TabularPrice as T,
+  PriceInnerWrapperStyled as a,
+  PriceOrientationStyled as b,
+  PriceStyled as c,
+  PriceSuffixStyled as d
+};

package/dist/index-Cx4q-LSt.js

@@ -0,0 +1,100 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { l as liTagName, d as divTagName, u as ulTagName, r as olTagName } from "./tags-BeNegJAK.js";
+import { s as spacingMd } from "./Spacing-Dj-qX3Z5.js";
+import { G as GridItemStyled, a as GridStyled } from "./styled-Bp9hHt9l.js";
+import "./props-B4dAdfyc.js";
+const resolveBreakpoints = (config) => {
+  const sm = config.sm ?? 12;
+  const md = config.md ?? sm;
+  const lg = config.lg ?? md;
+  return {
+    sm,
+    md,
+    lg
+  };
+};
+const calculateNestedGridConfig = (parentGridConfig, currentGridConfig) => {
+  const parent = resolveBreakpoints(parentGridConfig);
+  const current = resolveBreakpoints(currentGridConfig);
+  return {
+    sm: parent.sm * (current.sm / 12),
+    md: parent.md * (current.md / 12),
+    lg: parent.lg * (current.lg / 12)
+  };
+};
+const GridItemContext = createContext({
+  gridConfig: {
+    sm: 12
+  }
+});
+const GridItem = ({
+  sm = 12,
+  tag = divTagName,
+  ...props
+}) => {
+  const gridContext = useContext(GridContext);
+  const gridItemContext = useContext(GridItemContext);
+  const gridTag = gridContext == null ? void 0 : gridContext.tag;
+  const gridGap = gridContext == null ? void 0 : gridContext.gap;
+  const gridAutoLayout = gridContext == null ? void 0 : gridContext.autoLayout;
+  const gridItemGridConfig = {
+    sm,
+    md: props.md,
+    lg: props.lg
+  };
+  let nestedGridConfig;
+  if (gridContext && gridContext.nestedGridConfig) {
+    nestedGridConfig = calculateNestedGridConfig(gridContext.nestedGridConfig, gridItemGridConfig);
+  } else if (gridContext && gridContext.autoLayout) {
+    nestedGridConfig = calculateNestedGridConfig(gridContext.autoLayout, gridItemGridConfig);
+  } else if (gridItemContext && gridItemContext.nestedGridConfig) {
+    nestedGridConfig = calculateNestedGridConfig(gridItemContext.nestedGridConfig, gridItemGridConfig);
+  } else if (gridItemContext && gridItemContext.gridConfig) {
+    nestedGridConfig = calculateNestedGridConfig(gridItemContext.gridConfig, gridItemGridConfig);
+  }
+  const gridItem = /* @__PURE__ */ jsx(GridItemStyled, { ...props, as: gridTag === ulTagName || gridTag === olTagName ? liTagName : tag, gap: gridGap, sm, ...gridAutoLayout, children: props.children });
+  if (gridAutoLayout) {
+    return gridItem;
+  }
+  return /* @__PURE__ */ jsx(GridItemContext, { value: {
+    gridConfig: {
+      sm,
+      md: props.md,
+      lg: props.lg
+    },
+    nestedGridConfig
+  }, children: gridItem });
+};
+const GridContext = createContext(void 0);
+const Grid = ({
+  tag = divTagName,
+  gap = spacingMd,
+  autoLayout,
+  ...props
+}) => {
+  const gridContext = useContext(GridContext);
+  const gridItemContext = useContext(GridItemContext);
+  let nestedGridConfig;
+  if (gridContext && gridContext.nestedGridConfig && autoLayout) {
+    nestedGridConfig = calculateNestedGridConfig(gridContext.nestedGridConfig, autoLayout);
+  } else if (gridContext && gridContext.autoLayout && autoLayout) {
+    nestedGridConfig = calculateNestedGridConfig(gridContext.autoLayout, autoLayout);
+  } else if (gridItemContext && gridItemContext.nestedGridConfig && autoLayout) {
+    nestedGridConfig = calculateNestedGridConfig(gridItemContext.nestedGridConfig, autoLayout);
+  } else if (gridItemContext && gridItemContext.gridConfig && autoLayout) {
+    nestedGridConfig = calculateNestedGridConfig(gridItemContext.gridConfig, autoLayout);
+  }
+  return /* @__PURE__ */ jsx(GridContext, { value: {
+    tag,
+    gap,
+    autoLayout,
+    nestedGridConfig
+  }, children: /* @__PURE__ */ jsx(GridStyled, { ...props, tag, gap, children: props.children }) });
+};
+export {
+  Grid as G,
+  GridContext as a,
+  GridItem as b,
+  GridItemContext as c
+};

package/dist/index-DlENLqPq.js

@@ -0,0 +1,26 @@
+import { useState, useEffect } from "react";
+import { l as largeMediaQuery, m as mediumMediaQuery } from "./index-CG4uiVbZ.js";
+import { useMediaQuery } from "./hooks/useMediaQuery/index.js";
+const viewportSm = "sm";
+const viewportMd = "md";
+const viewportLg = "lg";
+const useViewport = () => {
+  const tablet = useMediaQuery(mediumMediaQuery);
+  const desktop = useMediaQuery(largeMediaQuery);
+  const [viewportState, setViewportState] = useState(viewportSm);
+  useEffect(() => {
+    if (desktop) {
+      setViewportState(viewportLg);
+    } else if (tablet) {
+      setViewportState(viewportMd);
+    } else {
+      setViewportState(viewportSm);
+    }
+  }, [tablet, desktop]);
+  return viewportState;
+};
+export {
+  viewportSm as a,
+  useViewport as u,
+  viewportLg as v
+};

package/dist/index-I1KnrcQZ.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { i as iconSizeSm } from "./IconSize-Da9zhR76.js";
+import { l as leftPosition } from "./PositionType-BIdZQO2H.js";
+import { a as ButtonIconStyled, b as buttonHeight } from "./styled-Bq2k-APw.js";
+import { useLinkComponent } from "./hooks/useLinkComponent/index.js";
+import { s as sanitizeLinkProps } from "./sanitizeLinkProps-D2Kkovy1.js";
+import { a as shouldForwardPropExcluding, p as pickDomProps } from "./shouldForwardProp-CONMmlMa.js";
+import styled from "styled-components";
+import { g as getButtonAppearance } from "./ButtonAppearanceHelper-Hf0OlfFd.js";
+import { translateLayoutPropsToCss } from "./foundations/layout/index.js";
+import { v as viewport } from "./index-CG4uiVbZ.js";
+import { getBodySize } from "./foundations/token/getBodySize/index.js";
+import { getBorderRadius } from "./foundations/token/getBorderRadius/index.js";
+import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
+import { getFontWeight } from "./foundations/token/getFontWeight/index.js";
+import { g as getSpacing } from "./index-l-i-mIeP.js";
+import { b as borderRadiusMd } from "./BorderRadius-0jhn76gB.js";
+import { p as primaryAppearance } from "./ButtonAppearances-BEMZJMeh.js";
+import { f as fontWeightRegular } from "./FontWeight-C8c-UnWu.js";
+import { s as spacingMd, b as spacingNone, a as spacingXs, d as spacingXl } from "./Spacing-Dj-qX3Z5.js";
+import { t as textBodyMd } from "./TextBodySize-CP9q4gRv.js";
+const getButtonIcon = (icon, iconPosition) => {
+  if (!icon) {
+    return null;
+  }
+  const position = iconPosition || leftPosition;
+  return /* @__PURE__ */ jsx(ButtonIconStyled, { iconPosition: position, size: iconSizeSm, name: icon });
+};
+const ButtonAsLinkStyled = styled.span.withConfig({
+  shouldForwardProp: shouldForwardPropExcluding(["href"]),
+  displayName: "ButtonAsLinkStyled",
+  componentId: "sc-dvan4-0"
+})({
+  appearance: "none",
+  flexWrap: "nowrap",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  position: "relative",
+  padding: `${getSpacing(spacingXs)} ${getSpacing(spacingXl)}`,
+  borderRadius: getBorderRadius(borderRadiusMd),
+  fontWeight: getFontWeight(fontWeightRegular),
+  height: buttonHeight,
+  display: "flex",
+  "&:hover": {
+    textDecoration: "none"
+  },
+  "& a": {
+    color: "inherit",
+    display: "flex",
+    gap: `${getSpacing(spacingNone)} ${getSpacing(spacingXs)}`,
+    textDecoration: "none"
+  },
+  "& a:focus-visible": {
+    outline: "none"
+  },
+  "& a::after": {
+    content: '""',
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    top: 0,
+    left: 0
+  }
+}, getBodySize(textBodyMd), ({
+  width = "auto"
+}) => ({
+  width: "100%",
+  ...viewport.md({
+    width: "full" === width ? "100%" : "fit-content"
+  })
+}), ({
+  appearance = primaryAppearance
+}) => getButtonAppearance(appearance), ({
+  bottomSpacing = spacingMd
+}) => getBottomSpacing({
+  bottomSpacing
+}), ({
+  layout
+}) => layout && translateLayoutPropsToCss(layout));
+const ButtonAsLink = (props) => {
+  const LinkComponent = useLinkComponent();
+  return /* @__PURE__ */ jsx(ButtonAsLinkStyled, { width: props.width, appearance: props.appearance, layout: props.layout, bottomSpacing: props.bottomSpacing, id: props.id, children: /* @__PURE__ */ jsxs(LinkComponent, { ...sanitizeLinkProps(pickDomProps(props)), id: props.id ? `${props.id}-link` : void 0, children: [
+    props.children,
+    getButtonIcon(props.icon, props.iconPosition)
+  ] }) });
+};
+export {
+  ButtonAsLink as B,
+  getButtonIcon as g
+};