@elliemae/ds-ribbon 3.80.0-next.2 → 3.80.0-next.20

package/dist/esm/parts/DSRibbonCard/DSRibbonCard.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSRibbonCard/DSRibbonCard.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { describe } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { useRibbonCard } from './config/useRibbonCard.js';\nimport { DSRibbonCardWithAdditionalValue } from './DSRibbonCardWithAdditionalValue.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport { type DSRibbonCardT, DSRibbonCardPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockRow, StyledBlockValue } from './styled.js';\nimport { DSRibbonCardWithAdditionalLabel } from './DSRibbonCardWithAdditionalLabel.js';\n\nconst DSRibbonCard: React.ComponentType<DSRibbonCardT.Props> = (props) => {\n  const ribbonCardConfig = useRibbonCard(props);\n  const { propsWithDefault, xstyledProps, globalProps } = ribbonCardConfig;\n  const { containerProps, value, additionalValue, additionalLabel, center } = propsWithDefault;\n  const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n  if (additionalValue)\n    return <DSRibbonCardWithAdditionalValue ribbonCardConfig={ribbonCardConfig} getOwnerProps={getOwnerProps} />;\n  if (additionalLabel)\n    return <DSRibbonCardWithAdditionalLabel ribbonCardConfig={ribbonCardConfig} getOwnerProps={getOwnerProps} />;\n\n  return (\n    <StyledBlock\n      {...containerProps}\n      {...globalProps}\n      {...xstyledProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledBlockRow center={center} getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        <PureLabelPlace {...propsWithDefault} getOwnerProps={getOwnerProps} />\n        <StyledBlockValue getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n          {value}\n        </StyledBlockValue>\n      </StyledBlockRow>\n    </StyledBlock>\n  );\n};\n\n// because this is a part, only the displayName is supposed to differ from the parent\nDSRibbonCard.displayName = 'DSRibbonCard';\nconst DSRibbonCardWithSchema = describe(DSRibbonCard);\nDSRibbonCardWithSchema.propTypes = DSRibbonCardPropTypesSchema;\n\nexport { DSRibbonCard, DSRibbonCardWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACkBZ,cAYL,YAZK;AAjBX,SAAS,gBAAgB;AACzB,OAAOA,YAAW;AAClB,SAAS,qBAAqB;AAC9B,SAAS,uCAAuC;AAChD,SAAS,sBAAsB;AAC/B,SAA6B,mCAAmC;AAChE,SAAS,aAAa,gBAAgB,wBAAwB;AAC9D,SAAS,uCAAuC;AAEhD,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,mBAAmB,cAAc,KAAK;AAC5C,QAAM,EAAE,kBAAkB,cAAc,YAAY,IAAI;AACxD,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,iBAAiB,OAAO,IAAI;AAC5E,QAAM,gBAAgBA,OAAM,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAClF,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/D,MAAI;AACF,WAAO,oBAAC,mCAAgC,kBAAoC,eAA8B;AAC5G,MAAI;AACF,WAAO,oBAAC,mCAAgC,kBAAoC,eAA8B;AAE5G,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA,+BAAC,kBAAe,QAAgB,eAA8B,wBAC5D;AAAA,4BAAC,kBAAgB,GAAG,kBAAkB,eAA8B;AAAA,QACpE,oBAAC,oBAAiB,eAA8B,wBAC7C,iBACH;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAGA,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { describe } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { useRibbonCard } from './config/useRibbonCard.js';\nimport { DSRibbonCardWithAdditionalValue } from './DSRibbonCardWithAdditionalValue.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport { type DSRibbonCardT, DSRibbonCardPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockRow, StyledBlockValue } from './styled.js';\nimport { DSRibbonCardWithAdditionalLabel } from './DSRibbonCardWithAdditionalLabel.js';\n\nconst DSRibbonCard: React.ComponentType<DSRibbonCardT.Props> = (props) => {\n  const ribbonCardConfig = useRibbonCard(props);\n  const { propsWithDefault, xstyledProps, globalProps, instanceUid } = ribbonCardConfig;\n  const { containerProps, value, additionalValue, additionalLabel, center, label } = propsWithDefault;\n  const labelId = `${instanceUid}-label`;\n  const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n  if (additionalValue)\n    return <DSRibbonCardWithAdditionalValue ribbonCardConfig={ribbonCardConfig} getOwnerProps={getOwnerProps} />;\n  if (additionalLabel)\n    return <DSRibbonCardWithAdditionalLabel ribbonCardConfig={ribbonCardConfig} getOwnerProps={getOwnerProps} />;\n\n  return (\n    <StyledBlock\n      {...containerProps}\n      {...globalProps}\n      {...xstyledProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledBlockRow center={center} getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        <PureLabelPlace {...propsWithDefault} labelId={labelId} getOwnerProps={getOwnerProps} />\n        <StyledBlockValue\n          aria-labelledby={label ? labelId : undefined}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {value}\n        </StyledBlockValue>\n      </StyledBlockRow>\n    </StyledBlock>\n  );\n};\n\n// because this is a part, only the displayName is supposed to differ from the parent\nDSRibbonCard.displayName = 'DSRibbonCard';\nconst DSRibbonCardWithSchema = describe(DSRibbonCard);\nDSRibbonCardWithSchema.propTypes = DSRibbonCardPropTypesSchema;\n\nexport { DSRibbonCard, DSRibbonCardWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmBZ,cAYL,YAZK;AAlBX,SAAS,gBAAgB;AACzB,OAAOA,YAAW;AAClB,SAAS,qBAAqB;AAC9B,SAAS,uCAAuC;AAChD,SAAS,sBAAsB;AAC/B,SAA6B,mCAAmC;AAChE,SAAS,aAAa,gBAAgB,wBAAwB;AAC9D,SAAS,uCAAuC;AAEhD,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,mBAAmB,cAAc,KAAK;AAC5C,QAAM,EAAE,kBAAkB,cAAc,aAAa,YAAY,IAAI;AACrE,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,iBAAiB,QAAQ,MAAM,IAAI;AACnF,QAAM,UAAU,GAAG,WAAW;AAC9B,QAAM,gBAAgBA,OAAM,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAClF,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/D,MAAI;AACF,WAAO,oBAAC,mCAAgC,kBAAoC,eAA8B;AAC5G,MAAI;AACF,WAAO,oBAAC,mCAAgC,kBAAoC,eAA8B;AAE5G,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA,+BAAC,kBAAe,QAAgB,eAA8B,wBAC5D;AAAA,4BAAC,kBAAgB,GAAG,kBAAkB,SAAkB,eAA8B;AAAA,QACtF;AAAA,UAAC;AAAA;AAAA,YACC,mBAAiB,QAAQ,UAAU;AAAA,YACnC;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAGA,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
   "names": ["React"]
 }

package/dist/esm/parts/DSRibbonCard/DSRibbonCardWithAdditionalLabel.js

@@ -6,10 +6,13 @@ import { StyledBlock, StyledBlockCol, StyledBlockRow, StyledBlockValue, StyledBl
 const DSRibbonCardWithAdditionalLabel = (props) => {
   const {
     getOwnerProps,
-    ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps }
+    ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps, instanceUid }
   } = props;
-  const { containerProps, value, additionalLabel, center } = propsWithDefault;
+  const { containerProps, value, additionalLabel, center, label } = propsWithDefault;
   const getOwnerPropsArguments = React2.useCallback(() => ({}), []);
+  const labelId = `${instanceUid}-label`;
+  const additionalLabelId = `${instanceUid}-additional-label`;
+  const labelledBy = label && labelId || additionalLabel && additionalLabelId || void 0;
   return /* @__PURE__ */ jsx(
     StyledBlock,
     {
@@ -26,7 +29,7 @@ const DSRibbonCardWithAdditionalLabel = (props) => {
           getOwnerProps,
           getOwnerPropsArguments,
           children: [
-            /* @__PURE__ */ jsx(PureLabelPlace, { ...propsWithDefault, getOwnerProps }),
+            /* @__PURE__ */ jsx(PureLabelPlace, { ...propsWithDefault, labelId, getOwnerProps }),
             /* @__PURE__ */ jsxs(
               StyledBlockCol,
               {
@@ -35,8 +38,24 @@ const DSRibbonCardWithAdditionalLabel = (props) => {
                 getOwnerProps,
                 getOwnerPropsArguments,
                 children: [
-                  /* @__PURE__ */ jsx(StyledBlockValue, { getOwnerProps, getOwnerPropsArguments, children: value }),
-                  /* @__PURE__ */ jsx(StyledBlockValueLabel, { getOwnerProps, getOwnerPropsArguments, children: additionalLabel })
+                  /* @__PURE__ */ jsx(
+                    StyledBlockValue,
+                    {
+                      "aria-labelledby": labelledBy,
+                      getOwnerProps,
+                      getOwnerPropsArguments,
+                      children: value
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    StyledBlockValueLabel,
+                    {
+                      id: additionalLabelId,
+                      getOwnerProps,
+                      getOwnerPropsArguments,
+                      children: additionalLabel
+                    }
+                  )
                 ]
               }
             )

package/dist/esm/parts/DSRibbonCard/DSRibbonCardWithAdditionalLabel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSRibbonCard/DSRibbonCardWithAdditionalLabel.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { useRibbonCard } from './config/useRibbonCard.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockCol, StyledBlockRow, StyledBlockValue, StyledBlockValueLabel } from './styled.js';\n\nexport const DSRibbonCardWithAdditionalLabel: React.ComponentType<{\n  ribbonCardConfig: ReturnType<typeof useRibbonCard>;\n  getOwnerProps: () => DSRibbonCardT.InternalProps;\n}> = (props) => {\n  const {\n    getOwnerProps,\n    ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps },\n  } = props;\n  const { containerProps, value, additionalLabel, center } = propsWithDefault;\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n  return (\n    <StyledBlock\n      {...containerProps}\n      {...globalProps}\n      {...xstyledProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledBlockRow\n        className=\"ribbon-block-row\"\n        style={{ alignItems: 'flex-start' }}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <PureLabelPlace {...propsWithDefault} getOwnerProps={getOwnerProps} />\n        <StyledBlockCol\n          center={center}\n          className=\"ribbon-block-col\"\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <StyledBlockValue getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n            {value}\n          </StyledBlockValue>\n          <StyledBlockValueLabel getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n            {additionalLabel}\n          </StyledBlockValueLabel>\n        </StyledBlockCol>\n      </StyledBlockRow>\n    </StyledBlock>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC8Bf,cACA,YADA;AA9BR,OAAOA,YAAW;AAElB,SAAS,sBAAsB;AAE/B,SAAS,aAAa,gBAAgB,gBAAgB,kBAAkB,6BAA6B;AAE9F,MAAM,kCAGR,CAAC,UAAU;AACd,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,kBAAkB,cAAc,YAAY;AAAA,EAClE,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,OAAO,IAAI;AAC3D,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,aAAa;AAAA,UAClC;AAAA,UACA;AAAA,UAEA;AAAA,gCAAC,kBAAgB,GAAG,kBAAkB,eAA8B;AAAA,YACpE;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,WAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBAEA;AAAA,sCAAC,oBAAiB,eAA8B,wBAC7C,iBACH;AAAA,kBACA,oBAAC,yBAAsB,eAA8B,wBAClD,2BACH;AAAA;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { useRibbonCard } from './config/useRibbonCard.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockCol, StyledBlockRow, StyledBlockValue, StyledBlockValueLabel } from './styled.js';\n\nexport const DSRibbonCardWithAdditionalLabel: React.ComponentType<{\n  ribbonCardConfig: ReturnType<typeof useRibbonCard>;\n  getOwnerProps: () => DSRibbonCardT.InternalProps;\n}> = (props) => {\n  const {\n    getOwnerProps,\n    ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps, instanceUid },\n  } = props;\n  const { containerProps, value, additionalLabel, center, label } = propsWithDefault;\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n  // This variant is normally used without `label` \u2014 `<RibbonCard additionalLabel=\"Processed\"\n  // value=\"50\" />` \u2014 so the additional label is what names the value. A real `label` outranks it.\n  const labelId = `${instanceUid}-label`;\n  const additionalLabelId = `${instanceUid}-additional-label`;\n  const labelledBy = (label && labelId) || (additionalLabel && additionalLabelId) || undefined;\n  return (\n    <StyledBlock\n      {...containerProps}\n      {...globalProps}\n      {...xstyledProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledBlockRow\n        className=\"ribbon-block-row\"\n        style={{ alignItems: 'flex-start' }}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <PureLabelPlace {...propsWithDefault} labelId={labelId} getOwnerProps={getOwnerProps} />\n        <StyledBlockCol\n          center={center}\n          className=\"ribbon-block-col\"\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <StyledBlockValue\n            aria-labelledby={labelledBy}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {value}\n          </StyledBlockValue>\n          <StyledBlockValueLabel\n            id={additionalLabelId}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {additionalLabel}\n          </StyledBlockValueLabel>\n        </StyledBlockCol>\n      </StyledBlockRow>\n    </StyledBlock>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmCf,cACA,YADA;AAnCR,OAAOA,YAAW;AAElB,SAAS,sBAAsB;AAE/B,SAAS,aAAa,gBAAgB,gBAAgB,kBAAkB,6BAA6B;AAE9F,MAAM,kCAGR,CAAC,UAAU;AACd,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,kBAAkB,cAAc,aAAa,YAAY;AAAA,EAC/E,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,QAAQ,MAAM,IAAI;AAClE,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAG/D,QAAM,UAAU,GAAG,WAAW;AAC9B,QAAM,oBAAoB,GAAG,WAAW;AACxC,QAAM,aAAc,SAAS,WAAa,mBAAmB,qBAAsB;AACnF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,aAAa;AAAA,UAClC;AAAA,UACA;AAAA,UAEA;AAAA,gCAAC,kBAAgB,GAAG,kBAAkB,SAAkB,eAA8B;AAAA,YACtF;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,WAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBAEA;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,mBAAiB;AAAA,sBACjB;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH;AAAA,kBACA;AAAA,oBAAC;AAAA;AAAA,sBACC,IAAI;AAAA,sBACJ;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH;AAAA;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/parts/DSRibbonCard/DSRibbonCardWithAdditionalValue.js

@@ -6,10 +6,12 @@ import { StyledBlock, StyledBlockCol, StyledBlockRow, StyledBlockValue } from ".
 const DSRibbonCardWithAdditionalValue = (props) => {
   const {
     getOwnerProps,
-    ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps }
+    ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps, instanceUid }
   } = props;
-  const { containerProps, value, additionalValue, center } = propsWithDefault;
+  const { containerProps, value, additionalValue, center, label } = propsWithDefault;
   const getOwnerPropsArguments = React2.useCallback(() => ({}), []);
+  const labelId = `${instanceUid}-label`;
+  const labelledBy = label ? labelId : void 0;
   return /* @__PURE__ */ jsx(
     StyledBlock,
     {
@@ -26,7 +28,7 @@ const DSRibbonCardWithAdditionalValue = (props) => {
           getOwnerProps,
           getOwnerPropsArguments,
           children: [
-            /* @__PURE__ */ jsx(PureLabelPlace, { ...propsWithDefault, getOwnerProps }),
+            /* @__PURE__ */ jsx(PureLabelPlace, { ...propsWithDefault, labelId, getOwnerProps }),
             /* @__PURE__ */ jsxs(
               StyledBlockCol,
               {
@@ -35,8 +37,24 @@ const DSRibbonCardWithAdditionalValue = (props) => {
                 getOwnerProps,
                 getOwnerPropsArguments,
                 children: [
-                  /* @__PURE__ */ jsx(StyledBlockValue, { getOwnerProps, getOwnerPropsArguments, children: value }),
-                  /* @__PURE__ */ jsx(StyledBlockValue, { getOwnerProps, getOwnerPropsArguments, children: additionalValue })
+                  /* @__PURE__ */ jsx(
+                    StyledBlockValue,
+                    {
+                      "aria-labelledby": labelledBy,
+                      getOwnerProps,
+                      getOwnerPropsArguments,
+                      children: value
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    StyledBlockValue,
+                    {
+                      "aria-labelledby": labelledBy,
+                      getOwnerProps,
+                      getOwnerPropsArguments,
+                      children: additionalValue
+                    }
+                  )
                 ]
               }
             )

package/dist/esm/parts/DSRibbonCard/DSRibbonCardWithAdditionalValue.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSRibbonCard/DSRibbonCardWithAdditionalValue.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { useRibbonCard } from './config/useRibbonCard.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockCol, StyledBlockRow, StyledBlockValue } from './styled.js';\n\nexport const DSRibbonCardWithAdditionalValue: React.ComponentType<{\n  ribbonCardConfig: ReturnType<typeof useRibbonCard>;\n  getOwnerProps: () => DSRibbonCardT.InternalProps;\n}> = (props) => {\n  const {\n    getOwnerProps,\n    ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps },\n  } = props;\n  const { containerProps, value, additionalValue, center } = propsWithDefault;\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n  return (\n    <StyledBlock\n      {...containerProps}\n      {...globalProps}\n      {...xstyledProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledBlockRow\n        className=\"ribbon-block-row\"\n        style={{ alignItems: 'flex-start' }}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <PureLabelPlace {...propsWithDefault} getOwnerProps={getOwnerProps} />\n        <StyledBlockCol\n          center={center}\n          className=\"ribbon-block-col\"\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <StyledBlockValue getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n            {value}\n          </StyledBlockValue>\n          <StyledBlockValue getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n            {additionalValue}\n          </StyledBlockValue>\n        </StyledBlockCol>\n      </StyledBlockRow>\n    </StyledBlock>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC8Bf,cACA,YADA;AA9BR,OAAOA,YAAW;AAElB,SAAS,sBAAsB;AAE/B,SAAS,aAAa,gBAAgB,gBAAgB,wBAAwB;AAEvE,MAAM,kCAGR,CAAC,UAAU;AACd,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,kBAAkB,cAAc,YAAY;AAAA,EAClE,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,OAAO,IAAI;AAC3D,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,aAAa;AAAA,UAClC;AAAA,UACA;AAAA,UAEA;AAAA,gCAAC,kBAAgB,GAAG,kBAAkB,eAA8B;AAAA,YACpE;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,WAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBAEA;AAAA,sCAAC,oBAAiB,eAA8B,wBAC7C,iBACH;AAAA,kBACA,oBAAC,oBAAiB,eAA8B,wBAC7C,2BACH;AAAA;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { useRibbonCard } from './config/useRibbonCard.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockCol, StyledBlockRow, StyledBlockValue } from './styled.js';\n\nexport const DSRibbonCardWithAdditionalValue: React.ComponentType<{\n  ribbonCardConfig: ReturnType<typeof useRibbonCard>;\n  getOwnerProps: () => DSRibbonCardT.InternalProps;\n}> = (props) => {\n  const {\n    getOwnerProps,\n    ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps, instanceUid },\n  } = props;\n  const { containerProps, value, additionalValue, center, label } = propsWithDefault;\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n  // One label, two values: it names both.\n  const labelId = `${instanceUid}-label`;\n  const labelledBy = label ? labelId : undefined;\n  return (\n    <StyledBlock\n      {...containerProps}\n      {...globalProps}\n      {...xstyledProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledBlockRow\n        className=\"ribbon-block-row\"\n        style={{ alignItems: 'flex-start' }}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <PureLabelPlace {...propsWithDefault} labelId={labelId} getOwnerProps={getOwnerProps} />\n        <StyledBlockCol\n          center={center}\n          className=\"ribbon-block-col\"\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <StyledBlockValue\n            aria-labelledby={labelledBy}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {value}\n          </StyledBlockValue>\n          <StyledBlockValue\n            aria-labelledby={labelledBy}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {additionalValue}\n          </StyledBlockValue>\n        </StyledBlockCol>\n      </StyledBlockRow>\n    </StyledBlock>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACiCf,cACA,YADA;AAjCR,OAAOA,YAAW;AAElB,SAAS,sBAAsB;AAE/B,SAAS,aAAa,gBAAgB,gBAAgB,wBAAwB;AAEvE,MAAM,kCAGR,CAAC,UAAU;AACd,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,kBAAkB,cAAc,aAAa,YAAY;AAAA,EAC/E,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,QAAQ,MAAM,IAAI;AAClE,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/D,QAAM,UAAU,GAAG,WAAW;AAC9B,QAAM,aAAa,QAAQ,UAAU;AACrC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,aAAa;AAAA,UAClC;AAAA,UACA;AAAA,UAEA;AAAA,gCAAC,kBAAgB,GAAG,kBAAkB,SAAkB,eAA8B;AAAA,YACtF;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,WAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBAEA;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,mBAAiB;AAAA,sBACjB;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH;AAAA,kBACA;AAAA,oBAAC;AAAA;AAAA,sBACC,mBAAiB;AAAA,sBACjB;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH;AAAA;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/parts/DSRibbonCard/PureLabelPlace.js

@@ -1,29 +1,66 @@
 import * as React from "react";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React2 from "react";
 import { StyledBlockIcon, StyledBlockLabel } from "./styled.js";
+const srOnlyStyle = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: 0,
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+const STATUS_TEXT = {
+  info: "Information",
+  error: "Error",
+  warning: "Warning",
+  success: "Success"
+};
+const resolveStatusText = ({
+  info,
+  error,
+  warning,
+  success
+}) => {
+  if (info) return STATUS_TEXT.info;
+  if (error) return STATUS_TEXT.error;
+  if (warning) return STATUS_TEXT.warning;
+  if (success) return STATUS_TEXT.success;
+  return "";
+};
 const PureLabelPlace = ({
   icon,
   error,
   info,
   success,
   warning,
+  statusText,
   label,
+  labelId,
   getOwnerProps
 }) => {
   const getOwnerPropsArguments = React2.useCallback(() => ({}), []);
-  return icon ? /* @__PURE__ */ jsx(
-    StyledBlockIcon,
-    {
-      error,
-      info,
-      success,
-      warning,
-      getOwnerProps,
-      getOwnerPropsArguments,
-      children: icon
-    }
-  ) : /* @__PURE__ */ jsx(StyledBlockLabel, { getOwnerProps, getOwnerPropsArguments, children: label });
+  const showLabel = !icon || Boolean(label);
+  const announcedStatus = resolveStatusText({ info, error, warning, success });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    announcedStatus ? /* @__PURE__ */ jsx("span", { style: srOnlyStyle, children: statusText || announcedStatus }) : null,
+    icon ? /* @__PURE__ */ jsx(
+      StyledBlockIcon,
+      {
+        error,
+        info,
+        success,
+        warning,
+        getOwnerProps,
+        getOwnerPropsArguments,
+        children: icon
+      }
+    ) : null,
+    showLabel ? /* @__PURE__ */ jsx(StyledBlockLabel, { id: labelId, getOwnerProps, getOwnerPropsArguments, children: label }) : null
+  ] });
 };
 export {
   PureLabelPlace

package/dist/esm/parts/DSRibbonCard/PureLabelPlace.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSRibbonCard/PureLabelPlace.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlockIcon, StyledBlockLabel } from './styled.js';\n\nexport const PureLabelPlace: React.ComponentType<PureLabelPlaceProps> = ({\n  icon,\n  error,\n  info,\n  success,\n  warning,\n  label,\n  getOwnerProps,\n}) => {\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n  return icon ? (\n    <StyledBlockIcon\n      error={error}\n      info={info}\n      success={success}\n      warning={warning}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      {icon}\n    </StyledBlockIcon>\n  ) : (\n    <StyledBlockLabel getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n      {label}\n    </StyledBlockLabel>\n  );\n};\ntype PureLabelPlaceProps = {\n  icon?: DSRibbonCardT.Props['icon'];\n  label?: DSRibbonCardT.Props['label'];\n  error?: DSRibbonCardT.Props['error'];\n  info?: DSRibbonCardT.Props['info'];\n  success?: DSRibbonCardT.Props['success'];\n  warning?: DSRibbonCardT.Props['warning'];\n  getOwnerProps: () => DSRibbonCardT.InternalProps;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACenB;AAfJ,OAAOA,YAAW;AAElB,SAAS,iBAAiB,wBAAwB;AAE3C,MAAM,iBAA2D,CAAC;AAAA,EACvE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAC/D,SAAO,OACL;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH,IAEA,oBAAC,oBAAiB,eAA8B,wBAC7C,iBACH;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlockIcon, StyledBlockLabel } from './styled.js';\n\n// Reaches assistive technology, never painted. Same approach as ds-form-date-time-picker's\n// MeridiemList.\nconst srOnlyStyle: React.CSSProperties = {\n  position: 'absolute',\n  width: '1px',\n  height: '1px',\n  padding: 0,\n  margin: '-1px',\n  overflow: 'hidden',\n  clip: 'rect(0, 0, 0, 0)',\n  whiteSpace: 'nowrap',\n  border: 0,\n};\n\nconst STATUS_TEXT = {\n  info: 'Information',\n  error: 'Error',\n  warning: 'Warning',\n  success: 'Success',\n};\n\n// Precedence matches the icon fill in styled.tsx.\nconst resolveStatusText = ({\n  info,\n  error,\n  warning,\n  success,\n}: Pick<PureLabelPlaceProps, 'info' | 'error' | 'warning' | 'success'>) => {\n  if (info) return STATUS_TEXT.info;\n  if (error) return STATUS_TEXT.error;\n  if (warning) return STATUS_TEXT.warning;\n  if (success) return STATUS_TEXT.success;\n  return '';\n};\n\nexport const PureLabelPlace: React.ComponentType<PureLabelPlaceProps> = ({\n  icon,\n  error,\n  info,\n  success,\n  warning,\n  statusText,\n  label,\n  labelId,\n  getOwnerProps,\n}) => {\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n  // Without an icon the label block renders as it always has, empty label included \u2014 removing it\n  // would take away an element consumers can already select.\n  const showLabel = !icon || Boolean(label);\n  // The status props otherwise reach assistive technology through nothing at all: the only thing\n  // they change is the fill of an icon that ds-icons renders aria-hidden.\n  const announcedStatus = resolveStatusText({ info, error, warning, success });\n  return (\n    <>\n      {announcedStatus ? <span style={srOnlyStyle}>{statusText || announcedStatus}</span> : null}\n      {icon ? (\n        <StyledBlockIcon\n          error={error}\n          info={info}\n          success={success}\n          warning={warning}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {icon}\n        </StyledBlockIcon>\n      ) : null}\n      {showLabel ? (\n        <StyledBlockLabel id={labelId} getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n          {label}\n        </StyledBlockLabel>\n      ) : null}\n    </>\n  );\n};\ntype PureLabelPlaceProps = {\n  icon?: DSRibbonCardT.Props['icon'];\n  label?: DSRibbonCardT.Props['label'];\n  labelId?: string;\n  error?: DSRibbonCardT.Props['error'];\n  info?: DSRibbonCardT.Props['info'];\n  success?: DSRibbonCardT.Props['success'];\n  statusText?: DSRibbonCardT.Props['statusText'];\n  warning?: DSRibbonCardT.Props['warning'];\n  getOwnerProps: () => DSRibbonCardT.InternalProps;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC0DnB,mBACqB,KADrB;AA1DJ,OAAOA,YAAW;AAElB,SAAS,iBAAiB,wBAAwB;AAIlD,MAAM,cAAmC;AAAA,EACvC,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,QAAQ;AACV;AAEA,MAAM,cAAc;AAAA,EAClB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AACX;AAGA,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2E;AACzE,MAAI,KAAM,QAAO,YAAY;AAC7B,MAAI,MAAO,QAAO,YAAY;AAC9B,MAAI,QAAS,QAAO,YAAY;AAChC,MAAI,QAAS,QAAO,YAAY;AAChC,SAAO;AACT;AAEO,MAAM,iBAA2D,CAAC;AAAA,EACvE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAG/D,QAAM,YAAY,CAAC,QAAQ,QAAQ,KAAK;AAGxC,QAAM,kBAAkB,kBAAkB,EAAE,MAAM,OAAO,SAAS,QAAQ,CAAC;AAC3E,SACE,iCACG;AAAA,sBAAkB,oBAAC,UAAK,OAAO,aAAc,wBAAc,iBAAgB,IAAU;AAAA,IACrF,OACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH,IACE;AAAA,IACH,YACC,oBAAC,oBAAiB,IAAI,SAAS,eAA8B,wBAC1D,iBACH,IACE;AAAA,KACN;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/parts/DSRibbonCard/config/useRibbonCard.js

@@ -7,7 +7,11 @@ import { useValidateProps } from "./useValidateProps.js";
 const useRibbonCard = (propsFromUser) => {
   const propsWithDefault = useMemoMergePropsWithDefault(propsFromUser, defaultProps);
   useValidateProps(propsWithDefault, DSRibbonCardPropTypesSchema);
-  const globalProps = useGetGlobalAttributes(propsWithDefault);
+  const globalAttributes = useGetGlobalAttributes(propsWithDefault);
+  const globalProps = React2.useMemo(() => {
+    const { label, value, ...rest } = globalAttributes;
+    return rest;
+  }, [globalAttributes]);
   const xstyledProps = useGetXstyledProps(propsWithDefault);
   const instanceUid = React2.useMemo(() => `ds-ribbon-card-${uid(5)}`, []);
   return React2.useMemo(

package/dist/esm/parts/DSRibbonCard/config/useRibbonCard.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSRibbonCard/config/useRibbonCard.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { uid } from 'uid';\nimport { type DSRibbonCardT, DSRibbonCardPropTypesSchema, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport const useRibbonCard = (propsFromUser: DSRibbonCardT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSRibbonCardT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSRibbonCardPropTypesSchema);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalProps = useGetGlobalAttributes<DSRibbonCardT.InternalProps, HTMLDivElement>(propsWithDefault);\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const instanceUid = React.useMemo(() => `ds-ribbon-card-${uid(5)}`, []);\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      globalProps,\n      instanceUid,\n      // ...eventHandlers,\n    }),\n    [\n      propsWithDefault,\n      xstyledProps,\n      globalProps,\n      instanceUid,\n      // eventHandlers,\n    ],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,wBAAwB,oBAAoB,oCAAoC;AACzF,OAAOA,YAAW;AAClB,SAAS,WAAW;AACpB,SAA6B,6BAA6B,oBAAoB;AAC9E,SAAS,wBAAwB;AAE1B,MAAM,gBAAgB,CAAC,kBAAuC;AAInE,QAAM,mBAAmB,6BAA0D,eAAe,YAAY;AAC9G,mBAAiB,kBAAkB,2BAA2B;AAI9D,QAAM,cAAc,uBAAoE,gBAAgB;AACxG,QAAM,eAAe,mBAAmB,gBAAgB;AAMxD,QAAM,cAAcA,OAAM,QAAQ,MAAM,kBAAkB,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAOtE,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { uid } from 'uid';\nimport { type DSRibbonCardT, DSRibbonCardPropTypesSchema, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport const useRibbonCard = (propsFromUser: DSRibbonCardT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSRibbonCardT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSRibbonCardPropTypesSchema);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalAttributes = useGetGlobalAttributes<DSRibbonCardT.InternalProps, HTMLDivElement>(propsWithDefault);\n  // `label` and `value` are this card's own API props, rendered as text. Both are also keys in the\n  // `globalAttributes` registry the helper matches against, so it forwards them to the div, where\n  // neither is valid.\n  const globalProps = React.useMemo(() => {\n    const { label, value, ...rest } = globalAttributes;\n    return rest;\n  }, [globalAttributes]);\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const instanceUid = React.useMemo(() => `ds-ribbon-card-${uid(5)}`, []);\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      globalProps,\n      instanceUid,\n      // ...eventHandlers,\n    }),\n    [\n      propsWithDefault,\n      xstyledProps,\n      globalProps,\n      instanceUid,\n      // eventHandlers,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,wBAAwB,oBAAoB,oCAAoC;AACzF,OAAOA,YAAW;AAClB,SAAS,WAAW;AACpB,SAA6B,6BAA6B,oBAAoB;AAC9E,SAAS,wBAAwB;AAE1B,MAAM,gBAAgB,CAAC,kBAAuC;AAInE,QAAM,mBAAmB,6BAA0D,eAAe,YAAY;AAC9G,mBAAiB,kBAAkB,2BAA2B;AAI9D,QAAM,mBAAmB,uBAAoE,gBAAgB;AAI7G,QAAM,cAAcA,OAAM,QAAQ,MAAM;AACtC,UAAM,EAAE,OAAO,OAAO,GAAG,KAAK,IAAI;AAClC,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,CAAC;AACrB,QAAM,eAAe,mBAAmB,gBAAgB;AAMxD,QAAM,cAAcA,OAAM,QAAQ,MAAM,kBAAkB,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAOtE,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,EACF;AACF;",
   "names": ["React"]
 }

package/dist/esm/parts/DSRibbonCard/react-desc-prop-types.js

@@ -17,6 +17,7 @@ const defaultProps = {
   error: false,
   warning: false,
   success: false,
+  statusText: "",
   center: false
 };
 const DSRibbonCardPropTypes = {
@@ -33,6 +34,7 @@ const DSRibbonCardPropTypes = {
   error: PropTypes.bool.description("error state toggle").defaultValue("false"),
   warning: PropTypes.bool.description("warning state toggle").defaultValue("false"),
   success: PropTypes.bool.description("success state toggle").defaultValue("false"),
+  statusText: PropTypes.string.description("overrides the text announced to assistive technology for the active status prop").defaultValue("''"),
   center: PropTypes.bool.description("align center").defaultValue("false")
 };
 const DSRibbonCardPropTypesSchema = DSRibbonCardPropTypes;

package/dist/esm/parts/DSRibbonCard/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSRibbonCard/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSRibbonName, RIBBON_CARD_SLOTS } from './constants/index.js';\n\nexport declare namespace DSRibbonCardT {\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    icon: React.ReactElement | null;\n    label: string;\n    value: string;\n    additionalValue: string;\n    additionalLabel: string;\n    info: boolean;\n    error: boolean;\n    warning: boolean;\n    success: boolean;\n    center: boolean;\n  }\n\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSRibbonName,\n    typeof RIBBON_CARD_SLOTS\n  > {}\n\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSRibbonCardT.DefaultProps = {\n  containerProps: {},\n  icon: null,\n  label: '',\n  value: '',\n  additionalValue: '',\n  additionalLabel: '',\n  info: false,\n  error: false,\n  warning: false,\n  success: false,\n  center: false,\n};\n\nexport const DSRibbonCardPropTypes: DSPropTypesSchema<DSRibbonCardT.Props> = {\n  ...getPropsPerSlotPropTypes(DSRibbonName, RIBBON_CARD_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  containerProps: PropTypes.object.description('props to inject to wrapper').defaultValue('{}'),\n  icon: PropTypes.element.description('icon for ribbon card').defaultValue('null'),\n  label: PropTypes.string.description('label for ribbon card').defaultValue(\"''\"),\n  value: PropTypes.string.description('value for ribbon').defaultValue(\"''\"),\n  additionalValue: PropTypes.string.description('additional value').defaultValue(\"''\"),\n  additionalLabel: PropTypes.string.description('additional label').defaultValue(\"''\"),\n  info: PropTypes.bool.description('for main label').defaultValue('false'),\n  error: PropTypes.bool.description('error state toggle').defaultValue('false'),\n  warning: PropTypes.bool.description('warning state toggle').defaultValue('false'),\n  success: PropTypes.bool.description('success state toggle').defaultValue('false'),\n  center: PropTypes.bool.description('align center').defaultValue('false'),\n};\n\nexport const DSRibbonCardPropTypesSchema = DSRibbonCardPropTypes as unknown as ValidationMap<DSRibbonCardT.Props>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc,yBAAyB;AAyCzC,MAAM,eAA2C;AAAA,EACtD,gBAAgB,CAAC;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAEO,MAAM,wBAAgE;AAAA,EAC3E,GAAG,yBAAyB,cAAc,iBAAiB;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,gBAAgB,UAAU,OAAO,YAAY,4BAA4B,EAAE,aAAa,IAAI;AAAA,EAC5F,MAAM,UAAU,QAAQ,YAAY,sBAAsB,EAAE,aAAa,MAAM;AAAA,EAC/E,OAAO,UAAU,OAAO,YAAY,uBAAuB,EAAE,aAAa,IAAI;AAAA,EAC9E,OAAO,UAAU,OAAO,YAAY,kBAAkB,EAAE,aAAa,IAAI;AAAA,EACzE,iBAAiB,UAAU,OAAO,YAAY,kBAAkB,EAAE,aAAa,IAAI;AAAA,EACnF,iBAAiB,UAAU,OAAO,YAAY,kBAAkB,EAAE,aAAa,IAAI;AAAA,EACnF,MAAM,UAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,OAAO;AAAA,EACvE,OAAO,UAAU,KAAK,YAAY,oBAAoB,EAAE,aAAa,OAAO;AAAA,EAC5E,SAAS,UAAU,KAAK,YAAY,sBAAsB,EAAE,aAAa,OAAO;AAAA,EAChF,SAAS,UAAU,KAAK,YAAY,sBAAsB,EAAE,aAAa,OAAO;AAAA,EAChF,QAAQ,UAAU,KAAK,YAAY,cAAc,EAAE,aAAa,OAAO;AACzE;AAEO,MAAM,8BAA8B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSRibbonName, RIBBON_CARD_SLOTS } from './constants/index.js';\n\nexport declare namespace DSRibbonCardT {\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    icon: React.ReactElement | null;\n    label: string;\n    value: string;\n    additionalValue: string;\n    additionalLabel: string;\n    info: boolean;\n    error: boolean;\n    warning: boolean;\n    success: boolean;\n    statusText: string;\n    center: boolean;\n  }\n\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSRibbonName,\n    typeof RIBBON_CARD_SLOTS\n  > {}\n\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSRibbonCardT.DefaultProps = {\n  containerProps: {},\n  icon: null,\n  label: '',\n  value: '',\n  additionalValue: '',\n  additionalLabel: '',\n  info: false,\n  error: false,\n  warning: false,\n  success: false,\n  statusText: '',\n  center: false,\n};\n\nexport const DSRibbonCardPropTypes: DSPropTypesSchema<DSRibbonCardT.Props> = {\n  ...getPropsPerSlotPropTypes(DSRibbonName, RIBBON_CARD_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  containerProps: PropTypes.object.description('props to inject to wrapper').defaultValue('{}'),\n  icon: PropTypes.element.description('icon for ribbon card').defaultValue('null'),\n  label: PropTypes.string.description('label for ribbon card').defaultValue(\"''\"),\n  value: PropTypes.string.description('value for ribbon').defaultValue(\"''\"),\n  additionalValue: PropTypes.string.description('additional value').defaultValue(\"''\"),\n  additionalLabel: PropTypes.string.description('additional label').defaultValue(\"''\"),\n  info: PropTypes.bool.description('for main label').defaultValue('false'),\n  error: PropTypes.bool.description('error state toggle').defaultValue('false'),\n  warning: PropTypes.bool.description('warning state toggle').defaultValue('false'),\n  success: PropTypes.bool.description('success state toggle').defaultValue('false'),\n  statusText: PropTypes.string\n    .description('overrides the text announced to assistive technology for the active status prop')\n    .defaultValue(\"''\"),\n  center: PropTypes.bool.description('align center').defaultValue('false'),\n};\n\nexport const DSRibbonCardPropTypesSchema = DSRibbonCardPropTypes as unknown as ValidationMap<DSRibbonCardT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc,yBAAyB;AA0CzC,MAAM,eAA2C;AAAA,EACtD,gBAAgB,CAAC;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,QAAQ;AACV;AAEO,MAAM,wBAAgE;AAAA,EAC3E,GAAG,yBAAyB,cAAc,iBAAiB;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,gBAAgB,UAAU,OAAO,YAAY,4BAA4B,EAAE,aAAa,IAAI;AAAA,EAC5F,MAAM,UAAU,QAAQ,YAAY,sBAAsB,EAAE,aAAa,MAAM;AAAA,EAC/E,OAAO,UAAU,OAAO,YAAY,uBAAuB,EAAE,aAAa,IAAI;AAAA,EAC9E,OAAO,UAAU,OAAO,YAAY,kBAAkB,EAAE,aAAa,IAAI;AAAA,EACzE,iBAAiB,UAAU,OAAO,YAAY,kBAAkB,EAAE,aAAa,IAAI;AAAA,EACnF,iBAAiB,UAAU,OAAO,YAAY,kBAAkB,EAAE,aAAa,IAAI;AAAA,EACnF,MAAM,UAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,OAAO;AAAA,EACvE,OAAO,UAAU,KAAK,YAAY,oBAAoB,EAAE,aAAa,OAAO;AAAA,EAC5E,SAAS,UAAU,KAAK,YAAY,sBAAsB,EAAE,aAAa,OAAO;AAAA,EAChF,SAAS,UAAU,KAAK,YAAY,sBAAsB,EAAE,aAAa,OAAO;AAAA,EAChF,YAAY,UAAU,OACnB,YAAY,iFAAiF,EAC7F,aAAa,IAAI;AAAA,EACpB,QAAQ,UAAU,KAAK,YAAY,cAAc,EAAE,aAAa,OAAO;AACzE;AAEO,MAAM,8BAA8B;",
   "names": []
 }

package/dist/esm/parts/DSRibbonCard/styled.js

@@ -9,12 +9,12 @@ const StyledBlockIcon = styled("div", {
   padding-top: 0.1rem;
   svg,
   svg:not([fill]) {
-    fill: ${(props) => {
-  if (props.info) return "#1e79c2";
-  if (props.error) return "#E34256";
-  if (props.warning) return "#FBB431";
-  if (props.success) return "#32B87C";
-  return "#1e79c2";
+    fill: ${({ theme: { colors }, info, error, warning, success }) => {
+  if (info) return colors.brand[600];
+  if (error) return colors.danger[900];
+  if (warning) return colors.warning[900];
+  if (success) return colors.success[900];
+  return colors.brand[600];
 }};
   }
 

package/dist/esm/parts/DSRibbonCard/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSRibbonCard/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSRibbonName, RIBBON_CARD_SLOTS } from './constants/index.js';\nimport { type DSRibbonCardT } from './react-desc-prop-types.js';\n\ntype StyledBlockIconProps = {\n  info?: DSRibbonCardT.Props['info'];\n  error?: DSRibbonCardT.Props['error'];\n  warning?: DSRibbonCardT.Props['warning'];\n  success?: DSRibbonCardT.Props['success'];\n};\nexport const StyledBlockIcon = styled('div', {\n  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_ICON,\n  name: DSRibbonName,\n})<StyledBlockIconProps>`\n  padding-right: 0.5rem;\n  padding-top: 0.1rem;\n  svg,\n  svg:not([fill]) {\n    fill: ${(props) => {\n      if (props.info) return '#1e79c2';\n      if (props.error) return '#E34256';\n      if (props.warning) return '#FBB431';\n      if (props.success) return '#32B87C';\n      return '#1e79c2';\n    }};\n  }\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledBlockLabel = styled('div', {\n  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_LABEL,\n  name: DSRibbonName,\n})`\n  padding: 0.25rem 0.5rem;\n  color: #697489;\n  font-size: 0.9rem;\n  line-height: 1.2rem;\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledBlockValue = styled('div', {\n  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_VALUE,\n  name: DSRibbonName,\n})`\n  flex: 2;\n  font-weight: 600;\n  padding: 0.25rem 0.5rem 0.25rem 0rem;\n  font-size: 1.1rem;\n  color: #333333;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledBlockValueLabel = styled('div', {\n  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_VALUE_LABEL,\n  name: DSRibbonName,\n})`\n  flex: 2;\n  padding: 0.25rem 0.5rem 0.25rem 0rem;\n  font-size: 0.9rem;\n  color: #697489;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n\n  ${xStyledCommonProps}\n`;\ntype StyledColProps = {\n  center?: DSRibbonCardT.Props['center'];\n};\nexport const StyledBlockCol = styled('div', {\n  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_COL,\n  name: DSRibbonName,\n})<StyledColProps>`\n  display: flex;\n  flex-direction: column;\n  flex: 2;\n  flex-wrap: nowrap;\n  align-items: ${(props) => {\n    if (props.center) return 'center';\n    return '';\n  }};\n  height: 100%;\n\n  ${xStyledCommonProps}\n`;\ntype StyledRowProps = {\n  center?: DSRibbonCardT.Props['center'];\n};\nexport const StyledBlockRow = styled('div', {\n  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_ROW,\n  name: DSRibbonName,\n})<StyledRowProps>`\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  flex: 1;\n  height: 100%;\n  align-items: ${(props) => {\n    if (props.center) return 'center';\n    return '';\n  }};\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledBlock = styled('div', { slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK, name: DSRibbonName })`\n  flex: 1;\n  height: 100%;\n\n  ${xStyledCommonProps}\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,cAAc,yBAAyB;AASzC,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM,kBAAkB;AAAA,EACxB,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,YAKW,CAAC,UAAU;AACjB,MAAI,MAAM,KAAM,QAAO;AACvB,MAAI,MAAM,MAAO,QAAO;AACxB,MAAI,MAAM,QAAS,QAAO;AAC1B,MAAI,MAAM,QAAS,QAAO;AAC1B,SAAO;AACT,CAAC;AAAA;AAAA;AAAA,IAGD,kBAAkB;AAAA;AAGf,MAAM,mBAAmB,OAAO,OAAO;AAAA,EAC5C,MAAM,kBAAkB;AAAA,EACxB,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMG,kBAAkB;AAAA;AAGf,MAAM,mBAAmB,OAAO,OAAO;AAAA,EAC5C,MAAM,kBAAkB;AAAA,EACxB,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASG,kBAAkB;AAAA;AAGf,MAAM,wBAAwB,OAAO,OAAO;AAAA,EACjD,MAAM,kBAAkB;AAAA,EACxB,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQG,kBAAkB;AAAA;AAKf,MAAM,iBAAiB,OAAO,OAAO;AAAA,EAC1C,MAAM,kBAAkB;AAAA,EACxB,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKgB,CAAC,UAAU;AACxB,MAAI,MAAM,OAAQ,QAAO;AACzB,SAAO;AACT,CAAC;AAAA;AAAA;AAAA,IAGC,kBAAkB;AAAA;AAKf,MAAM,iBAAiB,OAAO,OAAO;AAAA,EAC1C,MAAM,kBAAkB;AAAA,EACxB,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAMgB,CAAC,UAAU;AACxB,MAAI,MAAM,OAAQ,QAAO;AACzB,SAAO;AACT,CAAC;AAAA;AAAA,IAEC,kBAAkB;AAAA;AAGf,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,kBAAkB,mBAAmB,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA,IAItG,kBAAkB;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSRibbonName, RIBBON_CARD_SLOTS } from './constants/index.js';\nimport { type DSRibbonCardT } from './react-desc-prop-types.js';\n\ntype StyledBlockIconProps = {\n  info?: DSRibbonCardT.Props['info'];\n  error?: DSRibbonCardT.Props['error'];\n  warning?: DSRibbonCardT.Props['warning'];\n  success?: DSRibbonCardT.Props['success'];\n};\nexport const StyledBlockIcon = styled('div', {\n  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_ICON,\n  name: DSRibbonName,\n})<StyledBlockIconProps>`\n  padding-right: 0.5rem;\n  padding-top: 0.1rem;\n  svg,\n  svg:not([fill]) {\n    fill: ${({ theme: { colors }, info, error, warning, success }) => {\n      if (info) return colors.brand[600];\n      if (error) return colors.danger[900];\n      if (warning) return colors.warning[900];\n      if (success) return colors.success[900];\n      return colors.brand[600];\n    }};\n  }\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledBlockLabel = styled('div', {\n  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_LABEL,\n  name: DSRibbonName,\n})`\n  padding: 0.25rem 0.5rem;\n  color: #697489;\n  font-size: 0.9rem;\n  line-height: 1.2rem;\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledBlockValue = styled('div', {\n  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_VALUE,\n  name: DSRibbonName,\n})`\n  flex: 2;\n  font-weight: 600;\n  padding: 0.25rem 0.5rem 0.25rem 0rem;\n  font-size: 1.1rem;\n  color: #333333;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledBlockValueLabel = styled('div', {\n  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_VALUE_LABEL,\n  name: DSRibbonName,\n})`\n  flex: 2;\n  padding: 0.25rem 0.5rem 0.25rem 0rem;\n  font-size: 0.9rem;\n  color: #697489;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n\n  ${xStyledCommonProps}\n`;\ntype StyledColProps = {\n  center?: DSRibbonCardT.Props['center'];\n};\nexport const StyledBlockCol = styled('div', {\n  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_COL,\n  name: DSRibbonName,\n})<StyledColProps>`\n  display: flex;\n  flex-direction: column;\n  flex: 2;\n  flex-wrap: nowrap;\n  align-items: ${(props) => {\n    if (props.center) return 'center';\n    return '';\n  }};\n  height: 100%;\n\n  ${xStyledCommonProps}\n`;\ntype StyledRowProps = {\n  center?: DSRibbonCardT.Props['center'];\n};\nexport const StyledBlockRow = styled('div', {\n  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_ROW,\n  name: DSRibbonName,\n})<StyledRowProps>`\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  flex: 1;\n  height: 100%;\n  align-items: ${(props) => {\n    if (props.center) return 'center';\n    return '';\n  }};\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledBlock = styled('div', { slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK, name: DSRibbonName })`\n  flex: 1;\n  height: 100%;\n\n  ${xStyledCommonProps}\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,cAAc,yBAAyB;AASzC,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM,kBAAkB;AAAA,EACxB,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,YAKW,CAAC,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,OAAO,SAAS,QAAQ,MAAM;AAChE,MAAI,KAAM,QAAO,OAAO,MAAM,GAAG;AACjC,MAAI,MAAO,QAAO,OAAO,OAAO,GAAG;AACnC,MAAI,QAAS,QAAO,OAAO,QAAQ,GAAG;AACtC,MAAI,QAAS,QAAO,OAAO,QAAQ,GAAG;AACtC,SAAO,OAAO,MAAM,GAAG;AACzB,CAAC;AAAA;AAAA;AAAA,IAGD,kBAAkB;AAAA;AAGf,MAAM,mBAAmB,OAAO,OAAO;AAAA,EAC5C,MAAM,kBAAkB;AAAA,EACxB,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMG,kBAAkB;AAAA;AAGf,MAAM,mBAAmB,OAAO,OAAO;AAAA,EAC5C,MAAM,kBAAkB;AAAA,EACxB,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASG,kBAAkB;AAAA;AAGf,MAAM,wBAAwB,OAAO,OAAO;AAAA,EACjD,MAAM,kBAAkB;AAAA,EACxB,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQG,kBAAkB;AAAA;AAKf,MAAM,iBAAiB,OAAO,OAAO;AAAA,EAC1C,MAAM,kBAAkB;AAAA,EACxB,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKgB,CAAC,UAAU;AACxB,MAAI,MAAM,OAAQ,QAAO;AACzB,SAAO;AACT,CAAC;AAAA;AAAA;AAAA,IAGC,kBAAkB;AAAA;AAKf,MAAM,iBAAiB,OAAO,OAAO;AAAA,EAC1C,MAAM,kBAAkB;AAAA,EACxB,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAMgB,CAAC,UAAU;AACxB,MAAI,MAAM,OAAQ,QAAO;AACzB,SAAO;AACT,CAAC;AAAA;AAAA,IAEC,kBAAkB;AAAA;AAGf,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,kBAAkB,mBAAmB,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA,IAItG,kBAAkB;AAAA;",
   "names": []
 }

package/dist/esm/parts/DSRibbonRow/DSRibbonRow.js

@@ -1,11 +1,18 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { describe } from "@elliemae/ds-props-helpers";
-import { styled, xStyledCommonProps } from "@elliemae/ds-system";
+import { css, styled, xStyledCommonProps } from "@elliemae/ds-system";
 import React2 from "react";
 import { useRibbonRow } from "./config/useRibbonRow.js";
 import { DSRibbonName, RIBBON_ROW_SLOTS } from "./constants/index.js";
 import { DSRibbonRowPropTypesSchema } from "./react-desc-prop-types.js";
+const wrapColumnsStyles = css`
+  flex-wrap: wrap;
+`;
+const scrollColumnsStyles = css`
+  flex-wrap: nowrap;
+  overflow-x: auto;
+`;
 const StyledFlexRow = styled("div", {
   name: DSRibbonName,
   slot: RIBBON_ROW_SLOTS.RIBBON_ROW
@@ -19,8 +26,7 @@ const StyledFlexRow = styled("div", {
     height: 5rem;
     overflow-y: hidden;
   }
-  flex-wrap: nowrap;
-  overflow-x: auto;
+  ${({ $wrapColumns }) => $wrapColumns ? wrapColumnsStyles : scrollColumnsStyles};
   ${(props) => {
   if (props.$alignLeft) {
     return `
@@ -55,7 +61,7 @@ const StyledFlexRow = styled("div", {
 `;
 const DSRibbonRow = (props) => {
   const { propsWithDefault, xstyledProps, globalProps } = useRibbonRow(props);
-  const { children, solid, alignLeft } = propsWithDefault;
+  const { children, solid, alignLeft, wrapColumns } = propsWithDefault;
   const getOwnerProps = React2.useCallback(() => propsWithDefault, [propsWithDefault]);
   const getOwnerPropsArguments = React2.useCallback(() => ({}), []);
   return /* @__PURE__ */ jsx(
@@ -65,6 +71,7 @@ const DSRibbonRow = (props) => {
       ...xstyledProps,
       $alignLeft: alignLeft,
       $solid: solid,
+      $wrapColumns: wrapColumns,
       getOwnerProps,
       getOwnerPropsArguments,
       children

package/dist/esm/parts/DSRibbonRow/DSRibbonRow.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSRibbonRow/DSRibbonRow.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe } from '@elliemae/ds-props-helpers';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport React from 'react';\nimport { useRibbonRow } from './config/useRibbonRow.js';\nimport { DSRibbonName, RIBBON_ROW_SLOTS } from './constants/index.js';\nimport { type DSRibbonRowT, DSRibbonRowPropTypesSchema } from './react-desc-prop-types.js';\n\ntype StyledFlexRowProps = {\n  $alignLeft: DSRibbonRowT.Props['alignLeft'];\n  $solid: DSRibbonRowT.Props['solid'];\n};\nconst StyledFlexRow = styled('div', {\n  name: DSRibbonName,\n  slot: RIBBON_ROW_SLOTS.RIBBON_ROW,\n})<StyledFlexRowProps>`\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  min-height: 4rem;\n  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n    height: 5rem;\n    overflow-y: hidden;\n  }\n  flex-wrap: nowrap;\n  overflow-x: auto;\n  ${(props) => {\n    if (props.$alignLeft) {\n      return `\n      align-items: stretch;\n      & > .DSRibbon-ribbon-col {\n        align-items: flex-start;\n        align-self: stretch;    \n        flex: 0;\n        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n          flex: 1;\n        }\n      `;\n    }\n    return `\n        align-items: center;\n    `;\n  }};\n  ${(props) => {\n    if (props.$solid) {\n      return `\n      & > .DSRibbon-ribbon-col {\n        &:after{\n          top: 0%;\n          height: 100%;\n          border-right: solid 1px #CBCFD7;\n        }\n      `;\n    }\n    return '';\n  }};\n  ${xStyledCommonProps}\n`;\n\nconst DSRibbonRow: React.ComponentType<DSRibbonRowT.Props> = (props) => {\n  const { propsWithDefault, xstyledProps, globalProps } = useRibbonRow(props);\n  const { children, solid, alignLeft } = propsWithDefault;\n  const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n  return (\n    <StyledFlexRow\n      {...globalProps}\n      {...xstyledProps}\n      $alignLeft={alignLeft}\n      $solid={solid}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      {children}\n    </StyledFlexRow>\n  );\n};\n\nDSRibbonRow.displayName = 'DSRibbonRow';\nconst DSRibbonRowWithSchema = describe(DSRibbonRow);\nDSRibbonRowWithSchema.propTypes = DSRibbonRowPropTypesSchema;\n\nexport { DSRibbonRow, DSRibbonRowWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACkEnB;AAlEJ,SAAS,gBAAgB;AACzB,SAAS,QAAQ,0BAA0B;AAC3C,OAAOA,YAAW;AAClB,SAAS,oBAAoB;AAC7B,SAAS,cAAc,wBAAwB;AAC/C,SAA4B,kCAAkC;AAM9D,MAAM,gBAAgB,OAAO,OAAO;AAAA,EAClC,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYG,CAAC,UAAU;AACX,MAAI,MAAM,YAAY;AACpB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUT;AACA,SAAO;AAAA;AAAA;AAGT,CAAC;AAAA,IACC,CAAC,UAAU;AACX,MAAI,MAAM,QAAQ;AAChB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQT;AACA,SAAO;AACT,CAAC;AAAA,IACC,kBAAkB;AAAA;AAGtB,MAAM,cAAuD,CAAC,UAAU;AACtE,QAAM,EAAE,kBAAkB,cAAc,YAAY,IAAI,aAAa,KAAK;AAC1E,QAAM,EAAE,UAAU,OAAO,UAAU,IAAI;AACvC,QAAM,gBAAgBA,OAAM,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAClF,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW;AAClD,sBAAsB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe } from '@elliemae/ds-props-helpers';\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport React from 'react';\nimport { useRibbonRow } from './config/useRibbonRow.js';\nimport { DSRibbonName, RIBBON_ROW_SLOTS } from './constants/index.js';\nimport { type DSRibbonRowT, DSRibbonRowPropTypesSchema } from './react-desc-prop-types.js';\n\nconst wrapColumnsStyles = css`\n  flex-wrap: wrap;\n`;\nconst scrollColumnsStyles = css`\n  flex-wrap: nowrap;\n  overflow-x: auto;\n`;\n\ntype StyledFlexRowProps = {\n  $alignLeft: DSRibbonRowT.Props['alignLeft'];\n  $solid: DSRibbonRowT.Props['solid'];\n  $wrapColumns: DSRibbonRowT.Props['wrapColumns'];\n};\nconst StyledFlexRow = styled('div', {\n  name: DSRibbonName,\n  slot: RIBBON_ROW_SLOTS.RIBBON_ROW,\n})<StyledFlexRowProps>`\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  min-height: 4rem;\n  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n    height: 5rem;\n    overflow-y: hidden;\n  }\n  ${({ $wrapColumns }) => ($wrapColumns ? wrapColumnsStyles : scrollColumnsStyles)};\n  ${(props) => {\n    if (props.$alignLeft) {\n      return `\n      align-items: stretch;\n      & > .DSRibbon-ribbon-col {\n        align-items: flex-start;\n        align-self: stretch;    \n        flex: 0;\n        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n          flex: 1;\n        }\n      `;\n    }\n    return `\n        align-items: center;\n    `;\n  }};\n  ${(props) => {\n    if (props.$solid) {\n      return `\n      & > .DSRibbon-ribbon-col {\n        &:after{\n          top: 0%;\n          height: 100%;\n          border-right: solid 1px #CBCFD7;\n        }\n      `;\n    }\n    return '';\n  }};\n  ${xStyledCommonProps}\n`;\n\nconst DSRibbonRow: React.ComponentType<DSRibbonRowT.Props> = (props) => {\n  const { propsWithDefault, xstyledProps, globalProps } = useRibbonRow(props);\n  const { children, solid, alignLeft, wrapColumns } = propsWithDefault;\n  const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n  return (\n    <StyledFlexRow\n      {...globalProps}\n      {...xstyledProps}\n      $alignLeft={alignLeft}\n      $solid={solid}\n      $wrapColumns={wrapColumns}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      {children}\n    </StyledFlexRow>\n  );\n};\n\nDSRibbonRow.displayName = 'DSRibbonRow';\nconst DSRibbonRowWithSchema = describe(DSRibbonRow);\nDSRibbonRowWithSchema.propTypes = DSRibbonRowPropTypesSchema;\n\nexport { DSRibbonRow, DSRibbonRowWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC0EnB;AA1EJ,SAAS,gBAAgB;AACzB,SAAS,KAAK,QAAQ,0BAA0B;AAChD,OAAOA,YAAW;AAClB,SAAS,oBAAoB;AAC7B,SAAS,cAAc,wBAAwB;AAC/C,SAA4B,kCAAkC;AAE9D,MAAM,oBAAoB;AAAA;AAAA;AAG1B,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAU5B,MAAM,gBAAgB,OAAO,OAAO;AAAA,EAClC,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUG,CAAC,EAAE,aAAa,MAAO,eAAe,oBAAoB,mBAAoB;AAAA,IAC9E,CAAC,UAAU;AACX,MAAI,MAAM,YAAY;AACpB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUT;AACA,SAAO;AAAA;AAAA;AAGT,CAAC;AAAA,IACC,CAAC,UAAU;AACX,MAAI,MAAM,QAAQ;AAChB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQT;AACA,SAAO;AACT,CAAC;AAAA,IACC,kBAAkB;AAAA;AAGtB,MAAM,cAAuD,CAAC,UAAU;AACtE,QAAM,EAAE,kBAAkB,cAAc,YAAY,IAAI,aAAa,KAAK;AAC1E,QAAM,EAAE,UAAU,OAAO,WAAW,YAAY,IAAI;AACpD,QAAM,gBAAgBA,OAAM,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAClF,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW;AAClD,sBAAsB,YAAY;",
   "names": ["React"]
 }

package/dist/esm/parts/DSRibbonRow/react-desc-prop-types.js

@@ -8,7 +8,8 @@ import {
 import { DSRibbonName, RIBBON_ROW_SLOTS } from "./constants/index.js";
 const defaultProps = {
   alignLeft: false,
-  solid: false
+  solid: false,
+  wrapColumns: false
 };
 const DSRibbonRowPropTypes = {
   ...getPropsPerSlotPropTypes(DSRibbonName, RIBBON_ROW_SLOTS),
@@ -17,7 +18,10 @@ const DSRibbonRowPropTypes = {
   alignLeft: PropTypes.bool.description(
     "If true, the content will be aligned to the left and the row will stretch to fill the height of the tallest column."
   ),
-  solid: PropTypes.bool.description("If true, the dashed border between columns will be solid.")
+  solid: PropTypes.bool.description("If true, the dashed border between columns will be solid."),
+  wrapColumns: PropTypes.bool.description(
+    "If true, the columns wrap onto the next line instead of scrolling horizontally when they no longer fit."
+  ).defaultValue("false")
 };
 const DSRibbonRowPropTypesSchema = DSRibbonRowPropTypes;
 export {

package/dist/esm/parts/DSRibbonRow/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSRibbonRow/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSRibbonName, RIBBON_ROW_SLOTS } from './constants/index.js';\n\nexport declare namespace DSRibbonRowT {\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    alignLeft: boolean;\n    solid: boolean;\n  }\n\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSRibbonName,\n    typeof RIBBON_ROW_SLOTS\n  > {}\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSRibbonRowT.DefaultProps = {\n  alignLeft: false,\n  solid: false,\n};\n\nexport const DSRibbonRowPropTypes: DSPropTypesSchema<DSRibbonRowT.Props> = {\n  ...getPropsPerSlotPropTypes(DSRibbonName, RIBBON_ROW_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  alignLeft: PropTypes.bool.description(\n    'If true, the content will be aligned to the left and the row will stretch to fill the height of the tallest column.',\n  ),\n  solid: PropTypes.bool.description('If true, the dashed border between columns will be solid.'),\n};\n\nexport const DSRibbonRowPropTypesSchema = DSRibbonRowPropTypes as unknown as ValidationMap<DSRibbonRowT.Props>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc,wBAAwB;AA+BxC,MAAM,eAA0C;AAAA,EACrD,WAAW;AAAA,EACX,OAAO;AACT;AAEO,MAAM,uBAA8D;AAAA,EACzE,GAAG,yBAAyB,cAAc,gBAAgB;AAAA,EAC1D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,WAAW,UAAU,KAAK;AAAA,IACxB;AAAA,EACF;AAAA,EACA,OAAO,UAAU,KAAK,YAAY,2DAA2D;AAC/F;AAEO,MAAM,6BAA6B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSRibbonName, RIBBON_ROW_SLOTS } from './constants/index.js';\n\nexport declare namespace DSRibbonRowT {\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    alignLeft: boolean;\n    solid: boolean;\n    wrapColumns: boolean;\n  }\n\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSRibbonName,\n    typeof RIBBON_ROW_SLOTS\n  > {}\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSRibbonRowT.DefaultProps = {\n  alignLeft: false,\n  solid: false,\n  wrapColumns: false,\n};\n\nexport const DSRibbonRowPropTypes: DSPropTypesSchema<DSRibbonRowT.Props> = {\n  ...getPropsPerSlotPropTypes(DSRibbonName, RIBBON_ROW_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  alignLeft: PropTypes.bool.description(\n    'If true, the content will be aligned to the left and the row will stretch to fill the height of the tallest column.',\n  ),\n  solid: PropTypes.bool.description('If true, the dashed border between columns will be solid.'),\n  wrapColumns: PropTypes.bool\n    .description(\n      'If true, the columns wrap onto the next line instead of scrolling horizontally when they no longer fit.',\n    )\n    .defaultValue('false'),\n};\n\nexport const DSRibbonRowPropTypesSchema = DSRibbonRowPropTypes as unknown as ValidationMap<DSRibbonRowT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc,wBAAwB;AAgCxC,MAAM,eAA0C;AAAA,EACrD,WAAW;AAAA,EACX,OAAO;AAAA,EACP,aAAa;AACf;AAEO,MAAM,uBAA8D;AAAA,EACzE,GAAG,yBAAyB,cAAc,gBAAgB;AAAA,EAC1D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,WAAW,UAAU,KAAK;AAAA,IACxB;AAAA,EACF;AAAA,EACA,OAAO,UAAU,KAAK,YAAY,2DAA2D;AAAA,EAC7F,aAAa,UAAU,KACpB;AAAA,IACC;AAAA,EACF,EACC,aAAa,OAAO;AACzB;AAEO,MAAM,6BAA6B;",
   "names": []
 }

package/dist/types/parts/DSRibbonCard/PureLabelPlace.d.ts

@@ -4,9 +4,11 @@ export declare const PureLabelPlace: React.ComponentType<PureLabelPlaceProps>;
 type PureLabelPlaceProps = {
     icon?: DSRibbonCardT.Props['icon'];
     label?: DSRibbonCardT.Props['label'];
+    labelId?: string;
     error?: DSRibbonCardT.Props['error'];
     info?: DSRibbonCardT.Props['info'];
     success?: DSRibbonCardT.Props['success'];
+    statusText?: DSRibbonCardT.Props['statusText'];
     warning?: DSRibbonCardT.Props['warning'];
     getOwnerProps: () => DSRibbonCardT.InternalProps;
 };

package/dist/types/parts/DSRibbonCard/config/useRibbonCard.d.ts

@@ -3,9 +3,7 @@ import { type DSRibbonCardT } from '../react-desc-prop-types.js';
 export declare const useRibbonCard: (propsFromUser: DSRibbonCardT.Props) => {
     propsWithDefault: DSRibbonCardT.InternalProps;
     xstyledProps: import("@elliemae/ds-props-helpers").XstyledProps;
-    globalProps: Partial<Pick<object, "label" | "value" | "form" | "list" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "width" | "wmode" | "wrap"> & Omit<{
-        label?: string | undefined | undefined;
-        value?: string | number | readonly string[] | undefined;
+    globalProps: {
         form?: string | undefined | undefined;
         list?: string | undefined | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
@@ -368,6 +366,6 @@ export declare const useRibbonCard: (propsFromUser: DSRibbonCardT.Props) => {
         width?: number | string | undefined | undefined;
         wmode?: string | undefined | undefined;
         wrap?: string | undefined | undefined;
-    }, never>>;
+    };
     instanceUid: string;
 };

package/dist/types/parts/DSRibbonCard/react-desc-prop-types.d.ts

@@ -15,6 +15,7 @@ export declare namespace DSRibbonCardT {
         error: boolean;
         warning: boolean;
         success: boolean;
+        statusText: string;
         center: boolean;
     }
     interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSRibbonName, typeof RIBBON_CARD_SLOTS> {

package/dist/types/parts/DSRibbonRow/react-desc-prop-types.d.ts

@@ -7,6 +7,7 @@ export declare namespace DSRibbonRowT {
     interface DefaultProps {
         alignLeft: boolean;
         solid: boolean;
+        wrapColumns: boolean;
     }
     interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSRibbonName, typeof RIBBON_ROW_SLOTS> {
     }