@redsift/design-system 11.9.4 → 12.0.0-muiv5

package/CONTRIBUTING.md

@@ -62,10 +62,6 @@ The Design System is following a monorepo architecture, providing multiple packa
 
   This package provides ready-to-use implementation of components with a customize style to fit Red Sift's use cases. It is based on all other packages.
 
-- _Deprecated_ `@redsift/design-system-legacy`
-
-  This package contains all components prior to the 6.0.0 version. These components are deprecated and contributing to this package is discouraged since it will be removed in the future.
-
 Please make sure to work inside the correct package when making contribution.
 
 If you need something inside more than one package, do not duplicate the code. Place it inside one package, export it from this package and import it inside the others.
@@ -410,8 +406,8 @@ yarn build:charts
 yarn build:dashboard
 yarn build:design-system
 yarn build:icons
-yarn build:legacy
 yarn build:table
+yarn build:products
 ```
 
 ## Publishing a release

package/_internal/Alert2.js

@@ -3,13 +3,14 @@ import React__default, { forwardRef, useState, useEffect, useCallback } from 're
 import classNames from 'classnames';
 import { mdiClose, mdiAlert, mdiTriangleOutline, mdiCheckCircle, mdiCheck, mdiAlertCircle, mdiAlertOutline, mdiInformation, mdiInformationOutline } from '@redsift/icons';
 import styled, { css } from 'styled-components';
-import { i as baseStyling } from './styles4.js';
+import { i as baseStyling } from './styles5.js';
 import { T as Theme, N as NotificationsColorPalette } from './colors.js';
 import { u as useMessageFormatter } from './useMessageFormatter.js';
 import { F as Flexbox } from './Flexbox2.js';
 import { T as Text } from './Text2.js';
 import { tz as RedsiftTypographyFontWeightSemiBold } from './redsift-design-tokens.js';
 import { I as IconButton } from './IconButton.js';
+import { f as getStylingTransientProps } from './styles.js';
 import { u as useTheme } from './useTheme.js';
 import { a as Icon } from './Icon2.js';
 
@@ -127,6 +128,10 @@ const getVariant = (variant, styleVariant, theme) => {
  * The Alert component.
  */
 const Alert = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    transientProps,
+    otherProps
+  } = getStylingTransientProps(props);
   const {
       children,
       className,
@@ -137,8 +142,8 @@ const Alert = /*#__PURE__*/forwardRef((props, ref) => {
       title,
       variant: propsVariant,
       styleVariant: propsStyleVariant
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded);
   const theme = useTheme(propsTheme);
   const variant = Object.values(AlertVariant).includes(propsVariant) ? propsVariant : 'info';
   const styleVariant = Object.values(AlertStyleVariant).includes(propsStyleVariant) ? propsStyleVariant : 'default';
@@ -159,7 +164,7 @@ const Alert = /*#__PURE__*/forwardRef((props, ref) => {
       setIsClosed(true);
     }
   }, [onClose]);
-  return /*#__PURE__*/React__default.createElement(StyledAlert, _extends({}, forwardedProps, {
+  return /*#__PURE__*/React__default.createElement(StyledAlert, _extends({}, forwardedProps, transientProps, {
     className: classNames(Alert.className, className),
     ref: ref,
     $hasTitle: Boolean(title),

package/_internal/Alert2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert2.js","sources":["../../src/components/alert/types.ts","../../src/components/alert/intl/index.ts","../../src/components/alert/styles.ts","../../src/components/alert/Alert.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { ValueOf, StylingProps, Theme } from '../..';\n\n/**\n * Component variant.\n */\nexport const AlertVariant = {\n  success: 'success',\n  error: 'error',\n  warning: 'warning',\n  info: 'info',\n} as const;\nexport type AlertVariant = ValueOf<typeof AlertVariant>;\n\nexport const AlertStyleVariant = {\n  default: 'default',\n  minimal: 'minimal',\n} as const;\nexport type AlertStyleVariant = ValueOf<typeof AlertStyleVariant>;\n\n/**\n * Component props.\n */\nexport interface AlertProps extends ComponentProps<'div'>, StylingProps {\n  /** Whether the component can be closed or not. */\n  isClosable?: boolean;\n  /** Whether the component is closed or not. Used for controlled version. */\n  isClosed?: boolean;\n  /** Method to handle component change. */\n  onClose?(isClosed: boolean): void;\n  /** Title. */\n  title?: string;\n  /** Theme. */\n  theme?: Theme;\n  /** Variant */\n  variant?: AlertVariant;\n  /** Style variant. */\n  styleVariant?: AlertStyleVariant;\n}\n\nexport type StyledAlertProps = Omit<AlertProps, 'variant' | 'styleVariant'> & {\n  $hasTitle: boolean;\n  $isClosable: AlertProps['isClosable'];\n  $isClosed: AlertProps['isClosed'];\n  $variant: AlertProps['variant'];\n  $theme: AlertProps['theme'];\n  $styleVariant: AlertProps['styleVariant'];\n};\n","import enUS from './en-US.json';\nimport frFR from './fr-FR.json';\n\nexport default {\n  'en-US': enUS,\n  'fr-FR': frFR,\n};\n","import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledAlertProps } from './types';\nimport { Theme } from '../../types';\n\n/**\n * Component style.\n */\nexport const StyledAlert = styled.div<StyledAlertProps>`\n  ${baseStyling}\n\n  padding: 16px;\n  ${({ $hasTitle, $isClosable, $isClosed, $variant, $styleVariant, $theme }) => css`\n    color: var(--redsift-color-neutral-${$theme === Theme.light ? 'x-dark-grey' : 'white'});\n    display: ${!$isClosed ? 'block' : 'none'};\n    background-color: ${$styleVariant == 'minimal'\n      ? `var(--redsift-color-neutral-${$theme !== Theme.light ? 'x-dark-grey' : 'white'})`\n      : `var(--redsift-color-${$theme}-components-alert-${$variant}-background)`};\n\n    border: ${$styleVariant == 'minimal'\n      ? `1px solid var(--redsift-color-${$theme}-components-alert-${$variant}-border)`\n      : 'none'};\n    border-radius: ${$styleVariant == 'minimal' ? '8px' : '4px'};\n\n    .redsift-alert-header__icon-button {\n      background-color: transparent;\n      padding: 0px;\n      .redsift-icon {\n        color: var(--redsift-color-neutral-x-dark-grey);\n      }\n\n      &:hover,\n      &:focus-visible {\n        background-color: var(--redsift-color-notifications-${$variant}-active);\n      }\n    }\n\n    .redsift-alert__content {\n      margin-top: ${$hasTitle ? '8px' : '-24px'};\n      margin-left: 38px;\n      ${$isClosable\n        ? css`\n            margin-right: 24px;\n          `\n        : ''};\n    }\n  `}\n`;\n","import React, { forwardRef, RefObject, useCallback, useEffect, useState } from 'react';\nimport classNames from 'classnames';\n\nimport { useMessageFormatter } from '../../react-aria/react-aria/i18n';\nimport intlMessages from './intl';\n\nimport {\n  mdiAlert,\n  mdiTriangleOutline,\n  mdiAlertCircle,\n  mdiAlertOutline,\n  mdiCheck,\n  mdiCheckCircle,\n  mdiClose,\n  mdiInformation,\n  mdiInformationOutline,\n} from '@redsift/icons';\nimport { IconButton } from '../icon-button';\nimport { NotificationsColorPalette, Comp, Theme } from '../../types';\nimport { StyledAlert } from './styles';\nimport { AlertProps, AlertVariant, AlertStyleVariant } from './types';\nimport { Icon } from '../icon';\nimport { Text } from '../text';\nimport { Flexbox } from '../flexbox';\nimport { RedsiftTypographyFontWeightSemiBold } from '../../utils';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Alert';\nconst CLASSNAME = 'redsift-alert';\n\nconst getVariant = (variant: AlertVariant, styleVariant: AlertStyleVariant, theme: Theme) => {\n  switch (variant) {\n    case AlertVariant.info:\n    default:\n      return {\n        color: theme === Theme.light ? NotificationsColorPalette.info : 'white',\n        icon: styleVariant == 'default' ? mdiInformation : mdiInformationOutline,\n      };\n    case AlertVariant.error:\n      return {\n        color: theme === Theme.light ? NotificationsColorPalette.error : 'white',\n        icon: styleVariant == 'default' ? mdiAlertCircle : mdiAlertOutline,\n      };\n    case AlertVariant.success:\n      return {\n        color: theme === Theme.light ? NotificationsColorPalette.success : 'white',\n        icon: styleVariant == 'default' ? mdiCheckCircle : mdiCheck,\n      };\n    case AlertVariant.warning:\n      return {\n        color: theme === Theme.light ? NotificationsColorPalette.warning : 'white',\n        icon: styleVariant == 'default' ? mdiAlert : mdiTriangleOutline,\n      };\n  }\n};\n\n/**\n * The Alert component.\n */\nexport const Alert: Comp<AlertProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    children,\n    className,\n    isClosable,\n    isClosed: propsIsClosed,\n    onClose,\n    theme: propsTheme,\n    title,\n    variant: propsVariant,\n    styleVariant: propsStyleVariant,\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme(propsTheme);\n  const variant = Object.values(AlertVariant).includes(propsVariant!) ? propsVariant : 'info';\n  const styleVariant = Object.values(AlertStyleVariant).includes(propsStyleVariant!) ? propsStyleVariant : 'default';\n\n  const format = useMessageFormatter(intlMessages);\n\n  const { color, icon } = getVariant(variant!, styleVariant!, theme);\n  const [isClosed, setIsClosed] = useState(propsIsClosed);\n\n  useEffect(() => {\n    setIsClosed(propsIsClosed);\n  }, [propsIsClosed]);\n\n  const handleClose = useCallback(() => {\n    if (onClose) {\n      onClose(true);\n    }\n    if (propsIsClosed === undefined || propsIsClosed === null) {\n      setIsClosed(true);\n    }\n  }, [onClose]);\n\n  return (\n    <StyledAlert\n      {...forwardedProps}\n      className={classNames(Alert.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n      $hasTitle={Boolean(title)}\n      $isClosable={isClosable}\n      $isClosed={isClosed}\n      $theme={theme}\n      $variant={variant}\n      $styleVariant={styleVariant}\n    >\n      <Flexbox className={`${Alert.className}__header`} justifyContent=\"space-between\">\n        <Flexbox className={`${Alert.className}-header__title`} gap=\"14px\" alignItems=\"center\">\n          <Icon icon={icon} color={color} />\n          {title ? <Text fontWeight={RedsiftTypographyFontWeightSemiBold}>{title}</Text> : null}\n        </Flexbox>\n\n        {isClosable ? (\n          <IconButton\n            aria-label={format('close')}\n            className={`${Alert.className}-header__icon-button`}\n            icon={mdiClose}\n            onClick={handleClose}\n            color={color}\n          />\n        ) : null}\n      </Flexbox>\n\n      {children ? <div className={`${Alert.className}__content`}>{children}</div> : null}\n    </StyledAlert>\n  );\n});\nAlert.className = CLASSNAME;\nAlert.displayName = COMPONENT_NAME;\n"],"names":["AlertVariant","success","error","warning","info","AlertStyleVariant","default","minimal","enUS","frFR","StyledAlert","styled","div","baseStyling","_ref","$hasTitle","$isClosable","$isClosed","$variant","$styleVariant","$theme","css","Theme","light","COMPONENT_NAME","CLASSNAME","getVariant","variant","styleVariant","theme","color","NotificationsColorPalette","icon","mdiInformation","mdiInformationOutline","mdiAlertCircle","mdiAlertOutline","mdiCheckCircle","mdiCheck","mdiAlert","mdiTriangleOutline","Alert","forwardRef","props","ref","children","className","isClosable","isClosed","propsIsClosed","onClose","propsTheme","title","propsVariant","propsStyleVariant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","Object","values","includes","format","useMessageFormatter","intlMessages","setIsClosed","useState","useEffect","handleClose","useCallback","undefined","React","createElement","_extends","classNames","Boolean","Flexbox","justifyContent","gap","alignItems","Icon","Text","fontWeight","RedsiftTypographyFontWeightSemiBold","IconButton","mdiClose","onClick","displayName"],"mappings":"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"}
+{"version":3,"file":"Alert2.js","sources":["../../src/components/alert/types.ts","../../src/components/alert/intl/index.ts","../../src/components/alert/styles.ts","../../src/components/alert/Alert.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { ValueOf, StylingProps, StylingTransientProps, Theme } from '../..';\n\n/**\n * Component variant.\n */\nexport const AlertVariant = {\n  success: 'success',\n  error: 'error',\n  warning: 'warning',\n  info: 'info',\n} as const;\nexport type AlertVariant = ValueOf<typeof AlertVariant>;\n\nexport const AlertStyleVariant = {\n  default: 'default',\n  minimal: 'minimal',\n} as const;\nexport type AlertStyleVariant = ValueOf<typeof AlertStyleVariant>;\n\n/**\n * Component props.\n */\nexport interface AlertProps extends ComponentProps<'div'>, StylingProps {\n  /** Whether the component can be closed or not. */\n  isClosable?: boolean;\n  /** Whether the component is closed or not. Used for controlled version. */\n  isClosed?: boolean;\n  /** Method to handle component change. */\n  onClose?(isClosed: boolean): void;\n  /** Title. */\n  title?: string;\n  /** Theme. */\n  theme?: Theme;\n  /** Variant */\n  variant?: AlertVariant;\n  /** Style variant. */\n  styleVariant?: AlertStyleVariant;\n}\n\nexport interface StyledAlertProps extends ComponentProps<'div'>, StylingTransientProps {\n  $hasTitle: boolean;\n  $isClosable: AlertProps['isClosable'];\n  $isClosed: AlertProps['isClosed'];\n  $variant: AlertProps['variant'];\n  $theme: AlertProps['theme'];\n  $styleVariant: AlertProps['styleVariant'];\n}\n","import enUS from './en-US.json';\nimport frFR from './fr-FR.json';\n\nexport default {\n  'en-US': enUS,\n  'fr-FR': frFR,\n};\n","import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledAlertProps } from './types';\nimport { Theme } from '../../types';\n\n/**\n * Component style.\n */\nexport const StyledAlert = styled.div<StyledAlertProps>`\n  ${baseStyling}\n\n  padding: 16px;\n  ${({ $hasTitle, $isClosable, $isClosed, $variant, $styleVariant, $theme }) => css`\n    color: var(--redsift-color-neutral-${$theme === Theme.light ? 'x-dark-grey' : 'white'});\n    display: ${!$isClosed ? 'block' : 'none'};\n    background-color: ${$styleVariant == 'minimal'\n      ? `var(--redsift-color-neutral-${$theme !== Theme.light ? 'x-dark-grey' : 'white'})`\n      : `var(--redsift-color-${$theme}-components-alert-${$variant}-background)`};\n\n    border: ${$styleVariant == 'minimal'\n      ? `1px solid var(--redsift-color-${$theme}-components-alert-${$variant}-border)`\n      : 'none'};\n    border-radius: ${$styleVariant == 'minimal' ? '8px' : '4px'};\n\n    .redsift-alert-header__icon-button {\n      background-color: transparent;\n      padding: 0px;\n      .redsift-icon {\n        color: var(--redsift-color-neutral-x-dark-grey);\n      }\n\n      &:hover,\n      &:focus-visible {\n        background-color: var(--redsift-color-notifications-${$variant}-active);\n      }\n    }\n\n    .redsift-alert__content {\n      margin-top: ${$hasTitle ? '8px' : '-24px'};\n      margin-left: 38px;\n      ${$isClosable\n        ? css`\n            margin-right: 24px;\n          `\n        : ''};\n    }\n  `}\n`;\n","import React, { forwardRef, RefObject, useCallback, useEffect, useState } from 'react';\nimport classNames from 'classnames';\n\nimport { useMessageFormatter } from '../../react-aria/react-aria/i18n';\nimport intlMessages from './intl';\n\nimport {\n  mdiAlert,\n  mdiTriangleOutline,\n  mdiAlertCircle,\n  mdiAlertOutline,\n  mdiCheck,\n  mdiCheckCircle,\n  mdiClose,\n  mdiInformation,\n  mdiInformationOutline,\n} from '@redsift/icons';\nimport { IconButton } from '../icon-button';\nimport { NotificationsColorPalette, Comp, Theme, getStylingTransientProps } from '../../types';\nimport { StyledAlert } from './styles';\nimport { AlertProps, AlertVariant, AlertStyleVariant } from './types';\nimport { Icon } from '../icon';\nimport { Text } from '../text';\nimport { Flexbox } from '../flexbox';\nimport { RedsiftTypographyFontWeightSemiBold } from '../../utils';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Alert';\nconst CLASSNAME = 'redsift-alert';\n\nconst getVariant = (variant: AlertVariant, styleVariant: AlertStyleVariant, theme: Theme) => {\n  switch (variant) {\n    case AlertVariant.info:\n    default:\n      return {\n        color: theme === Theme.light ? NotificationsColorPalette.info : 'white',\n        icon: styleVariant == 'default' ? mdiInformation : mdiInformationOutline,\n      };\n    case AlertVariant.error:\n      return {\n        color: theme === Theme.light ? NotificationsColorPalette.error : 'white',\n        icon: styleVariant == 'default' ? mdiAlertCircle : mdiAlertOutline,\n      };\n    case AlertVariant.success:\n      return {\n        color: theme === Theme.light ? NotificationsColorPalette.success : 'white',\n        icon: styleVariant == 'default' ? mdiCheckCircle : mdiCheck,\n      };\n    case AlertVariant.warning:\n      return {\n        color: theme === Theme.light ? NotificationsColorPalette.warning : 'white',\n        icon: styleVariant == 'default' ? mdiAlert : mdiTriangleOutline,\n      };\n  }\n};\n\n/**\n * The Alert component.\n */\nexport const Alert: Comp<AlertProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { transientProps, otherProps } = getStylingTransientProps(props);\n\n  const {\n    children,\n    className,\n    isClosable,\n    isClosed: propsIsClosed,\n    onClose,\n    theme: propsTheme,\n    title,\n    variant: propsVariant,\n    styleVariant: propsStyleVariant,\n    ...forwardedProps\n  } = otherProps;\n\n  const theme = useTheme(propsTheme);\n  const variant = Object.values(AlertVariant).includes(propsVariant!) ? propsVariant : 'info';\n  const styleVariant = Object.values(AlertStyleVariant).includes(propsStyleVariant!) ? propsStyleVariant : 'default';\n\n  const format = useMessageFormatter(intlMessages);\n\n  const { color, icon } = getVariant(variant!, styleVariant!, theme);\n  const [isClosed, setIsClosed] = useState(propsIsClosed);\n\n  useEffect(() => {\n    setIsClosed(propsIsClosed);\n  }, [propsIsClosed]);\n\n  const handleClose = useCallback(() => {\n    if (onClose) {\n      onClose(true);\n    }\n    if (propsIsClosed === undefined || propsIsClosed === null) {\n      setIsClosed(true);\n    }\n  }, [onClose]);\n\n  return (\n    <StyledAlert\n      {...forwardedProps}\n      {...transientProps}\n      className={classNames(Alert.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n      $hasTitle={Boolean(title)}\n      $isClosable={isClosable}\n      $isClosed={isClosed}\n      $theme={theme}\n      $variant={variant}\n      $styleVariant={styleVariant}\n    >\n      <Flexbox className={`${Alert.className}__header`} justifyContent=\"space-between\">\n        <Flexbox className={`${Alert.className}-header__title`} gap=\"14px\" alignItems=\"center\">\n          <Icon icon={icon} color={color} />\n          {title ? <Text fontWeight={RedsiftTypographyFontWeightSemiBold}>{title}</Text> : null}\n        </Flexbox>\n\n        {isClosable ? (\n          <IconButton\n            aria-label={format('close')}\n            className={`${Alert.className}-header__icon-button`}\n            icon={mdiClose}\n            onClick={handleClose}\n            color={color}\n          />\n        ) : null}\n      </Flexbox>\n\n      {children ? <div className={`${Alert.className}__content`}>{children}</div> : null}\n    </StyledAlert>\n  );\n});\nAlert.className = CLASSNAME;\nAlert.displayName = COMPONENT_NAME;\n"],"names":["AlertVariant","success","error","warning","info","AlertStyleVariant","default","minimal","enUS","frFR","StyledAlert","styled","div","baseStyling","_ref","$hasTitle","$isClosable","$isClosed","$variant","$styleVariant","$theme","css","Theme","light","COMPONENT_NAME","CLASSNAME","getVariant","variant","styleVariant","theme","color","NotificationsColorPalette","icon","mdiInformation","mdiInformationOutline","mdiAlertCircle","mdiAlertOutline","mdiCheckCircle","mdiCheck","mdiAlert","mdiTriangleOutline","Alert","forwardRef","props","ref","transientProps","otherProps","getStylingTransientProps","children","className","isClosable","isClosed","propsIsClosed","onClose","propsTheme","title","propsVariant","propsStyleVariant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","Object","values","includes","format","useMessageFormatter","intlMessages","setIsClosed","useState","useEffect","handleClose","useCallback","undefined","React","createElement","_extends","classNames","Boolean","Flexbox","justifyContent","gap","alignItems","Icon","Text","fontWeight","RedsiftTypographyFontWeightSemiBold","IconButton","mdiClose","onClick","displayName"],"mappings":"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"}

package/_internal/AppContent.js

@@ -4,7 +4,8 @@ import classNames from 'classnames';
 import { A as AppContainerContext } from './context2.js';
 import { u as useIsLoaded } from './useIsLoaded.js';
 import styled, { css } from 'styled-components';
-import { j as baseContainer } from './styles4.js';
+import { j as baseContainer } from './styles5.js';
+import { i as getContainerStylingTransientProps } from './styles.js';
 import { u as useTheme } from './useTheme.js';
 import { A as AppSidePanelVariant } from './types.js';
 
@@ -65,18 +66,22 @@ const CLASSNAME = 'redsift-app-content';
  * The AppContent component.
  */
 const AppContent = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    transientProps,
+    otherProps
+  } = getContainerStylingTransientProps(props);
   const {
       children,
       className,
       theme: propsTheme
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded);
   const {
     isLoaded
   } = useIsLoaded();
   const appContainerState = useContext(AppContainerContext);
   const theme = useTheme(propsTheme);
-  return /*#__PURE__*/React__default.createElement(StyledAppContent, _extends({}, forwardedProps, {
+  return /*#__PURE__*/React__default.createElement(StyledAppContent, _extends({}, forwardedProps, transientProps, {
     $isLoaded: isLoaded,
     $isSidePanelCollapsed: appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked : true,
     $isAppFullScreen: appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.hidden : false,

package/_internal/AppContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppContent.js","sources":["../../src/components/app-content/styles.ts","../../src/components/app-content/AppContent.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseContainer } from '../shared';\nimport { StyledAppContentProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppContent = styled.main<StyledAppContentProps>`\n  padding: 16px 64px;\n  ${baseContainer}\n\n  ${({ $theme }) =>\n    $theme\n      ? css`\n          background-color: var(--redsift-color-${$theme}-components-page-background);\n        `\n      : ''}\n  box-sizing: border-box;\n  min-height: calc(100vh - 92px);\n\n  @media screen and (max-width: 768px) {\n    padding: 0px;\n  }\n\n  ${({ $isSidePanelCollapsed, $isAppFullScreen }) =>\n    $isAppFullScreen\n      ? css`\n          transform: translate(0px);\n          width: calc(100%);\n        `\n      : !$isSidePanelCollapsed\n      ? css`\n          transform: translate(254px);\n          width: calc(100% - 254px);\n        `\n      : css`\n          transform: translate(68px);\n          width: calc(100% - 68px);\n        `}\n\n  ${({ $isLoaded }) =>\n    $isLoaded\n      ? css`\n          transition: transform 0.25s ease-out, width 0.25s ease-out;\n        `\n      : ''}\n`;\n","import React, { forwardRef, RefObject, useContext } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { AppContainerContext } from '../app-container/context';\nimport { useIsLoaded } from '../../hooks/useIsLoaded';\nimport { StyledAppContent } from './styles';\nimport { AppContentProps } from './types';\nimport { AppSidePanelVariant } from '../app-side-panel';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'AppContent';\nconst CLASSNAME = 'redsift-app-content';\n\n/**\n * The AppContent component.\n */\nexport const AppContent: Comp<AppContentProps, HTMLElement> = forwardRef((props, ref) => {\n  const { children, className, theme: propsTheme, ...forwardedProps } = props;\n\n  const { isLoaded } = useIsLoaded();\n  const appContainerState = useContext(AppContainerContext);\n  const theme = useTheme(propsTheme);\n\n  return (\n    <StyledAppContent\n      {...forwardedProps}\n      $isLoaded={isLoaded}\n      $isSidePanelCollapsed={\n        appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked : true\n      }\n      $isAppFullScreen={appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.hidden : false}\n      $theme={theme}\n      className={classNames(AppContent.className, className)}\n      ref={ref as RefObject<HTMLElement>}\n    >\n      {children}\n    </StyledAppContent>\n  );\n});\nAppContent.className = CLASSNAME;\nAppContent.displayName = COMPONENT_NAME;\n"],"names":["StyledAppContent","styled","main","baseContainer","_ref","$theme","css","_ref2","$isSidePanelCollapsed","$isAppFullScreen","_ref3","$isLoaded","COMPONENT_NAME","CLASSNAME","AppContent","forwardRef","props","ref","children","className","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","isLoaded","useIsLoaded","appContainerState","useContext","AppContainerContext","useTheme","React","createElement","_extends","sidePanelVariant","AppSidePanelVariant","shrinked","hidden","classNames","displayName"],"mappings":";;;;;;;;;;AAIA;AACA;AACA;AACO,MAAMA,gBAAgB,GAAGC,MAAM,CAACC,IAA4B,CAAA;AACnE;AACA,EAAA,EAAIC,aAAc,CAAA;AAClB;AACA,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;EAAA,OACXC,MAAM,GACFC,GAAI,CAAA;AACZ,gDAAA,EAAkDD,MAAO,CAAA;AACzD,QAAA,CAAS,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIE,KAAA,IAAA;EAAA,IAAC;IAAEC,qBAAqB;AAAEC,IAAAA,gBAAAA;AAAiB,GAAC,GAAAF,KAAA,CAAA;EAAA,OAC5CE,gBAAgB,GACZH,GAAI,CAAA;AACZ;AACA;AACA,QAAA,CAAS,GACD,CAACE,qBAAqB,GACtBF,GAAI,CAAA;AACZ;AACA;AACA,QAAA,CAAS,GACDA,GAAI,CAAA;AACZ;AACA;AACA,QAAS,CAAA,CAAA;AAAA,CAAC,CAAA;AACV;AACA,EAAA,EAAII,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,SAAAA;AAAU,GAAC,GAAAD,KAAA,CAAA;EAAA,OACdC,SAAS,GACLL,GAAI,CAAA;AACZ;AACA,QAAA,CAAS,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACX,CAAC;;;ACpCD,MAAMM,cAAc,GAAG,YAAY,CAAA;AACnC,MAAMC,SAAS,GAAG,qBAAqB,CAAA;;AAEvC;AACA;AACA;AACO,MAAMC,UAA8C,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACvF,MAAM;MAAEC,QAAQ;MAAEC,SAAS;AAAEC,MAAAA,KAAK,EAAEC,UAAAA;AAA8B,KAAC,GAAGL,KAAK;AAAxBM,IAAAA,cAAc,GAAAC,wBAAA,CAAKP,KAAK,EAAAQ,SAAA,CAAA,CAAA;EAE3E,MAAM;AAAEC,IAAAA,QAAAA;GAAU,GAAGC,WAAW,EAAE,CAAA;AAClC,EAAA,MAAMC,iBAAiB,GAAGC,UAAU,CAACC,mBAAmB,CAAC,CAAA;AACzD,EAAA,MAAMT,KAAK,GAAGU,QAAQ,CAACT,UAAU,CAAC,CAAA;EAElC,oBACEU,cAAA,CAAAC,aAAA,CAAChC,gBAAgB,EAAAiC,QAAA,KACXX,cAAc,EAAA;AAClBX,IAAAA,SAAS,EAAEc,QAAS;IACpBjB,qBAAqB,EACnBmB,iBAAiB,GAAGA,iBAAiB,CAACO,gBAAgB,KAAKC,mBAAmB,CAACC,QAAQ,GAAG,IAC3F;IACD3B,gBAAgB,EAAEkB,iBAAiB,GAAGA,iBAAiB,CAACO,gBAAgB,KAAKC,mBAAmB,CAACE,MAAM,GAAG,KAAM;AAChHhC,IAAAA,MAAM,EAAEe,KAAM;IACdD,SAAS,EAAEmB,UAAU,CAACxB,UAAU,CAACK,SAAS,EAAEA,SAAS,CAAE;AACvDF,IAAAA,GAAG,EAAEA,GAAAA;AAA8B,GAAA,CAAA,EAElCC,QACe,CAAC,CAAA;AAEvB,CAAC,EAAC;AACFJ,UAAU,CAACK,SAAS,GAAGN,SAAS,CAAA;AAChCC,UAAU,CAACyB,WAAW,GAAG3B,cAAc;;;;"}
+{"version":3,"file":"AppContent.js","sources":["../../src/components/app-content/styles.ts","../../src/components/app-content/AppContent.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseContainer } from '../shared';\nimport { StyledAppContentProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppContent = styled.main<StyledAppContentProps>`\n  padding: 16px 64px;\n  ${baseContainer}\n\n  ${({ $theme }) =>\n    $theme\n      ? css`\n          background-color: var(--redsift-color-${$theme}-components-page-background);\n        `\n      : ''}\n  box-sizing: border-box;\n  min-height: calc(100vh - 92px);\n\n  @media screen and (max-width: 768px) {\n    padding: 0px;\n  }\n\n  ${({ $isSidePanelCollapsed, $isAppFullScreen }) =>\n    $isAppFullScreen\n      ? css`\n          transform: translate(0px);\n          width: calc(100%);\n        `\n      : !$isSidePanelCollapsed\n      ? css`\n          transform: translate(254px);\n          width: calc(100% - 254px);\n        `\n      : css`\n          transform: translate(68px);\n          width: calc(100% - 68px);\n        `}\n\n  ${({ $isLoaded }) =>\n    $isLoaded\n      ? css`\n          transition: transform 0.25s ease-out, width 0.25s ease-out;\n        `\n      : ''}\n`;\n","import React, { forwardRef, RefObject, useContext } from 'react';\nimport classNames from 'classnames';\nimport { Comp, getContainerStylingTransientProps } from '../../types';\nimport { AppContainerContext } from '../app-container/context';\nimport { useIsLoaded } from '../../hooks/useIsLoaded';\nimport { StyledAppContent } from './styles';\nimport { AppContentProps } from './types';\nimport { AppSidePanelVariant } from '../app-side-panel';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'AppContent';\nconst CLASSNAME = 'redsift-app-content';\n\n/**\n * The AppContent component.\n */\nexport const AppContent: Comp<AppContentProps, HTMLElement> = forwardRef((props, ref) => {\n  const { transientProps, otherProps } = getContainerStylingTransientProps(props);\n\n  const { children, className, theme: propsTheme, ...forwardedProps } = otherProps;\n\n  const { isLoaded } = useIsLoaded();\n  const appContainerState = useContext(AppContainerContext);\n  const theme = useTheme(propsTheme);\n\n  return (\n    <StyledAppContent\n      {...forwardedProps}\n      {...transientProps}\n      $isLoaded={isLoaded}\n      $isSidePanelCollapsed={\n        appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked : true\n      }\n      $isAppFullScreen={appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.hidden : false}\n      $theme={theme}\n      className={classNames(AppContent.className, className)}\n      ref={ref as RefObject<HTMLElement>}\n    >\n      {children}\n    </StyledAppContent>\n  );\n});\nAppContent.className = CLASSNAME;\nAppContent.displayName = COMPONENT_NAME;\n"],"names":["StyledAppContent","styled","main","baseContainer","_ref","$theme","css","_ref2","$isSidePanelCollapsed","$isAppFullScreen","_ref3","$isLoaded","COMPONENT_NAME","CLASSNAME","AppContent","forwardRef","props","ref","transientProps","otherProps","getContainerStylingTransientProps","children","className","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","isLoaded","useIsLoaded","appContainerState","useContext","AppContainerContext","useTheme","React","createElement","_extends","sidePanelVariant","AppSidePanelVariant","shrinked","hidden","classNames","displayName"],"mappings":";;;;;;;;;;;AAIA;AACA;AACA;AACO,MAAMA,gBAAgB,GAAGC,MAAM,CAACC,IAA4B,CAAA;AACnE;AACA,EAAA,EAAIC,aAAc,CAAA;AAClB;AACA,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;EAAA,OACXC,MAAM,GACFC,GAAI,CAAA;AACZ,gDAAA,EAAkDD,MAAO,CAAA;AACzD,QAAA,CAAS,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIE,KAAA,IAAA;EAAA,IAAC;IAAEC,qBAAqB;AAAEC,IAAAA,gBAAAA;AAAiB,GAAC,GAAAF,KAAA,CAAA;EAAA,OAC5CE,gBAAgB,GACZH,GAAI,CAAA;AACZ;AACA;AACA,QAAA,CAAS,GACD,CAACE,qBAAqB,GACtBF,GAAI,CAAA;AACZ;AACA;AACA,QAAA,CAAS,GACDA,GAAI,CAAA;AACZ;AACA;AACA,QAAS,CAAA,CAAA;AAAA,CAAC,CAAA;AACV;AACA,EAAA,EAAII,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,SAAAA;AAAU,GAAC,GAAAD,KAAA,CAAA;EAAA,OACdC,SAAS,GACLL,GAAI,CAAA;AACZ;AACA,QAAA,CAAS,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACX,CAAC;;;ACpCD,MAAMM,cAAc,GAAG,YAAY,CAAA;AACnC,MAAMC,SAAS,GAAG,qBAAqB,CAAA;;AAEvC;AACA;AACA;AACO,MAAMC,UAA8C,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACvF,MAAM;IAAEC,cAAc;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGC,iCAAiC,CAACJ,KAAK,CAAC,CAAA;EAE/E,MAAM;MAAEK,QAAQ;MAAEC,SAAS;AAAEC,MAAAA,KAAK,EAAEC,UAAAA;AAA8B,KAAC,GAAGL,UAAU;AAA7BM,IAAAA,cAAc,GAAAC,wBAAA,CAAKP,UAAU,EAAAQ,SAAA,CAAA,CAAA;EAEhF,MAAM;AAAEC,IAAAA,QAAAA;GAAU,GAAGC,WAAW,EAAE,CAAA;AAClC,EAAA,MAAMC,iBAAiB,GAAGC,UAAU,CAACC,mBAAmB,CAAC,CAAA;AACzD,EAAA,MAAMT,KAAK,GAAGU,QAAQ,CAACT,UAAU,CAAC,CAAA;EAElC,oBACEU,cAAA,CAAAC,aAAA,CAACnC,gBAAgB,EAAAoC,QAAA,CAAA,EAAA,EACXX,cAAc,EACdP,cAAc,EAAA;AAClBP,IAAAA,SAAS,EAAEiB,QAAS;IACpBpB,qBAAqB,EACnBsB,iBAAiB,GAAGA,iBAAiB,CAACO,gBAAgB,KAAKC,mBAAmB,CAACC,QAAQ,GAAG,IAC3F;IACD9B,gBAAgB,EAAEqB,iBAAiB,GAAGA,iBAAiB,CAACO,gBAAgB,KAAKC,mBAAmB,CAACE,MAAM,GAAG,KAAM;AAChHnC,IAAAA,MAAM,EAAEkB,KAAM;IACdD,SAAS,EAAEmB,UAAU,CAAC3B,UAAU,CAACQ,SAAS,EAAEA,SAAS,CAAE;AACvDL,IAAAA,GAAG,EAAEA,GAAAA;AAA8B,GAAA,CAAA,EAElCI,QACe,CAAC,CAAA;AAEvB,CAAC,EAAC;AACFP,UAAU,CAACQ,SAAS,GAAGT,SAAS,CAAA;AAChCC,UAAU,CAAC4B,WAAW,GAAG9B,cAAc;;;;"}

package/_internal/Badge2.js

@@ -3,7 +3,8 @@ import React__default, { forwardRef } from 'react';
 import classNames from 'classnames';
 import styled, { css } from 'styled-components';
 import { T as Theme, f as PresentationColorPalette, N as NotificationsColorPalette } from './colors.js';
-import { i as baseStyling } from './styles4.js';
+import { i as baseStyling } from './styles5.js';
+import { f as getStylingTransientProps } from './styles.js';
 import { u as useTheme } from './useTheme.js';
 
 /**
@@ -112,6 +113,10 @@ const CLASSNAME = 'redsift-badge';
  * The Badge component.
  */
 const Badge = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    transientProps,
+    otherProps
+  } = getStylingTransientProps(props);
   const {
       autoBreak,
       children,
@@ -120,12 +125,12 @@ const Badge = /*#__PURE__*/forwardRef((props, ref) => {
       isReversed,
       theme: propsTheme,
       variant: propsVariant
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded);
   const theme = useTheme(propsTheme);
   const color = [...Object.values(NotificationsColorPalette), ...Object.values(PresentationColorPalette)].includes(propsColor) ? propsColor : 'question';
   const variant = Object.values(BadgeVariant).includes(propsVariant) ? propsVariant : 'dot';
-  return /*#__PURE__*/React__default.createElement(StyledBadge, _extends({}, forwardedProps, {
+  return /*#__PURE__*/React__default.createElement(StyledBadge, _extends({}, forwardedProps, transientProps, {
     $autoBreak: autoBreak,
     $color: color,
     $isReversed: isReversed,

package/_internal/Badge2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge2.js","sources":["../../src/components/badge/types.ts","../../src/components/badge/styles.ts","../../src/components/badge/Badge.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport {\n  NotificationsColorPalette,\n  PresentationColorPalette,\n  LayoutProps,\n  PositioningProps,\n  SpacingProps,\n  ValueOf,\n  Theme,\n} from '../../types';\n\n/**\n * Component variant.\n */\nexport const BadgeVariant = {\n  dot: 'dot',\n  standard: 'standard',\n} as const;\nexport type BadgeVariant = ValueOf<typeof BadgeVariant>;\n\n/**\n * Component props.\n */\nexport interface BadgeProps extends ComponentProps<'div'>, LayoutProps, SpacingProps, PositioningProps {\n  /** Whether the badge should automatically break content. */\n  autoBreak?: boolean;\n  /** Color variant. The product colors are available but should only be used to display the Badge in the color of another product. To display a Badge with a color of the current product, use `default`. */\n  color?: NotificationsColorPalette | PresentationColorPalette;\n  /** Whether the Badge has its colors reversed or not. */\n  isReversed?: boolean;\n  /** Theme. */\n  theme?: Theme;\n  /** Badge variant. */\n  variant?: BadgeVariant;\n}\n\nexport type StyledBadgeProps = Omit<BadgeProps, 'color' | 'variant' | 'isReversed' | 'autoBreak'> & {\n  $autoBreak: BadgeProps['autoBreak'];\n  $color: BadgeProps['color'];\n  $isReversed: BadgeProps['isReversed'];\n  $variant: BadgeProps['variant'];\n  $theme: BadgeProps['theme'];\n};\n","import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { NotificationsColorPalette, PresentationColorPalette, Theme } from '../../types';\nimport { BadgeVariant, StyledBadgeProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledBadge = styled.div<StyledBadgeProps>`\n  ${baseStyling}\n  box-sizing: content-box;\n\n  ${({ $color, $isReversed, $theme }) => {\n    if ($isReversed) {\n      return css`\n        background-color: var(--redsift-color-neutral-${$theme === Theme.light ? 'white' : 'x-dark-grey'});\n\n        &,\n        .redsift-icon {\n          color: ${Object.keys(PresentationColorPalette).includes($color!)\n            ? `var(--redsift-color-presentation-${$color}-darker);`\n            : Object.keys(NotificationsColorPalette).includes($color!)\n            ? `var(--redsift-color-notifications-${$color}-primary);`\n            : css`var(--redsift-color-neutral-x-dark-grey);`};\n        }\n      `;\n    } else {\n      return css`\n        background-color: ${Object.keys(PresentationColorPalette).includes($color!)\n          ? `var(--redsift-color-presentation-${$color}-darker);`\n          : Object.keys(NotificationsColorPalette).includes($color!)\n          ? `var(--redsift-color-notifications-${$color}-primary);`\n          : css`var(--redsift-color-neutral-x-dark-grey);`};\n        &,\n        .redsift-icon {\n          color: var(--redsift-color-neutral-white);\n        }\n      `;\n    }\n  }}\n\n  ${({ $variant, $autoBreak }) => {\n    switch ($variant) {\n      case BadgeVariant.dot:\n        return css`\n          border-radius: 50%;\n          height: 8px;\n          margin-bottom: 12px;\n          margin-right: 12px;\n          width: 8px;\n        `;\n      case BadgeVariant.standard:\n      default:\n        return css`\n          align-items: center;\n          border-radius: 64px;\n          display: inline-flex;\n          gap: 4px;\n          height: fit-content;\n          justify-content: center;\n          min-width: 8px;\n          padding: 4px 6px;\n          text-align: center;\n          width: fit-content;\n          word-break: ${$autoBreak ? 'break-word' : 'normal'};\n\n          &,\n          .redsift-icon,\n          .redsift-number,\n          .redsift-text {\n            font-family: var(--redsift-typography-badge-font-family);\n            font-size: var(--redsift-typography-badge-font-size);\n            font-weight: var(--redsift-typography-badge-font-weight);\n            line-height: var(--redsift-typography-badge-line-height);\n          }\n\n          .redsift-icon {\n            width: unset;\n            height: unset;\n\n            > svg {\n              width: 1em;\n              height: 1em;\n            }\n          }\n        `;\n    }\n  }}\n`;\n","import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { NotificationsColorPalette, Comp, PresentationColorPalette } from '../../types';\nimport { StyledBadge } from './styles';\nimport { BadgeProps, BadgeVariant } from './types';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Badge';\nconst CLASSNAME = 'redsift-badge';\n\n/**\n * The Badge component.\n */\nexport const Badge: Comp<BadgeProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    autoBreak,\n    children,\n    className,\n    color: propsColor,\n    isReversed,\n    theme: propsTheme,\n    variant: propsVariant,\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme(propsTheme);\n  const color = [...Object.values(NotificationsColorPalette), ...Object.values(PresentationColorPalette)].includes(\n    propsColor!\n  )\n    ? propsColor\n    : 'question';\n  const variant = Object.values(BadgeVariant).includes(propsVariant!) ? propsVariant : 'dot';\n\n  return (\n    <StyledBadge\n      {...forwardedProps}\n      $autoBreak={autoBreak}\n      $color={color}\n      $isReversed={isReversed}\n      $theme={theme}\n      $variant={variant}\n      className={classNames(Badge.className, `${Badge.className}-${variant}`, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n    >\n      {variant === BadgeVariant.standard ? children : null}\n    </StyledBadge>\n  );\n});\nBadge.className = CLASSNAME;\nBadge.displayName = COMPONENT_NAME;\n"],"names":["BadgeVariant","dot","standard","StyledBadge","styled","div","baseStyling","_ref","$color","$isReversed","$theme","css","Theme","light","Object","keys","PresentationColorPalette","includes","NotificationsColorPalette","_ref2","$variant","$autoBreak","COMPONENT_NAME","CLASSNAME","Badge","forwardRef","props","ref","autoBreak","children","className","color","propsColor","isReversed","theme","propsTheme","variant","propsVariant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","values","React","createElement","_extends","classNames","displayName"],"mappings":"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"}
+{"version":3,"file":"Badge2.js","sources":["../../src/components/badge/types.ts","../../src/components/badge/styles.ts","../../src/components/badge/Badge.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport {\n  NotificationsColorPalette,\n  PresentationColorPalette,\n  LayoutProps,\n  LayoutTransientProps,\n  PositioningProps,\n  PositioningTransientProps,\n  SpacingProps,\n  SpacingTransientProps,\n  ValueOf,\n  Theme,\n} from '../../types';\n\n/**\n * Component variant.\n */\nexport const BadgeVariant = {\n  dot: 'dot',\n  standard: 'standard',\n} as const;\nexport type BadgeVariant = ValueOf<typeof BadgeVariant>;\n\n/**\n * Component props.\n */\nexport interface BadgeProps extends ComponentProps<'div'>, LayoutProps, SpacingProps, PositioningProps {\n  /** Whether the badge should automatically break content. */\n  autoBreak?: boolean;\n  /** Color variant. The product colors are available but should only be used to display the Badge in the color of another product. To display a Badge with a color of the current product, use `default`. */\n  color?: NotificationsColorPalette | PresentationColorPalette;\n  /** Whether the Badge has its colors reversed or not. */\n  isReversed?: boolean;\n  /** Theme. */\n  theme?: Theme;\n  /** Badge variant. */\n  variant?: BadgeVariant;\n}\n\nexport interface StyledBadgeProps\n  extends ComponentProps<'div'>,\n    LayoutTransientProps,\n    SpacingTransientProps,\n    PositioningTransientProps {\n  $autoBreak: BadgeProps['autoBreak'];\n  $color: BadgeProps['color'];\n  $isReversed: BadgeProps['isReversed'];\n  $variant: BadgeProps['variant'];\n  $theme: BadgeProps['theme'];\n}\n","import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { NotificationsColorPalette, PresentationColorPalette, Theme } from '../../types';\nimport { BadgeVariant, StyledBadgeProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledBadge = styled.div<StyledBadgeProps>`\n  ${baseStyling}\n  box-sizing: content-box;\n\n  ${({ $color, $isReversed, $theme }) => {\n    if ($isReversed) {\n      return css`\n        background-color: var(--redsift-color-neutral-${$theme === Theme.light ? 'white' : 'x-dark-grey'});\n\n        &,\n        .redsift-icon {\n          color: ${Object.keys(PresentationColorPalette).includes($color!)\n            ? `var(--redsift-color-presentation-${$color}-darker);`\n            : Object.keys(NotificationsColorPalette).includes($color!)\n            ? `var(--redsift-color-notifications-${$color}-primary);`\n            : css`var(--redsift-color-neutral-x-dark-grey);`};\n        }\n      `;\n    } else {\n      return css`\n        background-color: ${Object.keys(PresentationColorPalette).includes($color!)\n          ? `var(--redsift-color-presentation-${$color}-darker);`\n          : Object.keys(NotificationsColorPalette).includes($color!)\n          ? `var(--redsift-color-notifications-${$color}-primary);`\n          : css`var(--redsift-color-neutral-x-dark-grey);`};\n        &,\n        .redsift-icon {\n          color: var(--redsift-color-neutral-white);\n        }\n      `;\n    }\n  }}\n\n  ${({ $variant, $autoBreak }) => {\n    switch ($variant) {\n      case BadgeVariant.dot:\n        return css`\n          border-radius: 50%;\n          height: 8px;\n          margin-bottom: 12px;\n          margin-right: 12px;\n          width: 8px;\n        `;\n      case BadgeVariant.standard:\n      default:\n        return css`\n          align-items: center;\n          border-radius: 64px;\n          display: inline-flex;\n          gap: 4px;\n          height: fit-content;\n          justify-content: center;\n          min-width: 8px;\n          padding: 4px 6px;\n          text-align: center;\n          width: fit-content;\n          word-break: ${$autoBreak ? 'break-word' : 'normal'};\n\n          &,\n          .redsift-icon,\n          .redsift-number,\n          .redsift-text {\n            font-family: var(--redsift-typography-badge-font-family);\n            font-size: var(--redsift-typography-badge-font-size);\n            font-weight: var(--redsift-typography-badge-font-weight);\n            line-height: var(--redsift-typography-badge-line-height);\n          }\n\n          .redsift-icon {\n            width: unset;\n            height: unset;\n\n            > svg {\n              width: 1em;\n              height: 1em;\n            }\n          }\n        `;\n    }\n  }}\n`;\n","import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { NotificationsColorPalette, Comp, PresentationColorPalette, getStylingTransientProps } from '../../types';\nimport { StyledBadge } from './styles';\nimport { BadgeProps, BadgeVariant } from './types';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Badge';\nconst CLASSNAME = 'redsift-badge';\n\n/**\n * The Badge component.\n */\nexport const Badge: Comp<BadgeProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { transientProps, otherProps } = getStylingTransientProps(props);\n\n  const {\n    autoBreak,\n    children,\n    className,\n    color: propsColor,\n    isReversed,\n    theme: propsTheme,\n    variant: propsVariant,\n    ...forwardedProps\n  } = otherProps;\n\n  const theme = useTheme(propsTheme);\n  const color = [...Object.values(NotificationsColorPalette), ...Object.values(PresentationColorPalette)].includes(\n    propsColor!\n  )\n    ? propsColor\n    : 'question';\n  const variant = Object.values(BadgeVariant).includes(propsVariant!) ? propsVariant : 'dot';\n\n  return (\n    <StyledBadge\n      {...forwardedProps}\n      {...transientProps}\n      $autoBreak={autoBreak}\n      $color={color}\n      $isReversed={isReversed}\n      $theme={theme}\n      $variant={variant}\n      className={classNames(Badge.className, `${Badge.className}-${variant}`, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n    >\n      {variant === BadgeVariant.standard ? children : null}\n    </StyledBadge>\n  );\n});\nBadge.className = CLASSNAME;\nBadge.displayName = COMPONENT_NAME;\n"],"names":["BadgeVariant","dot","standard","StyledBadge","styled","div","baseStyling","_ref","$color","$isReversed","$theme","css","Theme","light","Object","keys","PresentationColorPalette","includes","NotificationsColorPalette","_ref2","$variant","$autoBreak","COMPONENT_NAME","CLASSNAME","Badge","forwardRef","props","ref","transientProps","otherProps","getStylingTransientProps","autoBreak","children","className","color","propsColor","isReversed","theme","propsTheme","variant","propsVariant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","values","React","createElement","_extends","classNames","displayName"],"mappings":"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"}

package/_internal/Breadcrumbs2.js

@@ -3,9 +3,10 @@ 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 { i as baseStyling } from './styles5.js';
 import { f as filterComponents } from './filterComponents.js';
 import { B as BreadcrumbItem } from './BreadcrumbItem.js';
+import { f as getStylingTransientProps } from './styles.js';
 import { u as useTheme, a as ThemeProvider } from './useTheme.js';
 
 /**
@@ -49,13 +50,17 @@ 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 {
+    transientProps,
+    otherProps
+  } = getStylingTransientProps(props);
   const {
       children,
       className,
       isDisabled,
       theme: propsTheme
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded);
   warnIfNoAccessibleLabelFound(props, undefined, 'Breadcrumbs');
   const theme = useTheme(propsTheme);
   const childArray = filterComponents([Breadcrumbs.Item])(children);
@@ -77,7 +82,7 @@ const BaseBreadcrumbs = /*#__PURE__*/forwardRef((props, ref) => {
     value: {
       theme
     }
-  }, /*#__PURE__*/React__default.createElement(StyledBreadcrumbs, _extends({}, forwardedProps, {
+  }, /*#__PURE__*/React__default.createElement(StyledBreadcrumbs, _extends({}, forwardedProps, transientProps, {
     $isDisabled: isDisabled,
     $theme: theme,
     className: classNames(BaseBreadcrumbs.className, className),

package/_internal/Breadcrumbs2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs2.js","sources":["../../src/components/breadcrumbs/styles.ts","../../src/components/breadcrumbs/Breadcrumbs.tsx"],"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","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":["StyledBreadcrumbs","styled","nav","baseStyling","_ref","$isDisabled","$theme","css","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","classNames","displayName","Object","assign","BreadcrumbItem"],"mappings":"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"}
+{"version":3,"file":"Breadcrumbs2.js","sources":["../../src/components/breadcrumbs/styles.ts","../../src/components/breadcrumbs/Breadcrumbs.tsx"],"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","import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp, getStylingTransientProps } 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 { transientProps, otherProps } = getStylingTransientProps(props);\n\n  const { children, className, isDisabled, theme: propsTheme, ...forwardedProps } = otherProps;\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        {...transientProps}\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":["StyledBreadcrumbs","styled","nav","baseStyling","_ref","$isDisabled","$theme","css","COMPONENT_NAME","CLASSNAME","BaseBreadcrumbs","forwardRef","props","ref","transientProps","otherProps","getStylingTransientProps","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","classNames","displayName","Object","assign","BreadcrumbItem"],"mappings":"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"}

package/_internal/Button2.js

@@ -1,12 +1,13 @@
 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 { B as ButtonVariant, S as StyledButton } from './styles2.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 { f as getStylingTransientProps } from './styles.js';
 import { u as useTheme } from './useTheme.js';
 
 const _excluded = ["children", "className", "color", "disabled", "fullWidth", "isActive", "isDisabled", "isHovered", "isLoading", "leftIcon", "leftIconProps", "rightIcon", "rightIconProps", "theme", "variant"];
@@ -23,6 +24,10 @@ const CLASSNAME = 'redsift-button';
 const Button = /*#__PURE__*/forwardRef((props, ref) => {
   const _ref = useRef();
   const buttonRef = ref || _ref;
+  const {
+    transientProps,
+    otherProps
+  } = getStylingTransientProps(props);
   const {
       children,
       className,
@@ -39,8 +44,8 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
       rightIconProps,
       theme: propsTheme,
       variant: propsVariant
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded);
   const isDisabled = isLoading || propsIsDisabled || disabled;
   const theme = useTheme(propsTheme);
   const color = Object.values(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';
@@ -57,7 +62,7 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
     }, children)
   }, /*#__PURE__*/React__default.createElement(StyledButton, _extends({
     type: "button"
-  }, forwardedProps, {
+  }, forwardedProps, transientProps, {
     $color: color,
     $fullWidth: fullWidth,
     $isActive: isActive,

package/_internal/Button2.js.map

@@ -1 +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":";;;;;;;;;;;;AAWA,MAAMA,cAAc,GAAG,QAAQ,CAAA;AAC/B,MAAMC,SAAS,GAAG,gBAAgB,CAAA;;AAElC;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,MAA4C,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;AACrF,EAAA,MAAMC,IAAI,GAAGC,MAAM,EAAqB,CAAA;AACxC,EAAA,MAAMC,SAAS,GAAGH,GAAG,IAAIC,IAAI,CAAA;EAE7B,MAAM;MACJG,QAAQ;MACRC,SAAS;AACTC,MAAAA,KAAK,EAAEC,UAAU;MACjBC,QAAQ;MACRC,SAAS;MACTC,QAAQ;AACRC,MAAAA,UAAU,EAAEC,eAAe;MAC3BC,SAAS;MACTC,SAAS;MACTC,QAAQ;MACRC,aAAa;MACbC,SAAS;MACTC,cAAc;AACdC,MAAAA,KAAK,EAAEC,UAAU;AACjBC,MAAAA,OAAO,EAAEC,YAAAA;AAEX,KAAC,GAAGvB,KAAK;AADJwB,IAAAA,cAAc,GAAAC,wBAAA,CACfzB,KAAK,EAAA0B,SAAA,CAAA,CAAA;AACT,EAAA,MAAMd,UAAU,GAAGG,SAAS,IAAIF,eAAe,IAAIJ,QAAQ,CAAA;AAE3D,EAAA,MAAMW,KAAK,GAAGO,QAAQ,CAACN,UAAU,CAAC,CAAA;AAClC,EAAA,MAAMd,KAAK,GAAGqB,MAAM,CAACC,MAAM,CAACC,mBAAmB,CAAC,CAACC,QAAQ,CAACvB,UAAW,CAAC,GAAGA,UAAU,GAAG,SAAS,CAAA;AAC/F,EAAA,MAAMc,OAAO,GAAGM,MAAM,CAACC,MAAM,CAACG,aAAa,CAAC,CAACD,QAAQ,CAACR,YAAa,CAAC,GAAGA,YAAY,GAAG,SAAS,CAAA;AAC/F,EAAA,MAAMU,UAAU,GAAG1B,KAAK,KAAKuB,mBAAmB,CAACI,KAAK,CAAA;AAEtD,EAAA,oBACEC,cAAA,CAAAC,aAAA,CAACC,kBAAkB,EAAA;AACjBC,IAAAA,SAAS,EAAEL,UAAU,IAAIX,OAAO,KAAKU,aAAa,CAACO,SAAU;AAC7DC,IAAAA,OAAO,EAAGnC,QAAQ,iBAChB8B,cAAA,CAAAC,aAAA,CAACK,oBAAoB,EAAA;AACnBC,MAAAA,MAAM,EAAEnC,KAAM;AACdoC,MAAAA,SAAS,EAAEhC,QAAS;AACpBiC,MAAAA,WAAW,EAAEhC,UAAW;AACxBiC,MAAAA,UAAU,EAAE/B,SAAU;AACtBgC,MAAAA,MAAM,EAAE1B,KAAAA;AAAM,KAAA,EAEbf,QACmB,CAAA;AACtB,GAAA,eAEF8B,cAAA,CAAAC,aAAA,CAACW,YAAY,EAAAC,QAAA,CAAA;AACXC,IAAAA,IAAI,EAAC,QAAA;AAAQ,GAAA,EACTzB,cAAc,EAAA;AAClBkB,IAAAA,MAAM,EAAEnC,KAAM;AACd2C,IAAAA,UAAU,EAAExC,SAAU;AACtBiC,IAAAA,SAAS,EAAEhC,QAAS;AACpBiC,IAAAA,WAAW,EAAEhC,UAAW;AACxBuC,IAAAA,WAAW,EAAElB,UAAW;AACxBY,IAAAA,UAAU,EAAE/B,SAAU;AACtBsC,IAAAA,UAAU,EAAErC,SAAU;AACtB+B,IAAAA,MAAM,EAAE1B,KAAM;AACdiC,IAAAA,QAAQ,EAAE/B,OAAQ;AAClB,IAAA,eAAA,EAAeV,UAAW;IAC1BN,SAAS,EAAEgD,UAAU,CAACxD,MAAM,CAACQ,SAAS,EAAEA,SAAS,CAAE;AACnDG,IAAAA,QAAQ,EAAEG,UAAW;AACrBX,IAAAA,GAAG,EAAEG,SAAAA;GAEJY,CAAAA,EAAAA,QAAQ,gBAAGmB,cAAA,CAAAC,aAAA,CAACmB,IAAI,EAAAP,QAAA,CAAA;AAACQ,IAAAA,IAAI,EAAExC,QAAS;AAAC,IAAA,aAAA,EAAY,MAAM;AAACV,IAAAA,SAAS,EAAC,MAAA;AAAM,GAAA,EAAKW,aAAa,CAAG,CAAC,GAAG,IAAI,EACjGF,SAAS,gBAAGoB,cAAA,CAAAC,aAAA,CAACqB,OAAO,EAAA;AAACC,IAAAA,IAAI,EAAC,OAAO;IAACnD,KAAK,EAAEe,OAAO,KAAKU,aAAa,CAAC2B,OAAO,GAAG,SAAS,GAAG,SAAA;AAAU,GAAE,CAAC,GAAG,IAAI,eAC9GxB,cAAA,CAAAC,aAAA,CAAO/B,MAAAA,EAAAA,IAAAA,EAAAA,QAAe,CAAC,EACtBa,SAAS,gBAAGiB,cAAA,CAAAC,aAAA,CAACmB,IAAI,EAAAP,QAAA,CAAA;AAACQ,IAAAA,IAAI,EAAEtC,SAAU;AAAC,IAAA,aAAA,EAAY,MAAM;AAACZ,IAAAA,SAAS,EAAC,OAAA;AAAO,GAAA,EAAKa,cAAc,CAAG,CAAC,GAAG,IACtF,CACI,CAAC,CAAA;AAEzB,CAAC,EAAC;AACFrB,MAAM,CAACQ,SAAS,GAAGT,SAAS,CAAA;AAC5BC,MAAM,CAAC8D,WAAW,GAAGhE,cAAc;;;;"}
+{"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, getStylingTransientProps } 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 { transientProps, otherProps } = getStylingTransientProps(props);\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  } = otherProps;\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        {...transientProps}\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","transientProps","otherProps","getStylingTransientProps","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/_internal/ButtonGroup.js

@@ -2,7 +2,8 @@ import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBab
 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 baseStyling, g as baseFlexbox } from './styles5.js';
+import { f as getStylingTransientProps, h as getFlexLayoutTransientProps } from './styles.js';
 import { i as isComponent } from './isComponent.js';
 import { u as useTheme } from './useTheme.js';
 import { B as ButtonsColorPalette } from './colors.js';
@@ -31,9 +32,9 @@ const ButtonGroupVariant = {
 const StyledButtonGroup = styled.div`
   display: ${_ref => {
   let {
-    inline
+    $inline
   } = _ref;
-  return inline ? 'inline-flex' : 'flex';
+  return $inline ? 'inline-flex' : 'flex';
 }};
 
   ${baseStyling}
@@ -130,14 +131,22 @@ const CLASSNAME = 'redsift-button-group';
  * The ButtonGroup component.
  */
 const ButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    transientProps: stylingTransientProps,
+    otherProps: propsAfterStyling
+  } = getStylingTransientProps(props);
+  const {
+    transientProps: flexLayoutTransientProps,
+    otherProps
+  } = getFlexLayoutTransientProps(propsAfterStyling);
   const {
       children,
       className,
       color: propsColor,
       theme: propsTheme,
       variant: propsVariant
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded);
   const theme = useTheme(propsTheme);
   const color = Object.values(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';
   const variant = Object.values(ButtonGroupVariant).includes(propsVariant) ? propsVariant : 'primary';
@@ -166,7 +175,7 @@ const ButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
       className: index === 0 ? 'first-button' : index === childArray.length - 1 ? 'last-button' : 'middle-button'
     });
   });
-  return /*#__PURE__*/React__default.createElement(StyledButtonGroup, _extends({}, forwardedProps, {
+  return /*#__PURE__*/React__default.createElement(StyledButtonGroup, _extends({}, forwardedProps, stylingTransientProps, flexLayoutTransientProps, {
     className: classNames(ButtonGroup.className, className),
     ref: ref,
     $color: color,

package/_internal/ButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.js","sources":["../../src/components/button-group/types.ts","../../src/components/button-group/styles.ts","../../src/components/button-group/ButtonGroup.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { FlexLayoutProps, ButtonsColorPalette, StylingProps, Theme, ValueOf } from '../../types';\n\n/**\n * Component variant.\n */\nexport const ButtonGroupVariant = {\n  primary: 'primary',\n  secondary: 'secondary',\n  unstyled: 'unstyled',\n} as const;\nexport type ButtonGroupVariant = ValueOf<typeof ButtonGroupVariant>;\n\n/**\n * Component color.\n */\nexport type ButtonGroupColor = ButtonsColorPalette;\n\n/**\n * Component props.\n */\nexport interface ButtonGroupProps extends ComponentProps<'div'>, StylingProps, FlexLayoutProps {\n  /** Button color. */\n  color?: ButtonGroupColor;\n  /** Button variant. */\n  variant?: ButtonGroupVariant;\n  /** Theme. */\n  theme?: Theme;\n}\n\nexport type StyledButtonGroupProps = ButtonGroupProps & {\n  $color: ButtonGroupProps['color'];\n  $variant: ButtonGroupProps['variant'];\n  $theme: ButtonGroupProps['theme'];\n};\n","import styled, { css } from 'styled-components';\nimport { baseFlexbox, baseStyling } from '../shared';\nimport { ButtonGroupVariant, StyledButtonGroupProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledButtonGroup = styled.div<StyledButtonGroupProps>`\n  display: ${({ inline }) => (inline ? 'inline-flex' : 'flex')};\n\n  ${baseStyling}\n  ${baseFlexbox}\n\n  ${({ $color, $variant, $theme }) => css`\n    ${$variant === ButtonGroupVariant.secondary\n      ? css`\n          .first-button {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n            border-right-color: transparent;\n          }\n\n          .middle-button {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n            margin-left: -1px;\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n            border-right-color: transparent;\n          }\n\n          .last-button {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n            margin-left: -1px;\n          }\n        `\n      : $variant === ButtonGroupVariant.unstyled\n      ? css`\n          .first-button {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n            border-right: 1px solid rgba(0, 0, 0, 0.23);\n            border-color: ${`var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-default\n            )`};\n          }\n\n          .middle-button {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n            border-right: 1px solid rgba(0, 0, 0, 0.23);\n            border-color: ${`var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-default\n            )`};\n          }\n\n          .last-button {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n        `\n      : css`\n          .first-button {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n            border-right: 1px solid #bdbdbd;\n            border-color: ${`var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-hover\n            )`};\n          }\n\n          .middle-button {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n            border-right: 1px solid #bdbdbd;\n            border-color: ${`var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-hover\n            )`};\n          }\n\n          .last-button {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n        `}\n  `};\n`;\n","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      isComponent('Toggletip')(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":["ButtonGroupVariant","primary","secondary","unstyled","StyledButtonGroup","styled","div","_ref","inline","baseStyling","baseFlexbox","_ref2","$color","$variant","$theme","css","COMPONENT_NAME","CLASSNAME","ButtonGroup","forwardRef","props","ref","children","className","color","propsColor","theme","propsTheme","variant","propsVariant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","Object","values","ButtonsColorPalette","includes","childArray","filterComponents","buttons","map","child","index","_key","isComponent","_child$key","React","cloneElement","key","triggerClassName","length","createElement","_extends","classNames","displayName"],"mappings":"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"}
+{"version":3,"file":"ButtonGroup.js","sources":["../../src/components/button-group/types.ts","../../src/components/button-group/styles.ts","../../src/components/button-group/ButtonGroup.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport {\n  FlexLayoutProps,\n  ButtonsColorPalette,\n  StylingProps,\n  StylingTransientProps,\n  FlexLayoutTransientProps,\n  Theme,\n  ValueOf,\n} from '../../types';\n\n/**\n * Component variant.\n */\nexport const ButtonGroupVariant = {\n  primary: 'primary',\n  secondary: 'secondary',\n  unstyled: 'unstyled',\n} as const;\nexport type ButtonGroupVariant = ValueOf<typeof ButtonGroupVariant>;\n\n/**\n * Component color.\n */\nexport type ButtonGroupColor = ButtonsColorPalette;\n\n/**\n * Component props.\n */\nexport interface ButtonGroupProps extends ComponentProps<'div'>, StylingProps, FlexLayoutProps {\n  /** Button color. */\n  color?: ButtonGroupColor;\n  /** Button variant. */\n  variant?: ButtonGroupVariant;\n  /** Theme. */\n  theme?: Theme;\n}\n\nexport interface StyledButtonGroupProps extends ComponentProps<'div'>, StylingTransientProps, FlexLayoutTransientProps {\n  $color: ButtonGroupProps['color'];\n  $variant: ButtonGroupProps['variant'];\n  $theme: ButtonGroupProps['theme'];\n}\n","import styled, { css } from 'styled-components';\nimport { baseFlexbox, baseStyling } from '../shared';\nimport { ButtonGroupVariant, StyledButtonGroupProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledButtonGroup = styled.div<StyledButtonGroupProps>`\n  display: ${({ $inline }) => ($inline ? 'inline-flex' : 'flex')};\n\n  ${baseStyling}\n  ${baseFlexbox}\n\n  ${({ $color, $variant, $theme }) => css`\n    ${$variant === ButtonGroupVariant.secondary\n      ? css`\n          .first-button {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n            border-right-color: transparent;\n          }\n\n          .middle-button {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n            margin-left: -1px;\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n            border-right-color: transparent;\n          }\n\n          .last-button {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n            margin-left: -1px;\n          }\n        `\n      : $variant === ButtonGroupVariant.unstyled\n      ? css`\n          .first-button {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n            border-right: 1px solid rgba(0, 0, 0, 0.23);\n            border-color: ${`var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-default\n            )`};\n          }\n\n          .middle-button {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n            border-right: 1px solid rgba(0, 0, 0, 0.23);\n            border-color: ${`var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-default\n            )`};\n          }\n\n          .last-button {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n        `\n      : css`\n          .first-button {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n            border-right: 1px solid #bdbdbd;\n            border-color: ${`var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-hover\n            )`};\n          }\n\n          .middle-button {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n            border-right: 1px solid #bdbdbd;\n            border-color: ${`var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-hover\n            )`};\n          }\n\n          .last-button {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n        `}\n  `};\n`;\n","import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { ButtonsColorPalette, Comp, getStylingTransientProps, getFlexLayoutTransientProps } 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 { transientProps: stylingTransientProps, otherProps: propsAfterStyling } = getStylingTransientProps(props);\n  const { transientProps: flexLayoutTransientProps, otherProps } = getFlexLayoutTransientProps(propsAfterStyling);\n\n  const {\n    children,\n    className,\n    color: propsColor,\n    theme: propsTheme,\n    variant: propsVariant,\n    ...forwardedProps\n  } = otherProps;\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      isComponent('Toggletip')(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      {...stylingTransientProps}\n      {...flexLayoutTransientProps}\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":["ButtonGroupVariant","primary","secondary","unstyled","StyledButtonGroup","styled","div","_ref","$inline","baseStyling","baseFlexbox","_ref2","$color","$variant","$theme","css","COMPONENT_NAME","CLASSNAME","ButtonGroup","forwardRef","props","ref","transientProps","stylingTransientProps","otherProps","propsAfterStyling","getStylingTransientProps","flexLayoutTransientProps","getFlexLayoutTransientProps","children","className","color","propsColor","theme","propsTheme","variant","propsVariant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","Object","values","ButtonsColorPalette","includes","childArray","filterComponents","buttons","map","child","index","_key","isComponent","_child$key","React","cloneElement","key","triggerClassName","length","createElement","_extends","classNames","displayName"],"mappings":"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"}

package/_internal/ButtonLink.js

@@ -2,7 +2,7 @@ import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBab
 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 { B as ButtonVariant, S as StyledButton } from './styles2.js';
 import { u as useTheme } from './useTheme.js';
 import { B as ButtonsColorPalette } from './colors.js';
 import { C as ConditionalWrapper } from './ConditionalWrapper.js';