@redsift/design-system 11.5.0 → 11.6.0-muiv5-alpha.1

package/components/side-navigation-menu-bar/useSideNavigationMenuBar.js

@@ -0,0 +1,70 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import { SideNavigationMenuItem } from '../side-navigation-menu-item/SideNavigationMenuItem.js';
+import { SideNavigationMenu } from '../side-navigation-menu/SideNavigationMenu.js';
+
+const _excluded = ["title", "href", "ref"],
+  _excluded2 = ["title", "children", "ref"],
+  _excluded3 = ["title", "href", "ref"];
+const isMenu = item => {
+  return item.children !== undefined;
+};
+const useSideNavigationMenuBar = _ref => {
+  let {
+    items,
+    isActive
+  } = _ref;
+  const menuBarChildren = [];
+  items.map(item => {
+    if (!isMenu(item)) {
+      const {
+          title,
+          href,
+          ref
+        } = item,
+        rest = _objectWithoutProperties(item, _excluded);
+      menuBarChildren.push( /*#__PURE__*/React__default.createElement(SideNavigationMenuItem, _extends({
+        key: title,
+        isCurrent: isActive ? isActive(href) : undefined
+      }, rest, {
+        href: href,
+        ref: ref
+      }), title));
+    } else {
+      const {
+          title,
+          children,
+          ref
+        } = item,
+        rest = _objectWithoutProperties(item, _excluded2);
+      menuBarChildren.push( /*#__PURE__*/React__default.createElement(SideNavigationMenu, _extends({
+        key: title,
+        "aria-label": title,
+        isExpanded: isActive ? children.filter(child => isActive(child.href)).length > 0 : undefined,
+        hasBadge: children.filter(child => child.badge).length > 0
+      }, rest, {
+        ref: ref
+      }), children.map(child => {
+        const {
+            title,
+            href,
+            ref
+          } = child,
+          rest = _objectWithoutProperties(child, _excluded3);
+        return /*#__PURE__*/React__default.createElement(SideNavigationMenuItem, _extends({
+          key: title,
+          href: href,
+          isCurrent: isActive ? isActive(href) : undefined
+        }, rest, {
+          ref: ref
+        }), title);
+      })));
+    }
+  });
+  return {
+    children: menuBarChildren
+  };
+};
+
+export { useSideNavigationMenuBar };
+//# sourceMappingURL=useSideNavigationMenuBar.js.map

package/components/side-navigation-menu-bar/useSideNavigationMenuBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSideNavigationMenuBar.js","sources":["../../../src/components/side-navigation-menu-bar/useSideNavigationMenuBar.tsx"],"sourcesContent":["import React, { MutableRefObject } from 'react';\nimport { SideNavigationMenu } from '../side-navigation-menu';\nimport { SideNavigationMenuItem } from '../side-navigation-menu-item';\nimport {\n  MenuBarItems,\n  MenuItem,\n  Menu,\n  SideNavigationMenuBarProps,\n} from './types';\n\nconst isMenu = (item: MenuItem | Menu): item is Menu => {\n  return (item as Menu).children !== undefined;\n};\n\nexport interface UseSideNavigationMenuBarProps {\n  items: MenuBarItems;\n  isActive?: (href: string) => boolean;\n}\n\nexport const useSideNavigationMenuBar = ({\n  items,\n  isActive,\n}: UseSideNavigationMenuBarProps): Omit<SideNavigationMenuBarProps, 'ref'> => {\n  const menuBarChildren: SideNavigationMenuBarProps['children'][] = [];\n\n  items.map((item) => {\n    if (!isMenu(item)) {\n      const { title, href, ref, ...rest } = item;\n      menuBarChildren.push(\n        <SideNavigationMenuItem\n          key={title}\n          isCurrent={isActive ? isActive(href!) : undefined}\n          {...rest}\n          href={href}\n          ref={ref as MutableRefObject<HTMLAnchorElement>}\n        >\n          {title}\n        </SideNavigationMenuItem>\n      );\n    } else {\n      const { title, children, ref, ...rest } = item;\n      menuBarChildren.push(\n        <SideNavigationMenu\n          key={title}\n          aria-label={title}\n          isExpanded={\n            isActive\n              ? children.filter((child) => isActive(child.href!)).length > 0\n              : undefined\n          }\n          hasBadge={children.filter((child) => child.badge).length > 0}\n          {...rest}\n          ref={ref as MutableRefObject<HTMLDivElement>}\n        >\n          {children.map((child) => {\n            const { title, href, ref, ...rest } = child;\n            return (\n              <SideNavigationMenuItem\n                key={title}\n                href={href}\n                isCurrent={isActive ? isActive(href!) : undefined}\n                {...rest}\n                ref={ref as MutableRefObject<HTMLAnchorElement>}\n              >\n                {title}\n              </SideNavigationMenuItem>\n            );\n          })}\n        </SideNavigationMenu>\n      );\n    }\n  });\n\n  return {\n    children: menuBarChildren,\n  };\n};\n"],"names":["isMenu","item","children","undefined","useSideNavigationMenuBar","_ref","items","isActive","menuBarChildren","map","title","href","ref","rest","_objectWithoutProperties","_excluded","push","React","createElement","SideNavigationMenuItem","_extends","key","isCurrent","_excluded2","SideNavigationMenu","isExpanded","filter","child","length","hasBadge","badge","_excluded3"],"mappings":";;;;;;;;AAUA,MAAMA,MAAM,GAAIC,IAAqB,IAAmB;AACtD,EAAA,OAAQA,IAAI,CAAUC,QAAQ,KAAKC,SAAS,CAAA;AAC9C,CAAC,CAAA;AAOYC,MAAAA,wBAAwB,GAAGC,IAAA,IAGsC;EAAA,IAHrC;IACvCC,KAAK;AACLC,IAAAA,QAAAA;AAC6B,GAAC,GAAAF,IAAA,CAAA;EAC9B,MAAMG,eAAyD,GAAG,EAAE,CAAA;AAEpEF,EAAAA,KAAK,CAACG,GAAG,CAAER,IAAI,IAAK;AAClB,IAAA,IAAI,CAACD,MAAM,CAACC,IAAI,CAAC,EAAE;MACjB,MAAM;UAAES,KAAK;UAAEC,IAAI;AAAEC,UAAAA,GAAAA;AAAa,SAAC,GAAGX,IAAI;AAAbY,QAAAA,IAAI,GAAAC,wBAAA,CAAKb,IAAI,EAAAc,SAAA,CAAA,CAAA;MAC1CP,eAAe,CAACQ,IAAI,eAClBC,cAAA,CAAAC,aAAA,CAACC,sBAAsB,EAAAC,QAAA,CAAA;AACrBC,QAAAA,GAAG,EAAEX,KAAM;AACXY,QAAAA,SAAS,EAAEf,QAAQ,GAAGA,QAAQ,CAACI,IAAK,CAAC,GAAGR,SAAAA;AAAU,OAAA,EAC9CU,IAAI,EAAA;AACRF,QAAAA,IAAI,EAAEA,IAAK;AACXC,QAAAA,GAAG,EAAEA,GAAAA;OAEJF,CAAAA,EAAAA,KACqB,CAC1B,CAAC,CAAA;AACH,KAAC,MAAM;MACL,MAAM;UAAEA,KAAK;UAAER,QAAQ;AAAEU,UAAAA,GAAAA;AAAa,SAAC,GAAGX,IAAI;AAAbY,QAAAA,IAAI,GAAAC,wBAAA,CAAKb,IAAI,EAAAsB,UAAA,CAAA,CAAA;MAC9Cf,eAAe,CAACQ,IAAI,eAClBC,cAAA,CAAAC,aAAA,CAACM,kBAAkB,EAAAJ,QAAA,CAAA;AACjBC,QAAAA,GAAG,EAAEX,KAAM;AACX,QAAA,YAAA,EAAYA,KAAM;QAClBe,UAAU,EACRlB,QAAQ,GACJL,QAAQ,CAACwB,MAAM,CAAEC,KAAK,IAAKpB,QAAQ,CAACoB,KAAK,CAAChB,IAAK,CAAC,CAAC,CAACiB,MAAM,GAAG,CAAC,GAC5DzB,SACL;AACD0B,QAAAA,QAAQ,EAAE3B,QAAQ,CAACwB,MAAM,CAAEC,KAAK,IAAKA,KAAK,CAACG,KAAK,CAAC,CAACF,MAAM,GAAG,CAAA;AAAE,OAAA,EACzDf,IAAI,EAAA;AACRD,QAAAA,GAAG,EAAEA,GAAAA;AAAwC,OAAA,CAAA,EAE5CV,QAAQ,CAACO,GAAG,CAAEkB,KAAK,IAAK;QACvB,MAAM;YAAEjB,KAAK;YAAEC,IAAI;AAAEC,YAAAA,GAAAA;AAAa,WAAC,GAAGe,KAAK;AAAdd,UAAAA,IAAI,GAAAC,wBAAA,CAAKa,KAAK,EAAAI,UAAA,CAAA,CAAA;AAC3C,QAAA,oBACEd,cAAA,CAAAC,aAAA,CAACC,sBAAsB,EAAAC,QAAA,CAAA;AACrBC,UAAAA,GAAG,EAAEX,KAAM;AACXC,UAAAA,IAAI,EAAEA,IAAK;AACXW,UAAAA,SAAS,EAAEf,QAAQ,GAAGA,QAAQ,CAACI,IAAK,CAAC,GAAGR,SAAAA;AAAU,SAAA,EAC9CU,IAAI,EAAA;AACRD,UAAAA,GAAG,EAAEA,GAAAA;AAA2C,SAAA,CAAA,EAE/CF,KACqB,CAAC,CAAA;OAE5B,CACiB,CACtB,CAAC,CAAA;AACH,KAAA;AACF,GAAC,CAAC,CAAA;EAEF,OAAO;AACLR,IAAAA,QAAQ,EAAEM,eAAAA;GACX,CAAA;AACH;;;;"}

package/components/side-navigation-menu-item/SideNavigationMenuItem.d.ts

@@ -0,0 +1,9 @@
+import { SideNavigationMenuItemProps } from './types.js';
+import { Comp } from '../../types/helpers.js';
+
+/**
+ * The SideNavigationMenuItem component.
+ */
+declare const SideNavigationMenuItem: Comp<SideNavigationMenuItemProps, HTMLAnchorElement>;
+
+export { SideNavigationMenuItem };

package/components/side-navigation-menu-item/SideNavigationMenuItem.js

@@ -0,0 +1,115 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useRef, useContext, useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound.js';
+import { SideNavigationMenuBarContext } from '../side-navigation-menu-bar/context.js';
+import { SideNavigationMenuContext } from '../side-navigation-menu/context.js';
+import { StyledSideNavigationMenuItemIndicatorContainer, StyledSideNavigationMenuItemIndicator, StyledSideNavigationMenuItem, StyledSideNavigationMenuItemBorder } from './styles.js';
+import { IconSize } from '../icon/types.js';
+import { Badge } from '../badge/Badge.js';
+import { BadgeVariant } from '../badge/types.js';
+import { useTheme } from '../theme/useTheme.js';
+import { Flexbox } from '../flexbox/Flexbox.js';
+import { Icon } from '../icon/Icon.js';
+
+const _excluded = ["as", "badge", "badgeProps", "children", "className", "color", "hasBorder", "href", "icon", "iconProps", "iconRef", "isCurrent", "isDisabled", "isSecondLevel", "onClick", "onKeyDown", "tabIndex", "theme"];
+const COMPONENT_NAME = 'SideNavigationMenuItem';
+const CLASSNAME = 'redsift-side-navigation-menu-item';
+
+/**
+ * The SideNavigationMenuItem component.
+ */
+const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const menuItemRef = ref || useRef();
+  const {
+      as,
+      badge,
+      badgeProps,
+      children,
+      className,
+      color,
+      hasBorder,
+      href,
+      icon,
+      iconProps,
+      iconRef = useRef(),
+      isCurrent,
+      isDisabled,
+      isSecondLevel,
+      onClick,
+      onKeyDown,
+      tabIndex,
+      theme: propsTheme
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  warnIfNoAccessibleLabelFound(props, [children], 'SideNavigationMenuItem');
+  const sideNavigationMenuBarContext = useContext(SideNavigationMenuBarContext);
+  const sideNavigationMenuContext = useContext(SideNavigationMenuContext);
+  const theme = useTheme(propsTheme);
+  const [isFirstChild, setIsFirstChild] = useState(false);
+  const {
+    menuItems
+  } = sideNavigationMenuContext || sideNavigationMenuBarContext || {};
+  useEffect(() => {
+    if (!(sideNavigationMenuContext || sideNavigationMenuBarContext)) {
+      setIsFirstChild(true);
+      return;
+    }
+    const menuItemNode = menuItemRef.current;
+    if (menuItemNode) {
+      if (!menuItems.size) {
+        setIsFirstChild(true);
+      }
+      menuItems.add(menuItemNode);
+    }
+    return () => {
+      menuItems.delete(menuItemNode);
+    };
+  }, [menuItems]);
+  const sideNavigationVariant = sideNavigationMenuBarContext === null || sideNavigationMenuBarContext === void 0 ? void 0 : sideNavigationMenuBarContext.sideNavigationMenuBarVariant;
+  return /*#__PURE__*/React__default.createElement(Flexbox, {
+    flexDirection: "column",
+    gap: "0px"
+  }, /*#__PURE__*/React__default.createElement(Flexbox, {
+    flexDirection: "row",
+    gap: "0px"
+  }, !isSecondLevel ? /*#__PURE__*/React__default.createElement(StyledSideNavigationMenuItemIndicatorContainer, null, isCurrent ? /*#__PURE__*/React__default.createElement(StyledSideNavigationMenuItemIndicator, {
+    $theme: theme
+  }) : null) : null, /*#__PURE__*/React__default.createElement(StyledSideNavigationMenuItem, _extends({
+    as: as,
+    role: "menuitem"
+  }, forwardedProps, {
+    $color: color,
+    $hasIcon: icon !== undefined,
+    $isCurrent: isCurrent,
+    $isDisabled: isDisabled,
+    $isSecondLevel: isSecondLevel,
+    $theme: theme,
+    $variant: sideNavigationVariant,
+    "aria-current": isCurrent ? 'page' : undefined,
+    "aria-disabled": isDisabled,
+    className: classNames(SideNavigationMenuItem.className, className),
+    href: !isDisabled ? href : undefined,
+    onClick: isDisabled ? undefined : onClick,
+    onKeyDown: isDisabled ? undefined : onKeyDown,
+    ref: menuItemRef,
+    tabIndex: tabIndex !== undefined ? tabIndex : !sideNavigationMenuContext && isFirstChild ? 0 : -1
+  }), !isSecondLevel || icon ? /*#__PURE__*/React__default.createElement(Icon, _extends({
+    color: `var(--redsift-side-navigation-color-menu-item-text-${isSecondLevel || isDisabled ? 'disabled' : 'resting'})`
+  }, iconProps, {
+    icon: icon,
+    ref: iconRef,
+    className: "first",
+    size: isSecondLevel ? IconSize.small : IconSize.medium
+  })) : null, /*#__PURE__*/React__default.createElement("span", {
+    className: "content"
+  }, children), badge ? /*#__PURE__*/React__default.createElement(Badge, _extends({
+    variant: BadgeVariant.standard,
+    color: "error"
+  }, badgeProps), badge) : null)), isSecondLevel && hasBorder ? /*#__PURE__*/React__default.createElement(StyledSideNavigationMenuItemBorder, null) : null);
+});
+SideNavigationMenuItem.className = CLASSNAME;
+SideNavigationMenuItem.displayName = COMPONENT_NAME;
+
+export { SideNavigationMenuItem };
+//# sourceMappingURL=SideNavigationMenuItem.js.map

package/components/side-navigation-menu-item/SideNavigationMenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigationMenuItem.js","sources":["../../../src/components/side-navigation-menu-item/SideNavigationMenuItem.tsx"],"sourcesContent":["import React, { forwardRef, MutableRefObject, useContext, useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { Icon, IconSize } from '../icon';\nimport { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound';\nimport { SideNavigationMenuBarContext } from '../side-navigation-menu-bar/context';\nimport { SideNavigationMenuContext } from '../side-navigation-menu/context';\nimport {\n  StyledSideNavigationMenuItem,\n  StyledSideNavigationMenuItemBorder,\n  StyledSideNavigationMenuItemIndicator,\n  StyledSideNavigationMenuItemIndicatorContainer,\n} from './styles';\nimport { SideNavigationMenuItemProps } from './types';\nimport { Badge, BadgeVariant } from '../badge';\nimport { Flexbox } from '../flexbox';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'SideNavigationMenuItem';\nconst CLASSNAME = 'redsift-side-navigation-menu-item';\n\n/**\n * The SideNavigationMenuItem component.\n */\nexport const SideNavigationMenuItem: Comp<SideNavigationMenuItemProps, HTMLAnchorElement> = forwardRef((props, ref) => {\n  const menuItemRef = ref || useRef<HTMLAnchorElement>();\n\n  const {\n    as,\n    badge,\n    badgeProps,\n    children,\n    className,\n    color,\n    hasBorder,\n    href,\n    icon,\n    iconProps,\n    iconRef = useRef<HTMLElement>(),\n    isCurrent,\n    isDisabled,\n    isSecondLevel,\n    onClick,\n    onKeyDown,\n    tabIndex,\n    theme: propsTheme,\n    ...forwardedProps\n  } = props;\n\n  warnIfNoAccessibleLabelFound(props, [children], 'SideNavigationMenuItem');\n\n  const sideNavigationMenuBarContext = useContext(SideNavigationMenuBarContext);\n  const sideNavigationMenuContext = useContext(SideNavigationMenuContext);\n  const theme = useTheme(propsTheme);\n\n  const [isFirstChild, setIsFirstChild] = useState(false);\n  const { menuItems } = sideNavigationMenuContext || sideNavigationMenuBarContext || {};\n\n  useEffect(() => {\n    if (!(sideNavigationMenuContext || sideNavigationMenuBarContext)) {\n      setIsFirstChild(true);\n      return;\n    }\n\n    const menuItemNode = (menuItemRef as MutableRefObject<HTMLAnchorElement>).current;\n\n    if (menuItemNode) {\n      if (!menuItems.size) {\n        setIsFirstChild(true);\n      }\n\n      menuItems.add(menuItemNode);\n    }\n\n    return () => {\n      menuItems.delete(menuItemNode);\n    };\n  }, [menuItems]);\n\n  const sideNavigationVariant = sideNavigationMenuBarContext?.sideNavigationMenuBarVariant;\n\n  return (\n    <Flexbox flexDirection=\"column\" gap=\"0px\">\n      <Flexbox flexDirection=\"row\" gap=\"0px\">\n        {!isSecondLevel ? (\n          <StyledSideNavigationMenuItemIndicatorContainer>\n            {isCurrent ? <StyledSideNavigationMenuItemIndicator $theme={theme} /> : null}\n          </StyledSideNavigationMenuItemIndicatorContainer>\n        ) : null}\n        <StyledSideNavigationMenuItem\n          as={as as any}\n          role=\"menuitem\"\n          {...forwardedProps}\n          $color={color}\n          $hasIcon={icon !== undefined}\n          $isCurrent={isCurrent}\n          $isDisabled={isDisabled}\n          $isSecondLevel={isSecondLevel}\n          $theme={theme}\n          $variant={sideNavigationVariant}\n          aria-current={isCurrent ? 'page' : undefined}\n          aria-disabled={isDisabled}\n          className={classNames(SideNavigationMenuItem.className, className)}\n          href={!isDisabled ? href : undefined}\n          onClick={isDisabled ? undefined : onClick}\n          onKeyDown={isDisabled ? undefined : onKeyDown}\n          ref={menuItemRef as MutableRefObject<HTMLAnchorElement>}\n          tabIndex={tabIndex !== undefined ? tabIndex : !sideNavigationMenuContext && isFirstChild ? 0 : -1}\n        >\n          {!isSecondLevel || icon ? (\n            <Icon\n              color={`var(--redsift-side-navigation-color-menu-item-text-${\n                isSecondLevel || isDisabled ? 'disabled' : 'resting'\n              })`}\n              {...iconProps}\n              icon={icon!}\n              ref={iconRef as MutableRefObject<HTMLElement>}\n              className=\"first\"\n              size={isSecondLevel ? IconSize.small : IconSize.medium}\n            />\n          ) : null}\n          <span className=\"content\">{children}</span>\n          {badge ? (\n            <Badge variant={BadgeVariant.standard} color=\"error\" {...badgeProps}>\n              {badge}\n            </Badge>\n          ) : null}\n        </StyledSideNavigationMenuItem>\n      </Flexbox>\n      {isSecondLevel && hasBorder ? <StyledSideNavigationMenuItemBorder /> : null}\n    </Flexbox>\n  );\n});\nSideNavigationMenuItem.className = CLASSNAME;\nSideNavigationMenuItem.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","SideNavigationMenuItem","forwardRef","props","ref","menuItemRef","useRef","as","badge","badgeProps","children","className","color","hasBorder","href","icon","iconProps","iconRef","isCurrent","isDisabled","isSecondLevel","onClick","onKeyDown","tabIndex","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","warnIfNoAccessibleLabelFound","sideNavigationMenuBarContext","useContext","SideNavigationMenuBarContext","sideNavigationMenuContext","SideNavigationMenuContext","useTheme","isFirstChild","setIsFirstChild","useState","menuItems","useEffect","menuItemNode","current","size","add","delete","sideNavigationVariant","sideNavigationMenuBarVariant","React","createElement","Flexbox","flexDirection","gap","StyledSideNavigationMenuItemIndicatorContainer","StyledSideNavigationMenuItemIndicator","$theme","StyledSideNavigationMenuItem","_extends","role","$color","$hasIcon","undefined","$isCurrent","$isDisabled","$isSecondLevel","$variant","classNames","Icon","IconSize","small","medium","Badge","variant","BadgeVariant","standard","StyledSideNavigationMenuItemBorder","displayName"],"mappings":"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"}

package/components/side-navigation-menu-item/styles.js

@@ -0,0 +1,174 @@
+import styled, { css } from 'styled-components';
+import { SideNavigationMenuBarVariant } from '../side-navigation-menu-bar/types.js';
+
+const StyledSideNavigationMenuItemIndicatorContainer = styled.div`
+  min-width: 4px;
+`;
+const StyledSideNavigationMenuItemIndicator = styled.div`
+  position: relative;
+  width: 4px;
+  height: 40px;
+  border-radius: 0px 4px 4px 0px;
+  background-color: ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return `var(--redsift-color-${$theme}-components-side-navigation-current-marker)`;
+}};
+`;
+const StyledSideNavigationMenuItemBorder = styled.div`
+  position: relative;
+  width: 100%;
+  height: 1px;
+  background-color: var(--redsift-color-neutral-light-grey);
+  margin-left: 62px;
+  margin-top: -1px;
+`;
+
+/**
+ * Component style.
+ */
+const StyledSideNavigationMenuItem = styled.a`
+  /**
+   * Common style
+   */
+  ${_ref2 => {
+  let {
+    $isDisabled,
+    $theme,
+    $color
+  } = _ref2;
+  return !$isDisabled ? css`
+          & {
+            color: ${$color ? $color : `var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-resting)`};
+          }
+        ` : css`
+          & {
+            color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-disabled);
+          }
+        `;
+}}
+  align-items: center;
+  border-radius: 0 4px 4px 0;
+  display: flex;
+  font-family: var(--redsift-typography-body-font-family);
+  font-size: 14px;
+  font-weight: var(--redsift-typography-body-font-weight);
+  gap: 8px;
+  line-height: var(--redsift-typography-body-line-height);
+  overflow: hidden;
+  text-decoration: none;
+  text-transform: uppercase;
+  width: 100%;
+
+  &:hover,
+  &:focus-visible {
+    outline: none;
+
+    ${_ref3 => {
+  let {
+    $isDisabled,
+    $theme,
+    $color
+  } = _ref3;
+  return !$isDisabled ? css`
+            background-color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-background-hover);
+            & {
+              color: ${$color ? $color : `var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-hover)`};
+            }
+          ` : '';
+}}
+  }
+
+  :active {
+    ${_ref4 => {
+  let {
+    $isDisabled,
+    $theme
+  } = _ref4;
+  return !$isDisabled ? css`
+            background-color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-background-active);
+          ` : '';
+}}
+  }
+
+  ${_ref5 => {
+  let {
+    $variant
+  } = _ref5;
+  return css`
+    @media (prefers-reduced-motion: no-preference) {
+      :focus-visible {
+        > span${$variant === SideNavigationMenuBarVariant.shrinked ? '.first' : '.content'} {
+          outline: 2px solid var(--redsift-color-primary-n);
+          transition: outline-offset 75ms ease-out;
+        }
+
+        :not(:active):focus-visible {
+          > span${$variant === SideNavigationMenuBarVariant.shrinked ? '.first' : '.content'} {
+            transition-duration: 0.25s;
+          }
+        }
+      }
+
+      :not(:active):focus-visible {
+        > span${$variant === SideNavigationMenuBarVariant.shrinked ? '.first' : '.content'} {
+          outline-offset: 0.25rem;
+        }
+      }
+    }
+
+    .content {
+      transition: opacity 300ms ease-out;
+      opacity: ${$variant === SideNavigationMenuBarVariant.shrinked ? '0' : '1'};
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  `;
+}}
+
+  ${_ref6 => {
+  let {
+    $hasIcon,
+    $isSecondLevel,
+    $variant,
+    $theme
+  } = _ref6;
+  return !$isSecondLevel ? css`
+          /**
+           * First-level items
+           */
+
+          background-color: var(--redsift-color-${$theme}-components-side-navigation-background);
+          height: 40px;
+          margin-bottom: 4px;
+          margin-left: -4px;
+          transition: padding 300ms ease-out;
+          padding: 0 16px 0 ${$variant === SideNavigationMenuBarVariant.shrinked ? '16px' : '16px'};
+
+          .redsift-icon.first {
+            box-sizing: unset;
+          }
+        ` : `
+    /**
+     * Second-level items
+     */
+
+    background-color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-background-secondary);
+    font-size: var(--redsift-typography-caption-font-size);
+    padding-bottom: 4px;
+    padding-left: ${$hasIcon ? '18px' : '54px'};
+    padding-right: 0;
+    padding-top: 4px;
+    border-radius: 0;
+
+    .redsift-icon.first {
+      box-sizing: unset;
+      margin-right: 8px;
+    }
+  `;
+}}
+`;
+
+export { StyledSideNavigationMenuItem, StyledSideNavigationMenuItemBorder, StyledSideNavigationMenuItemIndicator, StyledSideNavigationMenuItemIndicatorContainer };
+//# sourceMappingURL=styles.js.map

package/components/side-navigation-menu-item/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/side-navigation-menu-item/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledSideNavigationMenuItemProps } from './types';\nimport { SideNavigationMenuBarVariant } from '../side-navigation-menu-bar';\nimport { Theme } from '../../types';\n\nexport const StyledSideNavigationMenuItemIndicatorContainer = styled.div`\n  min-width: 4px;\n`;\n\nexport const StyledSideNavigationMenuItemIndicator = styled.div<{ $theme: Theme }>`\n  position: relative;\n  width: 4px;\n  height: 40px;\n  border-radius: 0px 4px 4px 0px;\n  background-color: ${({ $theme }) => `var(--redsift-color-${$theme}-components-side-navigation-current-marker)`};\n`;\n\nexport const StyledSideNavigationMenuItemBorder = styled.div`\n  position: relative;\n  width: 100%;\n  height: 1px;\n  background-color: var(--redsift-color-neutral-light-grey);\n  margin-left: 62px;\n  margin-top: -1px;\n`;\n\n/**\n * Component style.\n */\nexport const StyledSideNavigationMenuItem = styled.a<StyledSideNavigationMenuItemProps>`\n  /**\n   * Common style\n   */\n  ${({ $isDisabled, $theme, $color }) =>\n    !$isDisabled\n      ? css`\n          & {\n            color: ${$color\n              ? $color\n              : `var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-resting)`};\n          }\n        `\n      : css`\n          & {\n            color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-disabled);\n          }\n        `}\n  align-items: center;\n  border-radius: 0 4px 4px 0;\n  display: flex;\n  font-family: var(--redsift-typography-body-font-family);\n  font-size: 14px;\n  font-weight: var(--redsift-typography-body-font-weight);\n  gap: 8px;\n  line-height: var(--redsift-typography-body-line-height);\n  overflow: hidden;\n  text-decoration: none;\n  text-transform: uppercase;\n  width: 100%;\n\n  &:hover,\n  &:focus-visible {\n    outline: none;\n\n    ${({ $isDisabled, $theme, $color }) =>\n      !$isDisabled\n        ? css`\n            background-color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-background-hover);\n            & {\n              color: ${$color\n                ? $color\n                : `var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-hover)`};\n            }\n          `\n        : ''}\n  }\n\n  :active {\n    ${({ $isDisabled, $theme }) =>\n      !$isDisabled\n        ? css`\n            background-color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-background-active);\n          `\n        : ''}\n  }\n\n  ${({ $variant }) => css`\n    @media (prefers-reduced-motion: no-preference) {\n      :focus-visible {\n        > span${$variant === SideNavigationMenuBarVariant.shrinked ? '.first' : '.content'} {\n          outline: 2px solid var(--redsift-color-primary-n);\n          transition: outline-offset 75ms ease-out;\n        }\n\n        :not(:active):focus-visible {\n          > span${$variant === SideNavigationMenuBarVariant.shrinked ? '.first' : '.content'} {\n            transition-duration: 0.25s;\n          }\n        }\n      }\n\n      :not(:active):focus-visible {\n        > span${$variant === SideNavigationMenuBarVariant.shrinked ? '.first' : '.content'} {\n          outline-offset: 0.25rem;\n        }\n      }\n    }\n\n    .content {\n      transition: opacity 300ms ease-out;\n      opacity: ${$variant === SideNavigationMenuBarVariant.shrinked ? '0' : '1'};\n      overflow: hidden;\n      white-space: nowrap;\n    }\n  `}\n\n  ${({ $hasIcon, $isSecondLevel, $variant, $theme }) =>\n    !$isSecondLevel\n      ? css`\n          /**\n           * First-level items\n           */\n\n          background-color: var(--redsift-color-${$theme}-components-side-navigation-background);\n          height: 40px;\n          margin-bottom: 4px;\n          margin-left: -4px;\n          transition: padding 300ms ease-out;\n          padding: 0 16px 0 ${$variant === SideNavigationMenuBarVariant.shrinked ? '16px' : '16px'};\n\n          .redsift-icon.first {\n            box-sizing: unset;\n          }\n        `\n      : `\n    /**\n     * Second-level items\n     */\n\n    background-color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-background-secondary);\n    font-size: var(--redsift-typography-caption-font-size);\n    padding-bottom: 4px;\n    padding-left: ${$hasIcon ? '18px' : '54px'};\n    padding-right: 0;\n    padding-top: 4px;\n    border-radius: 0;\n\n    .redsift-icon.first {\n      box-sizing: unset;\n      margin-right: 8px;\n    }\n  `}\n`;\n"],"names":["StyledSideNavigationMenuItemIndicatorContainer","styled","div","StyledSideNavigationMenuItemIndicator","_ref","$theme","StyledSideNavigationMenuItemBorder","StyledSideNavigationMenuItem","a","_ref2","$isDisabled","$color","css","_ref3","_ref4","_ref5","$variant","SideNavigationMenuBarVariant","shrinked","_ref6","$hasIcon","$isSecondLevel"],"mappings":"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"}

package/components/side-navigation-menu-item/types.d.ts

@@ -0,0 +1,51 @@
+import { ComponentProps, ElementType, RefObject } from 'react';
+import { BadgeProps } from '../badge/types.js';
+import { IconProps } from '../icon/types.js';
+import { Theme } from '../../types/colors.js';
+import { SideNavigationMenuBarVariant } from '../side-navigation-menu-bar/types.js';
+
+/**
+ * Component props.
+ */
+interface SideNavigationMenuItemProps extends ComponentProps<'a'> {
+    /** Prop to pass a custom react component instead of a simple HTML anchor (useful for Nextjs or React Router Link component). */
+    as?: 'a' | ElementType;
+    /** Text or number that should be displayed inside a badge next to the menu item text. */
+    badge?: number | string;
+    /** Custom props to pass to the Badge component, if any. */
+    badgeProps?: Omit<BadgeProps, 'ref'>;
+    /** Color variant. */
+    color?: string;
+    /** Whether the menu item has a border or not. */
+    hasBorder?: boolean;
+    /** Href is required for this component. */
+    href: ComponentProps<'a'>['href'];
+    /**
+     * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />
+     * Can also be a ReactElement.
+     */
+    icon?: IconProps['icon'];
+    /** Custom props to pass to the Icon component. */
+    iconProps?: Omit<IconProps, 'ref' | 'icon'>;
+    /** Custom ref to pass to the Icon component. */
+    iconRef?: RefObject<HTMLElement>;
+    /** Whether the component is active or not. */
+    isCurrent?: boolean;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Whether the component is a second-level menu item. */
+    isSecondLevel?: boolean;
+    /** Theme. */
+    theme?: Theme;
+}
+type StyledSideNavigationMenuItemProps = Omit<SideNavigationMenuItemProps, 'isCurrent' | 'isDisabled' | 'isSecondLevel' | 'hasBorder'> & {
+    $color: SideNavigationMenuItemProps['color'];
+    $hasIcon: boolean;
+    $isCurrent: SideNavigationMenuItemProps['isCurrent'];
+    $isDisabled: SideNavigationMenuItemProps['isDisabled'];
+    $isSecondLevel: SideNavigationMenuItemProps['isSecondLevel'];
+    $variant: SideNavigationMenuBarVariant;
+    $theme: SideNavigationMenuItemProps['theme'];
+};
+
+export { SideNavigationMenuItemProps, StyledSideNavigationMenuItemProps };

package/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,15 @@
+import { SkeletonProps } from './types.js';
+import { Comp } from '../../types/helpers.js';
+import { SkeletonCircleProps } from '../skeleton-circle/types.js';
+import { SkeletonTextProps } from '../skeleton-text/types.js';
+
+/**
+ * The Skeleton component.
+ */
+declare const BaseSkeleton: Comp<SkeletonProps, HTMLDivElement>;
+declare const Skeleton: Comp<SkeletonProps, HTMLDivElement> & {
+    Circle: Comp<SkeletonCircleProps, HTMLDivElement>;
+    Text: Comp<SkeletonTextProps, HTMLDivElement>;
+};
+
+export { BaseSkeleton, Skeleton };

package/components/skeleton/Skeleton.js

@@ -0,0 +1,42 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { StyledSkeleton } from './styles.js';
+import { SkeletonCircle } from '../skeleton-circle/SkeletonCircle.js';
+import { SkeletonText } from '../skeleton-text/SkeletonText.js';
+import { useTheme } from '../theme/useTheme.js';
+
+const _excluded = ["children", "className", "isLoaded", "theme"];
+const COMPONENT_NAME = 'Skeleton';
+const CLASSNAME = 'redsift-skeleton';
+
+/**
+ * The Skeleton component.
+ */
+const BaseSkeleton = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      isLoaded,
+      theme: propsTheme
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  if (isLoaded) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
+  }
+  return /*#__PURE__*/React__default.createElement(StyledSkeleton, _extends({}, forwardedProps, {
+    $theme: theme,
+    className: classNames(BaseSkeleton.className, className),
+    ref: ref
+  }), typeof children === 'string' ? /*#__PURE__*/React__default.createElement("span", null, children) : children);
+});
+BaseSkeleton.className = CLASSNAME;
+BaseSkeleton.displayName = COMPONENT_NAME;
+const Skeleton = Object.assign(BaseSkeleton, {
+  Circle: SkeletonCircle,
+  Text: SkeletonText
+});
+
+export { BaseSkeleton, Skeleton };
+//# sourceMappingURL=Skeleton.js.map

package/components/skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sources":["../../../src/components/skeleton/Skeleton.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\n\nimport { Comp } from '../../types';\nimport { StyledSkeleton } from './styles';\nimport { SkeletonProps } from './types';\nimport { SkeletonCircle } from '../skeleton-circle';\nimport { SkeletonText } from '../skeleton-text';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Skeleton';\nconst CLASSNAME = 'redsift-skeleton';\n\n/**\n * The Skeleton component.\n */\nexport const BaseSkeleton: Comp<SkeletonProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { children, className, isLoaded, theme: propsTheme, ...forwardedProps } = props;\n\n  const theme = useTheme(propsTheme);\n\n  if (isLoaded) {\n    return <>{children}</>;\n  }\n\n  return (\n    <StyledSkeleton\n      {...forwardedProps}\n      $theme={theme}\n      className={classNames(BaseSkeleton.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n    >\n      {typeof children === 'string' ? <span>{children}</span> : children}\n    </StyledSkeleton>\n  );\n});\nBaseSkeleton.className = CLASSNAME;\nBaseSkeleton.displayName = COMPONENT_NAME;\n\nexport const Skeleton = Object.assign(BaseSkeleton, {\n  Circle: SkeletonCircle,\n  Text: SkeletonText,\n});\n"],"names":["COMPONENT_NAME","CLASSNAME","BaseSkeleton","forwardRef","props","ref","children","className","isLoaded","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","useTheme","React","createElement","Fragment","StyledSkeleton","_extends","$theme","classNames","displayName","Skeleton","Object","assign","Circle","SkeletonCircle","Text","SkeletonText"],"mappings":";;;;;;;;;AAUA,MAAMA,cAAc,GAAG,UAAU,CAAA;AACjC,MAAMC,SAAS,GAAG,kBAAkB,CAAA;;AAEpC;AACA;AACA;AACO,MAAMC,YAAiD,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC1F,MAAM;MAAEC,QAAQ;MAAEC,SAAS;MAAEC,QAAQ;AAAEC,MAAAA,KAAK,EAAEC,UAAAA;AAA8B,KAAC,GAAGN,KAAK;AAAxBO,IAAAA,cAAc,GAAAC,wBAAA,CAAKR,KAAK,EAAAS,SAAA,CAAA,CAAA;AAErF,EAAA,MAAMJ,KAAK,GAAGK,QAAQ,CAACJ,UAAU,CAAC,CAAA;AAElC,EAAA,IAAIF,QAAQ,EAAE;IACZ,oBAAOO,cAAA,CAAAC,aAAA,CAAAD,cAAA,CAAAE,QAAA,EAAGX,IAAAA,EAAAA,QAAW,CAAC,CAAA;AACxB,GAAA;EAEA,oBACES,cAAA,CAAAC,aAAA,CAACE,cAAc,EAAAC,QAAA,KACTR,cAAc,EAAA;AAClBS,IAAAA,MAAM,EAAEX,KAAM;IACdF,SAAS,EAAEc,UAAU,CAACnB,YAAY,CAACK,SAAS,EAAEA,SAAS,CAAE;AACzDF,IAAAA,GAAG,EAAEA,GAAAA;AAAiC,GAAA,CAAA,EAErC,OAAOC,QAAQ,KAAK,QAAQ,gBAAGS,cAAA,CAAAC,aAAA,CAAOV,MAAAA,EAAAA,IAAAA,EAAAA,QAAe,CAAC,GAAGA,QAC5C,CAAC,CAAA;AAErB,CAAC,EAAC;AACFJ,YAAY,CAACK,SAAS,GAAGN,SAAS,CAAA;AAClCC,YAAY,CAACoB,WAAW,GAAGtB,cAAc,CAAA;AAElC,MAAMuB,QAAQ,GAAGC,MAAM,CAACC,MAAM,CAACvB,YAAY,EAAE;AAClDwB,EAAAA,MAAM,EAAEC,cAAc;AACtBC,EAAAA,IAAI,EAAEC,YAAAA;AACR,CAAC;;;;"}

package/components/skeleton/styles.js

@@ -0,0 +1,84 @@
+import styled, { keyframes, css } from 'styled-components';
+import { baseStyling, baseInternalSpacing } from '../shared/styles.js';
+import { Theme } from '../../types/colors.js';
+
+/**
+ * Component style.
+ */
+const wave = keyframes`
+  0% {
+    -webkit-transform: translateX(-100%);
+    -moz-transform: translateX(-100%);
+    -ms-transform: translateX(-100%);
+    transform: translateX(-100%);
+  }
+
+  50% {
+    -webkit-transform: translateX(100%);
+    -moz-transform: translateX(100%);
+    -ms-transform: translateX(100%);
+    transform: translateX(100%);
+  }
+
+  100% {
+    -webkit-transform: translateX(100%);
+    -moz-transform: translateX(100%);
+    -ms-transform: translateX(100%);
+    transform: translateX(100%);
+  }
+`;
+const StyledSkeleton = styled.div`
+  height: fit-content;
+  width: fit-content;
+
+  * {
+    visibility: hidden;
+  }
+
+  flex: 0 0 auto;
+
+  ${baseStyling}
+  ${baseInternalSpacing}
+
+  display: block;
+  background-color: ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return $theme === Theme.light ? css`rgba(0, 0, 0, 0.16)` : css`rgba(255, 255, 255, 0.16)`;
+}};
+  border-radius: 4px;
+  position: relative;
+  overflow: hidden;
+  -webkit-mask-image: -webkit-radial-gradient(white, black);
+
+  &::after {
+    -webkit-animation: ${wave} 1.6s linear 0.5s infinite;
+    animation: ${wave} 1.6s linear 0.5s infinite;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      ${_ref2 => {
+  let {
+    $theme
+  } = _ref2;
+  return $theme === Theme.light ? css`rgba(0, 0, 0, 0.04)` : css`rgba(255, 255, 255, 0.04)`;
+}},
+      transparent
+    );
+    background-clip: content-box;
+    content: '';
+    position: absolute;
+    -webkit-transform: translateX(-100%);
+    -moz-transform: translateX(-100%);
+    -ms-transform: translateX(-100%);
+    transform: translateX(-100%);
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+  }
+`;
+
+export { StyledSkeleton };
+//# sourceMappingURL=styles.js.map

package/components/skeleton/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/skeleton/styles.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport { baseInternalSpacing, baseStyling } from '../shared';\nimport { StyledSkeletonProps } from './types';\nimport { Theme } from '../../types';\n\n/**\n * Component style.\n */\nconst wave = keyframes`\n  0% {\n    -webkit-transform: translateX(-100%);\n    -moz-transform: translateX(-100%);\n    -ms-transform: translateX(-100%);\n    transform: translateX(-100%);\n  }\n\n  50% {\n    -webkit-transform: translateX(100%);\n    -moz-transform: translateX(100%);\n    -ms-transform: translateX(100%);\n    transform: translateX(100%);\n  }\n\n  100% {\n    -webkit-transform: translateX(100%);\n    -moz-transform: translateX(100%);\n    -ms-transform: translateX(100%);\n    transform: translateX(100%);\n  }\n`;\n\nexport const StyledSkeleton = styled.div<StyledSkeletonProps>`\n  height: fit-content;\n  width: fit-content;\n\n  * {\n    visibility: hidden;\n  }\n\n  flex: 0 0 auto;\n\n  ${baseStyling}\n  ${baseInternalSpacing}\n\n  display: block;\n  background-color: ${({ $theme }) =>\n    $theme === Theme.light ? css`rgba(0, 0, 0, 0.16)` : css`rgba(255, 255, 255, 0.16)`};\n  border-radius: 4px;\n  position: relative;\n  overflow: hidden;\n  -webkit-mask-image: -webkit-radial-gradient(white, black);\n\n  &::after {\n    -webkit-animation: ${wave} 1.6s linear 0.5s infinite;\n    animation: ${wave} 1.6s linear 0.5s infinite;\n    background: linear-gradient(\n      90deg,\n      transparent,\n      ${({ $theme }) => ($theme === Theme.light ? css`rgba(0, 0, 0, 0.04)` : css`rgba(255, 255, 255, 0.04)`)},\n      transparent\n    );\n    background-clip: content-box;\n    content: '';\n    position: absolute;\n    -webkit-transform: translateX(-100%);\n    -moz-transform: translateX(-100%);\n    -ms-transform: translateX(-100%);\n    transform: translateX(-100%);\n    bottom: 0;\n    left: 0;\n    right: 0;\n    top: 0;\n  }\n`;\n"],"names":["wave","keyframes","StyledSkeleton","styled","div","baseStyling","baseInternalSpacing","_ref","$theme","Theme","light","css","_ref2"],"mappings":";;;;AAKA;AACA;AACA;AACA,MAAMA,IAAI,GAAGC,SAAU,CAAA;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAA;AAEYC,MAAAA,cAAc,GAAGC,MAAM,CAACC,GAAyB,CAAA;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,WAAY,CAAA;AAChB,EAAA,EAAIC,mBAAoB,CAAA;AACxB;AACA;AACA,oBAAA,EAAsBC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;EAAA,OAC7BC,MAAM,KAAKC,KAAK,CAACC,KAAK,GAAGC,GAAI,CAAA,mBAAA,CAAoB,GAAGA,GAAI,CAA0B,yBAAA,CAAA,CAAA;AAAA,CAAC,CAAA;AACvF;AACA;AACA;AACA;AACA;AACA;AACA,uBAAA,EAAyBX,IAAK,CAAA;AAC9B,eAAA,EAAiBA,IAAK,CAAA;AACtB;AACA;AACA;AACA,MAAA,EAAQY,KAAA,IAAA;EAAA,IAAC;AAAEJ,IAAAA,MAAAA;AAAO,GAAC,GAAAI,KAAA,CAAA;EAAA,OAAMJ,MAAM,KAAKC,KAAK,CAACC,KAAK,GAAGC,GAAI,CAAA,mBAAA,CAAoB,GAAGA,GAAI,CAA0B,yBAAA,CAAA,CAAA;AAAA,CAAE,CAAA;AAC7G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}

package/components/skeleton/types.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps } from 'react';
+import { StylingProps, InternalSpacingProps } from '../../types/styles.js';
+import { Theme } from '../../types/colors.js';
+
+/**
+ * Component props.
+ */
+interface SkeletonProps extends ComponentProps<'div'>, StylingProps, InternalSpacingProps {
+    /** Whether the content is loaded and should be displayed instead of the skeleton. */
+    isLoaded?: boolean;
+    /** Theme. */
+    theme?: Theme;
+}
+type StyledSkeletonProps = SkeletonProps & {
+    $theme: SkeletonProps['theme'];
+};
+
+export { SkeletonProps, StyledSkeletonProps };