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

package/packages/design-system/src/components/detailed-card-section/_internal/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/packages/design-system/src/components/detailed-card-section/_internal/detailed-card-section.js

@@ -0,0 +1,2 @@
+export { DetailedCardSection } from './DetailedCardSection.js';
+//# sourceMappingURL=detailed-card-section.js.map

package/packages/design-system/src/components/detailed-card-section/_internal/styles.js

@@ -0,0 +1,69 @@
+import styled, { css } from 'styled-components';
+import { NotificationsColorPalette, ProductColorPalette } from '../../../types/_internal/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/packages/design-system/src/components/detailed-card-section/_internal/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/packages/design-system/src/components/detailed-card-section/intl/_internal/en-US.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.js.map

package/packages/design-system/src/components/detailed-card-section/intl/_internal/en-US.js.map

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

package/packages/design-system/src/components/detailed-card-section/intl/_internal/fr-FR.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.js.map

package/packages/design-system/src/components/detailed-card-section/intl/_internal/fr-FR.js.map

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

package/packages/design-system/src/components/detailed-card-section/intl/index.js

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

package/packages/design-system/src/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/packages/design-system/src/components/detailed-card-section-item/_internal/DetailedCardSectionItem.js

@@ -0,0 +1,64 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../../../_virtual/_internal/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { StyledDetailedCardSectionItem } from './styles.js';
+import { Shield } from '../../shield/_internal/Shield2.js';
+import { Pill } from '../../pill/_internal/Pill2.js';
+import { Flexbox } from '../../flexbox/_internal/Flexbox2.js';
+import { Skeleton } from '../../skeleton/_internal/Skeleton2.js';
+import { Icon } from '../../icon/_internal/Icon2.js';
+import { Text } from '../../text/_internal/Text2.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/packages/design-system/src/components/detailed-card-section-item/_internal/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/packages/design-system/src/components/detailed-card-section-item/_internal/detailed-card-section-item.js

@@ -0,0 +1,2 @@
+export { DetailedCardSectionItem } from './DetailedCardSectionItem.js';
+//# sourceMappingURL=detailed-card-section-item.js.map

package/packages/design-system/src/components/detailed-card-section-item/_internal/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/packages/design-system/src/components/detailed-card-section-item/_internal/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/packages/design-system/src/components/flexbox/_internal/Flexbox2.js

@@ -0,0 +1,44 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../../../_virtual/_internal/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { StyledFlexbox } from './styles.js';
+import { ThemeProvider } from '../../theme/_internal/context.js';
+import { useTheme } from '../../theme/_internal/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=Flexbox2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flexbox2.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;;;;"}

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

@@ -0,0 +1,2 @@
+export { Flexbox } from './Flexbox2.js';
+//# sourceMappingURL=flexbox.js.map

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

@@ -0,0 +1,54 @@
+import styled, { css } from 'styled-components';
+import { baseStyling, baseInternalSpacing, baseBorder, baseFlexbox } from '../../shared/_internal/styles.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;
+            }
+          }
+        ` : '';
+}}
+`;
+
+export { StyledFlexbox };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../src/components/flexbox/styles.ts"],"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"],"names":["StyledFlexbox","styled","div","_ref","inline","baseStyling","baseInternalSpacing","baseBorder","baseFlexbox","_ref2","$divider","css","Math","max","colGap","rowGap"],"mappings":";;;AAIA;AACA;AACA;AACaA,MAAAA,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;;;;"}

package/packages/design-system/src/components/focus-within-group/_internal/FocusWithinGroup.js

@@ -0,0 +1,91 @@
+import { objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_internal/_rollupPluginBabelHelpers.js';
+import React__default, { useReducer, useEffect, useMemo } from 'react';
+import { FocusWithinGroupActionType } from './types.js';
+import { FOCUS_WITHING_GROUP_INITIAL_STATE, FocusWithinGroupContext } from './context.js';
+import { FocusWithinGroupReducer } from './reducer.js';
+
+/**
+ * The FocusWithinGroup component.
+ *
+ * @param {ReactNode} children - The child content, which will
+ * include the DOM elements to rove between using the tab key.
+ * @param {KeyDirection} direction - An optional direction value
+ * that only applies when the roving tabindex is not being
+ * used within a grid. This value specifies the arrow key behaviour.
+ * The default value is 'horizontal'.
+ * When set to 'horizontal' then only the ArrowLeft and ArrowRight
+ * keys move to the previous and next tab stop respectively.
+ * When set to 'vertical' then only the ArrowUp and ArrowDown keys
+ * move to the previous and next tab stop respectively. When set
+ * to 'both' then both the ArrowLeft and ArrowUp keys can be used
+ * to move to the previous tab stop, and both the ArrowRight
+ * and ArrowDown keys can be used to move to the next tab stop.
+ * If you do not pass an explicit value then the 'horizontal'
+ * behaviour applies.
+ * @param {boolean} focusOnClick - An optional flag for indicating
+ * if `focus()` should invoked on an item in the roving tabindex
+ * when it is clicked. The default value for this flag is `false`,
+ * meaning that `focus()` will not be invoked on click.
+ * Browsers are
+ * [inconsistent in their behaviour](https://zellwk.com/blog/inconsistent-button-behavior/)
+ * when a button is clicked so you will see some variation between
+ * the browsers with the default value. Prior to version 3 of this library,
+ * the behaviour was to always invoke `focus()` on click; this behaviour
+ * can be maintained by passing `true`.
+ * @param {boolean} loopAround - An optional flag that,
+ * when set to `true`, will loop the tabindex around when the user
+ * tries to tab to the first or last elements in the roving tabindex,
+ * rather than stopping. The default value is `false` (no looping).
+ * Note that this option does not apply if the roving tabindex
+ * is being used on a grid.
+ */
+const FocusWithinGroup = props => {
+  const {
+    children,
+    direction,
+    focusOnClick,
+    loopAround,
+    focusType,
+    listRole,
+    focusOnInit,
+    activedescendant,
+    maxOptionsLength
+  } = props;
+  const [state, dispatch] = useReducer(FocusWithinGroupReducer, _objectSpread2(_objectSpread2({}, FOCUS_WITHING_GROUP_INITIAL_STATE), {}, {
+    direction,
+    focusOnClick,
+    loopAround,
+    focusType,
+    listRole,
+    focusOnInit,
+    activedescendant,
+    maxOptionsLength
+  }));
+
+  // Update the options whenever they change:
+  useEffect(() => {
+    dispatch({
+      type: FocusWithinGroupActionType.OPTIONS_UPDATED,
+      payload: {
+        direction: direction !== null && direction !== void 0 ? direction : FOCUS_WITHING_GROUP_INITIAL_STATE.direction,
+        focusOnClick: focusOnClick !== null && focusOnClick !== void 0 ? focusOnClick : FOCUS_WITHING_GROUP_INITIAL_STATE.focusOnClick,
+        loopAround: loopAround !== null && loopAround !== void 0 ? loopAround : FOCUS_WITHING_GROUP_INITIAL_STATE.loopAround,
+        focusType: focusType !== null && focusType !== void 0 ? focusType : FOCUS_WITHING_GROUP_INITIAL_STATE.focusType,
+        listRole: listRole !== null && listRole !== void 0 ? listRole : FOCUS_WITHING_GROUP_INITIAL_STATE.listRole,
+        focusOnInit: focusOnInit !== null && focusOnInit !== void 0 ? focusOnInit : FOCUS_WITHING_GROUP_INITIAL_STATE.focusOnInit,
+        activedescendant: activedescendant !== null && activedescendant !== void 0 ? activedescendant : FOCUS_WITHING_GROUP_INITIAL_STATE.activedescendant,
+        maxOptionsLength: maxOptionsLength !== null && maxOptionsLength !== void 0 ? maxOptionsLength : FOCUS_WITHING_GROUP_INITIAL_STATE.maxOptionsLength
+      }
+    });
+  }, [direction, focusOnClick, focusOnInit, loopAround, focusType, listRole, activedescendant, maxOptionsLength]);
+  const context = useMemo(() => ({
+    state,
+    dispatch
+  }), [state]);
+  return /*#__PURE__*/React__default.createElement(FocusWithinGroupContext.Provider, {
+    value: context
+  }, children);
+};
+
+export { FocusWithinGroup };
+//# sourceMappingURL=FocusWithinGroup.js.map

package/packages/design-system/src/components/focus-within-group/_internal/FocusWithinGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusWithinGroup.js","sources":["../../../../../../../src/components/focus-within-group/FocusWithinGroup.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useReducer } from 'react';\nimport {\n  FocusWithinGroupActionType,\n  FocusWithinGroupContextProps,\n  FocusWithinGroupProps,\n  FocusWithinGroupState,\n} from './types';\nimport { FOCUS_WITHING_GROUP_INITIAL_STATE, FocusWithinGroupContext } from './context';\nimport { FocusWithinGroupReducer } from './reducer';\n\n/**\n * The FocusWithinGroup component.\n *\n * @param {ReactNode} children - The child content, which will\n * include the DOM elements to rove between using the tab key.\n * @param {KeyDirection} direction - An optional direction value\n * that only applies when the roving tabindex is not being\n * used within a grid. This value specifies the arrow key behaviour.\n * The default value is 'horizontal'.\n * When set to 'horizontal' then only the ArrowLeft and ArrowRight\n * keys move to the previous and next tab stop respectively.\n * When set to 'vertical' then only the ArrowUp and ArrowDown keys\n * move to the previous and next tab stop respectively. When set\n * to 'both' then both the ArrowLeft and ArrowUp keys can be used\n * to move to the previous tab stop, and both the ArrowRight\n * and ArrowDown keys can be used to move to the next tab stop.\n * If you do not pass an explicit value then the 'horizontal'\n * behaviour applies.\n * @param {boolean} focusOnClick - An optional flag for indicating\n * if `focus()` should invoked on an item in the roving tabindex\n * when it is clicked. The default value for this flag is `false`,\n * meaning that `focus()` will not be invoked on click.\n * Browsers are\n * [inconsistent in their behaviour](https://zellwk.com/blog/inconsistent-button-behavior/)\n * when a button is clicked so you will see some variation between\n * the browsers with the default value. Prior to version 3 of this library,\n * the behaviour was to always invoke `focus()` on click; this behaviour\n * can be maintained by passing `true`.\n * @param {boolean} loopAround - An optional flag that,\n * when set to `true`, will loop the tabindex around when the user\n * tries to tab to the first or last elements in the roving tabindex,\n * rather than stopping. The default value is `false` (no looping).\n * Note that this option does not apply if the roving tabindex\n * is being used on a grid.\n */\nexport const FocusWithinGroup: React.FC<FocusWithinGroupProps> = (props) => {\n  const {\n    children,\n    direction,\n    focusOnClick,\n    loopAround,\n    focusType,\n    listRole,\n    focusOnInit,\n    activedescendant,\n    maxOptionsLength,\n  } = props;\n\n  const [state, dispatch] = useReducer(FocusWithinGroupReducer, {\n    ...FOCUS_WITHING_GROUP_INITIAL_STATE,\n    direction,\n    focusOnClick,\n    loopAround,\n    focusType,\n    listRole,\n    focusOnInit,\n    activedescendant,\n    maxOptionsLength,\n  } as FocusWithinGroupState);\n\n  // Update the options whenever they change:\n  useEffect(() => {\n    dispatch({\n      type: FocusWithinGroupActionType.OPTIONS_UPDATED,\n      payload: {\n        direction: direction ?? FOCUS_WITHING_GROUP_INITIAL_STATE.direction,\n        focusOnClick: focusOnClick ?? FOCUS_WITHING_GROUP_INITIAL_STATE.focusOnClick,\n        loopAround: loopAround ?? FOCUS_WITHING_GROUP_INITIAL_STATE.loopAround,\n        focusType: focusType ?? FOCUS_WITHING_GROUP_INITIAL_STATE.focusType,\n        listRole: listRole ?? FOCUS_WITHING_GROUP_INITIAL_STATE.listRole,\n        focusOnInit: focusOnInit ?? FOCUS_WITHING_GROUP_INITIAL_STATE.focusOnInit,\n        activedescendant: activedescendant ?? FOCUS_WITHING_GROUP_INITIAL_STATE.activedescendant,\n        maxOptionsLength: maxOptionsLength ?? FOCUS_WITHING_GROUP_INITIAL_STATE.maxOptionsLength,\n      },\n    });\n  }, [direction, focusOnClick, focusOnInit, loopAround, focusType, listRole, activedescendant, maxOptionsLength]);\n\n  const context = useMemo<FocusWithinGroupContextProps>(\n    () => ({\n      state,\n      dispatch,\n    }),\n    [state]\n  );\n\n  return <FocusWithinGroupContext.Provider value={context}>{children}</FocusWithinGroupContext.Provider>;\n};\n"],"names":["FocusWithinGroup","props","children","direction","focusOnClick","loopAround","focusType","listRole","focusOnInit","activedescendant","maxOptionsLength","state","dispatch","useReducer","FocusWithinGroupReducer","_objectSpread","FOCUS_WITHING_GROUP_INITIAL_STATE","useEffect","type","FocusWithinGroupActionType","OPTIONS_UPDATED","payload","context","useMemo","React","createElement","FocusWithinGroupContext","Provider","value"],"mappings":";;;;;;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACaA,MAAAA,gBAAiD,GAAIC,KAAK,IAAK;EAC1E,MAAM;IACJC,QAAQ;IACRC,SAAS;IACTC,YAAY;IACZC,UAAU;IACVC,SAAS;IACTC,QAAQ;IACRC,WAAW;IACXC,gBAAgB;AAChBC,IAAAA,gBAAAA;AACF,GAAC,GAAGT,KAAK,CAAA;AAET,EAAA,MAAM,CAACU,KAAK,EAAEC,QAAQ,CAAC,GAAGC,UAAU,CAACC,uBAAuB,EAAAC,cAAA,CAAAA,cAAA,KACvDC,iCAAiC,CAAA,EAAA,EAAA,EAAA;IACpCb,SAAS;IACTC,YAAY;IACZC,UAAU;IACVC,SAAS;IACTC,QAAQ;IACRC,WAAW;IACXC,gBAAgB;AAChBC,IAAAA,gBAAAA;AAAgB,GAAA,CACQ,CAAC,CAAA;;AAE3B;AACAO,EAAAA,SAAS,CAAC,MAAM;AACdL,IAAAA,QAAQ,CAAC;MACPM,IAAI,EAAEC,0BAA0B,CAACC,eAAe;AAChDC,MAAAA,OAAO,EAAE;QACPlB,SAAS,EAAEA,SAAS,KAATA,IAAAA,IAAAA,SAAS,cAATA,SAAS,GAAIa,iCAAiC,CAACb,SAAS;QACnEC,YAAY,EAAEA,YAAY,KAAZA,IAAAA,IAAAA,YAAY,cAAZA,YAAY,GAAIY,iCAAiC,CAACZ,YAAY;QAC5EC,UAAU,EAAEA,UAAU,KAAVA,IAAAA,IAAAA,UAAU,cAAVA,UAAU,GAAIW,iCAAiC,CAACX,UAAU;QACtEC,SAAS,EAAEA,SAAS,KAATA,IAAAA,IAAAA,SAAS,cAATA,SAAS,GAAIU,iCAAiC,CAACV,SAAS;QACnEC,QAAQ,EAAEA,QAAQ,KAARA,IAAAA,IAAAA,QAAQ,cAARA,QAAQ,GAAIS,iCAAiC,CAACT,QAAQ;QAChEC,WAAW,EAAEA,WAAW,KAAXA,IAAAA,IAAAA,WAAW,cAAXA,WAAW,GAAIQ,iCAAiC,CAACR,WAAW;QACzEC,gBAAgB,EAAEA,gBAAgB,KAAhBA,IAAAA,IAAAA,gBAAgB,cAAhBA,gBAAgB,GAAIO,iCAAiC,CAACP,gBAAgB;QACxFC,gBAAgB,EAAEA,gBAAgB,KAAhBA,IAAAA,IAAAA,gBAAgB,cAAhBA,gBAAgB,GAAIM,iCAAiC,CAACN,gBAAAA;AAC1E,OAAA;AACF,KAAC,CAAC,CAAA;AACJ,GAAC,EAAE,CAACP,SAAS,EAAEC,YAAY,EAAEI,WAAW,EAAEH,UAAU,EAAEC,SAAS,EAAEC,QAAQ,EAAEE,gBAAgB,EAAEC,gBAAgB,CAAC,CAAC,CAAA;AAE/G,EAAA,MAAMY,OAAO,GAAGC,OAAO,CACrB,OAAO;IACLZ,KAAK;AACLC,IAAAA,QAAAA;AACF,GAAC,CAAC,EACF,CAACD,KAAK,CACR,CAAC,CAAA;AAED,EAAA,oBAAOa,cAAA,CAAAC,aAAA,CAACC,uBAAuB,CAACC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEN,OAAAA;AAAQ,GAAA,EAAEpB,QAA2C,CAAC,CAAA;AACxG;;;;"}

package/packages/design-system/src/components/focus-within-group/_internal/context.js

@@ -0,0 +1,21 @@
+import React__default from 'react';
+
+const FOCUS_WITHING_GROUP_INITIAL_STATE = {
+  selectedId: null,
+  allowFocusing: false,
+  tabStops: [],
+  direction: 'vertical',
+  focusOnClick: false,
+  focusOnInit: true,
+  loopAround: false,
+  rowStartMap: null,
+  focusType: 'roving-tabindex',
+  listRole: 'listbox'
+};
+const FocusWithinGroupContext = /*#__PURE__*/React__default.createContext({
+  state: FOCUS_WITHING_GROUP_INITIAL_STATE,
+  dispatch: () => {}
+});
+
+export { FOCUS_WITHING_GROUP_INITIAL_STATE, FocusWithinGroupContext };
+//# sourceMappingURL=context.js.map

package/packages/design-system/src/components/focus-within-group/_internal/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../../../../../../src/components/focus-within-group/context.ts"],"sourcesContent":["import React from 'react';\nimport { FocusWithinGroupContextProps, FocusWithinGroupState } from './types';\n\nexport const FOCUS_WITHING_GROUP_INITIAL_STATE: FocusWithinGroupState = {\n  selectedId: null,\n  allowFocusing: false,\n  tabStops: [],\n  direction: 'vertical',\n  focusOnClick: false,\n  focusOnInit: true,\n  loopAround: false,\n  rowStartMap: null,\n  focusType: 'roving-tabindex',\n  listRole: 'listbox',\n};\n\nexport const FocusWithinGroupContext = React.createContext<FocusWithinGroupContextProps>({\n  state: FOCUS_WITHING_GROUP_INITIAL_STATE,\n  dispatch: () => {},\n});\n"],"names":["FOCUS_WITHING_GROUP_INITIAL_STATE","selectedId","allowFocusing","tabStops","direction","focusOnClick","focusOnInit","loopAround","rowStartMap","focusType","listRole","FocusWithinGroupContext","React","createContext","state","dispatch"],"mappings":";;AAGO,MAAMA,iCAAwD,GAAG;AACtEC,EAAAA,UAAU,EAAE,IAAI;AAChBC,EAAAA,aAAa,EAAE,KAAK;AACpBC,EAAAA,QAAQ,EAAE,EAAE;AACZC,EAAAA,SAAS,EAAE,UAAU;AACrBC,EAAAA,YAAY,EAAE,KAAK;AACnBC,EAAAA,WAAW,EAAE,IAAI;AACjBC,EAAAA,UAAU,EAAE,KAAK;AACjBC,EAAAA,WAAW,EAAE,IAAI;AACjBC,EAAAA,SAAS,EAAE,iBAAiB;AAC5BC,EAAAA,QAAQ,EAAE,SAAA;AACZ,EAAC;MAEYC,uBAAuB,gBAAGC,cAAK,CAACC,aAAa,CAA+B;AACvFC,EAAAA,KAAK,EAAEd,iCAAiC;EACxCe,QAAQ,EAAEA,MAAM,EAAC;AACnB,CAAC;;;;"}

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

@@ -0,0 +1,7 @@
+export { EventKey, FocusWithinGroupActionType, Navigation } from './types.js';
+export { FocusWithinGroup } from './FocusWithinGroup.js';
+export { FOCUS_WITHING_GROUP_INITIAL_STATE, FocusWithinGroupContext } from './context.js';
+export { FocusWithinGroupReducer } from './reducer.js';
+export { uniqueId, useFocusOnListItem } from './useFocusOnListItem.js';
+export { useFocusOnList } from './useFocusOnList.js';
+//# sourceMappingURL=focus-within-group.js.map

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

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