@pega/cosmos-react-core 3.0.0-dev.4.0 → 3.0.0-dev.5.0

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,CAC9C,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IACvB,OAAO,GAAG,CAAA;;iBAEG,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;UAuBvD,SAAS,KAAK,QAAQ;QACxB,GAAG,CAAA;;;SAGF;;;;;sBAKa,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,gBAAgB,CAAC;;8CAEnB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;;UAE9D,SAAS,KAAK,QAAQ;QACxB,GAAG,CAAA;;;SAGF;;UAEC,SAAS,KAAK,OAAO;QACvB,GAAG,CAAA;;;SAGF;;QAED,SAAS,KAAK,QAAQ;QACtB,GAAG,CAAA;;;;yCAI8B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;SAC1D;;;;;;;6BAOoB,MAAM,GAAG,CAAC;;;KAGlC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,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,IAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,aAAa,EAAC,SAAS,EAAE,SAAS,KAAM,SAAS,YACtF,2BACE,wBAAQ,EACR,wBAAQ,EACR,wBAAQ,YACH,WACgB,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<Pick<ProgressProps, 'placement'>>(\n  ({ 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);\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,CAC9C,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IACvB,OAAO,GAAG,CAAA;;iBAEG,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;UAuBvD,SAAS,KAAK,QAAQ;QACxB,GAAG,CAAA;;;SAGF;;;;;sBAKa,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,gBAAgB,CAAC;;8CAEnB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;;UAE9D,SAAS,KAAK,QAAQ;QACxB,GAAG,CAAA;;;SAGF;;UAEC,SAAS,KAAK,OAAO;QACvB,GAAG,CAAA;;;SAGF;;QAED,SAAS,KAAK,QAAQ;QACtB,GAAG,CAAA;;;;yCAI8B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;SAC1D;;;;;;;6BAOoB,MAAM,GAAG,CAAC;;;KAGlC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,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,IAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,aAAa,EAAC,SAAS,EAAE,SAAS,KAAM,SAAS,YACtF,2BACE,gBAAQ,EACR,gBAAQ,EACR,gBAAQ,IACH,GACgB,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<Pick<ProgressProps, 'placement'>>(\n  ({ 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);\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

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

@@ -69,7 +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, { ref: ref, role: 'progressbar', "aria-valuemin": minValue, "aria-valuemax": maxValue, "aria-valuenow": value, placement: placement, determinate: typeof value === 'number', ...restProps, children: _jsxs("svg", { 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, { ref: ref, role: 'progressbar', "aria-valuemin": minValue, "aria-valuemax": maxValue, "aria-valuenow": value, placement: placement, determinate: typeof value === 'number', ...restProps, children: _jsxs("svg", { viewBox: '0 0 20 20', children: [_jsx("circle", {}), _jsx("circle", { strokeDasharray: circumference, style: { strokeDashoffset } })] }) }));
 });
 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,CAE1C,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,EAAE;IACtC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;kBAsBM,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;;;;;;;;;oBASnC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,gBAAgB,CAAC;qDACV,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;cACjE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;YAElC,CAAC,WAAW;QACd,GAAG,CAAA;8CACiC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;WAC7D;;;;;MAKL,SAAS,KAAK,QAAQ;QACtB,CAAC,CAAC,GAAG,CAAA;;;SAGF;QACH,CAAC,CAAC,GAAG,CAAA;mBACQ,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;oBACjC,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;SAC7C;GACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,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,IACjB,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,aAAa,mBACH,QAAQ,mBACR,QAAQ,mBACR,KAAK,EACpB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,OAAO,KAAK,KAAK,QAAQ,KAClC,SAAS,YAEb,eAAK,OAAO,EAAC,WAAW,aACtB,0BAAU,EACV,iBAAQ,eAAe,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,gBAAgB,EAAE,WAAI,YACnE,WACa,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<\n  Pick<ProgressProps, 'placement'> & { 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\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,CAE1C,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,EAAE;IACtC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;kBAsBM,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;;;;;;;;;oBASnC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,gBAAgB,CAAC;qDACV,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;cACjE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;YAElC,CAAC,WAAW;QACd,GAAG,CAAA;8CACiC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;WAC7D;;;;;MAKL,SAAS,KAAK,QAAQ;QACtB,CAAC,CAAC,GAAG,CAAA;;;SAGF;QACH,CAAC,CAAC,GAAG,CAAA;mBACQ,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;oBACjC,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;SAC7C;GACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,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,IACjB,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,aAAa,mBACH,QAAQ,mBACR,QAAQ,mBACR,KAAK,EACpB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,OAAO,KAAK,KAAK,QAAQ,KAClC,SAAS,YAEb,eAAK,OAAO,EAAC,WAAW,aACtB,kBAAU,EACV,iBAAQ,eAAe,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,gBAAgB,EAAE,GAAI,IACnE,GACa,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<\n  Pick<ProgressProps, 'placement'> & { 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\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/RadioButton/RadioButton.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import RadioCheck from '../RadioCheck';
 // Odd issue with SB doc prop table not being generated when called RadioButton...so using RB
-const RB = forwardRef((props, ref) => (_jsx(RadioCheck, { ...props, type: 'radio', ref: ref }, void 0)));
+const RB = forwardRef((props, ref) => (_jsx(RadioCheck, { ...props, type: 'radio', ref: ref })));
 // Adding here for doc purposes only
 RB.defaultProps = RadioCheck.defaultProps;
 export default RB;

package/lib/components/RadioButton/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAO,MAAM,OAAO,CAAC;AAG5C,OAAO,UAA+B,MAAM,eAAe,CAAC;AA8B5D,6FAA6F;AAC7F,MAAM,EAAE,GAAwC,UAAU,CACxD,CAAC,KAAuB,EAAE,GAA0B,EAAE,EAAE,CAAC,CACvD,KAAC,UAAU,OAAK,KAAK,EAAE,IAAI,EAAC,OAAO,EAAC,GAAG,EAAE,GAAG,WAAI,CACjD,CACF,CAAC;AAEF,oCAAoC;AACpC,EAAE,CAAC,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC;AAE1C,eAAe,EAAE,CAAC","sourcesContent":["import { FC, forwardRef, Ref } from 'react';\n\nimport { FormControlProps } from '../FormControl';\nimport RadioCheck, { RadioCheckProps } from '../RadioCheck';\nimport type { ForwardProps, NoChildrenProp } from '../../types';\n\nexport interface RadioButtonProps extends NoChildrenProp {\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  /** 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 checked prop via onChange when using as controlled component. */\n  checked?: RadioCheckProps['checked'];\n  /** Initialize checked prop when using as uncontrolled component. */\n  defaultChecked?: RadioCheckProps['defaultChecked'];\n  /**\n   * Sets Radio Button to an an [indeterminate state](https://css-tricks.com/almanac/selectors/i/indeterminate/#indeterminate-radio-buttons).\n   * @default false\n   */\n  indeterminate?: RadioCheckProps['indeterminate'];\n}\n\n// Odd issue with SB doc prop table not being generated when called RadioButton...so using RB\nconst RB: FC<RadioButtonProps & ForwardProps> = forwardRef(\n  (props: RadioButtonProps, ref: Ref<HTMLInputElement>) => (\n    <RadioCheck {...props} type='radio' ref={ref} />\n  )\n);\n\n// Adding here for doc purposes only\nRB.defaultProps = RadioCheck.defaultProps;\n\nexport default RB;\n"]}
+{"version":3,"file":"RadioButton.js","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAO,MAAM,OAAO,CAAC;AAG5C,OAAO,UAA+B,MAAM,eAAe,CAAC;AA8B5D,6FAA6F;AAC7F,MAAM,EAAE,GAAwC,UAAU,CACxD,CAAC,KAAuB,EAAE,GAA0B,EAAE,EAAE,CAAC,CACvD,KAAC,UAAU,OAAK,KAAK,EAAE,IAAI,EAAC,OAAO,EAAC,GAAG,EAAE,GAAG,GAAI,CACjD,CACF,CAAC;AAEF,oCAAoC;AACpC,EAAE,CAAC,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC;AAE1C,eAAe,EAAE,CAAC","sourcesContent":["import { FC, forwardRef, Ref } from 'react';\n\nimport { FormControlProps } from '../FormControl';\nimport RadioCheck, { RadioCheckProps } from '../RadioCheck';\nimport type { ForwardProps, NoChildrenProp } from '../../types';\n\nexport interface RadioButtonProps extends NoChildrenProp {\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  /** 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 checked prop via onChange when using as controlled component. */\n  checked?: RadioCheckProps['checked'];\n  /** Initialize checked prop when using as uncontrolled component. */\n  defaultChecked?: RadioCheckProps['defaultChecked'];\n  /**\n   * Sets Radio Button to an an [indeterminate state](https://css-tricks.com/almanac/selectors/i/indeterminate/#indeterminate-radio-buttons).\n   * @default false\n   */\n  indeterminate?: RadioCheckProps['indeterminate'];\n}\n\n// Odd issue with SB doc prop table not being generated when called RadioButton...so using RB\nconst RB: FC<RadioButtonProps & ForwardProps> = forwardRef(\n  (props: RadioButtonProps, ref: Ref<HTMLInputElement>) => (\n    <RadioCheck {...props} type='radio' ref={ref} />\n  )\n);\n\n// Adding here for doc purposes only\nRB.defaultProps = RadioCheck.defaultProps;\n\nexport default RB;\n"]}

package/lib/components/RadioCheck/RadioCheck.js

@@ -194,7 +194,7 @@ const RadioCheck = forwardRef((props, ref) => {
             newRef.current.indeterminate = !!indeterminate;
         }
     }, [newRef, indeterminate, isRadio]);
-    return (_jsx(FormField, { 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, labelAfter: true, children: _jsx(StyledRadioCheckInput, { ...restProps, id: id, type: type, required: required, disabled: disabled, readOnly: readOnly, "aria-readonly": readOnly, onClick: (e) => {
+    return (_jsx(FormField, { as: card ? StyledRadioCheckCard : StyledRadioCheck, label: _jsxs(_Fragment, { children: [_jsx(StyledPseudoRadioCheck, { status: status, isRadio: isRadio, as: StyledFormControl, required: required, disabled: disabled, readOnly: readOnly }), label] }), labelAs: card ? 'div' : undefined, id: id, required: required, disabled: disabled, readOnly: readOnly, status: status, inline: true, labelAfter: true, children: _jsx(StyledRadioCheckInput, { ...restProps, id: id, type: type, required: required, disabled: disabled, readOnly: readOnly, "aria-readonly": readOnly, onClick: (e) => {
                 if (readOnly)
                     e.preventDefault();
                 onClick?.(e);
@@ -206,7 +206,7 @@ const RadioCheck = forwardRef((props, ref) => {
                     e.preventDefault();
                 }
                 onKeyDown?.(e);
-            }, ref: newRef }, void 0) }, void 0));
+            }, ref: newRef }) }));
 });
 export default RadioCheck;
 //# sourceMappingURL=RadioCheck.js.map

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, NoChildrenProp } from '../../types';\nimport { useConsolidatedRef, useDirection, useUID } from '../../hooks';\nimport { StyledLabel } from '../Label';\nimport { calculateFontSize } from '../../styles';\n\nexport interface RadioCheckProps extends BaseProps, NoChildrenProp {\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: calc(${spacing} / 2);\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        labelAfter\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, NoChildrenProp } from '../../types';\nimport { useConsolidatedRef, useDirection, useUID } from '../../hooks';\nimport { StyledLabel } from '../Label';\nimport { calculateFontSize } from '../../styles';\n\nexport interface RadioCheckProps extends BaseProps, NoChildrenProp {\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: calc(${spacing} / 2);\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        labelAfter\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

@@ -71,7 +71,7 @@ const RadioCheckGroup = forwardRef((props, ref) => {
                         }
                     }
                     : child.props.onChange
-            })) }, void 0) }, void 0));
+            })) }) }));
 });
 RadioCheckGroup.defaultProps = defaultProps;
 export default RadioCheckGroup;

package/lib/components/RadioCheckGroup/RadioCheckGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioCheckGroup.js","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  Ref,\n  forwardRef,\n  PropsWithoutRef,\n  Children,\n  cloneElement,\n  ReactElement,\n  ChangeEvent,\n  useState,\n  useEffect,\n  useRef\n} from 'react';\nimport styled from 'styled-components';\n\nimport { ForwardProps } from '../../types';\nimport FormField, { FormFieldProps } from '../FormField';\nimport { StyledFormField } from '../FormField/FormField';\nimport { FormControlProps } from '../FormControl';\nimport { RadioCheckProps } from '../RadioCheck';\nimport Grid from '../Grid';\nimport { useElement, useUID } from '../../hooks';\n\nexport interface RadioCheckGroupProps {\n  /** Accepts Checkboxes or RadioButtons as children. */\n  children: ReactElement | ReactElement[];\n  /**\n   * Conveniently pass an onChange handler to the group to be notified when any of the inputs change.\n   * Additionally, onChange can be passed to individual children.\n   * Both handlers will be called, child followed by group.\n   */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\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  /**\n   * Layout field elements inline in a row.\n   * @default false\n   */\n  inline?: FormFieldProps['inline'];\n  /** Used to toggle the auto stacking feature of an inlined group.\n   * @default true\n   */\n  autoStack?: boolean;\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /**\n   * Controls the styling of the child RadioChecks.\n   * @default 'simple'\n   */\n  variant?: RadioCheckProps['variant'];\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\nconst defaultProps = {\n  required: false,\n  disabled: false\n};\n\nconst StyledRadioCheckGroup = styled.fieldset`\n  &[disabled] {\n    > ${StyledFormField} {\n      opacity: unset;\n    }\n  }\n`;\n\nconst RadioCheckGroup: FC<RadioCheckGroupProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<RadioCheckGroupProps>, ref: RadioCheckGroupProps['ref']) => {\n    const uid = useUID();\n    const {\n      children,\n      name = uid,\n      disabled,\n      onChange,\n      readOnly,\n      inline = false,\n      autoStack = true,\n      variant = 'simple',\n      ...restProps\n    } = props;\n\n    const [optionsEl, setOptionsEl] = useElement<HTMLDivElement>();\n    const [renderInline, setRenderInline] = useState(inline);\n    const renderInlineRef = useRef(inline);\n    const minInlineWidth = useRef(0);\n\n    useEffect(() => {\n      if (inline && optionsEl && autoStack) {\n        const intersectionObserver = new IntersectionObserver(\n          entries => {\n            if (entries[0].intersectionRatio < 1) {\n              if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n              renderInlineRef.current = false;\n              setRenderInline(false);\n            }\n          },\n          { root: optionsEl, threshold: 1 }\n        );\n\n        const resizeObserver = new ResizeObserver(entries => {\n          if (!renderInlineRef.current && entries[0].contentRect.width > minInlineWidth.current) {\n            renderInlineRef.current = true;\n            setRenderInline(true);\n          }\n        });\n\n        intersectionObserver.observe(optionsEl.lastChild as Element);\n        resizeObserver.observe(optionsEl);\n\n        return () => {\n          intersectionObserver.disconnect();\n          resizeObserver.disconnect();\n        };\n      }\n    }, [optionsEl, inline, autoStack]);\n\n    return (\n      <FormField\n        {...{\n          as: StyledRadioCheckGroup,\n          labelAs: 'legend',\n          ref,\n          name,\n          disabled,\n          ...restProps\n        }}\n      >\n        <Grid\n          ref={setOptionsEl}\n          container={{\n            colGap: 2,\n            rowGap: variant === 'card' ? 1 : 0,\n            cols: renderInline ? 'repeat(auto-fit, minmax(1ch, max-content))' : '1fr'\n          }}\n        >\n          {Children.map(children, child =>\n            cloneElement(child, {\n              name,\n              disabled: disabled || child.props.disabled,\n              readOnly: readOnly || child.props.readOnly,\n              variant,\n              onChange: onChange\n                ? (e: ChangeEvent<HTMLInputElement>) => {\n                    if (!(readOnly || child.props.readOnly)) {\n                      child.props.onChange?.(e);\n                      onChange(e);\n                    }\n                  }\n                : child.props.onChange\n            })\n          )}\n        </Grid>\n      </FormField>\n    );\n  }\n);\n\nRadioCheckGroup.defaultProps = defaultProps;\n\nexport default RadioCheckGroup;\n"]}
+{"version":3,"file":"RadioCheckGroup.js","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  Ref,\n  forwardRef,\n  PropsWithoutRef,\n  Children,\n  cloneElement,\n  ReactElement,\n  ChangeEvent,\n  useState,\n  useEffect,\n  useRef\n} from 'react';\nimport styled from 'styled-components';\n\nimport { ForwardProps } from '../../types';\nimport FormField, { FormFieldProps } from '../FormField';\nimport { StyledFormField } from '../FormField/FormField';\nimport { FormControlProps } from '../FormControl';\nimport { RadioCheckProps } from '../RadioCheck';\nimport Grid from '../Grid';\nimport { useElement, useUID } from '../../hooks';\n\nexport interface RadioCheckGroupProps {\n  /** Accepts Checkboxes or RadioButtons as children. */\n  children: ReactElement | ReactElement[];\n  /**\n   * Conveniently pass an onChange handler to the group to be notified when any of the inputs change.\n   * Additionally, onChange can be passed to individual children.\n   * Both handlers will be called, child followed by group.\n   */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\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  /**\n   * Layout field elements inline in a row.\n   * @default false\n   */\n  inline?: FormFieldProps['inline'];\n  /** Used to toggle the auto stacking feature of an inlined group.\n   * @default true\n   */\n  autoStack?: boolean;\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /**\n   * Controls the styling of the child RadioChecks.\n   * @default 'simple'\n   */\n  variant?: RadioCheckProps['variant'];\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\nconst defaultProps = {\n  required: false,\n  disabled: false\n};\n\nconst StyledRadioCheckGroup = styled.fieldset`\n  &[disabled] {\n    > ${StyledFormField} {\n      opacity: unset;\n    }\n  }\n`;\n\nconst RadioCheckGroup: FC<RadioCheckGroupProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<RadioCheckGroupProps>, ref: RadioCheckGroupProps['ref']) => {\n    const uid = useUID();\n    const {\n      children,\n      name = uid,\n      disabled,\n      onChange,\n      readOnly,\n      inline = false,\n      autoStack = true,\n      variant = 'simple',\n      ...restProps\n    } = props;\n\n    const [optionsEl, setOptionsEl] = useElement<HTMLDivElement>();\n    const [renderInline, setRenderInline] = useState(inline);\n    const renderInlineRef = useRef(inline);\n    const minInlineWidth = useRef(0);\n\n    useEffect(() => {\n      if (inline && optionsEl && autoStack) {\n        const intersectionObserver = new IntersectionObserver(\n          entries => {\n            if (entries[0].intersectionRatio < 1) {\n              if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n              renderInlineRef.current = false;\n              setRenderInline(false);\n            }\n          },\n          { root: optionsEl, threshold: 1 }\n        );\n\n        const resizeObserver = new ResizeObserver(entries => {\n          if (!renderInlineRef.current && entries[0].contentRect.width > minInlineWidth.current) {\n            renderInlineRef.current = true;\n            setRenderInline(true);\n          }\n        });\n\n        intersectionObserver.observe(optionsEl.lastChild as Element);\n        resizeObserver.observe(optionsEl);\n\n        return () => {\n          intersectionObserver.disconnect();\n          resizeObserver.disconnect();\n        };\n      }\n    }, [optionsEl, inline, autoStack]);\n\n    return (\n      <FormField\n        {...{\n          as: StyledRadioCheckGroup,\n          labelAs: 'legend',\n          ref,\n          name,\n          disabled,\n          ...restProps\n        }}\n      >\n        <Grid\n          ref={setOptionsEl}\n          container={{\n            colGap: 2,\n            rowGap: variant === 'card' ? 1 : 0,\n            cols: renderInline ? 'repeat(auto-fit, minmax(1ch, max-content))' : '1fr'\n          }}\n        >\n          {Children.map(children, child =>\n            cloneElement(child, {\n              name,\n              disabled: disabled || child.props.disabled,\n              readOnly: readOnly || child.props.readOnly,\n              variant,\n              onChange: onChange\n                ? (e: ChangeEvent<HTMLInputElement>) => {\n                    if (!(readOnly || child.props.readOnly)) {\n                      child.props.onChange?.(e);\n                      onChange(e);\n                    }\n                  }\n                : child.props.onChange\n            })\n          )}\n        </Grid>\n      </FormField>\n    );\n  }\n);\n\nRadioCheckGroup.defaultProps = defaultProps;\n\nexport default RadioCheckGroup;\n"]}

package/lib/components/Rating/Rating.js

@@ -50,7 +50,7 @@ StyledRatingMetaInfo.defaultProps = defaultThemeProp;
 const RatingItem = (props) => {
     const { fill, ...restProps } = props;
     const fillPercentage = Math.round((100 / 1) * fill);
-    return (_jsxs(_Fragment, { children: [fillPercentage === 0 && _jsx(Icon, { ...restProps, name: 'star' }, void 0), fillPercentage === 100 && _jsx(Icon, { ...restProps, name: 'star-solid' }, void 0), fillPercentage > 0 && fillPercentage < 100 && (_jsxs(StyledPartialRatingContainer, { children: [_jsx(Icon, { ...restProps, name: 'star' }, void 0), _jsx(StyledPartialRating, { ratingPercentage: fillPercentage, children: _jsx(Icon, { ...restProps, name: 'star-solid' }, void 0) }, void 0)] }, void 0))] }, void 0));
+    return (_jsxs(_Fragment, { children: [fillPercentage === 0 && _jsx(Icon, { ...restProps, name: 'star' }), fillPercentage === 100 && _jsx(Icon, { ...restProps, name: 'star-solid' }), fillPercentage > 0 && fillPercentage < 100 && (_jsxs(StyledPartialRatingContainer, { children: [_jsx(Icon, { ...restProps, name: 'star' }), _jsx(StyledPartialRating, { ratingPercentage: fillPercentage, children: _jsx(Icon, { ...restProps, name: 'star-solid' }) })] }))] }));
 };
 const Rating = (props) => {
     const starsOutline = [];
@@ -67,7 +67,7 @@ const Rating = (props) => {
         }
         starsOutline.push(_jsx(RatingItem, { fill: fillValue }, `star-${i}`));
     }
-    return (_jsxs(StyledRating, { "aria-label": ariaLabel, tabIndex: tabIndex, ...restProps, children: [_jsx(StyledRatingItemsContainer, { children: starsOutline }, void 0), metaInfo && _jsxs(StyledRatingMetaInfo, { children: ["(", metaInfo, ")"] }, void 0), ' '] }, void 0));
+    return (_jsxs(StyledRating, { "aria-label": ariaLabel, tabIndex: tabIndex, ...restProps, children: [_jsx(StyledRatingItemsContainer, { children: starsOutline }), metaInfo && _jsxs(StyledRatingMetaInfo, { children: ["(", metaInfo, ")"] }), ' '] }));
 };
 Rating.defaultProps = defaultProps;
 export default Rating;

package/lib/components/Rating/Rating.js.map

@@ -1 +1 @@
-{"version":3,"file":"Rating.js","sourceRoot":"","sources":["../../../src/components/Rating/Rating.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Icon, { registerIcon } from '../Icon';\nimport * as starIcon from '../Icon/icons/star.icon';\nimport * as starSolidIcon from '../Icon/icons/star-solid.icon';\n\nregisterIcon(starIcon, starSolidIcon);\n\nexport interface RatingProps extends BaseProps, NoChildrenProp {\n  /**\n   * Sets the rating to read only.\n   * @default false\n   */\n  readOnly?: boolean;\n  /**\n   * The maximum rating allowed. Must be an integer greater than 1.\n   * @default 5\n   */\n  maxRating?: number;\n  /** The value of the Rating. Could be a decimal or integer. */\n  value: number;\n  /** Text that is displayed in parentheses inline with the Rating stars. */\n  metaInfo?: string;\n  /** Aria label for screen readers. */\n  'aria-label'?: string;\n  /**\n   * The tabIndex to control focus.\n   * @default 0\n   */\n  tabIndex?: number;\n}\n\nconst DEFAULT_MAX_RATING = 5;\n\nconst defaultProps: Partial<RatingProps> = {\n  readOnly: false,\n  maxRating: DEFAULT_MAX_RATING,\n  tabIndex: 0\n};\n\nconst StyledRating = styled.div`\n  display: inline-block;\n  vertical-align: middle;\n`;\n\nconst StyledRatingItemsContainer = styled.div(props => {\n  const { theme } = props;\n  return css`\n    color: ${theme.components.rating.color};\n    line-height: 1;\n    vertical-align: middle;\n    display: inline-block;\n  `;\n});\n\nStyledRatingItemsContainer.defaultProps = defaultThemeProp;\n\nconst StyledPartialRatingContainer = styled.div`\n  position: relative;\n  display: inline-block;\n`;\n\ninterface StyledPartialRatingProps {\n  ratingPercentage: number;\n}\n\nexport const StyledPartialRating = styled.div<StyledPartialRatingProps>(props => {\n  const { ratingPercentage } = props;\n  return css`\n    display: inline-block;\n    position: absolute;\n    inset-inline-start: 0;\n    width: ${ratingPercentage}%;\n    overflow: hidden;\n    white-space: nowrap;\n  `;\n});\n\nconst StyledRatingMetaInfo = styled.span(props => {\n  const { theme } = props;\n  return css`\n    margin-inline-start: ${theme.base.spacing};\n  `;\n});\n\nStyledRatingMetaInfo.defaultProps = defaultThemeProp;\n\ninterface RatingItemProps {\n  fill: number;\n}\n\nconst RatingItem: FunctionComponent<RatingItemProps> = (props: RatingItemProps) => {\n  const { fill, ...restProps } = props;\n  const fillPercentage = Math.round((100 / 1) * fill);\n  return (\n    <>\n      {fillPercentage === 0 && <Icon {...restProps} name='star' />}\n      {fillPercentage === 100 && <Icon {...restProps} name='star-solid' />}\n      {fillPercentage > 0 && fillPercentage < 100 && (\n        <StyledPartialRatingContainer>\n          <Icon {...restProps} name='star' />\n          <StyledPartialRating ratingPercentage={fillPercentage}>\n            <Icon {...restProps} name='star-solid' />\n          </StyledPartialRating>\n        </StyledPartialRatingContainer>\n      )}\n    </>\n  );\n};\n\nconst Rating: FunctionComponent<RatingProps & ForwardProps> = (props: RatingProps) => {\n  const starsOutline = [];\n  const { 'aria-label': ariaLabel, metaInfo, tabIndex, readOnly, ...restProps } = props;\n\n  let { maxRating, value } = props;\n  maxRating = typeof maxRating !== 'number' ? DEFAULT_MAX_RATING : maxRating;\n  maxRating = Math.max(1, maxRating);\n  value = Math.min(maxRating, value);\n\n  const isDecimalValue = Math.round(value) !== value;\n  for (let i = 1; i <= maxRating; i += 1) {\n    let fillValue = i <= value ? 1 : 0;\n    if (isDecimalValue && Math.ceil(value) === i) {\n      fillValue = value - Math.floor(value);\n    }\n    starsOutline.push(<RatingItem key={`star-${i}`} fill={fillValue} />);\n  }\n\n  return (\n    <StyledRating aria-label={ariaLabel} tabIndex={tabIndex} {...restProps}>\n      <StyledRatingItemsContainer>{starsOutline}</StyledRatingItemsContainer>\n      {metaInfo && <StyledRatingMetaInfo>({metaInfo})</StyledRatingMetaInfo>}{' '}\n    </StyledRating>\n  );\n};\n\nRating.defaultProps = defaultProps;\n\nexport default Rating;\n"]}
+{"version":3,"file":"Rating.js","sourceRoot":"","sources":["../../../src/components/Rating/Rating.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Icon, { registerIcon } from '../Icon';\nimport * as starIcon from '../Icon/icons/star.icon';\nimport * as starSolidIcon from '../Icon/icons/star-solid.icon';\n\nregisterIcon(starIcon, starSolidIcon);\n\nexport interface RatingProps extends BaseProps, NoChildrenProp {\n  /**\n   * Sets the rating to read only.\n   * @default false\n   */\n  readOnly?: boolean;\n  /**\n   * The maximum rating allowed. Must be an integer greater than 1.\n   * @default 5\n   */\n  maxRating?: number;\n  /** The value of the Rating. Could be a decimal or integer. */\n  value: number;\n  /** Text that is displayed in parentheses inline with the Rating stars. */\n  metaInfo?: string;\n  /** Aria label for screen readers. */\n  'aria-label'?: string;\n  /**\n   * The tabIndex to control focus.\n   * @default 0\n   */\n  tabIndex?: number;\n}\n\nconst DEFAULT_MAX_RATING = 5;\n\nconst defaultProps: Partial<RatingProps> = {\n  readOnly: false,\n  maxRating: DEFAULT_MAX_RATING,\n  tabIndex: 0\n};\n\nconst StyledRating = styled.div`\n  display: inline-block;\n  vertical-align: middle;\n`;\n\nconst StyledRatingItemsContainer = styled.div(props => {\n  const { theme } = props;\n  return css`\n    color: ${theme.components.rating.color};\n    line-height: 1;\n    vertical-align: middle;\n    display: inline-block;\n  `;\n});\n\nStyledRatingItemsContainer.defaultProps = defaultThemeProp;\n\nconst StyledPartialRatingContainer = styled.div`\n  position: relative;\n  display: inline-block;\n`;\n\ninterface StyledPartialRatingProps {\n  ratingPercentage: number;\n}\n\nexport const StyledPartialRating = styled.div<StyledPartialRatingProps>(props => {\n  const { ratingPercentage } = props;\n  return css`\n    display: inline-block;\n    position: absolute;\n    inset-inline-start: 0;\n    width: ${ratingPercentage}%;\n    overflow: hidden;\n    white-space: nowrap;\n  `;\n});\n\nconst StyledRatingMetaInfo = styled.span(props => {\n  const { theme } = props;\n  return css`\n    margin-inline-start: ${theme.base.spacing};\n  `;\n});\n\nStyledRatingMetaInfo.defaultProps = defaultThemeProp;\n\ninterface RatingItemProps {\n  fill: number;\n}\n\nconst RatingItem: FunctionComponent<RatingItemProps> = (props: RatingItemProps) => {\n  const { fill, ...restProps } = props;\n  const fillPercentage = Math.round((100 / 1) * fill);\n  return (\n    <>\n      {fillPercentage === 0 && <Icon {...restProps} name='star' />}\n      {fillPercentage === 100 && <Icon {...restProps} name='star-solid' />}\n      {fillPercentage > 0 && fillPercentage < 100 && (\n        <StyledPartialRatingContainer>\n          <Icon {...restProps} name='star' />\n          <StyledPartialRating ratingPercentage={fillPercentage}>\n            <Icon {...restProps} name='star-solid' />\n          </StyledPartialRating>\n        </StyledPartialRatingContainer>\n      )}\n    </>\n  );\n};\n\nconst Rating: FunctionComponent<RatingProps & ForwardProps> = (props: RatingProps) => {\n  const starsOutline = [];\n  const { 'aria-label': ariaLabel, metaInfo, tabIndex, readOnly, ...restProps } = props;\n\n  let { maxRating, value } = props;\n  maxRating = typeof maxRating !== 'number' ? DEFAULT_MAX_RATING : maxRating;\n  maxRating = Math.max(1, maxRating);\n  value = Math.min(maxRating, value);\n\n  const isDecimalValue = Math.round(value) !== value;\n  for (let i = 1; i <= maxRating; i += 1) {\n    let fillValue = i <= value ? 1 : 0;\n    if (isDecimalValue && Math.ceil(value) === i) {\n      fillValue = value - Math.floor(value);\n    }\n    starsOutline.push(<RatingItem key={`star-${i}`} fill={fillValue} />);\n  }\n\n  return (\n    <StyledRating aria-label={ariaLabel} tabIndex={tabIndex} {...restProps}>\n      <StyledRatingItemsContainer>{starsOutline}</StyledRatingItemsContainer>\n      {metaInfo && <StyledRatingMetaInfo>({metaInfo})</StyledRatingMetaInfo>}{' '}\n    </StyledRating>\n  );\n};\n\nRating.defaultProps = defaultProps;\n\nexport default Rating;\n"]}

package/lib/components/SearchInput/SearchInput.d.ts

@@ -1,6 +1,9 @@
 import { FunctionComponent } from 'react';
 import { ForwardProps, NoChildrenProp } from '../../types';
 import { FormControlProps } from '../FormControl';
+import { MenuItemProps } from '../Menu';
+export declare type SearchResult = Pick<MenuItemProps, 'id' | 'primary' | 'secondary' | 'href' | 'onClick'>;
+export declare type RecentSearch = Pick<MenuItemProps, 'primary' | 'href' | 'onClick'>;
 export interface SearchInputProps extends NoChildrenProp {
     /**
      * Placeholder text. The default value is a locale translation of 'Search…'
@@ -23,12 +26,16 @@ export interface SearchInputProps extends NoChildrenProp {
      * NOTE: this does not trigger an actual form submit event. It simply represents an explicit action by the user to search as opposed to onSearchChange.
      */
     onSearchSubmit?: (value: string) => void;
+    defaultFilter?: string;
+    filters?: string[];
+    onFilterChange?: (value: string) => void;
+    searchResults?: SearchResult[];
+    recentSearches?: RecentSearch[];
+    loading?: boolean;
+    advancedSearchHref?: string;
     /** Aria label for search input, used by screen readers. */
     searchInputAriaLabel?: string;
 }
-export declare const StyledSearchIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledSearchTextInput: import("styled-components").StyledComponent<import("react").FC<import("../Input").InputProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledSearchInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const SearchInput: FunctionComponent<SearchInputProps & ForwardProps>;
 export default SearchInput;
 //# sourceMappingURL=SearchInput.d.ts.map

package/lib/components/SearchInput/SearchInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAK3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAOlD,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD,iDAAiD;IACjD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,2DAA2D;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,gBAAgB,yGAsB3B,CAAC;AAIH,eAAO,MAAM,qBAAqB,oKA0BhC,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAgB5B,CAAC;AAIH,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAwEnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKlD,OAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAe9C,oBAAY,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAEpG,oBAAY,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAE/E,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD,iDAAiD;IACjD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2DAA2D;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CA2OnE,CAAC;AAEF,eAAe,WAAW,CAAC"}