@vodafone_de/brix-components 3.0.0 → 3.0.2

package/dist/shadow-u158mzuN.js

@@ -0,0 +1,4 @@
+const shadow28 = "shadow28";
+export {
+  shadow28 as s
+};

package/dist/styled-BpvuD699.js

@@ -0,0 +1,45 @@
+import styled from "styled-components";
+import forcedColors from "./foundations/media-query/forcedColors/index.js";
+import { s as shadow28 } from "./shadow-u158mzuN.js";
+import { getBackgroundColor } from "./foundations/token/getBackgroundColor/index.js";
+import { getBorderRadius } from "./foundations/token/getBorderRadius/index.js";
+import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
+import { getSpacing } from "./foundations/token/getSpacing/index.js";
+import { getTextColor } from "./foundations/token/getTextColor/index.js";
+import { b as borderRadiusMd } from "./BorderRadius-ClUShVLu.js";
+import { s as spacingMd } from "./Spacing-D0HQH9YJ.js";
+import { a as colorTextNeutral } from "./TextColor-BXiR5Uq9.js";
+import { f as filterProps } from "./filterProps-Cewck8OH.js";
+import { g as getCssVar } from "./getCssVar-BP6T9pFM.js";
+import { d as colorBackgroundBrandGradient, c as colorBackgroundNeutral } from "./BackgroundColor-JObp_2xA.js";
+const CardAppearanceColor = {
+  primary: colorBackgroundNeutral,
+  secondary: colorBackgroundBrandGradient
+};
+const CardStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "CardStyled",
+  componentId: "sc-1hs2vg8-0"
+})({
+  ...forcedColors({
+    border: "1px solid CanvasText"
+  }),
+  padding: `${getSpacing(spacingMd)}`,
+  boxShadow: getCssVar(shadow28),
+  borderRadius: getBorderRadius(borderRadiusMd),
+  height: "100%",
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  color: getTextColor(colorTextNeutral)
+}, ({
+  appearance = "primary"
+}) => {
+  return {
+    background: getBackgroundColor(CardAppearanceColor[appearance])
+  };
+}, getBottomSpacing);
+export {
+  CardStyled as C,
+  CardAppearanceColor as a
+};

package/dist/styled-CDWclYAa.js

@@ -0,0 +1,124 @@
+import styled from "styled-components";
+import forcedColors from "./foundations/media-query/forcedColors/index.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 { 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 { c as colorBackgroundNeutral } from "./BackgroundColor-JObp_2xA.js";
+import { c as colorBorderFocus, a as colorBorderNeutral, b as colorBorderUnselected, d as colorBorderSuccess, e as colorBorderCritical } from "./BorderColor-BummoQ1-.js";
+import { b as borderRadiusMd } from "./BorderRadius-ClUShVLu.js";
+import { b as borderWidthUnselected } from "./BorderWidth-DfOlyKK7.js";
+import { c as spacingSm, a as spacingXs } from "./Spacing-D0HQH9YJ.js";
+import { e as colorTextPlaceholder, a as colorTextNeutral } from "./TextColor-BXiR5Uq9.js";
+import { f as filterProps } from "./filterProps-Cewck8OH.js";
+const InputWrapperStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "InputWrapperStyled",
+  componentId: "sc-1lx2jz-0"
+})({
+  ...forcedColors({
+    backgroundColor: "Field",
+    border: "1px solid FieldText"
+  }),
+  display: "flex",
+  justifyItems: "center",
+  alignItems: "center",
+  gap: `${getSpacing(spacingXs)}`,
+  padding: `0 ${getSpacing(spacingSm)} 0 0`,
+  borderRadius: getBorderRadius(borderRadiusMd),
+  backgroundColor: getBackgroundColor(colorBackgroundNeutral)
+}, ({
+  status
+}) => {
+  if (!status) {
+    return {
+      boxShadow: `inset ${getBorderColor(colorBorderUnselected)} 0px 0px 0px 1px`,
+      "&:focus-within": {
+        ...forcedColors({
+          outline: "4px solid CanvasText"
+        }),
+        boxShadow: `${getBorderColor(colorBorderFocus)} 0px 0px 0px 4px, inset ${getBorderColor(colorBorderNeutral)} 0px 0px 0px 1px`,
+        outline: "none"
+      }
+    };
+  }
+  if ("success" === status) {
+    return {
+      boxShadow: `inset ${getBorderColor(colorBorderSuccess)} 0px 0px 0px 2px`,
+      "&:focus-within": {
+        ...forcedColors({
+          outline: "4px solid CanvasText"
+        }),
+        boxShadow: `${getBorderColor(colorBorderFocus)} 0px 0px 0px 4px, inset ${getBorderColor(colorBorderSuccess)} 0px 0px 0px 2px`
+      }
+    };
+  }
+  if ("error" === status) {
+    return {
+      boxShadow: `inset ${getBorderColor(colorBorderCritical)} 0px 0px 0px 2px`,
+      "&:focus-within": {
+        ...forcedColors({
+          outline: "4px solid CanvasText"
+        }),
+        boxShadow: `${getBorderColor(colorBorderFocus)} 0px 0px 0px 4px, inset ${getBorderColor(colorBorderCritical)} 0px 0px 0px 2px`
+      }
+    };
+  }
+}, getBottomSpacing);
+const InputStyled = styled.input.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "InputStyled",
+  componentId: "sc-1lx2jz-1"
+})(getHeadingSize("xs"), forcedColors({
+  border: "none"
+}), {
+  fontWeight: "normal",
+  width: "100%",
+  flex: 1,
+  /**
+   * Since we use a boxshadow as 'border' on the outer div,
+   * we put a 1px invisible border on it
+   * so that we reach the required height overall
+   */
+  border: `${getBorderWidth(borderWidthUnselected)} solid transparent`,
+  outline: "none",
+  backgroundColor: "transparent",
+  color: getTextColor(colorTextNeutral),
+  padding: `${getSpacing(spacingXs)} 0 ${getSpacing(spacingXs)} ${getSpacing(spacingSm)}`,
+  "&::placeholder": {
+    color: getTextColor(colorTextPlaceholder)
+  },
+  height: "44px"
+}, {
+  /**
+   * overwrite simplicity styles
+   */
+  "input&": {
+    maxWidth: "unset",
+    borderRadius: "unset",
+    boxShadow: "unset",
+    "&:focus": {
+      ...forcedColors({
+        border: "none"
+      }),
+      outline: "unset",
+      border: `${getBorderWidth(borderWidthUnselected)} solid transparent`
+    },
+    "&:disabled": {
+      ...forcedColors({
+        border: "none"
+      }),
+      color: "unset",
+      background: "unset",
+      border: `${getBorderWidth(borderWidthUnselected)} solid transparent`
+    }
+  }
+});
+export {
+  InputWrapperStyled as I,
+  InputStyled as a
+};

package/dist/styled-CXSdomF5.js

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+import { getBorderColor } from "./foundations/token/getBorderColor/index.js";
+import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
+import { getSpacing } from "./foundations/token/getSpacing/index.js";
+import { getTextColor } from "./foundations/token/getTextColor/index.js";
+import { f as colorBorderWarning } from "./BorderColor-BummoQ1-.js";
+import { c as spacingSm, s as spacingMd } from "./Spacing-D0HQH9YJ.js";
+import { c as colorTextInverseStatic } from "./TextColor-BXiR5Uq9.js";
+import { f as filterProps } from "./filterProps-Cewck8OH.js";
+const DemoBoxStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "DemoBoxStyled",
+  componentId: "sc-xo01zx-0"
+})({
+  height: "100px",
+  background: "#FFC5A8",
+  border: `1px dashed ${getBorderColor(colorBorderWarning)}`,
+  color: getTextColor(colorTextInverseStatic),
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  textAlign: "center",
+  width: "100%",
+  flexDirection: "column",
+  lineBreak: "anywhere",
+  padding: getSpacing(spacingSm)
+}, ({
+  bottomSpacing = spacingMd
+}) => getBottomSpacing({
+  bottomSpacing
+}));
+export {
+  DemoBoxStyled as D
+};

package/dist/styled-CpoX5USb.js

@@ -0,0 +1,71 @@
+import styled from "styled-components";
+import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
+import { getSpacing } from "./foundations/token/getSpacing/index.js";
+import { s as spacingMd, b as spacingNone } from "./Spacing-D0HQH9YJ.js";
+import { f as filterProps } from "./filterProps-Cewck8OH.js";
+const flexOrientationHorizontal = "horizontal";
+const flexOrientationVertical = "vertical";
+const flexJustifyStart = "start";
+const flexJustifyEnd = "end";
+const flexJustifyCenter = "center";
+const flexJustifyBetween = "between";
+const translateToJustifyContent = (justify) => {
+  if (!justify) {
+    return;
+  }
+  const justifyValues = {
+    [flexJustifyEnd]: "flex-end",
+    [flexJustifyCenter]: "center",
+    [flexJustifyBetween]: "space-between",
+    [flexJustifyStart]: "flex-start"
+  };
+  return justifyValues[justify];
+};
+const FlexStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "FlexStyled",
+  componentId: "sc-1m7hd4c-0"
+})({
+  display: "flex"
+}, ({
+  wrap = false
+}) => {
+  if (wrap) {
+    return {
+      flexWrap: "wrap"
+    };
+  }
+  return {
+    flexWrap: "nowrap"
+  };
+}, ({
+  orientation = flexOrientationHorizontal
+}) => ({
+  flexDirection: orientation === "horizontal" ? "row" : "column",
+  height: orientation === "horizontal" ? "auto" : "100%"
+}), ({
+  justify = flexJustifyStart
+}) => ({
+  justifyContent: translateToJustifyContent(justify)
+}), ({
+  gapSpacing = spacingMd
+}) => {
+  if (gapSpacing) {
+    return {
+      gap: getSpacing(gapSpacing)
+    };
+  }
+}, ({
+  bottomSpacing = spacingNone
+}) => getBottomSpacing({
+  bottomSpacing
+}));
+export {
+  FlexStyled as F,
+  flexJustifyStart as a,
+  flexOrientationVertical as b,
+  flexJustifyEnd as c,
+  flexJustifyCenter as d,
+  flexJustifyBetween as e,
+  flexOrientationHorizontal as f
+};

package/dist/styled-DZo6MwrF.js

@@ -0,0 +1,245 @@
+import styled, { keyframes, css } from "styled-components";
+import forcedColors from "./foundations/media-query/forcedColors/index.js";
+import reducedMotion from "./foundations/media-query/reducedMotion/index.js";
+import { v as viewport } from "./index-Ck2bCrhT.js";
+import { getBackgroundColor } from "./foundations/token/getBackgroundColor/index.js";
+import { getBodySize } from "./foundations/token/getBodySize/index.js";
+import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
+import { getHeadingSize } from "./foundations/token/getHeadingSize/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 { a as colorBackgroundOverlay } from "./BackgroundColor-JObp_2xA.js";
+import { o as opacityOverlay } from "./Opacity-smkGiwsf.js";
+import { b as spacingNone } from "./Spacing-D0HQH9YJ.js";
+import { l as largeSize } from "./SizeTypes-Ck_RdzIf.js";
+import { f as filterProps } from "./filterProps-Cewck8OH.js";
+import Body from "./components/Body/index.js";
+const loadingSpinnerOverlays = {
+  Light: `rgba(255, 255, 255, ${getOpacity(opacityOverlay)})`,
+  Dark: `rgba(38, 38, 38, ${getOpacity(opacityOverlay)})`
+};
+const loadingSpinnerOverlayCssVar = "loadingSpinnerOverlay";
+const calculateSpinnerHeight = (size, bottomSpacing, label) => {
+  const spinnerHeight = spinnerSvgSizes[size];
+  const labelHeight = label ? `${mapLabelStyleToSpinnerSize[size].fontSize} * ${mapLabelStyleToSpinnerSize[size].lineHeight}` : "0px";
+  return `calc(${spinnerHeight} + ${getSpacing(bottomSpacing)} + ${labelHeight})`;
+};
+const spinnerSvgSizes = {
+  xs: "24px",
+  sm: "76px",
+  md: "148px",
+  lg: "300px"
+};
+const LoadingSpinnerContainerStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "LoadingSpinnerContainerStyled",
+  componentId: "sc-1bnjzqj-0"
+})({
+  position: "relative",
+  height: "100%"
+}, ({
+  coversFullPage
+}) => {
+  if (coversFullPage) {
+    return {
+      position: "fixed",
+      zIndex: "1001"
+    };
+  }
+  return {};
+}, ({
+  bottomSpacing = spacingNone
+}) => getBottomSpacing({
+  bottomSpacing
+}));
+const LoadingSpinnerContentStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "LoadingSpinnerContentStyled",
+  componentId: "sc-1bnjzqj-1"
+})({
+  display: "flex",
+  flexDirection: "column",
+  minHeight: "100%",
+  width: "fit-content",
+  justifyContent: "center",
+  alignItems: "center"
+}, ({
+  hasOverlay
+}) => {
+  if (hasOverlay) {
+    return {
+      background: getBackgroundColor(colorBackgroundOverlay),
+      position: "absolute",
+      zIndex: 1001,
+      width: "100%",
+      left: 0,
+      top: 0
+    };
+  } else {
+    return {};
+  }
+}, ({
+  coversFullPage
+}) => {
+  if (coversFullPage) {
+    return {
+      position: "fixed",
+      zIndex: "1001"
+    };
+  }
+  return {};
+});
+const LoadingSpinnerChildrenStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "LoadingSpinnerChildrenStyled",
+  componentId: "sc-1bnjzqj-2"
+})({
+  width: "100%",
+  height: "100%",
+  "> *": {
+    minHeight: "inherit"
+  }
+}, ({
+  size = largeSize,
+  bottomSpacing = spacingNone,
+  label,
+  isActive
+}) => {
+  return isActive ? {
+    minHeight: calculateSpinnerHeight(size, bottomSpacing, label)
+  } : {};
+});
+const LoadingSpinnerSVGStyled = styled.svg.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "LoadingSpinnerSVGStyled",
+  componentId: "sc-1bnjzqj-3"
+})({
+  ...forcedColors({
+    stroke: "CanvasText"
+  }),
+  zIndex: 1001,
+  stroke: getObjectColor("colorObjectBrand")
+}, ({
+  size = largeSize
+}) => {
+  if (size === "xs") {
+    return {
+      width: "20px",
+      height: "20px",
+      ...viewport.md({
+        width: spinnerSvgSizes[size],
+        height: spinnerSvgSizes[size]
+      })
+    };
+  }
+  return {
+    width: spinnerSvgSizes[size],
+    height: spinnerSvgSizes[size]
+  };
+});
+const loadingSpinnerRotate = keyframes({
+  to: {
+    strokeDashoffset: 610
+  }
+});
+const loadingSpinnerXsRotate = keyframes({
+  to: {
+    strokeDashoffset: 166
+  }
+});
+const LoadingSpinnerPathStyled = styled.path.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "LoadingSpinnerPathStyled",
+  componentId: "sc-1bnjzqj-4"
+})({
+  fill: "none",
+  strokeLinejoin: "round",
+  strokeLinecap: "round",
+  strokeDasharray: "120 32",
+  animationDuration: "5.0s",
+  animationTimingFunction: "linear",
+  animationIterationCount: "infinite"
+}, reducedMotion({
+  animation: "none"
+}), css(["animation-name:", ";"], loadingSpinnerRotate));
+const LoadingSpinnerPathOuter3Styled = styled(LoadingSpinnerPathStyled).withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "LoadingSpinnerPathOuter3Styled",
+  componentId: "sc-1bnjzqj-5"
+})({
+  strokeWidth: 2,
+  opacity: "0.3"
+});
+const LoadingSpinnerPathOuter2Styled = styled(LoadingSpinnerPathStyled).withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "LoadingSpinnerPathOuter2Styled",
+  componentId: "sc-1bnjzqj-6"
+})({
+  strokeWidth: 3,
+  opacity: "0.6"
+});
+const LoadingSpinnerPathOuter1Styled = styled(LoadingSpinnerPathStyled).withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "LoadingSpinnerPathOuter1Styled",
+  componentId: "sc-1bnjzqj-7"
+})({
+  strokeWidth: 4
+});
+const LoadingSpinnerPathCenterStyled = styled.path.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "LoadingSpinnerPathCenterStyled",
+  componentId: "sc-1bnjzqj-8"
+})({
+  ...forcedColors({
+    fill: "CanvasText"
+  }),
+  fill: "#E60000"
+});
+const LoadingSpinnerPathXsStyled = styled.path.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "LoadingSpinnerPathXsStyled",
+  componentId: "sc-1bnjzqj-9"
+})({
+  fill: "none",
+  strokeLinecap: "butt",
+  strokeWidth: 2,
+  strokeDasharray: "48 8",
+  strokeDashoffset: 56,
+  animationDuration: "5.0s",
+  animationTimingFunction: "linear",
+  animationIterationCount: "infinite"
+}, css(["animation-name:", ";"], loadingSpinnerXsRotate));
+const mapLabelStyleToSpinnerSize = {
+  xs: getBodySize("md"),
+  sm: getHeadingSize("xs"),
+  md: getHeadingSize("sm"),
+  lg: getHeadingSize("lg")
+};
+const LoadingSpinnerLabelStyled = styled(Body).withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "LoadingSpinnerLabelStyled",
+  componentId: "sc-1bnjzqj-10"
+})(({
+  size = "lg"
+}) => {
+  return mapLabelStyleToSpinnerSize[size];
+}, getBottomSpacing({
+  bottomSpacing: spacingNone
+}), {
+  textAlign: "center"
+});
+export {
+  LoadingSpinnerSVGStyled as L,
+  LoadingSpinnerPathXsStyled as a,
+  LoadingSpinnerPathOuter3Styled as b,
+  LoadingSpinnerPathOuter2Styled as c,
+  LoadingSpinnerPathOuter1Styled as d,
+  LoadingSpinnerPathCenterStyled as e,
+  LoadingSpinnerContainerStyled as f,
+  LoadingSpinnerContentStyled as g,
+  LoadingSpinnerLabelStyled as h,
+  LoadingSpinnerChildrenStyled as i,
+  loadingSpinnerOverlays as j,
+  loadingSpinnerOverlayCssVar as l
+};

package/dist/styled-FNJyDkPV.js

@@ -0,0 +1,165 @@
+import { IconLoader } 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 { getBorderWidth } from "./foundations/token/getBorderWidth/index.js";
+import { getHoverColor } from "./foundations/token/getHoverColor/index.js";
+import { getObjectColor } from "./foundations/token/getObjectColor/index.js";
+import { getPressColor } from "./foundations/token/getPressColor/index.js";
+import { c as colorBorderFocus } from "./BorderColor-BummoQ1-.js";
+import { a as borderWidthFocus, d as borderWidthSelected } from "./BorderWidth-DfOlyKK7.js";
+import { f as colorObjectNeutral, c as colorObjectBrand, a as colorObjectInverse } from "./ObjectColor-BZDBuV8H.js";
+import { g as getForegroundColor } from "./colorUtils-uLZF5UIN.js";
+import { v as viewport } from "./index-Ck2bCrhT.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 { getOpacity } from "./foundations/token/getOpacity/index.js";
+import { getSpacing } from "./foundations/token/getSpacing/index.js";
+import { b as borderRadiusMd } from "./BorderRadius-ClUShVLu.js";
+import { b as fontWeightRegular } from "./FontWeight-CR22KTex.js";
+import { a as opacityDisabled } from "./Opacity-smkGiwsf.js";
+import { s as spacingMd, a as spacingXs, d as spacingXl, b as spacingNone } from "./Spacing-D0HQH9YJ.js";
+import { t as textBodyMd } from "./TextBodySize-BcZR9mh2.js";
+import { f as filterProps } from "./filterProps-Cewck8OH.js";
+const leftPosition = "left";
+const ButtonAppearanceColor = {
+  primary: colorObjectBrand,
+  secondary: colorObjectNeutral,
+  tertiary: colorObjectNeutral
+};
+const getButtonAppearance = (appearance) => {
+  const background = getObjectColor(ButtonAppearanceColor[appearance]);
+  const color = getForegroundColor(ButtonAppearanceColor[appearance]);
+  const hoverBackgroundColor = getHoverColor(ButtonAppearanceColor[appearance]);
+  const pressedBackgroundColor = getPressColor(ButtonAppearanceColor[appearance]);
+  const focusColor = getBorderColor(colorBorderFocus);
+  let style = {
+    ...forcedColors({
+      background: "ButtonFace",
+      color: "ButtonText"
+    }),
+    border: "unset",
+    background,
+    color,
+    transitionProperty: "background, color, box-shadow",
+    transitionDuration: "0.2s",
+    transitionTimingFunction: ease_in_sine,
+    /* No visible box-shadow. as transition endpoint for focus */
+    boxShadow: `inset transparent 0px 0px 0px ${hoverBackgroundColor}`,
+    "&:visited": {
+      ...forcedColors({
+        background: "ButtonFace",
+        color: "ButtonText"
+      }),
+      color,
+      background
+    },
+    "&:hover": {
+      ...forcedColors({
+        background: "ButtonFace",
+        color: "ButtonText"
+      }),
+      color,
+      background: hoverBackgroundColor,
+      /* No visible box-shadow. as transition point for focus and from tertiary */
+      boxShadow: `inset transparent 0px 0px 0px`
+    },
+    "&:active": {
+      ...forcedColors({
+        background: "ButtonFace",
+        color: "ButtonText"
+      }),
+      color,
+      backgroundColor: pressedBackgroundColor
+    },
+    "&:focus-visible": {
+      ...forcedColors({
+        outline: `${getBorderWidth(borderWidthFocus)} solid CanvasText`,
+        background: "ButtonFace",
+        color: "ButtonText"
+      }),
+      boxShadow: `${focusColor} 0px 0px 0px ${getBorderWidth(borderWidthFocus)}`,
+      color,
+      background: hoverBackgroundColor,
+      outline: "none"
+    }
+  };
+  if ("tertiary" === appearance) {
+    const color2 = getForegroundColor(colorObjectInverse);
+    style = {
+      ...style,
+      color: color2,
+      background: "transparent",
+      boxShadow: `inset ${background} 0px 0px 0px ${getBorderWidth(borderWidthSelected)}`,
+      "&:visited": {
+        color: color2,
+        background: "transparent"
+      }
+    };
+  }
+  return style;
+};
+const primaryAppearance = "primary";
+const tertiaryAppearance = "tertiary";
+const buttonHeight = "44px";
+const ButtonIconStyled = styled(IconLoader).withConfig({
+  displayName: "ButtonIconStyled",
+  componentId: "sc-6d4at9-0"
+})(({
+  iconPosition
+}) => ({
+  order: iconPosition === leftPosition ? -1 : 0
+}));
+const ButtonStyled = styled.button.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "ButtonStyled",
+  componentId: "sc-6d4at9-1"
+})({
+  appearance: "none",
+  display: "flex",
+  flexWrap: "nowrap",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  gap: `${getSpacing(spacingNone)} ${getSpacing(spacingXs)}`,
+  padding: `${getSpacing(spacingXs)} ${getSpacing(spacingXl)}`,
+  borderRadius: getBorderRadius(borderRadiusMd),
+  fontWeight: getFontWeight(fontWeightRegular),
+  height: buttonHeight
+}, getBodySize(textBodyMd), ({
+  width = "auto"
+}) => ({
+  width: "100%",
+  ...viewport.md({
+    width: "full" === width ? "100%" : "fit-content"
+  })
+}), ({
+  appearance = primaryAppearance
+}) => getButtonAppearance(appearance), ({
+  disabled
+}) => {
+  if (disabled) {
+    return {
+      pointerEvents: "none",
+      opacity: getOpacity(opacityDisabled)
+    };
+  }
+  return {};
+}, ({
+  bottomSpacing = spacingMd
+}) => getBottomSpacing({
+  bottomSpacing
+}));
+export {
+  ButtonStyled as B,
+  ButtonAppearanceColor as a,
+  buttonHeight as b,
+  ButtonIconStyled as c,
+  getButtonAppearance as g,
+  leftPosition as l,
+  primaryAppearance as p,
+  tertiaryAppearance as t
+};