@transferwise/components 46.130.2 → 46.131.0

package/build/phoneNumberInput/PhoneNumberInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumberInput.mjs","sources":["../../src/phoneNumberInput/PhoneNumberInput.tsx"],"sourcesContent":["import { useState, useEffect, useMemo, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { useFieldLabelRef, useInputAttributes } from '../inputs/contexts';\nimport { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';\nimport messages from './PhoneNumberInput.messages';\nimport countries from './data/countries';\nimport {\n  explodeNumberModel,\n  isValidPhoneNumber,\n  cleanNumber,\n  setDefaultPrefix,\n  sortArrayByProperty,\n  groupCountriesByPrefix,\n  excludeCountries,\n  findCountryByPrefix,\n} from './utils';\nimport { PhoneNumber } from './utils/explodeNumberModel';\nimport { Input } from '../inputs/Input';\n\nconst ALLOWED_PHONE_CHARS = /^$|^[\\d-\\s]+$/;\n\nexport interface PhoneNumberInputProps {\n  id?: string;\n  'aria-labelledby'?: string;\n  required?: boolean;\n  disabled?: boolean;\n  initialValue?: string;\n  onChange: (value: string | null, prefix: string) => void;\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  onBlur?: () => void;\n  countryCode?: string;\n  /** @default 'Prefix' */\n  searchPlaceholder?: string;\n  /** @default 'md' */\n  size?: SizeSmall | SizeMedium | SizeLarge;\n  placeholder?: string;\n  /** @default {} */\n  selectProps?: Partial<SelectInputProps<string | null>>;\n  /**\n   * List of iso3 codes of countries to remove from the list\n   * @default []\n   */\n  disabledCountries?: readonly string[];\n}\n\nconst defaultSelectProps = {} satisfies PhoneNumberInputProps['selectProps'];\nconst defaultDisabledCountries = [] satisfies PhoneNumberInputProps['disabledCountries'];\n\nconst PhoneNumberInput = ({\n  id,\n  'aria-labelledby': ariaLabelledByProp,\n  required,\n  disabled,\n  initialValue,\n  onChange,\n  onFocus,\n  onBlur,\n  countryCode,\n  searchPlaceholder = 'Prefix',\n  size = Size.MEDIUM,\n  placeholder,\n  selectProps = defaultSelectProps,\n  disabledCountries = defaultDisabledCountries,\n}: PhoneNumberInputProps) => {\n  const countryCodeSelectRef = useRef<HTMLButtonElement>(null);\n  const phoneNumberInputRef = useRef<HTMLInputElement>(null);\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n  const fieldLabelRef = useFieldLabelRef();\n  const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n  const { locale, formatMessage } = useIntl();\n\n  const createId = (customID: string | undefined, backup: string): string => {\n    if (customID) {\n      return customID + (backup ? `-${backup}` : '');\n    }\n    const random = Math.random().toString(36).slice(2, 8);\n    return `${backup}-${random}`;\n  };\n\n  // Link the first non-disabled input to the the Field label, if present\n  const ids = {\n    countryCode: {\n      label: createId(id, 'country-code-label'),\n      select: createId(id, 'country-code-select'),\n    },\n    phoneNumber: {\n      label: createId(id, 'phone-number-label'),\n      input: createId(id, id ? '' : 'phone-number-input'),\n    },\n  };\n\n  const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {\n    const cleanValue = initialValue ? cleanNumber(initialValue) : null;\n\n    if (!cleanValue || !isValidPhoneNumber(cleanValue, 1)) {\n      return {\n        prefix: setDefaultPrefix(locale, countryCode),\n        suffix: '',\n      };\n    }\n\n    return explodeNumberModel(cleanValue);\n  });\n  const [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber | null>(null);\n\n  const [suffixDirty, setSuffixDirty] = useState(false);\n  useEffect(() => {\n    if (internalValue.suffix) {\n      setSuffixDirty(true);\n    }\n  }, [internalValue.suffix]);\n\n  const countriesByPrefix = useMemo(\n    () =>\n      groupCountriesByPrefix(\n        sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3'),\n      ),\n    [disabledCountries],\n  );\n\n  const onSuffixChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n    const suffix = event.target.value;\n    if (ALLOWED_PHONE_CHARS.test(suffix)) {\n      setInternalValue((prev) => ({ ...prev, suffix }));\n    }\n  };\n\n  const onPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {\n    if (!event.nativeEvent.clipboardData) {\n      return;\n    }\n\n    const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(\n      /(\\s|-)+/g,\n      '',\n    );\n    const pastedNumber = explodeNumberModel(pastedValue);\n\n    if (\n      pastedNumber.prefix != null &&\n      countriesByPrefix.has(pastedNumber.prefix) &&\n      ALLOWED_PHONE_CHARS.test(pastedNumber.suffix)\n    ) {\n      setInternalValue(pastedNumber);\n    }\n  };\n\n  useEffect(() => {\n    if (broadcastedValue === null) {\n      setBroadcastedValue(internalValue);\n      return;\n    }\n\n    const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;\n    const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;\n\n    if (internalPhoneNumber === broadcastedPhoneNumber) {\n      return;\n    }\n\n    const newValue = isValidPhoneNumber(internalPhoneNumber)\n      ? cleanNumber(internalPhoneNumber)\n      : null;\n\n    onChange(\n      newValue,\n      internalValue.prefix ?? '', // TODO: Allow `null` in public API\n    );\n    setBroadcastedValue(internalValue);\n  }, [onChange, broadcastedValue, internalValue]);\n\n  useEffect(() => {\n    const labelRef = fieldLabelRef?.current;\n\n    if (labelRef) {\n      const handleLabelClick = () => {\n        if (!selectProps.disabled) {\n          countryCodeSelectRef.current?.click();\n        } else {\n          phoneNumberInputRef.current?.focus();\n        }\n      };\n\n      labelRef.addEventListener('click', handleLabelClick);\n\n      return () => {\n        labelRef?.removeEventListener('click', handleLabelClick);\n      };\n    }\n  }, [fieldLabelRef, selectProps.disabled]);\n\n  return (\n    <fieldset {...inputAttributes} aria-labelledby={ariaLabelledBy} className=\"tw-telephone\">\n      <label className=\"sr-only\" id={ids.countryCode.label} htmlFor={ids.countryCode.select}>\n        {formatMessage(messages.countryCodeLabel)}\n      </label>\n      <div className=\"tw-telephone__country-select\">\n        <SelectInput\n          triggerRef={countryCodeSelectRef}\n          placeholder={formatMessage(messages.selectInputPlaceholder)}\n          items={[...countriesByPrefix].map(([prefix, countries]) => ({\n            type: 'option',\n            value: prefix,\n            filterMatchers: [\n              prefix,\n              ...countries.map((country) => country.name),\n              ...countries.map((country) => country.iso3),\n            ],\n          }))}\n          value={internalValue.prefix}\n          renderValue={(prefix, withinTrigger) => (\n            <SelectInputOptionContent\n              title={prefix}\n              note={\n                withinTrigger\n                  ? undefined\n                  : countriesByPrefix\n                      .get(prefix)\n                      ?.map((country) => country.iso3)\n                      .join(', ')\n              }\n            />\n          )}\n          filterable\n          filterPlaceholder={searchPlaceholder}\n          disabled={disabled}\n          size={size}\n          id={ids.countryCode.select}\n          UNSAFE_triggerButtonProps={{\n            id: ids.countryCode.select,\n            'aria-labelledby': ids.countryCode.label,\n            'aria-describedby': undefined,\n            'aria-invalid': undefined,\n          }}\n          onChange={(prefix) => {\n            const country = prefix != null ? findCountryByPrefix(prefix) : null;\n            setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));\n          }}\n          onClose={() => {\n            if (suffixDirty) {\n              onBlur?.();\n            }\n          }}\n          {...selectProps}\n        />\n      </div>\n      <label className=\"sr-only\" id={ids.phoneNumber.label} htmlFor={ids.phoneNumber.input}>\n        {formatMessage(messages.phoneNumberLabel)}\n      </label>\n      <div className=\"tw-telephone__number-input\">\n        <div className={`input-group input-group-${size} ${disabled ? 'disabled' : ''}`}>\n          <Input\n            ref={phoneNumberInputRef}\n            id={ids.phoneNumber.input}\n            autoComplete=\"tel-national\"\n            name=\"phoneNumber\"\n            inputMode=\"numeric\"\n            value={internalValue.suffix}\n            disabled={disabled}\n            required={required}\n            placeholder={placeholder}\n            aria-labelledby={ids.phoneNumber.label}\n            onChange={onSuffixChange}\n            onPaste={onPaste}\n            onFocus={onFocus}\n            onBlur={() => onBlur?.()}\n          />\n        </div>\n      </div>\n    </fieldset>\n  );\n};\n\nexport default PhoneNumberInput;\n"],"names":["ALLOWED_PHONE_CHARS","defaultSelectProps","defaultDisabledCountries","PhoneNumberInput","id","ariaLabelledByProp","required","disabled","initialValue","onChange","onFocus","onBlur","countryCode","searchPlaceholder","size","Size","MEDIUM","placeholder","selectProps","disabledCountries","countryCodeSelectRef","useRef","phoneNumberInputRef","inputAttributes","useInputAttributes","nonLabelable","fieldLabelRef","useFieldLabelRef","ariaLabelledBy","locale","formatMessage","useIntl","createId","customID","backup","random","Math","toString","slice","ids","label","select","phoneNumber","input","internalValue","setInternalValue","useState","cleanValue","cleanNumber","isValidPhoneNumber","prefix","setDefaultPrefix","suffix","explodeNumberModel","broadcastedValue","setBroadcastedValue","suffixDirty","setSuffixDirty","useEffect","countriesByPrefix","useMemo","groupCountriesByPrefix","sortArrayByProperty","excludeCountries","countries","onSuffixChange","event","target","value","test","prev","onPaste","nativeEvent","clipboardData","pastedValue","getData","replace","pastedNumber","has","internalPhoneNumber","broadcastedPhoneNumber","newValue","labelRef","current","handleLabelClick","click","focus","addEventListener","removeEventListener","_jsxs","className","children","_jsx","htmlFor","messages","countryCodeLabel","SelectInput","triggerRef","selectInputPlaceholder","items","map","type","filterMatchers","country","name","iso3","renderValue","withinTrigger","SelectInputOptionContent","title","note","undefined","get","join","filterable","filterPlaceholder","UNSAFE_triggerButtonProps","findCountryByPrefix","format","phoneFormat","onClose","phoneNumberLabel","Input","ref","autoComplete","inputMode"],"mappings":"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"}
+{"version":3,"file":"PhoneNumberInput.mjs","sources":["../../src/phoneNumberInput/PhoneNumberInput.tsx"],"sourcesContent":["import { useState, useEffect, useMemo, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { useFieldLabelRef, useInputAttributes } from '../inputs/contexts';\nimport { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';\nimport messages from './PhoneNumberInput.messages';\nimport countries from './data/countries';\nimport {\n  explodeNumberModel,\n  isValidPhoneNumber,\n  cleanNumber,\n  setDefaultPrefix,\n  sortArrayByProperty,\n  groupCountriesByPrefix,\n  excludeCountries,\n  findCountryByPrefix,\n} from './utils';\nimport { PhoneNumber } from './utils/explodeNumberModel';\nimport { Input } from '../inputs/Input';\n\nconst ALLOWED_PHONE_CHARS = /^$|^[\\d-\\s]+$/;\n\nexport interface PhoneNumberInputProps {\n  id?: string;\n  'aria-labelledby'?: string;\n  required?: boolean;\n  disabled?: boolean;\n  initialValue?: string;\n  onChange: (value: string | null, prefix: string) => void;\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  onBlur?: () => void;\n  countryCode?: string;\n  /** @default 'Prefix' */\n  searchPlaceholder?: string;\n  /** @default 'md' */\n  size?: SizeSmall | SizeMedium | SizeLarge;\n  placeholder?: string;\n  /** @default {} */\n  selectProps?: Partial<SelectInputProps<string | null>>;\n  /**\n   * List of iso3 codes of countries to remove from the list\n   * @default []\n   */\n  disabledCountries?: readonly string[];\n}\n\nconst defaultSelectProps = {} satisfies PhoneNumberInputProps['selectProps'];\nconst defaultDisabledCountries = [] satisfies PhoneNumberInputProps['disabledCountries'];\n\nconst PhoneNumberInput = ({\n  id,\n  'aria-labelledby': ariaLabelledByProp,\n  required,\n  disabled,\n  initialValue,\n  onChange,\n  onFocus,\n  onBlur,\n  countryCode,\n  searchPlaceholder = 'Prefix',\n  size = Size.MEDIUM,\n  placeholder,\n  selectProps = defaultSelectProps,\n  disabledCountries = defaultDisabledCountries,\n}: PhoneNumberInputProps) => {\n  const countryCodeSelectRef = useRef<HTMLButtonElement>(null);\n  const phoneNumberInputRef = useRef<HTMLInputElement>(null);\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n  const fieldLabelRef = useFieldLabelRef();\n  const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n  const { locale, formatMessage } = useIntl();\n\n  const createId = (customID: string | undefined, backup: string): string => {\n    if (customID) {\n      return customID + (backup ? `-${backup}` : '');\n    }\n    const random = Math.random().toString(36).slice(2, 8);\n    return `${backup}-${random}`;\n  };\n\n  // Link the first non-disabled input to the the Field label, if present\n  const ids = {\n    countryCode: {\n      label: createId(id, 'country-code-label'),\n      select: createId(id, 'country-code-select'),\n    },\n    phoneNumber: {\n      label: createId(id, 'phone-number-label'),\n      input: createId(id, id ? '' : 'phone-number-input'),\n    },\n  };\n\n  const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {\n    const cleanValue = initialValue ? cleanNumber(initialValue) : null;\n\n    if (!cleanValue || !isValidPhoneNumber(cleanValue, 1)) {\n      return {\n        prefix: setDefaultPrefix(locale, countryCode),\n        suffix: '',\n      };\n    }\n\n    return explodeNumberModel(cleanValue);\n  });\n  const [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber | null>(null);\n\n  const [suffixDirty, setSuffixDirty] = useState(false);\n  useEffect(() => {\n    if (internalValue.suffix) {\n      setSuffixDirty(true);\n    }\n  }, [internalValue.suffix]);\n\n  const countriesByPrefix = useMemo(\n    () =>\n      groupCountriesByPrefix(\n        sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3'),\n      ),\n    [disabledCountries],\n  );\n\n  const onSuffixChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n    const suffix = event.target.value;\n    if (ALLOWED_PHONE_CHARS.test(suffix)) {\n      setInternalValue((prev) => ({ ...prev, suffix }));\n    }\n  };\n\n  const onPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {\n    if (!event.nativeEvent.clipboardData) {\n      return;\n    }\n\n    const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(\n      /(\\s|-)+/g,\n      '',\n    );\n    const pastedNumber = explodeNumberModel(pastedValue);\n\n    if (\n      pastedNumber.prefix != null &&\n      countriesByPrefix.has(pastedNumber.prefix) &&\n      ALLOWED_PHONE_CHARS.test(pastedNumber.suffix)\n    ) {\n      setInternalValue(pastedNumber);\n    }\n  };\n\n  useEffect(() => {\n    if (broadcastedValue === null) {\n      setBroadcastedValue(internalValue);\n      return;\n    }\n\n    const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;\n    const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;\n\n    if (internalPhoneNumber === broadcastedPhoneNumber) {\n      return;\n    }\n\n    const newValue = isValidPhoneNumber(internalPhoneNumber)\n      ? cleanNumber(internalPhoneNumber)\n      : null;\n\n    onChange(\n      newValue,\n      internalValue.prefix ?? '', // TODO: Allow `null` in public API\n    );\n    setBroadcastedValue(internalValue);\n  }, [onChange, broadcastedValue, internalValue]);\n\n  useEffect(() => {\n    const labelRef = fieldLabelRef?.current;\n\n    if (labelRef) {\n      const handleLabelClick = () => {\n        if (!selectProps.disabled) {\n          countryCodeSelectRef.current?.click();\n        } else {\n          phoneNumberInputRef.current?.focus();\n        }\n      };\n\n      labelRef.addEventListener('click', handleLabelClick);\n\n      return () => {\n        labelRef?.removeEventListener('click', handleLabelClick);\n      };\n    }\n  }, [fieldLabelRef, selectProps.disabled]);\n\n  return (\n    <fieldset {...inputAttributes} aria-labelledby={ariaLabelledBy} className=\"tw-telephone\">\n      <label className=\"sr-only\" id={ids.countryCode.label} htmlFor={ids.countryCode.select}>\n        {formatMessage(messages.countryCodeLabel)}\n      </label>\n      <div className=\"tw-telephone__country-select\">\n        <SelectInput\n          triggerRef={countryCodeSelectRef}\n          placeholder={formatMessage(messages.selectInputPlaceholder)}\n          items={[...countriesByPrefix].map(([prefix, countries]) => ({\n            type: 'option',\n            value: prefix,\n            filterMatchers: [\n              prefix,\n              ...countries.map((country) => country.name),\n              ...countries.map((country) => country.iso3),\n            ],\n          }))}\n          value={internalValue.prefix}\n          renderValue={(prefix, withinTrigger) => (\n            <SelectInputOptionContent\n              title={prefix}\n              note={\n                withinTrigger\n                  ? undefined\n                  : countriesByPrefix\n                      .get(prefix)\n                      ?.map((country) => country.iso3)\n                      .join(', ')\n              }\n            />\n          )}\n          filterable\n          filterPlaceholder={searchPlaceholder}\n          disabled={disabled}\n          size={size}\n          id={ids.countryCode.select}\n          UNSAFE_triggerButtonProps={{\n            id: ids.countryCode.select,\n            'aria-labelledby': ids.countryCode.label,\n            'aria-describedby': undefined,\n            'aria-invalid': undefined,\n          }}\n          onChange={(prefix) => {\n            const country = prefix != null ? findCountryByPrefix(prefix) : null;\n            setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));\n          }}\n          onClose={() => {\n            if (suffixDirty) {\n              onBlur?.();\n            }\n          }}\n          {...selectProps}\n        />\n      </div>\n      <label className=\"sr-only\" id={ids.phoneNumber.label} htmlFor={ids.phoneNumber.input}>\n        {formatMessage(messages.phoneNumberLabel)}\n      </label>\n      <div className=\"tw-telephone__number-input\">\n        <div className={`input-group input-group-${size} ${disabled ? 'disabled' : ''}`}>\n          <Input\n            ref={phoneNumberInputRef}\n            id={ids.phoneNumber.input}\n            autoComplete=\"tel-national\"\n            name=\"phoneNumber\"\n            inputMode=\"numeric\"\n            value={internalValue.suffix}\n            disabled={disabled}\n            required={required}\n            placeholder={placeholder}\n            aria-labelledby={ids.phoneNumber.label}\n            onChange={onSuffixChange}\n            onPaste={onPaste}\n            onFocus={onFocus}\n            onBlur={() => onBlur?.()}\n          />\n        </div>\n      </div>\n    </fieldset>\n  );\n};\n\nexport default PhoneNumberInput;\n"],"names":["ALLOWED_PHONE_CHARS","defaultSelectProps","defaultDisabledCountries","PhoneNumberInput","id","ariaLabelledByProp","required","disabled","initialValue","onChange","onFocus","onBlur","countryCode","searchPlaceholder","size","Size","MEDIUM","placeholder","selectProps","disabledCountries","countryCodeSelectRef","useRef","phoneNumberInputRef","inputAttributes","useInputAttributes","nonLabelable","fieldLabelRef","useFieldLabelRef","ariaLabelledBy","locale","formatMessage","useIntl","createId","customID","backup","random","Math","toString","slice","ids","label","select","phoneNumber","input","internalValue","setInternalValue","useState","cleanValue","cleanNumber","isValidPhoneNumber","prefix","setDefaultPrefix","suffix","explodeNumberModel","broadcastedValue","setBroadcastedValue","suffixDirty","setSuffixDirty","useEffect","countriesByPrefix","useMemo","groupCountriesByPrefix","sortArrayByProperty","excludeCountries","countries","onSuffixChange","event","target","value","test","prev","onPaste","nativeEvent","clipboardData","pastedValue","getData","replace","pastedNumber","has","internalPhoneNumber","broadcastedPhoneNumber","newValue","labelRef","current","handleLabelClick","click","focus","addEventListener","removeEventListener","_jsxs","className","children","_jsx","htmlFor","messages","countryCodeLabel","SelectInput","triggerRef","selectInputPlaceholder","items","map","type","filterMatchers","country","name","iso3","renderValue","withinTrigger","SelectInputOptionContent","title","note","undefined","get","join","filterable","filterPlaceholder","UNSAFE_triggerButtonProps","findCountryByPrefix","format","phoneFormat","onClose","phoneNumberLabel","Input","ref","autoComplete","inputMode"],"mappings":"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"}

package/build/styles/css/accordion.css

@@ -0,0 +1,255 @@
+.tw-chevron {
+  display: inline-block;
+  transition: transform cubic-bezier(0, 0.94, 0.62, 1) 350ms;
+}
+.tw-chevron.top {
+  transform: rotate(0deg);
+}
+.tw-chevron.right {
+  transform: rotate(90deg);
+}
+[dir="rtl"] .tw-chevron.right {
+  transform: rotate(-90deg);
+}
+.tw-chevron.right-sigle-direction {
+  transform: rotate(90deg) !important;
+}
+.tw-chevron.bottom {
+  transform: rotate(180deg);
+}
+.tw-chevron.left {
+  transform: rotate(270deg);
+}
+[dir="rtl"] .tw-chevron.left {
+  transform: rotate(-270deg);
+}
+.tw-chevron.left-single-direction {
+  transform: rotate(270deg) !important;
+}
+.chevron-color {
+  color: #0097c7;
+  color: var(--color-content-accent);
+}
+.np-theme-personal .chevron-color {
+  color: var(--color-interactive-primary);
+}
+.decision {
+  cursor: pointer;
+  margin-bottom: 0 !important;
+  border: 0;
+  align-items: center;
+  transition: background-color ease 350ms;
+  background-color: transparent;
+  display: block;
+}
+.decision:not(.np-option):focus-visible,
+.decision:not(.np-option):has(:focus-visible) {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: 0;
+  outline-offset: var(--ring-outline-offset);
+  --ring-outline-offset: 0;
+}
+.decision__title {
+  margin: 0;
+  color: #37517e;
+  color: var(--color-content-primary);
+  line-height: 1.2;
+  line-height: var(--line-height-title);
+  letter-spacing: 0;
+  font-size: 1.125rem;
+  font-size: var(--font-size-18);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  letter-spacing: -0.014em;
+  line-height: 135%;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .decision__title {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .decision__title {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .decision__title {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .decision__title {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .decision__title {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
+.decision__title + p,
+.decision__title + ul:not(.list-unstyled),
+.decision__title + ol:not(.list-unstyled) {
+  margin-top: 8px;
+  margin-top: var(--size-8);
+}
+.decision__content {
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}
+.decision + .decision {
+  margin-top: -1px;
+}
+.decision dd:last-child {
+  margin-bottom: 0;
+}
+.decision dl {
+  margin-top: 8px;
+  margin-top: var(--size-8);
+}
+.decision .media,
+.decision.media {
+  width: 100%;
+  padding: 16px 12px;
+  padding: var(--size-16) var(--size-12);
+}
+.np-theme-personal .decision .media,
+.np-theme-personal .decision.media {
+  padding: 16px;
+  padding: var(--size-16);
+}
+.decision .media .media-left,
+.decision.media .media-left {
+  display: none;
+}
+.decision .media .media-body,
+.decision.media .media-body {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
+@media (min-width: 480px) {
+  .decision .media .media-left,
+  .decision.media .media-left {
+    display: block;
+  }
+}
+.decision:not(.disabled):hover {
+  background-color: rgba(134,167,189,0.07059);
+}
+.decision:not(.disabled):hover .circle-inverse {
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+}
+.np-theme-personal .decision:not(.disabled):hover .circle-inverse {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.decision:not(.disabled):hover .tw-checkbox-button,
+.decision:not(.disabled):hover .tw-radio-button {
+  border-color: #00a2dd;
+  border-color: var(--color-interactive-accent);
+}
+.np-theme-personal .decision:not(.disabled):hover .tw-checkbox-button,
+.np-theme-personal .decision:not(.disabled):hover .tw-radio-button {
+  border-color: transparent;
+}
+.decision.decision-complex {
+  align-items: initial;
+}
+.np-theme-personal .decision:not(.disabled):hover {
+  background-color: var(--color-background-screen-hover);
+}
+.media {
+  display: flex;
+  align-items: center;
+}
+.media-body {
+  flex: 1;
+}
+.media-body > *:last-child {
+  margin-bottom: 0;
+}
+.media-middle {
+  align-self: center;
+}
+.media-bottom {
+  align-self: flex-end;
+}
+/* Images/elements as the media anchor */
+.media-object {
+  display: block;
+}
+/* Alignment */
+.media-right {
+  padding-left: 16px;
+  padding-left: var(--size-16);
+}
+[dir="rtl"] .media-right {
+  padding-right: 16px;
+  padding-right: var(--size-16);
+  padding-left: 0;
+  padding-left: initial;
+}
+.media-left {
+  padding-right: 16px;
+  padding-right: var(--size-16);
+}
+[dir="rtl"] .media-left {
+  padding-left: 16px;
+  padding-left: var(--size-16);
+  padding-right: 0;
+  padding-right: initial;
+}
+@media (max-width: 320px) {
+  .media-right,
+  .media-left {
+    padding-left: 32px;
+    padding-left: var(--size-32);
+  }
+  [dir="rtl"] .media-right,
+  [dir="rtl"] .media-left {
+    padding-right: 32px;
+    padding-right: var(--size-32);
+    padding-left: 0;
+    padding-left: initial;
+  }
+}
+/* Headings */
+.media-heading {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+/* Media list variation */
+.media-list {
+  padding-left: 0;
+  list-style: none;
+}
+[dir="rtl"] .media-list {
+  padding-right: 0;
+  padding-left: 0;
+  padding-left: initial;
+}
+/* Fix text-ellipsis issue with text in dropdown */
+.dropdown-menu .media-body {
+  overflow: hidden;
+}
+.accordion-item {
+  display: block;
+}
+.accordion-item .chevron {
+  vertical-align: middle;
+}
+.accordion-item.decision:not(.disabled):hover {
+  background-color: #ffffff;
+  background-color: var(--color-background-elevated);
+}