@cleartrip/ct-design-spinner 4.0.0-TEST.1 → 5.0.0

package/dist/ct-design-spinner.umd.js

@@ -1,793 +1,51 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('@emotion/styled'), require('react'), require('@emotion/react')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', '@emotion/styled', 'react', '@emotion/react'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemSpinner = {}, global.jsxRuntime, global.styled, global.React, global.react$1));
-})(this, (function (exports, jsxRuntime, styled, react, react$1) { 'use strict';
-
-    function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-    var styled__default = /*#__PURE__*/_interopDefault(styled);
-
-    /******************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-    var __assign = function () {
-      __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-          s = arguments[i];
-          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-      };
-      return __assign.apply(this, arguments);
-    };
-    function __makeTemplateObject(cooked, raw) {
-      if (Object.defineProperty) {
-        Object.defineProperty(cooked, "raw", {
-          value: raw
-        });
-      } else {
-        cooked.raw = raw;
-      }
-      return cooked;
-    }
-    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-      var e = new Error(message);
-      return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-    };
-
-    var border = {
-      radius: {
-        0: 0,
-        2: 2,
-        4: 4,
-        6: 6,
-        8: 8,
-        12: 12,
-        16: 16,
-        20: 20,
-        24: 24,
-        30: 30,
-        32: 32,
-        '50P': '50%',
-        60: 60
-      },
-      width: {
-        none: 0,
-        sm: 1,
-        md: 1.5,
-        lg: 2,
-        xl: 5
-      },
-      style: {
-        solid: 'solid',
-        dotted: 'dotted',
-        none: 'none'
-      }
-    };
-    var colors = {
-      alert: '#DF9641',
-      alert100: '#FFF8D4',
-      alert500: '#A06800',
-      alertBg: '#FCF7F0',
-      alertText: '#DF9641',
-      aqua100: '#082395',
-      aqua250: '#081C82',
-      bgPrimary: '#ED6521',
-      bgPrimaryHover: '#CE4501',
-      black: '#1A1A1A',
-      blue100: '#ECF3FF',
-      blue500: '#0F6BFF',
-      blue900: '#0E3A81',
-      bluePrimary500: '#2A55E5',
-      blueSecondary: '#F0F5FF',
-      blueSky500: '#3C6CE6',
-      brand: '#FF4F17',
-      brandBg: '#FEF3ED',
-      brandText: '#FF4F17',
-      brown: '#231B18',
-      coralpink: '#F48B6E',
-      curacao250: '#9FE3EA',
-      curacao900: '#032529',
-      darkGrey: '#313131',
-      darkNeutral300: '#E0E0E0',
-      disabled100: '#E6E6E6',
-      disabled250: '#DDDDDD',
-      disabledLight: '#EFEFEF',
-      disabledText: '#B3B3B3',
-      grapetini900: '#5f1ab6',
-      gray100: '#2E3042',
-      gray250: '#1A1C23',
-      gray500: '#ffffffb1',
-      greenFresh500: '#61C149',
-      highlightBg: 'rgba(255, 255, 255, 0.2)',
-      lightCyan: '#ECF9FB',
-      lightSkyBlue: '#88CDFF',
-      line: '#E7E7E7',
-      lineDarkNeutral300: '#E0E0E0',
-      link: '#0F6BFF',
-      link2: '#3366CC',
-      link2Hover: '#1A469D',
-      linkBg: '#EFF3FB',
-      linkText: '#0F6BFF',
-      margarita100: '#F2FAF0',
-      margarita250: '#C0E6B6',
-      margarita750: '#3A742C',
-      mintCream: '#F0FAF6',
-      neutral50: '#FFFFFF80',
-      neutral100: '#FFFFFF',
-      neutral200: '#FAFAFD',
-      neutral300: '#F3F3F3',
-      neutral350: '#DBDBDB',
-      neutral400: '#CAC9C9',
-      neutral500: '#B3B3B3',
-      neutral700: '#808080',
-      neutral900: '#1A1A1A',
-      orange100: '#FFF1EC',
-      orange200: '#FFF1ED',
-      orange250: '#FFB8A5',
-      orange500: '#FF4F17',
-      pinaColada100: '#FFF9EC',
-      pinaColada250: '#FEE3A0',
-      pinaColada750: '#98700B',
-      pinkVibrant500: '#EF4E9B',
-      primaryNeutral900: '#212121',
-      purple100: '#350041',
-      purple250: '#130016',
-      purpleRoyal500: '#8B39F1',
-      sandGrey100: '#fef5f2',
-      shadow: '#1a1a1a14',
-      success: '#11A670',
-      success500: '#11A670',
-      success600: '#0DA86D',
-      successBg: '#ECF8F4',
-      successText: '#11A670',
-      superBlue25: '#EBEFFF',
-      superBlue500: '#4D43FE',
-      superGreen500: '#B5EF85',
-      superGrey50: '#F9FAFB',
-      superGrey200: '#EAECF0',
-      superGrey300: '#D0D5DD',
-      superGrey400: '#98A2B3',
-      superGrey500: '#667085',
-      superGrey700: '#344054',
-      superGrey800: '#1D2939',
-      systemGreen500: '#12B76A',
-      systemRed500: '#FA2617',
-      transparent: '#00000000',
-      warning: '#C83232',
-      warningBg: '#FBEFEF',
-      warningText: '#C83232',
-      yellowSecondary: '#FFC200',
-      yellowSun500: '#FDBA12'
-    };
-    var elevation = {
-      bottomE1: '0px 1px 0px #E7E7E7',
-      bottomE2: '0px 4px 16px rgba(26, 26, 26, 0.08)',
-      bottomE3: '0px 8px 24px rgba(26, 26, 26, 0.1)',
-      bottomE4: '0px 10px 32px rgba(26, 26, 26, 0.2)',
-      topE1: '0px -1px 0px #E7E7E7',
-      topE2: '0px -4px 16px rgba(26, 26, 26, 0.08)',
-      topE3: '0px -8px 24px rgba(26, 26, 26, 0.1)',
-      topE4: '0px -10px 32px rgba(26, 26, 26, 0.2)',
-      modalBlurLight: 'rgb(0 0 0 / 20%) 0px 11px 15px -7px',
-      modalBlurMedium: 'rgb(0 0 0 / 14%) 0px 24px 38px 3px',
-      modalBlurHeavy: 'rgb(0 0 0 / 12%) 0px 9px 22px 18px'
-    };
-    var size = {
-      0: 0,
-      0.5: 2,
-      1: 4,
-      2: 8,
-      '2.5': 10,
-      3: 12,
-      4: 16,
-      5: 20,
-      6: 24,
-      7: 28,
-      8: 32,
-      9: 36,
-      10: 40,
-      11: 44,
-      12: 48,
-      13: 52,
-      14: 56,
-      15: 60,
-      16: 64,
-      19: 76,
-      20: 80,
-      50: 200,
-      55: 220,
-      '50P': '50%',
-      '100P': '100%'
-    };
-    var spacing = {
-      0: 0,
-      0.5: 2,
-      0.75: 3,
-      1: 4,
-      1.5: 6,
-      2: 8,
-      3: 12,
-      4: 16,
-      5: 20,
-      6: 24,
-      7: 28,
-      8: 32,
-      9: 36,
-      10: 40,
-      11: 44,
-      12: 48,
-      13: 52,
-      14: 56,
-      16: 64
-    };
-    var typography = {
-      weight: {
-        bold: 700,
-        semibold: 600,
-        medium: 500,
-        normal: 400
-      },
-      size: {
-        10: 10,
-        12: 12,
-        14: 14,
-        16: 16,
-        20: 20,
-        24: 24,
-        32: 32,
-        40: 40,
-        48: 48
-      },
-      lineHeight: {
-        12: 12,
-        14: 14,
-        16: 16,
-        18: 18,
-        20: 20,
-        22: 22,
-        24: 24,
-        28: 28,
-        32: 32,
-        40: 40,
-        48: 48,
-        56: 56
-      },
-      letterSpacing: {
-        nPoint75: -0.75,
-        nPoint5: -0.5,
-        nPoint4: -0.4,
-        nPoint25: -0.25,
-        zero: 0,
-        point4: 0.4,
-        point5: 0.5,
-        point75: 0.75
-      }
-    };
-
-    var duration = {
-      shortest: 150,
-      shorter: 200,
-      short: 250,
-      standard: 300,
-      complex: 375,
-      enteringScreen: 225,
-      leavingScreen: 195
-    };
-    var easing = {
-      easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
-      easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
-      easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
-      sharp: 'cubic-bezier(0.4, 0, 0.6, 1)'
-    };
-    function getAutoHeightDuration(height) {
-      if (!height) {
-        return 0;
-      }
-      var constant = height / 36;
-      return Math.round((4 + 15 * Math.pow(constant, 0.25) + constant / 5) * 10);
-    }
-    var create = function (props, options) {
-      if (props === void 0) {
-        props = ['all'];
-      }
-      if (options === void 0) {
-        options = {};
-      }
-      var _a = options.duration,
-        durationOption = _a === void 0 ? duration.standard : _a,
-        _b = options.easing,
-        easingOption = _b === void 0 ? easing.easeInOut : _b,
-        _c = options.delay,
-        delay = _c === void 0 ? 0 : _c;
-      return (Array.isArray(props) ? props : [props]).map(function (animatedProp) {
-        return "".concat(animatedProp, " ").concat(typeof durationOption === 'string' ? durationOption : "".concat(durationOption, "ms"), " ").concat(easingOption, " ").concat(typeof delay === 'string' ? delay : "".concat(delay, "ms"));
-      }).join(',');
-    };
-    var hover$3 = function (key) {
-      var _a;
-      var bg = (_a = {}, _a[colors.neutral100] = colors.neutral100, _a[colors.neutral900] = colors.neutral900, _a[colors.neutral900] = colors.neutral900, _a[colors.neutral100] = colors.neutral100, _a[colors.brand] = colors.bgPrimaryHover, _a[colors.neutral100] = colors.neutral100, _a[colors.disabledText] = colors.disabledText, _a[colors.neutral300] = colors.neutral300, _a[colors.neutral100] = colors.neutral100, _a[colors.link2] = colors.link2Hover, _a[colors.neutral100] = colors.neutral100, _a[colors.neutral900] = colors.neutral900, _a[colors.neutral100] = colors.neutral100, _a[colors.disabledText] = colors.disabledText, _a[colors.neutral300] = colors.neutral300, _a);
-      return bg[key];
-    };
-    var zIndex = {
-      drawer: 1200,
-      modal: 1300,
-      popOver: 1300,
-      tooltip: 1500,
-      sideNav: 100,
-      toolbar: 50,
-      bottomSheet: 100
-    };
-    var counter$1 = {
-      enabled: {
-        stroke: colors.neutral900
-      },
-      disabled: {
-        stroke: colors.neutral500
-      }
-    };
-    var BaseTheme = {
-      color: {
-        text: {
-          primary: colors.neutral900,
-          secondary: colors.brandText,
-          tertiary: colors.neutral500,
-          heading: colors.neutral900,
-          subHeading: colors.neutral700,
-          disabled: colors.disabledText,
-          success: colors.successText,
-          alert: colors.alertText,
-          alert500: colors.alert500,
-          warning: colors.warningText,
-          link: colors.linkText,
-          brand: colors.brandText,
-          neutral: colors.neutral100,
-          link2: colors.link2,
-          margarita: colors.margarita750,
-          primary2: colors.grapetini900,
-          secondary2: colors.blue100,
-          grapetini900: colors.grapetini900,
-          pinaColada750: colors.pinaColada750,
-          neutral50: colors.neutral50,
-          coralpink: colors.coralpink
-        },
-        button: {
-          outlinedPrimaryLabel: colors.neutral900,
-          outlinedPrimaryBorder: colors.neutral900,
-          outlinedPrimaryBg: colors.neutral100,
-          outlinedSecondaryLabel: colors.brand,
-          outlinedSecondaryBorder: colors.brand,
-          outlinedSecondaryBg: colors.neutral100,
-          outlinedTertiaryLabel: colors.link,
-          outlinedTertiaryBorder: colors.link,
-          outlinedTertiaryBg: colors.neutral100,
-          outlinedNeutralLabel: colors.neutral100,
-          outlinedNeutralBorder: colors.neutral100,
-          outlinedNeutralBg: colors.transparent,
-          outlinedDisabledLabel: colors.disabledText,
-          outlinedDisabledBg: colors.neutral300,
-          containedPrimaryLabel: colors.neutral100,
-          containedPrimaryBg: colors.neutral900,
-          containedSecondaryLabel: colors.neutral100,
-          containedSecondaryBg: colors.brand,
-          containedTertiaryLabel: colors.neutral100,
-          containedTertiaryBg: colors.link,
-          containedDisabledLabel: colors.disabledText,
-          containedDisabledBg: colors.neutral300,
-          containedNeutralLabel: colors.neutral900,
-          containedNeutralBg: colors.neutral100,
-          hover: hover$3
-        },
-        chip: {
-          nonSelectedPrimaryLabel: colors.neutral900,
-          disabledPrimaryLabel: colors.disabledText,
-          selectedPrimaryLabel: colors.neutral900,
-          selectedPrimaryBorder: colors.neutral900,
-          selectedPrimaryBg: colors.neutral300,
-          disabledPrimaryBg: colors.neutral100
-        },
-        dropdown: {
-          shadow: colors.shadow
-        },
-        tab: {
-          nonSelectedPrimaryLabel: colors.neutral700,
-          selectedPrimaryLabel: colors.neutral900
-        },
-        sidenav: {
-          primaryBg: colors.neutral900,
-          selectedTabBg: colors.highlightBg
-        },
-        tooltip: {
-          primaryBg: colors.neutral900
-        },
-        background: {
-          primary: colors.neutral900,
-          secondary: colors.brand,
-          tertiary: colors.link,
-          brand: colors.brand,
-          brandLightBg: colors.brandBg,
-          link: colors.link,
-          link2: colors.link2,
-          linkLightBg: colors.linkBg,
-          success: colors.success,
-          successLightBg: colors.successBg,
-          alert: colors.alert,
-          alertLightBg: colors.alertBg,
-          alertSoft: colors.alert100,
-          warning: colors.warning,
-          warningLightBg: colors.warningBg,
-          neutral: colors.neutral100,
-          disabled: colors.neutral300,
-          disabledSecondaryLight: colors.neutral350,
-          disabledSecondary: colors.neutral400,
-          disabledDark: colors.disabled100,
-          defaultDark: colors.neutral700,
-          defaultDarkest: colors.neutral900,
-          grey: colors.neutral500,
-          secondary2: colors.blue100,
-          sandGrey100: colors.sandGrey100
-        },
-        border: {
-          primary: colors.neutral900,
-          secondary: colors.brand,
-          tertiary: colors.link,
-          brand: colors.brand,
-          neutral: colors.neutral900,
-          link: colors.link,
-          default: colors.line,
-          defaultDark: colors.neutral700,
-          disabled: colors.neutral500,
-          disabledDark: colors.disabled100,
-          warning: colors.warning,
-          divider: colors.neutral300
-        },
-        spinner: {
-          primary: colors.neutral700,
-          primaryBg: colors.alertBg
-        },
-        shimmer: {
-          disabledLight: colors.disabledLight,
-          disabledDark: colors.disabled250
-        },
-        coupon: {
-          primaryBg: colors.blue100
-        },
-        alert: {
-          success: colors.successBg,
-          warning: colors.alertBg,
-          info: colors.blue100,
-          error: colors.orange100,
-          neutral: colors.neutral100
-        },
-        badge: {
-          curacao: colors.curacao250,
-          curacao900: colors.curacao900,
-          pinaColada: colors.pinaColada250,
-          margarita250: colors.margarita250,
-          default: colors.neutral300,
-          green: colors.successBg,
-          margarita100: colors.margarita100,
-          yellow: colors.alertBg,
-          orange100: colors.orange100,
-          orange250: colors.orange250,
-          orange500: colors.orange500,
-          red: colors.warningBg,
-          green500: colors.success500,
-          green600: colors.success600,
-          purple100: colors.purple100,
-          purple250: colors.purple250,
-          gray100: colors.gray100,
-          gray250: colors.gray250,
-          aqua100: colors.aqua100,
-          aqua250: colors.aqua250,
-          black: colors.black,
-          link: colors.link,
-          linkText: colors.linkText,
-          blue100: colors.blue100,
-          blue500: colors.blue500,
-          blue900: colors.blue900,
-          neutral100: colors.neutral100,
-          pinaColada750: colors.pinaColada750,
-          pinaColada100: colors.pinaColada100,
-          brown: colors.brown
-        },
-        counter: counter$1,
-        calendar: {
-          accent: colors.neutral900,
-          background: colors.neutral300,
-          selected: colors.neutral900
-        }
-      },
-      elevation: __assign({}, elevation),
-      border: __assign({}, border),
-      spacing: __assign({}, spacing),
-      typography: __assign({}, typography),
-      size: __assign({}, size),
-      transitions: {
-        duration: duration,
-        easing: easing,
-        create: create,
-        getAutoHeightDuration: getAutoHeightDuration
-      },
-      underline: {
-        link: '',
-        primary: '',
-        secondary: '',
-        tertiary: '',
-        disabled: '',
-        heading: '',
-        subHeading: '',
-        success: '',
-        warning: '',
-        neutral: '',
-        link2: '',
-        primary2: '',
-        secondary2: '',
-        grapetini900: '',
-        pinaColada750: '',
-        alert: ''
-      },
-      zIndex: zIndex
-    };
-    var B2CTheme = __assign({}, BaseTheme);
-    var hover$2 = function (key) {
-      var _a;
-      var bg = (_a = {}, _a[colors.neutral100] = colors.neutral100, _a[colors.neutral900] = colors.neutral900, _a[colors.neutral900] = colors.neutral900, _a[colors.neutral100] = colors.neutral100, _a[colors.brand] = colors.bgPrimaryHover, _a[colors.neutral100] = colors.neutral100, _a[colors.disabledText] = colors.disabledText, _a[colors.neutral300] = colors.neutral300, _a[colors.neutral100] = colors.neutral100, _a[colors.link2] = colors.link2Hover, _a[colors.neutral100] = colors.neutral100, _a[colors.neutral900] = colors.neutral900, _a[colors.neutral100] = colors.neutral100, _a[colors.disabledText] = colors.disabledText, _a[colors.neutral300] = colors.neutral300, _a);
-      return bg[key];
-    };
-    __assign(__assign({}, BaseTheme), {
-      color: __assign(__assign({}, BaseTheme.color), {
-        text: __assign(__assign({}, BaseTheme.color.text), {
-          secondary: colors.link2,
-          tertiary: colors.neutral500
-        }),
-        button: __assign(__assign({}, BaseTheme.color.button), {
-          outlinedPrimaryLabel: colors.link2,
-          outlinedPrimaryBorder: colors.link2,
-          outlinedPrimaryBg: colors.neutral100,
-          outlinedSecondaryLabel: colors.neutral900,
-          outlinedSecondaryBorder: colors.neutral900,
-          outlinedSecondaryBg: colors.neutral100,
-          outlinedTertiaryLabel: colors.brand,
-          outlinedTertiaryBorder: colors.brand,
-          outlinedTertiaryBg: colors.neutral100,
-          outlinedDisabledLabel: colors.disabledText,
-          outlinedDisabledBg: colors.neutral300,
-          containedPrimaryLabel: colors.neutral100,
-          containedPrimaryBg: colors.link2,
-          containedSecondaryLabel: colors.neutral100,
-          containedSecondaryBg: colors.neutral900,
-          containedTertiaryLabel: colors.neutral100,
-          containedTertiaryBg: colors.brand,
-          containedDisabledLabel: colors.disabledText,
-          containedDisabledBg: colors.neutral300,
-          hover: hover$2
-        }),
-        chip: __assign(__assign({}, BaseTheme.color.chip), {
-          selectedPrimaryLabel: colors.link2,
-          selectedPrimaryBorder: colors.link2,
-          selectedPrimaryBg: colors.linkBg
-        }),
-        tab: __assign(__assign({}, BaseTheme.color.tab), {
-          nonSelectedPrimaryLabel: colors.neutral900,
-          selectedPrimaryLabel: colors.link2
-        }),
-        background: __assign(__assign({}, BaseTheme.color.background), {
-          primary: colors.link2,
-          secondary: colors.neutral900,
-          tertiary: colors.brand
-        }),
-        border: __assign(__assign({}, BaseTheme.color.border), {
-          primary: colors.link2,
-          secondary: colors.neutral900,
-          tertiary: colors.brand,
-          divider: colors.line
-        }),
-        spinner: {
-          primary: colors.link2,
-          primaryBg: colors.alertBg
-        },
-        calendar: {
-          accent: '',
-          background: '',
-          selected: colors.link2
-        }
-      })
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@cleartrip/ct-design-style-manager'), require('@emotion/css')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@cleartrip/ct-design-style-manager', '@emotion/css'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemSpinner = {}, global.jsxRuntime, global.React, global.ctDesignStyleManager, global.css));
+})(this, (function (exports, jsxRuntime, react, ctDesignStyleManager, css) { 'use strict';
+
+    const spinnerStaticStyles = ctDesignStyleManager.makeStyles((theme) => ({
+        root: {
+            position: 'relative',
+            borderWidth: theme.border.width.lg,
+            borderStyle: 'solid',
+            borderColor: 'rgba(0, 0, 0, 0.3)',
+            borderRadius: theme.border.radius[32],
+            borderTopColor: theme.color.background.neutral,
+        },
+    }));
+
+    const spinAnimation = css.keyframes `
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+`;
+    const animationClass = css.css({
+        animation: `${spinAnimation} 800ms linear infinite`,
     });
-    var hover$1 = function (key) {
-      var _a;
-      var bg = (_a = {}, _a[colors.neutral100] = colors.neutral100, _a[colors.neutral900] = colors.neutral900, _a[colors.neutral900] = colors.neutral900, _a[colors.neutral100] = colors.neutral100, _a[colors.brand] = colors.bgPrimaryHover, _a[colors.neutral100] = colors.neutral100, _a[colors.disabledText] = colors.disabledText, _a[colors.neutral300] = colors.neutral300, _a[colors.neutral100] = colors.neutral100, _a[colors.link2] = colors.link2Hover, _a[colors.neutral100] = colors.neutral100, _a[colors.neutral900] = colors.neutral900, _a[colors.neutral100] = colors.neutral100, _a[colors.disabledText] = colors.disabledText, _a[colors.neutral300] = colors.neutral300, _a[colors.bluePrimary500] = colors.bluePrimary500, _a[colors.yellowSecondary] = colors.yellowSecondary, _a);
-      return bg[key];
-    };
-    var counter = {
-      enabled: {
-        stroke: colors.bluePrimary500
-      },
-      disabled: {
-        stroke: colors.neutral500
-      }
-    };
-    __assign(__assign({}, BaseTheme), {
-      color: __assign(__assign({}, BaseTheme.color), {
-        text: __assign(__assign({}, BaseTheme.color.text), {
-          link: colors.bluePrimary500
-        }),
-        button: __assign(__assign({}, BaseTheme.color.button), {
-          outlinedPrimaryLabel: colors.primaryNeutral900,
-          outlinedPrimaryBg: colors.neutral100,
-          containedPrimaryLabel: colors.neutral100,
-          containedPrimaryBg: colors.bluePrimary500,
-          containedSecondaryLabel: colors.primaryNeutral900,
-          containedSecondaryBg: colors.yellowSecondary,
-          hover: hover$1
-        }),
-        chip: __assign(__assign({}, BaseTheme.color.chip), {
-          selectedPrimaryLabel: colors.link2,
-          selectedPrimaryBorder: colors.link2,
-          selectedPrimaryBg: colors.linkBg,
-          nonSelectedPrimaryLabel: colors.neutral900
-        }),
-        tab: __assign(__assign({}, BaseTheme.color.tab), {
-          nonSelectedPrimaryLabel: colors.neutral900,
-          selectedPrimaryLabel: colors.bluePrimary500
-        }),
-        background: __assign(__assign({}, BaseTheme.color.background), {
-          primary: colors.bluePrimary500,
-          secondary: colors.neutral900,
-          tertiary: colors.brand,
-          linkLightBg: colors.blueSecondary
-        }),
-        border: __assign(__assign({}, BaseTheme.color.border), {
-          primary: colors.bluePrimary500,
-          brand: colors.bluePrimary500
-        }),
-        spinner: {
-          primary: colors.link2,
-          primaryBg: colors.alertBg
-        },
-        counter: counter,
-        calendar: {
-          accent: colors.bluePrimary500,
-          background: colors.blueSecondary,
-          selected: colors.bluePrimary500
+    const STROKE_DASH_RATIO = 0.65;
+    const DEFAULT_STROKE_WIDTH = 2;
+    const Spinner = ({ width = 30, height = 30, gradientColors }) => {
+        const gradientId = react.useId();
+        const hasGradient = Array.isArray(gradientColors) && gradientColors.length > 0;
+        const dynamicStyles = ctDesignStyleManager.useStyles(() => ({
+            size: {
+                width,
+                height,
+            },
+        }), [width, height]);
+        const rootClassName = ctDesignStyleManager.useWebMergeStyles([spinnerStaticStyles.root, dynamicStyles.size, animationClass], [dynamicStyles.size, animationClass]);
+        const gradientWrapperClassName = ctDesignStyleManager.useWebMergeStyles([dynamicStyles.size, animationClass], [dynamicStyles.size, animationClass]);
+        if (hasGradient) {
+            const size = Math.min(width, height);
+            const center = size / 2;
+            const radius = (size - DEFAULT_STROKE_WIDTH) / 2;
+            const circumference = 2 * Math.PI * radius;
+            const strokeUrl = `url(#${gradientId})`;
+            return (jsxRuntime.jsx("span", { className: gradientWrapperClassName, role: 'status', "aria-label": 'Loading', children: jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: 'none', children: [jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("linearGradient", { id: gradientId, x1: '0%', y1: '0%', x2: '100%', y2: '0%', children: gradientColors.map((color, index) => (jsxRuntime.jsx("stop", { offset: `${(index / (gradientColors.length - 1)) * 100}%`, stopColor: color }, index))) }) }), jsxRuntime.jsx("circle", { cx: center, cy: center, r: radius, stroke: strokeUrl, strokeWidth: DEFAULT_STROKE_WIDTH, strokeLinecap: 'round', strokeDasharray: `${circumference * STROKE_DASH_RATIO} ${circumference * (1 - STROKE_DASH_RATIO)}`, fill: 'none' })] }) }));
         }
-      })
-    });
-    var hover = function (key) {
-      var _a;
-      var bg = (_a = {}, _a[colors.neutral100] = colors.neutral100, _a[colors.brand] = colors.bgPrimaryHover, _a[colors.disabledText] = colors.disabledText, _a[colors.neutral300] = colors.neutral300, _a[colors.link2] = colors.link2Hover, _a[colors.neutral100] = colors.neutral100, _a[colors.neutral900] = colors.neutral900, _a[colors.superGrey700] = colors.superGrey700, _a[colors.superGrey300] = colors.superGrey300, _a[colors.superGrey800] = colors.superGrey800, _a[colors.superGreen500] = colors.superGreen500, _a);
-      return bg[key];
+        return jsxRuntime.jsx("span", { role: 'status', "aria-label": 'Loading', className: rootClassName });
     };
-    __assign(__assign({}, BaseTheme), {
-      color: __assign(__assign({}, BaseTheme.color), {
-        text: __assign(__assign({}, BaseTheme.color.text), {
-          primary: colors.superGrey800,
-          secondary: colors.superGrey500,
-          tertiary: colors.superGrey400,
-          warning: colors.systemRed500,
-          disabled: colors.superGrey400,
-          subHeading: colors.superGrey400,
-          success: colors.systemGreen500,
-          link: colors.superBlue500,
-          link2: colors.superBlue500
-        }),
-        button: __assign(__assign({}, BaseTheme.color.button), {
-          outlinedPrimaryLabel: colors.superGrey700,
-          outlinedPrimaryBorder: colors.superGrey300,
-          outlinedTertiaryLabel: colors.superGrey700,
-          outlinedTertiaryBorder: colors.superGrey300,
-          outlinedDisabledLabel: colors.disabledText,
-          containedSecondaryLabel: colors.superGrey800,
-          containedPrimaryBg: colors.superBlue500,
-          containedSecondaryBg: colors.superGreen500,
-          containedTertiaryLabel: colors.superGrey300,
-          containedDisabledLabel: colors.disabledText,
-          containedPrimaryLabel: colors.neutral100,
-          hover: hover
-        }),
-        chip: __assign(__assign({}, BaseTheme.color.chip), {
-          selectedPrimaryLabel: colors.superBlue500,
-          selectedPrimaryBorder: colors.superBlue500,
-          selectedPrimaryBg: colors.superBlue25,
-          disabledPrimaryLabel: colors.superGrey400,
-          nonSelectedPrimaryLabel: colors.superGrey700,
-          disabledPrimaryBg: colors.superGrey200
-        }),
-        tab: __assign(__assign({}, BaseTheme.color.tab), {
-          nonSelectedPrimaryLabel: colors.superGrey500,
-          selectedPrimaryLabel: colors.superBlue500
-        }),
-        background: __assign(__assign({}, BaseTheme.color.background), {
-          primary: colors.superBlue500,
-          disabled: colors.superGrey50,
-          disabledDark: colors.superGrey300,
-          warning: colors.systemRed500
-        }),
-        border: __assign(__assign({}, BaseTheme.color.border), {
-          primary: colors.superBlue500,
-          secondary: colors.neutral900,
-          disabledDark: colors.superGrey300,
-          defaultDark: colors.superGrey400,
-          default: colors.superGrey300,
-          disabled: colors.superGrey200
-        })
-      })
-    });
-    var ThemeContext = react.createContext({
-      theme: B2CTheme,
-      platform: 'mobile'
-    });
-    var useTheme = function () {
-      var themeContext = react.useContext(ThemeContext);
-      var theme = (themeContext || {
-        theme: B2CTheme
-      }).theme;
-      return theme;
-    };
-    var ThemeManagerClass = function () {
-      function ThemeManagerClass() {
-        if (ThemeManagerClass.instance) {
-          throw new Error('You can only create one instance!');
-        }
-        ThemeManagerClass.instance = this;
-        this.theme = B2CTheme;
-      }
-      ThemeManagerClass.prototype.set = function (theme) {
-        switch (theme) {
-          case 'B2C':
-          default:
-            {
-              this.theme = B2CTheme;
-              break;
-            }
-        }
-      };
-      ThemeManagerClass.prototype.get = function () {
-        return this.theme;
-      };
-      return ThemeManagerClass;
-    }();
-    Object.freeze(new ThemeManagerClass());
-
-    var StyledSpinner = styled__default.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: ", ";\n  border-radius: 50%;\n  border-top: ", ";\n  width: ", ";\n  height: ", ";\n  -webkit-animation: spin 2s linear infinite;\n  animation: spin 2s linear infinite;\n\n  @-webkit-keyframes spin {\n    0% {\n      -webkit-transform: rotate(0deg);\n    }\n    100% {\n      -webkit-transform: rotate(360deg);\n    }\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  ", "\n"], ["\n  border: ", ";\n  border-radius: 50%;\n  border-top: ", ";\n  width: ", ";\n  height: ", ";\n  -webkit-animation: spin 2s linear infinite;\n  animation: spin 2s linear infinite;\n\n  @-webkit-keyframes spin {\n    0% {\n      -webkit-transform: rotate(0deg);\n    }\n    100% {\n      -webkit-transform: rotate(360deg);\n    }\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  ", "\n"])), function (_a) {
-        var theme = _a.theme, height = _a.height;
-        var spinerHeight = parseInt(height || theme.size[12]) / 6;
-        return "".concat(spinerHeight > 0 ? spinerHeight : 8, "px solid ").concat(theme.color.spinner.primaryBg);
-    }, function (_a) {
-        var theme = _a.theme, height = _a.height, borderColor = _a.borderColor;
-        var spinerHeight = parseInt(height || theme.size[12]) / 6;
-        return "".concat(spinerHeight > 0 ? spinerHeight : 8, "px solid ").concat(borderColor || theme.color.spinner.primary);
-    }, function (_a) {
-        var width = _a.width, theme = _a.theme;
-        return width || theme.size[12];
-    }, function (_a) {
-        var height = _a.height, theme = _a.theme;
-        return height || theme.size[12];
-    }, function (_a) {
-        var css = _a.css;
-        return css && react$1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n "], ["\n\t", "\n "])), css);
-    });
-    var templateObject_1, templateObject_2;
-
-    function Spinner(_a) {
-        var _b = _a.height, height = _b === void 0 ? '16px' : _b, _c = _a.width, width = _c === void 0 ? '16px' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? '' : _d;
-        var theme = useTheme();
-        return jsxRuntime.jsx(StyledSpinner, { theme: theme, height: height, width: width, borderColor: borderColor });
-    }
+    Spinner.displayName = 'Spinner';
 
     exports.Spinner = Spinner;