@redsift/design-system 11.5.0 → 11.6.0-muiv5-alpha.1

package/components/heading/Heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.js","sources":["../../../src/components/heading/Heading.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp, FontFamily } from '../../types';\nimport { StyledHeading } from './styles';\nimport { HeadingProps } from './types';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Heading';\nconst CLASSNAME = 'redsift-heading';\n\n/**\n * The Heading component.\n */\nexport const Heading: Comp<HeadingProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    as,\n    children,\n    className,\n    color,\n    fontFamily = FontFamily.poppins,\n    fontSize,\n    fontWeight,\n    lineHeight,\n    noWrap,\n    theme: propsTheme,\n    variant,\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme(propsTheme);\n\n  return (\n    <StyledHeading\n      as={as}\n      {...forwardedProps}\n      className={classNames(Heading.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n      $noWrap={noWrap}\n      $theme={theme}\n      $color={color}\n      $fontFamily={fontFamily}\n      $fontSize={fontSize}\n      $fontWeight={fontWeight}\n      $lineHeight={lineHeight}\n      $variant={variant ? variant : as === 'span' ? 'body' : as}\n    >\n      {children}\n    </StyledHeading>\n  );\n});\nHeading.className = CLASSNAME;\nHeading.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","Heading","forwardRef","props","ref","as","children","className","color","fontFamily","FontFamily","poppins","fontSize","fontWeight","lineHeight","noWrap","theme","propsTheme","variant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","React","createElement","StyledHeading","_extends","classNames","$noWrap","$theme","$color","$fontFamily","$fontSize","$fontWeight","$lineHeight","$variant","displayName"],"mappings":";;;;;;;;AAOA,MAAMA,cAAc,GAAG,SAAS,CAAA;AAChC,MAAMC,SAAS,GAAG,iBAAiB,CAAA;;AAEnC;AACA;AACA;AACO,MAAMC,OAA2C,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACpF,MAAM;MACJC,EAAE;MACFC,QAAQ;MACRC,SAAS;MACTC,KAAK;MACLC,UAAU,GAAGC,UAAU,CAACC,OAAO;MAC/BC,QAAQ;MACRC,UAAU;MACVC,UAAU;MACVC,MAAM;AACNC,MAAAA,KAAK,EAAEC,UAAU;AACjBC,MAAAA,OAAAA;AAEF,KAAC,GAAGf,KAAK;AADJgB,IAAAA,cAAc,GAAAC,wBAAA,CACfjB,KAAK,EAAAkB,SAAA,CAAA,CAAA;AAET,EAAA,MAAML,KAAK,GAAGM,QAAQ,CAACL,UAAU,CAAC,CAAA;AAElC,EAAA,oBACEM,cAAA,CAAAC,aAAA,CAACC,aAAa,EAAAC,QAAA,CAAA;AACZrB,IAAAA,EAAE,EAAEA,EAAAA;AAAG,GAAA,EACHc,cAAc,EAAA;IAClBZ,SAAS,EAAEoB,UAAU,CAAC1B,OAAO,CAACM,SAAS,EAAEA,SAAS,CAAE;AACpDH,IAAAA,GAAG,EAAEA,GAAiC;AACtCwB,IAAAA,OAAO,EAAEb,MAAO;AAChBc,IAAAA,MAAM,EAAEb,KAAM;AACdc,IAAAA,MAAM,EAAEtB,KAAM;AACduB,IAAAA,WAAW,EAAEtB,UAAW;AACxBuB,IAAAA,SAAS,EAAEpB,QAAS;AACpBqB,IAAAA,WAAW,EAAEpB,UAAW;AACxBqB,IAAAA,WAAW,EAAEpB,UAAW;IACxBqB,QAAQ,EAAEjB,OAAO,GAAGA,OAAO,GAAGb,EAAE,KAAK,MAAM,GAAG,MAAM,GAAGA,EAAAA;AAAG,GAAA,CAAA,EAEzDC,QACY,CAAC,CAAA;AAEpB,CAAC,EAAC;AACFL,OAAO,CAACM,SAAS,GAAGP,SAAS,CAAA;AAC7BC,OAAO,CAACmC,WAAW,GAAGrC,cAAc;;;;"}

package/components/heading/styles.js

@@ -0,0 +1,67 @@
+import styled, { css } from 'styled-components';
+import { baseStyling } from '../shared/styles.js';
+import { NotificationsColorPalette, NeutralColorPalette, ProductColorPalette } from '../../types/colors.js';
+
+/**
+ * Component style.
+ */
+const StyledHeading = styled.span`
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+
+  ${baseStyling}
+
+  ${_ref => {
+  let {
+    $color,
+    $theme
+  } = _ref;
+  return $color && $color === 'radar' ? css`
+          background: linear-gradient(90deg, #51b78e 0%, #0081c3 100%);
+          background-clip: text;
+          color: transparent;
+        ` : Object.keys(NotificationsColorPalette).indexOf($color) !== -1 ? css`
+          color: var(--redsift-color-notifications-${$color}-primary);
+        ` : Object.keys(NeutralColorPalette).indexOf($color) !== -1 ? css`
+          color: var(--redsift-color-neutral-${$color});
+        ` : Object.keys(ProductColorPalette).indexOf($color) !== -1 ? css`
+          color: var(--redsift-color-product-${$color});
+        ` : css`
+          color: ${$color || css`var(--redsift-color-${$theme}-components-text-primary)`};
+        `;
+}}
+
+  ${_ref2 => {
+  let {
+    $variant,
+    $fontFamily,
+    $fontSize,
+    $fontWeight,
+    $lineHeight
+  } = _ref2;
+  return css`
+    font-family: ${$fontFamily ? css`var(--redsift-typography-font-family-${$fontFamily})` : css`var(--redsift-typography-${$variant !== null && $variant !== void 0 ? $variant : 'body'}-font-family)`};
+    font-size: ${$fontSize ? $fontSize : css`var(--redsift-typography-${$variant !== null && $variant !== void 0 ? $variant : 'body'}-font-size)`};
+    font-weight: ${$fontWeight ? $fontWeight : css`var(--redsift-typography-${$variant !== null && $variant !== void 0 ? $variant : 'body'}-font-weight)`};
+    line-height: ${$lineHeight ? $lineHeight : css`var(--redsift-typography-${$variant !== null && $variant !== void 0 ? $variant : 'body'}-line-height)`};
+  `;
+}}
+
+  ${_ref3 => {
+  let {
+    $noWrap
+  } = _ref3;
+  return $noWrap ? css`
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        ` : '';
+}}
+`;
+
+export { StyledHeading };
+//# sourceMappingURL=styles.js.map

package/components/heading/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/heading/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledHeadingProps } from './types';\nimport { NotificationsColorPalette, NeutralColorPalette, ProductColorPalette } from '../../types';\n\n/**\n * Component style.\n */\nexport const StyledHeading = styled.span<StyledHeadingProps>`\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-size: 100%;\n  font: inherit;\n  vertical-align: baseline;\n\n  ${baseStyling}\n\n  ${({ $color, $theme }) =>\n    $color && $color === 'radar'\n      ? css`\n          background: linear-gradient(90deg, #51b78e 0%, #0081c3 100%);\n          background-clip: text;\n          color: transparent;\n        `\n      : Object.keys(NotificationsColorPalette).indexOf($color!) !== -1\n      ? css`\n          color: var(--redsift-color-notifications-${$color}-primary);\n        `\n      : Object.keys(NeutralColorPalette).indexOf($color!) !== -1\n      ? css`\n          color: var(--redsift-color-neutral-${$color});\n        `\n      : 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-${$theme}-components-text-primary)`};\n        `}\n\n  ${({ $variant, $fontFamily, $fontSize, $fontWeight, $lineHeight }) => css`\n    font-family: ${$fontFamily\n      ? css`var(--redsift-typography-font-family-${$fontFamily})`\n      : css`var(--redsift-typography-${$variant ?? 'body'}-font-family)`};\n    font-size: ${$fontSize ? $fontSize : css`var(--redsift-typography-${$variant ?? 'body'}-font-size)`};\n    font-weight: ${$fontWeight ? $fontWeight : css`var(--redsift-typography-${$variant ?? 'body'}-font-weight)`};\n    line-height: ${$lineHeight ? $lineHeight : css`var(--redsift-typography-${$variant ?? 'body'}-line-height)`};\n  `}\n\n  ${({ $noWrap }) =>\n    $noWrap\n      ? css`\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        `\n      : ''}\n`;\n"],"names":["StyledHeading","styled","span","baseStyling","_ref","$color","$theme","css","Object","keys","NotificationsColorPalette","indexOf","NeutralColorPalette","ProductColorPalette","_ref2","$variant","$fontFamily","$fontSize","$fontWeight","$lineHeight","_ref3","$noWrap"],"mappings":";;;;AAKA;AACA;AACA;AACaA,MAAAA,aAAa,GAAGC,MAAM,CAACC,IAAyB,CAAA;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,WAAY,CAAA;AAChB;AACA,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;IAAEC,MAAM;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAF,IAAA,CAAA;AAAA,EAAA,OACnBC,MAAM,IAAIA,MAAM,KAAK,OAAO,GACxBE,GAAI,CAAA;AACZ;AACA;AACA;AACA,QAAA,CAAS,GACDC,MAAM,CAACC,IAAI,CAACC,yBAAyB,CAAC,CAACC,OAAO,CAACN,MAAO,CAAC,KAAK,CAAC,CAAC,GAC9DE,GAAI,CAAA;AACZ,mDAAA,EAAqDF,MAAO,CAAA;AAC5D,QAAA,CAAS,GACDG,MAAM,CAACC,IAAI,CAACG,mBAAmB,CAAC,CAACD,OAAO,CAACN,MAAO,CAAC,KAAK,CAAC,CAAC,GACxDE,GAAI,CAAA;AACZ,6CAAA,EAA+CF,MAAO,CAAA;AACtD,QAAA,CAAS,GACDG,MAAM,CAACC,IAAI,CAACI,mBAAmB,CAAC,CAACF,OAAO,CAACN,MAAO,CAAC,KAAK,CAAC,CAAC,GACxDE,GAAI,CAAA;AACZ,6CAAA,EAA+CF,MAAO,CAAA;AACtD,QAAA,CAAS,GACDE,GAAI,CAAA;AACZ,iBAAA,EAAmBF,MAAM,IAAIE,GAAI,CAAA,oBAAA,EAAsBD,MAAO,CAA2B,yBAAA,CAAA,CAAA;AACzF,QAAS,CAAA,CAAA;AAAA,CAAC,CAAA;AACV;AACA,EAAA,EAAIQ,KAAA,IAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC,WAAW;IAAEC,SAAS;IAAEC,WAAW;AAAEC,IAAAA,WAAAA;AAAY,GAAC,GAAAL,KAAA,CAAA;AAAA,EAAA,OAAKP,GAAI,CAAA;AAC5E,iBAAA,EAAmBS,WAAW,GACtBT,GAAI,CAAuCS,qCAAAA,EAAAA,WAAY,GAAE,GACzDT,GAAI,CAA2BQ,yBAAAA,EAAAA,QAAQ,aAARA,QAAQ,KAAA,KAAA,CAAA,GAARA,QAAQ,GAAI,MAAO,CAAe,aAAA,CAAA,CAAA;AACzE,eAAA,EAAiBE,SAAS,GAAGA,SAAS,GAAGV,GAAI,CAAA,yBAAA,EAA2BQ,QAAQ,KAAA,IAAA,IAARA,QAAQ,KAAA,KAAA,CAAA,GAARA,QAAQ,GAAI,MAAO,CAAa,WAAA,CAAA,CAAA;AACxG,iBAAA,EAAmBG,WAAW,GAAGA,WAAW,GAAGX,GAAI,CAAA,yBAAA,EAA2BQ,QAAQ,KAAA,IAAA,IAARA,QAAQ,KAAA,KAAA,CAAA,GAARA,QAAQ,GAAI,MAAO,CAAe,aAAA,CAAA,CAAA;AAChH,iBAAA,EAAmBI,WAAW,GAAGA,WAAW,GAAGZ,GAAI,CAAA,yBAAA,EAA2BQ,QAAQ,KAAA,IAAA,IAARA,QAAQ,KAAA,KAAA,CAAA,GAARA,QAAQ,GAAI,MAAO,CAAe,aAAA,CAAA,CAAA;AAChH,EAAG,CAAA,CAAA;AAAA,CAAC,CAAA;AACJ;AACA,EAAA,EAAIK,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,OAAAA;AAAQ,GAAC,GAAAD,KAAA,CAAA;EAAA,OACZC,OAAO,GACHd,GAAI,CAAA;AACZ;AACA;AACA;AACA,QAAA,CAAS,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACX;;;;"}

package/components/heading/types.d.ts

@@ -0,0 +1,62 @@
+import { ComponentProps } from 'react';
+import { FontFamily } from '../../types/fonts.js';
+import { ValueOf } from '../../types/helpers.js';
+import { StylingProps } from '../../types/styles.js';
+import { NotificationsColorPalette, NeutralColorPalette, Theme } from '../../types/colors.js';
+
+/**
+ * Component variant.
+ */
+declare const HeadingVariant: {
+    readonly h1: "h1";
+    readonly h2: "h2";
+    readonly h3: "h3";
+    readonly h4: "h4";
+    readonly h5: "h5";
+    readonly body: "body";
+};
+type HeadingVariant = ValueOf<typeof HeadingVariant>;
+declare const HeadingComponent: {
+    readonly h1: "h1";
+    readonly h2: "h2";
+    readonly h3: "h3";
+    readonly h4: "h4";
+    readonly h5: "h5";
+    readonly span: "span";
+};
+type HeadingComponent = ValueOf<typeof HeadingComponent>;
+/**
+ * Component props.
+ */
+interface HeadingProps extends ComponentProps<'span'>, StylingProps {
+    /** The actual component rendered in the DOM. */
+    as: HeadingComponent;
+    /** Color variant. Either from color palette or hex or rgb strings. */
+    color?: NotificationsColorPalette | NeutralColorPalette | 'radar' | (string & {});
+    /** Font family. */
+    fontFamily?: FontFamily;
+    /** Font size. */
+    fontSize?: string;
+    /** Font weight. */
+    fontWeight?: string;
+    /** Line height. */
+    lineHeight?: string;
+    /** Whether the text will truncate with a text overflow ellipsis or wrap. */
+    noWrap?: boolean;
+    /** Theme. */
+    theme?: Theme;
+    /** The component the Heading will look like. */
+    variant?: HeadingVariant;
+}
+type StyledHeadingProps = Omit<HeadingProps, 'color' | 'noWrap'> & {
+    $color: HeadingProps['color'];
+    $fontFamily?: HeadingProps['fontFamily'];
+    $fontSize: HeadingProps['fontSize'];
+    $fontWeight: HeadingProps['fontWeight'];
+    $lineHeight: HeadingProps['lineHeight'];
+    $noWrap: HeadingProps['noWrap'];
+    $theme: HeadingProps['theme'];
+    $variant: HeadingProps['variant'];
+};
+
+export { HeadingComponent, HeadingProps, HeadingVariant, StyledHeadingProps };

package/components/heading/types.js

@@ -0,0 +1,26 @@
+/**
+ * Component variant.
+ */
+const HeadingVariant = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  body: 'body'
+};
+const HeadingComponent = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  span: 'span'
+};
+
+/**
+ * Component props.
+ */
+
+export { HeadingComponent, HeadingVariant };
+//# sourceMappingURL=types.js.map

package/components/heading/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/heading/types.ts"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { FontFamily, NeutralColorPalette, NotificationsColorPalette, Theme, ValueOf } from '../../types';\nimport { StylingProps } from '../../types';\n\n/**\n * Component variant.\n */\nexport const HeadingVariant = {\n  h1: 'h1',\n  h2: 'h2',\n  h3: 'h3',\n  h4: 'h4',\n  h5: 'h5',\n  body: 'body',\n} as const;\nexport type HeadingVariant = ValueOf<typeof HeadingVariant>;\n\nexport const HeadingComponent = {\n  h1: 'h1',\n  h2: 'h2',\n  h3: 'h3',\n  h4: 'h4',\n  h5: 'h5',\n  span: 'span',\n} as const;\nexport type HeadingComponent = ValueOf<typeof HeadingComponent>;\n\n/**\n * Component props.\n */\nexport interface HeadingProps extends ComponentProps<'span'>, StylingProps {\n  /** The actual component rendered in the DOM. */\n  as: HeadingComponent;\n  /** Color variant. Either from color palette or hex or rgb strings. */\n  color?: NotificationsColorPalette | NeutralColorPalette | 'radar' | (string & {});\n  /** Font family. */\n  fontFamily?: FontFamily;\n  /** Font size. */\n  fontSize?: string;\n  /** Font weight. */\n  fontWeight?: string;\n  /** Line height. */\n  lineHeight?: string;\n  /** Whether the text will truncate with a text overflow ellipsis or wrap. */\n  noWrap?: boolean;\n  /** Theme. */\n  theme?: Theme;\n  /** The component the Heading will look like. */\n  variant?: HeadingVariant;\n}\n\nexport type StyledHeadingProps = Omit<HeadingProps, 'color' | 'noWrap'> & {\n  $color: HeadingProps['color'];\n  $fontFamily?: HeadingProps['fontFamily'];\n  $fontSize: HeadingProps['fontSize'];\n  $fontWeight: HeadingProps['fontWeight'];\n  $lineHeight: HeadingProps['lineHeight'];\n  $noWrap: HeadingProps['noWrap'];\n  $theme: HeadingProps['theme'];\n  $variant: HeadingProps['variant'];\n};\n"],"names":["HeadingVariant","h1","h2","h3","h4","h5","body","HeadingComponent","span"],"mappings":"AAIA;AACA;AACA;AACO,MAAMA,cAAc,GAAG;AAC5BC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,IAAI,EAAE,MAAA;AACR,EAAU;AAGH,MAAMC,gBAAgB,GAAG;AAC9BN,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRG,EAAAA,IAAI,EAAE,MAAA;AACR,EAAU;;AAGV;AACA;AACA;;;;"}

package/components/icon/Icon.d.ts

@@ -0,0 +1,10 @@
+import { IconSize, IconDimensions, IconProps } from './types.js';
+import { Comp } from '../../types/helpers.js';
+
+declare const sizeToDimension: (size: IconSize | IconDimensions) => IconDimensions;
+/**
+ * The Icon component.
+ */
+declare const Icon: Comp<IconProps, HTMLSpanElement>;
+
+export { Icon, sizeToDimension };

package/components/icon/Icon.js

@@ -0,0 +1,116 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_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/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=Icon.js.map

package/components/icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.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/components/icon/styles.js

@@ -0,0 +1,84 @@
+import styled, { css } from 'styled-components';
+import { baseStyling } from '../shared/styles.js';
+import { NotificationsColorPalette, ProductColorPalette, Theme } from '../../types/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/components/icon/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/components/icon/types.d.ts

@@ -0,0 +1,57 @@
+import { ComponentProps, ReactElement } from 'react';
+import { LayoutProps, SpacingProps, PositioningProps } from '../../types/styles.js';
+import { NotificationsColorPalette, ProductColorPalette, Theme } from '../../types/colors.js';
+import { ValueOf } from '../../types/helpers.js';
+
+/**
+ * Component size.
+ */
+declare const IconSize: {
+    readonly xsmall: "xsmall";
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly xlarge: "xlarge";
+    readonly xxlarge: "xxlarge";
+};
+type IconSize = ValueOf<typeof IconSize>;
+type IconDimensions = {
+    width?: number;
+    height?: number;
+    fontSize?: number;
+    lineHeight?: number;
+};
+/**
+ * Component props.
+ */
+interface IconProps extends ComponentProps<'span'>, LayoutProps, SpacingProps, PositioningProps {
+    /** Indicates whether the element is exposed to an accessibility API. */
+    'aria-hidden'?: boolean | 'false' | 'true';
+    /** A screen reader only label for the Icon. */
+    'aria-label'?: string;
+    /** Color variant. Either from color palette or hex or rgb strings. */
+    color?: NotificationsColorPalette | ProductColorPalette | (string & {});
+    /** Whether the icon has a badge attached to it. */
+    badge?: ReactElement;
+    /**
+     * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />
+     * Can also be a ReactElement.
+     */
+    icon: string | string[] | ReactElement;
+    /** Icon size. */
+    size?: IconSize | IconDimensions;
+    /** Additional properties to forward to the SVG tag. */
+    svgProps?: ComponentProps<'svg'>;
+    /** Theme. */
+    theme?: Theme;
+}
+type StyledIconProps = Omit<IconProps, 'color' | 'size' | 'icon' | 'svgProps'> & {
+    $color: IconProps['color'];
+    $width: IconDimensions['width'];
+    $height: IconDimensions['height'];
+    $fontSize: IconDimensions['fontSize'];
+    $lineHeight: IconDimensions['lineHeight'];
+    $theme: IconProps['theme'];
+};
+
+export { IconDimensions, IconProps, IconSize, StyledIconProps };

package/components/icon/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/components/icon/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/components/icon-button/IconButton.d.ts

@@ -0,0 +1,12 @@
+import { IconButtonProps } from './types.js';
+import { Comp } from '../../types/helpers.js';
+
+/**
+ * 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.
+ */
+declare const IconButton: Comp<IconButtonProps, HTMLButtonElement>;
+
+export { IconButton };

package/components/icon-button/IconButton.js

@@ -0,0 +1,81 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useRef } from 'react';
+import classNames from 'classnames';
+import { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound.js';
+import { StyledIconButton } from './styles.js';
+import { IconButtonVariant } from './types.js';
+import { StyledGradientBorder } from '../gradient-border/index.js';
+import { useTheme } from '../theme/useTheme.js';
+import { ButtonsColorPalette } from '../../types/colors.js';
+import { ConditionalWrapper } from '../conditional-wrapper/ConditionalWrapper.js';
+import { Spinner } from '../spinner/Spinner.js';
+import { Icon } from '../icon/Icon.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/components/icon-button/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/components/icon-button/styles.js

@@ -0,0 +1,31 @@
+import styled, { css } from 'styled-components';
+import { IconButtonVariant } from './types.js';
+import { StyledButton } from '../button/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