@ornikar/kitt-universal 7.1.0 → 7.3.0

package/dist/index-node-14.17.cjs.web.css

@@ -2,6 +2,6 @@
 .kitt-u_InputTextContainer_i1encr9g{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;}.kitt-u_InputTextContainer_i1encr9g > [data-focusvisible-polyfill]{outline:none;}.kitt-u_InputTextContainer_i1encr9g > *::-ms-clear,.kitt-u_InputTextContainer_i1encr9g > *::-ms-reveal{display:none;}.kitt-u_InputTextContainer_i1encr9g,.kitt-u_InputTextContainer_i1encr9g > *{cursor:var(--i1encr9g-0);}.kitt-u_InputTextContainer_i1encr9g > *{-webkit-transition:var(--i1encr9g-1);transition:var(--i1encr9g-1);}.kitt-u_InputTextContainer_i1encr9g:hover > *,.kitt-hover .kitt-u_InputTextContainer_i1encr9g > *{border-color:var(--i1encr9g-2);}.kitt-u_InputTextContainer_i1encr9g:focus > *,.kitt-u_InputTextContainer_i1encr9g > *:focus,.kitt-focus .kitt-u_InputTextContainer_i1encr9g > *{border-color:var(--i1encr9g-3);}
 .kitt-u_StyledSpinningIconContainer_ssn8o83{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}.kitt-u_StyledSpinningIconContainer_ssn8o83 > svg{-webkit-animation:spin-kitt-u_StyledSpinningIconContainer_ssn8o83 1.1s infinite linear;animation:spin-kitt-u_StyledSpinningIconContainer_ssn8o83 1.1s infinite linear;}@-webkit-keyframes spin-kitt-u_StyledSpinningIconContainer_ssn8o83{0%{-webkit-transform:rotate(-1deg);-ms-transform:rotate(-1deg);transform:rotate(-1deg);}100%{-webkit-transform:rotate(359deg);-ms-transform:rotate(359deg);transform:rotate(359deg);}}@keyframes spin-kitt-u_StyledSpinningIconContainer_ssn8o83{0%{-webkit-transform:rotate(-1deg);-ms-transform:rotate(-1deg);transform:rotate(-1deg);}100%{-webkit-transform:rotate(359deg);-ms-transform:rotate(359deg);transform:rotate(359deg);}}
 @media (hover:none) and (pointer:coarse){.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:hover,.kitt-hover .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-0));-ms-transform:scale(var(--p1nlccvg-0));transform:scale(var(--p1nlccvg-0));}}@media (min-width:768px){.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:hover,.kitt-hover .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-2));-ms-transform:scale(var(--p1nlccvg-2));transform:scale(var(--p1nlccvg-2));}}.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:active,.kitt-active .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-3));-ms-transform:scale(var(--p1nlccvg-3));transform:scale(var(--p1nlccvg-3));}.kitt-u_PressableIconButtonWebWrapper_p1nlccvg,.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > [data-focusvisible-polyfill]{outline:none;}.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:hover,.kitt-hover .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *,.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:focus,.kitt-focus .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *,.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > [data-focusvisible-polyfill],.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:active,.kitt-active .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *{background-color:var(--p1nlccvg-4);}
-.kitt-u_PageLoaderContainer_ptkwz2j{width:60px;height:60px;-webkit-transform:scale(-1) rotate(90deg);-ms-transform:scale(-1) rotate(90deg);transform:scale(-1) rotate(90deg);}@-webkit-keyframes PageLoaderInit-kitt-u_PageLoaderContainer_ptkwz2j{0%{stroke-dashoffset:169.64px;}100%{stroke-dashoffset:0;}}@keyframes PageLoaderInit-kitt-u_PageLoaderContainer_ptkwz2j{0%{stroke-dashoffset:169.64px;}100%{stroke-dashoffset:0;}}@-webkit-keyframes PageLoaderOffset-kitt-u_PageLoaderContainer_ptkwz2j{0%{stroke-dashoffset:169.64px;}100%{stroke-dashoffset:34px;}}@keyframes PageLoaderOffset-kitt-u_PageLoaderContainer_ptkwz2j{0%{stroke-dashoffset:169.64px;}100%{stroke-dashoffset:34px;}}@-webkit-keyframes PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}.kitt-u_PageLoaderContainer_ptkwz2j circle,.kitt-u_PageLoaderContainer_ptkwz2j g{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;}.kitt-u_PageLoaderContainer_ptkwz2j circle{stroke-width:3px;stroke-dasharray:169.64px;stroke-dashoffset:169.64px;stroke-linecap:round;}.kitt-u_PageLoaderContainer_ptkwz2j g[data-large-loader='base'] circle{stroke:var(--ptkwz2j-0);-webkit-animation:PageLoaderInit-kitt-u_PageLoaderContainer_ptkwz2j 1s cubic-bezier(0.39,0.575,0.565,1) 0.5s forwards;animation:PageLoaderInit-kitt-u_PageLoaderContainer_ptkwz2j 1s cubic-bezier(0.39,0.575,0.565,1) 0.5s forwards;}.kitt-u_PageLoaderContainer_ptkwz2j g[data-large-loader='fill']{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-animation:PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j 1.8s linear 0.5s infinite;animation:PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j 1.8s linear 0.5s infinite;}.kitt-u_PageLoaderContainer_ptkwz2j g[data-large-loader='fill'] circle{stroke:var(--ptkwz2j-1);-webkit-animation:PageLoaderOffset-kitt-u_PageLoaderContainer_ptkwz2j 1.8s cubic-bezier(0.39,0.575,0.565,1) 0.5s infinite alternate,PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j 2.16s linear 0.5s infinite;animation:PageLoaderOffset-kitt-u_PageLoaderContainer_ptkwz2j 1.8s cubic-bezier(0.39,0.575,0.565,1) 0.5s infinite alternate,PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j 2.16s linear 0.5s infinite;}
+.kitt-u_PageLoaderContainer_ptkwz2j{width:var(--ptkwz2j-3);height:var(--ptkwz2j-3);-webkit-transform:scale(-1) rotate(90deg);-ms-transform:scale(-1) rotate(90deg);transform:scale(-1) rotate(90deg);}@-webkit-keyframes PageLoaderInit-kitt-u_PageLoaderContainer_ptkwz2j{0%{stroke-dashoffset:var(--ptkwz2j-0);}100%{stroke-dashoffset:0;}}@keyframes PageLoaderInit-kitt-u_PageLoaderContainer_ptkwz2j{0%{stroke-dashoffset:var(--ptkwz2j-0);}100%{stroke-dashoffset:0;}}@-webkit-keyframes PageLoaderOffset-kitt-u_PageLoaderContainer_ptkwz2j{0%{stroke-dashoffset:var(--ptkwz2j-0);}100%{stroke-dashoffset:var(--ptkwz2j-2);}}@keyframes PageLoaderOffset-kitt-u_PageLoaderContainer_ptkwz2j{0%{stroke-dashoffset:var(--ptkwz2j-0);}100%{stroke-dashoffset:var(--ptkwz2j-2);}}@-webkit-keyframes PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}.kitt-u_PageLoaderContainer_ptkwz2j circle,.kitt-u_PageLoaderContainer_ptkwz2j g{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;}.kitt-u_PageLoaderContainer_ptkwz2j circle{stroke-width:var(--ptkwz2j-5);stroke-dasharray:var(--ptkwz2j-0);stroke-dashoffset:var(--ptkwz2j-0);stroke-linecap:round;}.kitt-u_PageLoaderContainer_ptkwz2j g[data-large-loader='base'] circle{stroke:var(--ptkwz2j-8);-webkit-animation:var(--ptkwz2j-9);animation:var(--ptkwz2j-9);-webkit-animation-name:PageLoaderInit-kitt-u_PageLoaderContainer_ptkwz2j;animation-name:PageLoaderInit-kitt-u_PageLoaderContainer_ptkwz2j;}.kitt-u_PageLoaderContainer_ptkwz2j g[data-large-loader='fill']{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-animation:var(--ptkwz2j-10);animation:var(--ptkwz2j-10);-webkit-animation-name:PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j;animation-name:PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j;}.kitt-u_PageLoaderContainer_ptkwz2j g[data-large-loader='fill'] circle{stroke:var(--ptkwz2j-11);-webkit-animation:var(--ptkwz2j-12);animation:var(--ptkwz2j-12);-webkit-animation-name:PageLoaderOffset-kitt-u_PageLoaderContainer_ptkwz2j,PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j;animation-name:PageLoaderOffset-kitt-u_PageLoaderContainer_ptkwz2j,PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j;}
 .kitt-u_StyledSkeleton_sc3upcl{background-color:var(--sc3upcl-0);position:relative;overflow:hidden;height:100%;width:100%;}@-webkit-keyframes flareTranslate-kitt-u_StyledSkeleton_sc3upcl{from{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}to{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}}@keyframes flareTranslate-kitt-u_StyledSkeleton_sc3upcl{from{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}to{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}}.kitt-u_StyledSkeleton_sc3upcl::after{content:'';position:absolute;width:100%;height:100%;top:0;left:0;background-image:var(--sc3upcl-1);-webkit-animation:var(--sc3upcl-2);animation:var(--sc3upcl-2);-webkit-animation-name:flareTranslate-kitt-u_StyledSkeleton_sc3upcl;animation-name:flareTranslate-kitt-u_StyledSkeleton_sc3upcl;}
 .kitt-u_TypographyLinkWebWrapper_tcwz3nt > *:hover,.kitt-u_TypographyLinkWebWrapper_tcwz3nt > *:active,.kitt-hover .kitt-u_TypographyLinkWebWrapper_tcwz3nt > *{-webkit-text-decoration:none;text-decoration:none;}.kitt-u_TypographyLinkWebWrapper_tcwz3nt > *:hover,.kitt-u_TypographyLinkWebWrapper_tcwz3nt > *:active,.kitt-hover .kitt-u_TypographyLinkWebWrapper_tcwz3nt > *{-webkit-text-decoration:var(--tcwz3nt-0);text-decoration:var(--tcwz3nt-0);}

package/dist/index-node-14.17.cjs.web.js

@@ -150,10 +150,10 @@ const StyledTypography = /*#__PURE__*/styled__default(BabelPluginStyledComponent
 }, ({
   theme,
   $color
-}) => !$color ? '' : `
-  color: ${theme.kitt.typography.colors[$color]};
-  text-decoration-color: ${theme.kitt.typography.colors[$color]};
-  `);
+}) => {
+  if (!$color) return '';
+  return styled.css(["color:", ";text-decoration-color:", ";"], theme.kitt.typography.colors[$color], theme.kitt.typography.colors[$color]);
+});
 function useTypographyTypeForCurrentWindowSize(base, small, medium, large) {
   const {
     width
@@ -544,13 +544,16 @@ const BaseStyledButtonPressable = /*#__PURE__*/styled__default(BabelPluginStyled
 }, ({
   theme,
   $isLarge,
+  $isXLarge,
   $isDisabled
 }) => {
   const {
     large,
     default: defaultPadding,
-    disabled: disabledPadding
+    disabled: disabledPadding,
+    xLarge
   } = theme.kitt.button.contentPadding;
+  if ($isXLarge) return xLarge;
   if ($isLarge) return large;
   if ($isDisabled) return disabledPadding;
   return defaultPadding;
@@ -603,6 +606,9 @@ const getTextColorByType = (type, variant) => {
     case 'subtle-dark':
       return 'black';
 
+    case 'default':
+      return variant === 'ghost' ? 'white' : 'black';
+
     default:
       return 'black';
   }
@@ -750,6 +756,7 @@ function ButtonContent({
   });
 }
 
+const allowedGhostTypes = ['primary', 'default'];
 const Button = /*#__PURE__*/react.forwardRef(({
   children,
   type = 'default',
@@ -757,6 +764,7 @@ const Button = /*#__PURE__*/react.forwardRef(({
   disabled,
   stretch,
   large,
+  xLarge,
   icon,
   iconPosition = 'left',
   testID,
@@ -765,8 +773,8 @@ const Button = /*#__PURE__*/react.forwardRef(({
   accessibilityRole = 'button',
   onPress
 }, ref) => {
-  if ((process.env.NODE_ENV !== "production") && variant === 'ghost' && type !== 'primary') {
-    throw new Error('variant=ghost is only allowed with type=primary');
+  if ((process.env.NODE_ENV !== "production") && variant === 'ghost' && !allowedGhostTypes.includes(type)) {
+    throw new Error('variant=ghost is only allowed with type=primary or default');
   }
 
   return /*#__PURE__*/jsxRuntime.jsx(AnimatedButtonPressable, {
@@ -785,6 +793,7 @@ const Button = /*#__PURE__*/react.forwardRef(({
       $variant: variant,
       $isStretch: stretch,
       $isLarge: large,
+      $isXLarge: xLarge,
       $isDisabled: disabled,
       children: [/*#__PURE__*/jsxRuntime.jsx(ButtonContent, {
         type: type,
@@ -911,7 +920,9 @@ const colors = {
   warning: lateOceanColorPalette.goldCrayola,
   separator: lateOceanColorPalette.black100,
   hover: lateOceanColorPalette.black100,
+  white: lateOceanColorPalette.white,
   black: lateOceanColorPalette.black1000,
+  blackAnthracite: lateOceanColorPalette.black800,
   uiBackground: lateOceanColorPalette.black25,
   uiBackgroundLight: lateOceanColorPalette.white,
   transparent: lateOceanColorPalette.transparent,
@@ -958,6 +969,7 @@ const button = {
   contentPadding: {
     default: '7px 16px 7px',
     large: '11px 24px 11px',
+    xLarge: '15px 24px 15px',
     disabled: '5px 14px 5px'
   },
   transition: {
@@ -970,6 +982,15 @@ const button = {
       pressedBackgroundColor: 'rgba(0, 0, 0, 0.1)',
       hoverBackgroundColor: 'rgba(0, 0, 0, 0.1)',
       focusBorderColor: 'rgba(0, 0, 0, 0.1)'
+    },
+    ghost: {
+      backgroundColor: 'rgba(255, 255, 255, 0.1)',
+      pressedBackgroundColor: 'rgba(255, 255, 255, 0.05)',
+      hoverBackgroundColor: 'rgba(255, 255, 255, 0.05)',
+      focusBorderColor: 'rgba(255, 255, 255, 0.4)',
+      color: lateOceanColorPalette.white,
+      hoverColor: lateOceanColorPalette.white,
+      activeColor: lateOceanColorPalette.white
     }
   },
   primary: {
@@ -1100,16 +1121,16 @@ const createTypographyTypeConfig = (lineHeightMultiplier, baseAndSmallFontSize,
 });
 const typography = {
   colors: {
-    black: lateOceanColorPalette.black1000,
-    'black-anthracite': lateOceanColorPalette.black800,
+    black: colors.black,
+    'black-anthracite': colors.blackAnthracite,
     'black-light': lateOceanColorPalette.black555,
-    white: lateOceanColorPalette.white,
-    'white-light': lateOceanColorPalette.white,
-    primary: lateOceanColorPalette.lateOcean,
-    'primary-light': lateOceanColorPalette.lateOceanLight1,
-    accent: lateOceanColorPalette.warmEmbrace,
-    success: lateOceanColorPalette.viride,
-    danger: lateOceanColorPalette.englishVermillon
+    white: colors.white,
+    'white-light': colors.white,
+    primary: colors.primary,
+    'primary-light': colors.primaryLight,
+    accent: colors.accent,
+    success: colors.success,
+    danger: colors.danger
   },
   types: {
     headers: {
@@ -1205,8 +1226,8 @@ const input = {
     size: 20
   },
   padding: {
-    default: '5px 16px',
-    iOSSingleLine: '7px 16px'
+    horizontal: 16,
+    vertical: 5
   },
   transition: {
     property: 'border-color',
@@ -1321,7 +1342,20 @@ const listItem = {
 };
 
 const pageLoader = {
-  size: 60
+  size: 60,
+  strokeWidth: 3,
+  colors: {
+    base: colors.separator,
+    fill: colors.primary
+  },
+  animation: {
+    delay: 500,
+    circleBackgroundFillDuration: 1000,
+    filledCircleFillDuration: 1800,
+    groupFilledCircleRotationDuration: 1800,
+    filledCircleRotationDuration: 2160,
+    fillEasingFunction: [0.39, 0.575, 0.565, 1]
+  }
 };
 
 const shadows = {
@@ -1603,7 +1637,7 @@ const ViewInput = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactN
   componentId: "kitt-universal__sc-11fmlmi-1"
 })(["", " padding:", ";min-height:", "px;min-width:", ";"], styledTextInputMixin, ({
   theme
-}) => theme.kitt.forms.input.padding.default, ({
+}) => `${theme.kitt.forms.input.padding.vertical}px ${theme.kitt.forms.input.padding.horizontal}px`, ({
   theme
 }) => theme.kitt.forms.input.minHeight, ({
   theme,
@@ -1765,20 +1799,18 @@ const StyledTextInput = /*#__PURE__*/styled__default(BabelPluginStyledComponents
   theme,
   multiline
 }) => {
-  if (!multiline && "web" === 'ios') {
-    return theme.kitt.forms.input.padding.iOSSingleLine;
-  }
-
-  return theme.kitt.forms.input.padding.default;
+  if (!multiline && "web" !== 'web') return `0 ${theme.kitt.forms.input.padding.horizontal}px`;
+  return `${theme.kitt.forms.input.padding.vertical}px ${theme.kitt.forms.input.padding.horizontal}px`;
 }, ({
   theme,
   multiline
 }) => {
-  if (!multiline && "web" === 'ios') return 0;
+  if (!multiline && "web" !== 'web') return 0;
   const typeConfigKey = getTypographyTypeConfigKey(theme);
   return `${theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight}px`;
 }, ({
-  $minHeight
+  theme,
+  $minHeight = theme.kitt.forms.input.minHeight
 }) => $minHeight);
 const RightInputContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "InputText__RightInputContainer",
@@ -1787,7 +1819,7 @@ const RightInputContainer = /*#__PURE__*/styled__default(BabelPluginStyledCompon
 const InputText = /*#__PURE__*/react.forwardRef(({
   id,
   right,
-  minHeight = 0,
+  minHeight,
   state: formState,
   internalForceState,
   disabled = false,
@@ -2926,37 +2958,80 @@ const PageLoaderContainer = withTheme( /*#__PURE__*/react$1.styled("div")({
   class: "kitt-u_PageLoaderContainer_ptkwz2j",
   vars: {
     "ptkwz2j-0": [({
+      $circlePerimeter
+    }) => $circlePerimeter, "px"],
+    "ptkwz2j-2": [({
+      $circlePerimeter
+    }) => $circlePerimeter * 0.2, "px"],
+    "ptkwz2j-3": [({
+      theme
+    }) => theme.kitt.pageLoader.size, "px"],
+    "ptkwz2j-5": [({
       theme
-    }) => theme.kitt.colors.separator],
-    "ptkwz2j-1": [({
+    }) => theme.kitt.pageLoader.strokeWidth, "px"],
+    "ptkwz2j-8": [({
       theme
-    }) => theme.kitt.colors.primary]
+    }) => theme.kitt.pageLoader.colors.base],
+    "ptkwz2j-9": [({
+      theme
+    }) => {
+      const {
+        animation
+      } = theme.kitt.pageLoader;
+      const [x1, y1, x2, y2] = animation.fillEasingFunction;
+      return `${animation.circleBackgroundFillDuration}ms cubic-bezier(${x1}, ${y1}, ${x2}, ${y2}) ${animation.delay}ms forwards`;
+    }],
+    "ptkwz2j-10": [({
+      theme
+    }) => {
+      const {
+        animation
+      } = theme.kitt.pageLoader;
+      return `${animation.filledCircleFillDuration}ms linear ${animation.delay}ms infinite`;
+    }],
+    "ptkwz2j-11": [({
+      theme
+    }) => theme.kitt.pageLoader.colors.fill],
+    "ptkwz2j-12": [({
+      theme
+    }) => {
+      const {
+        animation
+      } = theme.kitt.pageLoader;
+      const [x1, y1, x2, y2] = animation.fillEasingFunction;
+      const fillAnimation = `${animation.filledCircleFillDuration}ms cubic-bezier(${x1}, ${y1}, ${x2}, ${y2}) ${animation.delay}ms infinite alternate`;
+      const rotationAnimation = `${animation.filledCircleRotationDuration}ms linear ${animation.delay}ms infinite`;
+      return [fillAnimation, rotationAnimation].join(',');
+    }]
   }
 }));
 function PageLoader() {
   const theme = /*#__PURE__*/styled.useTheme();
   const {
-    size
+    size,
+    strokeWidth
   } = theme.kitt.pageLoader;
+  const center = size * 0.5;
+  const radius = center - strokeWidth;
+  const circlePerimeter = 2 * Math.PI * radius;
+  const sharedProps = {
+    cx: center,
+    cy: center,
+    r: radius,
+    fill: 'none'
+  };
   return /*#__PURE__*/jsxRuntime.jsx(PageLoaderContainer, {
+    $circlePerimeter: circlePerimeter,
     children: /*#__PURE__*/jsxRuntime.jsxs("svg", {
       width: size,
       height: size,
       children: [/*#__PURE__*/jsxRuntime.jsx("g", {
         "data-large-loader": "base",
-        children: /*#__PURE__*/jsxRuntime.jsx("circle", {
-          cx: "30",
-          cy: "30",
-          r: "27",
-          fill: "none"
+        children: /*#__PURE__*/jsxRuntime.jsx("circle", { ...sharedProps
         })
       }), /*#__PURE__*/jsxRuntime.jsx("g", {
         "data-large-loader": "fill",
-        children: /*#__PURE__*/jsxRuntime.jsx("circle", {
-          cx: "30",
-          cy: "30",
-          r: "27",
-          fill: "none"
+        children: /*#__PURE__*/jsxRuntime.jsx("circle", { ...sharedProps
         })
       })]
     })