@redsift/design-system 11.9.4 → 12.0.0-muiv6

package/_internal/styles.js

@@ -1,235 +1,327 @@
-import styled, { css } from 'styled-components';
-import { i as baseStyling, k as focusRing } from './styles4.js';
+import { a as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
+
+const AlignSelf = {
+  auto: 'auto',
+  normal: 'normal',
+  start: 'start',
+  end: 'end',
+  center: 'center',
+  'flex-start': 'flex-start',
+  'flex-end': 'flex-end',
+  'self-start': 'self-start',
+  'self-end': 'self-end',
+  baseline: 'baseline',
+  stretch: 'stretch'
+};
+const JustifySelf = {
+  auto: 'auto',
+  normal: 'normal',
+  start: 'start',
+  end: 'end',
+  center: 'center',
+  'flex-start': 'flex-start',
+  'flex-end': 'flex-end',
+  'self-start': 'self-start',
+  'self-end': 'self-end',
+  left: 'left',
+  right: 'right',
+  stretch: 'stretch'
+};
+const AlignContent = {
+  'flex-start': 'flex-start',
+  'flex-end': 'flex-end',
+  center: 'center',
+  'space-between': 'space-between',
+  'space-around': 'space-around',
+  'space-evenly': 'space-evenly',
+  stretch: 'stretch',
+  start: 'start',
+  end: 'end',
+  baseline: 'baseline',
+  'first baseline': 'first baseline',
+  'last baseline': 'last baseline'
+};
+const AlignItems = {
+  stretch: 'stretch',
+  'flex-start': 'flex-start',
+  'flex-end': 'flex-end',
+  center: 'center',
+  baseline: 'baseline',
+  'first baseline': 'first baseline',
+  'last baseline': 'last baseline',
+  start: 'start',
+  end: 'end',
+  'self-start': 'self-start',
+  'self-end': 'self-end'
+};
+const FlexDirection = {
+  row: 'row',
+  'row-reverse': 'row-reverse',
+  column: 'column',
+  'column-reverse': 'column-reverse'
+};
+const FlexWrap = {
+  nowrap: 'nowrap',
+  wrap: 'wrap',
+  'wrap-reverse': 'wrap-reverse'
+};
+const JustifyContent = {
+  'flex-start': 'flex-start',
+  'flex-end': 'flex-end',
+  center: 'center',
+  'space-between': 'space-between',
+  'space-around': 'space-around',
+  'space-evenly': 'space-evenly',
+  start: 'start',
+  end: 'end',
+  left: 'left',
+  right: 'right',
+  baseline: 'baseline',
+  'first baseline': 'first baseline',
+  'last baseline': 'last baseline',
+  stretch: 'stretch'
+};
+const JustifyItems = {
+  start: 'start',
+  end: 'end',
+  center: 'center',
+  stretch: 'stretch'
+};
+const getContainerProps = props => _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, props.alignContent && {
+  alignContent: props.alignContent
+}), props.alignItems && {
+  alignItems: props.alignItems
+}), props.bottom && {
+  bottom: props.bottom
+}), props.flexDirection && {
+  flexDirection: props.flexDirection
+}), props.flexWrap && {
+  flexWrap: props.flexWrap
+}), props.gap && {
+  gap: props.gap
+}), props.gridAutoColumns && {
+  gridAutoColumns: props.gridAutoColumns
+}), props.gridAutoRows && {
+  gridAutoRows: props.gridAutoRows
+}), props.gridTemplateAreas && {
+  gridTemplateAreas: props.gridTemplateAreas
+}), props.gridTemplateColumns && {
+  gridTemplateColumns: props.gridTemplateColumns
+}), props.gridTemplateRows && {
+  gridTemplateRows: props.gridTemplateRows
+}), props.height && {
+  height: props.height
+}), props.justifyContent && {
+  justifyContent: props.justifyContent
+}), props.justifyItems && {
+  justifyItems: props.justifyItems
+}), props.left && {
+  left: props.left
+}), props.margin && {
+  margin: props.margin
+}), props.marginBottom && {
+  marginBottom: props.marginBottom
+}), props.marginLeft && {
+  marginLeft: props.marginLeft
+}), props.marginRight && {
+  marginRight: props.marginRight
+}), props.marginTop && {
+  marginTop: props.marginTop
+}), props.maxHeight && {
+  maxHeight: props.maxHeight
+}), props.maxWidth && {
+  maxWidth: props.maxWidth
+}), props.minHeight && {
+  minHeight: props.minHeight
+}), props.minWidth && {
+  minWidth: props.minWidth
+}), props.padding && {
+  padding: props.padding
+}), props.paddingBottom && {
+  paddingBottom: props.paddingBottom
+}), props.paddingLeft && {
+  paddingLeft: props.paddingLeft
+}), props.paddingRight && {
+  paddingRight: props.paddingRight
+}), props.paddingTop && {
+  paddingTop: props.paddingTop
+}), props.position && {
+  position: props.position
+}), props.right && {
+  right: props.right
+}), props.top && {
+  top: props.top
+}), props.width && {
+  width: props.width
+}), props.zIndex && {
+  zIndex: props.zIndex
+});
 
 /**
- * Component variant.
+ * Converts styling props to transient props by adding a $ prefix.
+ * Filters out undefined values to avoid passing unnecessary props.
  */
-const ButtonVariant = {
-  primary: 'primary',
-  secondary: 'secondary',
-  unstyled: 'unstyled'
+const toTransientProps = (props, keys) => {
+  return keys.reduce((acc, key) => {
+    const value = props[key];
+    if (value !== undefined) {
+      const transientKey = `$${String(key)}`;
+      acc[transientKey] = value;
+    }
+    return acc;
+  }, {});
 };
+const LAYOUT_PROPS_KEYS = ['flex', 'flexGrow', 'flexShrink', 'flexBasis', 'alignSelf', 'justifySelf', 'order', 'gridArea', 'gridColumn', 'gridRow', 'gridColumnStart', 'gridColumnEnd', 'gridRowStart', 'gridRowEnd'];
+const SPACING_PROPS_KEYS = ['margin', 'marginBottom', 'marginLeft', 'marginRight', 'marginTop'];
+const SIZING_PROPS_KEYS = ['height', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'width'];
+const POSITIONING_PROPS_KEYS = ['position', 'top', 'bottom', 'left', 'right', 'zIndex'];
+const INTERNAL_SPACING_PROPS_KEYS = ['padding', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop'];
+const BORDER_PROPS_KEYS = ['background', 'backgroundColor', 'border', 'borderTop', 'borderBottom', 'borderLeft', 'borderRight', 'borderRadius', 'boxShadow'];
+const FLEX_LAYOUT_PROPS_KEYS = ['alignContent', 'alignItems', 'flexDirection', 'flexWrap', 'gap', 'inline', 'justifyContent'];
+const GRID_LAYOUT_PROPS_KEYS = ['alignContent', 'alignItems', 'gap', 'gridAutoColumns', 'gridAutoRows', 'gridTemplateAreas', 'gridTemplateColumns', 'gridTemplateRows', 'inline', 'justifyContent', 'justifyItems'];
+const STYLING_PROPS_KEYS = [...LAYOUT_PROPS_KEYS, ...SPACING_PROPS_KEYS, ...SIZING_PROPS_KEYS, ...POSITIONING_PROPS_KEYS];
+const CONTAINER_PROPS_KEYS = [...LAYOUT_PROPS_KEYS, ...SPACING_PROPS_KEYS, ...SIZING_PROPS_KEYS, ...POSITIONING_PROPS_KEYS, ...INTERNAL_SPACING_PROPS_KEYS, ...BORDER_PROPS_KEYS, ...FLEX_LAYOUT_PROPS_KEYS, ...GRID_LAYOUT_PROPS_KEYS, 'display'];
 
 /**
- * Component color.
+ * Converts styling props to transient props (with $ prefix) for styled-components.
+ * Also returns the original props with styling props removed.
+ * @param props - Object containing styling props
+ * @returns Object with transientProps (with $ prefix) and otherProps (without styling props)
  */
+const getStylingTransientProps = props => {
+  const transientProps = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, toTransientProps(props, LAYOUT_PROPS_KEYS)), toTransientProps(props, SPACING_PROPS_KEYS)), toTransientProps(props, SIZING_PROPS_KEYS)), toTransientProps(props, POSITIONING_PROPS_KEYS));
+  const otherProps = _objectSpread2({}, props);
+  STYLING_PROPS_KEYS.forEach(key => {
+    delete otherProps[key];
+  });
+  return {
+    transientProps,
+    otherProps: otherProps
+  };
+};
 
 /**
- * Component props.
+ * Converts flex layout props to transient props (with $ prefix) for styled-components.
+ * Used for components that need flexbox-specific props alongside styling props.
+ * @param props - Object containing flex layout props
+ * @returns Object with transientProps (with $ prefix) and otherProps (without flex layout props)
  */
+const getFlexLayoutTransientProps = props => {
+  const transientProps = toTransientProps(props, FLEX_LAYOUT_PROPS_KEYS);
+  const otherProps = _objectSpread2({}, props);
+  FLEX_LAYOUT_PROPS_KEYS.forEach(key => {
+    delete otherProps[key];
+  });
+  return {
+    transientProps,
+    otherProps: otherProps
+  };
+};
 
 /**
- * Component style.
+ * Removes styling props from an object to prevent passing them to the DOM.
+ * @param props - Object that may contain styling props
+ * @returns New object with styling props removed
  */
-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;
-      ` : '';
-}}
+const omitStylingProps = props => {
+  const result = _objectSpread2({}, props);
+  STYLING_PROPS_KEYS.forEach(key => {
+    delete result[key];
+  });
+  return result;
+};
 
-  .redsift-icon.left {
-    margin-right: unset;
-    align-items: center;
-  }
+/**
+ * Converts container props (styling + internal spacing + border + flex layout) to transient props for styled-components.
+ * Used for Flexbox, Grid, and other container components.
+ * @param props - Object containing container props
+ * @returns Object with transientProps (with $ prefix) and otherProps (without container props)
+ */
+const getContainerStylingTransientProps = props => {
+  const transientProps = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, toTransientProps(props, LAYOUT_PROPS_KEYS)), toTransientProps(props, SPACING_PROPS_KEYS)), toTransientProps(props, SIZING_PROPS_KEYS)), toTransientProps(props, POSITIONING_PROPS_KEYS)), toTransientProps(props, INTERNAL_SPACING_PROPS_KEYS)), toTransientProps(props, BORDER_PROPS_KEYS)), toTransientProps(props, FLEX_LAYOUT_PROPS_KEYS)), toTransientProps(props, GRID_LAYOUT_PROPS_KEYS)), props.display !== undefined && {
+    $display: props.display
+  });
+  const otherProps = _objectSpread2({}, props);
+  CONTAINER_PROPS_KEYS.forEach(key => {
+    delete otherProps[key];
+  });
+  return {
+    transientProps,
+    otherProps: otherProps
+  };
+};
 
-  .redsift-icon.right {
-    margin-left: unset;
-    align-items: center;
-  }
+/** TRANSIENT PROPS */
 
-  ${focusRing}
-`;
+const getContainerTransientProps = props => _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, props.$alignContent && {
+  alignContent: props.$alignContent
+}), props.$alignItems && {
+  alignItems: props.$alignItems
+}), props.$bottom && {
+  bottom: props.$bottom
+}), props.$flexDirection && {
+  flexDirection: props.$flexDirection
+}), props.$flexWrap && {
+  flexWrap: props.$flexWrap
+}), props.$gap && {
+  gap: props.$gap
+}), props.$gridAutoColumns && {
+  gridAutoColumns: props.$gridAutoColumns
+}), props.$gridAutoRows && {
+  gridAutoRows: props.$gridAutoRows
+}), props.$gridTemplateAreas && {
+  gridTemplateAreas: props.$gridTemplateAreas
+}), props.$gridTemplateColumns && {
+  gridTemplateColumns: props.$gridTemplateColumns
+}), props.$gridTemplateRows && {
+  gridTemplateRows: props.$gridTemplateRows
+}), props.$height && {
+  height: props.$height
+}), props.$justifyContent && {
+  justifyContent: props.$justifyContent
+}), props.$justifyItems && {
+  justifyItems: props.$justifyItems
+}), props.$left && {
+  left: props.$left
+}), props.$margin && {
+  margin: props.$margin
+}), props.$marginBottom && {
+  marginBottom: props.$marginBottom
+}), props.$marginLeft && {
+  marginLeft: props.$marginLeft
+}), props.$marginRight && {
+  marginRight: props.$marginRight
+}), props.$marginTop && {
+  marginTop: props.$marginTop
+}), props.$maxHeight && {
+  maxHeight: props.$maxHeight
+}), props.$maxWidth && {
+  maxWidth: props.$maxWidth
+}), props.$minHeight && {
+  minHeight: props.$minHeight
+}), props.$minWidth && {
+  minWidth: props.$minWidth
+}), props.$padding && {
+  padding: props.$padding
+}), props.$paddingBottom && {
+  paddingBottom: props.$paddingBottom
+}), props.$paddingLeft && {
+  paddingLeft: props.$paddingLeft
+}), props.$paddingRight && {
+  paddingRight: props.$paddingRight
+}), props.$paddingTop && {
+  paddingTop: props.$paddingTop
+}), props.$position && {
+  position: props.$position
+}), props.$right && {
+  right: props.$right
+}), props.$top && {
+  top: props.$top
+}), props.$width && {
+  width: props.$width
+}), props.$zIndex && {
+  zIndex: props.$zIndex
+});
 
-export { ButtonVariant as B, StyledButton as S };
+export { AlignSelf as A, FlexDirection as F, JustifySelf as J, AlignContent as a, AlignItems as b, FlexWrap as c, JustifyContent as d, JustifyItems as e, getStylingTransientProps as f, getContainerProps as g, getFlexLayoutTransientProps as h, getContainerStylingTransientProps as i, getContainerTransientProps as j, omitStylingProps as o };
 //# sourceMappingURL=styles.js.map