@redsift/design-system 11.9.4-muiv5 → 12.0.0-muiv5

package/_internal/Card2.js

@@ -3,7 +3,7 @@ import React__default, { forwardRef, useState, useEffect, useCallback } from 're
 import classNames from 'classnames';
 import { mdiChevronDown, mdiChevronUp } 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 } from './colors.js';
 import { p as partitionComponents } from './partitionComponents.js';
 import { i as isComponent } from './isComponent.js';
@@ -11,6 +11,7 @@ import { C as CardHeader } from './CardHeader.js';
 import { C as CardBody } from './CardBody.js';
 import { C as CardActions } from './CardActions.js';
 import { u as useMessageFormatter } from './useMessageFormatter.js';
+import { f as getStylingTransientProps } from './styles.js';
 import { u as useTheme, a as ThemeProvider } from './useTheme.js';
 import { I as IconButton } from './IconButton.js';
 
@@ -98,6 +99,10 @@ const CLASSNAME = 'redsift-card';
  * The Card component.
  */
 const BaseCard = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    transientProps,
+    otherProps
+  } = getStylingTransientProps(props);
   const {
       children,
       className,
@@ -106,8 +111,8 @@ const BaseCard = /*#__PURE__*/forwardRef((props, ref) => {
       isCollapsible,
       onCollapse,
       theme: propsTheme
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded);
   const theme = useTheme(propsTheme);
   const format = useMessageFormatter(intlMessages);
   const [isCollapsed, setIsCollapsed] = useState(propsIsCollapsed !== null && propsIsCollapsed !== void 0 ? propsIsCollapsed : defaultCollapsed);
@@ -127,7 +132,7 @@ const BaseCard = /*#__PURE__*/forwardRef((props, ref) => {
     value: {
       theme
     }
-  }, /*#__PURE__*/React__default.createElement(StyledCard, _extends({}, forwardedProps, {
+  }, /*#__PURE__*/React__default.createElement(StyledCard, _extends({}, forwardedProps, transientProps, {
     className: classNames(BaseCard.className, className),
     ref: ref,
     $isCollapsed: isCollapsed,

package/_internal/Card2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card2.js","sources":["../../src/components/card/intl/index.ts","../../src/components/card/styles.ts","../../src/components/card/Card.tsx"],"sourcesContent":["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 { StyledCardProps } from './types';\nimport { Theme } from '../../types';\n\n/**\n * Component style.\n */\nexport const StyledCard = styled.div<StyledCardProps>`\n  ${baseStyling}\n\n  ${({ $theme }) => css`\n    color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n  `}\n\n  display: flex;\n  flex-direction: column;\n\n  .redsift-card__header {\n    align-items: flex-start;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .redsift-card-header__icon-button {\n    margin-top: 8px;\n    margin-left: auto;\n    margin-right: 8px;\n\n    [dir='rtl'] & {\n      margin-left: 8px;\n      margin-right: auto;\n    }\n  }\n\n  .redsift-card__content {\n    visibility: ${({ $isCollapsed }) => (!$isCollapsed ? 'visible' : 'hidden')};\n    overflow: ${({ $isCollapsed }) => (!$isCollapsed ? 'visible' : 'hidden')};\n    height: ${({ $isCollapsed }) => (!$isCollapsed ? 'auto' : '0px')};\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 { mdiChevronDown, mdiChevronUp } from '@redsift/icons';\nimport { IconButton } from '../icon-button';\nimport { Comp } from '../../types';\nimport { StyledCard } from './styles';\nimport { CardProps } from './types';\nimport { partitionComponents } from '../../utils/partitionComponents';\nimport { isComponent } from '../../utils/isComponent';\nimport { CardHeader } from '../card-header';\nimport { CardBody } from '../card-body';\nimport { CardActions } from '../card-actions';\nimport { ThemeProvider, useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Card';\nconst CLASSNAME = 'redsift-card';\n\n/**\n * The Card component.\n */\nconst BaseCard: Comp<CardProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    children,\n    className,\n    defaultCollapsed,\n    isCollapsed: propsIsCollapsed,\n    isCollapsible,\n    onCollapse,\n    theme: propsTheme,\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme(propsTheme);\n\n  const format = useMessageFormatter(intlMessages);\n\n  const [isCollapsed, setIsCollapsed] = useState(propsIsCollapsed ?? defaultCollapsed);\n\n  useEffect(() => {\n    setIsCollapsed(propsIsCollapsed ?? defaultCollapsed);\n  }, [propsIsCollapsed, defaultCollapsed]);\n\n  const handleCollapse = useCallback(\n    (collapsed: boolean) => {\n      if (onCollapse) {\n        onCollapse(collapsed);\n      }\n      if (propsIsCollapsed === undefined || propsIsCollapsed === null) {\n        setIsCollapsed(collapsed);\n      }\n    },\n    [onCollapse]\n  );\n\n  const [[header], [body], [actions]] = partitionComponents(React.Children.toArray(children), [\n    isComponent('CardHeader'),\n    isComponent('CardBody'),\n    isComponent('CardActions'),\n  ]);\n\n  return (\n    <ThemeProvider value={{ theme }}>\n      <StyledCard\n        {...forwardedProps}\n        className={classNames(BaseCard.className, className)}\n        ref={ref as RefObject<HTMLDivElement>}\n        $isCollapsed={isCollapsed}\n        $theme={theme}\n      >\n        {header || isCollapsible ? (\n          <div className={`${BaseCard.className}__header`}>\n            {header && isComponent('CardHeader')(header) ? header : null}\n\n            {isCollapsible ? (\n              <IconButton\n                theme={theme}\n                aria-label={format(isCollapsed ? 'expand' : 'collapse')}\n                className={`${BaseCard.className}-header__icon-button`}\n                color=\"grey\"\n                icon={isCollapsed ? mdiChevronDown : mdiChevronUp}\n                onClick={() => handleCollapse(!isCollapsed)}\n              />\n            ) : null}\n          </div>\n        ) : null}\n\n        {body || actions ? (\n          <div className={`${BaseCard.className}__content`}>\n            {body && isComponent('CardBody')(body) ? body : null}\n            {actions && isComponent('CardActions')(actions) ? actions : null}\n          </div>\n        ) : null}\n      </StyledCard>\n    </ThemeProvider>\n  );\n});\nBaseCard.className = CLASSNAME;\nBaseCard.displayName = COMPONENT_NAME;\n\nexport const Card = Object.assign(BaseCard, {\n  Header: CardHeader,\n  Body: CardBody,\n  Actions: CardActions,\n});\n"],"names":["enUS","frFR","StyledCard","styled","div","baseStyling","_ref","$theme","css","Theme","dark","_ref2","$isCollapsed","_ref3","_ref4","COMPONENT_NAME","CLASSNAME","BaseCard","forwardRef","props","ref","children","className","defaultCollapsed","isCollapsed","propsIsCollapsed","isCollapsible","onCollapse","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","useTheme","format","useMessageFormatter","intlMessages","setIsCollapsed","useState","useEffect","handleCollapse","useCallback","collapsed","undefined","header","body","actions","partitionComponents","React","Children","toArray","isComponent","createElement","ThemeProvider","value","_extends","classNames","IconButton","color","icon","mdiChevronDown","mdiChevronUp","onClick","displayName","Card","Object","assign","Header","CardHeader","Body","CardBody","Actions","CardActions"],"mappings":"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"}
+{"version":3,"file":"Card2.js","sources":["../../src/components/card/intl/index.ts","../../src/components/card/styles.ts","../../src/components/card/Card.tsx"],"sourcesContent":["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 { StyledCardProps } from './types';\nimport { Theme } from '../../types';\n\n/**\n * Component style.\n */\nexport const StyledCard = styled.div<StyledCardProps>`\n  ${baseStyling}\n\n  ${({ $theme }) => css`\n    color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n  `}\n\n  display: flex;\n  flex-direction: column;\n\n  .redsift-card__header {\n    align-items: flex-start;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .redsift-card-header__icon-button {\n    margin-top: 8px;\n    margin-left: auto;\n    margin-right: 8px;\n\n    [dir='rtl'] & {\n      margin-left: 8px;\n      margin-right: auto;\n    }\n  }\n\n  .redsift-card__content {\n    visibility: ${({ $isCollapsed }) => (!$isCollapsed ? 'visible' : 'hidden')};\n    overflow: ${({ $isCollapsed }) => (!$isCollapsed ? 'visible' : 'hidden')};\n    height: ${({ $isCollapsed }) => (!$isCollapsed ? 'auto' : '0px')};\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 { mdiChevronDown, mdiChevronUp } from '@redsift/icons';\nimport { IconButton } from '../icon-button';\nimport { Comp, getStylingTransientProps } from '../../types';\nimport { StyledCard } from './styles';\nimport { CardProps } from './types';\nimport { partitionComponents } from '../../utils/partitionComponents';\nimport { isComponent } from '../../utils/isComponent';\nimport { CardHeader } from '../card-header';\nimport { CardBody } from '../card-body';\nimport { CardActions } from '../card-actions';\nimport { ThemeProvider, useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Card';\nconst CLASSNAME = 'redsift-card';\n\n/**\n * The Card component.\n */\nconst BaseCard: Comp<CardProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { transientProps, otherProps } = getStylingTransientProps(props);\n\n  const {\n    children,\n    className,\n    defaultCollapsed,\n    isCollapsed: propsIsCollapsed,\n    isCollapsible,\n    onCollapse,\n    theme: propsTheme,\n    ...forwardedProps\n  } = otherProps;\n\n  const theme = useTheme(propsTheme);\n\n  const format = useMessageFormatter(intlMessages);\n\n  const [isCollapsed, setIsCollapsed] = useState(propsIsCollapsed ?? defaultCollapsed);\n\n  useEffect(() => {\n    setIsCollapsed(propsIsCollapsed ?? defaultCollapsed);\n  }, [propsIsCollapsed, defaultCollapsed]);\n\n  const handleCollapse = useCallback(\n    (collapsed: boolean) => {\n      if (onCollapse) {\n        onCollapse(collapsed);\n      }\n      if (propsIsCollapsed === undefined || propsIsCollapsed === null) {\n        setIsCollapsed(collapsed);\n      }\n    },\n    [onCollapse]\n  );\n\n  const [[header], [body], [actions]] = partitionComponents(React.Children.toArray(children), [\n    isComponent('CardHeader'),\n    isComponent('CardBody'),\n    isComponent('CardActions'),\n  ]);\n\n  return (\n    <ThemeProvider value={{ theme }}>\n      <StyledCard\n        {...forwardedProps}\n        {...transientProps}\n        className={classNames(BaseCard.className, className)}\n        ref={ref as RefObject<HTMLDivElement>}\n        $isCollapsed={isCollapsed}\n        $theme={theme}\n      >\n        {header || isCollapsible ? (\n          <div className={`${BaseCard.className}__header`}>\n            {header && isComponent('CardHeader')(header) ? header : null}\n\n            {isCollapsible ? (\n              <IconButton\n                theme={theme}\n                aria-label={format(isCollapsed ? 'expand' : 'collapse')}\n                className={`${BaseCard.className}-header__icon-button`}\n                color=\"grey\"\n                icon={isCollapsed ? mdiChevronDown : mdiChevronUp}\n                onClick={() => handleCollapse(!isCollapsed)}\n              />\n            ) : null}\n          </div>\n        ) : null}\n\n        {body || actions ? (\n          <div className={`${BaseCard.className}__content`}>\n            {body && isComponent('CardBody')(body) ? body : null}\n            {actions && isComponent('CardActions')(actions) ? actions : null}\n          </div>\n        ) : null}\n      </StyledCard>\n    </ThemeProvider>\n  );\n});\nBaseCard.className = CLASSNAME;\nBaseCard.displayName = COMPONENT_NAME;\n\nexport const Card = Object.assign(BaseCard, {\n  Header: CardHeader,\n  Body: CardBody,\n  Actions: CardActions,\n});\n"],"names":["enUS","frFR","StyledCard","styled","div","baseStyling","_ref","$theme","css","Theme","dark","_ref2","$isCollapsed","_ref3","_ref4","COMPONENT_NAME","CLASSNAME","BaseCard","forwardRef","props","ref","transientProps","otherProps","getStylingTransientProps","children","className","defaultCollapsed","isCollapsed","propsIsCollapsed","isCollapsible","onCollapse","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","useTheme","format","useMessageFormatter","intlMessages","setIsCollapsed","useState","useEffect","handleCollapse","useCallback","collapsed","undefined","header","body","actions","partitionComponents","React","Children","toArray","isComponent","createElement","ThemeProvider","value","_extends","classNames","IconButton","color","icon","mdiChevronDown","mdiChevronUp","onClick","displayName","Card","Object","assign","Header","CardHeader","Body","CardBody","Actions","CardActions"],"mappings":"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"}

package/_internal/CardActions.js

@@ -1,8 +1,9 @@
-import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import { a as _objectSpread2, b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef } from 'react';
 import classNames from 'classnames';
 import styled from 'styled-components';
-import { j as baseContainer } from './styles4.js';
+import { j as baseContainer } from './styles5.js';
+import { i as getContainerStylingTransientProps } from './styles.js';
 
 /**
  * Component style.
@@ -14,7 +15,7 @@ const StyledCardActions = styled.div`
   margin-bottom: 8px;
 `;
 
-const _excluded = ["children", "className", "display", "flexDirection"];
+const _excluded = ["children", "className"];
 const COMPONENT_NAME = 'CardActions';
 const CLASSNAME = 'redsift-card-actions';
 
@@ -22,17 +23,20 @@ const CLASSNAME = 'redsift-card-actions';
  * The CardActions component.
  */
 const CardActions = /*#__PURE__*/forwardRef((props, ref) => {
+  const propsWithDefaults = _objectSpread2({
+    display: 'flex',
+    flexDirection: 'row'
+  }, props);
+  const {
+    transientProps,
+    otherProps
+  } = getContainerStylingTransientProps(propsWithDefaults);
   const {
       children,
-      className,
-      display = 'flex',
-      flexDirection = 'row'
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
-  return /*#__PURE__*/React__default.createElement(StyledCardActions, _extends({
-    display: display,
-    flexDirection: flexDirection
-  }, forwardedProps, {
+      className
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded);
+  return /*#__PURE__*/React__default.createElement(StyledCardActions, _extends({}, forwardedProps, transientProps, {
     className: classNames(CardActions.className, className),
     ref: ref
   }), children);

package/_internal/CardActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardActions.js","sources":["../../src/components/card-actions/styles.ts","../../src/components/card-actions/CardActions.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { baseContainer } from '../shared';\nimport { StyledCardActionsProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledCardActions = styled.div<StyledCardActionsProps>`\n  ${baseContainer}\n\n  margin-top: 8px;\n  margin-bottom: 8px;\n`;\n","import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\n\nimport { Comp } from '../../types';\nimport { StyledCardActions } from './styles';\nimport { CardActionsProps } from './types';\n\nconst COMPONENT_NAME = 'CardActions';\nconst CLASSNAME = 'redsift-card-actions';\n\n/**\n * The CardActions component.\n */\nexport const CardActions: Comp<CardActionsProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { children, className, display = 'flex', flexDirection = 'row', ...forwardedProps } = props;\n\n  return (\n    <StyledCardActions\n      display={display}\n      flexDirection={flexDirection}\n      {...forwardedProps}\n      className={classNames(CardActions.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n    >\n      {children}\n    </StyledCardActions>\n  );\n});\nCardActions.className = CLASSNAME;\nCardActions.displayName = COMPONENT_NAME;\n"],"names":["StyledCardActions","styled","div","baseContainer","COMPONENT_NAME","CLASSNAME","CardActions","forwardRef","props","ref","children","className","display","flexDirection","forwardedProps","_objectWithoutProperties","_excluded","React","createElement","_extends","classNames","displayName"],"mappings":";;;;;;AAIA;AACA;AACA;AACO,MAAMA,iBAAiB,GAAGC,MAAM,CAACC,GAA4B,CAAA;AACpE,EAAA,EAAIC,aAAc,CAAA;AAClB;AACA;AACA;AACA,CAAC;;;ACLD,MAAMC,cAAc,GAAG,aAAa,CAAA;AACpC,MAAMC,SAAS,GAAG,sBAAsB,CAAA;;AAExC;AACA;AACA;AACO,MAAMC,WAAmD,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC5F,MAAM;MAAEC,QAAQ;MAAEC,SAAS;AAAEC,MAAAA,OAAO,GAAG,MAAM;AAAEC,MAAAA,aAAa,GAAG,KAAA;AAAyB,KAAC,GAAGL,KAAK;AAAxBM,IAAAA,cAAc,GAAAC,wBAAA,CAAKP,KAAK,EAAAQ,SAAA,CAAA,CAAA;AAEjG,EAAA,oBACEC,cAAA,CAAAC,aAAA,CAAClB,iBAAiB,EAAAmB,QAAA,CAAA;AAChBP,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,aAAa,EAAEA,aAAAA;AAAc,GAAA,EACzBC,cAAc,EAAA;IAClBH,SAAS,EAAES,UAAU,CAACd,WAAW,CAACK,SAAS,EAAEA,SAAS,CAAE;AACxDF,IAAAA,GAAG,EAAEA,GAAAA;AAAiC,GAAA,CAAA,EAErCC,QACgB,CAAC,CAAA;AAExB,CAAC,EAAC;AACFJ,WAAW,CAACK,SAAS,GAAGN,SAAS,CAAA;AACjCC,WAAW,CAACe,WAAW,GAAGjB,cAAc;;;;"}
+{"version":3,"file":"CardActions.js","sources":["../../src/components/card-actions/styles.ts","../../src/components/card-actions/CardActions.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { baseContainer } from '../shared';\nimport { StyledCardActionsProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledCardActions = styled.div<StyledCardActionsProps>`\n  ${baseContainer}\n\n  margin-top: 8px;\n  margin-bottom: 8px;\n`;\n","import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\n\nimport { Comp, getContainerStylingTransientProps } from '../../types';\nimport { StyledCardActions } from './styles';\nimport { CardActionsProps } from './types';\n\nconst COMPONENT_NAME = 'CardActions';\nconst CLASSNAME = 'redsift-card-actions';\n\n/**\n * The CardActions component.\n */\nexport const CardActions: Comp<CardActionsProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const propsWithDefaults = {\n    display: 'flex' as const,\n    flexDirection: 'row' as const,\n    ...props,\n  };\n\n  const { transientProps, otherProps } = getContainerStylingTransientProps(propsWithDefaults);\n\n  const { children, className, ...forwardedProps } = otherProps;\n\n  return (\n    <StyledCardActions\n      {...forwardedProps}\n      {...transientProps}\n      className={classNames(CardActions.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n    >\n      {children}\n    </StyledCardActions>\n  );\n});\nCardActions.className = CLASSNAME;\nCardActions.displayName = COMPONENT_NAME;\n"],"names":["StyledCardActions","styled","div","baseContainer","COMPONENT_NAME","CLASSNAME","CardActions","forwardRef","props","ref","propsWithDefaults","_objectSpread","display","flexDirection","transientProps","otherProps","getContainerStylingTransientProps","children","className","forwardedProps","_objectWithoutProperties","_excluded","React","createElement","_extends","classNames","displayName"],"mappings":";;;;;;;AAIA;AACA;AACA;AACO,MAAMA,iBAAiB,GAAGC,MAAM,CAACC,GAA4B,CAAA;AACpE,EAAA,EAAIC,aAAc,CAAA;AAClB;AACA;AACA;AACA,CAAC;;;ACLD,MAAMC,cAAc,GAAG,aAAa,CAAA;AACpC,MAAMC,SAAS,GAAG,sBAAsB,CAAA;;AAExC;AACA;AACA;AACO,MAAMC,WAAmD,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC5F,MAAMC,iBAAiB,GAAAC,cAAA,CAAA;AACrBC,IAAAA,OAAO,EAAE,MAAe;AACxBC,IAAAA,aAAa,EAAE,KAAA;AAAc,GAAA,EAC1BL,KAAK,CACT,CAAA;EAED,MAAM;IAAEM,cAAc;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGC,iCAAiC,CAACN,iBAAiB,CAAC,CAAA;EAE3F,MAAM;MAAEO,QAAQ;AAAEC,MAAAA,SAAAA;AAA6B,KAAC,GAAGH,UAAU;AAA7BI,IAAAA,cAAc,GAAAC,wBAAA,CAAKL,UAAU,EAAAM,SAAA,CAAA,CAAA;EAE7D,oBACEC,cAAA,CAAAC,aAAA,CAACvB,iBAAiB,EAAAwB,QAAA,CAAA,EAAA,EACZL,cAAc,EACdL,cAAc,EAAA;IAClBI,SAAS,EAAEO,UAAU,CAACnB,WAAW,CAACY,SAAS,EAAEA,SAAS,CAAE;AACxDT,IAAAA,GAAG,EAAEA,GAAAA;AAAiC,GAAA,CAAA,EAErCQ,QACgB,CAAC,CAAA;AAExB,CAAC,EAAC;AACFX,WAAW,CAACY,SAAS,GAAGb,SAAS,CAAA;AACjCC,WAAW,CAACoB,WAAW,GAAGtB,cAAc;;;;"}

package/_internal/CardBody.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 from 'styled-components';
-import { j as baseContainer } from './styles4.js';
+import { j as baseContainer } from './styles5.js';
+import { i as getContainerStylingTransientProps } from './styles.js';
 
 /**
  * Component style.
@@ -25,12 +26,16 @@ const CLASSNAME = 'redsift-card-body';
  * The CardBody component.
  */
 const CardBody = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    transientProps,
+    otherProps
+  } = getContainerStylingTransientProps(props);
   const {
       children,
       className
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
-  return /*#__PURE__*/React__default.createElement(StyledCardBody, _extends({}, forwardedProps, {
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded);
+  return /*#__PURE__*/React__default.createElement(StyledCardBody, _extends({}, forwardedProps, transientProps, {
     className: classNames(CardBody.className, className),
     ref: ref
   }), children);

package/_internal/CardBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardBody.js","sources":["../../src/components/card-body/styles.ts","../../src/components/card-body/CardBody.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { baseContainer } from '../shared';\nimport { StyledCardBodyProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledCardBody = styled.div<StyledCardBodyProps>`\n  ${baseContainer}\n\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  padding: 16px 0px;\n`;\n","import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\n\nimport { Comp } from '../../types';\nimport { StyledCardBody } from './styles';\nimport { CardBodyProps } from './types';\n\nconst COMPONENT_NAME = 'CardBody';\nconst CLASSNAME = 'redsift-card-body';\n\n/**\n * The CardBody component.\n */\nexport const CardBody: Comp<CardBodyProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { children, className, ...forwardedProps } = props;\n\n  return (\n    <StyledCardBody\n      {...forwardedProps}\n      className={classNames(CardBody.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n    >\n      {children}\n    </StyledCardBody>\n  );\n});\nCardBody.className = CLASSNAME;\nCardBody.displayName = COMPONENT_NAME;\n"],"names":["StyledCardBody","styled","div","baseContainer","COMPONENT_NAME","CLASSNAME","CardBody","forwardRef","props","ref","children","className","forwardedProps","_objectWithoutProperties","_excluded","React","createElement","_extends","classNames","displayName"],"mappings":";;;;;;AAIA;AACA;AACA;AACO,MAAMA,cAAc,GAAGC,MAAM,CAACC,GAAyB,CAAA;AAC9D,EAAA,EAAIC,aAAc,CAAA;AAClB;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;;ACRD,MAAMC,cAAc,GAAG,UAAU,CAAA;AACjC,MAAMC,SAAS,GAAG,mBAAmB,CAAA;;AAErC;AACA;AACA;AACO,MAAMC,QAA6C,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACtF,MAAM;MAAEC,QAAQ;AAAEC,MAAAA,SAAAA;AAA6B,KAAC,GAAGH,KAAK;AAAxBI,IAAAA,cAAc,GAAAC,wBAAA,CAAKL,KAAK,EAAAM,SAAA,CAAA,CAAA;EAExD,oBACEC,cAAA,CAAAC,aAAA,CAAChB,cAAc,EAAAiB,QAAA,KACTL,cAAc,EAAA;IAClBD,SAAS,EAAEO,UAAU,CAACZ,QAAQ,CAACK,SAAS,EAAEA,SAAS,CAAE;AACrDF,IAAAA,GAAG,EAAEA,GAAAA;AAAiC,GAAA,CAAA,EAErCC,QACa,CAAC,CAAA;AAErB,CAAC,EAAC;AACFJ,QAAQ,CAACK,SAAS,GAAGN,SAAS,CAAA;AAC9BC,QAAQ,CAACa,WAAW,GAAGf,cAAc;;;;"}
+{"version":3,"file":"CardBody.js","sources":["../../src/components/card-body/styles.ts","../../src/components/card-body/CardBody.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { baseContainer } from '../shared';\nimport { StyledCardBodyProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledCardBody = styled.div<StyledCardBodyProps>`\n  ${baseContainer}\n\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  padding: 16px 0px;\n`;\n","import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\n\nimport { Comp, getContainerStylingTransientProps } from '../../types';\nimport { StyledCardBody } from './styles';\nimport { CardBodyProps } from './types';\n\nconst COMPONENT_NAME = 'CardBody';\nconst CLASSNAME = 'redsift-card-body';\n\n/**\n * The CardBody component.\n */\nexport const CardBody: Comp<CardBodyProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { transientProps, otherProps } = getContainerStylingTransientProps(props);\n\n  const { children, className, ...forwardedProps } = otherProps;\n\n  return (\n    <StyledCardBody\n      {...forwardedProps}\n      {...transientProps}\n      className={classNames(CardBody.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n    >\n      {children}\n    </StyledCardBody>\n  );\n});\nCardBody.className = CLASSNAME;\nCardBody.displayName = COMPONENT_NAME;\n"],"names":["StyledCardBody","styled","div","baseContainer","COMPONENT_NAME","CLASSNAME","CardBody","forwardRef","props","ref","transientProps","otherProps","getContainerStylingTransientProps","children","className","forwardedProps","_objectWithoutProperties","_excluded","React","createElement","_extends","classNames","displayName"],"mappings":";;;;;;;AAIA;AACA;AACA;AACO,MAAMA,cAAc,GAAGC,MAAM,CAACC,GAAyB,CAAA;AAC9D,EAAA,EAAIC,aAAc,CAAA;AAClB;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;;ACRD,MAAMC,cAAc,GAAG,UAAU,CAAA;AACjC,MAAMC,SAAS,GAAG,mBAAmB,CAAA;;AAErC;AACA;AACA;AACO,MAAMC,QAA6C,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACtF,MAAM;IAAEC,cAAc;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGC,iCAAiC,CAACJ,KAAK,CAAC,CAAA;EAE/E,MAAM;MAAEK,QAAQ;AAAEC,MAAAA,SAAAA;AAA6B,KAAC,GAAGH,UAAU;AAA7BI,IAAAA,cAAc,GAAAC,wBAAA,CAAKL,UAAU,EAAAM,SAAA,CAAA,CAAA;EAE7D,oBACEC,cAAA,CAAAC,aAAA,CAACnB,cAAc,EAAAoB,QAAA,CAAA,EAAA,EACTL,cAAc,EACdL,cAAc,EAAA;IAClBI,SAAS,EAAEO,UAAU,CAACf,QAAQ,CAACQ,SAAS,EAAEA,SAAS,CAAE;AACrDL,IAAAA,GAAG,EAAEA,GAAAA;AAAiC,GAAA,CAAA,EAErCI,QACa,CAAC,CAAA;AAErB,CAAC,EAAC;AACFP,QAAQ,CAACQ,SAAS,GAAGT,SAAS,CAAA;AAC9BC,QAAQ,CAACgB,WAAW,GAAGlB,cAAc;;;;"}

package/_internal/CardHeader.js

@@ -2,8 +2,9 @@ import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBab
 import React__default, { forwardRef } from 'react';
 import classNames from 'classnames';
 import styled from 'styled-components';
-import { i as baseStyling, g as baseFlexbox } from './styles4.js';
+import { i as baseStyling, g as baseFlexbox } from './styles5.js';
 import { S as Skeleton } from './Skeleton2.js';
+import { f as getStylingTransientProps, h as getFlexLayoutTransientProps } from './styles.js';
 import { H as Heading } from './Heading2.js';
 import { a as Icon } from './Icon2.js';
 
@@ -41,6 +42,14 @@ const CLASSNAME = 'redsift-card-header';
  * The CardHeader component.
  */
 const CardHeader = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    transientProps: stylingTransientProps,
+    otherProps: propsAfterStyling
+  } = getStylingTransientProps(props);
+  const {
+    transientProps: flexLayoutTransientProps,
+    otherProps
+  } = getFlexLayoutTransientProps(propsAfterStyling);
   const {
       children,
       className,
@@ -50,9 +59,9 @@ const CardHeader = /*#__PURE__*/forwardRef((props, ref) => {
       iconProps,
       isLoading,
       subheader
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
-  return /*#__PURE__*/React__default.createElement(StyledCardHeader, _extends({}, forwardedProps, {
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded);
+  return /*#__PURE__*/React__default.createElement(StyledCardHeader, _extends({}, forwardedProps, stylingTransientProps, flexLayoutTransientProps, {
     className: classNames(CardHeader.className, className),
     ref: ref
   }), subheader ? /*#__PURE__*/React__default.createElement(Skeleton.Text, {

package/_internal/CardHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.js","sources":["../../src/components/card-header/styles.ts","../../src/components/card-header/CardHeader.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledCardHeaderProps } from './types';\nimport { baseFlexbox, baseStyling } from '../shared';\n\n/**\n * Component style.\n */\nexport const StyledCardHeader = styled.div<StyledCardHeaderProps>`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  ${baseStyling}\n  ${baseFlexbox}\n\n  .redsift-card-header__header {\n    align-items: center;\n    display: flex;\n    gap: 8px;\n    padding: 10px 0px;\n    margin: 0px;\n  }\n\n  .redsift-card-header__subheader {\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  }\n`;\n","import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\n\nimport { Icon } from '../icon';\nimport { Heading } from '../heading';\nimport { Comp } from '../../types';\nimport { StyledCardHeader } from './styles';\nimport { CardHeaderProps } from './types';\nimport { Skeleton } from '../skeleton';\n\nconst COMPONENT_NAME = 'CardHeader';\nconst CLASSNAME = 'redsift-card-header';\n\n/**\n * The CardHeader component.\n */\nexport const CardHeader: Comp<CardHeaderProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { children, className, header, headingProps, icon, iconProps, isLoading, subheader, ...forwardedProps } = props;\n\n  return (\n    <StyledCardHeader\n      {...forwardedProps}\n      className={classNames(CardHeader.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n    >\n      {subheader ? (\n        <Skeleton.Text variant=\"body\" isLoaded={!isLoading}>\n          <div className={`${CardHeader.className}__subheader`}>{subheader}</div>\n        </Skeleton.Text>\n      ) : null}\n      {header ? (\n        <Skeleton.Text\n          variant={headingProps?.variant || 'h2'}\n          isLoaded={!isLoading}\n          marginTop=\"10px\"\n          marginBottom=\"10px\"\n        >\n          <Heading as=\"h2\" color=\"black\" className={`${CardHeader.className}__header`} variant=\"h2\" {...headingProps}>\n            {icon ? <Icon icon={icon} aria-hidden=\"true\" size=\"large\" {...iconProps} /> : null}\n            {header}\n          </Heading>\n        </Skeleton.Text>\n      ) : null}\n      {children}\n    </StyledCardHeader>\n  );\n});\nCardHeader.className = CLASSNAME;\nCardHeader.displayName = COMPONENT_NAME;\n"],"names":["StyledCardHeader","styled","div","baseStyling","baseFlexbox","COMPONENT_NAME","CLASSNAME","CardHeader","forwardRef","props","ref","children","className","header","headingProps","icon","iconProps","isLoading","subheader","forwardedProps","_objectWithoutProperties","_excluded","React","createElement","_extends","classNames","Skeleton","Text","variant","isLoaded","marginTop","marginBottom","Heading","as","color","Icon","size","displayName"],"mappings":";;;;;;;;;AAIA;AACA;AACA;AACO,MAAMA,gBAAgB,GAAGC,MAAM,CAACC,GAA2B,CAAA;AAClE;AACA;AACA;AACA,EAAA,EAAIC,WAAY,CAAA;AAChB,EAAA,EAAIC,WAAY,CAAA;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;;AClBD,MAAMC,cAAc,GAAG,YAAY,CAAA;AACnC,MAAMC,SAAS,GAAG,qBAAqB,CAAA;;AAEvC;AACA;AACA;AACO,MAAMC,UAAiD,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC1F,MAAM;MAAEC,QAAQ;MAAEC,SAAS;MAAEC,MAAM;MAAEC,YAAY;MAAEC,IAAI;MAAEC,SAAS;MAAEC,SAAS;AAAEC,MAAAA,SAAAA;AAA6B,KAAC,GAAGT,KAAK;AAAxBU,IAAAA,cAAc,GAAAC,wBAAA,CAAKX,KAAK,EAAAY,SAAA,CAAA,CAAA;EAErH,oBACEC,cAAA,CAAAC,aAAA,CAACvB,gBAAgB,EAAAwB,QAAA,KACXL,cAAc,EAAA;IAClBP,SAAS,EAAEa,UAAU,CAAClB,UAAU,CAACK,SAAS,EAAEA,SAAS,CAAE;AACvDF,IAAAA,GAAG,EAAEA,GAAAA;GAEJQ,CAAAA,EAAAA,SAAS,gBACRI,cAAA,CAAAC,aAAA,CAACG,QAAQ,CAACC,IAAI,EAAA;AAACC,IAAAA,OAAO,EAAC,MAAM;AAACC,IAAAA,QAAQ,EAAE,CAACZ,SAAAA;GACvCK,eAAAA,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKX,IAAAA,SAAS,EAAG,CAAA,EAAEL,UAAU,CAACK,SAAU,CAAA,WAAA,CAAA;AAAa,GAAA,EAAEM,SAAe,CACzD,CAAC,GACd,IAAI,EACPL,MAAM,gBACLS,cAAA,CAAAC,aAAA,CAACG,QAAQ,CAACC,IAAI,EAAA;IACZC,OAAO,EAAE,CAAAd,YAAY,KAAZA,IAAAA,IAAAA,YAAY,uBAAZA,YAAY,CAAEc,OAAO,KAAI,IAAK;IACvCC,QAAQ,EAAE,CAACZ,SAAU;AACrBa,IAAAA,SAAS,EAAC,MAAM;AAChBC,IAAAA,YAAY,EAAC,MAAA;AAAM,GAAA,eAEnBT,cAAA,CAAAC,aAAA,CAACS,OAAO,EAAAR,QAAA,CAAA;AAACS,IAAAA,EAAE,EAAC,IAAI;AAACC,IAAAA,KAAK,EAAC,OAAO;AAACtB,IAAAA,SAAS,EAAG,CAAA,EAAEL,UAAU,CAACK,SAAU,CAAU,QAAA,CAAA;AAACgB,IAAAA,OAAO,EAAC,IAAA;GAASd,EAAAA,YAAY,CACvGC,EAAAA,IAAI,gBAAGO,cAAA,CAAAC,aAAA,CAACY,IAAI,EAAAX,QAAA,CAAA;AAACT,IAAAA,IAAI,EAAEA,IAAK;AAAC,IAAA,aAAA,EAAY,MAAM;AAACqB,IAAAA,IAAI,EAAC,OAAA;AAAO,GAAA,EAAKpB,SAAS,CAAG,CAAC,GAAG,IAAI,EACjFH,MACM,CACI,CAAC,GACd,IAAI,EACPF,QACe,CAAC,CAAA;AAEvB,CAAC,EAAC;AACFJ,UAAU,CAACK,SAAS,GAAGN,SAAS,CAAA;AAChCC,UAAU,CAAC8B,WAAW,GAAGhC,cAAc;;;;"}
+{"version":3,"file":"CardHeader.js","sources":["../../src/components/card-header/styles.ts","../../src/components/card-header/CardHeader.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledCardHeaderProps } from './types';\nimport { baseFlexbox, baseStyling } from '../shared';\n\n/**\n * Component style.\n */\nexport const StyledCardHeader = styled.div<StyledCardHeaderProps>`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  ${baseStyling}\n  ${baseFlexbox}\n\n  .redsift-card-header__header {\n    align-items: center;\n    display: flex;\n    gap: 8px;\n    padding: 10px 0px;\n    margin: 0px;\n  }\n\n  .redsift-card-header__subheader {\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  }\n`;\n","import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\n\nimport { Icon } from '../icon';\nimport { Heading } from '../heading';\nimport { Comp, getStylingTransientProps, getFlexLayoutTransientProps } from '../../types';\nimport { StyledCardHeader } from './styles';\nimport { CardHeaderProps } from './types';\nimport { Skeleton } from '../skeleton';\n\nconst COMPONENT_NAME = 'CardHeader';\nconst CLASSNAME = 'redsift-card-header';\n\n/**\n * The CardHeader component.\n */\nexport const CardHeader: Comp<CardHeaderProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { transientProps: stylingTransientProps, otherProps: propsAfterStyling } = getStylingTransientProps(props);\n  const { transientProps: flexLayoutTransientProps, otherProps } = getFlexLayoutTransientProps(propsAfterStyling);\n\n  const { children, className, header, headingProps, icon, iconProps, isLoading, subheader, ...forwardedProps } =\n    otherProps;\n\n  return (\n    <StyledCardHeader\n      {...forwardedProps}\n      {...stylingTransientProps}\n      {...flexLayoutTransientProps}\n      className={classNames(CardHeader.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n    >\n      {subheader ? (\n        <Skeleton.Text variant=\"body\" isLoaded={!isLoading}>\n          <div className={`${CardHeader.className}__subheader`}>{subheader}</div>\n        </Skeleton.Text>\n      ) : null}\n      {header ? (\n        <Skeleton.Text\n          variant={headingProps?.variant || 'h2'}\n          isLoaded={!isLoading}\n          marginTop=\"10px\"\n          marginBottom=\"10px\"\n        >\n          <Heading as=\"h2\" color=\"black\" className={`${CardHeader.className}__header`} variant=\"h2\" {...headingProps}>\n            {icon ? <Icon icon={icon} aria-hidden=\"true\" size=\"large\" {...iconProps} /> : null}\n            {header}\n          </Heading>\n        </Skeleton.Text>\n      ) : null}\n      {children}\n    </StyledCardHeader>\n  );\n});\nCardHeader.className = CLASSNAME;\nCardHeader.displayName = COMPONENT_NAME;\n"],"names":["StyledCardHeader","styled","div","baseStyling","baseFlexbox","COMPONENT_NAME","CLASSNAME","CardHeader","forwardRef","props","ref","transientProps","stylingTransientProps","otherProps","propsAfterStyling","getStylingTransientProps","flexLayoutTransientProps","getFlexLayoutTransientProps","children","className","header","headingProps","icon","iconProps","isLoading","subheader","forwardedProps","_objectWithoutProperties","_excluded","React","createElement","_extends","classNames","Skeleton","Text","variant","isLoaded","marginTop","marginBottom","Heading","as","color","Icon","size","displayName"],"mappings":";;;;;;;;;;AAIA;AACA;AACA;AACO,MAAMA,gBAAgB,GAAGC,MAAM,CAACC,GAA2B,CAAA;AAClE;AACA;AACA;AACA,EAAA,EAAIC,WAAY,CAAA;AAChB,EAAA,EAAIC,WAAY,CAAA;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;;AClBD,MAAMC,cAAc,GAAG,YAAY,CAAA;AACnC,MAAMC,SAAS,GAAG,qBAAqB,CAAA;;AAEvC;AACA;AACA;AACO,MAAMC,UAAiD,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC1F,MAAM;AAAEC,IAAAA,cAAc,EAAEC,qBAAqB;AAAEC,IAAAA,UAAU,EAAEC,iBAAAA;AAAkB,GAAC,GAAGC,wBAAwB,CAACN,KAAK,CAAC,CAAA;EAChH,MAAM;AAAEE,IAAAA,cAAc,EAAEK,wBAAwB;AAAEH,IAAAA,UAAAA;AAAW,GAAC,GAAGI,2BAA2B,CAACH,iBAAiB,CAAC,CAAA;EAE/G,MAAM;MAAEI,QAAQ;MAAEC,SAAS;MAAEC,MAAM;MAAEC,YAAY;MAAEC,IAAI;MAAEC,SAAS;MAAEC,SAAS;AAAEC,MAAAA,SAAAA;AAA6B,KAAC,GAC3GZ,UAAU;AADiFa,IAAAA,cAAc,GAAAC,wBAAA,CACzGd,UAAU,EAAAe,SAAA,CAAA,CAAA;AAEZ,EAAA,oBACEC,cAAA,CAAAC,aAAA,CAAC9B,gBAAgB,EAAA+B,QAAA,CAAA,EAAA,EACXL,cAAc,EACdd,qBAAqB,EACrBI,wBAAwB,EAAA;IAC5BG,SAAS,EAAEa,UAAU,CAACzB,UAAU,CAACY,SAAS,EAAEA,SAAS,CAAE;AACvDT,IAAAA,GAAG,EAAEA,GAAAA;GAEJe,CAAAA,EAAAA,SAAS,gBACRI,cAAA,CAAAC,aAAA,CAACG,QAAQ,CAACC,IAAI,EAAA;AAACC,IAAAA,OAAO,EAAC,MAAM;AAACC,IAAAA,QAAQ,EAAE,CAACZ,SAAAA;GACvCK,eAAAA,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKX,IAAAA,SAAS,EAAG,CAAA,EAAEZ,UAAU,CAACY,SAAU,CAAA,WAAA,CAAA;AAAa,GAAA,EAAEM,SAAe,CACzD,CAAC,GACd,IAAI,EACPL,MAAM,gBACLS,cAAA,CAAAC,aAAA,CAACG,QAAQ,CAACC,IAAI,EAAA;IACZC,OAAO,EAAE,CAAAd,YAAY,KAAZA,IAAAA,IAAAA,YAAY,uBAAZA,YAAY,CAAEc,OAAO,KAAI,IAAK;IACvCC,QAAQ,EAAE,CAACZ,SAAU;AACrBa,IAAAA,SAAS,EAAC,MAAM;AAChBC,IAAAA,YAAY,EAAC,MAAA;AAAM,GAAA,eAEnBT,cAAA,CAAAC,aAAA,CAACS,OAAO,EAAAR,QAAA,CAAA;AAACS,IAAAA,EAAE,EAAC,IAAI;AAACC,IAAAA,KAAK,EAAC,OAAO;AAACtB,IAAAA,SAAS,EAAG,CAAA,EAAEZ,UAAU,CAACY,SAAU,CAAU,QAAA,CAAA;AAACgB,IAAAA,OAAO,EAAC,IAAA;GAASd,EAAAA,YAAY,CACvGC,EAAAA,IAAI,gBAAGO,cAAA,CAAAC,aAAA,CAACY,IAAI,EAAAX,QAAA,CAAA;AAACT,IAAAA,IAAI,EAAEA,IAAK;AAAC,IAAA,aAAA,EAAY,MAAM;AAACqB,IAAAA,IAAI,EAAC,OAAA;AAAO,GAAA,EAAKpB,SAAS,CAAG,CAAC,GAAG,IAAI,EACjFH,MACM,CACI,CAAC,GACd,IAAI,EACPF,QACe,CAAC,CAAA;AAEvB,CAAC,EAAC;AACFX,UAAU,CAACY,SAAS,GAAGb,SAAS,CAAA;AAChCC,UAAU,CAACqC,WAAW,GAAGvC,cAAc;;;;"}

package/_internal/Checkbox2.js

@@ -5,8 +5,9 @@ import { mdiCheckboxMarked, mdiMinusBox, mdiCheckboxBlankOutline } from '@redsif
 import { C as CheckboxGroupContext } from './context3.js';
 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 { u as useFocusRing } from './useFocusRing.js';
+import { f as getStylingTransientProps } from './styles.js';
 import { u as useTheme } from './useTheme.js';
 import { a as Icon } from './Icon2.js';
 
@@ -130,6 +131,10 @@ const CLASSNAME = 'redsift-checkbox';
 const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
   var _isDisabled, _isReadOnly, _ref;
   const groupState = useContext(CheckboxGroupContext);
+  const {
+    transientProps,
+    otherProps
+  } = getStylingTransientProps(props);
   let {
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledby,
@@ -150,8 +155,8 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
       onChange,
       theme: propsTheme,
       value
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded);
   const theme = useTheme(propsTheme);
   const {
     isFocusVisible,
@@ -201,7 +206,7 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
       onChange === null || onChange === void 0 ? void 0 : onChange(!isSelected, value, name, event, groupState);
     }
   }, [onChange, groupState, isSelected, propsIsSelected]);
-  return /*#__PURE__*/React__default.createElement(StyledCheckbox, _extends({}, forwardedProps, {
+  return /*#__PURE__*/React__default.createElement(StyledCheckbox, _extends({}, forwardedProps, transientProps, {
     $isColored: isColored,
     $isDisabled: isDisabled,
     $isFocusVisible: isFocusVisible,

package/_internal/Checkbox2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox2.js","sources":["../../src/components/checkbox/styles.ts","../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledCheckboxProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledCheckbox = styled.label<StyledCheckboxProps>`\n  height: fit-content;\n  position: relative;\n  width: fit-content;\n  ${baseStyling}\n\n  align-items: flex-start;\n  background: none;\n  border: none;\n  display: inline-flex;\n\n  input {\n    height: 100%;\n    margin: 0;\n    opacity: 0;\n    overflow: visible;\n    padding: 0;\n    position: absolute;\n    width: 100%;\n  }\n\n  span.label {\n    ${({ $isDisabled, $isInvalid, $theme }) =>\n      $isDisabled\n        ? css`\n            color: var(--redsift-color-${$theme}-components-checkbox-text-disabled);\n          `\n        : $isInvalid\n        ? css`\n            color: var(--redsift-color-${$theme}-components-checkbox-text-invalid);\n          `\n        : css`\n            color: var(--redsift-color-${$theme}-components-checkbox-text-default);\n          `}\n\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    padding-left: 4px;\n    padding-right: 16px;\n    padding-top: 2px;\n\n    [dir='rtl'] & {\n      padding-left: 16px;\n      padding-right: 4px;\n    }\n  }\n\n  .redsift-icon {\n    box-sizing: content-box;\n    padding: 2px;\n    width: 24px;\n\n    ${({ $isColored, $isDisabled, $isInvalid, $isFocusVisible, $theme }) => css`\n      ${$isDisabled\n        ? css`\n            color: var(--redsift-color-${$theme}-components-checkbox-fill-disabled);\n          `\n        : $isInvalid\n        ? css`\n            color: var(--redsift-color-${$theme}-components-checkbox-fill-invalid);\n          `\n        : css`\n            color: ${$isColored\n              ? `var(--redsift-color-${$theme}-components-checkbox-fill-default)`\n              : `var(--redsift-color-${$theme}-components-checkbox-fill-uncolored)`};\n          `}\n\n      ${$isFocusVisible && !$isDisabled\n        ? css`\n            background-color: ${$isColored\n              ? `var(--redsift-color-${$theme}-components-checkbox-fill-default-hover)`\n              : `var(--redsift-color-${$theme}-components-checkbox-fill-uncolored-hover)`};\n          `\n        : ''}\n    `}\n  }\n\n  &:hover,\n  &:focus-visible {\n    outline: none;\n\n    ${({ $isColored, $isDisabled, $isInvalid, $theme }) =>\n      !$isDisabled\n        ? css`\n            .redsift-icon {\n              ${$isInvalid\n                ? css`\n                    background-color: var(--redsift-color-${$theme}-components-checkbox-fill-invalid-hover);\n                  `\n                : css`\n                    background-color: ${$isColored\n                      ? `var(--redsift-color-${$theme}-components-checkbox-fill-default-hover)`\n                      : `var(--redsift-color-${$theme}-components-checkbox-fill-uncolored-hover)`};\n                  `}\n              border-radius: 4px;\n            }\n          `\n        : ''}\n  }\n`;\n","import React, {\n  ComponentProps,\n  forwardRef,\n  MutableRefObject,\n  useCallback,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { useFocusRing } from '../../react-aria/react-aria/focus';\nimport { mdiCheckboxBlankOutline, mdiMinusBox, mdiCheckboxMarked } from '@redsift/icons';\nimport { Comp } from '../../types';\nimport { Icon } from '../icon';\nimport { CheckboxGroupContext } from '../checkbox-group/context';\nimport { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound';\nimport { CheckboxProps } from './types';\nimport { StyledCheckbox } from './styles';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Checkbox';\nconst CLASSNAME = 'redsift-checkbox';\n\n/**\n * The Checkbox component.\n * Works both inside a CheckboxGroup or as standalone.\n * Can be used as controlled or uncontrolled.\n */\nexport const Checkbox: Comp<CheckboxProps, HTMLLabelElement> = forwardRef((props, ref) => {\n  const groupState = useContext(CheckboxGroupContext);\n\n  let {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    autoFocus,\n    children,\n    className,\n    defaultSelected,\n    inputProps,\n    inputRef,\n    isColored = true,\n    isDisabled,\n    isIndeterminate,\n    isInvalid,\n    isReadOnly,\n    isRequired,\n    isSelected: propsIsSelected,\n    name,\n    onChange,\n    theme: propsTheme,\n    value,\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme(propsTheme);\n\n  const { isFocusVisible, focusProps } = useFocusRing({ autoFocus });\n  isDisabled = isDisabled ?? groupState?.isDisabled;\n  isReadOnly = isReadOnly ?? groupState?.isReadOnly;\n\n  const [isSelected, setSelected] = useState(\n    Boolean(propsIsSelected ?? defaultSelected ?? groupState?.value.includes(value as string))\n  );\n  const isControlled = propsIsSelected !== null && propsIsSelected !== undefined;\n\n  useEffect(() => {\n    setSelected(Boolean(propsIsSelected ?? defaultSelected));\n  }, [propsIsSelected, defaultSelected]);\n\n  useEffect(() => {\n    if (groupState) {\n      setSelected(groupState.value.includes(value as string));\n    }\n  }, [groupState?.value]);\n\n  warnIfNoAccessibleLabelFound(props as ComponentProps<'label'>, [children], 'Checkbox');\n\n  if (groupState) {\n    if (propsIsSelected != null) {\n      console.warn(\n        'isSelected is unsupported on individual <Checkbox> elements within a <CheckboxGroup> unless the <Checkbox> is controlled. Please apply this prop to the group instead or pass isControlled to the component.'\n      );\n    }\n    if (defaultSelected != null) {\n      console.warn(\n        'defaultSelected is unsupported on individual <Checkbox> elements within a <CheckboxGroup> unless the <Checkbox> is controlled. Please apply this prop to the group instead or pass isControlled to the component.'\n      );\n    }\n    if (props.value == null) {\n      console.warn(\n        'A <Checkbox> element within a <CheckboxGroup> requires a `value` property unless the <Checkbox> is controlled.'\n      );\n    }\n  }\n\n  const handleChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (isDisabled || isReadOnly) {\n        return;\n      }\n\n      if (groupState) {\n        if (!groupState.value.includes(value as string)) {\n          groupState.addValue(value as string);\n        } else {\n          groupState.removeValue(value as string);\n        }\n      }\n\n      if (isControlled) {\n        onChange?.(!propsIsSelected, value, name, event, groupState!);\n      } else {\n        setSelected(!isSelected);\n        onChange?.(!isSelected, value, name, event, groupState!);\n      }\n    },\n    [onChange, groupState, isSelected, propsIsSelected]\n  );\n\n  return (\n    <StyledCheckbox\n      {...forwardedProps}\n      $isColored={isColored}\n      $isDisabled={isDisabled}\n      $isFocusVisible={isFocusVisible}\n      $isInvalid={isInvalid || (isRequired && !(isSelected || (isControlled && propsIsSelected)))}\n      $isRequired={isRequired}\n      $isSelected={isSelected || (isControlled && propsIsSelected)}\n      $theme={theme}\n      className={classNames(Checkbox.className, className)}\n      ref={ref as MutableRefObject<HTMLLabelElement>}\n    >\n      {isSelected || (isControlled && propsIsSelected) ? (\n        <Icon icon={mdiCheckboxMarked} />\n      ) : isIndeterminate ? (\n        <Icon icon={mdiMinusBox} />\n      ) : (\n        <Icon icon={mdiCheckboxBlankOutline} />\n      )}\n      {children ? <span className=\"label\">{children}</span> : null}\n      <input\n        {...inputProps}\n        {...focusProps}\n        aria-checked={isSelected || (isControlled && propsIsSelected) ? 'true' : isIndeterminate ? 'mixed' : 'false'}\n        aria-disabled={isDisabled}\n        aria-invalid={isInvalid || (isRequired && !(isSelected || (isControlled && propsIsSelected)))}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-readonly={isReadOnly}\n        aria-required={isRequired}\n        autoFocus={autoFocus}\n        checked={isSelected || (isControlled && propsIsSelected) ? true : false}\n        disabled={isDisabled}\n        name={name}\n        onChange={handleChange}\n        ref={inputRef as MutableRefObject<HTMLInputElement>}\n        type=\"checkbox\"\n        value={value}\n      />\n    </StyledCheckbox>\n  );\n});\nCheckbox.className = CLASSNAME;\nCheckbox.displayName = COMPONENT_NAME;\n"],"names":["StyledCheckbox","styled","label","baseStyling","_ref","$isDisabled","$isInvalid","$theme","css","_ref2","$isColored","$isFocusVisible","_ref3","COMPONENT_NAME","CLASSNAME","Checkbox","forwardRef","props","ref","_isDisabled","_isReadOnly","groupState","useContext","CheckboxGroupContext","ariaLabel","ariaLabelledby","autoFocus","children","className","defaultSelected","inputProps","inputRef","isColored","isDisabled","isIndeterminate","isInvalid","isReadOnly","isRequired","isSelected","propsIsSelected","name","onChange","theme","propsTheme","value","forwardedProps","_objectWithoutProperties","_excluded","useTheme","isFocusVisible","focusProps","useFocusRing","setSelected","useState","Boolean","includes","isControlled","undefined","useEffect","warnIfNoAccessibleLabelFound","console","warn","handleChange","useCallback","event","addValue","removeValue","React","createElement","_extends","$isRequired","$isSelected","classNames","Icon","icon","mdiCheckboxMarked","mdiMinusBox","mdiCheckboxBlankOutline","checked","disabled","type","displayName"],"mappings":"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"}
+{"version":3,"file":"Checkbox2.js","sources":["../../src/components/checkbox/styles.ts","../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledCheckboxProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledCheckbox = styled.label<StyledCheckboxProps>`\n  height: fit-content;\n  position: relative;\n  width: fit-content;\n  ${baseStyling}\n\n  align-items: flex-start;\n  background: none;\n  border: none;\n  display: inline-flex;\n\n  input {\n    height: 100%;\n    margin: 0;\n    opacity: 0;\n    overflow: visible;\n    padding: 0;\n    position: absolute;\n    width: 100%;\n  }\n\n  span.label {\n    ${({ $isDisabled, $isInvalid, $theme }) =>\n      $isDisabled\n        ? css`\n            color: var(--redsift-color-${$theme}-components-checkbox-text-disabled);\n          `\n        : $isInvalid\n        ? css`\n            color: var(--redsift-color-${$theme}-components-checkbox-text-invalid);\n          `\n        : css`\n            color: var(--redsift-color-${$theme}-components-checkbox-text-default);\n          `}\n\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    padding-left: 4px;\n    padding-right: 16px;\n    padding-top: 2px;\n\n    [dir='rtl'] & {\n      padding-left: 16px;\n      padding-right: 4px;\n    }\n  }\n\n  .redsift-icon {\n    box-sizing: content-box;\n    padding: 2px;\n    width: 24px;\n\n    ${({ $isColored, $isDisabled, $isInvalid, $isFocusVisible, $theme }) => css`\n      ${$isDisabled\n        ? css`\n            color: var(--redsift-color-${$theme}-components-checkbox-fill-disabled);\n          `\n        : $isInvalid\n        ? css`\n            color: var(--redsift-color-${$theme}-components-checkbox-fill-invalid);\n          `\n        : css`\n            color: ${$isColored\n              ? `var(--redsift-color-${$theme}-components-checkbox-fill-default)`\n              : `var(--redsift-color-${$theme}-components-checkbox-fill-uncolored)`};\n          `}\n\n      ${$isFocusVisible && !$isDisabled\n        ? css`\n            background-color: ${$isColored\n              ? `var(--redsift-color-${$theme}-components-checkbox-fill-default-hover)`\n              : `var(--redsift-color-${$theme}-components-checkbox-fill-uncolored-hover)`};\n          `\n        : ''}\n    `}\n  }\n\n  &:hover,\n  &:focus-visible {\n    outline: none;\n\n    ${({ $isColored, $isDisabled, $isInvalid, $theme }) =>\n      !$isDisabled\n        ? css`\n            .redsift-icon {\n              ${$isInvalid\n                ? css`\n                    background-color: var(--redsift-color-${$theme}-components-checkbox-fill-invalid-hover);\n                  `\n                : css`\n                    background-color: ${$isColored\n                      ? `var(--redsift-color-${$theme}-components-checkbox-fill-default-hover)`\n                      : `var(--redsift-color-${$theme}-components-checkbox-fill-uncolored-hover)`};\n                  `}\n              border-radius: 4px;\n            }\n          `\n        : ''}\n  }\n`;\n","import React, {\n  ComponentProps,\n  forwardRef,\n  MutableRefObject,\n  useCallback,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { useFocusRing } from '../../react-aria/react-aria/focus';\nimport { mdiCheckboxBlankOutline, mdiMinusBox, mdiCheckboxMarked } from '@redsift/icons';\nimport { Comp, getStylingTransientProps } from '../../types';\nimport { Icon } from '../icon';\nimport { CheckboxGroupContext } from '../checkbox-group/context';\nimport { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound';\nimport { CheckboxProps } from './types';\nimport { StyledCheckbox } from './styles';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Checkbox';\nconst CLASSNAME = 'redsift-checkbox';\n\n/**\n * The Checkbox component.\n * Works both inside a CheckboxGroup or as standalone.\n * Can be used as controlled or uncontrolled.\n */\nexport const Checkbox: Comp<CheckboxProps, HTMLLabelElement> = forwardRef((props, ref) => {\n  const groupState = useContext(CheckboxGroupContext);\n\n  const { transientProps, otherProps } = getStylingTransientProps(props);\n\n  let {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    autoFocus,\n    children,\n    className,\n    defaultSelected,\n    inputProps,\n    inputRef,\n    isColored = true,\n    isDisabled,\n    isIndeterminate,\n    isInvalid,\n    isReadOnly,\n    isRequired,\n    isSelected: propsIsSelected,\n    name,\n    onChange,\n    theme: propsTheme,\n    value,\n    ...forwardedProps\n  } = otherProps;\n\n  const theme = useTheme(propsTheme);\n\n  const { isFocusVisible, focusProps } = useFocusRing({ autoFocus });\n  isDisabled = isDisabled ?? groupState?.isDisabled;\n  isReadOnly = isReadOnly ?? groupState?.isReadOnly;\n\n  const [isSelected, setSelected] = useState(\n    Boolean(propsIsSelected ?? defaultSelected ?? groupState?.value.includes(value as string))\n  );\n  const isControlled = propsIsSelected !== null && propsIsSelected !== undefined;\n\n  useEffect(() => {\n    setSelected(Boolean(propsIsSelected ?? defaultSelected));\n  }, [propsIsSelected, defaultSelected]);\n\n  useEffect(() => {\n    if (groupState) {\n      setSelected(groupState.value.includes(value as string));\n    }\n  }, [groupState?.value]);\n\n  warnIfNoAccessibleLabelFound(props as ComponentProps<'label'>, [children], 'Checkbox');\n\n  if (groupState) {\n    if (propsIsSelected != null) {\n      console.warn(\n        'isSelected is unsupported on individual <Checkbox> elements within a <CheckboxGroup> unless the <Checkbox> is controlled. Please apply this prop to the group instead or pass isControlled to the component.'\n      );\n    }\n    if (defaultSelected != null) {\n      console.warn(\n        'defaultSelected is unsupported on individual <Checkbox> elements within a <CheckboxGroup> unless the <Checkbox> is controlled. Please apply this prop to the group instead or pass isControlled to the component.'\n      );\n    }\n    if (props.value == null) {\n      console.warn(\n        'A <Checkbox> element within a <CheckboxGroup> requires a `value` property unless the <Checkbox> is controlled.'\n      );\n    }\n  }\n\n  const handleChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (isDisabled || isReadOnly) {\n        return;\n      }\n\n      if (groupState) {\n        if (!groupState.value.includes(value as string)) {\n          groupState.addValue(value as string);\n        } else {\n          groupState.removeValue(value as string);\n        }\n      }\n\n      if (isControlled) {\n        onChange?.(!propsIsSelected, value, name, event, groupState!);\n      } else {\n        setSelected(!isSelected);\n        onChange?.(!isSelected, value, name, event, groupState!);\n      }\n    },\n    [onChange, groupState, isSelected, propsIsSelected]\n  );\n\n  return (\n    <StyledCheckbox\n      {...forwardedProps}\n      {...transientProps}\n      $isColored={isColored}\n      $isDisabled={isDisabled}\n      $isFocusVisible={isFocusVisible}\n      $isInvalid={isInvalid || (isRequired && !(isSelected || (isControlled && propsIsSelected)))}\n      $isRequired={isRequired}\n      $isSelected={isSelected || (isControlled && propsIsSelected)}\n      $theme={theme}\n      className={classNames(Checkbox.className, className)}\n      ref={ref as MutableRefObject<HTMLLabelElement>}\n    >\n      {isSelected || (isControlled && propsIsSelected) ? (\n        <Icon icon={mdiCheckboxMarked} />\n      ) : isIndeterminate ? (\n        <Icon icon={mdiMinusBox} />\n      ) : (\n        <Icon icon={mdiCheckboxBlankOutline} />\n      )}\n      {children ? <span className=\"label\">{children}</span> : null}\n      <input\n        {...inputProps}\n        {...focusProps}\n        aria-checked={isSelected || (isControlled && propsIsSelected) ? 'true' : isIndeterminate ? 'mixed' : 'false'}\n        aria-disabled={isDisabled}\n        aria-invalid={isInvalid || (isRequired && !(isSelected || (isControlled && propsIsSelected)))}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-readonly={isReadOnly}\n        aria-required={isRequired}\n        autoFocus={autoFocus}\n        checked={isSelected || (isControlled && propsIsSelected) ? true : false}\n        disabled={isDisabled}\n        name={name}\n        onChange={handleChange}\n        ref={inputRef as MutableRefObject<HTMLInputElement>}\n        type=\"checkbox\"\n        value={value}\n      />\n    </StyledCheckbox>\n  );\n});\nCheckbox.className = CLASSNAME;\nCheckbox.displayName = COMPONENT_NAME;\n"],"names":["StyledCheckbox","styled","label","baseStyling","_ref","$isDisabled","$isInvalid","$theme","css","_ref2","$isColored","$isFocusVisible","_ref3","COMPONENT_NAME","CLASSNAME","Checkbox","forwardRef","props","ref","_isDisabled","_isReadOnly","groupState","useContext","CheckboxGroupContext","transientProps","otherProps","getStylingTransientProps","ariaLabel","ariaLabelledby","autoFocus","children","className","defaultSelected","inputProps","inputRef","isColored","isDisabled","isIndeterminate","isInvalid","isReadOnly","isRequired","isSelected","propsIsSelected","name","onChange","theme","propsTheme","value","forwardedProps","_objectWithoutProperties","_excluded","useTheme","isFocusVisible","focusProps","useFocusRing","setSelected","useState","Boolean","includes","isControlled","undefined","useEffect","warnIfNoAccessibleLabelFound","console","warn","handleChange","useCallback","event","addValue","removeValue","React","createElement","_extends","$isRequired","$isSelected","classNames","Icon","icon","mdiCheckboxMarked","mdiMinusBox","mdiCheckboxBlankOutline","checked","disabled","type","displayName"],"mappings":"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"}

package/_internal/CheckboxGroup.js

@@ -3,8 +3,9 @@ import React__default, { forwardRef, useState, useEffect } from 'react';
 import classNames from 'classnames';
 import { C as CheckboxGroupContext } from './context3.js';
 import styled, { css } from 'styled-components';
-import { i as baseStyling } from './styles4.js';
+import { i as baseStyling } from './styles5.js';
 import { C as ColorPalette } from './colors.js';
+import { f as getStylingTransientProps } from './styles.js';
 import { u as useTheme, a as ThemeProvider } from './useTheme.js';
 
 /**
@@ -104,6 +105,10 @@ const CLASSNAME = 'redsift-checkbox-group';
  * Can be used as controlled or uncontrolled.
  */
 const CheckboxGroup = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    transientProps,
+    otherProps
+  } = getStylingTransientProps(props);
   const {
       children,
       className,
@@ -119,8 +124,8 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((props, ref) => {
       orientation = CheckboxGroupOrientation.vertical,
       theme: propsTheme,
       value
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded);
   const theme = useTheme(propsTheme);
   const [selectedValues, setValue] = useState(value || defaultValues || []);
   useEffect(() => {
@@ -161,7 +166,7 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((props, ref) => {
     }
   }, /*#__PURE__*/React__default.createElement(StyledCheckboxGroup, _extends({
     color: color
-  }, forwardedProps, {
+  }, forwardedProps, transientProps, {
     $isDisabled: isDisabled,
     $isInvalid: isInvalid || isRequired && selectedValues.length === 0,
     $isReadOnly: isReadOnly,

package/_internal/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","sources":["../../src/components/checkbox-group/types.ts","../../src/components/checkbox-group/styles.ts","../../src/components/checkbox-group/CheckboxGroup.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { ValueOf, StylingProps, Theme } from '../../types';\n\n/**\n * Context props.\n */\nexport type CheckboxGroupState = {\n  /** Adds a value to the set of selected values. */\n  addValue(value: string): void;\n  /** Whether the checkbox group is disabled or not. */\n  readonly isDisabled: boolean;\n  /** Whether the checkbox group is read only or not. */\n  readonly isReadOnly: boolean;\n  /** Removes a value from the set of selected values. */\n  removeValue(value: string): void;\n  /** Sets the selected values. */\n  setValue(value: string[]): void;\n  /** Current selected values. */\n  readonly value: readonly string[];\n};\n\n/**\n * Component orientation.\n */\nexport const CheckboxGroupOrientation = {\n  vertical: 'vertical',\n  horizontal: 'horizontal',\n} as const;\nexport type CheckboxGroupOrientation = ValueOf<typeof CheckboxGroupOrientation>;\n\n/**\n * Component props.\n */\nexport interface CheckboxGroupProps extends Omit<ComponentProps<'div'>, 'onChange'>, StylingProps {\n  /**\n   * Default selected values.\n   * Used for uncontrolled version.\n   */\n  defaultValues?: string[];\n  /** Description of the checkbox group. */\n  description?: string;\n  /** Whether the component is disabled or not. */\n  isDisabled?: boolean;\n  /** Whether the component is invalid or not. */\n  isInvalid?: boolean;\n  /** Whether the component is read only or not. */\n  isReadOnly?: boolean;\n  /** Whether the component is required or not. */\n  isRequired?: boolean;\n  /** Label of the checkbox group. */\n  label?: string;\n  /** Method to handle component change. */\n  onChange?(values: string[]): void;\n  /** Method to handle component change. */\n  orientation?: CheckboxGroupOrientation;\n  /** Theme. */\n  theme?: Theme;\n  /**\n   * Currently selected values.\n   * Used for controlled version.\n   */\n  value?: string[];\n}\n\nexport type StyledCheckboxGroupProps = Omit<\n  CheckboxGroupProps,\n  'isDisabled' | 'isInvalid' | 'isReadOnly' | 'orientation' | 'isRequired'\n> & {\n  $isDisabled: CheckboxGroupProps['isDisabled'];\n  $isInvalid: CheckboxGroupProps['isInvalid'];\n  $isReadOnly: CheckboxGroupProps['isReadOnly'];\n  $orientation: CheckboxGroupProps['orientation'];\n  $theme: CheckboxGroupProps['theme'];\n};\n","import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { CheckboxGroupOrientation, StyledCheckboxGroupProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledCheckboxGroup = styled.div<StyledCheckboxGroupProps>`\n  ${baseStyling}\n\n  display: flex;\n  flex-direction: column;\n\n  ${({ $orientation }) =>\n    $orientation === CheckboxGroupOrientation.vertical\n      ? `\n    div.redsift-checkbox-group-boxes {\n      display: flex;\n      flex-direction: column;\n    }\n  `\n      : `\n    div.redsift-checkbox-group-boxes {\n      display: flex;\n      flex-direction: row;\n      flex-wrap: wrap;\n    }\n  `}\n\n  span.redsift-checkbox-group-label {\n    font-family: var(--redsift-typography-body-font-family);\n    font-weight: var(--redsift-typography-body-font-weight);\n    font-size: var(--redsift-typography-body-font-size);\n    line-height: var(--redsift-typography-body-line-height);\n\n    ${({ $isDisabled, $isInvalid, $theme }) =>\n      $isDisabled\n        ? css`\n            color: var(--redsift-color-${$theme}-components-checkbox-text-disabled);\n          `\n        : $isInvalid\n        ? css`\n            color: var(--redsift-color-${$theme}-components-checkbox-text-invalid);\n          `\n        : css`\n            color: var(--redsift-color-${$theme}-components-checkbox-text-default);\n          `}\n  }\n\n  span.redsift-checkbox-group-description {\n    font-family: var(--redsift-typography-helper-font-family);\n    font-weight: var(--redsift-typography-helper-font-weight);\n    font-size: var(--redsift-typography-helper-font-size);\n    line-height: var(--redsift-typography-helper-line-height);\n\n    ${({ $isDisabled, $isInvalid, $theme }) =>\n      $isDisabled\n        ? css`\n            color: var(--redsift-color-${$theme}-components-checkbox-text-disabled);\n          `\n        : $isInvalid\n        ? css`\n            color: var(--redsift-color-${$theme}-components-checkbox-text-invalid);\n          `\n        : css`\n            color: var(--redsift-color-${$theme}-components-checkbox-text-default);\n          `}\n  }\n`;\n","import React, { forwardRef, RefObject, useEffect, useState } from 'react';\nimport classNames from 'classnames';\nimport { Comp, ColorPalette } from '../../types';\nimport { CheckboxGroupOrientation, CheckboxGroupProps } from './types';\nimport { CheckboxGroupContext } from './context';\nimport { StyledCheckboxGroup } from './styles';\nimport { ThemeProvider, useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'CheckboxGroup';\nconst CLASSNAME = 'redsift-checkbox-group';\n\n/**\n * The CheckboxGroup component.\n * Can be used as controlled or uncontrolled.\n */\nexport const CheckboxGroup: Comp<CheckboxGroupProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    children,\n    className,\n    color = ColorPalette.primary,\n    defaultValues,\n    description,\n    isDisabled,\n    isInvalid,\n    isReadOnly,\n    isRequired,\n    label,\n    onChange,\n    orientation = CheckboxGroupOrientation.vertical,\n    theme: propsTheme,\n    value,\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme(propsTheme);\n\n  const [selectedValues, setValue] = useState<string[]>(value || defaultValues || []);\n  useEffect(() => {\n    if (value) {\n      state.setValue(value);\n    }\n  }, [value]);\n\n  const state = {\n    value: selectedValues,\n    isDisabled: isDisabled || false,\n    isReadOnly: isReadOnly || false,\n    setValue(values: string[]) {\n      if (isReadOnly || isDisabled) {\n        return;\n      }\n\n      setValue(values);\n    },\n    addValue(value: string) {\n      if (!selectedValues.includes(value)) {\n        setValue(selectedValues.concat(value));\n        if (onChange) {\n          onChange(selectedValues.concat(value));\n        }\n      }\n    },\n    removeValue(value: string) {\n      if (selectedValues.includes(value)) {\n        setValue(selectedValues.filter((existingValue) => existingValue !== value));\n        if (onChange) {\n          onChange(selectedValues.filter((existingValue) => existingValue !== value));\n        }\n      }\n    },\n  };\n\n  return (\n    <ThemeProvider value={{ theme }}>\n      <StyledCheckboxGroup\n        color={color}\n        {...forwardedProps}\n        $isDisabled={isDisabled}\n        $isInvalid={isInvalid || (isRequired && selectedValues.length === 0)}\n        $isReadOnly={isReadOnly}\n        $orientation={orientation}\n        $theme={theme}\n        aria-disabled={isDisabled}\n        className={classNames(CheckboxGroup.className, className)}\n        ref={ref as RefObject<HTMLDivElement>}\n        role=\"group\"\n      >\n        <span className={`${CheckboxGroup.className}-label`}>\n          {label}\n          {isRequired ? ' *' : null}\n        </span>\n        <div className={`${CheckboxGroup.className}-boxes`}>\n          <CheckboxGroupContext.Provider value={state}>{children}</CheckboxGroupContext.Provider>\n        </div>\n        <span className={`${CheckboxGroup.className}-description`}>{description}</span>\n      </StyledCheckboxGroup>\n    </ThemeProvider>\n  );\n});\nCheckboxGroup.className = CLASSNAME;\nCheckboxGroup.displayName = COMPONENT_NAME;\n"],"names":["CheckboxGroupOrientation","vertical","horizontal","StyledCheckboxGroup","styled","div","baseStyling","_ref","$orientation","_ref2","$isDisabled","$isInvalid","$theme","css","_ref3","COMPONENT_NAME","CLASSNAME","CheckboxGroup","forwardRef","props","ref","children","className","color","ColorPalette","primary","defaultValues","description","isDisabled","isInvalid","isReadOnly","isRequired","label","onChange","orientation","theme","propsTheme","value","forwardedProps","_objectWithoutProperties","_excluded","useTheme","selectedValues","setValue","useState","useEffect","state","values","addValue","includes","concat","removeValue","filter","existingValue","React","createElement","ThemeProvider","_extends","length","$isReadOnly","classNames","role","CheckboxGroupContext","Provider","displayName"],"mappings":"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"}
+{"version":3,"file":"CheckboxGroup.js","sources":["../../src/components/checkbox-group/types.ts","../../src/components/checkbox-group/styles.ts","../../src/components/checkbox-group/CheckboxGroup.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { ValueOf, StylingProps, StylingTransientProps, Theme } from '../../types';\n\n/**\n * Context props.\n */\nexport type CheckboxGroupState = {\n  /** Adds a value to the set of selected values. */\n  addValue(value: string): void;\n  /** Whether the checkbox group is disabled or not. */\n  readonly isDisabled: boolean;\n  /** Whether the checkbox group is read only or not. */\n  readonly isReadOnly: boolean;\n  /** Removes a value from the set of selected values. */\n  removeValue(value: string): void;\n  /** Sets the selected values. */\n  setValue(value: string[]): void;\n  /** Current selected values. */\n  readonly value: readonly string[];\n};\n\n/**\n * Component orientation.\n */\nexport const CheckboxGroupOrientation = {\n  vertical: 'vertical',\n  horizontal: 'horizontal',\n} as const;\nexport type CheckboxGroupOrientation = ValueOf<typeof CheckboxGroupOrientation>;\n\n/**\n * Component props.\n */\nexport interface CheckboxGroupProps extends Omit<ComponentProps<'div'>, 'onChange'>, StylingProps {\n  /**\n   * Default selected values.\n   * Used for uncontrolled version.\n   */\n  defaultValues?: string[];\n  /** Description of the checkbox group. */\n  description?: string;\n  /** Whether the component is disabled or not. */\n  isDisabled?: boolean;\n  /** Whether the component is invalid or not. */\n  isInvalid?: boolean;\n  /** Whether the component is read only or not. */\n  isReadOnly?: boolean;\n  /** Whether the component is required or not. */\n  isRequired?: boolean;\n  /** Label of the checkbox group. */\n  label?: string;\n  /** Method to handle component change. */\n  onChange?(values: string[]): void;\n  /** Method to handle component change. */\n  orientation?: CheckboxGroupOrientation;\n  /** Theme. */\n  theme?: Theme;\n  /**\n   * Currently selected values.\n   * Used for controlled version.\n   */\n  value?: string[];\n}\n\nexport interface StyledCheckboxGroupProps extends ComponentProps<'div'>, StylingTransientProps {\n  $isDisabled: CheckboxGroupProps['isDisabled'];\n  $isInvalid: CheckboxGroupProps['isInvalid'];\n  $isReadOnly: CheckboxGroupProps['isReadOnly'];\n  $orientation: CheckboxGroupProps['orientation'];\n  $theme: CheckboxGroupProps['theme'];\n}\n","import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { CheckboxGroupOrientation, StyledCheckboxGroupProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledCheckboxGroup = styled.div<StyledCheckboxGroupProps>`\n  ${baseStyling}\n\n  display: flex;\n  flex-direction: column;\n\n  ${({ $orientation }) =>\n    $orientation === CheckboxGroupOrientation.vertical\n      ? `\n    div.redsift-checkbox-group-boxes {\n      display: flex;\n      flex-direction: column;\n    }\n  `\n      : `\n    div.redsift-checkbox-group-boxes {\n      display: flex;\n      flex-direction: row;\n      flex-wrap: wrap;\n    }\n  `}\n\n  span.redsift-checkbox-group-label {\n    font-family: var(--redsift-typography-body-font-family);\n    font-weight: var(--redsift-typography-body-font-weight);\n    font-size: var(--redsift-typography-body-font-size);\n    line-height: var(--redsift-typography-body-line-height);\n\n    ${({ $isDisabled, $isInvalid, $theme }) =>\n      $isDisabled\n        ? css`\n            color: var(--redsift-color-${$theme}-components-checkbox-text-disabled);\n          `\n        : $isInvalid\n        ? css`\n            color: var(--redsift-color-${$theme}-components-checkbox-text-invalid);\n          `\n        : css`\n            color: var(--redsift-color-${$theme}-components-checkbox-text-default);\n          `}\n  }\n\n  span.redsift-checkbox-group-description {\n    font-family: var(--redsift-typography-helper-font-family);\n    font-weight: var(--redsift-typography-helper-font-weight);\n    font-size: var(--redsift-typography-helper-font-size);\n    line-height: var(--redsift-typography-helper-line-height);\n\n    ${({ $isDisabled, $isInvalid, $theme }) =>\n      $isDisabled\n        ? css`\n            color: var(--redsift-color-${$theme}-components-checkbox-text-disabled);\n          `\n        : $isInvalid\n        ? css`\n            color: var(--redsift-color-${$theme}-components-checkbox-text-invalid);\n          `\n        : css`\n            color: var(--redsift-color-${$theme}-components-checkbox-text-default);\n          `}\n  }\n`;\n","import React, { forwardRef, RefObject, useEffect, useState } from 'react';\nimport classNames from 'classnames';\nimport { Comp, ColorPalette, getStylingTransientProps } from '../../types';\nimport { CheckboxGroupOrientation, CheckboxGroupProps } from './types';\nimport { CheckboxGroupContext } from './context';\nimport { StyledCheckboxGroup } from './styles';\nimport { ThemeProvider, useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'CheckboxGroup';\nconst CLASSNAME = 'redsift-checkbox-group';\n\n/**\n * The CheckboxGroup component.\n * Can be used as controlled or uncontrolled.\n */\nexport const CheckboxGroup: Comp<CheckboxGroupProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { transientProps, otherProps } = getStylingTransientProps(props);\n\n  const {\n    children,\n    className,\n    color = ColorPalette.primary,\n    defaultValues,\n    description,\n    isDisabled,\n    isInvalid,\n    isReadOnly,\n    isRequired,\n    label,\n    onChange,\n    orientation = CheckboxGroupOrientation.vertical,\n    theme: propsTheme,\n    value,\n    ...forwardedProps\n  } = otherProps;\n\n  const theme = useTheme(propsTheme);\n\n  const [selectedValues, setValue] = useState<string[]>(value || defaultValues || []);\n  useEffect(() => {\n    if (value) {\n      state.setValue(value);\n    }\n  }, [value]);\n\n  const state = {\n    value: selectedValues,\n    isDisabled: isDisabled || false,\n    isReadOnly: isReadOnly || false,\n    setValue(values: string[]) {\n      if (isReadOnly || isDisabled) {\n        return;\n      }\n\n      setValue(values);\n    },\n    addValue(value: string) {\n      if (!selectedValues.includes(value)) {\n        setValue(selectedValues.concat(value));\n        if (onChange) {\n          onChange(selectedValues.concat(value));\n        }\n      }\n    },\n    removeValue(value: string) {\n      if (selectedValues.includes(value)) {\n        setValue(selectedValues.filter((existingValue) => existingValue !== value));\n        if (onChange) {\n          onChange(selectedValues.filter((existingValue) => existingValue !== value));\n        }\n      }\n    },\n  };\n\n  return (\n    <ThemeProvider value={{ theme }}>\n      <StyledCheckboxGroup\n        color={color}\n        {...forwardedProps}\n        {...transientProps}\n        $isDisabled={isDisabled}\n        $isInvalid={isInvalid || (isRequired && selectedValues.length === 0)}\n        $isReadOnly={isReadOnly}\n        $orientation={orientation}\n        $theme={theme}\n        aria-disabled={isDisabled}\n        className={classNames(CheckboxGroup.className, className)}\n        ref={ref as RefObject<HTMLDivElement>}\n        role=\"group\"\n      >\n        <span className={`${CheckboxGroup.className}-label`}>\n          {label}\n          {isRequired ? ' *' : null}\n        </span>\n        <div className={`${CheckboxGroup.className}-boxes`}>\n          <CheckboxGroupContext.Provider value={state}>{children}</CheckboxGroupContext.Provider>\n        </div>\n        <span className={`${CheckboxGroup.className}-description`}>{description}</span>\n      </StyledCheckboxGroup>\n    </ThemeProvider>\n  );\n});\nCheckboxGroup.className = CLASSNAME;\nCheckboxGroup.displayName = COMPONENT_NAME;\n"],"names":["CheckboxGroupOrientation","vertical","horizontal","StyledCheckboxGroup","styled","div","baseStyling","_ref","$orientation","_ref2","$isDisabled","$isInvalid","$theme","css","_ref3","COMPONENT_NAME","CLASSNAME","CheckboxGroup","forwardRef","props","ref","transientProps","otherProps","getStylingTransientProps","children","className","color","ColorPalette","primary","defaultValues","description","isDisabled","isInvalid","isReadOnly","isRequired","label","onChange","orientation","theme","propsTheme","value","forwardedProps","_objectWithoutProperties","_excluded","useTheme","selectedValues","setValue","useState","useEffect","state","values","addValue","includes","concat","removeValue","filter","existingValue","React","createElement","ThemeProvider","_extends","length","$isReadOnly","classNames","role","CheckboxGroupContext","Provider","displayName"],"mappings":"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"}