@redsift/design-system 11.6.0-muiv5-alpha.5 → 11.6.0-muiv5-alpha.7

package/_internal/skeleton.js

@@ -1,8 +1,2 @@
-export { S as SkeletonProps, a as StyledSkeletonProps } from './types24.js';
 export { B as BaseSkeleton, S as Skeleton } from './Skeleton2.js';
-import 'react';
-import './styles2.js';
-import './helpers.js';
-import './colors.js';
-import './types26.js';
-import './types25.js';
+//# sourceMappingURL=skeleton.js.map

package/_internal/spinner.js

@@ -1,5 +1,2 @@
-export { S as Spinner, b as SpinnerProps, a as SpinnerSize, c as StyledSpinnerProps } from './Spinner2.js';
-import 'react';
-import './helpers.js';
-import './styles2.js';
-import './colors.js';
+export { S as Spinner, a as SpinnerSize } from './Spinner2.js';
+//# sourceMappingURL=spinner.js.map

package/_internal/styles.js

@@ -1,17 +1,235 @@
-import * as styled_components from 'styled-components';
-import { L as LayoutProps, S as SpacingProps, I as InternalSpacingProps, f as SizingProps, P as PositioningProps, B as BorderProps, g as FlexLayoutProps, G as GridLayoutProps, h as StylingProps, C as ContainerProps } from './styles2.js';
-
-declare const baseLayout: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<LayoutProps, any>>;
-declare const baseSpacing: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<SpacingProps, any>>;
-declare const baseInternalSpacing: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<InternalSpacingProps, any>>;
-declare const baseSizing: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<SizingProps, any>>;
-declare const basePositioning: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<PositioningProps, any>>;
-declare const baseBorder: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<BorderProps, any>>;
-declare const baseFlexbox: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<FlexLayoutProps, any>>;
-declare const baseGrid: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<GridLayoutProps, any>>;
-declare const baseStyling: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<StylingProps, any>>;
-declare const baseContainer: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<ContainerProps, any>>;
-declare const focusRing: styled_components.FlattenSimpleInterpolation;
-declare const srOnly: styled_components.FlattenSimpleInterpolation;
-
-export { baseSpacing as a, baseLayout as b, baseInternalSpacing as c, baseSizing as d, basePositioning as e, baseBorder as f, baseFlexbox as g, baseGrid as h, baseStyling as i, baseContainer as j, focusRing as k, srOnly as s };
+import styled, { css } from 'styled-components';
+import { i as baseStyling, k as focusRing } from './styles4.js';
+
+/**
+ * Component variant.
+ */
+const ButtonVariant = {
+  primary: 'primary',
+  secondary: 'secondary',
+  unstyled: 'unstyled'
+};
+
+/**
+ * Component color.
+ */
+
+/**
+ * Component props.
+ */
+
+/**
+ * Component style.
+ */
+const StyledButton = styled.button`
+  align-items: center;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  display: inline-flex;
+  font-family: var(--redsift-typography-button-font-family);
+  font-size: var(--redsift-typography-button-font-size);
+  font-weight: var(--redsift-typography-button-font-weight);
+  gap: 8px;
+  height: fit-content;
+  justify-content: center;
+  line-height: var(--redsift-typography-button-line-height);
+  text-decoration: none;
+  text-transform: var(--redsift-typography-button-text-transform);
+  vertical-align: middle;
+  -webkit-font-smoothing: antialiased;
+  ${baseStyling}
+
+  ${_ref => {
+  let {
+    $isLoading
+  } = _ref;
+  return $isLoading ? css`
+          & > span {
+            opacity: 0;
+          }
+
+          & > .redsift-shield {
+            position: absolute;
+          }
+        ` : '';
+}}
+
+  ${_ref2 => {
+  let {
+    $variant,
+    $color,
+    $isActive,
+    $isDisabled,
+    $isGradient,
+    $isHovered,
+    $theme
+  } = _ref2;
+  return css`
+    padding: ${$variant !== ButtonVariant.secondary || $variant === ButtonVariant.secondary && $isGradient && !$isDisabled ? '9px 16px' : '8px 15px'};
+
+    ${!$isGradient ? css`
+          background-color: var(
+            --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}
+          );
+          &,
+          .redsift-icon:not(.colored) {
+            color: var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}
+            );
+          }
+        ` : css`
+          background: var(
+            --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}
+          );
+
+          ${$variant === ButtonVariant.primary || $isDisabled ? css`
+                &,
+                .redsift-icon:not(.colored) {
+                  color: var(
+                    --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}
+                  );
+                }
+              ` : ''}
+
+          ${$variant !== ButtonVariant.primary && !$isDisabled ? css`
+                path {
+                  fill: url(#${$color}-gradient-${$isActive ? 'active' : $isHovered ? 'hover' : 'default'});
+                }
+              ` : ''}
+
+          span {
+            background: var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}
+            );
+            background-clip: text;
+            color: transparent;
+          }
+        `}
+
+    ${$variant === ButtonVariant.secondary ? css`
+          border: 1px solid
+            var(
+              --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}
+            );
+        ` : ''}
+  `;
+}};
+
+  &:hover,
+  &:focus-visible {
+    outline: none;
+
+    ${_ref3 => {
+  let {
+    $variant,
+    $color,
+    $isDisabled,
+    $isGradient,
+    $theme
+  } = _ref3;
+  return css`
+      cursor: ${$isDisabled ? 'default' : 'pointer'};
+
+      ${!$isGradient ? css`
+            background-color: var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled ? 'disabled' : 'hover'}
+            );
+            &,
+            .redsift-icon:not(.colored) {
+              color: var(
+                --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled ? 'disabled' : 'hover'}
+              );
+            }
+
+            ${$variant === ButtonVariant.secondary ? css`
+                  border: 1px solid
+                    var(
+                      --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-${$isDisabled ? 'disabled' : 'hover'}
+                    );
+                ` : ''}
+          ` : css`
+            background: var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled ? 'disabled' : 'hover'}
+            );
+
+            ${$variant !== ButtonVariant.primary && !$isDisabled ? css`
+                  path {
+                    fill: url(#${$color}-gradient-hover);
+                  }
+                ` : ''}
+          `}
+    `;
+}};
+  }
+
+  &:active {
+    outline: none;
+
+    ${_ref4 => {
+  let {
+    $variant,
+    $color,
+    $isGradient,
+    $isHovered,
+    $isDisabled,
+    $theme
+  } = _ref4;
+  return css`
+      ${!$isGradient ? css`
+            background-color: var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled ? 'disabled' : $isHovered ? 'hover' : 'active'}
+            );
+            &,
+            .redsift-icon:not(.colored) {
+              color: var(
+                --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled ? 'disabled' : $isHovered ? 'hover' : 'active'}
+              );
+            }
+
+            ${$variant === ButtonVariant.secondary ? css`
+                  border: 1px solid
+                    var(
+                      --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-${$isDisabled ? 'disabled' : $isHovered ? 'hover' : 'active'}
+                    );
+                ` : ''}
+          ` : css`
+            background: var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled ? 'disabled' : $isHovered ? 'hover' : 'active'}
+            );
+
+            ${$variant !== ButtonVariant.primary && !$isDisabled ? css`
+                  path {
+                    fill: url(#${$color}-gradient-active);
+                  }
+                ` : ''}
+          `}
+    `;
+}};
+  }
+
+  ${_ref5 => {
+  let {
+    $fullWidth
+  } = _ref5;
+  return $fullWidth ? `
+        width: 100%;
+        flex-grow: 1;
+      ` : '';
+}}
+
+  .redsift-icon.left {
+    margin-right: unset;
+    align-items: center;
+  }
+
+  .redsift-icon.right {
+    margin-left: unset;
+    align-items: center;
+  }
+
+  ${focusRing}
+`;
+
+export { ButtonVariant as B, StyledButton as S };
+//# sourceMappingURL=styles.js.map

package/_internal/styles2.js

@@ -1,283 +1,47 @@
-import { V as ValueOf } from './helpers.js';
+import styled, { css } from 'styled-components';
+import { S as StyledButton } from './styles.js';
 
-declare const AlignSelf: {
-    readonly auto: "auto";
-    readonly normal: "normal";
-    readonly start: "start";
-    readonly end: "end";
-    readonly center: "center";
-    readonly 'flex-start': "flex-start";
-    readonly 'flex-end': "flex-end";
-    readonly 'self-start': "self-start";
-    readonly 'self-end': "self-end";
-    readonly baseline: "baseline";
-    readonly stretch: "stretch";
-};
-type AlignSelf = ValueOf<typeof AlignSelf>;
-declare const JustifySelf: {
-    readonly auto: "auto";
-    readonly normal: "normal";
-    readonly start: "start";
-    readonly end: "end";
-    readonly center: "center";
-    readonly 'flex-start': "flex-start";
-    readonly 'flex-end': "flex-end";
-    readonly 'self-start': "self-start";
-    readonly 'self-end': "self-end";
-    readonly left: "left";
-    readonly right: "right";
-    readonly stretch: "stretch";
-};
-type JustifySelf = ValueOf<typeof JustifySelf>;
-declare const AlignContent: {
-    readonly 'flex-start': "flex-start";
-    readonly 'flex-end': "flex-end";
-    readonly center: "center";
-    readonly 'space-between': "space-between";
-    readonly 'space-around': "space-around";
-    readonly 'space-evenly': "space-evenly";
-    readonly stretch: "stretch";
-    readonly start: "start";
-    readonly end: "end";
-    readonly baseline: "baseline";
-    readonly 'first baseline': "first baseline";
-    readonly 'last baseline': "last baseline";
-};
-type AlignContent = ValueOf<typeof AlignContent>;
-declare const AlignItems: {
-    readonly stretch: "stretch";
-    readonly 'flex-start': "flex-start";
-    readonly 'flex-end': "flex-end";
-    readonly center: "center";
-    readonly baseline: "baseline";
-    readonly 'first baseline': "first baseline";
-    readonly 'last baseline': "last baseline";
-    readonly start: "start";
-    readonly end: "end";
-    readonly 'self-start': "self-start";
-    readonly 'self-end': "self-end";
-};
-type AlignItems = ValueOf<typeof AlignItems>;
-declare const FlexDirection: {
-    readonly row: "row";
-    readonly 'row-reverse': "row-reverse";
-    readonly column: "column";
-    readonly 'column-reverse': "column-reverse";
-};
-type FlexDirection = ValueOf<typeof FlexDirection>;
-declare const FlexWrap: {
-    readonly nowrap: "nowrap";
-    readonly wrap: "wrap";
-    readonly 'wrap-reverse': "wrap-reverse";
-};
-type FlexWrap = ValueOf<typeof FlexWrap>;
-declare const JustifyContent: {
-    readonly 'flex-start': "flex-start";
-    readonly 'flex-end': "flex-end";
-    readonly center: "center";
-    readonly 'space-between': "space-between";
-    readonly 'space-around': "space-around";
-    readonly 'space-evenly': "space-evenly";
-    readonly start: "start";
-    readonly end: "end";
-    readonly left: "left";
-    readonly right: "right";
-    readonly baseline: "baseline";
-    readonly 'first baseline': "first baseline";
-    readonly 'last baseline': "last baseline";
-    readonly stretch: "stretch";
-};
-type JustifyContent = ValueOf<typeof JustifyContent>;
-declare const JustifyItems: {
-    readonly start: "start";
-    readonly end: "end";
-    readonly center: "center";
-    readonly stretch: "stretch";
-};
-type JustifyItems = ValueOf<typeof JustifyItems>;
-interface LayoutProps {
-    /** When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex">MDN</a>. */
-    flex?: string;
-    /** When used in a flex layout, specifies how the element will grow to fit the space available. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow">MDN</a>. */
-    flexGrow?: number;
-    /** When used in a flex layout, specifies how the element will shrink to fit the space available. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink">MDN</a>. */
-    flexShrink?: number;
-    /** When used in a flex layout, specifies the initial main size of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex_basis">MDN</a>. */
-    flexBasis?: string;
-    /** Overrides the alignItems property of a flex or grid container. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-self">MDN</a>. */
-    alignSelf?: AlignSelf;
-    /** Specifies how the element is justified inside a flex or grid container. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self">MDN</a>. */
-    justifySelf?: string;
-    /** The layout order for the element within a flex or grid container. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/order">MDN</a>. */
-    order?: number;
-    /** When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area">MDN</a>. */
-    gridArea?: string;
-    /** When used in a grid layout, specifies the column the element should be placed in within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column">MDN</a>. */
-    gridColumn?: string;
-    /** When used in a grid layout, specifies the row the element should be placed in within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row">MDN</a>. */
-    gridRow?: string;
-    /** When used in a grid layout, specifies the starting column to span within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start">MDN</a>. */
-    gridColumnStart?: string;
-    /** When used in a grid layout, specifies the ending column to span within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end">MDN</a>. */
-    gridColumnEnd?: string;
-    /** When used in a grid layout, specifies the starting row to span within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start">MDN</a>. */
-    gridRowStart?: string;
-    /** When used in a grid layout, specifies the ending row to span within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end">MDN</a>. */
-    gridRowEnd?: string;
-}
-interface SpacingProps {
-    /** The margin for all four sides of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin">MDN</a>. */
-    margin?: string;
-    /** The margin for the bottom side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom">MDN</a>. */
-    marginBottom?: string;
-    /** The margin for the left side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left">MDN</a>. */
-    marginLeft?: string;
-    /** The margin for the right side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right">MDN</a>. */
-    marginRight?: string;
-    /** The margin for the top side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top">MDN</a>. */
-    marginTop?: string;
-}
-interface SizingProps {
-    /** The height of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/height">MDN</a>. */
-    height?: string | number;
-    /** The maximum height of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-height">MDN</a>. */
-    maxHeight?: string;
-    /** The maximum width of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-width">MDN</a>. */
-    maxWidth?: string;
-    /** The minimum height of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-height">MDN</a>. */
-    minHeight?: string;
-    /** The minimum width of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-width">MDN</a>. */
-    minWidth?: string;
-    /** The width of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width">MDN</a>. */
-    width?: string | number;
-}
-interface PositioningProps {
-    /** Specifies how the element is positioned. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position">MDN</a>. */
-    position?: string;
-    /** The top position for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/top">MDN</a>. */
-    top?: string;
-    /** The bottom position for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/bottom">MDN</a>. */
-    bottom?: string;
-    /** The left position for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/left">MDN</a>. Consider using start instead for RTL support. */
-    left?: string;
-    /** The right position for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/right">MDN</a>. Consider using start instead for RTL support. */
-    right?: string;
-    /** The stacking order for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/z-index">MDN</a>. */
-    zIndex?: string;
-}
-interface BorderProps {
-    /** The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">MDN</a>. */
-    background?: string;
-    /** The background-color CSS property sets the background color of an element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color">MDN</a>. */
-    backgroundColor?: string;
-    /** The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border">MDN</a>. */
-    border?: string;
-    /** The border-top CSS property sets all the properties of an element's top border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top">MDN</a>. */
-    borderTop?: string;
-    /** The border-top CSS property sets all the properties of an element's bottom border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom">MDN</a>. */
-    borderBottom?: string;
-    /** The border-top CSS property sets all the properties of an element's left border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left">MDN</a>. Consider using start instead for RTL support. */
-    borderLeft?: string;
-    /** The border-top CSS property sets all the properties of an element's right border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right">MDN</a>. Consider using start instead for RTL support. */
-    borderRight?: string;
-    /** The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius">MDN</a>. */
-    borderRadius?: string;
-    /** The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow">MDN</a>. */
-    boxShadow?: string;
-}
-interface FlexLayoutProps {
-    /** The distribution of space around child items along the cross axis. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-content">MDN</a>. */
-    alignContent?: AlignContent;
-    /** The alignment of children within their container. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-items">MDN</a>. */
-    alignItems?: AlignItems;
-    /** The direction in which to layout children. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction">MDN</a>. */
-    flexDirection?: FlexDirection;
-    /** Whether to wrap items onto multiple lines. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap">MDN</a>. */
-    flexWrap?: FlexWrap;
-    /** The space to display between both rows and columns. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gap">MDN</a>. */
-    gap?: string;
-    /** Whether the box is displayed inline or not. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">MDN</a>. */
-    inline?: boolean;
-    /** The distribution of space around items along the main axis. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content">MDN</a>. */
-    justifyContent?: JustifyContent;
-}
-interface GridLayoutProps {
-    /** The distribution of space around child items along the cross axis. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-content">MDN</a>. */
-    alignContent?: AlignContent;
-    /** The alignment of children within their container. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-items">MDN</a>. */
-    alignItems?: AlignItems;
-    /** The space to display between both rows and columns. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gap">MDN</a>. */
-    gap?: string;
-    /** Defines the size of implicitly generated columns. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns">MDN</a>. */
-    gridAutoColumns?: string;
-    /** Defines the size of implicitly generated rows. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows">MDN</a>. */
-    gridAutoRows?: string;
-    /** Defines named grid areas. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas">MDN</a>. */
-    gridTemplateAreas?: string;
-    /** Defines the sizes of each column in the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns">MDN</a>. */
-    gridTemplateColumns?: string;
-    /** Defines the sizes of each row in the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows">MDN</a>. */
-    gridTemplateRows?: string;
-    /** Whether the box is displayed inline or not. */
-    inline?: boolean;
-    /** The distribution of space around items along the main axis. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content">MDN</a>. */
-    justifyContent?: JustifyContent;
-    /** Defines the default justifySelf for all items in the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items">MDN</a>. */
-    justifyItems?: JustifyItems;
-}
-interface StylingProps extends LayoutProps, SpacingProps, SizingProps, PositioningProps {
-}
-interface InternalSpacingProps {
-    /** The padding for all four sides of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding">MDN</a>. */
-    padding?: string;
-    /** The padding for the bottom side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom">MDN</a>. */
-    paddingBottom?: string;
-    /** The padding for the left side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left">MDN</a>. */
-    paddingLeft?: string;
-    /** The padding for the right side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right">MDN</a>. */
-    paddingRight?: string;
-    /** The padding for the top side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top">MDN</a>. */
-    paddingTop?: string;
-}
-interface ContainerProps extends Omit<FlexLayoutProps, 'inline'>, Omit<GridLayoutProps, 'inline'>, SpacingProps, SizingProps, PositioningProps, BorderProps, InternalSpacingProps {
-    /** Sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">MDN</a>. */
-    display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'inherit';
-}
-declare const getContainerProps: (props: ContainerProps) => {
-    zIndex?: string | undefined;
-    width?: string | number | undefined;
-    top?: string | undefined;
-    right?: string | undefined;
-    position?: string | undefined;
-    paddingTop?: string | undefined;
-    paddingRight?: string | undefined;
-    paddingLeft?: string | undefined;
-    paddingBottom?: string | undefined;
-    padding?: string | undefined;
-    minWidth?: string | undefined;
-    minHeight?: string | undefined;
-    maxWidth?: string | undefined;
-    maxHeight?: string | undefined;
-    marginTop?: string | undefined;
-    marginRight?: string | undefined;
-    marginLeft?: string | undefined;
-    marginBottom?: string | undefined;
-    margin?: string | undefined;
-    left?: string | undefined;
-    justifyItems?: JustifyItems | undefined;
-    justifyContent?: JustifyContent | undefined;
-    height?: string | number | undefined;
-    gridTemplateRows?: string | undefined;
-    gridTemplateColumns?: string | undefined;
-    gridTemplateAreas?: string | undefined;
-    gridAutoRows?: string | undefined;
-    gridAutoColumns?: string | undefined;
-    gap?: string | undefined;
-    flexWrap?: FlexWrap | undefined;
-    flexDirection?: FlexDirection | undefined;
-    bottom?: string | undefined;
-    alignItems?: AlignItems | undefined;
-    alignContent?: AlignContent | undefined;
+/**
+ * Component variant.
+ */
+const IconButtonVariant = {
+  primary: 'primary',
+  secondary: 'secondary',
+  unstyled: 'unstyled'
 };
 
-export { AlignSelf as A, BorderProps as B, ContainerProps as C, FlexDirection as F, GridLayoutProps as G, InternalSpacingProps as I, JustifySelf as J, LayoutProps as L, PositioningProps as P, SpacingProps as S, AlignContent as a, AlignItems as b, FlexWrap as c, JustifyContent as d, JustifyItems as e, SizingProps as f, FlexLayoutProps as g, StylingProps as h, getContainerProps as i };
+/**
+ * Component color.
+ */
+
+/**
+ * Component props.
+ */
+
+/**
+ * Component style.
+ */
+const StyledIconButton = styled(StyledButton)`
+  ${_ref => {
+  let {
+    $variant
+  } = _ref;
+  return css`
+    padding: ${$variant === IconButtonVariant.secondary ? '8px' : '9px'};
+  `;
+}};
+
+  ${_ref2 => {
+  let {
+    $isLoading
+  } = _ref2;
+  return $isLoading ? css`
+          & > .redsift-shield {
+            position: relative;
+          }
+        ` : '';
+}}
+`;
+
+export { IconButtonVariant as I, StyledIconButton as S };
+//# sourceMappingURL=styles2.js.map

package/_internal/switch-group.js

@@ -1,6 +1,2 @@
-export { c as StyledSwitchGroupProps, a as SwitchGroupOrientation, b as SwitchGroupProps, S as SwitchGroupState } from './types27.js';
-export { S as SwitchGroup } from './SwitchGroup.js';
-import 'react';
-import './helpers.js';
-import './styles2.js';
-import './colors.js';
+export { a as SwitchGroup, S as SwitchGroupOrientation } from './SwitchGroup.js';
+//# sourceMappingURL=switch-group.js.map

package/_internal/switch.js

@@ -1,6 +1,2 @@
-export { a as StyledSwitchProps, b as Switch, S as SwitchProps } from './Switch2.js';
-import 'react';
-import './types27.js';
-import './helpers.js';
-import './styles2.js';
-import './colors.js';
+export { S as Switch } from './Switch2.js';
+//# sourceMappingURL=switch.js.map

package/_internal/text-area.js

@@ -1,9 +1,2 @@
-export { S as StyledTextAreaProps, b as TextArea, a as TextAreaProps, T as TextAreaVariant } from './TextArea.js';
-import 'react';
-import './types29.js';
-import './types17.js';
-import './styles2.js';
-import './helpers.js';
-import './colors.js';
-import './types16.js';
-import './types20.js';
+export { a as TextArea, T as TextAreaVariant } from './TextArea.js';
+//# sourceMappingURL=text-area.js.map

package/_internal/text-field.js

@@ -1,10 +1,2 @@
-export { S as StyledTextFieldProps, a as TextFieldColor, b as TextFieldProps, T as TextFieldVariant } from './types29.js';
-export { S as StyledTextField, T as TextField } from './TextField.js';
-import 'react';
-import './types17.js';
-import './styles2.js';
-import './helpers.js';
-import './colors.js';
-import './types16.js';
-import './types20.js';
-import 'styled-components';
+export { S as StyledTextField, a as TextField, T as TextFieldVariant } from './TextField.js';
+//# sourceMappingURL=text-field.js.map

package/_internal/text.js

@@ -1,7 +1,3 @@
-export { S as StyledTextProps, a as TextComponent, b as TextProps, T as TextVariant } from './types28.js';
+export { a as TextComponent, T as TextVariant } from './styles5.js';
 export { T as Text } from './Text2.js';
-import 'react';
-import './helpers.js';
-import './styles2.js';
-import './colors.js';
-import './fonts.js';
+//# sourceMappingURL=text.js.map