@redsift/design-system 11.5.0 → 11.6.0-alpha.0

package/_internal/DetailedCardCollapsibleSectionItems.js

@@ -0,0 +1,64 @@
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import styled, { css } from 'styled-components';
+
+/**
+ * Component style.
+ */
+const StyledDetailedCardCollapsibleSectionItems = styled.div`
+  ${_ref => {
+  let {
+    $hideBackground
+  } = _ref;
+  return $hideBackground ? css`
+          background: none;
+        ` : css`
+          background-color: var(--redsift-color-neutral-x-light-grey);
+          margin: 8px -16px;
+          padding: 8px 16px;
+        `;
+}}
+
+  .redsift-detailed-card-collapsible-section-items__caption {
+    color: var(--redsift-color-neutral-x-dark-grey);
+    display: flex;
+    font-family: var(--redsift-typography-font-family-poppins);
+    font-size: 12px;
+    font-weight: 300;
+    justify-content: flex-end;
+    line-height: 14px;
+    margin: 8px 0px;
+    padding-top: 8px;
+    border-top: 1px solid var(--redsift-color-neutral-mid-grey);
+  }
+`;
+
+const _excluded = ["caption", "children", "className", "hideBackground"];
+const COMPONENT_NAME = 'DetailedCardCollapsibleSectionItems';
+const CLASSNAME = 'redsift-detailed-card-collapsible-section-items';
+
+/**
+ * The DetailedCardCollapsibleSectionItems Section component.
+ */
+const DetailedCardCollapsibleSectionItems = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      caption,
+      children,
+      className,
+      hideBackground
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React__default.createElement(StyledDetailedCardCollapsibleSectionItems, _extends({}, forwardedProps, {
+    className: classNames(DetailedCardCollapsibleSectionItems.className, className),
+    ref: ref,
+    $hideBackground: hideBackground
+  }), children, caption ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${DetailedCardCollapsibleSectionItems.className}__caption`
+  }, caption) : null);
+});
+DetailedCardCollapsibleSectionItems.className = CLASSNAME;
+DetailedCardCollapsibleSectionItems.displayName = COMPONENT_NAME;
+
+export { DetailedCardCollapsibleSectionItems as D };
+//# sourceMappingURL=DetailedCardCollapsibleSectionItems.js.map

package/_internal/DetailedCardCollapsibleSectionItems.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailedCardCollapsibleSectionItems.js","sources":["../../src/components/detailed-card-collapsible-section-items/styles.ts","../../src/components/detailed-card-collapsible-section-items/DetailedCardCollapsibleSectionItems.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledDetailedCardCollapsibleSectionItemsProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledDetailedCardCollapsibleSectionItems = styled.div<StyledDetailedCardCollapsibleSectionItemsProps>`\n  ${({ $hideBackground }) =>\n    $hideBackground\n      ? css`\n          background: none;\n        `\n      : css`\n          background-color: var(--redsift-color-neutral-x-light-grey);\n          margin: 8px -16px;\n          padding: 8px 16px;\n        `}\n\n  .redsift-detailed-card-collapsible-section-items__caption {\n    color: var(--redsift-color-neutral-x-dark-grey);\n    display: flex;\n    font-family: var(--redsift-typography-font-family-poppins);\n    font-size: 12px;\n    font-weight: 300;\n    justify-content: flex-end;\n    line-height: 14px;\n    margin: 8px 0px;\n    padding-top: 8px;\n    border-top: 1px solid var(--redsift-color-neutral-mid-grey);\n  }\n`;\n","import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\n\nimport { Comp } from '../../types';\nimport { DetailedCardCollapsibleSectionItemsProps } from './types';\nimport { StyledDetailedCardCollapsibleSectionItems } from './styles';\n\nconst COMPONENT_NAME = 'DetailedCardCollapsibleSectionItems';\nconst CLASSNAME = 'redsift-detailed-card-collapsible-section-items';\n\n/**\n * The DetailedCardCollapsibleSectionItems Section component.\n */\nexport const DetailedCardCollapsibleSectionItems: Comp<DetailedCardCollapsibleSectionItemsProps, HTMLDivElement> =\n  forwardRef((props, ref) => {\n    const { caption, children, className, hideBackground, ...forwardedProps } = props;\n\n    return (\n      <StyledDetailedCardCollapsibleSectionItems\n        {...forwardedProps}\n        className={classNames(DetailedCardCollapsibleSectionItems.className, className)}\n        ref={ref as RefObject<HTMLDivElement>}\n        $hideBackground={hideBackground}\n      >\n        {children}\n        {caption ? <div className={`${DetailedCardCollapsibleSectionItems.className}__caption`}>{caption}</div> : null}\n      </StyledDetailedCardCollapsibleSectionItems>\n    );\n  });\nDetailedCardCollapsibleSectionItems.className = CLASSNAME;\nDetailedCardCollapsibleSectionItems.displayName = COMPONENT_NAME;\n"],"names":["StyledDetailedCardCollapsibleSectionItems","styled","div","_ref","$hideBackground","css","COMPONENT_NAME","CLASSNAME","DetailedCardCollapsibleSectionItems","forwardRef","props","ref","caption","children","className","hideBackground","forwardedProps","_objectWithoutProperties","_excluded","React","createElement","_extends","classNames","displayName"],"mappings":";;;;;AAGA;AACA;AACA;AACO,MAAMA,yCAAyC,GAAGC,MAAM,CAACC,GAAoD,CAAA;AACpH,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,eAAAA;AAAgB,GAAC,GAAAD,IAAA,CAAA;EAAA,OACpBC,eAAe,GACXC,GAAI,CAAA;AACZ;AACA,QAAA,CAAS,GACDA,GAAI,CAAA;AACZ;AACA;AACA;AACA,QAAS,CAAA,CAAA;AAAA,CAAC,CAAA;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;;ACvBD,MAAMC,cAAc,GAAG,qCAAqC,CAAA;AAC5D,MAAMC,SAAS,GAAG,iDAAiD,CAAA;;AAEnE;AACA;AACA;AACO,MAAMC,mCAAmG,gBAC9GC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACzB,MAAM;MAAEC,OAAO;MAAEC,QAAQ;MAAEC,SAAS;AAAEC,MAAAA,cAAAA;AAAkC,KAAC,GAAGL,KAAK;AAAxBM,IAAAA,cAAc,GAAAC,wBAAA,CAAKP,KAAK,EAAAQ,SAAA,CAAA,CAAA;EAEjF,oBACEC,cAAA,CAAAC,aAAA,CAACpB,yCAAyC,EAAAqB,QAAA,KACpCL,cAAc,EAAA;IAClBF,SAAS,EAAEQ,UAAU,CAACd,mCAAmC,CAACM,SAAS,EAAEA,SAAS,CAAE;AAChFH,IAAAA,GAAG,EAAEA,GAAiC;AACtCP,IAAAA,eAAe,EAAEW,cAAAA;AAAe,GAAA,CAAA,EAE/BF,QAAQ,EACRD,OAAO,gBAAGO,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKN,IAAAA,SAAS,EAAG,CAAA,EAAEN,mCAAmC,CAACM,SAAU,CAAA,SAAA,CAAA;AAAW,GAAA,EAAEF,OAAa,CAAC,GAAG,IACjE,CAAC,CAAA;AAEhD,CAAC,EAAC;AACJJ,mCAAmC,CAACM,SAAS,GAAGP,SAAS,CAAA;AACzDC,mCAAmC,CAACe,WAAW,GAAGjB,cAAc;;;;"}

package/_internal/DetailedCardHeader.js

@@ -0,0 +1,67 @@
+import { 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 { T as Theme } from './colors.js';
+import { u as useTheme } from './useTheme.js';
+import { S as Skeleton } from './Skeleton2.js';
+import { H as Heading } from './Heading2.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;
+  }
+`;
+
+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 as D };
+//# sourceMappingURL=DetailedCardHeader.js.map

package/_internal/DetailedCardHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailedCardHeader.js","sources":["../../src/components/detailed-card-header/styles.ts","../../src/components/detailed-card-header/DetailedCardHeader.tsx"],"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","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":["StyledDetailedCardHeader","styled","div","_ref","$theme","Theme","light","COMPONENT_NAME","CLASSNAME","DetailedCardHeader","forwardRef","props","ref","children","className","header","headingProps","isLoading","forwardedProps","_objectWithoutProperties","_excluded","theme","useTheme","React","createElement","_extends","classNames","Skeleton","Text","variant","isLoaded","height","marginBottom","Heading","as","displayName"],"mappings":";;;;;;;;;AAIA;AACA;AACA;AACO,MAAMA,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,CAAC;;;ACRD,MAAMC,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,CAACxB,wBAAwB,EAAAyB,QAAA,KACnBP,cAAc,EAAA;IAClBJ,SAAS,EAAEY,UAAU,CAACjB,kBAAkB,CAACK,SAAS,EAAEA,SAAS,CAAE;AAC/DF,IAAAA,GAAG,EAAEA,GAAiC;AACtCR,IAAAA,MAAM,EAAEiB,KAAAA;GAEPN,CAAAA,EAAAA,MAAM,gBACLQ,cAAA,CAAAC,aAAA,CAACG,QAAQ,CAACC,IAAI,EAAA;AAACC,IAAAA,OAAO,EAAC,IAAI;IAACC,QAAQ,EAAE,CAACb,SAAU;AAACc,IAAAA,MAAM,EAAC,MAAM;AAACC,IAAAA,YAAY,EAAC,MAAA;AAAM,GAAA,eACjFT,cAAA,CAAAC,aAAA,CAACS,OAAO,EAAAR,QAAA,CAAA;AAACS,IAAAA,EAAE,EAAC,IAAI;AAACpB,IAAAA,SAAS,EAAG,CAAA,EAAEL,kBAAkB,CAACK,SAAU,CAAU,QAAA,CAAA;AAACe,IAAAA,OAAO,EAAC,IAAA;GAASb,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,CAAC0B,WAAW,GAAG5B,cAAc;;;;"}

package/_internal/DetailedCardSection.js

@@ -0,0 +1,172 @@
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useState } from 'react';
+import classNames from 'classnames';
+import { mdiChevronDown, mdiChevronUp } from '@redsift/icons';
+import { i as isComponent } from './isComponent.js';
+import styled, { css } from 'styled-components';
+import { N as NotificationsColorPalette, e as ProductColorPalette } from './colors.js';
+import { u as useMessageFormatter } from './useMessageFormatter.js';
+import { D as DetailedCardCollapsibleSectionItems } from './DetailedCardCollapsibleSectionItems.js';
+import { F as Flexbox } from './Flexbox2.js';
+import { S as Skeleton } from './Skeleton2.js';
+import { T as Text } from './Text2.js';
+import { a as Badge, B as BadgeVariant } from './Badge2.js';
+import { I as IconButton } from './IconButton.js';
+
+var collapse$1 = "Collapse details";
+var expand$1 = "Expand details";
+var enUS = {
+	collapse: collapse$1,
+	expand: expand$1
+};
+
+var collapse = "Réduire les détails";
+var expand = "Développer les détails";
+var frFR = {
+	collapse: collapse,
+	expand: expand
+};
+
+var intlMessages = {
+  'en-US': enUS,
+  'fr-FR': frFR
+};
+
+/**
+ * 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;
+          ` : '';
+}};
+  }
+`;
+
+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 as D };
+//# sourceMappingURL=DetailedCardSection.js.map

package/_internal/DetailedCardSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailedCardSection.js","sources":["../../src/components/detailed-card-section/intl/index.ts","../../src/components/detailed-card-section/styles.ts","../../src/components/detailed-card-section/DetailedCardSection.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 { 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","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":["enUS","frFR","StyledDetailedCardSection","styled","div","_ref","$color","Object","keys","NotificationsColorPalette","indexOf","css","ProductColorPalette","_ref2","$isCollapsed","_ref3","_ref4","_ref5","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","_extends","classNames","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/_internal/DetailedCardSectionItem.js

@@ -0,0 +1,94 @@
+import { 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 { S as Shield } from './Shield2.js';
+import { a as Pill } from './Pill2.js';
+import { F as Flexbox } from './Flexbox2.js';
+import { S as Skeleton } from './Skeleton2.js';
+import { a as Icon } from './Icon2.js';
+import { T as Text } from './Text2.js';
+
+/**
+ * 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;
+  }
+`;
+
+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 as D };
+//# sourceMappingURL=DetailedCardSectionItem.js.map

package/_internal/DetailedCardSectionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailedCardSectionItem.js","sources":["../../src/components/detailed-card-section-item/styles.ts","../../src/components/detailed-card-section-item/DetailedCardSectionItem.tsx"],"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","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":["StyledDetailedCardSectionItem","styled","div","COMPONENT_NAME","CLASSNAME","DetailedCardSectionItem","forwardRef","props","ref","children","className","description","descriptionProps","icon","iconProps","isLoading","pill","pillProps","shield","forwardedProps","_objectWithoutProperties","_excluded","React","createElement","_extends","classNames","Flexbox","alignItems","Skeleton","isLoaded","Shield","variant","Icon","size","Pill","Text","displayName"],"mappings":"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"}

package/_internal/Flexbox2.js

@@ -0,0 +1,93 @@
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import styled, { css } from 'styled-components';
+import { i as baseStyling, c as baseInternalSpacing, f as baseBorder, g as baseFlexbox } from './styles4.js';
+import { u as useTheme, a as ThemeProvider } from './useTheme.js';
+
+/**
+ * Component style.
+ */
+const StyledFlexbox = styled.div`
+  display: ${_ref => {
+  let {
+    inline
+  } = _ref;
+  return inline ? 'inline-flex' : 'flex';
+}};
+
+  ${baseStyling}
+  ${baseInternalSpacing}
+  ${baseBorder}
+  ${baseFlexbox}
+
+  ${_ref2 => {
+  let {
+    $divider
+  } = _ref2;
+  return $divider ? css`
+          overflow: hidden;
+          > *:not(:empty) {
+            position: relative;
+
+            ::before {
+              content: '';
+              position: absolute;
+              background-color: var(--redsift-color-neutral-light-grey);
+              inline-size: 1px;
+              block-size: 100%;
+              inset-inline-start: calc(${Math.max(1, $divider.colGap / 2)}px * -1);
+            }
+
+            ::after {
+              content: '';
+              position: absolute;
+              background-color: var(--redsift-color-neutral-light-grey);
+              inline-size: 200vw;
+              block-size: 1px;
+              inset-inline-start: -100vw;
+              inset-block-start: calc(${Math.max(1, $divider.rowGap / 2)}px * -1);
+              z-index: 0;
+            }
+          }
+        ` : '';
+}}
+`;
+
+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 as F };
+//# sourceMappingURL=Flexbox2.js.map

package/_internal/Flexbox2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flexbox2.js","sources":["../../src/components/flexbox/styles.ts","../../src/components/flexbox/Flexbox.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseBorder, baseFlexbox, baseInternalSpacing, baseStyling } from '../shared';\nimport { StyledFlexboxProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledFlexbox = styled.div<StyledFlexboxProps>`\n  display: ${({ inline }) => (inline ? 'inline-flex' : 'flex')};\n\n  ${baseStyling}\n  ${baseInternalSpacing}\n  ${baseBorder}\n  ${baseFlexbox}\n\n  ${({ $divider }) =>\n    $divider\n      ? css`\n          overflow: hidden;\n          > *:not(:empty) {\n            position: relative;\n\n            ::before {\n              content: '';\n              position: absolute;\n              background-color: var(--redsift-color-neutral-light-grey);\n              inline-size: 1px;\n              block-size: 100%;\n              inset-inline-start: calc(${Math.max(1, $divider.colGap / 2)}px * -1);\n            }\n\n            ::after {\n              content: '';\n              position: absolute;\n              background-color: var(--redsift-color-neutral-light-grey);\n              inline-size: 200vw;\n              block-size: 1px;\n              inset-inline-start: -100vw;\n              inset-block-start: calc(${Math.max(1, $divider.rowGap / 2)}px * -1);\n              z-index: 0;\n            }\n          }\n        `\n      : ''}\n`;\n","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":["StyledFlexbox","styled","div","_ref","inline","baseStyling","baseInternalSpacing","baseBorder","baseFlexbox","_ref2","$divider","css","Math","max","colGap","rowGap","COMPONENT_NAME","CLASSNAME","Flexbox","forwardRef","props","ref","as","children","className","divider","gap","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","useTheme","React","createElement","ThemeProvider","value","_extends","classNames","$theme","displayName"],"mappings":";;;;;;;AAIA;AACA;AACA;AACO,MAAMA,aAAa,GAAGC,MAAM,CAACC,GAAwB,CAAA;AAC5D,WAAA,EAAaC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAMC,MAAM,GAAG,aAAa,GAAG,MAAM,CAAA;AAAA,CAAE,CAAA;AAC/D;AACA,EAAA,EAAIC,WAAY,CAAA;AAChB,EAAA,EAAIC,mBAAoB,CAAA;AACxB,EAAA,EAAIC,UAAW,CAAA;AACf,EAAA,EAAIC,WAAY,CAAA;AAChB;AACA,EAAA,EAAIC,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,QAAAA;AAAS,GAAC,GAAAD,KAAA,CAAA;EAAA,OACbC,QAAQ,GACJC,GAAI,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uCAAyCC,EAAAA,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEH,QAAQ,CAACI,MAAM,GAAG,CAAC,CAAE,CAAA;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sCAAwCF,EAAAA,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEH,QAAQ,CAACK,MAAM,GAAG,CAAC,CAAE,CAAA;AACzE;AACA;AACA;AACA,QAAA,CAAS,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACX,CAAC;;;ACrCD,MAAMC,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,CAAClC,aAAa,EAAAqC,QAAA,CAAA;AACZf,IAAAA,EAAE,EAAEA,EAAAA;AAAG,GAAA,EACHO,cAAc,EAAA;AAClBH,IAAAA,GAAG,EAAED,OAAO,GAAI,CAAA,EAAEA,OAAO,CAACV,MAAO,CAAA,GAAA,EAAKU,OAAO,CAACX,MAAO,CAAA,EAAA,CAAG,GAAGY,GAAI;IAC/DF,SAAS,EAAEc,UAAU,CAACpB,OAAO,CAACM,SAAS,EAAEA,SAAS,CAAE;AACpDH,IAAAA,GAAG,EAAEA,GAAiC;AACtCX,IAAAA,QAAQ,EAAEe,OAAQ;AAClBc,IAAAA,MAAM,EAAEZ,KAAAA;GAEPJ,CAAAA,EAAAA,QACY,CACF,CAAC,CAAA;AAEpB,CAAC,EAAC;AACFL,OAAO,CAACM,SAAS,GAAGP,SAAS,CAAA;AAC7BC,OAAO,CAACsB,WAAW,GAAGxB,cAAc;;;;"}

package/_internal/Grid2.js

@@ -0,0 +1,95 @@
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import styled, { css } from 'styled-components';
+import { i as baseStyling, c as baseInternalSpacing, h as baseGrid, f as baseBorder } from './styles4.js';
+import { G as GridItem } from './GridItem.js';
+import { u as useTheme, a as ThemeProvider } from './useTheme.js';
+
+/**
+ * Component style.
+ */
+const StyledGrid = styled.div`
+  display: ${_ref => {
+  let {
+    inline
+  } = _ref;
+  return inline ? 'inline-grid' : 'grid';
+}};
+  flex: 1;
+
+  ${baseStyling}
+  ${baseInternalSpacing}
+  ${baseGrid}
+  ${baseBorder}
+
+  ${_ref2 => {
+  let {
+    $divider
+  } = _ref2;
+  return $divider ? css`
+          overflow: hidden;
+          > .redsift-grid-item:not(:empty) {
+            position: relative;
+
+            ::before {
+              content: '';
+              position: absolute;
+              background-color: var(--redsift-color-neutral-light-grey);
+              inline-size: 1px;
+              block-size: 100%;
+              inset-inline-start: calc(${Math.max(1, $divider.colGap / 2)}px * -1);
+            }
+
+            ::after {
+              content: '';
+              position: absolute;
+              background-color: var(--redsift-color-neutral-light-grey);
+              inline-size: 200vw;
+              block-size: 1px;
+              inset-inline-start: -100vw;
+              inset-block-start: calc(${Math.max(1, $divider.rowGap / 2)}px * -1);
+              z-index: 0;
+            }
+          }
+        ` : '';
+}}
+`;
+
+const _excluded = ["children", "className", "divider", "gap", "theme"];
+const COMPONENT_NAME = 'Grid';
+const CLASSNAME = 'redsift-grid';
+
+/**
+ * The Grid component.
+ */
+const BaseGrid = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      divider,
+      gap,
+      theme: propsTheme
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledGrid, _extends({}, forwardedProps, {
+    gap: divider ? `${divider.rowGap}px ${divider.colGap}px` : gap,
+    className: classNames(BaseGrid.className, className),
+    ref: ref,
+    $divider: divider,
+    $theme: theme
+  }), children));
+});
+BaseGrid.className = CLASSNAME;
+BaseGrid.displayName = COMPONENT_NAME;
+const Grid = Object.assign(BaseGrid, {
+  Item: GridItem
+});
+
+export { BaseGrid as B, Grid as G };
+//# sourceMappingURL=Grid2.js.map