@pingux/astro 2.143.0-alpha.0 → 2.143.0-alpha.1

package/lib/components/Text/Text.stories.js

@@ -419,6 +419,358 @@ export var Default = function Default() {
     });
   }))));
 };
+export var Onyx = function Onyx() {
+  var _context7, _context8, _context9, _context10, _context11, _context12;
+  var fontSizesOnyx = {
+    xxx: '33.8px (xxx)',
+    xl: '22.5px (xl)',
+    lg: '18.8px (lg)',
+    md: '15px (md)',
+    sm: '12px (sm)',
+    xs: '11px (xs)',
+    h2: '26.3px (h2)'
+  };
+  var fontWeightsOnyx = {
+    '-1': '300 (-1)',
+    '0': '400 (0)',
+    '1': '500 (1)',
+    '2': '600 (2)',
+    '3': '700 (3)'
+  };
+  var headingVariants = {
+    H1: {
+      weight: fontWeightsOnyx[2],
+      fontSize: fontSizesOnyx.xxx,
+      example: ___EmotionJSX(Text, {
+        variant: "H1",
+        as: "h1"
+      }, '<Text variant="H1" as="H1"/>')
+    },
+    H2: {
+      weight: fontWeightsOnyx[2],
+      fontSize: fontSizesOnyx.h2,
+      example: ___EmotionJSX(Text, {
+        variant: "H2",
+        as: "h2"
+      }, '<Text variant="H2" as="H2"/>')
+    },
+    H3: {
+      weight: fontWeightsOnyx[2],
+      fontSize: fontSizesOnyx.xl,
+      example: ___EmotionJSX(Text, {
+        variant: "H3",
+        as: "h3"
+      }, '<Text variant="H3" as="H3"/>')
+    },
+    H4: {
+      weight: fontWeightsOnyx[2],
+      fontSize: fontSizesOnyx.lg,
+      example: ___EmotionJSX(Text, {
+        variant: "H4",
+        as: "h4"
+      }, '<Text variant="H4" as="H4"/>')
+    },
+    H5: {
+      weight: fontWeightsOnyx[2],
+      fontSize: fontSizesOnyx.md,
+      example: ___EmotionJSX(Text, {
+        variant: "H5",
+        as: "h5"
+      }, '<Text variant="H5" as="H5"/>')
+    },
+    H6: {
+      weight: fontWeightsOnyx[0],
+      fontSize: fontSizesOnyx.sm,
+      example: ___EmotionJSX(Text, {
+        variant: "H6",
+        as: "h6"
+      }, '<Text variant="H6" as="H6"/>')
+    }
+  };
+  var baseAndSubtitleVariants = {
+    'Base (default variant of Text)': {
+      weight: fontWeightsOnyx[0],
+      fontSize: fontSizesOnyx.md,
+      color: 'text.primary',
+      example: ___EmotionJSX(Text, {
+        variant: "base",
+        fontWeight: "0"
+      }, '<Text variant="base"/>')
+    },
+    Subtitle: {
+      weight: fontWeightsOnyx[0],
+      fontSize: fontSizesOnyx.sm,
+      color: 'text.secondary',
+      example: ___EmotionJSX(Text, {
+        variant: "subtitle"
+      }, '<Text variant="subtitle"/>')
+    }
+  };
+  var largeVariants = {
+    Bold: {
+      weight: fontWeightsOnyx[3],
+      fontSize: fontSizesOnyx.lg,
+      example: ___EmotionJSX(Text, {
+        fontSize: "lg",
+        fontWeight: "3"
+      }, '<Text fontSize="lg" fontWeight="3">')
+    },
+    Semibold: {
+      weight: fontWeightsOnyx[2],
+      fontSize: fontSizesOnyx.lg,
+      example: ___EmotionJSX(Text, {
+        fontSize: "lg",
+        fontWeight: "2"
+      }, '<Text fontSize="lg" fontWeight="2">')
+    },
+    Regular: {
+      weight: fontWeightsOnyx[0],
+      fontSize: fontSizesOnyx.lg,
+      example: ___EmotionJSX(Text, {
+        fontSize: "lg",
+        fontWeight: "0"
+      }, '<Text fontSize="lg" fontWeight="0">')
+    },
+    Light: {
+      weight: fontWeightsOnyx[-1],
+      fontSize: fontSizesOnyx.lg,
+      example: ___EmotionJSX(Text, {
+        fontSize: "lg",
+        fontWeight: "0"
+      }, '<Text fontSize="lg" fontWeight="0">')
+    }
+  };
+  var mediumVariants = {
+    Bold: {
+      weight: fontWeightsOnyx[3],
+      fontSize: fontSizesOnyx.md,
+      example: ___EmotionJSX(Text, {
+        fontSize: "md",
+        fontWeight: "3"
+      }, '<Text fontSize="md" fontWeight="3">')
+    },
+    Semibold: {
+      weight: fontWeightsOnyx[2],
+      fontSize: fontSizesOnyx.md,
+      example: ___EmotionJSX(Text, {
+        fontSize: "md",
+        fontWeight: "2"
+      }, '<Text fontSize="md" fontWeight="2">')
+    },
+    Regular: {
+      weight: fontWeightsOnyx[0],
+      fontSize: fontSizesOnyx.md,
+      example: ___EmotionJSX(Text, {
+        fontSize: "md",
+        fontWeight: "0"
+      }, '<Text fontSize="md" fontWeight="0">')
+    },
+    Light: {
+      weight: fontWeightsOnyx[-1],
+      fontSize: fontSizesOnyx.md,
+      example: ___EmotionJSX(Text, {
+        fontSize: "md",
+        fontWeight: "-1"
+      }, '<Text fontSize="md" fontWeight="-1">')
+    }
+  };
+  var smallVariants = {
+    Bold: {
+      weight: fontWeightsOnyx[3],
+      fontSize: fontSizesOnyx.sm,
+      example: ___EmotionJSX(Text, {
+        fontSize: "sm",
+        fontWeight: "3"
+      }, '<Text fontSize="sm" fontWeight="3">')
+    },
+    Semibold: {
+      weight: fontWeightsOnyx[2],
+      fontSize: fontSizesOnyx.sm,
+      example: ___EmotionJSX(Text, {
+        fontSize: "sm",
+        fontWeight: "2"
+      }, '<Text fontSize="sm" fontWeight="2">')
+    },
+    Regular: {
+      weight: fontWeightsOnyx[0],
+      fontSize: fontSizesOnyx.sm,
+      example: ___EmotionJSX(Text, {
+        fontSize: "sm",
+        fontWeight: "0"
+      }, '<Text fontSize="sm" fontWeight="0">')
+    },
+    Light: {
+      weight: fontWeightsOnyx[-1],
+      fontSize: fontSizesOnyx.sm,
+      example: ___EmotionJSX(Text, {
+        fontSize: "sm",
+        fontWeight: "-1"
+      }, '<Text fontSize="sm" fontWeight="-1">')
+    }
+  };
+  var xsmallVariants = {
+    Bold: {
+      weight: fontWeightsOnyx[3],
+      fontSize: fontSizesOnyx.xs,
+      example: ___EmotionJSX(Text, {
+        fontSize: "xs",
+        fontWeight: "3"
+      }, '<Text fontSize="xs" fontWeight="3">')
+    },
+    Semibold: {
+      weight: fontWeightsOnyx[2],
+      fontSize: fontSizesOnyx.xs,
+      example: ___EmotionJSX(Text, {
+        fontSize: "xs",
+        fontWeight: "2"
+      }, '<Text fontSize="xs" fontWeight="2">')
+    },
+    Regular: {
+      weight: fontWeightsOnyx[0],
+      fontSize: fontSizesOnyx.xs,
+      example: ___EmotionJSX(Text, {
+        fontSize: "xs",
+        fontWeight: "0"
+      }, '<Text fontSize="xs" fontWeight="0">')
+    },
+    Light: {
+      weight: fontWeightsOnyx[-1],
+      fontSize: fontSizesOnyx.xs,
+      example: ___EmotionJSX(Text, {
+        fontSize: "xs",
+        fontWeight: "-1"
+      }, '<Text fontSize="xs" fontWeight="-1">')
+    }
+  };
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Table, {
+    mb: "xx"
+  }, ___EmotionJSX(TableHeading, {
+    title: "Heading"
+  }), ___EmotionJSX(TableBody, {
+    sx: sx.tableBody
+  }, _mapInstanceProperty(_context7 = _Object$entries(headingVariants)).call(_context7, function (_ref15) {
+    var _ref16 = _slicedToArray(_ref15, 2),
+      key = _ref16[0],
+      value = _ref16[1];
+    return ___EmotionJSX(TableData, {
+      variant: key,
+      value: value,
+      key: key
+    });
+  }))), ___EmotionJSX(Table, {
+    mb: "xx"
+  }, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
+    key: "head"
+  }, ___EmotionJSX(TableCell, {
+    sx: sx.cell,
+    isHeading: true,
+    width: "60%"
+  }, "Base and Subtitle"), ___EmotionJSX(TableCell, {
+    sx: sx.cell,
+    isHeading: true,
+    width: "20%"
+  }, "Weight"), ___EmotionJSX(TableCell, {
+    sx: sx.cell,
+    isHeading: true,
+    width: "30%"
+  }, "Size"), ___EmotionJSX(TableCell, {
+    sx: sx.cell,
+    isHeading: true,
+    width: "40%"
+  }, "Color"), ___EmotionJSX(TableCell, {
+    sx: sx.cell,
+    isHeading: true
+  }, "Example"))), ___EmotionJSX(TableBody, {
+    sx: sx.tableBody
+  }, _mapInstanceProperty(_context8 = _Object$entries(baseAndSubtitleVariants)).call(_context8, function (_ref17) {
+    var _ref18 = _slicedToArray(_ref17, 2),
+      key = _ref18[0],
+      value = _ref18[1];
+    return ___EmotionJSX(TableRow, {
+      sx: {
+        backgroundColor: 'transparent !important'
+      },
+      key: key
+    }, ___EmotionJSX(TableCell, {
+      sx: sx.cell,
+      width: "60%"
+    }, ___EmotionJSX(Text, null, key)), ___EmotionJSX(TableCell, {
+      sx: sx.cell,
+      width: "20%"
+    }, ___EmotionJSX(Text, null, value.weight)), ___EmotionJSX(TableCell, {
+      sx: sx.cell,
+      width: "30%"
+    }, ___EmotionJSX(Text, null, value.fontSize)), ___EmotionJSX(TableCell, {
+      sx: sx.cell,
+      width: "40%"
+    }, ___EmotionJSX(Text, null, value.color)), ___EmotionJSX(TableCell, {
+      sx: sx.cell
+    }, value.example));
+  }))), ___EmotionJSX(Table, {
+    mb: "xx"
+  }, ___EmotionJSX(TableHeading, {
+    title: "Large"
+  }), ___EmotionJSX(TableBody, {
+    sx: sx.tableBody
+  }, _mapInstanceProperty(_context9 = _Object$entries(largeVariants)).call(_context9, function (_ref19) {
+    var _ref20 = _slicedToArray(_ref19, 2),
+      key = _ref20[0],
+      value = _ref20[1];
+    return ___EmotionJSX(TableData, {
+      variant: key,
+      value: value,
+      key: key
+    });
+  }))), ___EmotionJSX(Table, {
+    mb: "xx"
+  }, ___EmotionJSX(TableHeading, {
+    title: "Medium"
+  }), ___EmotionJSX(TableBody, {
+    sx: sx.tableBody
+  }, _mapInstanceProperty(_context10 = _Object$entries(mediumVariants)).call(_context10, function (_ref21) {
+    var _ref22 = _slicedToArray(_ref21, 2),
+      key = _ref22[0],
+      value = _ref22[1];
+    return ___EmotionJSX(TableData, {
+      variant: key,
+      value: value,
+      key: key
+    });
+  }))), ___EmotionJSX(Table, {
+    mb: "xx"
+  }, ___EmotionJSX(TableHeading, {
+    title: "Small"
+  }), ___EmotionJSX(TableBody, {
+    sx: sx.tableBody
+  }, _mapInstanceProperty(_context11 = _Object$entries(smallVariants)).call(_context11, function (_ref23) {
+    var _ref24 = _slicedToArray(_ref23, 2),
+      key = _ref24[0],
+      value = _ref24[1];
+    return ___EmotionJSX(TableData, {
+      variant: key,
+      value: value,
+      key: key
+    });
+  }))), ___EmotionJSX(Table, {
+    mb: "xx"
+  }, ___EmotionJSX(TableHeading, {
+    title: "XSmall"
+  }), ___EmotionJSX(TableBody, {
+    sx: sx.tableBody
+  }, _mapInstanceProperty(_context12 = _Object$entries(xsmallVariants)).call(_context12, function (_ref25) {
+    var _ref26 = _slicedToArray(_ref25, 2),
+      key = _ref26[0],
+      value = _ref26[1];
+    return ___EmotionJSX(TableData, {
+      variant: key,
+      value: value,
+      key: key
+    });
+  }))));
+};
+Default.parameters = {
+  codesandbox: false
+};
 export var CustomWidth = function CustomWidth(args) {
   return ___EmotionJSX(Box, {
     width: 200

package/lib/components/Text/Text.styles.js

@@ -227,6 +227,11 @@ export var text = _objectSpread(_objectSpread(_objectSpread({
     color: 'text.secondary',
     fontFamily: 'standard'
   },
+  pageHeaderBody: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'sm',
+    color: 'text.secondary',
+    fontFamily: 'standard'
+  }),
   panelHeaderSubtext: _objectSpread(_objectSpread({}, listViewItemSubtext), textEllipsis),
   panelHeaderText: _objectSpread(_objectSpread({}, listViewItemText), textEllipsis),
   sectionTitle: sectionTitle,

package/lib/components/TextField/TextField.stories.js

@@ -17,6 +17,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { useState } from 'react';
 import isEmpty from 'lodash/isEmpty';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { useGetTheme } from '../../hooks';
 import useCopyToClipboard from '../../hooks/useCopyToClipboard';
 import { Box, TextField } from '../../index';
 import { modes as labelModes } from '../../utils/devUtils/constants/labelModes';
@@ -260,6 +261,12 @@ export var WithSlots = function WithSlots() {
     top: '5px',
     height: '32px'
   };
+  var onyxButtonSx = {
+    position: 'absolute',
+    right: 0,
+    top: '9px',
+    height: '32px'
+  };
   var containerSx = {
     sx: {
       '& input': {
@@ -267,6 +274,9 @@ export var WithSlots = function WithSlots() {
       }
     }
   };
+  var _useGetTheme = useGetTheme(),
+    themeState = _useGetTheme.themeState;
+  var isOnyx = themeState.isOnyx;
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TextField, {
     label: "Multiple Addresses",
     labelMode: "float",
@@ -278,7 +288,7 @@ export var WithSlots = function WithSlots() {
     slots: {
       inContainer: ___EmotionJSX(CopyButton, {
         onPress: copyAddressesToClipboard,
-        sx: buttonSx,
+        sx: isOnyx ? onyxButtonSx : buttonSx,
         iconProps: {
           sx: {
             path: {
@@ -300,7 +310,7 @@ export var WithSlots = function WithSlots() {
     slots: {
       inContainer: ___EmotionJSX(CopyButton, {
         onPress: copyJsonToClipboard,
-        sx: buttonSx,
+        sx: isOnyx ? onyxButtonSx : buttonSx,
         iconProps: {
           sx: {
             path: {

package/lib/hooks/useCircularLoader/useCircularLoader.js

@@ -0,0 +1,71 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["mode", "size", "isAstro", "defaultLoaderSize", "progress"];
+import _parseInt from "@babel/runtime-corejs3/core-js-stable/parse-int";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import useTShirtSize from '../useTShirtSize';
+export var circularSizes = {
+  'sm': 16,
+  'md': 24,
+  'lg': 32
+};
+var useCircularLoader = function useCircularLoader(props) {
+  var mode = props.mode,
+    size = props.size,
+    isAstro = props.isAstro,
+    defaultLoaderSize = props.defaultLoaderSize,
+    _props$progress = props.progress,
+    progress = _props$progress === void 0 ? 75 : _props$progress,
+    others = _objectWithoutProperties(props, _excluded);
+  var _useTShirtSize = useTShirtSize({
+      size: size || defaultLoaderSize,
+      sizes: circularSizes
+    }),
+    sizeProps = _useTShirtSize.sizeProps;
+  if (mode === 'dots' || isAstro) {
+    return _objectSpread({
+      size: size || defaultLoaderSize,
+      isCircle: false,
+      radius: 0,
+      center: 0,
+      strokeWidth: 0,
+      dashLength: 0,
+      gapLength: 0
+    }, others);
+  }
+  var parsedSize = _parseInt(sizeProps.size, 10);
+  var actualSize = parsedSize * (10 / 12);
+  var strokeWidth = (parsedSize - actualSize) / 2;
+
+  // Calculate the radius, considering the strokeWidth to fit within the given size
+  var radius = (actualSize - strokeWidth) / 2;
+
+  // Center of the circle
+  var center = actualSize / 2;
+
+  // Calculate the circumference
+  var circumference = 2 * Math.PI * radius;
+
+  // Calculate the dash and gap lengths for the progress
+  var dashLength = progress / 100 * circumference;
+  var gapLength = circumference;
+  return _objectSpread({
+    center: center,
+    isCircle: true,
+    radius: radius,
+    strokeWidth: strokeWidth,
+    dashLength: dashLength,
+    gapLength: gapLength,
+    size: actualSize
+  }, others);
+};
+export default useCircularLoader;

package/lib/hooks/useCircularLoader/useCircularLoader.test.js

@@ -0,0 +1,129 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { renderHook } from '@testing-library/react';
+import useCircularLoader, { circularSizes } from './useCircularLoader';
+var nonCircleProps = {
+  isAstro: true,
+  defaultLoaderSize: 20
+};
+var circleProps = {
+  isAstro: false,
+  defaultLoaderSize: 20
+};
+var defaultProps = {
+  isAstro: false,
+  defaultLoaderSize: 20
+};
+test('astro theme returns isCircle = false ', function () {
+  var _renderHook = renderHook(function () {
+      return useCircularLoader(_objectSpread({}, nonCircleProps));
+    }),
+    result = _renderHook.result;
+  expect(result.current.isCircle).toEqual(false);
+});
+test('mode = "dots" returns  returns isCircle = false ', function () {
+  var _renderHook2 = renderHook(function () {
+      return useCircularLoader(_objectSpread(_objectSpread({}, circleProps), {}, {
+        mode: 'dots'
+      }));
+    }),
+    result = _renderHook2.result;
+  expect(result.current.isCircle).toEqual(false);
+});
+test('numeric calcuations are correct', function () {
+  var _renderHook3 = renderHook(function () {
+      return useCircularLoader(_objectSpread(_objectSpread({}, circleProps), {}, {
+        size: 120
+      }));
+    }),
+    result = _renderHook3.result;
+  var current = result.current;
+  var radius = current.radius,
+    strokeWidth = current.strokeWidth,
+    center = current.center,
+    size = current.size;
+  expect(radius).toEqual(45);
+  expect(center).toEqual(50);
+  expect(strokeWidth).toEqual(10);
+  expect(size).toEqual(100);
+});
+test('returns isCircle = false when mode is "dots"', function () {
+  var _renderHook4 = renderHook(function () {
+      return useCircularLoader(_objectSpread(_objectSpread({}, defaultProps), {}, {
+        mode: 'dots'
+      }));
+    }),
+    result = _renderHook4.result;
+  expect(result.current.isCircle).toBe(false);
+});
+test('returns isCircle = false when isAstro is true', function () {
+  var _renderHook5 = renderHook(function () {
+      return useCircularLoader(_objectSpread(_objectSpread({}, defaultProps), {}, {
+        isAstro: true
+      }));
+    }),
+    result = _renderHook5.result;
+  expect(result.current.isCircle).toBe(false);
+});
+test('calculates correct values for circular loader with size "sm"', function () {
+  var _renderHook6 = renderHook(function () {
+      return useCircularLoader(_objectSpread(_objectSpread({}, defaultProps), {}, {
+        size: 'sm'
+      }));
+    }),
+    result = _renderHook6.result;
+  var size = result.current.size;
+  expect(size).toBeCloseTo(circularSizes.sm * (10 / 12)); // Adjust based on actual calculation
+});
+
+test('calculates correct values for circular loader with size "lg"', function () {
+  var _renderHook7 = renderHook(function () {
+      return useCircularLoader(_objectSpread(_objectSpread({}, defaultProps), {}, {
+        size: 'lg'
+      }));
+    }),
+    result = _renderHook7.result;
+  var size = result.current.size;
+  expect(size).toBeCloseTo(circularSizes.lg * (10 / 12)); // Adjust based on actual calculation
+});
+
+test('uses defaultLoaderSize when size is not provided', function () {
+  var _renderHook8 = renderHook(function () {
+      return useCircularLoader(_objectSpread({}, defaultProps));
+    }),
+    result = _renderHook8.result;
+  expect(result.current.size).toBe(defaultProps.defaultLoaderSize * (10 / 12));
+});
+test('calculates correct values for custom progress', function () {
+  var _renderHook9 = renderHook(function () {
+      return useCircularLoader(_objectSpread(_objectSpread({}, defaultProps), {}, {
+        size: 120,
+        progress: 50
+      }));
+    }),
+    result = _renderHook9.result;
+  var _result$current = result.current,
+    dashLength = _result$current.dashLength,
+    gapLength = _result$current.gapLength,
+    radius = _result$current.radius;
+  expect(dashLength).toBeCloseTo(50 / 100 * 2 * Math.PI * radius); // Progress = 50%
+  expect(gapLength).toBeCloseTo(2 * Math.PI * radius);
+});
+test('returns correct size when size is a custom number', function () {
+  var _renderHook10 = renderHook(function () {
+      return useCircularLoader(_objectSpread(_objectSpread({}, defaultProps), {}, {
+        size: 100
+      }));
+    }),
+    result = _renderHook10.result;
+  expect(result.current.size).toBeCloseTo(100 * (10 / 12)); // Adjust based on actual calculation
+});

package/lib/styles/colors.js

@@ -120,7 +120,10 @@ export var text = {
 export var shadow = chroma(neutral[10]).alpha(0.25).hex();
 var badge = {
   textColor: 'white',
-  background: neutral[10]
+  background: neutral[10],
+  readOnly: 'white',
+  iconBadge: 'white',
+  iconBadgeFill: accent[40]
 };
 var tooltip = accent[20];
 var allColors = {

package/lib/styles/themeOverrides/nextGenDarkMode/colors.js

@@ -33,8 +33,8 @@ var badge = {
   background: nextGenColors['gray-800'],
   textColor: nextGenColors['gray-100']
 };
-var iconWrapper = {
-  wrapper: {
+var twoTone = {
+  bg: {
     orange: nextGenColors['orange-500'],
     cyan: nextGenColors['cyan-500'],
     green: nextGenColors['green-500'],
@@ -51,6 +51,26 @@ var iconWrapper = {
     lightYellow: nextGenColors['yellow-800'],
     lightIndigo: nextGenColors['indigo-700']
   },
+  text: {
+    orange: 'black',
+    cyan: 'black',
+    green: 'black',
+    purple: 'black',
+    pink: 'black',
+    red: 'black',
+    yellow: 'black',
+    teal: 'black',
+    blue: 'black',
+    indigo: 'black',
+    lightBlue: 'black',
+    lightPink: 'black',
+    lightGreen: 'black',
+    lightYellow: 'black',
+    lightIndigo: 'black'
+  }
+};
+var iconWrapper = {
+  wrapper: _objectSpread({}, twoTone.bg),
   icon: {
     orange: 'black',
     cyan: 'black',
@@ -73,6 +93,7 @@ export var colors = _objectSpread(_objectSpread({
   border: border,
   iconWrapper: iconWrapper
 }, overrides), {}, {
+  twoTone: twoTone,
   light: nextGenColors['gray-900'],
   secondary: nextGenColors['gray-400'],
   dark: nextGenColors['gray-400'],

package/lib/styles/themeOverrides/nextGenDarkMode/customProperties/index.js

@@ -11,6 +11,12 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { nextGenThemeValues } from '../../../themes/next-gen/customProperties';
 import icons from './icons';
+var backgroundBaseColor = '#23282e';
+var defaultIconColor = 'gray-400';
+var iFrameContentDivBackgroundColor = backgroundBaseColor;
 export var nextGenDarkThemeValues = _objectSpread(_objectSpread({}, nextGenThemeValues), {}, {
-  icons: icons
+  backgroundBaseColor: backgroundBaseColor,
+  iFrameContentDivBackgroundColor: iFrameContentDivBackgroundColor,
+  icons: icons,
+  defaultIconColor: defaultIconColor
 });