@pega/cosmos-react-core 2.0.0-dev.9.2 → 2.0.0-rc.2

package/lib/components/Popover/Popover.js

@@ -2,124 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useContext, useRef, useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
-import styled, { css } from 'styled-components';
 import { useConfiguration, useConsolidatedRef, useElement, useUID } from '../../hooks';
-import { defaultThemeProp } from '../../theme';
 import { windowIsAvailable } from '../../utils';
 import { PopoverManagerContext } from './PopoverContext';
-export const StyledPopoverArrow = styled.div `
-  background-color: inherit;
-  height: 0;
-  width: 0;
-
-  ::after {
-    content: '';
-    display: block;
-    background-color: inherit;
-    height: 0.5rem;
-    width: 0.5rem;
-    transform: rotate(45deg);
-  }
-`;
-export const StyledPopover = styled.div(({ theme: { base: { 'border-radius': borderRadius, 'z-index': { popover: zIndex }, shadow: { 'low-filter': low } }, components: { card: { background, 'border-radius': cardBorderRadius } } }, offset }) => {
-    return css `
-      /*
-        Margin should never be used with Popper.
-        https://popper.js.org/docs/v2/migration-guide/#4-remove-all-css-margins
-      */
-      margin: 0 !important;
-      z-index: ${zIndex};
-      background-color: ${background};
-      border-radius: calc(${cardBorderRadius} / 2);
-      filter: ${low};
-
-      &[data-popper-reference-hidden='true'] {
-        visibility: hidden;
-        pointer-events: none;
-      }
-
-      &[data-popper-placement^='top'] {
-        > ${StyledPopoverArrow} {
-          top: calc(100% - 0.25rem);
-          margin-inline-start: -0.25rem;
-
-          ::after {
-            border-bottom-right-radius: calc(${borderRadius} / 4);
-          }
-        }
-
-        ::before {
-          content: '';
-          position: absolute;
-          height: ${offset}px;
-          bottom: -${offset}px;
-          left: 0;
-          right: 0;
-        }
-      }
-
-      &[data-popper-placement^='bottom'] {
-        > ${StyledPopoverArrow} {
-          bottom: calc(100% + 0.25rem);
-          margin-inline-start: -0.25rem;
-
-          ::after {
-            border-top-left-radius: calc(${borderRadius} / 4);
-          }
-        }
-
-        ::before {
-          content: '';
-          position: absolute;
-          height: ${offset}px;
-          top: -${offset}px;
-          left: 0;
-          right: 0;
-        }
-      }
-
-      &[data-popper-placement^='right'] {
-        > ${StyledPopoverArrow} {
-          right: calc(100% + 0.25rem);
-          margin-block-start: -0.25rem;
-
-          ::after {
-            border-bottom-left-radius: calc(${borderRadius} / 4);
-          }
-        }
-
-        ::before {
-          content: '';
-          position: absolute;
-          width: ${offset}px;
-          left: -${offset}px;
-          top: 0;
-          bottom: 0;
-        }
-      }
-
-      &[data-popper-placement^='left'] {
-        > ${StyledPopoverArrow} {
-          left: calc(100% - 0.25rem);
-          margin-block-start: -0.25rem;
-
-          ::after {
-            border-top-right-radius: calc(${borderRadius} / 4);
-          }
-        }
-
-        ::before {
-          content: '';
-          position: absolute;
-          width: ${offset}px;
-          right: -${offset}px;
-          top: 0;
-          bottom: 0;
-        }
-      }
-    `;
-});
-StyledPopover.defaultProps = defaultThemeProp;
+import { StyledPopover, StyledPopoverArrow } from './Popover.styles';
 const delays = {
     none: 0,
     short: 500,
@@ -144,15 +30,20 @@ const Popover = forwardRef(({ show = true, portal = false, target, placement, st
         },
         { name: 'hide', enabled: hideOnTargetHidden },
         { name: 'arrow', enabled: arrow, options: { element: arrowRef.current } },
+        {
+            name: 'computeStyles',
+            options: {
+                gpuAcceleration: windowIsAvailable && Number.isInteger(window.devicePixelRatio)
+            }
+        },
         ...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 +55,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 +82,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, { ...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":"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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';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useConfiguration, useConsolidatedRef, useElement, useUID } from '../../hooks';\nimport { windowIsAvailable } from '../../utils';\n\nimport { PopoverManagerContext } from './PopoverContext';\nimport { StyledPopover, StyledPopoverArrow } from './Popover.styles';\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\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        {\n          name: 'computeStyles',\n          options: {\n            gpuAcceleration: windowIsAvailable && Number.isInteger(window.devicePixelRatio)\n          }\n        },\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/Popover/Popover.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledPopoverArrow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledPopover: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    offset?: number | undefined;
+}, never>;
+//# sourceMappingURL=Popover.styles.d.ts.map

package/lib/components/Popover/Popover.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,yGAa9B,CAAC;AAEF,eAAO,MAAM,aAAa;;SA+GzB,CAAC"}

package/lib/components/Popover/Popover.styles.js

@@ -0,0 +1,116 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp } from '../../theme';
+export const StyledPopoverArrow = styled.div `
+  background-color: inherit;
+  height: 0;
+  width: 0;
+
+  ::after {
+    content: '';
+    display: block;
+    background-color: inherit;
+    height: 0.5rem;
+    width: 0.5rem;
+    transform: rotate(45deg);
+  }
+`;
+export const StyledPopover = styled.div(({ theme: { base: { 'border-radius': borderRadius, 'z-index': { popover: zIndex }, shadow: { 'low-filter': low } }, components: { card: { background, 'border-radius': cardBorderRadius } } }, offset }) => {
+    return css `
+      /*
+      Margin should never be used with Popper.
+      https://popper.js.org/docs/v2/migration-guide/#4-remove-all-css-margins
+    */
+      margin: 0 !important;
+      z-index: ${zIndex};
+      background-color: ${background};
+      border-radius: calc(${cardBorderRadius} / 2);
+      filter: ${low};
+
+      &[data-popper-reference-hidden='true'] {
+        visibility: hidden;
+        pointer-events: none;
+      }
+
+      &[data-popper-placement^='top'] {
+        > ${StyledPopoverArrow} {
+          top: calc(100% - 0.25rem);
+          margin-inline-start: -0.25rem;
+
+          ::after {
+            border-bottom-right-radius: calc(${borderRadius} / 4);
+          }
+        }
+
+        ::before {
+          content: '';
+          position: absolute;
+          height: ${offset}px;
+          bottom: -${offset}px;
+          left: 0;
+          right: 0;
+        }
+      }
+
+      &[data-popper-placement^='bottom'] {
+        > ${StyledPopoverArrow} {
+          bottom: calc(100% + 0.25rem);
+          margin-inline-start: -0.25rem;
+
+          ::after {
+            border-top-left-radius: calc(${borderRadius} / 4);
+          }
+        }
+
+        ::before {
+          content: '';
+          position: absolute;
+          height: ${offset}px;
+          top: -${offset}px;
+          left: 0;
+          right: 0;
+        }
+      }
+
+      &[data-popper-placement^='right'] {
+        > ${StyledPopoverArrow} {
+          inset-inline-end: calc(100% + 0.25rem);
+          margin-block-start: -0.25rem;
+
+          ::after {
+            border-bottom-left-radius: calc(${borderRadius} / 4);
+          }
+        }
+
+        ::before {
+          content: '';
+          position: absolute;
+          width: ${offset}px;
+          left: -${offset}px;
+          top: 0;
+          bottom: 0;
+        }
+      }
+
+      &[data-popper-placement^='left'] {
+        > ${StyledPopoverArrow} {
+          left: calc(100% - 0.25rem);
+          margin-block-start: -0.25rem;
+
+          ::after {
+            border-top-right-radius: calc(${borderRadius} / 4);
+          }
+        }
+
+        ::before {
+          content: '';
+          position: absolute;
+          width: ${offset}px;
+          right: -${offset}px;
+          top: 0;
+          bottom: 0;
+        }
+      }
+    `;
+});
+StyledPopover.defaultProps = defaultThemeProp;
+//# sourceMappingURL=Popover.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.styles.js","sourceRoot":"","sources":["../../../src/components/Popover/Popover.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\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          inset-inline-end: 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"]}

package/lib/components/Popover/PopoverManager.js

@@ -11,10 +11,10 @@ const PopoverManager = ({ children }) => {
             return { ...curr, [groupId]: id };
         });
     };
-    return (_jsx(PopoverManagerContext.Provider, Object.assign({ value: {
+    return (_jsx(PopoverManagerContext.Provider, { value: {
             checkActive,
             setActive
-        } }, { children: children }), void 0));
+        }, children: children }, void 0));
 };
 export default PopoverManager;
 //# sourceMappingURL=PopoverManager.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PopoverManager.js","sourceRoot":"","sources":["../../../src/components/Popover/PopoverManager.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgC,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,cAAc,GAA+C,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAClF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAyB,EAAE,CAAC,CAAC;IAErE,MAAM,WAAW,GAAG,CAAC,EAAU,EAAE,OAAe,EAAW,EAAE;QAC3D,OAAO,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IAClC,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,EAAU,EAAE,OAAe,EAAE,EAAE;QAChD,WAAW,CAAC,IAAI,CAAC,EAAE;YACjB,OAAO,EAAE,GAAG,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,CAAC;QACpC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,qBAAqB,CAAC,QAAQ,kBAC7B,KAAK,EAAE;YACL,WAAW;YACX,SAAS;SACV,gBAEA,QAAQ,YACsB,CAClC,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, ReactNode, useState } from 'react';\n\nimport { PopoverManagerContext } from './PopoverContext';\n\nconst PopoverManager: FunctionComponent<{ children: ReactNode }> = ({ children }) => {\n  const [popovers, setPopovers] = useState<Record<string, string>>({});\n\n  const checkActive = (id: string, groupId: string): boolean => {\n    return popovers[groupId] === id;\n  };\n\n  const setActive = (id: string, groupId: string) => {\n    setPopovers(curr => {\n      return { ...curr, [groupId]: id };\n    });\n  };\n\n  return (\n    <PopoverManagerContext.Provider\n      value={{\n        checkActive,\n        setActive\n      }}\n    >\n      {children}\n    </PopoverManagerContext.Provider>\n  );\n};\n\nexport default PopoverManager;\n"]}
+{"version":3,"file":"PopoverManager.js","sourceRoot":"","sources":["../../../src/components/Popover/PopoverManager.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgC,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,cAAc,GAA+C,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAClF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAyB,EAAE,CAAC,CAAC;IAErE,MAAM,WAAW,GAAG,CAAC,EAAU,EAAE,OAAe,EAAW,EAAE;QAC3D,OAAO,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IAClC,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,EAAU,EAAE,OAAe,EAAE,EAAE;QAChD,WAAW,CAAC,IAAI,CAAC,EAAE;YACjB,OAAO,EAAE,GAAG,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,CAAC;QACpC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,qBAAqB,CAAC,QAAQ,IAC7B,KAAK,EAAE;YACL,WAAW;YACX,SAAS;SACV,YAEA,QAAQ,WACsB,CAClC,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, ReactNode, useState } from 'react';\n\nimport { PopoverManagerContext } from './PopoverContext';\n\nconst PopoverManager: FunctionComponent<{ children: ReactNode }> = ({ children }) => {\n  const [popovers, setPopovers] = useState<Record<string, string>>({});\n\n  const checkActive = (id: string, groupId: string): boolean => {\n    return popovers[groupId] === id;\n  };\n\n  const setActive = (id: string, groupId: string) => {\n    setPopovers(curr => {\n      return { ...curr, [groupId]: id };\n    });\n  };\n\n  return (\n    <PopoverManagerContext.Provider\n      value={{\n        checkActive,\n        setActive\n      }}\n    >\n      {children}\n    </PopoverManagerContext.Provider>\n  );\n};\n\nexport default PopoverManager;\n"]}

package/lib/components/Popover/index.d.ts

@@ -3,5 +3,5 @@ export { default as PopoverManager } from './PopoverManager';
 export { PopoverManagerContext } from './PopoverContext';
 export { Delay } from './Popover';
 export { PopoverProps } from './Popover';
-export { StyledPopover } from './Popover';
+export { StyledPopover } from './Popover.styles';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Popover/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/components/Popover/index.js

@@ -1,5 +1,5 @@
 export { default } from './Popover';
 export { default as PopoverManager } from './PopoverManager';
 export { PopoverManagerContext } from './PopoverContext';
-export { StyledPopover } from './Popover';
+export { StyledPopover } from './Popover.styles';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAGzD,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { default } from './Popover';\nexport { default as PopoverManager } from './PopoverManager';\nexport { PopoverManagerContext } from './PopoverContext';\nexport { Delay } from './Popover';\nexport { PopoverProps } from './Popover';\nexport { StyledPopover } from './Popover';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAGzD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { default } from './Popover';\nexport { default as PopoverManager } from './PopoverManager';\nexport { PopoverManagerContext } from './PopoverContext';\nexport { Delay } from './Popover';\nexport { PopoverProps } from './Popover';\nexport { StyledPopover } from './Popover.styles';\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;
@@ -64,7 +64,7 @@ const Bar = forwardRef(({ value, minValue = 0, maxValue = 100, message, placemen
         else
             percentage = (1 - (value - minValue) / (maxValue - minValue)) * -100;
     }
-    return (_jsx(StyledProgressBar, Object.assign({ ref: ref, role: 'progressbar', "aria-valuemin": minValue, "aria-valuemax": maxValue, "aria-valuenow": value, placement: placement, determinate: typeof value === 'number', style: { ...style, '--progress': percentage ? `${percentage}%` : '' } }, restProps), void 0));
+    return (_jsx(StyledProgressBar, { ref: ref, role: 'progressbar', "aria-valuemin": minValue, "aria-valuemax": maxValue, "aria-valuenow": value, placement: placement, determinate: typeof value === 'number', style: { ...style, '--progress': percentage ? `${percentage}%` : '' }, ...restProps }, void 0));
 });
 export default Bar;
 //# sourceMappingURL=Bar.js.map

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,IAChB,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,KAClF,SAAS,WACb,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.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { ForwardProps } from '../../types';
 import { ProgressProps } from './Progress.types';
-export declare const StyledProgressEllipsis: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ProgressProps, never>;
+export declare const StyledProgressEllipsis: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<ProgressProps, "placement">, never>;
 declare const Ellipsis: FC<ProgressProps & ForwardProps>;
 export default Ellipsis;
 //# sourceMappingURL=Ellipsis.d.ts.map

package/lib/components/Progress/Ellipsis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Ellipsis.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Ellipsis.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,eAAO,MAAM,sBAAsB,oHAoEjC,CAAC;AAIH,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CAe9C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Ellipsis.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Ellipsis.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,eAAO,MAAM,sBAAsB,uIAsElC,CAAC;AAIF,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CAe9C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/Progress/Ellipsis.js

@@ -4,78 +4,76 @@ import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
 export const StyledProgressEllipsis = styled.div(({ theme, placement }) => {
     return css `
-    line-height: 1;
-    display: ${placement === 'inline' ? 'inline-flex' : 'block'};
+      line-height: 1;
+      display: ${placement === 'inline' ? 'inline-flex' : 'block'};
 
-    @keyframes LoadingEllipsis {
-      0% {
-        transform: scale(0);
-        opacity: 0;
-      }
+      @keyframes LoadingEllipsis {
+        0% {
+          transform: scale(0);
+          opacity: 0;
+        }
 
-      50% {
-        transform: scale(1);
-        opacity: 1;
-      }
+        50% {
+          transform: scale(1);
+          opacity: 1;
+        }
 
-      100% {
-        transform: scale(0);
-        opacity: 0;
+        100% {
+          transform: scale(0);
+          opacity: 0;
+        }
       }
-    }
 
-    > span {
-      display: flex;
-      mix-blend-mode: multiply;
+      > span {
+        display: flex;
+        mix-blend-mode: multiply;
 
-      ${placement === 'inline' &&
+        ${placement === 'inline' &&
         css `
-        display: inline-flex;
-        margin-left: 0.1875rem;
-      `}
-    }
+          display: inline-flex;
+          margin-left: 0.1875rem;
+        `}
+      }
 
-    > span span {
-      margin: 0 0.3125rem;
-      background: ${theme.components.progress['progress-color']};
-      border-radius: 50%;
-      animation: LoadingEllipsis calc(4 * ${theme.base.animation.speed}) infinite;
+      > span span {
+        margin: 0 0.3125rem;
+        background: ${theme.components.progress['progress-color']};
+        border-radius: 50%;
+        animation: LoadingEllipsis calc(4 * ${theme.base.animation.speed}) infinite;
 
-      ${placement === 'global' &&
+        ${placement === 'global' &&
         css `
-        width: 1.25rem;
-        height: 1.25rem;
-      `}
+          width: 1.25rem;
+          height: 1.25rem;
+        `}
 
-      ${placement === 'local' &&
+        ${placement === 'local' &&
         css `
-        width: 0.625rem;
-        height: 0.625rem;
-      `}
+          width: 0.625rem;
+          height: 0.625rem;
+        `}
 
       ${placement === 'inline' &&
         css `
-        width: 0.1875rem;
-        height: 0.1875rem;
-        margin: 0 0.1875rem;
-        animation-duration: calc(4 * ${theme.base.animation.speed});
-      `}
+          width: 0.1875rem;
+          height: 0.1875rem;
+          margin: 0 0.1875rem;
+          animation-duration: calc(4 * ${theme.base.animation.speed});
+        `}
 
       &:nth-child(2) {
-        animation-delay: 0.1667s;
-      }
+          animation-delay: 0.1667s;
+        }
 
-      &:nth-child(3) {
-        animation-delay: ${0.1667 * 2}s;
+        &:nth-child(3) {
+          animation-delay: ${0.1667 * 2}s;
+        }
       }
-    }
-  `;
+    `;
 });
 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, { 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,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"]}