@elliemae/ds-form-toggle 3.70.0-next.43 → 3.70.0-next.44

package/dist/esm/styles.js

@@ -1,134 +0,0 @@
-import * as React from "react";
-import { styled, css, xStyledCommonProps } from "@elliemae/ds-system";
-import { DSButtonV3 } from "@elliemae/ds-button-v2";
-import { DSControlledToggleName, CONTROLLED_TOGGLE_SLOTS } from "./constants/index.js";
-import {
-  containerHeight,
-  borderRadius,
-  labelHeight,
-  getInterpolatedBorderDsToggleColorByProps,
-  getInterpolatedBgDsToggleColorByProps,
-  circleValues,
-  handleFontSize,
-  margin,
-  handleCursors
-} from "./utils/styleHelpers.js";
-const focusBorders = css`
-  &:focus-within {
-    &:after {
-      content: '';
-      top: -3px;
-      right: -3px;
-      bottom: -3px;
-      left: -3px;
-      border: 2px solid ${({ theme }) => theme.colors.brand["700"]};
-      border-radius: 20px;
-      position: absolute;
-    }
-  }
-`;
-const hoverStyled = css`
-  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"];
-  return theme.colors.neutral["700"];
-}};
-`;
-const StyledContainer = styled("div", {
-  name: DSControlledToggleName,
-  slot: CONTROLLED_TOGGLE_SLOTS.CONTROLLED_CONTAINER
-})`
-  display: inline-flex;
-  width: fit-content;
-  justify-content: center;
-  align-items: center;
-  height: ${({ $size }) => containerHeight[$size]};
-  border-radius: ${({ $size }) => borderRadius[$size]};
-  outline: none;
-  position: relative;
-  z-index: 0;
-  border: 2px solid transparent;
-  ${({ disabled }) => !disabled && focusBorders};
-  ${xStyledCommonProps}
-`;
-const StyledRadiusShape = styled("div", {
-  name: DSControlledToggleName,
-  slot: CONTROLLED_TOGGLE_SLOTS.CONTAINER_WITH_RADIUS_SHAPE
-})`
-  width: ${({ $width, $size }) => $width ? `calc(${$width}px + ${margin[$size]})` : "auto"};
-  height: ${({ $size }) => labelHeight[$size]};
-  z-index: 2;
-  outline: none;
-  border-radius: ${({ $size }) => labelHeight[$size]};
-`;
-const StyledButtonContentWrapper = styled("div", {
-  name: DSControlledToggleName,
-  slot: 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(${labelHeight[$size]} - 4px)`};
-  border: ${(props) => props.$size === "s" ? `1px solid ${getInterpolatedBorderDsToggleColorByProps(props)}` : `
-    2px solid ${getInterpolatedBorderDsToggleColorByProps(props)}
-    `};
-  transition: background-color 0.2s;
-  background-color: ${getInterpolatedBgDsToggleColorByProps};
-  &:hover {
-    cursor: ${({ $disabled, $applyAriaDisabled, $readOnly }) => handleCursors($disabled, $applyAriaDisabled, $readOnly)};
-    ${({ $disabled, $applyAriaDisabled, $readOnly }) => !$disabled && !$applyAriaDisabled && !$readOnly && hoverStyled}
-  }
-`;
-const StyledCircle = styled("div", {
-  name: DSControlledToggleName,
-  slot: CONTROLLED_TOGGLE_SLOTS.CIRCLE
-})`
-  height: ${({ $size }) => circleValues[$size]};
-  width: ${({ $size }) => circleValues[$size]};
-  border-radius: 50%;
-  background-color: ${({ theme, $readOnly, $applyAriaDisabled }) => $readOnly || $applyAriaDisabled ? theme.colors.neutral[100] : theme.colors.neutral["000"]};
-`;
-const StyledTextWrapper = styled("div", {
-  name: DSControlledToggleName,
-  slot: CONTROLLED_TOGGLE_SLOTS.TEXT_WRAPPER
-})`
-  flex-grow: 1;
-  line-height: ${({ theme, $size }) => handleFontSize($size, theme)};
-  font-size: ${({ theme, $size }) => handleFontSize($size, theme)};
-  font-weight: ${({ theme }) => theme.fontWeights.semibold};
-  color: ${({ theme, $disabled }) => $disabled ? "#5c6574" : theme.colors.neutral["000"]};
-`;
-const StyledButton = styled(DSButtonV3, {
-  name: DSControlledToggleName,
-  slot: CONTROLLED_TOGGLE_SLOTS.TOGGLE_CHECKBOX
-})`
-  margin: 0;
-  padding: 0;
-  z-index: 20;
-  border-radius: 20px;
-`;
-const SetLabelWidth = styled.div`
-  font-size: ${({ theme, $size }) => handleFontSize($size, theme)};
-  font-weight: ${({ theme }) => theme.fontWeights.semibold};
-  width: auto;
-  position: absolute;
-  white-space: nowrap;
-  visibility: hidden;
-`;
-export {
-  SetLabelWidth,
-  StyledButton,
-  StyledButtonContentWrapper,
-  StyledCircle,
-  StyledContainer,
-  StyledRadiusShape,
-  StyledTextWrapper
-};
-//# sourceMappingURL=styles.js.map

package/dist/esm/styles.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,KAAK,0BAA0B;AAChD,SAAS,kBAAkB;AAE3B,SAAS,wBAAwB,+BAA+B;AAChE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAQK,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlE,MAAM,cAAc;AAAA,sBACE,CAAC,EAAE,UAAU,MAAM,MAAM;AAC3C,MAAI,SAAU,QAAO,MAAM,OAAO,MAAM,KAAK;AAC7C,SAAO,MAAM,OAAO,QAAQ,KAAK;AACnC,CAAC;AAAA;AAAA,kBAEe,CAAC,EAAE,UAAU,MAAM,MAAM;AACvC,MAAI,SAAU,QAAO,MAAM,OAAO,MAAM,KAAK;AAC7C,SAAO,MAAM,OAAO,QAAQ,KAAK;AACnC,CAAC;AAAA;AAOI,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,wBAAwB;AAChC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,YAKW,CAAC,EAAE,MAAM,MAAM,gBAAgB,KAAK,CAAC;AAAA,mBAC9B,CAAC,EAAE,MAAM,MAAM,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjD,CAAC,EAAE,SAAS,MAAM,CAAC,YAAY,YAAY;AAAA,IAC3C,kBAAkB;AAAA;AAMf,MAAM,oBAAoB,OAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,wBAAwB;AAChC,CAAC;AAAA,WACU,CAAC,EAAE,QAAQ,MAAM,MAAO,SAAS,QAAQ,MAAM,QAAQ,OAAO,KAAK,CAAC,MAAM,MAAO;AAAA,YAChF,CAAC,EAAE,MAAM,MAAM,YAAY,KAAK,CAAC;AAAA;AAAA;AAAA,mBAG1B,CAAC,EAAE,MAAM,MAAM,YAAY,KAAK,CAAC;AAAA;AAU7C,MAAM,6BAA6B,OAAO,OAAO;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,wBAAwB;AAChC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMmB,CAAC,EAAE,SAAS,MAAO,WAAW,gBAAgB,KAAM;AAAA,mBACrD,CAAC,EAAE,MAAM,MAAM,QAAQ,YAAY,KAAK,CAAC,SAAS;AAAA,YACzD,CAAC,UACT,MAAM,UAAU,MACZ,aAAa,0CAA0C,KAAK,CAAC,KAC7D;AAAA,gBACQ,0CAA0C,KAAK,CAAC;AAAA,KAC3D;AAAA;AAAA,sBAEiB,qCAAqC;AAAA;AAAA,cAE7C,CAAC,EAAE,WAAW,oBAAoB,UAAU,MACpD,cAAc,WAAW,oBAAoB,SAAS,CAAC;AAAA,MACvD,CAAC,EAAE,WAAW,oBAAoB,UAAU,MAAM,CAAC,aAAa,CAAC,sBAAsB,CAAC,aAAa,WAAW;AAAA;AAAA;AAS/G,MAAM,eAAe,OAAO,OAAO;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,wBAAwB;AAChC,CAAC;AAAA,YACW,CAAC,EAAE,MAAM,MAAM,aAAa,KAAK,CAAC;AAAA,WACnC,CAAC,EAAE,MAAM,MAAM,aAAa,KAAK,CAAC;AAAA;AAAA,sBAEvB,CAAC,EAAE,OAAO,WAAW,mBAAmB,MAC1D,aAAa,qBAAqB,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAOtF,MAAM,oBAAoB,OAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,wBAAwB;AAChC,CAAC;AAAA;AAAA,iBAEgB,CAAC,EAAE,OAAO,MAAM,MAAM,eAAe,OAAO,KAAK,CAAC;AAAA,eACpD,CAAC,EAAE,OAAO,MAAM,MAAM,eAAe,OAAO,KAAK,CAAC;AAAA,iBAChD,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,QAAQ;AAAA,WAC/C,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,YAAY,MAAM,OAAO,QAAQ,KAAK,CAAE;AAAA;AAGnF,MAAM,eAAe,OAAO,YAAY;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,wBAAwB;AAChC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBM,MAAM,gBAAgB,OAAO;AAAA,eACrB,CAAC,EAAE,OAAO,MAAM,MAAM,eAAe,OAAO,KAAK,CAAC;AAAA,iBAChD,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;",
-  "names": []
-}

package/dist/esm/utils/styleHelpers.js

@@ -1,86 +0,0 @@
-import * as React from "react";
-import { th } from "@elliemae/ds-system";
-const getStyleState = ({
-  $checked,
-  $disabled,
-  $applyAriaDisabled,
-  $readOnly
-}) => {
-  if ($disabled) return "disabled";
-  if ($applyAriaDisabled) return "applyAriaDisabled";
-  if ($readOnly) return "readOnly";
-  if ($checked) return "checked";
-  return "unchecked";
-};
-const circleValues = {
-  s: "14px",
-  m: "20px",
-  l: "28px"
-};
-const margin = {
-  s: "26px",
-  m: "34px",
-  l: "42px"
-};
-const containerHeight = {
-  s: "20px",
-  m: "28px",
-  l: "36px"
-};
-const labelHeight = {
-  s: "16px",
-  m: "24px",
-  l: "32px"
-};
-const borderRadius = {
-  s: "16px",
-  m: "20px",
-  l: "22px"
-};
-const handleFontSize = (size, { fontSizes }) => {
-  switch (size) {
-    case "s":
-      return fontSizes.microText[200];
-    case "l":
-      return "20px";
-    case "m":
-    default:
-      return "15px";
-  }
-};
-const bgColorsMap = {
-  disabled: "neutral-100",
-  applyAriaDisabled: "neutral-500",
-  readOnly: "neutral-500",
-  checked: "brand-600",
-  unchecked: "neutral-500"
-};
-const getInterpolatedBgDSToggleColor = (styleState, props) => th.color(bgColorsMap[styleState])(props);
-const getInterpolatedBgDsToggleColorByProps = (props) => getInterpolatedBgDSToggleColor(getStyleState(props), props);
-const borderColorsMap = {
-  disabled: "neutral-300",
-  applyAriaDisabled: "neutral-500",
-  readOnly: "neutral-500",
-  checked: "brand-700",
-  unchecked: "neutral-600"
-};
-const getInterpolatedBorderDSToggleColor = (styleState, props) => th.color(borderColorsMap[styleState])(props);
-const getInterpolatedBorderDsToggleColorByProps = (props) => getInterpolatedBorderDSToggleColor(getStyleState(props), props);
-const handleCursors = (disabled, applyAriaDisabled, readOnly) => {
-  if (disabled) return "not-allowed";
-  if (applyAriaDisabled) return "default";
-  if (readOnly) return "default";
-  return "pointer";
-};
-export {
-  borderRadius,
-  circleValues,
-  containerHeight,
-  getInterpolatedBgDsToggleColorByProps,
-  getInterpolatedBorderDsToggleColorByProps,
-  handleCursors,
-  handleFontSize,
-  labelHeight,
-  margin
-};
-//# sourceMappingURL=styleHelpers.js.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styleHelpers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAA+B;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,GAAG,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,GAAG,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/types/styles.d.ts

@@ -1,44 +0,0 @@
-import type { DSControlledToggleT } from './react-desc-prop-types.js';
-interface StyledContainerT {
-    $size: DSControlledToggleT.ToggleSize;
-    disabled: boolean;
-}
-export declare const StyledContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledContainerT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
-interface StyledRadiusShapeT {
-    $width: number;
-    $size: DSControlledToggleT.ToggleSize;
-}
-export declare const StyledRadiusShape: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledRadiusShapeT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
-interface StyledButtonContentWrapperT {
-    $checked: boolean;
-    $size: DSControlledToggleT.ToggleSize;
-    $disabled: boolean;
-    $applyAriaDisabled: boolean;
-    $readOnly: boolean;
-}
-export declare const StyledButtonContentWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledButtonContentWrapperT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
-interface StyledCircleT {
-    $size: DSControlledToggleT.ToggleSize;
-    $readOnly: boolean;
-    $applyAriaDisabled: boolean;
-}
-export declare const StyledCircle: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledCircleT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
-interface StyledTextWrapperT {
-    $size: DSControlledToggleT.ToggleSize;
-    $disabled: boolean;
-}
-export declare const StyledTextWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledTextWrapperT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
-export declare const StyledButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV3T.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV3T.Props>>, never>;
-interface SetLabelWidthT {
-    $size: DSControlledToggleT.ToggleSize;
-}
-/**
- * This should not be required, we are doing this to keep the wcagViolationLabelOn/wcagViolationLabelOff working
- *   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
- *
- * ---
- *
- * 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
- */
-export declare const SetLabelWidth: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, SetLabelWidthT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
-export {};

package/dist/types/utils/styleHelpers.d.ts

@@ -1,41 +0,0 @@
-import { type PropsWithTheme } from '@elliemae/ds-system';
-import type { DSControlledToggleT } from '../react-desc-prop-types.js';
-export declare const circleValues: {
-    s: string;
-    m: string;
-    l: string;
-};
-export declare const margin: {
-    s: string;
-    m: string;
-    l: string;
-};
-export declare const containerHeight: {
-    s: string;
-    m: string;
-    l: string;
-};
-export declare const labelHeight: {
-    s: string;
-    m: string;
-    l: string;
-};
-export declare const borderRadius: {
-    s: string;
-    m: string;
-    l: string;
-};
-export declare const handleFontSize: (size: DSControlledToggleT.ToggleSize, { fontSizes }: PropsWithTheme["theme"]) => string;
-export declare const getInterpolatedBgDsToggleColorByProps: (props: PropsWithTheme<{
-    $checked: boolean;
-    $disabled: boolean;
-    $applyAriaDisabled: boolean;
-    $readOnly: boolean;
-}>) => string;
-export declare const getInterpolatedBorderDsToggleColorByProps: (props: PropsWithTheme<{
-    $checked: boolean;
-    $disabled: boolean;
-    $applyAriaDisabled: boolean;
-    $readOnly: boolean;
-}>) => string;
-export declare const handleCursors: (disabled: boolean, applyAriaDisabled: boolean, readOnly: boolean) => string;