@elliemae/ds-form-toggle 3.1.5-rc.9 → 3.2.0-rc.1

package/dist/cjs/ControlledToggle.js

@@ -1,6 +1,8 @@
 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;
@@ -18,6 +20,19 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -45,25 +60,16 @@ var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_propTypes = require("./propTypes");
 var import_styles = require("./styles");
 var import_addTooltipOnReadOnly = require("./utils/addTooltipOnReadOnly");
-const DSControlledToggle = ({
-  labelOn,
-  labelOff,
-  name,
-  value,
-  checked,
-  onChange,
-  size,
-  readOnly,
-  disabled,
-  containerProps,
-  id
-}) => {
+const DSControlledToggle = (props) => {
+  const propsWithDefaults = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_propTypes.defaultProps);
+  (0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefaults, import_propTypes.propTypes);
+  const _a = propsWithDefaults, { labelOn, labelOff, value, checked, onChange, size, readOnly, active, disabled, containerProps, id } = _a, rest = __objRest(_a, ["labelOn", "labelOff", "value", "checked", "onChange", "size", "readOnly", "active", "disabled", "containerProps", "id"]);
   const [isLongerTextRendering, setIsLongerTextRendering] = (0, import_react.useState)(false);
   const [width, setWidth] = (0, import_react.useState)(0);
   const labelTextRef = (0, import_react.useRef)(null);
   const widthTextRef = (0, import_react.useRef)(null);
   const longerText = (0, import_react.useMemo)(() => labelOn.length > labelOff.length ? labelOn : labelOff, [labelOff, labelOn]);
-  const instanceUID = (0, import_react.useMemo)(() => (0, import_uid.uid)(5), []);
+  const instanceUID = (0, import_react.useMemo)(() => id || (0, import_uid.uid)(5), [id]);
   (0, import_react.useEffect)(() => {
     if (labelTextRef.current) {
       setIsLongerTextRendering(labelTextRef.current.innerText === longerText);
@@ -77,33 +83,30 @@ const DSControlledToggle = ({
   const handleOnChange = (0, import_react.useCallback)(() => {
     if (disabled || readOnly)
       return;
-    onChange();
-  }, [disabled, readOnly, onChange]);
-  const handleKeyDown = (0, import_react.useCallback)((e) => {
-    if (disabled || readOnly) {
-      e.preventDefault();
-    }
-    if (e.key === "Enter") {
-      e.preventDefault();
+    if (onChange)
       onChange();
-    }
-  }, [disabled, onChange, readOnly]);
-  return (0, import_addTooltipOnReadOnly.addTooltipOnReadOnly)(/* @__PURE__ */ import_react.default.createElement(import_styles.StyledContainer, __spreadValues({
+  }, [disabled, readOnly, onChange]);
+  const globalAttrs = (0, import_ds_utilities.useGetGlobalAttributes)(rest, { onClick: handleOnChange });
+  const xStyledProps = (0, import_ds_utilities.useGetXstyledProps)(rest);
+  return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledContainer, __spreadProps(__spreadValues(__spreadValues({
     size,
     "data-testid": "ds-controlled-toggle"
-  }, containerProps), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledInput, {
-    type: "checkbox",
-    name,
+  }, containerProps), xStyledProps), {
+    disabled
+  }), (0, import_addTooltipOnReadOnly.addTooltipOnReadOnly)(/* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledButton, __spreadValues({
+    role: "switch",
     value,
-    checked,
+    type: "button",
     "data-testid": "ds-controlled-toggle-checkbox",
-    id: id || instanceUID,
+    id: instanceUID,
+    "aria-readonly": readOnly,
     "aria-disabled": disabled,
     "aria-checked": checked,
-    tabIndex: 0,
-    onChange: handleOnChange,
-    onKeyDown: handleKeyDown
-  }), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledLabel, {
+    tabIndex: disabled ? -1 : 0,
+    onClick: handleOnChange,
+    readOnly,
+    disabled
+  }, globalAttrs)), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledLabel, {
     checked,
     size,
     width
@@ -111,6 +114,7 @@ const DSControlledToggle = ({
     checked,
     size,
     readOnly,
+    active,
     disabled,
     htmlFor: id ? void 0 : instanceUID,
     as: id ? "p" : "label"
@@ -120,6 +124,7 @@ const DSControlledToggle = ({
     readOnly,
     disabled
   }), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledText, {
+    "aria-hidden": "true",
     ref: labelTextRef,
     isLongerTextRendering,
     checked,
@@ -128,9 +133,8 @@ const DSControlledToggle = ({
   }, checked ? labelOn : labelOff))), /* @__PURE__ */ import_react.default.createElement(import_styles.SetLabelWidth, {
     size,
     ref: widthTextRef
-  }, longerText)), readOnly);
+  }, longerText)), readOnly));
 };
-DSControlledToggle.defaultProps = import_propTypes.defaultProps;
 DSControlledToggle.propTypes = import_propTypes.propTypes;
 DSControlledToggle.displayName = "DSControlledToggle";
 const DSControlledToggleWithSchema = (0, import_ds_utilities.describe)(DSControlledToggle);

package/dist/cjs/ControlledToggle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ControlledToggle.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react';\nimport { uid } from 'uid';\nimport { describe } from '@elliemae/ds-utilities';\nimport { propTypes, defaultProps, type DSControlledToggleT } from './propTypes';\nimport {\n  StyledContainer,\n  StyledInput,\n  StyledLabel,\n  StyledVisibleContent,\n  StyledCircle,\n  StyledText,\n  SetLabelWidth,\n} from './styles';\nimport { addTooltipOnReadOnly } from './utils/addTooltipOnReadOnly';\n\nconst DSControlledToggle = ({\n  labelOn,\n  labelOff,\n  name,\n  value,\n  checked,\n  onChange,\n  size,\n  readOnly,\n  disabled,\n  containerProps,\n  id,\n}: DSControlledToggleT.Props): JSX.Element => {\n  const [isLongerTextRendering, setIsLongerTextRendering] = useState<boolean>(false);\n  const [width, setWidth] = useState<number>(0);\n  const labelTextRef = useRef<HTMLDivElement | null>(null);\n  const widthTextRef = useRef<HTMLDivElement | null>(null);\n\n  const longerText = useMemo(() => (labelOn.length > labelOff.length ? labelOn : labelOff), [labelOff, labelOn]);\n\n  const instanceUID = useMemo(() => uid(5), []);\n\n  useEffect(() => {\n    if (labelTextRef.current) {\n      setIsLongerTextRendering(labelTextRef.current.innerText === longerText);\n    }\n  }, [labelTextRef, longerText, checked]);\n\n  useEffect(() => {\n    if (widthTextRef.current) {\n      setWidth(widthTextRef.current.clientWidth);\n    }\n  }, [widthTextRef]);\n\n  const handleOnChange = useCallback(() => {\n    if (disabled || readOnly) return;\n    onChange();\n  }, [disabled, readOnly, onChange]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (disabled || readOnly) {\n        e.preventDefault();\n      }\n      if (e.key === 'Enter') {\n        e.preventDefault();\n        onChange();\n      }\n    },\n    [disabled, onChange, readOnly],\n  );\n\n  return addTooltipOnReadOnly(\n    <StyledContainer size={size} data-testid=\"ds-controlled-toggle\" {...containerProps}>\n      <StyledInput\n        type=\"checkbox\"\n        name={name}\n        value={value}\n        checked={checked}\n        data-testid=\"ds-controlled-toggle-checkbox\"\n        id={id || instanceUID}\n        aria-disabled={disabled}\n        aria-checked={checked}\n        tabIndex={0}\n        onChange={handleOnChange}\n        onKeyDown={handleKeyDown}\n      />\n      <StyledLabel checked={checked} size={size} width={width}>\n        <StyledVisibleContent\n          checked={checked}\n          size={size}\n          readOnly={readOnly}\n          disabled={disabled}\n          htmlFor={id ? undefined : instanceUID}\n          as={id ? 'p' : 'label'}\n        >\n          <StyledCircle checked={checked} size={size} readOnly={readOnly} disabled={disabled} />\n          <StyledText\n            ref={labelTextRef}\n            isLongerTextRendering={isLongerTextRendering}\n            checked={checked}\n            size={size}\n            disabled={disabled}\n          >\n            {checked ? labelOn : labelOff}\n          </StyledText>\n        </StyledVisibleContent>\n      </StyledLabel>\n      <SetLabelWidth size={size} ref={widthTextRef}>\n        {longerText}\n      </SetLabelWidth>\n    </StyledContainer>,\n    readOnly,\n  );\n};\n\nDSControlledToggle.defaultProps = defaultProps;\nDSControlledToggle.propTypes = propTypes;\nDSControlledToggle.displayName = 'DSControlledToggle';\nconst DSControlledToggleWithSchema = describe(DSControlledToggle);\nDSControlledToggleWithSchema.propTypes = propTypes;\n\nexport { DSControlledToggle, DSControlledToggleWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyE;AACzE,iBAAoB;AACpB,0BAAyB;AACzB,uBAAkE;AAClE,oBAQO;AACP,kCAAqC;AAErC,MAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAC4C;AAC5C,QAAM,CAAC,uBAAuB,4BAA4B,2BAAkB,KAAK;AACjF,QAAM,CAAC,OAAO,YAAY,2BAAiB,CAAC;AAC5C,QAAM,eAAe,yBAA8B,IAAI;AACvD,QAAM,eAAe,yBAA8B,IAAI;AAEvD,QAAM,aAAa,0BAAQ,MAAO,QAAQ,SAAS,SAAS,SAAS,UAAU,UAAW,CAAC,UAAU,OAAO,CAAC;AAE7G,QAAM,cAAc,0BAAQ,MAAM,oBAAI,CAAC,GAAG,CAAC,CAAC;AAE5C,8BAAU,MAAM;AACd,QAAI,aAAa,SAAS;AACxB,+BAAyB,aAAa,QAAQ,cAAc,UAAU;AAAA,IACxE;AAAA,EACF,GAAG,CAAC,cAAc,YAAY,OAAO,CAAC;AAEtC,8BAAU,MAAM;AACd,QAAI,aAAa,SAAS;AACxB,eAAS,aAAa,QAAQ,WAAW;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,iBAAiB,8BAAY,MAAM;AACvC,QAAI,YAAY;AAAU;AAC1B,aAAS;AAAA,EACX,GAAG,CAAC,UAAU,UAAU,QAAQ,CAAC;AAEjC,QAAM,gBAAgB,8BACpB,CAAC,MAA2B;AAC1B,QAAI,YAAY,UAAU;AACxB,QAAE,eAAe;AAAA,IACnB;AACA,QAAI,EAAE,QAAQ,SAAS;AACrB,QAAE,eAAe;AACjB,eAAS;AAAA,IACX;AAAA,EACF,GACA,CAAC,UAAU,UAAU,QAAQ,CAC/B;AAEA,SAAO,sDACL,mDAAC;AAAA,IAAgB;AAAA,IAAY,eAAY;AAAA,KAA2B,iBAClE,mDAAC;AAAA,IACC,MAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ,IAAI,MAAM;AAAA,IACV,iBAAe;AAAA,IACf,gBAAc;AAAA,IACd,UAAU;AAAA,IACV,UAAU;AAAA,IACV,WAAW;AAAA,GACb,GACA,mDAAC;AAAA,IAAY;AAAA,IAAkB;AAAA,IAAY;AAAA,KACzC,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,KAAK,SAAY;AAAA,IAC1B,IAAI,KAAK,MAAM;AAAA,KAEf,mDAAC;AAAA,IAAa;AAAA,IAAkB;AAAA,IAAY;AAAA,IAAoB;AAAA,GAAoB,GACpF,mDAAC;AAAA,IACC,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,UAAU,UAAU,QACvB,CACF,CACF,GACA,mDAAC;AAAA,IAAc;AAAA,IAAY,KAAK;AAAA,KAC7B,UACH,CACF,GACA,QACF;AACF;AAEA,mBAAmB,eAAe;AAClC,mBAAmB,YAAY;AAC/B,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,kCAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
+  "sourcesContent": ["import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react';\nimport { uid } from 'uid';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useValidateTypescriptPropTypes,\n  useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport { propTypes, defaultProps, type DSControlledToggleT } from './propTypes';\nimport {\n  StyledContainer,\n  StyledButton,\n  StyledLabel,\n  StyledVisibleContent,\n  StyledCircle,\n  StyledText,\n  SetLabelWidth,\n} from './styles';\nimport { addTooltipOnReadOnly } from './utils/addTooltipOnReadOnly';\n\nconst DSControlledToggle = (props: DSControlledToggleT.Props): JSX.Element => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, propTypes);\n  const { labelOn, labelOff, value, checked, onChange, size, readOnly, active, disabled, containerProps, id, ...rest } =\n    propsWithDefaults;\n\n  const [isLongerTextRendering, setIsLongerTextRendering] = useState<boolean>(false);\n  const [width, setWidth] = useState<number>(0);\n  const labelTextRef = useRef<HTMLDivElement | null>(null);\n  const widthTextRef = useRef<HTMLDivElement | null>(null);\n\n  const longerText = useMemo(() => (labelOn.length > labelOff.length ? labelOn : labelOff), [labelOff, labelOn]);\n\n  const instanceUID = useMemo(() => id || uid(5), [id]);\n\n  useEffect(() => {\n    if (labelTextRef.current) {\n      setIsLongerTextRendering(labelTextRef.current.innerText === longerText);\n    }\n  }, [labelTextRef, longerText, checked]);\n\n  useEffect(() => {\n    if (widthTextRef.current) {\n      setWidth(widthTextRef.current.clientWidth);\n    }\n  }, [widthTextRef]);\n\n  const handleOnChange = useCallback(() => {\n    if (disabled || readOnly) return;\n    if (onChange) onChange();\n  }, [disabled, readOnly, onChange]);\n\n  const globalAttrs = useGetGlobalAttributes(rest, { onClick: handleOnChange });\n  const xStyledProps = useGetXstyledProps(rest);\n\n  return (\n    <StyledContainer\n      size={size}\n      data-testid=\"ds-controlled-toggle\"\n      {...containerProps}\n      {...xStyledProps}\n      disabled={disabled}\n    >\n      {addTooltipOnReadOnly(\n        <>\n          <StyledButton\n            role=\"switch\"\n            value={value}\n            type=\"button\"\n            data-testid=\"ds-controlled-toggle-checkbox\"\n            id={instanceUID}\n            aria-readonly={readOnly}\n            aria-disabled={disabled}\n            aria-checked={checked}\n            tabIndex={disabled ? -1 : 0}\n            onClick={handleOnChange}\n            readOnly={readOnly}\n            disabled={disabled}\n            {...globalAttrs}\n          />\n          <StyledLabel checked={checked} size={size} width={width}>\n            <StyledVisibleContent\n              checked={checked}\n              size={size}\n              readOnly={readOnly}\n              active={active}\n              disabled={disabled}\n              htmlFor={id ? undefined : instanceUID}\n              as={id ? 'p' : 'label'}\n            >\n              <StyledCircle checked={checked} size={size} readOnly={readOnly} disabled={disabled} />\n              <StyledText\n                aria-hidden=\"true\"\n                ref={labelTextRef}\n                isLongerTextRendering={isLongerTextRendering}\n                checked={checked}\n                size={size}\n                disabled={disabled}\n              >\n                {checked ? labelOn : labelOff}\n              </StyledText>\n            </StyledVisibleContent>\n          </StyledLabel>\n          <SetLabelWidth size={size} ref={widthTextRef}>\n            {longerText}\n          </SetLabelWidth>\n        </>,\n        readOnly,\n      )}\n    </StyledContainer>\n  );\n};\n\nDSControlledToggle.propTypes = propTypes;\nDSControlledToggle.displayName = 'DSControlledToggle';\nconst DSControlledToggleWithSchema = describe(DSControlledToggle);\nDSControlledToggleWithSchema.propTypes = propTypes;\n\nexport { DSControlledToggle, DSControlledToggleWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyE;AACzE,iBAAoB;AACpB,0BAMO;AACP,uBAAkE;AAClE,oBAQO;AACP,kCAAqC;AAErC,MAAM,qBAAqB,CAAC,UAAkD;AAC5E,QAAM,oBAAoB,sDAA6B,OAAO,6BAAY;AAC1E,0DAA+B,mBAAmB,0BAAS;AAC3D,QACE,wBADM,WAAS,UAAU,OAAO,SAAS,UAAU,MAAM,UAAU,QAAQ,UAAU,gBAAgB,OACrG,IAD4G,iBAC5G,IAD4G,CAAtG,WAAS,YAAU,SAAO,WAAS,YAAU,QAAM,YAAU,UAAQ,YAAU,kBAAgB;AAGvG,QAAM,CAAC,uBAAuB,4BAA4B,2BAAkB,KAAK;AACjF,QAAM,CAAC,OAAO,YAAY,2BAAiB,CAAC;AAC5C,QAAM,eAAe,yBAA8B,IAAI;AACvD,QAAM,eAAe,yBAA8B,IAAI;AAEvD,QAAM,aAAa,0BAAQ,MAAO,QAAQ,SAAS,SAAS,SAAS,UAAU,UAAW,CAAC,UAAU,OAAO,CAAC;AAE7G,QAAM,cAAc,0BAAQ,MAAM,MAAM,oBAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAEpD,8BAAU,MAAM;AACd,QAAI,aAAa,SAAS;AACxB,+BAAyB,aAAa,QAAQ,cAAc,UAAU;AAAA,IACxE;AAAA,EACF,GAAG,CAAC,cAAc,YAAY,OAAO,CAAC;AAEtC,8BAAU,MAAM;AACd,QAAI,aAAa,SAAS;AACxB,eAAS,aAAa,QAAQ,WAAW;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,iBAAiB,8BAAY,MAAM;AACvC,QAAI,YAAY;AAAU;AAC1B,QAAI;AAAU,eAAS;AAAA,EACzB,GAAG,CAAC,UAAU,UAAU,QAAQ,CAAC;AAEjC,QAAM,cAAc,gDAAuB,MAAM,EAAE,SAAS,eAAe,CAAC;AAC5E,QAAM,eAAe,4CAAmB,IAAI;AAE5C,SACE,mDAAC;AAAA,IACC;AAAA,IACA,eAAY;AAAA,KACR,iBACA,eAJL;AAAA,IAKC;AAAA,MAEC,sDACC,wFACE,mDAAC;AAAA,IACC,MAAK;AAAA,IACL;AAAA,IACA,MAAK;AAAA,IACL,eAAY;AAAA,IACZ,IAAI;AAAA,IACJ,iBAAe;AAAA,IACf,iBAAe;AAAA,IACf,gBAAc;AAAA,IACd,UAAU,WAAW,KAAK;AAAA,IAC1B,SAAS;AAAA,IACT;AAAA,IACA;AAAA,KACI,YACN,GACA,mDAAC;AAAA,IAAY;AAAA,IAAkB;AAAA,IAAY;AAAA,KACzC,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,KAAK,SAAY;AAAA,IAC1B,IAAI,KAAK,MAAM;AAAA,KAEf,mDAAC;AAAA,IAAa;AAAA,IAAkB;AAAA,IAAY;AAAA,IAAoB;AAAA,GAAoB,GACpF,mDAAC;AAAA,IACC,eAAY;AAAA,IACZ,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,UAAU,UAAU,QACvB,CACF,CACF,GACA,mDAAC;AAAA,IAAc;AAAA,IAAY,KAAK;AAAA,KAC7B,UACH,CACF,GACA,QACF,CACF;AAEJ;AAEA,mBAAmB,YAAY;AAC/B,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,kCAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
   "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 });
@@ -37,7 +54,7 @@ const defaultProps = {
   readonly: false,
   disabled: false
 };
-const propTypes = {
+const propTypes = __spreadProps(__spreadValues(__spreadValues({}, import_ds_utilities.globalAttributesPropTypes), import_ds_utilities.xstyledPropTypes), {
   labelOn: import_ds_utilities.PropTypes.string.description("Label when toggle is checked"),
   labelOff: import_ds_utilities.PropTypes.string.description("Label when toggle is unchecked"),
   value: import_ds_utilities.PropTypes.string.description("Value attribute for toggle"),
@@ -50,5 +67,5 @@ const propTypes = {
   disabled: import_ds_utilities.PropTypes.bool.description("Wether the toggle is disabled or not"),
   containerProps: import_ds_utilities.PropTypes.shape({}).description("Set of properties attached to the main container"),
   id: import_ds_utilities.PropTypes.string.description("Unique id.")
-};
+});
 //# 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 '@elliemae/ds-utilities';\n\nexport declare namespace DSControlledToggleT {\n  export type ToggleSize = 's' | 'm' | 'l';\n  export interface Props {\n    labelOn: string;\n    labelOff: string;\n    name: string;\n    value: string;\n    checked: boolean;\n    onChange: () => void | null;\n    size: ToggleSize;\n    readOnly: boolean;\n    disabled: boolean;\n    containerProps: Record<string, unknown>;\n    id: string;\n  }\n}\nexport const defaultProps = {\n  labelOn: 'ON',\n  labelOff: 'OFF',\n  name: '',\n  value: '',\n  checked: false,\n  onClick: () => null,\n  size: 'm',\n  readonly: false,\n  disabled: false,\n};\n\nexport const propTypes = {\n  labelOn: PropTypes.string.description('Label when toggle is checked'),\n  labelOff: PropTypes.string.description('Label when toggle is unchecked'),\n  value: PropTypes.string.description('Value attribute for toggle'),\n  name: PropTypes.string.description('Name attribute for toggle'),\n  checked: PropTypes.bool.description('Wether the toggle is checked or not'),\n  onchange: PropTypes.func.description('OnClick callback'),\n  size: PropTypes.oneOf(['s', 'm', 'l']).description('Size of toggle'),\n  readOnly: PropTypes.bool.description('Wether the toggle is readOnly or not'),\n  active: PropTypes.bool.description('Wether the toggle has active styles or not').deprecated({ version: '3.x' }),\n  disabled: PropTypes.bool.description('Wether the toggle is disabled or not'),\n  containerProps: PropTypes.shape({}).description('Set of properties attached to the main container'),\n  id: PropTypes.string.description('Unique id.'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA0B;AAkBnB,MAAM,eAAe;AAAA,EAC1B,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS,MAAM;AAAA,EACf,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,MAAM,YAAY;AAAA,EACvB,SAAS,8BAAU,OAAO,YAAY,8BAA8B;AAAA,EACpE,UAAU,8BAAU,OAAO,YAAY,gCAAgC;AAAA,EACvE,OAAO,8BAAU,OAAO,YAAY,4BAA4B;AAAA,EAChE,MAAM,8BAAU,OAAO,YAAY,2BAA2B;AAAA,EAC9D,SAAS,8BAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,UAAU,8BAAU,KAAK,YAAY,kBAAkB;AAAA,EACvD,MAAM,8BAAU,MAAM,CAAC,KAAK,KAAK,GAAG,CAAC,EAAE,YAAY,gBAAgB;AAAA,EACnE,UAAU,8BAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,QAAQ,8BAAU,KAAK,YAAY,4CAA4C,EAAE,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAC9G,UAAU,8BAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,gBAAgB,8BAAU,MAAM,CAAC,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAClG,IAAI,8BAAU,OAAO,YAAY,YAAY;AAC/C;",
+  "sourcesContent": ["import { globalAttributesPropTypes, xstyledPropTypes, PropTypes } from '@elliemae/ds-utilities';\n\nexport declare namespace DSControlledToggleT {\n  export type ToggleSize = 's' | 'm' | 'l';\n  export interface Props {\n    labelOn: string;\n    labelOff: string;\n    name: string;\n    value: string;\n    checked: boolean;\n    onChange: () => void | null;\n    size: ToggleSize;\n    readOnly: boolean;\n    disabled: boolean;\n    containerProps: Record<string, unknown>;\n    id: string;\n  }\n}\nexport const defaultProps = {\n  labelOn: 'ON',\n  labelOff: 'OFF',\n  name: '',\n  value: '',\n  checked: false,\n  onClick: () => null,\n  size: 'm',\n  readonly: false,\n  disabled: false,\n};\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  labelOn: PropTypes.string.description('Label when toggle is checked'),\n  labelOff: PropTypes.string.description('Label when toggle is unchecked'),\n  value: PropTypes.string.description('Value attribute for toggle'),\n  name: PropTypes.string.description('Name attribute for toggle'),\n  checked: PropTypes.bool.description('Wether the toggle is checked or not'),\n  onchange: PropTypes.func.description('OnClick callback'),\n  size: PropTypes.oneOf(['s', 'm', 'l']).description('Size of toggle'),\n  readOnly: PropTypes.bool.description('Wether the toggle is readOnly or not'),\n  active: PropTypes.bool.description('Wether the toggle has active styles or not').deprecated({ version: '3.x' }),\n  disabled: PropTypes.bool.description('Wether the toggle is disabled or not'),\n  containerProps: PropTypes.shape({}).description('Set of properties attached to the main container'),\n  id: PropTypes.string.description('Unique id.'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAuE;AAkBhE,MAAM,eAAe;AAAA,EAC1B,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS,MAAM;AAAA,EACf,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,MAAM,YAAY,gDACpB,gDACA,uCAFoB;AAAA,EAGvB,SAAS,8BAAU,OAAO,YAAY,8BAA8B;AAAA,EACpE,UAAU,8BAAU,OAAO,YAAY,gCAAgC;AAAA,EACvE,OAAO,8BAAU,OAAO,YAAY,4BAA4B;AAAA,EAChE,MAAM,8BAAU,OAAO,YAAY,2BAA2B;AAAA,EAC9D,SAAS,8BAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,UAAU,8BAAU,KAAK,YAAY,kBAAkB;AAAA,EACvD,MAAM,8BAAU,MAAM,CAAC,KAAK,KAAK,GAAG,CAAC,EAAE,YAAY,gBAAgB;AAAA,EACnE,UAAU,8BAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,QAAQ,8BAAU,KAAK,YAAY,4CAA4C,EAAE,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAC9G,UAAU,8BAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,gBAAgB,8BAAU,MAAM,CAAC,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAClG,IAAI,8BAAU,OAAO,YAAY,YAAY;AAC/C;",
   "names": []
 }

package/dist/cjs/styles.js

@@ -21,9 +21,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var styles_exports = {};
 __export(styles_exports, {
   SetLabelWidth: () => SetLabelWidth,
+  StyledButton: () => StyledButton,
   StyledCircle: () => StyledCircle,
   StyledContainer: () => StyledContainer,
-  StyledInput: () => StyledInput,
   StyledLabel: () => StyledLabel,
   StyledText: () => StyledText,
   StyledVisibleContent: () => StyledVisibleContent
@@ -32,16 +32,7 @@ module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_styleHelpers = require("./utils/styleHelpers");
-const StyledContainer = import_ds_system.styled.div`
-  display: inline-flex;
-  width: fit-content;
-  justify-content: center;
-  align-items: center;
-  height: ${({ size }) => import_styleHelpers.containerHeight[size]};
-  border-radius: ${({ size }) => import_styleHelpers.borderRadius[size]};
-  outline: none;
-  position: relative;
-  border: 2px solid transparent;
+const focusBorders = import_ds_system.css`
   &:hover,
   &:focus-within {
     border: 2px solid ${({ theme }) => theme.colors.brand[300]};
@@ -55,6 +46,18 @@ const StyledContainer = import_ds_system.styled.div`
     }
   }
 `;
+const StyledContainer = import_ds_system.styled.div`
+  display: inline-flex;
+  width: fit-content;
+  justify-content: center;
+  align-items: center;
+  height: ${({ size }) => import_styleHelpers.containerHeight[size]};
+  border-radius: ${({ size }) => import_styleHelpers.borderRadius[size]};
+  outline: none;
+  position: relative;
+  border: 2px solid transparent;
+  ${({ disabled }) => !disabled && focusBorders};
+`;
 const StyledLabel = import_ds_system.styled.div`
   width: ${({ width, size }) => `calc(${width}px + ${import_styleHelpers.margin[size]})`};
   height: ${({ size }) => import_styleHelpers.labelHeight[size]};
@@ -75,10 +78,6 @@ const StyledVisibleContent = import_ds_system.styled.label`
     `};
   transition: background-color 0.2s;
   background-color: ${import_styleHelpers.getInterpolatedBgDsToggleColorByProps};
-
-  &:hover {
-    cursor: ${({ disabled, readOnly }) => (0, import_styleHelpers.handleCursors)(disabled, readOnly)};
-  }
 `;
 const StyledCircle = import_ds_system.styled.div`
   height: ${({ size }) => import_styleHelpers.circleValues[size]};
@@ -99,13 +98,15 @@ const StyledText = import_ds_system.styled.div`
   ${({ isLongerTextRendering, checked }) => isLongerTextRendering && checked ? `margin-left: 6px;` : void 0}
   ${({ isLongerTextRendering, checked }) => isLongerTextRendering && !checked ? `margin-left: 4px;` : void 0}
 `;
-const StyledInput = import_ds_system.styled.input`
+const StyledButton = import_ds_system.styled.button`
   position: absolute;
   opacity: 0;
   z-index: 20;
   height: 100%;
   width: 100%;
-  cursor: pointer;
+  &:hover {
+    cursor: ${({ disabled, readOnly }) => (0, import_styleHelpers.handleCursors)(disabled, readOnly)};
+  }
 `;
 const SetLabelWidth = import_ds_system.styled.div`
   font-size: ${({ theme, size }) => (0, import_styleHelpers.handleFontSize)(size, theme)};

package/dist/cjs/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type { DSControlledToggleT } from './propTypes';\n\nimport {\n  containerHeight,\n  borderRadius,\n  labelHeight,\n  getInterpolatedBorderDsToggleColorByProps,\n  getInterpolatedBgDsToggleColorByProps,\n  circleValues,\n  handleFontSize,\n  margin,\n  handleCursors,\n} from './utils/styleHelpers';\n\ninterface StyledContainerT {\n  size: DSControlledToggleT.ToggleSize;\n}\ninterface StyledLabelT {\n  width: number;\n  size: DSControlledToggleT.ToggleSize;\n  checked: boolean;\n}\ninterface StyledVisibleContentT {\n  checked: boolean;\n  size: DSControlledToggleT.ToggleSize;\n  disabled: boolean;\n  readOnly: boolean;\n  as: 'p' | 'label';\n  htmlFor: string;\n}\ninterface StyledCircleT {\n  size: DSControlledToggleT.ToggleSize;\n  readOnly: boolean;\n  checked: boolean;\n  disabled: boolean;\n}\ninterface StyledTextT {\n  isLongerTextRendering: boolean;\n  size: DSControlledToggleT.ToggleSize;\n  checked: boolean;\n  disabled: boolean;\n}\ninterface SetLabelWidthT {\n  size: DSControlledToggleT.ToggleSize;\n}\n\nexport const StyledContainer = styled.div<StyledContainerT>`\n  display: inline-flex;\n  width: fit-content;\n  justify-content: center;\n  align-items: center;\n  height: ${({ size }) => containerHeight[size]};\n  border-radius: ${({ size }) => borderRadius[size]};\n  outline: none;\n  position: relative;\n  border: 2px solid transparent;\n  &:hover,\n  &:focus-within {\n    border: 2px solid ${({ theme }) => theme.colors.brand[300]};\n    &:after {\n      content: '';\n      height: calc(100% + 4px);\n      width: calc(100% + 4px);\n      border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n      border-radius: 20px;\n      position: absolute;\n    }\n  }\n`;\n\nexport const StyledLabel = styled.div<StyledLabelT>`\n  width: ${({ width, size }) => `calc(${width}px + ${margin[size]})`};\n  height: ${({ size }) => labelHeight[size]};\n  z-index: 2;\n  outline: none;\n  border-radius: ${({ size }) => labelHeight[size]};\n`;\n\nexport const StyledVisibleContent = styled.label<StyledVisibleContentT>`\n  display: flex;\n  margin: 0;\n  padding: 0;\n  align-items: center;\n  height: 100%;\n  flex-direction: ${({ checked }) => (checked ? 'row-reverse' : 'row')};\n  border-radius: ${({ size }) => `calc(${labelHeight[size]} - 4px)`};\n  border: ${(props) =>\n    props.size === 's'\n      ? `1px solid ${getInterpolatedBorderDsToggleColorByProps(props)}`\n      : `\n    2px solid ${getInterpolatedBorderDsToggleColorByProps(props)}\n    `};\n  transition: background-color 0.2s;\n  background-color: ${getInterpolatedBgDsToggleColorByProps};\n\n  &:hover {\n    cursor: ${({ disabled, readOnly }) => handleCursors(disabled, readOnly)};\n  }\n`;\n\nexport const StyledCircle = styled.div<StyledCircleT>`\n  height: ${({ size }) => circleValues[size]};\n  width: ${({ size }) => circleValues[size]};\n  border-radius: 50%;\n  background-color: ${({ theme, readOnly }) => (readOnly ? theme.colors.neutral[100] : theme.colors.neutral['000'])};\n`;\n\nexport const StyledText = styled.div<StyledTextT>`\n  display: flex;\n  flex-grow: 1;\n  line-height: 1;\n  margin-bottom: -0.12rem;\n  align-items: center;\n  justify-content: ${({ isLongerTextRendering }) => (isLongerTextRendering ? 'flex-start' : 'center')};\n  font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  color: ${({ theme, disabled }) => (disabled ? '#5c6574' : theme.colors.neutral['000'])};\n  ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && checked ? `margin-left: 6px;` : undefined)}\n  ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && !checked ? `margin-left: 4px;` : undefined)}\n`;\n\nexport const StyledInput = styled.input`\n  position: absolute;\n  opacity: 0;\n  z-index: 20;\n  height: 100%;\n  width: 100%;\n  cursor: pointer;\n`;\n\nexport const SetLabelWidth = styled.div<SetLabelWidthT>`\n  font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  width: auto;\n  position: absolute;\n  white-space: nowrap;\n  visibility: hidden;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAGvB,0BAUO;AAkCA,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA,YAK1B,CAAC,EAAE,WAAW,oCAAgB;AAAA,mBACvB,CAAC,EAAE,WAAW,iCAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMtB,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKhC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrD,MAAM,cAAc,wBAAO;AAAA,WACvB,CAAC,EAAE,OAAO,WAAW,QAAQ,aAAa,2BAAO;AAAA,YAChD,CAAC,EAAE,WAAW,gCAAY;AAAA;AAAA;AAAA,mBAGnB,CAAC,EAAE,WAAW,gCAAY;AAAA;AAGtC,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMvB,CAAC,EAAE,cAAe,UAAU,gBAAgB;AAAA,mBAC7C,CAAC,EAAE,WAAW,QAAQ,gCAAY;AAAA,YACzC,CAAC,UACT,MAAM,SAAS,MACX,aAAa,mEAA0C,KAAK,MAC5D;AAAA,gBACQ,mEAA0C,KAAK;AAAA;AAAA;AAAA,sBAGzC;AAAA;AAAA;AAAA,cAGR,CAAC,EAAE,UAAU,eAAe,uCAAc,UAAU,QAAQ;AAAA;AAAA;AAInE,MAAM,eAAe,wBAAO;AAAA,YACvB,CAAC,EAAE,WAAW,iCAAa;AAAA,WAC5B,CAAC,EAAE,WAAW,iCAAa;AAAA;AAAA,sBAEhB,CAAC,EAAE,OAAO,eAAgB,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA;AAGrG,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMZ,CAAC,EAAE,4BAA6B,wBAAwB,eAAe;AAAA,eAC7E,CAAC,EAAE,OAAO,WAAW,wCAAe,MAAM,KAAK;AAAA,iBAC7C,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,OAAO,eAAgB,WAAW,YAAY,MAAM,OAAO,QAAQ;AAAA,IAC7E,CAAC,EAAE,uBAAuB,cAAe,yBAAyB,UAAU,sBAAsB;AAAA,IAClG,CAAC,EAAE,uBAAuB,cAAe,yBAAyB,CAAC,UAAU,sBAAsB;AAAA;AAGhG,MAAM,cAAc,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3B,MAAM,gBAAgB,wBAAO;AAAA,eACrB,CAAC,EAAE,OAAO,WAAW,wCAAe,MAAM,KAAK;AAAA,iBAC7C,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { styled, css } from '@elliemae/ds-system';\nimport type { DSControlledToggleT } from './propTypes';\n\nimport {\n  containerHeight,\n  borderRadius,\n  labelHeight,\n  getInterpolatedBorderDsToggleColorByProps,\n  getInterpolatedBgDsToggleColorByProps,\n  circleValues,\n  handleFontSize,\n  margin,\n  handleCursors,\n} from './utils/styleHelpers';\n\ninterface StyledContainerT {\n  size: DSControlledToggleT.ToggleSize;\n}\ninterface StyledLabelT {\n  width: number;\n  size: DSControlledToggleT.ToggleSize;\n  checked: boolean;\n}\ninterface StyledVisibleContentT {\n  checked: boolean;\n  size: DSControlledToggleT.ToggleSize;\n  disabled: boolean;\n  readOnly: boolean;\n  as: 'p' | 'label';\n  htmlFor: string;\n}\ninterface StyledCircleT {\n  size: DSControlledToggleT.ToggleSize;\n  readOnly: boolean;\n  checked: boolean;\n  disabled: boolean;\n}\ninterface StyledTextT {\n  isLongerTextRendering: boolean;\n  size: DSControlledToggleT.ToggleSize;\n  checked: boolean;\n  disabled: boolean;\n}\ninterface SetLabelWidthT {\n  size: DSControlledToggleT.ToggleSize;\n}\n\nconst focusBorders = css`\n  &:hover,\n  &:focus-within {\n    border: 2px solid ${({ theme }) => theme.colors.brand[300]};\n    &:after {\n      content: '';\n      height: calc(100% + 4px);\n      width: calc(100% + 4px);\n      border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n      border-radius: 20px;\n      position: absolute;\n    }\n  }\n`;\n\nexport const StyledContainer = styled.div<StyledContainerT>`\n  display: inline-flex;\n  width: fit-content;\n  justify-content: center;\n  align-items: center;\n  height: ${({ size }) => containerHeight[size]};\n  border-radius: ${({ size }) => borderRadius[size]};\n  outline: none;\n  position: relative;\n  border: 2px solid transparent;\n  ${({ disabled }) => !disabled && focusBorders};\n`;\n\nexport const StyledLabel = styled.div<StyledLabelT>`\n  width: ${({ width, size }) => `calc(${width}px + ${margin[size]})`};\n  height: ${({ size }) => labelHeight[size]};\n  z-index: 2;\n  outline: none;\n  border-radius: ${({ size }) => labelHeight[size]};\n`;\n\nexport const StyledVisibleContent = styled.label<StyledVisibleContentT>`\n  display: flex;\n  margin: 0;\n  padding: 0;\n  align-items: center;\n  height: 100%;\n  flex-direction: ${({ checked }) => (checked ? 'row-reverse' : 'row')};\n  border-radius: ${({ size }) => `calc(${labelHeight[size]} - 4px)`};\n  border: ${(props) =>\n    props.size === 's'\n      ? `1px solid ${getInterpolatedBorderDsToggleColorByProps(props)}`\n      : `\n    2px solid ${getInterpolatedBorderDsToggleColorByProps(props)}\n    `};\n  transition: background-color 0.2s;\n  background-color: ${getInterpolatedBgDsToggleColorByProps};\n`;\n\nexport const StyledCircle = styled.div<StyledCircleT>`\n  height: ${({ size }) => circleValues[size]};\n  width: ${({ size }) => circleValues[size]};\n  border-radius: 50%;\n  background-color: ${({ theme, readOnly }) => (readOnly ? theme.colors.neutral[100] : theme.colors.neutral['000'])};\n`;\n\nexport const StyledText = styled.div<StyledTextT>`\n  display: flex;\n  flex-grow: 1;\n  line-height: 1;\n  margin-bottom: -0.12rem;\n  align-items: center;\n  justify-content: ${({ isLongerTextRendering }) => (isLongerTextRendering ? 'flex-start' : 'center')};\n  font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  color: ${({ theme, disabled }) => (disabled ? '#5c6574' : theme.colors.neutral['000'])};\n  ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && checked ? `margin-left: 6px;` : undefined)}\n  ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && !checked ? `margin-left: 4px;` : undefined)}\n`;\n\nexport const StyledButton = styled.button`\n  position: absolute;\n  opacity: 0;\n  z-index: 20;\n  height: 100%;\n  width: 100%;\n  &:hover {\n    cursor: ${({ disabled, readOnly }) => handleCursors(disabled, readOnly)};\n  }\n`;\n\nexport const SetLabelWidth = styled.div<SetLabelWidthT>`\n  font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  width: auto;\n  position: absolute;\n  white-space: nowrap;\n  visibility: hidden;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAG5B,0BAUO;AAkCP,MAAM,eAAe;AAAA;AAAA;AAAA,wBAGG,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKhC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrD,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA,YAK1B,CAAC,EAAE,WAAW,oCAAgB;AAAA,mBACvB,CAAC,EAAE,WAAW,iCAAa;AAAA;AAAA;AAAA;AAAA,IAI1C,CAAC,EAAE,eAAe,CAAC,YAAY;AAAA;AAG5B,MAAM,cAAc,wBAAO;AAAA,WACvB,CAAC,EAAE,OAAO,WAAW,QAAQ,aAAa,2BAAO;AAAA,YAChD,CAAC,EAAE,WAAW,gCAAY;AAAA;AAAA;AAAA,mBAGnB,CAAC,EAAE,WAAW,gCAAY;AAAA;AAGtC,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMvB,CAAC,EAAE,cAAe,UAAU,gBAAgB;AAAA,mBAC7C,CAAC,EAAE,WAAW,QAAQ,gCAAY;AAAA,YACzC,CAAC,UACT,MAAM,SAAS,MACX,aAAa,mEAA0C,KAAK,MAC5D;AAAA,gBACQ,mEAA0C,KAAK;AAAA;AAAA;AAAA,sBAGzC;AAAA;AAGf,MAAM,eAAe,wBAAO;AAAA,YACvB,CAAC,EAAE,WAAW,iCAAa;AAAA,WAC5B,CAAC,EAAE,WAAW,iCAAa;AAAA;AAAA,sBAEhB,CAAC,EAAE,OAAO,eAAgB,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA;AAGrG,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMZ,CAAC,EAAE,4BAA6B,wBAAwB,eAAe;AAAA,eAC7E,CAAC,EAAE,OAAO,WAAW,wCAAe,MAAM,KAAK;AAAA,iBAC7C,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,OAAO,eAAgB,WAAW,YAAY,MAAM,OAAO,QAAQ;AAAA,IAC7E,CAAC,EAAE,uBAAuB,cAAe,yBAAyB,UAAU,sBAAsB;AAAA,IAClG,CAAC,EAAE,uBAAuB,cAAe,yBAAyB,CAAC,UAAU,sBAAsB;AAAA;AAGhG,MAAM,eAAe,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAOrB,CAAC,EAAE,UAAU,eAAe,uCAAc,UAAU,QAAQ;AAAA;AAAA;AAInE,MAAM,gBAAgB,wBAAO;AAAA,eACrB,CAAC,EAAE,OAAO,WAAW,wCAAe,MAAM,KAAK;AAAA,iBAC7C,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/utils/addTooltipOnReadOnly.js

@@ -28,11 +28,9 @@ var import_react = __toESM(require("react"));
 var import_ds_tooltip = require("@elliemae/ds-tooltip");
 const addTooltipOnReadOnly = (Component, readOnly) => {
   if (readOnly)
-    return /* @__PURE__ */ import_react.default.createElement(import_ds_tooltip.DSTooltipV2, {
-      title: "Read Only",
-      offset: [0, 9],
-      triggerComponent: Component
-    });
+    return /* @__PURE__ */ import_react.default.createElement(import_ds_tooltip.DSTooltipV3, {
+      text: "Read Only"
+    }, Component);
   return Component;
 };
 //# sourceMappingURL=addTooltipOnReadOnly.js.map

package/dist/cjs/utils/addTooltipOnReadOnly.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/addTooltipOnReadOnly.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { DSTooltipV2 } from '@elliemae/ds-tooltip';\n\nexport const addTooltipOnReadOnly = (Component: JSX.Element, readOnly: boolean): JSX.Element => {\n  if (readOnly) return <DSTooltipV2 title=\"Read Only\" offset={[0, 9]} triggerComponent={Component} />;\n  return Component;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAA4B;AAErB,MAAM,uBAAuB,CAAC,WAAwB,aAAmC;AAC9F,MAAI;AAAU,WAAO,mDAAC;AAAA,MAAY,OAAM;AAAA,MAAY,QAAQ,CAAC,GAAG,CAAC;AAAA,MAAG,kBAAkB;AAAA,KAAW;AACjG,SAAO;AACT;",
+  "sourcesContent": ["import React from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\n\nexport const addTooltipOnReadOnly = (Component: JSX.Element, readOnly: boolean): JSX.Element => {\n  if (readOnly) return <DSTooltipV3 text=\"Read Only\">{Component}</DSTooltipV3>;\n  return Component;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAA4B;AAErB,MAAM,uBAAuB,CAAC,WAAwB,aAAmC;AAC9F,MAAI;AAAU,WAAO,mDAAC;AAAA,MAAY,MAAK;AAAA,OAAa,SAAU;AAC9D,SAAO;AACT;",
   "names": []
 }

package/dist/esm/ControlledToggle.js

@@ -1,4 +1,6 @@
 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;
@@ -14,14 +16,33 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 import * as React from "react";
 import React2, { useState, useMemo, useRef, useEffect, useCallback } from "react";
 import { uid } from "uid";
-import { describe } from "@elliemae/ds-utilities";
+import {
+  describe,
+  useMemoMergePropsWithDefault,
+  useGetGlobalAttributes,
+  useValidateTypescriptPropTypes,
+  useGetXstyledProps
+} from "@elliemae/ds-utilities";
 import { propTypes, defaultProps } from "./propTypes";
 import {
   StyledContainer,
-  StyledInput,
+  StyledButton,
   StyledLabel,
   StyledVisibleContent,
   StyledCircle,
@@ -29,25 +50,16 @@ import {
   SetLabelWidth
 } from "./styles";
 import { addTooltipOnReadOnly } from "./utils/addTooltipOnReadOnly";
-const DSControlledToggle = ({
-  labelOn,
-  labelOff,
-  name,
-  value,
-  checked,
-  onChange,
-  size,
-  readOnly,
-  disabled,
-  containerProps,
-  id
-}) => {
+const DSControlledToggle = (props) => {
+  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
+  useValidateTypescriptPropTypes(propsWithDefaults, propTypes);
+  const _a = propsWithDefaults, { labelOn, labelOff, value, checked, onChange, size, readOnly, active, disabled, containerProps, id } = _a, rest = __objRest(_a, ["labelOn", "labelOff", "value", "checked", "onChange", "size", "readOnly", "active", "disabled", "containerProps", "id"]);
   const [isLongerTextRendering, setIsLongerTextRendering] = useState(false);
   const [width, setWidth] = useState(0);
   const labelTextRef = useRef(null);
   const widthTextRef = useRef(null);
   const longerText = useMemo(() => labelOn.length > labelOff.length ? labelOn : labelOff, [labelOff, labelOn]);
-  const instanceUID = useMemo(() => uid(5), []);
+  const instanceUID = useMemo(() => id || uid(5), [id]);
   useEffect(() => {
     if (labelTextRef.current) {
       setIsLongerTextRendering(labelTextRef.current.innerText === longerText);
@@ -61,33 +73,30 @@ const DSControlledToggle = ({
   const handleOnChange = useCallback(() => {
     if (disabled || readOnly)
       return;
-    onChange();
-  }, [disabled, readOnly, onChange]);
-  const handleKeyDown = useCallback((e) => {
-    if (disabled || readOnly) {
-      e.preventDefault();
-    }
-    if (e.key === "Enter") {
-      e.preventDefault();
+    if (onChange)
       onChange();
-    }
-  }, [disabled, onChange, readOnly]);
-  return addTooltipOnReadOnly(/* @__PURE__ */ React2.createElement(StyledContainer, __spreadValues({
+  }, [disabled, readOnly, onChange]);
+  const globalAttrs = useGetGlobalAttributes(rest, { onClick: handleOnChange });
+  const xStyledProps = useGetXstyledProps(rest);
+  return /* @__PURE__ */ React2.createElement(StyledContainer, __spreadProps(__spreadValues(__spreadValues({
     size,
     "data-testid": "ds-controlled-toggle"
-  }, containerProps), /* @__PURE__ */ React2.createElement(StyledInput, {
-    type: "checkbox",
-    name,
+  }, containerProps), xStyledProps), {
+    disabled
+  }), addTooltipOnReadOnly(/* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StyledButton, __spreadValues({
+    role: "switch",
     value,
-    checked,
+    type: "button",
     "data-testid": "ds-controlled-toggle-checkbox",
-    id: id || instanceUID,
+    id: instanceUID,
+    "aria-readonly": readOnly,
     "aria-disabled": disabled,
     "aria-checked": checked,
-    tabIndex: 0,
-    onChange: handleOnChange,
-    onKeyDown: handleKeyDown
-  }), /* @__PURE__ */ React2.createElement(StyledLabel, {
+    tabIndex: disabled ? -1 : 0,
+    onClick: handleOnChange,
+    readOnly,
+    disabled
+  }, globalAttrs)), /* @__PURE__ */ React2.createElement(StyledLabel, {
     checked,
     size,
     width
@@ -95,6 +104,7 @@ const DSControlledToggle = ({
     checked,
     size,
     readOnly,
+    active,
     disabled,
     htmlFor: id ? void 0 : instanceUID,
     as: id ? "p" : "label"
@@ -104,6 +114,7 @@ const DSControlledToggle = ({
     readOnly,
     disabled
   }), /* @__PURE__ */ React2.createElement(StyledText, {
+    "aria-hidden": "true",
     ref: labelTextRef,
     isLongerTextRendering,
     checked,
@@ -112,9 +123,8 @@ const DSControlledToggle = ({
   }, checked ? labelOn : labelOff))), /* @__PURE__ */ React2.createElement(SetLabelWidth, {
     size,
     ref: widthTextRef
-  }, longerText)), readOnly);
+  }, longerText)), readOnly));
 };
-DSControlledToggle.defaultProps = defaultProps;
 DSControlledToggle.propTypes = propTypes;
 DSControlledToggle.displayName = "DSControlledToggle";
 const DSControlledToggleWithSchema = describe(DSControlledToggle);

package/dist/esm/ControlledToggle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ControlledToggle.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react';\nimport { uid } from 'uid';\nimport { describe } from '@elliemae/ds-utilities';\nimport { propTypes, defaultProps, type DSControlledToggleT } from './propTypes';\nimport {\n  StyledContainer,\n  StyledInput,\n  StyledLabel,\n  StyledVisibleContent,\n  StyledCircle,\n  StyledText,\n  SetLabelWidth,\n} from './styles';\nimport { addTooltipOnReadOnly } from './utils/addTooltipOnReadOnly';\n\nconst DSControlledToggle = ({\n  labelOn,\n  labelOff,\n  name,\n  value,\n  checked,\n  onChange,\n  size,\n  readOnly,\n  disabled,\n  containerProps,\n  id,\n}: DSControlledToggleT.Props): JSX.Element => {\n  const [isLongerTextRendering, setIsLongerTextRendering] = useState<boolean>(false);\n  const [width, setWidth] = useState<number>(0);\n  const labelTextRef = useRef<HTMLDivElement | null>(null);\n  const widthTextRef = useRef<HTMLDivElement | null>(null);\n\n  const longerText = useMemo(() => (labelOn.length > labelOff.length ? labelOn : labelOff), [labelOff, labelOn]);\n\n  const instanceUID = useMemo(() => uid(5), []);\n\n  useEffect(() => {\n    if (labelTextRef.current) {\n      setIsLongerTextRendering(labelTextRef.current.innerText === longerText);\n    }\n  }, [labelTextRef, longerText, checked]);\n\n  useEffect(() => {\n    if (widthTextRef.current) {\n      setWidth(widthTextRef.current.clientWidth);\n    }\n  }, [widthTextRef]);\n\n  const handleOnChange = useCallback(() => {\n    if (disabled || readOnly) return;\n    onChange();\n  }, [disabled, readOnly, onChange]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (disabled || readOnly) {\n        e.preventDefault();\n      }\n      if (e.key === 'Enter') {\n        e.preventDefault();\n        onChange();\n      }\n    },\n    [disabled, onChange, readOnly],\n  );\n\n  return addTooltipOnReadOnly(\n    <StyledContainer size={size} data-testid=\"ds-controlled-toggle\" {...containerProps}>\n      <StyledInput\n        type=\"checkbox\"\n        name={name}\n        value={value}\n        checked={checked}\n        data-testid=\"ds-controlled-toggle-checkbox\"\n        id={id || instanceUID}\n        aria-disabled={disabled}\n        aria-checked={checked}\n        tabIndex={0}\n        onChange={handleOnChange}\n        onKeyDown={handleKeyDown}\n      />\n      <StyledLabel checked={checked} size={size} width={width}>\n        <StyledVisibleContent\n          checked={checked}\n          size={size}\n          readOnly={readOnly}\n          disabled={disabled}\n          htmlFor={id ? undefined : instanceUID}\n          as={id ? 'p' : 'label'}\n        >\n          <StyledCircle checked={checked} size={size} readOnly={readOnly} disabled={disabled} />\n          <StyledText\n            ref={labelTextRef}\n            isLongerTextRendering={isLongerTextRendering}\n            checked={checked}\n            size={size}\n            disabled={disabled}\n          >\n            {checked ? labelOn : labelOff}\n          </StyledText>\n        </StyledVisibleContent>\n      </StyledLabel>\n      <SetLabelWidth size={size} ref={widthTextRef}>\n        {longerText}\n      </SetLabelWidth>\n    </StyledContainer>,\n    readOnly,\n  );\n};\n\nDSControlledToggle.defaultProps = defaultProps;\nDSControlledToggle.propTypes = propTypes;\nDSControlledToggle.displayName = 'DSControlledToggle';\nconst DSControlledToggleWithSchema = describe(DSControlledToggle);\nDSControlledToggleWithSchema.propTypes = propTypes;\n\nexport { DSControlledToggle, DSControlledToggleWithSchema };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;AAEA,MAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAC4C;AAC5C,QAAM,CAAC,uBAAuB,4BAA4B,SAAkB,KAAK;AACjF,QAAM,CAAC,OAAO,YAAY,SAAiB,CAAC;AAC5C,QAAM,eAAe,OAA8B,IAAI;AACvD,QAAM,eAAe,OAA8B,IAAI;AAEvD,QAAM,aAAa,QAAQ,MAAO,QAAQ,SAAS,SAAS,SAAS,UAAU,UAAW,CAAC,UAAU,OAAO,CAAC;AAE7G,QAAM,cAAc,QAAQ,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;AAE5C,YAAU,MAAM;AACd,QAAI,aAAa,SAAS;AACxB,+BAAyB,aAAa,QAAQ,cAAc,UAAU;AAAA,IACxE;AAAA,EACF,GAAG,CAAC,cAAc,YAAY,OAAO,CAAC;AAEtC,YAAU,MAAM;AACd,QAAI,aAAa,SAAS;AACxB,eAAS,aAAa,QAAQ,WAAW;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,YAAY;AAAU;AAC1B,aAAS;AAAA,EACX,GAAG,CAAC,UAAU,UAAU,QAAQ,CAAC;AAEjC,QAAM,gBAAgB,YACpB,CAAC,MAA2B;AAC1B,QAAI,YAAY,UAAU;AACxB,QAAE,eAAe;AAAA,IACnB;AACA,QAAI,EAAE,QAAQ,SAAS;AACrB,QAAE,eAAe;AACjB,eAAS;AAAA,IACX;AAAA,EACF,GACA,CAAC,UAAU,UAAU,QAAQ,CAC/B;AAEA,SAAO,qBACL,qCAAC;AAAA,IAAgB;AAAA,IAAY,eAAY;AAAA,KAA2B,iBAClE,qCAAC;AAAA,IACC,MAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ,IAAI,MAAM;AAAA,IACV,iBAAe;AAAA,IACf,gBAAc;AAAA,IACd,UAAU;AAAA,IACV,UAAU;AAAA,IACV,WAAW;AAAA,GACb,GACA,qCAAC;AAAA,IAAY;AAAA,IAAkB;AAAA,IAAY;AAAA,KACzC,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,KAAK,SAAY;AAAA,IAC1B,IAAI,KAAK,MAAM;AAAA,KAEf,qCAAC;AAAA,IAAa;AAAA,IAAkB;AAAA,IAAY;AAAA,IAAoB;AAAA,GAAoB,GACpF,qCAAC;AAAA,IACC,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,UAAU,UAAU,QACvB,CACF,CACF,GACA,qCAAC;AAAA,IAAc;AAAA,IAAY,KAAK;AAAA,KAC7B,UACH,CACF,GACA,QACF;AACF;AAEA,mBAAmB,eAAe;AAClC,mBAAmB,YAAY;AAC/B,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,SAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react';\nimport { uid } from 'uid';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useValidateTypescriptPropTypes,\n  useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport { propTypes, defaultProps, type DSControlledToggleT } from './propTypes';\nimport {\n  StyledContainer,\n  StyledButton,\n  StyledLabel,\n  StyledVisibleContent,\n  StyledCircle,\n  StyledText,\n  SetLabelWidth,\n} from './styles';\nimport { addTooltipOnReadOnly } from './utils/addTooltipOnReadOnly';\n\nconst DSControlledToggle = (props: DSControlledToggleT.Props): JSX.Element => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, propTypes);\n  const { labelOn, labelOff, value, checked, onChange, size, readOnly, active, disabled, containerProps, id, ...rest } =\n    propsWithDefaults;\n\n  const [isLongerTextRendering, setIsLongerTextRendering] = useState<boolean>(false);\n  const [width, setWidth] = useState<number>(0);\n  const labelTextRef = useRef<HTMLDivElement | null>(null);\n  const widthTextRef = useRef<HTMLDivElement | null>(null);\n\n  const longerText = useMemo(() => (labelOn.length > labelOff.length ? labelOn : labelOff), [labelOff, labelOn]);\n\n  const instanceUID = useMemo(() => id || uid(5), [id]);\n\n  useEffect(() => {\n    if (labelTextRef.current) {\n      setIsLongerTextRendering(labelTextRef.current.innerText === longerText);\n    }\n  }, [labelTextRef, longerText, checked]);\n\n  useEffect(() => {\n    if (widthTextRef.current) {\n      setWidth(widthTextRef.current.clientWidth);\n    }\n  }, [widthTextRef]);\n\n  const handleOnChange = useCallback(() => {\n    if (disabled || readOnly) return;\n    if (onChange) onChange();\n  }, [disabled, readOnly, onChange]);\n\n  const globalAttrs = useGetGlobalAttributes(rest, { onClick: handleOnChange });\n  const xStyledProps = useGetXstyledProps(rest);\n\n  return (\n    <StyledContainer\n      size={size}\n      data-testid=\"ds-controlled-toggle\"\n      {...containerProps}\n      {...xStyledProps}\n      disabled={disabled}\n    >\n      {addTooltipOnReadOnly(\n        <>\n          <StyledButton\n            role=\"switch\"\n            value={value}\n            type=\"button\"\n            data-testid=\"ds-controlled-toggle-checkbox\"\n            id={instanceUID}\n            aria-readonly={readOnly}\n            aria-disabled={disabled}\n            aria-checked={checked}\n            tabIndex={disabled ? -1 : 0}\n            onClick={handleOnChange}\n            readOnly={readOnly}\n            disabled={disabled}\n            {...globalAttrs}\n          />\n          <StyledLabel checked={checked} size={size} width={width}>\n            <StyledVisibleContent\n              checked={checked}\n              size={size}\n              readOnly={readOnly}\n              active={active}\n              disabled={disabled}\n              htmlFor={id ? undefined : instanceUID}\n              as={id ? 'p' : 'label'}\n            >\n              <StyledCircle checked={checked} size={size} readOnly={readOnly} disabled={disabled} />\n              <StyledText\n                aria-hidden=\"true\"\n                ref={labelTextRef}\n                isLongerTextRendering={isLongerTextRendering}\n                checked={checked}\n                size={size}\n                disabled={disabled}\n              >\n                {checked ? labelOn : labelOff}\n              </StyledText>\n            </StyledVisibleContent>\n          </StyledLabel>\n          <SetLabelWidth size={size} ref={widthTextRef}>\n            {longerText}\n          </SetLabelWidth>\n        </>,\n        readOnly,\n      )}\n    </StyledContainer>\n  );\n};\n\nDSControlledToggle.propTypes = propTypes;\nDSControlledToggle.displayName = 'DSControlledToggle';\nconst DSControlledToggleWithSchema = describe(DSControlledToggle);\nDSControlledToggleWithSchema.propTypes = propTypes;\n\nexport { DSControlledToggle, DSControlledToggleWithSchema };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;AAEA,MAAM,qBAAqB,CAAC,UAAkD;AAC5E,QAAM,oBAAoB,6BAA6B,OAAO,YAAY;AAC1E,iCAA+B,mBAAmB,SAAS;AAC3D,QACE,wBADM,WAAS,UAAU,OAAO,SAAS,UAAU,MAAM,UAAU,QAAQ,UAAU,gBAAgB,OACrG,IAD4G,iBAC5G,IAD4G,CAAtG,WAAS,YAAU,SAAO,WAAS,YAAU,QAAM,YAAU,UAAQ,YAAU,kBAAgB;AAGvG,QAAM,CAAC,uBAAuB,4BAA4B,SAAkB,KAAK;AACjF,QAAM,CAAC,OAAO,YAAY,SAAiB,CAAC;AAC5C,QAAM,eAAe,OAA8B,IAAI;AACvD,QAAM,eAAe,OAA8B,IAAI;AAEvD,QAAM,aAAa,QAAQ,MAAO,QAAQ,SAAS,SAAS,SAAS,UAAU,UAAW,CAAC,UAAU,OAAO,CAAC;AAE7G,QAAM,cAAc,QAAQ,MAAM,MAAM,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAEpD,YAAU,MAAM;AACd,QAAI,aAAa,SAAS;AACxB,+BAAyB,aAAa,QAAQ,cAAc,UAAU;AAAA,IACxE;AAAA,EACF,GAAG,CAAC,cAAc,YAAY,OAAO,CAAC;AAEtC,YAAU,MAAM;AACd,QAAI,aAAa,SAAS;AACxB,eAAS,aAAa,QAAQ,WAAW;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,YAAY;AAAU;AAC1B,QAAI;AAAU,eAAS;AAAA,EACzB,GAAG,CAAC,UAAU,UAAU,QAAQ,CAAC;AAEjC,QAAM,cAAc,uBAAuB,MAAM,EAAE,SAAS,eAAe,CAAC;AAC5E,QAAM,eAAe,mBAAmB,IAAI;AAE5C,SACE,qCAAC;AAAA,IACC;AAAA,IACA,eAAY;AAAA,KACR,iBACA,eAJL;AAAA,IAKC;AAAA,MAEC,qBACC,4DACE,qCAAC;AAAA,IACC,MAAK;AAAA,IACL;AAAA,IACA,MAAK;AAAA,IACL,eAAY;AAAA,IACZ,IAAI;AAAA,IACJ,iBAAe;AAAA,IACf,iBAAe;AAAA,IACf,gBAAc;AAAA,IACd,UAAU,WAAW,KAAK;AAAA,IAC1B,SAAS;AAAA,IACT;AAAA,IACA;AAAA,KACI,YACN,GACA,qCAAC;AAAA,IAAY;AAAA,IAAkB;AAAA,IAAY;AAAA,KACzC,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,KAAK,SAAY;AAAA,IAC1B,IAAI,KAAK,MAAM;AAAA,KAEf,qCAAC;AAAA,IAAa;AAAA,IAAkB;AAAA,IAAY;AAAA,IAAoB;AAAA,GAAoB,GACpF,qCAAC;AAAA,IACC,eAAY;AAAA,IACZ,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,UAAU,UAAU,QACvB,CACF,CACF,GACA,qCAAC;AAAA,IAAc;AAAA,IAAY,KAAK;AAAA,KAC7B,UACH,CACF,GACA,QACF,CACF;AAEJ;AAEA,mBAAmB,YAAY;AAC/B,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,SAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
   "names": []
 }

package/dist/esm/propTypes.js

@@ -1,5 +1,24 @@
+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 "@elliemae/ds-utilities";
+import { globalAttributesPropTypes, xstyledPropTypes, PropTypes } from "@elliemae/ds-utilities";
 const defaultProps = {
   labelOn: "ON",
   labelOff: "OFF",
@@ -11,7 +30,7 @@ const defaultProps = {
   readonly: false,
   disabled: false
 };
-const propTypes = {
+const propTypes = __spreadProps(__spreadValues(__spreadValues({}, globalAttributesPropTypes), xstyledPropTypes), {
   labelOn: PropTypes.string.description("Label when toggle is checked"),
   labelOff: PropTypes.string.description("Label when toggle is unchecked"),
   value: PropTypes.string.description("Value attribute for toggle"),
@@ -24,7 +43,7 @@ const propTypes = {
   disabled: PropTypes.bool.description("Wether the toggle is disabled or not"),
   containerProps: PropTypes.shape({}).description("Set of properties attached to the main container"),
   id: PropTypes.string.description("Unique id.")
-};
+});
 export {
   defaultProps,
   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 '@elliemae/ds-utilities';\n\nexport declare namespace DSControlledToggleT {\n  export type ToggleSize = 's' | 'm' | 'l';\n  export interface Props {\n    labelOn: string;\n    labelOff: string;\n    name: string;\n    value: string;\n    checked: boolean;\n    onChange: () => void | null;\n    size: ToggleSize;\n    readOnly: boolean;\n    disabled: boolean;\n    containerProps: Record<string, unknown>;\n    id: string;\n  }\n}\nexport const defaultProps = {\n  labelOn: 'ON',\n  labelOff: 'OFF',\n  name: '',\n  value: '',\n  checked: false,\n  onClick: () => null,\n  size: 'm',\n  readonly: false,\n  disabled: false,\n};\n\nexport const propTypes = {\n  labelOn: PropTypes.string.description('Label when toggle is checked'),\n  labelOff: PropTypes.string.description('Label when toggle is unchecked'),\n  value: PropTypes.string.description('Value attribute for toggle'),\n  name: PropTypes.string.description('Name attribute for toggle'),\n  checked: PropTypes.bool.description('Wether the toggle is checked or not'),\n  onchange: PropTypes.func.description('OnClick callback'),\n  size: PropTypes.oneOf(['s', 'm', 'l']).description('Size of toggle'),\n  readOnly: PropTypes.bool.description('Wether the toggle is readOnly or not'),\n  active: PropTypes.bool.description('Wether the toggle has active styles or not').deprecated({ version: '3.x' }),\n  disabled: PropTypes.bool.description('Wether the toggle is disabled or not'),\n  containerProps: PropTypes.shape({}).description('Set of properties attached to the main container'),\n  id: PropTypes.string.description('Unique id.'),\n};\n"],
-  "mappings": "AAAA;ACAA;AAkBO,MAAM,eAAe;AAAA,EAC1B,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS,MAAM;AAAA,EACf,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,MAAM,YAAY;AAAA,EACvB,SAAS,UAAU,OAAO,YAAY,8BAA8B;AAAA,EACpE,UAAU,UAAU,OAAO,YAAY,gCAAgC;AAAA,EACvE,OAAO,UAAU,OAAO,YAAY,4BAA4B;AAAA,EAChE,MAAM,UAAU,OAAO,YAAY,2BAA2B;AAAA,EAC9D,SAAS,UAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,UAAU,UAAU,KAAK,YAAY,kBAAkB;AAAA,EACvD,MAAM,UAAU,MAAM,CAAC,KAAK,KAAK,GAAG,CAAC,EAAE,YAAY,gBAAgB;AAAA,EACnE,UAAU,UAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,QAAQ,UAAU,KAAK,YAAY,4CAA4C,EAAE,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAC9G,UAAU,UAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,gBAAgB,UAAU,MAAM,CAAC,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAClG,IAAI,UAAU,OAAO,YAAY,YAAY;AAC/C;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { globalAttributesPropTypes, xstyledPropTypes, PropTypes } from '@elliemae/ds-utilities';\n\nexport declare namespace DSControlledToggleT {\n  export type ToggleSize = 's' | 'm' | 'l';\n  export interface Props {\n    labelOn: string;\n    labelOff: string;\n    name: string;\n    value: string;\n    checked: boolean;\n    onChange: () => void | null;\n    size: ToggleSize;\n    readOnly: boolean;\n    disabled: boolean;\n    containerProps: Record<string, unknown>;\n    id: string;\n  }\n}\nexport const defaultProps = {\n  labelOn: 'ON',\n  labelOff: 'OFF',\n  name: '',\n  value: '',\n  checked: false,\n  onClick: () => null,\n  size: 'm',\n  readonly: false,\n  disabled: false,\n};\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  labelOn: PropTypes.string.description('Label when toggle is checked'),\n  labelOff: PropTypes.string.description('Label when toggle is unchecked'),\n  value: PropTypes.string.description('Value attribute for toggle'),\n  name: PropTypes.string.description('Name attribute for toggle'),\n  checked: PropTypes.bool.description('Wether the toggle is checked or not'),\n  onchange: PropTypes.func.description('OnClick callback'),\n  size: PropTypes.oneOf(['s', 'm', 'l']).description('Size of toggle'),\n  readOnly: PropTypes.bool.description('Wether the toggle is readOnly or not'),\n  active: PropTypes.bool.description('Wether the toggle has active styles or not').deprecated({ version: '3.x' }),\n  disabled: PropTypes.bool.description('Wether the toggle is disabled or not'),\n  containerProps: PropTypes.shape({}).description('Set of properties attached to the main container'),\n  id: PropTypes.string.description('Unique id.'),\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AAkBO,MAAM,eAAe;AAAA,EAC1B,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS,MAAM;AAAA,EACf,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,MAAM,YAAY,gDACpB,4BACA,mBAFoB;AAAA,EAGvB,SAAS,UAAU,OAAO,YAAY,8BAA8B;AAAA,EACpE,UAAU,UAAU,OAAO,YAAY,gCAAgC;AAAA,EACvE,OAAO,UAAU,OAAO,YAAY,4BAA4B;AAAA,EAChE,MAAM,UAAU,OAAO,YAAY,2BAA2B;AAAA,EAC9D,SAAS,UAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,UAAU,UAAU,KAAK,YAAY,kBAAkB;AAAA,EACvD,MAAM,UAAU,MAAM,CAAC,KAAK,KAAK,GAAG,CAAC,EAAE,YAAY,gBAAgB;AAAA,EACnE,UAAU,UAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,QAAQ,UAAU,KAAK,YAAY,4CAA4C,EAAE,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAC9G,UAAU,UAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,gBAAgB,UAAU,MAAM,CAAC,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAClG,IAAI,UAAU,OAAO,YAAY,YAAY;AAC/C;",
   "names": []
 }

package/dist/esm/styles.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { styled } from "@elliemae/ds-system";
+import { styled, css } from "@elliemae/ds-system";
 import {
   containerHeight,
   borderRadius,
@@ -11,16 +11,7 @@ import {
   margin,
   handleCursors
 } from "./utils/styleHelpers";
-const StyledContainer = styled.div`
-  display: inline-flex;
-  width: fit-content;
-  justify-content: center;
-  align-items: center;
-  height: ${({ size }) => containerHeight[size]};
-  border-radius: ${({ size }) => borderRadius[size]};
-  outline: none;
-  position: relative;
-  border: 2px solid transparent;
+const focusBorders = css`
   &:hover,
   &:focus-within {
     border: 2px solid ${({ theme }) => theme.colors.brand[300]};
@@ -34,6 +25,18 @@ const StyledContainer = styled.div`
     }
   }
 `;
+const StyledContainer = styled.div`
+  display: inline-flex;
+  width: fit-content;
+  justify-content: center;
+  align-items: center;
+  height: ${({ size }) => containerHeight[size]};
+  border-radius: ${({ size }) => borderRadius[size]};
+  outline: none;
+  position: relative;
+  border: 2px solid transparent;
+  ${({ disabled }) => !disabled && focusBorders};
+`;
 const StyledLabel = styled.div`
   width: ${({ width, size }) => `calc(${width}px + ${margin[size]})`};
   height: ${({ size }) => labelHeight[size]};
@@ -54,10 +57,6 @@ const StyledVisibleContent = styled.label`
     `};
   transition: background-color 0.2s;
   background-color: ${getInterpolatedBgDsToggleColorByProps};
-
-  &:hover {
-    cursor: ${({ disabled, readOnly }) => handleCursors(disabled, readOnly)};
-  }
 `;
 const StyledCircle = styled.div`
   height: ${({ size }) => circleValues[size]};
@@ -78,13 +77,15 @@ const StyledText = styled.div`
   ${({ isLongerTextRendering, checked }) => isLongerTextRendering && checked ? `margin-left: 6px;` : void 0}
   ${({ isLongerTextRendering, checked }) => isLongerTextRendering && !checked ? `margin-left: 4px;` : void 0}
 `;
-const StyledInput = styled.input`
+const StyledButton = styled.button`
   position: absolute;
   opacity: 0;
   z-index: 20;
   height: 100%;
   width: 100%;
-  cursor: pointer;
+  &:hover {
+    cursor: ${({ disabled, readOnly }) => handleCursors(disabled, readOnly)};
+  }
 `;
 const SetLabelWidth = styled.div`
   font-size: ${({ theme, size }) => handleFontSize(size, theme)};
@@ -96,9 +97,9 @@ const SetLabelWidth = styled.div`
 `;
 export {
   SetLabelWidth,
+  StyledButton,
   StyledCircle,
   StyledContainer,
-  StyledInput,
   StyledLabel,
   StyledText,
   StyledVisibleContent

package/dist/esm/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport type { DSControlledToggleT } from './propTypes';\n\nimport {\n  containerHeight,\n  borderRadius,\n  labelHeight,\n  getInterpolatedBorderDsToggleColorByProps,\n  getInterpolatedBgDsToggleColorByProps,\n  circleValues,\n  handleFontSize,\n  margin,\n  handleCursors,\n} from './utils/styleHelpers';\n\ninterface StyledContainerT {\n  size: DSControlledToggleT.ToggleSize;\n}\ninterface StyledLabelT {\n  width: number;\n  size: DSControlledToggleT.ToggleSize;\n  checked: boolean;\n}\ninterface StyledVisibleContentT {\n  checked: boolean;\n  size: DSControlledToggleT.ToggleSize;\n  disabled: boolean;\n  readOnly: boolean;\n  as: 'p' | 'label';\n  htmlFor: string;\n}\ninterface StyledCircleT {\n  size: DSControlledToggleT.ToggleSize;\n  readOnly: boolean;\n  checked: boolean;\n  disabled: boolean;\n}\ninterface StyledTextT {\n  isLongerTextRendering: boolean;\n  size: DSControlledToggleT.ToggleSize;\n  checked: boolean;\n  disabled: boolean;\n}\ninterface SetLabelWidthT {\n  size: DSControlledToggleT.ToggleSize;\n}\n\nexport const StyledContainer = styled.div<StyledContainerT>`\n  display: inline-flex;\n  width: fit-content;\n  justify-content: center;\n  align-items: center;\n  height: ${({ size }) => containerHeight[size]};\n  border-radius: ${({ size }) => borderRadius[size]};\n  outline: none;\n  position: relative;\n  border: 2px solid transparent;\n  &:hover,\n  &:focus-within {\n    border: 2px solid ${({ theme }) => theme.colors.brand[300]};\n    &:after {\n      content: '';\n      height: calc(100% + 4px);\n      width: calc(100% + 4px);\n      border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n      border-radius: 20px;\n      position: absolute;\n    }\n  }\n`;\n\nexport const StyledLabel = styled.div<StyledLabelT>`\n  width: ${({ width, size }) => `calc(${width}px + ${margin[size]})`};\n  height: ${({ size }) => labelHeight[size]};\n  z-index: 2;\n  outline: none;\n  border-radius: ${({ size }) => labelHeight[size]};\n`;\n\nexport const StyledVisibleContent = styled.label<StyledVisibleContentT>`\n  display: flex;\n  margin: 0;\n  padding: 0;\n  align-items: center;\n  height: 100%;\n  flex-direction: ${({ checked }) => (checked ? 'row-reverse' : 'row')};\n  border-radius: ${({ size }) => `calc(${labelHeight[size]} - 4px)`};\n  border: ${(props) =>\n    props.size === 's'\n      ? `1px solid ${getInterpolatedBorderDsToggleColorByProps(props)}`\n      : `\n    2px solid ${getInterpolatedBorderDsToggleColorByProps(props)}\n    `};\n  transition: background-color 0.2s;\n  background-color: ${getInterpolatedBgDsToggleColorByProps};\n\n  &:hover {\n    cursor: ${({ disabled, readOnly }) => handleCursors(disabled, readOnly)};\n  }\n`;\n\nexport const StyledCircle = styled.div<StyledCircleT>`\n  height: ${({ size }) => circleValues[size]};\n  width: ${({ size }) => circleValues[size]};\n  border-radius: 50%;\n  background-color: ${({ theme, readOnly }) => (readOnly ? theme.colors.neutral[100] : theme.colors.neutral['000'])};\n`;\n\nexport const StyledText = styled.div<StyledTextT>`\n  display: flex;\n  flex-grow: 1;\n  line-height: 1;\n  margin-bottom: -0.12rem;\n  align-items: center;\n  justify-content: ${({ isLongerTextRendering }) => (isLongerTextRendering ? 'flex-start' : 'center')};\n  font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  color: ${({ theme, disabled }) => (disabled ? '#5c6574' : theme.colors.neutral['000'])};\n  ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && checked ? `margin-left: 6px;` : undefined)}\n  ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && !checked ? `margin-left: 4px;` : undefined)}\n`;\n\nexport const StyledInput = styled.input`\n  position: absolute;\n  opacity: 0;\n  z-index: 20;\n  height: 100%;\n  width: 100%;\n  cursor: pointer;\n`;\n\nexport const SetLabelWidth = styled.div<SetLabelWidthT>`\n  font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  width: auto;\n  position: absolute;\n  white-space: nowrap;\n  visibility: hidden;\n`;\n"],
-  "mappings": "AAAA;ACAA;AAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4CO,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,YAK1B,CAAC,EAAE,WAAW,gBAAgB;AAAA,mBACvB,CAAC,EAAE,WAAW,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMtB,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKhC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrD,MAAM,cAAc,OAAO;AAAA,WACvB,CAAC,EAAE,OAAO,WAAW,QAAQ,aAAa,OAAO;AAAA,YAChD,CAAC,EAAE,WAAW,YAAY;AAAA;AAAA;AAAA,mBAGnB,CAAC,EAAE,WAAW,YAAY;AAAA;AAGtC,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMvB,CAAC,EAAE,cAAe,UAAU,gBAAgB;AAAA,mBAC7C,CAAC,EAAE,WAAW,QAAQ,YAAY;AAAA,YACzC,CAAC,UACT,MAAM,SAAS,MACX,aAAa,0CAA0C,KAAK,MAC5D;AAAA,gBACQ,0CAA0C,KAAK;AAAA;AAAA;AAAA,sBAGzC;AAAA;AAAA;AAAA,cAGR,CAAC,EAAE,UAAU,eAAe,cAAc,UAAU,QAAQ;AAAA;AAAA;AAInE,MAAM,eAAe,OAAO;AAAA,YACvB,CAAC,EAAE,WAAW,aAAa;AAAA,WAC5B,CAAC,EAAE,WAAW,aAAa;AAAA;AAAA,sBAEhB,CAAC,EAAE,OAAO,eAAgB,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA;AAGrG,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMZ,CAAC,EAAE,4BAA6B,wBAAwB,eAAe;AAAA,eAC7E,CAAC,EAAE,OAAO,WAAW,eAAe,MAAM,KAAK;AAAA,iBAC7C,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,OAAO,eAAgB,WAAW,YAAY,MAAM,OAAO,QAAQ;AAAA,IAC7E,CAAC,EAAE,uBAAuB,cAAe,yBAAyB,UAAU,sBAAsB;AAAA,IAClG,CAAC,EAAE,uBAAuB,cAAe,yBAAyB,CAAC,UAAU,sBAAsB;AAAA;AAGhG,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3B,MAAM,gBAAgB,OAAO;AAAA,eACrB,CAAC,EAAE,OAAO,WAAW,eAAe,MAAM,KAAK;AAAA,iBAC7C,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css } from '@elliemae/ds-system';\nimport type { DSControlledToggleT } from './propTypes';\n\nimport {\n  containerHeight,\n  borderRadius,\n  labelHeight,\n  getInterpolatedBorderDsToggleColorByProps,\n  getInterpolatedBgDsToggleColorByProps,\n  circleValues,\n  handleFontSize,\n  margin,\n  handleCursors,\n} from './utils/styleHelpers';\n\ninterface StyledContainerT {\n  size: DSControlledToggleT.ToggleSize;\n}\ninterface StyledLabelT {\n  width: number;\n  size: DSControlledToggleT.ToggleSize;\n  checked: boolean;\n}\ninterface StyledVisibleContentT {\n  checked: boolean;\n  size: DSControlledToggleT.ToggleSize;\n  disabled: boolean;\n  readOnly: boolean;\n  as: 'p' | 'label';\n  htmlFor: string;\n}\ninterface StyledCircleT {\n  size: DSControlledToggleT.ToggleSize;\n  readOnly: boolean;\n  checked: boolean;\n  disabled: boolean;\n}\ninterface StyledTextT {\n  isLongerTextRendering: boolean;\n  size: DSControlledToggleT.ToggleSize;\n  checked: boolean;\n  disabled: boolean;\n}\ninterface SetLabelWidthT {\n  size: DSControlledToggleT.ToggleSize;\n}\n\nconst focusBorders = css`\n  &:hover,\n  &:focus-within {\n    border: 2px solid ${({ theme }) => theme.colors.brand[300]};\n    &:after {\n      content: '';\n      height: calc(100% + 4px);\n      width: calc(100% + 4px);\n      border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n      border-radius: 20px;\n      position: absolute;\n    }\n  }\n`;\n\nexport const StyledContainer = styled.div<StyledContainerT>`\n  display: inline-flex;\n  width: fit-content;\n  justify-content: center;\n  align-items: center;\n  height: ${({ size }) => containerHeight[size]};\n  border-radius: ${({ size }) => borderRadius[size]};\n  outline: none;\n  position: relative;\n  border: 2px solid transparent;\n  ${({ disabled }) => !disabled && focusBorders};\n`;\n\nexport const StyledLabel = styled.div<StyledLabelT>`\n  width: ${({ width, size }) => `calc(${width}px + ${margin[size]})`};\n  height: ${({ size }) => labelHeight[size]};\n  z-index: 2;\n  outline: none;\n  border-radius: ${({ size }) => labelHeight[size]};\n`;\n\nexport const StyledVisibleContent = styled.label<StyledVisibleContentT>`\n  display: flex;\n  margin: 0;\n  padding: 0;\n  align-items: center;\n  height: 100%;\n  flex-direction: ${({ checked }) => (checked ? 'row-reverse' : 'row')};\n  border-radius: ${({ size }) => `calc(${labelHeight[size]} - 4px)`};\n  border: ${(props) =>\n    props.size === 's'\n      ? `1px solid ${getInterpolatedBorderDsToggleColorByProps(props)}`\n      : `\n    2px solid ${getInterpolatedBorderDsToggleColorByProps(props)}\n    `};\n  transition: background-color 0.2s;\n  background-color: ${getInterpolatedBgDsToggleColorByProps};\n`;\n\nexport const StyledCircle = styled.div<StyledCircleT>`\n  height: ${({ size }) => circleValues[size]};\n  width: ${({ size }) => circleValues[size]};\n  border-radius: 50%;\n  background-color: ${({ theme, readOnly }) => (readOnly ? theme.colors.neutral[100] : theme.colors.neutral['000'])};\n`;\n\nexport const StyledText = styled.div<StyledTextT>`\n  display: flex;\n  flex-grow: 1;\n  line-height: 1;\n  margin-bottom: -0.12rem;\n  align-items: center;\n  justify-content: ${({ isLongerTextRendering }) => (isLongerTextRendering ? 'flex-start' : 'center')};\n  font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  color: ${({ theme, disabled }) => (disabled ? '#5c6574' : theme.colors.neutral['000'])};\n  ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && checked ? `margin-left: 6px;` : undefined)}\n  ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && !checked ? `margin-left: 4px;` : undefined)}\n`;\n\nexport const StyledButton = styled.button`\n  position: absolute;\n  opacity: 0;\n  z-index: 20;\n  height: 100%;\n  width: 100%;\n  &:hover {\n    cursor: ${({ disabled, readOnly }) => handleCursors(disabled, readOnly)};\n  }\n`;\n\nexport const SetLabelWidth = styled.div<SetLabelWidthT>`\n  font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  width: auto;\n  position: absolute;\n  white-space: nowrap;\n  visibility: hidden;\n`;\n"],
+  "mappings": "AAAA;ACAA;AAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4CA,MAAM,eAAe;AAAA;AAAA;AAAA,wBAGG,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKhC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrD,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,YAK1B,CAAC,EAAE,WAAW,gBAAgB;AAAA,mBACvB,CAAC,EAAE,WAAW,aAAa;AAAA;AAAA;AAAA;AAAA,IAI1C,CAAC,EAAE,eAAe,CAAC,YAAY;AAAA;AAG5B,MAAM,cAAc,OAAO;AAAA,WACvB,CAAC,EAAE,OAAO,WAAW,QAAQ,aAAa,OAAO;AAAA,YAChD,CAAC,EAAE,WAAW,YAAY;AAAA;AAAA;AAAA,mBAGnB,CAAC,EAAE,WAAW,YAAY;AAAA;AAGtC,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMvB,CAAC,EAAE,cAAe,UAAU,gBAAgB;AAAA,mBAC7C,CAAC,EAAE,WAAW,QAAQ,YAAY;AAAA,YACzC,CAAC,UACT,MAAM,SAAS,MACX,aAAa,0CAA0C,KAAK,MAC5D;AAAA,gBACQ,0CAA0C,KAAK;AAAA;AAAA;AAAA,sBAGzC;AAAA;AAGf,MAAM,eAAe,OAAO;AAAA,YACvB,CAAC,EAAE,WAAW,aAAa;AAAA,WAC5B,CAAC,EAAE,WAAW,aAAa;AAAA;AAAA,sBAEhB,CAAC,EAAE,OAAO,eAAgB,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA;AAGrG,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMZ,CAAC,EAAE,4BAA6B,wBAAwB,eAAe;AAAA,eAC7E,CAAC,EAAE,OAAO,WAAW,eAAe,MAAM,KAAK;AAAA,iBAC7C,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,OAAO,eAAgB,WAAW,YAAY,MAAM,OAAO,QAAQ;AAAA,IAC7E,CAAC,EAAE,uBAAuB,cAAe,yBAAyB,UAAU,sBAAsB;AAAA,IAClG,CAAC,EAAE,uBAAuB,cAAe,yBAAyB,CAAC,UAAU,sBAAsB;AAAA;AAGhG,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAOrB,CAAC,EAAE,UAAU,eAAe,cAAc,UAAU,QAAQ;AAAA;AAAA;AAInE,MAAM,gBAAgB,OAAO;AAAA,eACrB,CAAC,EAAE,OAAO,WAAW,eAAe,MAAM,KAAK;AAAA,iBAC7C,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/utils/addTooltipOnReadOnly.js

@@ -1,13 +1,11 @@
 import * as React from "react";
 import React2 from "react";
-import { DSTooltipV2 } from "@elliemae/ds-tooltip";
+import { DSTooltipV3 } from "@elliemae/ds-tooltip";
 const addTooltipOnReadOnly = (Component, readOnly) => {
   if (readOnly)
-    return /* @__PURE__ */ React2.createElement(DSTooltipV2, {
-      title: "Read Only",
-      offset: [0, 9],
-      triggerComponent: Component
-    });
+    return /* @__PURE__ */ React2.createElement(DSTooltipV3, {
+      text: "Read Only"
+    }, Component);
   return Component;
 };
 export {

package/dist/esm/utils/addTooltipOnReadOnly.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/addTooltipOnReadOnly.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSTooltipV2 } from '@elliemae/ds-tooltip';\n\nexport const addTooltipOnReadOnly = (Component: JSX.Element, readOnly: boolean): JSX.Element => {\n  if (readOnly) return <DSTooltipV2 title=\"Read Only\" offset={[0, 9]} triggerComponent={Component} />;\n  return Component;\n};\n"],
-  "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,uBAAuB,CAAC,WAAwB,aAAmC;AAC9F,MAAI;AAAU,WAAO,qCAAC;AAAA,MAAY,OAAM;AAAA,MAAY,QAAQ,CAAC,GAAG,CAAC;AAAA,MAAG,kBAAkB;AAAA,KAAW;AACjG,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\n\nexport const addTooltipOnReadOnly = (Component: JSX.Element, readOnly: boolean): JSX.Element => {\n  if (readOnly) return <DSTooltipV3 text=\"Read Only\">{Component}</DSTooltipV3>;\n  return Component;\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,uBAAuB,CAAC,WAAwB,aAAmC;AAC9F,MAAI;AAAU,WAAO,qCAAC;AAAA,MAAY,MAAK;AAAA,OAAa,SAAU;AAC9D,SAAO;AACT;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-toggle",
-  "version": "3.1.5-rc.9",
+  "version": "3.2.0-rc.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Toggle",
   "files": [
@@ -35,25 +35,25 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-system": "3.1.5-rc.9",
-    "@elliemae/ds-tooltip": "3.1.5-rc.9",
-    "@elliemae/ds-utilities": "3.1.5-rc.9",
-    "styled-components": "~5.3.3",
+    "@elliemae/ds-system": "3.2.0-rc.1",
+    "@elliemae/ds-tooltip": "3.2.0-rc.1",
+    "@elliemae/ds-utilities": "3.2.0-rc.1",
+    "styled-components": "~5.3.5",
     "uid": "~2.0.0"
   },
   "devDependencies": {
     "@elliemae/pui-theme": "~2.6.0",
-    "@testing-library/dom": "~8.11.3",
-    "@testing-library/jest-dom": "~5.16.2",
-    "@testing-library/react": "~12.1.2",
+    "@testing-library/dom": "~8.13.0",
+    "@testing-library/jest-dom": "~5.16.4",
+    "@testing-library/react": "~12.1.3",
     "@testing-library/user-event": "~13.5.0",
-    "styled-components": "~5.3.3"
+    "styled-components": "~5.3.5"
   },
   "peerDependencies": {
     "@elliemae/pui-theme": "~2.6.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.3",
+    "styled-components": "^5.3.5",
     "styled-system": "^5.1.5"
   },
   "publishConfig": {