@ornikar/kitt-universal 6.1.0 → 7.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/dist/definitions/Avatar/Avatar.d.ts +5 -4
  2. package/dist/definitions/Avatar/Avatar.d.ts.map +1 -1
  3. package/dist/definitions/Icon/Icon.d.ts +1 -1
  4. package/dist/definitions/Icon/Icon.d.ts.map +1 -1
  5. package/dist/definitions/Icon/SpinningIcon.d.ts +4 -3
  6. package/dist/definitions/Icon/SpinningIcon.d.ts.map +1 -1
  7. package/dist/definitions/Icon/SpinningIcon.web.d.ts +1 -1
  8. package/dist/definitions/Icon/SpinningIcon.web.d.ts.map +1 -1
  9. package/dist/definitions/LoaderIcon/LoaderIcon.d.ts +7 -0
  10. package/dist/definitions/LoaderIcon/LoaderIcon.d.ts.map +1 -0
  11. package/dist/definitions/Overlay/Overlay.d.ts +1 -1
  12. package/dist/definitions/Overlay/Overlay.d.ts.map +1 -1
  13. package/dist/definitions/PageLoader/PageLoader.d.ts +4 -0
  14. package/dist/definitions/PageLoader/PageLoader.d.ts.map +1 -0
  15. package/dist/definitions/PageLoader/PageLoader.web.d.ts +3 -0
  16. package/dist/definitions/PageLoader/PageLoader.web.d.ts.map +1 -0
  17. package/dist/definitions/TimePicker/useTimePicker.d.ts +2 -0
  18. package/dist/definitions/TimePicker/useTimePicker.d.ts.map +1 -1
  19. package/dist/definitions/index.d.ts +5 -6
  20. package/dist/definitions/index.d.ts.map +1 -1
  21. package/dist/definitions/themes/default.d.ts +37 -36
  22. package/dist/definitions/themes/default.d.ts.map +1 -1
  23. package/dist/definitions/themes/late-ocean/avatar.d.ts +7 -3
  24. package/dist/definitions/themes/late-ocean/avatar.d.ts.map +1 -1
  25. package/dist/definitions/themes/late-ocean/pageLoader.d.ts +5 -0
  26. package/dist/definitions/themes/late-ocean/pageLoader.d.ts.map +1 -0
  27. package/dist/index-browser-all.es.android.js +107 -137
  28. package/dist/index-browser-all.es.android.js.map +1 -1
  29. package/dist/index-browser-all.es.ios.js +107 -137
  30. package/dist/index-browser-all.es.ios.js.map +1 -1
  31. package/dist/index-browser-all.es.js +107 -137
  32. package/dist/index-browser-all.es.js.map +1 -1
  33. package/dist/index-browser-all.es.web.js +107 -142
  34. package/dist/index-browser-all.es.web.js.map +1 -1
  35. package/dist/index-node-14.17.cjs.js +63 -92
  36. package/dist/index-node-14.17.cjs.js.map +1 -1
  37. package/dist/index-node-14.17.cjs.web.css +1 -1
  38. package/dist/index-node-14.17.cjs.web.js +75 -104
  39. package/dist/index-node-14.17.cjs.web.js.map +1 -1
  40. package/dist/linaria-themes-browser-all.es.android.js +13 -5
  41. package/dist/linaria-themes-browser-all.es.android.js.map +1 -1
  42. package/dist/linaria-themes-browser-all.es.ios.js +13 -5
  43. package/dist/linaria-themes-browser-all.es.ios.js.map +1 -1
  44. package/dist/linaria-themes-browser-all.es.js +13 -5
  45. package/dist/linaria-themes-browser-all.es.js.map +1 -1
  46. package/dist/linaria-themes-browser-all.es.web.js +13 -5
  47. package/dist/linaria-themes-browser-all.es.web.js.map +1 -1
  48. package/dist/linaria-themes-node-14.17.cjs.js +13 -5
  49. package/dist/linaria-themes-node-14.17.cjs.js.map +1 -1
  50. package/dist/linaria-themes-node-14.17.cjs.web.js +13 -5
  51. package/dist/linaria-themes-node-14.17.cjs.web.js.map +1 -1
  52. package/dist/styles.css +1 -1
  53. package/dist/tsbuildinfo +1 -1
  54. package/package.json +4 -4
  55. package/dist/definitions/Loader/LargeLoader.d.ts +0 -7
  56. package/dist/definitions/Loader/LargeLoader.d.ts.map +0 -1
  57. package/dist/definitions/Loader/LargeLoader.web.d.ts +0 -3
  58. package/dist/definitions/Loader/LargeLoader.web.d.ts.map +0 -1
  59. package/dist/definitions/Loader/Loader.d.ts +0 -8
  60. package/dist/definitions/Loader/Loader.d.ts.map +0 -1
  61. package/dist/definitions/Loader/Loader.web.d.ts +0 -8
  62. package/dist/definitions/Loader/Loader.web.d.ts.map +0 -1
  63. package/dist/definitions/typography/TypographySpinningIcon.d.ts +0 -9
  64. package/dist/definitions/typography/TypographySpinningIcon.d.ts.map +0 -1
@@ -2,7 +2,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
2
2
  import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
3
3
  import { View, Text as Text$1, useWindowDimensions, Image, Pressable, TextInput, StyleSheet, ScrollView, Modal as Modal$1 } from 'react-native';
4
4
  export { useWindowDimensions as useWindowSize } from 'react-native';
5
- import { UserIcon, CheckboxMark, EyeOffIcon, EyeIcon, LoaderIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, XIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
5
+ import { UserIcon, CheckboxMark, EyeOffIcon, EyeIcon, ArcIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, XIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
6
6
  export * from '@ornikar/kitt-icons';
7
7
  import styled, { useTheme, css, ThemeProvider } from 'styled-components/native';
8
8
  import { cloneElement, useContext, createContext, forwardRef, useMemo, useState, Fragment, Children, useEffect } from 'react';
@@ -99,7 +99,7 @@ var KittBreakpointsMax = {
99
99
  LARGE: KittBreakpoints.WIDE - 1
100
100
  };
101
101
 
102
- var _excluded$h = ["accessibilityRole", "base", "small", "medium", "large", "variant", "color"];
102
+ var _excluded$g = ["accessibilityRole", "base", "small", "medium", "large", "variant", "color"];
103
103
  var IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
104
104
  var TypographyColorContext = /*#__PURE__*/createContext('black');
105
105
  function useTypographyColor() {
@@ -176,7 +176,7 @@ function Typography(_ref4) {
176
176
  large = _ref4.large,
177
177
  variant = _ref4.variant,
178
178
  color = _ref4.color,
179
- otherProps = _objectWithoutProperties(_ref4, _excluded$h);
179
+ otherProps = _objectWithoutProperties(_ref4, _excluded$g);
180
180
 
181
181
  var isHeaderTypographyInContext = useContext(IsHeaderTypographyContext);
182
182
  var hasTypographyAncestor = isHeaderTypographyInContext !== undefined;
@@ -263,7 +263,7 @@ Typography.h4 = createHeading(4, 'header4');
263
263
 
264
264
  Typography.h5 = createHeading(5, 'header5');
265
265
 
266
- var _excluded$g = ["size", "base", "round", "light"];
266
+ var _excluded$f = ["size", "round", "light", "sizeVariant"];
267
267
 
268
268
  var getInitials = function (firstname, lastname) {
269
269
  return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
@@ -275,9 +275,10 @@ var StyledAvatarView = /*#__PURE__*/styled(View).withConfig({
275
275
  })(["border-radius:", ";background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], function (_ref) {
276
276
  var theme = _ref.theme,
277
277
  $isRound = _ref.$isRound,
278
- $size = _ref.$size;
278
+ $size = _ref.$size,
279
+ $sizeVariant = _ref.$sizeVariant;
279
280
  if ($isRound) return "".concat($size / 2, "px");
280
- return "".concat(theme.kitt.avatar.borderRadius, "px");
281
+ return "".concat($sizeVariant === 'large' ? theme.kitt.avatar.large.borderRadius : theme.kitt.avatar.borderRadius, "px");
281
282
  }, function (_ref2) {
282
283
  var theme = _ref2.theme,
283
284
  $isLight = _ref2.$isLight;
@@ -296,8 +297,8 @@ function AvatarContent(_ref5) {
296
297
  firstname = _ref5.firstname,
297
298
  lastname = _ref5.lastname,
298
299
  alt = _ref5.alt,
299
- base = _ref5.base,
300
- isLight = _ref5.isLight;
300
+ isLight = _ref5.isLight,
301
+ sizeVariant = _ref5.sizeVariant;
301
302
 
302
303
  if (src) {
303
304
  return /*#__PURE__*/jsx(Image, {
@@ -314,8 +315,8 @@ function AvatarContent(_ref5) {
314
315
 
315
316
  if (firstname && lastname) {
316
317
  return /*#__PURE__*/jsx(Typography.Text, {
317
- base: base,
318
- variant: "bold",
318
+ base: sizeVariant === 'large' ? 'body-large' : 'body',
319
+ variant: sizeVariant === 'large' ? 'bold' : 'regular',
319
320
  color: isLight ? 'black' : 'white',
320
321
  children: getInitials(firstname, lastname)
321
322
  });
@@ -331,20 +332,20 @@ function AvatarContent(_ref5) {
331
332
  function Avatar(_ref6) {
332
333
  var _ref6$size = _ref6.size,
333
334
  size = _ref6$size === void 0 ? 40 : _ref6$size,
334
- _ref6$base = _ref6.base,
335
- base = _ref6$base === void 0 ? 'body-small' : _ref6$base,
336
335
  round = _ref6.round,
337
336
  light = _ref6.light,
338
- props = _objectWithoutProperties(_ref6, _excluded$g);
337
+ sizeVariant = _ref6.sizeVariant,
338
+ props = _objectWithoutProperties(_ref6, _excluded$f);
339
339
 
340
340
  return /*#__PURE__*/jsx(StyledAvatarView, {
341
341
  $size: size,
342
342
  $isRound: round,
343
343
  $isLight: light,
344
+ $sizeVariant: sizeVariant,
344
345
  children: /*#__PURE__*/jsx(AvatarContent, _objectSpread({
345
346
  size: size,
346
- base: base,
347
- isLight: light
347
+ isLight: light,
348
+ sizeVariant: sizeVariant
348
349
  }, props))
349
350
  });
350
351
  }
@@ -388,7 +389,7 @@ function isSubtle(type) {
388
389
  return type.startsWith('subtle');
389
390
  }
390
391
 
391
- var _excluded$f = ["$type", "$variant", "$isStretch", "disabled"];
392
+ var _excluded$e = ["$type", "$variant", "$isStretch", "disabled"];
392
393
  var AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/styled$1("div")({
393
394
  name: "AnimatedButtonPressableContainer",
394
395
  "class": "kitt-u_AnimatedButtonPressableContainer_a1vkj3mh",
@@ -502,7 +503,7 @@ var AnimatedButtonPressable = /*#__PURE__*/forwardRef(function (_ref18, ref) {
502
503
  $variant = _ref18.$variant,
503
504
  $isStretch = _ref18.$isStretch,
504
505
  disabled = _ref18.disabled,
505
- props = _objectWithoutProperties(_ref18, _excluded$f);
506
+ props = _objectWithoutProperties(_ref18, _excluded$e);
506
507
 
507
508
  return /*#__PURE__*/jsx(AnimatedButtonPressableContainer, {
508
509
  ref: ref,
@@ -555,12 +556,12 @@ var BaseStyledButtonPressable = /*#__PURE__*/styled(View).withConfig({
555
556
  return defaultPadding;
556
557
  });
557
558
 
558
- var _excluded$e = ["color"],
559
- _excluded2$3 = ["color"];
559
+ var _excluded$d = ["color"],
560
+ _excluded2$2 = ["color"];
560
561
 
561
562
  function TypographyIconSpecifiedColor(_ref) {
562
563
  var color = _ref.color,
563
- props = _objectWithoutProperties(_ref, _excluded$e);
564
+ props = _objectWithoutProperties(_ref, _excluded$d);
564
565
 
565
566
  var theme = /*#__PURE__*/useTheme();
566
567
  return /*#__PURE__*/jsx(Icon, _objectSpread(_objectSpread({}, props), {}, {
@@ -577,7 +578,7 @@ function TypographyIconInheritColor(props) {
577
578
 
578
579
  function TypographyIcon(_ref2) {
579
580
  var color = _ref2.color,
580
- props = _objectWithoutProperties(_ref2, _excluded2$3);
581
+ props = _objectWithoutProperties(_ref2, _excluded2$2);
581
582
 
582
583
  if (color) {
583
584
  return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread({
@@ -588,7 +589,7 @@ function TypographyIcon(_ref2) {
588
589
  return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread({}, props));
589
590
  }
590
591
 
591
- var _excluded$d = ["type", "variant", "isDisabled", "$isStretch", "icon", "children"];
592
+ var _excluded$c = ["type", "variant", "isDisabled", "$isStretch", "icon", "children"];
592
593
 
593
594
  var getTextColorByType = function (type, variant) {
594
595
  switch (type) {
@@ -727,7 +728,7 @@ function ButtonContent(_ref7) {
727
728
  $isStretch = _ref7.$isStretch,
728
729
  icon = _ref7.icon,
729
730
  children = _ref7.children,
730
- props = _objectWithoutProperties(_ref7, _excluded$d);
731
+ props = _objectWithoutProperties(_ref7, _excluded$c);
731
732
 
732
733
  var color = isDisabled ? 'black-light' : getTextColorByType(type, variant);
733
734
  return /*#__PURE__*/jsx(ButtonContentContainer, {
@@ -868,14 +869,14 @@ var defaultOpenLinkBehavior = {
868
869
  web: 'targetBlank'
869
870
  };
870
871
 
871
- var _excluded$c = ["as", "href", "openLinkBehavior", "onPress"];
872
+ var _excluded$b = ["as", "href", "openLinkBehavior", "onPress"];
872
873
  function ExternalLink(_ref) {
873
874
  var Component = _ref.as,
874
875
  href = _ref.href,
875
876
  _ref$openLinkBehavior = _ref.openLinkBehavior,
876
877
  openLinkBehavior = _ref$openLinkBehavior === void 0 ? defaultOpenLinkBehavior : _ref$openLinkBehavior,
877
878
  onPress = _ref.onPress,
878
- rest = _objectWithoutProperties(_ref, _excluded$c);
879
+ rest = _objectWithoutProperties(_ref, _excluded$b);
879
880
 
880
881
  return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
881
882
  href: href,
@@ -942,6 +943,9 @@ var avatar = {
942
943
  },
943
944
  light: {
944
945
  backgroundColor: lateOceanColorPalette.black100
946
+ },
947
+ large: {
948
+ borderRadius: 30
945
949
  }
946
950
  };
947
951
 
@@ -1333,6 +1337,10 @@ var listItem = {
1333
1337
  innerMargin: 8
1334
1338
  };
1335
1339
 
1340
+ var pageLoader = {
1341
+ size: 60
1342
+ };
1343
+
1336
1344
  var shadows = {
1337
1345
  medium: '0px 10px 20px rgba(41, 48, 51, 0.25)'
1338
1346
  };
@@ -1423,19 +1431,20 @@ var theme = {
1423
1431
  lateOcean: lateOceanColorPalette
1424
1432
  },
1425
1433
  avatar: avatar,
1434
+ breakpoints: breakpoints,
1426
1435
  button: button,
1427
1436
  card: card,
1428
1437
  feedbackMessage: feedbackMessage,
1429
1438
  forms: forms,
1430
- typography: typography,
1431
- tag: tag,
1432
- shadows: shadows,
1433
1439
  fullScreenModal: fullScreenModal,
1434
1440
  iconButton: iconButton,
1435
1441
  listItem: listItem,
1436
- tooltip: tooltip,
1442
+ pageLoader: pageLoader,
1443
+ shadows: shadows,
1437
1444
  skeleton: skeleton,
1438
- breakpoints: breakpoints
1445
+ tag: tag,
1446
+ tooltip: tooltip,
1447
+ typography: typography
1439
1448
  };
1440
1449
 
1441
1450
  function matchWindowSize(_ref, _ref2) {
@@ -1738,12 +1747,12 @@ function DatePickerInputs(_ref4) {
1738
1747
  });
1739
1748
  }
1740
1749
 
1741
- var _excluded$b = ["value"];
1750
+ var _excluded$a = ["value"];
1742
1751
  // This is not yet implemented
1743
1752
  // We still display the inputs for chromatic
1744
1753
  function DatePicker(_ref) {
1745
1754
  var value = _ref.value,
1746
- props = _objectWithoutProperties(_ref, _excluded$b);
1755
+ props = _objectWithoutProperties(_ref, _excluded$a);
1747
1756
 
1748
1757
  return /*#__PURE__*/jsx(DatePickerInputs, _objectSpread({
1749
1758
  handleModalOpen: function handleModalOpen() {},
@@ -1783,7 +1792,7 @@ var InputTextContainer = withTheme( /*#__PURE__*/styled$1("div")({
1783
1792
  }
1784
1793
  }));
1785
1794
 
1786
- var _excluded$a = ["id", "right", "minHeight", "state", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoCompleteType", "keyboardType", "onFocus", "onBlur"];
1795
+ var _excluded$9 = ["id", "right", "minHeight", "state", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoCompleteType", "keyboardType", "onFocus", "onBlur"];
1787
1796
  var StyledTextInput = /*#__PURE__*/styled(TextInput).withConfig({
1788
1797
  displayName: "InputText__StyledTextInput",
1789
1798
  componentId: "kitt-universal__sc-uke279-0"
@@ -1829,7 +1838,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref4, ref) {
1829
1838
  keyboardType = _ref4$keyboardType === void 0 ? 'default' : _ref4$keyboardType,
1830
1839
  _onFocus = _ref4.onFocus,
1831
1840
  _onBlur = _ref4.onBlur,
1832
- props = _objectWithoutProperties(_ref4, _excluded$a);
1841
+ props = _objectWithoutProperties(_ref4, _excluded$9);
1833
1842
 
1834
1843
  var theme = /*#__PURE__*/useTheme();
1835
1844
 
@@ -1981,11 +1990,11 @@ function InputPressable(_ref) {
1981
1990
  return /*#__PURE__*/jsx(Pressable, _objectSpread({}, props));
1982
1991
  }
1983
1992
 
1984
- var _excluded$9 = ["isPasswordDefaultVisible", "right"];
1993
+ var _excluded$8 = ["isPasswordDefaultVisible", "right"];
1985
1994
  function InputPassword(_ref) {
1986
1995
  var isPasswordDefaultVisible = _ref.isPasswordDefaultVisible,
1987
1996
  right = _ref.right,
1988
- props = _objectWithoutProperties(_ref, _excluded$9);
1997
+ props = _objectWithoutProperties(_ref, _excluded$8);
1989
1998
 
1990
1999
  var _useState = useState(Boolean(isPasswordDefaultVisible)),
1991
2000
  _useState2 = _slicedToArray(_useState, 2),
@@ -2363,28 +2372,20 @@ var StyledSpinningIconContainer = withTheme( /*#__PURE__*/styled$1("div")({
2363
2372
  }));
2364
2373
  function SpinningIcon(_ref) {
2365
2374
  var icon = _ref.icon,
2366
- _ref$size = _ref.size,
2367
- size = _ref$size === void 0 ? defaultIconSize : _ref$size,
2368
- align = _ref.align,
2369
2375
  color = _ref.color;
2370
2376
  var clonedIcon = /*#__PURE__*/cloneElement(icon, {
2371
2377
  color: color
2372
2378
  });
2373
- return /*#__PURE__*/jsx(IconContainer$1, {
2374
- $align: align,
2375
- $size: size,
2376
- $color: color,
2377
- children: /*#__PURE__*/jsx(StyledSpinningIconContainer, {
2378
- children: clonedIcon
2379
- })
2379
+ return /*#__PURE__*/jsx(StyledSpinningIconContainer, {
2380
+ children: clonedIcon
2380
2381
  });
2381
2382
  }
2382
2383
 
2383
- var _excluded$8 = ["as", "children"];
2384
+ var _excluded$7 = ["as", "children"];
2384
2385
  function StyleWebWrapper(_ref) {
2385
2386
  var as = _ref.as,
2386
2387
  children = _ref.children,
2387
- props = _objectWithoutProperties(_ref, _excluded$8);
2388
+ props = _objectWithoutProperties(_ref, _excluded$7);
2388
2389
 
2389
2390
  // as or default to div. If as is undefined, T is div but typescript is not sure
2390
2391
  return /*#__PURE__*/jsx(as || 'div', _objectSpread(_objectSpread({}, props), {}, {
@@ -2392,7 +2393,7 @@ function StyleWebWrapper(_ref) {
2392
2393
  }));
2393
2394
  }
2394
2395
 
2395
- var _excluded$7 = ["color", "disabled"];
2396
+ var _excluded$6 = ["color", "disabled"];
2396
2397
  var PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/styled$1("div")({
2397
2398
  name: "PressableIconButtonWebWrapper",
2398
2399
  "class": "kitt-u_PressableIconButtonWebWrapper_p1nlccvg",
@@ -2452,7 +2453,7 @@ var StyledPressableIconButton = /*#__PURE__*/styled(Pressable).withConfig({
2452
2453
  function PressableIconButton(_ref9) {
2453
2454
  var color = _ref9.color,
2454
2455
  disabled = _ref9.disabled,
2455
- props = _objectWithoutProperties(_ref9, _excluded$7);
2456
+ props = _objectWithoutProperties(_ref9, _excluded$6);
2456
2457
 
2457
2458
  return /*#__PURE__*/jsx(StyleWebWrapper, {
2458
2459
  as: PressableIconButtonWebWrapper,
@@ -2535,22 +2536,22 @@ function IconButton(_ref7) {
2535
2536
  });
2536
2537
  }
2537
2538
 
2538
- var _excluded$6 = ["children"];
2539
+ var _excluded$5 = ["children"];
2539
2540
  var ContentView$1 = /*#__PURE__*/styled(View).withConfig({
2540
2541
  displayName: "ListItemContent__ContentView",
2541
2542
  componentId: "kitt-universal__sc-57q0u9-0"
2542
2543
  })(["flex:1 0 0%;align-self:center;"]);
2543
2544
  function ListItemContent(_ref) {
2544
2545
  var children = _ref.children,
2545
- rest = _objectWithoutProperties(_ref, _excluded$6);
2546
+ rest = _objectWithoutProperties(_ref, _excluded$5);
2546
2547
 
2547
2548
  return /*#__PURE__*/jsx(ContentView$1, _objectSpread(_objectSpread({}, rest), {}, {
2548
2549
  children: children
2549
2550
  }));
2550
2551
  }
2551
2552
 
2552
- var _excluded$5 = ["children", "side"],
2553
- _excluded2$2 = ["children", "align"];
2553
+ var _excluded$4 = ["children", "side"],
2554
+ _excluded2$1 = ["children", "align"];
2554
2555
  var SideContainerView = /*#__PURE__*/styled(View).withConfig({
2555
2556
  displayName: "ListItemSideContent__SideContainerView",
2556
2557
  componentId: "kitt-universal__sc-1vajiw-0"
@@ -2568,7 +2569,7 @@ function ListItemSideContainer(_ref3) {
2568
2569
  var children = _ref3.children,
2569
2570
  _ref3$side = _ref3.side,
2570
2571
  side = _ref3$side === void 0 ? 'left' : _ref3$side,
2571
- rest = _objectWithoutProperties(_ref3, _excluded$5);
2572
+ rest = _objectWithoutProperties(_ref3, _excluded$4);
2572
2573
 
2573
2574
  return /*#__PURE__*/jsx(SideContainerView, _objectSpread(_objectSpread({
2574
2575
  side: side
@@ -2587,7 +2588,7 @@ function ListItemSideContent(_ref5) {
2587
2588
  var children = _ref5.children,
2588
2589
  _ref5$align = _ref5.align,
2589
2590
  align = _ref5$align === void 0 ? 'auto' : _ref5$align,
2590
- rest = _objectWithoutProperties(_ref5, _excluded2$2);
2591
+ rest = _objectWithoutProperties(_ref5, _excluded2$1);
2591
2592
 
2592
2593
  return /*#__PURE__*/jsx(SideContentView, _objectSpread(_objectSpread({
2593
2594
  align: align
@@ -2596,7 +2597,7 @@ function ListItemSideContent(_ref5) {
2596
2597
  }));
2597
2598
  }
2598
2599
 
2599
- var _excluded$4 = ["children", "withPadding", "borders", "left", "right", "onPress"];
2600
+ var _excluded$3 = ["children", "withPadding", "borders", "left", "right", "onPress"];
2600
2601
  var ContainerView = /*#__PURE__*/styled(View).withConfig({
2601
2602
  displayName: "ListItem__ContainerView",
2602
2603
  componentId: "kitt-universal__sc-2afp9s-0"
@@ -2636,7 +2637,7 @@ function ListItem(_ref5) {
2636
2637
  left = _ref5.left,
2637
2638
  right = _ref5.right,
2638
2639
  onPress = _ref5.onPress,
2639
- rest = _objectWithoutProperties(_ref5, _excluded$4);
2640
+ rest = _objectWithoutProperties(_ref5, _excluded$3);
2640
2641
 
2641
2642
  var Wrapper = onPress ? Pressable : Fragment;
2642
2643
  var wrapperProps = onPress ? _objectSpread({
@@ -2665,88 +2666,11 @@ ListItem.Content = ListItemContent;
2665
2666
  ListItem.SideContent = ListItemSideContent;
2666
2667
  ListItem.SideContainer = ListItemSideContainer;
2667
2668
 
2668
- var LargeLoaderContainer = withTheme( /*#__PURE__*/styled$1("div")({
2669
- name: "LargeLoaderContainer",
2670
- "class": "kitt-u_LargeLoaderContainer_l2im3sa",
2671
- vars: {
2672
- "l2im3sa-0": [function (_ref) {
2673
- var theme = _ref.theme;
2674
- return theme.kitt.colors.separator;
2675
- }],
2676
- "l2im3sa-1": [function (_ref2) {
2677
- var theme = _ref2.theme;
2678
- return theme.kitt.colors.primary;
2679
- }]
2680
- }
2681
- }));
2682
- function LargeLoader() {
2683
- return /*#__PURE__*/jsx(LargeLoaderContainer, {
2684
- children: /*#__PURE__*/jsxs("svg", {
2685
- width: "60",
2686
- height: "60",
2687
- children: [/*#__PURE__*/jsx("g", {
2688
- "data-large-loader": "base",
2689
- children: /*#__PURE__*/jsx("circle", {
2690
- cx: "30",
2691
- cy: "30",
2692
- r: "27",
2693
- fill: "none"
2694
- })
2695
- }), /*#__PURE__*/jsx("g", {
2696
- "data-large-loader": "fill",
2697
- children: /*#__PURE__*/jsx("circle", {
2698
- cx: "30",
2699
- cy: "30",
2700
- r: "27",
2701
- fill: "none"
2702
- })
2703
- })]
2704
- })
2705
- });
2706
- }
2707
-
2708
- var _excluded$3 = ["color"],
2709
- _excluded2$1 = ["color"];
2710
-
2711
- function TypographySpinningIconSpecifiedColor(_ref) {
2712
- var color = _ref.color,
2713
- props = _objectWithoutProperties(_ref, _excluded$3);
2714
-
2715
- var theme = /*#__PURE__*/useTheme();
2716
- return /*#__PURE__*/jsx(SpinningIcon, _objectSpread(_objectSpread({}, props), {}, {
2717
- color: color === 'inherit' ? 'inherit' : theme.kitt.typography.colors[color]
2718
- }));
2719
- }
2720
-
2721
- function TypographySpinningIconInheritColor(props) {
2722
- var color = useTypographyColor();
2723
- return /*#__PURE__*/jsx(TypographySpinningIconSpecifiedColor, _objectSpread({
2724
- color: color
2725
- }, props));
2726
- }
2727
-
2728
- function TypographySpinningIcon(_ref2) {
2729
- var color = _ref2.color,
2730
- props = _objectWithoutProperties(_ref2, _excluded2$1);
2731
-
2732
- if (color) {
2733
- return /*#__PURE__*/jsx(TypographySpinningIconSpecifiedColor, _objectSpread({
2734
- color: color
2735
- }, props));
2736
- }
2737
-
2738
- return /*#__PURE__*/jsx(TypographySpinningIconInheritColor, _objectSpread({}, props));
2739
- }
2740
-
2741
- function Loader(_ref) {
2742
- var _ref$color = _ref.color,
2743
- color = _ref$color === void 0 ? 'primary' : _ref$color,
2744
- _ref$size = _ref.size,
2745
- size = _ref$size === void 0 ? 20 : _ref$size;
2746
- return /*#__PURE__*/jsx(TypographySpinningIcon, {
2669
+ function LoaderIcon(_ref) {
2670
+ var color = _ref.color;
2671
+ return /*#__PURE__*/jsx(SpinningIcon, {
2747
2672
  color: color,
2748
- size: size,
2749
- icon: /*#__PURE__*/jsx(LoaderIcon, {})
2673
+ icon: /*#__PURE__*/jsx(ArcIcon, {})
2750
2674
  });
2751
2675
  }
2752
2676
 
@@ -2920,8 +2844,7 @@ function Overlay(_ref2) {
2920
2844
  var onPress = _ref2.onPress;
2921
2845
  return /*#__PURE__*/jsx(OverlayPressable, {
2922
2846
  accessibilityRole: "none",
2923
- onPress: onPress,
2924
- children: /*#__PURE__*/jsx(View, {})
2847
+ onPress: onPress
2925
2848
  });
2926
2849
  }
2927
2850
 
@@ -3089,6 +3012,48 @@ function Notification(_ref) {
3089
3012
  });
3090
3013
  }
3091
3014
 
3015
+ var PageLoaderContainer = withTheme( /*#__PURE__*/styled$1("div")({
3016
+ name: "PageLoaderContainer",
3017
+ "class": "kitt-u_PageLoaderContainer_ptkwz2j",
3018
+ vars: {
3019
+ "ptkwz2j-0": [function (_ref) {
3020
+ var theme = _ref.theme;
3021
+ return theme.kitt.colors.separator;
3022
+ }],
3023
+ "ptkwz2j-1": [function (_ref2) {
3024
+ var theme = _ref2.theme;
3025
+ return theme.kitt.colors.primary;
3026
+ }]
3027
+ }
3028
+ }));
3029
+ function PageLoader() {
3030
+ var theme = /*#__PURE__*/useTheme();
3031
+ var size = theme.kitt.pageLoader.size;
3032
+ return /*#__PURE__*/jsx(PageLoaderContainer, {
3033
+ children: /*#__PURE__*/jsxs("svg", {
3034
+ width: size,
3035
+ height: size,
3036
+ children: [/*#__PURE__*/jsx("g", {
3037
+ "data-large-loader": "base",
3038
+ children: /*#__PURE__*/jsx("circle", {
3039
+ cx: "30",
3040
+ cy: "30",
3041
+ r: "27",
3042
+ fill: "none"
3043
+ })
3044
+ }), /*#__PURE__*/jsx("g", {
3045
+ "data-large-loader": "fill",
3046
+ children: /*#__PURE__*/jsx("circle", {
3047
+ cx: "30",
3048
+ cy: "30",
3049
+ r: "27",
3050
+ fill: "none"
3051
+ })
3052
+ })]
3053
+ })
3054
+ });
3055
+ }
3056
+
3092
3057
  var StyledSkeleton = withTheme( /*#__PURE__*/styled$1("div")({
3093
3058
  name: "StyledSkeleton",
3094
3059
  "class": "kitt-u_StyledSkeleton_sc3upcl",
@@ -3920,5 +3885,5 @@ function MatchWindowSize(_ref) {
3920
3885
  return children;
3921
3886
  }
3922
3887
 
3923
- export { Avatar, Button, Card, Checkbox, DatePicker, Emoji, ExternalLink, Flex, FullScreenModal, Icon, IconButton, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpoints, KittBreakpointsMax, KittThemeDecorator, KittThemeProvider, Label, LargeLoader, ListItem, Loader, MatchWindowSize, Message, Modal, Notification, Radio, DeprecatedSection as Section, Skeleton, SpinningIcon, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, TypographySpinningIcon, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor, withTheme };
3888
+ export { Avatar, Button, Card, Checkbox, DatePicker, Emoji, ExternalLink, Flex, FullScreenModal, Icon, IconButton, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpoints, KittBreakpointsMax, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MatchWindowSize, Message, Modal, Notification, Overlay, PageLoader, Radio, DeprecatedSection as Section, Skeleton, SpinningIcon, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor, withTheme };
3924
3889
  //# sourceMappingURL=index-browser-all.es.web.js.map