@elliemae/ds-form-toggle 3.22.0-next.2 → 3.22.0-next.21

package/dist/cjs/ControlledToggle.js

@@ -35,22 +35,38 @@ module.exports = __toCommonJS(ControlledToggle_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_uid = require("uid");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_propTypes = require("./propTypes.js");
+var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 var import_styles = require("./styles.js");
-var import_addTooltipOnReadOnly = require("./utils/addTooltipOnReadOnly.js");
 var import_DSFormToggleDefinitions = require("./DSFormToggleDefinitions.js");
+var import_useDSControlledToggle = require("./config/useDSControlledToggle.js");
+var import_AddTooltipOnReadOnly = require("./parts/AddTooltipOnReadOnly.js");
 const DSControlledToggle = (props) => {
-  const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_propTypes.defaultProps);
-  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefaults, import_propTypes.propTypes, import_DSFormToggleDefinitions.DSFormToggleName);
-  const { labelOn, labelOff, value, checked, onChange, size, readOnly, disabled, containerProps, id, ...rest } = propsWithDefaults;
+  const { propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnChange } = (0, import_useDSControlledToggle.useDSControlledToggle)(props);
+  const { labelOn, labelOff, checked, size, value, containerProps, disabled, readOnly } = propsWithDefault;
   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)(() => id || (0, import_uid.uid)(5), [id]);
+  const ButtonProps = (0, import_react.useMemo)(
+    () => ({
+      role: "switch",
+      "data-testid": "ds-controlled-toggle-checkbox",
+      value,
+      id: instanceUid,
+      "aria-readonly": readOnly,
+      "aria-disabled": disabled,
+      "aria-checked": checked,
+      readOnly,
+      disabled,
+      ...globalProps,
+      type: "button",
+      buttonType: "raw",
+      onClick: handleOnChange
+    }),
+    [checked, disabled, globalProps, handleOnChange, instanceUid, readOnly, value]
+  );
   (0, import_react.useEffect)(() => {
     if (labelTextRef.current) {
       setIsLongerTextRendering(labelTextRef.current.innerText === longerText);
@@ -61,69 +77,36 @@ const DSControlledToggle = (props) => {
       setWidth(widthTextRef.current.clientWidth);
     }
   }, [widthTextRef]);
-  const handleOnChange = (0, import_react.useCallback)(
-    (e) => {
-      if (disabled || readOnly)
-        return;
-      if (onChange) {
-        onChange(e);
-      }
-    },
-    [disabled, readOnly, onChange]
-  );
-  const globalAttrs = (0, import_ds_props_helpers.useGetGlobalAttributes)(rest, { onClick: handleOnChange });
-  const xStyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(rest);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_styles.StyledContainer,
     {
       size,
       "data-testid": "ds-controlled-toggle",
       ...containerProps,
-      ...xStyledProps,
+      ...xstyledProps,
       disabled,
-      children: (0, import_addTooltipOnReadOnly.addTooltipOnReadOnly)(
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          import_styles.StyledButton,
-          {
-            role: "switch",
-            "data-testid": "ds-controlled-toggle-checkbox",
-            ...globalAttrs,
-            value,
-            type: "button",
-            buttonType: "raw",
-            id: instanceUID,
-            "aria-readonly": readOnly,
-            "aria-disabled": disabled,
-            "aria-checked": checked,
-            onClick: handleOnChange,
-            readOnly,
-            disabled,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledLabel, { checked, size, width, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledVisibleContent, { checked, size, readOnly, disabled, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCircle, { checked, size, readOnly, disabled }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_styles.StyledText,
-                  {
-                    ref: labelTextRef,
-                    isLongerTextRendering,
-                    checked,
-                    size,
-                    disabled,
-                    children: checked ? labelOn : labelOff
-                  }
-                )
-              ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.SetLabelWidth, { size, ref: widthTextRef, "aria-hidden": "true", children: longerText })
-            ]
-          }
-        ),
-        readOnly
-      )
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AddTooltipOnReadOnly.AddTooltipOnReadOnly, { readOnly, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledButton, { ...ButtonProps, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledLabel, { checked, size, width, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledVisibleContent, { checked, size, readOnly, disabled, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCircle, { checked, size, readOnly, disabled }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_styles.StyledText,
+            {
+              ref: labelTextRef,
+              isLongerTextRendering,
+              checked,
+              size,
+              disabled,
+              children: checked ? labelOn : labelOff
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.SetLabelWidth, { size, ref: widthTextRef, "aria-hidden": "true", children: longerText })
+      ] }) })
     }
   );
 };
-DSControlledToggle.propTypes = import_propTypes.propTypes;
+DSControlledToggle.propTypes = import_react_desc_prop_types.DSControlledTogglePropTypesSchema;
 DSControlledToggle.displayName = import_DSFormToggleDefinitions.DSFormToggleName;
 const DSControlledToggleWithSchema = (0, import_ds_props_helpers.describe)(DSControlledToggle);
-DSControlledToggleWithSchema.propTypes = import_propTypes.propTypes;
+DSControlledToggleWithSchema.propTypes = import_react_desc_prop_types.DSControlledTogglePropTypesSchema;
 //# sourceMappingURL=ControlledToggle.js.map

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 {\n  describe,\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useValidateTypescriptPropTypes,\n  useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { propTypes, defaultProps, type DSControlledToggleT } from './propTypes.js';\nimport {\n  StyledContainer,\n  StyledButton,\n  StyledLabel,\n  StyledVisibleContent,\n  StyledCircle,\n  StyledText,\n  SetLabelWidth,\n} from './styles.js';\nimport { addTooltipOnReadOnly } from './utils/addTooltipOnReadOnly.js';\nimport { DSFormToggleName } from './DSFormToggleDefinitions.js';\n\nconst DSControlledToggle = (props: DSControlledToggleT.Props): JSX.Element => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, propTypes, DSFormToggleName);\n  const { labelOn, labelOff, value, checked, onChange, size, readOnly, 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    (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      if (disabled || readOnly) return;\n      if (onChange) {\n        onChange(e);\n      }\n    },\n    [disabled, readOnly, onChange],\n  );\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        <StyledButton\n          role=\"switch\"\n          data-testid=\"ds-controlled-toggle-checkbox\"\n          {...globalAttrs}\n          value={value}\n          type=\"button\"\n          buttonType=\"raw\"\n          id={instanceUID}\n          aria-readonly={readOnly}\n          aria-disabled={disabled}\n          aria-checked={checked}\n          onClick={handleOnChange}\n          readOnly={readOnly}\n          disabled={disabled}\n        >\n          <StyledLabel checked={checked} size={size} width={width}>\n            <StyledVisibleContent checked={checked} size={size} readOnly={readOnly} disabled={disabled}>\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} aria-hidden=\"true\">\n            {longerText}\n          </SetLabelWidth>\n        </StyledButton>,\n        readOnly,\n      )}\n    </StyledContainer>\n  );\n};\n\nDSControlledToggle.propTypes = propTypes;\nDSControlledToggle.displayName = DSFormToggleName;\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;ADuFX;AAvFZ,mBAAyE;AACzE,iBAAoB;AACpB,8BAMO;AACP,uBAAkE;AAClE,oBAQO;AACP,kCAAqC;AACrC,qCAAiC;AAEjC,MAAM,qBAAqB,CAAC,UAAkD;AAC5E,QAAM,wBAAoB,sDAA6B,OAAO,6BAAY;AAC1E,8DAA+B,mBAAmB,4BAAW,+CAAgB;AAC7E,QAAM,EAAE,SAAS,UAAU,OAAO,SAAS,UAAU,MAAM,UAAU,UAAU,gBAAgB,IAAI,GAAG,KAAK,IACzG;AAEF,QAAM,CAAC,uBAAuB,wBAAwB,QAAI,uBAAkB,KAAK;AACjF,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAiB,CAAC;AAC5C,QAAM,mBAAe,qBAA8B,IAAI;AACvD,QAAM,mBAAe,qBAA8B,IAAI;AAEvD,QAAM,iBAAa,sBAAQ,MAAO,QAAQ,SAAS,SAAS,SAAS,UAAU,UAAW,CAAC,UAAU,OAAO,CAAC;AAE7G,QAAM,kBAAc,sBAAQ,MAAM,UAAM,gBAAI,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,qBAAiB;AAAA,IACrB,CAAC,MAAgG;AAC/F,UAAI,YAAY;AAAU;AAC1B,UAAI,UAAU;AACZ,iBAAS,CAAC;AAAA,MACZ;AAAA,IACF;AAAA,IACA,CAAC,UAAU,UAAU,QAAQ;AAAA,EAC/B;AAEA,QAAM,kBAAc,gDAAuB,MAAM,EAAE,SAAS,eAAe,CAAC;AAC5E,QAAM,mBAAe,4CAAmB,IAAI;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MAEC;AAAA,QACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,eAAY;AAAA,YACX,GAAG;AAAA,YACJ;AAAA,YACA,MAAK;AAAA,YACL,YAAW;AAAA,YACX,IAAI;AAAA,YACJ,iBAAe;AAAA,YACf,iBAAe;AAAA,YACf,gBAAc;AAAA,YACd,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YAEA;AAAA,0DAAC,6BAAY,SAAkB,MAAY,OACzC,uDAAC,sCAAqB,SAAkB,MAAY,UAAoB,UACtE;AAAA,4DAAC,8BAAa,SAAkB,MAAY,UAAoB,UAAoB;AAAA,gBACpF;AAAA,kBAAC;AAAA;AAAA,oBACC,KAAK;AAAA,oBACL;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBAEC,oBAAU,UAAU;AAAA;AAAA,gBACvB;AAAA,iBACF,GACF;AAAA,cACA,4CAAC,+BAAc,MAAY,KAAK,cAAc,eAAY,QACvD,sBACH;AAAA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,mBAAmB,YAAY;AAC/B,mBAAmB,cAAc;AACjC,MAAM,mCAA+B,kCAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
+  "sourcesContent": ["import React, { useState, useMemo, useRef, useEffect } from 'react';\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSControlledTogglePropTypesSchema, type DSControlledToggleT } from './react-desc-prop-types.js';\nimport {\n  StyledContainer,\n  StyledButton,\n  StyledLabel,\n  StyledVisibleContent,\n  StyledCircle,\n  StyledText,\n  SetLabelWidth,\n} from './styles.js';\nimport { DSFormToggleName } from './DSFormToggleDefinitions.js';\nimport { useDSControlledToggle } from './config/useDSControlledToggle.js';\nimport { AddTooltipOnReadOnly } from './parts/AddTooltipOnReadOnly.js';\n\nconst DSControlledToggle: React.ComponentType<DSControlledToggleT.Props> = (props) => {\n  const { propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnChange } = useDSControlledToggle(props);\n  const { labelOn, labelOff, checked, size, value, containerProps, disabled, readOnly } = propsWithDefault;\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 ButtonProps: DSButtonT.Props = useMemo(\n    () => ({\n      role: 'switch',\n      'data-testid': 'ds-controlled-toggle-checkbox',\n      value: value,\n      id: instanceUid,\n      'aria-readonly': readOnly,\n      'aria-disabled': disabled,\n      'aria-checked': checked,\n      readOnly: readOnly,\n      disabled: disabled,\n      ...(globalProps as unknown as DSButtonT.Props),\n      type: 'button',\n      buttonType: 'raw',\n      onClick: handleOnChange,\n    }),\n    [checked, disabled, globalProps, handleOnChange, instanceUid, readOnly, value],\n  );\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  return (\n    <StyledContainer\n      size={size}\n      data-testid=\"ds-controlled-toggle\"\n      {...containerProps}\n      {...xstyledProps}\n      disabled={disabled}\n    >\n      <AddTooltipOnReadOnly readOnly={readOnly}>\n        <StyledButton {...ButtonProps}>\n          <StyledLabel checked={checked} size={size} width={width}>\n            <StyledVisibleContent checked={checked} size={size} readOnly={readOnly} disabled={disabled}>\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} aria-hidden=\"true\">\n            {longerText}\n          </SetLabelWidth>\n        </StyledButton>\n      </AddTooltipOnReadOnly>\n    </StyledContainer>\n  );\n};\n\nDSControlledToggle.propTypes = DSControlledTogglePropTypesSchema;\nDSControlledToggle.displayName = DSFormToggleName;\nconst DSControlledToggleWithSchema = describe(DSControlledToggle);\nDSControlledToggleWithSchema.propTypes = DSControlledTogglePropTypesSchema;\n\nexport { DSControlledToggle, DSControlledToggleWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsEX;AAtEZ,mBAA4D;AAE5D,8BAAyB;AACzB,mCAA4E;AAC5E,oBAQO;AACP,qCAAiC;AACjC,mCAAsC;AACtC,kCAAqC;AAErC,MAAM,qBAAqE,CAAC,UAAU;AACpF,QAAM,EAAE,kBAAkB,aAAa,cAAc,aAAa,eAAe,QAAI,oDAAsB,KAAK;AAChH,QAAM,EAAE,SAAS,UAAU,SAAS,MAAM,OAAO,gBAAgB,UAAU,SAAS,IAAI;AAExF,QAAM,CAAC,uBAAuB,wBAAwB,QAAI,uBAAkB,KAAK;AACjF,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAiB,CAAC;AAC5C,QAAM,mBAAe,qBAA8B,IAAI;AACvD,QAAM,mBAAe,qBAA8B,IAAI;AAEvD,QAAM,iBAAa,sBAAQ,MAAO,QAAQ,SAAS,SAAS,SAAS,UAAU,UAAW,CAAC,UAAU,OAAO,CAAC;AAE7G,QAAM,kBAA+B;AAAA,IACnC,OAAO;AAAA,MACL,MAAM;AAAA,MACN,eAAe;AAAA,MACf;AAAA,MACA,IAAI;AAAA,MACJ,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA,GAAI;AAAA,MACJ,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,CAAC,SAAS,UAAU,aAAa,gBAAgB,aAAa,UAAU,KAAK;AAAA,EAC/E;AAEA,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,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MAEA,sDAAC,oDAAqB,UACpB,uDAAC,8BAAc,GAAG,aAChB;AAAA,oDAAC,6BAAY,SAAkB,MAAY,OACzC,uDAAC,sCAAqB,SAAkB,MAAY,UAAoB,UACtE;AAAA,sDAAC,8BAAa,SAAkB,MAAY,UAAoB,UAAoB;AAAA,UACpF;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cAEC,oBAAU,UAAU;AAAA;AAAA,UACvB;AAAA,WACF,GACF;AAAA,QACA,4CAAC,+BAAc,MAAY,KAAK,cAAc,eAAY,QACvD,sBACH;AAAA,SACF,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,mBAAmB,YAAY;AAC/B,mBAAmB,cAAc;AACjC,MAAM,mCAA+B,kCAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
   "names": []
 }

package/dist/cjs/config/useDSControlledToggle.js

@@ -0,0 +1,72 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useDSControlledToggle_exports = {};
+__export(useDSControlledToggle_exports, {
+  useDSControlledToggle: () => useDSControlledToggle
+});
+module.exports = __toCommonJS(useDSControlledToggle_exports);
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_lodash = require("lodash");
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_uid = require("uid");
+var import_react_desc_prop_types = require("../react-desc-prop-types.js");
+var import_useValidateProps = require("./useValidateProps.js");
+const useDSControlledToggle = (propsFromUser) => {
+  const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(propsFromUser, import_react_desc_prop_types.defaultProps);
+  (0, import_useValidateProps.useValidateProps)(propsWithDefault, import_react_desc_prop_types.DSControlledTogglePropTypes);
+  const { disabled, readOnly, onChange } = propsWithDefault;
+  const handleOnChange = (0, import_react.useCallback)(
+    (e) => {
+      if (disabled || readOnly)
+        return;
+      if (onChange) {
+        onChange(e);
+      }
+    },
+    [disabled, readOnly, onChange]
+  );
+  const globalProps = (0, import_lodash.omit)(
+    (0, import_ds_utilities.useGetGlobalAttributes)(propsWithDefault, { onClick: handleOnChange })
+  );
+  const xstyledProps = (0, import_ds_utilities.useGetXstyledProps)(propsWithDefault);
+  const { id } = propsWithDefault;
+  const instanceUid = import_react.default.useMemo(() => id || (0, import_uid.uid)(5), [id]);
+  return import_react.default.useMemo(
+    () => ({
+      propsWithDefault,
+      globalProps,
+      xstyledProps,
+      instanceUid,
+      handleOnChange
+    }),
+    [propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnChange]
+  );
+};
+//# sourceMappingURL=useDSControlledToggle.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/config/useDSControlledToggle.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useCallback } from 'react';\nimport { omit } from 'lodash';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { type DSControlledToggleT, DSControlledTogglePropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface DSControlledToggleCTX {\n  propsWithDefault: DSControlledToggleT.InternalProps;\n  globalProps: ReturnType<typeof useGetGlobalAttributes>;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  instanceUid: string;\n}\n\nexport const useDSControlledToggle = (propsFromUser: DSControlledToggleT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSControlledToggleT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSControlledTogglePropTypes);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const { disabled, readOnly, onChange } = propsWithDefault;\n  const handleOnChange = useCallback(\n    (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      if (disabled || readOnly) return;\n      if (onChange) {\n        onChange(e);\n      }\n    },\n    [disabled, readOnly, onChange],\n  );\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalProps = omit(\n    useGetGlobalAttributes<DSControlledToggleT.InternalProps>(propsWithDefault, { onClick: handleOnChange }),\n  );\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  const { id } = propsWithDefault;\n  const instanceUid = React.useMemo(() => id || uid(5), [id]);\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      instanceUid,\n      handleOnChange,\n    }),\n    [propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnChange],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAmC;AACnC,oBAAqB;AACrB,0BAAyF;AACzF,iBAAoB;AACpB,mCAAoF;AACpF,8BAAiC;AAS1B,MAAM,wBAAwB,CAAC,kBAA6C;AAIjF,QAAM,uBAAmB,kDAAgE,eAAe,yCAAY;AACpH,gDAAiB,kBAAkB,wDAA2B;AAI9D,QAAM,EAAE,UAAU,UAAU,SAAS,IAAI;AACzC,QAAM,qBAAiB;AAAA,IACrB,CAAC,MAAgG;AAC/F,UAAI,YAAY;AAAU;AAC1B,UAAI,UAAU;AACZ,iBAAS,CAAC;AAAA,MACZ;AAAA,IACF;AAAA,IACA,CAAC,UAAU,UAAU,QAAQ;AAAA,EAC/B;AAIA,QAAM,kBAAc;AAAA,QAClB,4CAA0D,kBAAkB,EAAE,SAAS,eAAe,CAAC;AAAA,EACzG;AACA,QAAM,mBAAe,wCAAmB,gBAAgB;AACxD,QAAM,EAAE,GAAG,IAAI;AACf,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,UAAM,gBAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAM1D,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,aAAa,cAAc,aAAa,cAAc;AAAA,EAC3E;AACF;",
+  "names": ["React"]
+}

package/dist/cjs/config/useValidateProps.js

@@ -0,0 +1,40 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useValidateProps_exports = {};
+__export(useValidateProps_exports, {
+  useValidateProps: () => useValidateProps
+});
+module.exports = __toCommonJS(useValidateProps_exports);
+var React = __toESM(require("react"));
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_constants = require("../constants/index.js");
+const useValidateProps = (props, propTypes) => {
+  (0, import_ds_utilities.useValidateTypescriptPropTypes)(props, propTypes, import_constants.DSControlledToggleName);
+};
+//# sourceMappingURL=useValidateProps.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/config/useValidateProps.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { WeakValidationMap } from 'react';\nimport { type DSControlledToggleT } from '../react-desc-prop-types.js';\nimport { DSControlledToggleName } from '../constants/index.js';\n\nexport const useValidateProps = (\n  props: DSControlledToggleT.InternalProps,\n  propTypes: WeakValidationMap<unknown>,\n): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSControlledToggleName);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA+C;AAG/C,uBAAuC;AAEhC,MAAM,mBAAmB,CAC9B,OACA,cACS;AAET,0DAA+B,OAAO,WAAW,uCAAsB;AACzE;",
+  "names": []
+}

package/dist/cjs/constants/index.js

@@ -0,0 +1,48 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var constants_exports = {};
+__export(constants_exports, {
+  CONTROLLED_TOGGLE_DATA_TESTID: () => CONTROLLED_TOGGLE_DATA_TESTID,
+  CONTROLLED_TOGGLE_SLOTS: () => CONTROLLED_TOGGLE_SLOTS,
+  DSControlledToggleName: () => DSControlledToggleName
+});
+module.exports = __toCommonJS(constants_exports);
+var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
+const DSControlledToggleName = "DSControlledToggle";
+const CONTROLLED_TOGGLE_SLOTS = {
+  CONTROLLED_CONTAINER: "container",
+  TOGGLE_CHECKBOX: "toggle-checkbox"
+};
+const CONTROLLED_TOGGLE_DATA_TESTID = {
+  ...(0, import_ds_system.slotObjectToDataTestIds)(DSControlledToggleName, CONTROLLED_TOGGLE_SLOTS),
+  CONTROLLED_CONTAINER: "ds-controlled-toggle",
+  TOGGLE_CHECKBOX: "ds-controlled-toggle-checkbox"
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/constants/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSControlledToggleName = 'DSControlledToggle';\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\nexport const CONTROLLED_TOGGLE_SLOTS = {\n  CONTROLLED_CONTAINER: 'container',\n  TOGGLE_CHECKBOX: 'toggle-checkbox',\n} as const;\n\n// we are giving \"component_name_data_testid\" to avoid errors on duplicate exports variables in aggregators\nexport const CONTROLLED_TOGGLE_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSControlledToggleName, CONTROLLED_TOGGLE_SLOTS),\n  CONTROLLED_CONTAINER: 'ds-controlled-toggle',\n  TOGGLE_CHECKBOX: 'ds-controlled-toggle-checkbox',\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,yBAAyB;AAG/B,MAAM,0BAA0B;AAAA,EACrC,sBAAsB;AAAA,EACtB,iBAAiB;AACnB;AAGO,MAAM,gCAAgC;AAAA,EAC3C,OAAG,0CAAwB,wBAAwB,uBAAuB;AAAA,EAC1E,sBAAsB;AAAA,EACtB,iBAAiB;AACnB;",
+  "names": []
+}

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './ControlledToggle.js';\nexport type { DSControlledToggleT } from './propTypes.js';", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["export * from './ControlledToggle.js';\nexport type { DSControlledToggleT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,kCAAd;",
   "names": []
 }

package/dist/cjs/{utils/addTooltipOnReadOnly.js → parts/AddTooltipOnReadOnly.js}

@@ -26,17 +26,20 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var addTooltipOnReadOnly_exports = {};
-__export(addTooltipOnReadOnly_exports, {
-  addTooltipOnReadOnly: () => addTooltipOnReadOnly
+var AddTooltipOnReadOnly_exports = {};
+__export(AddTooltipOnReadOnly_exports, {
+  AddTooltipOnReadOnly: () => AddTooltipOnReadOnly
 });
-module.exports = __toCommonJS(addTooltipOnReadOnly_exports);
+module.exports = __toCommonJS(AddTooltipOnReadOnly_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_tooltip = require("@elliemae/ds-tooltip");
-const addTooltipOnReadOnly = (Component, readOnly) => {
+const AddTooltipOnReadOnly = ({
+  readOnly,
+  children
+}) => {
   if (readOnly)
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip.DSTooltipV3, { text: "Read Only", children: Component });
-  return Component;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip.DSTooltipV3, { text: "Read Only", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
 };
-//# sourceMappingURL=addTooltipOnReadOnly.js.map
+//# sourceMappingURL=AddTooltipOnReadOnly.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/AddTooltipOnReadOnly.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\n\nexport const AddTooltipOnReadOnly = ({\n  readOnly,\n  children,\n}: {\n  readOnly: boolean;\n  children: React.ReactNode;\n}): JSX.Element => {\n  if (readOnly) return <DSTooltipV3 text=\"Read Only\">{children}</DSTooltipV3>;\n  return <>{children}</>;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUA;AATvB,wBAA4B;AAErB,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AACF,MAGmB;AACjB,MAAI;AAAU,WAAO,4CAAC,iCAAY,MAAK,aAAa,UAAS;AAC7D,SAAO,2EAAG,UAAS;AACrB;",
+  "names": []
+}

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

@@ -0,0 +1,65 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var react_desc_prop_types_exports = {};
+__export(react_desc_prop_types_exports, {
+  DSControlledTogglePropTypes: () => DSControlledTogglePropTypes,
+  DSControlledTogglePropTypesSchema: () => DSControlledTogglePropTypesSchema,
+  defaultProps: () => defaultProps
+});
+module.exports = __toCommonJS(react_desc_prop_types_exports);
+var React = __toESM(require("react"));
+var import_ds_utilities = require("@elliemae/ds-utilities");
+const defaultProps = {
+  labelOn: "ON",
+  labelOff: "OFF",
+  name: "",
+  value: "",
+  checked: false,
+  onChange: () => null,
+  size: "m",
+  readOnly: false,
+  disabled: false
+};
+const DSControlledTogglePropTypes = {
+  ...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"),
+  name: import_ds_utilities.PropTypes.string.description("Name attribute for toggle"),
+  checked: import_ds_utilities.PropTypes.bool.description("Wether the toggle is checked or not"),
+  onChange: import_ds_utilities.PropTypes.func.description("OnClick callback"),
+  size: import_ds_utilities.PropTypes.oneOf(["s", "m", "l"]).description("Size of toggle"),
+  readOnly: import_ds_utilities.PropTypes.bool.description("Wether the toggle is readOnly or not"),
+  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.")
+};
+const DSControlledTogglePropTypesSchema = DSControlledTogglePropTypes;
+//# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-utilities';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\n\nexport declare namespace DSControlledToggleT {\n  export type ToggleSize = 's' | 'm' | 'l';\n\n  export interface OptionalProps {\n    containerProps: Record<string, unknown>;\n    id: string;\n  }\n\n  export interface DefaultProps {\n    labelOn: string;\n    labelOff: string;\n    name: string;\n    value: string;\n    checked: boolean;\n    onChange: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n    size: ToggleSize;\n    readOnly: boolean;\n    disabled: boolean;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps {}\n}\n\nexport const defaultProps: DSControlledToggleT.DefaultProps = {\n  labelOn: 'ON',\n  labelOff: 'OFF',\n  name: '',\n  value: '',\n  checked: false,\n  onChange: () => null,\n  size: 'm',\n  readOnly: false,\n  disabled: false,\n};\n\nexport const DSControlledTogglePropTypes: DSPropTypesSchema<DSControlledToggleT.Props> = {\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  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\nexport const DSControlledTogglePropTypesSchema =\n  DSControlledTogglePropTypes as unknown as WeakValidationMap<DSControlledToggleT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,0BAAuE;AAmChE,MAAM,eAAiD;AAAA,EAC5D,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAChB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,MAAM,8BAA4E;AAAA,EACvF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,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,UAAU,8BAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,gBAAgB,8BAAU,MAAM,CAAC,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAClG,IAAI,8BAAU,OAAO,YAAY,YAAY;AAC/C;AAEO,MAAM,oCACX;",
+  "names": []
+}

package/dist/cjs/styles.js

@@ -84,14 +84,14 @@ const StyledContainer = (0, import_ds_system.styled)("div")`
   ${({ disabled }) => !disabled && focusBorders};
   ${import_ds_system.xStyledCommonProps}
 `;
-const StyledLabel = import_ds_system.styled.div`
+const StyledLabel = (0, import_ds_system.styled)("div")`
   width: ${({ width, size }) => `calc(${width}px + ${import_styleHelpers.margin[size]})`};
   height: ${({ size }) => import_styleHelpers.labelHeight[size]};
   z-index: 2;
   outline: none;
   border-radius: ${({ size }) => import_styleHelpers.labelHeight[size]};
 `;
-const StyledVisibleContent = import_ds_system.styled.div`
+const StyledVisibleContent = (0, import_ds_system.styled)("div")`
   display: flex;
   margin: 0;
   padding: 0;

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, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport type { DSControlledToggleT } from './propTypes.js';\nimport {\n  containerHeight,\n  borderRadius,\n  labelHeight,\n  getInterpolatedBorderDsToggleColorByProps,\n  getInterpolatedBgDsToggleColorByProps,\n  circleValues,\n  handleFontSize,\n  margin,\n  handleCursors,\n} from './utils/styleHelpers.js';\n\ninterface StyledContainerT {\n  size: DSControlledToggleT.ToggleSize;\n  disabled: boolean;\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  &:focus-within {\n    &:after {\n      content: '';\n      top: -3px;\n      right: -3px;\n      bottom: -3px;\n      left: -3px;\n      border: 2px solid ${({ theme }) => theme.colors.brand['700']};\n      border-radius: 20px;\n      position: absolute;\n    }\n  }\n`;\n\nconst hoverStyled = css`\n  background-color: ${({ checked, theme }) => {\n    if (checked) return theme.colors.brand['800'];\n    else return theme.colors.neutral['600'];\n  }};\n\n  border-color: ${({ checked, theme }) => {\n    if (checked) return theme.colors.brand['800'];\n    else return theme.colors.neutral['700'];\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  z-index: 0;\n  border: 2px solid transparent;\n  ${({ disabled }) => !disabled && focusBorders};\n  ${xStyledCommonProps}\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.div<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  &:hover {\n    cursor: ${({ disabled, readOnly }) => handleCursors(disabled, readOnly)};\n    ${({ disabled, readOnly }) => !disabled && !readOnly && hoverStyled}\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: ${({ theme, size }) => handleFontSize(size, theme)};\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(DSButtonV2)`\n  margin: 0;\n  padding: 0;\n  z-index: 20;\n  border-radius: 20px;\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,uBAAgD;AAChD,0BAA2B;AAE3B,0BAUO;AAmCP,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAQK,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjE,MAAM,cAAc;AAAA,sBACE,CAAC,EAAE,SAAS,MAAM,MAAM;AAC1C,MAAI;AAAS,WAAO,MAAM,OAAO,MAAM,KAAK;AAAA;AACvC,WAAO,MAAM,OAAO,QAAQ,KAAK;AACxC;AAAA;AAAA,kBAEgB,CAAC,EAAE,SAAS,MAAM,MAAM;AACtC,MAAI;AAAS,WAAO,MAAM,OAAO,MAAM,KAAK;AAAA;AACvC,WAAO,MAAM,OAAO,QAAQ,KAAK;AACxC;AAAA;AAGK,MAAM,sBAAkB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,YAK/B,CAAC,EAAE,KAAK,MAAM,oCAAgB,IAAI;AAAA,mBAC3B,CAAC,EAAE,KAAK,MAAM,iCAAa,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,IAK9C,CAAC,EAAE,SAAS,MAAM,CAAC,YAAY;AAAA,IAC/B;AAAA;AAGG,MAAM,cAAc,wBAAO;AAAA,WACvB,CAAC,EAAE,OAAO,KAAK,MAAM,QAAQ,aAAa,2BAAO,IAAI;AAAA,YACpD,CAAC,EAAE,KAAK,MAAM,gCAAY,IAAI;AAAA;AAAA;AAAA,mBAGvB,CAAC,EAAE,KAAK,MAAM,gCAAY,IAAI;AAAA;AAG1C,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMvB,CAAC,EAAE,QAAQ,MAAO,UAAU,gBAAgB;AAAA,mBAC7C,CAAC,EAAE,KAAK,MAAM,QAAQ,gCAAY,IAAI;AAAA,YAC7C,CAAC,UACT,MAAM,SAAS,MACX,iBAAa,+DAA0C,KAAK,MAC5D;AAAA,oBACQ,+DAA0C,KAAK;AAAA;AAAA;AAAA,sBAGzC;AAAA;AAAA,cAER,CAAC,EAAE,UAAU,SAAS,UAAM,mCAAc,UAAU,QAAQ;AAAA,MACpE,CAAC,EAAE,UAAU,SAAS,MAAM,CAAC,YAAY,CAAC,YAAY;AAAA;AAAA;AAIrD,MAAM,eAAe,wBAAO;AAAA,YACvB,CAAC,EAAE,KAAK,MAAM,iCAAa,IAAI;AAAA,WAChC,CAAC,EAAE,KAAK,MAAM,iCAAa,IAAI;AAAA;AAAA,sBAEpB,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,OAAO,QAAQ,KAAK;AAAA;AAG1G,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA,iBAGhB,CAAC,EAAE,OAAO,KAAK,UAAM,oCAAe,MAAM,KAAK;AAAA;AAAA,qBAE3C,CAAC,EAAE,sBAAsB,MAAO,wBAAwB,eAAe;AAAA,eAC7E,CAAC,EAAE,OAAO,KAAK,UAAM,oCAAe,MAAM,KAAK;AAAA,iBAC7C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,YAAY,MAAM,OAAO,QAAQ,KAAK;AAAA,IAClF,CAAC,EAAE,uBAAuB,QAAQ,MAAO,yBAAyB,UAAU,sBAAsB;AAAA,IAClG,CAAC,EAAE,uBAAuB,QAAQ,MAAO,yBAAyB,CAAC,UAAU,sBAAsB;AAAA;AAGhG,MAAM,mBAAe,yBAAO,8BAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtC,MAAM,gBAAgB,wBAAO;AAAA,eACrB,CAAC,EAAE,OAAO,KAAK,UAAM,oCAAe,MAAM,KAAK;AAAA,iBAC7C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport type { DSControlledToggleT } from './react-desc-prop-types.js';\nimport {\n  containerHeight,\n  borderRadius,\n  labelHeight,\n  getInterpolatedBorderDsToggleColorByProps,\n  getInterpolatedBgDsToggleColorByProps,\n  circleValues,\n  handleFontSize,\n  margin,\n  handleCursors,\n} from './utils/styleHelpers.js';\n\ninterface StyledContainerT {\n  size: DSControlledToggleT.ToggleSize;\n  disabled: boolean;\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  &:focus-within {\n    &:after {\n      content: '';\n      top: -3px;\n      right: -3px;\n      bottom: -3px;\n      left: -3px;\n      border: 2px solid ${({ theme }) => theme.colors.brand['700']};\n      border-radius: 20px;\n      position: absolute;\n    }\n  }\n`;\n\nconst hoverStyled = css`\n  background-color: ${({ checked, theme }) => {\n    if (checked) return theme.colors.brand['800'];\n    else return theme.colors.neutral['600'];\n  }};\n\n  border-color: ${({ checked, theme }) => {\n    if (checked) return theme.colors.brand['800'];\n    else return theme.colors.neutral['700'];\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  z-index: 0;\n  border: 2px solid transparent;\n  ${({ disabled }) => !disabled && focusBorders};\n  ${xStyledCommonProps}\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('div')<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  &:hover {\n    cursor: ${({ disabled, readOnly }) => handleCursors(disabled, readOnly)};\n    ${({ disabled, readOnly }) => !disabled && !readOnly && hoverStyled}\n  }\n` as unknown as React.ComponentType<React.ComponentProps<'div'> & Partial<StyledVisibleContentT>>;\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: ${({ theme, size }) => handleFontSize(size, theme)};\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(DSButtonV2)<DSButtonT.Props>`\n  margin: 0;\n  padding: 0;\n  z-index: 20;\n  border-radius: 20px;\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,uBAAgD;AAEhD,0BAA2B;AAE3B,0BAUO;AAmCP,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAQK,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjE,MAAM,cAAc;AAAA,sBACE,CAAC,EAAE,SAAS,MAAM,MAAM;AAC1C,MAAI;AAAS,WAAO,MAAM,OAAO,MAAM,KAAK;AAAA;AACvC,WAAO,MAAM,OAAO,QAAQ,KAAK;AACxC;AAAA;AAAA,kBAEgB,CAAC,EAAE,SAAS,MAAM,MAAM;AACtC,MAAI;AAAS,WAAO,MAAM,OAAO,MAAM,KAAK;AAAA;AACvC,WAAO,MAAM,OAAO,QAAQ,KAAK;AACxC;AAAA;AAGK,MAAM,sBAAkB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,YAK/B,CAAC,EAAE,KAAK,MAAM,oCAAgB,IAAI;AAAA,mBAC3B,CAAC,EAAE,KAAK,MAAM,iCAAa,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,IAK9C,CAAC,EAAE,SAAS,MAAM,CAAC,YAAY;AAAA,IAC/B;AAAA;AAGG,MAAM,kBAAc,yBAAO,KAAK;AAAA,WAC5B,CAAC,EAAE,OAAO,KAAK,MAAM,QAAQ,aAAa,2BAAO,IAAI;AAAA,YACpD,CAAC,EAAE,KAAK,MAAM,gCAAY,IAAI;AAAA;AAAA;AAAA,mBAGvB,CAAC,EAAE,KAAK,MAAM,gCAAY,IAAI;AAAA;AAG1C,MAAM,2BAAuB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAM5B,CAAC,EAAE,QAAQ,MAAO,UAAU,gBAAgB;AAAA,mBAC7C,CAAC,EAAE,KAAK,MAAM,QAAQ,gCAAY,IAAI;AAAA,YAC7C,CAAC,UACT,MAAM,SAAS,MACX,iBAAa,+DAA0C,KAAK,MAC5D;AAAA,oBACQ,+DAA0C,KAAK;AAAA;AAAA;AAAA,sBAGzC;AAAA;AAAA,cAER,CAAC,EAAE,UAAU,SAAS,UAAM,mCAAc,UAAU,QAAQ;AAAA,MACpE,CAAC,EAAE,UAAU,SAAS,MAAM,CAAC,YAAY,CAAC,YAAY;AAAA;AAAA;AAIrD,MAAM,eAAe,wBAAO;AAAA,YACvB,CAAC,EAAE,KAAK,MAAM,iCAAa,IAAI;AAAA,WAChC,CAAC,EAAE,KAAK,MAAM,iCAAa,IAAI;AAAA;AAAA,sBAEpB,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,OAAO,QAAQ,KAAK;AAAA;AAG1G,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA,iBAGhB,CAAC,EAAE,OAAO,KAAK,UAAM,oCAAe,MAAM,KAAK;AAAA;AAAA,qBAE3C,CAAC,EAAE,sBAAsB,MAAO,wBAAwB,eAAe;AAAA,eAC7E,CAAC,EAAE,OAAO,KAAK,UAAM,oCAAe,MAAM,KAAK;AAAA,iBAC7C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,YAAY,MAAM,OAAO,QAAQ,KAAK;AAAA,IAClF,CAAC,EAAE,uBAAuB,QAAQ,MAAO,yBAAyB,UAAU,sBAAsB;AAAA,IAClG,CAAC,EAAE,uBAAuB,QAAQ,MAAO,yBAAyB,CAAC,UAAU,sBAAsB;AAAA;AAGhG,MAAM,mBAAe,yBAAO,8BAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtC,MAAM,gBAAgB,wBAAO;AAAA,eACrB,CAAC,EAAE,OAAO,KAAK,UAAM,oCAAe,MAAM,KAAK;AAAA,iBAC7C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/styleHelpers.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { th, type PropsWithTheme } from '@elliemae/ds-system';\nimport type { DSControlledToggleT } from '../propTypes.js';\n\ntype StyleStateT = 'disabled' | 'readOnly' | 'checked' | 'unchecked';\n\nconst getStyleState = ({\n  checked,\n  disabled,\n  readOnly,\n}: PropsWithTheme<{\n  checked: boolean;\n  disabled: boolean;\n  readOnly: boolean;\n}>): StyleStateT => {\n  if (disabled) return 'disabled';\n  if (readOnly) return 'readOnly';\n  if (checked) return 'checked';\n  return 'unchecked';\n};\n\nexport const circleValues = {\n  s: '14px',\n  m: '20px',\n  l: '28px',\n};\n\nexport const margin = {\n  s: '26px',\n  m: '34px',\n  l: '42px',\n};\n\nexport const containerHeight = {\n  s: '20px',\n  m: '28px',\n  l: '36px',\n};\n\nexport const labelHeight = {\n  s: '16px',\n  m: '24px',\n  l: '32px',\n};\n\nexport const borderRadius = {\n  s: '16px',\n  m: '20px',\n  l: '22px',\n};\nexport const handleFontSize = (\n  size: DSControlledToggleT.ToggleSize,\n  { fontSizes }: PropsWithTheme['theme'],\n): string => {\n  switch (size) {\n    case 's':\n      return fontSizes.microText[200];\n    case 'm':\n      return '15px';\n    case 'l':\n      return '20px';\n    default:\n      return '15px';\n  }\n};\nconst bgColorsMap = {\n  disabled: 'neutral-100',\n  readOnly: 'neutral-500',\n  checked: 'brand-600',\n  unchecked: 'neutral-500',\n} as const;\nconst getInterpolatedBgDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n  th.color(bgColorsMap[styleState])(props);\nexport const getInterpolatedBgDsToggleColorByProps = (\n  props: PropsWithTheme<{\n    checked: boolean;\n    disabled: boolean;\n    readOnly: boolean;\n  }>,\n) => getInterpolatedBgDSToggleColor(getStyleState(props), props);\n\nconst borderColorsMap = {\n  disabled: 'neutral-300',\n  readOnly: 'neutral-500',\n  checked: 'brand-700',\n  unchecked: 'neutral-600',\n} as const;\nconst getInterpolatedBorderDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n  th.color(borderColorsMap[styleState])(props);\nexport const getInterpolatedBorderDsToggleColorByProps = (\n  props: PropsWithTheme<{\n    checked: boolean;\n    disabled: boolean;\n    readOnly: boolean;\n  }>,\n) => getInterpolatedBorderDSToggleColor(getStyleState(props), props);\n\nexport const handleCursors = (disabled: boolean, readOnly: boolean): string => {\n  if (disabled) return 'not-allowed';\n  if (readOnly) return 'default';\n  return 'pointer';\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import { th, type PropsWithTheme } from '@elliemae/ds-system';\nimport type { DSControlledToggleT } from '../react-desc-prop-types.js';\n\ntype StyleStateT = 'disabled' | 'readOnly' | 'checked' | 'unchecked';\n\nconst getStyleState = ({\n  checked,\n  disabled,\n  readOnly,\n}: PropsWithTheme<{\n  checked: boolean;\n  disabled: boolean;\n  readOnly: boolean;\n}>): StyleStateT => {\n  if (disabled) return 'disabled';\n  if (readOnly) return 'readOnly';\n  if (checked) return 'checked';\n  return 'unchecked';\n};\n\nexport const circleValues = {\n  s: '14px',\n  m: '20px',\n  l: '28px',\n};\n\nexport const margin = {\n  s: '26px',\n  m: '34px',\n  l: '42px',\n};\n\nexport const containerHeight = {\n  s: '20px',\n  m: '28px',\n  l: '36px',\n};\n\nexport const labelHeight = {\n  s: '16px',\n  m: '24px',\n  l: '32px',\n};\n\nexport const borderRadius = {\n  s: '16px',\n  m: '20px',\n  l: '22px',\n};\nexport const handleFontSize = (\n  size: DSControlledToggleT.ToggleSize,\n  { fontSizes }: PropsWithTheme['theme'],\n): string => {\n  switch (size) {\n    case 's':\n      return fontSizes.microText[200];\n    case 'm':\n      return '15px';\n    case 'l':\n      return '20px';\n    default:\n      return '15px';\n  }\n};\nconst bgColorsMap = {\n  disabled: 'neutral-100',\n  readOnly: 'neutral-500',\n  checked: 'brand-600',\n  unchecked: 'neutral-500',\n} as const;\nconst getInterpolatedBgDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n  th.color(bgColorsMap[styleState])(props);\nexport const getInterpolatedBgDsToggleColorByProps = (\n  props: PropsWithTheme<{\n    checked: boolean;\n    disabled: boolean;\n    readOnly: boolean;\n  }>,\n) => getInterpolatedBgDSToggleColor(getStyleState(props), props);\n\nconst borderColorsMap = {\n  disabled: 'neutral-300',\n  readOnly: 'neutral-500',\n  checked: 'brand-700',\n  unchecked: 'neutral-600',\n} as const;\nconst getInterpolatedBorderDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n  th.color(borderColorsMap[styleState])(props);\nexport const getInterpolatedBorderDsToggleColorByProps = (\n  props: PropsWithTheme<{\n    checked: boolean;\n    disabled: boolean;\n    readOnly: boolean;\n  }>,\n) => getInterpolatedBorderDSToggleColor(getStyleState(props), props);\n\nexport const handleCursors = (disabled: boolean, readOnly: boolean): string => {\n  if (disabled) return 'not-allowed';\n  if (readOnly) return 'default';\n  return 'pointer';\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAKxC,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACF,MAIoB;AAClB,MAAI;AAAU,WAAO;AACrB,MAAI;AAAU,WAAO;AACrB,MAAI;AAAS,WAAO;AACpB,SAAO;AACT;AAEO,MAAM,eAAe;AAAA,EAC1B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,SAAS;AAAA,EACpB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,kBAAkB;AAAA,EAC7B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,cAAc;AAAA,EACzB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,eAAe;AAAA,EAC1B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACO,MAAM,iBAAiB,CAC5B,MACA,EAAE,UAAU,MACD;AACX,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,UAAU,UAAU,GAAG;AAAA,IAChC,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AACA,MAAM,cAAc;AAAA,EAClB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AACA,MAAM,iCAAiC,CAAC,YAAyB,UAC/D,oBAAG,MAAM,YAAY,UAAU,CAAC,EAAE,KAAK;AAClC,MAAM,wCAAwC,CACnD,UAKG,+BAA+B,cAAc,KAAK,GAAG,KAAK;AAE/D,MAAM,kBAAkB;AAAA,EACtB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AACA,MAAM,qCAAqC,CAAC,YAAyB,UACnE,oBAAG,MAAM,gBAAgB,UAAU,CAAC,EAAE,KAAK;AACtC,MAAM,4CAA4C,CACvD,UAKG,mCAAmC,cAAc,KAAK,GAAG,KAAK;AAE5D,MAAM,gBAAgB,CAAC,UAAmB,aAA8B;AAC7E,MAAI;AAAU,WAAO;AACrB,MAAI;AAAU,WAAO;AACrB,SAAO;AACT;",
   "names": []
 }