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

package/_internal/Pill2.js

@@ -1,9 +1,405 @@
-import { a as PillProps } from './types20.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 { rn as RedsiftColorNeutralWhite, qI as RedsiftColorGreyL1, ru as RedsiftColorNeutralBlack, rp as RedsiftColorNeutralLightGrey, sg as RedsiftColorPresentationGreenDefault, sn as RedsiftColorPresentationPinkDefault, su as RedsiftColorPresentationAquaDefault, sB as RedsiftColorPresentationBrownDefault, sI as RedsiftColorPresentationRedDefault, sP as RedsiftColorPresentationYellowDefault, sW as RedsiftColorPresentationPurpleDefault, t1 as RedsiftColorPresentationOrangeDefault, t8 as RedsiftColorPresentationBlueDefault, tf as RedsiftColorPresentationGreyDefault, rt as RedsiftColorNeutralXDarkGrey, rs as RedsiftColorNeutralDarkGrey, rr as RedsiftColorNeutralMidGrey, ro as RedsiftColorNeutralXLightGrey, qd as RedsiftColorRedL4, qY as RedsiftColorYellowL4, qP as RedsiftColorGreenL4, qh as RedsiftColorRedN, r0 as RedsiftColorYellowN, qT as RedsiftColorGreenN } from './redsift-design-tokens.js';
+import { i as baseStyling } from './styles4.js';
+import { N as Number } from './Number2.js';
+import { u as useTheme } from './useTheme.js';
+import { f as PresentationColorPalette } from './colors.js';
+import { i as isComponent } from './isComponent.js';
+import { T as Text } from './Text2.js';
+
+/**
+ * Component size.
+ */
+const PillSize = {
+  small: 'small',
+  large: 'large',
+  xlarge: 'xlarge'
+};
+
+/**
+ * Component props.
+ */
+
+const predefinedColorToHex = {
+  green: RedsiftColorPresentationGreenDefault,
+  pink: RedsiftColorPresentationPinkDefault,
+  aqua: RedsiftColorPresentationAquaDefault,
+  brown: RedsiftColorPresentationBrownDefault,
+  red: RedsiftColorPresentationRedDefault,
+  yellow: RedsiftColorPresentationYellowDefault,
+  purple: RedsiftColorPresentationPurpleDefault,
+  orange: RedsiftColorPresentationOrangeDefault,
+  blue: RedsiftColorPresentationBlueDefault,
+  grey: RedsiftColorPresentationGreyDefault,
+  black: RedsiftColorNeutralBlack,
+  'x-dark-grey': RedsiftColorNeutralXDarkGrey,
+  'dark-grey': RedsiftColorNeutralDarkGrey,
+  'mid-grey': RedsiftColorNeutralMidGrey,
+  'light-grey': RedsiftColorNeutralLightGrey,
+  'x-light-grey': RedsiftColorNeutralXLightGrey,
+  white: RedsiftColorNeutralWhite,
+  error: RedsiftColorRedL4,
+  warning: RedsiftColorYellowL4,
+  success: RedsiftColorGreenL4,
+  'error-dark': RedsiftColorRedN,
+  'warning-dark': RedsiftColorYellowN,
+  'success-dark': RedsiftColorGreenN
+};
+const pickTextColorBasedOnBgColorAdvanced = (bgColor, lightColor, darkColor) => {
+  var color = isPredefinedColor(bgColor) ? predefinedColorToHex[bgColor].substring(1, 7) : bgColor.charAt(0) === '#' ? bgColor.substring(1, 7) : bgColor;
+  var r = parseInt(color.substring(0, 2), 16); // hexToR
+  var g = parseInt(color.substring(2, 4), 16); // hexToG
+  var b = parseInt(color.substring(4, 6), 16); // hexToB
+  var uicolors = [r / 255, g / 255, b / 255];
+  var c = uicolors.map(col => {
+    if (col <= 0.03928) {
+      return col / 12.92;
+    }
+    return Math.pow((col + 0.055) / 1.055, 2.4);
+  });
+  var L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+  return L > 0.179 ? darkColor : lightColor;
+};
+const pickHoverColorBasedOnBgColorAdvanced = bgColor => {
+  var color = bgColor.charAt(0) === '#' ? bgColor.substring(1, 7) : bgColor;
+  if (color.toUpperCase() === 'FFFFFF') {
+    return RedsiftColorNeutralLightGrey;
+  }
+  var r = parseInt(color.substring(0, 2), 16); // hexToR
+  var g = parseInt(color.substring(2, 4), 16); // hexToG
+  var b = parseInt(color.substring(4, 6), 16); // hexToB
+  return `rgba(${r}, ${g}, ${b}, 0.75)`;
+};
+const isPredefinedColor = color => Object.keys(predefinedColorToHex).includes(color);
+
+/**
+ * Component style.
+ */
+const StyledPill = styled.div`
+  align-items: stretch;
+  display: inline-flex;
+  height: fit-content;
+  width: fit-content;
+  ${baseStyling}
+
+  text-align: center;
+
+  ${_ref => {
+  let {
+    $autoBreak
+  } = _ref;
+  return !$autoBreak ? css`
+          text-wrap: nowrap;
+        ` : css`
+          word-break: break-word;
+        `;
+}};
+
+  ${_ref2 => {
+  let {
+    $size
+  } = _ref2;
+  return css`
+    .redsift-icon-button,
+    .redsift-button,
+    .redsift-button-link {
+      width: unset;
+      height: ${$size === PillSize.xlarge ? css`30px` : $size === PillSize.large ? css`24px` : css`22px`};
+      cursor: pointer;
+      padding: 5px;
+      border: none;
+      text-transform: none;
+
+      font-size: ${$size === PillSize.small ? css`14px` : css`15px`};
+
+      > .redsift-icon:not(.colored) {
+        color: inherit;
+      }
+    }
+
+    .redsift-icon-button {
+      width: ${$size === PillSize.xlarge ? css`30px` : $size === PillSize.large ? css`24px` : css`22px`};
+    }
+
+    .redsift-button-link {
+      height: ${$size === PillSize.xlarge ? css`18px` : $size === PillSize.large ? css`12px` : css`10px`};
+    }
+
+    .first.redsift-text,
+    .first.redsift-number,
+    .middle.redsift-text,
+    .middle.redsift-number,
+    .last.redsift-text,
+    .last.redsift-number {
+      padding: 0 8px;
+    }
+  `;
+}}
+
+  ${_ref3 => {
+  let {
+    $color,
+    $hoverColor,
+    $isDisabled,
+    $theme
+  } = _ref3;
+  return isPredefinedColor($color) ? css`
+          .first,
+          .middle,
+          .last {
+            background-color: var(
+              --redsift-color-${$theme}-components-pills-${$color}-${$isDisabled ? 'disabled' : 'default'}-background
+            );
+          }
+
+          & {
+            color: var(
+              --redsift-color-${$theme}-components-pills-${$color}-${$isDisabled ? 'disabled' : 'default'}-text
+            );
+          }
+
+          .redsift-icon-button:hover,
+          .redsift-button:hover,
+          .redsift-button-link:hover {
+            background-color: var(
+              --redsift-color-${$theme}-components-pills-${$color}-${$isDisabled ? 'disabled' : 'hover'}-background
+            );
+          }
+        ` : css`
+          .first,
+          .middle,
+          .last {
+            background-color: ${$color !== null && $color !== void 0 ? $color : RedsiftColorNeutralWhite};
+          }
+
+          & {
+            color: ${pickTextColorBasedOnBgColorAdvanced($color !== null && $color !== void 0 ? $color : RedsiftColorNeutralWhite, $isDisabled ? RedsiftColorNeutralLightGrey : RedsiftColorNeutralWhite, $isDisabled ? RedsiftColorGreyL1 : RedsiftColorNeutralBlack)};
+          }
+
+          .redsift-icon-button:hover,
+          .redsift-button:hover,
+          .redsift-button-link:hover {
+            background-color: ${$hoverColor !== null && $hoverColor !== void 0 ? $hoverColor : pickHoverColorBasedOnBgColorAdvanced($color !== null && $color !== void 0 ? $color : RedsiftColorNeutralWhite)};
+          }
+        `;
+}};
+
+  ${_ref4 => {
+  let {
+    $color,
+    $borderColor,
+    $isDisabled,
+    $theme
+  } = _ref4;
+  return css`
+    .first:not(.last) {
+      border-top-left-radius: 2px;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 2px;
+
+      ${$borderColor ? css`
+            border: 1px solid ${$borderColor};
+          ` : $color === 'white' ? css`
+            border: 1px solid
+              var(--redsift-color-${$theme}-components-pills-${$color}-${$isDisabled ? 'disabled' : 'default'}-border);
+          ` : css`
+            border: 1px solid transparent;
+            border-right: 1px solid white;
+          `}
+    }
+
+    .middle {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+
+      ${$borderColor ? css`
+            border: 1px solid ${$borderColor};
+          ` : $color === 'white' ? css`
+            border: 1px solid
+              var(--redsift-color-${$theme}-components-pills-${$color}-${$isDisabled ? 'disabled' : 'default'}-border);
+          ` : css`
+            border: 1px solid transparent;
+            border-right: 1px solid white;
+          `}
+      border-left: none;
+    }
+
+    .last:not(.first) {
+      border-top-left-radius: 0;
+      border-top-right-radius: 2px;
+      border-bottom-right-radius: 2px;
+      border-bottom-left-radius: 0;
+
+      ${$borderColor ? css`
+            border: 1px solid ${$borderColor};
+          ` : $color === 'white' ? css`
+            border: 1px solid
+              var(--redsift-color-${$theme}-components-pills-${$color}-${$isDisabled ? 'disabled' : 'default'}-border);
+          ` : css`
+            border: 1px solid transparent;
+          `}
+      border-left: none;
+    }
+
+    .first.last {
+      border-top-left-radius: 2px;
+      border-top-right-radius: 2px;
+      border-bottom-right-radius: 2px;
+      border-bottom-left-radius: 2px;
+
+      ${$borderColor ? css`
+            border: 1px solid ${$borderColor};
+          ` : $color === 'white' ? css`
+            border: 1px solid
+              var(--redsift-color-${$theme}-components-pills-${$color}-${$isDisabled ? 'disabled' : 'default'}-border);
+          ` : css`
+            border: 1px solid transparent;
+          `}
+    }
+  `;
+}};
+
+  .redsift-icon {
+    font-size: ${_ref5 => {
+  let {
+    $size
+  } = _ref5;
+  return $size === PillSize.xlarge ? '15px' : $size === PillSize.large ? '12px' : '12px';
+}};
+  }
+
+  &,
+  .redsift-text,
+  .redsift-number,
+  .first,
+  .middle,
+  .last {
+    font-family: var(--redsift-typography-pill-font-family);
+    font-size: ${_ref6 => {
+  let {
+    $size
+  } = _ref6;
+  return $size === PillSize.xlarge ? '15px' : $size === PillSize.large ? '12px' : '10px';
+}};
+    font-weight: var(--redsift-typography-pill-font-weight);
+    line-height: ${_ref7 => {
+  let {
+    $size
+  } = _ref7;
+  return $size === PillSize.xlarge ? '28px' : $size === PillSize.large ? css`var(--redsift-typography-chip-line-height)` : css`var(--redsift-typography-pill-line-height)`;
+}};
+  }
+
+  .redsift-icon:not(.colored) {
+    color: inherit;
+  }
+
+  .redsift-icon {
+    width: ${_ref8 => {
+  let {
+    $size
+  } = _ref8;
+  return $size === PillSize.xlarge ? '17px' : $size === PillSize.large ? '14px' : '12px';
+}};
+    height: ${_ref9 => {
+  let {
+    $size
+  } = _ref9;
+  return $size === PillSize.xlarge ? '17px' : $size === PillSize.large ? '14px' : '12px';
+}};
+
+    > svg {
+      width: 1em;
+      height: 1em;
+    }
+  }
+`;
+
+const _excluded = ["autoBreak", "borderColor", "children", "className", "color", "disabledColor", "hoverColor", "isDisabled", "size", "theme"];
+const COMPONENT_NAME = 'Pill';
+const CLASSNAME = 'redsift-pill';
 
 /**
  * The Pill component.
  */
-declare const Pill: Comp<PillProps, HTMLDivElement>;
+const Pill = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      autoBreak,
+      borderColor,
+      children,
+      className,
+      color: propsColor,
+      disabledColor,
+      hoverColor,
+      isDisabled,
+      size: propsSize,
+      theme: propsTheme
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const color = propsColor || PresentationColorPalette.blue;
+  const size = propsSize || PillSize.large;
+  const childArray = [];
+  React__default.Children.forEach(children, (child, index) => {
+    const currentClassName = React__default.Children.count(children) === 1 ? 'first last' : index === 0 ? 'first' : index === React__default.Children.count(children) - 1 ? 'last' : 'middle';
+    if (isComponent('MenuButton')(child) || isComponent('Select')(child) || isComponent('Dialog')(child) || isComponent('Popover')(child) || isComponent('Tooltip')(child)) {
+      var _child$key;
+      childArray.push( /*#__PURE__*/React__default.cloneElement(child, {
+        key: (_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : index,
+        triggerClassName: currentClassName,
+        variant: 'unstyled',
+        color: child.props.color ? child.props.color : pickTextColorBasedOnBgColorAdvanced(color, 'white', 'black')
+      }));
+    } else if (isComponent('IconButton')(child) || isComponent('Button')(child) || isComponent('ButtonLink')(child)) {
+      var _key;
+      childArray.push( /*#__PURE__*/React__default.cloneElement(child, {
+        key: (_key = child.key) !== null && _key !== void 0 ? _key : index,
+        className: currentClassName,
+        variant: 'unstyled',
+        color: child.props.color ? child.props.color : pickTextColorBasedOnBgColorAdvanced(color, 'white', 'black')
+      }));
+    } else if ( /*#__PURE__*/React__default.isValidElement(child)) {
+      var _key2;
+      childArray.push( /*#__PURE__*/React__default.cloneElement(child, {
+        key: (_key2 = child.key) !== null && _key2 !== void 0 ? _key2 : index,
+        className: currentClassName
+      }));
+    } else if (typeof child === 'string') {
+      childArray.push( /*#__PURE__*/React__default.createElement(Text, {
+        key: index,
+        className: currentClassName
+      }, child));
+    } else if (typeof child === 'number') {
+      childArray.push( /*#__PURE__*/React__default.createElement(Number, {
+        key: index,
+        className: currentClassName,
+        value: child
+      }));
+    } else {
+      childArray.push(child);
+    }
+  });
+  return /*#__PURE__*/React__default.createElement(StyledPill, _extends({}, forwardedProps, {
+    $autoBreak: autoBreak,
+    $borderColor: borderColor,
+    $color: color,
+    $disabledColor: disabledColor,
+    $hoverColor: hoverColor,
+    $isDisabled: isDisabled,
+    $size: size,
+    $theme: theme,
+    className: classNames(Pill.className, className),
+    ref: ref
+  }), childArray);
+});
+Pill.className = CLASSNAME;
+Pill.displayName = COMPONENT_NAME;
 
-export { Pill as P };
+export { PillSize as P, Pill as a };
+//# sourceMappingURL=Pill2.js.map

package/_internal/ProgressBar.js

@@ -1,26 +1,69 @@
-import { LinearProgressProps } from '@mui/material/LinearProgress';
-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 { u as useTheme } from './useTheme.js';
 
 /**
- * Component props.
+ * Component style.
  */
-interface ProgressBarProps extends LinearProgressProps {
-    /** Color of the progress part of the bar. */
-    progressColor?: string;
-    /** Color of the background part of the bar. */
-    backgroundColor?: string;
-    /** Height of the bar. */
-    height?: string;
-    /** Theme. */
-    theme?: Theme;
-    /** Width of the bar. */
-    width?: string;
-}
+const StyledProgressBar = styled.progress`
+  ${_ref => {
+  let {
+    backgroundColor,
+    height,
+    progressColor,
+    width
+  } = _ref;
+  return css`
+    &[value] {
+      // Target only state with a value
+      -webkit-appearance: none;
+      appearance: none;
+      height: ${height || '8px'};
+      width: ${width || '100%'};
+      color: var(--redsift-color-presentation-red-default);
+
+      &::-webkit-progress-bar {
+        background-color: ${backgroundColor || 'var(--redsift-color-neutral-x-light-grey)'};
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) inset;
+      }
+
+      &::-webkit-progress-value {
+        background-color: ${progressColor || 'var(--redsift-color-primary-n)'};
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) inset;
+      }
+    }
+  `;
+}}
+`;
+
+const _excluded = ["className", "theme", "value"];
+const COMPONENT_NAME = 'ProgressBar';
+const CLASSNAME = 'redsift-progress-bar';
 
 /**
  * The Progress bar component.
  */
-declare const ProgressBar: Comp<ProgressBarProps, HTMLProgressElement>;
+const ProgressBar = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      className,
+      theme: propsTheme,
+      value
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  return /*#__PURE__*/React__default.createElement(StyledProgressBar, _extends({}, forwardedProps, {
+    className: classNames(ProgressBar.className, className),
+    ref: ref,
+    variant: "determinate",
+    max: "100",
+    value: value || 0,
+    theme: theme
+  }));
+});
+ProgressBar.className = CLASSNAME;
+ProgressBar.displayName = COMPONENT_NAME;
 
-export { ProgressBarProps as P, ProgressBar as a };
+export { ProgressBar as P };
+//# sourceMappingURL=ProgressBar.js.map