@elliemae/ds-ribbon 3.60.0-next.2 → 3.60.0-next.21

package/dist/esm/parts/DSRibbonCard/constants/index.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { slotObjectToDataTestIds } from "@elliemae/ds-system";
+import { DSRibbonName } from "../../../constants/index.js";
+const RIBBON_CARD_SLOTS = {
+  RIBBON_CARD_BLOCK_ICON: "ribbon-card-block-icon",
+  RIBBON_CARD_BLOCK_LABEL: "ribbon-card-block-label",
+  RIBBON_CARD_BLOCK_VALUE: "ribbon-card-block-value",
+  RIBBON_CARD_BLOCK_VALUE_LABEL: "ribbon-card-block-value-label",
+  RIBBON_CARD_BLOCK_COL: "ribbon-card-block-col",
+  RIBBON_CARD_BLOCK_ROW: "ribbon-card-block-row",
+  RIBBON_CARD_BLOCK: "ribbon-card-block"
+};
+const RIBBON_CARD_DATA_TESTID = slotObjectToDataTestIds(DSRibbonName, RIBBON_CARD_SLOTS);
+export {
+  DSRibbonName,
+  RIBBON_CARD_DATA_TESTID,
+  RIBBON_CARD_SLOTS
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSRibbonCard/constants/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { DSRibbonName } from '../../../constants/index.js';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const RIBBON_CARD_SLOTS = {\n  RIBBON_CARD_BLOCK_ICON: 'ribbon-card-block-icon',\n  RIBBON_CARD_BLOCK_LABEL: 'ribbon-card-block-label',\n  RIBBON_CARD_BLOCK_VALUE: 'ribbon-card-block-value',\n  RIBBON_CARD_BLOCK_VALUE_LABEL: 'ribbon-card-block-value-label',\n  RIBBON_CARD_BLOCK_COL: 'ribbon-card-block-col',\n  RIBBON_CARD_BLOCK_ROW: 'ribbon-card-block-row',\n  RIBBON_CARD_BLOCK: 'ribbon-card-block',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const RIBBON_CARD_DATA_TESTID = slotObjectToDataTestIds(DSRibbonName, RIBBON_CARD_SLOTS);\n\nexport { DSRibbonName };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AACxC,SAAS,oBAAoB;AAGtB,MAAM,oBAAoB;AAAA,EAC/B,wBAAwB;AAAA,EACxB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA,EACzB,+BAA+B;AAAA,EAC/B,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,mBAAmB;AACrB;AAGO,MAAM,0BAA0B,wBAAwB,cAAc,iBAAiB;",
+  "names": []
+}

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { RIBBON_CARD_DATA_TESTID, RIBBON_CARD_SLOTS } from "./constants/index.js";
+import { DSRibbonCard, DSRibbonCardWithSchema } from "./DSRibbonCard.js";
+export {
+  DSRibbonCard,
+  DSRibbonCardWithSchema,
+  RIBBON_CARD_DATA_TESTID,
+  RIBBON_CARD_SLOTS
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSRibbonCard/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { RIBBON_CARD_DATA_TESTID, RIBBON_CARD_SLOTS } from './constants/index.js';\nexport { DSRibbonCard, DSRibbonCardWithSchema } from './DSRibbonCard.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,yBAAyB,yBAAyB;AAC3D,SAAS,cAAc,8BAA8B;",
+  "names": []
+}

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

@@ -0,0 +1,44 @@
+import * as React from "react";
+import {
+  PropTypes,
+  getPropsPerSlotPropTypes,
+  globalAttributesPropTypes,
+  xstyledPropTypes
+} from "@elliemae/ds-props-helpers";
+import { DSRibbonName, RIBBON_CARD_SLOTS } from "./constants/index.js";
+const defaultProps = {
+  containerProps: {},
+  icon: null,
+  label: "",
+  value: "",
+  additionalValue: "",
+  additionalLabel: "",
+  info: false,
+  error: false,
+  warning: false,
+  success: false,
+  center: false
+};
+const DSRibbonCardPropTypes = {
+  ...getPropsPerSlotPropTypes(DSRibbonName, RIBBON_CARD_SLOTS),
+  ...globalAttributesPropTypes,
+  ...xstyledPropTypes,
+  containerProps: PropTypes.object.description("props to inject to wrapper").defaultValue("{}"),
+  icon: PropTypes.element.description("icon for ribbon card").defaultValue("null"),
+  label: PropTypes.string.description("label for ribbon card").defaultValue("''"),
+  value: PropTypes.string.description("value for ribbon").defaultValue("''"),
+  additionalValue: PropTypes.string.description("additional value").defaultValue("''"),
+  additionalLabel: PropTypes.string.description("additional label").defaultValue("''"),
+  info: PropTypes.bool.description("for main label").defaultValue("false"),
+  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"),
+  center: PropTypes.bool.description("align center").defaultValue("false")
+};
+const DSRibbonCardPropTypesSchema = DSRibbonCardPropTypes;
+export {
+  DSRibbonCardPropTypes,
+  DSRibbonCardPropTypesSchema,
+  defaultProps
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -0,0 +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", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport 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\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSRibbonName, typeof RIBBON_CARD_SLOTS> {}\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends 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;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc,yBAAyB;AAqCzC,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;",
+  "names": []
+}

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

@@ -0,0 +1,108 @@
+import * as React from "react";
+import { styled, xStyledCommonProps } from "@elliemae/ds-system";
+import { DSRibbonName, RIBBON_CARD_SLOTS } from "./constants/index.js";
+const StyledBlockIcon = styled("div", {
+  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_ICON,
+  name: DSRibbonName
+})`
+  padding-right: 0.5rem;
+  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";
+}};
+  }
+
+  ${xStyledCommonProps}
+`;
+const StyledBlockLabel = styled("div", {
+  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_LABEL,
+  name: DSRibbonName
+})`
+  padding: 0.25rem 0.5rem;
+  color: #697489;
+  font-size: 0.9rem;
+  line-height: 1.2rem;
+
+  ${xStyledCommonProps}
+`;
+const StyledBlockValue = styled("div", {
+  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_VALUE,
+  name: DSRibbonName
+})`
+  flex: 2;
+  font-weight: 600;
+  padding: 0.25rem 0.5rem 0.25rem 0rem;
+  font-size: 1.1rem;
+  color: #333333;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+
+  ${xStyledCommonProps}
+`;
+const StyledBlockValueLabel = styled("div", {
+  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_VALUE_LABEL,
+  name: DSRibbonName
+})`
+  flex: 2;
+  padding: 0.25rem 0.5rem 0.25rem 0rem;
+  font-size: 0.9rem;
+  color: #697489;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+
+  ${xStyledCommonProps}
+`;
+const StyledBlockCol = styled("div", {
+  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_COL,
+  name: DSRibbonName
+})`
+  display: flex;
+  flex-direction: column;
+  flex: 2;
+  flex-wrap: nowrap;
+  align-items: ${(props) => {
+  if (props.center) return "center";
+  return "";
+}};
+  height: 100%;
+
+  ${xStyledCommonProps}
+`;
+const StyledBlockRow = styled("div", {
+  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_ROW,
+  name: DSRibbonName
+})`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  flex: 1;
+  height: 100%;
+  align-items: ${(props) => {
+  if (props.center) return "center";
+  return "";
+}};
+
+  ${xStyledCommonProps}
+`;
+const StyledBlock = styled("div", { slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK, name: DSRibbonName })`
+  flex: 1;
+  height: 100%;
+
+  ${xStyledCommonProps}
+`;
+export {
+  StyledBlock,
+  StyledBlockCol,
+  StyledBlockIcon,
+  StyledBlockLabel,
+  StyledBlockRow,
+  StyledBlockValue,
+  StyledBlockValueLabel
+};
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +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;",
+  "names": []
+}

package/dist/esm/parts/DSRibbonCol/DSRibbonCol.js

@@ -0,0 +1,53 @@
+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 React2 from "react";
+import { useRibbonCol } from "./config/useRibbonCol.js";
+import { DSRibbonName, RIBBON_COL_SLOTS } from "./constants/index.js";
+import { DSRibbonColPropTypesSchema } from "./react-desc-prop-types.js";
+const StyledFlexCol = styled("div", { name: DSRibbonName, slot: RIBBON_COL_SLOTS.RIBBON_COL })`
+  display: flex;
+  flex-direction: column;
+  padding: 0.25rem 0.5rem;
+  height: 100%;
+  justify-content: center;
+  flex: 1;
+  position: relative;
+  &:after {
+    position: absolute;
+    top: 10%;
+    right: 0;
+    height: 80%;
+    content: '';
+    border-right: dashed 1px #ebedf0;
+  }
+  & > .DSRibbon-ribbon-row {
+    align-items: flex-start;
+  }
+  ${xStyledCommonProps}
+`;
+const DSRibbonCol = (props) => {
+  const { propsWithDefault, xstyledProps, globalProps } = useRibbonCol(props);
+  const { children } = propsWithDefault;
+  const getOwnerProps = React2.useCallback(() => propsWithDefault, [propsWithDefault]);
+  const getOwnerPropsArguments = React2.useCallback(() => ({}), []);
+  return /* @__PURE__ */ jsx(
+    StyledFlexCol,
+    {
+      ...globalProps,
+      ...xstyledProps,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children
+    }
+  );
+};
+DSRibbonCol.displayName = "DSRibbonCol";
+const DSRibbonColWithSchema = describe(DSRibbonCol);
+DSRibbonColWithSchema.propTypes = DSRibbonColPropTypesSchema;
+export {
+  DSRibbonCol,
+  DSRibbonColWithSchema
+};
+//# sourceMappingURL=DSRibbonCol.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSRibbonCol/DSRibbonCol.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 { useRibbonCol } from './config/useRibbonCol.js';\nimport { DSRibbonName, RIBBON_COL_SLOTS } from './constants/index.js';\nimport { type DSRibbonColT, DSRibbonColPropTypesSchema } from './react-desc-prop-types.js';\n\nconst StyledFlexCol = styled('div', { name: DSRibbonName, slot: RIBBON_COL_SLOTS.RIBBON_COL })`\n  display: flex;\n  flex-direction: column;\n  padding: 0.25rem 0.5rem;\n  height: 100%;\n  justify-content: center;\n  flex: 1;\n  position: relative;\n  &:after {\n    position: absolute;\n    top: 10%;\n    right: 0;\n    height: 80%;\n    content: '';\n    border-right: dashed 1px #ebedf0;\n  }\n  & > .DSRibbon-ribbon-row {\n    align-items: flex-start;\n  }\n  ${xStyledCommonProps}\n`;\n\nconst DSRibbonCol: React.ComponentType<DSRibbonColT.Props> = (props) => {\n  const { propsWithDefault, xstyledProps, globalProps } = useRibbonCol(props);\n  const { children } = propsWithDefault;\n  const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n  return (\n    <StyledFlexCol\n      {...globalProps}\n      {...xstyledProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      {children}\n    </StyledFlexCol>\n  );\n};\n\nDSRibbonCol.displayName = 'DSRibbonCol';\nconst DSRibbonColWithSchema = describe(DSRibbonCol);\nDSRibbonColWithSchema.propTypes = DSRibbonColPropTypesSchema;\n\nexport { DSRibbonCol, DSRibbonColWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmCnB;AAnCJ,SAAS,gBAAgB;AACzB,SAAS,QAAQ,0BAA0B;AAC3C,OAAOA,YAAW;AAClB,SAAS,oBAAoB;AAC7B,SAAS,cAAc,wBAAwB;AAC/C,SAA4B,kCAAkC;AAE9D,MAAM,gBAAgB,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,iBAAiB,WAAW,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmBzF,kBAAkB;AAAA;AAGtB,MAAM,cAAuD,CAAC,UAAU;AACtE,QAAM,EAAE,kBAAkB,cAAc,YAAY,IAAI,aAAa,KAAK;AAC1E,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM,gBAAgBA,OAAM,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAClF,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;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/DSRibbonCol/config/useRibbonCol.js

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
+import React2 from "react";
+import { uid } from "uid";
+import { DSRibbonColPropTypesSchema, defaultProps } from "../react-desc-prop-types.js";
+import { useValidateProps } from "./useValidateProps.js";
+const useRibbonCol = (propsFromUser) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(propsFromUser, defaultProps);
+  useValidateProps(propsWithDefault, DSRibbonColPropTypesSchema);
+  const globalProps = useGetGlobalAttributes(propsWithDefault);
+  const xstyledProps = useGetXstyledProps(propsWithDefault);
+  const instanceUid = React2.useMemo(() => `ds-ribbon-col-${uid(5)}`, []);
+  return React2.useMemo(
+    () => ({
+      propsWithDefault,
+      xstyledProps,
+      globalProps,
+      instanceUid
+      // ...eventHandlers,
+    }),
+    [
+      propsWithDefault,
+      xstyledProps,
+      globalProps,
+      instanceUid
+      // eventHandlers,
+    ]
+  );
+};
+export {
+  useRibbonCol
+};
+//# sourceMappingURL=useRibbonCol.js.map

package/dist/esm/parts/DSRibbonCol/config/useRibbonCol.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSRibbonCol/config/useRibbonCol.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 DSRibbonColT, DSRibbonColPropTypesSchema, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport const useRibbonCol = (propsFromUser: DSRibbonColT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSRibbonColT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSRibbonColPropTypesSchema);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalProps = useGetGlobalAttributes<DSRibbonColT.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-col-${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,SAA4B,4BAA4B,oBAAoB;AAC5E,SAAS,wBAAwB;AAE1B,MAAM,eAAe,CAAC,kBAAsC;AAIjE,QAAM,mBAAmB,6BAAyD,eAAe,YAAY;AAC7G,mBAAiB,kBAAkB,0BAA0B;AAI7D,QAAM,cAAc,uBAAmE,gBAAgB;AACvG,QAAM,eAAe,mBAAmB,gBAAgB;AAMxD,QAAM,cAAcA,OAAM,QAAQ,MAAM,iBAAiB,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAOrE,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/DSRibbonCol/config/useValidateProps.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+const useValidateProps = (props, propTypes) => {
+  useValidateTypescriptPropTypes(props, propTypes, "DSRibbonCol");
+};
+export {
+  useValidateProps
+};
+//# sourceMappingURL=useValidateProps.js.map

package/dist/esm/parts/DSRibbonCol/config/useValidateProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSRibbonCol/config/useValidateProps.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { ValidationMap } from '@elliemae/ds-props-helpers';\nimport { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { type DSRibbonColT } from '../react-desc-prop-types.js';\n\nexport const useValidateProps = (\n  props: DSRibbonColT.InternalProps,\n  propTypes: ValidationMap<DSRibbonColT.Props>,\n): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, 'DSRibbonCol');\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,sCAAsC;AAGxC,MAAM,mBAAmB,CAC9B,OACA,cACS;AAET,iCAA+B,OAAO,WAAW,aAAa;AAChE;",
+  "names": []
+}

package/dist/esm/parts/DSRibbonCol/constants/index.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { slotObjectToDataTestIds } from "@elliemae/ds-system";
+import { DSRibbonName } from "../../../constants/index.js";
+const RIBBON_COL_SLOTS = {
+  RIBBON_COL: "ribbon-col"
+};
+const RIBBON_COL_DATA_TESTID = slotObjectToDataTestIds(DSRibbonName, RIBBON_COL_SLOTS);
+export {
+  DSRibbonName,
+  RIBBON_COL_DATA_TESTID,
+  RIBBON_COL_SLOTS
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/parts/DSRibbonCol/constants/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSRibbonCol/constants/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { DSRibbonName } from '../../../constants/index.js';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const RIBBON_COL_SLOTS = {\n  RIBBON_COL: 'ribbon-col',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const RIBBON_COL_DATA_TESTID = slotObjectToDataTestIds(DSRibbonName, RIBBON_COL_SLOTS);\nexport { DSRibbonName };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AACxC,SAAS,oBAAoB;AAGtB,MAAM,mBAAmB;AAAA,EAC9B,YAAY;AACd;AAGO,MAAM,yBAAyB,wBAAwB,cAAc,gBAAgB;",
+  "names": []
+}

package/dist/esm/parts/DSRibbonCol/index.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { DSRibbonCol, DSRibbonColWithSchema } from "./DSRibbonCol.js";
+import { RIBBON_COL_SLOTS, RIBBON_COL_DATA_TESTID } from "./constants/index.js";
+export {
+  DSRibbonCol,
+  DSRibbonColWithSchema,
+  RIBBON_COL_DATA_TESTID,
+  RIBBON_COL_SLOTS
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/parts/DSRibbonCol/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSRibbonCol/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSRibbonCol, DSRibbonColWithSchema } from './DSRibbonCol.js';\nexport { RIBBON_COL_SLOTS, RIBBON_COL_DATA_TESTID } from './constants/index.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,6BAA6B;AACnD,SAAS,kBAAkB,8BAA8B;",
+  "names": []
+}

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

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { getPropsPerSlotPropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-props-helpers";
+import { DSRibbonName, RIBBON_COL_SLOTS } from "./constants/index.js";
+const defaultProps = {};
+const DSRibbonColPropTypes = {
+  ...getPropsPerSlotPropTypes(DSRibbonName, RIBBON_COL_SLOTS),
+  ...globalAttributesPropTypes,
+  ...xstyledPropTypes
+};
+const DSRibbonColPropTypesSchema = DSRibbonColPropTypes;
+export {
+  DSRibbonColPropTypes,
+  DSRibbonColPropTypesSchema,
+  defaultProps
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSRibbonCol/react-desc-prop-types.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { getPropsPerSlotPropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSRibbonName, RIBBON_COL_SLOTS } from './constants/index.js';\n\nexport declare namespace DSRibbonColT {\n  export interface RequiredProps {}\n\n  export interface DefaultProps {}\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSRibbonName, typeof RIBBON_COL_SLOTS> {}\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSRibbonColT.DefaultProps = {};\n\nexport const DSRibbonColPropTypes: DSPropTypesSchema<DSRibbonColT.Props> = {\n  ...getPropsPerSlotPropTypes(DSRibbonName, RIBBON_COL_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n};\n\nexport const DSRibbonColPropTypesSchema = DSRibbonColPropTypes as unknown as ValidationMap<DSRibbonColT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,0BAA0B,2BAA2B,wBAAwB;AAEtF,SAAS,cAAc,wBAAwB;AAwBxC,MAAM,eAA0C,CAAC;AAEjD,MAAM,uBAA8D;AAAA,EACzE,GAAG,yBAAyB,cAAc,gBAAgB;AAAA,EAC1D,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,6BAA6B;",
+  "names": []
+}

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

@@ -0,0 +1,81 @@
+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 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 StyledFlexRow = styled("div", {
+  name: DSRibbonName,
+  slot: RIBBON_ROW_SLOTS.RIBBON_ROW
+})`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-height: 4rem;
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    height: 5rem;
+    overflow-y: hidden;
+  }
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  ${(props) => {
+  if (props.$alignLeft) {
+    return `
+      align-items: stretch;
+      & > .DSRibbon-ribbon-col {
+        align-items: flex-start;
+        align-self: stretch;    
+        flex: 0;
+        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+          flex: 1;
+        }
+      `;
+  }
+  return `
+        align-items: center;
+    `;
+}};
+  ${(props) => {
+  if (props.$solid) {
+    return `
+      & > .DSRibbon-ribbon-col {
+        &:after{
+          top: 0%;
+          height: 100%;
+          border-right: solid 1px #CBCFD7;
+        }
+      `;
+  }
+  return "";
+}};
+  ${xStyledCommonProps}
+`;
+const DSRibbonRow = (props) => {
+  const { propsWithDefault, xstyledProps, globalProps } = useRibbonRow(props);
+  const { children, solid, alignLeft } = propsWithDefault;
+  const getOwnerProps = React2.useCallback(() => propsWithDefault, [propsWithDefault]);
+  const getOwnerPropsArguments = React2.useCallback(() => ({}), []);
+  return /* @__PURE__ */ jsx(
+    StyledFlexRow,
+    {
+      ...globalProps,
+      ...xstyledProps,
+      $alignLeft: alignLeft,
+      $solid: solid,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children
+    }
+  );
+};
+DSRibbonRow.displayName = "DSRibbonRow";
+const DSRibbonRowWithSchema = describe(DSRibbonRow);
+DSRibbonRowWithSchema.propTypes = DSRibbonRowPropTypesSchema;
+export {
+  DSRibbonRow,
+  DSRibbonRowWithSchema
+};
+//# sourceMappingURL=DSRibbonRow.js.map

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

@@ -0,0 +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;",
+  "names": ["React"]
+}

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

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
+import React2 from "react";
+import { uid } from "uid";
+import { DSRibbonRowPropTypesSchema, defaultProps } from "../react-desc-prop-types.js";
+import { useValidateProps } from "./useValidateProps.js";
+const useRibbonRow = (propsFromUser) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(propsFromUser, defaultProps);
+  useValidateProps(propsWithDefault, DSRibbonRowPropTypesSchema);
+  const globalProps = useGetGlobalAttributes(propsWithDefault);
+  const xstyledProps = useGetXstyledProps(propsWithDefault);
+  const instanceUid = React2.useMemo(() => `ds-ribbon-row-${uid(5)}`, []);
+  return React2.useMemo(
+    () => ({
+      propsWithDefault,
+      xstyledProps,
+      globalProps,
+      instanceUid
+      // ...eventHandlers,
+    }),
+    [
+      propsWithDefault,
+      xstyledProps,
+      globalProps,
+      instanceUid
+      // eventHandlers,
+    ]
+  );
+};
+export {
+  useRibbonRow
+};
+//# sourceMappingURL=useRibbonRow.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSRibbonRow/config/useRibbonRow.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 DSRibbonRowT, DSRibbonRowPropTypesSchema, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport const useRibbonRow = (propsFromUser: DSRibbonRowT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSRibbonRowT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSRibbonRowPropTypesSchema);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalProps = useGetGlobalAttributes<DSRibbonRowT.InternalProps, HTMLDivElement>(propsWithDefault);\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const instanceUid = React.useMemo(() => `ds-ribbon-row-${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,SAA4B,4BAA4B,oBAAoB;AAC5E,SAAS,wBAAwB;AAE1B,MAAM,eAAe,CAAC,kBAAsC;AAIjE,QAAM,mBAAmB,6BAAyD,eAAe,YAAY;AAC7G,mBAAiB,kBAAkB,0BAA0B;AAI7D,QAAM,cAAc,uBAAmE,gBAAgB;AACvG,QAAM,eAAe,mBAAmB,gBAAgB;AAKxD,QAAM,cAAcA,OAAM,QAAQ,MAAM,iBAAiB,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAOrE,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/DSRibbonRow/config/useValidateProps.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+const useValidateProps = (props, propTypes) => {
+  useValidateTypescriptPropTypes(props, propTypes, "DSRibbonRow");
+};
+export {
+  useValidateProps
+};
+//# sourceMappingURL=useValidateProps.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSRibbonRow/config/useValidateProps.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { ValidationMap } from '@elliemae/ds-props-helpers';\nimport { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { type DSRibbonRowT } from '../react-desc-prop-types.js';\n\nexport const useValidateProps = (\n  props: DSRibbonRowT.InternalProps,\n  propTypes: ValidationMap<DSRibbonRowT.Props>,\n): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, 'DSRibbonRow');\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,sCAAsC;AAGxC,MAAM,mBAAmB,CAC9B,OACA,cACS;AAET,iCAA+B,OAAO,WAAW,aAAa;AAChE;",
+  "names": []
+}

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

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { slotObjectToDataTestIds } from "@elliemae/ds-system";
+import { DSRibbonName } from "../../../constants/index.js";
+const RIBBON_ROW_SLOTS = {
+  RIBBON_ROW: "ribbon-row"
+};
+const RIBBON_ROW_DATA_TESTID = slotObjectToDataTestIds(DSRibbonName, RIBBON_ROW_SLOTS);
+export {
+  DSRibbonName,
+  RIBBON_ROW_DATA_TESTID,
+  RIBBON_ROW_SLOTS
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSRibbonRow/constants/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { DSRibbonName } from '../../../constants/index.js';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const RIBBON_ROW_SLOTS = {\n  RIBBON_ROW: 'ribbon-row',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const RIBBON_ROW_DATA_TESTID = slotObjectToDataTestIds(DSRibbonName, RIBBON_ROW_SLOTS);\nexport { DSRibbonName };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AACxC,SAAS,oBAAoB;AAGtB,MAAM,mBAAmB;AAAA,EAC9B,YAAY;AACd;AAGO,MAAM,yBAAyB,wBAAwB,cAAc,gBAAgB;",
+  "names": []
+}