@via-profit/ui-kit 0.8.0 → 0.9.0

package/esm/FileDropzone/utils.js

@@ -0,0 +1,37 @@
+/**
+ * The file matches `accept` of the input: the MIME types (`image/png`), the groups (`image/*`)
+ * and the extensions (`.pdf`). The empty `accept` takes any file
+ */
+export const isFileAccepted = (file, accept) => {
+    if (!accept) {
+        return true;
+    }
+    const name = file.name.toLowerCase();
+    const type = file.type.toLowerCase();
+    return accept
+        .split(',')
+        .map(item => item.trim().toLowerCase())
+        .filter(Boolean)
+        .some(item => {
+        if (item.startsWith('.')) {
+            return name.endsWith(item);
+        }
+        if (item.endsWith('/*')) {
+            return type.startsWith(item.slice(0, -1));
+        }
+        return type === item;
+    });
+};
+/**
+ * «54.1 KB», «2.3 MB»: the decimal units, as the file managers show
+ */
+export const formatFileSize = (bytes) => {
+    const units = ['B', 'KB', 'MB', 'GB'];
+    let value = bytes;
+    let unit = 0;
+    while (value >= 1000 && unit < units.length - 1) {
+        value /= 1000;
+        unit += 1;
+    }
+    return `${unit === 0 ? value : value.toFixed(1).replace(/\.0$/, '')} ${units[unit]}`;
+};

package/esm/HintPopover/HintPopoverButton.js

@@ -0,0 +1,62 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+/**
+ * The color of the text around: the button stands in the text, in the label of a field,
+ * in a colored header of the dialog
+ */
+const StyledButton = styled.button `
+  box-sizing: content-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 0.15em;
+  padding: 0.2em;
+  border: none;
+  border-radius: 50%;
+  background: none;
+  font: inherit;
+  font-size: 1em;
+  line-height: 1;
+  color: inherit;
+  opacity: 0.6;
+  cursor: pointer;
+  vertical-align: middle;
+  transition:
+    opacity 120ms ease-out,
+    background-color 120ms ease-out;
+
+  &:hover,
+  &:focus-visible,
+  &[aria-expanded='true'] {
+    opacity: 1;
+    background-color: color-mix(in srgb, currentColor 15%, transparent);
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.color.accentPrimary.toString()};
+    outline-offset: 1px;
+  }
+`;
+const Path = styled.path `
+  fill: currentColor;
+`;
+/**
+ * «?» in the circle. `children` replaces the icon
+ */
+const HintPopoverButton = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(StyledButton, Object.assign({ type: "button" }, nativeProps, { ref: ref }), children !== null && children !== void 0 ? children : (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", "aria-hidden": true },
+        React.createElement(Path, { d: "M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" })))));
+};
+export default React.forwardRef(HintPopoverButton);

package/esm/HintPopover/HintPopoverContainer.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { keyframes } from '@emotion/react';
+import { elevation } from '../ThemeProvider/tokens';
+const appear = keyframes `
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
+const StyledContainer = styled.div `
+  box-sizing: border-box;
+  max-width: 22em;
+  padding: 0.7em 0.9em;
+  font-size: 0.875rem;
+  font-weight: normal;
+  line-height: 1.45;
+  text-align: left;
+  white-space: normal;
+  overflow-wrap: break-word;
+  color: ${({ theme }) => theme.color.textPrimary.toString()};
+  background-color: ${({ theme }) => theme.color.surface.toString()};
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 1.6}em;
+  box-shadow: ${({ theme }) => elevation(theme, 'popup')};
+  animation: ${appear} 120ms ease-out;
+
+  & p {
+    margin: 0 0 0.5em;
+  }
+
+  & p:last-child {
+    margin-bottom: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+`;
+/**
+ * The bubble with the content of the hint
+ */
+const HintPopoverContainer = (props, ref) => React.createElement(StyledContainer, Object.assign({}, props, { ref: ref }));
+export default React.forwardRef(HintPopoverContainer);

package/esm/HintPopover/index.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+import Popper from '../Popper';
+import ClickOutside from '../ClickOutside';
+import Button from './HintPopoverButton';
+import Container from './HintPopoverContainer';
+/**
+ * «?» next to a field, a button or a title: the explanation in the popper by the click.
+ * For what is needed sometimes; what everybody must know goes into InfoNote.
+ * Closes by the outside click and by Escape, Escape returns the focus to the button
+ */
+const HintPopover = props => {
+    const { children, label = 'Hint', icon, placement = 'bottom-start', isOpen, onOpenChange, offset = 6, zIndex, id, overrides, } = props;
+    const theme = useTheme();
+    const generatedId = `hint-popover-${React.useId().replace(/:/g, '')}`;
+    const hintId = id || generatedId;
+    const [button, setButton] = React.useState(null);
+    const [internalOpen, setInternalOpen] = React.useState(false);
+    const isControlled = typeof isOpen !== 'undefined';
+    const open = isControlled ? Boolean(isOpen) : internalOpen;
+    const overridesMap = React.useMemo(() => ({
+        Button: (overrides === null || overrides === void 0 ? void 0 : overrides.Button) || Button,
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,
+    }), [overrides]);
+    const setOpen = React.useCallback((next) => {
+        if (!isControlled) {
+            setInternalOpen(next);
+        }
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    }, [isControlled, onOpenChange]);
+    React.useEffect(() => {
+        if (!open) {
+            return undefined;
+        }
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                setOpen(false);
+                button === null || button === void 0 ? void 0 : button.focus();
+            }
+        };
+        document.addEventListener('keydown', onKeyDown);
+        return () => document.removeEventListener('keydown', onKeyDown);
+    }, [open, setOpen, button]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(overridesMap.Button, { ref: setButton, title: label, "aria-label": label, "aria-expanded": open, "aria-controls": open ? hintId : undefined, onClick: () => setOpen(!open) }, icon),
+        React.createElement(ClickOutside, { onOutsideClick: () => open && setOpen(false), ignoreElements: [button] },
+            React.createElement(Popper, { isOpen: open, anchorElement: button, anchorPos: placement, autoFlip: true, offset: offset, viewportMargin: 8, zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : theme.zIndex.modal + 1, id: hintId },
+                React.createElement(overridesMap.Container, null, children)))));
+};
+export * from './HintPopoverButton';
+export * from './HintPopoverContainer';
+export default HintPopover;

package/esm/InfoNote/InfoNoteContainer.js

@@ -0,0 +1,49 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+/**
+ * The color of the variant: the border, the icon and the tint of the background
+ */
+export const variantColor = (theme, variant) => {
+    switch (variant) {
+        case 'success':
+            return theme.color.success;
+        case 'warning':
+            return theme.color.warning;
+        case 'error':
+            return theme.color.error;
+        default:
+            return theme.color.accentPrimary;
+    }
+};
+const StyledContainer = styled.div `
+  box-sizing: border-box;
+  display: flex;
+  gap: 0.6em;
+  align-items: flex-start;
+  padding: 0.6em 0.8em;
+  font-size: 0.875em;
+  line-height: 1.4;
+  overflow-wrap: break-word;
+  color: ${({ theme }) => theme.color.textPrimary.toString()};
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 1.6}em;
+  border-left: 3px solid ${({ theme, $variant }) => variantColor(theme, $variant).toString()};
+  background-color: ${({ theme, $variant }) => variantColor(theme, $variant)
+    .alpha($variant === 'warning' ? 0.14 : 0.1)
+    .toString()};
+`;
+const InfoNoteContainer = (props, ref) => {
+    const { variant, children } = props, nativeProps = __rest(props, ["variant", "children"]);
+    return (React.createElement(StyledContainer, Object.assign({}, nativeProps, { "$variant": variant, ref: ref }), children));
+};
+export default React.forwardRef(InfoNoteContainer);

package/esm/InfoNote/InfoNoteContent.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledContent = styled.div `
+  flex: 1;
+  min-width: 0;
+`;
+/**
+ * The title and the text, to the right of the icon
+ */
+const InfoNoteContent = (props, ref) => React.createElement(StyledContent, Object.assign({}, props, { ref: ref }));
+export default React.forwardRef(InfoNoteContent);

package/esm/InfoNote/InfoNoteIcon.js

@@ -0,0 +1,42 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { variantColor } from './InfoNoteContainer';
+const StyledIcon = styled.span `
+  flex: none;
+  display: inline-flex;
+  font-size: 1.15em;
+  color: ${({ theme, $variant }) => variantColor(theme, $variant).toString()};
+`;
+const Path = styled.path `
+  fill: currentColor;
+`;
+/**
+ * The paths of the default icons, 24×24: the circle with «i», the check, the triangle with «!»
+ * and the circle with «!»
+ */
+const PATHS = {
+    info: 'M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z',
+    success: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z',
+    warning: 'M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z',
+    error: 'M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z',
+};
+/**
+ * The icon of the variant. `children` replaces the default icon
+ */
+const InfoNoteIcon = (props, ref) => {
+    const { variant, children } = props, nativeProps = __rest(props, ["variant", "children"]);
+    return (React.createElement(StyledIcon, Object.assign({}, nativeProps, { "$variant": variant, "aria-hidden": true, ref: ref }), children !== null && children !== void 0 ? children : (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" },
+        React.createElement(Path, { d: PATHS[variant] })))));
+};
+export default React.forwardRef(InfoNoteIcon);

package/esm/InfoNote/InfoNoteTitle.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledTitle = styled.div `
+  font-weight: 600;
+  margin-bottom: 0.15em;
+`;
+const InfoNoteTitle = (props, ref) => React.createElement(StyledTitle, Object.assign({}, props, { ref: ref }));
+export default React.forwardRef(InfoNoteTitle);

package/esm/InfoNote/index.js

@@ -0,0 +1,40 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import Container from './InfoNoteContainer';
+import Icon from './InfoNoteIcon';
+import Title from './InfoNoteTitle';
+import Content from './InfoNoteContent';
+/**
+ * The short text in the form or the card which must be seen right here, without a click:
+ * «only the completed orders get into the revision». The longer explanation which is needed
+ * sometimes goes into HintPopover
+ */
+const InfoNote = (props, ref) => {
+    const { variant = 'info', title, icon, children, overrides } = props, nativeProps = __rest(props, ["variant", "title", "icon", "children", "overrides"]);
+    const overridesMap = React.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,
+        Icon: (overrides === null || overrides === void 0 ? void 0 : overrides.Icon) || Icon,
+        Title: (overrides === null || overrides === void 0 ? void 0 : overrides.Title) || Title,
+        Content: (overrides === null || overrides === void 0 ? void 0 : overrides.Content) || Content,
+    }), [overrides]);
+    return (React.createElement(overridesMap.Container, Object.assign({ role: "note" }, nativeProps, { variant: variant, ref: ref }),
+        icon !== false && React.createElement(overridesMap.Icon, { variant: variant }, icon),
+        React.createElement(overridesMap.Content, null,
+            title && React.createElement(overridesMap.Title, null, title),
+            children)));
+};
+export * from './InfoNoteContainer';
+export * from './InfoNoteIcon';
+export * from './InfoNoteTitle';
+export * from './InfoNoteContent';
+export default React.forwardRef(InfoNote);

package/esm/Skeleton/index.js

@@ -0,0 +1,64 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { css, keyframes } from '@emotion/react';
+const size = (value) => (typeof value === 'number' ? `${value}em` : value);
+const DEFAULT_HEIGHT = {
+    text: '0.8em',
+    rect: '3em',
+    circle: '2.5em',
+    pill: '1.6em',
+};
+/**
+ * The solid shape fades in and out: calmer than the moving gradient and does not depend on the width
+ */
+const pulse = keyframes `
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+`;
+const StyledSkeleton = styled.span `
+  display: block;
+  flex-shrink: 0;
+  width: ${({ $width }) => $width};
+  max-width: 100%;
+  height: ${({ $height }) => $height};
+  border-radius: ${({ theme, $variant }) => $variant === 'circle' || $variant === 'pill'
+    ? '999em'
+    : `${theme.shape.radiusFactor * ($variant === 'rect' ? 1.5 : 0.75)}em`};
+  background-color: ${({ theme }) => theme.color.textPrimary.alpha(0.08).toString()};
+  animation: ${pulse} 1.6s ease-in-out infinite;
+
+  ${({ $variant, $height }) => $variant === 'circle' &&
+    css `
+      aspect-ratio: 1;
+      width: ${$height};
+    `}
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+`;
+/**
+ * The placeholder of the content which is loaded: the gray shape which fades in and out.
+ * Shows the structure of the content instead of the spinner
+ */
+const Skeleton = (props, ref) => {
+    const { variant = 'text', width = '100%', height } = props, nativeProps = __rest(props, ["variant", "width", "height"]);
+    return (React.createElement(StyledSkeleton, Object.assign({ "aria-hidden": true }, nativeProps, { ref: ref, "$variant": variant, "$width": size(width), "$height": height !== undefined ? size(height) : DEFAULT_HEIGHT[variant] })));
+};
+export default React.forwardRef(Skeleton);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "UI Kit",
   "repository": {
     "type": "git",
@@ -150,6 +150,11 @@
       "import": "./esm/Badge/BadgeDeleteButton.js",
       "require": "./Badge/BadgeDeleteButton.js"
     },
+    "./Badge/BadgeDot": {
+      "types": "./Badge/BadgeDot.d.ts",
+      "import": "./esm/Badge/BadgeDot.js",
+      "require": "./Badge/BadgeDot.js"
+    },
     "./Badge/BadgeIconWrapper": {
       "types": "./Badge/BadgeIconWrapper.d.ts",
       "import": "./esm/Badge/BadgeIconWrapper.js",
@@ -505,6 +510,41 @@
       "import": "./esm/DatePicker/useDatePickerFormat.js",
       "require": "./DatePicker/useDatePickerFormat.js"
     },
+    "./EmptyState/EmptyStateAction": {
+      "types": "./EmptyState/EmptyStateAction.d.ts",
+      "import": "./esm/EmptyState/EmptyStateAction.js",
+      "require": "./EmptyState/EmptyStateAction.js"
+    },
+    "./EmptyState/EmptyStateContainer": {
+      "types": "./EmptyState/EmptyStateContainer.d.ts",
+      "import": "./esm/EmptyState/EmptyStateContainer.js",
+      "require": "./EmptyState/EmptyStateContainer.js"
+    },
+    "./EmptyState/EmptyStateContent": {
+      "types": "./EmptyState/EmptyStateContent.d.ts",
+      "import": "./esm/EmptyState/EmptyStateContent.js",
+      "require": "./EmptyState/EmptyStateContent.js"
+    },
+    "./EmptyState/EmptyStateIcon": {
+      "types": "./EmptyState/EmptyStateIcon.d.ts",
+      "import": "./esm/EmptyState/EmptyStateIcon.js",
+      "require": "./EmptyState/EmptyStateIcon.js"
+    },
+    "./EmptyState/EmptyStateTitle": {
+      "types": "./EmptyState/EmptyStateTitle.d.ts",
+      "import": "./esm/EmptyState/EmptyStateTitle.js",
+      "require": "./EmptyState/EmptyStateTitle.js"
+    },
+    "./EmptyState/index": {
+      "types": "./EmptyState/index.d.ts",
+      "import": "./esm/EmptyState/index.js",
+      "require": "./EmptyState/index.js"
+    },
+    "./EmptyState": {
+      "types": "./EmptyState/index.d.ts",
+      "import": "./esm/EmptyState/index.js",
+      "require": "./EmptyState/index.js"
+    },
     "./ErrorBoundary/RenderError": {
       "types": "./ErrorBoundary/RenderError.d.ts",
       "import": "./esm/ErrorBoundary/RenderError.js",
@@ -520,6 +560,26 @@
       "import": "./esm/ErrorBoundary/index.js",
       "require": "./ErrorBoundary/index.js"
     },
+    "./FileDropzone/FileDropzoneArea": {
+      "types": "./FileDropzone/FileDropzoneArea.d.ts",
+      "import": "./esm/FileDropzone/FileDropzoneArea.js",
+      "require": "./FileDropzone/FileDropzoneArea.js"
+    },
+    "./FileDropzone/index": {
+      "types": "./FileDropzone/index.d.ts",
+      "import": "./esm/FileDropzone/index.js",
+      "require": "./FileDropzone/index.js"
+    },
+    "./FileDropzone": {
+      "types": "./FileDropzone/index.d.ts",
+      "import": "./esm/FileDropzone/index.js",
+      "require": "./FileDropzone/index.js"
+    },
+    "./FileDropzone/utils": {
+      "types": "./FileDropzone/utils.d.ts",
+      "import": "./esm/FileDropzone/utils.js",
+      "require": "./FileDropzone/utils.js"
+    },
     "./Grid/index": {
       "types": "./Grid/index.d.ts",
       "import": "./esm/Grid/index.js",
@@ -555,6 +615,26 @@
       "import": "./esm/Highlighted/index.js",
       "require": "./Highlighted/index.js"
     },
+    "./HintPopover/HintPopoverButton": {
+      "types": "./HintPopover/HintPopoverButton.d.ts",
+      "import": "./esm/HintPopover/HintPopoverButton.js",
+      "require": "./HintPopover/HintPopoverButton.js"
+    },
+    "./HintPopover/HintPopoverContainer": {
+      "types": "./HintPopover/HintPopoverContainer.d.ts",
+      "import": "./esm/HintPopover/HintPopoverContainer.js",
+      "require": "./HintPopover/HintPopoverContainer.js"
+    },
+    "./HintPopover/index": {
+      "types": "./HintPopover/index.d.ts",
+      "import": "./esm/HintPopover/index.js",
+      "require": "./HintPopover/index.js"
+    },
+    "./HintPopover": {
+      "types": "./HintPopover/index.d.ts",
+      "import": "./esm/HintPopover/index.js",
+      "require": "./HintPopover/index.js"
+    },
     "./Image/index": {
       "types": "./Image/index.d.ts",
       "import": "./esm/Image/index.js",
@@ -565,6 +645,36 @@
       "import": "./esm/Image/index.js",
       "require": "./Image/index.js"
     },
+    "./InfoNote/InfoNoteContainer": {
+      "types": "./InfoNote/InfoNoteContainer.d.ts",
+      "import": "./esm/InfoNote/InfoNoteContainer.js",
+      "require": "./InfoNote/InfoNoteContainer.js"
+    },
+    "./InfoNote/InfoNoteContent": {
+      "types": "./InfoNote/InfoNoteContent.d.ts",
+      "import": "./esm/InfoNote/InfoNoteContent.js",
+      "require": "./InfoNote/InfoNoteContent.js"
+    },
+    "./InfoNote/InfoNoteIcon": {
+      "types": "./InfoNote/InfoNoteIcon.d.ts",
+      "import": "./esm/InfoNote/InfoNoteIcon.js",
+      "require": "./InfoNote/InfoNoteIcon.js"
+    },
+    "./InfoNote/InfoNoteTitle": {
+      "types": "./InfoNote/InfoNoteTitle.d.ts",
+      "import": "./esm/InfoNote/InfoNoteTitle.js",
+      "require": "./InfoNote/InfoNoteTitle.js"
+    },
+    "./InfoNote/index": {
+      "types": "./InfoNote/index.d.ts",
+      "import": "./esm/InfoNote/index.js",
+      "require": "./InfoNote/index.js"
+    },
+    "./InfoNote": {
+      "types": "./InfoNote/index.d.ts",
+      "import": "./esm/InfoNote/index.js",
+      "require": "./InfoNote/index.js"
+    },
     "./LoadingIndicator/LoadingOverlay": {
       "types": "./LoadingIndicator/LoadingOverlay.d.ts",
       "import": "./esm/LoadingIndicator/LoadingOverlay.js",
@@ -1075,6 +1185,16 @@
       "import": "./esm/Selectbox/index.js",
       "require": "./Selectbox/index.js"
     },
+    "./Skeleton/index": {
+      "types": "./Skeleton/index.d.ts",
+      "import": "./esm/Skeleton/index.js",
+      "require": "./Skeleton/index.js"
+    },
+    "./Skeleton": {
+      "types": "./Skeleton/index.d.ts",
+      "import": "./esm/Skeleton/index.js",
+      "require": "./Skeleton/index.js"
+    },
     "./Slider/SliderContainer": {
       "types": "./Slider/SliderContainer.d.ts",
       "import": "./esm/Slider/SliderContainer.js",