@elliemae/ds-form-toggle 3.57.0-next.1 → 3.57.0-next.11

package/dist/cjs/styles.js

@@ -30,16 +30,17 @@ var styles_exports = {};
 __export(styles_exports, {
   SetLabelWidth: () => SetLabelWidth,
   StyledButton: () => StyledButton,
+  StyledButtonContentWrapper: () => StyledButtonContentWrapper,
   StyledCircle: () => StyledCircle,
   StyledContainer: () => StyledContainer,
-  StyledLabel: () => StyledLabel,
-  StyledText: () => StyledText,
-  StyledVisibleContent: () => StyledVisibleContent
+  StyledRadiusShape: () => StyledRadiusShape,
+  StyledTextWrapper: () => StyledTextWrapper
 });
 module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_button_v2 = require("@elliemae/ds-button-v2");
+var import_constants = require("./constants/index.js");
 var import_styleHelpers = require("./utils/styleHelpers.js");
 const focusBorders = import_ds_system.css`
   &:focus-within {
@@ -56,23 +57,26 @@ const focusBorders = import_ds_system.css`
   }
 `;
 const hoverStyled = import_ds_system.css`
-  background-color: ${({ checked, theme }) => {
-  if (checked) return theme.colors.brand["800"];
+  background-color: ${({ $checked, theme }) => {
+  if ($checked) return theme.colors.brand["800"];
   return theme.colors.neutral["600"];
 }};
 
-  border-color: ${({ checked, theme }) => {
-  if (checked) return theme.colors.brand["800"];
+  border-color: ${({ $checked, theme }) => {
+  if ($checked) return theme.colors.brand["800"];
   return theme.colors.neutral["700"];
 }};
 `;
-const StyledContainer = (0, import_ds_system.styled)("div")`
+const StyledContainer = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSControlledToggleName,
+  slot: import_constants.CONTROLLED_TOGGLE_SLOTS.CONTROLLED_CONTAINER
+})`
   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]};
+  height: ${({ $size }) => import_styleHelpers.containerHeight[$size]};
+  border-radius: ${({ $size }) => import_styleHelpers.borderRadius[$size]};
   outline: none;
   position: relative;
   z-index: 0;
@@ -80,57 +84,67 @@ const StyledContainer = (0, import_ds_system.styled)("div")`
   ${({ disabled }) => !disabled && focusBorders};
   ${import_ds_system.xStyledCommonProps}
 `;
-const StyledLabel = (0, import_ds_system.styled)("div")`
-  width: ${({ width, size }) => width ? `calc(${width}px + ${import_styleHelpers.margin[size]})` : "auto"};
-  height: ${({ size }) => import_styleHelpers.labelHeight[size]};
+const StyledRadiusShape = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSControlledToggleName,
+  slot: import_constants.CONTROLLED_TOGGLE_SLOTS.CONTAINER_WITH_RADIUS_SHAPE
+})`
+  width: ${({ $width, $size }) => $width ? `calc(${$width}px + ${import_styleHelpers.margin[$size]})` : "auto"};
+  height: ${({ $size }) => import_styleHelpers.labelHeight[$size]};
   z-index: 2;
   outline: none;
-  border-radius: ${({ size }) => import_styleHelpers.labelHeight[size]};
+  border-radius: ${({ $size }) => import_styleHelpers.labelHeight[$size]};
 `;
-const StyledVisibleContent = (0, import_ds_system.styled)("div")`
+const StyledButtonContentWrapper = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSControlledToggleName,
+  slot: import_constants.CONTROLLED_TOGGLE_SLOTS.BUTTON_CONTENT_WRAPPER
+})`
   display: flex;
   margin: 0;
   padding: 0;
   align-items: center;
   height: 100%;
-  flex-direction: ${({ checked }) => checked ? "row-reverse" : "row"};
-  border-radius: ${({ size }) => `calc(${import_styleHelpers.labelHeight[size]} - 4px)`};
-  border: ${(props) => props.size === "s" ? `1px solid ${(0, import_styleHelpers.getInterpolatedBorderDsToggleColorByProps)(props)}` : `
+  flex-direction: ${({ $checked }) => $checked ? "row-reverse" : "row"};
+  border-radius: ${({ $size }) => `calc(${import_styleHelpers.labelHeight[$size]} - 4px)`};
+  border: ${(props) => props.$size === "s" ? `1px solid ${(0, import_styleHelpers.getInterpolatedBorderDsToggleColorByProps)(props)}` : `
     2px solid ${(0, import_styleHelpers.getInterpolatedBorderDsToggleColorByProps)(props)}
     `};
   transition: background-color 0.2s;
   background-color: ${import_styleHelpers.getInterpolatedBgDsToggleColorByProps};
   &:hover {
-    cursor: ${({ disabled, applyAriaDisabled, readOnly }) => (0, import_styleHelpers.handleCursors)(disabled, applyAriaDisabled, readOnly)};
-    ${({ disabled, applyAriaDisabled, readOnly }) => !disabled && !applyAriaDisabled && !readOnly && hoverStyled}
+    cursor: ${({ $disabled, $applyAriaDisabled, $readOnly }) => (0, import_styleHelpers.handleCursors)($disabled, $applyAriaDisabled, $readOnly)};
+    ${({ $disabled, $applyAriaDisabled, $readOnly }) => !$disabled && !$applyAriaDisabled && !$readOnly && hoverStyled}
   }
 `;
-const StyledCircle = import_ds_system.styled.div`
-  height: ${({ size }) => import_styleHelpers.circleValues[size]};
-  width: ${({ size }) => import_styleHelpers.circleValues[size]};
+const StyledCircle = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSControlledToggleName,
+  slot: import_constants.CONTROLLED_TOGGLE_SLOTS.CIRCLE
+})`
+  height: ${({ $size }) => import_styleHelpers.circleValues[$size]};
+  width: ${({ $size }) => import_styleHelpers.circleValues[$size]};
   border-radius: 50%;
-  background-color: ${({ theme, readOnly }) => readOnly ? theme.colors.neutral[100] : theme.colors.neutral["000"]};
+  background-color: ${({ theme, $readOnly, $applyAriaDisabled }) => $readOnly || $applyAriaDisabled ? theme.colors.neutral[100] : theme.colors.neutral["000"]};
 `;
-const StyledText = import_ds_system.styled.div`
-  display: flex;
+const StyledTextWrapper = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSControlledToggleName,
+  slot: import_constants.CONTROLLED_TOGGLE_SLOTS.TEXT_WRAPPER
+})`
   flex-grow: 1;
-  line-height: ${({ theme, size }) => (0, import_styleHelpers.handleFontSize)(size, theme)};
-  align-items: center;
-  justify-content: ${({ isLongerTextRendering }) => isLongerTextRendering ? "flex-start" : "center"};
-  font-size: ${({ theme, size }) => (0, import_styleHelpers.handleFontSize)(size, theme)};
+  line-height: ${({ theme, $size }) => (0, import_styleHelpers.handleFontSize)($size, theme)};
+  font-size: ${({ theme, $size }) => (0, import_styleHelpers.handleFontSize)($size, theme)};
   font-weight: ${({ theme }) => theme.fontWeights.semibold};
-  color: ${({ theme, disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "#5c6574" : theme.colors.neutral["000"]};
-  ${({ isLongerTextRendering, checked }) => isLongerTextRendering && checked ? `margin-left: 6px;` : void 0}
-  ${({ isLongerTextRendering, checked }) => isLongerTextRendering && !checked ? `margin-left: 4px;` : void 0}
+  color: ${({ theme, $disabled }) => $disabled ? "#5c6574" : theme.colors.neutral["000"]};
 `;
-const StyledButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2)`
+const StyledButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, {
+  name: import_constants.DSControlledToggleName,
+  slot: import_constants.CONTROLLED_TOGGLE_SLOTS.TOGGLE_CHECKBOX
+})`
   margin: 0;
   padding: 0;
   z-index: 20;
   border-radius: 20px;
 `;
 const SetLabelWidth = import_ds_system.styled.div`
-  font-size: ${({ theme, size }) => (0, import_styleHelpers.handleFontSize)(size, theme)};
+  font-size: ${({ theme, $size }) => (0, import_styleHelpers.handleFontSize)($size, theme)};
   font-weight: ${({ theme }) => theme.fontWeights.semibold};
   width: auto;
   position: absolute;

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 './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  applyAriaDisabled: 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  applyAriaDisabled: 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<{ checked: boolean }>`\n  background-color: ${({ checked, theme }) => {\n    if (checked) return theme.colors.brand['800'];\n    return theme.colors.neutral['600'];\n  }};\n\n  border-color: ${({ checked, theme }) => {\n    if (checked) return theme.colors.brand['800'];\n    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 }) => (width ? `calc(${width}px + ${margin[size]})` : 'auto')};\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, applyAriaDisabled, readOnly }) => handleCursors(disabled, applyAriaDisabled, readOnly)};\n    ${({ disabled, applyAriaDisabled, readOnly }) => !disabled && !applyAriaDisabled && !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, applyAriaDisabled }) =>\n    disabled || applyAriaDisabled ? '#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": "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",
+  "sourcesContent": ["import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport type { DSControlledToggleT } from './react-desc-prop-types.js';\nimport { DSControlledToggleName, CONTROLLED_TOGGLE_SLOTS } from './constants/index.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\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<{ $checked: boolean }>`\n  background-color: ${({ $checked, theme }) => {\n    if ($checked) return theme.colors.brand['800'];\n    return theme.colors.neutral['600'];\n  }};\n\n  border-color: ${({ $checked, theme }) => {\n    if ($checked) return theme.colors.brand['800'];\n    return theme.colors.neutral['700'];\n  }};\n`;\n\ninterface StyledContainerT {\n  $size: DSControlledToggleT.ToggleSize;\n  disabled: boolean;\n}\nexport const StyledContainer = styled('div', {\n  name: DSControlledToggleName,\n  slot: CONTROLLED_TOGGLE_SLOTS.CONTROLLED_CONTAINER,\n})<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`;\ninterface StyledRadiusShapeT {\n  $width: number;\n  $size: DSControlledToggleT.ToggleSize;\n}\nexport const StyledRadiusShape = styled('div', {\n  name: DSControlledToggleName,\n  slot: CONTROLLED_TOGGLE_SLOTS.CONTAINER_WITH_RADIUS_SHAPE,\n})<StyledRadiusShapeT>`\n  width: ${({ $width, $size }) => ($width ? `calc(${$width}px + ${margin[$size]})` : 'auto')};\n  height: ${({ $size }) => labelHeight[$size]};\n  z-index: 2;\n  outline: none;\n  border-radius: ${({ $size }) => labelHeight[$size]};\n`;\n\ninterface StyledButtonContentWrapperT {\n  $checked: boolean;\n  $size: DSControlledToggleT.ToggleSize;\n  $disabled: boolean;\n  $applyAriaDisabled: boolean;\n  $readOnly: boolean;\n}\nexport const StyledButtonContentWrapper = styled('div', {\n  name: DSControlledToggleName,\n  slot: CONTROLLED_TOGGLE_SLOTS.BUTTON_CONTENT_WRAPPER,\n})<StyledButtonContentWrapperT>`\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, $applyAriaDisabled, $readOnly }) =>\n      handleCursors($disabled, $applyAriaDisabled, $readOnly)};\n    ${({ $disabled, $applyAriaDisabled, $readOnly }) => !$disabled && !$applyAriaDisabled && !$readOnly && hoverStyled}\n  }\n`;\n\ninterface StyledCircleT {\n  $size: DSControlledToggleT.ToggleSize;\n  $readOnly: boolean;\n  $applyAriaDisabled: boolean;\n}\nexport const StyledCircle = styled('div', {\n  name: DSControlledToggleName,\n  slot: CONTROLLED_TOGGLE_SLOTS.CIRCLE,\n})<StyledCircleT>`\n  height: ${({ $size }) => circleValues[$size]};\n  width: ${({ $size }) => circleValues[$size]};\n  border-radius: 50%;\n  background-color: ${({ theme, $readOnly, $applyAriaDisabled }) =>\n    $readOnly || $applyAriaDisabled ? theme.colors.neutral[100] : theme.colors.neutral['000']};\n`;\n\ninterface StyledTextWrapperT {\n  $size: DSControlledToggleT.ToggleSize;\n  $disabled: boolean;\n}\nexport const StyledTextWrapper = styled('div', {\n  name: DSControlledToggleName,\n  slot: CONTROLLED_TOGGLE_SLOTS.TEXT_WRAPPER,\n})<StyledTextWrapperT>`\n  flex-grow: 1;\n  line-height: ${({ theme, $size }) => handleFontSize($size, theme)};\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`;\n\nexport const StyledButton = styled(DSButtonV3, {\n  name: DSControlledToggleName,\n  slot: CONTROLLED_TOGGLE_SLOTS.TOGGLE_CHECKBOX,\n})`\n  margin: 0;\n  padding: 0;\n  z-index: 20;\n  border-radius: 20px;\n`;\n\ninterface SetLabelWidthT {\n  $size: DSControlledToggleT.ToggleSize;\n}\n/**\n * This should not be required, we are doing this to keep the wcagViolationLabelOn/wcagViolationLabelOff working\n *   this calculates the width of the widest custom label and sets the width of both labels to that width to avoid layout shift on toggle\n *\n * ---\n *\n * this can be safely removed in favor of a sensible default min-width for the accessible ON/OFF labels when we can actually kill the wcagViolationLabelOn/wcagViolationLabelOff props\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": "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",
   "names": []
 }

package/dist/cjs/utils/styleHelpers.js

@@ -42,15 +42,15 @@ module.exports = __toCommonJS(styleHelpers_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 const getStyleState = ({
-  checked,
-  disabled,
-  applyAriaDisabled,
-  readOnly
+  $checked,
+  $disabled,
+  $applyAriaDisabled,
+  $readOnly
 }) => {
-  if (disabled) return "disabled";
-  if (applyAriaDisabled) return "applyAriaDisabled";
-  if (readOnly) return "readOnly";
-  if (checked) return "checked";
+  if ($disabled) return "disabled";
+  if ($applyAriaDisabled) return "applyAriaDisabled";
+  if ($readOnly) return "readOnly";
+  if ($checked) return "checked";
   return "unchecked";
 };
 const circleValues = {
@@ -82,17 +82,16 @@ const handleFontSize = (size, { fontSizes }) => {
   switch (size) {
     case "s":
       return fontSizes.microText[200];
-    case "m":
-      return "15px";
     case "l":
       return "20px";
+    case "m":
     default:
       return "15px";
   }
 };
 const bgColorsMap = {
   disabled: "neutral-100",
-  applyAriaDisabled: "neutral-100",
+  applyAriaDisabled: "neutral-500",
   readOnly: "neutral-500",
   checked: "brand-600",
   unchecked: "neutral-500"
@@ -101,7 +100,7 @@ const getInterpolatedBgDSToggleColor = (styleState, props) => import_ds_system.t
 const getInterpolatedBgDsToggleColorByProps = (props) => getInterpolatedBgDSToggleColor(getStyleState(props), props);
 const borderColorsMap = {
   disabled: "neutral-300",
-  applyAriaDisabled: "neutral-300",
+  applyAriaDisabled: "neutral-500",
   readOnly: "neutral-500",
   checked: "brand-700",
   unchecked: "neutral-600"
@@ -110,7 +109,7 @@ const getInterpolatedBorderDSToggleColor = (styleState, props) => import_ds_syst
 const getInterpolatedBorderDsToggleColorByProps = (props) => getInterpolatedBorderDSToggleColor(getStyleState(props), props);
 const handleCursors = (disabled, applyAriaDisabled, readOnly) => {
   if (disabled) return "not-allowed";
-  if (applyAriaDisabled) return "not-allowed";
+  if (applyAriaDisabled) return "default";
   if (readOnly) return "default";
   return "pointer";
 };

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 '../react-desc-prop-types.js';\n\ntype StyleStateT = 'disabled' | 'applyAriaDisabled' | 'readOnly' | 'checked' | 'unchecked';\n\nconst getStyleState = ({\n  checked,\n  disabled,\n  applyAriaDisabled,\n  readOnly,\n}: PropsWithTheme<{\n  checked: boolean;\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n  readOnly: boolean;\n}>): StyleStateT => {\n  if (disabled) return 'disabled';\n  if (applyAriaDisabled) return 'applyAriaDisabled';\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};\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};\n\nconst bgColorsMap = {\n  disabled: 'neutral-100',\n  applyAriaDisabled: 'neutral-100',\n  readOnly: 'neutral-500',\n  checked: 'brand-600',\n  unchecked: 'neutral-500',\n} as const;\n\nconst getInterpolatedBgDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n  th.color(bgColorsMap[styleState])(props);\n\nexport const getInterpolatedBgDsToggleColorByProps = (\n  props: PropsWithTheme<{\n    checked: boolean;\n    disabled: boolean;\n    applyAriaDisabled: boolean;\n    readOnly: boolean;\n  }>,\n) => getInterpolatedBgDSToggleColor(getStyleState(props), props);\n\nconst borderColorsMap = {\n  disabled: 'neutral-300',\n  applyAriaDisabled: 'neutral-300',\n  readOnly: 'neutral-500',\n  checked: 'brand-700',\n  unchecked: 'neutral-600',\n} as const;\n\nconst getInterpolatedBorderDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n  th.color(borderColorsMap[styleState])(props);\n\nexport const getInterpolatedBorderDsToggleColorByProps = (\n  props: PropsWithTheme<{\n    checked: boolean;\n    disabled: boolean;\n    applyAriaDisabled: boolean;\n    readOnly: boolean;\n  }>,\n) => getInterpolatedBorderDSToggleColor(getStyleState(props), props);\n\nexport const handleCursors = (disabled: boolean, applyAriaDisabled: boolean, readOnly: boolean): string => {\n  if (disabled) return 'not-allowed';\n  if (applyAriaDisabled) 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;AAAA,EACA;AACF,MAKoB;AAClB,MAAI,SAAU,QAAO;AACrB,MAAI,kBAAmB,QAAO;AAC9B,MAAI,SAAU,QAAO;AACrB,MAAI,QAAS,QAAO;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;AAEO,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;AAEA,MAAM,cAAc;AAAA,EAClB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AAEA,MAAM,iCAAiC,CAAC,YAAyB,UAC/D,oBAAG,MAAM,YAAY,UAAU,CAAC,EAAE,KAAK;AAElC,MAAM,wCAAwC,CACnD,UAMG,+BAA+B,cAAc,KAAK,GAAG,KAAK;AAE/D,MAAM,kBAAkB;AAAA,EACtB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AAEA,MAAM,qCAAqC,CAAC,YAAyB,UACnE,oBAAG,MAAM,gBAAgB,UAAU,CAAC,EAAE,KAAK;AAEtC,MAAM,4CAA4C,CACvD,UAMG,mCAAmC,cAAc,KAAK,GAAG,KAAK;AAE5D,MAAM,gBAAgB,CAAC,UAAmB,mBAA4B,aAA8B;AACzG,MAAI,SAAU,QAAO;AACrB,MAAI,kBAAmB,QAAO;AAC9B,MAAI,SAAU,QAAO;AACrB,SAAO;AACT;",
+  "sourcesContent": ["import { th, type PropsWithTheme } from '@elliemae/ds-system';\nimport type { DSControlledToggleT } from '../react-desc-prop-types.js';\n\ntype StyleStateT = 'disabled' | 'applyAriaDisabled' | 'readOnly' | 'checked' | 'unchecked';\n\nconst getStyleState = ({\n  $checked,\n  $disabled,\n  $applyAriaDisabled,\n  $readOnly,\n}: PropsWithTheme<{\n  $checked: boolean;\n  $disabled: boolean;\n  $applyAriaDisabled: boolean;\n  $readOnly: boolean;\n}>): StyleStateT => {\n  if ($disabled) return 'disabled';\n  if ($applyAriaDisabled) return 'applyAriaDisabled';\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};\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 'l':\n      return '20px';\n    case 'm':\n    default:\n      return '15px';\n  }\n};\n\nconst bgColorsMap = {\n  disabled: 'neutral-100',\n  applyAriaDisabled: 'neutral-500',\n  readOnly: 'neutral-500',\n  checked: 'brand-600',\n  unchecked: 'neutral-500',\n} as const;\n\nconst getInterpolatedBgDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n  th.color(bgColorsMap[styleState])(props);\n\nexport const getInterpolatedBgDsToggleColorByProps = (\n  props: PropsWithTheme<{\n    $checked: boolean;\n    $disabled: boolean;\n    $applyAriaDisabled: boolean;\n    $readOnly: boolean;\n  }>,\n) => getInterpolatedBgDSToggleColor(getStyleState(props), props);\n\nconst borderColorsMap = {\n  disabled: 'neutral-300',\n  applyAriaDisabled: 'neutral-500',\n  readOnly: 'neutral-500',\n  checked: 'brand-700',\n  unchecked: 'neutral-600',\n} as const;\n\nconst getInterpolatedBorderDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n  th.color(borderColorsMap[styleState])(props);\n\nexport const getInterpolatedBorderDsToggleColorByProps = (\n  props: PropsWithTheme<{\n    $checked: boolean;\n    $disabled: boolean;\n    $applyAriaDisabled: boolean;\n    $readOnly: boolean;\n  }>,\n) => getInterpolatedBorderDSToggleColor(getStyleState(props), props);\n\nexport const handleCursors = (disabled: boolean, applyAriaDisabled: boolean, readOnly: boolean): string => {\n  if (disabled) return 'not-allowed';\n  if (applyAriaDisabled) return 'default';\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;AAAA,EACA;AACF,MAKoB;AAClB,MAAI,UAAW,QAAO;AACtB,MAAI,mBAAoB,QAAO;AAC/B,MAAI,UAAW,QAAO;AACtB,MAAI,SAAU,QAAO;AACrB,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;AAEO,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;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAEA,MAAM,cAAc;AAAA,EAClB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AAEA,MAAM,iCAAiC,CAAC,YAAyB,UAC/D,oBAAG,MAAM,YAAY,UAAU,CAAC,EAAE,KAAK;AAElC,MAAM,wCAAwC,CACnD,UAMG,+BAA+B,cAAc,KAAK,GAAG,KAAK;AAE/D,MAAM,kBAAkB;AAAA,EACtB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AAEA,MAAM,qCAAqC,CAAC,YAAyB,UACnE,oBAAG,MAAM,gBAAgB,UAAU,CAAC,EAAE,KAAK;AAEtC,MAAM,4CAA4C,CACvD,UAMG,mCAAmC,cAAc,KAAK,GAAG,KAAK;AAE5D,MAAM,gBAAgB,CAAC,UAAmB,mBAA4B,aAA8B;AACzG,MAAI,SAAU,QAAO;AACrB,MAAI,kBAAmB,QAAO;AAC9B,MAAI,SAAU,QAAO;AACrB,SAAO;AACT;",
   "names": []
 }

package/dist/esm/ControlledToggle.js

@@ -1,99 +1,101 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useMemo, useRef, useLayoutEffect } from "react";
-import { describe } from "@elliemae/ds-props-helpers";
+import { describe, useOwnerProps } from "@elliemae/ds-props-helpers";
+import { useDSControlledToggle } from "./config/useDSControlledToggle.js";
+import { CONTROLLED_TOGGLE_DATA_TESTID, DSControlledToggleName } from "./constants/index.js";
 import { DSControlledTogglePropTypesSchema } from "./react-desc-prop-types.js";
 import {
-  StyledContainer,
+  SetLabelWidth,
   StyledButton,
-  StyledLabel,
-  StyledVisibleContent,
+  StyledButtonContentWrapper,
   StyledCircle,
-  StyledText,
-  SetLabelWidth
+  StyledContainer,
+  StyledRadiusShape,
+  StyledTextWrapper
 } from "./styles.js";
-import { DSFormToggleName } from "./DSFormToggleDefinitions.js";
-import { useDSControlledToggle } from "./config/useDSControlledToggle.js";
-import { AddTooltipOnReadOnly } from "./parts/AddTooltipOnReadOnly.js";
 const DSControlledToggle = (props) => {
-  const { propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnClick } = useDSControlledToggle(props);
-  const { labelOn, labelOff, checked, size, value, containerProps, disabled, applyAriaDisabled, readOnly } = propsWithDefault;
-  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 ButtonProps = useMemo(
-    () => ({
-      role: readOnly ? "checkbox" : "switch",
-      "data-testid": "ds-controlled-toggle-checkbox",
-      // removing 'value' could be a breaking change in scenarios where the form is submitted and the value is used...
-      // check https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value
-      value,
-      id: instanceUid,
-      "aria-readonly": readOnly,
-      "aria-disabled": disabled || applyAriaDisabled || readOnly,
-      "aria-checked": checked,
-      "aria-describedby": `${instanceUid}_feedback_message ${instanceUid}_error_message`,
-      readOnly,
-      disabled,
-      ...globalProps,
-      type: "button",
-      buttonType: "raw",
-      onClick: handleOnClick
-    }),
-    [checked, disabled, globalProps, handleOnClick, instanceUid, readOnly, value, applyAriaDisabled]
-  );
-  useLayoutEffect(() => {
-    if (labelTextRef.current) {
-      setIsLongerTextRendering(labelTextRef.current.innerText === longerText);
-    }
-  }, [labelTextRef, longerText, checked]);
-  useLayoutEffect(() => {
-    if (widthTextRef.current) {
-      setWidth(widthTextRef.current.clientWidth);
-    }
-  }, [widthTextRef]);
+  const { propsWithDefault, xstyledProps, width, handleRefOnLabelWidth, handleRefOffLabelWidth, buttonProps } = useDSControlledToggle(props);
+  const {
+    wcagViolationLabelOn,
+    wcagViolationLabelOff,
+    checked,
+    size,
+    containerProps,
+    disabled,
+    applyAriaDisabled,
+    readOnly
+  } = propsWithDefault;
+  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);
   return /* @__PURE__ */ jsx(
     StyledContainer,
     {
-      size,
-      "data-testid": "ds-controlled-toggle",
+      $size: size,
+      "data-testid": CONTROLLED_TOGGLE_DATA_TESTID.CONTROLLED_CONTAINER,
       ...containerProps,
       ...xstyledProps,
       disabled,
-      children: /* @__PURE__ */ jsx(AddTooltipOnReadOnly, { readOnly, children: /* @__PURE__ */ jsxs(StyledButton, { ...ButtonProps, children: [
-        /* @__PURE__ */ jsx(StyledLabel, { checked, size, width, children: /* @__PURE__ */ jsxs(
-          StyledVisibleContent,
-          {
-            checked,
-            size,
-            readOnly,
-            disabled,
-            applyAriaDisabled,
-            children: [
-              /* @__PURE__ */ jsx(StyledCircle, { checked, size, readOnly, disabled }),
-              /* @__PURE__ */ jsx(
-                StyledText,
-                {
-                  innerRef: labelTextRef,
-                  isLongerTextRendering,
-                  checked,
-                  size,
-                  disabled,
-                  applyAriaDisabled,
-                  children: checked ? labelOn : labelOff
-                }
-              )
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsx(SetLabelWidth, { size, innerRef: widthTextRef, "aria-hidden": "true", children: longerText })
-      ] }) })
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: /* @__PURE__ */ jsxs(
+        StyledButton,
+        {
+          ...readOnly ? { "aria-readonly": "true" } : {},
+          ...buttonProps,
+          getOwnerProps,
+          getOwnerPropsArguments,
+          children: [
+            /* @__PURE__ */ jsx(
+              StyledRadiusShape,
+              {
+                $size: size,
+                $width: width,
+                getOwnerProps,
+                getOwnerPropsArguments,
+                children: /* @__PURE__ */ jsxs(
+                  StyledButtonContentWrapper,
+                  {
+                    $checked: checked,
+                    $size: size,
+                    $readOnly: readOnly,
+                    $disabled: disabled,
+                    $applyAriaDisabled: applyAriaDisabled,
+                    getOwnerProps,
+                    getOwnerPropsArguments,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        StyledCircle,
+                        {
+                          $size: size,
+                          $readOnly: readOnly,
+                          $applyAriaDisabled: applyAriaDisabled,
+                          getOwnerProps,
+                          getOwnerPropsArguments
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        StyledTextWrapper,
+                        {
+                          $size: size,
+                          $disabled: disabled,
+                          getOwnerProps,
+                          getOwnerPropsArguments,
+                          children: checked ? wcagViolationLabelOn ?? "ON" : wcagViolationLabelOff ?? "OFF"
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(SetLabelWidth, { $size: size, innerRef: handleRefOnLabelWidth, "aria-hidden": "true", children: wcagViolationLabelOn ?? "ON" }),
+            /* @__PURE__ */ jsx(SetLabelWidth, { $size: size, innerRef: handleRefOffLabelWidth, "aria-hidden": "true", children: wcagViolationLabelOff ?? "OFF" })
+          ]
+        }
+      )
     }
   );
 };
-DSControlledToggle.displayName = DSFormToggleName;
+DSControlledToggle.displayName = DSControlledToggleName;
 const DSControlledToggleWithSchema = describe(DSControlledToggle);
 DSControlledToggleWithSchema.propTypes = DSControlledTogglePropTypesSchema;
 export {

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, useLayoutEffect } from 'react';\nimport type { DSButtonV2T } 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, handleOnClick } = useDSControlledToggle(props);\n  const { labelOn, labelOff, checked, size, value, containerProps, disabled, applyAriaDisabled, readOnly } =\n    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: DSButtonV2T.Props = useMemo(\n    () => ({\n      role: readOnly ? 'checkbox' : 'switch',\n      'data-testid': 'ds-controlled-toggle-checkbox',\n      // removing 'value' could be a breaking change in scenarios where the form is submitted and the value is used...\n      // check https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value\n      value,\n      id: instanceUid,\n      'aria-readonly': readOnly,\n      'aria-disabled': disabled || applyAriaDisabled || readOnly,\n      'aria-checked': checked,\n      'aria-describedby': `${instanceUid}_feedback_message ${instanceUid}_error_message`,\n      readOnly,\n      disabled,\n      ...(globalProps as unknown as DSButtonV2T.Props),\n      type: 'button',\n      buttonType: 'raw',\n      onClick: handleOnClick,\n    }),\n    [checked, disabled, globalProps, handleOnClick, instanceUid, readOnly, value, applyAriaDisabled],\n  );\n\n  useLayoutEffect(() => {\n    if (labelTextRef.current) {\n      setIsLongerTextRendering(labelTextRef.current.innerText === longerText);\n    }\n  }, [labelTextRef, longerText, checked]);\n\n  useLayoutEffect(() => {\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\n              checked={checked}\n              size={size}\n              readOnly={readOnly}\n              disabled={disabled}\n              applyAriaDisabled={applyAriaDisabled}\n            >\n              <StyledCircle checked={checked} size={size} readOnly={readOnly} disabled={disabled} />\n              <StyledText\n                innerRef={labelTextRef}\n                isLongerTextRendering={isLongerTextRendering}\n                checked={checked}\n                size={size}\n                disabled={disabled}\n                applyAriaDisabled={applyAriaDisabled}\n              >\n                {checked ? labelOn : labelOff}\n              </StyledText>\n            </StyledVisibleContent>\n          </StyledLabel>\n          <SetLabelWidth size={size} innerRef={widthTextRef} aria-hidden=\"true\">\n            {longerText}\n          </SetLabelWidth>\n        </StyledButton>\n      </AddTooltipOnReadOnly>\n    </StyledContainer>\n  );\n};\n\nDSControlledToggle.displayName = DSFormToggleName;\nconst DSControlledToggleWithSchema = describe(DSControlledToggle);\nDSControlledToggleWithSchema.propTypes = DSControlledTogglePropTypesSchema;\n\nexport { DSControlledToggle, DSControlledToggleWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC0EX,SAOE,KAPF;AA1EZ,SAAgB,UAAU,SAAS,QAAQ,uBAAuB;AAElE,SAAS,gBAAgB;AACzB,SAAS,yCAAmE;AAC5E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AAErC,MAAM,qBAAqE,CAAC,UAAU;AACpF,QAAM,EAAE,kBAAkB,aAAa,cAAc,aAAa,cAAc,IAAI,sBAAsB,KAAK;AAC/G,QAAM,EAAE,SAAS,UAAU,SAAS,MAAM,OAAO,gBAAgB,UAAU,mBAAmB,SAAS,IACrG;AAEF,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAAkB,KAAK;AACjF,QAAM,CAAC,OAAO,QAAQ,IAAI,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,cAAiC;AAAA,IACrC,OAAO;AAAA,MACL,MAAM,WAAW,aAAa;AAAA,MAC9B,eAAe;AAAA;AAAA;AAAA,MAGf;AAAA,MACA,IAAI;AAAA,MACJ,iBAAiB;AAAA,MACjB,iBAAiB,YAAY,qBAAqB;AAAA,MAClD,gBAAgB;AAAA,MAChB,oBAAoB,GAAG,WAAW,qBAAqB,WAAW;AAAA,MAClE;AAAA,MACA;AAAA,MACA,GAAI;AAAA,MACJ,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,CAAC,SAAS,UAAU,aAAa,eAAe,aAAa,UAAU,OAAO,iBAAiB;AAAA,EACjG;AAEA,kBAAgB,MAAM;AACpB,QAAI,aAAa,SAAS;AACxB,+BAAyB,aAAa,QAAQ,cAAc,UAAU;AAAA,IACxE;AAAA,EACF,GAAG,CAAC,cAAc,YAAY,OAAO,CAAC;AAEtC,kBAAgB,MAAM;AACpB,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,8BAAC,wBAAqB,UACpB,+BAAC,gBAAc,GAAG,aAChB;AAAA,4BAAC,eAAY,SAAkB,MAAY,OACzC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YAEA;AAAA,kCAAC,gBAAa,SAAkB,MAAY,UAAoB,UAAoB;AAAA,cACpF;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAU;AAAA,kBACV;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBAEC,oBAAU,UAAU;AAAA;AAAA,cACvB;AAAA;AAAA;AAAA,QACF,GACF;AAAA,QACA,oBAAC,iBAAc,MAAY,UAAU,cAAc,eAAY,QAC5D,sBACH;AAAA,SACF,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,SAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { useDSControlledToggle } from './config/useDSControlledToggle.js';\nimport { CONTROLLED_TOGGLE_DATA_TESTID, DSControlledToggleName } from './constants/index.js';\nimport { DSControlledTogglePropTypesSchema, type DSControlledToggleT } from './react-desc-prop-types.js';\nimport {\n  SetLabelWidth,\n  StyledButton,\n  StyledButtonContentWrapper,\n  StyledCircle,\n  StyledContainer,\n  StyledRadiusShape,\n  StyledTextWrapper,\n} from './styles.js';\n\nconst DSControlledToggle: React.ComponentType<DSControlledToggleT.Props> = (props) => {\n  const { propsWithDefault, xstyledProps, width, handleRefOnLabelWidth, handleRefOffLabelWidth, buttonProps } =\n    useDSControlledToggle(props);\n  const {\n    wcagViolationLabelOn,\n    wcagViolationLabelOff,\n    checked,\n    size,\n    containerProps,\n    disabled,\n    applyAriaDisabled,\n    readOnly,\n  } = propsWithDefault;\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);\n\n  return (\n    <StyledContainer\n      $size={size}\n      data-testid={CONTROLLED_TOGGLE_DATA_TESTID.CONTROLLED_CONTAINER}\n      {...containerProps}\n      {...xstyledProps}\n      disabled={disabled}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledButton\n        // as per morning meeting, juan said \"readOnly\" in toggle should receive aria-readonly, aria-readonly is valid for switch role, the html readonly attribute is not\n        {...(readOnly ? { 'aria-readonly': 'true' } : {})}\n        {...buttonProps}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <StyledRadiusShape\n          $size={size}\n          $width={width}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <StyledButtonContentWrapper\n            $checked={checked}\n            $size={size}\n            $readOnly={readOnly}\n            $disabled={disabled}\n            $applyAriaDisabled={applyAriaDisabled}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            <StyledCircle\n              $size={size}\n              $readOnly={readOnly}\n              $applyAriaDisabled={applyAriaDisabled}\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n            />\n            <StyledTextWrapper\n              $size={size}\n              $disabled={disabled}\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n            >\n              {checked ? (wcagViolationLabelOn ?? 'ON') : (wcagViolationLabelOff ?? 'OFF')}\n            </StyledTextWrapper>\n          </StyledButtonContentWrapper>\n        </StyledRadiusShape>\n        <SetLabelWidth $size={size} innerRef={handleRefOnLabelWidth} aria-hidden=\"true\">\n          {wcagViolationLabelOn ?? 'ON'}\n        </SetLabelWidth>\n        <SetLabelWidth $size={size} innerRef={handleRefOffLabelWidth} aria-hidden=\"true\">\n          {wcagViolationLabelOff ?? 'OFF'}\n        </SetLabelWidth>\n      </StyledButton>\n    </StyledContainer>\n  );\n};\n\nDSControlledToggle.displayName = DSControlledToggleName;\nconst DSControlledToggleWithSchema = describe(DSControlledToggle);\nDSControlledToggleWithSchema.propTypes = DSControlledTogglePropTypesSchema;\n\nexport { DSControlledToggle, DSControlledToggleWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACqDb,SASE,KATF;AArDV,SAAS,UAAU,qBAAqB;AAExC,SAAS,6BAA6B;AACtC,SAAS,+BAA+B,8BAA8B;AACtE,SAAS,yCAAmE;AAC5E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,qBAAqE,CAAC,UAAU;AACpF,QAAM,EAAE,kBAAkB,cAAc,OAAO,uBAAuB,wBAAwB,YAAY,IACxG,sBAAsB,KAAK;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,gBAAgB;AAEhF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,eAAa,8BAA8B;AAAA,MAC1C,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UAEE,GAAI,WAAW,EAAE,iBAAiB,OAAO,IAAI,CAAC;AAAA,UAC9C,GAAG;AAAA,UACJ;AAAA,UACA;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR;AAAA,gBACA;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,UAAU;AAAA,oBACV,OAAO;AAAA,oBACP,WAAW;AAAA,oBACX,WAAW;AAAA,oBACX,oBAAoB;AAAA,oBACpB;AAAA,oBACA;AAAA,oBAEA;AAAA;AAAA,wBAAC;AAAA;AAAA,0BACC,OAAO;AAAA,0BACP,WAAW;AAAA,0BACX,oBAAoB;AAAA,0BACpB;AAAA,0BACA;AAAA;AAAA,sBACF;AAAA,sBACA;AAAA,wBAAC;AAAA;AAAA,0BACC,OAAO;AAAA,0BACP,WAAW;AAAA,0BACX;AAAA,0BACA;AAAA,0BAEC,oBAAW,wBAAwB,OAAS,yBAAyB;AAAA;AAAA,sBACxE;AAAA;AAAA;AAAA,gBACF;AAAA;AAAA,YACF;AAAA,YACA,oBAAC,iBAAc,OAAO,MAAM,UAAU,uBAAuB,eAAY,QACtE,kCAAwB,MAC3B;AAAA,YACA,oBAAC,iBAAc,OAAO,MAAM,UAAU,wBAAwB,eAAY,QACvE,mCAAyB,OAC5B;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,SAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
   "names": []
 }

package/dist/esm/config/useDSControlledToggle.js

@@ -1,8 +1,10 @@
 import * as React from "react";
-import React2, { useCallback } from "react";
 import { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
+import React2, { useCallback } from "react";
 import { uid } from "uid";
 import { DSControlledTogglePropTypes, defaultProps } from "../react-desc-prop-types.js";
+import { useGetButtonProps } from "./useGetButtonProps.js";
+import { useGetWidestLabelWidth } from "./useGetWidestLabelWidth.js";
 import { useValidateProps } from "./useValidateProps.js";
 const useDSControlledToggle = (propsFromUser) => {
   const propsWithDefault = useMemoMergePropsWithDefault(propsFromUser, defaultProps);
@@ -23,15 +25,36 @@ const useDSControlledToggle = (propsFromUser) => {
   const xstyledProps = useGetXstyledProps(propsWithDefault);
   const { id } = propsWithDefault;
   const instanceUid = React2.useMemo(() => id || uid(5), [id]);
+  const { width, handleRefOnLabelWidth, handleRefOffLabelWidth } = useGetWidestLabelWidth();
+  const buttonProps = useGetButtonProps({
+    handleOnClick,
+    globalProps,
+    instanceUid,
+    propsWithDefault
+  });
   return React2.useMemo(
     () => ({
       propsWithDefault,
+      width,
+      handleRefOnLabelWidth,
+      handleRefOffLabelWidth,
       globalProps,
+      buttonProps,
       xstyledProps,
       instanceUid,
       handleOnClick
     }),
-    [propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnClick]
+    [
+      propsWithDefault,
+      width,
+      handleRefOnLabelWidth,
+      handleRefOffLabelWidth,
+      globalProps,
+      buttonProps,
+      xstyledProps,
+      instanceUid,
+      handleOnClick
+    ]
   );
 };
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useDSControlledToggle.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\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, applyAriaDisabled, readOnly, onChange } = propsWithDefault;\n  const handleOnClick = useCallback(\n    (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      if (disabled || applyAriaDisabled || readOnly) return;\n      if (onChange) {\n        onChange(e);\n      }\n    },\n    [disabled, applyAriaDisabled, readOnly, onChange],\n  );\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalProps = useGetGlobalAttributes<DSControlledToggleT.InternalProps>(propsWithDefault, {\n    onClick: handleOnClick,\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      handleOnClick,\n    }),\n    [propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnClick],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,mBAAmB;AACnC,SAAS,wBAAwB,oBAAoB,oCAAoC;AACzF,SAAS,WAAW;AACpB,SAAmC,6BAA6B,oBAAoB;AACpF,SAAS,wBAAwB;AAS1B,MAAM,wBAAwB,CAAC,kBAA6C;AAIjF,QAAM,mBAAmB,6BAAgE,eAAe,YAAY;AACpH,mBAAiB,kBAAkB,2BAA2B;AAI9D,QAAM,EAAE,UAAU,mBAAmB,UAAU,SAAS,IAAI;AAC5D,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAgG;AAC/F,UAAI,YAAY,qBAAqB,SAAU;AAC/C,UAAI,UAAU;AACZ,iBAAS,CAAC;AAAA,MACZ;AAAA,IACF;AAAA,IACA,CAAC,UAAU,mBAAmB,UAAU,QAAQ;AAAA,EAClD;AAIA,QAAM,cAAc,uBAA0D,kBAAkB;AAAA,IAC9F,SAAS;AAAA,EACX,CAAC;AACD,QAAM,eAAe,mBAAmB,gBAAgB;AACxD,QAAM,EAAE,GAAG,IAAI;AACf,QAAM,cAAcA,OAAM,QAAQ,MAAM,MAAM,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAM1D,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,aAAa,cAAc,aAAa,aAAa;AAAA,EAC1E;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport React, { useCallback } from 'react';\nimport { uid } from 'uid';\nimport { type DSControlledToggleT, DSControlledTogglePropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useGetButtonProps } from './useGetButtonProps.js';\nimport { useGetWidestLabelWidth } from './useGetWidestLabelWidth.js';\nimport { useValidateProps } from './useValidateProps.js';\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, applyAriaDisabled, readOnly, onChange } = propsWithDefault;\n  const handleOnClick = useCallback(\n    (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      if (disabled || applyAriaDisabled || readOnly) return;\n      if (onChange) {\n        onChange(e);\n      }\n    },\n    [disabled, applyAriaDisabled, readOnly, onChange],\n  );\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalProps = useGetGlobalAttributes<DSControlledToggleT.InternalProps>(propsWithDefault, {\n    onClick: handleOnClick,\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 { width, handleRefOnLabelWidth, handleRefOffLabelWidth } = useGetWidestLabelWidth();\n  const buttonProps = useGetButtonProps({\n    handleOnClick,\n    globalProps,\n    instanceUid,\n    propsWithDefault,\n  });\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      width,\n      handleRefOnLabelWidth,\n      handleRefOffLabelWidth,\n      globalProps,\n      buttonProps,\n      xstyledProps,\n      instanceUid,\n      handleOnClick,\n    }),\n    [\n      propsWithDefault,\n      width,\n      handleRefOnLabelWidth,\n      handleRefOffLabelWidth,\n      globalProps,\n      buttonProps,\n      xstyledProps,\n      instanceUid,\n      handleOnClick,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,wBAAwB,oBAAoB,oCAAoC;AACzF,OAAOA,UAAS,mBAAmB;AACnC,SAAS,WAAW;AACpB,SAAmC,6BAA6B,oBAAoB;AACpF,SAAS,yBAAyB;AAClC,SAAS,8BAA8B;AACvC,SAAS,wBAAwB;AAE1B,MAAM,wBAAwB,CAAC,kBAA6C;AAIjF,QAAM,mBAAmB,6BAAgE,eAAe,YAAY;AACpH,mBAAiB,kBAAkB,2BAA2B;AAI9D,QAAM,EAAE,UAAU,mBAAmB,UAAU,SAAS,IAAI;AAC5D,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAgG;AAC/F,UAAI,YAAY,qBAAqB,SAAU;AAC/C,UAAI,UAAU;AACZ,iBAAS,CAAC;AAAA,MACZ;AAAA,IACF;AAAA,IACA,CAAC,UAAU,mBAAmB,UAAU,QAAQ;AAAA,EAClD;AAIA,QAAM,cAAc,uBAA0D,kBAAkB;AAAA,IAC9F,SAAS;AAAA,EACX,CAAC;AACD,QAAM,eAAe,mBAAmB,gBAAgB;AACxD,QAAM,EAAE,GAAG,IAAI;AACf,QAAM,cAAcA,OAAM,QAAQ,MAAM,MAAM,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAI1D,QAAM,EAAE,OAAO,uBAAuB,uBAAuB,IAAI,uBAAuB;AACxF,QAAM,cAAc,kBAAkB;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": ["React"]
 }