@redsift/design-system 11.9.4 → 12.0.0-muiv5

package/_internal/Pill2.js

@@ -3,8 +3,9 @@ import React__default, { forwardRef } from 'react';
 import classNames from 'classnames';
 import styled, { css } from 'styled-components';
 import { rn as RedsiftColorNeutralWhite, qI as RedsiftColorGreyL1, ru as RedsiftColorNeutralBlack, rp as RedsiftColorNeutralLightGrey, sg as RedsiftColorPresentationGreenDefault, sn as RedsiftColorPresentationPinkDefault, su as RedsiftColorPresentationAquaDefault, sB as RedsiftColorPresentationBrownDefault, sI as RedsiftColorPresentationRedDefault, sP as RedsiftColorPresentationYellowDefault, sW as RedsiftColorPresentationPurpleDefault, t1 as RedsiftColorPresentationOrangeDefault, t8 as RedsiftColorPresentationBlueDefault, tf as RedsiftColorPresentationGreyDefault, rt as RedsiftColorNeutralXDarkGrey, rs as RedsiftColorNeutralDarkGrey, rr as RedsiftColorNeutralMidGrey, ro as RedsiftColorNeutralXLightGrey, qd as RedsiftColorRedL4, qY as RedsiftColorYellowL4, qP as RedsiftColorGreenL4, qh as RedsiftColorRedN, r0 as RedsiftColorYellowN, qT as RedsiftColorGreenN } from './redsift-design-tokens.js';
-import { i as baseStyling } from './styles4.js';
+import { i as baseStyling } from './styles5.js';
 import { N as Number } from './Number2.js';
+import { f as getStylingTransientProps } from './styles.js';
 import { u as useTheme } from './useTheme.js';
 import { f as PresentationColorPalette } from './colors.js';
 import { i as isComponent } from './isComponent.js';
@@ -329,6 +330,10 @@ const CLASSNAME = 'redsift-pill';
  * The Pill component.
  */
 const Pill = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    transientProps,
+    otherProps
+  } = getStylingTransientProps(props);
   const {
       autoBreak,
       borderColor,
@@ -340,8 +345,8 @@ const Pill = /*#__PURE__*/forwardRef((props, ref) => {
       isDisabled,
       size: propsSize,
       theme: propsTheme
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded);
   const theme = useTheme(propsTheme);
   const color = propsColor || PresentationColorPalette.blue;
   const size = propsSize || PillSize.large;
@@ -385,7 +390,7 @@ const Pill = /*#__PURE__*/forwardRef((props, ref) => {
       childArray.push(child);
     }
   });
-  return /*#__PURE__*/React__default.createElement(StyledPill, _extends({}, forwardedProps, {
+  return /*#__PURE__*/React__default.createElement(StyledPill, _extends({}, forwardedProps, transientProps, {
     $autoBreak: autoBreak,
     $borderColor: borderColor,
     $color: color,

package/_internal/Pill2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pill2.js","sources":["../../src/components/pill/types.ts","../../src/components/pill/styles.ts","../../src/components/pill/Pill.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { NeutralColorPalette, PresentationColorPalette, Theme, ValueOf } from '../../types';\nimport { StylingProps } from '../../types';\n\n/**\n * Component size.\n */\nexport const PillSize = {\n  small: 'small',\n  large: 'large',\n  xlarge: 'xlarge',\n} as const;\nexport type PillSize = ValueOf<typeof PillSize>;\n\n/**\n * Component props.\n */\nexport interface PillProps extends ComponentProps<'div'>, StylingProps {\n  /** Whether the badge should automatically break content. */\n  autoBreak?: boolean;\n  /** Color to use for border. */\n  borderColor?: string;\n  /** Color variant. The product colors are available but should only be used to display the Pill in the color of another product. To display a Pill with a color of the current product, use `default`. */\n  color?:\n    | PresentationColorPalette\n    | NeutralColorPalette\n    | 'error'\n    | 'warning'\n    | 'success'\n    | 'error-dark'\n    | 'warning-dark'\n    | 'success-dark'\n    | (string & {});\n  /** Color to use when disabled. */\n  disabledColor?: string;\n  /** Color to use on hover. */\n  hoverColor?: string;\n  /** Whether the Pill is disabled or not. */\n  isDisabled?: boolean;\n  /** Size of the Pill. */\n  size?: PillSize;\n  /** Theme. */\n  theme?: Theme;\n}\n\nexport type StyledPillProps = Omit<PillProps, 'color' | 'autoBreak'> & {\n  $autoBreak: PillProps['autoBreak'];\n  $borderColor: PillProps['borderColor'];\n  $color: PillProps['color'];\n  $disabledColor: PillProps['disabledColor'];\n  $hoverColor: PillProps['hoverColor'];\n  $isDisabled: PillProps['isDisabled'];\n  $size: PillProps['size'];\n  $theme: PillProps['theme'];\n};\n","import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { PillSize, StyledPillProps } from './types';\nimport {\n  RedsiftColorGreenL4,\n  RedsiftColorGreenN,\n  RedsiftColorGreyL1,\n  RedsiftColorNeutralBlack,\n  RedsiftColorNeutralDarkGrey,\n  RedsiftColorNeutralLightGrey,\n  RedsiftColorNeutralMidGrey,\n  RedsiftColorNeutralWhite,\n  RedsiftColorNeutralXDarkGrey,\n  RedsiftColorNeutralXLightGrey,\n  RedsiftColorPresentationAquaDefault,\n  RedsiftColorPresentationBlueDefault,\n  RedsiftColorPresentationBrownDefault,\n  RedsiftColorPresentationGreenDefault,\n  RedsiftColorPresentationGreyDefault,\n  RedsiftColorPresentationOrangeDefault,\n  RedsiftColorPresentationPinkDefault,\n  RedsiftColorPresentationPurpleDefault,\n  RedsiftColorPresentationRedDefault,\n  RedsiftColorPresentationYellowDefault,\n  RedsiftColorRedL4,\n  RedsiftColorRedN,\n  RedsiftColorYellowL4,\n  RedsiftColorYellowN,\n} from '../../utils';\n\nconst predefinedColorToHex: Record<string, string> = {\n  green: RedsiftColorPresentationGreenDefault,\n  pink: RedsiftColorPresentationPinkDefault,\n  aqua: RedsiftColorPresentationAquaDefault,\n  brown: RedsiftColorPresentationBrownDefault,\n  red: RedsiftColorPresentationRedDefault,\n  yellow: RedsiftColorPresentationYellowDefault,\n  purple: RedsiftColorPresentationPurpleDefault,\n  orange: RedsiftColorPresentationOrangeDefault,\n  blue: RedsiftColorPresentationBlueDefault,\n  grey: RedsiftColorPresentationGreyDefault,\n  black: RedsiftColorNeutralBlack,\n  'x-dark-grey': RedsiftColorNeutralXDarkGrey,\n  'dark-grey': RedsiftColorNeutralDarkGrey,\n  'mid-grey': RedsiftColorNeutralMidGrey,\n  'light-grey': RedsiftColorNeutralLightGrey,\n  'x-light-grey': RedsiftColorNeutralXLightGrey,\n  white: RedsiftColorNeutralWhite,\n  error: RedsiftColorRedL4,\n  warning: RedsiftColorYellowL4,\n  success: RedsiftColorGreenL4,\n  'error-dark': RedsiftColorRedN,\n  'warning-dark': RedsiftColorYellowN,\n  'success-dark': RedsiftColorGreenN,\n};\n\nexport const pickTextColorBasedOnBgColorAdvanced = (bgColor: string, lightColor: string, darkColor: string) => {\n  var color = isPredefinedColor(bgColor)\n    ? predefinedColorToHex[bgColor].substring(1, 7)\n    : bgColor.charAt(0) === '#'\n    ? bgColor.substring(1, 7)\n    : bgColor;\n  var r = parseInt(color.substring(0, 2), 16); // hexToR\n  var g = parseInt(color.substring(2, 4), 16); // hexToG\n  var b = parseInt(color.substring(4, 6), 16); // hexToB\n  var uicolors = [r / 255, g / 255, b / 255];\n  var c = uicolors.map((col) => {\n    if (col <= 0.03928) {\n      return col / 12.92;\n    }\n    return Math.pow((col + 0.055) / 1.055, 2.4);\n  });\n  var L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];\n  return L > 0.179 ? darkColor : lightColor;\n};\n\nexport const pickHoverColorBasedOnBgColorAdvanced = (bgColor: string) => {\n  var color = bgColor.charAt(0) === '#' ? bgColor.substring(1, 7) : bgColor;\n  if (color.toUpperCase() === 'FFFFFF') {\n    return RedsiftColorNeutralLightGrey;\n  }\n  var r = parseInt(color.substring(0, 2), 16); // hexToR\n  var g = parseInt(color.substring(2, 4), 16); // hexToG\n  var b = parseInt(color.substring(4, 6), 16); // hexToB\n  return `rgba(${r}, ${g}, ${b}, 0.75)`;\n};\n\nconst isPredefinedColor = (color: string) => Object.keys(predefinedColorToHex).includes(color);\n\n/**\n * Component style.\n */\nexport const StyledPill = styled.div<StyledPillProps>`\n  align-items: stretch;\n  display: inline-flex;\n  height: fit-content;\n  width: fit-content;\n  ${baseStyling}\n\n  text-align: center;\n\n  ${({ $autoBreak }) =>\n    !$autoBreak\n      ? css`\n          text-wrap: nowrap;\n        `\n      : css`\n          word-break: break-word;\n        `};\n\n  ${({ $size }) => css`\n    .redsift-icon-button,\n    .redsift-button,\n    .redsift-button-link {\n      width: unset;\n      height: ${$size === PillSize.xlarge ? css`30px` : $size === PillSize.large ? css`24px` : css`22px`};\n      cursor: pointer;\n      padding: 5px;\n      border: none;\n      text-transform: none;\n\n      font-size: ${$size === PillSize.small ? css`14px` : css`15px`};\n\n      > .redsift-icon:not(.colored) {\n        color: inherit;\n      }\n    }\n\n    .redsift-icon-button {\n      width: ${$size === PillSize.xlarge ? css`30px` : $size === PillSize.large ? css`24px` : css`22px`};\n    }\n\n    .redsift-button-link {\n      height: ${$size === PillSize.xlarge ? css`18px` : $size === PillSize.large ? css`12px` : css`10px`};\n    }\n\n    .first.redsift-text,\n    .first.redsift-number,\n    .middle.redsift-text,\n    .middle.redsift-number,\n    .last.redsift-text,\n    .last.redsift-number {\n      padding: 0 8px;\n    }\n  `}\n\n  ${({ $color, $hoverColor, $isDisabled, $theme }) =>\n    isPredefinedColor($color!)\n      ? css`\n          .first,\n          .middle,\n          .last {\n            background-color: var(\n              --redsift-color-${$theme}-components-pills-${$color}-${$isDisabled ? 'disabled' : 'default'}-background\n            );\n          }\n\n          & {\n            color: var(\n              --redsift-color-${$theme}-components-pills-${$color}-${$isDisabled ? 'disabled' : 'default'}-text\n            );\n          }\n\n          .redsift-icon-button:hover,\n          .redsift-button:hover,\n          .redsift-button-link:hover {\n            background-color: var(\n              --redsift-color-${$theme}-components-pills-${$color}-${$isDisabled ? 'disabled' : 'hover'}-background\n            );\n          }\n        `\n      : css`\n          .first,\n          .middle,\n          .last {\n            background-color: ${$color ?? RedsiftColorNeutralWhite};\n          }\n\n          & {\n            color: ${pickTextColorBasedOnBgColorAdvanced(\n              $color ?? RedsiftColorNeutralWhite,\n              $isDisabled ? RedsiftColorNeutralLightGrey : RedsiftColorNeutralWhite,\n              $isDisabled ? RedsiftColorGreyL1 : RedsiftColorNeutralBlack\n            )};\n          }\n\n          .redsift-icon-button:hover,\n          .redsift-button:hover,\n          .redsift-button-link:hover {\n            background-color: ${$hoverColor ??\n            pickHoverColorBasedOnBgColorAdvanced($color ?? RedsiftColorNeutralWhite)};\n          }\n        `};\n\n  ${({ $color, $borderColor, $isDisabled, $theme }) => css`\n    .first:not(.last) {\n      border-top-left-radius: 2px;\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n      border-bottom-left-radius: 2px;\n\n      ${$borderColor\n        ? css`\n            border: 1px solid ${$borderColor};\n          `\n        : $color === 'white'\n        ? css`\n            border: 1px solid\n              var(--redsift-color-${$theme}-components-pills-${$color}-${$isDisabled ? 'disabled' : 'default'}-border);\n          `\n        : css`\n            border: 1px solid transparent;\n            border-right: 1px solid white;\n          `}\n    }\n\n    .middle {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n      border-bottom-left-radius: 0;\n\n      ${$borderColor\n        ? css`\n            border: 1px solid ${$borderColor};\n          `\n        : $color === 'white'\n        ? css`\n            border: 1px solid\n              var(--redsift-color-${$theme}-components-pills-${$color}-${$isDisabled ? 'disabled' : 'default'}-border);\n          `\n        : css`\n            border: 1px solid transparent;\n            border-right: 1px solid white;\n          `}\n      border-left: none;\n    }\n\n    .last:not(.first) {\n      border-top-left-radius: 0;\n      border-top-right-radius: 2px;\n      border-bottom-right-radius: 2px;\n      border-bottom-left-radius: 0;\n\n      ${$borderColor\n        ? css`\n            border: 1px solid ${$borderColor};\n          `\n        : $color === 'white'\n        ? css`\n            border: 1px solid\n              var(--redsift-color-${$theme}-components-pills-${$color}-${$isDisabled ? 'disabled' : 'default'}-border);\n          `\n        : css`\n            border: 1px solid transparent;\n          `}\n      border-left: none;\n    }\n\n    .first.last {\n      border-top-left-radius: 2px;\n      border-top-right-radius: 2px;\n      border-bottom-right-radius: 2px;\n      border-bottom-left-radius: 2px;\n\n      ${$borderColor\n        ? css`\n            border: 1px solid ${$borderColor};\n          `\n        : $color === 'white'\n        ? css`\n            border: 1px solid\n              var(--redsift-color-${$theme}-components-pills-${$color}-${$isDisabled ? 'disabled' : 'default'}-border);\n          `\n        : css`\n            border: 1px solid transparent;\n          `}\n    }\n  `};\n\n  .redsift-icon {\n    font-size: ${({ $size }) => ($size === PillSize.xlarge ? '15px' : $size === PillSize.large ? '12px' : '12px')};\n  }\n\n  &,\n  .redsift-text,\n  .redsift-number,\n  .first,\n  .middle,\n  .last {\n    font-family: var(--redsift-typography-pill-font-family);\n    font-size: ${({ $size }) => ($size === PillSize.xlarge ? '15px' : $size === PillSize.large ? '12px' : '10px')};\n    font-weight: var(--redsift-typography-pill-font-weight);\n    line-height: ${({ $size }) =>\n      $size === PillSize.xlarge\n        ? '28px'\n        : $size === PillSize.large\n        ? css`var(--redsift-typography-chip-line-height)`\n        : css`var(--redsift-typography-pill-line-height)`};\n  }\n\n  .redsift-icon:not(.colored) {\n    color: inherit;\n  }\n\n  .redsift-icon {\n    width: ${({ $size }) => ($size === PillSize.xlarge ? '17px' : $size === PillSize.large ? '14px' : '12px')};\n    height: ${({ $size }) => ($size === PillSize.xlarge ? '17px' : $size === PillSize.large ? '14px' : '12px')};\n\n    > svg {\n      width: 1em;\n      height: 1em;\n    }\n  }\n`;\n","import React, { forwardRef, ReactNode, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp, PresentationColorPalette } from '../../types';\nimport { pickTextColorBasedOnBgColorAdvanced, StyledPill } from './styles';\nimport { PillProps, PillSize } from './types';\nimport { useTheme } from '../theme';\nimport { Text } from '../text';\nimport { Number } from '../number';\nimport { isComponent } from '../../utils';\n\nconst COMPONENT_NAME = 'Pill';\nconst CLASSNAME = 'redsift-pill';\n\n/**\n * The Pill component.\n */\nexport const Pill: Comp<PillProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    autoBreak,\n    borderColor,\n    children,\n    className,\n    color: propsColor,\n    disabledColor,\n    hoverColor,\n    isDisabled,\n    size: propsSize,\n    theme: propsTheme,\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme(propsTheme);\n  const color = propsColor || PresentationColorPalette.blue;\n  const size = propsSize || PillSize.large;\n\n  const childArray: ReactNode[] = [];\n  React.Children.forEach(children, (child, index) => {\n    const currentClassName =\n      React.Children.count(children) === 1\n        ? 'first last'\n        : index === 0\n        ? 'first'\n        : index === React.Children.count(children) - 1\n        ? 'last'\n        : 'middle';\n\n    if (\n      isComponent('MenuButton')(child) ||\n      isComponent('Select')(child) ||\n      isComponent('Dialog')(child) ||\n      isComponent('Popover')(child) ||\n      isComponent('Tooltip')(child) ||\n      isComponent('Toggletip')(child)\n    ) {\n      childArray.push(\n        React.cloneElement(child, {\n          key: child.key ?? index,\n          triggerClassName: currentClassName,\n          variant: 'unstyled',\n          color: child.props.color ? child.props.color : pickTextColorBasedOnBgColorAdvanced(color, 'white', 'black'),\n        })\n      );\n    } else if (isComponent('IconButton')(child) || isComponent('Button')(child) || isComponent('ButtonLink')(child)) {\n      childArray.push(\n        React.cloneElement(child, {\n          key: (child as React.ReactElement<any, string | React.JSXElementConstructor<any>>).key ?? index,\n          className: currentClassName,\n          variant: 'unstyled',\n          color: child.props.color ? child.props.color : pickTextColorBasedOnBgColorAdvanced(color, 'white', 'black'),\n        })\n      );\n    } else if (React.isValidElement(child)) {\n      childArray.push(\n        React.cloneElement(child, {\n          key: (child as React.ReactElement<any, string | React.JSXElementConstructor<any>>).key ?? index,\n          className: currentClassName,\n        } as any)\n      );\n    } else if (typeof child === 'string') {\n      childArray.push(\n        <Text key={index} className={currentClassName}>\n          {child}\n        </Text>\n      );\n    } else if (typeof child === 'number') {\n      childArray.push(<Number key={index} className={currentClassName} value={child} />);\n    } else {\n      childArray.push(child);\n    }\n  });\n\n  return (\n    <StyledPill\n      {...forwardedProps}\n      $autoBreak={autoBreak}\n      $borderColor={borderColor}\n      $color={color}\n      $disabledColor={disabledColor}\n      $hoverColor={hoverColor}\n      $isDisabled={isDisabled}\n      $size={size}\n      $theme={theme}\n      className={classNames(Pill.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n    >\n      {childArray}\n    </StyledPill>\n  );\n});\nPill.className = CLASSNAME;\nPill.displayName = COMPONENT_NAME;\n"],"names":["PillSize","small","large","xlarge","predefinedColorToHex","green","RedsiftColorPresentationGreenDefault","pink","RedsiftColorPresentationPinkDefault","aqua","RedsiftColorPresentationAquaDefault","brown","RedsiftColorPresentationBrownDefault","red","RedsiftColorPresentationRedDefault","yellow","RedsiftColorPresentationYellowDefault","purple","RedsiftColorPresentationPurpleDefault","orange","RedsiftColorPresentationOrangeDefault","blue","RedsiftColorPresentationBlueDefault","grey","RedsiftColorPresentationGreyDefault","black","RedsiftColorNeutralBlack","RedsiftColorNeutralXDarkGrey","RedsiftColorNeutralDarkGrey","RedsiftColorNeutralMidGrey","RedsiftColorNeutralLightGrey","RedsiftColorNeutralXLightGrey","white","RedsiftColorNeutralWhite","error","RedsiftColorRedL4","warning","RedsiftColorYellowL4","success","RedsiftColorGreenL4","RedsiftColorRedN","RedsiftColorYellowN","RedsiftColorGreenN","pickTextColorBasedOnBgColorAdvanced","bgColor","lightColor","darkColor","color","isPredefinedColor","substring","charAt","r","parseInt","g","b","uicolors","c","map","col","Math","pow","L","pickHoverColorBasedOnBgColorAdvanced","toUpperCase","Object","keys","includes","StyledPill","styled","div","baseStyling","_ref","$autoBreak","css","_ref2","$size","_ref3","$color","$hoverColor","$isDisabled","$theme","RedsiftColorGreyL1","_ref4","$borderColor","_ref5","_ref6","_ref7","_ref8","_ref9","COMPONENT_NAME","CLASSNAME","Pill","forwardRef","props","ref","autoBreak","borderColor","children","className","propsColor","disabledColor","hoverColor","isDisabled","size","propsSize","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","useTheme","PresentationColorPalette","childArray","React","Children","forEach","child","index","currentClassName","count","isComponent","_child$key","push","cloneElement","key","triggerClassName","variant","_key","isValidElement","_key2","createElement","Text","Number","value","_extends","$disabledColor","classNames","displayName"],"mappings":"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"}
+{"version":3,"file":"Pill2.js","sources":["../../src/components/pill/types.ts","../../src/components/pill/styles.ts","../../src/components/pill/Pill.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { NeutralColorPalette, PresentationColorPalette, Theme, ValueOf } from '../../types';\nimport { StylingProps, StylingTransientProps } from '../../types';\n\n/**\n * Component size.\n */\nexport const PillSize = {\n  small: 'small',\n  large: 'large',\n  xlarge: 'xlarge',\n} as const;\nexport type PillSize = ValueOf<typeof PillSize>;\n\n/**\n * Component props.\n */\nexport interface PillProps extends ComponentProps<'div'>, StylingProps {\n  /** Whether the badge should automatically break content. */\n  autoBreak?: boolean;\n  /** Color to use for border. */\n  borderColor?: string;\n  /** Color variant. The product colors are available but should only be used to display the Pill in the color of another product. To display a Pill with a color of the current product, use `default`. */\n  color?:\n    | PresentationColorPalette\n    | NeutralColorPalette\n    | 'error'\n    | 'warning'\n    | 'success'\n    | 'error-dark'\n    | 'warning-dark'\n    | 'success-dark'\n    | (string & {});\n  /** Color to use when disabled. */\n  disabledColor?: string;\n  /** Color to use on hover. */\n  hoverColor?: string;\n  /** Whether the Pill is disabled or not. */\n  isDisabled?: boolean;\n  /** Size of the Pill. */\n  size?: PillSize;\n  /** Theme. */\n  theme?: Theme;\n}\n\nexport interface StyledPillProps extends ComponentProps<'div'>, StylingTransientProps {\n  $autoBreak: PillProps['autoBreak'];\n  $borderColor: PillProps['borderColor'];\n  $color: PillProps['color'];\n  $disabledColor: PillProps['disabledColor'];\n  $hoverColor: PillProps['hoverColor'];\n  $isDisabled: PillProps['isDisabled'];\n  $size: PillProps['size'];\n  $theme: PillProps['theme'];\n}\n","import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { PillSize, StyledPillProps } from './types';\nimport {\n  RedsiftColorGreenL4,\n  RedsiftColorGreenN,\n  RedsiftColorGreyL1,\n  RedsiftColorNeutralBlack,\n  RedsiftColorNeutralDarkGrey,\n  RedsiftColorNeutralLightGrey,\n  RedsiftColorNeutralMidGrey,\n  RedsiftColorNeutralWhite,\n  RedsiftColorNeutralXDarkGrey,\n  RedsiftColorNeutralXLightGrey,\n  RedsiftColorPresentationAquaDefault,\n  RedsiftColorPresentationBlueDefault,\n  RedsiftColorPresentationBrownDefault,\n  RedsiftColorPresentationGreenDefault,\n  RedsiftColorPresentationGreyDefault,\n  RedsiftColorPresentationOrangeDefault,\n  RedsiftColorPresentationPinkDefault,\n  RedsiftColorPresentationPurpleDefault,\n  RedsiftColorPresentationRedDefault,\n  RedsiftColorPresentationYellowDefault,\n  RedsiftColorRedL4,\n  RedsiftColorRedN,\n  RedsiftColorYellowL4,\n  RedsiftColorYellowN,\n} from '../../utils';\n\nconst predefinedColorToHex: Record<string, string> = {\n  green: RedsiftColorPresentationGreenDefault,\n  pink: RedsiftColorPresentationPinkDefault,\n  aqua: RedsiftColorPresentationAquaDefault,\n  brown: RedsiftColorPresentationBrownDefault,\n  red: RedsiftColorPresentationRedDefault,\n  yellow: RedsiftColorPresentationYellowDefault,\n  purple: RedsiftColorPresentationPurpleDefault,\n  orange: RedsiftColorPresentationOrangeDefault,\n  blue: RedsiftColorPresentationBlueDefault,\n  grey: RedsiftColorPresentationGreyDefault,\n  black: RedsiftColorNeutralBlack,\n  'x-dark-grey': RedsiftColorNeutralXDarkGrey,\n  'dark-grey': RedsiftColorNeutralDarkGrey,\n  'mid-grey': RedsiftColorNeutralMidGrey,\n  'light-grey': RedsiftColorNeutralLightGrey,\n  'x-light-grey': RedsiftColorNeutralXLightGrey,\n  white: RedsiftColorNeutralWhite,\n  error: RedsiftColorRedL4,\n  warning: RedsiftColorYellowL4,\n  success: RedsiftColorGreenL4,\n  'error-dark': RedsiftColorRedN,\n  'warning-dark': RedsiftColorYellowN,\n  'success-dark': RedsiftColorGreenN,\n};\n\nexport const pickTextColorBasedOnBgColorAdvanced = (bgColor: string, lightColor: string, darkColor: string) => {\n  var color = isPredefinedColor(bgColor)\n    ? predefinedColorToHex[bgColor].substring(1, 7)\n    : bgColor.charAt(0) === '#'\n    ? bgColor.substring(1, 7)\n    : bgColor;\n  var r = parseInt(color.substring(0, 2), 16); // hexToR\n  var g = parseInt(color.substring(2, 4), 16); // hexToG\n  var b = parseInt(color.substring(4, 6), 16); // hexToB\n  var uicolors = [r / 255, g / 255, b / 255];\n  var c = uicolors.map((col) => {\n    if (col <= 0.03928) {\n      return col / 12.92;\n    }\n    return Math.pow((col + 0.055) / 1.055, 2.4);\n  });\n  var L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];\n  return L > 0.179 ? darkColor : lightColor;\n};\n\nexport const pickHoverColorBasedOnBgColorAdvanced = (bgColor: string) => {\n  var color = bgColor.charAt(0) === '#' ? bgColor.substring(1, 7) : bgColor;\n  if (color.toUpperCase() === 'FFFFFF') {\n    return RedsiftColorNeutralLightGrey;\n  }\n  var r = parseInt(color.substring(0, 2), 16); // hexToR\n  var g = parseInt(color.substring(2, 4), 16); // hexToG\n  var b = parseInt(color.substring(4, 6), 16); // hexToB\n  return `rgba(${r}, ${g}, ${b}, 0.75)`;\n};\n\nconst isPredefinedColor = (color: string) => Object.keys(predefinedColorToHex).includes(color);\n\n/**\n * Component style.\n */\nexport const StyledPill = styled.div<StyledPillProps>`\n  align-items: stretch;\n  display: inline-flex;\n  height: fit-content;\n  width: fit-content;\n  ${baseStyling}\n\n  text-align: center;\n\n  ${({ $autoBreak }) =>\n    !$autoBreak\n      ? css`\n          text-wrap: nowrap;\n        `\n      : css`\n          word-break: break-word;\n        `};\n\n  ${({ $size }) => css`\n    .redsift-icon-button,\n    .redsift-button,\n    .redsift-button-link {\n      width: unset;\n      height: ${$size === PillSize.xlarge ? css`30px` : $size === PillSize.large ? css`24px` : css`22px`};\n      cursor: pointer;\n      padding: 5px;\n      border: none;\n      text-transform: none;\n\n      font-size: ${$size === PillSize.small ? css`14px` : css`15px`};\n\n      > .redsift-icon:not(.colored) {\n        color: inherit;\n      }\n    }\n\n    .redsift-icon-button {\n      width: ${$size === PillSize.xlarge ? css`30px` : $size === PillSize.large ? css`24px` : css`22px`};\n    }\n\n    .redsift-button-link {\n      height: ${$size === PillSize.xlarge ? css`18px` : $size === PillSize.large ? css`12px` : css`10px`};\n    }\n\n    .first.redsift-text,\n    .first.redsift-number,\n    .middle.redsift-text,\n    .middle.redsift-number,\n    .last.redsift-text,\n    .last.redsift-number {\n      padding: 0 8px;\n    }\n  `}\n\n  ${({ $color, $hoverColor, $isDisabled, $theme }) =>\n    isPredefinedColor($color!)\n      ? css`\n          .first,\n          .middle,\n          .last {\n            background-color: var(\n              --redsift-color-${$theme}-components-pills-${$color}-${$isDisabled ? 'disabled' : 'default'}-background\n            );\n          }\n\n          & {\n            color: var(\n              --redsift-color-${$theme}-components-pills-${$color}-${$isDisabled ? 'disabled' : 'default'}-text\n            );\n          }\n\n          .redsift-icon-button:hover,\n          .redsift-button:hover,\n          .redsift-button-link:hover {\n            background-color: var(\n              --redsift-color-${$theme}-components-pills-${$color}-${$isDisabled ? 'disabled' : 'hover'}-background\n            );\n          }\n        `\n      : css`\n          .first,\n          .middle,\n          .last {\n            background-color: ${$color ?? RedsiftColorNeutralWhite};\n          }\n\n          & {\n            color: ${pickTextColorBasedOnBgColorAdvanced(\n              $color ?? RedsiftColorNeutralWhite,\n              $isDisabled ? RedsiftColorNeutralLightGrey : RedsiftColorNeutralWhite,\n              $isDisabled ? RedsiftColorGreyL1 : RedsiftColorNeutralBlack\n            )};\n          }\n\n          .redsift-icon-button:hover,\n          .redsift-button:hover,\n          .redsift-button-link:hover {\n            background-color: ${$hoverColor ??\n            pickHoverColorBasedOnBgColorAdvanced($color ?? RedsiftColorNeutralWhite)};\n          }\n        `};\n\n  ${({ $color, $borderColor, $isDisabled, $theme }) => css`\n    .first:not(.last) {\n      border-top-left-radius: 2px;\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n      border-bottom-left-radius: 2px;\n\n      ${$borderColor\n        ? css`\n            border: 1px solid ${$borderColor};\n          `\n        : $color === 'white'\n        ? css`\n            border: 1px solid\n              var(--redsift-color-${$theme}-components-pills-${$color}-${$isDisabled ? 'disabled' : 'default'}-border);\n          `\n        : css`\n            border: 1px solid transparent;\n            border-right: 1px solid white;\n          `}\n    }\n\n    .middle {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n      border-bottom-left-radius: 0;\n\n      ${$borderColor\n        ? css`\n            border: 1px solid ${$borderColor};\n          `\n        : $color === 'white'\n        ? css`\n            border: 1px solid\n              var(--redsift-color-${$theme}-components-pills-${$color}-${$isDisabled ? 'disabled' : 'default'}-border);\n          `\n        : css`\n            border: 1px solid transparent;\n            border-right: 1px solid white;\n          `}\n      border-left: none;\n    }\n\n    .last:not(.first) {\n      border-top-left-radius: 0;\n      border-top-right-radius: 2px;\n      border-bottom-right-radius: 2px;\n      border-bottom-left-radius: 0;\n\n      ${$borderColor\n        ? css`\n            border: 1px solid ${$borderColor};\n          `\n        : $color === 'white'\n        ? css`\n            border: 1px solid\n              var(--redsift-color-${$theme}-components-pills-${$color}-${$isDisabled ? 'disabled' : 'default'}-border);\n          `\n        : css`\n            border: 1px solid transparent;\n          `}\n      border-left: none;\n    }\n\n    .first.last {\n      border-top-left-radius: 2px;\n      border-top-right-radius: 2px;\n      border-bottom-right-radius: 2px;\n      border-bottom-left-radius: 2px;\n\n      ${$borderColor\n        ? css`\n            border: 1px solid ${$borderColor};\n          `\n        : $color === 'white'\n        ? css`\n            border: 1px solid\n              var(--redsift-color-${$theme}-components-pills-${$color}-${$isDisabled ? 'disabled' : 'default'}-border);\n          `\n        : css`\n            border: 1px solid transparent;\n          `}\n    }\n  `};\n\n  .redsift-icon {\n    font-size: ${({ $size }) => ($size === PillSize.xlarge ? '15px' : $size === PillSize.large ? '12px' : '12px')};\n  }\n\n  &,\n  .redsift-text,\n  .redsift-number,\n  .first,\n  .middle,\n  .last {\n    font-family: var(--redsift-typography-pill-font-family);\n    font-size: ${({ $size }) => ($size === PillSize.xlarge ? '15px' : $size === PillSize.large ? '12px' : '10px')};\n    font-weight: var(--redsift-typography-pill-font-weight);\n    line-height: ${({ $size }) =>\n      $size === PillSize.xlarge\n        ? '28px'\n        : $size === PillSize.large\n        ? css`var(--redsift-typography-chip-line-height)`\n        : css`var(--redsift-typography-pill-line-height)`};\n  }\n\n  .redsift-icon:not(.colored) {\n    color: inherit;\n  }\n\n  .redsift-icon {\n    width: ${({ $size }) => ($size === PillSize.xlarge ? '17px' : $size === PillSize.large ? '14px' : '12px')};\n    height: ${({ $size }) => ($size === PillSize.xlarge ? '17px' : $size === PillSize.large ? '14px' : '12px')};\n\n    > svg {\n      width: 1em;\n      height: 1em;\n    }\n  }\n`;\n","import React, { forwardRef, ReactNode, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp, PresentationColorPalette, getStylingTransientProps } from '../../types';\nimport { pickTextColorBasedOnBgColorAdvanced, StyledPill } from './styles';\nimport { PillProps, PillSize } from './types';\nimport { useTheme } from '../theme';\nimport { Text } from '../text';\nimport { Number } from '../number';\nimport { isComponent } from '../../utils';\n\nconst COMPONENT_NAME = 'Pill';\nconst CLASSNAME = 'redsift-pill';\n\n/**\n * The Pill component.\n */\nexport const Pill: Comp<PillProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { transientProps, otherProps } = getStylingTransientProps(props);\n\n  const {\n    autoBreak,\n    borderColor,\n    children,\n    className,\n    color: propsColor,\n    disabledColor,\n    hoverColor,\n    isDisabled,\n    size: propsSize,\n    theme: propsTheme,\n    ...forwardedProps\n  } = otherProps;\n\n  const theme = useTheme(propsTheme);\n  const color = propsColor || PresentationColorPalette.blue;\n  const size = propsSize || PillSize.large;\n\n  const childArray: ReactNode[] = [];\n  React.Children.forEach(children, (child, index) => {\n    const currentClassName =\n      React.Children.count(children) === 1\n        ? 'first last'\n        : index === 0\n        ? 'first'\n        : index === React.Children.count(children) - 1\n        ? 'last'\n        : 'middle';\n\n    if (\n      isComponent('MenuButton')(child) ||\n      isComponent('Select')(child) ||\n      isComponent('Dialog')(child) ||\n      isComponent('Popover')(child) ||\n      isComponent('Tooltip')(child) ||\n      isComponent('Toggletip')(child)\n    ) {\n      childArray.push(\n        React.cloneElement(child, {\n          key: child.key ?? index,\n          triggerClassName: currentClassName,\n          variant: 'unstyled',\n          color: child.props.color ? child.props.color : pickTextColorBasedOnBgColorAdvanced(color, 'white', 'black'),\n        })\n      );\n    } else if (isComponent('IconButton')(child) || isComponent('Button')(child) || isComponent('ButtonLink')(child)) {\n      childArray.push(\n        React.cloneElement(child, {\n          key: (child as React.ReactElement<any, string | React.JSXElementConstructor<any>>).key ?? index,\n          className: currentClassName,\n          variant: 'unstyled',\n          color: child.props.color ? child.props.color : pickTextColorBasedOnBgColorAdvanced(color, 'white', 'black'),\n        })\n      );\n    } else if (React.isValidElement(child)) {\n      childArray.push(\n        React.cloneElement(child, {\n          key: (child as React.ReactElement<any, string | React.JSXElementConstructor<any>>).key ?? index,\n          className: currentClassName,\n        } as any)\n      );\n    } else if (typeof child === 'string') {\n      childArray.push(\n        <Text key={index} className={currentClassName}>\n          {child}\n        </Text>\n      );\n    } else if (typeof child === 'number') {\n      childArray.push(<Number key={index} className={currentClassName} value={child} />);\n    } else {\n      childArray.push(child);\n    }\n  });\n\n  return (\n    <StyledPill\n      {...forwardedProps}\n      {...transientProps}\n      $autoBreak={autoBreak}\n      $borderColor={borderColor}\n      $color={color}\n      $disabledColor={disabledColor}\n      $hoverColor={hoverColor}\n      $isDisabled={isDisabled}\n      $size={size}\n      $theme={theme}\n      className={classNames(Pill.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n    >\n      {childArray}\n    </StyledPill>\n  );\n});\nPill.className = CLASSNAME;\nPill.displayName = COMPONENT_NAME;\n"],"names":["PillSize","small","large","xlarge","predefinedColorToHex","green","RedsiftColorPresentationGreenDefault","pink","RedsiftColorPresentationPinkDefault","aqua","RedsiftColorPresentationAquaDefault","brown","RedsiftColorPresentationBrownDefault","red","RedsiftColorPresentationRedDefault","yellow","RedsiftColorPresentationYellowDefault","purple","RedsiftColorPresentationPurpleDefault","orange","RedsiftColorPresentationOrangeDefault","blue","RedsiftColorPresentationBlueDefault","grey","RedsiftColorPresentationGreyDefault","black","RedsiftColorNeutralBlack","RedsiftColorNeutralXDarkGrey","RedsiftColorNeutralDarkGrey","RedsiftColorNeutralMidGrey","RedsiftColorNeutralLightGrey","RedsiftColorNeutralXLightGrey","white","RedsiftColorNeutralWhite","error","RedsiftColorRedL4","warning","RedsiftColorYellowL4","success","RedsiftColorGreenL4","RedsiftColorRedN","RedsiftColorYellowN","RedsiftColorGreenN","pickTextColorBasedOnBgColorAdvanced","bgColor","lightColor","darkColor","color","isPredefinedColor","substring","charAt","r","parseInt","g","b","uicolors","c","map","col","Math","pow","L","pickHoverColorBasedOnBgColorAdvanced","toUpperCase","Object","keys","includes","StyledPill","styled","div","baseStyling","_ref","$autoBreak","css","_ref2","$size","_ref3","$color","$hoverColor","$isDisabled","$theme","RedsiftColorGreyL1","_ref4","$borderColor","_ref5","_ref6","_ref7","_ref8","_ref9","COMPONENT_NAME","CLASSNAME","Pill","forwardRef","props","ref","transientProps","otherProps","getStylingTransientProps","autoBreak","borderColor","children","className","propsColor","disabledColor","hoverColor","isDisabled","size","propsSize","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","useTheme","PresentationColorPalette","childArray","React","Children","forEach","child","index","currentClassName","count","isComponent","_child$key","push","cloneElement","key","triggerClassName","variant","_key","isValidElement","_key2","createElement","Text","Number","value","_extends","$disabledColor","classNames","displayName"],"mappings":"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"}

package/_internal/ProgressBar.js

@@ -10,27 +10,27 @@ import { u as useTheme } from './useTheme.js';
 const StyledProgressBar = styled.progress`
   ${_ref => {
   let {
-    backgroundColor,
-    height,
-    progressColor,
-    width
+    $backgroundColor,
+    $height,
+    $progressColor,
+    $width
   } = _ref;
   return css`
     &[value] {
       // Target only state with a value
       -webkit-appearance: none;
       appearance: none;
-      height: ${height || '8px'};
-      width: ${width || '100%'};
+      height: ${$height || '8px'};
+      width: ${$width || '100%'};
       color: var(--redsift-color-presentation-red-default);
 
       &::-webkit-progress-bar {
-        background-color: ${backgroundColor || 'var(--redsift-color-neutral-x-light-grey)'};
+        background-color: ${$backgroundColor || 'var(--redsift-color-neutral-x-light-grey)'};
         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) inset;
       }
 
       &::-webkit-progress-value {
-        background-color: ${progressColor || 'var(--redsift-color-primary-n)'};
+        background-color: ${$progressColor || 'var(--redsift-color-primary-n)'};
         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) inset;
       }
     }
@@ -38,7 +38,7 @@ const StyledProgressBar = styled.progress`
 }}
 `;
 
-const _excluded = ["className", "theme", "value"];
+const _excluded = ["className", "theme", "value", "progressColor", "backgroundColor", "height", "width"];
 const COMPONENT_NAME = 'ProgressBar';
 const CLASSNAME = 'redsift-progress-bar';
 
@@ -49,7 +49,11 @@ const ProgressBar = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className,
       theme: propsTheme,
-      value
+      value,
+      progressColor,
+      backgroundColor,
+      height,
+      width
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded);
   const theme = useTheme(propsTheme);
@@ -59,7 +63,12 @@ const ProgressBar = /*#__PURE__*/forwardRef((props, ref) => {
     variant: "determinate",
     max: "100",
     value: value || 0,
-    theme: theme
+    theme: theme,
+    $progressColor: progressColor,
+    $backgroundColor: backgroundColor,
+    $height: height,
+    $theme: theme,
+    $width: width
   }));
 });
 ProgressBar.className = CLASSNAME;

package/_internal/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","sources":["../../src/components/progress-bar/styles.ts","../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { ProgressBarProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledProgressBar = styled.progress<ProgressBarProps>`\n  ${({ backgroundColor, height, progressColor, width }) => css`\n    &[value] {\n      // Target only state with a value\n      -webkit-appearance: none;\n      appearance: none;\n      height: ${height || '8px'};\n      width: ${width || '100%'};\n      color: var(--redsift-color-presentation-red-default);\n\n      &::-webkit-progress-bar {\n        background-color: ${backgroundColor || 'var(--redsift-color-neutral-x-light-grey)'};\n        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) inset;\n      }\n\n      &::-webkit-progress-value {\n        background-color: ${progressColor || 'var(--redsift-color-primary-n)'};\n        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) inset;\n      }\n    }\n  `}\n`;\n","import React, { forwardRef, MutableRefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { ProgressBarProps } from './types';\nimport { StyledProgressBar } from './styles';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'ProgressBar';\nconst CLASSNAME = 'redsift-progress-bar';\n\n/**\n * The Progress bar component.\n */\nexport const ProgressBar: Comp<ProgressBarProps, HTMLProgressElement> = forwardRef((props, ref) => {\n  const { className, theme: propsTheme, value, ...forwardedProps } = props;\n\n  const theme = useTheme(propsTheme);\n\n  return (\n    <StyledProgressBar\n      {...forwardedProps}\n      className={classNames(ProgressBar.className, className)}\n      ref={ref as MutableRefObject<HTMLProgressElement>}\n      variant=\"determinate\"\n      max=\"100\"\n      value={value || 0}\n      theme={theme}\n    />\n  );\n});\nProgressBar.className = CLASSNAME;\nProgressBar.displayName = COMPONENT_NAME;\n"],"names":["StyledProgressBar","styled","progress","_ref","backgroundColor","height","progressColor","width","css","COMPONENT_NAME","CLASSNAME","ProgressBar","forwardRef","props","ref","className","theme","propsTheme","value","forwardedProps","_objectWithoutProperties","_excluded","useTheme","React","createElement","_extends","classNames","variant","max","displayName"],"mappings":";;;;;;AAGA;AACA;AACA;AACO,MAAMA,iBAAiB,GAAGC,MAAM,CAACC,QAA2B,CAAA;AACnE,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;IAAEC,eAAe;IAAEC,MAAM;IAAEC,aAAa;AAAEC,IAAAA,KAAAA;AAAM,GAAC,GAAAJ,IAAA,CAAA;AAAA,EAAA,OAAKK,GAAI,CAAA;AAC/D;AACA;AACA;AACA;AACA,cAAgBH,EAAAA,MAAM,IAAI,KAAM,CAAA;AAChC,aAAeE,EAAAA,KAAK,IAAI,MAAO,CAAA;AAC/B;AACA;AACA;AACA,0BAA4BH,EAAAA,eAAe,IAAI,2CAA4C,CAAA;AAC3F;AACA;AACA;AACA;AACA,0BAA4BE,EAAAA,aAAa,IAAI,gCAAiC,CAAA;AAC9E;AACA;AACA;AACA,EAAG,CAAA,CAAA;AAAA,CAAC,CAAA;AACJ,CAAC;;;ACpBD,MAAMG,cAAc,GAAG,aAAa,CAAA;AACpC,MAAMC,SAAS,GAAG,sBAAsB,CAAA;;AAExC;AACA;AACA;AACO,MAAMC,WAAwD,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACjG,MAAM;MAAEC,SAAS;AAAEC,MAAAA,KAAK,EAAEC,UAAU;AAAEC,MAAAA,KAAAA;AAAyB,KAAC,GAAGL,KAAK;AAAxBM,IAAAA,cAAc,GAAAC,wBAAA,CAAKP,KAAK,EAAAQ,SAAA,CAAA,CAAA;AAExE,EAAA,MAAML,KAAK,GAAGM,QAAQ,CAACL,UAAU,CAAC,CAAA;EAElC,oBACEM,cAAA,CAAAC,aAAA,CAACxB,iBAAiB,EAAAyB,QAAA,KACZN,cAAc,EAAA;IAClBJ,SAAS,EAAEW,UAAU,CAACf,WAAW,CAACI,SAAS,EAAEA,SAAS,CAAE;AACxDD,IAAAA,GAAG,EAAEA,GAA6C;AAClDa,IAAAA,OAAO,EAAC,aAAa;AACrBC,IAAAA,GAAG,EAAC,KAAK;IACTV,KAAK,EAAEA,KAAK,IAAI,CAAE;AAClBF,IAAAA,KAAK,EAAEA,KAAAA;AAAM,GAAA,CACd,CAAC,CAAA;AAEN,CAAC,EAAC;AACFL,WAAW,CAACI,SAAS,GAAGL,SAAS,CAAA;AACjCC,WAAW,CAACkB,WAAW,GAAGpB,cAAc;;;;"}
+{"version":3,"file":"ProgressBar.js","sources":["../../src/components/progress-bar/styles.ts","../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledProgressBarProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledProgressBar = styled.progress<StyledProgressBarProps>`\n  ${({ $backgroundColor, $height, $progressColor, $width }) => css`\n    &[value] {\n      // Target only state with a value\n      -webkit-appearance: none;\n      appearance: none;\n      height: ${$height || '8px'};\n      width: ${$width || '100%'};\n      color: var(--redsift-color-presentation-red-default);\n\n      &::-webkit-progress-bar {\n        background-color: ${$backgroundColor || 'var(--redsift-color-neutral-x-light-grey)'};\n        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) inset;\n      }\n\n      &::-webkit-progress-value {\n        background-color: ${$progressColor || 'var(--redsift-color-primary-n)'};\n        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) inset;\n      }\n    }\n  `}\n`;\n","import React, { forwardRef, MutableRefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { ProgressBarProps } from './types';\nimport { StyledProgressBar } from './styles';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'ProgressBar';\nconst CLASSNAME = 'redsift-progress-bar';\n\n/**\n * The Progress bar component.\n */\nexport const ProgressBar: Comp<ProgressBarProps, HTMLProgressElement> = forwardRef((props, ref) => {\n  const {\n    className,\n    theme: propsTheme,\n    value,\n    progressColor,\n    backgroundColor,\n    height,\n    width,\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme(propsTheme);\n\n  return (\n    <StyledProgressBar\n      {...forwardedProps}\n      className={classNames(ProgressBar.className, className)}\n      ref={ref as MutableRefObject<HTMLProgressElement>}\n      variant=\"determinate\"\n      max=\"100\"\n      value={value || 0}\n      theme={theme}\n      $progressColor={progressColor}\n      $backgroundColor={backgroundColor}\n      $height={height}\n      $theme={theme}\n      $width={width}\n    />\n  );\n});\nProgressBar.className = CLASSNAME;\nProgressBar.displayName = COMPONENT_NAME;\n"],"names":["StyledProgressBar","styled","progress","_ref","$backgroundColor","$height","$progressColor","$width","css","COMPONENT_NAME","CLASSNAME","ProgressBar","forwardRef","props","ref","className","theme","propsTheme","value","progressColor","backgroundColor","height","width","forwardedProps","_objectWithoutProperties","_excluded","useTheme","React","createElement","_extends","classNames","variant","max","$theme","displayName"],"mappings":";;;;;;AAGA;AACA;AACA;AACO,MAAMA,iBAAiB,GAAGC,MAAM,CAACC,QAAiC,CAAA;AACzE,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;IAAEC,gBAAgB;IAAEC,OAAO;IAAEC,cAAc;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAJ,IAAA,CAAA;AAAA,EAAA,OAAKK,GAAI,CAAA;AACnE;AACA;AACA;AACA;AACA,cAAgBH,EAAAA,OAAO,IAAI,KAAM,CAAA;AACjC,aAAeE,EAAAA,MAAM,IAAI,MAAO,CAAA;AAChC;AACA;AACA;AACA,0BAA4BH,EAAAA,gBAAgB,IAAI,2CAA4C,CAAA;AAC5F;AACA;AACA;AACA;AACA,0BAA4BE,EAAAA,cAAc,IAAI,gCAAiC,CAAA;AAC/E;AACA;AACA;AACA,EAAG,CAAA,CAAA;AAAA,CAAC,CAAA;AACJ,CAAC;;;ACpBD,MAAMG,cAAc,GAAG,aAAa,CAAA;AACpC,MAAMC,SAAS,GAAG,sBAAsB,CAAA;;AAExC;AACA;AACA;AACO,MAAMC,WAAwD,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACjG,MAAM;MACJC,SAAS;AACTC,MAAAA,KAAK,EAAEC,UAAU;MACjBC,KAAK;MACLC,aAAa;MACbC,eAAe;MACfC,MAAM;AACNC,MAAAA,KAAAA;AAEF,KAAC,GAAGT,KAAK;AADJU,IAAAA,cAAc,GAAAC,wBAAA,CACfX,KAAK,EAAAY,SAAA,CAAA,CAAA;AAET,EAAA,MAAMT,KAAK,GAAGU,QAAQ,CAACT,UAAU,CAAC,CAAA;EAElC,oBACEU,cAAA,CAAAC,aAAA,CAAC5B,iBAAiB,EAAA6B,QAAA,KACZN,cAAc,EAAA;IAClBR,SAAS,EAAEe,UAAU,CAACnB,WAAW,CAACI,SAAS,EAAEA,SAAS,CAAE;AACxDD,IAAAA,GAAG,EAAEA,GAA6C;AAClDiB,IAAAA,OAAO,EAAC,aAAa;AACrBC,IAAAA,GAAG,EAAC,KAAK;IACTd,KAAK,EAAEA,KAAK,IAAI,CAAE;AAClBF,IAAAA,KAAK,EAAEA,KAAM;AACbV,IAAAA,cAAc,EAAEa,aAAc;AAC9Bf,IAAAA,gBAAgB,EAAEgB,eAAgB;AAClCf,IAAAA,OAAO,EAAEgB,MAAO;AAChBY,IAAAA,MAAM,EAAEjB,KAAM;AACdT,IAAAA,MAAM,EAAEe,KAAAA;AAAM,GAAA,CACf,CAAC,CAAA;AAEN,CAAC,EAAC;AACFX,WAAW,CAACI,SAAS,GAAGL,SAAS,CAAA;AACjCC,WAAW,CAACuB,WAAW,GAAGzB,cAAc;;;;"}

package/_internal/Radio2.js

@@ -5,8 +5,9 @@ import { mdiRadioboxMarked, mdiRadioboxBlank } from '@redsift/icons';
 import { R as RadioGroupContext } from './context4.js';
 import { w as warnIfNoAccessibleLabelFound } from './warnIfNoAccessibleLabelFound.js';
 import styled, { css } from 'styled-components';
-import { i as baseStyling } from './styles4.js';
+import { i as baseStyling } from './styles5.js';
 import { u as useFocusRing } from './useFocusRing.js';
+import { f as getStylingTransientProps } from './styles.js';
 import { u as useTheme } from './useTheme.js';
 import { a as Icon } from './Icon2.js';
 
@@ -130,6 +131,10 @@ const CLASSNAME = 'redsift-radio';
 const Radio = /*#__PURE__*/forwardRef((props, ref) => {
   var _isDisabled, _isReadOnly, _ref;
   const groupState = useContext(RadioGroupContext);
+  const {
+    transientProps,
+    otherProps
+  } = getStylingTransientProps(props);
   let {
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledby,
@@ -149,8 +154,8 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
       onChange,
       theme: propsTheme,
       value
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded);
   const theme = useTheme(propsTheme);
   const {
     isFocusVisible,
@@ -196,7 +201,7 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
       onChange === null || onChange === void 0 ? void 0 : onChange(!isSelected, value, name, event, groupState);
     }
   }, [onChange, groupState, isSelected, propsIsSelected]);
-  return /*#__PURE__*/React__default.createElement(StyledRadio, _extends({}, forwardedProps, {
+  return /*#__PURE__*/React__default.createElement(StyledRadio, _extends({}, forwardedProps, transientProps, {
     $isColored: isColored,
     $isDisabled: isDisabled,
     $isFocusVisible: isFocusVisible,

package/_internal/Radio2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio2.js","sources":["../../src/components/radio/styles.ts","../../src/components/radio/Radio.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledRadioProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledRadio = styled.label<StyledRadioProps>`\n  height: fit-content;\n  position: relative;\n  width: fit-content;\n  ${baseStyling}\n\n  align-items: center;\n  background: none;\n  border: none;\n  display: inline-flex;\n\n  input {\n    height: 100%;\n    margin: 0;\n    opacity: 0;\n    overflow: visible;\n    padding: 0;\n    position: absolute;\n    width: 100%;\n  }\n\n  span.label {\n    ${({ $isDisabled, $isInvalid, $theme }) =>\n      $isDisabled\n        ? css`\n            color: var(--redsift-color-${$theme}-components-radio-text-disabled);\n          `\n        : $isInvalid\n        ? css`\n            color: var(--redsift-color-${$theme}-components-radio-text-invalid);\n          `\n        : css`\n            color: var(--redsift-color-${$theme}-components-radio-text-default);\n          `}\n\n    font-family: var(--redsift-typography-body-font-family);\n    font-size: var(--redsift-typography-body-font-size);\n    font-weight: var(--redsift-typography-body-font-weight);\n    line-height: var(--redsift-typography-body-line-height);\n    padding-left: 4px;\n    padding-right: 16px;\n\n    [dir='rtl'] & {\n      padding-left: 16px;\n      padding-right: 4px;\n    }\n  }\n\n  .redsift-icon {\n    box-sizing: content-box;\n    padding: 2px;\n    width: 24px;\n\n    ${({ $isColored, $isDisabled, $isInvalid, $isFocusVisible, $theme }) => css`\n      ${$isDisabled\n        ? css`\n            color: var(--redsift-color-${$theme}-components-radio-fill-disabled);\n          `\n        : $isInvalid\n        ? css`\n            color: var(--redsift-color-${$theme}-components-radio-fill-invalid);\n          `\n        : css`\n            color: ${$isColored\n              ? `var(--redsift-color-${$theme}-components-radio-fill-default)`\n              : `var(--redsift-color-${$theme}-components-radio-fill-uncolored)`};\n          `}\n\n      ${$isFocusVisible && !$isDisabled\n        ? css`\n            background-color: ${$isColored\n              ? `var(--redsift-color-${$theme}-components-radio-fill-default-hover)`\n              : `var(--redsift-color-${$theme}-components-radio-fill-uncolored-hover)`};\n            border-radius: 16px;\n          `\n        : ''}\n    `}\n  }\n\n  &:hover,\n  &:focus-visible {\n    outline: none;\n\n    ${({ $isColored, $isDisabled, $isInvalid, $theme }) =>\n      !$isDisabled\n        ? css`\n            .redsift-icon {\n              ${$isInvalid\n                ? css`\n                    background-color: var(--redsift-color-${$theme}-components-radio-fill-invalid-hover);\n                  `\n                : css`\n                    background-color: ${$isColored\n                      ? `var(--redsift-color-${$theme}-components-radio-fill-default-hover)`\n                      : `var(--redsift-color-${$theme}-components-radio-fill-uncolored-hover)`};\n                  `}\n              border-radius: 16px;\n            }\n          `\n        : ''}\n  }\n`;\n","import React, {\n  ComponentProps,\n  forwardRef,\n  MutableRefObject,\n  useCallback,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { useFocusRing } from '../../react-aria/react-aria/focus';\nimport { mdiRadioboxBlank, mdiRadioboxMarked } from '@redsift/icons';\nimport { Comp } from '../../types';\nimport { Icon } from '../icon';\nimport { RadioGroupContext } from '../radio-group/context';\nimport { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound';\nimport { RadioProps } from './types';\nimport { StyledRadio } from './styles';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Radio';\nconst CLASSNAME = 'redsift-radio';\n\n/**\n * The Radio component.\n * Works both inside a RadioGroup or as standalone.\n * Can be used as controlled or uncontrolled.\n */\nexport const Radio: Comp<RadioProps, HTMLLabelElement> = forwardRef((props, ref) => {\n  const groupState = useContext(RadioGroupContext);\n\n  let {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    autoFocus,\n    children,\n    className,\n    defaultSelected,\n    inputProps,\n    inputRef,\n    isColored = true,\n    isDisabled,\n    isInvalid,\n    isReadOnly,\n    isRequired,\n    isSelected: propsIsSelected,\n    name,\n    onChange,\n    theme: propsTheme,\n    value,\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme(propsTheme);\n\n  const { isFocusVisible, focusProps } = useFocusRing({ autoFocus });\n  isDisabled = isDisabled ?? groupState?.isDisabled;\n  isReadOnly = isReadOnly ?? groupState?.isReadOnly;\n\n  const [isSelected, setSelected] = useState(\n    Boolean(propsIsSelected ?? defaultSelected ?? Boolean(groupState?.value && groupState.value === value))\n  );\n  const isControlled = propsIsSelected !== null && propsIsSelected !== undefined;\n\n  useEffect(() => {\n    setSelected(Boolean(propsIsSelected ?? defaultSelected));\n  }, [propsIsSelected, defaultSelected]);\n\n  useEffect(() => {\n    if (groupState) {\n      setSelected(groupState.value === value);\n    }\n  }, [groupState?.value]);\n\n  warnIfNoAccessibleLabelFound(props as ComponentProps<'label'>, [children], 'Radio');\n\n  if (groupState) {\n    if (propsIsSelected != null) {\n      console.warn(\n        'isSelected is unsupported on individual <Radio> elements within a <RadioGroup> unless the <Radio> is controlled. Please apply this prop to the group instead.'\n      );\n    }\n    if (defaultSelected != null) {\n      console.warn(\n        'defaultSelected is unsupported on individual <Radio> elements within a <RadioGroup> unless the <Radio> is controlled. Please apply this prop to the group instead.'\n      );\n    }\n    if (props.value == null) {\n      console.warn(\n        'A <Radio> element within a <RadioGroup> requires a `value` property unless the <Radio> is controlled.'\n      );\n    }\n  }\n\n  const handleChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (isDisabled || isReadOnly) {\n        return;\n      }\n\n      if (groupState) {\n        groupState.setValue(value as string);\n      }\n\n      if (isControlled) {\n        onChange?.(!propsIsSelected, value, name, event, groupState!);\n      } else {\n        setSelected(!isSelected);\n        onChange?.(!isSelected, value, name, event, groupState!);\n      }\n    },\n    [onChange, groupState, isSelected, propsIsSelected]\n  );\n\n  return (\n    <StyledRadio\n      {...forwardedProps}\n      $isColored={isColored}\n      $isDisabled={isDisabled}\n      $isFocusVisible={isFocusVisible}\n      $isInvalid={isInvalid || (isRequired && !(isSelected || (isControlled && propsIsSelected)))}\n      $isRequired={isRequired}\n      $isSelected={isSelected || (isControlled && propsIsSelected)}\n      $theme={theme}\n      className={classNames(Radio.className, className)}\n      ref={ref as MutableRefObject<HTMLLabelElement>}\n    >\n      {isSelected || (isControlled && propsIsSelected) ? (\n        <Icon icon={mdiRadioboxMarked} />\n      ) : (\n        <Icon icon={mdiRadioboxBlank} />\n      )}\n      {children ? <span className=\"label\">{children}</span> : null}\n      <input\n        {...inputProps}\n        {...focusProps}\n        aria-checked={isSelected || (isControlled && propsIsSelected) ? 'true' : 'false'}\n        aria-disabled={isDisabled}\n        aria-invalid={isInvalid || (isRequired && !(isSelected || (isControlled && propsIsSelected)))}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-readonly={isReadOnly}\n        aria-required={isRequired}\n        autoFocus={autoFocus}\n        checked={isSelected || (isControlled && propsIsSelected) ? true : false}\n        disabled={isDisabled}\n        name={name}\n        onChange={handleChange}\n        ref={inputRef as MutableRefObject<HTMLInputElement>}\n        type=\"radio\"\n        value={value}\n      />\n    </StyledRadio>\n  );\n});\nRadio.className = CLASSNAME;\nRadio.displayName = COMPONENT_NAME;\n"],"names":["StyledRadio","styled","label","baseStyling","_ref","$isDisabled","$isInvalid","$theme","css","_ref2","$isColored","$isFocusVisible","_ref3","COMPONENT_NAME","CLASSNAME","Radio","forwardRef","props","ref","_isDisabled","_isReadOnly","groupState","useContext","RadioGroupContext","ariaLabel","ariaLabelledby","autoFocus","children","className","defaultSelected","inputProps","inputRef","isColored","isDisabled","isInvalid","isReadOnly","isRequired","isSelected","propsIsSelected","name","onChange","theme","propsTheme","value","forwardedProps","_objectWithoutProperties","_excluded","useTheme","isFocusVisible","focusProps","useFocusRing","setSelected","useState","Boolean","isControlled","undefined","useEffect","warnIfNoAccessibleLabelFound","console","warn","handleChange","useCallback","event","setValue","React","createElement","_extends","$isRequired","$isSelected","classNames","Icon","icon","mdiRadioboxMarked","mdiRadioboxBlank","checked","disabled","type","displayName"],"mappings":"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"}
+{"version":3,"file":"Radio2.js","sources":["../../src/components/radio/styles.ts","../../src/components/radio/Radio.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledRadioProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledRadio = styled.label<StyledRadioProps>`\n  height: fit-content;\n  position: relative;\n  width: fit-content;\n  ${baseStyling}\n\n  align-items: center;\n  background: none;\n  border: none;\n  display: inline-flex;\n\n  input {\n    height: 100%;\n    margin: 0;\n    opacity: 0;\n    overflow: visible;\n    padding: 0;\n    position: absolute;\n    width: 100%;\n  }\n\n  span.label {\n    ${({ $isDisabled, $isInvalid, $theme }) =>\n      $isDisabled\n        ? css`\n            color: var(--redsift-color-${$theme}-components-radio-text-disabled);\n          `\n        : $isInvalid\n        ? css`\n            color: var(--redsift-color-${$theme}-components-radio-text-invalid);\n          `\n        : css`\n            color: var(--redsift-color-${$theme}-components-radio-text-default);\n          `}\n\n    font-family: var(--redsift-typography-body-font-family);\n    font-size: var(--redsift-typography-body-font-size);\n    font-weight: var(--redsift-typography-body-font-weight);\n    line-height: var(--redsift-typography-body-line-height);\n    padding-left: 4px;\n    padding-right: 16px;\n\n    [dir='rtl'] & {\n      padding-left: 16px;\n      padding-right: 4px;\n    }\n  }\n\n  .redsift-icon {\n    box-sizing: content-box;\n    padding: 2px;\n    width: 24px;\n\n    ${({ $isColored, $isDisabled, $isInvalid, $isFocusVisible, $theme }) => css`\n      ${$isDisabled\n        ? css`\n            color: var(--redsift-color-${$theme}-components-radio-fill-disabled);\n          `\n        : $isInvalid\n        ? css`\n            color: var(--redsift-color-${$theme}-components-radio-fill-invalid);\n          `\n        : css`\n            color: ${$isColored\n              ? `var(--redsift-color-${$theme}-components-radio-fill-default)`\n              : `var(--redsift-color-${$theme}-components-radio-fill-uncolored)`};\n          `}\n\n      ${$isFocusVisible && !$isDisabled\n        ? css`\n            background-color: ${$isColored\n              ? `var(--redsift-color-${$theme}-components-radio-fill-default-hover)`\n              : `var(--redsift-color-${$theme}-components-radio-fill-uncolored-hover)`};\n            border-radius: 16px;\n          `\n        : ''}\n    `}\n  }\n\n  &:hover,\n  &:focus-visible {\n    outline: none;\n\n    ${({ $isColored, $isDisabled, $isInvalid, $theme }) =>\n      !$isDisabled\n        ? css`\n            .redsift-icon {\n              ${$isInvalid\n                ? css`\n                    background-color: var(--redsift-color-${$theme}-components-radio-fill-invalid-hover);\n                  `\n                : css`\n                    background-color: ${$isColored\n                      ? `var(--redsift-color-${$theme}-components-radio-fill-default-hover)`\n                      : `var(--redsift-color-${$theme}-components-radio-fill-uncolored-hover)`};\n                  `}\n              border-radius: 16px;\n            }\n          `\n        : ''}\n  }\n`;\n","import React, {\n  ComponentProps,\n  forwardRef,\n  MutableRefObject,\n  useCallback,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { useFocusRing } from '../../react-aria/react-aria/focus';\nimport { mdiRadioboxBlank, mdiRadioboxMarked } from '@redsift/icons';\nimport { Comp, getStylingTransientProps } from '../../types';\nimport { Icon } from '../icon';\nimport { RadioGroupContext } from '../radio-group/context';\nimport { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound';\nimport { RadioProps } from './types';\nimport { StyledRadio } from './styles';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Radio';\nconst CLASSNAME = 'redsift-radio';\n\n/**\n * The Radio component.\n * Works both inside a RadioGroup or as standalone.\n * Can be used as controlled or uncontrolled.\n */\nexport const Radio: Comp<RadioProps, HTMLLabelElement> = forwardRef((props, ref) => {\n  const groupState = useContext(RadioGroupContext);\n\n  const { transientProps, otherProps } = getStylingTransientProps(props);\n\n  let {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    autoFocus,\n    children,\n    className,\n    defaultSelected,\n    inputProps,\n    inputRef,\n    isColored = true,\n    isDisabled,\n    isInvalid,\n    isReadOnly,\n    isRequired,\n    isSelected: propsIsSelected,\n    name,\n    onChange,\n    theme: propsTheme,\n    value,\n    ...forwardedProps\n  } = otherProps;\n\n  const theme = useTheme(propsTheme);\n\n  const { isFocusVisible, focusProps } = useFocusRing({ autoFocus });\n  isDisabled = isDisabled ?? groupState?.isDisabled;\n  isReadOnly = isReadOnly ?? groupState?.isReadOnly;\n\n  const [isSelected, setSelected] = useState(\n    Boolean(propsIsSelected ?? defaultSelected ?? Boolean(groupState?.value && groupState.value === value))\n  );\n  const isControlled = propsIsSelected !== null && propsIsSelected !== undefined;\n\n  useEffect(() => {\n    setSelected(Boolean(propsIsSelected ?? defaultSelected));\n  }, [propsIsSelected, defaultSelected]);\n\n  useEffect(() => {\n    if (groupState) {\n      setSelected(groupState.value === value);\n    }\n  }, [groupState?.value]);\n\n  warnIfNoAccessibleLabelFound(props as ComponentProps<'label'>, [children], 'Radio');\n\n  if (groupState) {\n    if (propsIsSelected != null) {\n      console.warn(\n        'isSelected is unsupported on individual <Radio> elements within a <RadioGroup> unless the <Radio> is controlled. Please apply this prop to the group instead.'\n      );\n    }\n    if (defaultSelected != null) {\n      console.warn(\n        'defaultSelected is unsupported on individual <Radio> elements within a <RadioGroup> unless the <Radio> is controlled. Please apply this prop to the group instead.'\n      );\n    }\n    if (props.value == null) {\n      console.warn(\n        'A <Radio> element within a <RadioGroup> requires a `value` property unless the <Radio> is controlled.'\n      );\n    }\n  }\n\n  const handleChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (isDisabled || isReadOnly) {\n        return;\n      }\n\n      if (groupState) {\n        groupState.setValue(value as string);\n      }\n\n      if (isControlled) {\n        onChange?.(!propsIsSelected, value, name, event, groupState!);\n      } else {\n        setSelected(!isSelected);\n        onChange?.(!isSelected, value, name, event, groupState!);\n      }\n    },\n    [onChange, groupState, isSelected, propsIsSelected]\n  );\n\n  return (\n    <StyledRadio\n      {...forwardedProps}\n      {...transientProps}\n      $isColored={isColored}\n      $isDisabled={isDisabled}\n      $isFocusVisible={isFocusVisible}\n      $isInvalid={isInvalid || (isRequired && !(isSelected || (isControlled && propsIsSelected)))}\n      $isRequired={isRequired}\n      $isSelected={isSelected || (isControlled && propsIsSelected)}\n      $theme={theme}\n      className={classNames(Radio.className, className)}\n      ref={ref as MutableRefObject<HTMLLabelElement>}\n    >\n      {isSelected || (isControlled && propsIsSelected) ? (\n        <Icon icon={mdiRadioboxMarked} />\n      ) : (\n        <Icon icon={mdiRadioboxBlank} />\n      )}\n      {children ? <span className=\"label\">{children}</span> : null}\n      <input\n        {...inputProps}\n        {...focusProps}\n        aria-checked={isSelected || (isControlled && propsIsSelected) ? 'true' : 'false'}\n        aria-disabled={isDisabled}\n        aria-invalid={isInvalid || (isRequired && !(isSelected || (isControlled && propsIsSelected)))}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-readonly={isReadOnly}\n        aria-required={isRequired}\n        autoFocus={autoFocus}\n        checked={isSelected || (isControlled && propsIsSelected) ? true : false}\n        disabled={isDisabled}\n        name={name}\n        onChange={handleChange}\n        ref={inputRef as MutableRefObject<HTMLInputElement>}\n        type=\"radio\"\n        value={value}\n      />\n    </StyledRadio>\n  );\n});\nRadio.className = CLASSNAME;\nRadio.displayName = COMPONENT_NAME;\n"],"names":["StyledRadio","styled","label","baseStyling","_ref","$isDisabled","$isInvalid","$theme","css","_ref2","$isColored","$isFocusVisible","_ref3","COMPONENT_NAME","CLASSNAME","Radio","forwardRef","props","ref","_isDisabled","_isReadOnly","groupState","useContext","RadioGroupContext","transientProps","otherProps","getStylingTransientProps","ariaLabel","ariaLabelledby","autoFocus","children","className","defaultSelected","inputProps","inputRef","isColored","isDisabled","isInvalid","isReadOnly","isRequired","isSelected","propsIsSelected","name","onChange","theme","propsTheme","value","forwardedProps","_objectWithoutProperties","_excluded","useTheme","isFocusVisible","focusProps","useFocusRing","setSelected","useState","Boolean","isControlled","undefined","useEffect","warnIfNoAccessibleLabelFound","console","warn","handleChange","useCallback","event","setValue","React","createElement","_extends","$isRequired","$isSelected","classNames","Icon","icon","mdiRadioboxMarked","mdiRadioboxBlank","checked","disabled","type","displayName"],"mappings":"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"}

package/_internal/RadioGroup.js

@@ -3,7 +3,8 @@ import React__default, { forwardRef, useState, useEffect } from 'react';
 import classNames from 'classnames';
 import { R as RadioGroupContext } from './context4.js';
 import styled, { css } from 'styled-components';
-import { i as baseStyling } from './styles4.js';
+import { i as baseStyling } from './styles5.js';
+import { f as getStylingTransientProps } from './styles.js';
 import { C as ColorPalette } from './colors.js';
 import { u as useTheme, a as ThemeProvider } from './useTheme.js';
 
@@ -104,6 +105,10 @@ const CLASSNAME = 'redsift-radio-group';
  * Can be used as controlled or uncontrolled.
  */
 const RadioGroup = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    transientProps,
+    otherProps
+  } = getStylingTransientProps(props);
   const {
       children,
       className,
@@ -119,8 +124,8 @@ const RadioGroup = /*#__PURE__*/forwardRef((props, ref) => {
       orientation = RadioGroupOrientation.vertical,
       theme: propsTheme,
       value
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded);
   const theme = useTheme(propsTheme);
   const [selectedValue, setValue] = useState(value || defaultValue || '');
   useEffect(() => {
@@ -149,7 +154,7 @@ const RadioGroup = /*#__PURE__*/forwardRef((props, ref) => {
     }
   }, /*#__PURE__*/React__default.createElement(StyledRadioGroup, _extends({
     color: color
-  }, forwardedProps, {
+  }, forwardedProps, transientProps, {
     $isDisabled: isDisabled,
     $isInvalid: isInvalid || isRequired && selectedValue.length === 0,
     $isReadOnly: isReadOnly,

package/_internal/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../src/components/radio-group/types.ts","../../src/components/radio-group/styles.ts","../../src/components/radio-group/RadioGroup.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { StylingProps, Theme, ValueOf } from '../../types';\n\n/**\n * Context props.\n */\nexport type RadioGroupState = {\n  /** Whether the radio group is disabled or not. */\n  readonly isDisabled: boolean;\n  /** Whether the radio group is read only or not. */\n  readonly isReadOnly: boolean;\n  /** Sets the selected value. */\n  setValue(value: string): void;\n  /** Current selected value. */\n  readonly value: string;\n};\n\n/**\n * Component orientation.\n */\nexport const RadioGroupOrientation = {\n  horizontal: 'horizontal',\n  vertical: 'vertical',\n} as const;\nexport type RadioGroupOrientation = ValueOf<typeof RadioGroupOrientation>;\n\n/**\n * Component props.\n */\nexport interface RadioGroupProps extends Omit<ComponentProps<'div'>, 'onChange'>, StylingProps {\n  /**\n   * Default selected value.\n   * Used for uncontrolled version.\n   */\n  defaultValue?: string;\n  /** Description of the radio group. */\n  description?: string;\n  /** Whether the component is disabled or not. */\n  isDisabled?: boolean;\n  /** Whether the component is invalid or not. */\n  isInvalid?: boolean;\n  /** Whether the component is read only or not. */\n  isReadOnly?: boolean;\n  /** Whether the component is required or not. */\n  isRequired?: boolean;\n  /** Label of the radio group. */\n  label?: string;\n  /** Method to handle component change. */\n  onChange?(values: string): void;\n  /** Method to handle component change. */\n  orientation?: RadioGroupOrientation;\n  /** Theme. */\n  theme?: Theme;\n  /**\n   * Currently selected value.\n   * Used for controlled version.\n   */\n  value?: string;\n}\n\nexport type StyledRadioGroupProps = Omit<\n  RadioGroupProps,\n  'isDisabled' | 'isInvalid' | 'isReadOnly' | 'orientation' | 'isRequired'\n> & {\n  $isDisabled: RadioGroupProps['isDisabled'];\n  $isInvalid: RadioGroupProps['isInvalid'];\n  $isReadOnly: RadioGroupProps['isReadOnly'];\n  $orientation: RadioGroupProps['orientation'];\n  $theme: RadioGroupProps['theme'];\n};\n","import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { RadioGroupOrientation, StyledRadioGroupProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledRadioGroup = styled.div<StyledRadioGroupProps>`\n  ${baseStyling}\n\n  display: flex;\n  flex-direction: column;\n\n  ${({ $orientation }) =>\n    $orientation === RadioGroupOrientation.vertical\n      ? `\n    div.redsift-radio-group-boxes {\n      display: flex;\n      flex-direction: column;\n    }\n  `\n      : `\n    div.redsift-radio-group-boxes {\n      display: flex;\n      flex-direction: row;\n      flex-wrap: wrap;\n    }\n  `}\n\n  span.redsift-radio-group-label {\n    font-family: var(--redsift-typography-body-font-family);\n    font-weight: var(--redsift-typography-body-font-weight);\n    font-size: var(--redsift-typography-body-font-size);\n    line-height: var(--redsift-typography-body-line-height);\n\n    ${({ $isDisabled, $isInvalid, $theme }) =>\n      $isDisabled\n        ? css`\n            color: var(--redsift-color-${$theme}-components-radio-text-disabled);\n          `\n        : $isInvalid\n        ? css`\n            color: var(--redsift-color-${$theme}-components-radio-text-invalid);\n          `\n        : css`\n            color: var(--redsift-color-${$theme}-components-radio-text-default);\n          `}\n  }\n\n  span.redsift-radio-group-description {\n    font-family: var(--redsift-typography-helper-font-family);\n    font-weight: var(--redsift-typography-helper-font-weight);\n    font-size: var(--redsift-typography-helper-font-size);\n    line-height: var(--redsift-typography-helper-line-height);\n\n    ${({ $isDisabled, $isInvalid, $theme }) =>\n      $isDisabled\n        ? css`\n            color: var(--redsift-color-${$theme}-components-radio-text-disabled);\n          `\n        : $isInvalid\n        ? css`\n            color: var(--redsift-color-${$theme}-components-radio-text-invalid);\n          `\n        : css`\n            color: var(--redsift-color-${$theme}-components-radio-text-default);\n          `}\n  }\n`;\n","import React, { forwardRef, RefObject, useEffect, useState } from 'react';\nimport classNames from 'classnames';\nimport { Comp, ColorPalette } from '../../types';\nimport { RadioGroupOrientation, RadioGroupProps } from './types';\nimport { RadioGroupContext } from './context';\nimport { StyledRadioGroup } from './styles';\nimport { ThemeProvider, useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'RadioGroup';\nconst CLASSNAME = 'redsift-radio-group';\n\n/**\n * The RadioGroup component.\n * Can be used as controlled or uncontrolled.\n */\nexport const RadioGroup: Comp<RadioGroupProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    children,\n    className,\n    color = ColorPalette.primary,\n    defaultValue,\n    description,\n    isDisabled,\n    isInvalid,\n    isReadOnly,\n    isRequired,\n    label,\n    onChange,\n    orientation = RadioGroupOrientation.vertical,\n    theme: propsTheme,\n    value,\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme(propsTheme);\n\n  const [selectedValue, setValue] = useState<string>(value || defaultValue || '');\n  useEffect(() => {\n    if (value) {\n      state.setValue(value);\n    }\n  }, [value]);\n\n  const state = {\n    value: selectedValue,\n    isDisabled: isDisabled || false,\n    isReadOnly: isReadOnly || false,\n    setValue(value: string) {\n      if (isReadOnly || isDisabled) {\n        return;\n      }\n\n      const previousValue = selectedValue;\n      setValue(value);\n      if (value !== previousValue && onChange) {\n        onChange(value);\n      }\n    },\n  };\n\n  return (\n    <ThemeProvider value={{ theme }}>\n      <StyledRadioGroup\n        color={color}\n        {...forwardedProps}\n        $isDisabled={isDisabled}\n        $isInvalid={isInvalid || (isRequired && selectedValue.length === 0)}\n        $isReadOnly={isReadOnly}\n        $orientation={orientation}\n        $theme={theme}\n        aria-disabled={isDisabled}\n        className={classNames(RadioGroup.className, className)}\n        ref={ref as RefObject<HTMLDivElement>}\n        role=\"radiogroup\"\n      >\n        <span className={`${RadioGroup.className}-label`}>\n          {label}\n          {isRequired ? ' *' : null}\n        </span>\n        <div className={`${RadioGroup.className}-boxes`}>\n          <RadioGroupContext.Provider value={state}>{children}</RadioGroupContext.Provider>\n        </div>\n        <span className={`${RadioGroup.className}-description`}>{description}</span>\n      </StyledRadioGroup>\n    </ThemeProvider>\n  );\n});\nRadioGroup.className = CLASSNAME;\nRadioGroup.displayName = COMPONENT_NAME;\n"],"names":["RadioGroupOrientation","horizontal","vertical","StyledRadioGroup","styled","div","baseStyling","_ref","$orientation","_ref2","$isDisabled","$isInvalid","$theme","css","_ref3","COMPONENT_NAME","CLASSNAME","RadioGroup","forwardRef","props","ref","children","className","color","ColorPalette","primary","defaultValue","description","isDisabled","isInvalid","isReadOnly","isRequired","label","onChange","orientation","theme","propsTheme","value","forwardedProps","_objectWithoutProperties","_excluded","useTheme","selectedValue","setValue","useState","useEffect","state","previousValue","React","createElement","ThemeProvider","_extends","length","$isReadOnly","classNames","role","RadioGroupContext","Provider","displayName"],"mappings":"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"}
+{"version":3,"file":"RadioGroup.js","sources":["../../src/components/radio-group/types.ts","../../src/components/radio-group/styles.ts","../../src/components/radio-group/RadioGroup.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { StylingProps, StylingTransientProps, Theme, ValueOf } from '../../types';\n\n/**\n * Context props.\n */\nexport type RadioGroupState = {\n  /** Whether the radio group is disabled or not. */\n  readonly isDisabled: boolean;\n  /** Whether the radio group is read only or not. */\n  readonly isReadOnly: boolean;\n  /** Sets the selected value. */\n  setValue(value: string): void;\n  /** Current selected value. */\n  readonly value: string;\n};\n\n/**\n * Component orientation.\n */\nexport const RadioGroupOrientation = {\n  horizontal: 'horizontal',\n  vertical: 'vertical',\n} as const;\nexport type RadioGroupOrientation = ValueOf<typeof RadioGroupOrientation>;\n\n/**\n * Component props.\n */\nexport interface RadioGroupProps extends Omit<ComponentProps<'div'>, 'onChange'>, StylingProps {\n  /**\n   * Default selected value.\n   * Used for uncontrolled version.\n   */\n  defaultValue?: string;\n  /** Description of the radio group. */\n  description?: string;\n  /** Whether the component is disabled or not. */\n  isDisabled?: boolean;\n  /** Whether the component is invalid or not. */\n  isInvalid?: boolean;\n  /** Whether the component is read only or not. */\n  isReadOnly?: boolean;\n  /** Whether the component is required or not. */\n  isRequired?: boolean;\n  /** Label of the radio group. */\n  label?: string;\n  /** Method to handle component change. */\n  onChange?(values: string): void;\n  /** Method to handle component change. */\n  orientation?: RadioGroupOrientation;\n  /** Theme. */\n  theme?: Theme;\n  /**\n   * Currently selected value.\n   * Used for controlled version.\n   */\n  value?: string;\n}\n\nexport interface StyledRadioGroupProps extends ComponentProps<'div'>, StylingTransientProps {\n  $isDisabled: RadioGroupProps['isDisabled'];\n  $isInvalid: RadioGroupProps['isInvalid'];\n  $isReadOnly: RadioGroupProps['isReadOnly'];\n  $orientation: RadioGroupProps['orientation'];\n  $theme: RadioGroupProps['theme'];\n}\n","import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { RadioGroupOrientation, StyledRadioGroupProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledRadioGroup = styled.div<StyledRadioGroupProps>`\n  ${baseStyling}\n\n  display: flex;\n  flex-direction: column;\n\n  ${({ $orientation }) =>\n    $orientation === RadioGroupOrientation.vertical\n      ? `\n    div.redsift-radio-group-boxes {\n      display: flex;\n      flex-direction: column;\n    }\n  `\n      : `\n    div.redsift-radio-group-boxes {\n      display: flex;\n      flex-direction: row;\n      flex-wrap: wrap;\n    }\n  `}\n\n  span.redsift-radio-group-label {\n    font-family: var(--redsift-typography-body-font-family);\n    font-weight: var(--redsift-typography-body-font-weight);\n    font-size: var(--redsift-typography-body-font-size);\n    line-height: var(--redsift-typography-body-line-height);\n\n    ${({ $isDisabled, $isInvalid, $theme }) =>\n      $isDisabled\n        ? css`\n            color: var(--redsift-color-${$theme}-components-radio-text-disabled);\n          `\n        : $isInvalid\n        ? css`\n            color: var(--redsift-color-${$theme}-components-radio-text-invalid);\n          `\n        : css`\n            color: var(--redsift-color-${$theme}-components-radio-text-default);\n          `}\n  }\n\n  span.redsift-radio-group-description {\n    font-family: var(--redsift-typography-helper-font-family);\n    font-weight: var(--redsift-typography-helper-font-weight);\n    font-size: var(--redsift-typography-helper-font-size);\n    line-height: var(--redsift-typography-helper-line-height);\n\n    ${({ $isDisabled, $isInvalid, $theme }) =>\n      $isDisabled\n        ? css`\n            color: var(--redsift-color-${$theme}-components-radio-text-disabled);\n          `\n        : $isInvalid\n        ? css`\n            color: var(--redsift-color-${$theme}-components-radio-text-invalid);\n          `\n        : css`\n            color: var(--redsift-color-${$theme}-components-radio-text-default);\n          `}\n  }\n`;\n","import React, { forwardRef, RefObject, useEffect, useState } from 'react';\nimport classNames from 'classnames';\nimport { Comp, ColorPalette, getStylingTransientProps } from '../../types';\nimport { RadioGroupOrientation, RadioGroupProps } from './types';\nimport { RadioGroupContext } from './context';\nimport { StyledRadioGroup } from './styles';\nimport { ThemeProvider, useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'RadioGroup';\nconst CLASSNAME = 'redsift-radio-group';\n\n/**\n * The RadioGroup component.\n * Can be used as controlled or uncontrolled.\n */\nexport const RadioGroup: Comp<RadioGroupProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { transientProps, otherProps } = getStylingTransientProps(props);\n\n  const {\n    children,\n    className,\n    color = ColorPalette.primary,\n    defaultValue,\n    description,\n    isDisabled,\n    isInvalid,\n    isReadOnly,\n    isRequired,\n    label,\n    onChange,\n    orientation = RadioGroupOrientation.vertical,\n    theme: propsTheme,\n    value,\n    ...forwardedProps\n  } = otherProps;\n\n  const theme = useTheme(propsTheme);\n\n  const [selectedValue, setValue] = useState<string>(value || defaultValue || '');\n  useEffect(() => {\n    if (value) {\n      state.setValue(value);\n    }\n  }, [value]);\n\n  const state = {\n    value: selectedValue,\n    isDisabled: isDisabled || false,\n    isReadOnly: isReadOnly || false,\n    setValue(value: string) {\n      if (isReadOnly || isDisabled) {\n        return;\n      }\n\n      const previousValue = selectedValue;\n      setValue(value);\n      if (value !== previousValue && onChange) {\n        onChange(value);\n      }\n    },\n  };\n\n  return (\n    <ThemeProvider value={{ theme }}>\n      <StyledRadioGroup\n        color={color}\n        {...forwardedProps}\n        {...transientProps}\n        $isDisabled={isDisabled}\n        $isInvalid={isInvalid || (isRequired && selectedValue.length === 0)}\n        $isReadOnly={isReadOnly}\n        $orientation={orientation}\n        $theme={theme}\n        aria-disabled={isDisabled}\n        className={classNames(RadioGroup.className, className)}\n        ref={ref as RefObject<HTMLDivElement>}\n        role=\"radiogroup\"\n      >\n        <span className={`${RadioGroup.className}-label`}>\n          {label}\n          {isRequired ? ' *' : null}\n        </span>\n        <div className={`${RadioGroup.className}-boxes`}>\n          <RadioGroupContext.Provider value={state}>{children}</RadioGroupContext.Provider>\n        </div>\n        <span className={`${RadioGroup.className}-description`}>{description}</span>\n      </StyledRadioGroup>\n    </ThemeProvider>\n  );\n});\nRadioGroup.className = CLASSNAME;\nRadioGroup.displayName = COMPONENT_NAME;\n"],"names":["RadioGroupOrientation","horizontal","vertical","StyledRadioGroup","styled","div","baseStyling","_ref","$orientation","_ref2","$isDisabled","$isInvalid","$theme","css","_ref3","COMPONENT_NAME","CLASSNAME","RadioGroup","forwardRef","props","ref","transientProps","otherProps","getStylingTransientProps","children","className","color","ColorPalette","primary","defaultValue","description","isDisabled","isInvalid","isReadOnly","isRequired","label","onChange","orientation","theme","propsTheme","value","forwardedProps","_objectWithoutProperties","_excluded","useTheme","selectedValue","setValue","useState","useEffect","state","previousValue","React","createElement","ThemeProvider","_extends","length","$isReadOnly","classNames","role","RadioGroupContext","Provider","displayName"],"mappings":"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"}

package/_internal/Shield2.js

@@ -2,7 +2,8 @@ import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBab
 import React__default, { forwardRef } from 'react';
 import classNames from 'classnames';
 import styled, { css } from 'styled-components';
-import { i as baseStyling } from './styles4.js';
+import { i as baseStyling } from './styles5.js';
+import { f as getStylingTransientProps } from './styles.js';
 import { u as useTheme } from './useTheme.js';
 import { N as NotificationsColorPalette } from './colors.js';
 
@@ -172,6 +173,10 @@ const getVariant = variant => {
  * The Shield component.
  */
 const Shield = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    transientProps,
+    otherProps
+  } = getStylingTransientProps(props);
   const {
       'aria-hidden': ariaHidden,
       'aria-label': ariaLabel,
@@ -180,15 +185,15 @@ const Shield = /*#__PURE__*/forwardRef((props, ref) => {
       isOutlined,
       isReversed,
       theme: propsTheme,
-      variant = ShieldVariant.success
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
+      variant: propsVariant = ShieldVariant.question
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded);
   const theme = useTheme(propsTheme);
   const {
     color,
     icon
-  } = getVariant(variant);
-  return /*#__PURE__*/React__default.createElement(StyledShield, _extends({}, forwardedProps, {
+  } = getVariant(propsVariant);
+  return /*#__PURE__*/React__default.createElement(StyledShield, _extends({}, forwardedProps, transientProps, {
     "aria-hidden": ariaLabel ? ariaHidden ? ariaHidden : undefined : true,
     "aria-label": ariaLabel,
     className: classNames(Shield.className, className),
@@ -197,7 +202,7 @@ const Shield = /*#__PURE__*/forwardRef((props, ref) => {
     $isOutlined: isOutlined,
     $isReversed: isReversed,
     $theme: theme,
-    $variant: variant
+    $variant: propsVariant
   }), /*#__PURE__*/React__default.createElement("svg", _extends({
     "aria-hidden": ariaLabel ? ariaHidden ? ariaHidden : undefined : true,
     "aria-label": ariaLabel,