@elliemae/ds-card-v3 3.70.0-next.27 → 3.70.0-next.28

package/dist/cjs/DSCardV3.js

@@ -40,19 +40,19 @@ var import_ds_grid = require("@elliemae/ds-grid");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 var import_useCardV3 = require("./config/useCardV3.js");
 var import_constants = require("./constants/index.js");
+const isAccentedVariant = (variant) => variant === import_constants.Variants.ACCENTED || variant === import_constants.Variants.ACCENTED_DISABLED;
+const isDisabledVariant = (variant) => variant === import_constants.Variants.DISABLED || variant === import_constants.Variants.ACCENTED_DISABLED;
 const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSCardV3Name, slot: import_constants.CARD_V_3_SLOTS.ROOT })`
   min-height: 4.923rem;
   min-width: 240px;
   position: relative;
   border: 1px solid
-    ${({ variant, theme }) => {
-  if (variant === import_constants.Variants.ACCENTED) return theme.colors.brand["500"];
-  return theme.colors.neutral["100"];
-}};
+    ${({ variant, theme }) => isAccentedVariant(variant) ? theme.colors.brand["500"] : theme.colors.neutral["100"]};
 
-  ${({ variant, theme, disabled }) => {
-  if (variant === import_constants.Variants.ACCENTED)
-    return `
+  ${({ variant, theme }) => {
+  if (!isAccentedVariant(variant)) return "";
+  const accentColor = isDisabledVariant(variant) ? theme.colors.neutral["100"] : theme.colors.brand["500"];
+  return `
       &::after {
         content: '';
         display: block;
@@ -60,41 +60,34 @@ const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name:
         top: 0;
         left: 0;
         height: 100%;
-        border-left: 5px solid ${!disabled ? theme.colors.brand["500"] : theme.colors.neutral["100"]};
+        border-left: 5px solid ${accentColor};
       }
     `;
-  return `
-    
-    `;
 }};
 
-  background-color: ${({ theme }) => theme.colors.neutral["000"]};
   border-radius: 4px;
-  ${(props) => {
-  if (!props.disabled) return `background-color: ${props.theme.colors.neutral["000"]};`;
-  if (props.variant === import_constants.Variants.ACCENTED)
-    return `background-color: ${props.theme.colors.neutral["050"]};
-    border-color: ${props.theme.colors.neutral["100"]};`;
-  return `background-color: ${props.theme.colors.neutral["050"]};`;
+  ${({ variant, theme }) => {
+  if (!isDisabledVariant(variant)) return `background-color: ${theme.colors.neutral["000"]};`;
+  if (isAccentedVariant(variant))
+    return `background-color: ${theme.colors.neutral["050"]};
+    border-color: ${theme.colors.neutral["100"]};`;
+  return `background-color: ${theme.colors.neutral["050"]};`;
 }}
 
-  ${(props) => props.disabled ? "box-shadow: none;" : `box-shadow: ${props.theme.shadows.xs};`}
-  &:disabled {
-    background-color: ${({ theme }) => theme.colors.neutral["050"]};
-  }
+  ${({ variant, theme }) => isDisabledVariant(variant) ? "box-shadow: none;" : `box-shadow: ${theme.shadows.xs};`}
   &:hover {
-    ${(props) => !props.disabled ? "box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6);" : ""}
+    ${({ variant }) => !isDisabledVariant(variant) ? "box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6);" : ""}
   }
   ${import_ds_system.xStyledCommonProps}
 `;
 const DSCardV3 = (props) => {
-  const { propsWithDefault, gridProps } = (0, import_useCardV3.useCardV3)(props);
+  const { propsWithDefault, gridProps, resolvedVariant } = (0, import_useCardV3.useCardV3)(props);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     StyledWrapper,
     {
       getOwnerProps: () => propsWithDefault,
       getOwnerPropsArguments: () => ({}),
-      variant: propsWithDefault.variant,
+      variant: resolvedVariant,
       ...gridProps,
       children: propsWithDefault.children
     }

package/dist/cjs/DSCardV3.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSCardV3.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSCardV3T, DSCardV3PropTypesSchema } from './react-desc-prop-types.js';\nimport { useCardV3 } from './config/useCardV3.js';\nimport { CARD_V_3_SLOTS, DSCardV3Name, Variants } from './constants/index.js';\n\nconst StyledWrapper = styled(Grid, { name: DSCardV3Name, slot: CARD_V_3_SLOTS.ROOT })<{ variant?: DSCardV3T.VariantT }>`\n  min-height: 4.923rem;\n  min-width: 240px;\n  position: relative;\n  border: 1px solid\n    ${({ variant, theme }) => {\n      if (variant === Variants.ACCENTED) return theme.colors.brand['500'];\n      return theme.colors.neutral['100'];\n    }};\n\n  ${({ variant, theme, disabled }) => {\n    if (variant === Variants.ACCENTED)\n      return `\n      &::after {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        height: 100%;\n        border-left: 5px solid ${!disabled ? theme.colors.brand['500'] : theme.colors.neutral['100']};\n      }\n    `;\n    return `\n    \n    `;\n  }};\n\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  border-radius: 4px;\n  ${(props) => {\n    if (!props.disabled) return `background-color: ${props.theme.colors.neutral['000']};`;\n    if (props.variant === Variants.ACCENTED)\n      return `background-color: ${props.theme.colors.neutral['050']};\n    border-color: ${props.theme.colors.neutral['100']};`;\n    return `background-color: ${props.theme.colors.neutral['050']};`;\n  }}\n\n  ${(props) => (props.disabled ? 'box-shadow: none;' : `box-shadow: ${props.theme.shadows.xs};`)}\n  &:disabled {\n    background-color: ${({ theme }) => theme.colors.neutral['050']};\n  }\n  &:hover {\n    ${(props) => (!props.disabled ? 'box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6);' : '')}\n  }\n  ${xStyledCommonProps}\n`;\n\nconst DSCardV3: React.ComponentType<DSCardV3T.Props> = (props) => {\n  const { propsWithDefault, gridProps } = useCardV3(props);\n  return (\n    <StyledWrapper\n      getOwnerProps={() => propsWithDefault}\n      getOwnerPropsArguments={() => ({})}\n      variant={propsWithDefault.variant}\n      {...gridProps}\n    >\n      {propsWithDefault.children}\n    </StyledWrapper>\n  );\n};\n\nDSCardV3.displayName = DSCardV3Name;\nconst DSCardV3WithSchema = describe(DSCardV3);\nDSCardV3WithSchema.propTypes = DSCardV3PropTypesSchema;\n\nexport { DSCardV3, DSCardV3WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2DnB;AA1DJ,8BAAyB;AACzB,uBAA2C;AAC3C,qBAAqB;AACrB,mCAAwD;AACxD,uBAA0B;AAC1B,uBAAuD;AAEvD,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,+BAAc,MAAM,gCAAe,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,MAK9E,CAAC,EAAE,SAAS,MAAM,MAAM;AACxB,MAAI,YAAY,0BAAS,SAAU,QAAO,MAAM,OAAO,MAAM,KAAK;AAClE,SAAO,MAAM,OAAO,QAAQ,KAAK;AACnC,CAAC;AAAA;AAAA,IAED,CAAC,EAAE,SAAS,OAAO,SAAS,MAAM;AAClC,MAAI,YAAY,0BAAS;AACvB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAQoB,CAAC,WAAW,MAAM,OAAO,MAAM,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAGhG,SAAO;AAAA;AAAA;AAGT,CAAC;AAAA;AAAA,sBAEmB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA,IAE5D,CAAC,UAAU;AACX,MAAI,CAAC,MAAM,SAAU,QAAO,qBAAqB,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAClF,MAAI,MAAM,YAAY,0BAAS;AAC7B,WAAO,qBAAqB,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,oBAC/C,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AACjD,SAAO,qBAAqB,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAC/D,CAAC;AAAA;AAAA,IAEC,CAAC,UAAW,MAAM,WAAW,sBAAsB,eAAe,MAAM,MAAM,QAAQ,EAAE,GAAI;AAAA;AAAA,wBAExE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA,MAG5D,CAAC,UAAW,CAAC,MAAM,WAAW,gDAAgD,EAAG;AAAA;AAAA,IAEnF,mCAAkB;AAAA;AAGtB,MAAM,WAAiD,CAAC,UAAU;AAChE,QAAM,EAAE,kBAAkB,UAAU,QAAI,4BAAU,KAAK;AACvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe,MAAM;AAAA,MACrB,wBAAwB,OAAO,CAAC;AAAA,MAChC,SAAS,iBAAiB;AAAA,MACzB,GAAG;AAAA,MAEH,2BAAiB;AAAA;AAAA,EACpB;AAEJ;AAEA,SAAS,cAAc;AACvB,MAAM,yBAAqB,kCAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSCardV3T, DSCardV3PropTypesSchema } from './react-desc-prop-types.js';\nimport { useCardV3 } from './config/useCardV3.js';\nimport { CARD_V_3_SLOTS, DSCardV3Name, Variants } from './constants/index.js';\n\n// \"disabled\" is a purely visual state of this non-interactive container \u2014 it is driven by the\n// `variant` value, never by an HTML `disabled` attribute (which is invalid on a <div> and\n// misleads assistive technology \u2014 see PUI-17888). These helpers derive the visual flags from the variant.\nconst isAccentedVariant = (variant?: DSCardV3T.VariantT) =>\n  variant === Variants.ACCENTED || variant === Variants.ACCENTED_DISABLED;\nconst isDisabledVariant = (variant?: DSCardV3T.VariantT) =>\n  variant === Variants.DISABLED || variant === Variants.ACCENTED_DISABLED;\n\nconst StyledWrapper = styled(Grid, { name: DSCardV3Name, slot: CARD_V_3_SLOTS.ROOT })<{ variant?: DSCardV3T.VariantT }>`\n  min-height: 4.923rem;\n  min-width: 240px;\n  position: relative;\n  border: 1px solid\n    ${({ variant, theme }) => (isAccentedVariant(variant) ? theme.colors.brand['500'] : theme.colors.neutral['100'])};\n\n  ${({ variant, theme }) => {\n    if (!isAccentedVariant(variant)) return '';\n    const accentColor = isDisabledVariant(variant) ? theme.colors.neutral['100'] : theme.colors.brand['500'];\n    return `\n      &::after {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        height: 100%;\n        border-left: 5px solid ${accentColor};\n      }\n    `;\n  }};\n\n  border-radius: 4px;\n  ${({ variant, theme }) => {\n    if (!isDisabledVariant(variant)) return `background-color: ${theme.colors.neutral['000']};`;\n    if (isAccentedVariant(variant))\n      return `background-color: ${theme.colors.neutral['050']};\n    border-color: ${theme.colors.neutral['100']};`;\n    return `background-color: ${theme.colors.neutral['050']};`;\n  }}\n\n  ${({ variant, theme }) => (isDisabledVariant(variant) ? 'box-shadow: none;' : `box-shadow: ${theme.shadows.xs};`)}\n  &:hover {\n    ${({ variant }) => (!isDisabledVariant(variant) ? 'box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6);' : '')}\n  }\n  ${xStyledCommonProps}\n`;\n\nconst DSCardV3: React.ComponentType<DSCardV3T.Props> = (props) => {\n  const { propsWithDefault, gridProps, resolvedVariant } = useCardV3(props);\n  return (\n    <StyledWrapper\n      getOwnerProps={() => propsWithDefault}\n      getOwnerPropsArguments={() => ({})}\n      variant={resolvedVariant}\n      {...gridProps}\n    >\n      {propsWithDefault.children}\n    </StyledWrapper>\n  );\n};\n\nDSCardV3.displayName = DSCardV3Name;\nconst DSCardV3WithSchema = describe(DSCardV3);\nDSCardV3WithSchema.propTypes = DSCardV3PropTypesSchema;\n\nexport { DSCardV3, DSCardV3WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0DnB;AAzDJ,8BAAyB;AACzB,uBAA2C;AAC3C,qBAAqB;AACrB,mCAAwD;AACxD,uBAA0B;AAC1B,uBAAuD;AAKvD,MAAM,oBAAoB,CAAC,YACzB,YAAY,0BAAS,YAAY,YAAY,0BAAS;AACxD,MAAM,oBAAoB,CAAC,YACzB,YAAY,0BAAS,YAAY,YAAY,0BAAS;AAExD,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,+BAAc,MAAM,gCAAe,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,MAK9E,CAAC,EAAE,SAAS,MAAM,MAAO,kBAAkB,OAAO,IAAI,MAAM,OAAO,MAAM,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK,CAAE;AAAA;AAAA,IAEhH,CAAC,EAAE,SAAS,MAAM,MAAM;AACxB,MAAI,CAAC,kBAAkB,OAAO,EAAG,QAAO;AACxC,QAAM,cAAc,kBAAkB,OAAO,IAAI,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,MAAM,KAAK;AACvG,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAQsB,WAAW;AAAA;AAAA;AAG1C,CAAC;AAAA;AAAA;AAAA,IAGC,CAAC,EAAE,SAAS,MAAM,MAAM;AACxB,MAAI,CAAC,kBAAkB,OAAO,EAAG,QAAO,qBAAqB,MAAM,OAAO,QAAQ,KAAK,CAAC;AACxF,MAAI,kBAAkB,OAAO;AAC3B,WAAO,qBAAqB,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,oBACzC,MAAM,OAAO,QAAQ,KAAK,CAAC;AAC3C,SAAO,qBAAqB,MAAM,OAAO,QAAQ,KAAK,CAAC;AACzD,CAAC;AAAA;AAAA,IAEC,CAAC,EAAE,SAAS,MAAM,MAAO,kBAAkB,OAAO,IAAI,sBAAsB,eAAe,MAAM,QAAQ,EAAE,GAAI;AAAA;AAAA,MAE7G,CAAC,EAAE,QAAQ,MAAO,CAAC,kBAAkB,OAAO,IAAI,gDAAgD,EAAG;AAAA;AAAA,IAErG,mCAAkB;AAAA;AAGtB,MAAM,WAAiD,CAAC,UAAU;AAChE,QAAM,EAAE,kBAAkB,WAAW,gBAAgB,QAAI,4BAAU,KAAK;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe,MAAM;AAAA,MACrB,wBAAwB,OAAO,CAAC;AAAA,MAChC,SAAS;AAAA,MACR,GAAG;AAAA,MAEH,2BAAiB;AAAA;AAAA,EACpB;AAEJ;AAEA,SAAS,cAAc;AACvB,MAAM,yBAAqB,kCAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
   "names": []
 }

package/dist/cjs/config/useCardV3.js

@@ -37,19 +37,29 @@ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_react = __toESM(require("react"));
 var import_uid = require("uid");
 var import_react_desc_prop_types = require("../react-desc-prop-types.js");
+var import_constants = require("../constants/index.js");
 var import_useValidateProps = require("./useValidateProps.js");
+const resolveVariant = (variant, disabled) => {
+  const base = variant ?? import_constants.Variants.DEFAULT;
+  if (!disabled) return base;
+  if (base === import_constants.Variants.ACCENTED || base === import_constants.Variants.ACCENTED_DISABLED) return import_constants.Variants.ACCENTED_DISABLED;
+  return import_constants.Variants.DISABLED;
+};
 const useCardV3 = (propsFromUser) => {
   const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(propsFromUser, import_react_desc_prop_types.defaultProps);
   (0, import_useValidateProps.useValidateProps)(propsWithDefault, import_react_desc_prop_types.DSCardV3PropTypes);
-  const gridProps = (0, import_ds_grid.getGridProps)(propsWithDefault);
+  const { disabled, variant, ...gridInputProps } = propsWithDefault;
+  const resolvedVariant = resolveVariant(variant, disabled);
+  const gridProps = (0, import_ds_grid.getGridProps)(gridInputProps);
   const instanceUid = import_react.default.useMemo(() => (0, import_uid.uid)(5), []);
   return import_react.default.useMemo(
     () => ({
       propsWithDefault,
       gridProps,
+      resolvedVariant,
       instanceUid
     }),
-    [propsWithDefault, gridProps, instanceUid]
+    [propsWithDefault, gridProps, resolvedVariant, instanceUid]
   );
 };
 //# sourceMappingURL=useCardV3.js.map

package/dist/cjs/config/useCardV3.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useCardV3.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { getGridProps } from '@elliemae/ds-grid';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { uid } from 'uid';\nimport { DSCardV3PropTypes, defaultProps, type DSCardV3T } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface CardV3CTX {\n  propsWithDefault: DSCardV3T.InternalProps;\n  gridProps: ReturnType<typeof getGridProps>;\n  instanceUid: string;\n}\n\nexport const useCardV3 = (propsFromUser: DSCardV3T.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSCardV3T.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSCardV3PropTypes);\n  // =============================================================================\n  // WE inherit the global attributes and xstyled props from GRID\n  // =============================================================================\n  const gridProps = getGridProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const instanceUid = React.useMemo(() => uid(5), []);\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      gridProps,\n      instanceUid,\n    }),\n    [propsWithDefault, gridProps, instanceUid],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,qBAA6B;AAC7B,8BAA6C;AAC7C,mBAAkB;AAClB,iBAAoB;AACpB,mCAAgE;AAChE,8BAAiC;AAQ1B,MAAM,YAAY,CAAC,kBAAmC;AAI3D,QAAM,uBAAmB,sDAAsD,eAAe,yCAAY;AAC1G,gDAAiB,kBAAkB,8CAAiB;AAIpD,QAAM,gBAAY,6BAAa,gBAAgB;AAI/C,QAAM,cAAc,aAAAA,QAAM,QAAQ,UAAM,gBAAI,CAAC,GAAG,CAAC,CAAC;AAElD,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,WAAW,WAAW;AAAA,EAC3C;AACF;",
+  "sourcesContent": ["import { getGridProps } from '@elliemae/ds-grid';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { uid } from 'uid';\nimport { DSCardV3PropTypes, defaultProps, type DSCardV3T } from '../react-desc-prop-types.js';\nimport { Variants } from '../constants/index.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface CardV3CTX {\n  propsWithDefault: DSCardV3T.InternalProps;\n  gridProps: ReturnType<typeof getGridProps>;\n  resolvedVariant: DSCardV3T.VariantT;\n  instanceUid: string;\n}\n\n// Resolves the visual variant, folding the deprecated `disabled` prop into the variant value.\n// A non-interactive card can never carry an HTML `disabled` attribute (PUI-17888), so \"disabled\"\n// is expressed exclusively through the variant: a disabled card is just a variant that looks muted.\nconst resolveVariant = (variant: DSCardV3T.VariantT | undefined, disabled: boolean | undefined): DSCardV3T.VariantT => {\n  const base = variant ?? Variants.DEFAULT;\n  if (!disabled) return base;\n  if (base === Variants.ACCENTED || base === Variants.ACCENTED_DISABLED) return Variants.ACCENTED_DISABLED;\n  return Variants.DISABLED;\n};\n\nexport const useCardV3 = (propsFromUser: DSCardV3T.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSCardV3T.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSCardV3PropTypes);\n  // =============================================================================\n  // RESOLVE THE VISUAL VARIANT and feed GRID only the props it owns.\n  // `disabled` and `variant` are split off here: `disabled` must never reach the DOM (invalid on a\n  // non-interactive container \u2014 PUI-17888), and `variant` is forwarded to the styled root explicitly.\n  // =============================================================================\n  const { disabled, variant, ...gridInputProps } = propsWithDefault;\n  const resolvedVariant = resolveVariant(variant, disabled);\n  const gridProps = getGridProps(gridInputProps);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const instanceUid = React.useMemo(() => uid(5), []);\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      gridProps,\n      resolvedVariant,\n      instanceUid,\n    }),\n    [propsWithDefault, gridProps, resolvedVariant, instanceUid],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,qBAA6B;AAC7B,8BAA6C;AAC7C,mBAAkB;AAClB,iBAAoB;AACpB,mCAAgE;AAChE,uBAAyB;AACzB,8BAAiC;AAYjC,MAAM,iBAAiB,CAAC,SAAyC,aAAsD;AACrH,QAAM,OAAO,WAAW,0BAAS;AACjC,MAAI,CAAC,SAAU,QAAO;AACtB,MAAI,SAAS,0BAAS,YAAY,SAAS,0BAAS,kBAAmB,QAAO,0BAAS;AACvF,SAAO,0BAAS;AAClB;AAEO,MAAM,YAAY,CAAC,kBAAmC;AAI3D,QAAM,uBAAmB,sDAAsD,eAAe,yCAAY;AAC1G,gDAAiB,kBAAkB,8CAAiB;AAMpD,QAAM,EAAE,UAAU,SAAS,GAAG,eAAe,IAAI;AACjD,QAAM,kBAAkB,eAAe,SAAS,QAAQ;AACxD,QAAM,gBAAY,6BAAa,cAAc;AAI7C,QAAM,cAAc,aAAAA,QAAM,QAAQ,UAAM,gBAAI,CAAC,GAAG,CAAC,CAAC;AAElD,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,WAAW,iBAAiB,WAAW;AAAA,EAC5D;AACF;",
   "names": ["React"]
 }

package/dist/cjs/constants/index.js

@@ -46,7 +46,9 @@ const DSCardV3FooterName = "DSCardv3footer";
 const DSCardV3BodyName = "DSCardv3body";
 const Variants = {
   DEFAULT: "default",
-  ACCENTED: "accented"
+  ACCENTED: "accented",
+  DISABLED: "disabled",
+  ACCENTED_DISABLED: "accented-disabled"
 };
 const CARD_V_3_SLOTS_PARTS = {
   ROOT: { ROOT: "root" },

package/dist/cjs/constants/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSCardV3Name = 'DSCardv3';\nexport const DSCardV3HeaderName = 'DSCardv3header';\nexport const DSCardV3FooterName = 'DSCardv3footer';\nexport const DSCardV3BodyName = 'DSCardv3body';\n\nexport const Variants = {\n  DEFAULT: 'default',\n  ACCENTED: 'accented',\n} as const;\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\n\nexport const CARD_V_3_SLOTS_PARTS = {\n  ROOT: { ROOT: 'root' },\n  HEADER: { HEADER: 'header' },\n  BODY: { BODY: 'body' },\n  FOOTER: { FOOTER: 'footer' },\n} as const;\n\nexport const CARD_V_3_SLOTS = {\n  ROOT: 'root',\n  HEADER: 'header',\n  BODY: 'body',\n  FOOTER: 'footer',\n} as const;\n\n// we are giving \"component_name_data_testid\" to avoid errors on duplicate exports variables in aggregators\nexport const CARD_V_3_DATA_TESTID = slotObjectToDataTestIds(DSCardV3Name, CARD_V_3_SLOTS);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,eAAe;AACrB,MAAM,qBAAqB;AAC3B,MAAM,qBAAqB;AAC3B,MAAM,mBAAmB;AAEzB,MAAM,WAAW;AAAA,EACtB,SAAS;AAAA,EACT,UAAU;AACZ;AAIO,MAAM,uBAAuB;AAAA,EAClC,MAAM,EAAE,MAAM,OAAO;AAAA,EACrB,QAAQ,EAAE,QAAQ,SAAS;AAAA,EAC3B,MAAM,EAAE,MAAM,OAAO;AAAA,EACrB,QAAQ,EAAE,QAAQ,SAAS;AAC7B;AAEO,MAAM,iBAAiB;AAAA,EAC5B,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AACV;AAGO,MAAM,2BAAuB,0CAAwB,cAAc,cAAc;",
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSCardV3Name = 'DSCardv3';\nexport const DSCardV3HeaderName = 'DSCardv3header';\nexport const DSCardV3FooterName = 'DSCardv3footer';\nexport const DSCardV3BodyName = 'DSCardv3body';\n\nexport const Variants = {\n  DEFAULT: 'default',\n  ACCENTED: 'accented',\n  DISABLED: 'disabled',\n  ACCENTED_DISABLED: 'accented-disabled',\n} as const;\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\n\nexport const CARD_V_3_SLOTS_PARTS = {\n  ROOT: { ROOT: 'root' },\n  HEADER: { HEADER: 'header' },\n  BODY: { BODY: 'body' },\n  FOOTER: { FOOTER: 'footer' },\n} as const;\n\nexport const CARD_V_3_SLOTS = {\n  ROOT: 'root',\n  HEADER: 'header',\n  BODY: 'body',\n  FOOTER: 'footer',\n} as const;\n\n// we are giving \"component_name_data_testid\" to avoid errors on duplicate exports variables in aggregators\nexport const CARD_V_3_DATA_TESTID = slotObjectToDataTestIds(DSCardV3Name, CARD_V_3_SLOTS);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,eAAe;AACrB,MAAM,qBAAqB;AAC3B,MAAM,qBAAqB;AAC3B,MAAM,mBAAmB;AAEzB,MAAM,WAAW;AAAA,EACtB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAIO,MAAM,uBAAuB;AAAA,EAClC,MAAM,EAAE,MAAM,OAAO;AAAA,EACrB,QAAQ,EAAE,QAAQ,SAAS;AAAA,EAC3B,MAAM,EAAE,MAAM,OAAO;AAAA,EACrB,QAAQ,EAAE,QAAQ,SAAS;AAC7B;AAEO,MAAM,iBAAiB;AAAA,EAC5B,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AACV;AAGO,MAAM,2BAAuB,0CAAwB,cAAc,cAAc;",
   "names": []
 }

package/dist/cjs/react-desc-prop-types.js

@@ -45,7 +45,7 @@ const DSCardV3PropTypes = {
   ...import_ds_props_helpers.xstyledPropTypes,
   variant: import_ds_props_helpers.PropTypes.oneOf(Object.values(import_constants.Variants)).description("The variant of the card"),
   children: import_ds_props_helpers.PropTypes.any.description("The content of the card"),
-  disabled: import_ds_props_helpers.PropTypes.bool.description("If true, the card will be disabled")
+  disabled: import_ds_props_helpers.PropTypes.bool.description('Deprecated. Use variant="disabled" or variant="accented-disabled" instead.').deprecated({ version: "4.x", message: 'use variant="disabled" or variant="accented-disabled" instead' })
 };
 const DSCardV3PropTypesSchema = DSCardV3PropTypes;
 //# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { type DSGridT, DSGridPropTypes } from '@elliemae/ds-grid';\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 { CARD_V_3_SLOTS_PARTS, DSCardV3Name, Variants } from './constants/index.js';\n\nexport declare namespace DSCardV3T {\n  type Keys = keyof typeof Variants;\n  export type VariantT = (typeof Variants)[Keys];\n\n  export type SlotFunctionArguments = {\n    dsCardv3Root: () => object;\n  };\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {}\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSCardV3Name, typeof CARD_V_3_SLOTS_PARTS.ROOT> {\n    children?: React.ReactNode;\n    disabled?: boolean;\n    variant?: VariantT;\n  }\n\n  export interface Props\n    extends OptionalProps,\n      Partial<DefaultProps>,\n      Omit<\n        GlobalAttributesT<HTMLDivElement>,\n        // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents, @typescript-eslint/no-duplicate-type-constituents\n        keyof OptionalProps | keyof DefaultProps | keyof XstyledProps | keyof RequiredProps | keyof DSGridT.Props\n      >,\n      XstyledProps,\n      RequiredProps,\n      DSGridT.Props {\n    'data-testid'?: string;\n    innerRef?: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n  }\n\n  export interface InternalProps\n    extends OptionalProps,\n      DefaultProps,\n      Omit<\n        GlobalAttributesT<HTMLDivElement>,\n        // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents, @typescript-eslint/no-duplicate-type-constituents\n        keyof OptionalProps | keyof DefaultProps | keyof XstyledProps | keyof RequiredProps | keyof DSGridT.Props\n      >,\n      XstyledProps,\n      RequiredProps,\n      DSGridT.Props {\n    'data-testid'?: string;\n    innerRef?: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n  }\n}\n\nexport const defaultProps: DSCardV3T.DefaultProps = {};\n\nexport const DSCardV3PropTypes: DSPropTypesSchema<Omit<DSCardV3T.Props, 'data-testid'>> = {\n  ...DSGridPropTypes,\n  ...getPropsPerSlotPropTypes(DSCardV3Name, CARD_V_3_SLOTS_PARTS.ROOT),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  variant: PropTypes.oneOf(Object.values(Variants)).description('The variant of the card'),\n  children: PropTypes.any.description('The content of the card'),\n  disabled: PropTypes.bool.description('If true, the card will be disabled'),\n};\n\nexport const DSCardV3PropTypesSchema = DSCardV3PropTypes as unknown as ValidationMap<DSCardV3T.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,qBAA8C;AAE9C,8BAKO;AAEP,uBAA6D;AAoDtD,MAAM,eAAuC,CAAC;AAE9C,MAAM,oBAA6E;AAAA,EACxF,GAAG;AAAA,EACH,OAAG,kDAAyB,+BAAc,sCAAqB,IAAI;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,kCAAU,MAAM,OAAO,OAAO,yBAAQ,CAAC,EAAE,YAAY,yBAAyB;AAAA,EACvF,UAAU,kCAAU,IAAI,YAAY,yBAAyB;AAAA,EAC7D,UAAU,kCAAU,KAAK,YAAY,oCAAoC;AAC3E;AAEO,MAAM,0BAA0B;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { type DSGridT, DSGridPropTypes } from '@elliemae/ds-grid';\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 { CARD_V_3_SLOTS_PARTS, DSCardV3Name, Variants } from './constants/index.js';\n\nexport declare namespace DSCardV3T {\n  type Keys = keyof typeof Variants;\n  export type VariantT = (typeof Variants)[Keys];\n\n  export type SlotFunctionArguments = {\n    dsCardv3Root: () => object;\n  };\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {}\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSCardV3Name, typeof CARD_V_3_SLOTS_PARTS.ROOT> {\n    children?: React.ReactNode;\n    /**\n     * @deprecated v4.x \u2014 use `variant=\"disabled\"` or `variant=\"accented-disabled\"` instead.\n     * A non-interactive card must not carry an HTML `disabled` attribute (PUI-17888); the disabled\n     * look is now a visual variant. This prop is still honoured and resolved to the matching variant.\n     */\n    disabled?: boolean;\n    variant?: VariantT;\n  }\n\n  export interface Props\n    extends OptionalProps,\n      Partial<DefaultProps>,\n      Omit<\n        GlobalAttributesT<HTMLDivElement>,\n        // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents, @typescript-eslint/no-duplicate-type-constituents\n        keyof OptionalProps | keyof DefaultProps | keyof XstyledProps | keyof RequiredProps | keyof DSGridT.Props\n      >,\n      XstyledProps,\n      RequiredProps,\n      DSGridT.Props {\n    'data-testid'?: string;\n    innerRef?: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n  }\n\n  export interface InternalProps\n    extends OptionalProps,\n      DefaultProps,\n      Omit<\n        GlobalAttributesT<HTMLDivElement>,\n        // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents, @typescript-eslint/no-duplicate-type-constituents\n        keyof OptionalProps | keyof DefaultProps | keyof XstyledProps | keyof RequiredProps | keyof DSGridT.Props\n      >,\n      XstyledProps,\n      RequiredProps,\n      DSGridT.Props {\n    'data-testid'?: string;\n    innerRef?: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n  }\n}\n\nexport const defaultProps: DSCardV3T.DefaultProps = {};\n\nexport const DSCardV3PropTypes: DSPropTypesSchema<Omit<DSCardV3T.Props, 'data-testid'>> = {\n  ...DSGridPropTypes,\n  ...getPropsPerSlotPropTypes(DSCardV3Name, CARD_V_3_SLOTS_PARTS.ROOT),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  variant: PropTypes.oneOf(Object.values(Variants)).description('The variant of the card'),\n  children: PropTypes.any.description('The content of the card'),\n  disabled: PropTypes.bool\n    .description('Deprecated. Use variant=\"disabled\" or variant=\"accented-disabled\" instead.')\n    .deprecated({ version: '4.x', message: 'use variant=\"disabled\" or variant=\"accented-disabled\" instead' }),\n};\n\nexport const DSCardV3PropTypesSchema = DSCardV3PropTypes as unknown as ValidationMap<DSCardV3T.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,qBAA8C;AAE9C,8BAKO;AAEP,uBAA6D;AAyDtD,MAAM,eAAuC,CAAC;AAE9C,MAAM,oBAA6E;AAAA,EACxF,GAAG;AAAA,EACH,OAAG,kDAAyB,+BAAc,sCAAqB,IAAI;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,kCAAU,MAAM,OAAO,OAAO,yBAAQ,CAAC,EAAE,YAAY,yBAAyB;AAAA,EACvF,UAAU,kCAAU,IAAI,YAAY,yBAAyB;AAAA,EAC7D,UAAU,kCAAU,KACjB,YAAY,4EAA4E,EACxF,WAAW,EAAE,SAAS,OAAO,SAAS,gEAAgE,CAAC;AAC5G;AAEO,MAAM,0BAA0B;",
   "names": []
 }

package/dist/cjs/typescript-testing/typescript-dscard-v3-valid.js

@@ -79,6 +79,10 @@ const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSCardV3, { ...testExplicitDefinition }),
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSCardV3, { ...testInferedTypeCompatibility }),
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSCardV3, { ...testDefinitionAsConst }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSCardV3, { "data-testid": "ds-card-v3-id", children: "Card Label" })
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSCardV3, { "data-testid": "ds-card-v3-id", children: "Card Label" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSCardV3, { variant: "default", children: "Card Label" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSCardV3, { variant: "accented", children: "Card Label" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSCardV3, { variant: "disabled", children: "Card Label" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSCardV3, { variant: "accented-disabled", children: "Card Label" })
 ] });
 //# sourceMappingURL=typescript-dscard-v3-valid.js.map

package/dist/cjs/typescript-testing/typescript-dscard-v3-valid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-dscard-v3-valid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { createRef } from 'react';\nimport { DSCardV3 } from '../index.js';\nimport type { DSCardV3T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSCardV3T.Props;\ntype ComponentPropsInternals = DSCardV3T.InternalProps;\ntype ComponentPropsDefaultProps = DSCardV3T.DefaultProps;\ntype ComponentPropsOptionalProps = DSCardV3T.OptionalProps;\ntype ComponentPropsRequiredProps = DSCardV3T.RequiredProps;\n\nconst ref = createRef<HTMLDivElement>();\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  children: 'Button Label',\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  children: 'Card Label',\n  disabled: false,\n  variant: 'accented',\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  'data-testid': 'ds-cardv3',\n};\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  'data-testid': 'ds-card-v3-id',\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  'data-testid': 'ds-card-v3-id',\n  children: 'Button Label',\n  innerRef: ref,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  'data-testid': 'ds-card-v3-id',\n  children: 'Button Label',\n  variant: 'accented',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  'data-testid': 'ds-card-v3-id',\n  children: 'Button Label',\n  variant: 'accented',\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSCardV3 {...testExplicitDefinition} />\n    <DSCardV3 {...testInferedTypeCompatibility} />\n    <DSCardV3 {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSCardV3 data-testid=\"ds-card-v3-id\">Card Label</DSCardV3>\n  </>\n);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;AC0ErB;AAzEF,mBAA0B;AAC1B,eAAyB;AAUzB,MAAM,UAAM,wBAA0B;AAEtC,MAAM,oBAAiD;AAAA,EACrD,UAAU;AACZ;AACA,MAAM,oBAAiD;AAAA,EACrD,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AACX;AAIA,MAAM,sBAA2D;AAAA,EAC/D,eAAe;AACjB;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,eAAe;AACjB;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAU;AACZ;AAGA,MAAM,+BAA+B;AAAA,EACnC,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS;AACX;AAEA,MAAM,wBAAwB;AAAA,EAC5B,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS;AACX;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,qBAAU,GAAG,wBAAwB;AAAA,EACtC,4CAAC,qBAAU,GAAG,8BAA8B;AAAA,EAC5C,4CAAC,qBAAU,GAAG,uBAAuB;AAAA,EAErC,4CAAC,qBAAS,eAAY,iBAAgB,wBAAU;AAAA,GAClD;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { createRef } from 'react';\nimport { DSCardV3 } from '../index.js';\nimport type { DSCardV3T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSCardV3T.Props;\ntype ComponentPropsInternals = DSCardV3T.InternalProps;\ntype ComponentPropsDefaultProps = DSCardV3T.DefaultProps;\ntype ComponentPropsOptionalProps = DSCardV3T.OptionalProps;\ntype ComponentPropsRequiredProps = DSCardV3T.RequiredProps;\n\nconst ref = createRef<HTMLDivElement>();\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  children: 'Button Label',\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  children: 'Card Label',\n  disabled: false,\n  variant: 'accented',\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  'data-testid': 'ds-cardv3',\n};\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  'data-testid': 'ds-card-v3-id',\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  'data-testid': 'ds-card-v3-id',\n  children: 'Button Label',\n  innerRef: ref,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  'data-testid': 'ds-card-v3-id',\n  children: 'Button Label',\n  variant: 'accented',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  'data-testid': 'ds-card-v3-id',\n  children: 'Button Label',\n  variant: 'accented',\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSCardV3 {...testExplicitDefinition} />\n    <DSCardV3 {...testInferedTypeCompatibility} />\n    <DSCardV3 {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSCardV3 data-testid=\"ds-card-v3-id\">Card Label</DSCardV3>\n    {/* all four variant values are accepted */}\n    <DSCardV3 variant=\"default\">Card Label</DSCardV3>\n    <DSCardV3 variant=\"accented\">Card Label</DSCardV3>\n    <DSCardV3 variant=\"disabled\">Card Label</DSCardV3>\n    <DSCardV3 variant=\"accented-disabled\">Card Label</DSCardV3>\n  </>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;AC0ErB;AAzEF,mBAA0B;AAC1B,eAAyB;AAUzB,MAAM,UAAM,wBAA0B;AAEtC,MAAM,oBAAiD;AAAA,EACrD,UAAU;AACZ;AACA,MAAM,oBAAiD;AAAA,EACrD,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AACX;AAIA,MAAM,sBAA2D;AAAA,EAC/D,eAAe;AACjB;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,eAAe;AACjB;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAU;AACZ;AAGA,MAAM,+BAA+B;AAAA,EACnC,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS;AACX;AAEA,MAAM,wBAAwB;AAAA,EAC5B,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS;AACX;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,qBAAU,GAAG,wBAAwB;AAAA,EACtC,4CAAC,qBAAU,GAAG,8BAA8B;AAAA,EAC5C,4CAAC,qBAAU,GAAG,uBAAuB;AAAA,EAErC,4CAAC,qBAAS,eAAY,iBAAgB,wBAAU;AAAA,EAEhD,4CAAC,qBAAS,SAAQ,WAAU,wBAAU;AAAA,EACtC,4CAAC,qBAAS,SAAQ,YAAW,wBAAU;AAAA,EACvC,4CAAC,qBAAS,SAAQ,YAAW,wBAAU;AAAA,EACvC,4CAAC,qBAAS,SAAQ,qBAAoB,wBAAU;AAAA,GAClD;",
   "names": []
 }

package/dist/esm/DSCardV3.js

@@ -6,19 +6,19 @@ import { Grid } from "@elliemae/ds-grid";
 import { DSCardV3PropTypesSchema } from "./react-desc-prop-types.js";
 import { useCardV3 } from "./config/useCardV3.js";
 import { CARD_V_3_SLOTS, DSCardV3Name, Variants } from "./constants/index.js";
+const isAccentedVariant = (variant) => variant === Variants.ACCENTED || variant === Variants.ACCENTED_DISABLED;
+const isDisabledVariant = (variant) => variant === Variants.DISABLED || variant === Variants.ACCENTED_DISABLED;
 const StyledWrapper = styled(Grid, { name: DSCardV3Name, slot: CARD_V_3_SLOTS.ROOT })`
   min-height: 4.923rem;
   min-width: 240px;
   position: relative;
   border: 1px solid
-    ${({ variant, theme }) => {
-  if (variant === Variants.ACCENTED) return theme.colors.brand["500"];
-  return theme.colors.neutral["100"];
-}};
+    ${({ variant, theme }) => isAccentedVariant(variant) ? theme.colors.brand["500"] : theme.colors.neutral["100"]};
 
-  ${({ variant, theme, disabled }) => {
-  if (variant === Variants.ACCENTED)
-    return `
+  ${({ variant, theme }) => {
+  if (!isAccentedVariant(variant)) return "";
+  const accentColor = isDisabledVariant(variant) ? theme.colors.neutral["100"] : theme.colors.brand["500"];
+  return `
       &::after {
         content: '';
         display: block;
@@ -26,41 +26,34 @@ const StyledWrapper = styled(Grid, { name: DSCardV3Name, slot: CARD_V_3_SLOTS.RO
         top: 0;
         left: 0;
         height: 100%;
-        border-left: 5px solid ${!disabled ? theme.colors.brand["500"] : theme.colors.neutral["100"]};
+        border-left: 5px solid ${accentColor};
       }
     `;
-  return `
-    
-    `;
 }};
 
-  background-color: ${({ theme }) => theme.colors.neutral["000"]};
   border-radius: 4px;
-  ${(props) => {
-  if (!props.disabled) return `background-color: ${props.theme.colors.neutral["000"]};`;
-  if (props.variant === Variants.ACCENTED)
-    return `background-color: ${props.theme.colors.neutral["050"]};
-    border-color: ${props.theme.colors.neutral["100"]};`;
-  return `background-color: ${props.theme.colors.neutral["050"]};`;
+  ${({ variant, theme }) => {
+  if (!isDisabledVariant(variant)) return `background-color: ${theme.colors.neutral["000"]};`;
+  if (isAccentedVariant(variant))
+    return `background-color: ${theme.colors.neutral["050"]};
+    border-color: ${theme.colors.neutral["100"]};`;
+  return `background-color: ${theme.colors.neutral["050"]};`;
 }}
 
-  ${(props) => props.disabled ? "box-shadow: none;" : `box-shadow: ${props.theme.shadows.xs};`}
-  &:disabled {
-    background-color: ${({ theme }) => theme.colors.neutral["050"]};
-  }
+  ${({ variant, theme }) => isDisabledVariant(variant) ? "box-shadow: none;" : `box-shadow: ${theme.shadows.xs};`}
   &:hover {
-    ${(props) => !props.disabled ? "box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6);" : ""}
+    ${({ variant }) => !isDisabledVariant(variant) ? "box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6);" : ""}
   }
   ${xStyledCommonProps}
 `;
 const DSCardV3 = (props) => {
-  const { propsWithDefault, gridProps } = useCardV3(props);
+  const { propsWithDefault, gridProps, resolvedVariant } = useCardV3(props);
   return /* @__PURE__ */ jsx(
     StyledWrapper,
     {
       getOwnerProps: () => propsWithDefault,
       getOwnerPropsArguments: () => ({}),
-      variant: propsWithDefault.variant,
+      variant: resolvedVariant,
       ...gridProps,
       children: propsWithDefault.children
     }

package/dist/esm/DSCardV3.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSCardV3.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSCardV3T, DSCardV3PropTypesSchema } from './react-desc-prop-types.js';\nimport { useCardV3 } from './config/useCardV3.js';\nimport { CARD_V_3_SLOTS, DSCardV3Name, Variants } from './constants/index.js';\n\nconst StyledWrapper = styled(Grid, { name: DSCardV3Name, slot: CARD_V_3_SLOTS.ROOT })<{ variant?: DSCardV3T.VariantT }>`\n  min-height: 4.923rem;\n  min-width: 240px;\n  position: relative;\n  border: 1px solid\n    ${({ variant, theme }) => {\n      if (variant === Variants.ACCENTED) return theme.colors.brand['500'];\n      return theme.colors.neutral['100'];\n    }};\n\n  ${({ variant, theme, disabled }) => {\n    if (variant === Variants.ACCENTED)\n      return `\n      &::after {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        height: 100%;\n        border-left: 5px solid ${!disabled ? theme.colors.brand['500'] : theme.colors.neutral['100']};\n      }\n    `;\n    return `\n    \n    `;\n  }};\n\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  border-radius: 4px;\n  ${(props) => {\n    if (!props.disabled) return `background-color: ${props.theme.colors.neutral['000']};`;\n    if (props.variant === Variants.ACCENTED)\n      return `background-color: ${props.theme.colors.neutral['050']};\n    border-color: ${props.theme.colors.neutral['100']};`;\n    return `background-color: ${props.theme.colors.neutral['050']};`;\n  }}\n\n  ${(props) => (props.disabled ? 'box-shadow: none;' : `box-shadow: ${props.theme.shadows.xs};`)}\n  &:disabled {\n    background-color: ${({ theme }) => theme.colors.neutral['050']};\n  }\n  &:hover {\n    ${(props) => (!props.disabled ? 'box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6);' : '')}\n  }\n  ${xStyledCommonProps}\n`;\n\nconst DSCardV3: React.ComponentType<DSCardV3T.Props> = (props) => {\n  const { propsWithDefault, gridProps } = useCardV3(props);\n  return (\n    <StyledWrapper\n      getOwnerProps={() => propsWithDefault}\n      getOwnerPropsArguments={() => ({})}\n      variant={propsWithDefault.variant}\n      {...gridProps}\n    >\n      {propsWithDefault.children}\n    </StyledWrapper>\n  );\n};\n\nDSCardV3.displayName = DSCardV3Name;\nconst DSCardV3WithSchema = describe(DSCardV3);\nDSCardV3WithSchema.propTypes = DSCardV3PropTypesSchema;\n\nexport { DSCardV3, DSCardV3WithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC2DnB;AA1DJ,SAAS,gBAAgB;AACzB,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,YAAY;AACrB,SAAyB,+BAA+B;AACxD,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB,cAAc,gBAAgB;AAEvD,MAAM,gBAAgB,OAAO,MAAM,EAAE,MAAM,cAAc,MAAM,eAAe,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,MAK9E,CAAC,EAAE,SAAS,MAAM,MAAM;AACxB,MAAI,YAAY,SAAS,SAAU,QAAO,MAAM,OAAO,MAAM,KAAK;AAClE,SAAO,MAAM,OAAO,QAAQ,KAAK;AACnC,CAAC;AAAA;AAAA,IAED,CAAC,EAAE,SAAS,OAAO,SAAS,MAAM;AAClC,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAQoB,CAAC,WAAW,MAAM,OAAO,MAAM,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAGhG,SAAO;AAAA;AAAA;AAGT,CAAC;AAAA;AAAA,sBAEmB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA,IAE5D,CAAC,UAAU;AACX,MAAI,CAAC,MAAM,SAAU,QAAO,qBAAqB,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAClF,MAAI,MAAM,YAAY,SAAS;AAC7B,WAAO,qBAAqB,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,oBAC/C,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AACjD,SAAO,qBAAqB,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAC/D,CAAC;AAAA;AAAA,IAEC,CAAC,UAAW,MAAM,WAAW,sBAAsB,eAAe,MAAM,MAAM,QAAQ,EAAE,GAAI;AAAA;AAAA,wBAExE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA,MAG5D,CAAC,UAAW,CAAC,MAAM,WAAW,gDAAgD,EAAG;AAAA;AAAA,IAEnF,kBAAkB;AAAA;AAGtB,MAAM,WAAiD,CAAC,UAAU;AAChE,QAAM,EAAE,kBAAkB,UAAU,IAAI,UAAU,KAAK;AACvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe,MAAM;AAAA,MACrB,wBAAwB,OAAO,CAAC;AAAA,MAChC,SAAS,iBAAiB;AAAA,MACzB,GAAG;AAAA,MAEH,2BAAiB;AAAA;AAAA,EACpB;AAEJ;AAEA,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSCardV3T, DSCardV3PropTypesSchema } from './react-desc-prop-types.js';\nimport { useCardV3 } from './config/useCardV3.js';\nimport { CARD_V_3_SLOTS, DSCardV3Name, Variants } from './constants/index.js';\n\n// \"disabled\" is a purely visual state of this non-interactive container \u2014 it is driven by the\n// `variant` value, never by an HTML `disabled` attribute (which is invalid on a <div> and\n// misleads assistive technology \u2014 see PUI-17888). These helpers derive the visual flags from the variant.\nconst isAccentedVariant = (variant?: DSCardV3T.VariantT) =>\n  variant === Variants.ACCENTED || variant === Variants.ACCENTED_DISABLED;\nconst isDisabledVariant = (variant?: DSCardV3T.VariantT) =>\n  variant === Variants.DISABLED || variant === Variants.ACCENTED_DISABLED;\n\nconst StyledWrapper = styled(Grid, { name: DSCardV3Name, slot: CARD_V_3_SLOTS.ROOT })<{ variant?: DSCardV3T.VariantT }>`\n  min-height: 4.923rem;\n  min-width: 240px;\n  position: relative;\n  border: 1px solid\n    ${({ variant, theme }) => (isAccentedVariant(variant) ? theme.colors.brand['500'] : theme.colors.neutral['100'])};\n\n  ${({ variant, theme }) => {\n    if (!isAccentedVariant(variant)) return '';\n    const accentColor = isDisabledVariant(variant) ? theme.colors.neutral['100'] : theme.colors.brand['500'];\n    return `\n      &::after {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        height: 100%;\n        border-left: 5px solid ${accentColor};\n      }\n    `;\n  }};\n\n  border-radius: 4px;\n  ${({ variant, theme }) => {\n    if (!isDisabledVariant(variant)) return `background-color: ${theme.colors.neutral['000']};`;\n    if (isAccentedVariant(variant))\n      return `background-color: ${theme.colors.neutral['050']};\n    border-color: ${theme.colors.neutral['100']};`;\n    return `background-color: ${theme.colors.neutral['050']};`;\n  }}\n\n  ${({ variant, theme }) => (isDisabledVariant(variant) ? 'box-shadow: none;' : `box-shadow: ${theme.shadows.xs};`)}\n  &:hover {\n    ${({ variant }) => (!isDisabledVariant(variant) ? 'box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6);' : '')}\n  }\n  ${xStyledCommonProps}\n`;\n\nconst DSCardV3: React.ComponentType<DSCardV3T.Props> = (props) => {\n  const { propsWithDefault, gridProps, resolvedVariant } = useCardV3(props);\n  return (\n    <StyledWrapper\n      getOwnerProps={() => propsWithDefault}\n      getOwnerPropsArguments={() => ({})}\n      variant={resolvedVariant}\n      {...gridProps}\n    >\n      {propsWithDefault.children}\n    </StyledWrapper>\n  );\n};\n\nDSCardV3.displayName = DSCardV3Name;\nconst DSCardV3WithSchema = describe(DSCardV3);\nDSCardV3WithSchema.propTypes = DSCardV3PropTypesSchema;\n\nexport { DSCardV3, DSCardV3WithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC0DnB;AAzDJ,SAAS,gBAAgB;AACzB,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,YAAY;AACrB,SAAyB,+BAA+B;AACxD,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB,cAAc,gBAAgB;AAKvD,MAAM,oBAAoB,CAAC,YACzB,YAAY,SAAS,YAAY,YAAY,SAAS;AACxD,MAAM,oBAAoB,CAAC,YACzB,YAAY,SAAS,YAAY,YAAY,SAAS;AAExD,MAAM,gBAAgB,OAAO,MAAM,EAAE,MAAM,cAAc,MAAM,eAAe,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,MAK9E,CAAC,EAAE,SAAS,MAAM,MAAO,kBAAkB,OAAO,IAAI,MAAM,OAAO,MAAM,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK,CAAE;AAAA;AAAA,IAEhH,CAAC,EAAE,SAAS,MAAM,MAAM;AACxB,MAAI,CAAC,kBAAkB,OAAO,EAAG,QAAO;AACxC,QAAM,cAAc,kBAAkB,OAAO,IAAI,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,MAAM,KAAK;AACvG,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAQsB,WAAW;AAAA;AAAA;AAG1C,CAAC;AAAA;AAAA;AAAA,IAGC,CAAC,EAAE,SAAS,MAAM,MAAM;AACxB,MAAI,CAAC,kBAAkB,OAAO,EAAG,QAAO,qBAAqB,MAAM,OAAO,QAAQ,KAAK,CAAC;AACxF,MAAI,kBAAkB,OAAO;AAC3B,WAAO,qBAAqB,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,oBACzC,MAAM,OAAO,QAAQ,KAAK,CAAC;AAC3C,SAAO,qBAAqB,MAAM,OAAO,QAAQ,KAAK,CAAC;AACzD,CAAC;AAAA;AAAA,IAEC,CAAC,EAAE,SAAS,MAAM,MAAO,kBAAkB,OAAO,IAAI,sBAAsB,eAAe,MAAM,QAAQ,EAAE,GAAI;AAAA;AAAA,MAE7G,CAAC,EAAE,QAAQ,MAAO,CAAC,kBAAkB,OAAO,IAAI,gDAAgD,EAAG;AAAA;AAAA,IAErG,kBAAkB;AAAA;AAGtB,MAAM,WAAiD,CAAC,UAAU;AAChE,QAAM,EAAE,kBAAkB,WAAW,gBAAgB,IAAI,UAAU,KAAK;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe,MAAM;AAAA,MACrB,wBAAwB,OAAO,CAAC;AAAA,MAChC,SAAS;AAAA,MACR,GAAG;AAAA,MAEH,2BAAiB;AAAA;AAAA,EACpB;AAEJ;AAEA,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
   "names": []
 }

package/dist/esm/config/useCardV3.js

@@ -4,19 +4,29 @@ import { useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
 import React2 from "react";
 import { uid } from "uid";
 import { DSCardV3PropTypes, defaultProps } from "../react-desc-prop-types.js";
+import { Variants } from "../constants/index.js";
 import { useValidateProps } from "./useValidateProps.js";
+const resolveVariant = (variant, disabled) => {
+  const base = variant ?? Variants.DEFAULT;
+  if (!disabled) return base;
+  if (base === Variants.ACCENTED || base === Variants.ACCENTED_DISABLED) return Variants.ACCENTED_DISABLED;
+  return Variants.DISABLED;
+};
 const useCardV3 = (propsFromUser) => {
   const propsWithDefault = useMemoMergePropsWithDefault(propsFromUser, defaultProps);
   useValidateProps(propsWithDefault, DSCardV3PropTypes);
-  const gridProps = getGridProps(propsWithDefault);
+  const { disabled, variant, ...gridInputProps } = propsWithDefault;
+  const resolvedVariant = resolveVariant(variant, disabled);
+  const gridProps = getGridProps(gridInputProps);
   const instanceUid = React2.useMemo(() => uid(5), []);
   return React2.useMemo(
     () => ({
       propsWithDefault,
       gridProps,
+      resolvedVariant,
       instanceUid
     }),
-    [propsWithDefault, gridProps, instanceUid]
+    [propsWithDefault, gridProps, resolvedVariant, instanceUid]
   );
 };
 export {

package/dist/esm/config/useCardV3.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useCardV3.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { getGridProps } from '@elliemae/ds-grid';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { uid } from 'uid';\nimport { DSCardV3PropTypes, defaultProps, type DSCardV3T } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface CardV3CTX {\n  propsWithDefault: DSCardV3T.InternalProps;\n  gridProps: ReturnType<typeof getGridProps>;\n  instanceUid: string;\n}\n\nexport const useCardV3 = (propsFromUser: DSCardV3T.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSCardV3T.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSCardV3PropTypes);\n  // =============================================================================\n  // WE inherit the global attributes and xstyled props from GRID\n  // =============================================================================\n  const gridProps = getGridProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const instanceUid = React.useMemo(() => uid(5), []);\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      gridProps,\n      instanceUid,\n    }),\n    [propsWithDefault, gridProps, instanceUid],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,oBAAoB;AAC7B,SAAS,oCAAoC;AAC7C,OAAOA,YAAW;AAClB,SAAS,WAAW;AACpB,SAAS,mBAAmB,oBAAoC;AAChE,SAAS,wBAAwB;AAQ1B,MAAM,YAAY,CAAC,kBAAmC;AAI3D,QAAM,mBAAmB,6BAAsD,eAAe,YAAY;AAC1G,mBAAiB,kBAAkB,iBAAiB;AAIpD,QAAM,YAAY,aAAa,gBAAgB;AAI/C,QAAM,cAAcA,OAAM,QAAQ,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;AAElD,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,WAAW,WAAW;AAAA,EAC3C;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { getGridProps } from '@elliemae/ds-grid';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { uid } from 'uid';\nimport { DSCardV3PropTypes, defaultProps, type DSCardV3T } from '../react-desc-prop-types.js';\nimport { Variants } from '../constants/index.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface CardV3CTX {\n  propsWithDefault: DSCardV3T.InternalProps;\n  gridProps: ReturnType<typeof getGridProps>;\n  resolvedVariant: DSCardV3T.VariantT;\n  instanceUid: string;\n}\n\n// Resolves the visual variant, folding the deprecated `disabled` prop into the variant value.\n// A non-interactive card can never carry an HTML `disabled` attribute (PUI-17888), so \"disabled\"\n// is expressed exclusively through the variant: a disabled card is just a variant that looks muted.\nconst resolveVariant = (variant: DSCardV3T.VariantT | undefined, disabled: boolean | undefined): DSCardV3T.VariantT => {\n  const base = variant ?? Variants.DEFAULT;\n  if (!disabled) return base;\n  if (base === Variants.ACCENTED || base === Variants.ACCENTED_DISABLED) return Variants.ACCENTED_DISABLED;\n  return Variants.DISABLED;\n};\n\nexport const useCardV3 = (propsFromUser: DSCardV3T.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSCardV3T.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSCardV3PropTypes);\n  // =============================================================================\n  // RESOLVE THE VISUAL VARIANT and feed GRID only the props it owns.\n  // `disabled` and `variant` are split off here: `disabled` must never reach the DOM (invalid on a\n  // non-interactive container \u2014 PUI-17888), and `variant` is forwarded to the styled root explicitly.\n  // =============================================================================\n  const { disabled, variant, ...gridInputProps } = propsWithDefault;\n  const resolvedVariant = resolveVariant(variant, disabled);\n  const gridProps = getGridProps(gridInputProps);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const instanceUid = React.useMemo(() => uid(5), []);\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      gridProps,\n      resolvedVariant,\n      instanceUid,\n    }),\n    [propsWithDefault, gridProps, resolvedVariant, instanceUid],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,oBAAoB;AAC7B,SAAS,oCAAoC;AAC7C,OAAOA,YAAW;AAClB,SAAS,WAAW;AACpB,SAAS,mBAAmB,oBAAoC;AAChE,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AAYjC,MAAM,iBAAiB,CAAC,SAAyC,aAAsD;AACrH,QAAM,OAAO,WAAW,SAAS;AACjC,MAAI,CAAC,SAAU,QAAO;AACtB,MAAI,SAAS,SAAS,YAAY,SAAS,SAAS,kBAAmB,QAAO,SAAS;AACvF,SAAO,SAAS;AAClB;AAEO,MAAM,YAAY,CAAC,kBAAmC;AAI3D,QAAM,mBAAmB,6BAAsD,eAAe,YAAY;AAC1G,mBAAiB,kBAAkB,iBAAiB;AAMpD,QAAM,EAAE,UAAU,SAAS,GAAG,eAAe,IAAI;AACjD,QAAM,kBAAkB,eAAe,SAAS,QAAQ;AACxD,QAAM,YAAY,aAAa,cAAc;AAI7C,QAAM,cAAcA,OAAM,QAAQ,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;AAElD,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,WAAW,iBAAiB,WAAW;AAAA,EAC5D;AACF;",
   "names": ["React"]
 }

package/dist/esm/constants/index.js

@@ -6,7 +6,9 @@ const DSCardV3FooterName = "DSCardv3footer";
 const DSCardV3BodyName = "DSCardv3body";
 const Variants = {
   DEFAULT: "default",
-  ACCENTED: "accented"
+  ACCENTED: "accented",
+  DISABLED: "disabled",
+  ACCENTED_DISABLED: "accented-disabled"
 };
 const CARD_V_3_SLOTS_PARTS = {
   ROOT: { ROOT: "root" },

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSCardV3Name = 'DSCardv3';\nexport const DSCardV3HeaderName = 'DSCardv3header';\nexport const DSCardV3FooterName = 'DSCardv3footer';\nexport const DSCardV3BodyName = 'DSCardv3body';\n\nexport const Variants = {\n  DEFAULT: 'default',\n  ACCENTED: 'accented',\n} as const;\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\n\nexport const CARD_V_3_SLOTS_PARTS = {\n  ROOT: { ROOT: 'root' },\n  HEADER: { HEADER: 'header' },\n  BODY: { BODY: 'body' },\n  FOOTER: { FOOTER: 'footer' },\n} as const;\n\nexport const CARD_V_3_SLOTS = {\n  ROOT: 'root',\n  HEADER: 'header',\n  BODY: 'body',\n  FOOTER: 'footer',\n} as const;\n\n// we are giving \"component_name_data_testid\" to avoid errors on duplicate exports variables in aggregators\nexport const CARD_V_3_DATA_TESTID = slotObjectToDataTestIds(DSCardV3Name, CARD_V_3_SLOTS);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,eAAe;AACrB,MAAM,qBAAqB;AAC3B,MAAM,qBAAqB;AAC3B,MAAM,mBAAmB;AAEzB,MAAM,WAAW;AAAA,EACtB,SAAS;AAAA,EACT,UAAU;AACZ;AAIO,MAAM,uBAAuB;AAAA,EAClC,MAAM,EAAE,MAAM,OAAO;AAAA,EACrB,QAAQ,EAAE,QAAQ,SAAS;AAAA,EAC3B,MAAM,EAAE,MAAM,OAAO;AAAA,EACrB,QAAQ,EAAE,QAAQ,SAAS;AAC7B;AAEO,MAAM,iBAAiB;AAAA,EAC5B,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AACV;AAGO,MAAM,uBAAuB,wBAAwB,cAAc,cAAc;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSCardV3Name = 'DSCardv3';\nexport const DSCardV3HeaderName = 'DSCardv3header';\nexport const DSCardV3FooterName = 'DSCardv3footer';\nexport const DSCardV3BodyName = 'DSCardv3body';\n\nexport const Variants = {\n  DEFAULT: 'default',\n  ACCENTED: 'accented',\n  DISABLED: 'disabled',\n  ACCENTED_DISABLED: 'accented-disabled',\n} as const;\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\n\nexport const CARD_V_3_SLOTS_PARTS = {\n  ROOT: { ROOT: 'root' },\n  HEADER: { HEADER: 'header' },\n  BODY: { BODY: 'body' },\n  FOOTER: { FOOTER: 'footer' },\n} as const;\n\nexport const CARD_V_3_SLOTS = {\n  ROOT: 'root',\n  HEADER: 'header',\n  BODY: 'body',\n  FOOTER: 'footer',\n} as const;\n\n// we are giving \"component_name_data_testid\" to avoid errors on duplicate exports variables in aggregators\nexport const CARD_V_3_DATA_TESTID = slotObjectToDataTestIds(DSCardV3Name, CARD_V_3_SLOTS);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,eAAe;AACrB,MAAM,qBAAqB;AAC3B,MAAM,qBAAqB;AAC3B,MAAM,mBAAmB;AAEzB,MAAM,WAAW;AAAA,EACtB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAIO,MAAM,uBAAuB;AAAA,EAClC,MAAM,EAAE,MAAM,OAAO;AAAA,EACrB,QAAQ,EAAE,QAAQ,SAAS;AAAA,EAC3B,MAAM,EAAE,MAAM,OAAO;AAAA,EACrB,QAAQ,EAAE,QAAQ,SAAS;AAC7B;AAEO,MAAM,iBAAiB;AAAA,EAC5B,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AACV;AAGO,MAAM,uBAAuB,wBAAwB,cAAc,cAAc;",
   "names": []
 }

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

@@ -15,7 +15,7 @@ const DSCardV3PropTypes = {
   ...xstyledPropTypes,
   variant: PropTypes.oneOf(Object.values(Variants)).description("The variant of the card"),
   children: PropTypes.any.description("The content of the card"),
-  disabled: PropTypes.bool.description("If true, the card will be disabled")
+  disabled: PropTypes.bool.description('Deprecated. Use variant="disabled" or variant="accented-disabled" instead.').deprecated({ version: "4.x", message: 'use variant="disabled" or variant="accented-disabled" instead' })
 };
 const DSCardV3PropTypesSchema = DSCardV3PropTypes;
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { type DSGridT, DSGridPropTypes } from '@elliemae/ds-grid';\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 { CARD_V_3_SLOTS_PARTS, DSCardV3Name, Variants } from './constants/index.js';\n\nexport declare namespace DSCardV3T {\n  type Keys = keyof typeof Variants;\n  export type VariantT = (typeof Variants)[Keys];\n\n  export type SlotFunctionArguments = {\n    dsCardv3Root: () => object;\n  };\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {}\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSCardV3Name, typeof CARD_V_3_SLOTS_PARTS.ROOT> {\n    children?: React.ReactNode;\n    disabled?: boolean;\n    variant?: VariantT;\n  }\n\n  export interface Props\n    extends OptionalProps,\n      Partial<DefaultProps>,\n      Omit<\n        GlobalAttributesT<HTMLDivElement>,\n        // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents, @typescript-eslint/no-duplicate-type-constituents\n        keyof OptionalProps | keyof DefaultProps | keyof XstyledProps | keyof RequiredProps | keyof DSGridT.Props\n      >,\n      XstyledProps,\n      RequiredProps,\n      DSGridT.Props {\n    'data-testid'?: string;\n    innerRef?: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n  }\n\n  export interface InternalProps\n    extends OptionalProps,\n      DefaultProps,\n      Omit<\n        GlobalAttributesT<HTMLDivElement>,\n        // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents, @typescript-eslint/no-duplicate-type-constituents\n        keyof OptionalProps | keyof DefaultProps | keyof XstyledProps | keyof RequiredProps | keyof DSGridT.Props\n      >,\n      XstyledProps,\n      RequiredProps,\n      DSGridT.Props {\n    'data-testid'?: string;\n    innerRef?: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n  }\n}\n\nexport const defaultProps: DSCardV3T.DefaultProps = {};\n\nexport const DSCardV3PropTypes: DSPropTypesSchema<Omit<DSCardV3T.Props, 'data-testid'>> = {\n  ...DSGridPropTypes,\n  ...getPropsPerSlotPropTypes(DSCardV3Name, CARD_V_3_SLOTS_PARTS.ROOT),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  variant: PropTypes.oneOf(Object.values(Variants)).description('The variant of the card'),\n  children: PropTypes.any.description('The content of the card'),\n  disabled: PropTypes.bool.description('If true, the card will be disabled'),\n};\n\nexport const DSCardV3PropTypesSchema = DSCardV3PropTypes as unknown as ValidationMap<DSCardV3T.Props>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAuB,uBAAuB;AAE9C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,sBAAsB,cAAc,gBAAgB;AAoDtD,MAAM,eAAuC,CAAC;AAE9C,MAAM,oBAA6E;AAAA,EACxF,GAAG;AAAA,EACH,GAAG,yBAAyB,cAAc,qBAAqB,IAAI;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,MAAM,OAAO,OAAO,QAAQ,CAAC,EAAE,YAAY,yBAAyB;AAAA,EACvF,UAAU,UAAU,IAAI,YAAY,yBAAyB;AAAA,EAC7D,UAAU,UAAU,KAAK,YAAY,oCAAoC;AAC3E;AAEO,MAAM,0BAA0B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { type DSGridT, DSGridPropTypes } from '@elliemae/ds-grid';\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 { CARD_V_3_SLOTS_PARTS, DSCardV3Name, Variants } from './constants/index.js';\n\nexport declare namespace DSCardV3T {\n  type Keys = keyof typeof Variants;\n  export type VariantT = (typeof Variants)[Keys];\n\n  export type SlotFunctionArguments = {\n    dsCardv3Root: () => object;\n  };\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {}\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSCardV3Name, typeof CARD_V_3_SLOTS_PARTS.ROOT> {\n    children?: React.ReactNode;\n    /**\n     * @deprecated v4.x \u2014 use `variant=\"disabled\"` or `variant=\"accented-disabled\"` instead.\n     * A non-interactive card must not carry an HTML `disabled` attribute (PUI-17888); the disabled\n     * look is now a visual variant. This prop is still honoured and resolved to the matching variant.\n     */\n    disabled?: boolean;\n    variant?: VariantT;\n  }\n\n  export interface Props\n    extends OptionalProps,\n      Partial<DefaultProps>,\n      Omit<\n        GlobalAttributesT<HTMLDivElement>,\n        // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents, @typescript-eslint/no-duplicate-type-constituents\n        keyof OptionalProps | keyof DefaultProps | keyof XstyledProps | keyof RequiredProps | keyof DSGridT.Props\n      >,\n      XstyledProps,\n      RequiredProps,\n      DSGridT.Props {\n    'data-testid'?: string;\n    innerRef?: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n  }\n\n  export interface InternalProps\n    extends OptionalProps,\n      DefaultProps,\n      Omit<\n        GlobalAttributesT<HTMLDivElement>,\n        // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents, @typescript-eslint/no-duplicate-type-constituents\n        keyof OptionalProps | keyof DefaultProps | keyof XstyledProps | keyof RequiredProps | keyof DSGridT.Props\n      >,\n      XstyledProps,\n      RequiredProps,\n      DSGridT.Props {\n    'data-testid'?: string;\n    innerRef?: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n  }\n}\n\nexport const defaultProps: DSCardV3T.DefaultProps = {};\n\nexport const DSCardV3PropTypes: DSPropTypesSchema<Omit<DSCardV3T.Props, 'data-testid'>> = {\n  ...DSGridPropTypes,\n  ...getPropsPerSlotPropTypes(DSCardV3Name, CARD_V_3_SLOTS_PARTS.ROOT),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  variant: PropTypes.oneOf(Object.values(Variants)).description('The variant of the card'),\n  children: PropTypes.any.description('The content of the card'),\n  disabled: PropTypes.bool\n    .description('Deprecated. Use variant=\"disabled\" or variant=\"accented-disabled\" instead.')\n    .deprecated({ version: '4.x', message: 'use variant=\"disabled\" or variant=\"accented-disabled\" instead' }),\n};\n\nexport const DSCardV3PropTypesSchema = DSCardV3PropTypes as unknown as ValidationMap<DSCardV3T.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAuB,uBAAuB;AAE9C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,sBAAsB,cAAc,gBAAgB;AAyDtD,MAAM,eAAuC,CAAC;AAE9C,MAAM,oBAA6E;AAAA,EACxF,GAAG;AAAA,EACH,GAAG,yBAAyB,cAAc,qBAAqB,IAAI;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,MAAM,OAAO,OAAO,QAAQ,CAAC,EAAE,YAAY,yBAAyB;AAAA,EACvF,UAAU,UAAU,IAAI,YAAY,yBAAyB;AAAA,EAC7D,UAAU,UAAU,KACjB,YAAY,4EAA4E,EACxF,WAAW,EAAE,SAAS,OAAO,SAAS,gEAAgE,CAAC;AAC5G;AAEO,MAAM,0BAA0B;",
   "names": []
 }

package/dist/esm/typescript-testing/typescript-dscard-v3-valid.js

@@ -56,6 +56,10 @@ const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx(DSCardV3, { ...testExplicitDefinition }),
   /* @__PURE__ */ jsx(DSCardV3, { ...testInferedTypeCompatibility }),
   /* @__PURE__ */ jsx(DSCardV3, { ...testDefinitionAsConst }),
-  /* @__PURE__ */ jsx(DSCardV3, { "data-testid": "ds-card-v3-id", children: "Card Label" })
+  /* @__PURE__ */ jsx(DSCardV3, { "data-testid": "ds-card-v3-id", children: "Card Label" }),
+  /* @__PURE__ */ jsx(DSCardV3, { variant: "default", children: "Card Label" }),
+  /* @__PURE__ */ jsx(DSCardV3, { variant: "accented", children: "Card Label" }),
+  /* @__PURE__ */ jsx(DSCardV3, { variant: "disabled", children: "Card Label" }),
+  /* @__PURE__ */ jsx(DSCardV3, { variant: "accented-disabled", children: "Card Label" })
 ] });
 //# sourceMappingURL=typescript-dscard-v3-valid.js.map

package/dist/esm/typescript-testing/typescript-dscard-v3-valid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-dscard-v3-valid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { createRef } from 'react';\nimport { DSCardV3 } from '../index.js';\nimport type { DSCardV3T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSCardV3T.Props;\ntype ComponentPropsInternals = DSCardV3T.InternalProps;\ntype ComponentPropsDefaultProps = DSCardV3T.DefaultProps;\ntype ComponentPropsOptionalProps = DSCardV3T.OptionalProps;\ntype ComponentPropsRequiredProps = DSCardV3T.RequiredProps;\n\nconst ref = createRef<HTMLDivElement>();\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  children: 'Button Label',\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  children: 'Card Label',\n  disabled: false,\n  variant: 'accented',\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  'data-testid': 'ds-cardv3',\n};\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  'data-testid': 'ds-card-v3-id',\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  'data-testid': 'ds-card-v3-id',\n  children: 'Button Label',\n  innerRef: ref,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  'data-testid': 'ds-card-v3-id',\n  children: 'Button Label',\n  variant: 'accented',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  'data-testid': 'ds-card-v3-id',\n  children: 'Button Label',\n  variant: 'accented',\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSCardV3 {...testExplicitDefinition} />\n    <DSCardV3 {...testInferedTypeCompatibility} />\n    <DSCardV3 {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSCardV3 data-testid=\"ds-card-v3-id\">Card Label</DSCardV3>\n  </>\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC0ErB,mBAEE,KAFF;AAzEF,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AAUzB,MAAM,MAAM,UAA0B;AAEtC,MAAM,oBAAiD;AAAA,EACrD,UAAU;AACZ;AACA,MAAM,oBAAiD;AAAA,EACrD,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AACX;AAIA,MAAM,sBAA2D;AAAA,EAC/D,eAAe;AACjB;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,eAAe;AACjB;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAU;AACZ;AAGA,MAAM,+BAA+B;AAAA,EACnC,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS;AACX;AAEA,MAAM,wBAAwB;AAAA,EAC5B,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS;AACX;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,YAAU,GAAG,wBAAwB;AAAA,EACtC,oBAAC,YAAU,GAAG,8BAA8B;AAAA,EAC5C,oBAAC,YAAU,GAAG,uBAAuB;AAAA,EAErC,oBAAC,YAAS,eAAY,iBAAgB,wBAAU;AAAA,GAClD;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { createRef } from 'react';\nimport { DSCardV3 } from '../index.js';\nimport type { DSCardV3T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSCardV3T.Props;\ntype ComponentPropsInternals = DSCardV3T.InternalProps;\ntype ComponentPropsDefaultProps = DSCardV3T.DefaultProps;\ntype ComponentPropsOptionalProps = DSCardV3T.OptionalProps;\ntype ComponentPropsRequiredProps = DSCardV3T.RequiredProps;\n\nconst ref = createRef<HTMLDivElement>();\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  children: 'Button Label',\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  children: 'Card Label',\n  disabled: false,\n  variant: 'accented',\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  'data-testid': 'ds-cardv3',\n};\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  'data-testid': 'ds-card-v3-id',\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  'data-testid': 'ds-card-v3-id',\n  children: 'Button Label',\n  innerRef: ref,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  'data-testid': 'ds-card-v3-id',\n  children: 'Button Label',\n  variant: 'accented',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  'data-testid': 'ds-card-v3-id',\n  children: 'Button Label',\n  variant: 'accented',\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSCardV3 {...testExplicitDefinition} />\n    <DSCardV3 {...testInferedTypeCompatibility} />\n    <DSCardV3 {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSCardV3 data-testid=\"ds-card-v3-id\">Card Label</DSCardV3>\n    {/* all four variant values are accepted */}\n    <DSCardV3 variant=\"default\">Card Label</DSCardV3>\n    <DSCardV3 variant=\"accented\">Card Label</DSCardV3>\n    <DSCardV3 variant=\"disabled\">Card Label</DSCardV3>\n    <DSCardV3 variant=\"accented-disabled\">Card Label</DSCardV3>\n  </>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC0ErB,mBAEE,KAFF;AAzEF,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AAUzB,MAAM,MAAM,UAA0B;AAEtC,MAAM,oBAAiD;AAAA,EACrD,UAAU;AACZ;AACA,MAAM,oBAAiD;AAAA,EACrD,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AACX;AAIA,MAAM,sBAA2D;AAAA,EAC/D,eAAe;AACjB;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,eAAe;AACjB;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAU;AACZ;AAGA,MAAM,+BAA+B;AAAA,EACnC,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS;AACX;AAEA,MAAM,wBAAwB;AAAA,EAC5B,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS;AACX;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,YAAU,GAAG,wBAAwB;AAAA,EACtC,oBAAC,YAAU,GAAG,8BAA8B;AAAA,EAC5C,oBAAC,YAAU,GAAG,uBAAuB;AAAA,EAErC,oBAAC,YAAS,eAAY,iBAAgB,wBAAU;AAAA,EAEhD,oBAAC,YAAS,SAAQ,WAAU,wBAAU;AAAA,EACtC,oBAAC,YAAS,SAAQ,YAAW,wBAAU;AAAA,EACvC,oBAAC,YAAS,SAAQ,YAAW,wBAAU;AAAA,EACvC,oBAAC,YAAS,SAAQ,qBAAoB,wBAAU;AAAA,GAClD;",
   "names": []
 }

package/dist/types/config/useCardV3.d.ts

@@ -3,10 +3,12 @@ import { type DSCardV3T } from '../react-desc-prop-types.js';
 export interface CardV3CTX {
     propsWithDefault: DSCardV3T.InternalProps;
     gridProps: ReturnType<typeof getGridProps>;
+    resolvedVariant: DSCardV3T.VariantT;
     instanceUid: string;
 }
 export declare const useCardV3: (propsFromUser: DSCardV3T.Props) => {
     propsWithDefault: DSCardV3T.InternalProps;
     gridProps: Partial<import("@elliemae/ds-grid").DSGridT.Props>;
+    resolvedVariant: DSCardV3T.VariantT;
     instanceUid: string;
 };

package/dist/types/constants/index.d.ts

@@ -5,6 +5,8 @@ export declare const DSCardV3BodyName = "DSCardv3body";
 export declare const Variants: {
     readonly DEFAULT: "default";
     readonly ACCENTED: "accented";
+    readonly DISABLED: "disabled";
+    readonly ACCENTED_DISABLED: "accented-disabled";
 };
 export declare const CARD_V_3_SLOTS_PARTS: {
     readonly ROOT: {

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

@@ -14,6 +14,11 @@ export declare namespace DSCardV3T {
     }
     interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSCardV3Name, typeof CARD_V_3_SLOTS_PARTS.ROOT> {
         children?: React.ReactNode;
+        /**
+         * @deprecated v4.x — use `variant="disabled"` or `variant="accented-disabled"` instead.
+         * A non-interactive card must not carry an HTML `disabled` attribute (PUI-17888); the disabled
+         * look is now a visual variant. This prop is still honoured and resolved to the matching variant.
+         */
         disabled?: boolean;
         variant?: VariantT;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-card-v3",
-  "version": "3.70.0-next.27",
+  "version": "3.70.0-next.28",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Card V3",
   "files": [
@@ -37,18 +37,18 @@
   },
   "dependencies": {
     "uid": "^2.0.2",
-    "@elliemae/ds-grid": "3.70.0-next.27",
-    "@elliemae/ds-props-helpers": "3.70.0-next.27",
-    "@elliemae/ds-system": "3.70.0-next.27"
+    "@elliemae/ds-grid": "3.70.0-next.28",
+    "@elliemae/ds-props-helpers": "3.70.0-next.28",
+    "@elliemae/ds-system": "3.70.0-next.28"
   },
   "devDependencies": {
     "@elliemae/pui-theme": "~2.13.0",
     "jest": "^30.0.0",
     "styled-components": "~5.3.9",
     "styled-system": "^5.1.5",
-    "@elliemae/ds-monorepo-devops": "3.70.0-next.27",
-    "@elliemae/ds-test-utils": "3.70.0-next.27",
-    "@elliemae/ds-typescript-helpers": "3.70.0-next.27"
+    "@elliemae/ds-monorepo-devops": "3.70.0-next.28",
+    "@elliemae/ds-typescript-helpers": "3.70.0-next.28",
+    "@elliemae/ds-test-utils": "3.70.0-next.28"
   },
   "peerDependencies": {
     "@elliemae/pui-theme": "~2.13.0",