@redsift/design-system 11.5.0 → 11.6.0-muiv5-alpha.1

package/components/detailed-card-header/DetailedCardHeader.js

@@ -0,0 +1,45 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { StyledDetailedCardHeader } from './styles.js';
+import { useTheme } from '../theme/useTheme.js';
+import { Skeleton } from '../skeleton/Skeleton.js';
+import { Heading } from '../heading/Heading.js';
+
+const _excluded = ["children", "className", "header", "headingProps", "isLoading"];
+const COMPONENT_NAME = 'DetailedCardHeader';
+const CLASSNAME = 'redsift-detailed-card-header';
+
+/**
+ * The DetailedCardHeader component.
+ */
+const DetailedCardHeader = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      header,
+      headingProps,
+      isLoading
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme();
+  return /*#__PURE__*/React__default.createElement(StyledDetailedCardHeader, _extends({}, forwardedProps, {
+    className: classNames(DetailedCardHeader.className, className),
+    ref: ref,
+    $theme: theme
+  }), header ? /*#__PURE__*/React__default.createElement(Skeleton.Text, {
+    variant: "h2",
+    isLoaded: !isLoading,
+    height: "32px",
+    marginBottom: "16px"
+  }, /*#__PURE__*/React__default.createElement(Heading, _extends({
+    as: "h2",
+    className: `${DetailedCardHeader.className}__header`,
+    variant: "h2"
+  }, headingProps), header)) : null, children);
+});
+DetailedCardHeader.className = CLASSNAME;
+DetailedCardHeader.displayName = COMPONENT_NAME;
+
+export { DetailedCardHeader };
+//# sourceMappingURL=DetailedCardHeader.js.map

package/components/detailed-card-header/DetailedCardHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailedCardHeader.js","sources":["../../../src/components/detailed-card-header/DetailedCardHeader.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\n\nimport { Comp } from '../../types';\nimport { Heading } from '../heading';\nimport { Skeleton } from '../skeleton';\nimport { StyledDetailedCardHeader } from './styles';\nimport { DetailedCardHeaderProps } from './types';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'DetailedCardHeader';\nconst CLASSNAME = 'redsift-detailed-card-header';\n\n/**\n * The DetailedCardHeader component.\n */\nexport const DetailedCardHeader: Comp<DetailedCardHeaderProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { children, className, header, headingProps, isLoading, ...forwardedProps } = props;\n  const theme = useTheme();\n\n  return (\n    <StyledDetailedCardHeader\n      {...forwardedProps}\n      className={classNames(DetailedCardHeader.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n      $theme={theme}\n    >\n      {header ? (\n        <Skeleton.Text variant=\"h2\" isLoaded={!isLoading} height=\"32px\" marginBottom=\"16px\">\n          <Heading as=\"h2\" className={`${DetailedCardHeader.className}__header`} variant=\"h2\" {...headingProps}>\n            {header}\n          </Heading>\n        </Skeleton.Text>\n      ) : null}\n\n      {children}\n    </StyledDetailedCardHeader>\n  );\n});\nDetailedCardHeader.className = CLASSNAME;\nDetailedCardHeader.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","DetailedCardHeader","forwardRef","props","ref","children","className","header","headingProps","isLoading","forwardedProps","_objectWithoutProperties","_excluded","theme","useTheme","React","createElement","StyledDetailedCardHeader","_extends","classNames","$theme","Skeleton","Text","variant","isLoaded","height","marginBottom","Heading","as","displayName"],"mappings":";;;;;;;;;AAUA,MAAMA,cAAc,GAAG,oBAAoB,CAAA;AAC3C,MAAMC,SAAS,GAAG,8BAA8B,CAAA;;AAEhD;AACA;AACA;AACO,MAAMC,kBAAiE,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC1G,MAAM;MAAEC,QAAQ;MAAEC,SAAS;MAAEC,MAAM;MAAEC,YAAY;AAAEC,MAAAA,SAAAA;AAA6B,KAAC,GAAGN,KAAK;AAAxBO,IAAAA,cAAc,GAAAC,wBAAA,CAAKR,KAAK,EAAAS,SAAA,CAAA,CAAA;AACzF,EAAA,MAAMC,KAAK,GAAGC,QAAQ,EAAE,CAAA;EAExB,oBACEC,cAAA,CAAAC,aAAA,CAACC,wBAAwB,EAAAC,QAAA,KACnBR,cAAc,EAAA;IAClBJ,SAAS,EAAEa,UAAU,CAAClB,kBAAkB,CAACK,SAAS,EAAEA,SAAS,CAAE;AAC/DF,IAAAA,GAAG,EAAEA,GAAiC;AACtCgB,IAAAA,MAAM,EAAEP,KAAAA;GAEPN,CAAAA,EAAAA,MAAM,gBACLQ,cAAA,CAAAC,aAAA,CAACK,QAAQ,CAACC,IAAI,EAAA;AAACC,IAAAA,OAAO,EAAC,IAAI;IAACC,QAAQ,EAAE,CAACf,SAAU;AAACgB,IAAAA,MAAM,EAAC,MAAM;AAACC,IAAAA,YAAY,EAAC,MAAA;AAAM,GAAA,eACjFX,cAAA,CAAAC,aAAA,CAACW,OAAO,EAAAT,QAAA,CAAA;AAACU,IAAAA,EAAE,EAAC,IAAI;AAACtB,IAAAA,SAAS,EAAG,CAAA,EAAEL,kBAAkB,CAACK,SAAU,CAAU,QAAA,CAAA;AAACiB,IAAAA,OAAO,EAAC,IAAA;GAASf,EAAAA,YAAY,GACjGD,MACM,CACI,CAAC,GACd,IAAI,EAEPF,QACuB,CAAC,CAAA;AAE/B,CAAC,EAAC;AACFJ,kBAAkB,CAACK,SAAS,GAAGN,SAAS,CAAA;AACxCC,kBAAkB,CAAC4B,WAAW,GAAG9B,cAAc;;;;"}

package/components/detailed-card-header/styles.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { Theme } from '../../types/colors.js';
+
+/**
+ * Component style.
+ */
+const StyledDetailedCardHeader = styled.div`
+  margin: 8px 0;
+
+  .redsift-detailed-card-header__header {
+    color: var(--redsift-color-neutral-${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return $theme === Theme.light ? 'x-dark-grey' : 'white';
+}});
+    font-family: var(--redsift-typography-font-family-poppins);
+    font-size: 32px;
+    font-weight: 500;
+    line-height: 32px;
+    margin-bottom: 16px;
+  }
+`;
+
+export { StyledDetailedCardHeader };
+//# sourceMappingURL=styles.js.map

package/components/detailed-card-header/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/detailed-card-header/styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledDetailedCardHeaderProps } from './types';\nimport { Theme } from '../../types';\n\n/**\n * Component style.\n */\nexport const StyledDetailedCardHeader = styled.div<StyledDetailedCardHeaderProps>`\n  margin: 8px 0;\n\n  .redsift-detailed-card-header__header {\n    color: var(--redsift-color-neutral-${({ $theme }) => ($theme === Theme.light ? 'x-dark-grey' : 'white')});\n    font-family: var(--redsift-typography-font-family-poppins);\n    font-size: 32px;\n    font-weight: 500;\n    line-height: 32px;\n    margin-bottom: 16px;\n  }\n`;\n"],"names":["StyledDetailedCardHeader","styled","div","_ref","$theme","Theme","light"],"mappings":";;;AAIA;AACA;AACA;AACaA,MAAAA,wBAAwB,GAAGC,MAAM,CAACC,GAAmC,CAAA;AAClF;AACA;AACA;AACA,uCAAA,EAAyCC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;EAAA,OAAMC,MAAM,KAAKC,KAAK,CAACC,KAAK,GAAG,aAAa,GAAG,OAAO,CAAA;AAAA,CAAE,CAAA;AAC5G;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}

package/components/detailed-card-header/types.d.ts

@@ -0,0 +1,20 @@
+import { ComponentProps } from 'react';
+import { HeadingProps } from '../heading/types.js';
+import { Theme } from '../../types/colors.js';
+
+/**
+ * Component props.
+ */
+interface DetailedCardHeaderProps extends ComponentProps<'div'> {
+    /** Header. */
+    header?: string;
+    /** Heading props allowing to override the component rendered by the heading without changing its style. */
+    headingProps?: Pick<HeadingProps, 'as' | 'noWrap'>;
+    /** Whether the card is loading or not. */
+    isLoading?: boolean;
+}
+type StyledDetailedCardHeaderProps = DetailedCardHeaderProps & {
+    $theme: Theme;
+};
+
+export { DetailedCardHeaderProps, StyledDetailedCardHeaderProps };

package/components/detailed-card-section/DetailedCardSection.d.ts

@@ -0,0 +1,9 @@
+import { DetailedCardSectionProps } from './types.js';
+import { Comp } from '../../types/helpers.js';
+
+/**
+ * The DetailedCardSection component.
+ */
+declare const DetailedCardSection: Comp<DetailedCardSectionProps, HTMLDivElement>;
+
+export { DetailedCardSection };

package/components/detailed-card-section/DetailedCardSection.js

@@ -0,0 +1,90 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useState } from 'react';
+import classNames from 'classnames';
+import intlMessages from './intl/index.js';
+import { mdiChevronDown, mdiChevronUp } from '@redsift/icons';
+import { isComponent } from '../../utils/isComponent.js';
+import { StyledDetailedCardSection } from './styles.js';
+import { useMessageFormatter } from '../../react-aria/react-aria/i18n/useMessageFormatter.js';
+import { DetailedCardCollapsibleSectionItems } from '../detailed-card-collapsible-section-items/DetailedCardCollapsibleSectionItems.js';
+import { Flexbox } from '../flexbox/Flexbox.js';
+import { Skeleton } from '../skeleton/Skeleton.js';
+import { Text } from '../text/Text.js';
+import { Badge } from '../badge/Badge.js';
+import { BadgeVariant } from '../badge/types.js';
+import { IconButton } from '../icon-button/IconButton.js';
+
+const _excluded = ["badge", "color", "children", "className", "header", "isCollapsed", "isCollapsible", "isLoading"];
+const COMPONENT_NAME = 'DetailedCardSection';
+const CLASSNAME = 'redsift-detailed-card-section';
+const hasCollapsibleChildren = children => {
+  let hasCollapsible = false;
+  React__default.Children.map(children, child => {
+    if (isComponent(DetailedCardCollapsibleSectionItems)(child)) {
+      hasCollapsible = true;
+    }
+  });
+  return hasCollapsible;
+};
+
+/**
+ * The DetailedCardSection component.
+ */
+const DetailedCardSection = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      badge,
+      color,
+      children,
+      className,
+      header,
+      isCollapsed: propsIsCollapsed,
+      isCollapsible: propsIsCollapsible = true,
+      isLoading
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const format = useMessageFormatter(intlMessages);
+  const isCollapsible = propsIsCollapsible && hasCollapsibleChildren(children);
+  const [isCollapsed, setIsCollapsed] = useState(Boolean(propsIsCollapsed));
+  return /*#__PURE__*/React__default.createElement(StyledDetailedCardSection, _extends({}, forwardedProps, {
+    className: classNames(DetailedCardSection.className, className),
+    ref: ref,
+    $color: color,
+    $isCollapsed: isCollapsed
+  }), /*#__PURE__*/React__default.createElement(Flexbox, {
+    justifyContent: "space-between",
+    className: `${DetailedCardSection.className}__header`
+  }, header ? /*#__PURE__*/React__default.createElement(Skeleton.Text, {
+    variant: "body",
+    isLoaded: !isLoading,
+    fontSize: "18px",
+    lineHeight: "22px",
+    marginTop: "6px",
+    marginBottom: "12px"
+  }, /*#__PURE__*/React__default.createElement(Flexbox, {
+    alignItems: "center",
+    gap: "8px"
+  }, typeof header === 'string' ? /*#__PURE__*/React__default.createElement(Text, {
+    className: `${DetailedCardSection.className}-header__title`,
+    color: "black",
+    fontSize: "18px",
+    lineHeight: "22px"
+  }, header) : /*#__PURE__*/React__default.createElement("div", {
+    className: `${DetailedCardSection.className}-header__title`
+  }, header), badge ? /*#__PURE__*/React__default.createElement(Badge, _extends({
+    variant: BadgeVariant.standard
+  }, badge)) : null)) : null, isCollapsible && !isLoading ? /*#__PURE__*/React__default.createElement(IconButton, {
+    marginLeft: "auto",
+    "aria-label": format(isCollapsed ? 'expand' : 'collapse'),
+    className: `${DetailedCardSection.className}-header__collapse-button`,
+    color: "grey",
+    icon: isCollapsed ? mdiChevronDown : mdiChevronUp,
+    onClick: () => {
+      setIsCollapsed(isCollapsed => !isCollapsed);
+    }
+  }) : null), children);
+});
+DetailedCardSection.className = CLASSNAME;
+DetailedCardSection.displayName = COMPONENT_NAME;
+
+export { DetailedCardSection };
+//# sourceMappingURL=DetailedCardSection.js.map

package/components/detailed-card-section/DetailedCardSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailedCardSection.js","sources":["../../../src/components/detailed-card-section/DetailedCardSection.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, RefObject, 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 { Comp } from '../../types';\nimport { Flexbox } from '../flexbox';\nimport { IconButton } from '../icon-button';\nimport { DetailedCardSectionProps } from './types';\nimport { isComponent } from '../../utils/isComponent';\nimport { DetailedCardCollapsibleSectionItems } from '../detailed-card-collapsible-section-items';\nimport { StyledDetailedCardSection } from './styles';\nimport { Skeleton } from '../skeleton';\nimport { Text } from '../text';\nimport { Badge, BadgeVariant } from '../badge';\n\nconst COMPONENT_NAME = 'DetailedCardSection';\nconst CLASSNAME = 'redsift-detailed-card-section';\n\nconst hasCollapsibleChildren = (children: ReactNode): boolean => {\n  let hasCollapsible = false;\n\n  React.Children.map(children, (child) => {\n    if (isComponent(DetailedCardCollapsibleSectionItems)(child)) {\n      hasCollapsible = true;\n    }\n  });\n\n  return hasCollapsible;\n};\n\n/**\n * The DetailedCardSection component.\n */\nexport const DetailedCardSection: Comp<DetailedCardSectionProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    badge,\n    color,\n    children,\n    className,\n    header,\n    isCollapsed: propsIsCollapsed,\n    isCollapsible: propsIsCollapsible = true,\n    isLoading,\n    ...forwardedProps\n  } = props;\n\n  const format = useMessageFormatter(intlMessages);\n\n  const isCollapsible = propsIsCollapsible && hasCollapsibleChildren(children);\n\n  const [isCollapsed, setIsCollapsed] = useState<boolean>(Boolean(propsIsCollapsed));\n\n  return (\n    <StyledDetailedCardSection\n      {...forwardedProps}\n      className={classNames(DetailedCardSection.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n      $color={color}\n      $isCollapsed={isCollapsed}\n    >\n      <Flexbox justifyContent=\"space-between\" className={`${DetailedCardSection.className}__header`}>\n        {header ? (\n          <Skeleton.Text\n            variant=\"body\"\n            isLoaded={!isLoading}\n            fontSize=\"18px\"\n            lineHeight=\"22px\"\n            marginTop=\"6px\"\n            marginBottom=\"12px\"\n          >\n            <Flexbox alignItems=\"center\" gap=\"8px\">\n              {typeof header === 'string' ? (\n                <Text\n                  className={`${DetailedCardSection.className}-header__title`}\n                  color=\"black\"\n                  fontSize=\"18px\"\n                  lineHeight=\"22px\"\n                >\n                  {header}\n                </Text>\n              ) : (\n                <div className={`${DetailedCardSection.className}-header__title`}>{header}</div>\n              )}\n              {badge ? <Badge variant={BadgeVariant.standard} {...badge} /> : null}\n            </Flexbox>\n          </Skeleton.Text>\n        ) : null}\n        {isCollapsible && !isLoading ? (\n          <IconButton\n            marginLeft=\"auto\"\n            aria-label={format(isCollapsed ? 'expand' : 'collapse')}\n            className={`${DetailedCardSection.className}-header__collapse-button`}\n            color=\"grey\"\n            icon={isCollapsed ? mdiChevronDown : mdiChevronUp}\n            onClick={() => {\n              setIsCollapsed((isCollapsed) => !isCollapsed);\n            }}\n          />\n        ) : null}\n      </Flexbox>\n\n      {children}\n    </StyledDetailedCardSection>\n  );\n});\nDetailedCardSection.className = CLASSNAME;\nDetailedCardSection.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","hasCollapsibleChildren","children","hasCollapsible","React","Children","map","child","isComponent","DetailedCardCollapsibleSectionItems","DetailedCardSection","forwardRef","props","ref","badge","color","className","header","isCollapsed","propsIsCollapsed","isCollapsible","propsIsCollapsible","isLoading","forwardedProps","_objectWithoutProperties","_excluded","format","useMessageFormatter","intlMessages","setIsCollapsed","useState","Boolean","createElement","StyledDetailedCardSection","_extends","classNames","$color","$isCollapsed","Flexbox","justifyContent","Skeleton","Text","variant","isLoaded","fontSize","lineHeight","marginTop","marginBottom","alignItems","gap","Badge","BadgeVariant","standard","IconButton","marginLeft","icon","mdiChevronDown","mdiChevronUp","onClick","displayName"],"mappings":"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"}

package/components/detailed-card-section/intl/en-US.json.js

@@ -0,0 +1,9 @@
+var collapse = "Collapse details";
+var expand = "Expand details";
+var enUS = {
+	collapse: collapse,
+	expand: expand
+};
+
+export { collapse, enUS as default, expand };
+//# sourceMappingURL=en-US.json.js.map

package/components/detailed-card-section/intl/en-US.json.js.map

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

package/components/detailed-card-section/intl/fr-FR.json.js

@@ -0,0 +1,9 @@
+var collapse = "Réduire les détails";
+var expand = "Développer les détails";
+var frFR = {
+	collapse: collapse,
+	expand: expand
+};
+
+export { collapse, frFR as default, expand };
+//# sourceMappingURL=fr-FR.json.js.map

package/components/detailed-card-section/intl/fr-FR.json.js.map

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

package/components/detailed-card-section/intl/index.js

@@ -0,0 +1,10 @@
+import enUS from './en-US.json.js';
+import frFR from './fr-FR.json.js';
+
+var intlMessages = {
+  'en-US': enUS,
+  'fr-FR': frFR
+};
+
+export { intlMessages as default };
+//# sourceMappingURL=index.js.map

package/components/detailed-card-section/intl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/detailed-card-section/intl/index.ts"],"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"],"names":["enUS","frFR"],"mappings":";;;AAGA,mBAAe;AACb,EAAA,OAAO,EAAEA,IAAI;AACb,EAAA,OAAO,EAAEC,IAAAA;AACX,CAAC;;;;"}

package/components/detailed-card-section/styles.js

@@ -0,0 +1,69 @@
+import styled, { css } from 'styled-components';
+import { NotificationsColorPalette, ProductColorPalette } from '../../types/colors.js';
+
+/**
+ * Component style.
+ */
+const StyledDetailedCardSection = styled.div`
+  margin: 8px 0;
+
+  .redsift-detailed-card-section__header {
+    ${_ref => {
+  let {
+    $color
+  } = _ref;
+  return $color && Object.keys(NotificationsColorPalette).indexOf($color) !== -1 ? css`
+            border-bottom: 1px solid var(--redsift-color-notifications-${$color}-primary);
+          ` : $color && Object.keys(ProductColorPalette).indexOf($color) !== -1 ? css`
+            border-bottom: 1px solid var(--redsift-color-product-${$color});
+          ` : css`
+            border-bottom: 1px solid ${$color || css`var(--redsift-color-neutral-mid-grey)`};
+          `;
+}}
+    margin-bottom: 8px;
+  }
+
+  .redsift-detailed-card-section-header__title {
+    font-size: 18px;
+    font-weight: 500;
+    lineheight: 22px;
+    padding: 6px 0px;
+  }
+
+  .redsift-detailed-card-section-header__collapse-button {
+    color: var(--redsift-color-neutral-x-dark-grey);
+  }
+
+  .redsift-detailed-card-collapsible-section-items {
+    visibility: ${_ref2 => {
+  let {
+    $isCollapsed
+  } = _ref2;
+  return !$isCollapsed ? 'visible' : 'hidden';
+}};
+    overflow: ${_ref3 => {
+  let {
+    $isCollapsed
+  } = _ref3;
+  return !$isCollapsed ? 'visible' : 'hidden';
+}};
+    height: ${_ref4 => {
+  let {
+    $isCollapsed
+  } = _ref4;
+  return !$isCollapsed ? 'auto' : '0px';
+}};
+    ${_ref5 => {
+  let {
+    $isCollapsed
+  } = _ref5;
+  return $isCollapsed ? css`
+            margin: unset;
+            padding: unset;
+          ` : '';
+}};
+  }
+`;
+
+export { StyledDetailedCardSection };
+//# sourceMappingURL=styles.js.map

package/components/detailed-card-section/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/detailed-card-section/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledDetailedCardSectionProps } from './types';\nimport { NotificationsColorPalette, ProductColorPalette } from '../../types';\n\n/**\n * Component style.\n */\nexport const StyledDetailedCardSection = styled.div<StyledDetailedCardSectionProps>`\n  margin: 8px 0;\n\n  .redsift-detailed-card-section__header {\n    ${({ $color }) =>\n      $color && Object.keys(NotificationsColorPalette).indexOf($color) !== -1\n        ? css`\n            border-bottom: 1px solid var(--redsift-color-notifications-${$color}-primary);\n          `\n        : $color && Object.keys(ProductColorPalette).indexOf($color) !== -1\n        ? css`\n            border-bottom: 1px solid var(--redsift-color-product-${$color});\n          `\n        : css`\n            border-bottom: 1px solid ${$color || css`var(--redsift-color-neutral-mid-grey)`};\n          `}\n    margin-bottom: 8px;\n  }\n\n  .redsift-detailed-card-section-header__title {\n    font-size: 18px;\n    font-weight: 500;\n    lineheight: 22px;\n    padding: 6px 0px;\n  }\n\n  .redsift-detailed-card-section-header__collapse-button {\n    color: var(--redsift-color-neutral-x-dark-grey);\n  }\n\n  .redsift-detailed-card-collapsible-section-items {\n    visibility: ${({ $isCollapsed }) => (!$isCollapsed ? 'visible' : 'hidden')};\n    overflow: ${({ $isCollapsed }) => (!$isCollapsed ? 'visible' : 'hidden')};\n    height: ${({ $isCollapsed }) => (!$isCollapsed ? 'auto' : '0px')};\n    ${({ $isCollapsed }) =>\n      $isCollapsed\n        ? css`\n            margin: unset;\n            padding: unset;\n          `\n        : ''};\n  }\n`;\n"],"names":["StyledDetailedCardSection","styled","div","_ref","$color","Object","keys","NotificationsColorPalette","indexOf","css","ProductColorPalette","_ref2","$isCollapsed","_ref3","_ref4","_ref5"],"mappings":";;;AAIA;AACA;AACA;AACaA,MAAAA,yBAAyB,GAAGC,MAAM,CAACC,GAAoC,CAAA;AACpF;AACA;AACA;AACA,IAAA,EAAMC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OACXC,MAAM,IAAIC,MAAM,CAACC,IAAI,CAACC,yBAAyB,CAAC,CAACC,OAAO,CAACJ,MAAM,CAAC,KAAK,CAAC,CAAC,GACnEK,GAAI,CAAA;AACd,uEAAA,EAAyEL,MAAO,CAAA;AAChF,UAAA,CAAW,GACDA,MAAM,IAAIC,MAAM,CAACC,IAAI,CAACI,mBAAmB,CAAC,CAACF,OAAO,CAACJ,MAAM,CAAC,KAAK,CAAC,CAAC,GACjEK,GAAI,CAAA;AACd,iEAAA,EAAmEL,MAAO,CAAA;AAC1E,UAAA,CAAW,GACDK,GAAI,CAAA;AACd,qCAAuCL,EAAAA,MAAM,IAAIK,GAAI,CAAuC,qCAAA,CAAA,CAAA;AAC5F,UAAW,CAAA,CAAA;AAAA,CAAC,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAA,EAAkBE,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,YAAAA;AAAa,GAAC,GAAAD,KAAA,CAAA;AAAA,EAAA,OAAM,CAACC,YAAY,GAAG,SAAS,GAAG,QAAQ,CAAA;AAAA,CAAE,CAAA;AAC/E,cAAA,EAAgBC,KAAA,IAAA;EAAA,IAAC;AAAED,IAAAA,YAAAA;AAAa,GAAC,GAAAC,KAAA,CAAA;AAAA,EAAA,OAAM,CAACD,YAAY,GAAG,SAAS,GAAG,QAAQ,CAAA;AAAA,CAAE,CAAA;AAC7E,YAAA,EAAcE,KAAA,IAAA;EAAA,IAAC;AAAEF,IAAAA,YAAAA;AAAa,GAAC,GAAAE,KAAA,CAAA;AAAA,EAAA,OAAM,CAACF,YAAY,GAAG,MAAM,GAAG,KAAK,CAAA;AAAA,CAAE,CAAA;AACrE,IAAA,EAAMG,KAAA,IAAA;EAAA,IAAC;AAAEH,IAAAA,YAAAA;AAAa,GAAC,GAAAG,KAAA,CAAA;EAAA,OACjBH,YAAY,GACRH,GAAI,CAAA;AACd;AACA;AACA,UAAA,CAAW,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACb;AACA;;;;"}

package/components/detailed-card-section/types.d.ts

@@ -0,0 +1,27 @@
+import { ComponentProps, ReactElement } from 'react';
+import { BadgeProps } from '../badge/types.js';
+import { NotificationsColorPalette, PresentationColorPalette } from '../../types/colors.js';
+
+/**
+ * Component props.
+ */
+interface DetailedCardSectionProps extends ComponentProps<'div'> {
+    /** Props to pass to the badge displayed next to the title. */
+    badge?: Omit<BadgeProps, 'ref'>;
+    /** Color that will be used on the header line. */
+    color?: NotificationsColorPalette | PresentationColorPalette | (string & {});
+    /** Header. */
+    header?: string | ReactElement;
+    /** Whether the section is collapsed or not. */
+    readonly isCollapsed?: boolean;
+    /** Whether the section can be collasped or not. */
+    isCollapsible?: boolean;
+    /** Whether the card is loading or not. */
+    isLoading?: boolean;
+}
+type StyledDetailedCardSectionProps = Omit<DetailedCardSectionProps, 'color' | 'isCollapsed'> & {
+    $color: DetailedCardSectionProps['color'];
+    $isCollapsed: DetailedCardSectionProps['isCollapsed'];
+};
+
+export { DetailedCardSectionProps, StyledDetailedCardSectionProps };

package/components/detailed-card-section-item/DetailedCardSectionItem.d.ts

@@ -0,0 +1,9 @@
+import { DetailedCardSectionItemProps } from './types.js';
+import { Comp } from '../../types/helpers.js';
+
+/**
+ * The DetailedCardSectionItems component.
+ */
+declare const DetailedCardSectionItem: Comp<DetailedCardSectionItemProps, HTMLDivElement>;
+
+export { DetailedCardSectionItem };

package/components/detailed-card-section-item/DetailedCardSectionItem.js

@@ -0,0 +1,64 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { StyledDetailedCardSectionItem } from './styles.js';
+import { Shield } from '../shield/Shield.js';
+import { Pill } from '../pill/Pill.js';
+import { Flexbox } from '../flexbox/Flexbox.js';
+import { Skeleton } from '../skeleton/Skeleton.js';
+import { Icon } from '../icon/Icon.js';
+import { Text } from '../text/Text.js';
+
+const _excluded = ["children", "className", "description", "descriptionProps", "icon", "iconProps", "isLoading", "pill", "pillProps", "shield"];
+const COMPONENT_NAME = 'DetailedCardSectionItem';
+const CLASSNAME = 'redsift-detailed-card-section-item';
+
+/**
+ * The DetailedCardSectionItems component.
+ */
+const DetailedCardSectionItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      description,
+      descriptionProps,
+      icon,
+      iconProps,
+      isLoading,
+      pill,
+      pillProps,
+      shield
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React__default.createElement(StyledDetailedCardSectionItem, _extends({}, forwardedProps, {
+    className: classNames(DetailedCardSectionItem.className, className),
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement(Flexbox, {
+    alignItems: "flex-start",
+    className: `${DetailedCardSectionItem.className}__header`
+  }, shield ? /*#__PURE__*/React__default.createElement(Skeleton, {
+    isLoaded: !isLoading
+  }, /*#__PURE__*/React__default.createElement(Shield, {
+    variant: shield,
+    className: `${DetailedCardSectionItem.className}-header__shield`
+  })) : icon ? /*#__PURE__*/React__default.createElement(Skeleton, {
+    isLoaded: !isLoading
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${DetailedCardSectionItem.className}-header__icon`
+  }, /*#__PURE__*/React__default.createElement(Icon, _extends({
+    icon: icon
+  }, iconProps, {
+    size: "large"
+  })))) : null, description || pill ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${DetailedCardSectionItem.className}-header__description`
+  }, /*#__PURE__*/React__default.createElement(Skeleton, {
+    isLoaded: !isLoading
+  }, pill && /*#__PURE__*/React__default.createElement(Pill, _extends({
+    className: `${DetailedCardSectionItem.className}-header__pill`
+  }, pillProps), pill), typeof description === 'string' ? /*#__PURE__*/React__default.createElement(Text, descriptionProps, description) : description)) : null), children);
+});
+DetailedCardSectionItem.className = CLASSNAME;
+DetailedCardSectionItem.displayName = COMPONENT_NAME;
+
+export { DetailedCardSectionItem };
+//# sourceMappingURL=DetailedCardSectionItem.js.map

package/components/detailed-card-section-item/DetailedCardSectionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailedCardSectionItem.js","sources":["../../../src/components/detailed-card-section-item/DetailedCardSectionItem.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\n\nimport { Comp } from '../../types';\nimport { Flexbox } from '../flexbox';\nimport { Shield } from '../shield';\nimport { Icon } from '../icon';\nimport { Pill } from '../pill';\nimport { Text } from '../text';\nimport { DetailedCardSectionItemProps } from './types';\nimport { StyledDetailedCardSectionItem } from './styles';\nimport { Skeleton } from '../skeleton';\n\nconst COMPONENT_NAME = 'DetailedCardSectionItem';\nconst CLASSNAME = 'redsift-detailed-card-section-item';\n\n/**\n * The DetailedCardSectionItems component.\n */\nexport const DetailedCardSectionItem: Comp<DetailedCardSectionItemProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    children,\n    className,\n    description,\n    descriptionProps,\n    icon,\n    iconProps,\n    isLoading,\n    pill,\n    pillProps,\n    shield,\n    ...forwardedProps\n  } = props;\n\n  return (\n    <StyledDetailedCardSectionItem\n      {...forwardedProps}\n      className={classNames(DetailedCardSectionItem.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n    >\n      <Flexbox alignItems=\"flex-start\" className={`${DetailedCardSectionItem.className}__header`}>\n        {shield ? (\n          <Skeleton isLoaded={!isLoading}>\n            <Shield variant={shield} className={`${DetailedCardSectionItem.className}-header__shield`} />\n          </Skeleton>\n        ) : icon ? (\n          <Skeleton isLoaded={!isLoading}>\n            <div className={`${DetailedCardSectionItem.className}-header__icon`}>\n              <Icon icon={icon} {...iconProps} size=\"large\" />\n            </div>\n          </Skeleton>\n        ) : null}\n        {description || pill ? (\n          <div className={`${DetailedCardSectionItem.className}-header__description`}>\n            <Skeleton isLoaded={!isLoading}>\n              {pill && (\n                <Pill className={`${DetailedCardSectionItem.className}-header__pill`} {...pillProps}>\n                  {pill}\n                </Pill>\n              )}\n              {typeof description === 'string' ? <Text {...descriptionProps}>{description}</Text> : description}\n            </Skeleton>\n          </div>\n        ) : null}\n      </Flexbox>\n      {children}\n    </StyledDetailedCardSectionItem>\n  );\n});\nDetailedCardSectionItem.className = CLASSNAME;\nDetailedCardSectionItem.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","DetailedCardSectionItem","forwardRef","props","ref","children","className","description","descriptionProps","icon","iconProps","isLoading","pill","pillProps","shield","forwardedProps","_objectWithoutProperties","_excluded","React","createElement","StyledDetailedCardSectionItem","_extends","classNames","Flexbox","alignItems","Skeleton","isLoaded","Shield","variant","Icon","size","Pill","Text","displayName"],"mappings":";;;;;;;;;;;;AAaA,MAAMA,cAAc,GAAG,yBAAyB,CAAA;AAChD,MAAMC,SAAS,GAAG,oCAAoC,CAAA;;AAEtD;AACA;AACA;AACO,MAAMC,uBAA2E,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACpH,MAAM;MACJC,QAAQ;MACRC,SAAS;MACTC,WAAW;MACXC,gBAAgB;MAChBC,IAAI;MACJC,SAAS;MACTC,SAAS;MACTC,IAAI;MACJC,SAAS;AACTC,MAAAA,MAAAA;AAEF,KAAC,GAAGX,KAAK;AADJY,IAAAA,cAAc,GAAAC,wBAAA,CACfb,KAAK,EAAAc,SAAA,CAAA,CAAA;EAET,oBACEC,cAAA,CAAAC,aAAA,CAACC,6BAA6B,EAAAC,QAAA,KACxBN,cAAc,EAAA;IAClBT,SAAS,EAAEgB,UAAU,CAACrB,uBAAuB,CAACK,SAAS,EAAEA,SAAS,CAAE;AACpEF,IAAAA,GAAG,EAAEA,GAAAA;AAAiC,GAAA,CAAA,eAEtCc,cAAA,CAAAC,aAAA,CAACI,OAAO,EAAA;AAACC,IAAAA,UAAU,EAAC,YAAY;AAAClB,IAAAA,SAAS,EAAG,CAAA,EAAEL,uBAAuB,CAACK,SAAU,CAAA,QAAA,CAAA;AAAU,GAAA,EACxFQ,MAAM,gBACLI,cAAA,CAAAC,aAAA,CAACM,QAAQ,EAAA;AAACC,IAAAA,QAAQ,EAAE,CAACf,SAAAA;AAAU,GAAA,eAC7BO,cAAA,CAAAC,aAAA,CAACQ,MAAM,EAAA;AAACC,IAAAA,OAAO,EAAEd,MAAO;AAACR,IAAAA,SAAS,EAAG,CAAA,EAAEL,uBAAuB,CAACK,SAAU,CAAA,eAAA,CAAA;GAAmB,CACpF,CAAC,GACTG,IAAI,gBACNS,cAAA,CAAAC,aAAA,CAACM,QAAQ,EAAA;AAACC,IAAAA,QAAQ,EAAE,CAACf,SAAAA;GACnBO,eAAAA,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKb,IAAAA,SAAS,EAAG,CAAA,EAAEL,uBAAuB,CAACK,SAAU,CAAA,aAAA,CAAA;AAAe,GAAA,eAClEY,cAAA,CAAAC,aAAA,CAACU,IAAI,EAAAR,QAAA,CAAA;AAACZ,IAAAA,IAAI,EAAEA,IAAAA;AAAK,GAAA,EAAKC,SAAS,EAAA;AAAEoB,IAAAA,IAAI,EAAC,OAAA;AAAO,GAAA,CAAE,CAC5C,CACG,CAAC,GACT,IAAI,EACPvB,WAAW,IAAIK,IAAI,gBAClBM,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKb,IAAAA,SAAS,EAAG,CAAA,EAAEL,uBAAuB,CAACK,SAAU,CAAA,oBAAA,CAAA;AAAsB,GAAA,eACzEY,cAAA,CAAAC,aAAA,CAACM,QAAQ,EAAA;AAACC,IAAAA,QAAQ,EAAE,CAACf,SAAAA;GAClBC,EAAAA,IAAI,iBACHM,cAAA,CAAAC,aAAA,CAACY,IAAI,EAAAV,QAAA,CAAA;AAACf,IAAAA,SAAS,EAAG,CAAA,EAAEL,uBAAuB,CAACK,SAAU,CAAA,aAAA,CAAA;AAAe,GAAA,EAAKO,SAAS,CAAA,EAChFD,IACG,CACP,EACA,OAAOL,WAAW,KAAK,QAAQ,gBAAGW,cAAA,CAAAC,aAAA,CAACa,IAAI,EAAKxB,gBAAgB,EAAGD,WAAkB,CAAC,GAAGA,WAC9E,CACP,CAAC,GACJ,IACG,CAAC,EACTF,QAC4B,CAAC,CAAA;AAEpC,CAAC,EAAC;AACFJ,uBAAuB,CAACK,SAAS,GAAGN,SAAS,CAAA;AAC7CC,uBAAuB,CAACgC,WAAW,GAAGlC,cAAc;;;;"}

package/components/detailed-card-section-item/styles.js

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+
+/**
+ * Component style.
+ */
+const StyledDetailedCardSectionItem = styled.div`
+  padding: 8px 0;
+
+  .redsift-detailed-card-section-item-header__shield {
+    align-items: center;
+    display: flex;
+    height: 28px;
+    justify-content: center;
+    padding: 0 4px;
+  }
+
+  .redsift-detailed-card-section-item-header__icon {
+    height: 28px;
+  }
+
+  .redsift-detailed-card-section-item-header__pill {
+    display: inline-block;
+    margin-right: 8px;
+  }
+
+  .redsift-detailed-card-section-item-header__description {
+    line-height: 28px;
+    display: inline-flex;
+    align-items: center;
+  }
+`;
+
+export { StyledDetailedCardSectionItem };
+//# sourceMappingURL=styles.js.map

package/components/detailed-card-section-item/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/detailed-card-section-item/styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledDetailedCardSectionItemProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledDetailedCardSectionItem = styled.div<StyledDetailedCardSectionItemProps>`\n  padding: 8px 0;\n\n  .redsift-detailed-card-section-item-header__shield {\n    align-items: center;\n    display: flex;\n    height: 28px;\n    justify-content: center;\n    padding: 0 4px;\n  }\n\n  .redsift-detailed-card-section-item-header__icon {\n    height: 28px;\n  }\n\n  .redsift-detailed-card-section-item-header__pill {\n    display: inline-block;\n    margin-right: 8px;\n  }\n\n  .redsift-detailed-card-section-item-header__description {\n    line-height: 28px;\n    display: inline-flex;\n    align-items: center;\n  }\n`;\n"],"names":["StyledDetailedCardSectionItem","styled","div"],"mappings":";;AAGA;AACA;AACA;AACaA,MAAAA,6BAA6B,GAAGC,MAAM,CAACC,GAAwC,CAAA;AAC5F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}

package/components/detailed-card-section-item/types.d.ts

@@ -0,0 +1,35 @@
+import { ComponentProps, ReactElement } from 'react';
+import { TextProps } from '../text/types.js';
+import { PillProps } from '../pill/types.js';
+import { IconProps } from '../icon/types.js';
+import { ShieldVariant } from '../shield/types.js';
+
+/**
+ * Component props.
+ */
+interface DetailedCardSectionItemProps extends ComponentProps<'div'> {
+    /** Description */
+    description?: string | ReactElement;
+    /** TextProps to forward to the description. */
+    descriptionProps?: Omit<TextProps, 'ref'>;
+    /**
+     * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />
+     * Can also be a ReactElement.
+     */
+    icon?: IconProps['icon'];
+    /** Props to pass to the Icon component. */
+    iconProps?: Omit<IconProps, 'ref' | 'icon'>;
+    /** Whether the section item can be collapsed or not. */
+    isCollapsible?: boolean;
+    /** Whether the card is loading or not. */
+    isLoading?: boolean;
+    /** Text to display inside a Pill. */
+    pill?: string;
+    /** Props to pass to the Pill component. */
+    pillProps?: Omit<PillProps, 'ref'>;
+    /** Shield to display in place of the icon. */
+    shield?: ShieldVariant;
+}
+type StyledDetailedCardSectionItemProps = DetailedCardSectionItemProps & {};
+
+export { DetailedCardSectionItemProps, StyledDetailedCardSectionItemProps };

package/components/flexbox/Flexbox.d.ts

@@ -0,0 +1,9 @@
+import { FlexboxProps } from './types.js';
+import { Comp } from '../../types/helpers.js';
+
+/**
+ * The Flexbox component.
+ */
+declare const Flexbox: Comp<FlexboxProps, HTMLDivElement>;
+
+export { Flexbox };

package/components/flexbox/Flexbox.js

@@ -0,0 +1,44 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { StyledFlexbox } from './styles.js';
+import { ThemeProvider } from '../theme/context.js';
+import { useTheme } from '../theme/useTheme.js';
+
+const _excluded = ["as", "children", "className", "divider", "gap", "theme"];
+const COMPONENT_NAME = 'Flexbox';
+const CLASSNAME = 'redsift-flex-box';
+
+/**
+ * The Flexbox component.
+ */
+const Flexbox = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      as,
+      children,
+      className,
+      divider,
+      gap = '16px',
+      theme: propsTheme
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledFlexbox, _extends({
+    as: as
+  }, forwardedProps, {
+    gap: divider ? `${divider.rowGap}px ${divider.colGap}px` : gap,
+    className: classNames(Flexbox.className, className),
+    ref: ref,
+    $divider: divider,
+    $theme: theme
+  }), children));
+});
+Flexbox.className = CLASSNAME;
+Flexbox.displayName = COMPONENT_NAME;
+
+export { Flexbox };
+//# sourceMappingURL=Flexbox.js.map

package/components/flexbox/Flexbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flexbox.js","sources":["../../../src/components/flexbox/Flexbox.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { StyledFlexbox } from './styles';\nimport { FlexboxProps } from './types';\nimport { ThemeProvider, useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Flexbox';\nconst CLASSNAME = 'redsift-flex-box';\n\n/**\n * The Flexbox component.\n */\nexport const Flexbox: Comp<FlexboxProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { as, children, className, divider, gap = '16px', theme: propsTheme, ...forwardedProps } = props;\n\n  const theme = useTheme(propsTheme);\n\n  return (\n    <ThemeProvider value={{ theme }}>\n      <StyledFlexbox\n        as={as}\n        {...forwardedProps}\n        gap={divider ? `${divider.rowGap}px ${divider.colGap}px` : gap}\n        className={classNames(Flexbox.className, className)}\n        ref={ref as RefObject<HTMLDivElement>}\n        $divider={divider}\n        $theme={theme}\n      >\n        {children}\n      </StyledFlexbox>\n    </ThemeProvider>\n  );\n});\nFlexbox.className = CLASSNAME;\nFlexbox.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","Flexbox","forwardRef","props","ref","as","children","className","divider","gap","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","useTheme","React","createElement","ThemeProvider","value","StyledFlexbox","_extends","rowGap","colGap","classNames","$divider","$theme","displayName"],"mappings":";;;;;;;;AAOA,MAAMA,cAAc,GAAG,SAAS,CAAA;AAChC,MAAMC,SAAS,GAAG,kBAAkB,CAAA;;AAEpC;AACA;AACA;AACO,MAAMC,OAA2C,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACpF,MAAM;MAAEC,EAAE;MAAEC,QAAQ;MAAEC,SAAS;MAAEC,OAAO;AAAEC,MAAAA,GAAG,GAAG,MAAM;AAAEC,MAAAA,KAAK,EAAEC,UAAAA;AAA8B,KAAC,GAAGR,KAAK;AAAxBS,IAAAA,cAAc,GAAAC,wBAAA,CAAKV,KAAK,EAAAW,SAAA,CAAA,CAAA;AAEtG,EAAA,MAAMJ,KAAK,GAAGK,QAAQ,CAACJ,UAAU,CAAC,CAAA;AAElC,EAAA,oBACEK,cAAA,CAAAC,aAAA,CAACC,aAAa,EAAA;AAACC,IAAAA,KAAK,EAAE;AAAET,MAAAA,KAAAA;AAAM,KAAA;AAAE,GAAA,eAC9BM,cAAA,CAAAC,aAAA,CAACG,aAAa,EAAAC,QAAA,CAAA;AACZhB,IAAAA,EAAE,EAAEA,EAAAA;AAAG,GAAA,EACHO,cAAc,EAAA;AAClBH,IAAAA,GAAG,EAAED,OAAO,GAAI,CAAA,EAAEA,OAAO,CAACc,MAAO,CAAA,GAAA,EAAKd,OAAO,CAACe,MAAO,CAAA,EAAA,CAAG,GAAGd,GAAI;IAC/DF,SAAS,EAAEiB,UAAU,CAACvB,OAAO,CAACM,SAAS,EAAEA,SAAS,CAAE;AACpDH,IAAAA,GAAG,EAAEA,GAAiC;AACtCqB,IAAAA,QAAQ,EAAEjB,OAAQ;AAClBkB,IAAAA,MAAM,EAAEhB,KAAAA;GAEPJ,CAAAA,EAAAA,QACY,CACF,CAAC,CAAA;AAEpB,CAAC,EAAC;AACFL,OAAO,CAACM,SAAS,GAAGP,SAAS,CAAA;AAC7BC,OAAO,CAAC0B,WAAW,GAAG5B,cAAc;;;;"}