@elliemae/ds-button-v2 3.16.0 → 3.16.1

package/dist/cjs/DSButtonV2.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));
@@ -31,9 +35,9 @@ module.exports = __toCommonJS(DSButtonV2_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_useButtonV2 = require("./config/useButtonV2");
-var import_react_desc_prop_types = require("./react-desc-prop-types");
-var import_DSButtonV2Definitions = require("./DSButtonV2Definitions");
+var import_useButtonV2 = require("./config/useButtonV2.js");
+var import_react_desc_prop_types = require("./react-desc-prop-types.js");
+var import_DSButtonV2Definitions = require("./DSButtonV2Definitions.js");
 const DSButtonV2 = (props) => {
   const {
     propsWithDefault,

package/dist/cjs/DSButtonV2.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSButtonV2.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useButtonV2 } from './config/useButtonV2';\nimport type { DSButtonT } from './react-desc-prop-types';\nimport { DSButtonPropTypes } from './react-desc-prop-types';\nimport { DSButtonV2Name } from './DSButtonV2Definitions';\n\nconst DSButtonV2: React.ComponentType<DSButtonT.Props> = (props) => {\n  const {\n    propsWithDefault,\n    tabIndex,\n    handleOnMouseDown,\n    globalProps,\n    xstyledProps,\n    handleOnKeyDown,\n    handleOnClick,\n    ButtonRenderer,\n  } = useButtonV2(props);\n  const { size, buttonType, innerRef, children, type, shape } = propsWithDefault;\n  const { disabled, ...restGlobalProps } = globalProps;\n  return (\n    <ButtonRenderer\n      aria-disabled={disabled ? 'true' : false}\n      {...restGlobalProps}\n      {...xstyledProps}\n      shape={shape}\n      type={type}\n      buttonType={buttonType}\n      tabIndex={tabIndex}\n      size={size}\n      ref={innerRef}\n      onKeyDown={handleOnKeyDown}\n      onClick={handleOnClick}\n      onMouseDown={handleOnMouseDown}\n    >\n      {children}\n    </ButtonRenderer>\n  );\n};\n\nDSButtonV2.propTypes = DSButtonPropTypes;\nDSButtonV2.displayName = DSButtonV2Name;\nconst DSButtonV2WithSchema = describe(DSButtonV2);\nDSButtonV2WithSchema.propTypes = DSButtonPropTypes;\n\nexport { DSButtonV2, DSButtonV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBnB;AApBJ,8BAAyB;AACzB,yBAA4B;AAE5B,mCAAkC;AAClC,mCAA+B;AAE/B,MAAM,aAAmD,CAAC,UAAU;AAClE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,gCAAY,KAAK;AACrB,QAAM,EAAE,MAAM,YAAY,UAAU,UAAU,MAAM,MAAM,IAAI;AAC9D,QAAM,EAAE,aAAa,gBAAgB,IAAI;AACzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAe,WAAW,SAAS;AAAA,MAClC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,WAAW;AAAA,MACX,SAAS;AAAA,MACT,aAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,2BAAuB,kCAAS,UAAU;AAChD,qBAAqB,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useButtonV2 } from './config/useButtonV2.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\nimport { DSButtonPropTypes } from './react-desc-prop-types.js';\nimport { DSButtonV2Name } from './DSButtonV2Definitions.js';\n\nconst DSButtonV2: React.ComponentType<DSButtonT.Props> = (props) => {\n  const {\n    propsWithDefault,\n    tabIndex,\n    handleOnMouseDown,\n    globalProps,\n    xstyledProps,\n    handleOnKeyDown,\n    handleOnClick,\n    ButtonRenderer,\n  } = useButtonV2(props);\n  const { size, buttonType, innerRef, children, type, shape } = propsWithDefault;\n  const { disabled, ...restGlobalProps } = globalProps;\n  return (\n    <ButtonRenderer\n      aria-disabled={disabled ? 'true' : false}\n      {...restGlobalProps}\n      {...xstyledProps}\n      shape={shape}\n      type={type}\n      buttonType={buttonType}\n      tabIndex={tabIndex}\n      size={size}\n      ref={innerRef}\n      onKeyDown={handleOnKeyDown}\n      onClick={handleOnClick}\n      onMouseDown={handleOnMouseDown}\n    >\n      {children}\n    </ButtonRenderer>\n  );\n};\n\nDSButtonV2.propTypes = DSButtonPropTypes;\nDSButtonV2.displayName = DSButtonV2Name;\nconst DSButtonV2WithSchema = describe(DSButtonV2);\nDSButtonV2WithSchema.propTypes = DSButtonPropTypes;\n\nexport { DSButtonV2, DSButtonV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBnB;AApBJ,8BAAyB;AACzB,yBAA4B;AAE5B,mCAAkC;AAClC,mCAA+B;AAE/B,MAAM,aAAmD,CAAC,UAAU;AAClE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,gCAAY,KAAK;AACrB,QAAM,EAAE,MAAM,YAAY,UAAU,UAAU,MAAM,MAAM,IAAI;AAC9D,QAAM,EAAE,UAAU,GAAG,gBAAgB,IAAI;AACzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAe,WAAW,SAAS;AAAA,MAClC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,WAAW;AAAA,MACX,SAAS;AAAA,MACT,aAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,2BAAuB,kCAAS,UAAU;AAChD,qBAAqB,YAAY;",
   "names": []
 }

package/dist/cjs/DSButtonV2Definitions.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));

package/dist/cjs/DSButtonV2Definitions.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/DSButtonV2Definitions.ts", "../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["export const DSButtonV2Name = 'DSButtonV2';\n\nexport const DSButtonV2DataTestId = {\n  ROOT: 'ds-button',\n};\nexport const DSButtonV2Slots = {\n  ROOT: 'root',\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,iBAAiB;AAEvB,MAAM,uBAAuB;AAAA,EAClC,MAAM;AACR;AACO,MAAM,kBAAkB;AAAA,EAC7B,MAAM;AACR;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,iBAAiB;AAEvB,MAAM,uBAAuB;AAAA,EAClC,MAAM;AACR;AACO,MAAM,kBAAkB;AAAA,EAC7B,MAAM;AACR;",
   "names": []
 }

package/dist/cjs/config/useButtonRenderer.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));
@@ -29,7 +33,7 @@ __export(useButtonRenderer_exports, {
 module.exports = __toCommonJS(useButtonRenderer_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
-var import_styles = require("../styles");
+var import_styles = require("../styles.js");
 const buttonMap = {
   filled: import_styles.FilledButton,
   iconFilled: import_styles.FilledButton,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useButtonRenderer.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport type { DSButtonT } from '../react-desc-prop-types';\nimport { DefaultButton, RawButton, FilledButton, OutlineButton, TextButton } from '../styles';\n\nconst buttonMap = {\n  filled: FilledButton,\n  iconFilled: FilledButton,\n  outline: OutlineButton,\n  iconOutline: OutlineButton,\n  text: TextButton,\n  icon: TextButton,\n  raw: RawButton,\n} as const;\n\nexport const useButtonRenderer = (propsWithDefault: DSButtonT.InternalProps) => {\n  const { buttonType } = propsWithDefault;\n  return React.useMemo(() => buttonMap[buttonType] || DefaultButton, [buttonType]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,oBAAkF;AAElF,MAAM,YAAY;AAAA,EAChB,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,aAAa;AAAA,EACb,MAAM;AAAA,EACN,MAAM;AAAA,EACN,KAAK;AACP;AAEO,MAAM,oBAAoB,CAAC,qBAA8C;AAC9E,QAAM,EAAE,WAAW,IAAI;AACvB,SAAO,aAAAA,QAAM,QAAQ,MAAM,UAAU,eAAe,6BAAe,CAAC,UAAU,CAAC;AACjF;",
+  "sourcesContent": ["import React from 'react';\nimport type { DSButtonT } from '../react-desc-prop-types.js';\nimport { DefaultButton, RawButton, FilledButton, OutlineButton, TextButton } from '../styles.js';\n\nconst buttonMap = {\n  filled: FilledButton,\n  iconFilled: FilledButton,\n  outline: OutlineButton,\n  iconOutline: OutlineButton,\n  text: TextButton,\n  icon: TextButton,\n  raw: RawButton,\n} as const;\n\nexport const useButtonRenderer = (propsWithDefault: DSButtonT.InternalProps) => {\n  const { buttonType } = propsWithDefault;\n  return React.useMemo(() => buttonMap[buttonType] || DefaultButton, [buttonType]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,oBAAkF;AAElF,MAAM,YAAY;AAAA,EAChB,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,aAAa;AAAA,EACb,MAAM;AAAA,EACN,MAAM;AAAA,EACN,KAAK;AACP;AAEO,MAAM,oBAAoB,CAAC,qBAA8C;AAC9E,QAAM,EAAE,WAAW,IAAI;AACvB,SAAO,aAAAA,QAAM,QAAQ,MAAM,UAAU,UAAU,KAAK,6BAAe,CAAC,UAAU,CAAC;AACjF;",
   "names": ["React"]
 }

package/dist/cjs/config/useButtonV2.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));
@@ -30,9 +34,9 @@ module.exports = __toCommonJS(useButtonV2_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_react_desc_prop_types = require("../react-desc-prop-types");
-var import_useValidateProps = require("./useValidateProps");
-var import_useButtonRenderer = require("./useButtonRenderer");
+var import_react_desc_prop_types = require("../react-desc-prop-types.js");
+var import_useValidateProps = require("./useValidateProps.js");
+var import_useButtonRenderer = require("./useButtonRenderer.js");
 const useButtonV2 = (props) => {
   const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
   (0, import_useValidateProps.useValidateProps)(props, import_react_desc_prop_types.DSButtonPropTypes);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useButtonV2.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport type { DSButtonT } from '../react-desc-prop-types';\nimport { defaultProps, DSButtonPropTypes } from '../react-desc-prop-types';\nimport { useValidateProps } from './useValidateProps';\nimport { useButtonRenderer } from './useButtonRenderer';\n\nexport interface ButtonV2Configuration {\n  propsWithDefault: DSButtonT.InternalProps;\n  globalProps: ReturnType<typeof useGetGlobalAttributes>;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  ButtonRenderer: ReturnType<typeof useButtonRenderer>;\n  handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement>;\n  tabIndex?: WCAGTabIndex;\n  handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n  handleOnMouseDown: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const useButtonV2 = (props: DSButtonT.Props): ButtonV2Configuration => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSButtonT.InternalProps>(props, defaultProps);\n  useValidateProps(props, DSButtonPropTypes);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalProps = useGetGlobalAttributes<DSButtonT.InternalProps, HTMLButtonElement>(propsWithDefault);\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  const { disabled } = globalProps;\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const ButtonRenderer = useButtonRenderer(propsWithDefault);\n  const { onKeyDown, onClick, onMouseDown } = propsWithDefault;\n\n  const handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = React.useCallback(\n    (e) => {\n      if (disabled || !onKeyDown) {\n        return;\n      }\n\n      onKeyDown?.(e);\n      const { key } = e;\n      if (['Space', ' ', 'Enter'].includes(key)) {\n        e.preventDefault();\n        onClick(e);\n      }\n    },\n    [disabled, onClick, onKeyDown],\n  );\n\n  const handleOnClick = React.useCallback(\n    (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\n      if (!disabled && onClick) {\n        onClick(e);\n      }\n    },\n    [disabled, onClick],\n  );\n\n  const handleOnMouseDown: React.MouseEventHandler<HTMLButtonElement> = React.useCallback(\n    (e) => {\n      if (disabled) {\n        e.preventDefault();\n        return;\n      }\n      onMouseDown?.(e);\n    },\n    [disabled, onMouseDown],\n  );\n\n  const tabIndex = globalProps.disabled ? -1 : globalProps.tabIndex;\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      ButtonRenderer,\n      handleOnKeyDown,\n      handleOnClick,\n      tabIndex,\n      handleOnMouseDown,\n    }),\n    [\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      ButtonRenderer,\n      handleOnKeyDown,\n      handleOnClick,\n      tabIndex,\n      handleOnMouseDown,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,8BAAyF;AAEzF,mCAAgD;AAChD,8BAAiC;AACjC,+BAAkC;AAa3B,MAAM,cAAc,CAAC,UAAkD;AAI5E,QAAM,uBAAmB,sDAAsD,OAAO,yCAAY;AAClG,gDAAiB,OAAO,8CAAiB;AAIzC,QAAM,kBAAc,gDAAmE,gBAAgB;AACvG,QAAM,mBAAe,4CAAmB,gBAAgB;AACxD,QAAM,EAAE,SAAS,IAAI;AAIrB,QAAM,qBAAiB,4CAAkB,gBAAgB;AACzD,QAAM,EAAE,WAAW,SAAS,YAAY,IAAI;AAE5C,QAAM,kBAAiE,aAAAA,QAAM;AAAA,IAC3E,CAAC,MAAM;AACL,UAAI,YAAY,CAAC,WAAW;AAC1B;AAAA,MACF;AAEA,kBAAY,CAAC;AACb,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,CAAC,SAAS,KAAK,OAAO,EAAE,SAAS,GAAG,GAAG;AACzC,UAAE,eAAe;AACjB,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,UAAU,SAAS,SAAS;AAAA,EAC/B;AAEA,QAAM,gBAAgB,aAAAA,QAAM;AAAA,IAC1B,CAAC,MAAoF;AACnF,UAAI,CAAC,YAAY,SAAS;AACxB,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,UAAU,OAAO;AAAA,EACpB;AAEA,QAAM,oBAAgE,aAAAA,QAAM;AAAA,IAC1E,CAAC,MAAM;AACL,UAAI,UAAU;AACZ,UAAE,eAAe;AACjB;AAAA,MACF;AACA,oBAAc,CAAC;AAAA,IACjB;AAAA,IACA,CAAC,UAAU,WAAW;AAAA,EACxB;AAEA,QAAM,WAAW,YAAY,WAAW,KAAK,YAAY;AAEzD,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport type { DSButtonT } from '../react-desc-prop-types.js';\nimport { defaultProps, DSButtonPropTypes } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useButtonRenderer } from './useButtonRenderer.js';\n\nexport interface ButtonV2Configuration {\n  propsWithDefault: DSButtonT.InternalProps;\n  globalProps: ReturnType<typeof useGetGlobalAttributes>;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  ButtonRenderer: ReturnType<typeof useButtonRenderer>;\n  handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement>;\n  tabIndex?: WCAGTabIndex;\n  handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n  handleOnMouseDown: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const useButtonV2 = (props: DSButtonT.Props): ButtonV2Configuration => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSButtonT.InternalProps>(props, defaultProps);\n  useValidateProps(props, DSButtonPropTypes);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalProps = useGetGlobalAttributes<DSButtonT.InternalProps, HTMLButtonElement>(propsWithDefault);\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  const { disabled } = globalProps;\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const ButtonRenderer = useButtonRenderer(propsWithDefault);\n  const { onKeyDown, onClick, onMouseDown } = propsWithDefault;\n\n  const handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = React.useCallback(\n    (e) => {\n      if (disabled || !onKeyDown) {\n        return;\n      }\n\n      onKeyDown?.(e);\n      const { key } = e;\n      if (['Space', ' ', 'Enter'].includes(key)) {\n        e.preventDefault();\n        onClick(e);\n      }\n    },\n    [disabled, onClick, onKeyDown],\n  );\n\n  const handleOnClick = React.useCallback(\n    (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\n      if (!disabled && onClick) {\n        onClick(e);\n      }\n    },\n    [disabled, onClick],\n  );\n\n  const handleOnMouseDown: React.MouseEventHandler<HTMLButtonElement> = React.useCallback(\n    (e) => {\n      if (disabled) {\n        e.preventDefault();\n        return;\n      }\n      onMouseDown?.(e);\n    },\n    [disabled, onMouseDown],\n  );\n\n  const tabIndex = globalProps.disabled ? -1 : globalProps.tabIndex;\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      ButtonRenderer,\n      handleOnKeyDown,\n      handleOnClick,\n      tabIndex,\n      handleOnMouseDown,\n    }),\n    [\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      ButtonRenderer,\n      handleOnKeyDown,\n      handleOnClick,\n      tabIndex,\n      handleOnMouseDown,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,8BAAyF;AAEzF,mCAAgD;AAChD,8BAAiC;AACjC,+BAAkC;AAa3B,MAAM,cAAc,CAAC,UAAkD;AAI5E,QAAM,uBAAmB,sDAAsD,OAAO,yCAAY;AAClG,gDAAiB,OAAO,8CAAiB;AAIzC,QAAM,kBAAc,gDAAmE,gBAAgB;AACvG,QAAM,mBAAe,4CAAmB,gBAAgB;AACxD,QAAM,EAAE,SAAS,IAAI;AAIrB,QAAM,qBAAiB,4CAAkB,gBAAgB;AACzD,QAAM,EAAE,WAAW,SAAS,YAAY,IAAI;AAE5C,QAAM,kBAAiE,aAAAA,QAAM;AAAA,IAC3E,CAAC,MAAM;AACL,UAAI,YAAY,CAAC,WAAW;AAC1B;AAAA,MACF;AAEA,kBAAY,CAAC;AACb,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,CAAC,SAAS,KAAK,OAAO,EAAE,SAAS,GAAG,GAAG;AACzC,UAAE,eAAe;AACjB,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,UAAU,SAAS,SAAS;AAAA,EAC/B;AAEA,QAAM,gBAAgB,aAAAA,QAAM;AAAA,IAC1B,CAAC,MAAoF;AACnF,UAAI,CAAC,YAAY,SAAS;AACxB,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,UAAU,OAAO;AAAA,EACpB;AAEA,QAAM,oBAAgE,aAAAA,QAAM;AAAA,IAC1E,CAAC,MAAM;AACL,UAAI,UAAU;AACZ,UAAE,eAAe;AACjB;AAAA,MACF;AACA,oBAAc,CAAC;AAAA,IACjB;AAAA,IACA,CAAC,UAAU,WAAW;AAAA,EACxB;AAEA,QAAM,WAAW,YAAY,WAAW,KAAK,YAAY;AAEzD,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": ["React"]
 }

package/dist/cjs/config/useValidateProps.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));
@@ -29,7 +33,7 @@ __export(useValidateProps_exports, {
 module.exports = __toCommonJS(useValidateProps_exports);
 var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_DSButtonV2Definitions = require("../DSButtonV2Definitions");
+var import_DSButtonV2Definitions = require("../DSButtonV2Definitions.js");
 const useValidateProps = (props, propTypes) => {
   (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(props, propTypes, import_DSButtonV2Definitions.DSButtonV2Name);
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useValidateProps.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\nimport { DSButtonV2Name } from '../DSButtonV2Definitions';\nimport type { DSButtonT } from '../react-desc-prop-types';\n\nexport const useValidateProps = (props: DSButtonT.Props, propTypes: WeakValidationMap<unknown>): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSButtonV2Name);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA+C;AAE/C,mCAA+B;AAGxB,MAAM,mBAAmB,CAAC,OAAwB,cAAgD;AAEvG,8DAA+B,OAAO,WAAW,2CAAc;AACjE;",
+  "sourcesContent": ["import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\nimport { DSButtonV2Name } from '../DSButtonV2Definitions.js';\nimport type { DSButtonT } from '../react-desc-prop-types.js';\n\nexport const useValidateProps = (props: DSButtonT.Props, propTypes: WeakValidationMap<unknown>): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSButtonV2Name);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA+C;AAE/C,mCAA+B;AAGxB,MAAM,mBAAmB,CAAC,OAAwB,cAAgD;AAEvG,8DAA+B,OAAO,WAAW,2CAAc;AACjE;",
   "names": []
 }

package/dist/cjs/constants.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));

package/dist/cjs/constants.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/constants.tsx", "../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["export const BUTTON_TYPES = {\n  FILLED: 'filled',\n  OUTLINE: 'outline',\n  TEXT: 'text',\n  ICON: 'icon',\n  ICON_FILLED: 'iconFilled',\n  ICON_OUTLINE: 'iconOutline',\n  RAW: 'raw',\n} as const;\n\nexport const BUTTON_SHAPES = {\n  DEFAULT: 'default',\n  ROUND: 'round',\n} as const;\n\nexport const BUTTON_SIZES = {\n  S: 's',\n  M: 'm',\n  L: 'l',\n} as const;\n\nexport const sizes = {\n  s: '1.538rem',\n  m: '2.154rem',\n  l: '3.077rem',\n} as const;\n\nexport const mobileSizes = {\n  s: '1.249625rem',\n  m: '1.750125rem',\n  l: '2.5rem',\n} as const;\n\nexport const ButtonTypesValuesArray = Object.values(BUTTON_TYPES);\nexport const ButtonSizesValuesArray = Object.values(BUTTON_SIZES);\nexport const ButtonShapesValuesArray = Object.values(BUTTON_SHAPES);\nexport const ButtonInteractionStates = ['hover', 'focus', 'active'];\n\nexport const ButtonTypesValuesString = JSON.stringify(ButtonTypesValuesArray);\nexport const ButtonSizesValuesString = JSON.stringify(ButtonSizesValuesArray);\nexport const ButtonShapesValuesString = JSON.stringify(ButtonShapesValuesArray);\nexport const ButtonInteractionStatesValuesString = JSON.stringify(ButtonInteractionStates);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,MAAM;AAAA,EACN,aAAa;AAAA,EACb,cAAc;AAAA,EACd,KAAK;AACP;AAEO,MAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,OAAO;AACT;AAEO,MAAM,eAAe;AAAA,EAC1B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,QAAQ;AAAA,EACnB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,cAAc;AAAA,EACzB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,yBAAyB,OAAO,OAAO,YAAY;AACzD,MAAM,yBAAyB,OAAO,OAAO,YAAY;AACzD,MAAM,0BAA0B,OAAO,OAAO,aAAa;AAC3D,MAAM,0BAA0B,CAAC,SAAS,SAAS,QAAQ;AAE3D,MAAM,0BAA0B,KAAK,UAAU,sBAAsB;AACrE,MAAM,0BAA0B,KAAK,UAAU,sBAAsB;AACrE,MAAM,2BAA2B,KAAK,UAAU,uBAAuB;AACvE,MAAM,sCAAsC,KAAK,UAAU,uBAAuB;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,MAAM;AAAA,EACN,aAAa;AAAA,EACb,cAAc;AAAA,EACd,KAAK;AACP;AAEO,MAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,OAAO;AACT;AAEO,MAAM,eAAe;AAAA,EAC1B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,QAAQ;AAAA,EACnB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,cAAc;AAAA,EACzB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,yBAAyB,OAAO,OAAO,YAAY;AACzD,MAAM,yBAAyB,OAAO,OAAO,YAAY;AACzD,MAAM,0BAA0B,OAAO,OAAO,aAAa;AAC3D,MAAM,0BAA0B,CAAC,SAAS,SAAS,QAAQ;AAE3D,MAAM,0BAA0B,KAAK,UAAU,sBAAsB;AACrE,MAAM,0BAA0B,KAAK,UAAU,sBAAsB;AACrE,MAAM,2BAA2B,KAAK,UAAU,uBAAuB;AACvE,MAAM,sCAAsC,KAAK,UAAU,uBAAuB;",
   "names": []
 }

package/dist/cjs/index.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));
@@ -32,6 +36,6 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
-var import_DSButtonV2 = require("./DSButtonV2");
-var import_constants = require("./constants");
+var import_DSButtonV2 = require("./DSButtonV2.js");
+var import_constants = require("./constants.js");
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export { DSButtonV2, DSButtonV2WithSchema } from './DSButtonV2';\nexport { BUTTON_SIZES, BUTTON_TYPES, BUTTON_SHAPES } from './constants';\nexport type { DSButtonT } from './react-desc-prop-types';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAiD;AACjD,uBAA0D;",
+  "sourcesContent": ["export { DSButtonV2, DSButtonV2WithSchema } from './DSButtonV2.js';\nexport { BUTTON_SIZES, BUTTON_TYPES, BUTTON_SHAPES } from './constants.js';\nexport type { DSButtonT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAiD;AACjD,uBAA0D;",
   "names": []
 }

package/dist/cjs/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "commonjs",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

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

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));
@@ -30,8 +34,8 @@ __export(react_desc_prop_types_exports, {
 module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_constants = require("./constants");
-var import_DSButtonV2Definitions = require("./DSButtonV2Definitions");
+var import_constants = require("./constants.js");
+var import_DSButtonV2Definitions = require("./DSButtonV2Definitions.js");
 const defaultProps = {
   size: import_constants.BUTTON_SIZES.M,
   buttonType: import_constants.BUTTON_TYPES.FILLED,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { RefCallback, WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport {\n  BUTTON_SIZES,\n  BUTTON_TYPES,\n  BUTTON_SHAPES,\n  ButtonSizesValuesArray,\n  ButtonInteractionStates,\n  ButtonSizesValuesString,\n  ButtonInteractionStatesValuesString,\n  ButtonTypesValuesArray,\n  ButtonTypesValuesString,\n  ButtonShapesValuesArray,\n  ButtonShapesValuesString,\n} from './constants';\nimport { DSButtonV2DataTestId } from './DSButtonV2Definitions';\nimport type { ButtonSizesT, ButtonTypesT, ButtonShapesT } from './sharedTypes';\n\nexport declare namespace DSButtonT {\n  type HTMLButtonTypeProp = 'button' | 'submit' | 'reset';\n\n  export interface DefaultProps {\n    'data-testid': string;\n    size: ButtonSizesT;\n    type: HTMLButtonTypeProp;\n    buttonType: ButtonTypesT;\n    onClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n    shape: ButtonShapesT;\n  }\n  export interface OptionalProps {\n    innerRef?: React.RefObject<HTMLButtonElement> | RefCallback<HTMLButtonElement>;\n  }\n  export interface RequiredProps {\n    children: React.ReactNode;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSButtonT.DefaultProps = {\n  size: BUTTON_SIZES.M,\n  buttonType: BUTTON_TYPES.FILLED,\n  shape: BUTTON_SHAPES.DEFAULT,\n  'data-testid': DSButtonV2DataTestId.ROOT,\n  type: 'button',\n  onClick: () => {},\n};\n\nexport const DSButtonPropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).description(\n    'String, Number and/or Dimsum Icon',\n  ).isRequired,\n  buttonType: PropTypes.oneOf(ButtonTypesValuesArray)\n    .description(ButtonTypesValuesString)\n    .defaultValue(BUTTON_TYPES.FILLED),\n  shape: PropTypes.oneOf(ButtonShapesValuesArray)\n    .description(ButtonShapesValuesString)\n    .defaultValue(BUTTON_SHAPES.DEFAULT),\n  type: PropTypes.string.description('html \"type\" props').defaultValue('button'),\n  size: PropTypes.oneOf(ButtonSizesValuesArray).description(ButtonSizesValuesString).defaultValue(BUTTON_SIZES.M),\n  onClick: PropTypes.func\n    .description('function executed when the button is activated (via keyboard \"space\" or enter OR via mouse)')\n    .signature('(( e: React.SyntheticEvent ) => void )')\n    .defaultValue(() => {}),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n\n  'data-testid': PropTypes.string.description('root element data-testid').defaultValue(DSButtonV2DataTestId.ROOT),\n  'data-testemulatestate': PropTypes.oneOf(ButtonInteractionStates).description(\n    `Emulates button states. Useful for e2e tests. ${ButtonInteractionStatesValuesString}`,\n  ),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKvB,8BAAuE;AACvE,uBAYO;AACP,mCAAqC;AAoC9B,MAAM,eAAuC;AAAA,EAClD,MAAM,8BAAa;AAAA,EACnB,YAAY,8BAAa;AAAA,EACzB,OAAO,+BAAc;AAAA,EACrB,eAAe,kDAAqB;AAAA,EACpC,MAAM;AAAA,EACN,SAAS,MAAM;AAAA,EAAC;AAClB;AAEO,MAAM,oBAAoB;AAAA,EAC/B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,QAAQ,kCAAU,IAAI,CAAC,CAAC,EAAE;AAAA,IACjF;AAAA,EACF,EAAE;AAAA,EACF,YAAY,kCAAU,MAAM,uCAAsB,EAC/C,YAAY,wCAAuB,EACnC,aAAa,8BAAa,MAAM;AAAA,EACnC,OAAO,kCAAU,MAAM,wCAAuB,EAC3C,YAAY,yCAAwB,EACpC,aAAa,+BAAc,OAAO;AAAA,EACrC,MAAM,kCAAU,OAAO,YAAY,mBAAmB,EAAE,aAAa,QAAQ;AAAA,EAC7E,MAAM,kCAAU,MAAM,uCAAsB,EAAE,YAAY,wCAAuB,EAAE,aAAa,8BAAa,CAAC;AAAA,EAC9G,SAAS,kCAAU,KAChB,YAAY,6FAA6F,EACzG,UAAU,wCAAwC,EAClD,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EAE9G,eAAe,kCAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,kDAAqB,IAAI;AAAA,EAC9G,yBAAyB,kCAAU,MAAM,wCAAuB,EAAE;AAAA,IAChE,iDAAiD;AAAA,EACnD;AACF;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { RefCallback, WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport {\n  BUTTON_SIZES,\n  BUTTON_TYPES,\n  BUTTON_SHAPES,\n  ButtonSizesValuesArray,\n  ButtonInteractionStates,\n  ButtonSizesValuesString,\n  ButtonInteractionStatesValuesString,\n  ButtonTypesValuesArray,\n  ButtonTypesValuesString,\n  ButtonShapesValuesArray,\n  ButtonShapesValuesString,\n} from './constants.js';\nimport { DSButtonV2DataTestId } from './DSButtonV2Definitions.js';\nimport type { ButtonSizesT, ButtonTypesT, ButtonShapesT } from './sharedTypes.js';\n\nexport declare namespace DSButtonT {\n  type HTMLButtonTypeProp = 'button' | 'submit' | 'reset';\n\n  export interface DefaultProps {\n    'data-testid': string;\n    size: ButtonSizesT;\n    type: HTMLButtonTypeProp;\n    buttonType: ButtonTypesT;\n    onClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n    shape: ButtonShapesT;\n  }\n  export interface OptionalProps {\n    innerRef?: React.RefObject<HTMLButtonElement> | RefCallback<HTMLButtonElement>;\n  }\n  export interface RequiredProps {\n    children: React.ReactNode;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSButtonT.DefaultProps = {\n  size: BUTTON_SIZES.M,\n  buttonType: BUTTON_TYPES.FILLED,\n  shape: BUTTON_SHAPES.DEFAULT,\n  'data-testid': DSButtonV2DataTestId.ROOT,\n  type: 'button',\n  onClick: () => {},\n};\n\nexport const DSButtonPropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).description(\n    'String, Number and/or Dimsum Icon',\n  ).isRequired,\n  buttonType: PropTypes.oneOf(ButtonTypesValuesArray)\n    .description(ButtonTypesValuesString)\n    .defaultValue(BUTTON_TYPES.FILLED),\n  shape: PropTypes.oneOf(ButtonShapesValuesArray)\n    .description(ButtonShapesValuesString)\n    .defaultValue(BUTTON_SHAPES.DEFAULT),\n  type: PropTypes.string.description('html \"type\" props').defaultValue('button'),\n  size: PropTypes.oneOf(ButtonSizesValuesArray).description(ButtonSizesValuesString).defaultValue(BUTTON_SIZES.M),\n  onClick: PropTypes.func\n    .description('function executed when the button is activated (via keyboard \"space\" or enter OR via mouse)')\n    .signature('(( e: React.SyntheticEvent ) => void )')\n    .defaultValue(() => {}),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n\n  'data-testid': PropTypes.string.description('root element data-testid').defaultValue(DSButtonV2DataTestId.ROOT),\n  'data-testemulatestate': PropTypes.oneOf(ButtonInteractionStates).description(\n    `Emulates button states. Useful for e2e tests. ${ButtonInteractionStatesValuesString}`,\n  ),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKvB,8BAAuE;AACvE,uBAYO;AACP,mCAAqC;AAoC9B,MAAM,eAAuC;AAAA,EAClD,MAAM,8BAAa;AAAA,EACnB,YAAY,8BAAa;AAAA,EACzB,OAAO,+BAAc;AAAA,EACrB,eAAe,kDAAqB;AAAA,EACpC,MAAM;AAAA,EACN,SAAS,MAAM;AAAA,EAAC;AAClB;AAEO,MAAM,oBAAoB;AAAA,EAC/B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,QAAQ,kCAAU,IAAI,CAAC,CAAC,EAAE;AAAA,IACjF;AAAA,EACF,EAAE;AAAA,EACF,YAAY,kCAAU,MAAM,uCAAsB,EAC/C,YAAY,wCAAuB,EACnC,aAAa,8BAAa,MAAM;AAAA,EACnC,OAAO,kCAAU,MAAM,wCAAuB,EAC3C,YAAY,yCAAwB,EACpC,aAAa,+BAAc,OAAO;AAAA,EACrC,MAAM,kCAAU,OAAO,YAAY,mBAAmB,EAAE,aAAa,QAAQ;AAAA,EAC7E,MAAM,kCAAU,MAAM,uCAAsB,EAAE,YAAY,wCAAuB,EAAE,aAAa,8BAAa,CAAC;AAAA,EAC9G,SAAS,kCAAU,KAChB,YAAY,6FAA6F,EACzG,UAAU,wCAAwC,EAClD,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EAE9G,eAAe,kCAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,kDAAqB,IAAI;AAAA,EAC9G,yBAAyB,kCAAU,MAAM,wCAAuB,EAAE;AAAA,IAChE,iDAAiD;AAAA,EACnD;AACF;",
   "names": []
 }

package/dist/cjs/sharedTypes.js

@@ -14,6 +14,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));

package/dist/cjs/sharedTypes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/sharedTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { BUTTON_SIZES, BUTTON_TYPES, BUTTON_SHAPES, ButtonInteractionStates } from './constants';\n\nexport type ButtonSizesT = (typeof BUTTON_SIZES)[keyof typeof BUTTON_SIZES];\n\nexport type ButtonTypesT = (typeof BUTTON_TYPES)[keyof typeof BUTTON_TYPES];\n\nexport type ButtonShapesT = (typeof BUTTON_SHAPES)[keyof typeof BUTTON_SHAPES];\n\nexport type ButtonInteractionStatesT = (typeof ButtonInteractionStates)[number];\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
+  "sourcesContent": ["import type { BUTTON_SIZES, BUTTON_TYPES, BUTTON_SHAPES, ButtonInteractionStates } from './constants.js';\n\nexport type ButtonSizesT = (typeof BUTTON_SIZES)[keyof typeof BUTTON_SIZES];\n\nexport type ButtonTypesT = (typeof BUTTON_TYPES)[keyof typeof BUTTON_TYPES];\n\nexport type ButtonShapesT = (typeof BUTTON_SHAPES)[keyof typeof BUTTON_SHAPES];\n\nexport type ButtonInteractionStatesT = (typeof ButtonInteractionStates)[number];\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
   "names": []
 }

package/dist/cjs/styles.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));
@@ -33,8 +37,8 @@ __export(styles_exports, {
 module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
-var import_constants = require("./constants");
-var import_DSButtonV2Definitions = require("./DSButtonV2Definitions");
+var import_constants = require("./constants.js");
+var import_DSButtonV2Definitions = require("./DSButtonV2Definitions.js");
 const pseudoBorder = import_ds_system.css`
   position: absolute;
   content: '';

package/dist/cjs/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { BUTTON_TYPES, BUTTON_SIZES, BUTTON_SHAPES, mobileSizes, sizes } from './constants';\nimport type { ButtonShapesT, ButtonSizesT, ButtonTypesT } from './sharedTypes';\nimport type { DSButtonT } from './react-desc-prop-types';\nimport { DSButtonV2Slots, DSButtonV2Name } from './DSButtonV2Definitions';\n\nexport interface StyledButtonPropsT {\n  size: ButtonSizesT;\n  buttonType: ButtonTypesT;\n  shape: ButtonShapesT;\n}\n\nconst pseudoBorder = css<StyledButtonPropsT>`\n  position: absolute;\n  content: '';\n  border-style: solid;\n  border-width: ${({ size, buttonType }) =>\n    size === BUTTON_SIZES.S && buttonType === BUTTON_TYPES.FILLED ? '1px' : '2px'};\n  ${({ buttonType, shape, theme }) => {\n    if (buttonType === BUTTON_TYPES.FILLED || buttonType === BUTTON_TYPES.ICON_FILLED) {\n      return `\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          border-color: ${theme.colors.neutral['000']};\n          border-radius: ${shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '0px'};\n      `;\n    }\n    return `\n    top: -1px;\n    left: -1px;\n    width: calc(100% + 2px);\n    height: calc(100% + 2px);\n    border-radius:  ${shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '2px'};\n`;\n  }}\n`;\n\nconst fontSizeSettings = css<StyledButtonPropsT>`\n  ${({ theme, size, buttonType }) => {\n    switch (size) {\n      case BUTTON_SIZES.S:\n        if (buttonType === BUTTON_TYPES.TEXT) return `font-size: ${theme.fontSizes.label[200]};`;\n        return `font-size: ${theme.fontSizes.label[300]};`;\n      case BUTTON_SIZES.L:\n        return `\n        font-size: ${theme.fontSizes.value[600]};\n    `;\n      default:\n        return `\n        font-size: ${theme.fontSizes.value[500]};\n    `;\n    }\n  }}\n`;\nexport const RawButton = styled('button', {\n  name: DSButtonV2Name,\n  slot: DSButtonV2Slots.ROOT,\n})<DSButtonT.Props>`\n  outline: none;\n  border: none;\n  background: transparent;\n  &:hover {\n    background: transparent;\n  }\n`;\n\nexport const DefaultButton = styled(RawButton)<StyledButtonPropsT>`\n  display: inline-grid;\n  grid-gap: 0.615rem;\n  position: relative;\n  grid-auto-flow: column;\n  place-items: center;\n  align-items: center;\n  justify-items: center;\n  width: fit-content;\n  cursor: pointer;\n  font-weight: 600;\n  padding: ${({ theme, buttonType }) =>\n    buttonType !== BUTTON_TYPES.ICON &&\n    buttonType !== BUTTON_TYPES.ICON_OUTLINE &&\n    buttonType !== BUTTON_TYPES.ICON_FILLED\n      ? `0 ${theme.space.xs}`\n      : '0'};\n  border-style: solid;\n\n  height: ${({ size }) => mobileSizes[size]};\n  min-width: ${({ size }) => mobileSizes[size]};\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    height: ${({ size }) => sizes[size]};\n    min-width: ${({ size }) => sizes[size]};\n  }\n  border-radius: ${({ shape }) => (shape === BUTTON_SHAPES.DEFAULT ? '2px' : '50%')};\n  ${fontSizeSettings}\n  ${({ buttonType }) => (buttonType === BUTTON_TYPES.TEXT ? 'text-transform: uppercase;' : '')}\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n  ${xStyledCommonProps}\n`;\n\nexport const FilledButton = styled(DefaultButton)<StyledButtonPropsT>`\n  background-color: brand-600;\n  border-color: brand-600;\n  color: neutral-000;\n  border-width: ${({ size }) => (size === 's' ? '1px;' : '2px')};\n  &:focus,\n  &[data-testemulatestate='focus'] {\n    &:after {\n      ${pseudoBorder}\n    }\n    border-color: brand-700;\n  }\n  & svg {\n    fill: neutral-000;\n  }\n  &:hover,\n  &:active,\n  &[data-testemulatestate='hover'],\n  &[data-testemulatestate='active'] {\n    background-color: brand-700;\n    border-color: brand-700;\n  }\n  &[aria-disabled='true'] {\n    background-color: neutral-100;\n    border-color: neutral-100;\n    color: #5c6574;\n    & svg {\n      fill: #5c6574;\n    }\n  }\n`;\n\nexport const OutlineButton = styled(DefaultButton)`\n  background: neutral-000;\n  border-color: neutral-400;\n  color: brand-600;\n  border-width: 1px;\n  &:focus,\n  &[data-testemulatestate='focus'] {\n    &:after {\n      ${pseudoBorder}\n      border-color: brand-600;\n    }\n  }\n  & svg {\n    fill: brand-600;\n  }\n  &:hover,\n  &:active,\n  &[data-testemulatestate='hover'],\n  &[data-testemulatestate='active'] {\n    border-color: brand-700;\n    color: brand-700;\n    & svg {\n      fill: brand-700;\n    }\n  }\n  &[aria-disabled='true'] {\n    border-color: neutral-400;\n    color: neutral-500;\n    & svg {\n      fill: neutral-500;\n    }\n  }\n`;\n\nexport const TextButton = styled(DefaultButton)`\n  border-color: transparent;\n  background-color: transparent;\n  border-width: 1px;\n  &:focus,\n  &[data-testemulatestate='focus'] {\n    &:after {\n      ${pseudoBorder}\n      border-color: brand-700;\n    }\n  }\n  color: brand-700;\n  & svg {\n    fill: brand-700;\n  }\n  &:hover:not([aria-disabled='true']),\n  &[data-testemulatestate='hover'] {\n    background-color: brand-200;\n    color: brand-700;\n    & svg {\n      fill: brand-700;\n    }\n  }\n  &:active,\n  &[data-testemulatestate='active'] {\n    color: brand-700;\n  }\n  &[aria-disabled='true'] {\n    color: neutral-500;\n    & svg {\n      fill: neutral-500;\n    }\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { BUTTON_TYPES, BUTTON_SIZES, BUTTON_SHAPES, mobileSizes, sizes } from './constants.js';\nimport type { ButtonShapesT, ButtonSizesT, ButtonTypesT } from './sharedTypes.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\nimport { DSButtonV2Slots, DSButtonV2Name } from './DSButtonV2Definitions.js';\n\nexport interface StyledButtonPropsT {\n  size: ButtonSizesT;\n  buttonType: ButtonTypesT;\n  shape: ButtonShapesT;\n}\n\nconst pseudoBorder = css<StyledButtonPropsT>`\n  position: absolute;\n  content: '';\n  border-style: solid;\n  border-width: ${({ size, buttonType }) =>\n    size === BUTTON_SIZES.S && buttonType === BUTTON_TYPES.FILLED ? '1px' : '2px'};\n  ${({ buttonType, shape, theme }) => {\n    if (buttonType === BUTTON_TYPES.FILLED || buttonType === BUTTON_TYPES.ICON_FILLED) {\n      return `\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          border-color: ${theme.colors.neutral['000']};\n          border-radius: ${shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '0px'};\n      `;\n    }\n    return `\n    top: -1px;\n    left: -1px;\n    width: calc(100% + 2px);\n    height: calc(100% + 2px);\n    border-radius:  ${shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '2px'};\n`;\n  }}\n`;\n\nconst fontSizeSettings = css<StyledButtonPropsT>`\n  ${({ theme, size, buttonType }) => {\n    switch (size) {\n      case BUTTON_SIZES.S:\n        if (buttonType === BUTTON_TYPES.TEXT) return `font-size: ${theme.fontSizes.label[200]};`;\n        return `font-size: ${theme.fontSizes.label[300]};`;\n      case BUTTON_SIZES.L:\n        return `\n        font-size: ${theme.fontSizes.value[600]};\n    `;\n      default:\n        return `\n        font-size: ${theme.fontSizes.value[500]};\n    `;\n    }\n  }}\n`;\nexport const RawButton = styled('button', {\n  name: DSButtonV2Name,\n  slot: DSButtonV2Slots.ROOT,\n})<DSButtonT.Props>`\n  outline: none;\n  border: none;\n  background: transparent;\n  &:hover {\n    background: transparent;\n  }\n`;\n\nexport const DefaultButton = styled(RawButton)<StyledButtonPropsT>`\n  display: inline-grid;\n  grid-gap: 0.615rem;\n  position: relative;\n  grid-auto-flow: column;\n  place-items: center;\n  align-items: center;\n  justify-items: center;\n  width: fit-content;\n  cursor: pointer;\n  font-weight: 600;\n  padding: ${({ theme, buttonType }) =>\n    buttonType !== BUTTON_TYPES.ICON &&\n    buttonType !== BUTTON_TYPES.ICON_OUTLINE &&\n    buttonType !== BUTTON_TYPES.ICON_FILLED\n      ? `0 ${theme.space.xs}`\n      : '0'};\n  border-style: solid;\n\n  height: ${({ size }) => mobileSizes[size]};\n  min-width: ${({ size }) => mobileSizes[size]};\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    height: ${({ size }) => sizes[size]};\n    min-width: ${({ size }) => sizes[size]};\n  }\n  border-radius: ${({ shape }) => (shape === BUTTON_SHAPES.DEFAULT ? '2px' : '50%')};\n  ${fontSizeSettings}\n  ${({ buttonType }) => (buttonType === BUTTON_TYPES.TEXT ? 'text-transform: uppercase;' : '')}\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n  ${xStyledCommonProps}\n`;\n\nexport const FilledButton = styled(DefaultButton)<StyledButtonPropsT>`\n  background-color: brand-600;\n  border-color: brand-600;\n  color: neutral-000;\n  border-width: ${({ size }) => (size === 's' ? '1px;' : '2px')};\n  &:focus,\n  &[data-testemulatestate='focus'] {\n    &:after {\n      ${pseudoBorder}\n    }\n    border-color: brand-700;\n  }\n  & svg {\n    fill: neutral-000;\n  }\n  &:hover,\n  &:active,\n  &[data-testemulatestate='hover'],\n  &[data-testemulatestate='active'] {\n    background-color: brand-700;\n    border-color: brand-700;\n  }\n  &[aria-disabled='true'] {\n    background-color: neutral-100;\n    border-color: neutral-100;\n    color: #5c6574;\n    & svg {\n      fill: #5c6574;\n    }\n  }\n`;\n\nexport const OutlineButton = styled(DefaultButton)`\n  background: neutral-000;\n  border-color: neutral-400;\n  color: brand-600;\n  border-width: 1px;\n  &:focus,\n  &[data-testemulatestate='focus'] {\n    &:after {\n      ${pseudoBorder}\n      border-color: brand-600;\n    }\n  }\n  & svg {\n    fill: brand-600;\n  }\n  &:hover,\n  &:active,\n  &[data-testemulatestate='hover'],\n  &[data-testemulatestate='active'] {\n    border-color: brand-700;\n    color: brand-700;\n    & svg {\n      fill: brand-700;\n    }\n  }\n  &[aria-disabled='true'] {\n    border-color: neutral-400;\n    color: neutral-500;\n    & svg {\n      fill: neutral-500;\n    }\n  }\n`;\n\nexport const TextButton = styled(DefaultButton)`\n  border-color: transparent;\n  background-color: transparent;\n  border-width: 1px;\n  &:focus,\n  &[data-testemulatestate='focus'] {\n    &:after {\n      ${pseudoBorder}\n      border-color: brand-700;\n    }\n  }\n  color: brand-700;\n  & svg {\n    fill: brand-700;\n  }\n  &:hover:not([aria-disabled='true']),\n  &[data-testemulatestate='hover'] {\n    background-color: brand-200;\n    color: brand-700;\n    & svg {\n      fill: brand-700;\n    }\n  }\n  &:active,\n  &[data-testemulatestate='active'] {\n    color: brand-700;\n  }\n  &[aria-disabled='true'] {\n    color: neutral-500;\n    & svg {\n      fill: neutral-500;\n    }\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/DSButtonV2.js

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { describe } from "@elliemae/ds-props-helpers";
-import { useButtonV2 } from "./config/useButtonV2";
-import { DSButtonPropTypes } from "./react-desc-prop-types";
-import { DSButtonV2Name } from "./DSButtonV2Definitions";
+import { useButtonV2 } from "./config/useButtonV2.js";
+import { DSButtonPropTypes } from "./react-desc-prop-types.js";
+import { DSButtonV2Name } from "./DSButtonV2Definitions.js";
 const DSButtonV2 = (props) => {
   const {
     propsWithDefault,

package/dist/esm/DSButtonV2.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSButtonV2.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useButtonV2 } from './config/useButtonV2';\nimport type { DSButtonT } from './react-desc-prop-types';\nimport { DSButtonPropTypes } from './react-desc-prop-types';\nimport { DSButtonV2Name } from './DSButtonV2Definitions';\n\nconst DSButtonV2: React.ComponentType<DSButtonT.Props> = (props) => {\n  const {\n    propsWithDefault,\n    tabIndex,\n    handleOnMouseDown,\n    globalProps,\n    xstyledProps,\n    handleOnKeyDown,\n    handleOnClick,\n    ButtonRenderer,\n  } = useButtonV2(props);\n  const { size, buttonType, innerRef, children, type, shape } = propsWithDefault;\n  const { disabled, ...restGlobalProps } = globalProps;\n  return (\n    <ButtonRenderer\n      aria-disabled={disabled ? 'true' : false}\n      {...restGlobalProps}\n      {...xstyledProps}\n      shape={shape}\n      type={type}\n      buttonType={buttonType}\n      tabIndex={tabIndex}\n      size={size}\n      ref={innerRef}\n      onKeyDown={handleOnKeyDown}\n      onClick={handleOnClick}\n      onMouseDown={handleOnMouseDown}\n    >\n      {children}\n    </ButtonRenderer>\n  );\n};\n\nDSButtonV2.propTypes = DSButtonPropTypes;\nDSButtonV2.displayName = DSButtonV2Name;\nconst DSButtonV2WithSchema = describe(DSButtonV2);\nDSButtonV2WithSchema.propTypes = DSButtonPropTypes;\n\nexport { DSButtonV2, DSButtonV2WithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACqBnB;AApBJ,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAE5B,SAAS,yBAAyB;AAClC,SAAS,sBAAsB;AAE/B,MAAM,aAAmD,CAAC,UAAU;AAClE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,YAAY,KAAK;AACrB,QAAM,EAAE,MAAM,YAAY,UAAU,UAAU,MAAM,MAAM,IAAI;AAC9D,QAAM,EAAE,aAAa,gBAAgB,IAAI;AACzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAe,WAAW,SAAS;AAAA,MAClC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,WAAW;AAAA,MACX,SAAS;AAAA,MACT,aAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU;AAChD,qBAAqB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useButtonV2 } from './config/useButtonV2.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\nimport { DSButtonPropTypes } from './react-desc-prop-types.js';\nimport { DSButtonV2Name } from './DSButtonV2Definitions.js';\n\nconst DSButtonV2: React.ComponentType<DSButtonT.Props> = (props) => {\n  const {\n    propsWithDefault,\n    tabIndex,\n    handleOnMouseDown,\n    globalProps,\n    xstyledProps,\n    handleOnKeyDown,\n    handleOnClick,\n    ButtonRenderer,\n  } = useButtonV2(props);\n  const { size, buttonType, innerRef, children, type, shape } = propsWithDefault;\n  const { disabled, ...restGlobalProps } = globalProps;\n  return (\n    <ButtonRenderer\n      aria-disabled={disabled ? 'true' : false}\n      {...restGlobalProps}\n      {...xstyledProps}\n      shape={shape}\n      type={type}\n      buttonType={buttonType}\n      tabIndex={tabIndex}\n      size={size}\n      ref={innerRef}\n      onKeyDown={handleOnKeyDown}\n      onClick={handleOnClick}\n      onMouseDown={handleOnMouseDown}\n    >\n      {children}\n    </ButtonRenderer>\n  );\n};\n\nDSButtonV2.propTypes = DSButtonPropTypes;\nDSButtonV2.displayName = DSButtonV2Name;\nconst DSButtonV2WithSchema = describe(DSButtonV2);\nDSButtonV2WithSchema.propTypes = DSButtonPropTypes;\n\nexport { DSButtonV2, DSButtonV2WithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACqBnB;AApBJ,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAE5B,SAAS,yBAAyB;AAClC,SAAS,sBAAsB;AAE/B,MAAM,aAAmD,CAAC,UAAU;AAClE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,YAAY,KAAK;AACrB,QAAM,EAAE,MAAM,YAAY,UAAU,UAAU,MAAM,MAAM,IAAI;AAC9D,QAAM,EAAE,UAAU,GAAG,gBAAgB,IAAI;AACzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAe,WAAW,SAAS;AAAA,MAClC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,WAAW;AAAA,MACX,SAAS;AAAA,MACT,aAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU;AAChD,qBAAqB,YAAY;",
   "names": []
 }

package/dist/esm/config/useButtonRenderer.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import React2 from "react";
-import { DefaultButton, RawButton, FilledButton, OutlineButton, TextButton } from "../styles";
+import { DefaultButton, RawButton, FilledButton, OutlineButton, TextButton } from "../styles.js";
 const buttonMap = {
   filled: FilledButton,
   iconFilled: FilledButton,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useButtonRenderer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSButtonT } from '../react-desc-prop-types';\nimport { DefaultButton, RawButton, FilledButton, OutlineButton, TextButton } from '../styles';\n\nconst buttonMap = {\n  filled: FilledButton,\n  iconFilled: FilledButton,\n  outline: OutlineButton,\n  iconOutline: OutlineButton,\n  text: TextButton,\n  icon: TextButton,\n  raw: RawButton,\n} as const;\n\nexport const useButtonRenderer = (propsWithDefault: DSButtonT.InternalProps) => {\n  const { buttonType } = propsWithDefault;\n  return React.useMemo(() => buttonMap[buttonType] || DefaultButton, [buttonType]);\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAElB,SAAS,eAAe,WAAW,cAAc,eAAe,kBAAkB;AAElF,MAAM,YAAY;AAAA,EAChB,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,aAAa;AAAA,EACb,MAAM;AAAA,EACN,MAAM;AAAA,EACN,KAAK;AACP;AAEO,MAAM,oBAAoB,CAAC,qBAA8C;AAC9E,QAAM,EAAE,WAAW,IAAI;AACvB,SAAOA,OAAM,QAAQ,MAAM,UAAU,eAAe,eAAe,CAAC,UAAU,CAAC;AACjF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSButtonT } from '../react-desc-prop-types.js';\nimport { DefaultButton, RawButton, FilledButton, OutlineButton, TextButton } from '../styles.js';\n\nconst buttonMap = {\n  filled: FilledButton,\n  iconFilled: FilledButton,\n  outline: OutlineButton,\n  iconOutline: OutlineButton,\n  text: TextButton,\n  icon: TextButton,\n  raw: RawButton,\n} as const;\n\nexport const useButtonRenderer = (propsWithDefault: DSButtonT.InternalProps) => {\n  const { buttonType } = propsWithDefault;\n  return React.useMemo(() => buttonMap[buttonType] || DefaultButton, [buttonType]);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAElB,SAAS,eAAe,WAAW,cAAc,eAAe,kBAAkB;AAElF,MAAM,YAAY;AAAA,EAChB,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,aAAa;AAAA,EACb,MAAM;AAAA,EACN,MAAM;AAAA,EACN,KAAK;AACP;AAEO,MAAM,oBAAoB,CAAC,qBAA8C;AAC9E,QAAM,EAAE,WAAW,IAAI;AACvB,SAAOA,OAAM,QAAQ,MAAM,UAAU,UAAU,KAAK,eAAe,CAAC,UAAU,CAAC;AACjF;",
   "names": ["React"]
 }

package/dist/esm/config/useButtonV2.js

@@ -1,9 +1,9 @@
 import * as React from "react";
 import React2 from "react";
 import { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
-import { defaultProps, DSButtonPropTypes } from "../react-desc-prop-types";
-import { useValidateProps } from "./useValidateProps";
-import { useButtonRenderer } from "./useButtonRenderer";
+import { defaultProps, DSButtonPropTypes } from "../react-desc-prop-types.js";
+import { useValidateProps } from "./useValidateProps.js";
+import { useButtonRenderer } from "./useButtonRenderer.js";
 const useButtonV2 = (props) => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
   useValidateProps(props, DSButtonPropTypes);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useButtonV2.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport type { DSButtonT } from '../react-desc-prop-types';\nimport { defaultProps, DSButtonPropTypes } from '../react-desc-prop-types';\nimport { useValidateProps } from './useValidateProps';\nimport { useButtonRenderer } from './useButtonRenderer';\n\nexport interface ButtonV2Configuration {\n  propsWithDefault: DSButtonT.InternalProps;\n  globalProps: ReturnType<typeof useGetGlobalAttributes>;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  ButtonRenderer: ReturnType<typeof useButtonRenderer>;\n  handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement>;\n  tabIndex?: WCAGTabIndex;\n  handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n  handleOnMouseDown: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const useButtonV2 = (props: DSButtonT.Props): ButtonV2Configuration => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSButtonT.InternalProps>(props, defaultProps);\n  useValidateProps(props, DSButtonPropTypes);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalProps = useGetGlobalAttributes<DSButtonT.InternalProps, HTMLButtonElement>(propsWithDefault);\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  const { disabled } = globalProps;\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const ButtonRenderer = useButtonRenderer(propsWithDefault);\n  const { onKeyDown, onClick, onMouseDown } = propsWithDefault;\n\n  const handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = React.useCallback(\n    (e) => {\n      if (disabled || !onKeyDown) {\n        return;\n      }\n\n      onKeyDown?.(e);\n      const { key } = e;\n      if (['Space', ' ', 'Enter'].includes(key)) {\n        e.preventDefault();\n        onClick(e);\n      }\n    },\n    [disabled, onClick, onKeyDown],\n  );\n\n  const handleOnClick = React.useCallback(\n    (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\n      if (!disabled && onClick) {\n        onClick(e);\n      }\n    },\n    [disabled, onClick],\n  );\n\n  const handleOnMouseDown: React.MouseEventHandler<HTMLButtonElement> = React.useCallback(\n    (e) => {\n      if (disabled) {\n        e.preventDefault();\n        return;\n      }\n      onMouseDown?.(e);\n    },\n    [disabled, onMouseDown],\n  );\n\n  const tabIndex = globalProps.disabled ? -1 : globalProps.tabIndex;\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      ButtonRenderer,\n      handleOnKeyDown,\n      handleOnClick,\n      tabIndex,\n      handleOnMouseDown,\n    }),\n    [\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      ButtonRenderer,\n      handleOnKeyDown,\n      handleOnClick,\n      tabIndex,\n      handleOnMouseDown,\n    ],\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport type { DSButtonT } from '../react-desc-prop-types.js';\nimport { defaultProps, DSButtonPropTypes } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useButtonRenderer } from './useButtonRenderer.js';\n\nexport interface ButtonV2Configuration {\n  propsWithDefault: DSButtonT.InternalProps;\n  globalProps: ReturnType<typeof useGetGlobalAttributes>;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  ButtonRenderer: ReturnType<typeof useButtonRenderer>;\n  handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement>;\n  tabIndex?: WCAGTabIndex;\n  handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n  handleOnMouseDown: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const useButtonV2 = (props: DSButtonT.Props): ButtonV2Configuration => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSButtonT.InternalProps>(props, defaultProps);\n  useValidateProps(props, DSButtonPropTypes);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalProps = useGetGlobalAttributes<DSButtonT.InternalProps, HTMLButtonElement>(propsWithDefault);\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  const { disabled } = globalProps;\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const ButtonRenderer = useButtonRenderer(propsWithDefault);\n  const { onKeyDown, onClick, onMouseDown } = propsWithDefault;\n\n  const handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = React.useCallback(\n    (e) => {\n      if (disabled || !onKeyDown) {\n        return;\n      }\n\n      onKeyDown?.(e);\n      const { key } = e;\n      if (['Space', ' ', 'Enter'].includes(key)) {\n        e.preventDefault();\n        onClick(e);\n      }\n    },\n    [disabled, onClick, onKeyDown],\n  );\n\n  const handleOnClick = React.useCallback(\n    (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\n      if (!disabled && onClick) {\n        onClick(e);\n      }\n    },\n    [disabled, onClick],\n  );\n\n  const handleOnMouseDown: React.MouseEventHandler<HTMLButtonElement> = React.useCallback(\n    (e) => {\n      if (disabled) {\n        e.preventDefault();\n        return;\n      }\n      onMouseDown?.(e);\n    },\n    [disabled, onMouseDown],\n  );\n\n  const tabIndex = globalProps.disabled ? -1 : globalProps.tabIndex;\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      ButtonRenderer,\n      handleOnKeyDown,\n      handleOnClick,\n      tabIndex,\n      handleOnMouseDown,\n    }),\n    [\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      ButtonRenderer,\n      handleOnKeyDown,\n      handleOnClick,\n      tabIndex,\n      handleOnMouseDown,\n    ],\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,wBAAwB,oBAAoB,oCAAoC;AAEzF,SAAS,cAAc,yBAAyB;AAChD,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAa3B,MAAM,cAAc,CAAC,UAAkD;AAI5E,QAAM,mBAAmB,6BAAsD,OAAO,YAAY;AAClG,mBAAiB,OAAO,iBAAiB;AAIzC,QAAM,cAAc,uBAAmE,gBAAgB;AACvG,QAAM,eAAe,mBAAmB,gBAAgB;AACxD,QAAM,EAAE,SAAS,IAAI;AAIrB,QAAM,iBAAiB,kBAAkB,gBAAgB;AACzD,QAAM,EAAE,WAAW,SAAS,YAAY,IAAI;AAE5C,QAAM,kBAAiEA,OAAM;AAAA,IAC3E,CAAC,MAAM;AACL,UAAI,YAAY,CAAC,WAAW;AAC1B;AAAA,MACF;AAEA,kBAAY,CAAC;AACb,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,CAAC,SAAS,KAAK,OAAO,EAAE,SAAS,GAAG,GAAG;AACzC,UAAE,eAAe;AACjB,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,UAAU,SAAS,SAAS;AAAA,EAC/B;AAEA,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAAoF;AACnF,UAAI,CAAC,YAAY,SAAS;AACxB,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,UAAU,OAAO;AAAA,EACpB;AAEA,QAAM,oBAAgEA,OAAM;AAAA,IAC1E,CAAC,MAAM;AACL,UAAI,UAAU;AACZ,UAAE,eAAe;AACjB;AAAA,MACF;AACA,oBAAc,CAAC;AAAA,IACjB;AAAA,IACA,CAAC,UAAU,WAAW;AAAA,EACxB;AAEA,QAAM,WAAW,YAAY,WAAW,KAAK,YAAY;AAEzD,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": ["React"]
 }

package/dist/esm/config/useValidateProps.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
-import { DSButtonV2Name } from "../DSButtonV2Definitions";
+import { DSButtonV2Name } from "../DSButtonV2Definitions.js";
 const useValidateProps = (props, propTypes) => {
   useValidateTypescriptPropTypes(props, propTypes, DSButtonV2Name);
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\nimport { DSButtonV2Name } from '../DSButtonV2Definitions';\nimport type { DSButtonT } from '../react-desc-prop-types';\n\nexport const useValidateProps = (props: DSButtonT.Props, propTypes: WeakValidationMap<unknown>): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSButtonV2Name);\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\nimport { DSButtonV2Name } from '../DSButtonV2Definitions.js';\nimport type { DSButtonT } from '../react-desc-prop-types.js';\n\nexport const useValidateProps = (props: DSButtonT.Props, propTypes: WeakValidationMap<unknown>): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSButtonV2Name);\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAE/C,SAAS,sBAAsB;AAGxB,MAAM,mBAAmB,CAAC,OAAwB,cAAgD;AAEvG,iCAA+B,OAAO,WAAW,cAAc;AACjE;",
   "names": []
 }

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { DSButtonV2, DSButtonV2WithSchema } from "./DSButtonV2";
-import { BUTTON_SIZES, BUTTON_TYPES, BUTTON_SHAPES } from "./constants";
+import { DSButtonV2, DSButtonV2WithSchema } from "./DSButtonV2.js";
+import { BUTTON_SIZES, BUTTON_TYPES, BUTTON_SHAPES } from "./constants.js";
 export {
   BUTTON_SHAPES,
   BUTTON_SIZES,

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSButtonV2, DSButtonV2WithSchema } from './DSButtonV2';\nexport { BUTTON_SIZES, BUTTON_TYPES, BUTTON_SHAPES } from './constants';\nexport type { DSButtonT } from './react-desc-prop-types';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSButtonV2, DSButtonV2WithSchema } from './DSButtonV2.js';\nexport { BUTTON_SIZES, BUTTON_TYPES, BUTTON_SHAPES } from './constants.js';\nexport type { DSButtonT } from './react-desc-prop-types.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,4BAA4B;AACjD,SAAS,cAAc,cAAc,qBAAqB;",
   "names": []
 }

package/dist/esm/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

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

@@ -12,8 +12,8 @@ import {
   ButtonTypesValuesString,
   ButtonShapesValuesArray,
   ButtonShapesValuesString
-} from "./constants";
-import { DSButtonV2DataTestId } from "./DSButtonV2Definitions";
+} from "./constants.js";
+import { DSButtonV2DataTestId } from "./DSButtonV2Definitions.js";
 const defaultProps = {
   size: BUTTON_SIZES.M,
   buttonType: BUTTON_TYPES.FILLED,

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.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { RefCallback, WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport {\n  BUTTON_SIZES,\n  BUTTON_TYPES,\n  BUTTON_SHAPES,\n  ButtonSizesValuesArray,\n  ButtonInteractionStates,\n  ButtonSizesValuesString,\n  ButtonInteractionStatesValuesString,\n  ButtonTypesValuesArray,\n  ButtonTypesValuesString,\n  ButtonShapesValuesArray,\n  ButtonShapesValuesString,\n} from './constants';\nimport { DSButtonV2DataTestId } from './DSButtonV2Definitions';\nimport type { ButtonSizesT, ButtonTypesT, ButtonShapesT } from './sharedTypes';\n\nexport declare namespace DSButtonT {\n  type HTMLButtonTypeProp = 'button' | 'submit' | 'reset';\n\n  export interface DefaultProps {\n    'data-testid': string;\n    size: ButtonSizesT;\n    type: HTMLButtonTypeProp;\n    buttonType: ButtonTypesT;\n    onClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n    shape: ButtonShapesT;\n  }\n  export interface OptionalProps {\n    innerRef?: React.RefObject<HTMLButtonElement> | RefCallback<HTMLButtonElement>;\n  }\n  export interface RequiredProps {\n    children: React.ReactNode;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSButtonT.DefaultProps = {\n  size: BUTTON_SIZES.M,\n  buttonType: BUTTON_TYPES.FILLED,\n  shape: BUTTON_SHAPES.DEFAULT,\n  'data-testid': DSButtonV2DataTestId.ROOT,\n  type: 'button',\n  onClick: () => {},\n};\n\nexport const DSButtonPropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).description(\n    'String, Number and/or Dimsum Icon',\n  ).isRequired,\n  buttonType: PropTypes.oneOf(ButtonTypesValuesArray)\n    .description(ButtonTypesValuesString)\n    .defaultValue(BUTTON_TYPES.FILLED),\n  shape: PropTypes.oneOf(ButtonShapesValuesArray)\n    .description(ButtonShapesValuesString)\n    .defaultValue(BUTTON_SHAPES.DEFAULT),\n  type: PropTypes.string.description('html \"type\" props').defaultValue('button'),\n  size: PropTypes.oneOf(ButtonSizesValuesArray).description(ButtonSizesValuesString).defaultValue(BUTTON_SIZES.M),\n  onClick: PropTypes.func\n    .description('function executed when the button is activated (via keyboard \"space\" or enter OR via mouse)')\n    .signature('(( e: React.SyntheticEvent ) => void )')\n    .defaultValue(() => {}),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n\n  'data-testid': PropTypes.string.description('root element data-testid').defaultValue(DSButtonV2DataTestId.ROOT),\n  'data-testemulatestate': PropTypes.oneOf(ButtonInteractionStates).description(\n    `Emulates button states. Useful for e2e tests. ${ButtonInteractionStatesValuesString}`,\n  ),\n} as WeakValidationMap<unknown>;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { RefCallback, WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport {\n  BUTTON_SIZES,\n  BUTTON_TYPES,\n  BUTTON_SHAPES,\n  ButtonSizesValuesArray,\n  ButtonInteractionStates,\n  ButtonSizesValuesString,\n  ButtonInteractionStatesValuesString,\n  ButtonTypesValuesArray,\n  ButtonTypesValuesString,\n  ButtonShapesValuesArray,\n  ButtonShapesValuesString,\n} from './constants.js';\nimport { DSButtonV2DataTestId } from './DSButtonV2Definitions.js';\nimport type { ButtonSizesT, ButtonTypesT, ButtonShapesT } from './sharedTypes.js';\n\nexport declare namespace DSButtonT {\n  type HTMLButtonTypeProp = 'button' | 'submit' | 'reset';\n\n  export interface DefaultProps {\n    'data-testid': string;\n    size: ButtonSizesT;\n    type: HTMLButtonTypeProp;\n    buttonType: ButtonTypesT;\n    onClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n    shape: ButtonShapesT;\n  }\n  export interface OptionalProps {\n    innerRef?: React.RefObject<HTMLButtonElement> | RefCallback<HTMLButtonElement>;\n  }\n  export interface RequiredProps {\n    children: React.ReactNode;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSButtonT.DefaultProps = {\n  size: BUTTON_SIZES.M,\n  buttonType: BUTTON_TYPES.FILLED,\n  shape: BUTTON_SHAPES.DEFAULT,\n  'data-testid': DSButtonV2DataTestId.ROOT,\n  type: 'button',\n  onClick: () => {},\n};\n\nexport const DSButtonPropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).description(\n    'String, Number and/or Dimsum Icon',\n  ).isRequired,\n  buttonType: PropTypes.oneOf(ButtonTypesValuesArray)\n    .description(ButtonTypesValuesString)\n    .defaultValue(BUTTON_TYPES.FILLED),\n  shape: PropTypes.oneOf(ButtonShapesValuesArray)\n    .description(ButtonShapesValuesString)\n    .defaultValue(BUTTON_SHAPES.DEFAULT),\n  type: PropTypes.string.description('html \"type\" props').defaultValue('button'),\n  size: PropTypes.oneOf(ButtonSizesValuesArray).description(ButtonSizesValuesString).defaultValue(BUTTON_SIZES.M),\n  onClick: PropTypes.func\n    .description('function executed when the button is activated (via keyboard \"space\" or enter OR via mouse)')\n    .signature('(( e: React.SyntheticEvent ) => void )')\n    .defaultValue(() => {}),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n\n  'data-testid': PropTypes.string.description('root element data-testid').defaultValue(DSButtonV2DataTestId.ROOT),\n  'data-testemulatestate': PropTypes.oneOf(ButtonInteractionStates).description(\n    `Emulates button states. Useful for e2e tests. ${ButtonInteractionStatesValuesString}`,\n  ),\n} as WeakValidationMap<unknown>;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACKvB,SAAS,WAAW,2BAA2B,wBAAwB;AACvE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AAoC9B,MAAM,eAAuC;AAAA,EAClD,MAAM,aAAa;AAAA,EACnB,YAAY,aAAa;AAAA,EACzB,OAAO,cAAc;AAAA,EACrB,eAAe,qBAAqB;AAAA,EACpC,MAAM;AAAA,EACN,SAAS,MAAM;AAAA,EAAC;AAClB;AAEO,MAAM,oBAAoB;AAAA,EAC/B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,QAAQ,UAAU,IAAI,CAAC,CAAC,EAAE;AAAA,IACjF;AAAA,EACF,EAAE;AAAA,EACF,YAAY,UAAU,MAAM,sBAAsB,EAC/C,YAAY,uBAAuB,EACnC,aAAa,aAAa,MAAM;AAAA,EACnC,OAAO,UAAU,MAAM,uBAAuB,EAC3C,YAAY,wBAAwB,EACpC,aAAa,cAAc,OAAO;AAAA,EACrC,MAAM,UAAU,OAAO,YAAY,mBAAmB,EAAE,aAAa,QAAQ;AAAA,EAC7E,MAAM,UAAU,MAAM,sBAAsB,EAAE,YAAY,uBAAuB,EAAE,aAAa,aAAa,CAAC;AAAA,EAC9G,SAAS,UAAU,KAChB,YAAY,6FAA6F,EACzG,UAAU,wCAAwC,EAClD,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EAE9G,eAAe,UAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,qBAAqB,IAAI;AAAA,EAC9G,yBAAyB,UAAU,MAAM,uBAAuB,EAAE;AAAA,IAChE,iDAAiD;AAAA,EACnD;AACF;",
   "names": []
 }

package/dist/esm/styles.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { css, styled, xStyledCommonProps } from "@elliemae/ds-system";
-import { BUTTON_TYPES, BUTTON_SIZES, BUTTON_SHAPES, mobileSizes, sizes } from "./constants";
-import { DSButtonV2Slots, DSButtonV2Name } from "./DSButtonV2Definitions";
+import { BUTTON_TYPES, BUTTON_SIZES, BUTTON_SHAPES, mobileSizes, sizes } from "./constants.js";
+import { DSButtonV2Slots, DSButtonV2Name } from "./DSButtonV2Definitions.js";
 const pseudoBorder = css`
   position: absolute;
   content: '';

package/dist/esm/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { BUTTON_TYPES, BUTTON_SIZES, BUTTON_SHAPES, mobileSizes, sizes } from './constants';\nimport type { ButtonShapesT, ButtonSizesT, ButtonTypesT } from './sharedTypes';\nimport type { DSButtonT } from './react-desc-prop-types';\nimport { DSButtonV2Slots, DSButtonV2Name } from './DSButtonV2Definitions';\n\nexport interface StyledButtonPropsT {\n  size: ButtonSizesT;\n  buttonType: ButtonTypesT;\n  shape: ButtonShapesT;\n}\n\nconst pseudoBorder = css<StyledButtonPropsT>`\n  position: absolute;\n  content: '';\n  border-style: solid;\n  border-width: ${({ size, buttonType }) =>\n    size === BUTTON_SIZES.S && buttonType === BUTTON_TYPES.FILLED ? '1px' : '2px'};\n  ${({ buttonType, shape, theme }) => {\n    if (buttonType === BUTTON_TYPES.FILLED || buttonType === BUTTON_TYPES.ICON_FILLED) {\n      return `\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          border-color: ${theme.colors.neutral['000']};\n          border-radius: ${shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '0px'};\n      `;\n    }\n    return `\n    top: -1px;\n    left: -1px;\n    width: calc(100% + 2px);\n    height: calc(100% + 2px);\n    border-radius:  ${shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '2px'};\n`;\n  }}\n`;\n\nconst fontSizeSettings = css<StyledButtonPropsT>`\n  ${({ theme, size, buttonType }) => {\n    switch (size) {\n      case BUTTON_SIZES.S:\n        if (buttonType === BUTTON_TYPES.TEXT) return `font-size: ${theme.fontSizes.label[200]};`;\n        return `font-size: ${theme.fontSizes.label[300]};`;\n      case BUTTON_SIZES.L:\n        return `\n        font-size: ${theme.fontSizes.value[600]};\n    `;\n      default:\n        return `\n        font-size: ${theme.fontSizes.value[500]};\n    `;\n    }\n  }}\n`;\nexport const RawButton = styled('button', {\n  name: DSButtonV2Name,\n  slot: DSButtonV2Slots.ROOT,\n})<DSButtonT.Props>`\n  outline: none;\n  border: none;\n  background: transparent;\n  &:hover {\n    background: transparent;\n  }\n`;\n\nexport const DefaultButton = styled(RawButton)<StyledButtonPropsT>`\n  display: inline-grid;\n  grid-gap: 0.615rem;\n  position: relative;\n  grid-auto-flow: column;\n  place-items: center;\n  align-items: center;\n  justify-items: center;\n  width: fit-content;\n  cursor: pointer;\n  font-weight: 600;\n  padding: ${({ theme, buttonType }) =>\n    buttonType !== BUTTON_TYPES.ICON &&\n    buttonType !== BUTTON_TYPES.ICON_OUTLINE &&\n    buttonType !== BUTTON_TYPES.ICON_FILLED\n      ? `0 ${theme.space.xs}`\n      : '0'};\n  border-style: solid;\n\n  height: ${({ size }) => mobileSizes[size]};\n  min-width: ${({ size }) => mobileSizes[size]};\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    height: ${({ size }) => sizes[size]};\n    min-width: ${({ size }) => sizes[size]};\n  }\n  border-radius: ${({ shape }) => (shape === BUTTON_SHAPES.DEFAULT ? '2px' : '50%')};\n  ${fontSizeSettings}\n  ${({ buttonType }) => (buttonType === BUTTON_TYPES.TEXT ? 'text-transform: uppercase;' : '')}\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n  ${xStyledCommonProps}\n`;\n\nexport const FilledButton = styled(DefaultButton)<StyledButtonPropsT>`\n  background-color: brand-600;\n  border-color: brand-600;\n  color: neutral-000;\n  border-width: ${({ size }) => (size === 's' ? '1px;' : '2px')};\n  &:focus,\n  &[data-testemulatestate='focus'] {\n    &:after {\n      ${pseudoBorder}\n    }\n    border-color: brand-700;\n  }\n  & svg {\n    fill: neutral-000;\n  }\n  &:hover,\n  &:active,\n  &[data-testemulatestate='hover'],\n  &[data-testemulatestate='active'] {\n    background-color: brand-700;\n    border-color: brand-700;\n  }\n  &[aria-disabled='true'] {\n    background-color: neutral-100;\n    border-color: neutral-100;\n    color: #5c6574;\n    & svg {\n      fill: #5c6574;\n    }\n  }\n`;\n\nexport const OutlineButton = styled(DefaultButton)`\n  background: neutral-000;\n  border-color: neutral-400;\n  color: brand-600;\n  border-width: 1px;\n  &:focus,\n  &[data-testemulatestate='focus'] {\n    &:after {\n      ${pseudoBorder}\n      border-color: brand-600;\n    }\n  }\n  & svg {\n    fill: brand-600;\n  }\n  &:hover,\n  &:active,\n  &[data-testemulatestate='hover'],\n  &[data-testemulatestate='active'] {\n    border-color: brand-700;\n    color: brand-700;\n    & svg {\n      fill: brand-700;\n    }\n  }\n  &[aria-disabled='true'] {\n    border-color: neutral-400;\n    color: neutral-500;\n    & svg {\n      fill: neutral-500;\n    }\n  }\n`;\n\nexport const TextButton = styled(DefaultButton)`\n  border-color: transparent;\n  background-color: transparent;\n  border-width: 1px;\n  &:focus,\n  &[data-testemulatestate='focus'] {\n    &:after {\n      ${pseudoBorder}\n      border-color: brand-700;\n    }\n  }\n  color: brand-700;\n  & svg {\n    fill: brand-700;\n  }\n  &:hover:not([aria-disabled='true']),\n  &[data-testemulatestate='hover'] {\n    background-color: brand-200;\n    color: brand-700;\n    & svg {\n      fill: brand-700;\n    }\n  }\n  &:active,\n  &[data-testemulatestate='active'] {\n    color: brand-700;\n  }\n  &[aria-disabled='true'] {\n    color: neutral-500;\n    & svg {\n      fill: neutral-500;\n    }\n  }\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,KAAK,QAAQ,0BAA0B;AAChD,SAAS,cAAc,cAAc,eAAe,aAAa,aAAa;AAG9E,SAAS,iBAAiB,sBAAsB;AAQhD,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA,kBAIH,CAAC,EAAE,MAAM,WAAW,MAClC,SAAS,aAAa,KAAK,eAAe,aAAa,SAAS,QAAQ;AAAA,IACxE,CAAC,EAAE,YAAY,OAAO,MAAM,MAAM;AAClC,MAAI,eAAe,aAAa,UAAU,eAAe,aAAa,aAAa;AACjF,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKa,MAAM,OAAO,QAAQ;AAAA,2BACpB,UAAU,cAAc,UAAU,QAAQ;AAAA;AAAA,EAEjE;AACA,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKW,UAAU,cAAc,UAAU,QAAQ;AAAA;AAE9D;AAAA;AAGF,MAAM,mBAAmB;AAAA,IACrB,CAAC,EAAE,OAAO,MAAM,WAAW,MAAM;AACjC,UAAQ,MAAM;AAAA,IACZ,KAAK,aAAa;AAChB,UAAI,eAAe,aAAa;AAAM,eAAO,cAAc,MAAM,UAAU,MAAM;AACjF,aAAO,cAAc,MAAM,UAAU,MAAM;AAAA,IAC7C,KAAK,aAAa;AAChB,aAAO;AAAA,qBACM,MAAM,UAAU,MAAM;AAAA;AAAA,IAErC;AACE,aAAO;AAAA,qBACM,MAAM,UAAU,MAAM;AAAA;AAAA,EAEvC;AACF;AAAA;AAEK,MAAM,YAAY,OAAO,UAAU;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASM,MAAM,gBAAgB,OAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWhC,CAAC,EAAE,OAAO,WAAW,MAC9B,eAAe,aAAa,QAC5B,eAAe,aAAa,gBAC5B,eAAe,aAAa,cACxB,KAAK,MAAM,MAAM,OACjB;AAAA;AAAA;AAAA,YAGI,CAAC,EAAE,KAAK,MAAM,YAAY;AAAA,eACvB,CAAC,EAAE,KAAK,MAAM,YAAY;AAAA,uBAClB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,cAC1C,CAAC,EAAE,KAAK,MAAM,MAAM;AAAA,iBACjB,CAAC,EAAE,KAAK,MAAM,MAAM;AAAA;AAAA,mBAElB,CAAC,EAAE,MAAM,MAAO,UAAU,cAAc,UAAU,QAAQ;AAAA,IACzE;AAAA,IACA,CAAC,EAAE,WAAW,MAAO,eAAe,aAAa,OAAO,+BAA+B;AAAA;AAAA;AAAA;AAAA,IAIvF;AAAA;AAGG,MAAM,eAAe,OAAO,aAAa;AAAA;AAAA;AAAA;AAAA,kBAI9B,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA,QAIjD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBD,MAAM,gBAAgB,OAAO,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQzC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BD,MAAM,aAAa,OAAO,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOtC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { BUTTON_TYPES, BUTTON_SIZES, BUTTON_SHAPES, mobileSizes, sizes } from './constants.js';\nimport type { ButtonShapesT, ButtonSizesT, ButtonTypesT } from './sharedTypes.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\nimport { DSButtonV2Slots, DSButtonV2Name } from './DSButtonV2Definitions.js';\n\nexport interface StyledButtonPropsT {\n  size: ButtonSizesT;\n  buttonType: ButtonTypesT;\n  shape: ButtonShapesT;\n}\n\nconst pseudoBorder = css<StyledButtonPropsT>`\n  position: absolute;\n  content: '';\n  border-style: solid;\n  border-width: ${({ size, buttonType }) =>\n    size === BUTTON_SIZES.S && buttonType === BUTTON_TYPES.FILLED ? '1px' : '2px'};\n  ${({ buttonType, shape, theme }) => {\n    if (buttonType === BUTTON_TYPES.FILLED || buttonType === BUTTON_TYPES.ICON_FILLED) {\n      return `\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          border-color: ${theme.colors.neutral['000']};\n          border-radius: ${shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '0px'};\n      `;\n    }\n    return `\n    top: -1px;\n    left: -1px;\n    width: calc(100% + 2px);\n    height: calc(100% + 2px);\n    border-radius:  ${shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '2px'};\n`;\n  }}\n`;\n\nconst fontSizeSettings = css<StyledButtonPropsT>`\n  ${({ theme, size, buttonType }) => {\n    switch (size) {\n      case BUTTON_SIZES.S:\n        if (buttonType === BUTTON_TYPES.TEXT) return `font-size: ${theme.fontSizes.label[200]};`;\n        return `font-size: ${theme.fontSizes.label[300]};`;\n      case BUTTON_SIZES.L:\n        return `\n        font-size: ${theme.fontSizes.value[600]};\n    `;\n      default:\n        return `\n        font-size: ${theme.fontSizes.value[500]};\n    `;\n    }\n  }}\n`;\nexport const RawButton = styled('button', {\n  name: DSButtonV2Name,\n  slot: DSButtonV2Slots.ROOT,\n})<DSButtonT.Props>`\n  outline: none;\n  border: none;\n  background: transparent;\n  &:hover {\n    background: transparent;\n  }\n`;\n\nexport const DefaultButton = styled(RawButton)<StyledButtonPropsT>`\n  display: inline-grid;\n  grid-gap: 0.615rem;\n  position: relative;\n  grid-auto-flow: column;\n  place-items: center;\n  align-items: center;\n  justify-items: center;\n  width: fit-content;\n  cursor: pointer;\n  font-weight: 600;\n  padding: ${({ theme, buttonType }) =>\n    buttonType !== BUTTON_TYPES.ICON &&\n    buttonType !== BUTTON_TYPES.ICON_OUTLINE &&\n    buttonType !== BUTTON_TYPES.ICON_FILLED\n      ? `0 ${theme.space.xs}`\n      : '0'};\n  border-style: solid;\n\n  height: ${({ size }) => mobileSizes[size]};\n  min-width: ${({ size }) => mobileSizes[size]};\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    height: ${({ size }) => sizes[size]};\n    min-width: ${({ size }) => sizes[size]};\n  }\n  border-radius: ${({ shape }) => (shape === BUTTON_SHAPES.DEFAULT ? '2px' : '50%')};\n  ${fontSizeSettings}\n  ${({ buttonType }) => (buttonType === BUTTON_TYPES.TEXT ? 'text-transform: uppercase;' : '')}\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n  ${xStyledCommonProps}\n`;\n\nexport const FilledButton = styled(DefaultButton)<StyledButtonPropsT>`\n  background-color: brand-600;\n  border-color: brand-600;\n  color: neutral-000;\n  border-width: ${({ size }) => (size === 's' ? '1px;' : '2px')};\n  &:focus,\n  &[data-testemulatestate='focus'] {\n    &:after {\n      ${pseudoBorder}\n    }\n    border-color: brand-700;\n  }\n  & svg {\n    fill: neutral-000;\n  }\n  &:hover,\n  &:active,\n  &[data-testemulatestate='hover'],\n  &[data-testemulatestate='active'] {\n    background-color: brand-700;\n    border-color: brand-700;\n  }\n  &[aria-disabled='true'] {\n    background-color: neutral-100;\n    border-color: neutral-100;\n    color: #5c6574;\n    & svg {\n      fill: #5c6574;\n    }\n  }\n`;\n\nexport const OutlineButton = styled(DefaultButton)`\n  background: neutral-000;\n  border-color: neutral-400;\n  color: brand-600;\n  border-width: 1px;\n  &:focus,\n  &[data-testemulatestate='focus'] {\n    &:after {\n      ${pseudoBorder}\n      border-color: brand-600;\n    }\n  }\n  & svg {\n    fill: brand-600;\n  }\n  &:hover,\n  &:active,\n  &[data-testemulatestate='hover'],\n  &[data-testemulatestate='active'] {\n    border-color: brand-700;\n    color: brand-700;\n    & svg {\n      fill: brand-700;\n    }\n  }\n  &[aria-disabled='true'] {\n    border-color: neutral-400;\n    color: neutral-500;\n    & svg {\n      fill: neutral-500;\n    }\n  }\n`;\n\nexport const TextButton = styled(DefaultButton)`\n  border-color: transparent;\n  background-color: transparent;\n  border-width: 1px;\n  &:focus,\n  &[data-testemulatestate='focus'] {\n    &:after {\n      ${pseudoBorder}\n      border-color: brand-700;\n    }\n  }\n  color: brand-700;\n  & svg {\n    fill: brand-700;\n  }\n  &:hover:not([aria-disabled='true']),\n  &[data-testemulatestate='hover'] {\n    background-color: brand-200;\n    color: brand-700;\n    & svg {\n      fill: brand-700;\n    }\n  }\n  &:active,\n  &[data-testemulatestate='active'] {\n    color: brand-700;\n  }\n  &[aria-disabled='true'] {\n    color: neutral-500;\n    & svg {\n      fill: neutral-500;\n    }\n  }\n`;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/types/DSButtonV2.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { DSButtonT } from './react-desc-prop-types';
+import type { DSButtonT } from './react-desc-prop-types.js';
 declare const DSButtonV2: React.ComponentType<DSButtonT.Props>;
-declare const DSButtonV2WithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<DSButtonT.Props>;
+declare const DSButtonV2WithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSButtonT.Props>;
 export { DSButtonV2, DSButtonV2WithSchema };

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

@@ -1,2 +1,2 @@
-import type { DSButtonT } from '../react-desc-prop-types';
+import type { DSButtonT } from '../react-desc-prop-types.js';
 export declare const useButtonRenderer: (propsWithDefault: DSButtonT.InternalProps) => import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, DSButtonT.Props, never>;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';
-import type { DSButtonT } from '../react-desc-prop-types';
-import { useButtonRenderer } from './useButtonRenderer';
+import type { DSButtonT } from '../react-desc-prop-types.js';
+import { useButtonRenderer } from './useButtonRenderer.js';
 export interface ButtonV2Configuration {
     propsWithDefault: DSButtonT.InternalProps;
     globalProps: ReturnType<typeof useGetGlobalAttributes>;

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

@@ -1,3 +1,3 @@
 import type { WeakValidationMap } from 'react';
-import type { DSButtonT } from '../react-desc-prop-types';
+import type { DSButtonT } from '../react-desc-prop-types.js';
 export declare const useValidateProps: (props: DSButtonT.Props, propTypes: WeakValidationMap<unknown>) => void;

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
-export { DSButtonV2, DSButtonV2WithSchema } from './DSButtonV2';
-export { BUTTON_SIZES, BUTTON_TYPES, BUTTON_SHAPES } from './constants';
-export type { DSButtonT } from './react-desc-prop-types';
+export { DSButtonV2, DSButtonV2WithSchema } from './DSButtonV2.js';
+export { BUTTON_SIZES, BUTTON_TYPES, BUTTON_SHAPES } from './constants.js';
+export type { DSButtonT } from './react-desc-prop-types.js';

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

@@ -1,7 +1,7 @@
 import type { RefCallback, WeakValidationMap } from 'react';
 import type React from 'react';
 import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';
-import type { ButtonSizesT, ButtonTypesT, ButtonShapesT } from './sharedTypes';
+import type { ButtonSizesT, ButtonTypesT, ButtonShapesT } from './sharedTypes.js';
 export declare namespace DSButtonT {
     type HTMLButtonTypeProp = 'button' | 'submit' | 'reset';
     interface DefaultProps {

package/dist/types/sharedTypes.d.ts

@@ -1,4 +1,4 @@
-import type { BUTTON_SIZES, BUTTON_TYPES, BUTTON_SHAPES, ButtonInteractionStates } from './constants';
+import type { BUTTON_SIZES, BUTTON_TYPES, BUTTON_SHAPES, ButtonInteractionStates } from './constants.js';
 export type ButtonSizesT = (typeof BUTTON_SIZES)[keyof typeof BUTTON_SIZES];
 export type ButtonTypesT = (typeof BUTTON_TYPES)[keyof typeof BUTTON_TYPES];
 export type ButtonShapesT = (typeof BUTTON_SHAPES)[keyof typeof BUTTON_SHAPES];

package/dist/types/styles.d.ts

@@ -1,5 +1,5 @@
-import type { ButtonShapesT, ButtonSizesT, ButtonTypesT } from './sharedTypes';
-import type { DSButtonT } from './react-desc-prop-types';
+import type { ButtonShapesT, ButtonSizesT, ButtonTypesT } from './sharedTypes.js';
+import type { DSButtonT } from './react-desc-prop-types.js';
 export interface StyledButtonPropsT {
     size: ButtonSizesT;
     buttonType: ButtonTypesT;

package/dist/types/tests/a11y/icon-axe.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/a11y/text-axe.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/a11y/toggle-axe.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-button-v2",
-  "version": "3.16.0",
+  "version": "3.16.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Button",
   "files": [
@@ -63,14 +63,14 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-props-helpers": "3.16.0",
-    "@elliemae/ds-system": "3.16.0",
-    "@elliemae/ds-utilities": "3.16.0"
+    "@elliemae/ds-props-helpers": "3.16.1",
+    "@elliemae/ds-system": "3.16.1",
+    "@elliemae/ds-utilities": "3.16.1"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "~5.16.4",
+    "@testing-library/jest-dom": "~5.16.5",
     "@testing-library/react": "~12.1.3",
-    "styled-components": "~5.3.6"
+    "styled-components": "~5.3.9"
   },
   "peerDependencies": {
     "react": "^17.0.2",