@elliemae/ds-card-v2 3.22.0-next.3 → 3.22.0-next.30

package/dist/cjs/CardV3.js

@@ -0,0 +1,189 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var CardV3_exports = {};
+__export(CardV3_exports, {
+  Card: () => Card,
+  CardActionArea: () => CardActionArea,
+  CardContent: () => CardContent,
+  CardFooter: () => CardFooter,
+  CardSelectIndicator: () => CardSelectIndicator,
+  DSCardV3DataTestIds: () => DSCardV3DataTestIds,
+  DSCardV3Name: () => DSCardV3Name,
+  DSCardV3Slots: () => DSCardV3Slots,
+  StyledButtonCard: () => StyledButtonCard,
+  StyledCard: () => StyledCard,
+  StyledCardDisabled: () => StyledCardDisabled,
+  StyledCardError: () => StyledCardError,
+  StyledCardSingleIndicator: () => StyledCardSingleIndicator,
+  defaultProps: () => defaultProps
+});
+module.exports = __toCommonJS(CardV3_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_lodash = require("lodash");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_controlled_form = require("@elliemae/ds-controlled-form");
+var import_ds_utilities = require("@elliemae/ds-utilities");
+const DSCardV3Name = "DSCardV3";
+const DSCardV3Slots = {
+  ACTION_AREA: "action-area"
+};
+const DSCardV3DataTestIds = (0, import_ds_system.slotObjectToDataTestIds)(DSCardV3Name, DSCardV3Slots);
+const defaultProps = {
+  hasError: false
+};
+const CardActionArea = (0, import_ds_system.styled)("button", {
+  name: DSCardV3Name,
+  slot: DSCardV3Slots.ACTION_AREA
+})`
+  border: none;
+  background-color: transparent;
+  width: 0px;
+  height: 0px;
+  padding: 0;
+  &:focus {
+    outline: none;
+  }
+  text-align: unset;
+`;
+const StyledCard = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+  background-color: ${({ theme, isOverlay }) => isOverlay ? theme.colors.neutral["080"] : "white"};
+  outline-offset: -2px;
+  * {
+    color: ${({ theme, isOverlay }) => isOverlay ? theme.colors.neutral["500"] : "inherit"};
+  }
+`;
+const StyledButtonCard = (0, import_ds_system.styled)(StyledCard)`
+  cursor: pointer;
+`;
+const StyledCardError = (0, import_ds_system.styled)(StyledCard)`
+  outline: ${({ theme }) => `2px solid ${theme.colors.danger[900]}`};
+`;
+const StyledCardSingleIndicator = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+  width: ${({ isSelected }) => isSelected ? "6px" : "4px"};
+  align-self: normal;
+  background-color: ${({ theme, isSelected }) => isSelected ? theme.colors.brand["700"] : theme.colors.brand["300"]};
+  transition: all 0.1s ease-in-out;
+`;
+const StyledCardDisabled = (0, import_ds_system.styled)(StyledCard)`
+  cursor: not-allowed;
+  user-select: none;
+  opacity: 0.5;
+  ${StyledCardSingleIndicator} {
+    background-color: ${({ theme, isSelected }) => isSelected ? theme.colors.neutral["800"] : theme.colors.neutral["080"]};
+  }
+
+  ${CardActionArea} {
+    pointer-events: none;
+  }
+`;
+const CardContent = (0, import_ds_system.styled)(import_ds_grid.Grid)``;
+const CardFooter = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral["200"]};
+`;
+const CardSelectIndicator = (props) => {
+  const { isSelected, isMultiSelect } = props;
+  if (isMultiSelect) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_controlled_form.PresentationalRadio, { checked: isSelected, "aria-label": "@todo" }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCardSingleIndicator, { isSelected });
+};
+const StyledFocusRing = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+  width: 100%;
+  height: 100%;
+  outline-offset: -1px;
+  outline: ${({ showFocusRing, hasError, theme }) => {
+  if (showFocusRing) {
+    return `2px solid ${theme.colors.brand[700]}`;
+  }
+  if (hasError) {
+    return `2px solid ${theme.colors.danger[900]}`;
+  }
+  return "none";
+}};
+`;
+const FocusRing = (props) => {
+  const { target, children, hasError } = props;
+  const [showFocusRing, setShowFocusingRing] = import_react.default.useState(false);
+  const handleOnFocus = import_react.default.useCallback(
+    (e) => {
+      if (e.target.matches(target)) {
+        setShowFocusingRing(true);
+      }
+    },
+    [target]
+  );
+  const handleOnBlur = import_react.default.useCallback(
+    (e) => {
+      if (e.target.matches(target)) {
+        setShowFocusingRing(false);
+      }
+    },
+    [target]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StyledFocusRing,
+    {
+      hasError,
+      onFocusCapture: handleOnFocus,
+      onBlurCapture: handleOnBlur,
+      showFocusRing,
+      children
+    }
+  );
+};
+const Card = (props) => {
+  const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, defaultProps);
+  const { children, hasError, disabled, isOverlay, onClick } = propsWithDefault;
+  const StyledCardContainer = (0, import_react.useMemo)(() => {
+    if (onClick && !disabled) {
+      return StyledButtonCard;
+    }
+    if (disabled) {
+      return StyledCardDisabled;
+    }
+    return StyledCard;
+  }, [disabled, onClick]);
+  const globalsAttrs = (0, import_lodash.omit)((0, import_ds_utilities.useGetGlobalAttributes)(propsWithDefault), ["cols", "rows", "wrap"]);
+  const getOwnerProps = (0, import_react.useCallback)(() => propsWithDefault, [propsWithDefault]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCardContainer, { border: "solid 1px neutral-100", boxShadow: "xs", isOverlay, ...globalsAttrs, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FocusRing, { target: `[data-testid=${DSCardV3DataTestIds.ACTION_AREA}]`, hasError, children: [
+    onClick ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      CardActionArea,
+      {
+        disabled,
+        "data-testid": DSCardV3DataTestIds.ACTION_AREA,
+        getOwnerProps
+      }
+    ) : null,
+    children
+  ] }) });
+};
+//# sourceMappingURL=CardV3.js.map

package/dist/cjs/CardV3.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/CardV3.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\n/* eslint-disable react/display-name */\nimport React, { useMemo, useCallback } from 'react';\nimport { omit } from 'lodash';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled, slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { PresentationalRadio } from '@elliemae/ds-controlled-form';\n\nimport { useMemoMergePropsWithDefault, useGetGlobalAttributes, type GlobalAttributesT } from '@elliemae/ds-utilities';\n\nexport const DSCardV3Name = 'DSCardV3';\nexport const DSCardV3Slots = {\n  ACTION_AREA: 'action-area',\n};\n\nexport const DSCardV3DataTestIds = slotObjectToDataTestIds(DSCardV3Name, DSCardV3Slots);\n\ndeclare namespace CardT {\n  export interface RequiredProps {\n    children: React.ReactNode;\n  }\n\n  export interface OptinalProps {\n    isSelected?: boolean;\n    isMultiSelect?: boolean;\n    isOverlay?: boolean;\n    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  }\n\n  export interface DefaultProps {\n    hasError: boolean;\n  }\n\n  export interface Props\n    extends RequiredProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof RequiredProps>,\n      OptinalProps,\n      DefaultProps {}\n  export interface InternalProps\n    extends RequiredProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof RequiredProps>,\n      OptinalProps,\n      Partial<DefaultProps> {}\n\n  export interface CardSelectIndicatorProps {\n    isSelected?: boolean;\n    isMultiSelect?: boolean;\n  }\n}\n\nexport const defaultProps: CardT.DefaultProps = {\n  hasError: false,\n};\n\nexport const CardActionArea = styled('button', {\n  name: DSCardV3Name,\n  slot: DSCardV3Slots.ACTION_AREA,\n})`\n  border: none;\n  background-color: transparent;\n  width: 0px;\n  height: 0px;\n  padding: 0;\n  &:focus {\n    outline: none;\n  }\n  text-align: unset;\n`;\n\n// START style cards variants\nexport const StyledCard = styled(Grid)<{\n  isOverlay?: boolean;\n  onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n}>`\n  background-color: ${({ theme, isOverlay }) => (isOverlay ? theme.colors.neutral['080'] : 'white')};\n  outline-offset: -2px;\n  * {\n    color: ${({ theme, isOverlay }) => (isOverlay ? theme.colors.neutral['500'] : 'inherit')};\n  }\n`;\n\nexport const StyledButtonCard = styled(StyledCard)<{ isOverlay?: boolean }>`\n  cursor: pointer;\n`;\n\nexport const StyledCardError = styled(StyledCard)`\n  outline: ${({ theme }) => `2px solid ${theme.colors.danger[900]}`};\n`;\n\nexport const StyledCardSingleIndicator = styled(Grid)<{ isSelected?: boolean }>`\n  width: ${({ isSelected }) => (isSelected ? '6px' : '4px')};\n  align-self: normal;\n  background-color: ${({ theme, isSelected }) => (isSelected ? theme.colors.brand['700'] : theme.colors.brand['300'])};\n  transition: all 0.1s ease-in-out;\n`;\n\nexport const StyledCardDisabled = styled(StyledCard)`\n  cursor: not-allowed;\n  user-select: none;\n  opacity: 0.5;\n  ${StyledCardSingleIndicator} {\n    background-color: ${({ theme, isSelected }) =>\n      isSelected ? theme.colors.neutral['800'] : theme.colors.neutral['080']};\n  }\n\n  ${CardActionArea} {\n    pointer-events: none;\n  }\n`;\n// END style cards variants\nexport const CardContent = styled(Grid)``;\n\nexport const CardFooter = styled(Grid)`\n  border-top: 1px solid ${({ theme }) => theme.colors.neutral['200']};\n`;\n\nexport const CardSelectIndicator = (props: CardT.CardSelectIndicatorProps) => {\n  const { isSelected, isMultiSelect } = props;\n  if (isMultiSelect) {\n    return (\n      <Grid alignItems=\"center\">\n        <PresentationalRadio checked={isSelected} aria-label=\"@todo\" />\n      </Grid>\n    );\n  }\n  return <StyledCardSingleIndicator isSelected={isSelected} />;\n};\n\nconst StyledFocusRing = styled(Grid)<{ showFocusRing: boolean; hasError?: boolean }>`\n  width: 100%;\n  height: 100%;\n  outline-offset: -1px;\n  outline: ${({ showFocusRing, hasError, theme }) => {\n    if (showFocusRing) {\n      return `2px solid ${theme.colors.brand[700]}`;\n    }\n    if (hasError) {\n      return `2px solid ${theme.colors.danger[900]}`;\n    }\n    return 'none';\n  }};\n`;\n\ninterface FocusRingProps {\n  target: string;\n  children: React.ReactNode;\n  hasError?: boolean;\n}\nconst FocusRing = (props: FocusRingProps) => {\n  const { target, children, hasError } = props;\n  const [showFocusRing, setShowFocusingRing] = React.useState(false);\n  const handleOnFocus: React.FocusEventHandler<HTMLDivElement> = React.useCallback(\n    (e) => {\n      if (e.target.matches(target)) {\n        setShowFocusingRing(true);\n      }\n    },\n    [target],\n  );\n\n  const handleOnBlur: React.FocusEventHandler<HTMLDivElement> = React.useCallback(\n    (e) => {\n      if (e.target.matches(target)) {\n        setShowFocusingRing(false);\n      }\n    },\n    [target],\n  );\n  return (\n    <StyledFocusRing\n      hasError={hasError}\n      onFocusCapture={handleOnFocus}\n      onBlurCapture={handleOnBlur}\n      showFocusRing={showFocusRing}\n    >\n      {children}\n    </StyledFocusRing>\n  );\n};\n\nexport const Card: React.ComponentType<CardT.InternalProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<CardT.Props>(props, defaultProps);\n  const { children, hasError, disabled, isOverlay, onClick } = propsWithDefault;\n  const StyledCardContainer = useMemo(() => {\n    if (onClick && !disabled) {\n      return StyledButtonCard;\n    }\n    if (disabled) {\n      return StyledCardDisabled;\n    }\n    return StyledCard;\n  }, [disabled, onClick]);\n\n  const globalsAttrs = omit(useGetGlobalAttributes(propsWithDefault), ['cols', 'rows', 'wrap']);\n  const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n\n  return (\n    <StyledCardContainer border=\"solid 1px neutral-100\" boxShadow=\"xs\" isOverlay={isOverlay} {...globalsAttrs}>\n      <FocusRing target={`[data-testid=${DSCardV3DataTestIds.ACTION_AREA}]`} hasError={hasError}>\n        {onClick ? (\n          <CardActionArea\n            disabled={disabled}\n            data-testid={DSCardV3DataTestIds.ACTION_AREA}\n            getOwnerProps={getOwnerProps}\n          />\n        ) : null}\n        {children}\n      </FocusRing>\n    </StyledCardContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["React"]
+}

package/dist/cjs/DSCardV2.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/DSCardV2.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../src/DSCardV2.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { type DSCardV2T, DSCardV2PropTypesSchema } from './react-desc-prop-types.js';\nimport { useCardV2 } from './config/useCardV2.js';\nimport { DSCardV2Name, CARD_V2_DATA_TESTID } from './constants/index.js';\nimport DSTruncatedTooltipText, { TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';\nimport { DSHeader } from '@elliemae/ds-header';\nimport {\n  CardContainer,\n  LeftSection,\n  LeftAddon,\n  MainSection,\n  Description,\n  RightAddonSection,\n  RightAddon,\n  Separator,\n} from './styles.js';\n\nconst getCol = (rightAddon: DSCardV2T.OptionalProps['rightAddon']) => {\n  if (!rightAddon) return ['1fr'];\n  return ['1fr', 'auto'];\n};\n\nconst DSCardV2: React.ComponentType<DSCardV2T.Props> = (props) => {\n  const { propsWithDefault, globalProps, xstyledProps } = useCardV2(props);\n  const { hasBorder, title, leftAddon, rightAddon, description } = propsWithDefault;\n  return (\n    <TooltipTextProvider>\n      <CardContainer\n        data-testid={CARD_V2_DATA_TESTID.CARD_CONTAINER} //we must keep this explicit to avoid the breaking changes\n        {...globalProps}\n        {...xstyledProps}\n        hasBorder={hasBorder}\n        cols={getCol(rightAddon)}\n      >\n        <LeftSection>\n          {leftAddon && <LeftAddon>{leftAddon}</LeftAddon>}\n          <MainSection\n            style={{\n              maxWidth: leftAddon ? 'calc(100% - 40px)' : '100%',\n            }}\n          >\n            <DSHeader\n              data-testid={CARD_V2_DATA_TESTID.CARD_HEADER} //we must keep this explicit to avoid the breaking changes\n              fontSize=\"16px\"\n              fontWeight=\"regular\"\n              color=\"neutral.800\"\n              text={<DSTruncatedTooltipText value={title} />}\n            />\n            {description && (\n              <Description>\n                <DSTruncatedTooltipText value={description} />\n              </Description>\n            )}\n          </MainSection>\n        </LeftSection>\n        {Array.isArray(rightAddon) && (\n          <RightAddonSection>\n            {rightAddon[0] ? <RightAddon>{rightAddon[0]}</RightAddon> : null}\n            {rightAddon[1] ? (\n              <>\n                {rightAddon.length > 1 && <Separator />}\n                <RightAddon>{rightAddon[1]}</RightAddon>\n              </>\n            ) : null}\n          </RightAddonSection>\n        )}\n      </CardContainer>\n    </TooltipTextProvider>\n  );\n};\n\nDSCardV2.propTypes = DSCardV2PropTypesSchema;\nDSCardV2.displayName = DSCardV2Name;\nconst DSCardV2WithSchema = describe(DSCardV2);\nDSCardV2WithSchema.propTypes = DSCardV2PropTypesSchema;\n\nexport { DSCardV2, DSCardV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoCC;AAnCxB,0BAAyB;AACzB,mCAAwD;AACxD,uBAA0B;AAC1B,uBAAkD;AAClD,uCAA4D;AAC5D,uBAAyB;AACzB,oBASO;AAEP,MAAM,SAAS,CAAC,eAAsD;AACpE,MAAI,CAAC;AAAY,WAAO,CAAC,KAAK;AAC9B,SAAO,CAAC,OAAO,MAAM;AACvB;AAEA,MAAM,WAAiD,CAAC,UAAU;AAChE,QAAM,EAAE,kBAAkB,aAAa,aAAa,QAAI,4BAAU,KAAK;AACvE,QAAM,EAAE,WAAW,OAAO,WAAW,YAAY,YAAY,IAAI;AACjE,SACE,4CAAC,wDACC;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,qCAAoB;AAAA,MAChC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA,MAAM,OAAO,UAAU;AAAA,MAEvB;AAAA,qDAAC,6BACE;AAAA,uBAAa,4CAAC,2BAAW,qBAAU;AAAA,UACpC;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,gBACL,UAAU,YAAY,sBAAsB;AAAA,cAC9C;AAAA,cAEA;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,eAAa,qCAAoB;AAAA,oBACjC,UAAS;AAAA,oBACT,YAAW;AAAA,oBACX,OAAM;AAAA,oBACN,MAAM,4CAAC,iCAAAA,SAAA,EAAuB,OAAO,OAAO;AAAA;AAAA,gBAC9C;AAAA,gBACC,eACC,4CAAC,6BACC,sDAAC,iCAAAA,SAAA,EAAuB,OAAO,aAAa,GAC9C;AAAA;AAAA;AAAA,UAEJ;AAAA,WACF;AAAA,QACC,MAAM,QAAQ,UAAU,KACvB,6CAAC,mCACE;AAAA,qBAAW,CAAC,IAAI,4CAAC,4BAAY,qBAAW,CAAC,GAAE,IAAgB;AAAA,UAC3D,WAAW,CAAC,IACX,4EACG;AAAA,uBAAW,SAAS,KAAK,4CAAC,2BAAU;AAAA,YACrC,4CAAC,4BAAY,qBAAW,CAAC,GAAE;AAAA,aAC7B,IACE;AAAA,WACN;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ;AAEA,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,MAAM,yBAAqB,8BAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
   "names": ["DSTruncatedTooltipText"]

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../src/config/useCardV2.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../src/config/useCardV2.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React from 'react';\nimport { omit } from 'lodash';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { type DSCardV2T, DSCardV2PropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface CardV2CTX {\n  propsWithDefault: DSCardV2T.InternalProps;\n  globalProps: ReturnType<typeof useGetGlobalAttributes>;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  instanceUid: string;\n}\n\nexport const useCardV2 = (propsFromUser: DSCardV2T.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSCardV2T.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSCardV2PropTypes);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalProps = omit(useGetGlobalAttributes<DSCardV2T.InternalProps>(propsWithDefault), ['cols', 'rows', 'wrap']);\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const { id } = propsWithDefault;\n  const instanceUid = React.useMemo(() => id || uid(5), [id]);\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      globalProps,\n      xstyledProps,\n      instanceUid,\n      // ...eventHandlers,\n    }),\n    [\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      instanceUid,\n      // eventHandlers,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,oBAAqB;AACrB,0BAAyF;AACzF,iBAAoB;AACpB,mCAAgE;AAChE,8BAAiC;AAS1B,MAAM,YAAY,CAAC,kBAAmC;AAI3D,QAAM,uBAAmB,kDAAsD,eAAe,yCAAY;AAC1G,gDAAiB,kBAAkB,8CAAiB;AAIpD,QAAM,kBAAc,wBAAK,4CAAgD,gBAAgB,GAAG,CAAC,QAAQ,QAAQ,MAAM,CAAC;AACpH,QAAM,mBAAe,wCAAmB,gBAAgB;AAKxD,QAAM,EAAE,GAAG,IAAI;AACf,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,UAAM,gBAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAM1D,SAAO,aAAAA,QAAM;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/cjs/config/useValidateProps.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../src/config/useValidateProps.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../src/config/useValidateProps.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { WeakValidationMap } from 'react';\nimport { type DSCardV2T } from '../react-desc-prop-types.js';\nimport { DSCardV2Name } from '../constants/index.js';\n\nexport const useValidateProps = (props: DSCardV2T.InternalProps, propTypes: WeakValidationMap<unknown>): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSCardV2Name);\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA+C;AAG/C,uBAA6B;AAEtB,MAAM,mBAAmB,CAAC,OAAgC,cAAgD;AAE/G,0DAA+B,OAAO,WAAW,6BAAY;AAC/D;",
   "names": []

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../src/constants/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSCardV2Name = 'DSCardV2';\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\nexport const CARD_V2_SLOTS = {\n  CARD_CONTAINER: 'container',\n  LEFT_SECTION: 'left-section',\n  LEFT_ADDON: 'left-addon',\n  RIGHT_ADDON: 'right-addon',\n  RIGHT_ADDON_SECTION: 'right-addon-section',\n  SEPARATOR: 'separator',\n  MAIN_SECTION: 'main-section',\n  TITLE: 'title',\n  DESCRIPTION: 'description',\n} as const;\n\n// we are giving \"component_name_data_testid\" to avoid errors on duplicate exports variables in aggregators\nexport const CARD_V2_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSCardV2Name, CARD_V2_SLOTS),\n  CARD_CONTAINER: 'em-ds-card',\n  CARD_HEADER: 'em-ds-card-header',\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,eAAe;AAGrB,MAAM,gBAAgB;AAAA,EAC3B,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,qBAAqB;AAAA,EACrB,WAAW;AAAA,EACX,cAAc;AAAA,EACd,OAAO;AAAA,EACP,aAAa;AACf;AAGO,MAAM,sBAAsB;AAAA,EACjC,OAAG,0CAAwB,cAAc,aAAa;AAAA,EACtD,gBAAgB;AAAA,EAChB,aAAa;AACf;",
   "names": []

package/dist/cjs/index.js

@@ -17,6 +17,7 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
   // If the importer is in node compatibility mode or this is not an ESM
   // file that has been converted to a CommonJS file using a Babel-
@@ -39,4 +40,5 @@ var React = __toESM(require("react"));
 var import_DSCardV2 = require("./DSCardV2.js");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 var import_constants = require("./constants/index.js");
+__reExport(src_exports, require("./CardV3.js"), module.exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/index.ts", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport type {} from '@xstyled/system';\nexport {\n  DSCardV2,\n  DSCardV2 as CustomCard,\n  DSCardV2WithSchema,\n  DSCardV2WithSchema as DSCardCustomWithSchema,\n} from './DSCardV2.js';\nexport { type DSCardV2T } from './react-desc-prop-types.js';\nexport { CARD_V2_DATA_TESTID } from './constants/index.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,sBAKO;AACP,mCAA+B;AAC/B,uBAAoC;",
+  "sources": ["../../src/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport type {} from '@xstyled/system';\nexport {\n  DSCardV2,\n  DSCardV2 as CustomCard,\n  DSCardV2WithSchema,\n  DSCardV2WithSchema as DSCardCustomWithSchema,\n} from './DSCardV2.js';\nexport { type DSCardV2T } from './react-desc-prop-types.js';\nexport { CARD_V2_DATA_TESTID } from './constants/index.js';\nexport * from './CardV3.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,sBAKO;AACP,mCAA+B;AAC/B,uBAAoC;AACpC,wBAAc,wBAXd;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-utilities';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\n\nexport declare namespace DSCardV2T {\n  export interface RequiredProps {\n    title: string;\n  }\n\n  export interface DefaultProps {\n    hasBorder?: boolean;\n  }\n\n  export interface OptionalProps {\n    description: string;\n    leftAddon: JSX.Element;\n    rightAddon: JSX.Element | JSX.Element[];\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSCardV2T.DefaultProps = {\n  hasBorder: false,\n};\n\nexport const DSCardV2PropTypes: DSPropTypesSchema<DSCardV2T.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  /**\n   * Title of the card. requiered\n   */\n  title: PropTypes.string.isRequired.description('Title of the card. requiered'),\n  /**\n   * Description of the card. not requiered\n   */\n  description: PropTypes.string.description('Description of the card. not requiered'),\n  /**\n   * Left Addon\n   */\n  leftAddon: PropTypes.element.description('Left Addon'),\n  /**\n   * Right addon array, max elements: 2\n   */\n  rightAddon: PropTypes.array.description('Right addon array, max elements: 2'),\n  /**\n   * Wheter if the card has border or not\n   */\n  hasBorder: PropTypes.bool.description('Wheter if the card has border or not').defaultValue(false),\n};\n\nexport const DSCardV2PropTypesSchema = DSCardV2PropTypes as unknown as WeakValidationMap<DSCardV2T.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,0BAAuE;AAsChE,MAAM,eAAuC;AAAA,EAClD,WAAW;AACb;AAEO,MAAM,oBAAwD;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA;AAAA;AAAA;AAAA,EAIH,OAAO,8BAAU,OAAO,WAAW,YAAY,8BAA8B;AAAA;AAAA;AAAA;AAAA,EAI7E,aAAa,8BAAU,OAAO,YAAY,wCAAwC;AAAA;AAAA;AAAA;AAAA,EAIlF,WAAW,8BAAU,QAAQ,YAAY,YAAY;AAAA;AAAA;AAAA;AAAA,EAIrD,YAAY,8BAAU,MAAM,YAAY,oCAAoC;AAAA;AAAA;AAAA;AAAA,EAI5E,WAAW,8BAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,KAAK;AAClG;AAEO,MAAM,0BAA0B;",
   "names": []

package/dist/cjs/styles.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCardV2Name, CARD_V2_SLOTS } from './constants/index.js';\n\nconst CardContainer = styled(Grid, { name: DSCardV2Name, slot: CARD_V2_SLOTS.CARD_CONTAINER })<{ hasBorder?: boolean }>`\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 56px;\n  padding: 8px 16px;\n  position: relative;\n  border: ${({ theme, hasBorder }) => (hasBorder ? `1px solid ${theme.colors.neutral['100']}` : '')};\n  &:before {\n    content: '';\n    border-bottom: 1px solid ${(props) => props.theme.colors.neutral['100']};\n    position: absolute;\n    margin: 0 auto;\n    width: 90%;\n    bottom: 0;\n  }\n  &:last-child::before {\n    content: none;\n  }\n  ${xStyledCommonProps}\n`;\n\nconst LeftSection = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.LEFT_SECTION })`\n  display: flex;\n  align-items: center;\n`;\n\nconst LeftAddon = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.LEFT_ADDON })`\n  height: fit-content;\n  width: fit-content;\n  margin-right: 16px;\n  cursor: pointer;\n`;\n\nconst RightAddonSection = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.RIGHT_ADDON_SECTION })`\n  display: flex;\n  align-items: center;\n  width: fit-content;\n`;\n\nconst RightAddon = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.RIGHT_ADDON })`\n  height: fit-content;\n  width: fit-content;\n  cursor: pointer;\n`;\n\nconst Separator = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.SEPARATOR })`\n  width: 0px;\n  height: 24px;\n  border-right: 1px solid ${(props) => props.theme.colors.neutral['300']};\n  margin: 0 8px;\n`;\n\nconst MainSection = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.MAIN_SECTION })`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst Title = styled('h3', { name: DSCardV2Name, slot: CARD_V2_SLOTS.TITLE })`\n  margin: 0;\n  font-size: 16px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  color: ${(props) => props.theme.colors.neutral['800']};\n`;\n\nconst Description = styled('p', { name: DSCardV2Name, slot: CARD_V2_SLOTS.DESCRIPTION })`\n  margin: 0;\n  color: ${(props) => props.theme.colors.neutral['600']};\n`;\n\nexport {\n  CardContainer,\n  LeftSection,\n  LeftAddon,\n  RightAddonSection,\n  RightAddon,\n  Separator,\n  MainSection,\n  Title,\n  Description,\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAC3C,qBAAqB;AACrB,uBAA4C;AAE5C,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,+BAAc,MAAM,+BAAc,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOjF,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,aAAa,MAAM,OAAO,QAAQ,KAAK,MAAM;AAAA;AAAA;AAAA,+BAGjE,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAStE;AAAA;AAGJ,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,+BAAc,MAAM,+BAAc,aAAa,CAAC;AAAA;AAAA;AAAA;AAK1F,MAAM,gBAAY,yBAAO,OAAO,EAAE,MAAM,+BAAc,MAAM,+BAAc,WAAW,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtF,MAAM,wBAAoB,yBAAO,OAAO,EAAE,MAAM,+BAAc,MAAM,+BAAc,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMvG,MAAM,iBAAa,yBAAO,OAAO,EAAE,MAAM,+BAAc,MAAM,+BAAc,YAAY,CAAC;AAAA;AAAA;AAAA;AAAA;AAMxF,MAAM,gBAAY,yBAAO,OAAO,EAAE,MAAM,+BAAc,MAAM,+BAAc,UAAU,CAAC;AAAA;AAAA;AAAA,4BAGzD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAIvE,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,+BAAc,MAAM,+BAAc,aAAa,CAAC;AAAA;AAAA;AAAA;AAK1F,MAAM,YAAQ,yBAAO,MAAM,EAAE,MAAM,+BAAc,MAAM,+BAAc,MAAM,CAAC;AAAA;AAAA;AAAA,iBAG3D,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAGtD,MAAM,kBAAc,yBAAO,KAAK,EAAE,MAAM,+BAAc,MAAM,+BAAc,YAAY,CAAC;AAAA;AAAA,WAE5E,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;",
   "names": []

package/dist/esm/CardV3.js

@@ -0,0 +1,159 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2, { useMemo, useCallback } from "react";
+import { omit } from "lodash";
+import { Grid } from "@elliemae/ds-grid";
+import { styled, slotObjectToDataTestIds } from "@elliemae/ds-system";
+import { PresentationalRadio } from "@elliemae/ds-controlled-form";
+import { useMemoMergePropsWithDefault, useGetGlobalAttributes } from "@elliemae/ds-utilities";
+const DSCardV3Name = "DSCardV3";
+const DSCardV3Slots = {
+  ACTION_AREA: "action-area"
+};
+const DSCardV3DataTestIds = slotObjectToDataTestIds(DSCardV3Name, DSCardV3Slots);
+const defaultProps = {
+  hasError: false
+};
+const CardActionArea = styled("button", {
+  name: DSCardV3Name,
+  slot: DSCardV3Slots.ACTION_AREA
+})`
+  border: none;
+  background-color: transparent;
+  width: 0px;
+  height: 0px;
+  padding: 0;
+  &:focus {
+    outline: none;
+  }
+  text-align: unset;
+`;
+const StyledCard = styled(Grid)`
+  background-color: ${({ theme, isOverlay }) => isOverlay ? theme.colors.neutral["080"] : "white"};
+  outline-offset: -2px;
+  * {
+    color: ${({ theme, isOverlay }) => isOverlay ? theme.colors.neutral["500"] : "inherit"};
+  }
+`;
+const StyledButtonCard = styled(StyledCard)`
+  cursor: pointer;
+`;
+const StyledCardError = styled(StyledCard)`
+  outline: ${({ theme }) => `2px solid ${theme.colors.danger[900]}`};
+`;
+const StyledCardSingleIndicator = styled(Grid)`
+  width: ${({ isSelected }) => isSelected ? "6px" : "4px"};
+  align-self: normal;
+  background-color: ${({ theme, isSelected }) => isSelected ? theme.colors.brand["700"] : theme.colors.brand["300"]};
+  transition: all 0.1s ease-in-out;
+`;
+const StyledCardDisabled = styled(StyledCard)`
+  cursor: not-allowed;
+  user-select: none;
+  opacity: 0.5;
+  ${StyledCardSingleIndicator} {
+    background-color: ${({ theme, isSelected }) => isSelected ? theme.colors.neutral["800"] : theme.colors.neutral["080"]};
+  }
+
+  ${CardActionArea} {
+    pointer-events: none;
+  }
+`;
+const CardContent = styled(Grid)``;
+const CardFooter = styled(Grid)`
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral["200"]};
+`;
+const CardSelectIndicator = (props) => {
+  const { isSelected, isMultiSelect } = props;
+  if (isMultiSelect) {
+    return /* @__PURE__ */ jsx(Grid, { alignItems: "center", children: /* @__PURE__ */ jsx(PresentationalRadio, { checked: isSelected, "aria-label": "@todo" }) });
+  }
+  return /* @__PURE__ */ jsx(StyledCardSingleIndicator, { isSelected });
+};
+const StyledFocusRing = styled(Grid)`
+  width: 100%;
+  height: 100%;
+  outline-offset: -1px;
+  outline: ${({ showFocusRing, hasError, theme }) => {
+  if (showFocusRing) {
+    return `2px solid ${theme.colors.brand[700]}`;
+  }
+  if (hasError) {
+    return `2px solid ${theme.colors.danger[900]}`;
+  }
+  return "none";
+}};
+`;
+const FocusRing = (props) => {
+  const { target, children, hasError } = props;
+  const [showFocusRing, setShowFocusingRing] = React2.useState(false);
+  const handleOnFocus = React2.useCallback(
+    (e) => {
+      if (e.target.matches(target)) {
+        setShowFocusingRing(true);
+      }
+    },
+    [target]
+  );
+  const handleOnBlur = React2.useCallback(
+    (e) => {
+      if (e.target.matches(target)) {
+        setShowFocusingRing(false);
+      }
+    },
+    [target]
+  );
+  return /* @__PURE__ */ jsx(
+    StyledFocusRing,
+    {
+      hasError,
+      onFocusCapture: handleOnFocus,
+      onBlurCapture: handleOnBlur,
+      showFocusRing,
+      children
+    }
+  );
+};
+const Card = (props) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  const { children, hasError, disabled, isOverlay, onClick } = propsWithDefault;
+  const StyledCardContainer = useMemo(() => {
+    if (onClick && !disabled) {
+      return StyledButtonCard;
+    }
+    if (disabled) {
+      return StyledCardDisabled;
+    }
+    return StyledCard;
+  }, [disabled, onClick]);
+  const globalsAttrs = omit(useGetGlobalAttributes(propsWithDefault), ["cols", "rows", "wrap"]);
+  const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);
+  return /* @__PURE__ */ jsx(StyledCardContainer, { border: "solid 1px neutral-100", boxShadow: "xs", isOverlay, ...globalsAttrs, children: /* @__PURE__ */ jsxs(FocusRing, { target: `[data-testid=${DSCardV3DataTestIds.ACTION_AREA}]`, hasError, children: [
+    onClick ? /* @__PURE__ */ jsx(
+      CardActionArea,
+      {
+        disabled,
+        "data-testid": DSCardV3DataTestIds.ACTION_AREA,
+        getOwnerProps
+      }
+    ) : null,
+    children
+  ] }) });
+};
+export {
+  Card,
+  CardActionArea,
+  CardContent,
+  CardFooter,
+  CardSelectIndicator,
+  DSCardV3DataTestIds,
+  DSCardV3Name,
+  DSCardV3Slots,
+  StyledButtonCard,
+  StyledCard,
+  StyledCardDisabled,
+  StyledCardError,
+  StyledCardSingleIndicator,
+  defaultProps
+};
+//# sourceMappingURL=CardV3.js.map

package/dist/esm/CardV3.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/CardV3.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\n/* eslint-disable react/display-name */\nimport React, { useMemo, useCallback } from 'react';\nimport { omit } from 'lodash';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled, slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { PresentationalRadio } from '@elliemae/ds-controlled-form';\n\nimport { useMemoMergePropsWithDefault, useGetGlobalAttributes, type GlobalAttributesT } from '@elliemae/ds-utilities';\n\nexport const DSCardV3Name = 'DSCardV3';\nexport const DSCardV3Slots = {\n  ACTION_AREA: 'action-area',\n};\n\nexport const DSCardV3DataTestIds = slotObjectToDataTestIds(DSCardV3Name, DSCardV3Slots);\n\ndeclare namespace CardT {\n  export interface RequiredProps {\n    children: React.ReactNode;\n  }\n\n  export interface OptinalProps {\n    isSelected?: boolean;\n    isMultiSelect?: boolean;\n    isOverlay?: boolean;\n    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  }\n\n  export interface DefaultProps {\n    hasError: boolean;\n  }\n\n  export interface Props\n    extends RequiredProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof RequiredProps>,\n      OptinalProps,\n      DefaultProps {}\n  export interface InternalProps\n    extends RequiredProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof RequiredProps>,\n      OptinalProps,\n      Partial<DefaultProps> {}\n\n  export interface CardSelectIndicatorProps {\n    isSelected?: boolean;\n    isMultiSelect?: boolean;\n  }\n}\n\nexport const defaultProps: CardT.DefaultProps = {\n  hasError: false,\n};\n\nexport const CardActionArea = styled('button', {\n  name: DSCardV3Name,\n  slot: DSCardV3Slots.ACTION_AREA,\n})`\n  border: none;\n  background-color: transparent;\n  width: 0px;\n  height: 0px;\n  padding: 0;\n  &:focus {\n    outline: none;\n  }\n  text-align: unset;\n`;\n\n// START style cards variants\nexport const StyledCard = styled(Grid)<{\n  isOverlay?: boolean;\n  onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n}>`\n  background-color: ${({ theme, isOverlay }) => (isOverlay ? theme.colors.neutral['080'] : 'white')};\n  outline-offset: -2px;\n  * {\n    color: ${({ theme, isOverlay }) => (isOverlay ? theme.colors.neutral['500'] : 'inherit')};\n  }\n`;\n\nexport const StyledButtonCard = styled(StyledCard)<{ isOverlay?: boolean }>`\n  cursor: pointer;\n`;\n\nexport const StyledCardError = styled(StyledCard)`\n  outline: ${({ theme }) => `2px solid ${theme.colors.danger[900]}`};\n`;\n\nexport const StyledCardSingleIndicator = styled(Grid)<{ isSelected?: boolean }>`\n  width: ${({ isSelected }) => (isSelected ? '6px' : '4px')};\n  align-self: normal;\n  background-color: ${({ theme, isSelected }) => (isSelected ? theme.colors.brand['700'] : theme.colors.brand['300'])};\n  transition: all 0.1s ease-in-out;\n`;\n\nexport const StyledCardDisabled = styled(StyledCard)`\n  cursor: not-allowed;\n  user-select: none;\n  opacity: 0.5;\n  ${StyledCardSingleIndicator} {\n    background-color: ${({ theme, isSelected }) =>\n      isSelected ? theme.colors.neutral['800'] : theme.colors.neutral['080']};\n  }\n\n  ${CardActionArea} {\n    pointer-events: none;\n  }\n`;\n// END style cards variants\nexport const CardContent = styled(Grid)``;\n\nexport const CardFooter = styled(Grid)`\n  border-top: 1px solid ${({ theme }) => theme.colors.neutral['200']};\n`;\n\nexport const CardSelectIndicator = (props: CardT.CardSelectIndicatorProps) => {\n  const { isSelected, isMultiSelect } = props;\n  if (isMultiSelect) {\n    return (\n      <Grid alignItems=\"center\">\n        <PresentationalRadio checked={isSelected} aria-label=\"@todo\" />\n      </Grid>\n    );\n  }\n  return <StyledCardSingleIndicator isSelected={isSelected} />;\n};\n\nconst StyledFocusRing = styled(Grid)<{ showFocusRing: boolean; hasError?: boolean }>`\n  width: 100%;\n  height: 100%;\n  outline-offset: -1px;\n  outline: ${({ showFocusRing, hasError, theme }) => {\n    if (showFocusRing) {\n      return `2px solid ${theme.colors.brand[700]}`;\n    }\n    if (hasError) {\n      return `2px solid ${theme.colors.danger[900]}`;\n    }\n    return 'none';\n  }};\n`;\n\ninterface FocusRingProps {\n  target: string;\n  children: React.ReactNode;\n  hasError?: boolean;\n}\nconst FocusRing = (props: FocusRingProps) => {\n  const { target, children, hasError } = props;\n  const [showFocusRing, setShowFocusingRing] = React.useState(false);\n  const handleOnFocus: React.FocusEventHandler<HTMLDivElement> = React.useCallback(\n    (e) => {\n      if (e.target.matches(target)) {\n        setShowFocusingRing(true);\n      }\n    },\n    [target],\n  );\n\n  const handleOnBlur: React.FocusEventHandler<HTMLDivElement> = React.useCallback(\n    (e) => {\n      if (e.target.matches(target)) {\n        setShowFocusingRing(false);\n      }\n    },\n    [target],\n  );\n  return (\n    <StyledFocusRing\n      hasError={hasError}\n      onFocusCapture={handleOnFocus}\n      onBlurCapture={handleOnBlur}\n      showFocusRing={showFocusRing}\n    >\n      {children}\n    </StyledFocusRing>\n  );\n};\n\nexport const Card: React.ComponentType<CardT.InternalProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<CardT.Props>(props, defaultProps);\n  const { children, hasError, disabled, isOverlay, onClick } = propsWithDefault;\n  const StyledCardContainer = useMemo(() => {\n    if (onClick && !disabled) {\n      return StyledButtonCard;\n    }\n    if (disabled) {\n      return StyledCardDisabled;\n    }\n    return StyledCard;\n  }, [disabled, onClick]);\n\n  const globalsAttrs = omit(useGetGlobalAttributes(propsWithDefault), ['cols', 'rows', 'wrap']);\n  const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n\n  return (\n    <StyledCardContainer border=\"solid 1px neutral-100\" boxShadow=\"xs\" isOverlay={isOverlay} {...globalsAttrs}>\n      <FocusRing target={`[data-testid=${DSCardV3DataTestIds.ACTION_AREA}]`} hasError={hasError}>\n        {onClick ? (\n          <CardActionArea\n            disabled={disabled}\n            data-testid={DSCardV3DataTestIds.ACTION_AREA}\n            getOwnerProps={getOwnerProps}\n          />\n        ) : null}\n        {children}\n      </FocusRing>\n    </StyledCardContainer>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["React"]
+}

package/dist/esm/DSCardV2.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSCardV2.tsx"],
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSCardV2.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { type DSCardV2T, DSCardV2PropTypesSchema } from './react-desc-prop-types.js';\nimport { useCardV2 } from './config/useCardV2.js';\nimport { DSCardV2Name, CARD_V2_DATA_TESTID } from './constants/index.js';\nimport DSTruncatedTooltipText, { TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';\nimport { DSHeader } from '@elliemae/ds-header';\nimport {\n  CardContainer,\n  LeftSection,\n  LeftAddon,\n  MainSection,\n  Description,\n  RightAddonSection,\n  RightAddon,\n  Separator,\n} from './styles.js';\n\nconst getCol = (rightAddon: DSCardV2T.OptionalProps['rightAddon']) => {\n  if (!rightAddon) return ['1fr'];\n  return ['1fr', 'auto'];\n};\n\nconst DSCardV2: React.ComponentType<DSCardV2T.Props> = (props) => {\n  const { propsWithDefault, globalProps, xstyledProps } = useCardV2(props);\n  const { hasBorder, title, leftAddon, rightAddon, description } = propsWithDefault;\n  return (\n    <TooltipTextProvider>\n      <CardContainer\n        data-testid={CARD_V2_DATA_TESTID.CARD_CONTAINER} //we must keep this explicit to avoid the breaking changes\n        {...globalProps}\n        {...xstyledProps}\n        hasBorder={hasBorder}\n        cols={getCol(rightAddon)}\n      >\n        <LeftSection>\n          {leftAddon && <LeftAddon>{leftAddon}</LeftAddon>}\n          <MainSection\n            style={{\n              maxWidth: leftAddon ? 'calc(100% - 40px)' : '100%',\n            }}\n          >\n            <DSHeader\n              data-testid={CARD_V2_DATA_TESTID.CARD_HEADER} //we must keep this explicit to avoid the breaking changes\n              fontSize=\"16px\"\n              fontWeight=\"regular\"\n              color=\"neutral.800\"\n              text={<DSTruncatedTooltipText value={title} />}\n            />\n            {description && (\n              <Description>\n                <DSTruncatedTooltipText value={description} />\n              </Description>\n            )}\n          </MainSection>\n        </LeftSection>\n        {Array.isArray(rightAddon) && (\n          <RightAddonSection>\n            {rightAddon[0] ? <RightAddon>{rightAddon[0]}</RightAddon> : null}\n            {rightAddon[1] ? (\n              <>\n                {rightAddon.length > 1 && <Separator />}\n                <RightAddon>{rightAddon[1]}</RightAddon>\n              </>\n            ) : null}\n          </RightAddonSection>\n        )}\n      </CardContainer>\n    </TooltipTextProvider>\n  );\n};\n\nDSCardV2.propTypes = DSCardV2PropTypesSchema;\nDSCardV2.displayName = DSCardV2Name;\nconst DSCardV2WithSchema = describe(DSCardV2);\nDSCardV2WithSchema.propTypes = DSCardV2PropTypesSchema;\n\nexport { DSCardV2, DSCardV2WithSchema };\n"],
   "mappings": "AAAA,YAAY,WAAW;ACoCC,SAwBV,UAxBU,KACd,YADc;AAnCxB,SAAS,gBAAgB;AACzB,SAAyB,+BAA+B;AACxD,SAAS,iBAAiB;AAC1B,SAAS,cAAc,2BAA2B;AAClD,OAAO,0BAA0B,2BAA2B;AAC5D,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,SAAS,CAAC,eAAsD;AACpE,MAAI,CAAC;AAAY,WAAO,CAAC,KAAK;AAC9B,SAAO,CAAC,OAAO,MAAM;AACvB;AAEA,MAAM,WAAiD,CAAC,UAAU;AAChE,QAAM,EAAE,kBAAkB,aAAa,aAAa,IAAI,UAAU,KAAK;AACvE,QAAM,EAAE,WAAW,OAAO,WAAW,YAAY,YAAY,IAAI;AACjE,SACE,oBAAC,uBACC;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,oBAAoB;AAAA,MAChC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA,MAAM,OAAO,UAAU;AAAA,MAEvB;AAAA,6BAAC,eACE;AAAA,uBAAa,oBAAC,aAAW,qBAAU;AAAA,UACpC;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,gBACL,UAAU,YAAY,sBAAsB;AAAA,cAC9C;AAAA,cAEA;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,eAAa,oBAAoB;AAAA,oBACjC,UAAS;AAAA,oBACT,YAAW;AAAA,oBACX,OAAM;AAAA,oBACN,MAAM,oBAAC,0BAAuB,OAAO,OAAO;AAAA;AAAA,gBAC9C;AAAA,gBACC,eACC,oBAAC,eACC,8BAAC,0BAAuB,OAAO,aAAa,GAC9C;AAAA;AAAA;AAAA,UAEJ;AAAA,WACF;AAAA,QACC,MAAM,QAAQ,UAAU,KACvB,qBAAC,qBACE;AAAA,qBAAW,CAAC,IAAI,oBAAC,cAAY,qBAAW,CAAC,GAAE,IAAgB;AAAA,UAC3D,WAAW,CAAC,IACX,iCACG;AAAA,uBAAW,SAAS,KAAK,oBAAC,aAAU;AAAA,YACrC,oBAAC,cAAY,qBAAW,CAAC,GAAE;AAAA,aAC7B,IACE;AAAA,WACN;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ;AAEA,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
   "names": []

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useCardV2.ts"],
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useCardV2.ts"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { omit } from 'lodash';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { type DSCardV2T, DSCardV2PropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface CardV2CTX {\n  propsWithDefault: DSCardV2T.InternalProps;\n  globalProps: ReturnType<typeof useGetGlobalAttributes>;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  instanceUid: string;\n}\n\nexport const useCardV2 = (propsFromUser: DSCardV2T.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSCardV2T.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSCardV2PropTypes);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalProps = omit(useGetGlobalAttributes<DSCardV2T.InternalProps>(propsWithDefault), ['cols', 'rows', 'wrap']);\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const { id } = propsWithDefault;\n  const instanceUid = React.useMemo(() => id || uid(5), [id]);\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      globalProps,\n      xstyledProps,\n      instanceUid,\n      // ...eventHandlers,\n    }),\n    [\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      instanceUid,\n      // eventHandlers,\n    ],\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,YAAY;AACrB,SAAS,wBAAwB,oBAAoB,oCAAoC;AACzF,SAAS,WAAW;AACpB,SAAyB,mBAAmB,oBAAoB;AAChE,SAAS,wBAAwB;AAS1B,MAAM,YAAY,CAAC,kBAAmC;AAI3D,QAAM,mBAAmB,6BAAsD,eAAe,YAAY;AAC1G,mBAAiB,kBAAkB,iBAAiB;AAIpD,QAAM,cAAc,KAAK,uBAAgD,gBAAgB,GAAG,CAAC,QAAQ,QAAQ,MAAM,CAAC;AACpH,QAAM,eAAe,mBAAmB,gBAAgB;AAKxD,QAAM,EAAE,GAAG,IAAI;AACf,QAAM,cAAcA,OAAM,QAAQ,MAAM,MAAM,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAM1D,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/config/useValidateProps.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.ts"],
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.ts"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { WeakValidationMap } from 'react';\nimport { type DSCardV2T } from '../react-desc-prop-types.js';\nimport { DSCardV2Name } from '../constants/index.js';\n\nexport const useValidateProps = (props: DSCardV2T.InternalProps, propTypes: WeakValidationMap<unknown>): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSCardV2Name);\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAG/C,SAAS,oBAAoB;AAEtB,MAAM,mBAAmB,CAAC,OAAgC,cAAgD;AAE/G,iCAA+B,OAAO,WAAW,YAAY;AAC/D;",
   "names": []

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
+  "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 DSCardV2Name = 'DSCardV2';\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\nexport const CARD_V2_SLOTS = {\n  CARD_CONTAINER: 'container',\n  LEFT_SECTION: 'left-section',\n  LEFT_ADDON: 'left-addon',\n  RIGHT_ADDON: 'right-addon',\n  RIGHT_ADDON_SECTION: 'right-addon-section',\n  SEPARATOR: 'separator',\n  MAIN_SECTION: 'main-section',\n  TITLE: 'title',\n  DESCRIPTION: 'description',\n} as const;\n\n// we are giving \"component_name_data_testid\" to avoid errors on duplicate exports variables in aggregators\nexport const CARD_V2_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSCardV2Name, CARD_V2_SLOTS),\n  CARD_CONTAINER: 'em-ds-card',\n  CARD_HEADER: 'em-ds-card-header',\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,eAAe;AAGrB,MAAM,gBAAgB;AAAA,EAC3B,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,qBAAqB;AAAA,EACrB,WAAW;AAAA,EACX,cAAc;AAAA,EACd,OAAO;AAAA,EACP,aAAa;AACf;AAGO,MAAM,sBAAsB;AAAA,EACjC,GAAG,wBAAwB,cAAc,aAAa;AAAA,EACtD,gBAAgB;AAAA,EAChB,aAAa;AACf;",
   "names": []

package/dist/esm/index.js

@@ -7,6 +7,7 @@ import {
 } from "./DSCardV2.js";
 import {} from "./react-desc-prop-types.js";
 import { CARD_V2_DATA_TESTID } from "./constants/index.js";
+export * from "./CardV3.js";
 export {
   CARD_V2_DATA_TESTID,
   DSCardV22 as CustomCard,

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport type {} from '@xstyled/system';\nexport {\n  DSCardV2,\n  DSCardV2 as CustomCard,\n  DSCardV2WithSchema,\n  DSCardV2WithSchema as DSCardCustomWithSchema,\n} from './DSCardV2.js';\nexport { type DSCardV2T } from './react-desc-prop-types.js';\nexport { CARD_V2_DATA_TESTID } from './constants/index.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACY,YAAZA;AAAA,EACA;AAAA,EACsB,sBAAtBC;AAAA,OACK;AACP,eAA+B;AAC/B,SAAS,2BAA2B;",
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport type {} from '@xstyled/system';\nexport {\n  DSCardV2,\n  DSCardV2 as CustomCard,\n  DSCardV2WithSchema,\n  DSCardV2WithSchema as DSCardCustomWithSchema,\n} from './DSCardV2.js';\nexport { type DSCardV2T } from './react-desc-prop-types.js';\nexport { CARD_V2_DATA_TESTID } from './constants/index.js';\nexport * from './CardV3.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACY,YAAZA;AAAA,EACA;AAAA,EACsB,sBAAtBC;AAAA,OACK;AACP,eAA+B;AAC/B,SAAS,2BAA2B;AACpC,cAAc;",
   "names": ["DSCardV2", "DSCardV2WithSchema"]
 }

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-utilities';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\n\nexport declare namespace DSCardV2T {\n  export interface RequiredProps {\n    title: string;\n  }\n\n  export interface DefaultProps {\n    hasBorder?: boolean;\n  }\n\n  export interface OptionalProps {\n    description: string;\n    leftAddon: JSX.Element;\n    rightAddon: JSX.Element | JSX.Element[];\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSCardV2T.DefaultProps = {\n  hasBorder: false,\n};\n\nexport const DSCardV2PropTypes: DSPropTypesSchema<DSCardV2T.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  /**\n   * Title of the card. requiered\n   */\n  title: PropTypes.string.isRequired.description('Title of the card. requiered'),\n  /**\n   * Description of the card. not requiered\n   */\n  description: PropTypes.string.description('Description of the card. not requiered'),\n  /**\n   * Left Addon\n   */\n  leftAddon: PropTypes.element.description('Left Addon'),\n  /**\n   * Right addon array, max elements: 2\n   */\n  rightAddon: PropTypes.array.description('Right addon array, max elements: 2'),\n  /**\n   * Wheter if the card has border or not\n   */\n  hasBorder: PropTypes.bool.description('Wheter if the card has border or not').defaultValue(false),\n};\n\nexport const DSCardV2PropTypesSchema = DSCardV2PropTypes as unknown as WeakValidationMap<DSCardV2T.Props>;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AAsChE,MAAM,eAAuC;AAAA,EAClD,WAAW;AACb;AAEO,MAAM,oBAAwD;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA;AAAA;AAAA;AAAA,EAIH,OAAO,UAAU,OAAO,WAAW,YAAY,8BAA8B;AAAA;AAAA;AAAA;AAAA,EAI7E,aAAa,UAAU,OAAO,YAAY,wCAAwC;AAAA;AAAA;AAAA;AAAA,EAIlF,WAAW,UAAU,QAAQ,YAAY,YAAY;AAAA;AAAA;AAAA;AAAA,EAIrD,YAAY,UAAU,MAAM,YAAY,oCAAoC;AAAA;AAAA;AAAA;AAAA,EAI5E,WAAW,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,KAAK;AAClG;AAEO,MAAM,0BAA0B;",
   "names": []

package/dist/esm/styles.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCardV2Name, CARD_V2_SLOTS } from './constants/index.js';\n\nconst CardContainer = styled(Grid, { name: DSCardV2Name, slot: CARD_V2_SLOTS.CARD_CONTAINER })<{ hasBorder?: boolean }>`\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 56px;\n  padding: 8px 16px;\n  position: relative;\n  border: ${({ theme, hasBorder }) => (hasBorder ? `1px solid ${theme.colors.neutral['100']}` : '')};\n  &:before {\n    content: '';\n    border-bottom: 1px solid ${(props) => props.theme.colors.neutral['100']};\n    position: absolute;\n    margin: 0 auto;\n    width: 90%;\n    bottom: 0;\n  }\n  &:last-child::before {\n    content: none;\n  }\n  ${xStyledCommonProps}\n`;\n\nconst LeftSection = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.LEFT_SECTION })`\n  display: flex;\n  align-items: center;\n`;\n\nconst LeftAddon = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.LEFT_ADDON })`\n  height: fit-content;\n  width: fit-content;\n  margin-right: 16px;\n  cursor: pointer;\n`;\n\nconst RightAddonSection = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.RIGHT_ADDON_SECTION })`\n  display: flex;\n  align-items: center;\n  width: fit-content;\n`;\n\nconst RightAddon = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.RIGHT_ADDON })`\n  height: fit-content;\n  width: fit-content;\n  cursor: pointer;\n`;\n\nconst Separator = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.SEPARATOR })`\n  width: 0px;\n  height: 24px;\n  border-right: 1px solid ${(props) => props.theme.colors.neutral['300']};\n  margin: 0 8px;\n`;\n\nconst MainSection = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.MAIN_SECTION })`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst Title = styled('h3', { name: DSCardV2Name, slot: CARD_V2_SLOTS.TITLE })`\n  margin: 0;\n  font-size: 16px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  color: ${(props) => props.theme.colors.neutral['800']};\n`;\n\nconst Description = styled('p', { name: DSCardV2Name, slot: CARD_V2_SLOTS.DESCRIPTION })`\n  margin: 0;\n  color: ${(props) => props.theme.colors.neutral['600']};\n`;\n\nexport {\n  CardContainer,\n  LeftSection,\n  LeftAddon,\n  RightAddonSection,\n  RightAddon,\n  Separator,\n  MainSection,\n  Title,\n  Description,\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,YAAY;AACrB,SAAS,cAAc,qBAAqB;AAE5C,MAAM,gBAAgB,OAAO,MAAM,EAAE,MAAM,cAAc,MAAM,cAAc,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOjF,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,aAAa,MAAM,OAAO,QAAQ,KAAK,MAAM;AAAA;AAAA;AAAA,+BAGjE,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAStE;AAAA;AAGJ,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,aAAa,CAAC;AAAA;AAAA;AAAA;AAK1F,MAAM,YAAY,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,WAAW,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtF,MAAM,oBAAoB,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMvG,MAAM,aAAa,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,YAAY,CAAC;AAAA;AAAA;AAAA;AAAA;AAMxF,MAAM,YAAY,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,UAAU,CAAC;AAAA;AAAA;AAAA,4BAGzD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAIvE,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,aAAa,CAAC;AAAA;AAAA;AAAA;AAK1F,MAAM,QAAQ,OAAO,MAAM,EAAE,MAAM,cAAc,MAAM,cAAc,MAAM,CAAC;AAAA;AAAA;AAAA,iBAG3D,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAGtD,MAAM,cAAc,OAAO,KAAK,EAAE,MAAM,cAAc,MAAM,cAAc,YAAY,CAAC;AAAA;AAAA,WAE5E,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;",
   "names": []

package/dist/types/CardV3.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+import { type GlobalAttributesT } from '@elliemae/ds-utilities';
+export declare const DSCardV3Name = "DSCardV3";
+export declare const DSCardV3Slots: {
+    ACTION_AREA: string;
+};
+export declare const DSCardV3DataTestIds: Record<string, string>;
+declare namespace CardT {
+    interface RequiredProps {
+        children: React.ReactNode;
+    }
+    interface OptinalProps {
+        isSelected?: boolean;
+        isMultiSelect?: boolean;
+        isOverlay?: boolean;
+        onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    }
+    interface DefaultProps {
+        hasError: boolean;
+    }
+    interface Props extends RequiredProps, Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof RequiredProps>, OptinalProps, DefaultProps {
+    }
+    interface InternalProps extends RequiredProps, Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof RequiredProps>, OptinalProps, Partial<DefaultProps> {
+    }
+    interface CardSelectIndicatorProps {
+        isSelected?: boolean;
+        isMultiSelect?: boolean;
+    }
+}
+export declare const defaultProps: CardT.DefaultProps;
+export declare const CardActionArea: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
+export declare const StyledCard: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types").DSGridT.Props & React.RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
+    isOverlay?: boolean | undefined;
+    onClick?: ((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+} & import("@elliemae/ds-system").OwnerInterface, never>;
+export declare const StyledButtonCard: import("styled-components").StyledComponent<import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types").DSGridT.Props & React.RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
+    isOverlay?: boolean | undefined;
+    onClick?: ((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+} & import("@elliemae/ds-system").OwnerInterface, never>, import("@elliemae/ds-system").Theme, {
+    isOverlay?: boolean | undefined;
+} & import("@elliemae/ds-system").OwnerInterface, never>;
+export declare const StyledCardError: import("styled-components").StyledComponent<import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types").DSGridT.Props & React.RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
+    isOverlay?: boolean | undefined;
+    onClick?: ((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+} & import("@elliemae/ds-system").OwnerInterface, never>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
+export declare const StyledCardSingleIndicator: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types").DSGridT.Props & React.RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
+    isSelected?: boolean | undefined;
+} & import("@elliemae/ds-system").OwnerInterface, never>;
+export declare const StyledCardDisabled: import("styled-components").StyledComponent<import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types").DSGridT.Props & React.RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
+    isOverlay?: boolean | undefined;
+    onClick?: ((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+} & import("@elliemae/ds-system").OwnerInterface, never>, import("@elliemae/ds-system").Theme, {
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: import("@elliemae/ds-system").Theme | undefined;
+} & {
+    as?: string | React.ComponentType<any> | undefined;
+    forwardedAs?: string | React.ComponentType<any> | undefined;
+} & import("@elliemae/ds-system").OwnerInterface, never>;
+export declare const CardContent: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types").DSGridT.Props & React.RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
+export declare const CardFooter: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types").DSGridT.Props & React.RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
+export declare const CardSelectIndicator: (props: CardT.CardSelectIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Card: React.ComponentType<CardT.InternalProps>;
+export {};

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
 export { DSCardV2, DSCardV2 as CustomCard, DSCardV2WithSchema, DSCardV2WithSchema as DSCardCustomWithSchema, } from './DSCardV2.js';
 export { type DSCardV2T } from './react-desc-prop-types.js';
 export { CARD_V2_DATA_TESTID } from './constants/index.js';
+export * from './CardV3.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-card-v2",
-  "version": "3.22.0-next.3",
+  "version": "3.22.0-next.30",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Card V2",
   "files": [
@@ -47,18 +47,24 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-button": "3.22.0-next.3",
-    "@elliemae/ds-grid": "3.22.0-next.3",
-    "@elliemae/ds-header": "3.22.0-next.3",
-    "@elliemae/ds-system": "3.22.0-next.3",
-    "@elliemae/ds-truncated-tooltip-text": "3.22.0-next.3",
-    "@elliemae/ds-utilities": "3.22.0-next.3",
-    "@elliemae/ds-separator": "3.22.0-next.3"
+    "@xstyled/system": "~3.7.3",
+    "jest-axe": "^7.0.1",
+    "lodash": "^4.17.21",
+    "uid": "~2.0.1",
+    "@elliemae/ds-button": "3.22.0-next.30",
+    "@elliemae/ds-controlled-form": "3.22.0-next.30",
+    "@elliemae/ds-grid": "3.22.0-next.30",
+    "@elliemae/ds-header": "3.22.0-next.30",
+    "@elliemae/ds-separator": "3.22.0-next.30",
+    "@elliemae/ds-icons": "3.22.0-next.30",
+    "@elliemae/ds-truncated-tooltip-text": "3.22.0-next.30",
+    "@elliemae/ds-system": "3.22.0-next.30",
+    "@elliemae/ds-utilities": "3.22.0-next.30"
   },
   "devDependencies": {
-    "@elliemae/pui-cli": "~9.0.0-next.17",
+    "@elliemae/pui-cli": "~9.0.0-next.22",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.22.0-next.3"
+    "@elliemae/ds-monorepo-devops": "3.22.0-next.30"
   },
   "peerDependencies": {
     "@testing-library/jest-dom": "~5.16.4",
@@ -73,15 +79,15 @@
     "typeSafety": false
   },
   "scripts": {
-    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
+    "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
     "test": "pui-cli test --passWithNoTests",
-    "lint": "node ../../scripts/lint.mjs --fix",
-    "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../.eslintrc.js' src/",
-    "dts": "node ../../scripts/dts.mjs",
+    "lint": "node ../../../scripts/lint.mjs --fix",
+    "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../../.eslintrc.js' src/",
+    "dts": "node ../../../scripts/dts.mjs",
     "dts:withdeps": "pnpm --filter {.}... dts",
-    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
+    "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
     "dev:build": "pnpm --filter {.}... build",
     "dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
-    "checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
+    "checkDeps": "npx -yes ../../util/ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
   }
 }