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

package/_internal/SideNavigationMenuItem.js

@@ -0,0 +1,304 @@
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useRef, useContext, useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { w as warnIfNoAccessibleLabelFound } from './warnIfNoAccessibleLabelFound.js';
+import styled, { css } from 'styled-components';
+import { a as Icon, I as IconSize } from './Icon2.js';
+import { a as Badge, B as BadgeVariant } from './Badge2.js';
+import { u as useTheme } from './useTheme.js';
+import { F as Flexbox } from './Flexbox2.js';
+
+/**
+ * Component variant.
+ */
+const SideNavigationMenuBarVariant = {
+  shrinked: 'shrinked',
+  standard: 'standard'
+};
+
+/**
+ * Context props.
+ */
+
+/**
+ * Component props.
+ */
+
+/**
+ * Hook props.
+ */
+
+const SideNavigationMenuBarContext = /*#__PURE__*/React__default.createContext(null);
+
+const SideNavigationMenuContext = /*#__PURE__*/React__default.createContext(null);
+
+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;
+    }
+  `;
+}}
+`;
+
+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 { SideNavigationMenuBarVariant as S, SideNavigationMenuItem as a, SideNavigationMenuBarContext as b, SideNavigationMenuContext as c, StyledSideNavigationMenuItemIndicator as d };
+//# sourceMappingURL=SideNavigationMenuItem.js.map

package/_internal/SideNavigationMenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigationMenuItem.js","sources":["../../src/components/side-navigation-menu-bar/types.ts","../../src/components/side-navigation-menu-bar/context.ts","../../src/components/side-navigation-menu/context.ts","../../src/components/side-navigation-menu-item/styles.ts","../../src/components/side-navigation-menu-item/SideNavigationMenuItem.tsx"],"sourcesContent":["import { ComponentProps, Dispatch, MutableRefObject, SetStateAction } from 'react';\nimport { SideNavigationMenuProps } from '../side-navigation-menu';\nimport { SideNavigationMenuItemProps } from '../side-navigation-menu-item';\nimport { Theme, ValueOf } from '@redsift/design-system/types';\n\n/**\n * Component variant.\n */\nexport const SideNavigationMenuBarVariant = {\n  shrinked: 'shrinked',\n  standard: 'standard',\n} as const;\nexport type SideNavigationMenuBarVariant = ValueOf<typeof SideNavigationMenuBarVariant>;\n\n/**\n * Context props.\n */\nexport type SideNavigationMenuBarContextProps = {\n  /** List of menu items. */\n  menuItems: Set<HTMLAnchorElement | HTMLButtonElement>;\n  /** Side navigation variant. */\n  sideNavigationMenuBarVariant: SideNavigationMenuBarVariant;\n  /** Change side navigation variant. */\n  setSideNavigationMenuBarVariant: Dispatch<SetStateAction<SideNavigationMenuBarVariant>>;\n  /** Current open menu, used to close other menu when canHaveMultipleMenuOpenAtOnce is false. */\n  currentOpenMenuId?: string;\n  /** Change current open menu id. */\n  setCurrentOpenMenuId?: Dispatch<SetStateAction<string | undefined>>;\n};\n\n/**\n * Component props.\n */\nexport interface SideNavigationMenuBarProps extends ComponentProps<'nav'> {\n  /** Whether or not opening a menu closes the others. */\n  canHaveMultipleMenuOpenAtOnce?: boolean;\n  /** Whether the component is disabled or not. */\n  isDisabled?: boolean;\n  /** Custom props to pass to the menubar. */\n  menubarProps?: ComponentProps<'ul'>;\n  /** Custom ref to pass to the menubar. */\n  menubarRef?: MutableRefObject<HTMLUListElement>;\n  /** Theme. */\n  theme?: Theme;\n  /** Variant. */\n  variant?: SideNavigationMenuBarVariant;\n}\n\nexport type StyledSideNavigationMenuBarProps = Omit<SideNavigationMenuBarProps, 'isDisabled'> & {\n  $isDisabled: SideNavigationMenuBarProps['isDisabled'];\n  $marginTop?: number;\n  $variant: SideNavigationMenuBarProps['variant'];\n  $theme: SideNavigationMenuBarProps['theme'];\n};\n\n/**\n * Hook props.\n */\nexport interface MenuItem extends Omit<SideNavigationMenuItemProps, 'children'> {\n  title: string;\n}\nexport interface Menu extends Omit<SideNavigationMenuProps, 'children'> {\n  title: string;\n  children: MenuItem[];\n}\nexport type MenuBarItems = (Menu | MenuItem)[];\n","import React from 'react';\nimport { SideNavigationMenuBarContextProps } from './types';\n\nexport const SideNavigationMenuBarContext =\n  React.createContext<SideNavigationMenuBarContextProps>(null!);\n","import React from 'react';\nimport { SideNavigationMenuContextProps } from './types';\n\nexport const SideNavigationMenuContext =\n  React.createContext<SideNavigationMenuContextProps>(null!);\n","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","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":["SideNavigationMenuBarVariant","shrinked","standard","SideNavigationMenuBarContext","React","createContext","SideNavigationMenuContext","StyledSideNavigationMenuItemIndicatorContainer","styled","div","StyledSideNavigationMenuItemIndicator","_ref","$theme","StyledSideNavigationMenuItemBorder","StyledSideNavigationMenuItem","a","_ref2","$isDisabled","$color","css","_ref3","_ref4","_ref5","$variant","_ref6","$hasIcon","$isSecondLevel","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","sideNavigationMenuContext","useTheme","isFirstChild","setIsFirstChild","useState","menuItems","useEffect","menuItemNode","current","size","add","delete","sideNavigationVariant","sideNavigationMenuBarVariant","createElement","Flexbox","flexDirection","gap","_extends","role","undefined","$isCurrent","classNames","Icon","IconSize","small","medium","Badge","variant","BadgeVariant","displayName"],"mappings":"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"}

package/_internal/Skeleton2.js

@@ -0,0 +1,42 @@
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { S as StyledSkeleton } from './styles6.js';
+import { S as SkeletonCircle } from './SkeletonCircle.js';
+import { S as SkeletonText } from './SkeletonText.js';
+import { u as useTheme } from './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 as B, Skeleton as S };
+//# sourceMappingURL=Skeleton2.js.map

package/_internal/Skeleton2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton2.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/_internal/SkeletonCircle.js

@@ -0,0 +1,58 @@
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import styled, { css } from 'styled-components';
+import { S as StyledSkeleton } from './styles6.js';
+import { u as useTheme } from './useTheme.js';
+
+/**
+ * Component style.
+ */
+const StyledSkeletonCircle = styled(StyledSkeleton)`
+  border-radius: 50%;
+
+  ${_ref => {
+  let {
+    height,
+    width
+  } = _ref;
+  return css`
+    &,
+    &::after {
+      ${height ? `height: ${height};` : width ? `height: ${width};` : ''}
+      ${width ? `width: ${width};` : height ? `width: ${height};` : ''}
+    }
+  `;
+}}
+`;
+
+const _excluded = ["children", "className", "isLoaded", "theme"];
+const COMPONENT_NAME = 'SkeletonCircle';
+const CLASSNAME = 'redsift-skeleton-circle';
+
+/**
+ * The SkeletonCircle component.
+ */
+const SkeletonCircle = /*#__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(StyledSkeletonCircle, _extends({}, forwardedProps, {
+    $theme: theme,
+    className: classNames(SkeletonCircle.className, className),
+    ref: ref
+  }), typeof children === 'string' ? /*#__PURE__*/React__default.createElement("span", null, children) : children);
+});
+SkeletonCircle.className = CLASSNAME;
+SkeletonCircle.displayName = COMPONENT_NAME;
+
+export { SkeletonCircle as S };
+//# sourceMappingURL=SkeletonCircle.js.map

package/_internal/SkeletonCircle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonCircle.js","sources":["../../src/components/skeleton-circle/styles.ts","../../src/components/skeleton-circle/SkeletonCircle.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledSkeleton } from '../skeleton/styles';\nimport { StyledSkeletonCircleProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledSkeletonCircle = styled(\n  StyledSkeleton\n)<StyledSkeletonCircleProps>`\n  border-radius: 50%;\n\n  ${({ height, width }) => css`\n    &,\n    &::after {\n      ${height ? `height: ${height};` : width ? `height: ${width};` : ''}\n      ${width ? `width: ${width};` : height ? `width: ${height};` : ''}\n    }\n  `}\n`;\n","import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\n\nimport { Comp } from '../../types';\nimport { StyledSkeletonCircle } from './styles';\nimport { SkeletonCircleProps } from './types';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'SkeletonCircle';\nconst CLASSNAME = 'redsift-skeleton-circle';\n\n/**\n * The SkeletonCircle component.\n */\nexport const SkeletonCircle: Comp<SkeletonCircleProps, 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    <StyledSkeletonCircle\n      {...forwardedProps}\n      $theme={theme}\n      className={classNames(SkeletonCircle.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n    >\n      {typeof children === 'string' ? <span>{children}</span> : children}\n    </StyledSkeletonCircle>\n  );\n});\nSkeletonCircle.className = CLASSNAME;\nSkeletonCircle.displayName = COMPONENT_NAME;\n"],"names":["StyledSkeletonCircle","styled","StyledSkeleton","_ref","height","width","css","COMPONENT_NAME","CLASSNAME","SkeletonCircle","forwardRef","props","ref","children","className","isLoaded","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","useTheme","React","createElement","Fragment","_extends","$theme","classNames","displayName"],"mappings":";;;;;;;AAIA;AACA;AACA;AACO,MAAMA,oBAAoB,GAAGC,MAAM,CACxCC,cACF,CAA6B,CAAA;AAC7B;AACA;AACA,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;IAAEC,MAAM;AAAEC,IAAAA,KAAAA;AAAM,GAAC,GAAAF,IAAA,CAAA;AAAA,EAAA,OAAKG,GAAI,CAAA;AAC/B;AACA;AACA,MAAA,EAAQF,MAAM,GAAI,CAAUA,QAAAA,EAAAA,MAAO,CAAE,CAAA,CAAA,GAAGC,KAAK,GAAI,CAAUA,QAAAA,EAAAA,KAAM,CAAE,CAAA,CAAA,GAAG,EAAG,CAAA;AACzE,MAAA,EAAQA,KAAK,GAAI,CAASA,OAAAA,EAAAA,KAAM,CAAE,CAAA,CAAA,GAAGD,MAAM,GAAI,CAASA,OAAAA,EAAAA,MAAO,CAAE,CAAA,CAAA,GAAG,EAAG,CAAA;AACvE;AACA,EAAG,CAAA,CAAA;AAAA,CAAC,CAAA;AACJ,CAAC;;;ACXD,MAAMG,cAAc,GAAG,gBAAgB,CAAA;AACvC,MAAMC,SAAS,GAAG,yBAAyB,CAAA;;AAE3C;AACA;AACA;AACO,MAAMC,cAAyD,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAClG,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,CAACvB,oBAAoB,EAAAyB,QAAA,KACfP,cAAc,EAAA;AAClBQ,IAAAA,MAAM,EAAEV,KAAM;IACdF,SAAS,EAAEa,UAAU,CAAClB,cAAc,CAACK,SAAS,EAAEA,SAAS,CAAE;AAC3DF,IAAAA,GAAG,EAAEA,GAAAA;AAAiC,GAAA,CAAA,EAErC,OAAOC,QAAQ,KAAK,QAAQ,gBAAGS,cAAA,CAAAC,aAAA,CAAOV,MAAAA,EAAAA,IAAAA,EAAAA,QAAe,CAAC,GAAGA,QACtC,CAAC,CAAA;AAE3B,CAAC,EAAC;AACFJ,cAAc,CAACK,SAAS,GAAGN,SAAS,CAAA;AACpCC,cAAc,CAACmB,WAAW,GAAGrB,cAAc;;;;"}

package/_internal/SkeletonText.js

@@ -0,0 +1,77 @@
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import styled, { css } from 'styled-components';
+import { S as StyledSkeleton } from './styles6.js';
+import { u as useTheme } from './useTheme.js';
+
+/**
+ * Component style.
+ */
+const StyledSkeletonText = styled(StyledSkeleton)`
+  background-clip: content-box;
+
+  ${_ref => {
+  let {
+    height,
+    $fontSize,
+    $lineHeight,
+    $variant
+  } = _ref;
+  return height ? css`
+          &,
+          &::after {
+            height: ${height};
+          }
+        ` : css`
+          &,
+          &::after {
+            height: ${$fontSize ? $fontSize : `var(--redsift-typography-${$variant}-font-size)`};
+            padding: calc(
+                (
+                    ${$lineHeight ? $lineHeight : `var(--redsift-typography-${$variant}-line-height)`} -
+                      ${$fontSize ? $fontSize : `var(--redsift-typography-${$variant}-font-size)`}
+                  ) / 2
+              )
+              0px;
+          }
+        `;
+}}}
+`;
+
+const _excluded = ["children", "className", "fontSize", "isLoaded", "lineHeight", "theme", "variant"];
+const COMPONENT_NAME = 'SkeletonText';
+const CLASSNAME = 'redsift-skeleton-text';
+
+/**
+ * The SkeletonText component.
+ */
+const SkeletonText = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      fontSize,
+      isLoaded,
+      lineHeight,
+      theme: propsTheme,
+      variant = 'body'
+    } = 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(StyledSkeletonText, _extends({}, forwardedProps, {
+    className: classNames(SkeletonText.className, className),
+    ref: ref,
+    $fontSize: fontSize,
+    $lineHeight: lineHeight,
+    $theme: theme,
+    $variant: variant
+  }), typeof children === 'string' ? /*#__PURE__*/React__default.createElement("span", null, children) : children);
+});
+SkeletonText.className = CLASSNAME;
+SkeletonText.displayName = COMPONENT_NAME;
+
+export { SkeletonText as S };
+//# sourceMappingURL=SkeletonText.js.map

package/_internal/SkeletonText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonText.js","sources":["../../src/components/skeleton-text/styles.ts","../../src/components/skeleton-text/SkeletonText.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledSkeleton } from '../skeleton/styles';\nimport { StyledSkeletonTextProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledSkeletonText = styled(StyledSkeleton)<StyledSkeletonTextProps>`\n  background-clip: content-box;\n\n  ${({ height, $fontSize, $lineHeight, $variant }) =>\n    height\n      ? css`\n          &,\n          &::after {\n            height: ${height};\n          }\n        `\n      : css`\n          &,\n          &::after {\n            height: ${$fontSize ? $fontSize : `var(--redsift-typography-${$variant}-font-size)`};\n            padding: calc(\n                (\n                    ${$lineHeight ? $lineHeight : `var(--redsift-typography-${$variant}-line-height)`} -\n                      ${$fontSize ? $fontSize : `var(--redsift-typography-${$variant}-font-size)`}\n                  ) / 2\n              )\n              0px;\n          }\n        `}}\n`;\n","import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\n\nimport { Comp } from '../../types';\nimport { StyledSkeletonText } from './styles';\nimport { SkeletonTextProps } from './types';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'SkeletonText';\nconst CLASSNAME = 'redsift-skeleton-text';\n\n/**\n * The SkeletonText component.\n */\nexport const SkeletonText: Comp<SkeletonTextProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    children,\n    className,\n    fontSize,\n    isLoaded,\n    lineHeight,\n    theme: propsTheme,\n    variant = 'body',\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme(propsTheme);\n\n  if (isLoaded) {\n    return <>{children}</>;\n  }\n\n  return (\n    <StyledSkeletonText\n      {...forwardedProps}\n      className={classNames(SkeletonText.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n      $fontSize={fontSize}\n      $lineHeight={lineHeight}\n      $theme={theme}\n      $variant={variant}\n    >\n      {typeof children === 'string' ? <span>{children}</span> : children}\n    </StyledSkeletonText>\n  );\n});\nSkeletonText.className = CLASSNAME;\nSkeletonText.displayName = COMPONENT_NAME;\n"],"names":["StyledSkeletonText","styled","StyledSkeleton","_ref","height","$fontSize","$lineHeight","$variant","css","COMPONENT_NAME","CLASSNAME","SkeletonText","forwardRef","props","ref","children","className","fontSize","isLoaded","lineHeight","theme","propsTheme","variant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","React","createElement","Fragment","_extends","classNames","$theme","displayName"],"mappings":";;;;;;;AAIA;AACA;AACA;AACO,MAAMA,kBAAkB,GAAGC,MAAM,CAACC,cAAc,CAA2B,CAAA;AAClF;AACA;AACA,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;IAAEC,MAAM;IAAEC,SAAS;IAAEC,WAAW;AAAEC,IAAAA,QAAAA;AAAS,GAAC,GAAAJ,IAAA,CAAA;EAAA,OAC7CC,MAAM,GACFI,GAAI,CAAA;AACZ;AACA;AACA,oBAAA,EAAsBJ,MAAO,CAAA;AAC7B;AACA,QAAA,CAAS,GACDI,GAAI,CAAA;AACZ;AACA;AACA,oBAAA,EAAsBH,SAAS,GAAGA,SAAS,GAAI,CAAA,yBAAA,EAA2BE,QAAS,CAAa,WAAA,CAAA,CAAA;AAChG;AACA;AACA,oBAAA,EAAsBD,WAAW,GAAGA,WAAW,GAAI,CAAA,yBAAA,EAA2BC,QAAS,CAAe,aAAA,CAAA,CAAA;AACtG,sBAAA,EAAwBF,SAAS,GAAGA,SAAS,GAAI,CAAA,yBAAA,EAA2BE,QAAS,CAAa,WAAA,CAAA,CAAA;AAClG;AACA;AACA;AACA;AACA,QAAS,CAAA,CAAA;AAAA,CAAC,CAAA;AACV,CAAC;;;ACvBD,MAAME,cAAc,GAAG,cAAc,CAAA;AACrC,MAAMC,SAAS,GAAG,uBAAuB,CAAA;;AAEzC;AACA;AACA;AACO,MAAMC,YAAqD,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC9F,MAAM;MACJC,QAAQ;MACRC,SAAS;MACTC,QAAQ;MACRC,QAAQ;MACRC,UAAU;AACVC,MAAAA,KAAK,EAAEC,UAAU;AACjBC,MAAAA,OAAO,GAAG,MAAA;AAEZ,KAAC,GAAGT,KAAK;AADJU,IAAAA,cAAc,GAAAC,wBAAA,CACfX,KAAK,EAAAY,SAAA,CAAA,CAAA;AAET,EAAA,MAAML,KAAK,GAAGM,QAAQ,CAACL,UAAU,CAAC,CAAA;AAElC,EAAA,IAAIH,QAAQ,EAAE;IACZ,oBAAOS,cAAA,CAAAC,aAAA,CAAAD,cAAA,CAAAE,QAAA,EAAGd,IAAAA,EAAAA,QAAW,CAAC,CAAA;AACxB,GAAA;EAEA,oBACEY,cAAA,CAAAC,aAAA,CAAC5B,kBAAkB,EAAA8B,QAAA,KACbP,cAAc,EAAA;IAClBP,SAAS,EAAEe,UAAU,CAACpB,YAAY,CAACK,SAAS,EAAEA,SAAS,CAAE;AACzDF,IAAAA,GAAG,EAAEA,GAAiC;AACtCT,IAAAA,SAAS,EAAEY,QAAS;AACpBX,IAAAA,WAAW,EAAEa,UAAW;AACxBa,IAAAA,MAAM,EAAEZ,KAAM;AACdb,IAAAA,QAAQ,EAAEe,OAAAA;AAAQ,GAAA,CAAA,EAEjB,OAAOP,QAAQ,KAAK,QAAQ,gBAAGY,cAAA,CAAAC,aAAA,CAAOb,MAAAA,EAAAA,IAAAA,EAAAA,QAAe,CAAC,GAAGA,QACxC,CAAC,CAAA;AAEzB,CAAC,EAAC;AACFJ,YAAY,CAACK,SAAS,GAAGN,SAAS,CAAA;AAClCC,YAAY,CAACsB,WAAW,GAAGxB,cAAc;;;;"}