@redsift/design-system 11.6.0-muiv5-alpha.4 → 11.6.0-muiv5-alpha.6

package/components/heading/Heading.js.map

@@ -1 +0,0 @@
-{"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,KAAA,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

@@ -1,67 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,62 +0,0 @@
-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

@@ -1,26 +0,0 @@
-/**
- * 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

@@ -1 +0,0 @@
-{"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

@@ -1,10 +0,0 @@
-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

@@ -1,116 +0,0 @@
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { 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.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.cloneElement(typeof icon === 'string' || Array.isArray(icon) && icon.every(it => typeof it === 'string') ? /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 24 24"
-  }, (Array.isArray(icon) ? icon : [icon]).map(path => /*#__PURE__*/React.createElement("path", {
-    key: path,
-    d: path,
-    fill: "currentColor"
-  }))) : /*#__PURE__*/React.isValidElement(icon) ? icon : /*#__PURE__*/React.createElement(React.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

@@ -1 +0,0 @@
-{"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

@@ -1,84 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,57 +0,0 @@
-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

@@ -1,18 +0,0 @@
-/**
- * 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

@@ -1 +0,0 @@
-{"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

@@ -1,12 +0,0 @@
-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

@@ -1,81 +0,0 @@
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { 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.createElement(ConditionalWrapper, {
-    condition: isGradient && variant === IconButtonVariant.secondary,
-    wrapper: children => /*#__PURE__*/React.createElement(StyledGradientBorder, {
-      $color: color,
-      $isActive: isActive,
-      $isDisabled: isDisabled,
-      $isHovered: isHovered,
-      $theme: theme
-    }, children)
-  }, /*#__PURE__*/React.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.createElement(Spinner, {
-    size: "small",
-    color: variant === IconButtonVariant.primary ? 'grey-l1' : 'grey-l2'
-  }) : /*#__PURE__*/React.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

@@ -1 +0,0 @@
-{"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

@@ -1,31 +0,0 @@
-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