@elliemae/ds-form-radio 3.29.1 → 3.30.0-next.0

package/dist/cjs/ControlledRadio.js

@@ -98,7 +98,6 @@ const DSControlledRadio = (props) => {
         readOnly,
         checked,
         "data-testid": "ds-radio-label",
-        wrapLabel,
         children: wrapLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledWrapLabel, { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: label })
       }
     )

package/dist/cjs/ControlledRadio.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ControlledRadio.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useCallback, useMemo } from 'react';\nimport {\n  describe,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n} from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledContainer, StyledWrapLabel, StyledInput, StyledLabel, StyledRadio } from './styles.js';\nimport type { DSControlledRadioT } from './react-desc-prop-types.js';\nimport { DSControlledRadioPropTypes, DSControlledRadioPropTypesSchema, defaultProps } from './react-desc-prop-types.js';\nimport { useValidateProps } from './config/useValidateProps.js';\n\nconst DSControlledRadio: React.ComponentType<DSControlledRadioT.Props> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSControlledRadioT.InternalProps>(props, defaultProps);\n  useValidateProps(props, DSControlledRadioPropTypes);\n  const { checked, visualOnly, device, hasError, innerRef, value, wrapLabel, onChange } = propsWithDefault;\n\n  const handleOnChange = useCallback(\n    (e: React.ChangeEvent | React.KeyboardEvent) => {\n      if (onChange && value) onChange(value, e);\n    },\n    [onChange, value],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter') handleOnChange(e);\n    },\n    [handleOnChange],\n  );\n\n  const sharedListeners = React.useMemo(\n    () => ({\n      onKeyDown: handleKeyDown,\n      // we can't declare onChange here, we are \"overwriting\" the event,\n      //   if we put it here we invoke it twice, once with our overwritten arguments, once with the native ones\n      // onChange: handleOnChange,\n    }),\n    [handleKeyDown],\n  );\n  const { id, disabled, readOnly, label, className, ...restGlobals } = useGetGlobalAttributes<DSControlledRadioT.Props>(\n    propsWithDefault,\n    sharedListeners,\n  );\n\n  const instanceUid = useMemo(() => id || `ds-form-radio-${uid(5)}`, [id]);\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n  return (\n    <StyledContainer device={device} data-testid=\"ds-radio-container\" className={className} {...xstyledProps}>\n      <StyledRadio device={device} checked={checked} hasError={hasError} disabled={disabled} readOnly={readOnly}>\n        {!visualOnly ? (\n          <StyledInput\n            data-testid=\"ds-radio\"\n            type=\"radio\"\n            {...sharedListeners}\n            {...restGlobals}\n            id={instanceUid}\n            innerRef={innerRef}\n            onChange={handleOnChange}\n            checked={checked}\n            disabled={disabled}\n          />\n        ) : null}\n      </StyledRadio>\n      {label && (\n        <StyledLabel\n          device={device}\n          htmlFor={instanceUid}\n          disabled={disabled}\n          readOnly={readOnly}\n          checked={checked}\n          data-testid=\"ds-radio-label\"\n          wrapLabel={wrapLabel}\n        >\n          {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n        </StyledLabel>\n      )}\n    </StyledContainer>\n  );\n};\n\nDSControlledRadio.propTypes = DSControlledRadioPropTypesSchema;\nDSControlledRadio.displayName = 'DSControlledRadio';\nconst DSControlledRadioWithSchema = describe(DSControlledRadio);\nDSControlledRadioWithSchema.propTypes = DSControlledRadioPropTypesSchema;\n\nexport { DSControlledRadio, DSControlledRadioWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoDnB;AAnDJ,mBAA4C;AAC5C,8BAKO;AACP,iBAAoB;AACpB,uCAA2C;AAC3C,oBAAwF;AAExF,mCAA2F;AAC3F,8BAAiC;AAEjC,MAAM,oBAAmE,CAAC,UAAU;AAClF,QAAM,uBAAmB,sDAA+D,OAAO,yCAAY;AAC3G,gDAAiB,OAAO,uDAA0B;AAClD,QAAM,EAAE,SAAS,YAAY,QAAQ,UAAU,UAAU,OAAO,WAAW,SAAS,IAAI;AAExF,QAAM,qBAAiB;AAAA,IACrB,CAAC,MAA+C;AAC9C,UAAI,YAAY;AAAO,iBAAS,OAAO,CAAC;AAAA,IAC1C;AAAA,IACA,CAAC,UAAU,KAAK;AAAA,EAClB;AAEA,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ;AAAS,uBAAe,CAAC;AAAA,IACzC;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,kBAAkB,aAAAA,QAAM;AAAA,IAC5B,OAAO;AAAA,MACL,WAAW;AAAA;AAAA;AAAA;AAAA,IAIb;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AACA,QAAM,EAAE,IAAI,UAAU,UAAU,OAAO,WAAW,GAAG,YAAY,QAAI;AAAA,IACnE;AAAA,IACA;AAAA,EACF;AAEA,QAAM,kBAAc,sBAAQ,MAAM,MAAM,qBAAiB,gBAAI,CAAC,KAAK,CAAC,EAAE,CAAC;AACvE,QAAM,mBAAe,4CAAmB,gBAAgB;AAExD,SACE,6CAAC,iCAAgB,QAAgB,eAAY,sBAAqB,WAAuB,GAAG,cAC1F;AAAA,gDAAC,6BAAY,QAAgB,SAAkB,UAAoB,UAAoB,UACpF,WAAC,aACA;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,MAAK;AAAA,QACJ,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,IAAI;AAAA,QACJ;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA;AAAA,IACF,IACE,MACN;AAAA,IACC,SACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAY;AAAA,QACZ;AAAA,QAEC,sBAAY,4CAAC,iCAAiB,iBAAM,IAAqB,4CAAC,+DAA2B,OAAO,OAAO;AAAA;AAAA,IACtG;AAAA,KAEJ;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,kCAA8B,kCAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useCallback, useMemo } from 'react';\nimport {\n  describe,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n} from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledContainer, StyledWrapLabel, StyledInput, StyledLabel, StyledRadio } from './styles.js';\nimport type { DSControlledRadioT } from './react-desc-prop-types.js';\nimport { DSControlledRadioPropTypes, DSControlledRadioPropTypesSchema, defaultProps } from './react-desc-prop-types.js';\nimport { useValidateProps } from './config/useValidateProps.js';\n\nconst DSControlledRadio: React.ComponentType<DSControlledRadioT.Props> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSControlledRadioT.InternalProps>(props, defaultProps);\n  useValidateProps(props, DSControlledRadioPropTypes);\n  const { checked, visualOnly, device, hasError, innerRef, value, wrapLabel, onChange } = propsWithDefault;\n\n  const handleOnChange = useCallback(\n    (e: React.ChangeEvent | React.KeyboardEvent) => {\n      if (onChange && value) onChange(value, e);\n    },\n    [onChange, value],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter') handleOnChange(e);\n    },\n    [handleOnChange],\n  );\n\n  const sharedListeners = React.useMemo(\n    () => ({\n      onKeyDown: handleKeyDown,\n      // we can't declare onChange here, we are \"overwriting\" the event,\n      //   if we put it here we invoke it twice, once with our overwritten arguments, once with the native ones\n      // onChange: handleOnChange,\n    }),\n    [handleKeyDown],\n  );\n  const { id, disabled, readOnly, label, className, ...restGlobals } = useGetGlobalAttributes<DSControlledRadioT.Props>(\n    propsWithDefault,\n    sharedListeners,\n  );\n\n  const instanceUid = useMemo(() => id || `ds-form-radio-${uid(5)}`, [id]);\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n  return (\n    <StyledContainer device={device} data-testid=\"ds-radio-container\" className={className} {...xstyledProps}>\n      <StyledRadio device={device} checked={checked} hasError={hasError} disabled={disabled} readOnly={readOnly}>\n        {!visualOnly ? (\n          <StyledInput\n            data-testid=\"ds-radio\"\n            type=\"radio\"\n            {...sharedListeners}\n            {...restGlobals}\n            id={instanceUid}\n            innerRef={innerRef}\n            onChange={handleOnChange}\n            checked={checked}\n            disabled={disabled}\n          />\n        ) : null}\n      </StyledRadio>\n      {label && (\n        <StyledLabel\n          device={device}\n          htmlFor={instanceUid}\n          disabled={disabled}\n          readOnly={readOnly}\n          checked={checked}\n          data-testid=\"ds-radio-label\"\n        >\n          {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n        </StyledLabel>\n      )}\n    </StyledContainer>\n  );\n};\n\nDSControlledRadio.propTypes = DSControlledRadioPropTypesSchema;\nDSControlledRadio.displayName = 'DSControlledRadio';\nconst DSControlledRadioWithSchema = describe(DSControlledRadio);\nDSControlledRadioWithSchema.propTypes = DSControlledRadioPropTypesSchema;\n\nexport { DSControlledRadio, DSControlledRadioWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoDnB;AAnDJ,mBAA4C;AAC5C,8BAKO;AACP,iBAAoB;AACpB,uCAA2C;AAC3C,oBAAwF;AAExF,mCAA2F;AAC3F,8BAAiC;AAEjC,MAAM,oBAAmE,CAAC,UAAU;AAClF,QAAM,uBAAmB,sDAA+D,OAAO,yCAAY;AAC3G,gDAAiB,OAAO,uDAA0B;AAClD,QAAM,EAAE,SAAS,YAAY,QAAQ,UAAU,UAAU,OAAO,WAAW,SAAS,IAAI;AAExF,QAAM,qBAAiB;AAAA,IACrB,CAAC,MAA+C;AAC9C,UAAI,YAAY;AAAO,iBAAS,OAAO,CAAC;AAAA,IAC1C;AAAA,IACA,CAAC,UAAU,KAAK;AAAA,EAClB;AAEA,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ;AAAS,uBAAe,CAAC;AAAA,IACzC;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,kBAAkB,aAAAA,QAAM;AAAA,IAC5B,OAAO;AAAA,MACL,WAAW;AAAA;AAAA;AAAA;AAAA,IAIb;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AACA,QAAM,EAAE,IAAI,UAAU,UAAU,OAAO,WAAW,GAAG,YAAY,QAAI;AAAA,IACnE;AAAA,IACA;AAAA,EACF;AAEA,QAAM,kBAAc,sBAAQ,MAAM,MAAM,qBAAiB,gBAAI,CAAC,KAAK,CAAC,EAAE,CAAC;AACvE,QAAM,mBAAe,4CAAmB,gBAAgB;AAExD,SACE,6CAAC,iCAAgB,QAAgB,eAAY,sBAAqB,WAAuB,GAAG,cAC1F;AAAA,gDAAC,6BAAY,QAAgB,SAAkB,UAAoB,UAAoB,UACpF,WAAC,aACA;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,MAAK;AAAA,QACJ,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,IAAI;AAAA,QACJ;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA;AAAA,IACF,IACE,MACN;AAAA,IACC,SACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAY;AAAA,QAEX,sBAAY,4CAAC,iCAAiB,iBAAM,IAAqB,4CAAC,+DAA2B,OAAO,OAAO;AAAA;AAAA,IACtG;AAAA,KAEJ;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,kCAA8B,kCAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
   "names": ["React"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nexport declare namespace DSControlledRadioT {\n  export type Devices = 'mobile' | 'desktop' | 'mediaquery';\n  export interface DefaultProps {\n    checked: boolean;\n    hasError: boolean;\n    wrapLabel: boolean;\n    disabled: boolean;\n    visualOnly: boolean;\n    device: Devices;\n  }\n  export interface RequiredProps {}\n\n  export interface OptionalProps {\n    value?: string;\n    onChange?: (newValue: string, e: React.ChangeEvent | React.KeyboardEvent) => void;\n    label?: string;\n    innerRef?: React.RefObject<HTMLInputElement>;\n  }\n\n  export interface StyledRadioT {\n    checked?: boolean;\n    readOnly?: boolean;\n    hasError?: boolean;\n    disabled?: boolean;\n    device?: Devices;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: Partial<DSControlledRadioT.Props> = {\n  wrapLabel: false,\n  hasError: false,\n  checked: false,\n  disabled: false,\n  visualOnly: false,\n  device: 'mediaquery',\n};\n\n// Omit<DSControlledRadioT.Props, 'visualOnly'>\n//  visualOnly is an internal only prop, so we don't want to expose it in the docs\nexport const DSControlledRadioPropTypes: DSPropTypesSchema<Omit<DSControlledRadioT.Props, 'visualOnly'>> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  value: PropTypes.string.description('Radio value'),\n  onChange: PropTypes.func\n    .description('Radio onchange callback')\n    .signature('((newValue: string,e:  React.ChangeEvent | React.KeyboardEvent) => void)'),\n  label: PropTypes.string.description(\n    'Radio Label property. This label is also going to be used as an aria-label for screen readers.',\n  ),\n  checked: PropTypes.bool.description('Whether the radio is checked or not'),\n  hasError: PropTypes.bool.description('Whether the radio has error or not.'),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Radio input ref.'),\n  wrapLabel: PropTypes.bool.description('Whether to wrap or truncate the label'),\n  device: PropTypes.oneOf(['mobile', 'desktop', 'mediaquery'])\n    .description(\n      'used for responsive designs, this controls how the styling should behave. you can force mobile/desktop styling or rely on mediaquery to auto-detect',\n    )\n    .defaultValue('mediaquery'),\n};\n\nexport const DSControlledRadioPropTypesSchema =\n  DSControlledRadioPropTypes as unknown as React.WeakValidationMap<DSControlledRadioT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAAuE;AA2ChE,MAAM,eAAkD;AAAA,EAC7D,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,QAAQ;AACV;AAIO,MAAM,6BAA8F;AAAA,EACzG,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,kCAAU,OAAO,YAAY,aAAa;AAAA,EACjD,UAAU,kCAAU,KACjB,YAAY,yBAAyB,EACrC,UAAU,0EAA0E;AAAA,EACvF,OAAO,kCAAU,OAAO;AAAA,IACtB;AAAA,EACF;AAAA,EACA,SAAS,kCAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,UAAU,kCAAU,KAAK,YAAY,qCAAqC;AAAA,EAC1E,UAAU,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,CAAC,EAAE,YAAY,kBAAkB;AAAA,EAChG,WAAW,kCAAU,KAAK,YAAY,uCAAuC;AAAA,EAC7E,QAAQ,kCAAU,MAAM,CAAC,UAAU,WAAW,YAAY,CAAC,EACxD;AAAA,IACC;AAAA,EACF,EACC,aAAa,YAAY;AAC9B;AAEO,MAAM,mCACX;",
+  "sourcesContent": ["import type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nexport declare namespace DSControlledRadioT {\n  export type Devices = 'mobile' | 'desktop' | 'mediaquery';\n  export interface DefaultProps {\n    checked: boolean;\n    hasError: boolean;\n    wrapLabel: boolean;\n    disabled: boolean;\n    visualOnly: boolean;\n    device: Devices;\n  }\n  export interface RequiredProps {}\n\n  export interface OptionalProps {\n    value?: string;\n    onChange?: (newValue: string, e: React.ChangeEvent | React.KeyboardEvent) => void;\n    label?: string;\n    innerRef?: React.RefObject<HTMLInputElement>;\n  }\n\n  export interface StyledRadioT {\n    checked?: boolean;\n    readOnly?: boolean;\n    hasError?: boolean;\n    disabled?: boolean;\n    device?: Devices;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSControlledRadioT.DefaultProps = {\n  wrapLabel: false,\n  hasError: false,\n  checked: false,\n  disabled: false,\n  visualOnly: false,\n  device: 'mediaquery',\n};\n\n// Omit<DSControlledRadioT.Props, 'visualOnly'>\n//  visualOnly is an internal only prop, so we don't want to expose it in the docs\nexport const DSControlledRadioPropTypes: DSPropTypesSchema<Omit<DSControlledRadioT.Props, 'visualOnly'>> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  value: PropTypes.string.description('Radio value'),\n  onChange: PropTypes.func\n    .description('Radio onchange callback')\n    .signature('((newValue: string,e:  React.ChangeEvent | React.KeyboardEvent) => void)'),\n  label: PropTypes.string.description(\n    'Radio Label property. This label is also going to be used as an aria-label for screen readers.',\n  ),\n  checked: PropTypes.bool.description('Whether the radio is checked or not'),\n  hasError: PropTypes.bool.description('Whether the radio has error or not.'),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Radio input ref.'),\n  wrapLabel: PropTypes.bool.description('Whether to wrap or truncate the label'),\n  device: PropTypes.oneOf(['mobile', 'desktop', 'mediaquery'])\n    .description(\n      'used for responsive designs, this controls how the styling should behave. you can force mobile/desktop styling or rely on mediaquery to auto-detect',\n    )\n    .defaultValue('mediaquery'),\n};\n\nexport const DSControlledRadioPropTypesSchema =\n  DSControlledRadioPropTypes as unknown as React.WeakValidationMap<DSControlledRadioT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAAuE;AA2ChE,MAAM,eAAgD;AAAA,EAC3D,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,QAAQ;AACV;AAIO,MAAM,6BAA8F;AAAA,EACzG,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,kCAAU,OAAO,YAAY,aAAa;AAAA,EACjD,UAAU,kCAAU,KACjB,YAAY,yBAAyB,EACrC,UAAU,0EAA0E;AAAA,EACvF,OAAO,kCAAU,OAAO;AAAA,IACtB;AAAA,EACF;AAAA,EACA,SAAS,kCAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,UAAU,kCAAU,KAAK,YAAY,qCAAqC;AAAA,EAC1E,UAAU,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,CAAC,EAAE,YAAY,kBAAkB;AAAA,EAChG,WAAW,kCAAU,KAAK,YAAY,uCAAuC;AAAA,EAC7E,QAAQ,kCAAU,MAAM,CAAC,UAAU,WAAW,YAAY,CAAC,EACxD;AAAA,IACC;AAAA,EACF,EACC,aAAa,YAAY;AAC9B;AAEO,MAAM,mCACX;",
   "names": []
 }

package/dist/cjs/styles.js

@@ -46,22 +46,30 @@ const StyledContainer = (0, import_ds_system.styled)("div", {
   ${({ device, theme }) => {
   if (device === "mobile") {
     return `    
-      grid-template-columns: 24px auto;`;
+      @media (max-width: ${theme.breakpoints.small}) {
+      grid-template-columns: 1.5rem auto; /* 24px / 16px */
+    }
+      grid-template-columns: 1.846rem auto;
+      `;
   }
   if (device === "mediaquery") {
     return `
-      @media (max-width: ${theme.breakpoints.small}) {
-        grid-template-columns: 24px auto;
-      }
-      grid-template-columns: ${theme.space.xs} auto;
-  `;
+        @media (max-width: ${theme.breakpoints.small}) {
+          grid-template-columns: 1.5rem auto;
+        }
+        grid-template-columns: 1.23rem auto;
+    `;
   }
   return `
-    grid-template-columns: ${theme.space.xs} auto;
-`;
+    @media (max-width: ${theme.breakpoints.small}) {
+      grid-template-columns: 1rem auto; /* 16px / 16px */
+    }
+    grid-template-columns: 1.2307rem auto; /* 16px / 13 */
+
+    `;
 }}
+  column-gap: 8px;
   display: inline-grid;
-  grid-template-rows: min-content;
   align-items: center;
   ${import_ds_system.xStyledCommonProps}
 `;
@@ -69,23 +77,31 @@ const StyledRadio = (0, import_ds_system.styled)("span")`
   ${({ device, theme }) => {
   if (device === "mobile") {
     return `    
-      width: 24px;
-      height: 24px;`;
+      @media (max-width: ${theme.breakpoints.small}) {
+        width: 1.5rem;  /* 24px / 16 */
+        height: 1.5rem;  /* 24px / 16 */
+      }
+      width: 1.846rem; /* 24px / 13 */
+      height: 1.846rem;  /* 24px / 13 */`;
   }
   if (device === "mediaquery") {
     return `
         @media (max-width: ${theme.breakpoints.small}) {
-          width: 24px;
-          height: 24px;
+          width: 1.5rem;  /* 24px / 16 */
+          height: 1.5rem;  /* 24px / 16 */
         }
-        width: ${theme.space.xs};
-        height: ${theme.space.xs};
+        width: 1.2307rem; /* 16px / 13 */
+        height: 1.2307rem; /* 16px / 13 */
       `;
   }
   return `
-      width: ${theme.space.xs};
-      height: ${theme.space.xs};
-    `;
+    @media (max-width: ${theme.breakpoints.small}) {
+      width: 1rem;  /* 16px / 16 */
+      height: 1rem;  /* 16px / 16 */
+    }
+    width: 1.2307rem; /* 16px / 13 */
+    height: 1.2307rem; /* 16px / 13 */
+  `;
 }}
   border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400]};
   border-radius: 50px;
@@ -127,34 +143,31 @@ const StyledLabel = (0, import_ds_system.styled)("label", {
   name: import_exported_related.DSRadioName,
   slot: import_exported_related.DSRadioSlots.LABEL
 })`
-  ${({ wrapLabel, theme }) => wrapLabel ? "padding: 8px 0px 8px 8px;" : `padding-left: ${theme.space.xxs}`};
-
   color: ${({ theme, disabled, readOnly }) => disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};
-  font-size: 13px;
-  line-height: 1.1;
-  ${({ device, theme, wrapLabel }) => {
-  if (device === "mobile") {
-    return `    
-      font-size: 16px;
-      line-height: 1.2;
-      ${wrapLabel ? `padding: 8px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};
-      `;
+  line-height: 1.2307rem;
+  @media (max-width: ${import_ds_system.th.breakpoint("small")}) {
+    line-height: 1rem; /* 13px / 16 */
   }
-  if (device === "mediaquery") {
+  ${({ device, theme }) => {
+  if (device === "mobile") {
     return `
         @media (max-width: ${theme.breakpoints.small}) {
-          font-size: 16px;
-          line-height: 1.2;
-          ${wrapLabel ? `padding: 8px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};
+          font-size: 1rem;  /* 16px / 16 */
         }
-
-        font-size: 13px;
-        line-height: 1.1;
-      `;
+        font-size: 1.2307rem; /* 16px / 13 */
+        `;
+  }
+  if (device === void 0) {
+    return `
+          font-size: 1rem; 
+        `;
   }
   return `
-      font-size: 13px;
-      line-height: 1.1;
+      @media (max-width: ${theme.breakpoints.small}) {
+        font-size: 0.8125rem;  /* 13px / 16 */
+      }
+  
+      font-size: 1rem;  /* 13px / 13 */
     `;
 }}
   display: inherit;

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 type { DSControlledRadioT } from './react-desc-prop-types.js';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';\nimport { DSRadioName, DSRadioSlots } from './exported-related/index.js';\n\nexport const StyledContainer = styled('div', {\n  name: DSRadioName,\n  slot: DSRadioSlots.CONTAINER,\n})<{ device?: DSControlledRadioT.Devices }>`\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `    \n      grid-template-columns: 24px auto;`;\n    }\n    if (device === 'mediaquery') {\n      return `\n      @media (max-width: ${theme.breakpoints.small}) {\n        grid-template-columns: 24px auto;\n      }\n      grid-template-columns: ${theme.space.xs} auto;\n  `;\n    }\n    return `\n    grid-template-columns: ${theme.space.xs} auto;\n`;\n  }}\n  display: inline-grid;\n  grid-template-rows: min-content;\n  align-items: center;\n  ${xStyledCommonProps}\n`;\n\nexport const StyledRadio = styled('span')<DSControlledRadioT.StyledRadioT>`\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `    \n      width: 24px;\n      height: 24px;`;\n    }\n    if (device === 'mediaquery') {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          width: 24px;\n          height: 24px;\n        }\n        width: ${theme.space.xs};\n        height: ${theme.space.xs};\n      `;\n    }\n    return `\n      width: ${theme.space.xs};\n      height: ${theme.space.xs};\n    `;\n  }}\n  border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n  border-radius: 50px;\n  position: relative;\n  background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};\n  ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n    handleCheckmark(theme, checked, disabled, readOnly, hasError, false, device)}\n  &:focus-within {\n    ${({ theme, hasError, disabled }) =>\n      !disabled\n        ? `border: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.brand[700]}; outline : 1px solid ${\n            hasError ? theme.colors.danger[900] : theme.colors.brand[700]\n          } `\n        : undefined};\n    &:hover {\n      ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n        handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}\n    }\n  }\n  &:hover {\n    background: ${({ theme, disabled }) => (!disabled ? theme.colors.brand[200] : undefined)};\n    ${({ theme, hasError, disabled, readOnly }) =>\n      !hasError && !disabled && !readOnly ? ` border: 1px solid  ${theme.colors.brand[600]}` : undefined};\n  }\n`;\n\nconst radioStyles = css`\n  &:hover {\n    cursor: pointer;\n  }\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n`;\n\nexport const StyledInput = styled('input', {\n  name: DSRadioName,\n  slot: DSRadioSlots.INPUT,\n})`\n  ${radioStyles}\n  &:disabled {\n    cursor: not-allowed;\n  }\n`;\ninterface StyledLabelT {\n  disabled?: boolean;\n  readOnly?: boolean;\n  checked: boolean;\n  wrapLabel: boolean;\n  onClick?: React.MouseEventHandler<HTMLLabelElement>;\n  device?: DSControlledRadioT.Devices;\n}\nexport const StyledLabel = styled('label', {\n  name: DSRadioName,\n  slot: DSRadioSlots.LABEL,\n})<StyledLabelT>`\n  ${({ wrapLabel, theme }) => (wrapLabel ? 'padding: 8px 0px 8px 8px;' : `padding-left: ${theme.space.xxs}`)};\n\n  color: ${({ theme, disabled, readOnly }) =>\n    disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n  font-size: 13px;\n  line-height: 1.1;\n  ${({ device, theme, wrapLabel }) => {\n    if (device === 'mobile') {\n      return `    \n      font-size: 16px;\n      line-height: 1.2;\n      ${wrapLabel ? `padding: 8px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};\n      `;\n    }\n    if (device === 'mediaquery') {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          font-size: 16px;\n          line-height: 1.2;\n          ${wrapLabel ? `padding: 8px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};\n        }\n\n        font-size: 13px;\n        line-height: 1.1;\n      `;\n    }\n    return `\n      font-size: 13px;\n      line-height: 1.1;\n    `;\n  }}\n  display: inherit;\n  width: fit-content;\n\n  ${({ disabled }) =>\n    disabled\n      ? `&:hover {\n    cursor: not-allowed;\n  }`\n      : `&:hover {\n    cursor: pointer;\n  }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { styled, css, th, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSControlledRadioT } from './react-desc-prop-types.js';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';\nimport { DSRadioName, DSRadioSlots } from './exported-related/index.js';\n\nexport const StyledContainer = styled('div', {\n  name: DSRadioName,\n  slot: DSRadioSlots.CONTAINER,\n})<{ device?: DSControlledRadioT.Devices }>`\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `    \n      @media (max-width: ${theme.breakpoints.small}) {\n      grid-template-columns: 1.5rem auto; /* 24px / 16px */\n    }\n      grid-template-columns: 1.846rem auto;\n      `;\n    }\n    if (device === 'mediaquery') {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          grid-template-columns: 1.5rem auto;\n        }\n        grid-template-columns: 1.23rem auto;\n    `;\n    }\n    return `\n    @media (max-width: ${theme.breakpoints.small}) {\n      grid-template-columns: 1rem auto; /* 16px / 16px */\n    }\n    grid-template-columns: 1.2307rem auto; /* 16px / 13 */\n\n    `;\n  }}\n  column-gap: 8px;\n  display: inline-grid;\n  align-items: center;\n  ${xStyledCommonProps}\n`;\n\nexport const StyledRadio = styled('span')<DSControlledRadioT.StyledRadioT>`\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `    \n      @media (max-width: ${theme.breakpoints.small}) {\n        width: 1.5rem;  /* 24px / 16 */\n        height: 1.5rem;  /* 24px / 16 */\n      }\n      width: 1.846rem; /* 24px / 13 */\n      height: 1.846rem;  /* 24px / 13 */`;\n    }\n    if (device === 'mediaquery') {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          width: 1.5rem;  /* 24px / 16 */\n          height: 1.5rem;  /* 24px / 16 */\n        }\n        width: 1.2307rem; /* 16px / 13 */\n        height: 1.2307rem; /* 16px / 13 */\n      `;\n    }\n    return `\n    @media (max-width: ${theme.breakpoints.small}) {\n      width: 1rem;  /* 16px / 16 */\n      height: 1rem;  /* 16px / 16 */\n    }\n    width: 1.2307rem; /* 16px / 13 */\n    height: 1.2307rem; /* 16px / 13 */\n  `;\n  }}\n  border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n  border-radius: 50px;\n  position: relative;\n  background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};\n  ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n    handleCheckmark(theme, checked, disabled, readOnly, hasError, false, device)}\n  &:focus-within {\n    ${({ theme, hasError, disabled }) =>\n      !disabled\n        ? `border: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.brand[700]}; outline : 1px solid ${\n            hasError ? theme.colors.danger[900] : theme.colors.brand[700]\n          } `\n        : undefined};\n    &:hover {\n      ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n        handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}\n    }\n  }\n  &:hover {\n    background: ${({ theme, disabled }) => (!disabled ? theme.colors.brand[200] : undefined)};\n    ${({ theme, hasError, disabled, readOnly }) =>\n      !hasError && !disabled && !readOnly ? ` border: 1px solid  ${theme.colors.brand[600]}` : undefined};\n  }\n`;\n\nconst radioStyles = css`\n  &:hover {\n    cursor: pointer;\n  }\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n`;\n\nexport const StyledInput = styled('input', {\n  name: DSRadioName,\n  slot: DSRadioSlots.INPUT,\n})`\n  ${radioStyles}\n  &:disabled {\n    cursor: not-allowed;\n  }\n`;\ninterface StyledLabelT {\n  disabled?: boolean;\n  readOnly?: boolean;\n  checked: boolean;\n  onClick?: React.MouseEventHandler<HTMLLabelElement>;\n  device?: DSControlledRadioT.Devices;\n}\nexport const StyledLabel = styled('label', {\n  name: DSRadioName,\n  slot: DSRadioSlots.LABEL,\n})<StyledLabelT>`\n  color: ${({ theme, disabled, readOnly }) =>\n    disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n  line-height: 1.2307rem;\n  @media (max-width: ${th.breakpoint('small')}) {\n    line-height: 1rem; /* 13px / 16 */\n  }\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          font-size: 1rem;  /* 16px / 16 */\n        }\n        font-size: 1.2307rem; /* 16px / 13 */\n        `;\n    }\n    if (device === undefined) {\n      return `\n          font-size: 1rem; \n        `;\n    }\n    return `\n      @media (max-width: ${theme.breakpoints.small}) {\n        font-size: 0.8125rem;  /* 13px / 16 */\n      }\n  \n      font-size: 1rem;  /* 13px / 13 */\n    `;\n  }}\n  display: inherit;\n  width: fit-content;\n\n  ${({ disabled }) =>\n    disabled\n      ? `&:hover {\n    cursor: not-allowed;\n  }`\n      : `&:hover {\n    cursor: pointer;\n  }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/utils/styleHelpers.js

@@ -46,27 +46,32 @@ const handleCheckMarkColor = ({ colors }, checked, isHovering, disabled, readOnl
 const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHovering = false, device = "mediaquery") => {
   const desktopCheckmark = `
   content:"";
-  width: ${theme.space.xxs};
-  height: ${theme.space.xxs};
-
+  width: 0.615rem; /* 8px / 13 */
+  height: 0.615rem; /* 8px / 13 */
   border-radius:50%;
   display:inline-block;
-  margin:3px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
   background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
 `;
   const mediaqueryCheckmark = `
     @media (max-width: ${theme.breakpoints.small}) {
-      width: 12px;
-      height: 12px;
-      margin: 5px;
+      width: 0.75rem; /* 12px / 16 */
+      height: 0.75rem; /* 12px / 16 */
     }
     ${desktopCheckmark}
 `;
   const mobileCheckmark = `
     ${desktopCheckmark}
-    width: 12px;
-    height: 12px;
-    margin: 5px;
+    width: 0.923rem; /* 12px / 13 */
+    height: 0.923rem; /* 12px / 13 */
+    @media (max-width: ${theme.breakpoints.small}) {
+      width: 0.75rem; /* 12px / 16 */
+      height: 0.75rem; /* 12px / 16 */
+    }
   `;
   if (checked) {
     return `&:before {

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": ["/* eslint-disable max-params */\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport const handleCheckMarkColor = (\n  { colors }: Theme,\n  checked?: boolean,\n  isHovering?: boolean,\n  disabled?: boolean,\n  readOnly?: boolean,\n  hasError?: boolean,\n): string => {\n  if (hasError) {\n    return colors.danger[900];\n  }\n  if (disabled || readOnly) {\n    return colors.neutral[500];\n  }\n\n  return colors.brand[600];\n};\n\nexport const handleCheckmark = (\n  theme: Theme,\n  checked?: boolean,\n  disabled?: boolean,\n  readOnly?: boolean,\n  hasError?: boolean,\n  isHovering = false,\n  device = 'mediaquery',\n): string => {\n  const desktopCheckmark = `\n  content:\"\";\n  width: ${theme.space.xxs};\n  height: ${theme.space.xxs};\n\n  border-radius:50%;\n  display:inline-block;\n  margin:3px;\n  background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n`;\n\n  const mediaqueryCheckmark = `\n    @media (max-width: ${theme.breakpoints.small}) {\n      width: 12px;\n      height: 12px;\n      margin: 5px;\n    }\n    ${desktopCheckmark}\n`;\n  const mobileCheckmark = `\n    ${desktopCheckmark}\n    width: 12px;\n    height: 12px;\n    margin: 5px;\n  `;\n\n  if (checked) {\n    return `&:before {\n        ${device === 'mediaquery' ? mediaqueryCheckmark : device === 'mobile' ? mobileCheckmark : desktopCheckmark}\n    }`;\n  }\n  return '';\n};\n\nexport const handleBackgroundColor = ({ colors }: Theme, disabled?: boolean): string => {\n  if (disabled) {\n    return colors.neutral['080'];\n  }\n\n  return colors.neutral['000'];\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGhB,MAAM,uBAAuB,CAClC,EAAE,OAAO,GACT,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO,GAAG;AAAA,EAC1B;AACA,MAAI,YAAY,UAAU;AACxB,WAAO,OAAO,QAAQ,GAAG;AAAA,EAC3B;AAEA,SAAO,OAAO,MAAM,GAAG;AACzB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,OACb,SAAS,iBACE;AACX,QAAM,mBAAmB;AAAA;AAAA,WAEhB,MAAM,MAAM;AAAA,YACX,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKR,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAG3F,QAAM,sBAAsB;AAAA,yBACL,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,MAKrC;AAAA;AAEJ,QAAM,kBAAkB;AAAA,MACpB;AAAA;AAAA;AAAA;AAAA;AAMJ,MAAI,SAAS;AACX,WAAO;AAAA,UACD,WAAW,eAAe,sBAAsB,WAAW,WAAW,kBAAkB;AAAA;AAAA,EAEhG;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,EAAE,OAAO,GAAU,aAA+B;AACtF,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ,KAAK;AAAA,EAC7B;AAEA,SAAO,OAAO,QAAQ,KAAK;AAC7B;",
+  "sourcesContent": ["/* eslint-disable max-params */\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport const handleCheckMarkColor = (\n  { colors }: Theme,\n  checked?: boolean,\n  isHovering?: boolean,\n  disabled?: boolean,\n  readOnly?: boolean,\n  hasError?: boolean,\n): string => {\n  if (hasError) {\n    return colors.danger[900];\n  }\n  if (disabled || readOnly) {\n    return colors.neutral[500];\n  }\n\n  return colors.brand[600];\n};\n\nexport const handleCheckmark = (\n  theme: Theme,\n  checked?: boolean,\n  disabled?: boolean,\n  readOnly?: boolean,\n  hasError?: boolean,\n  isHovering = false,\n  device = 'mediaquery',\n): string => {\n  const desktopCheckmark = `\n  content:\"\";\n  width: 0.615rem; /* 8px / 13 */\n  height: 0.615rem; /* 8px / 13 */\n  border-radius:50%;\n  display:inline-block;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n\n  background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n`;\n\n  const mediaqueryCheckmark = `\n    @media (max-width: ${theme.breakpoints.small}) {\n      width: 0.75rem; /* 12px / 16 */\n      height: 0.75rem; /* 12px / 16 */\n    }\n    ${desktopCheckmark}\n`;\n  const mobileCheckmark = `\n    ${desktopCheckmark}\n    width: 0.923rem; /* 12px / 13 */\n    height: 0.923rem; /* 12px / 13 */\n    @media (max-width: ${theme.breakpoints.small}) {\n      width: 0.75rem; /* 12px / 16 */\n      height: 0.75rem; /* 12px / 16 */\n    }\n  `;\n\n  if (checked) {\n    return `&:before {\n        ${device === 'mediaquery' ? mediaqueryCheckmark : device === 'mobile' ? mobileCheckmark : desktopCheckmark}\n    }`;\n  }\n  return '';\n};\n\nexport const handleBackgroundColor = ({ colors }: Theme, disabled?: boolean): string => {\n  if (disabled) {\n    return colors.neutral['080'];\n  }\n\n  return colors.neutral['000'];\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGhB,MAAM,uBAAuB,CAClC,EAAE,OAAO,GACT,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO,GAAG;AAAA,EAC1B;AACA,MAAI,YAAY,UAAU;AACxB,WAAO,OAAO,QAAQ,GAAG;AAAA,EAC3B;AAEA,SAAO,OAAO,MAAM,GAAG;AACzB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,OACb,SAAS,iBACE;AACX,QAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAWX,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAG3F,QAAM,sBAAsB;AAAA,yBACL,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA,MAIrC;AAAA;AAEJ,QAAM,kBAAkB;AAAA,MACpB;AAAA;AAAA;AAAA,yBAGmB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAMzC,MAAI,SAAS;AACX,WAAO;AAAA,UACD,WAAW,eAAe,sBAAsB,WAAW,WAAW,kBAAkB;AAAA;AAAA,EAEhG;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,EAAE,OAAO,GAAU,aAA+B;AACtF,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ,KAAK;AAAA,EAC7B;AAEA,SAAO,OAAO,QAAQ,KAAK;AAC7B;",
   "names": []
 }

package/dist/esm/ControlledRadio.js

@@ -69,7 +69,6 @@ const DSControlledRadio = (props) => {
         readOnly,
         checked,
         "data-testid": "ds-radio-label",
-        wrapLabel,
         children: wrapLabel ? /* @__PURE__ */ jsx(StyledWrapLabel, { children: label }) : /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: label })
       }
     )

package/dist/esm/ControlledRadio.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/ControlledRadio.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useMemo } from 'react';\nimport {\n  describe,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n} from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledContainer, StyledWrapLabel, StyledInput, StyledLabel, StyledRadio } from './styles.js';\nimport type { DSControlledRadioT } from './react-desc-prop-types.js';\nimport { DSControlledRadioPropTypes, DSControlledRadioPropTypesSchema, defaultProps } from './react-desc-prop-types.js';\nimport { useValidateProps } from './config/useValidateProps.js';\n\nconst DSControlledRadio: React.ComponentType<DSControlledRadioT.Props> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSControlledRadioT.InternalProps>(props, defaultProps);\n  useValidateProps(props, DSControlledRadioPropTypes);\n  const { checked, visualOnly, device, hasError, innerRef, value, wrapLabel, onChange } = propsWithDefault;\n\n  const handleOnChange = useCallback(\n    (e: React.ChangeEvent | React.KeyboardEvent) => {\n      if (onChange && value) onChange(value, e);\n    },\n    [onChange, value],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter') handleOnChange(e);\n    },\n    [handleOnChange],\n  );\n\n  const sharedListeners = React.useMemo(\n    () => ({\n      onKeyDown: handleKeyDown,\n      // we can't declare onChange here, we are \"overwriting\" the event,\n      //   if we put it here we invoke it twice, once with our overwritten arguments, once with the native ones\n      // onChange: handleOnChange,\n    }),\n    [handleKeyDown],\n  );\n  const { id, disabled, readOnly, label, className, ...restGlobals } = useGetGlobalAttributes<DSControlledRadioT.Props>(\n    propsWithDefault,\n    sharedListeners,\n  );\n\n  const instanceUid = useMemo(() => id || `ds-form-radio-${uid(5)}`, [id]);\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n  return (\n    <StyledContainer device={device} data-testid=\"ds-radio-container\" className={className} {...xstyledProps}>\n      <StyledRadio device={device} checked={checked} hasError={hasError} disabled={disabled} readOnly={readOnly}>\n        {!visualOnly ? (\n          <StyledInput\n            data-testid=\"ds-radio\"\n            type=\"radio\"\n            {...sharedListeners}\n            {...restGlobals}\n            id={instanceUid}\n            innerRef={innerRef}\n            onChange={handleOnChange}\n            checked={checked}\n            disabled={disabled}\n          />\n        ) : null}\n      </StyledRadio>\n      {label && (\n        <StyledLabel\n          device={device}\n          htmlFor={instanceUid}\n          disabled={disabled}\n          readOnly={readOnly}\n          checked={checked}\n          data-testid=\"ds-radio-label\"\n          wrapLabel={wrapLabel}\n        >\n          {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n        </StyledLabel>\n      )}\n    </StyledContainer>\n  );\n};\n\nDSControlledRadio.propTypes = DSControlledRadioPropTypesSchema;\nDSControlledRadio.displayName = 'DSControlledRadio';\nconst DSControlledRadioWithSchema = describe(DSControlledRadio);\nDSControlledRadioWithSchema.propTypes = DSControlledRadioPropTypesSchema;\n\nexport { DSControlledRadio, DSControlledRadioWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoDnB,SAGM,KAHN;AAnDJ,OAAOA,UAAS,aAAa,eAAe;AAC5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW;AACpB,SAAS,kCAAkC;AAC3C,SAAS,iBAAiB,iBAAiB,aAAa,aAAa,mBAAmB;AAExF,SAAS,4BAA4B,kCAAkC,oBAAoB;AAC3F,SAAS,wBAAwB;AAEjC,MAAM,oBAAmE,CAAC,UAAU;AAClF,QAAM,mBAAmB,6BAA+D,OAAO,YAAY;AAC3G,mBAAiB,OAAO,0BAA0B;AAClD,QAAM,EAAE,SAAS,YAAY,QAAQ,UAAU,UAAU,OAAO,WAAW,SAAS,IAAI;AAExF,QAAM,iBAAiB;AAAA,IACrB,CAAC,MAA+C;AAC9C,UAAI,YAAY;AAAO,iBAAS,OAAO,CAAC;AAAA,IAC1C;AAAA,IACA,CAAC,UAAU,KAAK;AAAA,EAClB;AAEA,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ;AAAS,uBAAe,CAAC;AAAA,IACzC;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,kBAAkBA,OAAM;AAAA,IAC5B,OAAO;AAAA,MACL,WAAW;AAAA;AAAA;AAAA;AAAA,IAIb;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AACA,QAAM,EAAE,IAAI,UAAU,UAAU,OAAO,WAAW,GAAG,YAAY,IAAI;AAAA,IACnE;AAAA,IACA;AAAA,EACF;AAEA,QAAM,cAAc,QAAQ,MAAM,MAAM,iBAAiB,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;AACvE,QAAM,eAAe,mBAAmB,gBAAgB;AAExD,SACE,qBAAC,mBAAgB,QAAgB,eAAY,sBAAqB,WAAuB,GAAG,cAC1F;AAAA,wBAAC,eAAY,QAAgB,SAAkB,UAAoB,UAAoB,UACpF,WAAC,aACA;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,MAAK;AAAA,QACJ,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,IAAI;AAAA,QACJ;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA;AAAA,IACF,IACE,MACN;AAAA,IACC,SACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAY;AAAA,QACZ;AAAA,QAEC,sBAAY,oBAAC,mBAAiB,iBAAM,IAAqB,oBAAC,8BAA2B,OAAO,OAAO;AAAA;AAAA,IACtG;AAAA,KAEJ;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,8BAA8B,SAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useMemo } from 'react';\nimport {\n  describe,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n} from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledContainer, StyledWrapLabel, StyledInput, StyledLabel, StyledRadio } from './styles.js';\nimport type { DSControlledRadioT } from './react-desc-prop-types.js';\nimport { DSControlledRadioPropTypes, DSControlledRadioPropTypesSchema, defaultProps } from './react-desc-prop-types.js';\nimport { useValidateProps } from './config/useValidateProps.js';\n\nconst DSControlledRadio: React.ComponentType<DSControlledRadioT.Props> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSControlledRadioT.InternalProps>(props, defaultProps);\n  useValidateProps(props, DSControlledRadioPropTypes);\n  const { checked, visualOnly, device, hasError, innerRef, value, wrapLabel, onChange } = propsWithDefault;\n\n  const handleOnChange = useCallback(\n    (e: React.ChangeEvent | React.KeyboardEvent) => {\n      if (onChange && value) onChange(value, e);\n    },\n    [onChange, value],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter') handleOnChange(e);\n    },\n    [handleOnChange],\n  );\n\n  const sharedListeners = React.useMemo(\n    () => ({\n      onKeyDown: handleKeyDown,\n      // we can't declare onChange here, we are \"overwriting\" the event,\n      //   if we put it here we invoke it twice, once with our overwritten arguments, once with the native ones\n      // onChange: handleOnChange,\n    }),\n    [handleKeyDown],\n  );\n  const { id, disabled, readOnly, label, className, ...restGlobals } = useGetGlobalAttributes<DSControlledRadioT.Props>(\n    propsWithDefault,\n    sharedListeners,\n  );\n\n  const instanceUid = useMemo(() => id || `ds-form-radio-${uid(5)}`, [id]);\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n  return (\n    <StyledContainer device={device} data-testid=\"ds-radio-container\" className={className} {...xstyledProps}>\n      <StyledRadio device={device} checked={checked} hasError={hasError} disabled={disabled} readOnly={readOnly}>\n        {!visualOnly ? (\n          <StyledInput\n            data-testid=\"ds-radio\"\n            type=\"radio\"\n            {...sharedListeners}\n            {...restGlobals}\n            id={instanceUid}\n            innerRef={innerRef}\n            onChange={handleOnChange}\n            checked={checked}\n            disabled={disabled}\n          />\n        ) : null}\n      </StyledRadio>\n      {label && (\n        <StyledLabel\n          device={device}\n          htmlFor={instanceUid}\n          disabled={disabled}\n          readOnly={readOnly}\n          checked={checked}\n          data-testid=\"ds-radio-label\"\n        >\n          {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n        </StyledLabel>\n      )}\n    </StyledContainer>\n  );\n};\n\nDSControlledRadio.propTypes = DSControlledRadioPropTypesSchema;\nDSControlledRadio.displayName = 'DSControlledRadio';\nconst DSControlledRadioWithSchema = describe(DSControlledRadio);\nDSControlledRadioWithSchema.propTypes = DSControlledRadioPropTypesSchema;\n\nexport { DSControlledRadio, DSControlledRadioWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACoDnB,SAGM,KAHN;AAnDJ,OAAOA,UAAS,aAAa,eAAe;AAC5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW;AACpB,SAAS,kCAAkC;AAC3C,SAAS,iBAAiB,iBAAiB,aAAa,aAAa,mBAAmB;AAExF,SAAS,4BAA4B,kCAAkC,oBAAoB;AAC3F,SAAS,wBAAwB;AAEjC,MAAM,oBAAmE,CAAC,UAAU;AAClF,QAAM,mBAAmB,6BAA+D,OAAO,YAAY;AAC3G,mBAAiB,OAAO,0BAA0B;AAClD,QAAM,EAAE,SAAS,YAAY,QAAQ,UAAU,UAAU,OAAO,WAAW,SAAS,IAAI;AAExF,QAAM,iBAAiB;AAAA,IACrB,CAAC,MAA+C;AAC9C,UAAI,YAAY;AAAO,iBAAS,OAAO,CAAC;AAAA,IAC1C;AAAA,IACA,CAAC,UAAU,KAAK;AAAA,EAClB;AAEA,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ;AAAS,uBAAe,CAAC;AAAA,IACzC;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,kBAAkBA,OAAM;AAAA,IAC5B,OAAO;AAAA,MACL,WAAW;AAAA;AAAA;AAAA;AAAA,IAIb;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AACA,QAAM,EAAE,IAAI,UAAU,UAAU,OAAO,WAAW,GAAG,YAAY,IAAI;AAAA,IACnE;AAAA,IACA;AAAA,EACF;AAEA,QAAM,cAAc,QAAQ,MAAM,MAAM,iBAAiB,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;AACvE,QAAM,eAAe,mBAAmB,gBAAgB;AAExD,SACE,qBAAC,mBAAgB,QAAgB,eAAY,sBAAqB,WAAuB,GAAG,cAC1F;AAAA,wBAAC,eAAY,QAAgB,SAAkB,UAAoB,UAAoB,UACpF,WAAC,aACA;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,MAAK;AAAA,QACJ,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,IAAI;AAAA,QACJ;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA;AAAA,IACF,IACE,MACN;AAAA,IACC,SACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAY;AAAA,QAEX,sBAAY,oBAAC,mBAAiB,iBAAM,IAAqB,oBAAC,8BAA2B,OAAO,OAAO;AAAA;AAAA,IACtG;AAAA,KAEJ;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,8BAA8B,SAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
   "names": ["React"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nexport declare namespace DSControlledRadioT {\n  export type Devices = 'mobile' | 'desktop' | 'mediaquery';\n  export interface DefaultProps {\n    checked: boolean;\n    hasError: boolean;\n    wrapLabel: boolean;\n    disabled: boolean;\n    visualOnly: boolean;\n    device: Devices;\n  }\n  export interface RequiredProps {}\n\n  export interface OptionalProps {\n    value?: string;\n    onChange?: (newValue: string, e: React.ChangeEvent | React.KeyboardEvent) => void;\n    label?: string;\n    innerRef?: React.RefObject<HTMLInputElement>;\n  }\n\n  export interface StyledRadioT {\n    checked?: boolean;\n    readOnly?: boolean;\n    hasError?: boolean;\n    disabled?: boolean;\n    device?: Devices;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: Partial<DSControlledRadioT.Props> = {\n  wrapLabel: false,\n  hasError: false,\n  checked: false,\n  disabled: false,\n  visualOnly: false,\n  device: 'mediaquery',\n};\n\n// Omit<DSControlledRadioT.Props, 'visualOnly'>\n//  visualOnly is an internal only prop, so we don't want to expose it in the docs\nexport const DSControlledRadioPropTypes: DSPropTypesSchema<Omit<DSControlledRadioT.Props, 'visualOnly'>> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  value: PropTypes.string.description('Radio value'),\n  onChange: PropTypes.func\n    .description('Radio onchange callback')\n    .signature('((newValue: string,e:  React.ChangeEvent | React.KeyboardEvent) => void)'),\n  label: PropTypes.string.description(\n    'Radio Label property. This label is also going to be used as an aria-label for screen readers.',\n  ),\n  checked: PropTypes.bool.description('Whether the radio is checked or not'),\n  hasError: PropTypes.bool.description('Whether the radio has error or not.'),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Radio input ref.'),\n  wrapLabel: PropTypes.bool.description('Whether to wrap or truncate the label'),\n  device: PropTypes.oneOf(['mobile', 'desktop', 'mediaquery'])\n    .description(\n      'used for responsive designs, this controls how the styling should behave. you can force mobile/desktop styling or rely on mediaquery to auto-detect',\n    )\n    .defaultValue('mediaquery'),\n};\n\nexport const DSControlledRadioPropTypesSchema =\n  DSControlledRadioPropTypes as unknown as React.WeakValidationMap<DSControlledRadioT.Props>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,WAAW,2BAA2B,wBAAwB;AA2ChE,MAAM,eAAkD;AAAA,EAC7D,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,QAAQ;AACV;AAIO,MAAM,6BAA8F;AAAA,EACzG,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,UAAU,OAAO,YAAY,aAAa;AAAA,EACjD,UAAU,UAAU,KACjB,YAAY,yBAAyB,EACrC,UAAU,0EAA0E;AAAA,EACvF,OAAO,UAAU,OAAO;AAAA,IACtB;AAAA,EACF;AAAA,EACA,SAAS,UAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,UAAU,UAAU,KAAK,YAAY,qCAAqC;AAAA,EAC1E,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAAE,YAAY,kBAAkB;AAAA,EAChG,WAAW,UAAU,KAAK,YAAY,uCAAuC;AAAA,EAC7E,QAAQ,UAAU,MAAM,CAAC,UAAU,WAAW,YAAY,CAAC,EACxD;AAAA,IACC;AAAA,EACF,EACC,aAAa,YAAY;AAC9B;AAEO,MAAM,mCACX;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nexport declare namespace DSControlledRadioT {\n  export type Devices = 'mobile' | 'desktop' | 'mediaquery';\n  export interface DefaultProps {\n    checked: boolean;\n    hasError: boolean;\n    wrapLabel: boolean;\n    disabled: boolean;\n    visualOnly: boolean;\n    device: Devices;\n  }\n  export interface RequiredProps {}\n\n  export interface OptionalProps {\n    value?: string;\n    onChange?: (newValue: string, e: React.ChangeEvent | React.KeyboardEvent) => void;\n    label?: string;\n    innerRef?: React.RefObject<HTMLInputElement>;\n  }\n\n  export interface StyledRadioT {\n    checked?: boolean;\n    readOnly?: boolean;\n    hasError?: boolean;\n    disabled?: boolean;\n    device?: Devices;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSControlledRadioT.DefaultProps = {\n  wrapLabel: false,\n  hasError: false,\n  checked: false,\n  disabled: false,\n  visualOnly: false,\n  device: 'mediaquery',\n};\n\n// Omit<DSControlledRadioT.Props, 'visualOnly'>\n//  visualOnly is an internal only prop, so we don't want to expose it in the docs\nexport const DSControlledRadioPropTypes: DSPropTypesSchema<Omit<DSControlledRadioT.Props, 'visualOnly'>> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  value: PropTypes.string.description('Radio value'),\n  onChange: PropTypes.func\n    .description('Radio onchange callback')\n    .signature('((newValue: string,e:  React.ChangeEvent | React.KeyboardEvent) => void)'),\n  label: PropTypes.string.description(\n    'Radio Label property. This label is also going to be used as an aria-label for screen readers.',\n  ),\n  checked: PropTypes.bool.description('Whether the radio is checked or not'),\n  hasError: PropTypes.bool.description('Whether the radio has error or not.'),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Radio input ref.'),\n  wrapLabel: PropTypes.bool.description('Whether to wrap or truncate the label'),\n  device: PropTypes.oneOf(['mobile', 'desktop', 'mediaquery'])\n    .description(\n      'used for responsive designs, this controls how the styling should behave. you can force mobile/desktop styling or rely on mediaquery to auto-detect',\n    )\n    .defaultValue('mediaquery'),\n};\n\nexport const DSControlledRadioPropTypesSchema =\n  DSControlledRadioPropTypes as unknown as React.WeakValidationMap<DSControlledRadioT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,WAAW,2BAA2B,wBAAwB;AA2ChE,MAAM,eAAgD;AAAA,EAC3D,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,QAAQ;AACV;AAIO,MAAM,6BAA8F;AAAA,EACzG,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,UAAU,OAAO,YAAY,aAAa;AAAA,EACjD,UAAU,UAAU,KACjB,YAAY,yBAAyB,EACrC,UAAU,0EAA0E;AAAA,EACvF,OAAO,UAAU,OAAO;AAAA,IACtB;AAAA,EACF;AAAA,EACA,SAAS,UAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,UAAU,UAAU,KAAK,YAAY,qCAAqC;AAAA,EAC1E,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAAE,YAAY,kBAAkB;AAAA,EAChG,WAAW,UAAU,KAAK,YAAY,uCAAuC;AAAA,EAC7E,QAAQ,UAAU,MAAM,CAAC,UAAU,WAAW,YAAY,CAAC,EACxD;AAAA,IACC;AAAA,EACF,EACC,aAAa,YAAY;AAC9B;AAEO,MAAM,mCACX;",
   "names": []
 }

package/dist/esm/styles.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { styled, css, xStyledCommonProps } from "@elliemae/ds-system";
+import { styled, css, th, xStyledCommonProps } from "@elliemae/ds-system";
 import { handleBackgroundColor, handleCheckmark } from "./utils/styleHelpers.js";
 import { DSRadioName, DSRadioSlots } from "./exported-related/index.js";
 const StyledContainer = styled("div", {
@@ -9,22 +9,30 @@ const StyledContainer = styled("div", {
   ${({ device, theme }) => {
   if (device === "mobile") {
     return `    
-      grid-template-columns: 24px auto;`;
+      @media (max-width: ${theme.breakpoints.small}) {
+      grid-template-columns: 1.5rem auto; /* 24px / 16px */
+    }
+      grid-template-columns: 1.846rem auto;
+      `;
   }
   if (device === "mediaquery") {
     return `
-      @media (max-width: ${theme.breakpoints.small}) {
-        grid-template-columns: 24px auto;
-      }
-      grid-template-columns: ${theme.space.xs} auto;
-  `;
+        @media (max-width: ${theme.breakpoints.small}) {
+          grid-template-columns: 1.5rem auto;
+        }
+        grid-template-columns: 1.23rem auto;
+    `;
   }
   return `
-    grid-template-columns: ${theme.space.xs} auto;
-`;
+    @media (max-width: ${theme.breakpoints.small}) {
+      grid-template-columns: 1rem auto; /* 16px / 16px */
+    }
+    grid-template-columns: 1.2307rem auto; /* 16px / 13 */
+
+    `;
 }}
+  column-gap: 8px;
   display: inline-grid;
-  grid-template-rows: min-content;
   align-items: center;
   ${xStyledCommonProps}
 `;
@@ -32,23 +40,31 @@ const StyledRadio = styled("span")`
   ${({ device, theme }) => {
   if (device === "mobile") {
     return `    
-      width: 24px;
-      height: 24px;`;
+      @media (max-width: ${theme.breakpoints.small}) {
+        width: 1.5rem;  /* 24px / 16 */
+        height: 1.5rem;  /* 24px / 16 */
+      }
+      width: 1.846rem; /* 24px / 13 */
+      height: 1.846rem;  /* 24px / 13 */`;
   }
   if (device === "mediaquery") {
     return `
         @media (max-width: ${theme.breakpoints.small}) {
-          width: 24px;
-          height: 24px;
+          width: 1.5rem;  /* 24px / 16 */
+          height: 1.5rem;  /* 24px / 16 */
         }
-        width: ${theme.space.xs};
-        height: ${theme.space.xs};
+        width: 1.2307rem; /* 16px / 13 */
+        height: 1.2307rem; /* 16px / 13 */
       `;
   }
   return `
-      width: ${theme.space.xs};
-      height: ${theme.space.xs};
-    `;
+    @media (max-width: ${theme.breakpoints.small}) {
+      width: 1rem;  /* 16px / 16 */
+      height: 1rem;  /* 16px / 16 */
+    }
+    width: 1.2307rem; /* 16px / 13 */
+    height: 1.2307rem; /* 16px / 13 */
+  `;
 }}
   border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400]};
   border-radius: 50px;
@@ -90,34 +106,31 @@ const StyledLabel = styled("label", {
   name: DSRadioName,
   slot: DSRadioSlots.LABEL
 })`
-  ${({ wrapLabel, theme }) => wrapLabel ? "padding: 8px 0px 8px 8px;" : `padding-left: ${theme.space.xxs}`};
-
   color: ${({ theme, disabled, readOnly }) => disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};
-  font-size: 13px;
-  line-height: 1.1;
-  ${({ device, theme, wrapLabel }) => {
-  if (device === "mobile") {
-    return `    
-      font-size: 16px;
-      line-height: 1.2;
-      ${wrapLabel ? `padding: 8px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};
-      `;
+  line-height: 1.2307rem;
+  @media (max-width: ${th.breakpoint("small")}) {
+    line-height: 1rem; /* 13px / 16 */
   }
-  if (device === "mediaquery") {
+  ${({ device, theme }) => {
+  if (device === "mobile") {
     return `
         @media (max-width: ${theme.breakpoints.small}) {
-          font-size: 16px;
-          line-height: 1.2;
-          ${wrapLabel ? `padding: 8px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};
+          font-size: 1rem;  /* 16px / 16 */
         }
-
-        font-size: 13px;
-        line-height: 1.1;
-      `;
+        font-size: 1.2307rem; /* 16px / 13 */
+        `;
+  }
+  if (device === void 0) {
+    return `
+          font-size: 1rem; 
+        `;
   }
   return `
-      font-size: 13px;
-      line-height: 1.1;
+      @media (max-width: ${theme.breakpoints.small}) {
+        font-size: 0.8125rem;  /* 13px / 16 */
+      }
+  
+      font-size: 1rem;  /* 13px / 13 */
     `;
 }}
   display: inherit;

package/dist/esm/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSControlledRadioT } from './react-desc-prop-types.js';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';\nimport { DSRadioName, DSRadioSlots } from './exported-related/index.js';\n\nexport const StyledContainer = styled('div', {\n  name: DSRadioName,\n  slot: DSRadioSlots.CONTAINER,\n})<{ device?: DSControlledRadioT.Devices }>`\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `    \n      grid-template-columns: 24px auto;`;\n    }\n    if (device === 'mediaquery') {\n      return `\n      @media (max-width: ${theme.breakpoints.small}) {\n        grid-template-columns: 24px auto;\n      }\n      grid-template-columns: ${theme.space.xs} auto;\n  `;\n    }\n    return `\n    grid-template-columns: ${theme.space.xs} auto;\n`;\n  }}\n  display: inline-grid;\n  grid-template-rows: min-content;\n  align-items: center;\n  ${xStyledCommonProps}\n`;\n\nexport const StyledRadio = styled('span')<DSControlledRadioT.StyledRadioT>`\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `    \n      width: 24px;\n      height: 24px;`;\n    }\n    if (device === 'mediaquery') {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          width: 24px;\n          height: 24px;\n        }\n        width: ${theme.space.xs};\n        height: ${theme.space.xs};\n      `;\n    }\n    return `\n      width: ${theme.space.xs};\n      height: ${theme.space.xs};\n    `;\n  }}\n  border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n  border-radius: 50px;\n  position: relative;\n  background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};\n  ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n    handleCheckmark(theme, checked, disabled, readOnly, hasError, false, device)}\n  &:focus-within {\n    ${({ theme, hasError, disabled }) =>\n      !disabled\n        ? `border: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.brand[700]}; outline : 1px solid ${\n            hasError ? theme.colors.danger[900] : theme.colors.brand[700]\n          } `\n        : undefined};\n    &:hover {\n      ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n        handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}\n    }\n  }\n  &:hover {\n    background: ${({ theme, disabled }) => (!disabled ? theme.colors.brand[200] : undefined)};\n    ${({ theme, hasError, disabled, readOnly }) =>\n      !hasError && !disabled && !readOnly ? ` border: 1px solid  ${theme.colors.brand[600]}` : undefined};\n  }\n`;\n\nconst radioStyles = css`\n  &:hover {\n    cursor: pointer;\n  }\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n`;\n\nexport const StyledInput = styled('input', {\n  name: DSRadioName,\n  slot: DSRadioSlots.INPUT,\n})`\n  ${radioStyles}\n  &:disabled {\n    cursor: not-allowed;\n  }\n`;\ninterface StyledLabelT {\n  disabled?: boolean;\n  readOnly?: boolean;\n  checked: boolean;\n  wrapLabel: boolean;\n  onClick?: React.MouseEventHandler<HTMLLabelElement>;\n  device?: DSControlledRadioT.Devices;\n}\nexport const StyledLabel = styled('label', {\n  name: DSRadioName,\n  slot: DSRadioSlots.LABEL,\n})<StyledLabelT>`\n  ${({ wrapLabel, theme }) => (wrapLabel ? 'padding: 8px 0px 8px 8px;' : `padding-left: ${theme.space.xxs}`)};\n\n  color: ${({ theme, disabled, readOnly }) =>\n    disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n  font-size: 13px;\n  line-height: 1.1;\n  ${({ device, theme, wrapLabel }) => {\n    if (device === 'mobile') {\n      return `    \n      font-size: 16px;\n      line-height: 1.2;\n      ${wrapLabel ? `padding: 8px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};\n      `;\n    }\n    if (device === 'mediaquery') {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          font-size: 16px;\n          line-height: 1.2;\n          ${wrapLabel ? `padding: 8px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};\n        }\n\n        font-size: 13px;\n        line-height: 1.1;\n      `;\n    }\n    return `\n      font-size: 13px;\n      line-height: 1.1;\n    `;\n  }}\n  display: inherit;\n  width: fit-content;\n\n  ${({ disabled }) =>\n    disabled\n      ? `&:hover {\n    cursor: not-allowed;\n  }`\n      : `&:hover {\n    cursor: pointer;\n  }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, th, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSControlledRadioT } from './react-desc-prop-types.js';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';\nimport { DSRadioName, DSRadioSlots } from './exported-related/index.js';\n\nexport const StyledContainer = styled('div', {\n  name: DSRadioName,\n  slot: DSRadioSlots.CONTAINER,\n})<{ device?: DSControlledRadioT.Devices }>`\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `    \n      @media (max-width: ${theme.breakpoints.small}) {\n      grid-template-columns: 1.5rem auto; /* 24px / 16px */\n    }\n      grid-template-columns: 1.846rem auto;\n      `;\n    }\n    if (device === 'mediaquery') {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          grid-template-columns: 1.5rem auto;\n        }\n        grid-template-columns: 1.23rem auto;\n    `;\n    }\n    return `\n    @media (max-width: ${theme.breakpoints.small}) {\n      grid-template-columns: 1rem auto; /* 16px / 16px */\n    }\n    grid-template-columns: 1.2307rem auto; /* 16px / 13 */\n\n    `;\n  }}\n  column-gap: 8px;\n  display: inline-grid;\n  align-items: center;\n  ${xStyledCommonProps}\n`;\n\nexport const StyledRadio = styled('span')<DSControlledRadioT.StyledRadioT>`\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `    \n      @media (max-width: ${theme.breakpoints.small}) {\n        width: 1.5rem;  /* 24px / 16 */\n        height: 1.5rem;  /* 24px / 16 */\n      }\n      width: 1.846rem; /* 24px / 13 */\n      height: 1.846rem;  /* 24px / 13 */`;\n    }\n    if (device === 'mediaquery') {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          width: 1.5rem;  /* 24px / 16 */\n          height: 1.5rem;  /* 24px / 16 */\n        }\n        width: 1.2307rem; /* 16px / 13 */\n        height: 1.2307rem; /* 16px / 13 */\n      `;\n    }\n    return `\n    @media (max-width: ${theme.breakpoints.small}) {\n      width: 1rem;  /* 16px / 16 */\n      height: 1rem;  /* 16px / 16 */\n    }\n    width: 1.2307rem; /* 16px / 13 */\n    height: 1.2307rem; /* 16px / 13 */\n  `;\n  }}\n  border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n  border-radius: 50px;\n  position: relative;\n  background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};\n  ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n    handleCheckmark(theme, checked, disabled, readOnly, hasError, false, device)}\n  &:focus-within {\n    ${({ theme, hasError, disabled }) =>\n      !disabled\n        ? `border: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.brand[700]}; outline : 1px solid ${\n            hasError ? theme.colors.danger[900] : theme.colors.brand[700]\n          } `\n        : undefined};\n    &:hover {\n      ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n        handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}\n    }\n  }\n  &:hover {\n    background: ${({ theme, disabled }) => (!disabled ? theme.colors.brand[200] : undefined)};\n    ${({ theme, hasError, disabled, readOnly }) =>\n      !hasError && !disabled && !readOnly ? ` border: 1px solid  ${theme.colors.brand[600]}` : undefined};\n  }\n`;\n\nconst radioStyles = css`\n  &:hover {\n    cursor: pointer;\n  }\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n`;\n\nexport const StyledInput = styled('input', {\n  name: DSRadioName,\n  slot: DSRadioSlots.INPUT,\n})`\n  ${radioStyles}\n  &:disabled {\n    cursor: not-allowed;\n  }\n`;\ninterface StyledLabelT {\n  disabled?: boolean;\n  readOnly?: boolean;\n  checked: boolean;\n  onClick?: React.MouseEventHandler<HTMLLabelElement>;\n  device?: DSControlledRadioT.Devices;\n}\nexport const StyledLabel = styled('label', {\n  name: DSRadioName,\n  slot: DSRadioSlots.LABEL,\n})<StyledLabelT>`\n  color: ${({ theme, disabled, readOnly }) =>\n    disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n  line-height: 1.2307rem;\n  @media (max-width: ${th.breakpoint('small')}) {\n    line-height: 1rem; /* 13px / 16 */\n  }\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          font-size: 1rem;  /* 16px / 16 */\n        }\n        font-size: 1.2307rem; /* 16px / 13 */\n        `;\n    }\n    if (device === undefined) {\n      return `\n          font-size: 1rem; \n        `;\n    }\n    return `\n      @media (max-width: ${theme.breakpoints.small}) {\n        font-size: 0.8125rem;  /* 13px / 16 */\n      }\n  \n      font-size: 1rem;  /* 13px / 13 */\n    `;\n  }}\n  display: inherit;\n  width: fit-content;\n\n  ${({ disabled }) =>\n    disabled\n      ? `&:hover {\n    cursor: not-allowed;\n  }`\n      : `&:hover {\n    cursor: pointer;\n  }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/utils/styleHelpers.js

@@ -11,27 +11,32 @@ const handleCheckMarkColor = ({ colors }, checked, isHovering, disabled, readOnl
 const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHovering = false, device = "mediaquery") => {
   const desktopCheckmark = `
   content:"";
-  width: ${theme.space.xxs};
-  height: ${theme.space.xxs};
-
+  width: 0.615rem; /* 8px / 13 */
+  height: 0.615rem; /* 8px / 13 */
   border-radius:50%;
   display:inline-block;
-  margin:3px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
   background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
 `;
   const mediaqueryCheckmark = `
     @media (max-width: ${theme.breakpoints.small}) {
-      width: 12px;
-      height: 12px;
-      margin: 5px;
+      width: 0.75rem; /* 12px / 16 */
+      height: 0.75rem; /* 12px / 16 */
     }
     ${desktopCheckmark}
 `;
   const mobileCheckmark = `
     ${desktopCheckmark}
-    width: 12px;
-    height: 12px;
-    margin: 5px;
+    width: 0.923rem; /* 12px / 13 */
+    height: 0.923rem; /* 12px / 13 */
+    @media (max-width: ${theme.breakpoints.small}) {
+      width: 0.75rem; /* 12px / 16 */
+      height: 0.75rem; /* 12px / 16 */
+    }
   `;
   if (checked) {
     return `&:before {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styleHelpers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport const handleCheckMarkColor = (\n  { colors }: Theme,\n  checked?: boolean,\n  isHovering?: boolean,\n  disabled?: boolean,\n  readOnly?: boolean,\n  hasError?: boolean,\n): string => {\n  if (hasError) {\n    return colors.danger[900];\n  }\n  if (disabled || readOnly) {\n    return colors.neutral[500];\n  }\n\n  return colors.brand[600];\n};\n\nexport const handleCheckmark = (\n  theme: Theme,\n  checked?: boolean,\n  disabled?: boolean,\n  readOnly?: boolean,\n  hasError?: boolean,\n  isHovering = false,\n  device = 'mediaquery',\n): string => {\n  const desktopCheckmark = `\n  content:\"\";\n  width: ${theme.space.xxs};\n  height: ${theme.space.xxs};\n\n  border-radius:50%;\n  display:inline-block;\n  margin:3px;\n  background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n`;\n\n  const mediaqueryCheckmark = `\n    @media (max-width: ${theme.breakpoints.small}) {\n      width: 12px;\n      height: 12px;\n      margin: 5px;\n    }\n    ${desktopCheckmark}\n`;\n  const mobileCheckmark = `\n    ${desktopCheckmark}\n    width: 12px;\n    height: 12px;\n    margin: 5px;\n  `;\n\n  if (checked) {\n    return `&:before {\n        ${device === 'mediaquery' ? mediaqueryCheckmark : device === 'mobile' ? mobileCheckmark : desktopCheckmark}\n    }`;\n  }\n  return '';\n};\n\nexport const handleBackgroundColor = ({ colors }: Theme, disabled?: boolean): string => {\n  if (disabled) {\n    return colors.neutral['080'];\n  }\n\n  return colors.neutral['000'];\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACGhB,MAAM,uBAAuB,CAClC,EAAE,OAAO,GACT,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO,GAAG;AAAA,EAC1B;AACA,MAAI,YAAY,UAAU;AACxB,WAAO,OAAO,QAAQ,GAAG;AAAA,EAC3B;AAEA,SAAO,OAAO,MAAM,GAAG;AACzB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,OACb,SAAS,iBACE;AACX,QAAM,mBAAmB;AAAA;AAAA,WAEhB,MAAM,MAAM;AAAA,YACX,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKR,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAG3F,QAAM,sBAAsB;AAAA,yBACL,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,MAKrC;AAAA;AAEJ,QAAM,kBAAkB;AAAA,MACpB;AAAA;AAAA;AAAA;AAAA;AAMJ,MAAI,SAAS;AACX,WAAO;AAAA,UACD,WAAW,eAAe,sBAAsB,WAAW,WAAW,kBAAkB;AAAA;AAAA,EAEhG;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,EAAE,OAAO,GAAU,aAA+B;AACtF,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ,KAAK;AAAA,EAC7B;AAEA,SAAO,OAAO,QAAQ,KAAK;AAC7B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport const handleCheckMarkColor = (\n  { colors }: Theme,\n  checked?: boolean,\n  isHovering?: boolean,\n  disabled?: boolean,\n  readOnly?: boolean,\n  hasError?: boolean,\n): string => {\n  if (hasError) {\n    return colors.danger[900];\n  }\n  if (disabled || readOnly) {\n    return colors.neutral[500];\n  }\n\n  return colors.brand[600];\n};\n\nexport const handleCheckmark = (\n  theme: Theme,\n  checked?: boolean,\n  disabled?: boolean,\n  readOnly?: boolean,\n  hasError?: boolean,\n  isHovering = false,\n  device = 'mediaquery',\n): string => {\n  const desktopCheckmark = `\n  content:\"\";\n  width: 0.615rem; /* 8px / 13 */\n  height: 0.615rem; /* 8px / 13 */\n  border-radius:50%;\n  display:inline-block;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n\n  background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n`;\n\n  const mediaqueryCheckmark = `\n    @media (max-width: ${theme.breakpoints.small}) {\n      width: 0.75rem; /* 12px / 16 */\n      height: 0.75rem; /* 12px / 16 */\n    }\n    ${desktopCheckmark}\n`;\n  const mobileCheckmark = `\n    ${desktopCheckmark}\n    width: 0.923rem; /* 12px / 13 */\n    height: 0.923rem; /* 12px / 13 */\n    @media (max-width: ${theme.breakpoints.small}) {\n      width: 0.75rem; /* 12px / 16 */\n      height: 0.75rem; /* 12px / 16 */\n    }\n  `;\n\n  if (checked) {\n    return `&:before {\n        ${device === 'mediaquery' ? mediaqueryCheckmark : device === 'mobile' ? mobileCheckmark : desktopCheckmark}\n    }`;\n  }\n  return '';\n};\n\nexport const handleBackgroundColor = ({ colors }: Theme, disabled?: boolean): string => {\n  if (disabled) {\n    return colors.neutral['080'];\n  }\n\n  return colors.neutral['000'];\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGhB,MAAM,uBAAuB,CAClC,EAAE,OAAO,GACT,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO,GAAG;AAAA,EAC1B;AACA,MAAI,YAAY,UAAU;AACxB,WAAO,OAAO,QAAQ,GAAG;AAAA,EAC3B;AAEA,SAAO,OAAO,MAAM,GAAG;AACzB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,OACb,SAAS,iBACE;AACX,QAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAWX,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAG3F,QAAM,sBAAsB;AAAA,yBACL,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA,MAIrC;AAAA;AAEJ,QAAM,kBAAkB;AAAA,MACpB;AAAA;AAAA;AAAA,yBAGmB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAMzC,MAAI,SAAS;AACX,WAAO;AAAA,UACD,WAAW,eAAe,sBAAsB,WAAW,WAAW,kBAAkB;AAAA;AAAA,EAEhG;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,EAAE,OAAO,GAAU,aAA+B;AACtF,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ,KAAK;AAAA,EAC7B;AAEA,SAAO,OAAO,QAAQ,KAAK;AAC7B;",
   "names": []
 }

package/dist/types/react-desc-prop-types.d.ts

@@ -30,6 +30,6 @@ export declare namespace DSControlledRadioT {
     interface InternalProps extends DefaultProps, OptionalProps, Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps>, XstyledProps, RequiredProps {
     }
 }
-export declare const defaultProps: Partial<DSControlledRadioT.Props>;
+export declare const defaultProps: DSControlledRadioT.DefaultProps;
 export declare const DSControlledRadioPropTypes: DSPropTypesSchema<Omit<DSControlledRadioT.Props, 'visualOnly'>>;
 export declare const DSControlledRadioPropTypesSchema: React.WeakValidationMap<DSControlledRadioT.Props>;

package/dist/types/styles.d.ts

@@ -9,7 +9,6 @@ interface StyledLabelT {
     disabled?: boolean;
     readOnly?: boolean;
     checked: boolean;
-    wrapLabel: boolean;
     onClick?: React.MouseEventHandler<HTMLLabelElement>;
     device?: DSControlledRadioT.Devices;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-radio",
-  "version": "3.29.1",
+  "version": "3.30.0-next.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Radio",
   "files": [
@@ -35,17 +35,17 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-props-helpers": "3.29.1",
-    "@elliemae/ds-utilities": "3.29.1",
-    "@elliemae/ds-truncated-tooltip-text": "3.29.1",
-    "@elliemae/ds-system": "3.29.1"
+    "@elliemae/ds-props-helpers": "3.30.0-next.0",
+    "@elliemae/ds-truncated-tooltip-text": "3.30.0-next.0",
+    "@elliemae/ds-system": "3.30.0-next.0",
+    "@elliemae/ds-utilities": "3.30.0-next.0"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "~9.0.0-next.31",
     "@elliemae/pui-theme": "~2.7.0",
     "styled-components": "~5.3.9",
     "uid": "~2.0.1",
-    "@elliemae/ds-monorepo-devops": "3.29.1"
+    "@elliemae/ds-monorepo-devops": "3.30.0-next.0"
   },
   "peerDependencies": {
     "@elliemae/pui-theme": "~2.7.0",