@redsift/design-system 11.6.0-muiv5-alpha.10 → 11.6.0-muiv5-alpha.11

package/packages/design-system/src/components/icon/_internal/Icon2.js

@@ -0,0 +1,116 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_internal/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { StyledIcon } from './styles.js';
+import { IconSize } from './types.js';
+import { useTheme } from '../../theme/_internal/useTheme.js';
+
+const _excluded = ["aria-hidden", "aria-label", "badge", "className", "color", "icon", "size", "svgProps", "theme"];
+const COMPONENT_NAME = 'Icon';
+const CLASSNAME = 'redsift-icon';
+const sizeToDimension = size => {
+  if (typeof size !== 'string') {
+    return size;
+  }
+  switch (size) {
+    case IconSize.xsmall:
+      return {
+        width: 16,
+        height: 16,
+        fontSize: 16,
+        lineHeight: 16
+      };
+    case IconSize.small:
+      return {
+        width: 20,
+        height: 20,
+        fontSize: 20,
+        lineHeight: 20
+      };
+    case IconSize.medium:
+    default:
+      return {
+        width: 24,
+        height: 24,
+        fontSize: 24,
+        lineHeight: 24
+      };
+    case IconSize.large:
+      return {
+        width: 30,
+        height: 30,
+        fontSize: 30,
+        lineHeight: 30
+      };
+    case IconSize.xlarge:
+      return {
+        width: 40,
+        height: 40,
+        fontSize: 40,
+        lineHeight: 40
+      };
+    case IconSize.xxlarge:
+      return {
+        width: 55,
+        height: 55,
+        fontSize: 55,
+        lineHeight: 55
+      };
+  }
+};
+
+/**
+ * The Icon component.
+ */
+const Icon = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      'aria-hidden': ariaHidden,
+      'aria-label': ariaLabel,
+      badge,
+      className,
+      color,
+      icon,
+      size = IconSize.medium,
+      svgProps,
+      theme: propsTheme
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const {
+    width,
+    height,
+    fontSize,
+    lineHeight
+  } = sizeToDimension(size);
+  return /*#__PURE__*/React__default.createElement(StyledIcon, _extends({}, forwardedProps, {
+    $color: color,
+    $width: width,
+    $height: height,
+    $fontSize: fontSize,
+    $lineHeight: lineHeight,
+    $theme: theme,
+    "aria-hidden": ariaLabel ? ariaHidden ? ariaHidden : undefined : true,
+    "aria-label": ariaLabel,
+    className: classNames(Icon.className, className, color ? 'colored' : undefined),
+    ref: ref
+  }), /*#__PURE__*/React__default.cloneElement(typeof icon === 'string' || Array.isArray(icon) && icon.every(it => typeof it === 'string') ? /*#__PURE__*/React__default.createElement("svg", {
+    viewBox: "0 0 24 24"
+  }, (Array.isArray(icon) ? icon : [icon]).map(path => /*#__PURE__*/React__default.createElement("path", {
+    key: path,
+    d: path,
+    fill: "currentColor"
+  }))) : /*#__PURE__*/React__default.isValidElement(icon) ? icon : /*#__PURE__*/React__default.createElement(React__default.Fragment, null), _objectSpread2({
+    'aria-hidden': ariaLabel ? ariaHidden ? ariaHidden : undefined : true,
+    'aria-label': ariaLabel,
+    focusable: 'false',
+    height,
+    preserveAspectRatio: 'xMidYMid meet',
+    role: 'img',
+    width
+  }, svgProps)), badge ? badge : null);
+});
+Icon.className = CLASSNAME;
+Icon.displayName = COMPONENT_NAME;
+
+export { Icon, sizeToDimension };
+//# sourceMappingURL=Icon2.js.map

package/packages/design-system/src/components/icon/_internal/Icon2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon2.js","sources":["../../../../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { StyledIcon } from './styles';\nimport { IconDimensions, IconProps, IconSize } from './types';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Icon';\nconst CLASSNAME = 'redsift-icon';\n\nexport const sizeToDimension = (size: IconSize | IconDimensions): IconDimensions => {\n  if (typeof size !== 'string') {\n    return size;\n  }\n\n  switch (size) {\n    case IconSize.xsmall:\n      return { width: 16, height: 16, fontSize: 16, lineHeight: 16 };\n    case IconSize.small:\n      return { width: 20, height: 20, fontSize: 20, lineHeight: 20 };\n    case IconSize.medium:\n    default:\n      return { width: 24, height: 24, fontSize: 24, lineHeight: 24 };\n    case IconSize.large:\n      return { width: 30, height: 30, fontSize: 30, lineHeight: 30 };\n    case IconSize.xlarge:\n      return { width: 40, height: 40, fontSize: 40, lineHeight: 40 };\n    case IconSize.xxlarge:\n      return { width: 55, height: 55, fontSize: 55, lineHeight: 55 };\n  }\n};\n\n/**\n * The Icon component.\n */\nexport const Icon: Comp<IconProps, HTMLSpanElement> = forwardRef((props, ref) => {\n  const {\n    'aria-hidden': ariaHidden,\n    'aria-label': ariaLabel,\n    badge,\n    className,\n    color,\n    icon,\n    size = IconSize.medium,\n    svgProps,\n    theme: propsTheme,\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme(propsTheme);\n\n  const { width, height, fontSize, lineHeight } = sizeToDimension(size!);\n\n  return (\n    <StyledIcon\n      {...forwardedProps}\n      $color={color}\n      $width={width}\n      $height={height}\n      $fontSize={fontSize}\n      $lineHeight={lineHeight}\n      $theme={theme}\n      aria-hidden={ariaLabel ? (ariaHidden ? ariaHidden : undefined) : true}\n      aria-label={ariaLabel}\n      className={classNames(Icon.className, className, color ? 'colored' : undefined)}\n      ref={ref as RefObject<HTMLSpanElement>}\n    >\n      {React.cloneElement(\n        typeof icon === 'string' || (Array.isArray(icon) && icon.every((it) => typeof it === 'string')) ? (\n          <svg viewBox=\"0 0 24 24\">\n            {(Array.isArray(icon) ? icon : [icon]).map((path) => (\n              <path key={path} d={path} fill=\"currentColor\" />\n            ))}\n          </svg>\n        ) : React.isValidElement(icon) ? (\n          icon\n        ) : (\n          <></>\n        ),\n        {\n          'aria-hidden': ariaLabel ? (ariaHidden ? ariaHidden : undefined) : true,\n          'aria-label': ariaLabel,\n          focusable: 'false',\n          height,\n          preserveAspectRatio: 'xMidYMid meet',\n          role: 'img',\n          width,\n          ...svgProps,\n        }\n      )}\n      {badge ? badge : null}\n    </StyledIcon>\n  );\n});\nIcon.className = CLASSNAME;\nIcon.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","sizeToDimension","size","IconSize","xsmall","width","height","fontSize","lineHeight","small","medium","large","xlarge","xxlarge","Icon","forwardRef","props","ref","ariaHidden","ariaLabel","badge","className","color","icon","svgProps","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","useTheme","React","createElement","StyledIcon","_extends","$color","$width","$height","$fontSize","$lineHeight","$theme","undefined","classNames","cloneElement","Array","isArray","every","it","viewBox","map","path","key","d","fill","isValidElement","Fragment","_objectSpread","focusable","preserveAspectRatio","role","displayName"],"mappings":"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"}

package/packages/design-system/src/components/icon/_internal/icon.js

@@ -0,0 +1,3 @@
+export { IconSize } from './types.js';
+export { Icon, sizeToDimension } from './Icon2.js';
+//# sourceMappingURL=icon.js.map

package/packages/design-system/src/components/icon/_internal/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/packages/design-system/src/components/icon/_internal/styles.js

@@ -0,0 +1,84 @@
+import styled, { css } from 'styled-components';
+import { baseStyling } from '../../shared/_internal/styles.js';
+import { NotificationsColorPalette, ProductColorPalette, Theme } from '../../../types/_internal/colors.js';
+
+/**
+ * Component style.
+ */
+const StyledIcon = styled.span`
+  position: relative;
+  display: inline-grid;
+  ${baseStyling}
+
+  font-style: normal;
+
+  svg {
+    vertical-align: -0.125em;
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  ${_ref => {
+  let {
+    $color,
+    $theme
+  } = _ref;
+  return $color && Object.keys(NotificationsColorPalette).indexOf($color) !== -1 ? css`
+          color: var(--redsift-color-notifications-${$color}-primary);
+        ` : $color && Object.keys(ProductColorPalette).indexOf($color) !== -1 ? css`
+          color: var(--redsift-color-product-${$color});
+        ` : css`
+          color: ${$color || css`var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'})`};
+        `;
+}}
+
+  ${_ref2 => {
+  let {
+    $width,
+    $height,
+    $fontSize,
+    $lineHeight
+  } = _ref2;
+  return css`
+    ${$width ? css`
+          width: ${$width}px;
+        ` : ''}
+    ${$height ? css`
+          height: ${$height}px;
+        ` : ''}
+    ${$fontSize ? css`
+          font-size: ${$fontSize}px;
+        ` : ''}
+    ${$lineHeight ? css`
+          line-height: ${$lineHeight}px;
+        ` : ''}
+
+    & .redsift-badge-standard {
+      grid-column: 1;
+      grid-row: 1;
+      margin-right: unset;
+      ${$width ? css`
+            margin-left: ${$width * 0.75}px;
+          ` : ''}
+      ${$height ? css`
+            margin-top: ${$height * 0.1 - 4}px;
+          ` : ''}
+    }
+
+    & .redsift-badge-dot {
+      grid-column: 1;
+      grid-row: 1;
+      margin-right: unset;
+      ${$width ? css`
+            margin-left: ${$width * 0.8}px;
+          ` : ''}
+      ${$height ? css`
+            margin-top: ${$height * 0.2 - 3}px;
+          ` : ''}
+    }
+  `;
+}}
+`;
+
+export { StyledIcon };
+//# sourceMappingURL=styles.js.map

package/packages/design-system/src/components/icon/_internal/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../src/components/icon/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { NotificationsColorPalette, ProductColorPalette, Theme } from '../../types';\nimport { baseStyling } from '../shared';\nimport { StyledIconProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledIcon = styled.span<StyledIconProps>`\n  position: relative;\n  display: inline-grid;\n  ${baseStyling}\n\n  font-style: normal;\n\n  svg {\n    vertical-align: -0.125em;\n    grid-column: 1;\n    grid-row: 1;\n  }\n\n  ${({ $color, $theme }) =>\n    $color && Object.keys(NotificationsColorPalette).indexOf($color) !== -1\n      ? css`\n          color: var(--redsift-color-notifications-${$color}-primary);\n        `\n      : $color && Object.keys(ProductColorPalette).indexOf($color) !== -1\n      ? css`\n          color: var(--redsift-color-product-${$color});\n        `\n      : css`\n          color: ${$color || css`var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'})`};\n        `}\n\n  ${({ $width, $height, $fontSize, $lineHeight }) => css`\n    ${$width\n      ? css`\n          width: ${$width}px;\n        `\n      : ''}\n    ${$height\n      ? css`\n          height: ${$height}px;\n        `\n      : ''}\n    ${$fontSize\n      ? css`\n          font-size: ${$fontSize}px;\n        `\n      : ''}\n    ${$lineHeight\n      ? css`\n          line-height: ${$lineHeight}px;\n        `\n      : ''}\n\n    & .redsift-badge-standard {\n      grid-column: 1;\n      grid-row: 1;\n      margin-right: unset;\n      ${$width\n        ? css`\n            margin-left: ${$width * 0.75}px;\n          `\n        : ''}\n      ${$height\n        ? css`\n            margin-top: ${$height * 0.1 - 4}px;\n          `\n        : ''}\n    }\n\n    & .redsift-badge-dot {\n      grid-column: 1;\n      grid-row: 1;\n      margin-right: unset;\n      ${$width\n        ? css`\n            margin-left: ${$width * 0.8}px;\n          `\n        : ''}\n      ${$height\n        ? css`\n            margin-top: ${$height * 0.2 - 3}px;\n          `\n        : ''}\n    }\n  `}\n`;\n"],"names":["StyledIcon","styled","span","baseStyling","_ref","$color","$theme","Object","keys","NotificationsColorPalette","indexOf","css","ProductColorPalette","Theme","dark","_ref2","$width","$height","$fontSize","$lineHeight"],"mappings":";;;;AAKA;AACA;AACA;AACaA,MAAAA,UAAU,GAAGC,MAAM,CAACC,IAAsB,CAAA;AACvD;AACA;AACA,EAAA,EAAIC,WAAY,CAAA;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;IAAEC,MAAM;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAF,IAAA,CAAA;AAAA,EAAA,OACnBC,MAAM,IAAIE,MAAM,CAACC,IAAI,CAACC,yBAAyB,CAAC,CAACC,OAAO,CAACL,MAAM,CAAC,KAAK,CAAC,CAAC,GACnEM,GAAI,CAAA;AACZ,mDAAA,EAAqDN,MAAO,CAAA;AAC5D,QAAA,CAAS,GACDA,MAAM,IAAIE,MAAM,CAACC,IAAI,CAACI,mBAAmB,CAAC,CAACF,OAAO,CAACL,MAAM,CAAC,KAAK,CAAC,CAAC,GACjEM,GAAI,CAAA;AACZ,6CAAA,EAA+CN,MAAO,CAAA;AACtD,QAAA,CAAS,GACDM,GAAI,CAAA;AACZ,iBAAA,EAAmBN,MAAM,IAAIM,GAAI,CAAA,4BAAA,EAA8BL,MAAM,KAAKO,KAAK,CAACC,IAAI,GAAG,OAAO,GAAG,aAAc,CAAG,CAAA,CAAA,CAAA;AAClH,QAAS,CAAA,CAAA;AAAA,CAAC,CAAA;AACV;AACA,EAAA,EAAIC,KAAA,IAAA;EAAA,IAAC;IAAEC,MAAM;IAAEC,OAAO;IAAEC,SAAS;AAAEC,IAAAA,WAAAA;AAAY,GAAC,GAAAJ,KAAA,CAAA;AAAA,EAAA,OAAKJ,GAAI,CAAA;AACzD,IAAMK,EAAAA,MAAM,GACJL,GAAI,CAAA;AACZ,iBAAA,EAAmBK,MAAO,CAAA;AAC1B,QAAA,CAAS,GACD,EAAG,CAAA;AACX,IAAMC,EAAAA,OAAO,GACLN,GAAI,CAAA;AACZ,kBAAA,EAAoBM,OAAQ,CAAA;AAC5B,QAAA,CAAS,GACD,EAAG,CAAA;AACX,IAAMC,EAAAA,SAAS,GACPP,GAAI,CAAA;AACZ,qBAAA,EAAuBO,SAAU,CAAA;AACjC,QAAA,CAAS,GACD,EAAG,CAAA;AACX,IAAMC,EAAAA,WAAW,GACTR,GAAI,CAAA;AACZ,uBAAA,EAAyBQ,WAAY,CAAA;AACrC,QAAA,CAAS,GACD,EAAG,CAAA;AACX;AACA;AACA;AACA;AACA;AACA,MAAQH,EAAAA,MAAM,GACJL,GAAI,CAAA;AACd,yBAA2BK,EAAAA,MAAM,GAAG,IAAK,CAAA;AACzC,UAAA,CAAW,GACD,EAAG,CAAA;AACb,MAAQC,EAAAA,OAAO,GACLN,GAAI,CAAA;AACd,wBAAA,EAA0BM,OAAO,GAAG,GAAG,GAAG,CAAE,CAAA;AAC5C,UAAA,CAAW,GACD,EAAG,CAAA;AACb;AACA;AACA;AACA;AACA;AACA;AACA,MAAQD,EAAAA,MAAM,GACJL,GAAI,CAAA;AACd,yBAA2BK,EAAAA,MAAM,GAAG,GAAI,CAAA;AACxC,UAAA,CAAW,GACD,EAAG,CAAA;AACb,MAAQC,EAAAA,OAAO,GACLN,GAAI,CAAA;AACd,wBAAA,EAA0BM,OAAO,GAAG,GAAG,GAAG,CAAE,CAAA;AAC5C,UAAA,CAAW,GACD,EAAG,CAAA;AACb;AACA,EAAG,CAAA,CAAA;AAAA,CAAC,CAAA;AACJ;;;;"}

package/packages/design-system/src/components/icon/_internal/types.js

@@ -0,0 +1,18 @@
+/**
+ * Component size.
+ */
+const IconSize = {
+  xsmall: 'xsmall',
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+  xlarge: 'xlarge',
+  xxlarge: 'xxlarge'
+};
+
+/**
+ * Component props.
+ */
+
+export { IconSize };
+//# sourceMappingURL=types.js.map

package/packages/design-system/src/components/icon/_internal/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../../../../../src/components/icon/types.ts"],"sourcesContent":["import { ComponentProps, ReactElement } from 'react';\nimport {\n  NotificationsColorPalette,\n  LayoutProps,\n  PositioningProps,\n  SpacingProps,\n  ValueOf,\n  ProductColorPalette,\n  Theme,\n} from '../../types';\n\n/**\n * Component size.\n */\nexport const IconSize = {\n  xsmall: 'xsmall',\n  small: 'small',\n  medium: 'medium',\n  large: 'large',\n  xlarge: 'xlarge',\n  xxlarge: 'xxlarge',\n} as const;\nexport type IconSize = ValueOf<typeof IconSize>;\n\nexport type IconDimensions = { width?: number; height?: number; fontSize?: number; lineHeight?: number };\n\n/**\n * Component props.\n */\nexport interface IconProps extends ComponentProps<'span'>, LayoutProps, SpacingProps, PositioningProps {\n  /** Indicates whether the element is exposed to an accessibility API. */\n  'aria-hidden'?: boolean | 'false' | 'true';\n  /** A screen reader only label for the Icon. */\n  'aria-label'?: string;\n  /** Color variant. Either from color palette or hex or rgb strings. */\n  color?: NotificationsColorPalette | ProductColorPalette | (string & {});\n  /** Whether the icon has a badge attached to it. */\n  badge?: ReactElement;\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: string | string[] | ReactElement;\n  /** Icon size. */\n  size?: IconSize | IconDimensions;\n  /** Additional properties to forward to the SVG tag. */\n  svgProps?: ComponentProps<'svg'>;\n  /** Theme. */\n  theme?: Theme;\n}\n\nexport type StyledIconProps = Omit<IconProps, 'color' | 'size' | 'icon' | 'svgProps'> & {\n  $color: IconProps['color'];\n  $width: IconDimensions['width'];\n  $height: IconDimensions['height'];\n  $fontSize: IconDimensions['fontSize'];\n  $lineHeight: IconDimensions['lineHeight'];\n  $theme: IconProps['theme'];\n};\n"],"names":["IconSize","xsmall","small","medium","large","xlarge","xxlarge"],"mappings":"AAWA;AACA;AACA;AACO,MAAMA,QAAQ,GAAG;AACtBC,EAAAA,MAAM,EAAE,QAAQ;AAChBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,MAAM,EAAE,QAAQ;AAChBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,MAAM,EAAE,QAAQ;AAChBC,EAAAA,OAAO,EAAE,SAAA;AACX,EAAU;;AAKV;AACA;AACA;;;;"}

package/packages/design-system/src/components/icon-button/_internal/IconButton.js

@@ -0,0 +1,81 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../../../_virtual/_internal/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useRef } from 'react';
+import classNames from 'classnames';
+import { warnIfNoAccessibleLabelFound } from '../../../utils/_internal/warnIfNoAccessibleLabelFound.js';
+import { StyledIconButton } from './styles.js';
+import { IconButtonVariant } from './types.js';
+import { StyledGradientBorder } from '../../gradient-border/_internal/gradient-border.js';
+import { useTheme } from '../../theme/_internal/useTheme.js';
+import { ButtonsColorPalette } from '../../../types/_internal/colors.js';
+import { ConditionalWrapper } from '../../conditional-wrapper/_internal/ConditionalWrapper.js';
+import { Spinner } from '../../spinner/_internal/Spinner2.js';
+import { Icon } from '../../icon/_internal/Icon2.js';
+
+const _excluded = ["className", "color", "disabled", "icon", "iconProps", "isActive", "isDisabled", "isHovered", "isLoading", "theme", "variant"];
+const COMPONENT_NAME = 'IconButton';
+const CLASSNAME = 'redsift-icon-button';
+
+/**
+ * The Icon Button is a component that contains only one icon as a child, without text.
+ *
+ * This component should use aria-label, aria-labelledby or aria-describedby to make this
+ * component usable with a screen reader.
+ */
+const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
+  const buttonRef = ref || useRef();
+  const {
+      className,
+      color: propsColor,
+      disabled,
+      icon,
+      iconProps,
+      isActive,
+      isDisabled: propsIsDisabled,
+      isHovered,
+      isLoading,
+      theme: propsTheme,
+      variant: propsVariant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const isDisabled = props.isLoading || propsIsDisabled || disabled;
+  const theme = useTheme(propsTheme);
+  const color = Object.values(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';
+  const variant = Object.values(IconButtonVariant).includes(propsVariant) ? propsVariant : 'unstyled';
+  warnIfNoAccessibleLabelFound(props, undefined, 'IconButton');
+  const isGradient = color === ButtonsColorPalette.radar;
+  return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
+    condition: isGradient && variant === IconButtonVariant.secondary,
+    wrapper: children => /*#__PURE__*/React__default.createElement(StyledGradientBorder, {
+      $color: color,
+      $isActive: isActive,
+      $isDisabled: isDisabled,
+      $isHovered: isHovered,
+      $theme: theme
+    }, children)
+  }, /*#__PURE__*/React__default.createElement(StyledIconButton, _extends({
+    type: "button"
+  }, forwardedProps, {
+    $color: color,
+    $isActive: isActive,
+    $isDisabled: isDisabled,
+    $isGradient: isGradient,
+    $isHovered: isHovered,
+    $isLoading: isLoading,
+    $theme: theme,
+    $variant: variant,
+    "aria-disabled": isDisabled,
+    className: classNames(IconButton.className, className),
+    disabled: isDisabled,
+    ref: buttonRef
+  }), isLoading ? /*#__PURE__*/React__default.createElement(Spinner, {
+    size: "small",
+    color: variant === IconButtonVariant.primary ? 'grey-l1' : 'grey-l2'
+  }) : /*#__PURE__*/React__default.createElement(Icon, _extends({}, iconProps, {
+    icon: icon
+  }))));
+});
+IconButton.className = CLASSNAME;
+IconButton.displayName = COMPONENT_NAME;
+
+export { IconButton };
+//# sourceMappingURL=IconButton.js.map

package/packages/design-system/src/components/icon-button/_internal/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","sources":["../../../../../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useRef } from 'react';\nimport classNames from 'classnames';\nimport { ButtonsColorPalette, Comp } from '../../types';\nimport { Icon } from '../icon';\nimport { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound';\nimport { StyledIconButton } from './styles';\nimport { IconButtonProps, IconButtonVariant } from './types';\nimport { Spinner } from '../../components/spinner';\nimport { useTheme } from '../theme';\nimport { ConditionalWrapper } from '../conditional-wrapper';\nimport { StyledGradientBorder } from '../gradient-border';\n\nconst COMPONENT_NAME = 'IconButton';\nconst CLASSNAME = 'redsift-icon-button';\n\n/**\n * The Icon Button is a component that contains only one icon as a child, without text.\n *\n * This component should use aria-label, aria-labelledby or aria-describedby to make this\n * component usable with a screen reader.\n */\nexport const IconButton: Comp<IconButtonProps, HTMLButtonElement> = forwardRef((props, ref) => {\n  const buttonRef = ref || useRef<HTMLButtonElement>();\n\n  const {\n    className,\n    color: propsColor,\n    disabled,\n    icon,\n    iconProps,\n    isActive,\n    isDisabled: propsIsDisabled,\n    isHovered,\n    isLoading,\n    theme: propsTheme,\n    variant: propsVariant,\n    ...forwardedProps\n  } = props;\n  const isDisabled = props.isLoading || propsIsDisabled || disabled;\n\n  const theme = useTheme(propsTheme);\n  const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : 'primary';\n  const variant = Object.values(IconButtonVariant).includes(propsVariant!) ? propsVariant : 'unstyled';\n\n  warnIfNoAccessibleLabelFound(props, undefined, 'IconButton');\n  const isGradient = color === ButtonsColorPalette.radar;\n\n  return (\n    <ConditionalWrapper\n      condition={isGradient && variant === IconButtonVariant.secondary}\n      wrapper={(children) => (\n        <StyledGradientBorder\n          $color={color}\n          $isActive={isActive}\n          $isDisabled={isDisabled}\n          $isHovered={isHovered}\n          $theme={theme}\n        >\n          {children}\n        </StyledGradientBorder>\n      )}\n    >\n      <StyledIconButton\n        type=\"button\"\n        {...forwardedProps}\n        $color={color}\n        $isActive={isActive}\n        $isDisabled={isDisabled}\n        $isGradient={isGradient}\n        $isHovered={isHovered}\n        $isLoading={isLoading}\n        $theme={theme}\n        $variant={variant}\n        aria-disabled={isDisabled}\n        className={classNames(IconButton.className, className)}\n        disabled={isDisabled}\n        ref={buttonRef as RefObject<HTMLButtonElement>}\n      >\n        {isLoading ? (\n          <Spinner size=\"small\" color={variant === IconButtonVariant.primary ? 'grey-l1' : 'grey-l2'} />\n        ) : (\n          <Icon {...iconProps} icon={icon} />\n        )}\n      </StyledIconButton>\n    </ConditionalWrapper>\n  );\n});\nIconButton.className = CLASSNAME;\nIconButton.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","IconButton","forwardRef","props","ref","buttonRef","useRef","className","color","propsColor","disabled","icon","iconProps","isActive","isDisabled","propsIsDisabled","isHovered","isLoading","theme","propsTheme","variant","propsVariant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","Object","values","ButtonsColorPalette","includes","IconButtonVariant","warnIfNoAccessibleLabelFound","undefined","isGradient","radar","React","createElement","ConditionalWrapper","condition","secondary","wrapper","children","StyledGradientBorder","$color","$isActive","$isDisabled","$isHovered","$theme","StyledIconButton","_extends","type","$isGradient","$isLoading","$variant","classNames","Spinner","size","primary","Icon","displayName"],"mappings":"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"}

package/packages/design-system/src/components/icon-button/_internal/icon-button.js

@@ -0,0 +1,3 @@
+export { IconButtonVariant } from './types.js';
+export { IconButton } from './IconButton.js';
+//# sourceMappingURL=icon-button.js.map

package/packages/design-system/src/components/icon-button/_internal/styles.js

@@ -0,0 +1,31 @@
+import styled, { css } from 'styled-components';
+import { IconButtonVariant } from './types.js';
+import { StyledButton } from '../../button/_internal/styles.js';
+
+/**
+ * Component style.
+ */
+const StyledIconButton = styled(StyledButton)`
+  ${_ref => {
+  let {
+    $variant
+  } = _ref;
+  return css`
+    padding: ${$variant === IconButtonVariant.secondary ? '8px' : '9px'};
+  `;
+}};
+
+  ${_ref2 => {
+  let {
+    $isLoading
+  } = _ref2;
+  return $isLoading ? css`
+          & > .redsift-shield {
+            position: relative;
+          }
+        ` : '';
+}}
+`;
+
+export { StyledIconButton };
+//# sourceMappingURL=styles.js.map

package/packages/design-system/src/components/icon-button/_internal/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../src/components/icon-button/styles.ts"],"sourcesContent":["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":["StyledIconButton","styled","StyledButton","_ref","$variant","css","IconButtonVariant","secondary","_ref2","$isLoading"],"mappings":";;;;AAIA;AACA;AACA;MACaA,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,KAAKE,iBAAiB,CAACC,SAAS,GAAG,KAAK,GAAG,KAAM,CAAA;AACxE,EAAG,CAAA,CAAA;AAAA,CAAC,CAAA;AACJ;AACA,EAAA,EAAIC,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAAD,KAAA,CAAA;EAAA,OACfC,UAAU,GACNJ,GAAI,CAAA;AACZ;AACA;AACA;AACA,QAAA,CAAS,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACX;;;;"}

package/packages/design-system/src/components/icon-button/_internal/types.js

@@ -0,0 +1,19 @@
+/**
+ * Component variant.
+ */
+const IconButtonVariant = {
+  primary: 'primary',
+  secondary: 'secondary',
+  unstyled: 'unstyled'
+};
+
+/**
+ * Component color.
+ */
+
+/**
+ * Component props.
+ */
+
+export { IconButtonVariant };
+//# sourceMappingURL=types.js.map

package/packages/design-system/src/components/icon-button/_internal/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../../../../../src/components/icon-button/types.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"],"names":["IconButtonVariant","primary","secondary","unstyled"],"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;;;;"}

package/packages/design-system/src/components/icon-button-link/_internal/IconButtonLink.js

@@ -0,0 +1,76 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../../../_virtual/_internal/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { StyledGradientBorder } from '../../gradient-border/_internal/gradient-border.js';
+import { StyledIconButton } from '../../icon-button/_internal/styles.js';
+import { IconButtonVariant } from '../../icon-button/_internal/types.js';
+import { useTheme } from '../../theme/_internal/useTheme.js';
+import { ButtonsColorPalette } from '../../../types/_internal/colors.js';
+import { ConditionalWrapper } from '../../conditional-wrapper/_internal/ConditionalWrapper.js';
+import { Icon } from '../../icon/_internal/Icon2.js';
+
+const _excluded = ["as", "className", "color", "href", "icon", "iconProps", "isActive", "isDisabled", "isHovered", "target", "theme", "variant"];
+const COMPONENT_NAME = 'IconButtonLink';
+const CLASSNAME = 'redsift-icon-button-link';
+
+/**
+ * The IconButtonLink is a semantic link that looks like an icon button.
+ *
+ * For a semantic button that looks like an icon button, please use the IconButton component.
+ * For a semantic link that looks like a link, please use the Link component.
+ * For a semantic button that looks like a link, please use the LinkButton component.
+ */
+const IconButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      as,
+      className,
+      color: propsColor,
+      href,
+      icon,
+      iconProps,
+      isActive,
+      isDisabled,
+      isHovered,
+      target,
+      theme: propsTheme,
+      variant: propsVariant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const color = Object.values(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';
+  const variant = Object.values(IconButtonVariant).includes(propsVariant) ? propsVariant : 'unstyled';
+  const isGradient = color === ButtonsColorPalette.radar;
+  return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
+    condition: isGradient && variant === IconButtonVariant.secondary,
+    wrapper: children => /*#__PURE__*/React__default.createElement(StyledGradientBorder, {
+      $color: color,
+      $isActive: isActive,
+      $isDisabled: isDisabled,
+      $isHovered: isHovered,
+      $theme: theme
+    }, children)
+  }, /*#__PURE__*/React__default.createElement(StyledIconButton, _extends({
+    as: as || 'a',
+    role: "link",
+    tabIndex: !isDisabled ? 0 : undefined
+  }, forwardedProps, {
+    $color: color,
+    $isActive: isActive,
+    $isDisabled: isDisabled,
+    $isGradient: isGradient,
+    $isHovered: isHovered,
+    $theme: theme,
+    $variant: variant,
+    className: classNames(IconButtonLink.className, className),
+    href: !isDisabled ? href : undefined,
+    ref: ref,
+    target: target
+  }), /*#__PURE__*/React__default.createElement(Icon, _extends({}, iconProps, {
+    icon: icon
+  }))));
+});
+IconButtonLink.className = CLASSNAME;
+IconButtonLink.displayName = COMPONENT_NAME;
+
+export { IconButtonLink };
+//# sourceMappingURL=IconButtonLink.js.map

package/packages/design-system/src/components/icon-button-link/_internal/IconButtonLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButtonLink.js","sources":["../../../../../../../src/components/icon-button-link/IconButtonLink.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp, ButtonsColorPalette } from '../../types';\nimport { Icon } from '../icon';\nimport { IconButtonLinkProps } from './types';\nimport { useTheme } from '../theme';\nimport { ConditionalWrapper } from '../conditional-wrapper';\nimport { StyledGradientBorder } from '../gradient-border';\nimport { StyledIconButton } from '../icon-button/styles';\nimport { IconButtonVariant } from '../icon-button/types';\n\nconst COMPONENT_NAME = 'IconButtonLink';\nconst CLASSNAME = 'redsift-icon-button-link';\n\n/**\n * The IconButtonLink is a semantic link that looks like an icon button.\n *\n * For a semantic button that looks like an icon button, please use the IconButton component.\n * For a semantic link that looks like a link, please use the Link component.\n * For a semantic button that looks like a link, please use the LinkButton component.\n */\nexport const IconButtonLink: Comp<IconButtonLinkProps, HTMLAnchorElement> = forwardRef((props, ref) => {\n  const {\n    as,\n    className,\n    color: propsColor,\n    href,\n    icon,\n    iconProps,\n    isActive,\n    isDisabled,\n    isHovered,\n    target,\n    theme: propsTheme,\n    variant: propsVariant,\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme(propsTheme);\n  const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : 'primary';\n  const variant = Object.values(IconButtonVariant).includes(propsVariant!) ? propsVariant : 'unstyled';\n  const isGradient = color === ButtonsColorPalette.radar;\n\n  return (\n    <ConditionalWrapper\n      condition={isGradient && variant === IconButtonVariant.secondary}\n      wrapper={(children) => (\n        <StyledGradientBorder\n          $color={color}\n          $isActive={isActive}\n          $isDisabled={isDisabled}\n          $isHovered={isHovered}\n          $theme={theme}\n        >\n          {children}\n        </StyledGradientBorder>\n      )}\n    >\n      <StyledIconButton\n        as={(as || 'a') as any}\n        role=\"link\"\n        tabIndex={!isDisabled ? 0 : undefined}\n        {...forwardedProps}\n        $color={color}\n        $isActive={isActive}\n        $isDisabled={isDisabled}\n        $isGradient={isGradient}\n        $isHovered={isHovered}\n        $theme={theme}\n        $variant={variant}\n        className={classNames(IconButtonLink.className, className)}\n        href={!isDisabled ? href : undefined}\n        ref={ref as RefObject<HTMLAnchorElement>}\n        target={target}\n      >\n        <Icon {...iconProps} icon={icon} />\n      </StyledIconButton>\n    </ConditionalWrapper>\n  );\n});\nIconButtonLink.className = CLASSNAME;\nIconButtonLink.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","IconButtonLink","forwardRef","props","ref","as","className","color","propsColor","href","icon","iconProps","isActive","isDisabled","isHovered","target","theme","propsTheme","variant","propsVariant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","Object","values","ButtonsColorPalette","includes","IconButtonVariant","isGradient","radar","React","createElement","ConditionalWrapper","condition","secondary","wrapper","children","StyledGradientBorder","$color","$isActive","$isDisabled","$isHovered","$theme","StyledIconButton","_extends","role","tabIndex","undefined","$isGradient","$variant","classNames","Icon","displayName"],"mappings":"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"}

package/packages/design-system/src/components/icon-button-link/_internal/icon-button-link.js

@@ -0,0 +1,2 @@
+export { IconButtonLink } from './IconButtonLink.js';
+//# sourceMappingURL=icon-button-link.js.map