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

package/_internal/Breadcrumbs2.js

@@ -1,29 +1,94 @@
-import { B as BreadcrumbItemProps } from './types3.js';
-import { ComponentProps } from 'react';
-import { h as StylingProps } 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 { w as warnIfNoAccessibleLabelFound } from './warnIfNoAccessibleLabelFound.js';
+import styled, { css } from 'styled-components';
+import { i as baseStyling } from './styles4.js';
+import { f as filterComponents } from './filterComponents.js';
+import { B as BreadcrumbItem } from './BreadcrumbItem.js';
+import { u as useTheme, a as ThemeProvider } from './useTheme.js';
 
 /**
- * Component props.
+ * Component style.
  */
-interface BreadcrumbsProps extends ComponentProps<'nav'>, StylingProps {
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
-    /** Theme. */
-    theme?: Theme;
-}
-type StyledBreadcrumbsProps = Omit<BreadcrumbsProps, 'isDisabled'> & {
-    $isDisabled: BreadcrumbsProps['isDisabled'];
-    $theme: BreadcrumbsProps['theme'];
-};
+const StyledBreadcrumbs = styled.nav`
+  ${baseStyling}
+
+  ol {
+    display: inline-flex;
+    list-style: none;
+    padding: unset;
+  }
+
+  .redsift-breadcrumbs__separator {
+    font-family: var(--redsift-typography-body-font-family);
+    font-size: var(--redsift-typography-body-font-size);
+    font-weight: var(--redsift-typography-body-font-weight);
+    line-height: var(--redsift-typography-body-line-height);
+    margin: 0px 4px;
+
+    ${_ref => {
+  let {
+    $isDisabled,
+    $theme
+  } = _ref;
+  return $isDisabled ? css`
+            color: var(--redsift-color-neutral-mid-grey);
+          ` : css`
+            color: var(--redsift-color-${$theme}-components-text-primary);
+          `;
+}}
+  }
+`;
+
+const _excluded = ["children", "className", "isDisabled", "theme"];
+const COMPONENT_NAME = 'Breadcrumbs';
+const CLASSNAME = 'redsift-breadcrumbs';
 
 /**
  * The Breadcrumbs components is a list of links to the parent pages of the current page in hierarchical order.
  */
-declare const BaseBreadcrumbs: Comp<BreadcrumbsProps, HTMLElement>;
-declare const Breadcrumbs: Comp<BreadcrumbsProps, HTMLElement> & {
-    Item: Comp<BreadcrumbItemProps, HTMLAnchorElement>;
-};
+const BaseBreadcrumbs = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      isDisabled,
+      theme: propsTheme
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  warnIfNoAccessibleLabelFound(props, undefined, 'Breadcrumbs');
+  const theme = useTheme(propsTheme);
+  const childArray = filterComponents([Breadcrumbs.Item])(children);
+  const breadcrumbItems = childArray.map((child, index) => {
+    var _child$key;
+    const isCurrent = index === childArray.length - 1;
+    return /*#__PURE__*/React__default.createElement("li", {
+      key: index
+    }, /*#__PURE__*/React__default.createElement(Breadcrumbs.Item, _extends({
+      isDisabled: child.props.isDisabled || isDisabled || undefined
+    }, child.props, {
+      key: (_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : index,
+      isCurrent: isCurrent
+    })), isCurrent === false ? /*#__PURE__*/React__default.createElement("span", {
+      className: `${BaseBreadcrumbs.className}__separator`
+    }, '/') : null);
+  });
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledBreadcrumbs, _extends({}, forwardedProps, {
+    $isDisabled: isDisabled,
+    $theme: theme,
+    className: classNames(BaseBreadcrumbs.className, className),
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement("ol", null, breadcrumbItems)));
+});
+BaseBreadcrumbs.className = CLASSNAME;
+BaseBreadcrumbs.displayName = COMPONENT_NAME;
+const Breadcrumbs = Object.assign(BaseBreadcrumbs, {
+  Item: BreadcrumbItem
+});
 
-export { BreadcrumbsProps as B, StyledBreadcrumbsProps as S, BaseBreadcrumbs as a, Breadcrumbs as b };
+export { BaseBreadcrumbs as B, Breadcrumbs as a };
+//# sourceMappingURL=Breadcrumbs2.js.map

package/_internal/Button2.js

@@ -1,22 +1,17 @@
-import * as styled_components from 'styled-components';
-import { b as ButtonProps, B as ButtonVariant } from './types4.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, useRef } from 'react';
+import classNames from 'classnames';
+import { B as ButtonVariant, S as StyledButton } from './styles.js';
+import { StyledGradientBorder } from './gradient-border.js';
+import { B as ButtonsColorPalette } from './colors.js';
+import { C as ConditionalWrapper } from './ConditionalWrapper.js';
+import { a as Icon } from './Icon2.js';
+import { S as Spinner } from './Spinner2.js';
+import { u as useTheme } from './useTheme.js';
 
-/**
- * Component style.
- */
-declare const StyledButton: styled_components.StyledComponent<"button", any, ButtonProps & {
-    $color: string | undefined;
-    $fullWidth?: boolean | undefined;
-    $isActive: boolean | undefined;
-    $isDisabled: boolean | undefined;
-    $isGradient: boolean;
-    $isHovered: boolean | undefined;
-    $isLoading: boolean | undefined;
-    $theme: Theme | undefined;
-    $variant: ButtonVariant | undefined;
-}, never>;
+const _excluded = ["children", "className", "color", "disabled", "fullWidth", "isActive", "isDisabled", "isHovered", "isLoading", "leftIcon", "leftIconProps", "rightIcon", "rightIconProps", "theme", "variant"];
+const COMPONENT_NAME = 'Button';
+const CLASSNAME = 'redsift-button';
 
 /**
  * The Button is a semantic button that looks like a button.
@@ -25,6 +20,72 @@ declare const StyledButton: styled_components.StyledComponent<"button", any, But
  * 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 Button: Comp<ButtonProps, HTMLButtonElement>;
+const Button = /*#__PURE__*/forwardRef((props, ref) => {
+  const _ref = useRef();
+  const buttonRef = ref || _ref;
+  const {
+      children,
+      className,
+      color: propsColor,
+      disabled,
+      fullWidth,
+      isActive,
+      isDisabled: propsIsDisabled,
+      isHovered,
+      isLoading,
+      leftIcon,
+      leftIconProps,
+      rightIcon,
+      rightIconProps,
+      theme: propsTheme,
+      variant: propsVariant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const isDisabled = isLoading || propsIsDisabled || disabled;
+  const theme = useTheme(propsTheme);
+  const color = Object.values(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';
+  const variant = Object.values(ButtonVariant).includes(propsVariant) ? propsVariant : 'primary';
+  const isGradient = color === ButtonsColorPalette.radar;
+  return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
+    condition: isGradient && variant === ButtonVariant.secondary,
+    wrapper: children => /*#__PURE__*/React__default.createElement(StyledGradientBorder, {
+      $color: color,
+      $isActive: isActive,
+      $isDisabled: isDisabled,
+      $isHovered: isHovered,
+      $theme: theme
+    }, children)
+  }, /*#__PURE__*/React__default.createElement(StyledButton, _extends({
+    type: "button"
+  }, forwardedProps, {
+    $color: color,
+    $fullWidth: fullWidth,
+    $isActive: isActive,
+    $isDisabled: isDisabled,
+    $isGradient: isGradient,
+    $isHovered: isHovered,
+    $isLoading: isLoading,
+    $theme: theme,
+    $variant: variant,
+    "aria-disabled": isDisabled,
+    className: classNames(Button.className, className),
+    disabled: isDisabled,
+    ref: buttonRef
+  }), leftIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends({
+    icon: leftIcon,
+    "aria-hidden": "true",
+    className: "left"
+  }, leftIconProps)) : null, isLoading ? /*#__PURE__*/React__default.createElement(Spinner, {
+    size: "small",
+    color: variant === ButtonVariant.primary ? 'grey-l1' : 'grey-l2'
+  }) : null, /*#__PURE__*/React__default.createElement("span", null, children), rightIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends({
+    icon: rightIcon,
+    "aria-hidden": "true",
+    className: "right"
+  }, rightIconProps)) : null));
+});
+Button.className = CLASSNAME;
+Button.displayName = COMPONENT_NAME;
 
-export { Button as B, StyledButton as S };
+export { Button as B };
+//# sourceMappingURL=Button2.js.map

package/_internal/ButtonGroup.js

@@ -1,41 +1,181 @@
-import { ComponentProps } from 'react';
-import { h as StylingProps, g as FlexLayoutProps } from './styles2.js';
-import { V as ValueOf, C as Comp } from './helpers.js';
-import { B as ButtonsColorPalette, T as Theme } from './colors.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, g as baseFlexbox } from './styles4.js';
+import { i as isComponent } from './isComponent.js';
+import { u as useTheme } from './useTheme.js';
+import { B as ButtonsColorPalette } from './colors.js';
+import { f as filterComponents } from './filterComponents.js';
 
 /**
  * Component variant.
  */
-declare const ButtonGroupVariant: {
-    readonly primary: "primary";
-    readonly secondary: "secondary";
-    readonly unstyled: "unstyled";
+const ButtonGroupVariant = {
+  primary: 'primary',
+  secondary: 'secondary',
+  unstyled: 'unstyled'
 };
-type ButtonGroupVariant = ValueOf<typeof ButtonGroupVariant>;
+
 /**
  * Component color.
  */
-type ButtonGroupColor = ButtonsColorPalette;
+
 /**
  * Component props.
  */
-interface ButtonGroupProps extends ComponentProps<'div'>, StylingProps, FlexLayoutProps {
-    /** Button color. */
-    color?: ButtonGroupColor;
-    /** Button variant. */
-    variant?: ButtonGroupVariant;
-    /** Theme. */
-    theme?: Theme;
-}
-type StyledButtonGroupProps = ButtonGroupProps & {
-    $color: ButtonGroupProps['color'];
-    $variant: ButtonGroupProps['variant'];
-    $theme: ButtonGroupProps['theme'];
-};
+
+/**
+ * Component style.
+ */
+const StyledButtonGroup = styled.div`
+  display: ${_ref => {
+  let {
+    inline
+  } = _ref;
+  return inline ? 'inline-flex' : 'flex';
+}};
+
+  ${baseStyling}
+  ${baseFlexbox}
+
+  ${_ref2 => {
+  let {
+    $color,
+    $variant,
+    $theme
+  } = _ref2;
+  return css`
+    ${$variant === ButtonGroupVariant.secondary ? css`
+          .first-button {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right-color: transparent;
+          }
+
+          .middle-button {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            margin-left: -1px;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right-color: transparent;
+          }
+
+          .last-button {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            margin-left: -1px;
+          }
+        ` : $variant === ButtonGroupVariant.unstyled ? css`
+          .first-button {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right: 1px solid rgba(0, 0, 0, 0.23);
+            border-color: ${`var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-default
+            )`};
+          }
+
+          .middle-button {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right: 1px solid rgba(0, 0, 0, 0.23);
+            border-color: ${`var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-default
+            )`};
+          }
+
+          .last-button {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+          }
+        ` : css`
+          .first-button {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right: 1px solid #bdbdbd;
+            border-color: ${`var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-hover
+            )`};
+          }
+
+          .middle-button {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right: 1px solid #bdbdbd;
+            border-color: ${`var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-hover
+            )`};
+          }
+
+          .last-button {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+          }
+        `}
+  `;
+}};
+`;
+
+const _excluded = ["children", "className", "color", "theme", "variant"];
+const COMPONENT_NAME = 'ButtonGroup';
+const CLASSNAME = 'redsift-button-group';
 
 /**
  * The ButtonGroup component.
  */
-declare const ButtonGroup: Comp<ButtonGroupProps, HTMLDivElement>;
+const ButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      color: propsColor,
+      theme: propsTheme,
+      variant: propsVariant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const color = Object.values(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';
+  const variant = Object.values(ButtonGroupVariant).includes(propsVariant) ? propsVariant : 'primary';
+
+  /**
+   * Create an array containing only valid children being either Button, IconButton, ButtonLink, MenuButton or Select.
+   */
+  const childArray = filterComponents(['Button', 'IconButton', 'ButtonLink', 'MenuButton', 'Select', 'Dialog', 'Popover', 'Tooltip'])(children);
+  const buttons = childArray.map((child, index) => {
+    var _key;
+    if (isComponent('MenuButton')(child) || isComponent('Select')(child) || isComponent('Dialog')(child) || isComponent('Popover')(child) || isComponent('Tooltip')(child)) {
+      var _child$key;
+      return /*#__PURE__*/React__default.cloneElement(child, {
+        color,
+        theme,
+        variant,
+        key: (_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : index,
+        triggerClassName: index === 0 ? 'first-button' : index === childArray.length - 1 ? 'last-button' : 'middle-button'
+      });
+    }
+    return /*#__PURE__*/React__default.cloneElement(child, {
+      color,
+      theme,
+      variant,
+      key: (_key = child.key) !== null && _key !== void 0 ? _key : index,
+      className: index === 0 ? 'first-button' : index === childArray.length - 1 ? 'last-button' : 'middle-button'
+    });
+  });
+  return /*#__PURE__*/React__default.createElement(StyledButtonGroup, _extends({}, forwardedProps, {
+    className: classNames(ButtonGroup.className, className),
+    ref: ref,
+    $color: color,
+    $variant: variant,
+    $theme: theme
+  }), buttons);
+});
+ButtonGroup.className = CLASSNAME;
+ButtonGroup.displayName = COMPONENT_NAME;
 
-export { ButtonGroupVariant as B, StyledButtonGroupProps as S, ButtonGroupColor as a, ButtonGroupProps as b, ButtonGroup as c };
+export { ButtonGroupVariant as B, ButtonGroup as a };
+//# sourceMappingURL=ButtonGroup.js.map

package/_internal/ButtonLink.js

@@ -1,20 +1,16 @@
-import { b as ButtonProps } from './types4.js';
-import { L as LinkProps } from './types18.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 { StyledGradientBorder } from './gradient-border.js';
+import { B as ButtonVariant, S as StyledButton } from './styles.js';
+import { u as useTheme } from './useTheme.js';
+import { B as ButtonsColorPalette } from './colors.js';
+import { C as ConditionalWrapper } from './ConditionalWrapper.js';
+import { a as Icon } from './Icon2.js';
 
-/**
- * Component props.
- */
-interface ButtonLinkProps extends Omit<LinkProps, 'color'>, Pick<ButtonProps, 'color' | 'isActive' | 'isDisabled' | 'isHovered' | 'leftIcon' | 'leftIconProps' | 'rightIconProps' | 'rightIcon' | 'variant' | 'theme'> {
-}
-type StyledButtonLinkProps = ButtonLinkProps & {
-    $isActive: ButtonLinkProps['isActive'];
-    $isDisabled: ButtonLinkProps['isDisabled'];
-    $isHovered: ButtonLinkProps['isHovered'];
-    $variant: ButtonLinkProps['variant'];
-    $theme: ButtonLinkProps['theme'];
-    $color: ButtonLinkProps['color'];
-};
+const _excluded = ["as", "children", "className", "color", "href", "isActive", "isDisabled", "isHovered", "leftIcon", "leftIconProps", "rightIcon", "rightIconProps", "target", "theme", "variant"];
+const COMPONENT_NAME = 'ButtonLink';
+const CLASSNAME = 'redsift-button-link';
 
 /**
  * The ButtonLink is a semantic link that looks like a button.
@@ -23,6 +19,66 @@ type StyledButtonLinkProps = ButtonLinkProps & {
  * 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 ButtonLink: Comp<ButtonLinkProps, HTMLAnchorElement>;
+const ButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      as,
+      children,
+      className,
+      color: propsColor,
+      href,
+      isActive,
+      isDisabled,
+      isHovered,
+      leftIcon,
+      leftIconProps,
+      rightIcon,
+      rightIconProps,
+      target,
+      theme: propsTheme,
+      variant: propsVariant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const color = Object.values(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';
+  const variant = Object.values(ButtonVariant).includes(propsVariant) ? propsVariant : 'primary';
+  const isGradient = color === ButtonsColorPalette.radar;
+  return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
+    condition: isGradient && variant === ButtonVariant.secondary,
+    wrapper: children => /*#__PURE__*/React__default.createElement(StyledGradientBorder, {
+      $color: color,
+      $isActive: isActive,
+      $isDisabled: isDisabled,
+      $isHovered: isHovered,
+      $theme: theme
+    }, children)
+  }, /*#__PURE__*/React__default.createElement(StyledButton, _extends({
+    as: as || 'a',
+    role: "link",
+    tabIndex: !isDisabled ? 0 : undefined
+  }, forwardedProps, {
+    $color: color,
+    $isActive: isActive,
+    $isDisabled: isDisabled,
+    $isHovered: isHovered,
+    $isGradient: isGradient,
+    $theme: theme,
+    $variant: variant,
+    className: classNames(ButtonLink.className, className),
+    href: !isDisabled ? href : undefined,
+    ref: ref,
+    target: target
+  }), leftIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends({
+    icon: leftIcon,
+    "aria-hidden": "true",
+    className: "left"
+  }, leftIconProps)) : null, /*#__PURE__*/React__default.createElement("span", null, children), rightIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends({
+    icon: rightIcon,
+    "aria-hidden": "true",
+    className: "right"
+  }, rightIconProps)) : null));
+});
+ButtonLink.className = CLASSNAME;
+ButtonLink.displayName = COMPONENT_NAME;
 
-export { ButtonLinkProps as B, StyledButtonLinkProps as S, ButtonLink as a };
+export { ButtonLink as B };
+//# sourceMappingURL=ButtonLink.js.map