@pega/cosmos-react-core 2.0.0-dev.11.0 → 2.0.0-dev.14.0

package/lib/components/Phone/PhoneInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneInput.js","sourceRoot":"","sources":["../../../src/components/Phone/PhoneInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeEvent,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport StyledInput from '../Input/Input.styles';\nimport Select, { Option } from '../Select';\nimport Input from '../Input';\nimport { StyledSelect } from '../Select/Select';\nimport Flex from '../Flex';\nimport { useDirection, useFocusWithin } from '../../hooks';\n\nimport callingCodes from './callingCodes';\nimport {\n  calculateCursorPosition,\n  convertToCallbackParameter,\n  formatPhoneNumber,\n  getPhoneNumberParts\n} from './utils';\n\nexport interface PhoneInputProps extends FormControlProps, BaseProps {\n  /**\n   * Display select with countries calling codes\n   * @default false\n   */\n  showCountryCode?: boolean;\n  /** Changes lists of countries calling codes */\n  callingCodesList?: string[];\n  /** Callback fired on input value change */\n  onChange?: (value: string) => void;\n  /** Callback fired when the component loses focus */\n  onBlur?: (value: string) => void;\n  /** CCallback fired when the component gets focus */\n  onFocus?: (value: string) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype PhoneInputPropsWithDefaults = PropsWithDefaults<PhoneInputProps>;\n\nconst StyledPhoneInput = styled.div<PhoneInputPropsWithDefaults>(() => {\n  const { start, end } = useDirection();\n  return css`\n    border: 0;\n    > ${StyledSelect} {\n      max-width: max-content;\n      border-inline-end: none;\n      border-top-${end}-radius: 0;\n      border-bottom-${end}-radius: 0;\n    }\n\n    > ${StyledSelect} + ${StyledInput} {\n      border-top-${start}-radius: 0;\n      border-bottom-${start}-radius: 0;\n    }\n  `;\n});\n\nStyledPhoneInput.defaultProps = defaultThemeProp;\n\nconst PhoneInput: FunctionComponent<PhoneInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<PhoneInputProps>, ref: PhoneInputProps['ref']) => {\n    const {\n      defaultValue,\n      value = defaultValue,\n      id,\n      label,\n      labelHidden,\n      info,\n      status,\n      required,\n      readOnly,\n      disabled,\n      showCountryCode = false,\n      callingCodesList = callingCodes,\n      onChange,\n      onBlur,\n      onFocus,\n      ...restProps\n    } = props;\n\n    const phoneNumberParts = useMemo(() => {\n      return value ? getPhoneNumberParts(value, callingCodesList) : undefined;\n    }, [callingCodesList, value]);\n\n    const [countryCode, setCountryCode] = useState(phoneNumberParts?.[0]);\n\n    const [phoneNumber, setPhoneNumber] = useState(\n      phoneNumberParts ? formatPhoneNumber(phoneNumberParts[1], countryCode) : ''\n    );\n\n    const [cursor, setCursor] = useState<number | undefined>(undefined);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n      if (cursor !== undefined) inputRef.current?.setSelectionRange(cursor, cursor);\n    }, [cursor, inputRef.current]);\n\n    const onFocusChange = (focused: boolean) => {\n      const callbackParam = convertToCallbackParameter(countryCode, phoneNumber);\n      if (focused) onFocus?.(callbackParam);\n      else onBlur?.(callbackParam);\n    };\n\n    const containerRef = useRef<HTMLElement>(null);\n    useFocusWithin([containerRef], onFocusChange);\n\n    const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n      const inputValue = e.target.value;\n      const selectionStart = e.target.selectionStart;\n      const formatted = formatPhoneNumber(inputValue, countryCode);\n      setPhoneNumber(formatted);\n      if (countryCode) {\n        setCursor(calculateCursorPosition(formatted, phoneNumber, countryCode, selectionStart));\n      }\n      onChange?.(convertToCallbackParameter(countryCode, formatted));\n    };\n\n    const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {\n      const selectValue = e.target.value;\n      setCountryCode(selectValue);\n      setPhoneNumber(formatPhoneNumber(phoneNumber, selectValue));\n      onChange?.(convertToCallbackParameter(selectValue, phoneNumber));\n    };\n\n    const codesOptions = (\n      <>\n        {callingCodesList.map(code => (\n          <Option key={code} value={code}>\n            {code}\n          </Option>\n        ))}\n      </>\n    );\n\n    const Comp = (\n      <StyledPhoneInput\n        as={StyledFormControl}\n        forwardedAs={Flex as any}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        ref={containerRef}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n      >\n        {showCountryCode && (\n          <Select\n            value={countryCode}\n            onChange={onSelectChange}\n            required={required}\n            status={status}\n            readOnly={readOnly}\n            disabled={disabled}\n          >\n            {codesOptions}\n          </Select>\n        )}\n        <Input\n          {...restProps}\n          inputMode='tel'\n          ref={inputRef}\n          value={phoneNumber}\n          onChange={onInputChange}\n          required={required}\n          status={status}\n          readOnly={readOnly}\n          disabled={disabled}\n        />\n      </StyledPhoneInput>\n    );\n\n    return label ? (\n      <FormField\n        as='fieldset'\n        labelAs='legend'\n        {...{ label, labelHidden, id, info, ref, status, required, disabled }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default PhoneInput;\n"]}
+{"version":3,"file":"PhoneInput.js","sourceRoot":"","sources":["../../../src/components/Phone/PhoneInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeEvent,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useAfterInitialEffect, useDirection, useFocusWithin } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport StyledInput from '../Input/Input.styles';\nimport Select, { Option } from '../Select';\nimport Input from '../Input';\nimport { StyledSelect } from '../Select/Select';\nimport Flex from '../Flex';\n\nimport callingCodes from './callingCodes';\nimport {\n  calculateCursorPosition,\n  convertToCallbackParameter,\n  formatPhoneNumber,\n  getPhoneNumberParts\n} from './utils';\n\nexport interface PhoneInputProps extends FormControlProps, BaseProps {\n  /**\n   * Display select with countries calling codes\n   * @default false\n   */\n  showCountryCode?: boolean;\n  /** Changes lists of countries calling codes */\n  callingCodesList?: string[];\n  /** Callback fired on input value change */\n  onChange?: (value: string) => void;\n  /** Callback fired when the component loses focus */\n  onBlur?: (value: string) => void;\n  /** CCallback fired when the component gets focus */\n  onFocus?: (value: string) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype PhoneInputPropsWithDefaults = PropsWithDefaults<PhoneInputProps>;\n\nconst StyledPhoneInput = styled.div<PhoneInputPropsWithDefaults>(() => {\n  const { start, end } = useDirection();\n  return css`\n    border: 0;\n    > ${StyledSelect} {\n      max-width: max-content;\n      border-inline-end: none;\n      border-top-${end}-radius: 0;\n      border-bottom-${end}-radius: 0;\n    }\n\n    > ${StyledSelect} + ${StyledInput} {\n      border-top-${start}-radius: 0;\n      border-bottom-${start}-radius: 0;\n    }\n  `;\n});\n\nStyledPhoneInput.defaultProps = defaultThemeProp;\n\nconst PhoneInput: FunctionComponent<PhoneInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<PhoneInputProps>, ref: PhoneInputProps['ref']) => {\n    const {\n      defaultValue,\n      value = defaultValue,\n      id,\n      label,\n      labelHidden,\n      info,\n      status,\n      required,\n      readOnly,\n      disabled,\n      showCountryCode = false,\n      callingCodesList = callingCodes,\n      onChange,\n      onBlur,\n      onFocus,\n      ...restProps\n    } = props;\n\n    const phoneNumberParts = useMemo(() => {\n      return value ? getPhoneNumberParts(value, callingCodesList) : undefined;\n    }, [callingCodesList, value]);\n\n    const [countryCode, setCountryCode] = useState(phoneNumberParts?.[0]);\n\n    const [phoneNumber, setPhoneNumber] = useState(\n      phoneNumberParts ? formatPhoneNumber(phoneNumberParts[1], countryCode) : ''\n    );\n\n    useAfterInitialEffect(() => {\n      setCountryCode(phoneNumberParts?.[0]);\n      setPhoneNumber(phoneNumberParts ? formatPhoneNumber(phoneNumberParts[1], countryCode) : '');\n    }, [phoneNumberParts]);\n\n    const [cursor, setCursor] = useState<number | undefined>(undefined);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n      if (cursor !== undefined) inputRef.current?.setSelectionRange(cursor, cursor);\n    }, [cursor, inputRef.current]);\n\n    const onFocusChange = (focused: boolean) => {\n      const callbackParam = convertToCallbackParameter(countryCode, phoneNumber);\n      if (focused) onFocus?.(callbackParam);\n      else onBlur?.(callbackParam);\n    };\n\n    const containerRef = useRef<HTMLElement>(null);\n    useFocusWithin([containerRef], onFocusChange);\n\n    const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n      const inputValue = e.target.value;\n      const selectionStart = e.target.selectionStart;\n      const formatted = formatPhoneNumber(inputValue, countryCode);\n      setPhoneNumber(formatted);\n      if (countryCode) {\n        setCursor(calculateCursorPosition(formatted, phoneNumber, countryCode, selectionStart));\n      }\n      onChange?.(convertToCallbackParameter(countryCode, formatted));\n    };\n\n    const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {\n      const selectValue = e.target.value;\n      setCountryCode(selectValue);\n      setPhoneNumber(formatPhoneNumber(phoneNumber, selectValue));\n      onChange?.(convertToCallbackParameter(selectValue, phoneNumber));\n    };\n\n    const codesOptions = (\n      <>\n        {callingCodesList.map(code => (\n          <Option key={code} value={code}>\n            {code}\n          </Option>\n        ))}\n      </>\n    );\n\n    const Comp = (\n      <StyledPhoneInput\n        as={StyledFormControl}\n        forwardedAs={Flex as any}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        ref={containerRef}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n      >\n        {showCountryCode && (\n          <Select\n            value={countryCode}\n            onChange={onSelectChange}\n            required={required}\n            status={status}\n            readOnly={readOnly}\n            disabled={disabled}\n          >\n            {codesOptions}\n          </Select>\n        )}\n        <Input\n          {...restProps}\n          inputMode='tel'\n          ref={inputRef}\n          value={phoneNumber}\n          onChange={onInputChange}\n          required={required}\n          status={status}\n          readOnly={readOnly}\n          disabled={disabled}\n        />\n      </StyledPhoneInput>\n    );\n\n    return label ? (\n      <FormField\n        as='fieldset'\n        labelAs='legend'\n        {...{ label, labelHidden, id, info, ref, status, required, disabled }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default PhoneInput;\n"]}

package/lib/components/Phone/utils.js

@@ -3,17 +3,16 @@ export const getPhoneNumberParts = (phoneNumber, codesList) => {
     if (!phoneNumber.startsWith('+') || phoneNumber.startsWith('+0'))
         return [undefined, phoneNumber];
     const countryCode = codesList.find(code => phoneNumber.startsWith(code));
-    const subscriberNumber = phoneNumber.substring((countryCode === null || countryCode === void 0 ? void 0 : countryCode.length) || 0);
+    const subscriberNumber = phoneNumber.substring(countryCode?.length || 0);
     return [countryCode, subscriberNumber];
 };
 export const cleanNumber = (phoneNumber) => {
     return phoneNumber.replace(/\D/g, '');
 };
 export const getCountry = (countryCode, number) => {
-    var _a;
     const asYouTypeCode = new AsYouType();
     asYouTypeCode.input(countryCode + number);
-    return countryCode === '+1' ? 'US' : (_a = asYouTypeCode.getNumber()) === null || _a === void 0 ? void 0 : _a.country;
+    return countryCode === '+1' ? 'US' : asYouTypeCode.getNumber()?.country;
 };
 export const formatPhoneNumber = (numberToFormat, countryCode = '') => {
     let formatted = cleanNumber(numberToFormat);

package/lib/components/Phone/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Phone/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { AsYouType, formatIncompletePhoneNumber } from 'libphonenumber-js';\n\nexport const getPhoneNumberParts = (\n  phoneNumber: string,\n  codesList: string[]\n): [string | undefined, string] => {\n  if (!phoneNumber.startsWith('+') || phoneNumber.startsWith('+0')) return [undefined, phoneNumber];\n  const countryCode = codesList.find(code => phoneNumber.startsWith(code));\n  const subscriberNumber = phoneNumber.substring(countryCode?.length || 0);\n  return [countryCode, subscriberNumber];\n};\n\nexport const cleanNumber = (phoneNumber: string) => {\n  return phoneNumber.replace(/\\D/g, '');\n};\n\nexport const getCountry = (countryCode: string, number: string) => {\n  const asYouTypeCode = new AsYouType();\n  asYouTypeCode.input(countryCode + number);\n  return countryCode === '+1' ? 'US' : asYouTypeCode.getNumber()?.country;\n};\n\nexport const formatPhoneNumber = (numberToFormat: string, countryCode: string = '') => {\n  let formatted = cleanNumber(numberToFormat);\n  if (countryCode) {\n    const country = getCountry(countryCode, formatted);\n    formatted = formatIncompletePhoneNumber(formatted, country);\n  }\n  return formatted;\n};\n\nexport const convertToCallbackParameter = (codePart: string | undefined, numberPart: string) => {\n  return [codePart, cleanNumber(numberPart)].join('');\n};\n\nexport const calculateCursorPosition = (\n  newValue: string,\n  prevValue: string,\n  countryCode: string,\n  prevCursorPosition: number | null\n) => {\n  if (prevCursorPosition !== undefined && prevCursorPosition !== null) {\n    const country = getCountry(countryCode, cleanNumber(newValue));\n    let numbersCount = cleanNumber(prevValue.slice(0, prevCursorPosition - 1)).length + 1;\n\n    if (cleanNumber(prevValue).length > cleanNumber(newValue).length) {\n      numbersCount = cleanNumber(prevValue.slice(0, prevCursorPosition)).length;\n    }\n\n    let newCursorPosition = 0;\n    let count = 0;\n    const asYouTypeNew = new AsYouType(country);\n    asYouTypeNew.input(newValue);\n    while (newCursorPosition < asYouTypeNew.getTemplate().length) {\n      if (count === numbersCount) {\n        break;\n      }\n      if (asYouTypeNew.getTemplate()[newCursorPosition] === 'x') {\n        count += 1;\n      }\n      newCursorPosition += 1;\n    }\n    return newCursorPosition;\n  }\n};\n\nexport default getPhoneNumberParts;\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Phone/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { AsYouType, formatIncompletePhoneNumber } from 'libphonenumber-js';\n\nexport const getPhoneNumberParts = (\n  phoneNumber: string,\n  codesList: string[]\n): [string | undefined, string] => {\n  if (!phoneNumber.startsWith('+') || phoneNumber.startsWith('+0')) return [undefined, phoneNumber];\n  const countryCode = codesList.find(code => phoneNumber.startsWith(code));\n  const subscriberNumber = phoneNumber.substring(countryCode?.length || 0);\n  return [countryCode, subscriberNumber];\n};\n\nexport const cleanNumber = (phoneNumber: string) => {\n  return phoneNumber.replace(/\\D/g, '');\n};\n\nexport const getCountry = (countryCode: string, number: string) => {\n  const asYouTypeCode = new AsYouType();\n  asYouTypeCode.input(countryCode + number);\n  return countryCode === '+1' ? 'US' : asYouTypeCode.getNumber()?.country;\n};\n\nexport const formatPhoneNumber = (numberToFormat: string, countryCode: string = '') => {\n  let formatted = cleanNumber(numberToFormat);\n  if (countryCode) {\n    const country = getCountry(countryCode, formatted);\n    formatted = formatIncompletePhoneNumber(formatted, country);\n  }\n  return formatted;\n};\n\nexport const convertToCallbackParameter = (codePart: string | undefined, numberPart: string) => {\n  return [codePart, cleanNumber(numberPart)].join('');\n};\n\nexport const calculateCursorPosition = (\n  newValue: string,\n  prevValue: string,\n  countryCode: string,\n  prevCursorPosition: number | null\n) => {\n  if (prevCursorPosition !== undefined && prevCursorPosition !== null) {\n    const country = getCountry(countryCode, cleanNumber(newValue));\n    let numbersCount = cleanNumber(prevValue.slice(0, prevCursorPosition - 1)).length + 1;\n\n    if (cleanNumber(prevValue).length > cleanNumber(newValue).length) {\n      numbersCount = cleanNumber(prevValue.slice(0, prevCursorPosition)).length;\n    }\n\n    let newCursorPosition = 0;\n    let count = 0;\n    const asYouTypeNew = new AsYouType(country);\n    asYouTypeNew.input(newValue);\n    while (newCursorPosition < asYouTypeNew.getTemplate().length) {\n      if (count === numbersCount) {\n        break;\n      }\n      if (asYouTypeNew.getTemplate()[newCursorPosition] === 'x') {\n        count += 1;\n      }\n      newCursorPosition += 1;\n    }\n    return newCursorPosition;\n  }\n};\n\nexport default getPhoneNumberParts;\n"]}

package/lib/components/Popover/Popover.js

@@ -147,12 +147,11 @@ const Popover = forwardRef(({ show = true, portal = false, target, placement, st
         ...modifiers
     ], [modifiers, arrow, hideOnTargetHidden]);
     const offset = useMemo(() => {
-        var _a, _b, _c;
         const offsetModifier = [...memoedModifiers]
             .reverse()
             .find(m => m.name === 'offset' && m.enabled !== false);
-        return Array.isArray((_a = offsetModifier === null || offsetModifier === void 0 ? void 0 : offsetModifier.options) === null || _a === void 0 ? void 0 : _a.offset)
-            ? (_c = (_b = offsetModifier === null || offsetModifier === void 0 ? void 0 : offsetModifier.options) === null || _b === void 0 ? void 0 : _b.offset[1]) !== null && _c !== void 0 ? _c : 0
+        return Array.isArray(offsetModifier?.options?.offset)
+            ? offsetModifier?.options?.offset[1] ?? 0
             : 0;
     }, [memoedModifiers]);
     const { styles, attributes, forceUpdate } = usePopper(target, popperRef.current, {
@@ -164,8 +163,7 @@ const Popover = forwardRef(({ show = true, portal = false, target, placement, st
         forceUpdateRef.current = forceUpdate;
     useEffect(() => {
         const observer = new ResizeObserver(() => {
-            var _a;
-            (_a = forceUpdateRef.current) === null || _a === void 0 ? void 0 : _a.call(forceUpdateRef);
+            forceUpdateRef.current?.();
         });
         if (popperRef.current)
             observer.observe(popperRef.current);
@@ -192,8 +190,7 @@ const Popover = forwardRef(({ show = true, portal = false, target, placement, st
     useEffect(() => {
         return () => clearTimeout(timeout.current);
     }, []);
-    const content = (_jsxs(StyledPopover, Object.assign({}, restProps, { offset: offset, ref: popperRef, style: { ...style, ...styles.popper } }, attributes.popper, { children: [arrow && _jsx(StyledPopoverArrow, { ref: arrowRef, style: { ...styles.arrow } }, void 0),
-            children] }), void 0));
+    const content = (_jsxs(StyledPopover, Object.assign({}, restProps, { offset: offset, ref: popperRef, style: { ...style, ...styles.popper } }, attributes.popper, { children: [arrow && _jsx(StyledPopoverArrow, { ref: arrowRef, style: { ...styles.arrow } }, void 0), children] }), void 0));
     if (!target || !showPopover || (groupId && !checkActive(uid, groupId)))
         return null;
     return portal && portalTarget ? createPortal(content, portalTarget) : content;

package/lib/components/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  useContext,\n  PropsWithoutRef,\n  Ref,\n  CSSProperties,\n  ReactElement,\n  useRef,\n  ReactNode,\n  useEffect,\n  useMemo,\n  useState\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { usePopper, PopperProps } from 'react-popper';\nimport { VirtualElement } from '@popperjs/core';\nimport { OffsetModifier } from '@popperjs/core/lib/modifiers/offset';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useConfiguration, useConsolidatedRef, useElement, useUID } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { windowIsAvailable } from '../../utils';\n\nimport { PopoverManagerContext } from './PopoverContext';\n\nexport type Delay = 'none' | 'short' | 'long';\nexport interface PopoverProps<Modifiers extends string = string> extends BaseProps {\n  /** The DOM element or [virtual element](https://popper.js.org/docs/v2/virtual-elements) that the Popover is positioned in reference to. */\n  target: Element | VirtualElement | null;\n  /**\n   * If true, the Popover will be visible.\n   * @default true\n   */\n  show?: boolean;\n  /**\n   * If true, the Popover will render outside of the current DOM hierarchy in a [portal](https://reactjs.org/docs/portals.html).\n   * @default false\n   */\n  portal?: boolean;\n  /**\n   * Delay on showing the Popover.\n   * @default \"none\"\n   */\n  showDelay?: Delay;\n  /**\n   * Delay on hiding the Popover.\n   * @default \"none\"\n   */\n  hideDelay?: Delay;\n  /**\n   * [React Popper Placement](https://popper.js.org/react-popper/v2/render-props/#placement)\n   */\n  placement?: PopperProps<Modifiers>['placement'];\n  /**\n   * [React Popper Strategy](https://popper.js.org/react-popper/v2/render-props/#strategy)\n   * @default \"absolute\"\n   */\n  strategy?: PopperProps<Modifiers>['strategy'];\n  /**\n   * [React Popper Modifiers](https://popper.js.org/react-popper/v2/render-props/#modifiers)\n   * @default []\n   */\n  modifiers?: PopperProps<Modifiers>['modifiers'];\n  /**\n   * If true, an arrow will visually identify from which element the Popover is rendered.\n   * @default false\n   */\n  arrow?: boolean;\n  /** The group that the Popover belongs to. Popovers in the same group will be closed when others open. */\n  groupId?: string;\n  /**\n   * If true, the Popover will be visibly hidden when its target leaves the viewport.\n   * @default false\n   */\n  hideOnTargetHidden?: boolean;\n  /** The content of the Popover. */\n  children: ReactNode;\n  /** The ref of the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledPopoverArrow = styled.div`\n  background-color: inherit;\n  height: 0;\n  width: 0;\n\n  ::after {\n    content: '';\n    display: block;\n    background-color: inherit;\n    height: 0.5rem;\n    width: 0.5rem;\n    transform: rotate(45deg);\n  }\n`;\n\nexport const StyledPopover = styled.div<{ offset?: number }>(\n  ({\n    theme: {\n      base: {\n        'border-radius': borderRadius,\n        'z-index': { popover: zIndex },\n        shadow: { 'low-filter': low }\n      },\n      components: {\n        card: { background, 'border-radius': cardBorderRadius }\n      }\n    },\n    offset\n  }) => {\n    return css`\n      /*\n        Margin should never be used with Popper.\n        https://popper.js.org/docs/v2/migration-guide/#4-remove-all-css-margins\n      */\n      margin: 0 !important;\n      z-index: ${zIndex};\n      background-color: ${background};\n      border-radius: calc(${cardBorderRadius} / 2);\n      filter: ${low};\n\n      &[data-popper-reference-hidden='true'] {\n        visibility: hidden;\n        pointer-events: none;\n      }\n\n      &[data-popper-placement^='top'] {\n        > ${StyledPopoverArrow} {\n          top: calc(100% - 0.25rem);\n          margin-inline-start: -0.25rem;\n\n          ::after {\n            border-bottom-right-radius: calc(${borderRadius} / 4);\n          }\n        }\n\n        ::before {\n          content: '';\n          position: absolute;\n          height: ${offset}px;\n          bottom: -${offset}px;\n          left: 0;\n          right: 0;\n        }\n      }\n\n      &[data-popper-placement^='bottom'] {\n        > ${StyledPopoverArrow} {\n          bottom: calc(100% + 0.25rem);\n          margin-inline-start: -0.25rem;\n\n          ::after {\n            border-top-left-radius: calc(${borderRadius} / 4);\n          }\n        }\n\n        ::before {\n          content: '';\n          position: absolute;\n          height: ${offset}px;\n          top: -${offset}px;\n          left: 0;\n          right: 0;\n        }\n      }\n\n      &[data-popper-placement^='right'] {\n        > ${StyledPopoverArrow} {\n          right: calc(100% + 0.25rem);\n          margin-block-start: -0.25rem;\n\n          ::after {\n            border-bottom-left-radius: calc(${borderRadius} / 4);\n          }\n        }\n\n        ::before {\n          content: '';\n          position: absolute;\n          width: ${offset}px;\n          left: -${offset}px;\n          top: 0;\n          bottom: 0;\n        }\n      }\n\n      &[data-popper-placement^='left'] {\n        > ${StyledPopoverArrow} {\n          left: calc(100% - 0.25rem);\n          margin-block-start: -0.25rem;\n\n          ::after {\n            border-top-right-radius: calc(${borderRadius} / 4);\n          }\n        }\n\n        ::before {\n          content: '';\n          position: absolute;\n          width: ${offset}px;\n          right: -${offset}px;\n          top: 0;\n          bottom: 0;\n        }\n      }\n    `;\n  }\n);\n\nStyledPopover.defaultProps = defaultThemeProp;\n\nconst delays = {\n  none: 0,\n  short: 500,\n  long: 1000\n};\n\nconst Popover: <Modifiers extends string = string>(\n  props: PopoverProps<Modifiers> & ForwardProps\n) => ReactElement | null = forwardRef(\n  (\n    {\n      show = true,\n      portal = false,\n      target,\n      placement,\n      strategy = 'fixed',\n      style,\n      modifiers = [],\n      arrow = false,\n      groupId,\n      showDelay = 'none',\n      hideDelay = 'none',\n      hideOnTargetHidden = false,\n      children,\n      ...restProps\n    }: PropsWithoutRef<PopoverProps> & { style?: CSSProperties },\n    ref: PopoverProps['ref']\n  ) => {\n    const { portalTarget } = useConfiguration();\n    const { checkActive, setActive } = useContext(PopoverManagerContext);\n    const [, setPopperEl] = useElement<HTMLDivElement>();\n    const popperRef = useConsolidatedRef<HTMLDivElement>(ref, setPopperEl);\n    const arrowRef = useRef<HTMLDivElement>(null);\n    const forceUpdateRef = useRef<() => void>();\n    const [showPopover, setShowPopover] = useState(show);\n    const timeout = useRef<number>();\n    const uid = useUID();\n\n    const memoedModifiers = useMemo(\n      () => [\n        {\n          name: 'offset',\n          options: {\n            offset: [0, arrow ? 5.5 : 2]\n          }\n        },\n        { name: 'hide', enabled: hideOnTargetHidden },\n        { name: 'arrow', enabled: arrow, options: { element: arrowRef.current } },\n        ...modifiers\n      ],\n      [modifiers, arrow, hideOnTargetHidden]\n    );\n\n    const offset = useMemo(() => {\n      const offsetModifier = [...memoedModifiers]\n        .reverse()\n        .find(m => m.name === 'offset' && m.enabled !== false) as OffsetModifier | undefined;\n      return Array.isArray(offsetModifier?.options?.offset)\n        ? offsetModifier?.options?.offset[1] ?? 0\n        : 0;\n    }, [memoedModifiers]);\n\n    const { styles, attributes, forceUpdate } = usePopper(target, popperRef.current, {\n      placement,\n      strategy,\n      modifiers: memoedModifiers\n    });\n\n    if (forceUpdate) forceUpdateRef.current = forceUpdate;\n\n    useEffect(() => {\n      const observer = new ResizeObserver(() => {\n        forceUpdateRef.current?.();\n      });\n\n      if (popperRef.current) observer.observe(popperRef.current);\n      if (target instanceof Element) observer.observe(target);\n\n      return () => {\n        observer.disconnect();\n      };\n    }, [forceUpdate, popperRef.current, target]);\n\n    useEffect(() => {\n      if (groupId && show) setActive(uid, groupId);\n\n      if (windowIsAvailable) {\n        if (timeout.current) clearTimeout(timeout.current);\n        timeout.current = window.setTimeout(() => {\n          setShowPopover(show);\n        }, delays[show ? showDelay : hideDelay]);\n      } else {\n        setShowPopover(show);\n      }\n    }, [show]);\n\n    useEffect(() => {\n      return () => clearTimeout(timeout.current);\n    }, []);\n\n    const content = (\n      <StyledPopover\n        {...restProps}\n        offset={offset}\n        ref={popperRef}\n        style={{ ...style, ...styles.popper }}\n        {...attributes.popper}\n      >\n        {arrow && <StyledPopoverArrow ref={arrowRef} style={{ ...styles.arrow }} />}\n        {children}\n      </StyledPopover>\n    );\n\n    if (!target || !showPopover || (groupId && !checkActive(uid, groupId))) return null;\n\n    return portal && portalTarget ? createPortal(content, portalTarget) : content;\n  }\n);\n\nexport default Popover;\n"]}
+{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,UAAU,EAKV,MAAM,EAEN,SAAS,EACT,OAAO,EACP,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,SAAS,EAAe,MAAM,cAAc,CAAC;AAGtD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACvF,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AA0DzD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;CAa3C,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,eAAe,EAAE,YAAY,EAC7B,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAC9B,MAAM,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,EAC9B,EACD,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,UAAU,EAAE,eAAe,EAAE,gBAAgB,EAAE,EACxD,EACF,EACD,MAAM,EACP,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;;;iBAMG,MAAM;0BACG,UAAU;4BACR,gBAAgB;gBAC5B,GAAG;;;;;;;;YAQP,kBAAkB;;;;;+CAKiB,YAAY;;;;;;;oBAOvC,MAAM;qBACL,MAAM;;;;;;;YAOf,kBAAkB;;;;;2CAKa,YAAY;;;;;;;oBAOnC,MAAM;kBACR,MAAM;;;;;;;YAOZ,kBAAkB;;;;;8CAKgB,YAAY;;;;;;;mBAOvC,MAAM;mBACN,MAAM;;;;;;;YAOb,kBAAkB;;;;;4CAKc,YAAY;;;;;;;mBAOrC,MAAM;oBACL,MAAM;;;;;KAKrB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,MAAM,GAAG;IACb,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,GAAG;IACV,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,MAAM,OAAO,GAEc,UAAU,CACnC,CACE,EACE,IAAI,GAAG,IAAI,EACX,MAAM,GAAG,KAAK,EACd,MAAM,EACN,SAAS,EACT,QAAQ,GAAG,OAAO,EAClB,KAAK,EACL,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,KAAK,EACb,OAAO,EACP,SAAS,GAAG,MAAM,EAClB,SAAS,GAAG,MAAM,EAClB,kBAAkB,GAAG,KAAK,EAC1B,QAAQ,EACR,GAAG,SAAS,EAC8C,EAC5D,GAAwB,EACxB,EAAE;IACF,MAAM,EAAE,YAAY,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAC5C,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,UAAU,CAAC,qBAAqB,CAAC,CAAC;IACrE,MAAM,CAAC,EAAE,WAAW,CAAC,GAAG,UAAU,EAAkB,CAAC;IACrD,MAAM,SAAS,GAAG,kBAAkB,CAAiB,GAAG,EAAE,WAAW,CAAC,CAAC;IACvE,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC9C,MAAM,cAAc,GAAG,MAAM,EAAc,CAAC;IAC5C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACrD,MAAM,OAAO,GAAG,MAAM,EAAU,CAAC;IACjC,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IAErB,MAAM,eAAe,GAAG,OAAO,CAC7B,GAAG,EAAE,CAAC;QACJ;YACE,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE;gBACP,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;aAC7B;SACF;QACD,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,kBAAkB,EAAE;QAC7C,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,CAAC,OAAO,EAAE,EAAE;QACzE,GAAG,SAAS;KACb,EACD,CAAC,SAAS,EAAE,KAAK,EAAE,kBAAkB,CAAC,CACvC,CAAC;IAEF,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,MAAM,cAAc,GAAG,CAAC,GAAG,eAAe,CAAC;aACxC,OAAO,EAAE;aACT,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,CAAC,OAAO,KAAK,KAAK,CAA+B,CAAC;QACvF,OAAO,KAAK,CAAC,OAAO,CAAC,cAAc,EAAE,OAAO,EAAE,MAAM,CAAC;YACnD,CAAC,CAAC,cAAc,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;YACzC,CAAC,CAAC,CAAC,CAAC;IACR,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,OAAO,EAAE;QAC/E,SAAS;QACT,QAAQ;QACR,SAAS,EAAE,eAAe;KAC3B,CAAC,CAAC;IAEH,IAAI,WAAW;QAAE,cAAc,CAAC,OAAO,GAAG,WAAW,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YACvC,cAAc,CAAC,OAAO,EAAE,EAAE,CAAC;QAC7B,CAAC,CAAC,CAAC;QAEH,IAAI,SAAS,CAAC,OAAO;YAAE,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QAC3D,IAAI,MAAM,YAAY,OAAO;YAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAExD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,UAAU,EAAE,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IAE7C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,IAAI,IAAI;YAAE,SAAS,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;QAE7C,IAAI,iBAAiB,EAAE;YACrB,IAAI,OAAO,CAAC,OAAO;gBAAE,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YACnD,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACvC,cAAc,CAAC,IAAI,CAAC,CAAC;YACvB,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;SAC1C;aAAM;YACL,cAAc,CAAC,IAAI,CAAC,CAAC;SACtB;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC7C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,OAAO,GAAG,CACd,MAAC,aAAa,oBACR,SAAS,IACb,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,IACjC,UAAU,CAAC,MAAM,eAEpB,KAAK,IAAI,KAAC,kBAAkB,IAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,WAAI,EAC1E,QAAQ,aACK,CACjB,CAAC;IAEF,IAAI,CAAC,MAAM,IAAI,CAAC,WAAW,IAAI,CAAC,OAAO,IAAI,CAAC,WAAW,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,IAAI,CAAC;IAEpF,OAAO,MAAM,IAAI,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;AAChF,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import {\n  forwardRef,\n  useContext,\n  PropsWithoutRef,\n  Ref,\n  CSSProperties,\n  ReactElement,\n  useRef,\n  ReactNode,\n  useEffect,\n  useMemo,\n  useState\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { usePopper, PopperProps } from 'react-popper';\nimport { VirtualElement } from '@popperjs/core';\nimport { OffsetModifier } from '@popperjs/core/lib/modifiers/offset';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useConfiguration, useConsolidatedRef, useElement, useUID } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { windowIsAvailable } from '../../utils';\n\nimport { PopoverManagerContext } from './PopoverContext';\n\nexport type Delay = 'none' | 'short' | 'long';\nexport interface PopoverProps<Modifiers extends string = string> extends BaseProps {\n  /** The DOM element or [virtual element](https://popper.js.org/docs/v2/virtual-elements) that the Popover is positioned in reference to. */\n  target: Element | VirtualElement | null;\n  /**\n   * If true, the Popover will be visible.\n   * @default true\n   */\n  show?: boolean;\n  /**\n   * If true, the Popover will render outside of the current DOM hierarchy in a [portal](https://reactjs.org/docs/portals.html).\n   * @default false\n   */\n  portal?: boolean;\n  /**\n   * Delay on showing the Popover.\n   * @default \"none\"\n   */\n  showDelay?: Delay;\n  /**\n   * Delay on hiding the Popover.\n   * @default \"none\"\n   */\n  hideDelay?: Delay;\n  /**\n   * [React Popper Placement](https://popper.js.org/react-popper/v2/render-props/#placement)\n   */\n  placement?: PopperProps<Modifiers>['placement'];\n  /**\n   * [React Popper Strategy](https://popper.js.org/react-popper/v2/render-props/#strategy)\n   * @default \"absolute\"\n   */\n  strategy?: PopperProps<Modifiers>['strategy'];\n  /**\n   * [React Popper Modifiers](https://popper.js.org/react-popper/v2/render-props/#modifiers)\n   * @default []\n   */\n  modifiers?: PopperProps<Modifiers>['modifiers'];\n  /**\n   * If true, an arrow will visually identify from which element the Popover is rendered.\n   * @default false\n   */\n  arrow?: boolean;\n  /** The group that the Popover belongs to. Popovers in the same group will be closed when others open. */\n  groupId?: string;\n  /**\n   * If true, the Popover will be visibly hidden when its target leaves the viewport.\n   * @default false\n   */\n  hideOnTargetHidden?: boolean;\n  /** The content of the Popover. */\n  children: ReactNode;\n  /** The ref of the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledPopoverArrow = styled.div`\n  background-color: inherit;\n  height: 0;\n  width: 0;\n\n  ::after {\n    content: '';\n    display: block;\n    background-color: inherit;\n    height: 0.5rem;\n    width: 0.5rem;\n    transform: rotate(45deg);\n  }\n`;\n\nexport const StyledPopover = styled.div<{ offset?: number }>(\n  ({\n    theme: {\n      base: {\n        'border-radius': borderRadius,\n        'z-index': { popover: zIndex },\n        shadow: { 'low-filter': low }\n      },\n      components: {\n        card: { background, 'border-radius': cardBorderRadius }\n      }\n    },\n    offset\n  }) => {\n    return css`\n      /*\n        Margin should never be used with Popper.\n        https://popper.js.org/docs/v2/migration-guide/#4-remove-all-css-margins\n      */\n      margin: 0 !important;\n      z-index: ${zIndex};\n      background-color: ${background};\n      border-radius: calc(${cardBorderRadius} / 2);\n      filter: ${low};\n\n      &[data-popper-reference-hidden='true'] {\n        visibility: hidden;\n        pointer-events: none;\n      }\n\n      &[data-popper-placement^='top'] {\n        > ${StyledPopoverArrow} {\n          top: calc(100% - 0.25rem);\n          margin-inline-start: -0.25rem;\n\n          ::after {\n            border-bottom-right-radius: calc(${borderRadius} / 4);\n          }\n        }\n\n        ::before {\n          content: '';\n          position: absolute;\n          height: ${offset}px;\n          bottom: -${offset}px;\n          left: 0;\n          right: 0;\n        }\n      }\n\n      &[data-popper-placement^='bottom'] {\n        > ${StyledPopoverArrow} {\n          bottom: calc(100% + 0.25rem);\n          margin-inline-start: -0.25rem;\n\n          ::after {\n            border-top-left-radius: calc(${borderRadius} / 4);\n          }\n        }\n\n        ::before {\n          content: '';\n          position: absolute;\n          height: ${offset}px;\n          top: -${offset}px;\n          left: 0;\n          right: 0;\n        }\n      }\n\n      &[data-popper-placement^='right'] {\n        > ${StyledPopoverArrow} {\n          right: calc(100% + 0.25rem);\n          margin-block-start: -0.25rem;\n\n          ::after {\n            border-bottom-left-radius: calc(${borderRadius} / 4);\n          }\n        }\n\n        ::before {\n          content: '';\n          position: absolute;\n          width: ${offset}px;\n          left: -${offset}px;\n          top: 0;\n          bottom: 0;\n        }\n      }\n\n      &[data-popper-placement^='left'] {\n        > ${StyledPopoverArrow} {\n          left: calc(100% - 0.25rem);\n          margin-block-start: -0.25rem;\n\n          ::after {\n            border-top-right-radius: calc(${borderRadius} / 4);\n          }\n        }\n\n        ::before {\n          content: '';\n          position: absolute;\n          width: ${offset}px;\n          right: -${offset}px;\n          top: 0;\n          bottom: 0;\n        }\n      }\n    `;\n  }\n);\n\nStyledPopover.defaultProps = defaultThemeProp;\n\nconst delays = {\n  none: 0,\n  short: 500,\n  long: 1000\n};\n\nconst Popover: <Modifiers extends string = string>(\n  props: PopoverProps<Modifiers> & ForwardProps\n) => ReactElement | null = forwardRef(\n  (\n    {\n      show = true,\n      portal = false,\n      target,\n      placement,\n      strategy = 'fixed',\n      style,\n      modifiers = [],\n      arrow = false,\n      groupId,\n      showDelay = 'none',\n      hideDelay = 'none',\n      hideOnTargetHidden = false,\n      children,\n      ...restProps\n    }: PropsWithoutRef<PopoverProps> & { style?: CSSProperties },\n    ref: PopoverProps['ref']\n  ) => {\n    const { portalTarget } = useConfiguration();\n    const { checkActive, setActive } = useContext(PopoverManagerContext);\n    const [, setPopperEl] = useElement<HTMLDivElement>();\n    const popperRef = useConsolidatedRef<HTMLDivElement>(ref, setPopperEl);\n    const arrowRef = useRef<HTMLDivElement>(null);\n    const forceUpdateRef = useRef<() => void>();\n    const [showPopover, setShowPopover] = useState(show);\n    const timeout = useRef<number>();\n    const uid = useUID();\n\n    const memoedModifiers = useMemo(\n      () => [\n        {\n          name: 'offset',\n          options: {\n            offset: [0, arrow ? 5.5 : 2]\n          }\n        },\n        { name: 'hide', enabled: hideOnTargetHidden },\n        { name: 'arrow', enabled: arrow, options: { element: arrowRef.current } },\n        ...modifiers\n      ],\n      [modifiers, arrow, hideOnTargetHidden]\n    );\n\n    const offset = useMemo(() => {\n      const offsetModifier = [...memoedModifiers]\n        .reverse()\n        .find(m => m.name === 'offset' && m.enabled !== false) as OffsetModifier | undefined;\n      return Array.isArray(offsetModifier?.options?.offset)\n        ? offsetModifier?.options?.offset[1] ?? 0\n        : 0;\n    }, [memoedModifiers]);\n\n    const { styles, attributes, forceUpdate } = usePopper(target, popperRef.current, {\n      placement,\n      strategy,\n      modifiers: memoedModifiers\n    });\n\n    if (forceUpdate) forceUpdateRef.current = forceUpdate;\n\n    useEffect(() => {\n      const observer = new ResizeObserver(() => {\n        forceUpdateRef.current?.();\n      });\n\n      if (popperRef.current) observer.observe(popperRef.current);\n      if (target instanceof Element) observer.observe(target);\n\n      return () => {\n        observer.disconnect();\n      };\n    }, [forceUpdate, popperRef.current, target]);\n\n    useEffect(() => {\n      if (groupId && show) setActive(uid, groupId);\n\n      if (windowIsAvailable) {\n        if (timeout.current) clearTimeout(timeout.current);\n        timeout.current = window.setTimeout(() => {\n          setShowPopover(show);\n        }, delays[show ? showDelay : hideDelay]);\n      } else {\n        setShowPopover(show);\n      }\n    }, [show]);\n\n    useEffect(() => {\n      return () => clearTimeout(timeout.current);\n    }, []);\n\n    const content = (\n      <StyledPopover\n        {...restProps}\n        offset={offset}\n        ref={popperRef}\n        style={{ ...style, ...styles.popper }}\n        {...attributes.popper}\n      >\n        {arrow && <StyledPopoverArrow ref={arrowRef} style={{ ...styles.arrow }} />}\n        {children}\n      </StyledPopover>\n    );\n\n    if (!target || !showPopover || (groupId && !checkActive(uid, groupId))) return null;\n\n    return portal && portalTarget ? createPortal(content, portalTarget) : content;\n  }\n);\n\nexport default Popover;\n"]}

package/lib/components/Progress/Bar.js

@@ -5,7 +5,7 @@ import { defaultThemeProp } from '../../theme';
 export const StyledProgressBar = styled.div(({ theme, placement, determinate }) => {
     return css `
       height: 0.375rem;
-      background-color: ${theme.base.colors.gray.light};
+      background-color: ${theme.base.colors.gray['extra-light']};
       border-radius: ${theme.base['border-radius']};
       min-width: 2rem;
       overflow: hidden;

package/lib/components/Progress/Bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bar.js","sourceRoot":"","sources":["../../../src/components/Progress/Bar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAkC,MAAM,OAAO,CAAC;AACvE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAK/C,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CACzC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,EAAE;IACpC,OAAO,GAAG,CAAA;;0BAEY,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;uBAC/B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;yBAoBzB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;4BACxB,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,gBAAgB,CAAC;UAC7D,WAAW;QACb,GAAG,CAAA;;;6CAGkC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;cACzD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;SACrC;;UAEC,CAAC,WAAW;QACd,GAAG,CAAA;2CACgC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;;SAE5D;;;QAGD,SAAS,KAAK,QAAQ;QACtB,CAAC,CAAC,GAAG,CAAA;;;WAGF;QACH,CAAC,CAAC,GAAG,CAAA;;WAEF;KACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,GAAG,GAAqC,UAAU,CACtD,CACE,EACE,KAAK,EACL,QAAQ,GAAG,CAAC,EACZ,QAAQ,GAAG,GAAG,EACd,OAAO,EACP,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EAC+C,EAC7D,GAAyB,EACzB,EAAE;IACF,IAAI,UAAU,GAAG,KAAK,CAAC;IAEvB,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,IAAI,KAAK,GAAG,QAAQ,IAAI,QAAQ,GAAG,QAAQ;YAAE,UAAU,GAAG,CAAC,CAAC;aACvD,IAAI,KAAK,GAAG,QAAQ;YAAE,UAAU,GAAG,GAAG,CAAC;;YACvC,UAAU,GAAG,CAAC,CAAC,GAAG,CAAC,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC;KAC3E;IAED,OAAO,CACL,KAAC,iBAAiB,kBAChB,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,aAAa,mBACH,QAAQ,mBACR,QAAQ,mBACR,KAAK,EACpB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,OAAO,KAAK,KAAK,QAAQ,EACtC,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE,EAAmB,IAClF,SAAS,UACb,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,GAAG,CAAC","sourcesContent":["import { FC, forwardRef, PropsWithoutRef, CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\n\nimport { ProgressProps } from './Progress.types';\n\nexport const StyledProgressBar = styled.div<ProgressProps & { determinate: boolean }>(\n  ({ theme, placement, determinate }) => {\n    return css`\n      height: 0.375rem;\n      background-color: ${theme.base.colors.gray.light};\n      border-radius: ${theme.base['border-radius']};\n      min-width: 2rem;\n      overflow: hidden;\n\n      @keyframes LoadingBar {\n        0% {\n          transform: translateX(-100%);\n        }\n\n        100% {\n          transform: translateX(200%);\n        }\n      }\n\n      ::before {\n        content: '';\n        display: block;\n        height: 100%;\n        width: 100%;\n        left: 0;\n        border-radius: ${theme.base['border-radius']};\n        background-color: ${theme.components.progress['progress-color']};\n        ${determinate &&\n        css`\n          transform: translateX(var(--progress, 0));\n          transform-origin: 0 50%;\n          transition: transform calc(0.5 * ${theme.base.animation.speed})\n            ${theme.base.animation.timing.ease};\n        `}\n\n        ${!determinate &&\n        css`\n          animation: LoadingBar calc(8 * ${theme.base.animation.speed}) linear infinite;\n          width: 50%;\n        `}\n      }\n\n      ${placement === 'inline'\n        ? css`\n            display: inline-block;\n            position: relative;\n          `\n        : css`\n            width: 50%;\n          `}\n    `;\n  }\n);\n\nStyledProgressBar.defaultProps = defaultThemeProp;\n\nconst Bar: FC<ProgressProps & ForwardProps> = forwardRef(\n  (\n    {\n      value,\n      minValue = 0,\n      maxValue = 100,\n      message,\n      placement,\n      style,\n      ...restProps\n    }: PropsWithoutRef<ProgressProps & { style?: CSSProperties }>,\n    ref: ProgressProps['ref']\n  ) => {\n    let percentage = value;\n\n    if (typeof value === 'number') {\n      if (value > maxValue || minValue > maxValue) percentage = 0;\n      else if (value < minValue) percentage = 100;\n      else percentage = (1 - (value - minValue) / (maxValue - minValue)) * -100;\n    }\n\n    return (\n      <StyledProgressBar\n        ref={ref}\n        role='progressbar'\n        aria-valuemin={minValue}\n        aria-valuemax={maxValue}\n        aria-valuenow={value}\n        placement={placement}\n        determinate={typeof value === 'number'}\n        style={{ ...style, '--progress': percentage ? `${percentage}%` : '' } as CSSProperties}\n        {...restProps}\n      />\n    );\n  }\n);\n\nexport default Bar;\n"]}
+{"version":3,"file":"Bar.js","sourceRoot":"","sources":["../../../src/components/Progress/Bar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAkC,MAAM,OAAO,CAAC;AACvE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAK/C,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CACzC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,EAAE;IACpC,OAAO,GAAG,CAAA;;0BAEY,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;uBACxC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;yBAoBzB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;4BACxB,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,gBAAgB,CAAC;UAC7D,WAAW;QACb,GAAG,CAAA;;;6CAGkC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;cACzD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;SACrC;;UAEC,CAAC,WAAW;QACd,GAAG,CAAA;2CACgC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;;SAE5D;;;QAGD,SAAS,KAAK,QAAQ;QACtB,CAAC,CAAC,GAAG,CAAA;;;WAGF;QACH,CAAC,CAAC,GAAG,CAAA;;WAEF;KACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,GAAG,GAAqC,UAAU,CACtD,CACE,EACE,KAAK,EACL,QAAQ,GAAG,CAAC,EACZ,QAAQ,GAAG,GAAG,EACd,OAAO,EACP,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EAC+C,EAC7D,GAAyB,EACzB,EAAE;IACF,IAAI,UAAU,GAAG,KAAK,CAAC;IAEvB,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,IAAI,KAAK,GAAG,QAAQ,IAAI,QAAQ,GAAG,QAAQ;YAAE,UAAU,GAAG,CAAC,CAAC;aACvD,IAAI,KAAK,GAAG,QAAQ;YAAE,UAAU,GAAG,GAAG,CAAC;;YACvC,UAAU,GAAG,CAAC,CAAC,GAAG,CAAC,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC;KAC3E;IAED,OAAO,CACL,KAAC,iBAAiB,kBAChB,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,aAAa,mBACH,QAAQ,mBACR,QAAQ,mBACR,KAAK,EACpB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,OAAO,KAAK,KAAK,QAAQ,EACtC,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE,EAAmB,IAClF,SAAS,UACb,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,GAAG,CAAC","sourcesContent":["import { FC, forwardRef, PropsWithoutRef, CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\n\nimport { ProgressProps } from './Progress.types';\n\nexport const StyledProgressBar = styled.div<ProgressProps & { determinate: boolean }>(\n  ({ theme, placement, determinate }) => {\n    return css`\n      height: 0.375rem;\n      background-color: ${theme.base.colors.gray['extra-light']};\n      border-radius: ${theme.base['border-radius']};\n      min-width: 2rem;\n      overflow: hidden;\n\n      @keyframes LoadingBar {\n        0% {\n          transform: translateX(-100%);\n        }\n\n        100% {\n          transform: translateX(200%);\n        }\n      }\n\n      ::before {\n        content: '';\n        display: block;\n        height: 100%;\n        width: 100%;\n        left: 0;\n        border-radius: ${theme.base['border-radius']};\n        background-color: ${theme.components.progress['progress-color']};\n        ${determinate &&\n        css`\n          transform: translateX(var(--progress, 0));\n          transform-origin: 0 50%;\n          transition: transform calc(0.5 * ${theme.base.animation.speed})\n            ${theme.base.animation.timing.ease};\n        `}\n\n        ${!determinate &&\n        css`\n          animation: LoadingBar calc(8 * ${theme.base.animation.speed}) linear infinite;\n          width: 50%;\n        `}\n      }\n\n      ${placement === 'inline'\n        ? css`\n            display: inline-block;\n            position: relative;\n          `\n        : css`\n            width: 50%;\n          `}\n    `;\n  }\n);\n\nStyledProgressBar.defaultProps = defaultThemeProp;\n\nconst Bar: FC<ProgressProps & ForwardProps> = forwardRef(\n  (\n    {\n      value,\n      minValue = 0,\n      maxValue = 100,\n      message,\n      placement,\n      style,\n      ...restProps\n    }: PropsWithoutRef<ProgressProps & { style?: CSSProperties }>,\n    ref: ProgressProps['ref']\n  ) => {\n    let percentage = value;\n\n    if (typeof value === 'number') {\n      if (value > maxValue || minValue > maxValue) percentage = 0;\n      else if (value < minValue) percentage = 100;\n      else percentage = (1 - (value - minValue) / (maxValue - minValue)) * -100;\n    }\n\n    return (\n      <StyledProgressBar\n        ref={ref}\n        role='progressbar'\n        aria-valuemin={minValue}\n        aria-valuemax={maxValue}\n        aria-valuenow={value}\n        placement={placement}\n        determinate={typeof value === 'number'}\n        style={{ ...style, '--progress': percentage ? `${percentage}%` : '' } as CSSProperties}\n        {...restProps}\n      />\n    );\n  }\n);\n\nexport default Bar;\n"]}

package/lib/components/Progress/Ellipsis.js

@@ -73,9 +73,7 @@ export const StyledProgressEllipsis = styled.div(({ theme, placement }) => {
 });
 StyledProgressEllipsis.defaultProps = defaultThemeProp;
 const Ellipsis = forwardRef(({ message, placement, ...restProps }, ref) => {
-    return (_jsx(StyledProgressEllipsis, Object.assign({ ref: ref, role: 'progressbar', placement: placement }, restProps, { children: _jsxs("span", { children: [_jsx("span", {}, void 0),
-                _jsx("span", {}, void 0),
-                _jsx("span", {}, void 0)] }, void 0) }), void 0));
+    return (_jsx(StyledProgressEllipsis, Object.assign({ ref: ref, role: 'progressbar', placement: placement }, restProps, { children: _jsxs("span", { children: [_jsx("span", {}, void 0), _jsx("span", {}, void 0), _jsx("span", {}, void 0)] }, void 0) }), void 0));
 });
 export default Ellipsis;
 //# sourceMappingURL=Ellipsis.js.map

package/lib/components/Progress/Ellipsis.js.map

@@ -1 +1 @@
-{"version":3,"file":"Ellipsis.js","sourceRoot":"","sources":["../../../src/components/Progress/Ellipsis.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAmB,MAAM,OAAO,CAAC;AACxD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAK/C,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAgB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IACvF,OAAO,GAAG,CAAA;;eAEG,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;QAuBvD,SAAS,KAAK,QAAQ;QACxB,GAAG,CAAA;;;OAGF;;;;;oBAKa,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,gBAAgB,CAAC;;4CAEnB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;;QAE9D,SAAS,KAAK,QAAQ;QACxB,GAAG,CAAA;;;OAGF;;QAEC,SAAS,KAAK,OAAO;QACvB,GAAG,CAAA;;;OAGF;;QAEC,SAAS,KAAK,QAAQ;QACxB,GAAG,CAAA;;;;uCAI8B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;OAC1D;;;;;;;2BAOoB,MAAM,GAAG,CAAC;;;GAGlC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,QAAQ,GAAqC,UAAU,CAC3D,CACE,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,SAAS,EAAkC,EACpE,GAAyB,EACzB,EAAE;IACF,OAAO,CACL,KAAC,sBAAsB,kBAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,aAAa,EAAC,SAAS,EAAE,SAAS,IAAM,SAAS,cACtF,2BACE,wBAAQ;gBACR,wBAAQ;gBACR,wBAAQ,YACH,YACgB,CAC1B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { FC, forwardRef, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\n\nimport { ProgressProps } from './Progress.types';\n\nexport const StyledProgressEllipsis = styled.div<ProgressProps>(({ theme, placement }) => {\n  return css`\n    line-height: 1;\n    display: ${placement === 'inline' ? 'inline-flex' : 'block'};\n\n    @keyframes LoadingEllipsis {\n      0% {\n        transform: scale(0);\n        opacity: 0;\n      }\n\n      50% {\n        transform: scale(1);\n        opacity: 1;\n      }\n\n      100% {\n        transform: scale(0);\n        opacity: 0;\n      }\n    }\n\n    > span {\n      display: flex;\n      mix-blend-mode: multiply;\n\n      ${placement === 'inline' &&\n      css`\n        display: inline-flex;\n        margin-left: 0.1875rem;\n      `}\n    }\n\n    > span span {\n      margin: 0 0.3125rem;\n      background: ${theme.components.progress['progress-color']};\n      border-radius: 50%;\n      animation: LoadingEllipsis calc(4 * ${theme.base.animation.speed}) infinite;\n\n      ${placement === 'global' &&\n      css`\n        width: 1.25rem;\n        height: 1.25rem;\n      `}\n\n      ${placement === 'local' &&\n      css`\n        width: 0.625rem;\n        height: 0.625rem;\n      `}\n\n      ${placement === 'inline' &&\n      css`\n        width: 0.1875rem;\n        height: 0.1875rem;\n        margin: 0 0.1875rem;\n        animation-duration: calc(4 * ${theme.base.animation.speed});\n      `}\n\n      &:nth-child(2) {\n        animation-delay: 0.1667s;\n      }\n\n      &:nth-child(3) {\n        animation-delay: ${0.1667 * 2}s;\n      }\n    }\n  `;\n});\n\nStyledProgressEllipsis.defaultProps = defaultThemeProp;\n\nconst Ellipsis: FC<ProgressProps & ForwardProps> = forwardRef(\n  (\n    { message, placement, ...restProps }: PropsWithoutRef<ProgressProps>,\n    ref: ProgressProps['ref']\n  ) => {\n    return (\n      <StyledProgressEllipsis ref={ref} role='progressbar' placement={placement} {...restProps}>\n        <span>\n          <span />\n          <span />\n          <span />\n        </span>\n      </StyledProgressEllipsis>\n    );\n  }\n);\n\nexport default Ellipsis;\n"]}
+{"version":3,"file":"Ellipsis.js","sourceRoot":"","sources":["../../../src/components/Progress/Ellipsis.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAmB,MAAM,OAAO,CAAC;AACxD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAK/C,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAgB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IACvF,OAAO,GAAG,CAAA;;eAEG,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;QAuBvD,SAAS,KAAK,QAAQ;QACxB,GAAG,CAAA;;;OAGF;;;;;oBAKa,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,gBAAgB,CAAC;;4CAEnB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;;QAE9D,SAAS,KAAK,QAAQ;QACxB,GAAG,CAAA;;;OAGF;;QAEC,SAAS,KAAK,OAAO;QACvB,GAAG,CAAA;;;OAGF;;QAEC,SAAS,KAAK,QAAQ;QACxB,GAAG,CAAA;;;;uCAI8B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;OAC1D;;;;;;;2BAOoB,MAAM,GAAG,CAAC;;;GAGlC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,QAAQ,GAAqC,UAAU,CAC3D,CACE,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,SAAS,EAAkC,EACpE,GAAyB,EACzB,EAAE;IACF,OAAO,CACL,KAAC,sBAAsB,kBAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,aAAa,EAAC,SAAS,EAAE,SAAS,IAAM,SAAS,cACtF,2BACE,wBAAQ,EACR,wBAAQ,EACR,wBAAQ,YACH,YACgB,CAC1B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { FC, forwardRef, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\n\nimport { ProgressProps } from './Progress.types';\n\nexport const StyledProgressEllipsis = styled.div<ProgressProps>(({ theme, placement }) => {\n  return css`\n    line-height: 1;\n    display: ${placement === 'inline' ? 'inline-flex' : 'block'};\n\n    @keyframes LoadingEllipsis {\n      0% {\n        transform: scale(0);\n        opacity: 0;\n      }\n\n      50% {\n        transform: scale(1);\n        opacity: 1;\n      }\n\n      100% {\n        transform: scale(0);\n        opacity: 0;\n      }\n    }\n\n    > span {\n      display: flex;\n      mix-blend-mode: multiply;\n\n      ${placement === 'inline' &&\n      css`\n        display: inline-flex;\n        margin-left: 0.1875rem;\n      `}\n    }\n\n    > span span {\n      margin: 0 0.3125rem;\n      background: ${theme.components.progress['progress-color']};\n      border-radius: 50%;\n      animation: LoadingEllipsis calc(4 * ${theme.base.animation.speed}) infinite;\n\n      ${placement === 'global' &&\n      css`\n        width: 1.25rem;\n        height: 1.25rem;\n      `}\n\n      ${placement === 'local' &&\n      css`\n        width: 0.625rem;\n        height: 0.625rem;\n      `}\n\n      ${placement === 'inline' &&\n      css`\n        width: 0.1875rem;\n        height: 0.1875rem;\n        margin: 0 0.1875rem;\n        animation-duration: calc(4 * ${theme.base.animation.speed});\n      `}\n\n      &:nth-child(2) {\n        animation-delay: 0.1667s;\n      }\n\n      &:nth-child(3) {\n        animation-delay: ${0.1667 * 2}s;\n      }\n    }\n  `;\n});\n\nStyledProgressEllipsis.defaultProps = defaultThemeProp;\n\nconst Ellipsis: FC<ProgressProps & ForwardProps> = forwardRef(\n  (\n    { message, placement, ...restProps }: PropsWithoutRef<ProgressProps>,\n    ref: ProgressProps['ref']\n  ) => {\n    return (\n      <StyledProgressEllipsis ref={ref} role='progressbar' placement={placement} {...restProps}>\n        <span>\n          <span />\n          <span />\n          <span />\n        </span>\n      </StyledProgressEllipsis>\n    );\n  }\n);\n\nexport default Ellipsis;\n"]}

package/lib/components/Progress/Progress.js

@@ -37,7 +37,7 @@ const Progress = forwardRef(({ variant = 'ring', placement = 'global', visible =
         Comp = Ellipsis;
     const onBackdropTransitionEnd = () => {
         setIsNull(true);
-        onTransitionEndOut === null || onTransitionEndOut === void 0 ? void 0 : onTransitionEndOut();
+        onTransitionEndOut?.();
     };
     useEffect(() => {
         if (visible) {
@@ -74,8 +74,7 @@ const Progress = forwardRef(({ variant = 'ring', placement = 'global', visible =
     if (isNull)
         return null;
     const comp = (_jsx(Comp, Object.assign({}, restProps, { placement: placement, value: value, "aria-valuetext": message && typeof value === 'number' ? `${message} - ${value}` : message, ref: ref }), void 0));
-    const content = placement === 'inline' ? (comp) : (_jsxs(Backdrop, Object.assign({ open: isVisible, container: { direction: 'column' }, position: placement === 'global' ? 'fixed' : 'absolute', variant: 'light', alpha: 0.5, onAfterTransitionIn: onTransitionEndIn, onAfterTransitionOut: onBackdropTransitionEnd }, { children: [comp,
-            !!message && (_jsx(Text, Object.assign({ as: StyledMessage, variant: 'secondary', "aria-hidden": 'true' }, { children: message }), void 0))] }), void 0));
+    const content = placement === 'inline' ? (comp) : (_jsxs(Backdrop, Object.assign({ open: isVisible, container: { direction: 'column' }, position: placement === 'global' ? 'fixed' : 'absolute', variant: 'light', alpha: 0.5, onAfterTransitionIn: onTransitionEndIn, onAfterTransitionOut: onBackdropTransitionEnd }, { children: [comp, !!message && (_jsx(Text, Object.assign({ as: StyledMessage, variant: 'secondary', "aria-hidden": 'true' }, { children: message }), void 0))] }), void 0));
     return placement === 'global' && portalTarget ? createPortal(content, portalTarget) : content;
 });
 export default Progress;

package/lib/components/Progress/Progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, FC, useState, useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport styled, { css } from 'styled-components';\nimport { readableColor, rgba } from 'polished';\n\nimport { ForwardProps } from '../../types';\nimport Backdrop from '../Backdrop';\nimport Text from '../Text';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { tryCatch } from '../../utils';\nimport { useConfiguration } from '../../hooks';\n\nimport { ProgressProps } from './Progress.types';\nimport Bar from './Bar';\nimport Ellipsis from './Ellipsis';\nimport Ring from './Ring';\n\nconst StyledMessage = styled.span(({ theme }) => {\n  const color = tryCatch(() => {\n    return rgba(\n      readableColor(theme.base.palette['primary-background']),\n      theme.base.transparency['transparent-3']\n    );\n  });\n\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    margin-top: 0.5rem;\n    font-size: ${fontSize[theme.components.label['font-size'] as FontSize]};\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n    color: ${color};\n  `;\n});\n\nconst Progress: FC<ProgressProps & ForwardProps> = forwardRef(\n  (\n    {\n      variant = 'ring',\n      placement = 'global',\n      visible = true,\n      onTransitionEndIn,\n      onTransitionEndOut,\n      value,\n      message,\n      ...restProps\n    }: PropsWithoutRef<ProgressProps>,\n    ref: ProgressProps['ref']\n  ) => {\n    const [isVisible, setIsVisible] = useState(visible);\n    const [isNull, setIsNull] = useState(!visible);\n    const { portalTarget } = useConfiguration();\n    const showTime = useRef<number>();\n    const showTimeout = useRef<number>();\n    const hideTimeout = useRef<number>();\n\n    let Comp = Ring;\n    if (variant === 'bar') Comp = Bar;\n    else if (variant === 'ellipsis') Comp = Ellipsis;\n\n    const onBackdropTransitionEnd = () => {\n      setIsNull(true);\n      onTransitionEndOut?.();\n    };\n\n    useEffect(() => {\n      if (visible) {\n        clearTimeout(hideTimeout.current);\n        showTime.current = Date.now();\n        showTimeout.current = window.setTimeout(() => {\n          setIsVisible(true);\n          setIsNull(false);\n        }, 100);\n      } else {\n        clearTimeout(showTimeout.current);\n\n        if (typeof showTime.current === 'number') {\n          const minimumDuration = 1000;\n          const timeElapsed = Date.now() - showTime.current;\n\n          if (timeElapsed > minimumDuration) setIsVisible(false);\n          else {\n            hideTimeout.current = window.setTimeout(() => {\n              setIsVisible(false);\n            }, minimumDuration - timeElapsed);\n          }\n        } else setIsVisible(false);\n      }\n    }, [visible]);\n\n    useEffect(() => {\n      return () => {\n        clearTimeout(showTimeout.current);\n        clearTimeout(hideTimeout.current);\n      };\n    }, []);\n\n    if (isNull) return null;\n\n    const comp = (\n      <Comp\n        {...restProps}\n        placement={placement}\n        value={value}\n        aria-valuetext={message && typeof value === 'number' ? `${message} - ${value}` : message}\n        ref={ref}\n      />\n    );\n\n    const content =\n      placement === 'inline' ? (\n        comp\n      ) : (\n        <Backdrop\n          open={isVisible}\n          container={{ direction: 'column' }}\n          position={placement === 'global' ? 'fixed' : 'absolute'}\n          variant='light'\n          alpha={0.5}\n          onAfterTransitionIn={onTransitionEndIn}\n          onAfterTransitionOut={onBackdropTransitionEnd}\n        >\n          {comp}\n          {!!message && (\n            <Text as={StyledMessage} variant='secondary' aria-hidden='true'>\n              {message}\n            </Text>\n          )}\n        </Backdrop>\n      );\n\n    return placement === 'global' && portalTarget ? createPortal(content, portalTarget) : content;\n  }\n);\n\nexport default Progress;\n"]}
+{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, FC, useState, useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport styled, { css } from 'styled-components';\nimport { readableColor, rgba } from 'polished';\n\nimport { ForwardProps } from '../../types';\nimport Backdrop from '../Backdrop';\nimport Text from '../Text';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { tryCatch } from '../../utils';\nimport { useConfiguration } from '../../hooks';\n\nimport { ProgressProps } from './Progress.types';\nimport Bar from './Bar';\nimport Ellipsis from './Ellipsis';\nimport Ring from './Ring';\n\nconst StyledMessage = styled.span(({ theme }) => {\n  const color = tryCatch(() => {\n    return rgba(\n      readableColor(theme.base.palette['primary-background']),\n      theme.base.transparency['transparent-3']\n    );\n  });\n\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    margin-top: 0.5rem;\n    font-size: ${fontSize[theme.components.label['font-size'] as FontSize]};\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n    color: ${color};\n  `;\n});\n\nconst Progress: FC<ProgressProps & ForwardProps> = forwardRef(\n  (\n    {\n      variant = 'ring',\n      placement = 'global',\n      visible = true,\n      onTransitionEndIn,\n      onTransitionEndOut,\n      value,\n      message,\n      ...restProps\n    }: PropsWithoutRef<ProgressProps>,\n    ref: ProgressProps['ref']\n  ) => {\n    const [isVisible, setIsVisible] = useState(visible);\n    const [isNull, setIsNull] = useState(!visible);\n    const { portalTarget } = useConfiguration();\n    const showTime = useRef<number>();\n    const showTimeout = useRef<number>();\n    const hideTimeout = useRef<number>();\n\n    let Comp = Ring;\n    if (variant === 'bar') Comp = Bar;\n    else if (variant === 'ellipsis') Comp = Ellipsis;\n\n    const onBackdropTransitionEnd = () => {\n      setIsNull(true);\n      onTransitionEndOut?.();\n    };\n\n    useEffect(() => {\n      if (visible) {\n        clearTimeout(hideTimeout.current);\n        showTime.current = Date.now();\n        showTimeout.current = window.setTimeout(() => {\n          setIsVisible(true);\n          setIsNull(false);\n        }, 100);\n      } else {\n        clearTimeout(showTimeout.current);\n\n        if (typeof showTime.current === 'number') {\n          const minimumDuration = 1000;\n          const timeElapsed = Date.now() - showTime.current;\n\n          if (timeElapsed > minimumDuration) setIsVisible(false);\n          else {\n            hideTimeout.current = window.setTimeout(() => {\n              setIsVisible(false);\n            }, minimumDuration - timeElapsed);\n          }\n        } else setIsVisible(false);\n      }\n    }, [visible]);\n\n    useEffect(() => {\n      return () => {\n        clearTimeout(showTimeout.current);\n        clearTimeout(hideTimeout.current);\n      };\n    }, []);\n\n    if (isNull) return null;\n\n    const comp = (\n      <Comp\n        {...restProps}\n        placement={placement}\n        value={value}\n        aria-valuetext={message && typeof value === 'number' ? `${message} - ${value}` : message}\n        ref={ref}\n      />\n    );\n\n    const content =\n      placement === 'inline' ? (\n        comp\n      ) : (\n        <Backdrop\n          open={isVisible}\n          container={{ direction: 'column' }}\n          position={placement === 'global' ? 'fixed' : 'absolute'}\n          variant='light'\n          alpha={0.5}\n          onAfterTransitionIn={onTransitionEndIn}\n          onAfterTransitionOut={onBackdropTransitionEnd}\n        >\n          {comp}\n          {!!message && (\n            <Text as={StyledMessage} variant='secondary' aria-hidden='true'>\n              {message}\n            </Text>\n          )}\n        </Backdrop>\n      );\n\n    return placement === 'global' && portalTarget ? createPortal(content, portalTarget) : content;\n  }\n);\n\nexport default Progress;\n"]}

package/lib/components/Progress/Ring.js

@@ -25,7 +25,7 @@ export const StyledProgressRing = styled.div(({ theme, placement, determinate })
 
         circle {
           fill: transparent;
-          stroke: ${theme.base.colors.gray.light};
+          stroke: ${theme.base.colors.gray['extra-light']};
           stroke-width: 2;
           r: 45%;
           cx: 50%;
@@ -69,8 +69,7 @@ const Ring = forwardRef(({ value, minValue = 0, maxValue = 100, placement, ...re
         strokeDashoffset = circumference;
     else
         strokeDashoffset = (1 - (value - minValue) / (maxValue - minValue)) * circumference;
-    return (_jsx(StyledProgressRing, Object.assign({ ref: ref, role: 'progressbar', "aria-valuemin": minValue, "aria-valuemax": maxValue, "aria-valuenow": value, placement: placement, determinate: typeof value === 'number' }, restProps, { children: _jsxs("svg", Object.assign({ viewBox: '0 0 20 20' }, { children: [_jsx("circle", {}, void 0),
-                _jsx("circle", { strokeDasharray: circumference, style: { strokeDashoffset } }, void 0)] }), void 0) }), void 0));
+    return (_jsx(StyledProgressRing, Object.assign({ ref: ref, role: 'progressbar', "aria-valuemin": minValue, "aria-valuemax": maxValue, "aria-valuenow": value, placement: placement, determinate: typeof value === 'number' }, restProps, { children: _jsxs("svg", Object.assign({ viewBox: '0 0 20 20' }, { children: [_jsx("circle", {}, void 0), _jsx("circle", { strokeDasharray: circumference, style: { strokeDashoffset } }, void 0)] }), void 0) }), void 0));
 });
 export default Ring;
 //# sourceMappingURL=Ring.js.map

package/lib/components/Progress/Ring.js.map

@@ -1 +1 @@
-{"version":3,"file":"Ring.js","sourceRoot":"","sources":["../../../src/components/Progress/Ring.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAmB,MAAM,OAAO,CAAC;AACxD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAK/C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAC1C,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,EAAE;IACpC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;oBAsBM,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;;;;;;;;;sBAS1B,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,gBAAgB,CAAC;uDACV,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;gBACjE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;cAElC,CAAC,WAAW;QACd,GAAG,CAAA;gDACiC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;aAC7D;;;;;QAKL,SAAS,KAAK,QAAQ;QACtB,CAAC,CAAC,GAAG,CAAA;;;WAGF;QACH,CAAC,CAAC,GAAG,CAAA;qBACQ,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;sBACjC,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;WAC7C;KACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,IAAI,GAAqC,UAAU,CACvD,CACE,EACE,KAAK,EACL,QAAQ,GAAG,CAAC,EACZ,QAAQ,GAAG,GAAG,EACd,SAAS,EACT,GAAG,SAAS,EACmB,EACjC,GAAyB,EACzB,EAAE;IACF,IAAI,gBAAgB,CAAC;IACrB,MAAM,aAAa,GAAG,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;IAEnC,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,gBAAgB,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,GAAG,CAAC,GAAG,aAAa,CAAC;SAC5E,IAAI,KAAK,GAAG,QAAQ,IAAI,QAAQ,GAAG,QAAQ;QAAE,gBAAgB,GAAG,CAAC,CAAC;SAClE,IAAI,KAAK,GAAG,QAAQ;QAAE,gBAAgB,GAAG,aAAa,CAAC;;QACvD,gBAAgB,GAAG,CAAC,CAAC,GAAG,CAAC,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC,GAAG,aAAa,CAAC;IAEzF,OAAO,CACL,KAAC,kBAAkB,kBACjB,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,aAAa,mBACH,QAAQ,mBACR,QAAQ,mBACR,KAAK,EACpB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,OAAO,KAAK,KAAK,QAAQ,IAClC,SAAS,cAEb,6BAAK,OAAO,EAAC,WAAW,iBACtB,0BAAU;gBACV,iBAAQ,eAAe,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,gBAAgB,EAAE,WAAI,aACnE,YACa,CACtB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { FC, forwardRef, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\n\nimport { ProgressProps } from './Progress.types';\n\nexport const StyledProgressRing = styled.div<ProgressProps & { determinate: boolean }>(\n  ({ theme, placement, determinate }) => {\n    return css`\n      position: relative;\n      min-width: 1em;\n      min-height: 1em;\n\n      @keyframes LoadingRing {\n        0% {\n          transform: rotate(0deg);\n        }\n\n        100% {\n          transform: rotate(360deg);\n        }\n      }\n\n      svg {\n        display: block;\n        position: absolute;\n        height: 100%;\n\n        circle {\n          fill: transparent;\n          stroke: ${theme.base.colors.gray.light};\n          stroke-width: 2;\n          r: 45%;\n          cx: 50%;\n          cy: 50%;\n          transform: rotate(-90deg);\n          transform-origin: 50% 50%;\n\n          &:nth-child(2) {\n            stroke: ${theme.components.progress['progress-color']};\n            transition: stroke-dashoffset calc(0.5 * ${theme.base.animation.speed})\n              ${theme.base.animation.timing.ease};\n\n            ${!determinate &&\n            css`\n              animation: LoadingRing calc(4 * ${theme.base.animation.speed}) linear infinite;\n            `}\n          }\n        }\n      }\n\n      ${placement === 'inline'\n        ? css`\n            display: inline-flex;\n            vertical-align: top;\n          `\n        : css`\n            width: ${placement === 'global' ? '4' : '2'}rem;\n            height: ${placement === 'global' ? '4' : '2'}rem;\n          `}\n    `;\n  }\n);\n\nStyledProgressRing.defaultProps = defaultThemeProp;\n\nconst Ring: FC<ProgressProps & ForwardProps> = forwardRef(\n  (\n    {\n      value,\n      minValue = 0,\n      maxValue = 100,\n      placement,\n      ...restProps\n    }: PropsWithoutRef<ProgressProps>,\n    ref: ProgressProps['ref']\n  ) => {\n    let strokeDashoffset;\n    const circumference = 18 * Math.PI;\n\n    if (typeof value !== 'number') strokeDashoffset = (1 - 33 / 100) * circumference;\n    else if (value > maxValue || minValue > maxValue) strokeDashoffset = 0;\n    else if (value < minValue) strokeDashoffset = circumference;\n    else strokeDashoffset = (1 - (value - minValue) / (maxValue - minValue)) * circumference;\n\n    return (\n      <StyledProgressRing\n        ref={ref}\n        role='progressbar'\n        aria-valuemin={minValue}\n        aria-valuemax={maxValue}\n        aria-valuenow={value}\n        placement={placement}\n        determinate={typeof value === 'number'}\n        {...restProps}\n      >\n        <svg viewBox='0 0 20 20'>\n          <circle />\n          <circle strokeDasharray={circumference} style={{ strokeDashoffset }} />\n        </svg>\n      </StyledProgressRing>\n    );\n  }\n);\n\nexport default Ring;\n"]}
+{"version":3,"file":"Ring.js","sourceRoot":"","sources":["../../../src/components/Progress/Ring.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAmB,MAAM,OAAO,CAAC;AACxD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAK/C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAC1C,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,EAAE;IACpC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;oBAsBM,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;;;;;;;;;sBASnC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,gBAAgB,CAAC;uDACV,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;gBACjE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;cAElC,CAAC,WAAW;QACd,GAAG,CAAA;gDACiC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;aAC7D;;;;;QAKL,SAAS,KAAK,QAAQ;QACtB,CAAC,CAAC,GAAG,CAAA;;;WAGF;QACH,CAAC,CAAC,GAAG,CAAA;qBACQ,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;sBACjC,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;WAC7C;KACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,IAAI,GAAqC,UAAU,CACvD,CACE,EACE,KAAK,EACL,QAAQ,GAAG,CAAC,EACZ,QAAQ,GAAG,GAAG,EACd,SAAS,EACT,GAAG,SAAS,EACmB,EACjC,GAAyB,EACzB,EAAE;IACF,IAAI,gBAAgB,CAAC;IACrB,MAAM,aAAa,GAAG,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;IAEnC,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,gBAAgB,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,GAAG,CAAC,GAAG,aAAa,CAAC;SAC5E,IAAI,KAAK,GAAG,QAAQ,IAAI,QAAQ,GAAG,QAAQ;QAAE,gBAAgB,GAAG,CAAC,CAAC;SAClE,IAAI,KAAK,GAAG,QAAQ;QAAE,gBAAgB,GAAG,aAAa,CAAC;;QACvD,gBAAgB,GAAG,CAAC,CAAC,GAAG,CAAC,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC,GAAG,aAAa,CAAC;IAEzF,OAAO,CACL,KAAC,kBAAkB,kBACjB,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,aAAa,mBACH,QAAQ,mBACR,QAAQ,mBACR,KAAK,EACpB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,OAAO,KAAK,KAAK,QAAQ,IAClC,SAAS,cAEb,6BAAK,OAAO,EAAC,WAAW,iBACtB,0BAAU,EACV,iBAAQ,eAAe,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,gBAAgB,EAAE,WAAI,aACnE,YACa,CACtB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { FC, forwardRef, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\n\nimport { ProgressProps } from './Progress.types';\n\nexport const StyledProgressRing = styled.div<ProgressProps & { determinate: boolean }>(\n  ({ theme, placement, determinate }) => {\n    return css`\n      position: relative;\n      min-width: 1em;\n      min-height: 1em;\n\n      @keyframes LoadingRing {\n        0% {\n          transform: rotate(0deg);\n        }\n\n        100% {\n          transform: rotate(360deg);\n        }\n      }\n\n      svg {\n        display: block;\n        position: absolute;\n        height: 100%;\n\n        circle {\n          fill: transparent;\n          stroke: ${theme.base.colors.gray['extra-light']};\n          stroke-width: 2;\n          r: 45%;\n          cx: 50%;\n          cy: 50%;\n          transform: rotate(-90deg);\n          transform-origin: 50% 50%;\n\n          &:nth-child(2) {\n            stroke: ${theme.components.progress['progress-color']};\n            transition: stroke-dashoffset calc(0.5 * ${theme.base.animation.speed})\n              ${theme.base.animation.timing.ease};\n\n            ${!determinate &&\n            css`\n              animation: LoadingRing calc(4 * ${theme.base.animation.speed}) linear infinite;\n            `}\n          }\n        }\n      }\n\n      ${placement === 'inline'\n        ? css`\n            display: inline-flex;\n            vertical-align: top;\n          `\n        : css`\n            width: ${placement === 'global' ? '4' : '2'}rem;\n            height: ${placement === 'global' ? '4' : '2'}rem;\n          `}\n    `;\n  }\n);\n\nStyledProgressRing.defaultProps = defaultThemeProp;\n\nconst Ring: FC<ProgressProps & ForwardProps> = forwardRef(\n  (\n    {\n      value,\n      minValue = 0,\n      maxValue = 100,\n      placement,\n      ...restProps\n    }: PropsWithoutRef<ProgressProps>,\n    ref: ProgressProps['ref']\n  ) => {\n    let strokeDashoffset;\n    const circumference = 18 * Math.PI;\n\n    if (typeof value !== 'number') strokeDashoffset = (1 - 33 / 100) * circumference;\n    else if (value > maxValue || minValue > maxValue) strokeDashoffset = 0;\n    else if (value < minValue) strokeDashoffset = circumference;\n    else strokeDashoffset = (1 - (value - minValue) / (maxValue - minValue)) * circumference;\n\n    return (\n      <StyledProgressRing\n        ref={ref}\n        role='progressbar'\n        aria-valuemin={minValue}\n        aria-valuemax={maxValue}\n        aria-valuenow={value}\n        placement={placement}\n        determinate={typeof value === 'number'}\n        {...restProps}\n      >\n        <svg viewBox='0 0 20 20'>\n          <circle />\n          <circle strokeDasharray={circumference} style={{ strokeDashoffset }} />\n        </svg>\n      </StyledProgressRing>\n    );\n  }\n);\n\nexport default Ring;\n"]}

package/lib/components/RadioCheck/RadioCheck.js

@@ -127,10 +127,10 @@ export const StyledRadioCheck = styled.div(props => {
         font-size: ${fontSize.s};
         color: ${labelColor};
         margin: 0;
-        min-height: ${base.sizes['touch-mouse']};
+        min-height: ${base['hit-area']['mouse-min']};
 
         @media (pointer: coarse) {
-          min-height: ${base.sizes['touch-finger']};
+          min-height: ${base['hit-area']['finger-min']};
         }
       }
 
@@ -152,7 +152,7 @@ export const StyledRadioCheckCard = styled.label(({ disabled, readOnly, status,
       background-color: ${card.background};
       border-radius: ${card['border-radius']};
       border: 0.0625rem solid ${useBorderColor};
-      padding: calc(1.5 * ${spacing});
+      padding: ${spacing};
 
       ${disabled &&
         css `
@@ -194,11 +194,10 @@ const RadioCheck = forwardRef((props, ref) => {
             newRef.current.indeterminate = !!indeterminate;
         }
     }, [newRef, indeterminate, isRadio]);
-    return (_jsx(FormField, Object.assign({ as: card ? StyledRadioCheckCard : StyledRadioCheck, label: _jsxs(_Fragment, { children: [_jsx(StyledPseudoRadioCheck, { status: status, isRadio: isRadio, as: StyledFormControl, required: required, disabled: disabled, readOnly: readOnly }, void 0),
-                label] }, void 0), labelAs: card ? 'div' : undefined, id: id, required: required, disabled: disabled, readOnly: readOnly, status: status, inline: true }, { children: _jsx(StyledRadioCheckInput, Object.assign({}, restProps, { id: id, type: type, required: required, disabled: disabled, readOnly: readOnly, "aria-readonly": readOnly, onClick: (e) => {
+    return (_jsx(FormField, Object.assign({ as: card ? StyledRadioCheckCard : StyledRadioCheck, label: _jsxs(_Fragment, { children: [_jsx(StyledPseudoRadioCheck, { status: status, isRadio: isRadio, as: StyledFormControl, required: required, disabled: disabled, readOnly: readOnly }, void 0), label] }, void 0), labelAs: card ? 'div' : undefined, id: id, required: required, disabled: disabled, readOnly: readOnly, status: status, inline: true }, { children: _jsx(StyledRadioCheckInput, Object.assign({}, restProps, { id: id, type: type, required: required, disabled: disabled, readOnly: readOnly, "aria-readonly": readOnly, onClick: (e) => {
                 if (readOnly)
                     e.preventDefault();
-                onClick === null || onClick === void 0 ? void 0 : onClick(e);
+                onClick?.(e);
             }, onKeyDown: (e) => {
                 if (type === 'checkbox' && readOnly && e.key === ' ') {
                     e.preventDefault();
@@ -206,7 +205,7 @@ const RadioCheck = forwardRef((props, ref) => {
                 if (type === 'radio' && readOnly && e.key.includes('Arrow')) {
                     e.preventDefault();
                 }
-                onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+                onKeyDown?.(e);
             }, ref: newRef }), void 0) }), void 0));
 });
 export default RadioCheck;

package/lib/components/RadioCheck/RadioCheck.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioCheck.js","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FC,\n  Ref,\n  useEffect,\n  MouseEvent,\n  KeyboardEvent,\n  PropsWithoutRef,\n  MouseEventHandler,\n  KeyboardEventHandler\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, hideVisually, mix } from 'polished';\n\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils/utils';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useConsolidatedRef, useDirection, useUID } from '../../hooks';\nimport { StyledLabel } from '../Label';\nimport { calculateFontSize } from '../../styles';\n\nexport interface RadioCheckProps extends BaseProps {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Sets the type of input. */\n  type: 'radio' | 'checkbox';\n  /** Sets checked prop via onChange when using as controlled component. */\n  checked?: boolean;\n  /** Initialize checked prop when using as uncontrolled component. */\n  defaultChecked?: boolean;\n  /**\n   * Sets control to an an indeterminate state.\n   * @default false\n   */\n  indeterminate?: boolean;\n  /**\n   * Controls the styling of the RadioCheck.\n   * @default 'simple'\n   */\n  variant?: 'simple' | 'card';\n  /** Callback function for onClick events. */\n  onClick?: MouseEventHandler<HTMLInputElement>;\n  /** Callback function for onKeyDown events. */\n  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n  /** Ref forwarded to the underlying input. */\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport const StyledPseudoRadioCheck = styled.div<Pick<RadioCheckProps, 'readOnly' | 'status'>>(\n  props => {\n    const {\n      theme: {\n        base: {\n          spacing,\n          palette: { 'primary-background': primaryBackground }\n        },\n        components: {\n          'form-field': formField,\n          'radio-check': {\n            size,\n            'touch-size': touchSize,\n            'background-color': backgroundColor,\n            'border-color': borderColor,\n            'border-width': borderWidth\n          }\n        }\n      },\n      status\n    } = props;\n\n    const useBorderColor = status === 'error' ? formField.error['status-color'] : borderColor;\n    const useBackgroundColor =\n      status && formField[status]\n        ? tryCatch(() => mix(0.8, primaryBackground, formField[status]['status-color']))\n        : backgroundColor;\n\n    return css`\n      display: flex;\n      flex-shrink: 0;\n      position: relative;\n      width: ${size};\n      height: ${size};\n      margin-inline-end: ${spacing};\n      border: ${borderWidth} solid ${useBorderColor};\n      background-color: ${useBackgroundColor};\n\n      @media (pointer: coarse) {\n        width: ${touchSize};\n        height: ${touchSize};\n      }\n\n      &::after {\n        content: '';\n        display: none;\n      }\n    `;\n  }\n);\n\nStyledPseudoRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckInput = styled.input(props => {\n  const {\n    theme: {\n      base: { 'border-radius': baseBorderRadius },\n      components: {\n        'form-control': {\n          ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor },\n          ':read-only': { 'background-color': readOnlyBackgroundColor }\n        },\n        'radio-check': {\n          ':checked': {\n            'background-color': checkedBackgroundColor,\n            'border-color': checkedBorderColor\n          }\n        },\n        checkbox: { 'border-radius': checkRadius },\n        'radio-button': { 'border-radius': radioRadius }\n      }\n    }\n  } = props;\n\n  const backgroundColor = props.readOnly ? readOnlyBackgroundColor : checkedBackgroundColor;\n  const foreground = tryCatch(() => readableColor(backgroundColor));\n\n  const prcSelector = `+ ${StyledLabel} ${StyledPseudoRadioCheck}`;\n  const { ltr } = useDirection();\n\n  return css`\n    ${hideVisually}\n\n    ${!(props.disabled || props.readOnly) &&\n    css`\n      &:focus ${prcSelector} {\n        box-shadow: ${shadow};\n        border-color: ${focusBorderColor};\n      }\n    `}\n\n    &:checked\n      ${prcSelector},\n      &:checked:disabled\n      ${prcSelector},\n      &[type='checkbox']:indeterminate\n      ${prcSelector},\n      &[type='checkbox']:indeterminate:disabled\n      ${prcSelector} {\n      border-color: ${props.readOnly ? 'inherit' : checkedBorderColor};\n      background-color: ${backgroundColor};\n\n      &::after {\n        display: block;\n      }\n    }\n\n    &[type='radio'] ${prcSelector}, &[type='radio'] ${prcSelector}::after {\n      border-radius: ${radioRadius};\n    }\n\n    &[type='radio'] ${prcSelector}::after {\n      margin: auto;\n      width: 100%;\n      height: 100%;\n      background-color: ${foreground};\n      transform: scale(0.4);\n    }\n\n    &[type='checkbox'] ${prcSelector} {\n      border-radius: min(calc(${baseBorderRadius} * ${checkRadius}), 0.25rem);\n    }\n\n    &[type='checkbox']:not(:indeterminate) ${prcSelector} {\n      &::after {\n        width: 40%;\n        height: 75%;\n        ${ltr\n          ? css`\n              transform: rotate(45deg) translate(50%, -30%);\n            `\n          : css`\n              transform: rotate(45deg) translate(-50%, 30%);\n            `}\n        border-right: 0.15em solid ${foreground};\n        border-bottom: 0.15em solid ${foreground};\n      }\n    }\n\n    &[type='checkbox']:indeterminate ${prcSelector} {\n      display: flex;\n      &::after {\n        width: 90%;\n        height: 0.15em;\n        margin: auto;\n        background-color: ${foreground};\n      }\n    }\n  `;\n});\n\nStyledRadioCheckInput.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheck = styled.div<Pick<RadioCheckProps, 'disabled' | 'readOnly'>>(\n  props => {\n    const {\n      disabled,\n      readOnly,\n      theme: {\n        base,\n        components: {\n          'radio-check': {\n            label: { color: labelColor, 'font-weight': labelFontWeight }\n          },\n          'form-control': {\n            ':hover': { 'border-color': hoverBorderColor }\n          }\n        }\n      }\n    } = props;\n\n    const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n\n    return css`\n      > ${StyledLabel} {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        font-weight: ${labelFontWeight};\n        word-break: break-word;\n        font-size: ${fontSize.s};\n        color: ${labelColor};\n        margin: 0;\n        min-height: ${base.sizes['touch-mouse']};\n\n        @media (pointer: coarse) {\n          min-height: ${base.sizes['touch-finger']};\n        }\n      }\n\n      ${!(disabled || readOnly) &&\n      css`\n        &:not(:focus-within) > ${StyledLabel}:hover ${StyledPseudoRadioCheck} {\n          border-color: ${hoverBorderColor};\n        }\n      `}\n    `;\n  }\n);\n\nStyledRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckCard = styled.label<\n  Pick<RadioCheckProps, 'disabled' | 'readOnly' | 'status'>\n>(\n  ({\n    disabled,\n    readOnly,\n    status,\n    theme: {\n      base: { palette, shadow, spacing },\n      components: {\n        card,\n        'form-field': formField,\n        'radio-check': { label },\n        'form-control': {\n          ':hover': { 'border-color': hoverBorderColor }\n        }\n      }\n    }\n  }) => {\n    const useBorderColor =\n      status === 'error' ? formField.error['status-color'] : palette['border-line'];\n\n    return css`\n      min-width: min-content;\n      align-items: start;\n      cursor: pointer;\n      background-color: ${card.background};\n      border-radius: ${card['border-radius']};\n      border: 0.0625rem solid ${useBorderColor};\n      padding: calc(1.5 * ${spacing});\n\n      ${disabled &&\n      css`\n        cursor: not-allowed;\n      `}\n\n      ${!(disabled || readOnly) &&\n      css`\n        :hover:not(:focus-within) {\n          border-color: ${hoverBorderColor};\n          ${StyledLabel} ${StyledPseudoRadioCheck} {\n            border-color: ${hoverBorderColor};\n          }\n        }\n\n        :focus-within {\n          box-shadow: ${shadow.focus};\n          border-color: transparent;\n        }\n      `}\n\n    > ${StyledLabel} {\n        display: grid;\n        grid-template-columns: auto 1fr;\n        color: ${label.color};\n        font-weight: ${label['font-weight']};\n      }\n    `;\n  }\n);\n\nStyledRadioCheckCard.defaultProps = defaultThemeProp;\n\nconst RadioCheck: FC<RadioCheckProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<RadioCheckProps>, ref: RadioCheckProps['ref']) => {\n    const uid = useUID();\n    const {\n      type,\n      id = uid,\n      label,\n      required = false,\n      disabled = false,\n      indeterminate = false,\n      readOnly = false,\n      variant = 'simple',\n      onClick,\n      onKeyDown,\n      status,\n      ...restProps\n    } = props;\n\n    const isRadio = type === 'radio';\n    const card = variant === 'card';\n    const newRef = useConsolidatedRef(ref);\n\n    useEffect(() => {\n      if (!isRadio && newRef.current) {\n        newRef.current.indeterminate = !!indeterminate;\n      }\n    }, [newRef, indeterminate, isRadio]);\n\n    return (\n      <FormField\n        as={card ? StyledRadioCheckCard : StyledRadioCheck}\n        label={\n          <>\n            <StyledPseudoRadioCheck\n              status={status}\n              isRadio={isRadio}\n              as={StyledFormControl}\n              required={required}\n              disabled={disabled}\n              readOnly={readOnly}\n            />\n            {label}\n          </>\n        }\n        labelAs={card ? 'div' : undefined}\n        id={id}\n        required={required}\n        disabled={disabled}\n        readOnly={readOnly}\n        status={status}\n        inline\n      >\n        <StyledRadioCheckInput\n          {...restProps}\n          id={id}\n          type={type}\n          required={required}\n          disabled={disabled}\n          readOnly={readOnly}\n          aria-readonly={readOnly}\n          onClick={(e: MouseEvent<HTMLInputElement>) => {\n            if (readOnly) e.preventDefault();\n\n            onClick?.(e);\n          }}\n          onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n            if (type === 'checkbox' && readOnly && e.key === ' ') {\n              e.preventDefault();\n            }\n            if (type === 'radio' && readOnly && e.key.includes('Arrow')) {\n              e.preventDefault();\n            }\n\n            onKeyDown?.(e);\n          }}\n          ref={newRef}\n        />\n      </FormField>\n    );\n  }\n);\n\nexport default RadioCheck;\n"]}
+{"version":3,"file":"RadioCheck.js","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FC,\n  Ref,\n  useEffect,\n  MouseEvent,\n  KeyboardEvent,\n  PropsWithoutRef,\n  MouseEventHandler,\n  KeyboardEventHandler\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, hideVisually, mix } from 'polished';\n\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils/utils';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useConsolidatedRef, useDirection, useUID } from '../../hooks';\nimport { StyledLabel } from '../Label';\nimport { calculateFontSize } from '../../styles';\n\nexport interface RadioCheckProps extends BaseProps {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Sets the type of input. */\n  type: 'radio' | 'checkbox';\n  /** Sets checked prop via onChange when using as controlled component. */\n  checked?: boolean;\n  /** Initialize checked prop when using as uncontrolled component. */\n  defaultChecked?: boolean;\n  /**\n   * Sets control to an an indeterminate state.\n   * @default false\n   */\n  indeterminate?: boolean;\n  /**\n   * Controls the styling of the RadioCheck.\n   * @default 'simple'\n   */\n  variant?: 'simple' | 'card';\n  /** Callback function for onClick events. */\n  onClick?: MouseEventHandler<HTMLInputElement>;\n  /** Callback function for onKeyDown events. */\n  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n  /** Ref forwarded to the underlying input. */\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport const StyledPseudoRadioCheck = styled.div<Pick<RadioCheckProps, 'readOnly' | 'status'>>(\n  props => {\n    const {\n      theme: {\n        base: {\n          spacing,\n          palette: { 'primary-background': primaryBackground }\n        },\n        components: {\n          'form-field': formField,\n          'radio-check': {\n            size,\n            'touch-size': touchSize,\n            'background-color': backgroundColor,\n            'border-color': borderColor,\n            'border-width': borderWidth\n          }\n        }\n      },\n      status\n    } = props;\n\n    const useBorderColor = status === 'error' ? formField.error['status-color'] : borderColor;\n    const useBackgroundColor =\n      status && formField[status]\n        ? tryCatch(() => mix(0.8, primaryBackground, formField[status]['status-color']))\n        : backgroundColor;\n\n    return css`\n      display: flex;\n      flex-shrink: 0;\n      position: relative;\n      width: ${size};\n      height: ${size};\n      margin-inline-end: ${spacing};\n      border: ${borderWidth} solid ${useBorderColor};\n      background-color: ${useBackgroundColor};\n\n      @media (pointer: coarse) {\n        width: ${touchSize};\n        height: ${touchSize};\n      }\n\n      &::after {\n        content: '';\n        display: none;\n      }\n    `;\n  }\n);\n\nStyledPseudoRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckInput = styled.input(props => {\n  const {\n    theme: {\n      base: { 'border-radius': baseBorderRadius },\n      components: {\n        'form-control': {\n          ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor },\n          ':read-only': { 'background-color': readOnlyBackgroundColor }\n        },\n        'radio-check': {\n          ':checked': {\n            'background-color': checkedBackgroundColor,\n            'border-color': checkedBorderColor\n          }\n        },\n        checkbox: { 'border-radius': checkRadius },\n        'radio-button': { 'border-radius': radioRadius }\n      }\n    }\n  } = props;\n\n  const backgroundColor = props.readOnly ? readOnlyBackgroundColor : checkedBackgroundColor;\n  const foreground = tryCatch(() => readableColor(backgroundColor));\n\n  const prcSelector = `+ ${StyledLabel} ${StyledPseudoRadioCheck}`;\n  const { ltr } = useDirection();\n\n  return css`\n    ${hideVisually}\n\n    ${!(props.disabled || props.readOnly) &&\n    css`\n      &:focus ${prcSelector} {\n        box-shadow: ${shadow};\n        border-color: ${focusBorderColor};\n      }\n    `}\n\n    &:checked\n      ${prcSelector},\n      &:checked:disabled\n      ${prcSelector},\n      &[type='checkbox']:indeterminate\n      ${prcSelector},\n      &[type='checkbox']:indeterminate:disabled\n      ${prcSelector} {\n      border-color: ${props.readOnly ? 'inherit' : checkedBorderColor};\n      background-color: ${backgroundColor};\n\n      &::after {\n        display: block;\n      }\n    }\n\n    &[type='radio'] ${prcSelector}, &[type='radio'] ${prcSelector}::after {\n      border-radius: ${radioRadius};\n    }\n\n    &[type='radio'] ${prcSelector}::after {\n      margin: auto;\n      width: 100%;\n      height: 100%;\n      background-color: ${foreground};\n      transform: scale(0.4);\n    }\n\n    &[type='checkbox'] ${prcSelector} {\n      border-radius: min(calc(${baseBorderRadius} * ${checkRadius}), 0.25rem);\n    }\n\n    &[type='checkbox']:not(:indeterminate) ${prcSelector} {\n      &::after {\n        width: 40%;\n        height: 75%;\n        ${ltr\n          ? css`\n              transform: rotate(45deg) translate(50%, -30%);\n            `\n          : css`\n              transform: rotate(45deg) translate(-50%, 30%);\n            `}\n        border-right: 0.15em solid ${foreground};\n        border-bottom: 0.15em solid ${foreground};\n      }\n    }\n\n    &[type='checkbox']:indeterminate ${prcSelector} {\n      display: flex;\n      &::after {\n        width: 90%;\n        height: 0.15em;\n        margin: auto;\n        background-color: ${foreground};\n      }\n    }\n  `;\n});\n\nStyledRadioCheckInput.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheck = styled.div<Pick<RadioCheckProps, 'disabled' | 'readOnly'>>(\n  props => {\n    const {\n      disabled,\n      readOnly,\n      theme: {\n        base,\n        components: {\n          'radio-check': {\n            label: { color: labelColor, 'font-weight': labelFontWeight }\n          },\n          'form-control': {\n            ':hover': { 'border-color': hoverBorderColor }\n          }\n        }\n      }\n    } = props;\n\n    const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n\n    return css`\n      > ${StyledLabel} {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        font-weight: ${labelFontWeight};\n        word-break: break-word;\n        font-size: ${fontSize.s};\n        color: ${labelColor};\n        margin: 0;\n        min-height: ${base['hit-area']['mouse-min']};\n\n        @media (pointer: coarse) {\n          min-height: ${base['hit-area']['finger-min']};\n        }\n      }\n\n      ${!(disabled || readOnly) &&\n      css`\n        &:not(:focus-within) > ${StyledLabel}:hover ${StyledPseudoRadioCheck} {\n          border-color: ${hoverBorderColor};\n        }\n      `}\n    `;\n  }\n);\n\nStyledRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckCard = styled.label<\n  Pick<RadioCheckProps, 'disabled' | 'readOnly' | 'status'>\n>(\n  ({\n    disabled,\n    readOnly,\n    status,\n    theme: {\n      base: { palette, shadow, spacing },\n      components: {\n        card,\n        'form-field': formField,\n        'radio-check': { label },\n        'form-control': {\n          ':hover': { 'border-color': hoverBorderColor }\n        }\n      }\n    }\n  }) => {\n    const useBorderColor =\n      status === 'error' ? formField.error['status-color'] : palette['border-line'];\n\n    return css`\n      min-width: min-content;\n      align-items: start;\n      cursor: pointer;\n      background-color: ${card.background};\n      border-radius: ${card['border-radius']};\n      border: 0.0625rem solid ${useBorderColor};\n      padding: ${spacing};\n\n      ${disabled &&\n      css`\n        cursor: not-allowed;\n      `}\n\n      ${!(disabled || readOnly) &&\n      css`\n        :hover:not(:focus-within) {\n          border-color: ${hoverBorderColor};\n          ${StyledLabel} ${StyledPseudoRadioCheck} {\n            border-color: ${hoverBorderColor};\n          }\n        }\n\n        :focus-within {\n          box-shadow: ${shadow.focus};\n          border-color: transparent;\n        }\n      `}\n\n    > ${StyledLabel} {\n        display: grid;\n        grid-template-columns: auto 1fr;\n        color: ${label.color};\n        font-weight: ${label['font-weight']};\n      }\n    `;\n  }\n);\n\nStyledRadioCheckCard.defaultProps = defaultThemeProp;\n\nconst RadioCheck: FC<RadioCheckProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<RadioCheckProps>, ref: RadioCheckProps['ref']) => {\n    const uid = useUID();\n    const {\n      type,\n      id = uid,\n      label,\n      required = false,\n      disabled = false,\n      indeterminate = false,\n      readOnly = false,\n      variant = 'simple',\n      onClick,\n      onKeyDown,\n      status,\n      ...restProps\n    } = props;\n\n    const isRadio = type === 'radio';\n    const card = variant === 'card';\n    const newRef = useConsolidatedRef(ref);\n\n    useEffect(() => {\n      if (!isRadio && newRef.current) {\n        newRef.current.indeterminate = !!indeterminate;\n      }\n    }, [newRef, indeterminate, isRadio]);\n\n    return (\n      <FormField\n        as={card ? StyledRadioCheckCard : StyledRadioCheck}\n        label={\n          <>\n            <StyledPseudoRadioCheck\n              status={status}\n              isRadio={isRadio}\n              as={StyledFormControl}\n              required={required}\n              disabled={disabled}\n              readOnly={readOnly}\n            />\n            {label}\n          </>\n        }\n        labelAs={card ? 'div' : undefined}\n        id={id}\n        required={required}\n        disabled={disabled}\n        readOnly={readOnly}\n        status={status}\n        inline\n      >\n        <StyledRadioCheckInput\n          {...restProps}\n          id={id}\n          type={type}\n          required={required}\n          disabled={disabled}\n          readOnly={readOnly}\n          aria-readonly={readOnly}\n          onClick={(e: MouseEvent<HTMLInputElement>) => {\n            if (readOnly) e.preventDefault();\n\n            onClick?.(e);\n          }}\n          onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n            if (type === 'checkbox' && readOnly && e.key === ' ') {\n              e.preventDefault();\n            }\n            if (type === 'radio' && readOnly && e.key.includes('Arrow')) {\n              e.preventDefault();\n            }\n\n            onKeyDown?.(e);\n          }}\n          ref={newRef}\n        />\n      </FormField>\n    );\n  }\n);\n\nexport default RadioCheck;\n"]}

package/lib/components/RadioCheckGroup/RadioCheckGroup.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import FormField from '../FormField';
 import { StyledFormField } from '../FormField/FormField';
 import Grid from '../Grid';
-import { useElement } from '../../hooks';
+import { useElement, useUID } from '../../hooks';
 const defaultProps = {
     required: false,
     disabled: false
@@ -16,7 +16,9 @@ const StyledRadioCheckGroup = styled.fieldset `
     }
   }
 `;
-const RadioCheckGroup = forwardRef(({ children, name, disabled, onChange, readOnly, inline = false, autoStack = true, variant = 'simple', ...restProps }, ref) => {
+const RadioCheckGroup = forwardRef((props, ref) => {
+    const uid = useUID();
+    const { children, name = uid, disabled, onChange, readOnly, inline = false, autoStack = true, variant = 'simple', ...restProps } = props;
     const [optionsEl, setOptionsEl] = useElement();
     const [renderInline, setRenderInline] = useState(inline);
     const renderInlineRef = useRef(inline);
@@ -53,8 +55,8 @@ const RadioCheckGroup = forwardRef(({ children, name, disabled, onChange, readOn
         disabled,
         ...restProps
     }, { children: _jsx(Grid, Object.assign({ ref: setOptionsEl, container: {
-                colGap: 2,
-                rowGap: variant === 'card' ? 2 : 0,
+                colGap: 1,
+                rowGap: variant === 'card' ? 1 : 0,
                 cols: renderInline ? 'repeat(auto-fit, minmax(1ch, max-content))' : '1fr'
             } }, { children: Children.map(children, child => cloneElement(child, {
                 name,
@@ -63,9 +65,8 @@ const RadioCheckGroup = forwardRef(({ children, name, disabled, onChange, readOn
                 variant,
                 onChange: onChange
                     ? (e) => {
-                        var _a, _b;
                         if (!(readOnly || child.props.readOnly)) {
-                            (_b = (_a = child.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                            child.props.onChange?.(e);
                             onChange(e);
                         }
                     }