@equinor/eds-core-react 0.16.1 → 0.17.0-dev.20220209

package/dist/esm/components/Paper/Paper.js

@@ -6,13 +6,17 @@ import { jsx } from 'react/jsx-runtime';
 const StyledPaper = styled.div.withConfig({
   displayName: "Paper__StyledPaper",
   componentId: "sc-6ncnv9-0"
-})(["min-width:", ";max-width:", ";background:", ";box-shadow:", ";"], paper.minWidth, paper.maxWidth, paper.background, ({
-  elevation
-}) => elevation);
-const Paper = /*#__PURE__*/forwardRef(function Paper({
-  elevation: elevation$1,
-  ...rest
-}, ref) {
+})(["min-width:", ";max-width:", ";background:", ";box-shadow:", ";"], paper.minWidth, paper.maxWidth, paper.background, _ref => {
+  let {
+    elevation
+  } = _ref;
+  return elevation;
+});
+const Paper = /*#__PURE__*/forwardRef(function Paper(_ref2, ref) {
+  let {
+    elevation: elevation$1,
+    ...rest
+  } = _ref2;
   const props = { ...rest,
     elevation: elevation[elevation$1] || 'none'
   };

package/dist/esm/components/Popover/Popover.js

@@ -1,47 +1,61 @@
-import { forwardRef, useState } from 'react';
-import styled, { css } from 'styled-components';
-import { Icon } from '../Icon/index.js';
-import { close } from '@equinor/eds-icons';
+import { forwardRef, useState, useEffect } from 'react';
+import styled, { css, ThemeProvider } from 'styled-components';
+import { typographyTemplate, bordersTemplate, useCombinedRefs, useOutsideClick, useGlobalKeyPress, usePopper, useToken } from '@equinor/eds-utils';
 import { popover } from './Popover.tokens.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useCombinedRefs } from '../../hooks/useCombinedRefs.js';
-import { useOutsideClick } from '../../hooks/useOutsideClick.js';
-import { useGlobalKeyPress } from '../../hooks/useGlobalKeyPress.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Paper } from '../Paper/Paper.js';
-import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
-import { bordersTemplate } from '../../utils/templates/borders.js';
-import { Button } from '../Button/Button.js';
-import { usePopper } from '../../hooks/usePopper.js';
+import { useEds } from '../EdsProvider/eds.context.js';
 
 const PopoverPaper = styled(Paper).withConfig({
   displayName: "Popover__PopoverPaper",
   componentId: "sc-b7p1is-0"
-})(["", " ", " ", " display:grid;grid-gap:", ";grid-auto-columns:auto;align-items:center;align-content:start;background:", ";width:max-content;max-height:", ";max-width:", ";min-height:", ";", " z-index:300;.arrow{z-index:-1;width:", ";height:", ";}&[data-popper-placement^='top'] > .arrow{bottom:", ";.arrowSvg{transform:rotate(-90deg);}}&[data-popper-placement^='bottom'] > .arrow{top:", ";.arrowSvg{transform:rotate(90deg);}}&[data-popper-placement^='left'] > .arrow{right:", ";.arrowSvg{transform:rotate(-180deg);}}&[data-popper-placement^='right'] > .arrow{left:", ";}"], ({
-  open
-}) => css({
-  visibility: open ? null : 'hidden'
-}), typographyTemplate(popover.typography), spacingsTemplate(popover.spacings), popover.spacings.bottom, popover.background, popover.maxHeight, popover.maxWidth, popover.minHeight, bordersTemplate(popover.border), popover.entities.arrow.width, popover.entities.arrow.height, popover.entities.arrow.spacings.bottom, popover.entities.arrow.spacings.top, popover.entities.arrow.spacings.right, popover.entities.arrow.spacings.left);
-const StyledCloseButton = styled(Button).withConfig({
-  displayName: "Popover__StyledCloseButton",
-  componentId: "sc-b7p1is-1"
-})(["position:absolute;top:", ";right:", ";height:", ";width:", ";&:after{height:", ";}"], popover.entities.closeButton.spacings.top, popover.spacings.right, popover.entities.closeButton.height, popover.entities.closeButton.width, popover.entities.closeButton.height);
+})(_ref => {
+  let {
+    theme,
+    open
+  } = _ref;
+  return css(["", " ", " display:grid;grid-auto-columns:auto;align-items:center;align-content:start;background:", ";width:max-content;max-height:", ";max-width:", ";", " z-index:300;.arrow{z-index:-1;width:", ";height:", ";}&[data-popper-placement^='top'] > .arrow{bottom:", ";.arrowSvg{transform:rotate(-90deg);}}&[data-popper-placement^='bottom'] > .arrow{top:", ";.arrowSvg{transform:rotate(90deg);}}&[data-popper-placement^='left'] > .arrow{right:", ";.arrowSvg{transform:rotate(-180deg);}}&[data-popper-placement^='right'] > .arrow{left:", ";}"], {
+    visibility: open ? null : 'hidden'
+  }, typographyTemplate(theme.typography), theme.background, theme.maxHeight, theme.maxWidth, bordersTemplate(theme.border), theme.entities.arrow.width, theme.entities.arrow.height, theme.entities.arrow.spacings.bottom, theme.entities.arrow.spacings.top, theme.entities.arrow.spacings.right, theme.entities.arrow.spacings.left);
+});
 const ArrowWrapper = styled.div.withConfig({
   displayName: "Popover__ArrowWrapper",
+  componentId: "sc-b7p1is-1"
+})(_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return css(["&,&::before{position:absolute;width:", ";height:", ";z-index:-1;}&::before{content:'';}"], theme.entities.arrow.width, theme.entities.arrow.height);
+});
+const InnerWrapper = styled.div.withConfig({
+  displayName: "Popover__InnerWrapper",
   componentId: "sc-b7p1is-2"
-})(["&,&::before{position:absolute;width:", ";height:", ";z-index:-1;}&::before{content:'';}"], popover.entities.arrow.width, popover.entities.arrow.height);
+})(_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return css(["display:grid;grid-gap:", ";"], theme.spacings.bottom);
+});
 const PopoverArrow = styled.svg.withConfig({
   displayName: "Popover__PopoverArrow",
   componentId: "sc-b7p1is-3"
-})(["width:", ";height:", ";position:absolute;fill:", ";filter:drop-shadow(-4px 0px 2px rgba(0,0,0,0.2));"], popover.entities.arrow.width, popover.entities.arrow.height, popover.background);
-const Popover = /*#__PURE__*/forwardRef(function Popover({
-  children,
-  placement = 'bottom',
-  anchorEl,
-  open,
-  onClose,
-  ...rest
-}, ref) {
+})(_ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return css(["width:", ";height:", ";position:absolute;fill:", ";filter:drop-shadow(-4px 0px 2px rgba(0,0,0,0.2));"], theme.entities.arrow.width, theme.entities.arrow.height, theme.background);
+});
+const Popover = /*#__PURE__*/forwardRef(function Popover(_ref5, ref) {
+  let {
+    children,
+    placement = 'bottom',
+    anchorEl,
+    open,
+    onClose,
+    ...rest
+  } = _ref5;
   const [popperEl, setPopperEl] = useState(null);
+  const [storedAnchorEl, setStoredAnchorEl] = useState(null);
   const [arrowRef, setArrowRef] = useState(null);
   const popoverRef = useCombinedRefs(ref, setPopperEl);
   useOutsideClick(popperEl, e => {
@@ -54,42 +68,47 @@ const Popover = /*#__PURE__*/forwardRef(function Popover({
       onClose();
     }
   });
+  useEffect(() => {
+    open ? setStoredAnchorEl(anchorEl) : setStoredAnchorEl(null);
+    return () => setStoredAnchorEl(null);
+  }, [anchorEl, open]);
   const {
     styles,
     attributes
-  } = usePopper(anchorEl, popperEl, arrowRef, placement);
+  } = usePopper(storedAnchorEl, popperEl, arrowRef, placement);
   const props = {
     open,
     ...rest,
     ...attributes.popper
   };
-  return /*#__PURE__*/jsxs(PopoverPaper, {
-    ref: popoverRef,
-    elevation: "overlay",
-    style: styles.popper,
-    "data-testid": "popover",
-    ...props,
-    children: [/*#__PURE__*/jsx(ArrowWrapper, {
-      ref: setArrowRef,
-      style: styles.arrow,
-      className: "arrow",
-      children: /*#__PURE__*/jsx(PopoverArrow, {
-        className: "arrowSvg",
-        children: /*#__PURE__*/jsx("path", {
-          d: "M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z"
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, popover);
+  return /*#__PURE__*/jsx(ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxs(PopoverPaper, {
+      ref: popoverRef,
+      elevation: "overlay",
+      style: styles.popper,
+      "data-testid": "popover",
+      ...props,
+      children: [/*#__PURE__*/jsx(ArrowWrapper, {
+        ref: setArrowRef,
+        style: styles.arrow,
+        className: "arrow",
+        children: /*#__PURE__*/jsx(PopoverArrow, {
+          className: "arrowSvg",
+          children: /*#__PURE__*/jsx("path", {
+            d: "M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z"
+          })
         })
-      })
-    }), children, /*#__PURE__*/jsx(StyledCloseButton, {
-      onClick: onClose,
-      variant: "ghost_icon",
-      "data-testid": "popover-close",
-      "aria-label": "Close popover",
-      children: /*#__PURE__*/jsx(Icon, {
-        name: "close",
-        data: close,
-        size: 24
-      })
-    })]
+      }), /*#__PURE__*/jsx(InnerWrapper, {
+        children: children
+      })]
+    })
   });
 });
 

package/dist/esm/components/Popover/Popover.tokens.js

@@ -15,10 +15,8 @@ const {
   },
   spacings: {
     comfortable: {
-      x_large: spacingXlarge,
       medium: spacingMedium,
-      small: spacingSmall,
-      x_small: spacingXsmall
+      small: spacingSmall
     }
   },
   shape: {
@@ -30,7 +28,6 @@ const {
 const popover = {
   background,
   typography: header,
-  minHeight: '48px',
   maxWidth: '560px',
   maxHeight: '80vh',
   entities: {
@@ -45,16 +42,9 @@ const popover = {
         right: '-5px'
       }
     },
-    closeButton: {
-      width: spacingXlarge,
-      height: spacingXlarge,
-      spacings: {
-        top: spacingSmall
-      }
-    },
     title: {
       spacings: {
-        top: spacingXsmall
+        top: '12px'
       }
     }
   },
@@ -67,6 +57,9 @@ const popover = {
   border: {
     type: 'border',
     radius: borderRadius
+  },
+  modes: {
+    compact: {}
   }
 };
 

package/dist/esm/components/Popover/PopoverActions.js

@@ -0,0 +1,28 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledPopoverActions = styled.div.withConfig({
+  displayName: "PopoverActions__StyledPopoverActions",
+  componentId: "sc-1dkrhw6-0"
+})(_ref => {
+  let {
+    theme
+  } = _ref;
+  return css(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;padding:0 ", " 0 ", ";:last-child{padding-bottom:", ";}:first-child{padding-top:", ";}"], theme.spacings.right, theme.spacings.left, theme.spacings.bottom, theme.spacings.top);
+});
+const PopoverActions = /*#__PURE__*/forwardRef(function PopoverActions(_ref2, ref) {
+  let {
+    children,
+    ...rest
+  } = _ref2;
+  const props = {
+    ref,
+    ...rest
+  };
+  return /*#__PURE__*/jsx(StyledPopoverActions, { ...props,
+    children: children
+  });
+});
+
+export { PopoverActions };

package/dist/esm/components/Popover/PopoverContent.js

@@ -1,15 +1,21 @@
 import { forwardRef } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
 const ContentWrapper = styled.div.withConfig({
   displayName: "PopoverContent__ContentWrapper",
   componentId: "sc-vwww9h-0"
-})(["overflow:hidden;"]);
-const PopoverContent = /*#__PURE__*/forwardRef(function PopoverContent({
-  children,
-  ...rest
-}, ref) {
+})(_ref => {
+  let {
+    theme
+  } = _ref;
+  return css(["overflow:hidden;padding:0 ", " 0 ", ";:last-child{padding-bottom:", ";}:first-child{padding-top:", ";}"], theme.spacings.right, theme.spacings.left, theme.spacings.bottom, theme.spacings.top);
+});
+const PopoverContent = /*#__PURE__*/forwardRef(function PopoverContent(_ref2, ref) {
+  let {
+    children,
+    ...rest
+  } = _ref2;
   const props = { ...rest,
     ref
   };

package/dist/esm/components/Popover/PopoverHeader.js

@@ -0,0 +1,36 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Divider } from '../Divider/Divider.js';
+
+const StyledPopoverHeader = styled.div.withConfig({
+  displayName: "PopoverHeader__StyledPopoverHeader",
+  componentId: "sc-ibcx7p-0"
+})(_ref => {
+  let {
+    theme
+  } = _ref;
+  return css(["display:flex;justify-content:space-between;align-items:center;padding:", " ", " 0 ", ";"], theme.entities.title.spacings.top, theme.spacings.right, theme.spacings.left);
+});
+const StyledDivider = styled(Divider).withConfig({
+  displayName: "PopoverHeader__StyledDivider",
+  componentId: "sc-ibcx7p-1"
+})(["margin-bottom:0;"]);
+const PopoverHeader = /*#__PURE__*/forwardRef(function PopoverHeader(_ref2, ref) {
+  let {
+    children,
+    ...rest
+  } = _ref2;
+  const props = { ...rest,
+    ref
+  };
+  return /*#__PURE__*/jsxs("div", { ...props,
+    children: [/*#__PURE__*/jsx(StyledPopoverHeader, {
+      children: children
+    }), /*#__PURE__*/jsx(StyledDivider, {
+      variant: "small"
+    })]
+  });
+});
+
+export { PopoverHeader };

package/dist/esm/components/Popover/PopoverTitle.js

@@ -1,30 +1,26 @@
 import { forwardRef } from 'react';
-import styled from 'styled-components';
-import { popover } from './Popover.tokens.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Divider } from '../Divider/Divider.js';
+import styled, { css } from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
 
 const StyledPopoverTitle = styled.div.withConfig({
   displayName: "PopoverTitle__StyledPopoverTitle",
   componentId: "sc-1ben8su-0"
-})(["margin-right:", ";max-width:calc(", " - ", ");overflow:hidden;margin-top:-", ";"], popover.entities.closeButton.width, popover.maxWidth, popover.entities.closeButton.width, popover.entities.title.spacings.top);
-const StyledDivider = styled(Divider).withConfig({
-  displayName: "PopoverTitle__StyledDivider",
-  componentId: "sc-1ben8su-1"
-})(["margin-left:-", ";margin-right:-", ";margin-bottom:0;width:auto;max-width:", ";"], popover.spacings.left, popover.spacings.right, popover.maxWidth);
-const PopoverTitle = /*#__PURE__*/forwardRef(function PopoverTitle({
-  children,
-  ...rest
-}, ref) {
+})(_ref => {
+  let {
+    theme
+  } = _ref;
+  return css(["max-width:", ";margin-right:", ";overflow:hidden;"], theme.maxWidth, theme.spacings.right);
+});
+const PopoverTitle = /*#__PURE__*/forwardRef(function PopoverTitle(_ref2, ref) {
+  let {
+    children,
+    ...rest
+  } = _ref2;
   const props = { ...rest,
     ref
   };
-  return /*#__PURE__*/jsxs("div", { ...props,
-    children: [/*#__PURE__*/jsx(StyledPopoverTitle, {
-      children: children
-    }), /*#__PURE__*/jsx(StyledDivider, {
-      variant: "small"
-    })]
+  return /*#__PURE__*/jsx(StyledPopoverTitle, { ...props,
+    children: children
   });
 });
 

package/dist/esm/components/Popover/index.js

@@ -1,11 +1,17 @@
 import { Popover as Popover$1 } from './Popover.js';
 import { PopoverTitle } from './PopoverTitle.js';
 import { PopoverContent } from './PopoverContent.js';
+import { PopoverHeader } from './PopoverHeader.js';
+import { PopoverActions } from './PopoverActions.js';
 
 const Popover = Popover$1;
 Popover.Title = PopoverTitle;
 Popover.Content = PopoverContent;
+Popover.Header = PopoverHeader;
+Popover.Actions = PopoverActions;
 Popover.Title.displayName = 'Popover.Title';
 Popover.Content.displayName = 'Popover.Content';
+Popover.Header.displayName = 'Popover.Header';
+Popover.Actions.displayName = 'Popover.Actions';
 
 export { Popover };

package/dist/esm/components/Progress/Circular/CircularProgress.js

@@ -7,9 +7,12 @@ const indeterminate = keyframes(["100%{transform:rotate(360deg);}"]);
 const Svg = styled.svg.withConfig({
   displayName: "CircularProgress__Svg",
   componentId: "sc-hib054-0"
-})(["display:inline-block;", ";"], ({
-  variant
-}) => variant === 'indeterminate' ? css(["animation:", " 1.4s linear infinite;"], indeterminate) : css(["transform:rotate(-90deg);"]));
+})(["display:inline-block;", ";"], _ref => {
+  let {
+    variant
+  } = _ref;
+  return variant === 'indeterminate' ? css(["animation:", " 1.4s linear infinite;"], indeterminate) : css(["transform:rotate(-90deg);"]);
+});
 const TrackCircle = styled.circle.withConfig({
   displayName: "CircularProgress__TrackCircle",
   componentId: "sc-hib054-1"
@@ -34,13 +37,14 @@ const getToken = color => {
   };
 };
 
-const CircularProgress = /*#__PURE__*/forwardRef(function CircularProgress({
-  variant = 'indeterminate',
-  value = null,
-  size = 48,
-  color = 'primary',
-  ...rest
-}, ref) {
+const CircularProgress = /*#__PURE__*/forwardRef(function CircularProgress(_ref2, ref) {
+  let {
+    variant = 'indeterminate',
+    value = null,
+    size = 48,
+    color = 'primary',
+    ...rest
+  } = _ref2;
   const thickness = 4;
   const progress = Math.round(value);
   const trackStyle = {};

package/dist/esm/components/Progress/Dots/DotProgress.js

@@ -7,9 +7,12 @@ const opacity = keyframes(["0%{opacity:1;}100%{opacity:0.5;}"]);
 const Svg = styled.svg.withConfig({
   displayName: "DotProgress__Svg",
   componentId: "sc-1s6o2q7-0"
-})(["fill:", ";circle{&:nth-child(1){animation:", " 1s ease infinite;}&:nth-child(2){animation:", " 1s ease 0.2s infinite;}&:nth-child(3){animation:", " 1s ease 0.4s infinite;}}"], ({
-  color
-}) => color, opacity, opacity, opacity);
+})(["fill:", ";circle{&:nth-child(1){animation:", " 1s ease infinite;}&:nth-child(2){animation:", " 1s ease 0.2s infinite;}&:nth-child(3){animation:", " 1s ease 0.4s infinite;}}"], _ref => {
+  let {
+    color
+  } = _ref;
+  return color;
+}, opacity, opacity, opacity);
 
 const getColor = color => {
   if (DotProgress_tokens[color]) {
@@ -19,11 +22,12 @@ const getColor = color => {
   return color;
 };
 
-const DotProgress = /*#__PURE__*/forwardRef(function DotProgress({
-  color = 'neutral',
-  size = 32,
-  ...rest
-}, ref) {
+const DotProgress = /*#__PURE__*/forwardRef(function DotProgress(_ref2, ref) {
+  let {
+    color = 'neutral',
+    size = 32,
+    ...rest
+  } = _ref2;
   const props = { ...rest,
     color: getColor(color),
     ref

package/dist/esm/components/Progress/Linear/LinearProgress.js

@@ -16,11 +16,12 @@ const IndeterminateProgressBar = styled.div.withConfig({
   displayName: "LinearProgress__IndeterminateProgressBar",
   componentId: "sc-5orxpi-2"
 })(["width:75%;border-radius:50px;position:absolute;left:0;bottom:0;top:0;transition:transform 0.2s linear;transform-origin:left;background-color:", ";animation:", " 1.5s cubic-bezier(0.165,0.84,0.44,1) 1s infinite;"], primary.entities.progress.background, indeterminate);
-const LinearProgress = /*#__PURE__*/forwardRef(function LinearProgress({
-  variant = 'indeterminate',
-  value = null,
-  ...rest
-}, ref) {
+const LinearProgress = /*#__PURE__*/forwardRef(function LinearProgress(_ref, ref) {
+  let {
+    variant = 'indeterminate',
+    value = null,
+    ...rest
+  } = _ref;
   const props = { ...rest,
     ref
   };

package/dist/esm/components/Progress/Star/StarProgress.js

@@ -8,16 +8,20 @@ const determinate = keyframes(["0%{opacity:0;}10%{opacity:0.05;}20%{opacity:0.2;
 const Svg = styled.svg.withConfig({
   displayName: "StarProgress__Svg",
   componentId: "sc-c0byj9-0"
-})(["fill:", ";", ""], token.background, ({
-  variant,
-  progress
-}) => variant === 'indeterminate' ? css(["path{&:nth-child(1){animation:", " 1.3s linear infinite;}&:nth-child(2){animation:", " 1.3s linear 0.3s infinite;}&:nth-child(3){animation:", " 1.3s linear 0.4s infinite;}&:nth-child(4){animation:", " 1.3s linear 0.6s infinite;}&:nth-child(5){animation:", " 1.3s linear 0.8s infinite;}&:nth-child(6){animation:", " 1.3s linear 1s infinite;}}"], indeterminate, indeterminate, indeterminate, indeterminate, indeterminate, indeterminate) : css(["path{animation:", " 1.3s linear;&:nth-child(6){animation-play-state:", ";}&:nth-child(5){animation-play-state:", ";}&:nth-child(4){animation-play-state:", ";}&:nth-child(3){animation-play-state:", ";}&:nth-child(2){animation-play-state:", ";}&:nth-child(1){animation-play-state:", ";}}"], determinate, progress > 90 ? 'running' : 'paused', progress > 80 ? 'running' : 'paused', progress > 60 ? 'running' : 'paused', progress > 40 ? 'running' : 'paused', progress > 20 ? 'running' : 'paused', progress <= 20 ? 'running' : 'paused'));
-const StarProgress = /*#__PURE__*/forwardRef(function StarProgress({
-  variant = 'indeterminate',
-  value = null,
-  size = 48,
-  ...rest
-}, ref) {
+})(["fill:", ";", ""], token.background, _ref => {
+  let {
+    variant,
+    progress
+  } = _ref;
+  return variant === 'indeterminate' ? css(["path{&:nth-child(1){animation:", " 1.3s linear infinite;}&:nth-child(2){animation:", " 1.3s linear 0.3s infinite;}&:nth-child(3){animation:", " 1.3s linear 0.4s infinite;}&:nth-child(4){animation:", " 1.3s linear 0.6s infinite;}&:nth-child(5){animation:", " 1.3s linear 0.8s infinite;}&:nth-child(6){animation:", " 1.3s linear 1s infinite;}}"], indeterminate, indeterminate, indeterminate, indeterminate, indeterminate, indeterminate) : css(["path{animation:", " 1.3s linear;&:nth-child(6){animation-play-state:", ";}&:nth-child(5){animation-play-state:", ";}&:nth-child(4){animation-play-state:", ";}&:nth-child(3){animation-play-state:", ";}&:nth-child(2){animation-play-state:", ";}&:nth-child(1){animation-play-state:", ";}}"], determinate, progress > 90 ? 'running' : 'paused', progress > 80 ? 'running' : 'paused', progress > 60 ? 'running' : 'paused', progress > 40 ? 'running' : 'paused', progress > 20 ? 'running' : 'paused', progress <= 20 ? 'running' : 'paused');
+});
+const StarProgress = /*#__PURE__*/forwardRef(function StarProgress(_ref2, ref) {
+  let {
+    variant = 'indeterminate',
+    value = null,
+    size = 48,
+    ...rest
+  } = _ref2;
   const progress = Math.round(value);
   const height = size * 1.2;
   const width = size;