@elliemae/ds-accessibility 3.1.0-next.2 → 3.1.0-next.20

package/dist/cjs/live-region/DSLiveRegion.js

@@ -31,7 +31,7 @@ var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_styles = require("./styles");
 var import_propTypes = require("./propTypes");
 const DSLiveRegion = (0, import_react.memo)((props) => {
-  const [text, setText] = (0, import_react.useState)("");
+  const [text, setText] = (0, import_react.useState)(" ");
   (0, import_react.useEffect)(() => {
     if (props.methods && props.methods.current) {
       props.methods.current.read = setText;
@@ -41,8 +41,8 @@ const DSLiveRegion = (0, import_react.memo)((props) => {
     return null;
   return import_react_dom.default.createPortal(/* @__PURE__ */ import_react.default.createElement(import_styles.StyledContainer, {
     "aria-atomic": true,
-    id: props["id"],
-    role: props["role"],
+    id: props.id,
+    role: props.role,
     "aria-live": props["aria-live"] || "polite"
   }, text), props.portal?.current || document.body);
 });

package/dist/cjs/live-region/DSLiveRegion.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/live-region/DSLiveRegion.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import ReactDOM from 'react-dom';\nimport React, { memo, useEffect, useState } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { StyledContainer } from './styles';\nimport { propTypes } from './propTypes';\nimport type { DSLiveRegionT } from './propTypes';\n\nconst DSLiveRegion = memo((props: DSLiveRegionT.Props): JSX.Element | null => {\n  const [text, setText] = useState('');\n\n  useEffect(() => {\n    if (props.methods && props.methods.current) {\n      props.methods.current.read = setText;\n    }\n  }, [props.methods]);\n\n  if (text === '') return null;\n\n  return ReactDOM.createPortal(\n    <StyledContainer aria-atomic id={props['id']} role={props['role']} aria-live={props['aria-live'] || 'polite'}>\n      {text}\n    </StyledContainer>,\n    props.portal?.current || document.body,\n  );\n});\n\nDSLiveRegion.propTypes = propTypes;\nDSLiveRegion.displayName = \"DSLiveRegion\";\nconst DSLiveRegionWithSchema = describe(DSLiveRegion);\nDSLiveRegionWithSchema.propTypes = propTypes;\n\nexport { DSLiveRegion, DSLiveRegionWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAqB;AACrB,mBAAiD;AACjD,0BAAyB;AACzB,oBAAgC;AAChC,uBAA0B;AAG1B,MAAM,eAAe,uBAAK,CAAC,UAAmD;AAC5E,QAAM,CAAC,MAAM,WAAW,2BAAS,EAAE;AAEnC,8BAAU,MAAM;AACd,QAAI,MAAM,WAAW,MAAM,QAAQ,SAAS;AAC1C,YAAM,QAAQ,QAAQ,OAAO;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,MAAI,SAAS;AAAI,WAAO;AAExB,SAAO,yBAAS,aACd,mDAAC;AAAA,IAAgB,eAAW;AAAA,IAAC,IAAI,MAAM;AAAA,IAAO,MAAM,MAAM;AAAA,IAAS,aAAW,MAAM,gBAAgB;AAAA,KACjG,IACH,GACA,MAAM,QAAQ,WAAW,SAAS,IACpC;AACF,CAAC;AAED,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,yBAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;",
+  "sourcesContent": ["import ReactDOM from 'react-dom';\nimport React, { memo, useEffect, useState } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { StyledContainer } from './styles';\nimport { propTypes } from './propTypes';\nimport type { DSLiveRegionT } from './propTypes';\n\nconst DSLiveRegion = memo((props: DSLiveRegionT.Props): JSX.Element | null => {\n  const [text, setText] = useState(' ');\n\n  useEffect(() => {\n    if (props.methods && props.methods.current) {\n      props.methods.current.read = setText;\n    }\n  }, [props.methods]);\n\n  if (text === '') return null;\n\n  return ReactDOM.createPortal(\n    <StyledContainer aria-atomic id={props.id} role={props.role} aria-live={props['aria-live'] || 'polite'}>\n      {text}\n    </StyledContainer>,\n    props.portal?.current || document.body,\n  );\n});\n\nDSLiveRegion.propTypes = propTypes;\nDSLiveRegion.displayName = 'DSLiveRegion';\nconst DSLiveRegionWithSchema = describe(DSLiveRegion);\nDSLiveRegionWithSchema.propTypes = propTypes;\n\nexport { DSLiveRegion, DSLiveRegionWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAqB;AACrB,mBAAiD;AACjD,0BAAyB;AACzB,oBAAgC;AAChC,uBAA0B;AAG1B,MAAM,eAAe,uBAAK,CAAC,UAAmD;AAC5E,QAAM,CAAC,MAAM,WAAW,2BAAS,GAAG;AAEpC,8BAAU,MAAM;AACd,QAAI,MAAM,WAAW,MAAM,QAAQ,SAAS;AAC1C,YAAM,QAAQ,QAAQ,OAAO;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,MAAI,SAAS;AAAI,WAAO;AAExB,SAAO,yBAAS,aACd,mDAAC;AAAA,IAAgB,eAAW;AAAA,IAAC,IAAI,MAAM;AAAA,IAAI,MAAM,MAAM;AAAA,IAAM,aAAW,MAAM,gBAAgB;AAAA,KAC3F,IACH,GACA,MAAM,QAAQ,WAAW,SAAS,IACpC;AACF,CAAC;AAED,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,yBAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;",
   "names": []
 }

package/dist/cjs/live-region/index.js

@@ -18,5 +18,5 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var live_region_exports = {};
 module.exports = __toCommonJS(live_region_exports);
 var React = __toESM(require("react"));
-__reExport(live_region_exports, require("./DSLiveRegion"), module.exports);
+__reExport(live_region_exports, require("./useLiveRegion"), module.exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/live-region/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/live-region/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './DSLiveRegion';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,gCAAc,2BAAd;",
+  "sourcesContent": ["export * from './useLiveRegion';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,gCAAc,4BAAd;",
   "names": []
 }

package/dist/cjs/live-region/propTypes.js

@@ -24,12 +24,5 @@ __export(propTypes_exports, {
 });
 module.exports = __toCommonJS(propTypes_exports);
 var React = __toESM(require("react"));
-var import_ds_utilities = require("@elliemae/ds-utilities");
-const propTypes = {
-  methods: import_ds_utilities.PropTypes.object.description("Ref Object."),
-  portal: import_ds_utilities.PropTypes.node.description("Sets a custom portal").defaultValue("Body Element."),
-  ["aria-live"]: import_ds_utilities.PropTypes.oneOf(["assertive", "polite", "off"]).description("Selects your aria live mode."),
-  role: import_ds_utilities.PropTypes.oneOf(["log", "status", "alert", "progressbar", "marquee", "timer"]).description("Selects your specific role."),
-  id: import_ds_utilities.PropTypes.string.description("Unique id for the Live Region.")
-};
+const propTypes = {};
 //# sourceMappingURL=propTypes.js.map

package/dist/cjs/live-region/propTypes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/live-region/propTypes.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { PropTypes } from '@elliemae/ds-utilities';\nimport type React from 'react';\n\nexport declare module DSLiveRegionT {\n  interface Methods {\n    read: React.Dispatch<React.SetStateAction<string>>;\n  }\n  export interface Props {\n    methods?: React.MutableRefObject<Methods>;\n    portal?: React.MutableRefObject<HTMLElement>;\n    ['aria-live']?: 'off' | 'assertive' | 'polite';\n    role?: 'log' | 'status' | 'alert' | 'progressbar' | 'marquee' | 'timer';\n    id?: string;\n  }\n}\n\nexport const propTypes = {\n  methods: PropTypes.object.description('Ref Object.'),\n  portal: PropTypes.node.description('Sets a custom portal').defaultValue('Body Element.'),\n  ['aria-live']: PropTypes.oneOf(['assertive', 'polite', 'off']).description('Selects your aria live mode.'),\n  role: PropTypes.oneOf(['log', 'status', 'alert', 'progressbar', 'marquee', 'timer']).description(\n    'Selects your specific role.',\n  ),\n  id: PropTypes.string.description('Unique id for the Live Region.'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA0B;AAgBnB,MAAM,YAAY;AAAA,EACvB,SAAS,8BAAU,OAAO,YAAY,aAAa;AAAA,EACnD,QAAQ,8BAAU,KAAK,YAAY,sBAAsB,EAAE,aAAa,eAAe;AAAA,GACtF,cAAc,8BAAU,MAAM,CAAC,aAAa,UAAU,KAAK,CAAC,EAAE,YAAY,8BAA8B;AAAA,EACzG,MAAM,8BAAU,MAAM,CAAC,OAAO,UAAU,SAAS,eAAe,WAAW,OAAO,CAAC,EAAE,YACnF,6BACF;AAAA,EACA,IAAI,8BAAU,OAAO,YAAY,gCAAgC;AACnE;",
+  "sourcesContent": ["import type React from 'react';\n\nexport declare namespace UseLiveRegionT {\n  export interface Props {\n    id?: string;\n    portal?: React.MutableRefObject<HTMLElement>;\n  }\n}\n\nexport const propTypes = {};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADShB,MAAM,YAAY,CAAC;",
   "names": []
 }

package/dist/cjs/live-region/useLiveRegion.js

@@ -0,0 +1,93 @@
+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 useLiveRegion_exports = {};
+__export(useLiveRegion_exports, {
+  UseLiveRegionWithSchema: () => UseLiveRegionWithSchema,
+  useLiveRegion: () => useLiveRegion
+});
+module.exports = __toCommonJS(useLiveRegion_exports);
+var React = __toESM(require("react"));
+var import_react_dom = __toESM(require("react-dom"));
+var import_react = __toESM(require("react"));
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_uid = require("uid");
+var import_styles = require("./styles");
+var import_propTypes = require("./propTypes");
+const DSLiveRegion = (0, import_react.memo)((props) => {
+  const [internalMessage, setInternalMessage] = (0, import_react.useState)("");
+  const [unsafe_emulateAssertiveNVDA, setUnsafe_emulateAssertiveNVDA] = (0, import_react.useState)(false);
+  const [role, setRole] = (0, import_react.useState)(void 0);
+  const [ariaLive, setAriaLive] = (0, import_react.useState)("polite");
+  const { id, portal } = props || {};
+  const reset = (0, import_react.useCallback)(() => {
+    setInternalMessage("");
+    setUnsafe_emulateAssertiveNVDA(false);
+    setAriaLive("polite");
+    setRole(void 0);
+  }, []);
+  const configure = (0, import_react.useCallback)((message, options) => {
+    reset();
+    setTimeout(() => {
+      if (options?.unsafe_emulateAssertiveNVDA)
+        setUnsafe_emulateAssertiveNVDA(true);
+      setTimeout(() => {
+        if (options?.assertive || options?.unsafe_emulateAssertiveNVDA)
+          setAriaLive("assertive");
+        if (options?.unsafe_emulateAssertiveNVDA) {
+          setRole("alert");
+          setUnsafe_emulateAssertiveNVDA(false);
+        }
+        setInternalMessage(message);
+      });
+    });
+  }, [reset]);
+  (0, import_react.useEffect)(() => {
+    if (props.methods) {
+      props.methods.current.read = configure;
+    }
+  }, [configure, props.methods]);
+  if (unsafe_emulateAssertiveNVDA)
+    return null;
+  return import_react_dom.default.createPortal(/* @__PURE__ */ import_react.default.createElement(import_styles.StyledContainer, {
+    "aria-atomic": true,
+    id,
+    role,
+    "aria-live": ariaLive
+  }, internalMessage), portal?.current || document.body);
+});
+const useLiveRegion = (props) => {
+  const methods = (0, import_react.useRef)({});
+  const { id, portal } = props || {};
+  const instanceUID = (0, import_react.useMemo)(() => `ds-live-region-${(0, import_uid.uid)(5)}`, []);
+  const read = (0, import_react.useCallback)((message, options) => methods.current.read?.(message, options), []);
+  return (0, import_react.useMemo)(() => ({
+    LiveRegion: () => /* @__PURE__ */ import_react.default.createElement(DSLiveRegion, {
+      methods,
+      id: instanceUID || id,
+      portal
+    }),
+    read
+  }), [id, instanceUID, portal, read]);
+};
+useLiveRegion.displayName = "useLiveRegion";
+const UseLiveRegionWithSchema = (0, import_ds_utilities.describe)(useLiveRegion);
+UseLiveRegionWithSchema.propTypes = import_propTypes.propTypes;
+//# sourceMappingURL=useLiveRegion.js.map

package/dist/cjs/live-region/useLiveRegion.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/live-region/useLiveRegion.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import ReactDOM from 'react-dom';\nimport React, { memo, useEffect, useState, useCallback, useRef, useMemo } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { StyledContainer } from './styles';\nimport { propTypes } from './propTypes';\nimport type { UseLiveRegionT } from './propTypes';\n\ninterface Options {\n  assertive?: boolean;\n  unsafe_emulateAssertiveNVDA?: boolean;\n}\ninterface Methods {\n  read?: (message: string, options: Options) => void;\n}\nexport interface Props {\n  methods?: React.MutableRefObject<Methods>;\n  id?: string;\n  portal?: React.MutableRefObject<HTMLElement>;\n}\n\nconst DSLiveRegion = memo((props: Props): JSX.Element | null => {\n  const [internalMessage, setInternalMessage] = useState<string>('');\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  const [unsafe_emulateAssertiveNVDA, setUnsafe_emulateAssertiveNVDA] = useState(false);\n  const [role, setRole] = useState<undefined | string>(undefined);\n  const [ariaLive, setAriaLive] = useState('polite');\n  const { id, portal } = props || {};\n\n  const reset = useCallback(() => {\n    setInternalMessage('');\n    setUnsafe_emulateAssertiveNVDA(false);\n    setAriaLive('polite');\n    setRole(undefined);\n  }, []);\n\n  const configure = useCallback(\n    (message: string, options: Options) => {\n      reset();\n      setTimeout(() => {\n        if (options?.unsafe_emulateAssertiveNVDA) setUnsafe_emulateAssertiveNVDA(true);\n        // eslint-disable-next-line max-nested-callbacks\n        setTimeout(() => {\n          if (options?.assertive || options?.unsafe_emulateAssertiveNVDA) setAriaLive('assertive');\n          if (options?.unsafe_emulateAssertiveNVDA) {\n            setRole('alert');\n            setUnsafe_emulateAssertiveNVDA(false);\n          }\n          setInternalMessage(message);\n        });\n      });\n    },\n    [reset],\n  );\n\n  useEffect(() => {\n    if (props.methods) {\n      props.methods.current.read = configure;\n    }\n  }, [configure, props.methods]);\n\n  if (unsafe_emulateAssertiveNVDA) return null;\n\n  return ReactDOM.createPortal(\n    <StyledContainer aria-atomic id={id} role={role} aria-live={ariaLive}>\n      {internalMessage}\n    </StyledContainer>,\n    portal?.current || document.body,\n  );\n});\n\nconst useLiveRegion = (props: UseLiveRegionT.Props) => {\n  const methods = useRef<Methods>({});\n\n  const { id, portal } = props || {};\n\n  const instanceUID = useMemo(() => `ds-live-region-${uid(5)}`, []);\n\n  const read = useCallback((message: string, options: Options) => methods.current.read?.(message, options), []);\n\n  return useMemo(\n    () => ({\n      LiveRegion: () => <DSLiveRegion methods={methods} id={instanceUID || id} portal={portal} />,\n      read,\n    }),\n    [id, instanceUID, portal, read],\n  );\n};\n\nuseLiveRegion.displayName = 'useLiveRegion';\nconst UseLiveRegionWithSchema = describe(useLiveRegion);\nUseLiveRegionWithSchema.propTypes = propTypes;\nexport { useLiveRegion, UseLiveRegionWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAqB;AACrB,mBAA+E;AAC/E,0BAAyB;AACzB,iBAAoB;AACpB,oBAAgC;AAChC,uBAA0B;AAgB1B,MAAM,eAAe,uBAAK,CAAC,UAAqC;AAC9D,QAAM,CAAC,iBAAiB,sBAAsB,2BAAiB,EAAE;AAEjE,QAAM,CAAC,6BAA6B,kCAAkC,2BAAS,KAAK;AACpF,QAAM,CAAC,MAAM,WAAW,2BAA6B,MAAS;AAC9D,QAAM,CAAC,UAAU,eAAe,2BAAS,QAAQ;AACjD,QAAM,EAAE,IAAI,WAAW,SAAS,CAAC;AAEjC,QAAM,QAAQ,8BAAY,MAAM;AAC9B,uBAAmB,EAAE;AACrB,mCAA+B,KAAK;AACpC,gBAAY,QAAQ;AACpB,YAAQ,MAAS;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,YAAY,8BAChB,CAAC,SAAiB,YAAqB;AACrC,UAAM;AACN,eAAW,MAAM;AACf,UAAI,SAAS;AAA6B,uCAA+B,IAAI;AAE7E,iBAAW,MAAM;AACf,YAAI,SAAS,aAAa,SAAS;AAA6B,sBAAY,WAAW;AACvF,YAAI,SAAS,6BAA6B;AACxC,kBAAQ,OAAO;AACf,yCAA+B,KAAK;AAAA,QACtC;AACA,2BAAmB,OAAO;AAAA,MAC5B,CAAC;AAAA,IACH,CAAC;AAAA,EACH,GACA,CAAC,KAAK,CACR;AAEA,8BAAU,MAAM;AACd,QAAI,MAAM,SAAS;AACjB,YAAM,QAAQ,QAAQ,OAAO;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,WAAW,MAAM,OAAO,CAAC;AAE7B,MAAI;AAA6B,WAAO;AAExC,SAAO,yBAAS,aACd,mDAAC;AAAA,IAAgB,eAAW;AAAA,IAAC;AAAA,IAAQ;AAAA,IAAY,aAAW;AAAA,KACzD,eACH,GACA,QAAQ,WAAW,SAAS,IAC9B;AACF,CAAC;AAED,MAAM,gBAAgB,CAAC,UAAgC;AACrD,QAAM,UAAU,yBAAgB,CAAC,CAAC;AAElC,QAAM,EAAE,IAAI,WAAW,SAAS,CAAC;AAEjC,QAAM,cAAc,0BAAQ,MAAM,kBAAkB,oBAAI,CAAC,KAAK,CAAC,CAAC;AAEhE,QAAM,OAAO,8BAAY,CAAC,SAAiB,YAAqB,QAAQ,QAAQ,OAAO,SAAS,OAAO,GAAG,CAAC,CAAC;AAE5G,SAAO,0BACL,MAAO;AAAA,IACL,YAAY,MAAM,mDAAC;AAAA,MAAa;AAAA,MAAkB,IAAI,eAAe;AAAA,MAAI;AAAA,KAAgB;AAAA,IACzF;AAAA,EACF,IACA,CAAC,IAAI,aAAa,QAAQ,IAAI,CAChC;AACF;AAEA,cAAc,cAAc;AAC5B,MAAM,0BAA0B,kCAAS,aAAa;AACtD,wBAAwB,YAAY;",
+  "names": []
+}

package/dist/cjs/skip-to/DSSkipTo.js

@@ -26,7 +26,7 @@ __export(DSSkipTo_exports, {
 module.exports = __toCommonJS(DSSkipTo_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
-var import_react_desc = require("react-desc");
+var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_propTypes = require("./propTypes");
 var import_styles = require("./styles");
 const DSSkipTo = (props) => {
@@ -40,6 +40,6 @@ const DSSkipTo = (props) => {
 };
 DSSkipTo.propTypes = import_propTypes.propTypes;
 DSSkipTo.displayName = "DSSkipTo";
-const DSSkipToWithSchema = (0, import_react_desc.describe)(DSSkipTo);
+const DSSkipToWithSchema = (0, import_ds_utilities.describe)(DSSkipTo);
 DSSkipToWithSchema.propTypes = import_propTypes.propTypes;
 //# sourceMappingURL=DSSkipTo.js.map

package/dist/cjs/skip-to/DSSkipTo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/skip-to/DSSkipTo.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useCallback } from 'react';\nimport { describe } from 'react-desc';\nimport { propTypes } from './propTypes';\nimport type { DSSkipToPropsT as Props } from './index.d';\nimport { StyledButton } from './styles';\n\nconst DSSkipTo = (props: Props): JSX.Element => {\n  const { goTo, message = 'Skip to main content' } = props;\n  const handleOnClick = useCallback(() => {\n    (document.getElementById(goTo) as HTMLElement).focus();\n  }, [goTo]);\n  return <StyledButton onClick={handleOnClick}>{message}</StyledButton>;\n};\n\nDSSkipTo.propTypes = propTypes;\nDSSkipTo.displayName = 'DSSkipTo';\nconst DSSkipToWithSchema = describe(DSSkipTo);\nDSSkipToWithSchema.propTypes = propTypes;\n\nexport { DSSkipTo, DSSkipToWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAmC;AACnC,wBAAyB;AACzB,uBAA0B;AAE1B,oBAA6B;AAE7B,MAAM,WAAW,CAAC,UAA8B;AAC9C,QAAM,EAAE,MAAM,UAAU,2BAA2B;AACnD,QAAM,gBAAgB,8BAAY,MAAM;AACtC,IAAC,SAAS,eAAe,IAAI,EAAkB,MAAM;AAAA,EACvD,GAAG,CAAC,IAAI,CAAC;AACT,SAAO,mDAAC;AAAA,IAAa,SAAS;AAAA,KAAgB,OAAQ;AACxD;AAEA,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,MAAM,qBAAqB,gCAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
+  "sourcesContent": ["import React, { useCallback } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { propTypes } from './propTypes';\nimport type { DSSkipToPropsT as Props } from './index.d';\nimport { StyledButton } from './styles';\n\nconst DSSkipTo = (props: Props): JSX.Element => {\n  const { goTo, message = 'Skip to main content' } = props;\n  const handleOnClick = useCallback(() => {\n    (document.getElementById(goTo) as HTMLElement).focus();\n  }, [goTo]);\n  return <StyledButton onClick={handleOnClick}>{message}</StyledButton>;\n};\n\nDSSkipTo.propTypes = propTypes;\nDSSkipTo.displayName = 'DSSkipTo';\nconst DSSkipToWithSchema = describe(DSSkipTo);\nDSSkipToWithSchema.propTypes = propTypes;\n\nexport { DSSkipTo, DSSkipToWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAmC;AACnC,0BAAyB;AACzB,uBAA0B;AAE1B,oBAA6B;AAE7B,MAAM,WAAW,CAAC,UAA8B;AAC9C,QAAM,EAAE,MAAM,UAAU,2BAA2B;AACnD,QAAM,gBAAgB,8BAAY,MAAM;AACtC,IAAC,SAAS,eAAe,IAAI,EAAkB,MAAM;AAAA,EACvD,GAAG,CAAC,IAAI,CAAC;AACT,SAAO,mDAAC;AAAA,IAAa,SAAS;AAAA,KAAgB,OAAQ;AACxD;AAEA,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,MAAM,qBAAqB,kCAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
   "names": []
 }

package/dist/cjs/skip-to/propTypes.js

@@ -24,9 +24,9 @@ __export(propTypes_exports, {
 });
 module.exports = __toCommonJS(propTypes_exports);
 var React = __toESM(require("react"));
-var import_react_desc = require("react-desc");
+var import_ds_utilities = require("@elliemae/ds-utilities");
 const propTypes = {
-  goTo: import_react_desc.PropTypes.string.isRequired.description("String containing content's id that you want to go."),
-  message: import_react_desc.PropTypes.string.description("Message for the Skip To component, default is 'Skip to main content'.")
+  goTo: import_ds_utilities.PropTypes.string.isRequired.description("String containing content's id that you want to go."),
+  message: import_ds_utilities.PropTypes.string.description("Message for the Skip To component, default is 'Skip to main content'.")
 };
 //# sourceMappingURL=propTypes.js.map

package/dist/cjs/skip-to/propTypes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/skip-to/propTypes.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { PropTypes } from 'react-desc';\n\nexport const propTypes = {\n  goTo: PropTypes.string.isRequired.description(\"String containing content's id that you want to go.\"),\n  message: PropTypes.string.description(\"Message for the Skip To component, default is 'Skip to main content'.\"),\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,OAAO,WAAW,YAAY,qDAAqD;AAAA,EACnG,SAAS,4BAAU,OAAO,YAAY,uEAAuE;AAC/G;",
+  "sourcesContent": ["import { PropTypes } from '@elliemae/ds-utilities';\n\nexport const propTypes = {\n  goTo: PropTypes.string.isRequired.description(\"String containing content's id that you want to go.\"),\n  message: PropTypes.string.description(\"Message for the Skip To component, default is 'Skip to main content'.\"),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA0B;AAEnB,MAAM,YAAY;AAAA,EACvB,MAAM,8BAAU,OAAO,WAAW,YAAY,qDAAqD;AAAA,EACnG,SAAS,8BAAU,OAAO,YAAY,uEAAuE;AAC/G;",
   "names": []
 }

package/dist/cjs/skip-to/styles.js

@@ -24,8 +24,8 @@ __export(styles_exports, {
 });
 module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-const StyledButton = import_styled_components.default.button`
+var import_ds_system = require("@elliemae/ds-system");
+const StyledButton = import_ds_system.styled.button`
   left: -999px;
   outline: none;
   position: absolute;

package/dist/cjs/skip-to/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/skip-to/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import styled from 'styled-components';\n\nexport const StyledButton = styled.button`\n  left: -999px;\n  outline: none;\n  position: absolute;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  z-index: -999;\n  &:focus,\n  &:active {\n    color: ${({ theme }) => theme.colors.brand[600]};\n    background-color: ${({ theme }) => theme.colors.neutral['000']};\n    text-decoration: underline;\n    left: 0;\n    top: 0;\n    height: auto;\n    cursor: pointer;\n    width: fit-content;\n    padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xxs}`};\n    border-radius: 2px;\n    border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    text-align: center;\n    z-index: 999;\n    overflow: auto;\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AAEZ,MAAM,eAAe,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWtB,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA,wBACvB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAO7C,CAAC,EAAE,YAAY,GAAG,MAAM,MAAM,QAAQ,MAAM,MAAM;AAAA;AAAA,wBAEzC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\nexport const StyledButton = styled.button`\n  left: -999px;\n  outline: none;\n  position: absolute;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  z-index: -999;\n  &:focus,\n  &:active {\n    color: ${({ theme }) => theme.colors.brand[600]};\n    background-color: ${({ theme }) => theme.colors.neutral['000']};\n    text-decoration: underline;\n    left: 0;\n    top: 0;\n    height: auto;\n    cursor: pointer;\n    width: fit-content;\n    padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xxs}`};\n    border-radius: 2px;\n    border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    text-align: center;\n    z-index: 999;\n    overflow: auto;\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEhB,MAAM,eAAe,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWtB,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA,wBACvB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAO7C,CAAC,EAAE,YAAY,GAAG,MAAM,MAAM,QAAQ,MAAM,MAAM;AAAA;AAAA,wBAEzC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/live-region/DSLiveRegion.js

@@ -5,7 +5,7 @@ import { describe } from "@elliemae/ds-utilities";
 import { StyledContainer } from "./styles";
 import { propTypes } from "./propTypes";
 const DSLiveRegion = memo((props) => {
-  const [text, setText] = useState("");
+  const [text, setText] = useState(" ");
   useEffect(() => {
     if (props.methods && props.methods.current) {
       props.methods.current.read = setText;
@@ -15,8 +15,8 @@ const DSLiveRegion = memo((props) => {
     return null;
   return ReactDOM.createPortal(/* @__PURE__ */ React2.createElement(StyledContainer, {
     "aria-atomic": true,
-    id: props["id"],
-    role: props["role"],
+    id: props.id,
+    role: props.role,
     "aria-live": props["aria-live"] || "polite"
   }, text), props.portal?.current || document.body);
 });

package/dist/esm/live-region/DSLiveRegion.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/live-region/DSLiveRegion.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import ReactDOM from 'react-dom';\nimport React, { memo, useEffect, useState } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { StyledContainer } from './styles';\nimport { propTypes } from './propTypes';\nimport type { DSLiveRegionT } from './propTypes';\n\nconst DSLiveRegion = memo((props: DSLiveRegionT.Props): JSX.Element | null => {\n  const [text, setText] = useState('');\n\n  useEffect(() => {\n    if (props.methods && props.methods.current) {\n      props.methods.current.read = setText;\n    }\n  }, [props.methods]);\n\n  if (text === '') return null;\n\n  return ReactDOM.createPortal(\n    <StyledContainer aria-atomic id={props['id']} role={props['role']} aria-live={props['aria-live'] || 'polite'}>\n      {text}\n    </StyledContainer>,\n    props.portal?.current || document.body,\n  );\n});\n\nDSLiveRegion.propTypes = propTypes;\nDSLiveRegion.displayName = \"DSLiveRegion\";\nconst DSLiveRegionWithSchema = describe(DSLiveRegion);\nDSLiveRegionWithSchema.propTypes = propTypes;\n\nexport { DSLiveRegion, DSLiveRegionWithSchema };\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAGA,MAAM,eAAe,KAAK,CAAC,UAAmD;AAC5E,QAAM,CAAC,MAAM,WAAW,SAAS,EAAE;AAEnC,YAAU,MAAM;AACd,QAAI,MAAM,WAAW,MAAM,QAAQ,SAAS;AAC1C,YAAM,QAAQ,QAAQ,OAAO;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,MAAI,SAAS;AAAI,WAAO;AAExB,SAAO,SAAS,aACd,qCAAC;AAAA,IAAgB,eAAW;AAAA,IAAC,IAAI,MAAM;AAAA,IAAO,MAAM,MAAM;AAAA,IAAS,aAAW,MAAM,gBAAgB;AAAA,KACjG,IACH,GACA,MAAM,QAAQ,WAAW,SAAS,IACpC;AACF,CAAC;AAED,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import ReactDOM from 'react-dom';\nimport React, { memo, useEffect, useState } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { StyledContainer } from './styles';\nimport { propTypes } from './propTypes';\nimport type { DSLiveRegionT } from './propTypes';\n\nconst DSLiveRegion = memo((props: DSLiveRegionT.Props): JSX.Element | null => {\n  const [text, setText] = useState(' ');\n\n  useEffect(() => {\n    if (props.methods && props.methods.current) {\n      props.methods.current.read = setText;\n    }\n  }, [props.methods]);\n\n  if (text === '') return null;\n\n  return ReactDOM.createPortal(\n    <StyledContainer aria-atomic id={props.id} role={props.role} aria-live={props['aria-live'] || 'polite'}>\n      {text}\n    </StyledContainer>,\n    props.portal?.current || document.body,\n  );\n});\n\nDSLiveRegion.propTypes = propTypes;\nDSLiveRegion.displayName = 'DSLiveRegion';\nconst DSLiveRegionWithSchema = describe(DSLiveRegion);\nDSLiveRegionWithSchema.propTypes = propTypes;\n\nexport { DSLiveRegion, DSLiveRegionWithSchema };\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAGA,MAAM,eAAe,KAAK,CAAC,UAAmD;AAC5E,QAAM,CAAC,MAAM,WAAW,SAAS,GAAG;AAEpC,YAAU,MAAM;AACd,QAAI,MAAM,WAAW,MAAM,QAAQ,SAAS;AAC1C,YAAM,QAAQ,QAAQ,OAAO;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,MAAI,SAAS;AAAI,WAAO;AAExB,SAAO,SAAS,aACd,qCAAC;AAAA,IAAgB,eAAW;AAAA,IAAC,IAAI,MAAM;AAAA,IAAI,MAAM,MAAM;AAAA,IAAM,aAAW,MAAM,gBAAgB;AAAA,KAC3F,IACH,GACA,MAAM,QAAQ,WAAW,SAAS,IACpC;AACF,CAAC;AAED,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
   "names": []
 }

package/dist/esm/live-region/index.js

@@ -1,3 +1,3 @@
 import * as React from "react";
-export * from "./DSLiveRegion";
+export * from "./useLiveRegion";
 //# sourceMappingURL=index.js.map

package/dist/esm/live-region/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/live-region/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSLiveRegion';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './useLiveRegion';\n"],
   "mappings": "AAAA;ACAA;",
   "names": []
 }

package/dist/esm/live-region/propTypes.js

@@ -1,12 +1,5 @@
 import * as React from "react";
-import { PropTypes } from "@elliemae/ds-utilities";
-const propTypes = {
-  methods: PropTypes.object.description("Ref Object."),
-  portal: PropTypes.node.description("Sets a custom portal").defaultValue("Body Element."),
-  ["aria-live"]: PropTypes.oneOf(["assertive", "polite", "off"]).description("Selects your aria live mode."),
-  role: PropTypes.oneOf(["log", "status", "alert", "progressbar", "marquee", "timer"]).description("Selects your specific role."),
-  id: PropTypes.string.description("Unique id for the Live Region.")
-};
+const propTypes = {};
 export {
   propTypes
 };

package/dist/esm/live-region/propTypes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/live-region/propTypes.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-utilities';\nimport type React from 'react';\n\nexport declare module DSLiveRegionT {\n  interface Methods {\n    read: React.Dispatch<React.SetStateAction<string>>;\n  }\n  export interface Props {\n    methods?: React.MutableRefObject<Methods>;\n    portal?: React.MutableRefObject<HTMLElement>;\n    ['aria-live']?: 'off' | 'assertive' | 'polite';\n    role?: 'log' | 'status' | 'alert' | 'progressbar' | 'marquee' | 'timer';\n    id?: string;\n  }\n}\n\nexport const propTypes = {\n  methods: PropTypes.object.description('Ref Object.'),\n  portal: PropTypes.node.description('Sets a custom portal').defaultValue('Body Element.'),\n  ['aria-live']: PropTypes.oneOf(['assertive', 'polite', 'off']).description('Selects your aria live mode.'),\n  role: PropTypes.oneOf(['log', 'status', 'alert', 'progressbar', 'marquee', 'timer']).description(\n    'Selects your specific role.',\n  ),\n  id: PropTypes.string.description('Unique id for the Live Region.'),\n};\n"],
-  "mappings": "AAAA;ACAA;AAgBO,MAAM,YAAY;AAAA,EACvB,SAAS,UAAU,OAAO,YAAY,aAAa;AAAA,EACnD,QAAQ,UAAU,KAAK,YAAY,sBAAsB,EAAE,aAAa,eAAe;AAAA,GACtF,cAAc,UAAU,MAAM,CAAC,aAAa,UAAU,KAAK,CAAC,EAAE,YAAY,8BAA8B;AAAA,EACzG,MAAM,UAAU,MAAM,CAAC,OAAO,UAAU,SAAS,eAAe,WAAW,OAAO,CAAC,EAAE,YACnF,6BACF;AAAA,EACA,IAAI,UAAU,OAAO,YAAY,gCAAgC;AACnE;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\n\nexport declare namespace UseLiveRegionT {\n  export interface Props {\n    id?: string;\n    portal?: React.MutableRefObject<HTMLElement>;\n  }\n}\n\nexport const propTypes = {};\n"],
+  "mappings": "AAAA;ACSO,MAAM,YAAY,CAAC;",
   "names": []
 }

package/dist/esm/live-region/useLiveRegion.js

@@ -0,0 +1,71 @@
+import * as React from "react";
+import ReactDOM from "react-dom";
+import React2, { memo, useEffect, useState, useCallback, useRef, useMemo } from "react";
+import { describe } from "@elliemae/ds-utilities";
+import { uid } from "uid";
+import { StyledContainer } from "./styles";
+import { propTypes } from "./propTypes";
+const DSLiveRegion = memo((props) => {
+  const [internalMessage, setInternalMessage] = useState("");
+  const [unsafe_emulateAssertiveNVDA, setUnsafe_emulateAssertiveNVDA] = useState(false);
+  const [role, setRole] = useState(void 0);
+  const [ariaLive, setAriaLive] = useState("polite");
+  const { id, portal } = props || {};
+  const reset = useCallback(() => {
+    setInternalMessage("");
+    setUnsafe_emulateAssertiveNVDA(false);
+    setAriaLive("polite");
+    setRole(void 0);
+  }, []);
+  const configure = useCallback((message, options) => {
+    reset();
+    setTimeout(() => {
+      if (options?.unsafe_emulateAssertiveNVDA)
+        setUnsafe_emulateAssertiveNVDA(true);
+      setTimeout(() => {
+        if (options?.assertive || options?.unsafe_emulateAssertiveNVDA)
+          setAriaLive("assertive");
+        if (options?.unsafe_emulateAssertiveNVDA) {
+          setRole("alert");
+          setUnsafe_emulateAssertiveNVDA(false);
+        }
+        setInternalMessage(message);
+      });
+    });
+  }, [reset]);
+  useEffect(() => {
+    if (props.methods) {
+      props.methods.current.read = configure;
+    }
+  }, [configure, props.methods]);
+  if (unsafe_emulateAssertiveNVDA)
+    return null;
+  return ReactDOM.createPortal(/* @__PURE__ */ React2.createElement(StyledContainer, {
+    "aria-atomic": true,
+    id,
+    role,
+    "aria-live": ariaLive
+  }, internalMessage), portal?.current || document.body);
+});
+const useLiveRegion = (props) => {
+  const methods = useRef({});
+  const { id, portal } = props || {};
+  const instanceUID = useMemo(() => `ds-live-region-${uid(5)}`, []);
+  const read = useCallback((message, options) => methods.current.read?.(message, options), []);
+  return useMemo(() => ({
+    LiveRegion: () => /* @__PURE__ */ React2.createElement(DSLiveRegion, {
+      methods,
+      id: instanceUID || id,
+      portal
+    }),
+    read
+  }), [id, instanceUID, portal, read]);
+};
+useLiveRegion.displayName = "useLiveRegion";
+const UseLiveRegionWithSchema = describe(useLiveRegion);
+UseLiveRegionWithSchema.propTypes = propTypes;
+export {
+  UseLiveRegionWithSchema,
+  useLiveRegion
+};
+//# sourceMappingURL=useLiveRegion.js.map

package/dist/esm/live-region/useLiveRegion.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/live-region/useLiveRegion.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import ReactDOM from 'react-dom';\nimport React, { memo, useEffect, useState, useCallback, useRef, useMemo } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { StyledContainer } from './styles';\nimport { propTypes } from './propTypes';\nimport type { UseLiveRegionT } from './propTypes';\n\ninterface Options {\n  assertive?: boolean;\n  unsafe_emulateAssertiveNVDA?: boolean;\n}\ninterface Methods {\n  read?: (message: string, options: Options) => void;\n}\nexport interface Props {\n  methods?: React.MutableRefObject<Methods>;\n  id?: string;\n  portal?: React.MutableRefObject<HTMLElement>;\n}\n\nconst DSLiveRegion = memo((props: Props): JSX.Element | null => {\n  const [internalMessage, setInternalMessage] = useState<string>('');\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  const [unsafe_emulateAssertiveNVDA, setUnsafe_emulateAssertiveNVDA] = useState(false);\n  const [role, setRole] = useState<undefined | string>(undefined);\n  const [ariaLive, setAriaLive] = useState('polite');\n  const { id, portal } = props || {};\n\n  const reset = useCallback(() => {\n    setInternalMessage('');\n    setUnsafe_emulateAssertiveNVDA(false);\n    setAriaLive('polite');\n    setRole(undefined);\n  }, []);\n\n  const configure = useCallback(\n    (message: string, options: Options) => {\n      reset();\n      setTimeout(() => {\n        if (options?.unsafe_emulateAssertiveNVDA) setUnsafe_emulateAssertiveNVDA(true);\n        // eslint-disable-next-line max-nested-callbacks\n        setTimeout(() => {\n          if (options?.assertive || options?.unsafe_emulateAssertiveNVDA) setAriaLive('assertive');\n          if (options?.unsafe_emulateAssertiveNVDA) {\n            setRole('alert');\n            setUnsafe_emulateAssertiveNVDA(false);\n          }\n          setInternalMessage(message);\n        });\n      });\n    },\n    [reset],\n  );\n\n  useEffect(() => {\n    if (props.methods) {\n      props.methods.current.read = configure;\n    }\n  }, [configure, props.methods]);\n\n  if (unsafe_emulateAssertiveNVDA) return null;\n\n  return ReactDOM.createPortal(\n    <StyledContainer aria-atomic id={id} role={role} aria-live={ariaLive}>\n      {internalMessage}\n    </StyledContainer>,\n    portal?.current || document.body,\n  );\n});\n\nconst useLiveRegion = (props: UseLiveRegionT.Props) => {\n  const methods = useRef<Methods>({});\n\n  const { id, portal } = props || {};\n\n  const instanceUID = useMemo(() => `ds-live-region-${uid(5)}`, []);\n\n  const read = useCallback((message: string, options: Options) => methods.current.read?.(message, options), []);\n\n  return useMemo(\n    () => ({\n      LiveRegion: () => <DSLiveRegion methods={methods} id={instanceUID || id} portal={portal} />,\n      read,\n    }),\n    [id, instanceUID, portal, read],\n  );\n};\n\nuseLiveRegion.displayName = 'useLiveRegion';\nconst UseLiveRegionWithSchema = describe(useLiveRegion);\nUseLiveRegionWithSchema.propTypes = propTypes;\nexport { useLiveRegion, UseLiveRegionWithSchema };\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAgBA,MAAM,eAAe,KAAK,CAAC,UAAqC;AAC9D,QAAM,CAAC,iBAAiB,sBAAsB,SAAiB,EAAE;AAEjE,QAAM,CAAC,6BAA6B,kCAAkC,SAAS,KAAK;AACpF,QAAM,CAAC,MAAM,WAAW,SAA6B,MAAS;AAC9D,QAAM,CAAC,UAAU,eAAe,SAAS,QAAQ;AACjD,QAAM,EAAE,IAAI,WAAW,SAAS,CAAC;AAEjC,QAAM,QAAQ,YAAY,MAAM;AAC9B,uBAAmB,EAAE;AACrB,mCAA+B,KAAK;AACpC,gBAAY,QAAQ;AACpB,YAAQ,MAAS;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,YAAY,YAChB,CAAC,SAAiB,YAAqB;AACrC,UAAM;AACN,eAAW,MAAM;AACf,UAAI,SAAS;AAA6B,uCAA+B,IAAI;AAE7E,iBAAW,MAAM;AACf,YAAI,SAAS,aAAa,SAAS;AAA6B,sBAAY,WAAW;AACvF,YAAI,SAAS,6BAA6B;AACxC,kBAAQ,OAAO;AACf,yCAA+B,KAAK;AAAA,QACtC;AACA,2BAAmB,OAAO;AAAA,MAC5B,CAAC;AAAA,IACH,CAAC;AAAA,EACH,GACA,CAAC,KAAK,CACR;AAEA,YAAU,MAAM;AACd,QAAI,MAAM,SAAS;AACjB,YAAM,QAAQ,QAAQ,OAAO;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,WAAW,MAAM,OAAO,CAAC;AAE7B,MAAI;AAA6B,WAAO;AAExC,SAAO,SAAS,aACd,qCAAC;AAAA,IAAgB,eAAW;AAAA,IAAC;AAAA,IAAQ;AAAA,IAAY,aAAW;AAAA,KACzD,eACH,GACA,QAAQ,WAAW,SAAS,IAC9B;AACF,CAAC;AAED,MAAM,gBAAgB,CAAC,UAAgC;AACrD,QAAM,UAAU,OAAgB,CAAC,CAAC;AAElC,QAAM,EAAE,IAAI,WAAW,SAAS,CAAC;AAEjC,QAAM,cAAc,QAAQ,MAAM,kBAAkB,IAAI,CAAC,KAAK,CAAC,CAAC;AAEhE,QAAM,OAAO,YAAY,CAAC,SAAiB,YAAqB,QAAQ,QAAQ,OAAO,SAAS,OAAO,GAAG,CAAC,CAAC;AAE5G,SAAO,QACL,MAAO;AAAA,IACL,YAAY,MAAM,qCAAC;AAAA,MAAa;AAAA,MAAkB,IAAI,eAAe;AAAA,MAAI;AAAA,KAAgB;AAAA,IACzF;AAAA,EACF,IACA,CAAC,IAAI,aAAa,QAAQ,IAAI,CAChC;AACF;AAEA,cAAc,cAAc;AAC5B,MAAM,0BAA0B,SAAS,aAAa;AACtD,wBAAwB,YAAY;",
+  "names": []
+}

package/dist/esm/skip-to/DSSkipTo.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import React2, { useCallback } from "react";
-import { describe } from "react-desc";
+import { describe } from "@elliemae/ds-utilities";
 import { propTypes } from "./propTypes";
 import { StyledButton } from "./styles";
 const DSSkipTo = (props) => {

package/dist/esm/skip-to/DSSkipTo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/skip-to/DSSkipTo.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { describe } from 'react-desc';\nimport { propTypes } from './propTypes';\nimport type { DSSkipToPropsT as Props } from './index.d';\nimport { StyledButton } from './styles';\n\nconst DSSkipTo = (props: Props): JSX.Element => {\n  const { goTo, message = 'Skip to main content' } = props;\n  const handleOnClick = useCallback(() => {\n    (document.getElementById(goTo) as HTMLElement).focus();\n  }, [goTo]);\n  return <StyledButton onClick={handleOnClick}>{message}</StyledButton>;\n};\n\nDSSkipTo.propTypes = propTypes;\nDSSkipTo.displayName = 'DSSkipTo';\nconst DSSkipToWithSchema = describe(DSSkipTo);\nDSSkipToWithSchema.propTypes = propTypes;\n\nexport { DSSkipTo, DSSkipToWithSchema };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { propTypes } from './propTypes';\nimport type { DSSkipToPropsT as Props } from './index.d';\nimport { StyledButton } from './styles';\n\nconst DSSkipTo = (props: Props): JSX.Element => {\n  const { goTo, message = 'Skip to main content' } = props;\n  const handleOnClick = useCallback(() => {\n    (document.getElementById(goTo) as HTMLElement).focus();\n  }, [goTo]);\n  return <StyledButton onClick={handleOnClick}>{message}</StyledButton>;\n};\n\nDSSkipTo.propTypes = propTypes;\nDSSkipTo.displayName = 'DSSkipTo';\nconst DSSkipToWithSchema = describe(DSSkipTo);\nDSSkipToWithSchema.propTypes = propTypes;\n\nexport { DSSkipTo, DSSkipToWithSchema };\n"],
   "mappings": "AAAA;ACAA;AACA;AACA;AAEA;AAEA,MAAM,WAAW,CAAC,UAA8B;AAC9C,QAAM,EAAE,MAAM,UAAU,2BAA2B;AACnD,QAAM,gBAAgB,YAAY,MAAM;AACtC,IAAC,SAAS,eAAe,IAAI,EAAkB,MAAM;AAAA,EACvD,GAAG,CAAC,IAAI,CAAC;AACT,SAAO,qCAAC;AAAA,IAAa,SAAS;AAAA,KAAgB,OAAQ;AACxD;AAEA,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
   "names": []
 }

package/dist/esm/skip-to/propTypes.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { PropTypes } from "react-desc";
+import { PropTypes } from "@elliemae/ds-utilities";
 const propTypes = {
   goTo: PropTypes.string.isRequired.description("String containing content's id that you want to go."),
   message: PropTypes.string.description("Message for the Skip To component, default is 'Skip to main content'.")

package/dist/esm/skip-to/propTypes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/skip-to/propTypes.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from 'react-desc';\n\nexport const propTypes = {\n  goTo: PropTypes.string.isRequired.description(\"String containing content's id that you want to go.\"),\n  message: PropTypes.string.description(\"Message for the Skip To component, default is 'Skip to main content'.\"),\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-utilities';\n\nexport const propTypes = {\n  goTo: PropTypes.string.isRequired.description(\"String containing content's id that you want to go.\"),\n  message: PropTypes.string.description(\"Message for the Skip To component, default is 'Skip to main content'.\"),\n};\n"],
   "mappings": "AAAA;ACAA;AAEO,MAAM,YAAY;AAAA,EACvB,MAAM,UAAU,OAAO,WAAW,YAAY,qDAAqD;AAAA,EACnG,SAAS,UAAU,OAAO,YAAY,uEAAuE;AAC/G;",
   "names": []
 }

package/dist/esm/skip-to/styles.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import styled from "styled-components";
+import { styled } from "@elliemae/ds-system";
 const StyledButton = styled.button`
   left: -999px;
   outline: none;

package/dist/esm/skip-to/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/skip-to/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\n\nexport const StyledButton = styled.button`\n  left: -999px;\n  outline: none;\n  position: absolute;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  z-index: -999;\n  &:focus,\n  &:active {\n    color: ${({ theme }) => theme.colors.brand[600]};\n    background-color: ${({ theme }) => theme.colors.neutral['000']};\n    text-decoration: underline;\n    left: 0;\n    top: 0;\n    height: auto;\n    cursor: pointer;\n    width: fit-content;\n    padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xxs}`};\n    border-radius: 2px;\n    border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    text-align: center;\n    z-index: 999;\n    overflow: auto;\n  }\n`;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\n\nexport const StyledButton = styled.button`\n  left: -999px;\n  outline: none;\n  position: absolute;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  z-index: -999;\n  &:focus,\n  &:active {\n    color: ${({ theme }) => theme.colors.brand[600]};\n    background-color: ${({ theme }) => theme.colors.neutral['000']};\n    text-decoration: underline;\n    left: 0;\n    top: 0;\n    height: auto;\n    cursor: pointer;\n    width: fit-content;\n    padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xxs}`};\n    border-radius: 2px;\n    border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    text-align: center;\n    z-index: 999;\n    overflow: auto;\n  }\n`;\n"],
   "mappings": "AAAA;ACAA;AAEO,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWtB,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA,wBACvB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAO7C,CAAC,EAAE,YAAY,GAAG,MAAM,MAAM,QAAQ,MAAM,MAAM;AAAA;AAAA,wBAEzC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-accessibility",
-  "version": "3.1.0-next.2",
+  "version": "3.1.0-next.20",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Accessibility",
   "files": [
@@ -50,26 +50,28 @@
     "reportFile": "tests.xml",
     "indent": 4
   },
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
-    "test": "node ../../scripts/testing/test.mjs",
-    "lint": "node ../../scripts/lint.mjs",
-    "dts": "node ../../scripts/dts.mjs",
-    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
-  },
   "dependencies": {
-    "@elliemae/ds-utilities": "3.1.0-next.2"
+    "@elliemae/ds-system": "3.1.0-next.20",
+    "@elliemae/ds-utilities": "3.1.0-next.20"
   },
   "devDependencies": {
-    "styled-components": "~5.3.3"
+    "styled-components": "~5.3.5"
   },
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.3"
+    "styled-components": "^5.3.5"
   },
   "publishConfig": {
     "access": "public",
     "typeSafety": false
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
+    "test": "node ../../scripts/testing/test.mjs",
+    "lint": "node ../../scripts/lint.mjs",
+    "dts": "node ../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
+    "checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
   }
-}
+}