@redsift/design-system 11.9.4 → 12.0.0-muiv6

package/_internal/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../src/components/button/types.ts","../../src/components/button/styles.ts"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { ButtonsColorPalette, StylingProps, Theme, ValueOf } from '../../types';\nimport { IconProps } from '../icon';\n\n/**\n * Component variant.\n */\nexport const ButtonVariant = {\n  primary: 'primary',\n  secondary: 'secondary',\n  unstyled: 'unstyled',\n} as const;\nexport type ButtonVariant = ValueOf<typeof ButtonVariant>;\n\n/**\n * Component color.\n */\nexport type ButtonColor = ButtonsColorPalette;\n\n/**\n * Component props.\n */\nexport interface ButtonProps extends ComponentProps<'button'>, StylingProps {\n  /** Color variant. */\n  color?: ButtonColor;\n  /** Whether the component take the full width or not. */\n  fullWidth?: boolean;\n  /** Whether the component is active or not. */\n  isActive?: boolean;\n  /** Whether the component is disabled or not. */\n  isDisabled?: boolean;\n  /** Whether the component is hovered or not. */\n  isHovered?: boolean;\n  /** Whether the component is in a loading state or not. */\n  isLoading?: boolean;\n  /**\n   * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />\n   * Can also be a ReactElement.\n   */\n  leftIcon?: IconProps['icon'];\n  /** Props to add to the left icon. */\n  leftIconProps?: Omit<IconProps, 'icon' | 'ref'>;\n  /**\n   * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />\n   * Can also be a ReactElement.\n   */\n  rightIcon?: IconProps['icon'];\n  /** Props to add to the right icon. */\n  rightIconProps?: Omit<IconProps, 'icon' | 'ref'>;\n  /** Theme. */\n  theme?: Theme;\n  /** Button variant. */\n  variant?: ButtonVariant;\n}\n\nexport type StyledButtonProps = ButtonProps & {\n  $color: ButtonProps['color'];\n  $fullWidth?: ButtonProps['fullWidth'];\n  $isActive: ButtonProps['isActive'];\n  $isDisabled: ButtonProps['isDisabled'];\n  $isGradient: boolean;\n  $isHovered: ButtonProps['isHovered'];\n  $isLoading: ButtonProps['isLoading'];\n  $theme: ButtonProps['theme'];\n  $variant: ButtonProps['variant'];\n};\n","import styled, { css } from 'styled-components';\nimport { baseStyling, focusRing } from '../shared';\nimport { StyledButtonProps, ButtonVariant } from './types';\n\n/**\n * Component style.\n */\nexport const StyledButton = styled.button<StyledButtonProps>`\n  align-items: center;\n  background: none;\n  border: none;\n  border-radius: 4px;\n  display: inline-flex;\n  font-family: var(--redsift-typography-button-font-family);\n  font-size: var(--redsift-typography-button-font-size);\n  font-weight: var(--redsift-typography-button-font-weight);\n  gap: 8px;\n  height: fit-content;\n  justify-content: center;\n  line-height: var(--redsift-typography-button-line-height);\n  text-decoration: none;\n  text-transform: var(--redsift-typography-button-text-transform);\n  vertical-align: middle;\n  -webkit-font-smoothing: antialiased;\n  ${baseStyling}\n\n  ${({ $isLoading }) =>\n    $isLoading\n      ? css`\n          & > span {\n            opacity: 0;\n          }\n\n          & > .redsift-shield {\n            position: absolute;\n          }\n        `\n      : ''}\n\n  ${({ $variant, $color, $isActive, $isDisabled, $isGradient, $isHovered, $theme }) => css`\n    padding: ${$variant !== ButtonVariant.secondary ||\n    ($variant === ButtonVariant.secondary && $isGradient && !$isDisabled)\n      ? '9px 16px'\n      : '8px 15px'};\n\n    ${!$isGradient\n      ? css`\n          background-color: var(\n            --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled\n                ? 'disabled'\n                : $isActive\n                ? 'active'\n                : $isHovered\n                ? 'hover'\n                : 'default'}\n          );\n          &,\n          .redsift-icon:not(.colored) {\n            color: var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled\n                  ? 'disabled'\n                  : $isActive\n                  ? 'active'\n                  : $isHovered\n                  ? 'hover'\n                  : 'default'}\n            );\n          }\n        `\n      : css`\n          background: var(\n            --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled\n                ? 'disabled'\n                : $isActive\n                ? 'active'\n                : $isHovered\n                ? 'hover'\n                : 'default'}\n          );\n\n          ${$variant === ButtonVariant.primary || $isDisabled\n            ? css`\n                &,\n                .redsift-icon:not(.colored) {\n                  color: var(\n                    --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled\n                        ? 'disabled'\n                        : $isActive\n                        ? 'active'\n                        : $isHovered\n                        ? 'hover'\n                        : 'default'}\n                  );\n                }\n              `\n            : ''}\n\n          ${$variant !== ButtonVariant.primary && !$isDisabled\n            ? css`\n                path {\n                  fill: url(#${$color}-gradient-${$isActive ? 'active' : $isHovered ? 'hover' : 'default'});\n                }\n              `\n            : ''}\n\n          span {\n            background: var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled\n                  ? 'disabled'\n                  : $isActive\n                  ? 'active'\n                  : $isHovered\n                  ? 'hover'\n                  : 'default'}\n            );\n            background-clip: text;\n            color: transparent;\n          }\n        `}\n\n    ${$variant === ButtonVariant.secondary\n      ? css`\n          border: 1px solid\n            var(\n              --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}\n            );\n        `\n      : ''}\n  `};\n\n  &:hover,\n  &:focus-visible {\n    outline: none;\n\n    ${({ $variant, $color, $isDisabled, $isGradient, $theme }) => css`\n      cursor: ${$isDisabled ? 'default' : 'pointer'};\n\n      ${!$isGradient\n        ? css`\n            background-color: var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled\n                  ? 'disabled'\n                  : 'hover'}\n            );\n            &,\n            .redsift-icon:not(.colored) {\n              color: var(\n                --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled\n                    ? 'disabled'\n                    : 'hover'}\n              );\n            }\n\n            ${$variant === ButtonVariant.secondary\n              ? css`\n                  border: 1px solid\n                    var(\n                      --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-${$isDisabled ? 'disabled' : 'hover'}\n                    );\n                `\n              : ''}\n          `\n        : css`\n            background: var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled\n                  ? 'disabled'\n                  : 'hover'}\n            );\n\n            ${$variant !== ButtonVariant.primary && !$isDisabled\n              ? css`\n                  path {\n                    fill: url(#${$color}-gradient-hover);\n                  }\n                `\n              : ''}\n          `}\n    `};\n  }\n\n  &:active {\n    outline: none;\n\n    ${({ $variant, $color, $isGradient, $isHovered, $isDisabled, $theme }) => css`\n      ${!$isGradient\n        ? css`\n            background-color: var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled\n                  ? 'disabled'\n                  : $isHovered\n                  ? 'hover'\n                  : 'active'}\n            );\n            &,\n            .redsift-icon:not(.colored) {\n              color: var(\n                --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled\n                    ? 'disabled'\n                    : $isHovered\n                    ? 'hover'\n                    : 'active'}\n              );\n            }\n\n            ${$variant === ButtonVariant.secondary\n              ? css`\n                  border: 1px solid\n                    var(\n                      --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-${$isDisabled ? 'disabled' : $isHovered ? 'hover' : 'active'}\n                    );\n                `\n              : ''}\n          `\n        : css`\n            background: var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled\n                  ? 'disabled'\n                  : $isHovered\n                  ? 'hover'\n                  : 'active'}\n            );\n\n            ${$variant !== ButtonVariant.primary && !$isDisabled\n              ? css`\n                  path {\n                    fill: url(#${$color}-gradient-active);\n                  }\n                `\n              : ''}\n          `}\n    `};\n  }\n\n  ${({ $fullWidth }) =>\n    $fullWidth\n      ? `\n        width: 100%;\n        flex-grow: 1;\n      `\n      : ''}\n\n  .redsift-icon.left {\n    margin-right: unset;\n    align-items: center;\n  }\n\n  .redsift-icon.right {\n    margin-left: unset;\n    align-items: center;\n  }\n\n  ${focusRing}\n`;\n"],"names":["ButtonVariant","primary","secondary","unstyled","StyledButton","styled","button","baseStyling","_ref","$isLoading","css","_ref2","$variant","$color","$isActive","$isDisabled","$isGradient","$isHovered","$theme","_ref3","_ref4","_ref5","$fullWidth","focusRing"],"mappings":";;;AAIA;AACA;AACA;AACO,MAAMA,aAAa,GAAG;AAC3BC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,SAAS,EAAE,WAAW;AACtBC,EAAAA,QAAQ,EAAE,UAAA;AACZ,EAAU;;AAGV;AACA;AACA;;AAGA;AACA;AACA;;ACjBA;AACA;AACA;AACaC,MAAAA,YAAY,GAAGC,MAAM,CAACC,MAA0B,CAAA;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,WAAY,CAAA;AAChB;AACA,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAAD,IAAA,CAAA;EAAA,OACfC,UAAU,GACNC,GAAI,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAA,CAAS,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACX;AACA,EAAA,EAAIC,KAAA,IAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,SAAS;IAAEC,WAAW;IAAEC,WAAW;IAAEC,UAAU;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAP,KAAA,CAAA;AAAA,EAAA,OAAKD,GAAI,CAAA;AAC3F,aAAA,EAAeE,QAAQ,KAAKZ,aAAa,CAACE,SAAS,IAC9CU,QAAQ,KAAKZ,aAAa,CAACE,SAAS,IAAIc,WAAW,IAAI,CAACD,WAAY,GACjE,UAAU,GACV,UAAW,CAAA;AACnB;AACA,IAAM,EAAA,CAACC,WAAW,GACVN,GAAI,CAAA;AACZ;AACA,4BAAA,EAA8BQ,MAAO,CAAsBN,oBAAAA,EAAAA,QAAS,WAAUC,MAAO,CAAA,YAAA,EAAcE,WAAW,GAC5F,UAAU,GACVD,SAAS,GACT,QAAQ,GACRG,UAAU,GACV,OAAO,GACP,SAAU,CAAA;AAC5B;AACA;AACA;AACA;AACA,8BAAA,EAAgCC,MAAO,CAAsBN,oBAAAA,EAAAA,QAAS,WAAUC,MAAO,CAAA,MAAA,EAAQE,WAAW,GACtF,UAAU,GACVD,SAAS,GACT,QAAQ,GACRG,UAAU,GACV,OAAO,GACP,SAAU,CAAA;AAC9B;AACA;AACA,QAAA,CAAS,GACDP,GAAI,CAAA;AACZ;AACA,4BAAA,EAA8BQ,MAAO,CAAsBN,oBAAAA,EAAAA,QAAS,WAAUC,MAAO,CAAA,YAAA,EAAcE,WAAW,GAC5F,UAAU,GACVD,SAAS,GACT,QAAQ,GACRG,UAAU,GACV,OAAO,GACP,SAAU,CAAA;AAC5B;AACA;AACA,UAAYL,EAAAA,QAAQ,KAAKZ,aAAa,CAACC,OAAO,IAAIc,WAAW,GAC/CL,GAAI,CAAA;AAClB;AACA;AACA;AACA,oCAAA,EAAsCQ,MAAO,CAAsBN,oBAAAA,EAAAA,QAAS,WAAUC,MAAO,CAAA,MAAA,EAAQE,WAAW,GACtF,UAAU,GACVD,SAAS,GACT,QAAQ,GACRG,UAAU,GACV,OAAO,GACP,SAAU,CAAA;AACpC;AACA;AACA,cAAA,CAAe,GACD,EAAG,CAAA;AACjB;AACA,UAAYL,EAAAA,QAAQ,KAAKZ,aAAa,CAACC,OAAO,IAAI,CAACc,WAAW,GAChDL,GAAI,CAAA;AAClB;AACA,6BAA+BG,EAAAA,MAAO,CAAYC,UAAAA,EAAAA,SAAS,GAAG,QAAQ,GAAGG,UAAU,GAAG,OAAO,GAAG,SAAU,CAAA;AAC1G;AACA,cAAA,CAAe,GACD,EAAG,CAAA;AACjB;AACA;AACA;AACA,8BAAA,EAAgCC,MAAO,CAAsBN,oBAAAA,EAAAA,QAAS,WAAUC,MAAO,CAAA,MAAA,EAAQE,WAAW,GACtF,UAAU,GACVD,SAAS,GACT,QAAQ,GACRG,UAAU,GACV,OAAO,GACP,SAAU,CAAA;AAC9B;AACA;AACA;AACA;AACA,QAAU,CAAA,CAAA;AACV;AACA,IAAA,EAAML,QAAQ,KAAKZ,aAAa,CAACE,SAAS,GAClCQ,GAAI,CAAA;AACZ;AACA;AACA,8BAAA,EAAgCQ,MAAO,CAAuCL,qCAAAA,EAAAA,MAAO,CAAQE,MAAAA,EAAAA,WAAW,GAAG,UAAU,GAAGD,SAAS,GAAG,QAAQ,GAAGG,UAAU,GAAG,OAAO,GAAG,SAAU,CAAA;AAChL;AACA,QAAA,CAAS,GACD,EAAG,CAAA;AACX,EAAG,CAAA,CAAA;AAAA,CAAC,CAAA;AACJ;AACA;AACA;AACA;AACA;AACA,IAAA,EAAME,KAAA,IAAA;EAAA,IAAC;IAAEP,QAAQ;IAAEC,MAAM;IAAEE,WAAW;IAAEC,WAAW;AAAEE,IAAAA,MAAAA;AAAO,GAAC,GAAAC,KAAA,CAAA;AAAA,EAAA,OAAKT,GAAI,CAAA;AACtE,cAAA,EAAgBK,WAAW,GAAG,SAAS,GAAG,SAAU,CAAA;AACpD;AACA,MAAQ,EAAA,CAACC,WAAW,GACVN,GAAI,CAAA;AACd;AACA,8BAAgCQ,EAAAA,MAAO,CAAsBN,oBAAAA,EAAAA,QAAS,CAAUC,QAAAA,EAAAA,MAAO,eAAcE,WAAW,GAC5F,UAAU,GACV,OAAQ,CAAA;AAC5B;AACA;AACA;AACA;AACA,gCAAkCG,EAAAA,MAAO,CAAsBN,oBAAAA,EAAAA,QAAS,CAAUC,QAAAA,EAAAA,MAAO,SAAQE,WAAW,GACtF,UAAU,GACV,OAAQ,CAAA;AAC9B;AACA;AACA;AACA,YAAA,EAAcH,QAAQ,KAAKZ,aAAa,CAACE,SAAS,GAClCQ,GAAI,CAAA;AACpB;AACA;AACA,sCAAwCQ,EAAAA,MAAO,wCAAuCL,MAAO,CAAA,MAAA,EAAQE,WAAW,GAAG,UAAU,GAAG,OAAQ,CAAA;AACxI;AACA,gBAAA,CAAiB,GACD,EAAG,CAAA;AACnB,UAAA,CAAW,GACDL,GAAI,CAAA;AACd;AACA,8BAAgCQ,EAAAA,MAAO,CAAsBN,oBAAAA,EAAAA,QAAS,CAAUC,QAAAA,EAAAA,MAAO,eAAcE,WAAW,GAC5F,UAAU,GACV,OAAQ,CAAA;AAC5B;AACA;AACA,YAAcH,EAAAA,QAAQ,KAAKZ,aAAa,CAACC,OAAO,IAAI,CAACc,WAAW,GAChDL,GAAI,CAAA;AACpB;AACA,+BAAA,EAAiCG,MAAO,CAAA;AACxC;AACA,gBAAA,CAAiB,GACD,EAAG,CAAA;AACnB,UAAY,CAAA,CAAA;AACZ,IAAK,CAAA,CAAA;AAAA,CAAC,CAAA;AACN;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMO,KAAA,IAAA;EAAA,IAAC;IAAER,QAAQ;IAAEC,MAAM;IAAEG,WAAW;IAAEC,UAAU;IAAEF,WAAW;AAAEG,IAAAA,MAAAA;AAAO,GAAC,GAAAE,KAAA,CAAA;AAAA,EAAA,OAAKV,GAAI,CAAA;AAClF,MAAQ,EAAA,CAACM,WAAW,GACVN,GAAI,CAAA;AACd;AACA,8BAAA,EAAgCQ,MAAO,CAAA,oBAAA,EAAsBN,QAAS,CAAA,QAAA,EAAUC,MAAO,CAAcE,YAAAA,EAAAA,WAAW,GAC5F,UAAU,GACVE,UAAU,GACV,OAAO,GACP,QAAS,CAAA;AAC7B;AACA;AACA;AACA;AACA,gCAAA,EAAkCC,MAAO,CAAA,oBAAA,EAAsBN,QAAS,CAAA,QAAA,EAAUC,MAAO,CAAQE,MAAAA,EAAAA,WAAW,GACtF,UAAU,GACVE,UAAU,GACV,OAAO,GACP,QAAS,CAAA;AAC/B;AACA;AACA;AACA,YAAA,EAAcL,QAAQ,KAAKZ,aAAa,CAACE,SAAS,GAClCQ,GAAI,CAAA;AACpB;AACA;AACA,sCAAA,EAAwCQ,MAAO,CAAA,qCAAA,EAAuCL,MAAO,CAAA,MAAA,EAAQE,WAAW,GAAG,UAAU,GAAGE,UAAU,GAAG,OAAO,GAAG,QAAS,CAAA;AAChK;AACA,gBAAA,CAAiB,GACD,EAAG,CAAA;AACnB,UAAA,CAAW,GACDP,GAAI,CAAA;AACd;AACA,8BAAA,EAAgCQ,MAAO,CAAA,oBAAA,EAAsBN,QAAS,CAAA,QAAA,EAAUC,MAAO,CAAcE,YAAAA,EAAAA,WAAW,GAC5F,UAAU,GACVE,UAAU,GACV,OAAO,GACP,QAAS,CAAA;AAC7B;AACA;AACA,YAAcL,EAAAA,QAAQ,KAAKZ,aAAa,CAACC,OAAO,IAAI,CAACc,WAAW,GAChDL,GAAI,CAAA;AACpB;AACA,+BAAA,EAAiCG,MAAO,CAAA;AACxC;AACA,gBAAA,CAAiB,GACD,EAAG,CAAA;AACnB,UAAY,CAAA,CAAA;AACZ,IAAK,CAAA,CAAA;AAAA,CAAC,CAAA;AACN;AACA;AACA,EAAA,EAAIQ,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAAD,KAAA,CAAA;AAAA,EAAA,OACfC,UAAU,GACL,CAAA;AACT;AACA;AACA,MAAA,CAAO,GACC,EAAE,CAAA;AAAA,CAAC,CAAA;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,SAAU,CAAA;AACd;;;;"}
+{"version":3,"file":"styles.js","sources":["../../src/types/styles.ts"],"sourcesContent":["import { ValueOf } from './helpers';\n\nexport const AlignSelf = {\n  auto: 'auto',\n  normal: 'normal',\n  start: 'start',\n  end: 'end',\n  center: 'center',\n  'flex-start': 'flex-start',\n  'flex-end': 'flex-end',\n  'self-start': 'self-start',\n  'self-end': 'self-end',\n  baseline: 'baseline',\n  stretch: 'stretch',\n} as const;\nexport type AlignSelf = ValueOf<typeof AlignSelf>;\n\nexport const JustifySelf = {\n  auto: 'auto',\n  normal: 'normal',\n  start: 'start',\n  end: 'end',\n  center: 'center',\n  'flex-start': 'flex-start',\n  'flex-end': 'flex-end',\n  'self-start': 'self-start',\n  'self-end': 'self-end',\n  left: 'left',\n  right: 'right',\n  stretch: 'stretch',\n} as const;\nexport type JustifySelf = ValueOf<typeof JustifySelf>;\n\nexport const AlignContent = {\n  'flex-start': 'flex-start',\n  'flex-end': 'flex-end',\n  center: 'center',\n  'space-between': 'space-between',\n  'space-around': 'space-around',\n  'space-evenly': 'space-evenly',\n  stretch: 'stretch',\n  start: 'start',\n  end: 'end',\n  baseline: 'baseline',\n  'first baseline': 'first baseline',\n  'last baseline': 'last baseline',\n} as const;\nexport type AlignContent = ValueOf<typeof AlignContent>;\n\nexport const AlignItems = {\n  stretch: 'stretch',\n  'flex-start': 'flex-start',\n  'flex-end': 'flex-end',\n  center: 'center',\n  baseline: 'baseline',\n  'first baseline': 'first baseline',\n  'last baseline': 'last baseline',\n  start: 'start',\n  end: 'end',\n  'self-start': 'self-start',\n  'self-end': 'self-end',\n} as const;\nexport type AlignItems = ValueOf<typeof AlignItems>;\n\nexport const FlexDirection = {\n  row: 'row',\n  'row-reverse': 'row-reverse',\n  column: 'column',\n  'column-reverse': 'column-reverse',\n} as const;\nexport type FlexDirection = ValueOf<typeof FlexDirection>;\n\nexport const FlexWrap = {\n  nowrap: 'nowrap',\n  wrap: 'wrap',\n  'wrap-reverse': 'wrap-reverse',\n} as const;\nexport type FlexWrap = ValueOf<typeof FlexWrap>;\n\nexport const JustifyContent = {\n  'flex-start': 'flex-start',\n  'flex-end': 'flex-end',\n  center: 'center',\n  'space-between': 'space-between',\n  'space-around': 'space-around',\n  'space-evenly': 'space-evenly',\n  start: 'start',\n  end: 'end',\n  left: 'left',\n  right: 'right',\n  baseline: 'baseline',\n  'first baseline': 'first baseline',\n  'last baseline': 'last baseline',\n  stretch: 'stretch',\n} as const;\nexport type JustifyContent = ValueOf<typeof JustifyContent>;\n\nexport const JustifyItems = {\n  start: 'start',\n  end: 'end',\n  center: 'center',\n  stretch: 'stretch',\n} as const;\nexport type JustifyItems = ValueOf<typeof JustifyItems>;\n\nexport interface LayoutProps {\n  /** 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>. */\n  flex?: string;\n  /** 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>. */\n  flexGrow?: number;\n  /** 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>. */\n  flexShrink?: number;\n  /** 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>. */\n  flexBasis?: string;\n  /** 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>. */\n  alignSelf?: AlignSelf;\n  /** 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>. */\n  justifySelf?: string;\n  /** 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>. */\n  order?: number;\n  /** 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>. */\n  gridArea?: string;\n  /** 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>. */\n  gridColumn?: string;\n  /** 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>. */\n  gridRow?: string;\n  /** 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>. */\n  gridColumnStart?: string;\n  /** 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>. */\n  gridColumnEnd?: string;\n  /** 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>. */\n  gridRowStart?: string;\n  /** 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>. */\n  gridRowEnd?: string;\n}\n\nexport interface SpacingProps {\n  /** The margin for all four sides of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin\">MDN</a>. */\n  margin?: string;\n  /** 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>. */\n  marginBottom?: string;\n  /** 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>. */\n  marginLeft?: string;\n  /** 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>. */\n  marginRight?: string;\n  /** 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>. */\n  marginTop?: string;\n}\n\nexport interface SizingProps {\n  /** The height of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/height\">MDN</a>. */\n  height?: string | number;\n  /** The maximum height of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-height\">MDN</a>. */\n  maxHeight?: string;\n  /** The maximum width of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-width\">MDN</a>. */\n  maxWidth?: string;\n  /** The minimum height of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/min-height\">MDN</a>. */\n  minHeight?: string;\n  /** The minimum width of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/min-width\">MDN</a>. */\n  minWidth?: string;\n  /** The width of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\">MDN</a>. */\n  width?: string | number;\n}\n\nexport interface PositioningProps {\n  /** Specifies how the element is positioned. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/position\">MDN</a>. */\n  position?: string;\n  /** The top position for the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/top\">MDN</a>. */\n  top?: string;\n  /** The bottom position for the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/bottom\">MDN</a>. */\n  bottom?: string;\n  /** 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. */\n  left?: string;\n  /** 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. */\n  right?: string;\n  /** The stacking order for the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/z-index\">MDN</a>. */\n  zIndex?: string;\n}\n\nexport interface BorderProps {\n  /** 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>. */\n  background?: string;\n  /** 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>. */\n  backgroundColor?: string;\n  /** 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>. */\n  border?: string;\n  /** 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>. */\n  borderTop?: string;\n  /** 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>. */\n  borderBottom?: string;\n  /** 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. */\n  borderLeft?: string;\n  /** 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. */\n  borderRight?: string;\n  /** 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>. */\n  borderRadius?: string;\n  /** 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>. */\n  boxShadow?: string;\n}\n\nexport interface FlexLayoutProps {\n  /** 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>. */\n  alignContent?: AlignContent;\n  /** The alignment of children within their container. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/align-items\">MDN</a>. */\n  alignItems?: AlignItems;\n  /** The direction in which to layout children. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction\">MDN</a>. */\n  flexDirection?: FlexDirection;\n  /** Whether to wrap items onto multiple lines. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap\">MDN</a>. */\n  flexWrap?: FlexWrap;\n  /** The space to display between both rows and columns. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/gap\">MDN</a>. */\n  gap?: string;\n  /** Whether the box is displayed inline or not. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/display\">MDN</a>. */\n  inline?: boolean;\n  /** 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>. */\n  justifyContent?: JustifyContent;\n}\n\nexport interface GridLayoutProps {\n  /** 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>. */\n  alignContent?: AlignContent;\n  /** The alignment of children within their container. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/align-items\">MDN</a>. */\n  alignItems?: AlignItems;\n  /** The space to display between both rows and columns. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/gap\">MDN</a>. */\n  gap?: string;\n  /** Defines the size of implicitly generated columns. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns\">MDN</a>. */\n  gridAutoColumns?: string;\n  /** Defines the size of implicitly generated rows. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows\">MDN</a>. */\n  gridAutoRows?: string;\n  /** Defines named grid areas. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas\">MDN</a>. */\n  gridTemplateAreas?: string;\n  /** 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>. */\n  gridTemplateColumns?: string;\n  /** 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>. */\n  gridTemplateRows?: string;\n  /** Whether the box is displayed inline or not. */\n  inline?: boolean;\n  /** 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>. */\n  justifyContent?: JustifyContent;\n  /** 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>. */\n  justifyItems?: JustifyItems;\n}\n\nexport interface StylingProps extends LayoutProps, SpacingProps, SizingProps, PositioningProps {}\n\nexport interface InternalSpacingProps {\n  /** The padding for all four sides of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/padding\">MDN</a>. */\n  padding?: string;\n  /** 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>. */\n  paddingBottom?: string;\n  /** 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>. */\n  paddingLeft?: string;\n  /** 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>. */\n  paddingRight?: string;\n  /** 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>. */\n  paddingTop?: string;\n}\nexport interface ContainerProps\n  extends Omit<FlexLayoutProps, 'inline'>,\n    Omit<GridLayoutProps, 'inline'>,\n    SpacingProps,\n    SizingProps,\n    PositioningProps,\n    BorderProps,\n    InternalSpacingProps {\n  /** 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>. */\n  display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'inherit';\n}\n\nexport const getContainerProps = (props: ContainerProps) => ({\n  ...(props.alignContent && { alignContent: props.alignContent }),\n  ...(props.alignItems && { alignItems: props.alignItems }),\n  ...(props.bottom && { bottom: props.bottom }),\n  ...(props.flexDirection && { flexDirection: props.flexDirection }),\n  ...(props.flexWrap && { flexWrap: props.flexWrap }),\n  ...(props.gap && { gap: props.gap }),\n  ...(props.gridAutoColumns && { gridAutoColumns: props.gridAutoColumns }),\n  ...(props.gridAutoRows && { gridAutoRows: props.gridAutoRows }),\n  ...(props.gridTemplateAreas && { gridTemplateAreas: props.gridTemplateAreas }),\n  ...(props.gridTemplateColumns && { gridTemplateColumns: props.gridTemplateColumns }),\n  ...(props.gridTemplateRows && { gridTemplateRows: props.gridTemplateRows }),\n  ...(props.height && { height: props.height }),\n  ...(props.justifyContent && { justifyContent: props.justifyContent }),\n  ...(props.justifyItems && { justifyItems: props.justifyItems }),\n  ...(props.left && { left: props.left }),\n  ...(props.margin && { margin: props.margin }),\n  ...(props.marginBottom && { marginBottom: props.marginBottom }),\n  ...(props.marginLeft && { marginLeft: props.marginLeft }),\n  ...(props.marginRight && { marginRight: props.marginRight }),\n  ...(props.marginTop && { marginTop: props.marginTop }),\n  ...(props.maxHeight && { maxHeight: props.maxHeight }),\n  ...(props.maxWidth && { maxWidth: props.maxWidth }),\n  ...(props.minHeight && { minHeight: props.minHeight }),\n  ...(props.minWidth && { minWidth: props.minWidth }),\n  ...(props.padding && { padding: props.padding }),\n  ...(props.paddingBottom && { paddingBottom: props.paddingBottom }),\n  ...(props.paddingLeft && { paddingLeft: props.paddingLeft }),\n  ...(props.paddingRight && { paddingRight: props.paddingRight }),\n  ...(props.paddingTop && { paddingTop: props.paddingTop }),\n  ...(props.position && { position: props.position }),\n  ...(props.right && { right: props.right }),\n  ...(props.top && { top: props.top }),\n  ...(props.width && { width: props.width }),\n  ...(props.zIndex && { zIndex: props.zIndex }),\n});\n\n/**\n * Converts styling props to transient props by adding a $ prefix.\n * Filters out undefined values to avoid passing unnecessary props.\n */\nconst toTransientProps = <T extends Record<string, any>>(props: T, keys: (keyof T)[]): Partial<TransientProps<T>> => {\n  return keys.reduce((acc, key) => {\n    const value = props[key];\n    if (value !== undefined) {\n      const transientKey = `$${String(key)}` as keyof TransientProps<T>;\n      acc[transientKey] = value;\n    }\n    return acc;\n  }, {} as Partial<TransientProps<T>>);\n};\n\nconst LAYOUT_PROPS_KEYS: (keyof LayoutProps)[] = [\n  'flex',\n  'flexGrow',\n  'flexShrink',\n  'flexBasis',\n  'alignSelf',\n  'justifySelf',\n  'order',\n  'gridArea',\n  'gridColumn',\n  'gridRow',\n  'gridColumnStart',\n  'gridColumnEnd',\n  'gridRowStart',\n  'gridRowEnd',\n];\n\nconst SPACING_PROPS_KEYS: (keyof SpacingProps)[] = ['margin', 'marginBottom', 'marginLeft', 'marginRight', 'marginTop'];\n\nconst SIZING_PROPS_KEYS: (keyof SizingProps)[] = ['height', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'width'];\n\nconst POSITIONING_PROPS_KEYS: (keyof PositioningProps)[] = ['position', 'top', 'bottom', 'left', 'right', 'zIndex'];\n\nconst INTERNAL_SPACING_PROPS_KEYS: (keyof InternalSpacingProps)[] = [\n  'padding',\n  'paddingBottom',\n  'paddingLeft',\n  'paddingRight',\n  'paddingTop',\n];\n\nconst BORDER_PROPS_KEYS: (keyof BorderProps)[] = [\n  'background',\n  'backgroundColor',\n  'border',\n  'borderTop',\n  'borderBottom',\n  'borderLeft',\n  'borderRight',\n  'borderRadius',\n  'boxShadow',\n];\n\nconst FLEX_LAYOUT_PROPS_KEYS: (keyof FlexLayoutProps)[] = [\n  'alignContent',\n  'alignItems',\n  'flexDirection',\n  'flexWrap',\n  'gap',\n  'inline',\n  'justifyContent',\n];\n\nconst GRID_LAYOUT_PROPS_KEYS: (keyof GridLayoutProps)[] = [\n  'alignContent',\n  'alignItems',\n  'gap',\n  'gridAutoColumns',\n  'gridAutoRows',\n  'gridTemplateAreas',\n  'gridTemplateColumns',\n  'gridTemplateRows',\n  'inline',\n  'justifyContent',\n  'justifyItems',\n];\n\nconst STYLING_PROPS_KEYS: (keyof StylingProps)[] = [\n  ...LAYOUT_PROPS_KEYS,\n  ...SPACING_PROPS_KEYS,\n  ...SIZING_PROPS_KEYS,\n  ...POSITIONING_PROPS_KEYS,\n];\n\nconst CONTAINER_PROPS_KEYS: string[] = [\n  ...LAYOUT_PROPS_KEYS,\n  ...SPACING_PROPS_KEYS,\n  ...SIZING_PROPS_KEYS,\n  ...POSITIONING_PROPS_KEYS,\n  ...INTERNAL_SPACING_PROPS_KEYS,\n  ...BORDER_PROPS_KEYS,\n  ...FLEX_LAYOUT_PROPS_KEYS,\n  ...GRID_LAYOUT_PROPS_KEYS,\n  'display',\n];\n\n/**\n * Converts styling props to transient props (with $ prefix) for styled-components.\n * Also returns the original props with styling props removed.\n * @param props - Object containing styling props\n * @returns Object with transientProps (with $ prefix) and otherProps (without styling props)\n */\nexport const getStylingTransientProps = <T extends Record<string, any>>(\n  props: T\n): { transientProps: Partial<StylingTransientProps>; otherProps: Omit<T, keyof StylingProps> } => {\n  const transientProps = {\n    ...toTransientProps(props, LAYOUT_PROPS_KEYS),\n    ...toTransientProps(props, SPACING_PROPS_KEYS),\n    ...toTransientProps(props, SIZING_PROPS_KEYS),\n    ...toTransientProps(props, POSITIONING_PROPS_KEYS),\n  };\n\n  const otherProps = { ...props };\n  STYLING_PROPS_KEYS.forEach((key) => {\n    delete otherProps[key as string];\n  });\n\n  return {\n    transientProps,\n    otherProps: otherProps as Omit<T, keyof StylingProps>,\n  };\n};\n\n/**\n * Converts flex layout props to transient props (with $ prefix) for styled-components.\n * Used for components that need flexbox-specific props alongside styling props.\n * @param props - Object containing flex layout props\n * @returns Object with transientProps (with $ prefix) and otherProps (without flex layout props)\n */\nexport const getFlexLayoutTransientProps = <T extends Record<string, any>>(\n  props: T\n): { transientProps: Partial<FlexLayoutTransientProps>; otherProps: Omit<T, keyof FlexLayoutProps> } => {\n  const transientProps = toTransientProps(props, FLEX_LAYOUT_PROPS_KEYS);\n\n  const otherProps = { ...props };\n  FLEX_LAYOUT_PROPS_KEYS.forEach((key) => {\n    delete otherProps[key as string];\n  });\n\n  return {\n    transientProps,\n    otherProps: otherProps as Omit<T, keyof FlexLayoutProps>,\n  };\n};\n\n/**\n * Removes styling props from an object to prevent passing them to the DOM.\n * @param props - Object that may contain styling props\n * @returns New object with styling props removed\n */\nexport const omitStylingProps = <T extends Record<string, any>>(props: T): Omit<T, keyof StylingProps> => {\n  const result = { ...props };\n  STYLING_PROPS_KEYS.forEach((key) => {\n    delete result[key as string];\n  });\n  return result as Omit<T, keyof StylingProps>;\n};\n\n/**\n * Converts container props (styling + internal spacing + border + flex layout) to transient props for styled-components.\n * Used for Flexbox, Grid, and other container components.\n * @param props - Object containing container props\n * @returns Object with transientProps (with $ prefix) and otherProps (without container props)\n */\nexport const getContainerStylingTransientProps = <T extends Record<string, any>>(\n  props: T\n): {\n  transientProps: Partial<\n    StylingTransientProps &\n      InternalSpacingTransientProps &\n      BorderTransientProps &\n      FlexLayoutTransientProps &\n      GridLayoutTransientProps & { $display?: ContainerProps['display'] }\n  >;\n  otherProps: Omit<T, keyof (StylingProps & InternalSpacingProps & BorderProps & FlexLayoutProps & { display: any })>;\n} => {\n  const transientProps = {\n    ...toTransientProps(props, LAYOUT_PROPS_KEYS),\n    ...toTransientProps(props, SPACING_PROPS_KEYS),\n    ...toTransientProps(props, SIZING_PROPS_KEYS),\n    ...toTransientProps(props, POSITIONING_PROPS_KEYS),\n    ...toTransientProps(props, INTERNAL_SPACING_PROPS_KEYS),\n    ...toTransientProps(props, BORDER_PROPS_KEYS),\n    ...toTransientProps(props, FLEX_LAYOUT_PROPS_KEYS),\n    ...toTransientProps(props, GRID_LAYOUT_PROPS_KEYS),\n    ...(props.display !== undefined && { $display: props.display }),\n  };\n\n  const otherProps = { ...props };\n  CONTAINER_PROPS_KEYS.forEach((key) => {\n    delete otherProps[key];\n  });\n\n  return {\n    transientProps,\n    otherProps: otherProps as any,\n  };\n};\n\n/** TRANSIENT PROPS */\ntype TransientProps<T> = {\n  [K in keyof T as `$${string & K}`]: T[K];\n};\n\nexport interface LayoutTransientProps extends TransientProps<LayoutProps> {}\nexport interface SpacingTransientProps extends TransientProps<SpacingProps> {}\nexport interface SizingTransientProps extends TransientProps<SizingProps> {}\nexport interface PositioningTransientProps extends TransientProps<PositioningProps> {}\nexport interface BorderTransientProps extends TransientProps<BorderProps> {}\nexport interface FlexLayoutTransientProps extends TransientProps<FlexLayoutProps> {}\nexport interface GridLayoutTransientProps extends TransientProps<GridLayoutProps> {}\nexport interface StylingTransientProps extends TransientProps<StylingProps> {}\nexport interface InternalSpacingTransientProps extends TransientProps<InternalSpacingProps> {}\nexport interface ContainerTransientProps extends TransientProps<ContainerProps> {}\n\nexport const getContainerTransientProps = (props: ContainerTransientProps) => ({\n  ...(props.$alignContent && { alignContent: props.$alignContent }),\n  ...(props.$alignItems && { alignItems: props.$alignItems }),\n  ...(props.$bottom && { bottom: props.$bottom }),\n  ...(props.$flexDirection && { flexDirection: props.$flexDirection }),\n  ...(props.$flexWrap && { flexWrap: props.$flexWrap }),\n  ...(props.$gap && { gap: props.$gap }),\n  ...(props.$gridAutoColumns && { gridAutoColumns: props.$gridAutoColumns }),\n  ...(props.$gridAutoRows && { gridAutoRows: props.$gridAutoRows }),\n  ...(props.$gridTemplateAreas && { gridTemplateAreas: props.$gridTemplateAreas }),\n  ...(props.$gridTemplateColumns && { gridTemplateColumns: props.$gridTemplateColumns }),\n  ...(props.$gridTemplateRows && { gridTemplateRows: props.$gridTemplateRows }),\n  ...(props.$height && { height: props.$height }),\n  ...(props.$justifyContent && { justifyContent: props.$justifyContent }),\n  ...(props.$justifyItems && { justifyItems: props.$justifyItems }),\n  ...(props.$left && { left: props.$left }),\n  ...(props.$margin && { margin: props.$margin }),\n  ...(props.$marginBottom && { marginBottom: props.$marginBottom }),\n  ...(props.$marginLeft && { marginLeft: props.$marginLeft }),\n  ...(props.$marginRight && { marginRight: props.$marginRight }),\n  ...(props.$marginTop && { marginTop: props.$marginTop }),\n  ...(props.$maxHeight && { maxHeight: props.$maxHeight }),\n  ...(props.$maxWidth && { maxWidth: props.$maxWidth }),\n  ...(props.$minHeight && { minHeight: props.$minHeight }),\n  ...(props.$minWidth && { minWidth: props.$minWidth }),\n  ...(props.$padding && { padding: props.$padding }),\n  ...(props.$paddingBottom && { paddingBottom: props.$paddingBottom }),\n  ...(props.$paddingLeft && { paddingLeft: props.$paddingLeft }),\n  ...(props.$paddingRight && { paddingRight: props.$paddingRight }),\n  ...(props.$paddingTop && { paddingTop: props.$paddingTop }),\n  ...(props.$position && { position: props.$position }),\n  ...(props.$right && { right: props.$right }),\n  ...(props.$top && { top: props.$top }),\n  ...(props.$width && { width: props.$width }),\n  ...(props.$zIndex && { zIndex: props.$zIndex }),\n});\n"],"names":["AlignSelf","auto","normal","start","end","center","baseline","stretch","JustifySelf","left","right","AlignContent","AlignItems","FlexDirection","row","column","FlexWrap","nowrap","wrap","JustifyContent","JustifyItems","getContainerProps","props","_objectSpread","alignContent","alignItems","bottom","flexDirection","flexWrap","gap","gridAutoColumns","gridAutoRows","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","height","justifyContent","justifyItems","margin","marginBottom","marginLeft","marginRight","marginTop","maxHeight","maxWidth","minHeight","minWidth","padding","paddingBottom","paddingLeft","paddingRight","paddingTop","position","top","width","zIndex","toTransientProps","keys","reduce","acc","key","value","undefined","transientKey","String","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","STYLING_PROPS_KEYS","CONTAINER_PROPS_KEYS","getStylingTransientProps","transientProps","otherProps","forEach","getFlexLayoutTransientProps","omitStylingProps","result","getContainerStylingTransientProps","display","$display","getContainerTransientProps","$alignContent","$alignItems","$bottom","$flexDirection","$flexWrap","$gap","$gridAutoColumns","$gridAutoRows","$gridTemplateAreas","$gridTemplateColumns","$gridTemplateRows","$height","$justifyContent","$justifyItems","$left","$margin","$marginBottom","$marginLeft","$marginRight","$marginTop","$maxHeight","$maxWidth","$minHeight","$minWidth","$padding","$paddingBottom","$paddingLeft","$paddingRight","$paddingTop","$position","$right","$top","$width","$zIndex"],"mappings":"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"}

package/_internal/styles2.js

@@ -1,10 +1,10 @@
 import styled, { css } from 'styled-components';
-import { S as StyledButton } from './styles.js';
+import { i as baseStyling, k as focusRing } from './styles5.js';
 
 /**
  * Component variant.
  */
-const IconButtonVariant = {
+const ButtonVariant = {
   primary: 'primary',
   secondary: 'secondary',
   unstyled: 'unstyled'
@@ -21,27 +21,215 @@ const IconButtonVariant = {
 /**
  * Component style.
  */
-const StyledIconButton = styled(StyledButton)`
+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 {
-    $variant
+    $isLoading
   } = _ref;
-  return css`
-    padding: ${$variant === IconButtonVariant.secondary ? '8px' : '9px'};
-  `;
-}};
+  return $isLoading ? css`
+          & > span {
+            opacity: 0;
+          }
+
+          & > .redsift-shield {
+            position: absolute;
+          }
+        ` : '';
+}}
 
   ${_ref2 => {
   let {
-    $isLoading
+    $variant,
+    $color,
+    $isActive,
+    $isDisabled,
+    $isGradient,
+    $isHovered,
+    $theme
   } = _ref2;
-  return $isLoading ? css`
-          & > .redsift-shield {
-            position: relative;
+  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 { IconButtonVariant as I, StyledIconButton as S };
+export { ButtonVariant as B, StyledButton as S };
 //# sourceMappingURL=styles2.js.map

package/_internal/styles2.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles2.js","sources":["../../src/components/icon-button/types.ts","../../src/components/icon-button/styles.ts"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { ButtonsColorPalette, StylingProps, Theme, ValueOf } from '../../types';\nimport { IconProps } from '../icon';\n\n/**\n * Component variant.\n */\nexport const IconButtonVariant = {\n  primary: 'primary',\n  secondary: 'secondary',\n  unstyled: 'unstyled',\n} as const;\nexport type IconButtonVariant = ValueOf<typeof IconButtonVariant>;\n\n/**\n * Component color.\n */\nexport type IconButtonColor = ButtonsColorPalette;\n\n/**\n * Component props.\n */\nexport interface IconButtonProps extends ComponentProps<'button'>, StylingProps {\n  /** Color variant. */\n  color?: IconButtonColor;\n  /**\n   * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />\n   * Can also be a ReactElement.\n   */\n  icon: IconProps['icon'];\n  /** Props to forward to the icon. */\n  iconProps?: Omit<IconProps, 'ref' | 'icon'>;\n  /** Whether the component is active or not. */\n  isActive?: boolean;\n  /** Whether the component is disabled or not. */\n  isDisabled?: boolean;\n  /** Whether the component is hovered or not. */\n  isHovered?: boolean;\n  /** Whether the component is in a loading state or not. */\n  isLoading?: boolean;\n  /** Theme. */\n  theme?: Theme;\n  /** Button variant. */\n  variant?: IconButtonVariant;\n}\n\nexport type StyledIconButtonProps = Omit<IconButtonProps, 'icon'> & {\n  $color: IconButtonProps['color'];\n  $isActive: IconButtonProps['isActive'];\n  $isDisabled: IconButtonProps['isDisabled'];\n  $isHovered: IconButtonProps['isHovered'];\n  $isLoading: IconButtonProps['isLoading'];\n  $theme: IconButtonProps['theme'];\n  $variant: IconButtonProps['variant'];\n};\n","import styled, { css } from 'styled-components';\nimport { StyledButton } from '../button';\nimport { IconButtonVariant, StyledIconButtonProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledIconButton = styled(StyledButton)<StyledIconButtonProps>`\n  ${({ $variant }) => css`\n    padding: ${$variant === IconButtonVariant.secondary ? '8px' : '9px'};\n  `};\n\n  ${({ $isLoading }) =>\n    $isLoading\n      ? css`\n          & > .redsift-shield {\n            position: relative;\n          }\n        `\n      : ''}\n`;\n"],"names":["IconButtonVariant","primary","secondary","unstyled","StyledIconButton","styled","StyledButton","_ref","$variant","css","_ref2","$isLoading"],"mappings":";;;AAIA;AACA;AACA;AACO,MAAMA,iBAAiB,GAAG;AAC/BC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,SAAS,EAAE,WAAW;AACtBC,EAAAA,QAAQ,EAAE,UAAA;AACZ,EAAU;;AAGV;AACA;AACA;;AAGA;AACA;AACA;;ACjBA;AACA;AACA;MACaC,gBAAgB,GAAGC,MAAM,CAACC,YAAY,CAAyB,CAAA;AAC5E,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,QAAAA;AAAS,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAKE,GAAI,CAAA;AAC1B,aAAeD,EAAAA,QAAQ,KAAKR,iBAAiB,CAACE,SAAS,GAAG,KAAK,GAAG,KAAM,CAAA;AACxE,EAAG,CAAA,CAAA;AAAA,CAAC,CAAA;AACJ;AACA,EAAA,EAAIQ,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAAD,KAAA,CAAA;EAAA,OACfC,UAAU,GACNF,GAAI,CAAA;AACZ;AACA;AACA;AACA,QAAA,CAAS,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACX;;;;"}
+{"version":3,"file":"styles2.js","sources":["../../src/components/button/types.ts","../../src/components/button/styles.ts"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { ButtonsColorPalette, StylingProps, StylingTransientProps, Theme, ValueOf } from '../../types';\nimport { IconProps } from '../icon';\n\n/**\n * Component variant.\n */\nexport const ButtonVariant = {\n  primary: 'primary',\n  secondary: 'secondary',\n  unstyled: 'unstyled',\n} as const;\nexport type ButtonVariant = ValueOf<typeof ButtonVariant>;\n\n/**\n * Component color.\n */\nexport type ButtonColor = ButtonsColorPalette;\n\n/**\n * Component props.\n */\nexport interface ButtonProps extends ComponentProps<'button'>, StylingProps {\n  /** Color variant. */\n  color?: ButtonColor;\n  /** Whether the component take the full width or not. */\n  fullWidth?: boolean;\n  /** Whether the component is active or not. */\n  isActive?: boolean;\n  /** Whether the component is disabled or not. */\n  isDisabled?: boolean;\n  /** Whether the component is hovered or not. */\n  isHovered?: boolean;\n  /** Whether the component is in a loading state or not. */\n  isLoading?: boolean;\n  /**\n   * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />\n   * Can also be a ReactElement.\n   */\n  leftIcon?: IconProps['icon'];\n  /** Props to add to the left icon. */\n  leftIconProps?: Omit<IconProps, 'icon' | 'ref'>;\n  /**\n   * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />\n   * Can also be a ReactElement.\n   */\n  rightIcon?: IconProps['icon'];\n  /** Props to add to the right icon. */\n  rightIconProps?: Omit<IconProps, 'icon' | 'ref'>;\n  /** Theme. */\n  theme?: Theme;\n  /** Button variant. */\n  variant?: ButtonVariant;\n}\n\nexport interface StyledButtonProps extends ComponentProps<'button'>, StylingTransientProps {\n  $color: ButtonProps['color'];\n  $fullWidth?: ButtonProps['fullWidth'];\n  $isActive: ButtonProps['isActive'];\n  $isDisabled: ButtonProps['isDisabled'];\n  $isGradient: boolean;\n  $isHovered: ButtonProps['isHovered'];\n  $isLoading: ButtonProps['isLoading'];\n  $theme: ButtonProps['theme'];\n  $variant: ButtonProps['variant'];\n}\n","import styled, { css } from 'styled-components';\nimport { baseStyling, focusRing } from '../shared';\nimport { StyledButtonProps, ButtonVariant } from './types';\n\n/**\n * Component style.\n */\nexport const StyledButton = styled.button<StyledButtonProps>`\n  align-items: center;\n  background: none;\n  border: none;\n  border-radius: 4px;\n  display: inline-flex;\n  font-family: var(--redsift-typography-button-font-family);\n  font-size: var(--redsift-typography-button-font-size);\n  font-weight: var(--redsift-typography-button-font-weight);\n  gap: 8px;\n  height: fit-content;\n  justify-content: center;\n  line-height: var(--redsift-typography-button-line-height);\n  text-decoration: none;\n  text-transform: var(--redsift-typography-button-text-transform);\n  vertical-align: middle;\n  -webkit-font-smoothing: antialiased;\n  ${baseStyling}\n\n  ${({ $isLoading }) =>\n    $isLoading\n      ? css`\n          & > span {\n            opacity: 0;\n          }\n\n          & > .redsift-shield {\n            position: absolute;\n          }\n        `\n      : ''}\n\n  ${({ $variant, $color, $isActive, $isDisabled, $isGradient, $isHovered, $theme }) => css`\n    padding: ${$variant !== ButtonVariant.secondary ||\n    ($variant === ButtonVariant.secondary && $isGradient && !$isDisabled)\n      ? '9px 16px'\n      : '8px 15px'};\n\n    ${!$isGradient\n      ? css`\n          background-color: var(\n            --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled\n                ? 'disabled'\n                : $isActive\n                ? 'active'\n                : $isHovered\n                ? 'hover'\n                : 'default'}\n          );\n          &,\n          .redsift-icon:not(.colored) {\n            color: var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled\n                  ? 'disabled'\n                  : $isActive\n                  ? 'active'\n                  : $isHovered\n                  ? 'hover'\n                  : 'default'}\n            );\n          }\n        `\n      : css`\n          background: var(\n            --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled\n                ? 'disabled'\n                : $isActive\n                ? 'active'\n                : $isHovered\n                ? 'hover'\n                : 'default'}\n          );\n\n          ${$variant === ButtonVariant.primary || $isDisabled\n            ? css`\n                &,\n                .redsift-icon:not(.colored) {\n                  color: var(\n                    --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled\n                        ? 'disabled'\n                        : $isActive\n                        ? 'active'\n                        : $isHovered\n                        ? 'hover'\n                        : 'default'}\n                  );\n                }\n              `\n            : ''}\n\n          ${$variant !== ButtonVariant.primary && !$isDisabled\n            ? css`\n                path {\n                  fill: url(#${$color}-gradient-${$isActive ? 'active' : $isHovered ? 'hover' : 'default'});\n                }\n              `\n            : ''}\n\n          span {\n            background: var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled\n                  ? 'disabled'\n                  : $isActive\n                  ? 'active'\n                  : $isHovered\n                  ? 'hover'\n                  : 'default'}\n            );\n            background-clip: text;\n            color: transparent;\n          }\n        `}\n\n    ${$variant === ButtonVariant.secondary\n      ? css`\n          border: 1px solid\n            var(\n              --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}\n            );\n        `\n      : ''}\n  `};\n\n  &:hover,\n  &:focus-visible {\n    outline: none;\n\n    ${({ $variant, $color, $isDisabled, $isGradient, $theme }) => css`\n      cursor: ${$isDisabled ? 'default' : 'pointer'};\n\n      ${!$isGradient\n        ? css`\n            background-color: var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled\n                  ? 'disabled'\n                  : 'hover'}\n            );\n            &,\n            .redsift-icon:not(.colored) {\n              color: var(\n                --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled\n                    ? 'disabled'\n                    : 'hover'}\n              );\n            }\n\n            ${$variant === ButtonVariant.secondary\n              ? css`\n                  border: 1px solid\n                    var(\n                      --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-${$isDisabled ? 'disabled' : 'hover'}\n                    );\n                `\n              : ''}\n          `\n        : css`\n            background: var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled\n                  ? 'disabled'\n                  : 'hover'}\n            );\n\n            ${$variant !== ButtonVariant.primary && !$isDisabled\n              ? css`\n                  path {\n                    fill: url(#${$color}-gradient-hover);\n                  }\n                `\n              : ''}\n          `}\n    `};\n  }\n\n  &:active {\n    outline: none;\n\n    ${({ $variant, $color, $isGradient, $isHovered, $isDisabled, $theme }) => css`\n      ${!$isGradient\n        ? css`\n            background-color: var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled\n                  ? 'disabled'\n                  : $isHovered\n                  ? 'hover'\n                  : 'active'}\n            );\n            &,\n            .redsift-icon:not(.colored) {\n              color: var(\n                --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled\n                    ? 'disabled'\n                    : $isHovered\n                    ? 'hover'\n                    : 'active'}\n              );\n            }\n\n            ${$variant === ButtonVariant.secondary\n              ? css`\n                  border: 1px solid\n                    var(\n                      --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-${$isDisabled ? 'disabled' : $isHovered ? 'hover' : 'active'}\n                    );\n                `\n              : ''}\n          `\n        : css`\n            background: var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled\n                  ? 'disabled'\n                  : $isHovered\n                  ? 'hover'\n                  : 'active'}\n            );\n\n            ${$variant !== ButtonVariant.primary && !$isDisabled\n              ? css`\n                  path {\n                    fill: url(#${$color}-gradient-active);\n                  }\n                `\n              : ''}\n          `}\n    `};\n  }\n\n  ${({ $fullWidth }) =>\n    $fullWidth\n      ? `\n        width: 100%;\n        flex-grow: 1;\n      `\n      : ''}\n\n  .redsift-icon.left {\n    margin-right: unset;\n    align-items: center;\n  }\n\n  .redsift-icon.right {\n    margin-left: unset;\n    align-items: center;\n  }\n\n  ${focusRing}\n`;\n"],"names":["ButtonVariant","primary","secondary","unstyled","StyledButton","styled","button","baseStyling","_ref","$isLoading","css","_ref2","$variant","$color","$isActive","$isDisabled","$isGradient","$isHovered","$theme","_ref3","_ref4","_ref5","$fullWidth","focusRing"],"mappings":"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"}

package/_internal/styles3.js

@@ -1,145 +1,47 @@
 import styled, { css } from 'styled-components';
-import { i as baseStyling } from './styles4.js';
-import { N as NotificationsColorPalette, g as NeutralColorPalette, e as ProductColorPalette } from './colors.js';
+import { S as StyledButton } from './styles2.js';
 
 /**
- * Component style.
+ * Component variant.
+ */
+const IconButtonVariant = {
+  primary: 'primary',
+  secondary: 'secondary',
+  unstyled: 'unstyled'
+};
+
+/**
+ * Component color.
  */
-const StyledLink = styled.a`
-  background: none;
-  border: none;
-  color: unset;
-  cursor: text !important;
-  display: inline-flex;
-  gap: 4px;
-  align-items: center;
-  font-family: var(--redsift-typography-link-font-family);
-  font-size: var(--redsift-typography-link-font-size);
-  font-weight: var(--redsift-typography-link-font-weight);
-  height: var(--redsift-typography-link-line-height);
-  line-height: var(--redsift-typography-link-line-height);
-  padding: unset;
-  position: relative;
-  text-decoration: none;
-  width: fit-content;
 
+/**
+ * Component props.
+ */
+
+/**
+ * Component style.
+ */
+const StyledIconButton = styled(StyledButton)`
   ${_ref => {
   let {
-    $hasIcons
+    $variant
   } = _ref;
-  return $hasIcons ? css`
-          bottom: -2px;
-        ` : '';
-}}
-
-  ${baseStyling}
+  return css`
+    padding: ${$variant === IconButtonVariant.secondary ? '8px' : '9px'};
+  `;
+}};
 
   ${_ref2 => {
   let {
-    $isDisabled,
-    $color,
-    $theme,
-    $hasIcons
+    $isLoading
   } = _ref2;
-  return !$isDisabled ? css`
-          ${$color && $color === 'radar' ? css`
-                  background: linear-gradient(90deg, #51b78e 0%, #0081c3 100%);
-                  background-clip: text;
-                  color: transparent;
-
-                  path {
-                    fill: url(#${$color}-gradient-default);
-                  }
-                ` : Object.keys(NotificationsColorPalette).indexOf($color) !== -1 ? css`
-                  &,
-                  .redsift-icon:not(.colored) {
-                    color: var(--redsift-color-notifications-${$color}-primary);
-                  }
-                ` : Object.keys(NeutralColorPalette).indexOf($color) !== -1 ? css`
-                  &,
-                  .redsift-icon:not(.colored) {
-                    color: var(--redsift-color-neutral-${$color});
-                  }
-                ` : Object.keys(ProductColorPalette).indexOf($color) !== -1 ? css`
-                  &,
-                  .redsift-icon:not(.colored) {
-                    color: var(--redsift-color-product-${$color});
-                  }
-                ` : css`
-                  &,
-                  .redsift-icon:not(.colored) {
-                    color: ${$color || css`var(--redsift-color-${$theme}-components-text-primary)`};
-                  }
-                `}}
-
-          ${$color && $color === 'radar' && !$hasIcons ? css`
-                  position: relative;
-
-                  &:hover,
-                  &:focus-visible {
-                    cursor: pointer !important;
-                  }
-
-                  &:hover::before,
-                  &:focus-visible::before {
-                    content: '';
-                    position: absolute;
-                    bottom: 3px;
-                    width: 100%;
-                    left: 0;
-                    height: 1px;
-                    background: linear-gradient(90deg, #51b78e 0%, #0081c3 100%);
-                  }
-                ` : $color && $color === 'radar' && $hasIcons ? css`
-                  position: relative;
-
-                  &:hover,
-                  &:focus-visible {
-                    cursor: pointer !important;
-                  }
-
-                  .text::before {
-                    content: '';
-                    position: absolute;
-                    bottom: 3px;
-                    width: 100%;
-                    left: 0;
-                    height: 1px;
-                    background: linear-gradient(90deg, #51b78e 0%, #0081c3 100%);
-                    transform: scaleX(0);
-                  }
-
-                  &:hover .text::before,
-                  .icon:hover + .text::before,
-                  .text:hover::before {
-                    transform: scaleX(1);
-                  }
-                ` : css`
-                  text-decoration: underline;
-                  text-decoration-color: transparent;
-                  text-underline-offset: 2px;
-
-                  &:hover,
-                  &:focus-visible {
-                    cursor: pointer !important;
-                    ${Object.keys(NotificationsColorPalette).indexOf($color) !== -1 ? css`
-                          text-decoration-color: var(--redsift-color-notifications-${$color}-primary);
-                        ` : Object.keys(NeutralColorPalette).indexOf($color) !== -1 ? css`
-                          text-decoration-color: var(--redsift-color-neutral-${$color});
-                        ` : Object.keys(ProductColorPalette).indexOf($color) !== -1 ? css`
-                          text-decoration-color: var(--redsift-color-product-${$color});
-                        ` : css`
-                          text-decoration-color: ${$color || css`var(--redsift-color-${$theme}-components-text-primary)`};
-                        `}
-                  }
-                `}
+  return $isLoading ? css`
+          & > .redsift-shield {
+            position: relative;
+          }
         ` : '';
 }}
-
-  &:focus-visible {
-    outline: 2px solid var(--redsift-color-primary-n);
-  }
 `;
 
-export { StyledLink as S };
+export { IconButtonVariant as I, StyledIconButton as S };
 //# sourceMappingURL=styles3.js.map