@redsift/design-system 11.6.0-muiv5-alpha.9 → 11.6.0-muiv5-alpha.11

package/packages/design-system/src/components/breadcrumbs/_internal/Breadcrumbs2.js

@@ -0,0 +1,61 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../../../_virtual/_internal/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { warnIfNoAccessibleLabelFound } from '../../../utils/_internal/warnIfNoAccessibleLabelFound.js';
+import { StyledBreadcrumbs } from './styles.js';
+import { filterComponents } from '../../../utils/_internal/filterComponents.js';
+import { BreadcrumbItem } from '../../breadcrumb-item/_internal/BreadcrumbItem.js';
+import { useTheme } from '../../theme/_internal/useTheme.js';
+import { ThemeProvider } from '../../theme/_internal/context.js';
+
+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.
+ */
+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 { BaseBreadcrumbs, Breadcrumbs };
+//# sourceMappingURL=Breadcrumbs2.js.map

package/packages/design-system/src/components/breadcrumbs/_internal/Breadcrumbs2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs2.js","sources":["../../../../../../../src/components/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { BreadcrumbItem } from '../breadcrumb-item';\nimport { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound';\nimport { StyledBreadcrumbs } from './styles';\nimport { BreadcrumbsProps } from './types';\nimport { filterComponents } from '../../utils';\nimport { ThemeProvider, useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Breadcrumbs';\nconst CLASSNAME = 'redsift-breadcrumbs';\n\n/**\n * The Breadcrumbs components is a list of links to the parent pages of the current page in hierarchical order.\n */\nexport const BaseBreadcrumbs: Comp<BreadcrumbsProps, HTMLElement> = forwardRef((props, ref) => {\n  const { children, className, isDisabled, theme: propsTheme, ...forwardedProps } = props;\n\n  warnIfNoAccessibleLabelFound(props, undefined, 'Breadcrumbs');\n\n  const theme = useTheme(propsTheme);\n\n  const childArray = filterComponents([Breadcrumbs.Item])(children);\n  const breadcrumbItems = childArray.map((child, index) => {\n    const isCurrent = index === childArray.length - 1;\n\n    return (\n      <li key={index}>\n        <Breadcrumbs.Item\n          isDisabled={child.props.isDisabled || isDisabled || undefined}\n          {...child.props}\n          key={child.key ?? index}\n          isCurrent={isCurrent}\n        />\n        {isCurrent === false ? <span className={`${BaseBreadcrumbs.className}__separator`}>{'/'}</span> : null}\n      </li>\n    );\n  });\n\n  return (\n    <ThemeProvider value={{ theme }}>\n      <StyledBreadcrumbs\n        {...forwardedProps}\n        $isDisabled={isDisabled}\n        $theme={theme}\n        className={classNames(BaseBreadcrumbs.className, className)}\n        ref={ref as RefObject<HTMLElement>}\n      >\n        <ol>{breadcrumbItems}</ol>\n      </StyledBreadcrumbs>\n    </ThemeProvider>\n  );\n});\nBaseBreadcrumbs.className = CLASSNAME;\nBaseBreadcrumbs.displayName = COMPONENT_NAME;\n\nexport const Breadcrumbs = Object.assign(BaseBreadcrumbs, {\n  Item: BreadcrumbItem,\n});\n"],"names":["COMPONENT_NAME","CLASSNAME","BaseBreadcrumbs","forwardRef","props","ref","children","className","isDisabled","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","warnIfNoAccessibleLabelFound","undefined","useTheme","childArray","filterComponents","Breadcrumbs","Item","breadcrumbItems","map","child","index","_child$key","isCurrent","length","React","createElement","key","_extends","ThemeProvider","value","StyledBreadcrumbs","$isDisabled","$theme","classNames","displayName","Object","assign","BreadcrumbItem"],"mappings":";;;;;;;;;;;AAUA,MAAMA,cAAc,GAAG,aAAa,CAAA;AACpC,MAAMC,SAAS,GAAG,qBAAqB,CAAA;;AAEvC;AACA;AACA;AACO,MAAMC,eAAoD,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC7F,MAAM;MAAEC,QAAQ;MAAEC,SAAS;MAAEC,UAAU;AAAEC,MAAAA,KAAK,EAAEC,UAAAA;AAA8B,KAAC,GAAGN,KAAK;AAAxBO,IAAAA,cAAc,GAAAC,wBAAA,CAAKR,KAAK,EAAAS,SAAA,CAAA,CAAA;AAEvFC,EAAAA,4BAA4B,CAACV,KAAK,EAAEW,SAAS,EAAE,aAAa,CAAC,CAAA;AAE7D,EAAA,MAAMN,KAAK,GAAGO,QAAQ,CAACN,UAAU,CAAC,CAAA;AAElC,EAAA,MAAMO,UAAU,GAAGC,gBAAgB,CAAC,CAACC,WAAW,CAACC,IAAI,CAAC,CAAC,CAACd,QAAQ,CAAC,CAAA;EACjE,MAAMe,eAAe,GAAGJ,UAAU,CAACK,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,KAAK;AAAA,IAAA,IAAAC,UAAA,CAAA;IACvD,MAAMC,SAAS,GAAGF,KAAK,KAAKP,UAAU,CAACU,MAAM,GAAG,CAAC,CAAA;IAEjD,oBACEC,cAAA,CAAAC,aAAA,CAAA,IAAA,EAAA;AAAIC,MAAAA,GAAG,EAAEN,KAAAA;KACPI,eAAAA,cAAA,CAAAC,aAAA,CAACV,WAAW,CAACC,IAAI,EAAAW,QAAA,CAAA;MACfvB,UAAU,EAAEe,KAAK,CAACnB,KAAK,CAACI,UAAU,IAAIA,UAAU,IAAIO,SAAAA;KAChDQ,EAAAA,KAAK,CAACnB,KAAK,EAAA;MACf0B,GAAG,EAAA,CAAAL,UAAA,GAAEF,KAAK,CAACO,GAAG,MAAA,IAAA,IAAAL,UAAA,KAAA,KAAA,CAAA,GAAAA,UAAA,GAAID,KAAM;AACxBE,MAAAA,SAAS,EAAEA,SAAAA;KACZ,CAAA,CAAC,EACDA,SAAS,KAAK,KAAK,gBAAGE,cAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMtB,MAAAA,SAAS,EAAG,CAAA,EAAEL,eAAe,CAACK,SAAU,CAAA,WAAA,CAAA;AAAa,KAAA,EAAE,GAAU,CAAC,GAAG,IAChG,CAAC,CAAA;AAET,GAAC,CAAC,CAAA;AAEF,EAAA,oBACEqB,cAAA,CAAAC,aAAA,CAACG,aAAa,EAAA;AAACC,IAAAA,KAAK,EAAE;AAAExB,MAAAA,KAAAA;AAAM,KAAA;GAC5BmB,eAAAA,cAAA,CAAAC,aAAA,CAACK,iBAAiB,EAAAH,QAAA,KACZpB,cAAc,EAAA;AAClBwB,IAAAA,WAAW,EAAE3B,UAAW;AACxB4B,IAAAA,MAAM,EAAE3B,KAAM;IACdF,SAAS,EAAE8B,UAAU,CAACnC,eAAe,CAACK,SAAS,EAAEA,SAAS,CAAE;AAC5DF,IAAAA,GAAG,EAAEA,GAAAA;AAA8B,GAAA,CAAA,eAEnCuB,cAAA,CAAAC,aAAA,aAAKR,eAAoB,CACR,CACN,CAAC,CAAA;AAEpB,CAAC,EAAC;AACFnB,eAAe,CAACK,SAAS,GAAGN,SAAS,CAAA;AACrCC,eAAe,CAACoC,WAAW,GAAGtC,cAAc,CAAA;AAErC,MAAMmB,WAAW,GAAGoB,MAAM,CAACC,MAAM,CAACtC,eAAe,EAAE;AACxDkB,EAAAA,IAAI,EAAEqB,cAAAA;AACR,CAAC;;;;"}

package/packages/design-system/src/components/breadcrumbs/_internal/breadcrumbs.js

@@ -0,0 +1,2 @@
+export { BaseBreadcrumbs, Breadcrumbs } from './Breadcrumbs2.js';
+//# sourceMappingURL=breadcrumbs.js.map

package/packages/design-system/src/components/breadcrumbs/_internal/styles.js

@@ -0,0 +1,38 @@
+import styled, { css } from 'styled-components';
+import { baseStyling } from '../../shared/_internal/styles.js';
+
+/**
+ * Component style.
+ */
+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);
+          `;
+}}
+  }
+`;
+
+export { StyledBreadcrumbs };
+//# sourceMappingURL=styles.js.map

package/packages/design-system/src/components/breadcrumbs/_internal/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../src/components/breadcrumbs/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledBreadcrumbsProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledBreadcrumbs = styled.nav<StyledBreadcrumbsProps>`\n  ${baseStyling}\n\n  ol {\n    display: inline-flex;\n    list-style: none;\n    padding: unset;\n  }\n\n  .redsift-breadcrumbs__separator {\n    font-family: var(--redsift-typography-body-font-family);\n    font-size: var(--redsift-typography-body-font-size);\n    font-weight: var(--redsift-typography-body-font-weight);\n    line-height: var(--redsift-typography-body-line-height);\n    margin: 0px 4px;\n\n    ${({ $isDisabled, $theme }) =>\n      $isDisabled\n        ? css`\n            color: var(--redsift-color-neutral-mid-grey);\n          `\n        : css`\n            color: var(--redsift-color-${$theme}-components-text-primary);\n          `}\n  }\n`;\n"],"names":["StyledBreadcrumbs","styled","nav","baseStyling","_ref","$isDisabled","$theme","css"],"mappings":";;;AAIA;AACA;AACA;AACaA,MAAAA,iBAAiB,GAAGC,MAAM,CAACC,GAA4B,CAAA;AACpE,EAAA,EAAIC,WAAY,CAAA;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMC,IAAA,IAAA;EAAA,IAAC;IAAEC,WAAW;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAF,IAAA,CAAA;EAAA,OACxBC,WAAW,GACPE,GAAI,CAAA;AACd;AACA,UAAA,CAAW,GACDA,GAAI,CAAA;AACd,uCAAA,EAAyCD,MAAO,CAAA;AAChD,UAAW,CAAA,CAAA;AAAA,CAAC,CAAA;AACZ;AACA;;;;"}

package/packages/design-system/src/components/button/_internal/Button2.js

@@ -0,0 +1,92 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../../../_virtual/_internal/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useRef } from 'react';
+import classNames from 'classnames';
+import { StyledButton } from './styles.js';
+import { ButtonVariant } from './types.js';
+import { StyledGradientBorder } from '../../gradient-border/_internal/gradient-border.js';
+import { ButtonsColorPalette } from '../../../types/_internal/colors.js';
+import { ConditionalWrapper } from '../../conditional-wrapper/_internal/ConditionalWrapper.js';
+import { Icon } from '../../icon/_internal/Icon2.js';
+import { Spinner } from '../../spinner/_internal/Spinner2.js';
+import { useTheme } from '../../theme/_internal/useTheme.js';
+
+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.
+ *
+ * For a semantic link that looks like a button, please use the ButtonLink 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.
+ */
+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 };
+//# sourceMappingURL=Button2.js.map

package/packages/design-system/src/components/button/_internal/Button2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button2.js","sources":["../../../../../../../src/components/button/Button.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useRef } from 'react';\nimport classNames from 'classnames';\nimport { ButtonsColorPalette, Comp } from '../../types';\nimport { Icon } from '../../components/icon';\nimport { StyledButton } from './styles';\nimport { ButtonProps, ButtonVariant } 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 = 'Button';\nconst CLASSNAME = 'redsift-button';\n\n/**\n * The Button is a semantic button that looks like a button.\n *\n * For a semantic link that looks like a button, please use the ButtonLink component.\n * For a semantic link that looks like a link, please use the Link component.\n * For a semantic button that looks like a link, please use the LinkButton component.\n */\nexport const Button: Comp<ButtonProps, HTMLButtonElement> = forwardRef((props, ref) => {\n  const _ref = useRef<HTMLButtonElement>();\n  const buttonRef = ref || _ref;\n\n  const {\n    children,\n    className,\n    color: propsColor,\n    disabled,\n    fullWidth,\n    isActive,\n    isDisabled: propsIsDisabled,\n    isHovered,\n    isLoading,\n    leftIcon,\n    leftIconProps,\n    rightIcon,\n    rightIconProps,\n    theme: propsTheme,\n    variant: propsVariant,\n    ...forwardedProps\n  } = props;\n  const isDisabled = isLoading || propsIsDisabled || disabled;\n\n  const theme = useTheme(propsTheme);\n  const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : 'primary';\n  const variant = Object.values(ButtonVariant).includes(propsVariant!) ? propsVariant : 'primary';\n  const isGradient = color === ButtonsColorPalette.radar;\n\n  return (\n    <ConditionalWrapper\n      condition={isGradient && variant === ButtonVariant.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      <StyledButton\n        type=\"button\"\n        {...forwardedProps}\n        $color={color}\n        $fullWidth={fullWidth}\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(Button.className, className)}\n        disabled={isDisabled}\n        ref={buttonRef as RefObject<HTMLButtonElement>}\n      >\n        {leftIcon ? <Icon icon={leftIcon} aria-hidden=\"true\" className=\"left\" {...leftIconProps} /> : null}\n        {isLoading ? <Spinner size=\"small\" color={variant === ButtonVariant.primary ? 'grey-l1' : 'grey-l2'} /> : null}\n        <span>{children}</span>\n        {rightIcon ? <Icon icon={rightIcon} aria-hidden=\"true\" className=\"right\" {...rightIconProps} /> : null}\n      </StyledButton>\n    </ConditionalWrapper>\n  );\n});\nButton.className = CLASSNAME;\nButton.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","Button","forwardRef","props","ref","_ref","useRef","buttonRef","children","className","color","propsColor","disabled","fullWidth","isActive","isDisabled","propsIsDisabled","isHovered","isLoading","leftIcon","leftIconProps","rightIcon","rightIconProps","theme","propsTheme","variant","propsVariant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","Object","values","ButtonsColorPalette","includes","ButtonVariant","isGradient","radar","React","createElement","ConditionalWrapper","condition","secondary","wrapper","StyledGradientBorder","$color","$isActive","$isDisabled","$isHovered","$theme","StyledButton","_extends","type","$fullWidth","$isGradient","$isLoading","$variant","classNames","Icon","icon","Spinner","size","primary","displayName"],"mappings":"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"}

package/packages/design-system/src/components/button/_internal/button.js

@@ -0,0 +1,4 @@
+export { ButtonVariant } from './types.js';
+export { StyledButton } from './styles.js';
+export { Button } from './Button2.js';
+//# sourceMappingURL=button.js.map

package/packages/design-system/src/components/button/_internal/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/packages/design-system/src/components/button/_internal/styles.js

@@ -0,0 +1,219 @@
+import styled, { css } from 'styled-components';
+import { ButtonVariant } from './types.js';
+import { baseStyling, focusRing } from '../../shared/_internal/styles.js';
+
+/**
+ * Component style.
+ */
+const StyledButton = styled.button`
+  align-items: center;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  display: inline-flex;
+  font-family: var(--redsift-typography-button-font-family);
+  font-size: var(--redsift-typography-button-font-size);
+  font-weight: var(--redsift-typography-button-font-weight);
+  gap: 8px;
+  height: fit-content;
+  justify-content: center;
+  line-height: var(--redsift-typography-button-line-height);
+  text-decoration: none;
+  text-transform: var(--redsift-typography-button-text-transform);
+  vertical-align: middle;
+  -webkit-font-smoothing: antialiased;
+  ${baseStyling}
+
+  ${_ref => {
+  let {
+    $isLoading
+  } = _ref;
+  return $isLoading ? css`
+          & > span {
+            opacity: 0;
+          }
+
+          & > .redsift-shield {
+            position: absolute;
+          }
+        ` : '';
+}}
+
+  ${_ref2 => {
+  let {
+    $variant,
+    $color,
+    $isActive,
+    $isDisabled,
+    $isGradient,
+    $isHovered,
+    $theme
+  } = _ref2;
+  return css`
+    padding: ${$variant !== ButtonVariant.secondary || $variant === ButtonVariant.secondary && $isGradient && !$isDisabled ? '9px 16px' : '8px 15px'};
+
+    ${!$isGradient ? css`
+          background-color: var(
+            --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}
+          );
+          &,
+          .redsift-icon:not(.colored) {
+            color: var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}
+            );
+          }
+        ` : css`
+          background: var(
+            --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}
+          );
+
+          ${$variant === ButtonVariant.primary || $isDisabled ? css`
+                &,
+                .redsift-icon:not(.colored) {
+                  color: var(
+                    --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}
+                  );
+                }
+              ` : ''}
+
+          ${$variant !== ButtonVariant.primary && !$isDisabled ? css`
+                path {
+                  fill: url(#${$color}-gradient-${$isActive ? 'active' : $isHovered ? 'hover' : 'default'});
+                }
+              ` : ''}
+
+          span {
+            background: var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}
+            );
+            background-clip: text;
+            color: transparent;
+          }
+        `}
+
+    ${$variant === ButtonVariant.secondary ? css`
+          border: 1px solid
+            var(
+              --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}
+            );
+        ` : ''}
+  `;
+}};
+
+  &:hover,
+  &:focus-visible {
+    outline: none;
+
+    ${_ref3 => {
+  let {
+    $variant,
+    $color,
+    $isDisabled,
+    $isGradient,
+    $theme
+  } = _ref3;
+  return css`
+      cursor: ${$isDisabled ? 'default' : 'pointer'};
+
+      ${!$isGradient ? css`
+            background-color: var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled ? 'disabled' : 'hover'}
+            );
+            &,
+            .redsift-icon:not(.colored) {
+              color: var(
+                --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled ? 'disabled' : 'hover'}
+              );
+            }
+
+            ${$variant === ButtonVariant.secondary ? css`
+                  border: 1px solid
+                    var(
+                      --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-${$isDisabled ? 'disabled' : 'hover'}
+                    );
+                ` : ''}
+          ` : css`
+            background: var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled ? 'disabled' : 'hover'}
+            );
+
+            ${$variant !== ButtonVariant.primary && !$isDisabled ? css`
+                  path {
+                    fill: url(#${$color}-gradient-hover);
+                  }
+                ` : ''}
+          `}
+    `;
+}};
+  }
+
+  &:active {
+    outline: none;
+
+    ${_ref4 => {
+  let {
+    $variant,
+    $color,
+    $isGradient,
+    $isHovered,
+    $isDisabled,
+    $theme
+  } = _ref4;
+  return css`
+      ${!$isGradient ? css`
+            background-color: var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled ? 'disabled' : $isHovered ? 'hover' : 'active'}
+            );
+            &,
+            .redsift-icon:not(.colored) {
+              color: var(
+                --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled ? 'disabled' : $isHovered ? 'hover' : 'active'}
+              );
+            }
+
+            ${$variant === ButtonVariant.secondary ? css`
+                  border: 1px solid
+                    var(
+                      --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-${$isDisabled ? 'disabled' : $isHovered ? 'hover' : 'active'}
+                    );
+                ` : ''}
+          ` : css`
+            background: var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled ? 'disabled' : $isHovered ? 'hover' : 'active'}
+            );
+
+            ${$variant !== ButtonVariant.primary && !$isDisabled ? css`
+                  path {
+                    fill: url(#${$color}-gradient-active);
+                  }
+                ` : ''}
+          `}
+    `;
+}};
+  }
+
+  ${_ref5 => {
+  let {
+    $fullWidth
+  } = _ref5;
+  return $fullWidth ? `
+        width: 100%;
+        flex-grow: 1;
+      ` : '';
+}}
+
+  .redsift-icon.left {
+    margin-right: unset;
+    align-items: center;
+  }
+
+  .redsift-icon.right {
+    margin-left: unset;
+    align-items: center;
+  }
+
+  ${focusRing}
+`;
+
+export { StyledButton };
+//# sourceMappingURL=styles.js.map

package/packages/design-system/src/components/button/_internal/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../src/components/button/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseStyling, focusRing } from '../shared';\nimport { StyledButtonProps, ButtonVariant } from './types';\n\n/**\n * Component style.\n */\nexport const StyledButton = styled.button<StyledButtonProps>`\n  align-items: center;\n  background: none;\n  border: none;\n  border-radius: 4px;\n  display: inline-flex;\n  font-family: var(--redsift-typography-button-font-family);\n  font-size: var(--redsift-typography-button-font-size);\n  font-weight: var(--redsift-typography-button-font-weight);\n  gap: 8px;\n  height: fit-content;\n  justify-content: center;\n  line-height: var(--redsift-typography-button-line-height);\n  text-decoration: none;\n  text-transform: var(--redsift-typography-button-text-transform);\n  vertical-align: middle;\n  -webkit-font-smoothing: antialiased;\n  ${baseStyling}\n\n  ${({ $isLoading }) =>\n    $isLoading\n      ? css`\n          & > span {\n            opacity: 0;\n          }\n\n          & > .redsift-shield {\n            position: absolute;\n          }\n        `\n      : ''}\n\n  ${({ $variant, $color, $isActive, $isDisabled, $isGradient, $isHovered, $theme }) => css`\n    padding: ${$variant !== ButtonVariant.secondary ||\n    ($variant === ButtonVariant.secondary && $isGradient && !$isDisabled)\n      ? '9px 16px'\n      : '8px 15px'};\n\n    ${!$isGradient\n      ? css`\n          background-color: var(\n            --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled\n                ? 'disabled'\n                : $isActive\n                ? 'active'\n                : $isHovered\n                ? 'hover'\n                : 'default'}\n          );\n          &,\n          .redsift-icon:not(.colored) {\n            color: var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled\n                  ? 'disabled'\n                  : $isActive\n                  ? 'active'\n                  : $isHovered\n                  ? 'hover'\n                  : 'default'}\n            );\n          }\n        `\n      : css`\n          background: var(\n            --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled\n                ? 'disabled'\n                : $isActive\n                ? 'active'\n                : $isHovered\n                ? 'hover'\n                : 'default'}\n          );\n\n          ${$variant === ButtonVariant.primary || $isDisabled\n            ? css`\n                &,\n                .redsift-icon:not(.colored) {\n                  color: var(\n                    --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled\n                        ? 'disabled'\n                        : $isActive\n                        ? 'active'\n                        : $isHovered\n                        ? 'hover'\n                        : 'default'}\n                  );\n                }\n              `\n            : ''}\n\n          ${$variant !== ButtonVariant.primary && !$isDisabled\n            ? css`\n                path {\n                  fill: url(#${$color}-gradient-${$isActive ? 'active' : $isHovered ? 'hover' : 'default'});\n                }\n              `\n            : ''}\n\n          span {\n            background: var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled\n                  ? 'disabled'\n                  : $isActive\n                  ? 'active'\n                  : $isHovered\n                  ? 'hover'\n                  : 'default'}\n            );\n            background-clip: text;\n            color: transparent;\n          }\n        `}\n\n    ${$variant === ButtonVariant.secondary\n      ? css`\n          border: 1px solid\n            var(\n              --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}\n            );\n        `\n      : ''}\n  `};\n\n  &:hover,\n  &:focus-visible {\n    outline: none;\n\n    ${({ $variant, $color, $isDisabled, $isGradient, $theme }) => css`\n      cursor: ${$isDisabled ? 'default' : 'pointer'};\n\n      ${!$isGradient\n        ? css`\n            background-color: var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled\n                  ? 'disabled'\n                  : 'hover'}\n            );\n            &,\n            .redsift-icon:not(.colored) {\n              color: var(\n                --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled\n                    ? 'disabled'\n                    : 'hover'}\n              );\n            }\n\n            ${$variant === ButtonVariant.secondary\n              ? css`\n                  border: 1px solid\n                    var(\n                      --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-${$isDisabled ? 'disabled' : 'hover'}\n                    );\n                `\n              : ''}\n          `\n        : css`\n            background: var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled\n                  ? 'disabled'\n                  : 'hover'}\n            );\n\n            ${$variant !== ButtonVariant.primary && !$isDisabled\n              ? css`\n                  path {\n                    fill: url(#${$color}-gradient-hover);\n                  }\n                `\n              : ''}\n          `}\n    `};\n  }\n\n  &:active {\n    outline: none;\n\n    ${({ $variant, $color, $isGradient, $isHovered, $isDisabled, $theme }) => css`\n      ${!$isGradient\n        ? css`\n            background-color: var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled\n                  ? 'disabled'\n                  : $isHovered\n                  ? 'hover'\n                  : 'active'}\n            );\n            &,\n            .redsift-icon:not(.colored) {\n              color: var(\n                --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled\n                    ? 'disabled'\n                    : $isHovered\n                    ? 'hover'\n                    : 'active'}\n              );\n            }\n\n            ${$variant === ButtonVariant.secondary\n              ? css`\n                  border: 1px solid\n                    var(\n                      --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-${$isDisabled ? 'disabled' : $isHovered ? 'hover' : 'active'}\n                    );\n                `\n              : ''}\n          `\n        : css`\n            background: var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled\n                  ? 'disabled'\n                  : $isHovered\n                  ? 'hover'\n                  : 'active'}\n            );\n\n            ${$variant !== ButtonVariant.primary && !$isDisabled\n              ? css`\n                  path {\n                    fill: url(#${$color}-gradient-active);\n                  }\n                `\n              : ''}\n          `}\n    `};\n  }\n\n  ${({ $fullWidth }) =>\n    $fullWidth\n      ? `\n        width: 100%;\n        flex-grow: 1;\n      `\n      : ''}\n\n  .redsift-icon.left {\n    margin-right: unset;\n    align-items: center;\n  }\n\n  .redsift-icon.right {\n    margin-left: unset;\n    align-items: center;\n  }\n\n  ${focusRing}\n`;\n"],"names":["StyledButton","styled","button","baseStyling","_ref","$isLoading","css","_ref2","$variant","$color","$isActive","$isDisabled","$isGradient","$isHovered","$theme","ButtonVariant","secondary","primary","_ref3","_ref4","_ref5","$fullWidth","focusRing"],"mappings":"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"}

package/packages/design-system/src/components/button/_internal/types.js

@@ -0,0 +1,19 @@
+/**
+ * Component variant.
+ */
+const ButtonVariant = {
+  primary: 'primary',
+  secondary: 'secondary',
+  unstyled: 'unstyled'
+};
+
+/**
+ * Component color.
+ */
+
+/**
+ * Component props.
+ */
+
+export { ButtonVariant };
+//# sourceMappingURL=types.js.map

package/packages/design-system/src/components/button/_internal/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../../../../../src/components/button/types.ts"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { ButtonsColorPalette, StylingProps, Theme, ValueOf } from '../../types';\nimport { IconProps } from '../icon';\n\n/**\n * Component variant.\n */\nexport const ButtonVariant = {\n  primary: 'primary',\n  secondary: 'secondary',\n  unstyled: 'unstyled',\n} as const;\nexport type ButtonVariant = ValueOf<typeof ButtonVariant>;\n\n/**\n * Component color.\n */\nexport type ButtonColor = ButtonsColorPalette;\n\n/**\n * Component props.\n */\nexport interface ButtonProps extends ComponentProps<'button'>, StylingProps {\n  /** Color variant. */\n  color?: ButtonColor;\n  /** Whether the component take the full width or not. */\n  fullWidth?: boolean;\n  /** Whether the component is active or not. */\n  isActive?: boolean;\n  /** Whether the component is disabled or not. */\n  isDisabled?: boolean;\n  /** Whether the component is hovered or not. */\n  isHovered?: boolean;\n  /** Whether the component is in a loading state or not. */\n  isLoading?: boolean;\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  leftIcon?: IconProps['icon'];\n  /** Props to add to the left icon. */\n  leftIconProps?: Omit<IconProps, 'icon' | 'ref'>;\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  rightIcon?: IconProps['icon'];\n  /** Props to add to the right icon. */\n  rightIconProps?: Omit<IconProps, 'icon' | 'ref'>;\n  /** Theme. */\n  theme?: Theme;\n  /** Button variant. */\n  variant?: ButtonVariant;\n}\n\nexport type StyledButtonProps = ButtonProps & {\n  $color: ButtonProps['color'];\n  $fullWidth?: ButtonProps['fullWidth'];\n  $isActive: ButtonProps['isActive'];\n  $isDisabled: ButtonProps['isDisabled'];\n  $isGradient: boolean;\n  $isHovered: ButtonProps['isHovered'];\n  $isLoading: ButtonProps['isLoading'];\n  $theme: ButtonProps['theme'];\n  $variant: ButtonProps['variant'];\n};\n"],"names":["ButtonVariant","primary","secondary","unstyled"],"mappings":"AAIA;AACA;AACA;AACO,MAAMA,aAAa,GAAG;AAC3BC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,SAAS,EAAE,WAAW;AACtBC,EAAAA,QAAQ,EAAE,UAAA;AACZ,EAAU;;AAGV;AACA;AACA;;AAGA;AACA;AACA;;;;"}

package/packages/design-system/src/components/button-group/_internal/ButtonGroup.js

@@ -0,0 +1,67 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../../../_virtual/_internal/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { StyledButtonGroup } from './styles.js';
+import { ButtonGroupVariant } from './types.js';
+import { isComponent } from '../../../utils/_internal/isComponent.js';
+import { useTheme } from '../../theme/_internal/useTheme.js';
+import { ButtonsColorPalette } from '../../../types/_internal/colors.js';
+import { filterComponents } from '../../../utils/_internal/filterComponents.js';
+
+const _excluded = ["children", "className", "color", "theme", "variant"];
+const COMPONENT_NAME = 'ButtonGroup';
+const CLASSNAME = 'redsift-button-group';
+
+/**
+ * The ButtonGroup component.
+ */
+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 { ButtonGroup };
+//# sourceMappingURL=ButtonGroup.js.map

package/packages/design-system/src/components/button-group/_internal/ButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.js","sources":["../../../../../../../src/components/button-group/ButtonGroup.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { ButtonsColorPalette, Comp } from '../../types';\nimport { StyledButtonGroup } from './styles';\nimport { ButtonGroupProps, ButtonGroupVariant } from './types';\nimport { filterComponents, isComponent } from '../../utils';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'ButtonGroup';\nconst CLASSNAME = 'redsift-button-group';\n\n/**\n * The ButtonGroup component.\n */\nexport const ButtonGroup: Comp<ButtonGroupProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { children, className, color: propsColor, theme: propsTheme, variant: propsVariant, ...forwardedProps } = props;\n\n  const theme = useTheme(propsTheme);\n  const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : 'primary';\n  const variant = Object.values(ButtonGroupVariant).includes(propsVariant!) ? propsVariant : 'primary';\n\n  /**\n   * Create an array containing only valid children being either Button, IconButton, ButtonLink, MenuButton or Select.\n   */\n  const childArray = filterComponents([\n    'Button',\n    'IconButton',\n    'ButtonLink',\n    'MenuButton',\n    'Select',\n    'Dialog',\n    'Popover',\n    'Tooltip',\n  ])(children);\n  const buttons = childArray.map((child, index) => {\n    if (\n      isComponent('MenuButton')(child) ||\n      isComponent('Select')(child) ||\n      isComponent('Dialog')(child) ||\n      isComponent('Popover')(child) ||\n      isComponent('Tooltip')(child)\n    ) {\n      return React.cloneElement(child, {\n        color,\n        theme,\n        variant,\n        key: child.key ?? index,\n        triggerClassName:\n          index === 0 ? 'first-button' : index === childArray.length - 1 ? 'last-button' : 'middle-button',\n      });\n    }\n    return React.cloneElement(child, {\n      color,\n      theme,\n      variant,\n      key: (child as React.ReactElement<any, string | React.JSXElementConstructor<any>>).key ?? index,\n      className: index === 0 ? 'first-button' : index === childArray.length - 1 ? 'last-button' : 'middle-button',\n    });\n  });\n\n  return (\n    <StyledButtonGroup\n      {...forwardedProps}\n      className={classNames(ButtonGroup.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n      $color={color}\n      $variant={variant}\n      $theme={theme}\n    >\n      {buttons}\n    </StyledButtonGroup>\n  );\n});\nButtonGroup.className = CLASSNAME;\nButtonGroup.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","ButtonGroup","forwardRef","props","ref","children","className","color","propsColor","theme","propsTheme","variant","propsVariant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","Object","values","ButtonsColorPalette","includes","ButtonGroupVariant","childArray","filterComponents","buttons","map","child","index","_key","isComponent","_child$key","React","cloneElement","key","triggerClassName","length","createElement","StyledButtonGroup","_extends","classNames","$color","$variant","$theme","displayName"],"mappings":"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"}

package/packages/design-system/src/components/button-group/_internal/button-group.js

@@ -0,0 +1,3 @@
+export { ButtonGroupVariant } from './types.js';
+export { ButtonGroup } from './ButtonGroup.js';
+//# sourceMappingURL=button-group.js.map

package/packages/design-system/src/components/button-group/_internal/button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}