@elliemae/ds-form-date-range-picker 3.0.0-next.69 → 3.0.0-next.72

package/dist/cjs/ControlledDateRangePicker.js

@@ -37,7 +37,6 @@ const DSControlledDateRangePicker = (props) => {
     value: ctx
   }, /* @__PURE__ */ import_react.default.createElement(import_ControlledDateRangeContent.ControlledDateRangeContent, null));
 };
-DSControlledDateRangePicker.propTypes = import_propTypes.propTypes;
 DSControlledDateRangePicker.displayName = "DSControlledDateRangePicker";
 const DSControlledDateRangePickerWithSchema = (0, import_react_desc.describe)(DSControlledDateRangePicker);
 DSControlledDateRangePickerWithSchema.propTypes = import_propTypes.propTypes;

package/dist/cjs/ControlledDateRangePicker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ControlledDateRangePicker.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport React from 'react';\nimport { describe } from 'react-desc';\nimport { useControlledDateRangePicker } from './config/useControlledDateRangePicker';\nimport { ControlledDateRangeContent } from './parts/ControlledDateRangeContent';\nimport { propTypes } from './propTypes';\nimport { ControlledDateRangePickerContext } from './ControlledDateRangePickerCTX';\nimport type { DateRangePickerPropsT } from './index.d';\n\nconst DSControlledDateRangePicker = (props: DateRangePickerPropsT): JSX.Element => {\n  const ctx = useControlledDateRangePicker(props);\n  return (\n    <ControlledDateRangePickerContext.Provider value={ctx}>\n      <ControlledDateRangeContent />\n    </ControlledDateRangePickerContext.Provider>\n  );\n};\nDSControlledDateRangePicker.propTypes = propTypes;\nDSControlledDateRangePicker.displayName = 'DSControlledDateRangePicker';\nconst DSControlledDateRangePickerWithSchema = describe(DSControlledDateRangePicker);\nDSControlledDateRangePickerWithSchema.propTypes = propTypes;\n\nexport { DSControlledDateRangePickerWithSchema, DSControlledDateRangePicker };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,wBAAyB;AACzB,0CAA6C;AAC7C,wCAA2C;AAC3C,uBAA0B;AAC1B,0CAAiD;AAGjD,MAAM,8BAA8B,CAAC,UAA8C;AACjF,QAAM,MAAM,sEAA6B,KAAK;AAC9C,SACE,mDAAC,qEAAiC,UAAjC;AAAA,IAA0C,OAAO;AAAA,KAChD,mDAAC,kEAA2B,CAC9B;AAEJ;AACA,4BAA4B,YAAY;AACxC,4BAA4B,cAAc;AAC1C,MAAM,wCAAwC,gCAAS,2BAA2B;AAClF,sCAAsC,YAAY;",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React from 'react';\nimport { describe } from 'react-desc';\nimport { useControlledDateRangePicker } from './config/useControlledDateRangePicker';\nimport { ControlledDateRangeContent } from './parts/ControlledDateRangeContent';\nimport { propTypes } from './propTypes';\nimport { ControlledDateRangePickerContext } from './ControlledDateRangePickerCTX';\nimport type { DateRangePickerPropsT } from './index.d';\n\nconst DSControlledDateRangePicker = (props: DateRangePickerPropsT): JSX.Element => {\n  const ctx = useControlledDateRangePicker(props);\n  return (\n    <ControlledDateRangePickerContext.Provider value={ctx}>\n      <ControlledDateRangeContent />\n    </ControlledDateRangePickerContext.Provider>\n  );\n};\n\nDSControlledDateRangePicker.displayName = 'DSControlledDateRangePicker';\nconst DSControlledDateRangePickerWithSchema = describe(DSControlledDateRangePicker);\nDSControlledDateRangePickerWithSchema.propTypes = propTypes;\n\nexport { DSControlledDateRangePickerWithSchema, DSControlledDateRangePicker };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,wBAAyB;AACzB,0CAA6C;AAC7C,wCAA2C;AAC3C,uBAA0B;AAC1B,0CAAiD;AAGjD,MAAM,8BAA8B,CAAC,UAA8C;AACjF,QAAM,MAAM,sEAA6B,KAAK;AAC9C,SACE,mDAAC,qEAAiC,UAAjC;AAAA,IAA0C,OAAO;AAAA,KAChD,mDAAC,kEAA2B,CAC9B;AAEJ;AAEA,4BAA4B,cAAc;AAC1C,MAAM,wCAAwC,gCAAS,2BAA2B;AAClF,sCAAsC,YAAY;",
   "names": []
 }

package/dist/cjs/ControlledDateRangePickerCTX.js

@@ -71,7 +71,9 @@ const defaultContext = {
   withInputs: false,
   withIcon: false,
   isControllerOnly: false,
-  isPickerOnly: false
+  isPickerOnly: false,
+  xstyledAttrs: {},
+  globalAttrs: {}
 };
 const ControlledDateRangePickerContext = (0, import_react.createContext)(defaultContext);
 var ControlledDateRangePickerCTX_default = ControlledDateRangePickerContext;

package/dist/cjs/ControlledDateRangePickerCTX.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ControlledDateRangePickerCTX.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { createContext } from 'react';\nimport type { DateRangePickerPropsT, ControlledDateRangePickerContextT } from './index.d';\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nconst defaultReturnFalse = (): boolean => false;\nexport const defaultProps: DateRangePickerPropsT = {\n  type: 'full-date-range',\n  fromDate: '',\n  onFromDateChange: noop,\n  onMonthFromChange: noop,\n  onDayFromChange: noop,\n  onYearFromChange: noop,\n  hasError: false,\n  pickerFooterMsg: '',\n\n  toDate: '',\n  onToDateChange: noop,\n  onMonthToChange: noop,\n  onDayToChange: noop,\n  onYearToChange: noop,\n\n  emptyPickerStartingMonth: undefined,\n  onCalendarOpenFocusedDay: undefined,\n  isClearable: false,\n  getIsDisabledDay: defaultReturnFalse,\n  getIsOutOfRangeDay: defaultReturnFalse,\n  autoFocus: false,\n};\nconst defaultContext = {\n  props: defaultProps,\n  rangePickerLogic: {\n    latestChangedDate: '',\n    onCalendarOpen: noop,\n    onCalendarClose: noop,\n    handleFromDateChange: noop,\n    handleToDateChange: noop,\n    handlePickerDateChange: noop,\n    handlePickerMonthDateChange: noop,\n    handlePickerDayDateChange: noop,\n    handlePickerYearDateChange: noop,\n    getIsStartRangeDay: defaultReturnFalse,\n    getIsDayInRange: defaultReturnFalse,\n    getIsEndRangeDay: defaultReturnFalse,\n  },\n  instanceUID: '',\n  withInputs: false,\n  withIcon: false,\n  isControllerOnly: false,\n  isPickerOnly: false,\n};\n/** Context for cross component communication */\nexport const ControlledDateRangePickerContext = createContext<ControlledDateRangePickerContextT>(defaultContext);\n\nexport default ControlledDateRangePickerContext;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAG9B,MAAM,OAAO,MAAY;AAAC;AAC1B,MAAM,qBAAqB,MAAe;AACnC,MAAM,eAAsC;AAAA,EACjD,MAAM;AAAA,EACN,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,UAAU;AAAA,EACV,iBAAiB;AAAA,EAEjB,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,gBAAgB;AAAA,EAEhB,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,WAAW;AACb;AACA,MAAM,iBAAiB;AAAA,EACrB,OAAO;AAAA,EACP,kBAAkB;AAAA,IAChB,mBAAmB;AAAA,IACnB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,sBAAsB;AAAA,IACtB,oBAAoB;AAAA,IACpB,wBAAwB;AAAA,IACxB,6BAA6B;AAAA,IAC7B,2BAA2B;AAAA,IAC3B,4BAA4B;AAAA,IAC5B,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,EACpB;AAAA,EACA,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,cAAc;AAChB;AAEO,MAAM,mCAAmC,gCAAiD,cAAc;AAE/G,IAAO,uCAAQ;",
+  "sourcesContent": ["import { createContext } from 'react';\nimport type { DateRangePickerPropsT, ControlledDateRangePickerContextT } from './index.d';\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nconst defaultReturnFalse = (): boolean => false;\n\nexport const defaultProps: DateRangePickerPropsT = {\n  type: 'full-date-range',\n  fromDate: '',\n  onFromDateChange: noop,\n  onMonthFromChange: noop,\n  onDayFromChange: noop,\n  onYearFromChange: noop,\n  hasError: false,\n  pickerFooterMsg: '',\n  toDate: '',\n  onToDateChange: noop,\n  onMonthToChange: noop,\n  onDayToChange: noop,\n  onYearToChange: noop,\n  emptyPickerStartingMonth: undefined,\n  onCalendarOpenFocusedDay: undefined,\n  isClearable: false,\n  getIsDisabledDay: defaultReturnFalse,\n  getIsOutOfRangeDay: defaultReturnFalse,\n  autoFocus: false,\n};\n\nconst defaultContext = {\n  props: defaultProps,\n  rangePickerLogic: {\n    latestChangedDate: '',\n    onCalendarOpen: noop,\n    onCalendarClose: noop,\n    handleFromDateChange: noop,\n    handleToDateChange: noop,\n    handlePickerDateChange: noop,\n    handlePickerMonthDateChange: noop,\n    handlePickerDayDateChange: noop,\n    handlePickerYearDateChange: noop,\n    getIsStartRangeDay: defaultReturnFalse,\n    getIsDayInRange: defaultReturnFalse,\n    getIsEndRangeDay: defaultReturnFalse,\n  },\n  instanceUID: '',\n  withInputs: false,\n  withIcon: false,\n  isControllerOnly: false,\n  isPickerOnly: false,\n  xstyledAttrs: {},\n  globalAttrs: {},\n};\n/** Context for cross component communication */\nexport const ControlledDateRangePickerContext = createContext<ControlledDateRangePickerContextT>(defaultContext);\n\nexport default ControlledDateRangePickerContext;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAG9B,MAAM,OAAO,MAAY;AAAC;AAC1B,MAAM,qBAAqB,MAAe;AAEnC,MAAM,eAAsC;AAAA,EACjD,MAAM;AAAA,EACN,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,WAAW;AACb;AAEA,MAAM,iBAAiB;AAAA,EACrB,OAAO;AAAA,EACP,kBAAkB;AAAA,IAChB,mBAAmB;AAAA,IACnB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,sBAAsB;AAAA,IACtB,oBAAoB;AAAA,IACpB,wBAAwB;AAAA,IACxB,6BAA6B;AAAA,IAC7B,2BAA2B;AAAA,IAC3B,4BAA4B;AAAA,IAC5B,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,EACpB;AAAA,EACA,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,cAAc,CAAC;AAAA,EACf,aAAa,CAAC;AAChB;AAEO,MAAM,mCAAmC,gCAAiD,cAAc;AAE/G,IAAO,uCAAQ;",
   "names": []
 }

package/dist/cjs/config/useControlledDateRangePicker.js

@@ -1,8 +1,6 @@
 var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
@@ -20,7 +18,6 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -52,7 +49,8 @@ const useControlledDateRangePicker = (props) => {
   (0, import_useValidateProps.useValidateProps)(props);
   const instanceUID = (0, import_react.useMemo)(() => (0, import_uid.uid)(6), []);
   const propsWithDefaults = (0, import_useGetPropsWithDefault.useGetDateRangePickerWithDefaultsProps)(props);
-  const dataAttrs = (0, import_ds_utilities.getDataProps)(props);
+  const xstyledAttrs = (0, import_ds_utilities.useGetXstyledProps)(propsWithDefaults);
+  const globalAttrs = (0, import_ds_utilities.useGetGlobalAttributes)(propsWithDefaults);
   const { type } = propsWithDefaults;
   const withInputs = type === import_ControlledDateRangePickerTypes.CONTROLLED_DATE_RANGE_PICKER_TYPES.FULL || type === import_ControlledDateRangePickerTypes.CONTROLLED_DATE_RANGE_PICKER_TYPES.INPUTS;
   const withIcon = type === import_ControlledDateRangePickerTypes.CONTROLLED_DATE_RANGE_PICKER_TYPES.FULL || type === import_ControlledDateRangePickerTypes.CONTROLLED_DATE_RANGE_PICKER_TYPES.PICKER;
@@ -60,14 +58,26 @@ const useControlledDateRangePicker = (props) => {
   const isPickerOnly = type === import_ControlledDateRangePickerTypes.CONTROLLED_DATE_RANGE_PICKER_TYPES.PICKER;
   const rangePickerLogic = (0, import_useRangePickerLogic.useRangePickerLogic)(propsWithDefaults);
   const ctx = (0, import_react.useMemo)(() => ({
-    props: __spreadProps(__spreadValues({}, propsWithDefaults), { dataAttrs }),
+    props: __spreadValues({}, propsWithDefaults),
+    xstyledAttrs,
+    globalAttrs,
     instanceUID,
     rangePickerLogic,
     withInputs,
     withIcon,
     isControllerOnly,
     isPickerOnly
-  }), [instanceUID, isControllerOnly, dataAttrs, propsWithDefaults, rangePickerLogic, withIcon, withInputs]);
+  }), [
+    propsWithDefaults,
+    xstyledAttrs,
+    globalAttrs,
+    instanceUID,
+    rangePickerLogic,
+    withInputs,
+    withIcon,
+    isControllerOnly,
+    isPickerOnly
+  ]);
   return ctx;
 };
 //# sourceMappingURL=useControlledDateRangePicker.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useControlledDateRangePicker.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo } from 'react';\nimport { uid } from 'uid';\nimport { getDataProps } from '@elliemae/ds-utilities';\n\nimport { useGetDateRangePickerWithDefaultsProps } from './useGetPropsWithDefault';\nimport { useValidateProps } from './useValidateProps';\nimport { useRangePickerLogic } from './useRangePickerLogic';\nimport { CONTROLLED_DATE_RANGE_PICKER_TYPES } from '../ControlledDateRangePickerTypes';\nimport type { DateRangePickerPropsT, ControlledDateRangePickerContextT } from '../index.d';\n\nexport const useControlledDateRangePicker = (\n  props: Partial<DateRangePickerPropsT>,\n): ControlledDateRangePickerContextT => {\n  // if we detect wrong props configuration we throw meaningful errors\n  useValidateProps(props);\n  const instanceUID = useMemo(() => uid(6), []);\n  const propsWithDefaults = useGetDateRangePickerWithDefaultsProps(props);\n  const dataAttrs = getDataProps(props);\n  const { type } = propsWithDefaults;\n\n  const withInputs =\n    type === CONTROLLED_DATE_RANGE_PICKER_TYPES.FULL || type === CONTROLLED_DATE_RANGE_PICKER_TYPES.INPUTS;\n  const withIcon =\n    type === CONTROLLED_DATE_RANGE_PICKER_TYPES.FULL || type === CONTROLLED_DATE_RANGE_PICKER_TYPES.PICKER;\n  const isControllerOnly = type === CONTROLLED_DATE_RANGE_PICKER_TYPES.CONTROLLER_ONLY;\n  const isPickerOnly = type === CONTROLLED_DATE_RANGE_PICKER_TYPES.PICKER;\n\n  const rangePickerLogic = useRangePickerLogic(propsWithDefaults);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults, dataAttrs },\n      instanceUID,\n      rangePickerLogic,\n      withInputs,\n      withIcon,\n      isControllerOnly,\n      isPickerOnly,\n    }),\n    [instanceUID, isControllerOnly, dataAttrs, propsWithDefaults, rangePickerLogic, withIcon, withInputs],\n  );\n\n  return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAwB;AACxB,iBAAoB;AACpB,0BAA6B;AAE7B,oCAAuD;AACvD,8BAAiC;AACjC,iCAAoC;AACpC,4CAAmD;AAG5C,MAAM,+BAA+B,CAC1C,UACsC;AAEtC,gDAAiB,KAAK;AACtB,QAAM,cAAc,0BAAQ,MAAM,oBAAI,CAAC,GAAG,CAAC,CAAC;AAC5C,QAAM,oBAAoB,0EAAuC,KAAK;AACtE,QAAM,YAAY,sCAAa,KAAK;AACpC,QAAM,EAAE,SAAS;AAEjB,QAAM,aACJ,SAAS,yEAAmC,QAAQ,SAAS,yEAAmC;AAClG,QAAM,WACJ,SAAS,yEAAmC,QAAQ,SAAS,yEAAmC;AAClG,QAAM,mBAAmB,SAAS,yEAAmC;AACrE,QAAM,eAAe,SAAS,yEAAmC;AAEjE,QAAM,mBAAmB,oDAAoB,iBAAiB;AAE9D,QAAM,MAAM,0BACV,MAAO;AAAA,IACL,OAAO,iCAAK,oBAAL,EAAwB,UAAU;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA,CAAC,aAAa,kBAAkB,WAAW,mBAAmB,kBAAkB,UAAU,UAAU,CACtG;AAEA,SAAO;AACT;",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo } from 'react';\nimport { uid } from 'uid';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { useGetDateRangePickerWithDefaultsProps } from './useGetPropsWithDefault';\nimport { useValidateProps } from './useValidateProps';\nimport { useRangePickerLogic } from './useRangePickerLogic';\nimport { CONTROLLED_DATE_RANGE_PICKER_TYPES } from '../ControlledDateRangePickerTypes';\nimport type { DateRangePickerPropsT, ControlledDateRangePickerContextT } from '../index.d';\n\nexport const useControlledDateRangePicker = (\n  props: Partial<DateRangePickerPropsT>,\n): ControlledDateRangePickerContextT => {\n  // if we detect wrong props configuration we throw meaningful errors\n  useValidateProps(props);\n  const instanceUID = useMemo(() => uid(6), []);\n  const propsWithDefaults = useGetDateRangePickerWithDefaultsProps(props);\n\n  const xstyledAttrs = useGetXstyledProps(propsWithDefaults) as Record<string, unknown>;\n\n  const globalAttrs = useGetGlobalAttributes(propsWithDefaults) as Record<string, unknown>;\n\n  const { type } = propsWithDefaults;\n\n  const withInputs =\n    type === CONTROLLED_DATE_RANGE_PICKER_TYPES.FULL || type === CONTROLLED_DATE_RANGE_PICKER_TYPES.INPUTS;\n  const withIcon =\n    type === CONTROLLED_DATE_RANGE_PICKER_TYPES.FULL || type === CONTROLLED_DATE_RANGE_PICKER_TYPES.PICKER;\n  const isControllerOnly = type === CONTROLLED_DATE_RANGE_PICKER_TYPES.CONTROLLER_ONLY;\n  const isPickerOnly = type === CONTROLLED_DATE_RANGE_PICKER_TYPES.PICKER;\n\n  const rangePickerLogic = useRangePickerLogic(propsWithDefaults);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults },\n      xstyledAttrs,\n      globalAttrs,\n      instanceUID,\n      rangePickerLogic,\n      withInputs,\n      withIcon,\n      isControllerOnly,\n      isPickerOnly,\n    }),\n    [\n      propsWithDefaults,\n      xstyledAttrs,\n      globalAttrs,\n      instanceUID,\n      rangePickerLogic,\n      withInputs,\n      withIcon,\n      isControllerOnly,\n      isPickerOnly,\n    ],\n  );\n\n  return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAwB;AACxB,iBAAoB;AACpB,0BAA2D;AAC3D,oCAAuD;AACvD,8BAAiC;AACjC,iCAAoC;AACpC,4CAAmD;AAG5C,MAAM,+BAA+B,CAC1C,UACsC;AAEtC,gDAAiB,KAAK;AACtB,QAAM,cAAc,0BAAQ,MAAM,oBAAI,CAAC,GAAG,CAAC,CAAC;AAC5C,QAAM,oBAAoB,0EAAuC,KAAK;AAEtE,QAAM,eAAe,4CAAmB,iBAAiB;AAEzD,QAAM,cAAc,gDAAuB,iBAAiB;AAE5D,QAAM,EAAE,SAAS;AAEjB,QAAM,aACJ,SAAS,yEAAmC,QAAQ,SAAS,yEAAmC;AAClG,QAAM,WACJ,SAAS,yEAAmC,QAAQ,SAAS,yEAAmC;AAClG,QAAM,mBAAmB,SAAS,yEAAmC;AACrE,QAAM,eAAe,SAAS,yEAAmC;AAEjE,QAAM,mBAAmB,oDAAoB,iBAAiB;AAE9D,QAAM,MAAM,0BACV,MAAO;AAAA,IACL,OAAO,mBAAK;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CACF;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/cjs/exported-related/theming.js

@@ -0,0 +1,32 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var theming_exports = {};
+__export(theming_exports, {
+  COMPONENT_NAME: () => COMPONENT_NAME,
+  slots: () => slots
+});
+module.exports = __toCommonJS(theming_exports);
+var React = __toESM(require("react"));
+const COMPONENT_NAME = "DS-controlled-date-range-picker";
+const slots = {
+  CONTAINER: "root"
+};
+//# sourceMappingURL=theming.js.map

package/dist/cjs/exported-related/theming.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/exported-related/theming.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export const COMPONENT_NAME = 'DS-controlled-date-range-picker';\n\nexport const slots = {\n  CONTAINER: 'root',\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,iBAAiB;AAEvB,MAAM,QAAQ;AAAA,EACnB,WAAW;AACb;",
+  "names": []
+}

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.d.ts", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { DSFormLayoutBlockItemPropsT } from '@elliemae/ds-form-layout-blocks';\nimport type { onDateChangeT, onInternalInputsChangeT, internalInputsChangeMetaInfo } from '../date-time-picker/index.d';\n\nexport interface RangePickerMetaInfoT extends internalInputsChangeMetaInfo {\n  rangeDateChangeType?: 'from' | 'to';\n  automaticSwitchedDates?: boolean;\n  isIncorrectOrder?: boolean;\n}\nexport type rangeOnDateChangeT = (val: string, metaInfo: RangePickerMetaInfoT) => void;\nexport type ControlledDateRangeTypeT =\n  | 'full-date-range'\n  | 'date-range-picker-controller-only'\n  | 'date-range-picker'\n  | 'date-range-inputs';\n\nexport interface DateRangePickerPropsT {\n  type: ControlledDateRangeTypeT;\n  fromDate: string;\n  onFromDateChange: rangeOnDateChangeT;\n  onMonthFromChange: onInternalInputsChangeT;\n  onDayFromChange: onInternalInputsChangeT;\n  onYearFromChange: onInternalInputsChangeT;\n  hasError: boolean;\n  pickerFooterMsg: string;\n\n  toDate: string;\n  onToDateChange: rangeOnDateChangeT;\n  onMonthToChange: onInternalInputsChangeT;\n  onDayToChange: onInternalInputsChangeT;\n  onYearToChange: onInternalInputsChangeT;\n\n  emptyPickerStartingMonth?: string;\n  onCalendarOpenFocusedDay?: string;\n  isClearable?: boolean;\n  getIsDisabledDay?: (day: string) => boolean;\n  getIsOutOfRangeDay?: (day: string) => boolean;\n  autoFocus?: boolean;\n  dataAttrs?: Record<string, unknown>;\n}\n\nexport interface RangePickerLogicT {\n  latestChangedDate: string;\n\n  onCalendarOpen: () => void;\n  onCalendarClose: () => void;\n\n  handleFromDateChange: rangeOnDateChangeT;\n  handleToDateChange: rangeOnDateChangeT;\n\n  handlePickerDateChange: rangeOnDateChangeT;\n  handlePickerMonthDateChange: onInternalInputsChangeT;\n  handlePickerDayDateChange: onInternalInputsChangeT;\n  handlePickerYearDateChange: onInternalInputsChangeT;\n\n  getIsStartRangeDay: (day: string) => boolean;\n  getIsDayInRange: (day: string) => boolean;\n  getIsEndRangeDay: (day: string) => boolean;\n}\nexport interface ControlledDateRangePickerContextT {\n  props: DateRangePickerPropsT;\n  instanceUID: string;\n  rangePickerLogic: RangePickerLogicT;\n  withInputs: boolean;\n  withIcon: boolean;\n  isControllerOnly: boolean;\n  isPickerOnly: boolean;\n  isPickerOnly: boolean;\n}\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import type { DSFormLayoutBlockItemPropsT } from '@elliemae/ds-form-layout-blocks';\nimport type { onDateChangeT, onInternalInputsChangeT, internalInputsChangeMetaInfo } from '../date-time-picker/index.d';\n\nexport interface RangePickerMetaInfoT extends internalInputsChangeMetaInfo {\n  rangeDateChangeType?: 'from' | 'to';\n  automaticSwitchedDates?: boolean;\n  isIncorrectOrder?: boolean;\n}\nexport type rangeOnDateChangeT = (val: string, metaInfo: RangePickerMetaInfoT) => void;\nexport type ControlledDateRangeTypeT =\n  | 'full-date-range'\n  | 'date-range-picker-controller-only'\n  | 'date-range-picker'\n  | 'date-range-inputs';\n\nexport interface DateRangePickerPropsT {\n  type: ControlledDateRangeTypeT;\n  fromDate: string;\n  onFromDateChange: rangeOnDateChangeT;\n  onMonthFromChange: onInternalInputsChangeT;\n  onDayFromChange: onInternalInputsChangeT;\n  onYearFromChange: onInternalInputsChangeT;\n  hasError: boolean;\n  pickerFooterMsg: string;\n\n  toDate: string;\n  onToDateChange: rangeOnDateChangeT;\n  onMonthToChange: onInternalInputsChangeT;\n  onDayToChange: onInternalInputsChangeT;\n  onYearToChange: onInternalInputsChangeT;\n\n  emptyPickerStartingMonth?: string;\n  onCalendarOpenFocusedDay?: string;\n  isClearable?: boolean;\n  getIsDisabledDay?: (day: string) => boolean;\n  getIsOutOfRangeDay?: (day: string) => boolean;\n  autoFocus?: boolean;\n}\n\nexport interface RangePickerLogicT {\n  latestChangedDate: string;\n\n  onCalendarOpen: () => void;\n  onCalendarClose: () => void;\n\n  handleFromDateChange: rangeOnDateChangeT;\n  handleToDateChange: rangeOnDateChangeT;\n\n  handlePickerDateChange: rangeOnDateChangeT;\n  handlePickerMonthDateChange: onInternalInputsChangeT;\n  handlePickerDayDateChange: onInternalInputsChangeT;\n  handlePickerYearDateChange: onInternalInputsChangeT;\n\n  getIsStartRangeDay: (day: string) => boolean;\n  getIsDayInRange: (day: string) => boolean;\n  getIsEndRangeDay: (day: string) => boolean;\n}\nexport interface ControlledDateRangePickerContextT {\n  props: DateRangePickerPropsT;\n  instanceUID: string;\n  rangePickerLogic: RangePickerLogicT;\n  withInputs: boolean;\n  withIcon: boolean;\n  isControllerOnly: boolean;\n  isPickerOnly: boolean;\n  isPickerOnly: boolean;\n  xstyledAttrs: Record<string, unknown>;\n  globalAttrs: Record<string, unknown>;\n}\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
   "names": []
 }

package/dist/cjs/index.js

@@ -27,6 +27,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
 __reExport(src_exports, require("./ControlledDateRangePicker"), module.exports);
+__reExport(src_exports, require("./exported-related/theming"), module.exports);
 var import_ControlledDateRangePickerDatatestid = require("./ControlledDateRangePickerDatatestid");
 var import_ControlledDateRangePickerTypes = require("./ControlledDateRangePickerTypes");
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './ControlledDateRangePicker';\nexport { ControlledDateRangePickerDatatestid } from './ControlledDateRangePickerDatatestid';\nexport { CONTROLLED_DATE_RANGE_PICKER_TYPES } from './ControlledDateRangePickerTypes';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,wCAAd;AACA,iDAAoD;AACpD,4CAAmD;",
+  "sourcesContent": ["export * from './ControlledDateRangePicker';\nexport * from './exported-related/theming';\nexport { ControlledDateRangePickerDatatestid } from './ControlledDateRangePickerDatatestid';\nexport { CONTROLLED_DATE_RANGE_PICKER_TYPES } from './ControlledDateRangePickerTypes';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,wCAAd;AACA,wBAAc,uCADd;AAEA,iDAAoD;AACpD,4CAAmD;",
   "names": []
 }

package/dist/cjs/parts/ControlledDateRangeContent.js

@@ -39,14 +39,15 @@ __export(ControlledDateRangeContent_exports, {
 module.exports = __toCommonJS(ControlledDateRangeContent_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
+var import_ds_system = require("@elliemae/ds-system");
 var import_ControlledDateRangePickerCTX = require("../ControlledDateRangePickerCTX");
 var import_ControlledDateRangeFromDate = require("./ControlledDateRangeFromDate");
 var import_ControlledDateRangeToDate = require("./ControlledDateRangeToDate");
 var import_ControlledDateRangeCalendar = require("./ControlledDateRangeCalendar");
 var import_ControlledDateRangePickerDatatestid = require("../ControlledDateRangePickerDatatestid");
 var import_utils = require("../utils/utils");
-const StyledWrapper = import_styled_components.default.div`
+var import_theming = require("../exported-related/theming");
+const StyledWrapper = (0, import_ds_system.styled)("div", { name: import_theming.COMPONENT_NAME, slot: import_theming.slots.CONTAINER })`
   display: grid;
   grid-template-columns: ${({ type }) => import_utils.gridMap[type]};
   grid-template-rows: auto;
@@ -55,20 +56,25 @@ const StyledWrapper = import_styled_components.default.div`
   grid-template-areas: '. .';
   justify-content: center;
   align-items: center;
+  ${import_ds_system.sizing}
+  ${import_ds_system.space}
+  ${import_ds_system.layout}
 `;
 const ControlledDateRangeContent = () => {
   const {
-    props: { dataAttrs, type },
+    props: { type },
     withIcon,
     withInputs,
     isControllerOnly,
-    isPickerOnly
+    isPickerOnly,
+    xstyledAttrs,
+    globalAttrs
   } = (0, import_react.useContext)(import_ControlledDateRangePickerCTX.ControlledDateRangePickerContext);
-  return /* @__PURE__ */ import_react.default.createElement(StyledWrapper, __spreadValues({
+  return /* @__PURE__ */ import_react.default.createElement(StyledWrapper, __spreadValues(__spreadValues({
     isControllerOnly,
     isPickerOnly,
     "data-testid": import_ControlledDateRangePickerDatatestid.ControlledDateRangePickerDatatestid.WRAPPER,
     type
-  }, dataAttrs), withInputs ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_ControlledDateRangeFromDate.ControlledDateRangeFromDate, null), /* @__PURE__ */ import_react.default.createElement(import_ControlledDateRangeToDate.ControlledDateRangeToDate, null)) : null, withIcon || isControllerOnly ? /* @__PURE__ */ import_react.default.createElement(import_ControlledDateRangeCalendar.ControlledDateRangeCalendar, null) : null);
+  }, globalAttrs), xstyledAttrs), withInputs ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_ControlledDateRangeFromDate.ControlledDateRangeFromDate, null), /* @__PURE__ */ import_react.default.createElement(import_ControlledDateRangeToDate.ControlledDateRangeToDate, null)) : null, withIcon || isControllerOnly ? /* @__PURE__ */ import_react.default.createElement(import_ControlledDateRangeCalendar.ControlledDateRangeCalendar, null) : null);
 };
 //# sourceMappingURL=ControlledDateRangeContent.js.map

package/dist/cjs/parts/ControlledDateRangeContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/ControlledDateRangeContent.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport styled from 'styled-components';\nimport { ControlledDateRangePickerContext } from '../ControlledDateRangePickerCTX';\nimport { ControlledDateRangeFromDate } from './ControlledDateRangeFromDate';\nimport { ControlledDateRangeToDate } from './ControlledDateRangeToDate';\nimport { ControlledDateRangeCalendar } from './ControlledDateRangeCalendar';\nimport { ControlledDateRangePickerDatatestid } from '../ControlledDateRangePickerDatatestid';\nimport { gridMap } from '../utils/utils';\nimport type { ControlledDateRangeTypeT } from '../index.d';\n\ninterface StyledWrapperT {\n  isControllerOnly: boolean;\n  isPickerOnly: boolean;\n  type: ControlledDateRangeTypeT;\n}\n\nconst StyledWrapper = styled.div<StyledWrapperT>`\n  display: grid;\n  grid-template-columns: ${({ type }) => gridMap[type]};\n  grid-template-rows: auto;\n  ${({ isControllerOnly, isPickerOnly }) => (isControllerOnly || isPickerOnly ? '' : 'gap: 0px 8px;')}\n  grid-auto-flow: row;\n  grid-template-areas: '. .';\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const ControlledDateRangeContent = (): JSX.Element => {\n  const {\n    props: { dataAttrs, type },\n    withIcon,\n    withInputs,\n    isControllerOnly,\n    isPickerOnly,\n  } = useContext(ControlledDateRangePickerContext);\n\n  return (\n    <StyledWrapper\n      isControllerOnly={isControllerOnly}\n      isPickerOnly={isPickerOnly}\n      data-testid={ControlledDateRangePickerDatatestid.WRAPPER}\n      type={type}\n      {...dataAttrs}\n    >\n      {withInputs ? (\n        <>\n          <ControlledDateRangeFromDate />\n          <ControlledDateRangeToDate />\n        </>\n      ) : null}\n      {withIcon || isControllerOnly ? <ControlledDateRangeCalendar /> : null}\n    </StyledWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,+BAAmB;AACnB,0CAAiD;AACjD,yCAA4C;AAC5C,uCAA0C;AAC1C,yCAA4C;AAC5C,iDAAoD;AACpD,mBAAwB;AASxB,MAAM,gBAAgB,iCAAO;AAAA;AAAA,2BAEF,CAAC,EAAE,WAAW,qBAAQ;AAAA;AAAA,IAE7C,CAAC,EAAE,kBAAkB,mBAAoB,oBAAoB,eAAe,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9E,MAAM,6BAA6B,MAAmB;AAC3D,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW,oEAAgC;AAE/C,SACE,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,eAAa,+EAAoC;AAAA,IACjD;AAAA,KACI,YAEH,aACC,wFACE,mDAAC,oEAA4B,GAC7B,mDAAC,gEAA0B,CAC7B,IACE,MACH,YAAY,mBAAmB,mDAAC,oEAA4B,IAAK,IACpE;AAEJ;",
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { styled, sizing, space, layout } from '@elliemae/ds-system';\nimport { ControlledDateRangePickerContext } from '../ControlledDateRangePickerCTX';\nimport { ControlledDateRangeFromDate } from './ControlledDateRangeFromDate';\nimport { ControlledDateRangeToDate } from './ControlledDateRangeToDate';\nimport { ControlledDateRangeCalendar } from './ControlledDateRangeCalendar';\nimport { ControlledDateRangePickerDatatestid } from '../ControlledDateRangePickerDatatestid';\nimport { gridMap } from '../utils/utils';\nimport type { ControlledDateRangeTypeT } from '../index.d';\nimport { COMPONENT_NAME, slots } from '../exported-related/theming';\n\ninterface StyledWrapperT {\n  isControllerOnly: boolean;\n  isPickerOnly: boolean;\n  type: ControlledDateRangeTypeT;\n}\n\nconst StyledWrapper = styled('div', { name: COMPONENT_NAME, slot: slots.CONTAINER })<StyledWrapperT>`\n  display: grid;\n  grid-template-columns: ${({ type }) => gridMap[type]};\n  grid-template-rows: auto;\n  ${({ isControllerOnly, isPickerOnly }) => (isControllerOnly || isPickerOnly ? '' : 'gap: 0px 8px;')}\n  grid-auto-flow: row;\n  grid-template-areas: '. .';\n  justify-content: center;\n  align-items: center;\n  ${sizing}\n  ${space}\n  ${layout}\n`;\n\nexport const ControlledDateRangeContent = (): JSX.Element => {\n  const {\n    props: { type },\n    withIcon,\n    withInputs,\n    isControllerOnly,\n    isPickerOnly,\n    xstyledAttrs,\n    globalAttrs,\n  } = useContext(ControlledDateRangePickerContext);\n\n  return (\n    <StyledWrapper\n      isControllerOnly={isControllerOnly}\n      isPickerOnly={isPickerOnly}\n      data-testid={ControlledDateRangePickerDatatestid.WRAPPER}\n      type={type}\n      {...globalAttrs}\n      {...xstyledAttrs}\n    >\n      {withInputs ? (\n        <>\n          <ControlledDateRangeFromDate />\n          <ControlledDateRangeToDate />\n        </>\n      ) : null}\n      {withIcon || isControllerOnly ? <ControlledDateRangeCalendar /> : null}\n    </StyledWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,uBAA8C;AAC9C,0CAAiD;AACjD,yCAA4C;AAC5C,uCAA0C;AAC1C,yCAA4C;AAC5C,iDAAoD;AACpD,mBAAwB;AAExB,qBAAsC;AAQtC,MAAM,gBAAgB,6BAAO,OAAO,EAAE,MAAM,+BAAgB,MAAM,qBAAM,UAAU,CAAC;AAAA;AAAA,2BAExD,CAAC,EAAE,WAAW,qBAAQ;AAAA;AAAA,IAE7C,CAAC,EAAE,kBAAkB,mBAAoB,oBAAoB,eAAe,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjF;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,6BAA6B,MAAmB;AAC3D,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW,oEAAgC;AAE/C,SACE,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,eAAa,+EAAoC;AAAA,IACjD;AAAA,KACI,cACA,eAEH,aACC,wFACE,mDAAC,oEAA4B,GAC7B,mDAAC,gEAA0B,CAC7B,IACE,MACH,YAAY,mBAAmB,mDAAC,oEAA4B,IAAK,IACpE;AAEJ;",
   "names": []
 }

package/dist/cjs/propTypes.js

@@ -1,9 +1,26 @@
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -24,13 +41,13 @@ __export(propTypes_exports, {
 });
 module.exports = __toCommonJS(propTypes_exports);
 var React = __toESM(require("react"));
-var import_react_desc = require("react-desc");
-const propTypes = {
-  type: import_react_desc.PropTypes.oneOf([
+var import_ds_utilities = require("@elliemae/ds-utilities");
+const propTypes = __spreadProps(__spreadValues(__spreadValues({}, import_ds_utilities.globalAttributesPropTypes), import_ds_utilities.xstyledPropTypes), {
+  type: import_ds_utilities.PropTypes.oneOf([
     "full-date-range",
     "date-range-picker-controller-only",
     "date-range-picker",
     "date-range-inputs"
   ]).description("Type of date range form control to use")
-};
+});
 //# sourceMappingURL=propTypes.js.map

package/dist/cjs/propTypes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/propTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { PropTypes } from 'react-desc';\n\nexport const propTypes = {\n  type: PropTypes.oneOf([\n    'full-date-range',\n    'date-range-picker-controller-only',\n    'date-range-picker',\n    'date-range-inputs',\n  ]).description('Type of date range form control to use'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAA0B;AAEnB,MAAM,YAAY;AAAA,EACvB,MAAM,4BAAU,MAAM;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EAAE,YAAY,wCAAwC;AACzD;",
+  "sourcesContent": ["import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  type: PropTypes.oneOf([\n    'full-date-range',\n    'date-range-picker-controller-only',\n    'date-range-picker',\n    'date-range-inputs',\n  ]).description('Type of date range form control to use'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAuE;AAEhE,MAAM,YAAY,gDACpB,gDACA,uCAFoB;AAAA,EAGvB,MAAM,8BAAU,MAAM;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EAAE,YAAY,wCAAwC;AACzD;",
   "names": []
 }

package/dist/esm/ControlledDateRangePicker.js

@@ -11,7 +11,6 @@ const DSControlledDateRangePicker = (props) => {
     value: ctx
   }, /* @__PURE__ */ React2.createElement(ControlledDateRangeContent, null));
 };
-DSControlledDateRangePicker.propTypes = propTypes;
 DSControlledDateRangePicker.displayName = "DSControlledDateRangePicker";
 const DSControlledDateRangePickerWithSchema = describe(DSControlledDateRangePicker);
 DSControlledDateRangePickerWithSchema.propTypes = propTypes;

package/dist/esm/ControlledDateRangePicker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ControlledDateRangePicker.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { describe } from 'react-desc';\nimport { useControlledDateRangePicker } from './config/useControlledDateRangePicker';\nimport { ControlledDateRangeContent } from './parts/ControlledDateRangeContent';\nimport { propTypes } from './propTypes';\nimport { ControlledDateRangePickerContext } from './ControlledDateRangePickerCTX';\nimport type { DateRangePickerPropsT } from './index.d';\n\nconst DSControlledDateRangePicker = (props: DateRangePickerPropsT): JSX.Element => {\n  const ctx = useControlledDateRangePicker(props);\n  return (\n    <ControlledDateRangePickerContext.Provider value={ctx}>\n      <ControlledDateRangeContent />\n    </ControlledDateRangePickerContext.Provider>\n  );\n};\nDSControlledDateRangePicker.propTypes = propTypes;\nDSControlledDateRangePicker.displayName = 'DSControlledDateRangePicker';\nconst DSControlledDateRangePickerWithSchema = describe(DSControlledDateRangePicker);\nDSControlledDateRangePickerWithSchema.propTypes = propTypes;\n\nexport { DSControlledDateRangePickerWithSchema, DSControlledDateRangePicker };\n"],
-  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,8BAA8B,CAAC,UAA8C;AACjF,QAAM,MAAM,6BAA6B,KAAK;AAC9C,SACE,qCAAC,iCAAiC,UAAjC;AAAA,IAA0C,OAAO;AAAA,KAChD,qCAAC,gCAA2B,CAC9B;AAEJ;AACA,4BAA4B,YAAY;AACxC,4BAA4B,cAAc;AAC1C,MAAM,wCAAwC,SAAS,2BAA2B;AAClF,sCAAsC,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { describe } from 'react-desc';\nimport { useControlledDateRangePicker } from './config/useControlledDateRangePicker';\nimport { ControlledDateRangeContent } from './parts/ControlledDateRangeContent';\nimport { propTypes } from './propTypes';\nimport { ControlledDateRangePickerContext } from './ControlledDateRangePickerCTX';\nimport type { DateRangePickerPropsT } from './index.d';\n\nconst DSControlledDateRangePicker = (props: DateRangePickerPropsT): JSX.Element => {\n  const ctx = useControlledDateRangePicker(props);\n  return (\n    <ControlledDateRangePickerContext.Provider value={ctx}>\n      <ControlledDateRangeContent />\n    </ControlledDateRangePickerContext.Provider>\n  );\n};\n\nDSControlledDateRangePicker.displayName = 'DSControlledDateRangePicker';\nconst DSControlledDateRangePickerWithSchema = describe(DSControlledDateRangePicker);\nDSControlledDateRangePickerWithSchema.propTypes = propTypes;\n\nexport { DSControlledDateRangePickerWithSchema, DSControlledDateRangePicker };\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,8BAA8B,CAAC,UAA8C;AACjF,QAAM,MAAM,6BAA6B,KAAK;AAC9C,SACE,qCAAC,iCAAiC,UAAjC;AAAA,IAA0C,OAAO;AAAA,KAChD,qCAAC,gCAA2B,CAC9B;AAEJ;AAEA,4BAA4B,cAAc;AAC1C,MAAM,wCAAwC,SAAS,2BAA2B;AAClF,sCAAsC,YAAY;",
   "names": []
 }

package/dist/esm/ControlledDateRangePickerCTX.js

@@ -44,7 +44,9 @@ const defaultContext = {
   withInputs: false,
   withIcon: false,
   isControllerOnly: false,
-  isPickerOnly: false
+  isPickerOnly: false,
+  xstyledAttrs: {},
+  globalAttrs: {}
 };
 const ControlledDateRangePickerContext = createContext(defaultContext);
 var ControlledDateRangePickerCTX_default = ControlledDateRangePickerContext;

package/dist/esm/ControlledDateRangePickerCTX.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ControlledDateRangePickerCTX.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext } from 'react';\nimport type { DateRangePickerPropsT, ControlledDateRangePickerContextT } from './index.d';\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nconst defaultReturnFalse = (): boolean => false;\nexport const defaultProps: DateRangePickerPropsT = {\n  type: 'full-date-range',\n  fromDate: '',\n  onFromDateChange: noop,\n  onMonthFromChange: noop,\n  onDayFromChange: noop,\n  onYearFromChange: noop,\n  hasError: false,\n  pickerFooterMsg: '',\n\n  toDate: '',\n  onToDateChange: noop,\n  onMonthToChange: noop,\n  onDayToChange: noop,\n  onYearToChange: noop,\n\n  emptyPickerStartingMonth: undefined,\n  onCalendarOpenFocusedDay: undefined,\n  isClearable: false,\n  getIsDisabledDay: defaultReturnFalse,\n  getIsOutOfRangeDay: defaultReturnFalse,\n  autoFocus: false,\n};\nconst defaultContext = {\n  props: defaultProps,\n  rangePickerLogic: {\n    latestChangedDate: '',\n    onCalendarOpen: noop,\n    onCalendarClose: noop,\n    handleFromDateChange: noop,\n    handleToDateChange: noop,\n    handlePickerDateChange: noop,\n    handlePickerMonthDateChange: noop,\n    handlePickerDayDateChange: noop,\n    handlePickerYearDateChange: noop,\n    getIsStartRangeDay: defaultReturnFalse,\n    getIsDayInRange: defaultReturnFalse,\n    getIsEndRangeDay: defaultReturnFalse,\n  },\n  instanceUID: '',\n  withInputs: false,\n  withIcon: false,\n  isControllerOnly: false,\n  isPickerOnly: false,\n};\n/** Context for cross component communication */\nexport const ControlledDateRangePickerContext = createContext<ControlledDateRangePickerContextT>(defaultContext);\n\nexport default ControlledDateRangePickerContext;\n"],
-  "mappings": "AAAA;ACAA;AAGA,MAAM,OAAO,MAAY;AAAC;AAC1B,MAAM,qBAAqB,MAAe;AACnC,MAAM,eAAsC;AAAA,EACjD,MAAM;AAAA,EACN,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,UAAU;AAAA,EACV,iBAAiB;AAAA,EAEjB,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,gBAAgB;AAAA,EAEhB,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,WAAW;AACb;AACA,MAAM,iBAAiB;AAAA,EACrB,OAAO;AAAA,EACP,kBAAkB;AAAA,IAChB,mBAAmB;AAAA,IACnB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,sBAAsB;AAAA,IACtB,oBAAoB;AAAA,IACpB,wBAAwB;AAAA,IACxB,6BAA6B;AAAA,IAC7B,2BAA2B;AAAA,IAC3B,4BAA4B;AAAA,IAC5B,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,EACpB;AAAA,EACA,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,cAAc;AAChB;AAEO,MAAM,mCAAmC,cAAiD,cAAc;AAE/G,IAAO,uCAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext } from 'react';\nimport type { DateRangePickerPropsT, ControlledDateRangePickerContextT } from './index.d';\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nconst defaultReturnFalse = (): boolean => false;\n\nexport const defaultProps: DateRangePickerPropsT = {\n  type: 'full-date-range',\n  fromDate: '',\n  onFromDateChange: noop,\n  onMonthFromChange: noop,\n  onDayFromChange: noop,\n  onYearFromChange: noop,\n  hasError: false,\n  pickerFooterMsg: '',\n  toDate: '',\n  onToDateChange: noop,\n  onMonthToChange: noop,\n  onDayToChange: noop,\n  onYearToChange: noop,\n  emptyPickerStartingMonth: undefined,\n  onCalendarOpenFocusedDay: undefined,\n  isClearable: false,\n  getIsDisabledDay: defaultReturnFalse,\n  getIsOutOfRangeDay: defaultReturnFalse,\n  autoFocus: false,\n};\n\nconst defaultContext = {\n  props: defaultProps,\n  rangePickerLogic: {\n    latestChangedDate: '',\n    onCalendarOpen: noop,\n    onCalendarClose: noop,\n    handleFromDateChange: noop,\n    handleToDateChange: noop,\n    handlePickerDateChange: noop,\n    handlePickerMonthDateChange: noop,\n    handlePickerDayDateChange: noop,\n    handlePickerYearDateChange: noop,\n    getIsStartRangeDay: defaultReturnFalse,\n    getIsDayInRange: defaultReturnFalse,\n    getIsEndRangeDay: defaultReturnFalse,\n  },\n  instanceUID: '',\n  withInputs: false,\n  withIcon: false,\n  isControllerOnly: false,\n  isPickerOnly: false,\n  xstyledAttrs: {},\n  globalAttrs: {},\n};\n/** Context for cross component communication */\nexport const ControlledDateRangePickerContext = createContext<ControlledDateRangePickerContextT>(defaultContext);\n\nexport default ControlledDateRangePickerContext;\n"],
+  "mappings": "AAAA;ACAA;AAGA,MAAM,OAAO,MAAY;AAAC;AAC1B,MAAM,qBAAqB,MAAe;AAEnC,MAAM,eAAsC;AAAA,EACjD,MAAM;AAAA,EACN,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,WAAW;AACb;AAEA,MAAM,iBAAiB;AAAA,EACrB,OAAO;AAAA,EACP,kBAAkB;AAAA,IAChB,mBAAmB;AAAA,IACnB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,sBAAsB;AAAA,IACtB,oBAAoB;AAAA,IACpB,wBAAwB;AAAA,IACxB,6BAA6B;AAAA,IAC7B,2BAA2B;AAAA,IAC3B,4BAA4B;AAAA,IAC5B,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,EACpB;AAAA,EACA,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,cAAc,CAAC;AAAA,EACf,aAAa,CAAC;AAChB;AAEO,MAAM,mCAAmC,cAAiD,cAAc;AAE/G,IAAO,uCAAQ;",
   "names": []
 }

package/dist/esm/config/useControlledDateRangePicker.js

@@ -1,6 +1,4 @@
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -16,11 +14,10 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
 import { useMemo } from "react";
 import { uid } from "uid";
-import { getDataProps } from "@elliemae/ds-utilities";
+import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-utilities";
 import { useGetDateRangePickerWithDefaultsProps } from "./useGetPropsWithDefault";
 import { useValidateProps } from "./useValidateProps";
 import { useRangePickerLogic } from "./useRangePickerLogic";
@@ -29,7 +26,8 @@ const useControlledDateRangePicker = (props) => {
   useValidateProps(props);
   const instanceUID = useMemo(() => uid(6), []);
   const propsWithDefaults = useGetDateRangePickerWithDefaultsProps(props);
-  const dataAttrs = getDataProps(props);
+  const xstyledAttrs = useGetXstyledProps(propsWithDefaults);
+  const globalAttrs = useGetGlobalAttributes(propsWithDefaults);
   const { type } = propsWithDefaults;
   const withInputs = type === CONTROLLED_DATE_RANGE_PICKER_TYPES.FULL || type === CONTROLLED_DATE_RANGE_PICKER_TYPES.INPUTS;
   const withIcon = type === CONTROLLED_DATE_RANGE_PICKER_TYPES.FULL || type === CONTROLLED_DATE_RANGE_PICKER_TYPES.PICKER;
@@ -37,14 +35,26 @@ const useControlledDateRangePicker = (props) => {
   const isPickerOnly = type === CONTROLLED_DATE_RANGE_PICKER_TYPES.PICKER;
   const rangePickerLogic = useRangePickerLogic(propsWithDefaults);
   const ctx = useMemo(() => ({
-    props: __spreadProps(__spreadValues({}, propsWithDefaults), { dataAttrs }),
+    props: __spreadValues({}, propsWithDefaults),
+    xstyledAttrs,
+    globalAttrs,
     instanceUID,
     rangePickerLogic,
     withInputs,
     withIcon,
     isControllerOnly,
     isPickerOnly
-  }), [instanceUID, isControllerOnly, dataAttrs, propsWithDefaults, rangePickerLogic, withIcon, withInputs]);
+  }), [
+    propsWithDefaults,
+    xstyledAttrs,
+    globalAttrs,
+    instanceUID,
+    rangePickerLogic,
+    withInputs,
+    withIcon,
+    isControllerOnly,
+    isPickerOnly
+  ]);
   return ctx;
 };
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useControlledDateRangePicker.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo } from 'react';\nimport { uid } from 'uid';\nimport { getDataProps } from '@elliemae/ds-utilities';\n\nimport { useGetDateRangePickerWithDefaultsProps } from './useGetPropsWithDefault';\nimport { useValidateProps } from './useValidateProps';\nimport { useRangePickerLogic } from './useRangePickerLogic';\nimport { CONTROLLED_DATE_RANGE_PICKER_TYPES } from '../ControlledDateRangePickerTypes';\nimport type { DateRangePickerPropsT, ControlledDateRangePickerContextT } from '../index.d';\n\nexport const useControlledDateRangePicker = (\n  props: Partial<DateRangePickerPropsT>,\n): ControlledDateRangePickerContextT => {\n  // if we detect wrong props configuration we throw meaningful errors\n  useValidateProps(props);\n  const instanceUID = useMemo(() => uid(6), []);\n  const propsWithDefaults = useGetDateRangePickerWithDefaultsProps(props);\n  const dataAttrs = getDataProps(props);\n  const { type } = propsWithDefaults;\n\n  const withInputs =\n    type === CONTROLLED_DATE_RANGE_PICKER_TYPES.FULL || type === CONTROLLED_DATE_RANGE_PICKER_TYPES.INPUTS;\n  const withIcon =\n    type === CONTROLLED_DATE_RANGE_PICKER_TYPES.FULL || type === CONTROLLED_DATE_RANGE_PICKER_TYPES.PICKER;\n  const isControllerOnly = type === CONTROLLED_DATE_RANGE_PICKER_TYPES.CONTROLLER_ONLY;\n  const isPickerOnly = type === CONTROLLED_DATE_RANGE_PICKER_TYPES.PICKER;\n\n  const rangePickerLogic = useRangePickerLogic(propsWithDefaults);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults, dataAttrs },\n      instanceUID,\n      rangePickerLogic,\n      withInputs,\n      withIcon,\n      isControllerOnly,\n      isPickerOnly,\n    }),\n    [instanceUID, isControllerOnly, dataAttrs, propsWithDefaults, rangePickerLogic, withIcon, withInputs],\n  );\n\n  return ctx;\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACIA;AACA;AACA;AAEA;AACA;AACA;AACA;AAGO,MAAM,+BAA+B,CAC1C,UACsC;AAEtC,mBAAiB,KAAK;AACtB,QAAM,cAAc,QAAQ,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;AAC5C,QAAM,oBAAoB,uCAAuC,KAAK;AACtE,QAAM,YAAY,aAAa,KAAK;AACpC,QAAM,EAAE,SAAS;AAEjB,QAAM,aACJ,SAAS,mCAAmC,QAAQ,SAAS,mCAAmC;AAClG,QAAM,WACJ,SAAS,mCAAmC,QAAQ,SAAS,mCAAmC;AAClG,QAAM,mBAAmB,SAAS,mCAAmC;AACrE,QAAM,eAAe,SAAS,mCAAmC;AAEjE,QAAM,mBAAmB,oBAAoB,iBAAiB;AAE9D,QAAM,MAAM,QACV,MAAO;AAAA,IACL,OAAO,iCAAK,oBAAL,EAAwB,UAAU;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA,CAAC,aAAa,kBAAkB,WAAW,mBAAmB,kBAAkB,UAAU,UAAU,CACtG;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo } from 'react';\nimport { uid } from 'uid';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { useGetDateRangePickerWithDefaultsProps } from './useGetPropsWithDefault';\nimport { useValidateProps } from './useValidateProps';\nimport { useRangePickerLogic } from './useRangePickerLogic';\nimport { CONTROLLED_DATE_RANGE_PICKER_TYPES } from '../ControlledDateRangePickerTypes';\nimport type { DateRangePickerPropsT, ControlledDateRangePickerContextT } from '../index.d';\n\nexport const useControlledDateRangePicker = (\n  props: Partial<DateRangePickerPropsT>,\n): ControlledDateRangePickerContextT => {\n  // if we detect wrong props configuration we throw meaningful errors\n  useValidateProps(props);\n  const instanceUID = useMemo(() => uid(6), []);\n  const propsWithDefaults = useGetDateRangePickerWithDefaultsProps(props);\n\n  const xstyledAttrs = useGetXstyledProps(propsWithDefaults) as Record<string, unknown>;\n\n  const globalAttrs = useGetGlobalAttributes(propsWithDefaults) as Record<string, unknown>;\n\n  const { type } = propsWithDefaults;\n\n  const withInputs =\n    type === CONTROLLED_DATE_RANGE_PICKER_TYPES.FULL || type === CONTROLLED_DATE_RANGE_PICKER_TYPES.INPUTS;\n  const withIcon =\n    type === CONTROLLED_DATE_RANGE_PICKER_TYPES.FULL || type === CONTROLLED_DATE_RANGE_PICKER_TYPES.PICKER;\n  const isControllerOnly = type === CONTROLLED_DATE_RANGE_PICKER_TYPES.CONTROLLER_ONLY;\n  const isPickerOnly = type === CONTROLLED_DATE_RANGE_PICKER_TYPES.PICKER;\n\n  const rangePickerLogic = useRangePickerLogic(propsWithDefaults);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults },\n      xstyledAttrs,\n      globalAttrs,\n      instanceUID,\n      rangePickerLogic,\n      withInputs,\n      withIcon,\n      isControllerOnly,\n      isPickerOnly,\n    }),\n    [\n      propsWithDefaults,\n      xstyledAttrs,\n      globalAttrs,\n      instanceUID,\n      rangePickerLogic,\n      withInputs,\n      withIcon,\n      isControllerOnly,\n      isPickerOnly,\n    ],\n  );\n\n  return ctx;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACIA;AACA;AACA;AACA;AACA;AACA;AACA;AAGO,MAAM,+BAA+B,CAC1C,UACsC;AAEtC,mBAAiB,KAAK;AACtB,QAAM,cAAc,QAAQ,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;AAC5C,QAAM,oBAAoB,uCAAuC,KAAK;AAEtE,QAAM,eAAe,mBAAmB,iBAAiB;AAEzD,QAAM,cAAc,uBAAuB,iBAAiB;AAE5D,QAAM,EAAE,SAAS;AAEjB,QAAM,aACJ,SAAS,mCAAmC,QAAQ,SAAS,mCAAmC;AAClG,QAAM,WACJ,SAAS,mCAAmC,QAAQ,SAAS,mCAAmC;AAClG,QAAM,mBAAmB,SAAS,mCAAmC;AACrE,QAAM,eAAe,SAAS,mCAAmC;AAEjE,QAAM,mBAAmB,oBAAoB,iBAAiB;AAE9D,QAAM,MAAM,QACV,MAAO;AAAA,IACL,OAAO,mBAAK;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CACF;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/exported-related/theming.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+const COMPONENT_NAME = "DS-controlled-date-range-picker";
+const slots = {
+  CONTAINER: "root"
+};
+export {
+  COMPONENT_NAME,
+  slots
+};
+//# sourceMappingURL=theming.js.map

package/dist/esm/exported-related/theming.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/theming.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const COMPONENT_NAME = 'DS-controlled-date-range-picker';\n\nexport const slots = {\n  CONTAINER: 'root',\n};\n"],
+  "mappings": "AAAA;ACAO,MAAM,iBAAiB;AAEvB,MAAM,QAAQ;AAAA,EACnB,WAAW;AACb;",
+  "names": []
+}

package/dist/esm/index.js

@@ -1,5 +1,6 @@
 import * as React from "react";
 export * from "./ControlledDateRangePicker";
+export * from "./exported-related/theming";
 import { ControlledDateRangePickerDatatestid } from "./ControlledDateRangePickerDatatestid";
 import { CONTROLLED_DATE_RANGE_PICKER_TYPES } from "./ControlledDateRangePickerTypes";
 export {

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './ControlledDateRangePicker';\nexport { ControlledDateRangePickerDatatestid } from './ControlledDateRangePickerDatatestid';\nexport { CONTROLLED_DATE_RANGE_PICKER_TYPES } from './ControlledDateRangePickerTypes';\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './ControlledDateRangePicker';\nexport * from './exported-related/theming';\nexport { ControlledDateRangePickerDatatestid } from './ControlledDateRangePickerDatatestid';\nexport { CONTROLLED_DATE_RANGE_PICKER_TYPES } from './ControlledDateRangePickerTypes';\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;",
   "names": []
 }

package/dist/esm/parts/ControlledDateRangeContent.js

@@ -16,14 +16,15 @@ var __spreadValues = (a, b) => {
 };
 import * as React from "react";
 import React2, { useContext } from "react";
-import styled from "styled-components";
+import { styled, sizing, space, layout } from "@elliemae/ds-system";
 import { ControlledDateRangePickerContext } from "../ControlledDateRangePickerCTX";
 import { ControlledDateRangeFromDate } from "./ControlledDateRangeFromDate";
 import { ControlledDateRangeToDate } from "./ControlledDateRangeToDate";
 import { ControlledDateRangeCalendar } from "./ControlledDateRangeCalendar";
 import { ControlledDateRangePickerDatatestid } from "../ControlledDateRangePickerDatatestid";
 import { gridMap } from "../utils/utils";
-const StyledWrapper = styled.div`
+import { COMPONENT_NAME, slots } from "../exported-related/theming";
+const StyledWrapper = styled("div", { name: COMPONENT_NAME, slot: slots.CONTAINER })`
   display: grid;
   grid-template-columns: ${({ type }) => gridMap[type]};
   grid-template-rows: auto;
@@ -32,21 +33,26 @@ const StyledWrapper = styled.div`
   grid-template-areas: '. .';
   justify-content: center;
   align-items: center;
+  ${sizing}
+  ${space}
+  ${layout}
 `;
 const ControlledDateRangeContent = () => {
   const {
-    props: { dataAttrs, type },
+    props: { type },
     withIcon,
     withInputs,
     isControllerOnly,
-    isPickerOnly
+    isPickerOnly,
+    xstyledAttrs,
+    globalAttrs
   } = useContext(ControlledDateRangePickerContext);
-  return /* @__PURE__ */ React2.createElement(StyledWrapper, __spreadValues({
+  return /* @__PURE__ */ React2.createElement(StyledWrapper, __spreadValues(__spreadValues({
     isControllerOnly,
     isPickerOnly,
     "data-testid": ControlledDateRangePickerDatatestid.WRAPPER,
     type
-  }, dataAttrs), withInputs ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ControlledDateRangeFromDate, null), /* @__PURE__ */ React2.createElement(ControlledDateRangeToDate, null)) : null, withIcon || isControllerOnly ? /* @__PURE__ */ React2.createElement(ControlledDateRangeCalendar, null) : null);
+  }, globalAttrs), xstyledAttrs), withInputs ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ControlledDateRangeFromDate, null), /* @__PURE__ */ React2.createElement(ControlledDateRangeToDate, null)) : null, withIcon || isControllerOnly ? /* @__PURE__ */ React2.createElement(ControlledDateRangeCalendar, null) : null);
 };
 export {
   ControlledDateRangeContent

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ControlledDateRangeContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport styled from 'styled-components';\nimport { ControlledDateRangePickerContext } from '../ControlledDateRangePickerCTX';\nimport { ControlledDateRangeFromDate } from './ControlledDateRangeFromDate';\nimport { ControlledDateRangeToDate } from './ControlledDateRangeToDate';\nimport { ControlledDateRangeCalendar } from './ControlledDateRangeCalendar';\nimport { ControlledDateRangePickerDatatestid } from '../ControlledDateRangePickerDatatestid';\nimport { gridMap } from '../utils/utils';\nimport type { ControlledDateRangeTypeT } from '../index.d';\n\ninterface StyledWrapperT {\n  isControllerOnly: boolean;\n  isPickerOnly: boolean;\n  type: ControlledDateRangeTypeT;\n}\n\nconst StyledWrapper = styled.div<StyledWrapperT>`\n  display: grid;\n  grid-template-columns: ${({ type }) => gridMap[type]};\n  grid-template-rows: auto;\n  ${({ isControllerOnly, isPickerOnly }) => (isControllerOnly || isPickerOnly ? '' : 'gap: 0px 8px;')}\n  grid-auto-flow: row;\n  grid-template-areas: '. .';\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const ControlledDateRangeContent = (): JSX.Element => {\n  const {\n    props: { dataAttrs, type },\n    withIcon,\n    withInputs,\n    isControllerOnly,\n    isPickerOnly,\n  } = useContext(ControlledDateRangePickerContext);\n\n  return (\n    <StyledWrapper\n      isControllerOnly={isControllerOnly}\n      isPickerOnly={isPickerOnly}\n      data-testid={ControlledDateRangePickerDatatestid.WRAPPER}\n      type={type}\n      {...dataAttrs}\n    >\n      {withInputs ? (\n        <>\n          <ControlledDateRangeFromDate />\n          <ControlledDateRangeToDate />\n        </>\n      ) : null}\n      {withIcon || isControllerOnly ? <ControlledDateRangeCalendar /> : null}\n    </StyledWrapper>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AASA,MAAM,gBAAgB,OAAO;AAAA;AAAA,2BAEF,CAAC,EAAE,WAAW,QAAQ;AAAA;AAAA,IAE7C,CAAC,EAAE,kBAAkB,mBAAoB,oBAAoB,eAAe,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9E,MAAM,6BAA6B,MAAmB;AAC3D,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,gCAAgC;AAE/C,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,eAAa,oCAAoC;AAAA,IACjD;AAAA,KACI,YAEH,aACC,4DACE,qCAAC,iCAA4B,GAC7B,qCAAC,+BAA0B,CAC7B,IACE,MACH,YAAY,mBAAmB,qCAAC,iCAA4B,IAAK,IACpE;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { styled, sizing, space, layout } from '@elliemae/ds-system';\nimport { ControlledDateRangePickerContext } from '../ControlledDateRangePickerCTX';\nimport { ControlledDateRangeFromDate } from './ControlledDateRangeFromDate';\nimport { ControlledDateRangeToDate } from './ControlledDateRangeToDate';\nimport { ControlledDateRangeCalendar } from './ControlledDateRangeCalendar';\nimport { ControlledDateRangePickerDatatestid } from '../ControlledDateRangePickerDatatestid';\nimport { gridMap } from '../utils/utils';\nimport type { ControlledDateRangeTypeT } from '../index.d';\nimport { COMPONENT_NAME, slots } from '../exported-related/theming';\n\ninterface StyledWrapperT {\n  isControllerOnly: boolean;\n  isPickerOnly: boolean;\n  type: ControlledDateRangeTypeT;\n}\n\nconst StyledWrapper = styled('div', { name: COMPONENT_NAME, slot: slots.CONTAINER })<StyledWrapperT>`\n  display: grid;\n  grid-template-columns: ${({ type }) => gridMap[type]};\n  grid-template-rows: auto;\n  ${({ isControllerOnly, isPickerOnly }) => (isControllerOnly || isPickerOnly ? '' : 'gap: 0px 8px;')}\n  grid-auto-flow: row;\n  grid-template-areas: '. .';\n  justify-content: center;\n  align-items: center;\n  ${sizing}\n  ${space}\n  ${layout}\n`;\n\nexport const ControlledDateRangeContent = (): JSX.Element => {\n  const {\n    props: { type },\n    withIcon,\n    withInputs,\n    isControllerOnly,\n    isPickerOnly,\n    xstyledAttrs,\n    globalAttrs,\n  } = useContext(ControlledDateRangePickerContext);\n\n  return (\n    <StyledWrapper\n      isControllerOnly={isControllerOnly}\n      isPickerOnly={isPickerOnly}\n      data-testid={ControlledDateRangePickerDatatestid.WRAPPER}\n      type={type}\n      {...globalAttrs}\n      {...xstyledAttrs}\n    >\n      {withInputs ? (\n        <>\n          <ControlledDateRangeFromDate />\n          <ControlledDateRangeToDate />\n        </>\n      ) : null}\n      {withIcon || isControllerOnly ? <ControlledDateRangeCalendar /> : null}\n    </StyledWrapper>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAQA,MAAM,gBAAgB,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,MAAM,UAAU,CAAC;AAAA;AAAA,2BAExD,CAAC,EAAE,WAAW,QAAQ;AAAA;AAAA,IAE7C,CAAC,EAAE,kBAAkB,mBAAoB,oBAAoB,eAAe,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjF;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,6BAA6B,MAAmB;AAC3D,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,gCAAgC;AAE/C,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,eAAa,oCAAoC;AAAA,IACjD;AAAA,KACI,cACA,eAEH,aACC,4DACE,qCAAC,iCAA4B,GAC7B,qCAAC,+BAA0B,CAC7B,IACE,MACH,YAAY,mBAAmB,qCAAC,iCAA4B,IAAK,IACpE;AAEJ;",
   "names": []
 }

package/dist/esm/propTypes.js

@@ -1,13 +1,32 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
-import { PropTypes } from "react-desc";
-const propTypes = {
+import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-utilities";
+const propTypes = __spreadProps(__spreadValues(__spreadValues({}, globalAttributesPropTypes), xstyledPropTypes), {
   type: PropTypes.oneOf([
     "full-date-range",
     "date-range-picker-controller-only",
     "date-range-picker",
     "date-range-inputs"
   ]).description("Type of date range form control to use")
-};
+});
 export {
   propTypes
 };

package/dist/esm/propTypes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from 'react-desc';\n\nexport const propTypes = {\n  type: PropTypes.oneOf([\n    'full-date-range',\n    'date-range-picker-controller-only',\n    'date-range-picker',\n    'date-range-inputs',\n  ]).description('Type of date range form control to use'),\n};\n"],
-  "mappings": "AAAA;ACAA;AAEO,MAAM,YAAY;AAAA,EACvB,MAAM,UAAU,MAAM;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EAAE,YAAY,wCAAwC;AACzD;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  type: PropTypes.oneOf([\n    'full-date-range',\n    'date-range-picker-controller-only',\n    'date-range-picker',\n    'date-range-inputs',\n  ]).description('Type of date range form control to use'),\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AAEO,MAAM,YAAY,gDACpB,4BACA,mBAFoB;AAAA,EAGvB,MAAM,UAAU,MAAM;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EAAE,YAAY,wCAAwC;AACzD;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-date-range-picker",
-  "version": "3.0.0-next.69",
+  "version": "3.0.0-next.72",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Date Range Picker",
   "files": [