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

package/_internal/Grid2.js

@@ -1,32 +1,95 @@
-import { G as GridItemProps } from './types14.js';
-import { ComponentProps } from 'react';
-import { h as StylingProps, I as InternalSpacingProps, G as GridLayoutProps, B as BorderProps } from './styles2.js';
-import { T as Theme } from './colors.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import styled, { css } from 'styled-components';
+import { i as baseStyling, c as baseInternalSpacing, h as baseGrid, f as baseBorder } from './styles4.js';
+import { G as GridItem } from './GridItem.js';
+import { u as useTheme, a as ThemeProvider } from './useTheme.js';
 
 /**
- * Component props.
+ * Component style.
  */
-interface GridProps extends ComponentProps<'div'>, StylingProps, InternalSpacingProps, GridLayoutProps, BorderProps {
-    /** Whether the grid has divider or not. The number of pixels defining the gap between columns and rows is mandatory. This replaces the grid gap property. */
-    divider?: {
-        colGap: number;
-        rowGap: number;
-    };
-    /** Theme. */
-    theme?: Theme;
-}
-type StyledGridProps = GridProps & {
-    $divider: GridProps['divider'];
-    $theme: GridProps['theme'];
-};
+const StyledGrid = styled.div`
+  display: ${_ref => {
+  let {
+    inline
+  } = _ref;
+  return inline ? 'inline-grid' : 'grid';
+}};
+  flex: 1;
+
+  ${baseStyling}
+  ${baseInternalSpacing}
+  ${baseGrid}
+  ${baseBorder}
+
+  ${_ref2 => {
+  let {
+    $divider
+  } = _ref2;
+  return $divider ? css`
+          overflow: hidden;
+          > .redsift-grid-item:not(:empty) {
+            position: relative;
+
+            ::before {
+              content: '';
+              position: absolute;
+              background-color: var(--redsift-color-neutral-light-grey);
+              inline-size: 1px;
+              block-size: 100%;
+              inset-inline-start: calc(${Math.max(1, $divider.colGap / 2)}px * -1);
+            }
+
+            ::after {
+              content: '';
+              position: absolute;
+              background-color: var(--redsift-color-neutral-light-grey);
+              inline-size: 200vw;
+              block-size: 1px;
+              inset-inline-start: -100vw;
+              inset-block-start: calc(${Math.max(1, $divider.rowGap / 2)}px * -1);
+              z-index: 0;
+            }
+          }
+        ` : '';
+}}
+`;
+
+const _excluded = ["children", "className", "divider", "gap", "theme"];
+const COMPONENT_NAME = 'Grid';
+const CLASSNAME = 'redsift-grid';
 
 /**
  * The Grid component.
  */
-declare const BaseGrid: Comp<GridProps, HTMLDivElement>;
-declare const Grid: Comp<GridProps, HTMLDivElement> & {
-    Item: Comp<GridItemProps, HTMLDivElement>;
-};
+const BaseGrid = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      divider,
+      gap,
+      theme: propsTheme
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledGrid, _extends({}, forwardedProps, {
+    gap: divider ? `${divider.rowGap}px ${divider.colGap}px` : gap,
+    className: classNames(BaseGrid.className, className),
+    ref: ref,
+    $divider: divider,
+    $theme: theme
+  }), children));
+});
+BaseGrid.className = CLASSNAME;
+BaseGrid.displayName = COMPONENT_NAME;
+const Grid = Object.assign(BaseGrid, {
+  Item: GridItem
+});
 
-export { BaseGrid as B, GridProps as G, StyledGridProps as S, Grid as a };
+export { BaseGrid as B, Grid as G };
+//# sourceMappingURL=Grid2.js.map

package/_internal/GridItem.d.ts

@@ -0,0 +1,9 @@
+import { G as GridItemProps } from './types.d14.ts';
+import { C as Comp } from './helpers.js';
+
+/**
+ * The GridItem component.
+ */
+declare const GridItem: Comp<GridItemProps, HTMLDivElement>;
+
+export { GridItem as G };

package/_internal/GridItem.js

@@ -1,9 +1,40 @@
-import { G as GridItemProps } from './types14.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import styled from 'styled-components';
+import { i as baseStyling, c as baseInternalSpacing, f as baseBorder } from './styles4.js';
+
+/**
+ * Component style.
+ */
+const StyledGridItem = styled.div`
+  display: inherit;
+
+  ${baseStyling}
+  ${baseInternalSpacing}
+  ${baseBorder}
+`;
+
+const _excluded = ["children", "className"];
+const COMPONENT_NAME = 'GridItem';
+const CLASSNAME = 'redsift-grid-item';
 
 /**
  * The GridItem component.
  */
-declare const GridItem: Comp<GridItemProps, HTMLDivElement>;
+const GridItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React__default.createElement(StyledGridItem, _extends({}, forwardedProps, {
+    className: classNames(GridItem.className, className),
+    ref: ref
+  }), children);
+});
+GridItem.className = CLASSNAME;
+GridItem.displayName = COMPONENT_NAME;
 
 export { GridItem as G };
+//# sourceMappingURL=GridItem.js.map

package/_internal/Heading.d2.ts

@@ -0,0 +1,9 @@
+import { b as HeadingProps } from './types.d15.ts';
+import { C as Comp } from './helpers.js';
+
+/**
+ * The Heading component.
+ */
+declare const Heading: Comp<HeadingProps, HTMLDivElement>;
+
+export { Heading as H };

package/_internal/Heading2.js

@@ -1,9 +1,113 @@
-import { b as HeadingProps } from './types15.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import styled, { css } from 'styled-components';
+import { i as baseStyling } from './styles4.js';
+import { N as NotificationsColorPalette, g as NeutralColorPalette, e as ProductColorPalette } from './colors.js';
+import { F as FontFamily } from './fonts.js';
+import { u as useTheme } from './useTheme.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;
+        ` : '';
+}}
+`;
+
+const _excluded = ["as", "children", "className", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "noWrap", "theme", "variant"];
+const COMPONENT_NAME = 'Heading';
+const CLASSNAME = 'redsift-heading';
 
 /**
  * The Heading component.
  */
-declare const Heading: Comp<HeadingProps, HTMLDivElement>;
+const Heading = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      as,
+      children,
+      className,
+      color,
+      fontFamily = FontFamily.poppins,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      noWrap,
+      theme: propsTheme,
+      variant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  return /*#__PURE__*/React__default.createElement(StyledHeading, _extends({
+    as: as
+  }, forwardedProps, {
+    className: classNames(Heading.className, className),
+    ref: ref,
+    $noWrap: noWrap,
+    $theme: theme,
+    $color: color,
+    $fontFamily: fontFamily,
+    $fontSize: fontSize,
+    $fontWeight: fontWeight,
+    $lineHeight: lineHeight,
+    $variant: variant ? variant : as === 'span' ? 'body' : as
+  }), children);
+});
+Heading.className = CLASSNAME;
+Heading.displayName = COMPONENT_NAME;
 
 export { Heading as H };
+//# sourceMappingURL=Heading2.js.map

package/_internal/Icon.d2.ts

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

package/_internal/Icon2.js

@@ -1,10 +1,211 @@
-import { I as IconSize, a as IconDimensions, b as IconProps } from './types17.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends, _ as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import styled, { css } from 'styled-components';
+import { i as baseStyling } from './styles4.js';
+import { N as NotificationsColorPalette, e as ProductColorPalette, T as Theme } from './colors.js';
+import { u as useTheme } from './useTheme.js';
+
+/**
+ * Component size.
+ */
+const IconSize = {
+  xsmall: 'xsmall',
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+  xlarge: 'xlarge',
+  xxlarge: 'xxlarge'
+};
+
+/**
+ * Component props.
+ */
+
+/**
+ * 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;
+          ` : ''}
+    }
+  `;
+}}
+`;
+
+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
+      };
+  }
+};
 
-declare const sizeToDimension: (size: IconSize | IconDimensions) => IconDimensions;
 /**
  * The Icon component.
  */
-declare const Icon: Comp<IconProps, HTMLSpanElement>;
+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 as I, sizeToDimension as s };
+export { IconSize as I, Icon as a, sizeToDimension as s };
+//# sourceMappingURL=Icon2.js.map

package/_internal/IconButton.d.ts

@@ -0,0 +1,12 @@
+import { b as IconButtonProps } from './types.d16.ts';
+import { C as Comp } from './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 as I };

package/_internal/IconButton.js

@@ -1,5 +1,18 @@
-import { b as IconButtonProps } from './types16.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useRef } from 'react';
+import classNames from 'classnames';
+import { w as warnIfNoAccessibleLabelFound } from './warnIfNoAccessibleLabelFound.js';
+import { I as IconButtonVariant, S as StyledIconButton } from './styles2.js';
+import { StyledGradientBorder } from './gradient-border.js';
+import { u as useTheme } from './useTheme.js';
+import { B as ButtonsColorPalette } from './colors.js';
+import { C as ConditionalWrapper } from './ConditionalWrapper.js';
+import { S as Spinner } from './Spinner2.js';
+import { a as Icon } from './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.
@@ -7,6 +20,61 @@ import { C as Comp } from './helpers.js';
  * 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>;
+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 as I };
+//# sourceMappingURL=IconButton.js.map

package/_internal/IconButtonLink.d.ts

@@ -0,0 +1,28 @@
+import { b as IconButtonProps } from './types.d16.ts';
+import { L as LinkProps } from './types.d18.ts';
+import { C as Comp } from './helpers.js';
+
+/**
+ * Component props.
+ */
+interface IconButtonLinkProps extends Omit<LinkProps, 'color'>, Pick<IconButtonProps, 'icon' | 'iconProps' | 'color' | 'isActive' | 'isDisabled' | 'isHovered' | 'variant' | 'theme'> {
+}
+type StyledIconButtonLinkProps = Omit<IconButtonLinkProps, 'isActive' | 'isDisabled' | 'variant' | 'color' | 'size'> & {
+    $isActive: IconButtonLinkProps['isActive'];
+    $isDisabled: IconButtonLinkProps['isDisabled'];
+    $isHovered: IconButtonLinkProps['isHovered'];
+    $variant: IconButtonLinkProps['variant'];
+    $theme: IconButtonLinkProps['theme'];
+    $color: IconButtonLinkProps['color'];
+};
+
+/**
+ * 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.
+ */
+declare const IconButtonLink: Comp<IconButtonLinkProps, HTMLAnchorElement>;
+
+export { IconButtonLinkProps as I, StyledIconButtonLinkProps as S, IconButtonLink as a };