@ornikar/kitt-universal 3.4.0 → 3.5.0

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

@@ -2,4 +2,5 @@
 .a1vkj3mh{width:auto;display:var(--a1vkj3mh-0);-webkit-align-self:var(--a1vkj3mh-1);-ms-flex-item-align:var(--a1vkj3mh-1);align-self:var(--a1vkj3mh-1);outline:none;}@media (var(--a1vkj3mh-2)){.kitt-hover .a1vkj3mh > * > *,.a1vkj3mh:hover > * > *{-webkit-transform:scale(var(--a1vkj3mh-3));-ms-transform:scale(var(--a1vkj3mh-3));transform:scale(var(--a1vkj3mh-3));}}.kitt-active .a1vkj3mh > * > *,.a1vkj3mh:active > * > *{-webkit-transform:var(--a1vkj3mh-4);-ms-transform:var(--a1vkj3mh-4);transform:var(--a1vkj3mh-4);}.kitt-active .a1vkj3mh > * > *,.a1vkj3mh:active > * > *,.kitt-hover .a1vkj3mh > * > *,.a1vkj3mh:hover > * > *{background:var(--a1vkj3mh-5);}.a1vkj3mh > * > *{-webkit-transform:scale(1) translateZ(0);-ms-transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:var(--a1vkj3mh-6);transition:var(--a1vkj3mh-6);}.a1vkj3mh > * > *::after,.a1vkj3mh > * > *::before{content:'';position:absolute;border-radius:var(--a1vkj3mh-7);-webkit-transition:var(--a1vkj3mh-8);transition:var(--a1vkj3mh-8);}.a1vkj3mh > * > *::after{opacity:var(--a1vkj3mh-9);top:var(--a1vkj3mh-10);left:var(--a1vkj3mh-10);width:var(--a1vkj3mh-12);height:var(--a1vkj3mh-12);border:var(--a1vkj3mh-14);}.a1vkj3mh > * > *::before{opacity:0;border:var(--a1vkj3mh-15);width:100%;height:100%;top:var(--a1vkj3mh-16);left:var(--a1vkj3mh-16);}.kitt-focus .a1vkj3mh > *,.a1vkj3mh:focus > *,.a1vkj3mh > [data-focusvisible-polyfill]{outline:none;}.kitt-focus .a1vkj3mh > * > *::before,.a1vkj3mh:focus > * > *::before,.a1vkj3mh > [data-focusvisible-polyfill] > *::before{opacity:1;}.kitt-hover .a1vkj3mh > * > *::before,.a1vkj3mh:hover > * > *::before,.kitt-active .a1vkj3mh > * > *::before,.a1vkj3mh:active > * > *::before{opacity:0;}.a1vkj3mh > *{color:var(--a1vkj3mh-18);}.kitt-hover .a1vkj3mh > *,.a1vkj3mh:hover > *{color:var(--a1vkj3mh-19);}.kitt-active .a1vkj3mh > *,.a1vkj3mh:active > *{color:var(--a1vkj3mh-20);}
 @media (hover:none) and (pointer:coarse){.p1nlccvg > *:hover,.kitt-hover .p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-0));-ms-transform:scale(var(--p1nlccvg-0));transform:scale(var(--p1nlccvg-0));}}@media (var(--p1nlccvg-1)){.p1nlccvg > *:hover,.kitt-hover .p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-2));-ms-transform:scale(var(--p1nlccvg-2));transform:scale(var(--p1nlccvg-2));}}.p1nlccvg > *:active,.kitt-active .p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-3));-ms-transform:scale(var(--p1nlccvg-3));transform:scale(var(--p1nlccvg-3));}.p1nlccvg,.p1nlccvg > [data-focusvisible-polyfill]{outline:none;}.p1nlccvg > *:hover,.kitt-hover .p1nlccvg > *,.p1nlccvg > *:focus,.kitt-focus .p1nlccvg > *,.p1nlccvg > [data-focusvisible-polyfill],.p1nlccvg > *:active,.kitt-active .p1nlccvg > *{background-color:var(--p1nlccvg-4);}
 .l2im3sa{width:60px;height:60px;-webkit-transform:scale(-1) rotate(90deg);-ms-transform:scale(-1) rotate(90deg);transform:scale(-1) rotate(90deg);}@-webkit-keyframes LargeLoaderInit-l2im3sa{0%{stroke-dashoffset:169.64px;}100%{stroke-dashoffset:0;}}@keyframes LargeLoaderInit-l2im3sa{0%{stroke-dashoffset:169.64px;}100%{stroke-dashoffset:0;}}@-webkit-keyframes LargeLoaderOffset-l2im3sa{0%{stroke-dashoffset:169.64px;}100%{stroke-dashoffset:34px;}}@keyframes LargeLoaderOffset-l2im3sa{0%{stroke-dashoffset:169.64px;}100%{stroke-dashoffset:34px;}}@-webkit-keyframes LargeLoaderRotation-l2im3sa{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 LargeLoaderRotation-l2im3sa{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}.l2im3sa circle,.l2im3sa g{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;}.l2im3sa circle{stroke-width:3px;stroke-dasharray:169.64px;stroke-dashoffset:169.64px;stroke-linecap:round;}.l2im3sa g[data-large-loader='base'] circle{stroke:var(--l2im3sa-0);-webkit-animation:LargeLoaderInit-l2im3sa 1s cubic-bezier(0.39,0.575,0.565,1) 0.5s forwards;animation:LargeLoaderInit-l2im3sa 1s cubic-bezier(0.39,0.575,0.565,1) 0.5s forwards;}.l2im3sa g[data-large-loader='fill']{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-animation:LargeLoaderRotation-l2im3sa 1.8s linear 0.5s infinite;animation:LargeLoaderRotation-l2im3sa 1.8s linear 0.5s infinite;}.l2im3sa g[data-large-loader='fill'] circle{stroke:var(--l2im3sa-1);-webkit-animation:LargeLoaderOffset-l2im3sa 1.8s cubic-bezier(0.39,0.575,0.565,1) 0.5s infinite alternate,LargeLoaderRotation-l2im3sa 2.16s linear 0.5s infinite;animation:LargeLoaderOffset-l2im3sa 1.8s cubic-bezier(0.39,0.575,0.565,1) 0.5s infinite alternate,LargeLoaderRotation-l2im3sa 2.16s linear 0.5s infinite;}
+.sc3upcl{background-color:var(--sc3upcl-0);position:relative;overflow:hidden;height:100%;width:100%;}@-webkit-keyframes flareTranslate-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-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%);}}.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-sc3upcl;animation-name:flareTranslate-sc3upcl;}
 .tcwz3nt > *:hover,.tcwz3nt > *:active,.kitt-hover .tcwz3nt > *{-webkit-text-decoration:none;text-decoration:none;}.tcwz3nt > *:hover,.tcwz3nt > *:active,.kitt-hover .tcwz3nt > *{-webkit-text-decoration:var(--tcwz3nt-0);text-decoration:var(--tcwz3nt-0);}

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

@@ -1162,6 +1162,7 @@ function TextArea({ ...props
   const theme = /*#__PURE__*/styled.useTheme();
   return /*#__PURE__*/jsxRuntime.jsx(InputText, {
     multiline: true,
+    textAlignVertical: "top",
     ...props,
     type: "text",
     minHeight: theme.kitt.forms.input.textAreaMinHeight
@@ -1918,6 +1919,83 @@ function Notification({
   });
 }
 
+const StyledSkeleton = withTheme( /*#__PURE__*/react.styled("div")({
+  name: "StyledSkeleton",
+  class: "sc3upcl",
+  vars: {
+    "sc3upcl-0": [({
+      theme
+    }) => theme.kitt.skeleton.backgroundColor],
+    "sc3upcl-1": [({
+      $isLoading,
+      theme
+    }) => $isLoading ? `linear-gradient(
+      -90deg,
+      ${theme.kitt.skeleton.backgroundColor},
+      ${theme.kitt.skeleton.flareColor} 50%,
+      ${theme.kitt.skeleton.backgroundColor} 100%
+      )` : 'none'],
+    "sc3upcl-2": [({
+      $isLoading
+    }) => $isLoading ? '1s ease-in-out infinite' : 'none']
+  }
+}));
+function SkeletonContent({
+  isLoading
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(StyledSkeleton, {
+    $isLoading: isLoading
+  });
+}
+
+function Skeleton({
+  isLoading,
+  style
+}) {
+  const [width, setWidth] = react$1.useState(0);
+  return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.View, {
+    style: style,
+    onLayout: ({
+      nativeEvent
+    }) => setWidth(nativeEvent.layout.width),
+    children: /*#__PURE__*/jsxRuntime.jsx(SkeletonContent, {
+      isLoading: isLoading,
+      width: width
+    })
+  });
+}
+const Bar = /*#__PURE__*/styled__default(Skeleton).withConfig({
+  displayName: "Skeleton__Bar",
+  componentId: "kitt-universal__sc-1w5cm3i-0"
+})(["width:100%;height:", "px;border-radius:", "px;overflow:hidden;"], ({
+  theme
+}) => theme.kitt.spacing * 2, ({
+  theme
+}) => theme.kitt.spacing * 2);
+const Circle = /*#__PURE__*/styled__default(Skeleton).withConfig({
+  displayName: "Skeleton__Circle",
+  componentId: "kitt-universal__sc-1w5cm3i-1"
+})(["width:", "px;height:", "px;border-radius:", "px;overflow:hidden;"], ({
+  theme
+}) => theme.kitt.spacing * 12, ({
+  theme
+}) => theme.kitt.spacing * 12, ({
+  theme
+}) => theme.kitt.spacing * 6);
+const Square = /*#__PURE__*/styled__default(Skeleton).withConfig({
+  displayName: "Skeleton__Square",
+  componentId: "kitt-universal__sc-1w5cm3i-2"
+})(["width:", "px;height:", "px;border-radius:", "px;overflow:hidden;"], ({
+  theme
+}) => theme.kitt.spacing * 12, ({
+  theme
+}) => theme.kitt.spacing * 12, ({
+  theme
+}) => theme.kitt.spacing * 1.5);
+Skeleton.Bar = Bar;
+Skeleton.Circle = Circle;
+Skeleton.Square = Square;
+
 const Flex = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   shouldForwardProp: (prop, defaultValidatorFn) => !['direction', 'padding'].includes(prop) && defaultValidatorFn(prop)
 }).withConfig({
@@ -2599,6 +2677,12 @@ const shadowsLateOceanTheme = {
   medium: '0px 10px 20px rgba(41, 48, 51, 0.25)'
 };
 
+const skeletonTheme = {
+  backgroundColor: lateOceanColorPalette.black100,
+  flareColor: lateOceanColorPalette.black200,
+  animationDuration: 1000
+};
+
 const tagLateOceanTheme = {
   borderRadius: '10px',
   padding: '2px 12px',
@@ -2650,18 +2734,16 @@ const tooltip = {
 };
 
 const calcLineHeight = (fontSize, lineHeightMultiplier) => Math.round(fontSize * lineHeightMultiplier);
-
 const createTypographyTypeConfig = (lineHeightMultiplier, baseAndSmallFontSize, mediumAndWideFontSize) => ({
   baseAndSmall: {
     fontSize: `${baseAndSmallFontSize}px`,
-    lineHeight: `${calcLineHeight(lineHeightMultiplier, baseAndSmallFontSize)}px`
+    lineHeight: `${calcLineHeight(baseAndSmallFontSize, lineHeightMultiplier)}px`
   },
   mediumAndWide: {
     fontSize: `${mediumAndWideFontSize}px`,
-    lineHeight: `${calcLineHeight(lineHeightMultiplier, baseAndSmallFontSize)}px`
+    lineHeight: `${calcLineHeight(mediumAndWideFontSize, lineHeightMultiplier)}px`
   }
 });
-
 const typographyLateOceanTheme = {
   colors: {
     black: lateOceanColorPalette.black1000,
@@ -2762,7 +2844,8 @@ const theme = {
   fullScreenModal: fullScreenModalLateOceanTheme,
   iconButton,
   listItem: listItemLateOceanTheme,
-  tooltip
+  tooltip,
+  skeleton: skeletonTheme
 };
 
 function TimePicker() {
@@ -3124,6 +3207,13 @@ function useKittTheme() {
   }, [dimensions]);
 }
 
+const hex2rgba = (hex, alpha = 1) => {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
 function KittThemeProvider({
   children
 }) {
@@ -3184,6 +3274,7 @@ exports.Modal = Modal;
 exports.Notification = Notification;
 exports.Radio = Radio;
 exports.Section = DeprecatedSection;
+exports.Skeleton = Skeleton;
 exports.Story = Story;
 exports.StoryBlock = StoryBlock;
 exports.StoryContainer = StoryContainer;
@@ -3191,6 +3282,7 @@ exports.StoryDecorator = StoryDecorator;
 exports.StoryGrid = StoryGrid;
 exports.StorySection = StorySection;
 exports.StoryTitle = StoryTitle;
+exports.StyleWebWrapper = StyleWebWrapper;
 exports.Tag = Tag;
 exports.TextArea = TextArea;
 exports.TimePicker = TimePicker;
@@ -3200,6 +3292,7 @@ exports.TypographyEmoji = TypographyEmoji;
 exports.TypographyIcon = TypographyIcon;
 exports.TypographyLink = TypographyLink;
 exports.createWindowSizeHelper = createWindowSizeHelper;
+exports.hex2rgba = hex2rgba;
 exports.matchWindowSize = matchWindowSize;
 exports.styledTextInputMixin = styledTextInputMixin;
 exports.theme = theme;