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

package/components/app-side-panel/AppSidePanel.js

@@ -0,0 +1,86 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useContext, useEffect } from 'react';
+import classNames from 'classnames';
+import intlMessages from './intl/index.js';
+import { AppContainerContext } from '../app-container/context.js';
+import { StyledAppSidePanel } from './styles.js';
+import { mdiMenu } from '@redsift/icons';
+import { useWindowSize } from '../../hooks/useWindowSize.js';
+import { useMessageFormatter } from '../../react-aria/react-aria/i18n/useMessageFormatter.js';
+import { ProductLogo } from '../../types/products.js';
+import { useTheme } from '../theme/useTheme.js';
+import { Icon } from '../icon/Icon.js';
+import { IconButton } from '../icon-button/IconButton.js';
+
+const _excluded = ["children", "className", "featuredElements", "iconButtonProps", "iconButtonRef", "logo", "onOpen", "theme", "variant"];
+const COMPONENT_NAME = 'AppSidePanel';
+const CLASSNAME = 'redsift-app-side-panel';
+
+/**
+ * The AppSidePanel component.
+ */
+const AppSidePanel = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      featuredElements,
+      iconButtonProps,
+      iconButtonRef,
+      logo,
+      onOpen,
+      theme: propsTheme,
+      variant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const {
+    width
+  } = useWindowSize();
+  const appContainerState = useContext(AppContainerContext);
+  const theme = useTheme(propsTheme);
+  const format = useMessageFormatter(intlMessages);
+  useEffect(() => {
+    if (appContainerState && variant && appContainerState.sidePanelVariant !== variant) {
+      appContainerState.setSidePanelVariant(variant);
+    }
+  }, [variant]);
+  const handleClose = event => {
+    onOpen === null || onOpen === void 0 ? void 0 : onOpen(event);
+    appContainerState === null || appContainerState === void 0 ? void 0 : appContainerState.expandSidePanel();
+  };
+  const computedVariant = appContainerState ? appContainerState.sidePanelVariant : variant;
+  const product = appContainerState && appContainerState.product;
+  return /*#__PURE__*/React__default.createElement(StyledAppSidePanel, _extends({}, forwardedProps, {
+    $theme: theme,
+    $variant: computedVariant,
+    className: classNames(AppSidePanel.className, className),
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${AppSidePanel.className}__header`
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${AppSidePanel.className}-header__logo`
+  }, /*#__PURE__*/React__default.isValidElement(logo) ? logo : logo ? /*#__PURE__*/React__default.createElement("img", {
+    src: logo.src,
+    alt: logo.alt
+  }) : product && (typeof product === 'string' || product.logo) ? /*#__PURE__*/React__default.createElement(Icon, {
+    icon: typeof product === 'string' ? ProductLogo[product] : product.logo,
+    size: {
+      height: width && width > 1080 ? 41 : 36
+    }
+  }) : null), /*#__PURE__*/React__default.createElement(IconButton, _extends({
+    className: `${AppSidePanel.className}-header__expand-button`
+  }, iconButtonProps, {
+    "aria-label": format('expand'),
+    icon: mdiMenu,
+    onClick: handleClose,
+    ref: iconButtonRef,
+    color: "grey",
+    isDisabled: computedVariant === 'standard'
+  }))), featuredElements ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${AppSidePanel.className}__featured`
+  }, featuredElements) : null, children);
+});
+AppSidePanel.className = CLASSNAME;
+AppSidePanel.displayName = COMPONENT_NAME;
+
+export { AppSidePanel };
+//# sourceMappingURL=AppSidePanel.js.map

package/components/app-side-panel/AppSidePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppSidePanel.js","sources":["../../../src/components/app-side-panel/AppSidePanel.tsx"],"sourcesContent":["import React, { ComponentProps, forwardRef, MouseEvent, RefObject, useContext, useEffect } from 'react';\nimport classNames from 'classnames';\n\nimport { useMessageFormatter } from '../../react-aria/react-aria/i18n';\nimport intlMessages from './intl';\n\nimport { Comp, ProductLogo } from '../../types';\nimport { IconButton } from '../icon-button';\nimport { AppContainerContext } from '../app-container/context';\nimport { StyledAppSidePanel } from './styles';\nimport { AppSidePanelProps } from './types';\nimport { mdiMenu } from '@redsift/icons';\nimport { Icon } from '../icon';\nimport { useWindowSize } from '../../hooks';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'AppSidePanel';\nconst CLASSNAME = 'redsift-app-side-panel';\n\n/**\n * The AppSidePanel component.\n */\nexport const AppSidePanel: Comp<AppSidePanelProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    children,\n    className,\n    featuredElements,\n    iconButtonProps,\n    iconButtonRef,\n    logo,\n    onOpen,\n    theme: propsTheme,\n    variant,\n    ...forwardedProps\n  } = props;\n\n  const { width } = useWindowSize();\n\n  const appContainerState = useContext(AppContainerContext);\n  const theme = useTheme(propsTheme);\n\n  const format = useMessageFormatter(intlMessages);\n\n  useEffect(() => {\n    if (appContainerState && variant && appContainerState.sidePanelVariant !== variant) {\n      appContainerState.setSidePanelVariant(variant);\n    }\n  }, [variant]);\n\n  const handleClose = (event: MouseEvent) => {\n    onOpen?.(event);\n    appContainerState?.expandSidePanel();\n  };\n\n  const computedVariant = appContainerState ? appContainerState.sidePanelVariant : variant;\n  const product = appContainerState && appContainerState.product;\n\n  return (\n    <StyledAppSidePanel\n      {...forwardedProps}\n      $theme={theme}\n      $variant={computedVariant}\n      className={classNames(AppSidePanel.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n    >\n      <div className={`${AppSidePanel.className}__header`}>\n        <div className={`${AppSidePanel.className}-header__logo`}>\n          {React.isValidElement(logo) ? (\n            logo\n          ) : logo ? (\n            <img src={(logo as ComponentProps<'img'>).src} alt={(logo as ComponentProps<'img'>).alt} />\n          ) : product && (typeof product === 'string' || product.logo) ? (\n            <Icon\n              icon={typeof product === 'string' ? ProductLogo[product] : product.logo!}\n              size={{ height: width && width > 1080 ? 41 : 36 }}\n            />\n          ) : null}\n        </div>\n        <IconButton\n          className={`${AppSidePanel.className}-header__expand-button`}\n          {...iconButtonProps}\n          aria-label={format('expand')}\n          icon={mdiMenu}\n          onClick={handleClose}\n          ref={iconButtonRef as RefObject<HTMLButtonElement>}\n          color=\"grey\"\n          isDisabled={computedVariant === 'standard'}\n        />\n      </div>\n      {featuredElements ? <div className={`${AppSidePanel.className}__featured`}>{featuredElements}</div> : null}\n      {children}\n    </StyledAppSidePanel>\n  );\n});\nAppSidePanel.className = CLASSNAME;\nAppSidePanel.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","AppSidePanel","forwardRef","props","ref","children","className","featuredElements","iconButtonProps","iconButtonRef","logo","onOpen","theme","propsTheme","variant","forwardedProps","_objectWithoutProperties","_excluded","width","useWindowSize","appContainerState","useContext","AppContainerContext","useTheme","format","useMessageFormatter","intlMessages","useEffect","sidePanelVariant","setSidePanelVariant","handleClose","event","expandSidePanel","computedVariant","product","React","createElement","StyledAppSidePanel","_extends","$theme","$variant","classNames","isValidElement","src","alt","Icon","icon","ProductLogo","size","height","IconButton","mdiMenu","onClick","color","isDisabled","displayName"],"mappings":"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"}

package/components/app-side-panel/intl/en-US.json.js

@@ -0,0 +1,9 @@
+var expand = "Expand left side panel";
+var collapse = "Collapse left side panel";
+var enUS = {
+	expand: expand,
+	collapse: collapse
+};
+
+export { collapse, enUS as default, expand };
+//# sourceMappingURL=en-US.json.js.map

package/components/app-side-panel/intl/en-US.json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"en-US.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/components/app-side-panel/intl/fr-FR.json.js

@@ -0,0 +1,9 @@
+var expand = "Développer le panneau latéral gauche";
+var collapse = "Réduire le panneau latéral gauche";
+var frFR = {
+	expand: expand,
+	collapse: collapse
+};
+
+export { collapse, frFR as default, expand };
+//# sourceMappingURL=fr-FR.json.js.map

package/components/app-side-panel/intl/fr-FR.json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fr-FR.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/components/app-side-panel/intl/index.js

@@ -0,0 +1,10 @@
+import enUS from './en-US.json.js';
+import frFR from './fr-FR.json.js';
+
+var intlMessages = {
+  'en-US': enUS,
+  'fr-FR': frFR
+};
+
+export { intlMessages as default };
+//# sourceMappingURL=index.js.map

package/components/app-side-panel/intl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/app-side-panel/intl/index.ts"],"sourcesContent":["import enUS from './en-US.json';\nimport frFR from './fr-FR.json';\n\nexport default {\n  'en-US': enUS,\n  'fr-FR': frFR,\n};\n"],"names":["enUS","frFR"],"mappings":";;;AAGA,mBAAe;AACb,EAAA,OAAO,EAAEA,IAAI;AACb,EAAA,OAAO,EAAEC,IAAAA;AACX,CAAC;;;;"}

package/components/app-side-panel/styles.js

@@ -0,0 +1,183 @@
+import styled, { css } from 'styled-components';
+import { AppSidePanelVariant } from './types.js';
+
+/**
+ * Component style.
+ */
+const StyledAppSidePanel = styled.div`
+  align-items: center;
+  background-color: ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return css`var(--redsift-color-${$theme}-components-side-navigation-background)`;
+}};
+  border-right: 4px solid ${_ref2 => {
+  let {
+    $theme
+  } = _ref2;
+  return css`var(--redsift-color-${$theme}-components-side-navigation-right-line)`;
+}};
+  box-sizing: border-box;
+  flex-direction: column;
+  height: 100%;
+  left: 0px;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  transition: width 300ms ease-out;
+  width: ${_ref3 => {
+  let {
+    $variant
+  } = _ref3;
+  return $variant === AppSidePanelVariant.hidden ? '0' : $variant === AppSidePanelVariant.shrinked ? '68px' : '254px';
+}};
+  z-index: var(--redsift-layout-z-index-side-panel);
+
+  .redsift-app-side-panel__header {
+    box-sizing: border-box;
+    transition: padding 300ms ease-out;
+    padding: 18px
+      ${_ref4 => {
+  let {
+    $variant
+  } = _ref4;
+  return $variant === AppSidePanelVariant.hidden ? '0' : $variant === AppSidePanelVariant.shrinked ? '16px' : '24px';
+}};
+    margin-bottom: 16px;
+    width: 100%;
+
+    height: 92px;
+    @media (max-width: 1080px) {
+      height: 72px;
+    }
+
+    display: grid;
+    justify-items: start;
+    align-items: center;
+
+    .redsift-icon-button {
+      > span,
+      > span > svg {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+
+  .redsift-app-side-panel-header__logo {
+    align-items: center;
+    display: flex;
+    grid-column: 1;
+    grid-row: 1;
+    transition: opacity 300ms ease-out;
+    opacity: ${_ref5 => {
+  let {
+    $variant
+  } = _ref5;
+  return $variant === AppSidePanelVariant.shrinked ? '0' : '1';
+}};
+
+    height: 56px;
+    @media (max-width: 1080px) {
+      height: 36px;
+    }
+  }
+
+  .redsift-app-side-panel-header__logo > img {
+    max-height: 56px;
+    @media (max-width: 1080px) {
+      max-height: 36px;
+    }
+    max-width: 195px;
+  }
+
+  .redsift-app-side-panel-header__expand-button {
+    grid-column: 1;
+    grid-row: 1;
+    transition: opacity 300ms ease-out;
+    opacity: ${_ref6 => {
+  let {
+    $variant
+  } = _ref6;
+  return $variant === AppSidePanelVariant.shrinked ? '1' : '0';
+}};
+    padding: 2px;
+    margin-left: -1px;
+  }
+
+  .redsift-app-side-panel__featured {
+    box-sizing: border-box;
+    border-left: 4px solid #e1e1e1;
+    border-right: unset;
+    margin-bottom: 16px;
+    padding: 0px 16px;
+    width: 100%;
+  }
+
+  [dir='rtl'] & {
+    left: unset;
+    right: 0px;
+    transform: unset;
+    transition: unset;
+  }
+
+  scrollbar-color: ${_ref7 => {
+  let {
+    $theme
+  } = _ref7;
+  return css`var(--redsift-color-${$theme}-components-side-navigation-scrollbar-resting) transparent`;
+}};
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    block-size: 9px;
+    inline-size: 9px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-clip: padding-box;
+    background-color: ${_ref8 => {
+  let {
+    $theme
+  } = _ref8;
+  return css`var(--redsift-color-${$theme}-components-side-navigation-scrollbar-resting)`;
+}};
+    border-radius: 0px;
+    border-left: 2px solid transparent;
+    border-right: 2px solid transparent;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb:horizontal,
+  &::-webkit-scrollbar-thumb:vertical {
+    &:hover {
+      background-color: ${_ref9 => {
+  let {
+    $theme
+  } = _ref9;
+  return css`var(--redsift-color-${$theme}-components-side-navigation-scrollbar-hover)`;
+}};
+    }
+  }
+
+  &::-webkit-scrollbar-corner {
+    visibility: hidden;
+  }
+`;
+
+// --redsift-color-${$theme}-components-side-navigation-background
+// --redsift-color-${$theme}-components-side-navigation-right-line
+// --redsift-color-${$theme}-components-side-navigation-current-marker
+// --redsift-color-${$theme}-components-side-navigation-text
+// --redsift-color-${$theme}-components-side-navigation-icon
+// --redsift-color-${$theme}-components-side-navigation-chat-background-hover
+// --redsift-color-${$theme}-components-side-navigation-chat-background-down
+
+// ${({ $theme }) => css`var(--redsift-color-${$theme}-components-side-navigation-background)`};
+
+export { StyledAppSidePanel };
+//# sourceMappingURL=styles.js.map

package/components/app-side-panel/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/app-side-panel/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { AppSidePanelVariant, StyledAppSidePanelProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppSidePanel = styled.div<StyledAppSidePanelProps>`\n  align-items: center;\n  background-color: ${({ $theme }) => css`var(--redsift-color-${$theme}-components-side-navigation-background)`};\n  border-right: 4px solid ${({ $theme }) => css`var(--redsift-color-${$theme}-components-side-navigation-right-line)`};\n  box-sizing: border-box;\n  flex-direction: column;\n  height: 100%;\n  left: 0px;\n  overflow: hidden;\n  position: fixed;\n  top: 0;\n  transition: width 300ms ease-out;\n  width: ${({ $variant }) =>\n    $variant === AppSidePanelVariant.hidden ? '0' : $variant === AppSidePanelVariant.shrinked ? '68px' : '254px'};\n  z-index: var(--redsift-layout-z-index-side-panel);\n\n  .redsift-app-side-panel__header {\n    box-sizing: border-box;\n    transition: padding 300ms ease-out;\n    padding: 18px\n      ${({ $variant }) =>\n        $variant === AppSidePanelVariant.hidden ? '0' : $variant === AppSidePanelVariant.shrinked ? '16px' : '24px'};\n    margin-bottom: 16px;\n    width: 100%;\n\n    height: 92px;\n    @media (max-width: 1080px) {\n      height: 72px;\n    }\n\n    display: grid;\n    justify-items: start;\n    align-items: center;\n\n    .redsift-icon-button {\n      > span,\n      > span > svg {\n        width: 24px;\n        height: 24px;\n      }\n    }\n  }\n\n  .redsift-app-side-panel-header__logo {\n    align-items: center;\n    display: flex;\n    grid-column: 1;\n    grid-row: 1;\n    transition: opacity 300ms ease-out;\n    opacity: ${({ $variant }) => ($variant === AppSidePanelVariant.shrinked ? '0' : '1')};\n\n    height: 56px;\n    @media (max-width: 1080px) {\n      height: 36px;\n    }\n  }\n\n  .redsift-app-side-panel-header__logo > img {\n    max-height: 56px;\n    @media (max-width: 1080px) {\n      max-height: 36px;\n    }\n    max-width: 195px;\n  }\n\n  .redsift-app-side-panel-header__expand-button {\n    grid-column: 1;\n    grid-row: 1;\n    transition: opacity 300ms ease-out;\n    opacity: ${({ $variant }) => ($variant === AppSidePanelVariant.shrinked ? '1' : '0')};\n    padding: 2px;\n    margin-left: -1px;\n  }\n\n  .redsift-app-side-panel__featured {\n    box-sizing: border-box;\n    border-left: 4px solid #e1e1e1;\n    border-right: unset;\n    margin-bottom: 16px;\n    padding: 0px 16px;\n    width: 100%;\n  }\n\n  [dir='rtl'] & {\n    left: unset;\n    right: 0px;\n    transform: unset;\n    transition: unset;\n  }\n\n  scrollbar-color: ${({ $theme }) =>\n    css`var(--redsift-color-${$theme}-components-side-navigation-scrollbar-resting) transparent`};\n  scrollbar-width: thin;\n\n  &::-webkit-scrollbar {\n    block-size: 9px;\n    inline-size: 9px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-clip: padding-box;\n    background-color: ${({ $theme }) =>\n      css`var(--redsift-color-${$theme}-components-side-navigation-scrollbar-resting)`};\n    border-radius: 0px;\n    border-left: 2px solid transparent;\n    border-right: 2px solid transparent;\n  }\n\n  &::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n\n  &::-webkit-scrollbar-thumb:horizontal,\n  &::-webkit-scrollbar-thumb:vertical {\n    &:hover {\n      background-color: ${({ $theme }) =>\n        css`var(--redsift-color-${$theme}-components-side-navigation-scrollbar-hover)`};\n    }\n  }\n\n  &::-webkit-scrollbar-corner {\n    visibility: hidden;\n  }\n`;\n\n// --redsift-color-${$theme}-components-side-navigation-background\n// --redsift-color-${$theme}-components-side-navigation-right-line\n// --redsift-color-${$theme}-components-side-navigation-current-marker\n// --redsift-color-${$theme}-components-side-navigation-text\n// --redsift-color-${$theme}-components-side-navigation-icon\n// --redsift-color-${$theme}-components-side-navigation-chat-background-hover\n// --redsift-color-${$theme}-components-side-navigation-chat-background-down\n\n// ${({ $theme }) => css`var(--redsift-color-${$theme}-components-side-navigation-background)`};\n"],"names":["StyledAppSidePanel","styled","div","_ref","$theme","css","_ref2","_ref3","$variant","AppSidePanelVariant","hidden","shrinked","_ref4","_ref5","_ref6","_ref7","_ref8","_ref9"],"mappings":"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"}

package/components/app-side-panel/types.d.ts

@@ -0,0 +1,39 @@
+import { ComponentProps, ReactElement, RefObject, MouseEvent } from 'react';
+import { ValueOf } from '../../types/helpers.js';
+import { IconButtonProps } from '../icon-button/types.js';
+import { Theme } from '../../types/colors.js';
+
+/**
+ * Component variant.
+ */
+declare const AppSidePanelVariant: {
+    readonly shrinked: "shrinked";
+    readonly standard: "standard";
+    readonly hidden: "hidden";
+};
+type AppSidePanelVariant = ValueOf<typeof AppSidePanelVariant>;
+/**
+ * Component props.
+ */
+interface AppSidePanelProps extends ComponentProps<'div'> {
+    /** Elements to display on top of the navigation menu. Usually a button.  */
+    featuredElements?: ReactElement | ReactElement[];
+    /** Custom props to pass to the IconButton used to collapse the side panel. */
+    iconButtonProps?: Omit<IconButtonProps, 'icon'>;
+    /** Custom ref to pass to the IconButton used to collapse the side panel. */
+    iconButtonRef?: RefObject<HTMLButtonElement>;
+    /** Place to display the logo app.  */
+    logo?: ReactElement | ComponentProps<'img'>;
+    /** Method called when a click occurs on the top open button - which is displayed only in shrinked variant. */
+    onOpen?: (e: MouseEvent) => void;
+    /** Theme. */
+    theme?: Theme;
+    /** Variant. */
+    variant?: AppSidePanelVariant;
+}
+type StyledAppSidePanelProps = Omit<AppSidePanelProps, 'isCollapsed' | 'logo'> & {
+    $variant: AppSidePanelProps['variant'];
+    $theme: AppSidePanelProps['theme'];
+};
+
+export { AppSidePanelProps, AppSidePanelVariant, StyledAppSidePanelProps };

package/components/app-side-panel/types.js

@@ -0,0 +1,15 @@
+/**
+ * Component variant.
+ */
+const AppSidePanelVariant = {
+  shrinked: 'shrinked',
+  standard: 'standard',
+  hidden: 'hidden'
+};
+
+/**
+ * Component props.
+ */
+
+export { AppSidePanelVariant };
+//# sourceMappingURL=types.js.map

package/components/app-side-panel/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/app-side-panel/types.ts"],"sourcesContent":["import { ReactElement, ComponentProps, RefObject, MouseEvent } from 'react';\nimport { Theme, ValueOf } from '../../types';\nimport { IconButtonProps } from '../icon-button';\n\n/**\n * Component variant.\n */\nexport const AppSidePanelVariant = {\n  shrinked: 'shrinked',\n  standard: 'standard',\n  hidden: 'hidden',\n} as const;\nexport type AppSidePanelVariant = ValueOf<typeof AppSidePanelVariant>;\n\n/**\n * Component props.\n */\nexport interface AppSidePanelProps extends ComponentProps<'div'> {\n  /** Elements to display on top of the navigation menu. Usually a button.  */\n  featuredElements?: ReactElement | ReactElement[];\n  /** Custom props to pass to the IconButton used to collapse the side panel. */\n  iconButtonProps?: Omit<IconButtonProps, 'icon'>;\n  /** Custom ref to pass to the IconButton used to collapse the side panel. */\n  iconButtonRef?: RefObject<HTMLButtonElement>;\n  /** Place to display the logo app.  */\n  logo?: ReactElement | ComponentProps<'img'>;\n  /** Method called when a click occurs on the top open button - which is displayed only in shrinked variant. */\n  onOpen?: (e: MouseEvent) => void;\n  /** Theme. */\n  theme?: Theme;\n  /** Variant. */\n  variant?: AppSidePanelVariant;\n}\n\nexport type StyledAppSidePanelProps = Omit<AppSidePanelProps, 'isCollapsed' | 'logo'> & {\n  $variant: AppSidePanelProps['variant'];\n  $theme: AppSidePanelProps['theme'];\n};\n"],"names":["AppSidePanelVariant","shrinked","standard","hidden"],"mappings":"AAIA;AACA;AACA;AACO,MAAMA,mBAAmB,GAAG;AACjCC,EAAAA,QAAQ,EAAE,UAAU;AACpBC,EAAAA,QAAQ,EAAE,UAAU;AACpBC,EAAAA,MAAM,EAAE,QAAA;AACV,EAAU;;AAGV;AACA;AACA;;;;"}

package/components/app-side-panel/useAppSidePanel.d.ts

@@ -0,0 +1,6 @@
+import { AppSidePanelProps } from './types.js';
+import { UseSideNavigationMenuBarProps } from '../side-navigation-menu-bar/useSideNavigationMenuBar.js';
+
+declare const useAppSidePanel: ({ items, isActive }: UseSideNavigationMenuBarProps) => Omit<AppSidePanelProps, 'ref'>;
+
+export { useAppSidePanel };

package/components/app-side-panel/useAppSidePanel.js

@@ -0,0 +1,23 @@
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import { useSideNavigationMenuBar } from '../side-navigation-menu-bar/useSideNavigationMenuBar.js';
+import { SideNavigationMenuBar } from '../side-navigation-menu-bar/SideNavigationMenuBar.js';
+
+const useAppSidePanel = _ref => {
+  let {
+    items,
+    isActive
+  } = _ref;
+  const sideNavigationMenuBarProps = useSideNavigationMenuBar({
+    items,
+    isActive
+  });
+  return {
+    children: /*#__PURE__*/React__default.createElement(SideNavigationMenuBar, _extends({}, sideNavigationMenuBarProps, {
+      "aria-label": "Navigation"
+    }))
+  };
+};
+
+export { useAppSidePanel };
+//# sourceMappingURL=useAppSidePanel.js.map

package/components/app-side-panel/useAppSidePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAppSidePanel.js","sources":["../../../src/components/app-side-panel/useAppSidePanel.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  SideNavigationMenuBar,\n  useSideNavigationMenuBar,\n  UseSideNavigationMenuBarProps,\n} from '../side-navigation-menu-bar';\nimport { AppSidePanelProps } from './types';\n\nexport const useAppSidePanel = ({ items, isActive }: UseSideNavigationMenuBarProps): Omit<AppSidePanelProps, 'ref'> => {\n  const sideNavigationMenuBarProps = useSideNavigationMenuBar({\n    items,\n    isActive,\n  });\n\n  return {\n    children: <SideNavigationMenuBar {...sideNavigationMenuBarProps} aria-label=\"Navigation\" />,\n  };\n};\n"],"names":["useAppSidePanel","_ref","items","isActive","sideNavigationMenuBarProps","useSideNavigationMenuBar","children","React","createElement","SideNavigationMenuBar","_extends"],"mappings":";;;;;AAQaA,MAAAA,eAAe,GAAGC,IAAA,IAAwF;EAAA,IAAvF;IAAEC,KAAK;AAAEC,IAAAA,QAAAA;AAAwC,GAAC,GAAAF,IAAA,CAAA;EAChF,MAAMG,0BAA0B,GAAGC,wBAAwB,CAAC;IAC1DH,KAAK;AACLC,IAAAA,QAAAA;AACF,GAAC,CAAC,CAAA;EAEF,OAAO;IACLG,QAAQ,eAAEC,cAAA,CAAAC,aAAA,CAACC,qBAAqB,EAAAC,QAAA,CAAA,EAAA,EAAKN,0BAA0B,EAAA;MAAE,YAAW,EAAA,YAAA;KAAc,CAAA,CAAA;GAC3F,CAAA;AACH;;;;"}

package/components/badge/Badge.d.ts

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

package/components/badge/Badge.js

@@ -0,0 +1,44 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { StyledBadge } from './styles.js';
+import { BadgeVariant } from './types.js';
+import { useTheme } from '../theme/useTheme.js';
+import { NotificationsColorPalette, PresentationColorPalette } from '../../types/colors.js';
+
+const _excluded = ["autoBreak", "children", "className", "color", "isReversed", "theme", "variant"];
+const COMPONENT_NAME = 'Badge';
+const CLASSNAME = 'redsift-badge';
+
+/**
+ * The Badge component.
+ */
+const Badge = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      autoBreak,
+      children,
+      className,
+      color: propsColor,
+      isReversed,
+      theme: propsTheme,
+      variant: propsVariant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const color = [...Object.values(NotificationsColorPalette), ...Object.values(PresentationColorPalette)].includes(propsColor) ? propsColor : 'question';
+  const variant = Object.values(BadgeVariant).includes(propsVariant) ? propsVariant : 'dot';
+  return /*#__PURE__*/React__default.createElement(StyledBadge, _extends({}, forwardedProps, {
+    $autoBreak: autoBreak,
+    $color: color,
+    $isReversed: isReversed,
+    $theme: theme,
+    $variant: variant,
+    className: classNames(Badge.className, `${Badge.className}-${variant}`, className),
+    ref: ref
+  }), variant === BadgeVariant.standard ? children : null);
+});
+Badge.className = CLASSNAME;
+Badge.displayName = COMPONENT_NAME;
+
+export { Badge };
+//# sourceMappingURL=Badge.js.map

package/components/badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { NotificationsColorPalette, Comp, PresentationColorPalette } from '../../types';\nimport { StyledBadge } from './styles';\nimport { BadgeProps, BadgeVariant } from './types';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Badge';\nconst CLASSNAME = 'redsift-badge';\n\n/**\n * The Badge component.\n */\nexport const Badge: Comp<BadgeProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    autoBreak,\n    children,\n    className,\n    color: propsColor,\n    isReversed,\n    theme: propsTheme,\n    variant: propsVariant,\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme(propsTheme);\n  const color = [...Object.values(NotificationsColorPalette), ...Object.values(PresentationColorPalette)].includes(\n    propsColor!\n  )\n    ? propsColor\n    : 'question';\n  const variant = Object.values(BadgeVariant).includes(propsVariant!) ? propsVariant : 'dot';\n\n  return (\n    <StyledBadge\n      {...forwardedProps}\n      $autoBreak={autoBreak}\n      $color={color}\n      $isReversed={isReversed}\n      $theme={theme}\n      $variant={variant}\n      className={classNames(Badge.className, `${Badge.className}-${variant}`, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n    >\n      {variant === BadgeVariant.standard ? children : null}\n    </StyledBadge>\n  );\n});\nBadge.className = CLASSNAME;\nBadge.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","Badge","forwardRef","props","ref","autoBreak","children","className","color","propsColor","isReversed","theme","propsTheme","variant","propsVariant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","Object","values","NotificationsColorPalette","PresentationColorPalette","includes","BadgeVariant","React","createElement","StyledBadge","_extends","$autoBreak","$color","$isReversed","$theme","$variant","classNames","standard","displayName"],"mappings":";;;;;;;;;AAOA,MAAMA,cAAc,GAAG,OAAO,CAAA;AAC9B,MAAMC,SAAS,GAAG,eAAe,CAAA;;AAEjC;AACA;AACA;AACO,MAAMC,KAAuC,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAChF,MAAM;MACJC,SAAS;MACTC,QAAQ;MACRC,SAAS;AACTC,MAAAA,KAAK,EAAEC,UAAU;MACjBC,UAAU;AACVC,MAAAA,KAAK,EAAEC,UAAU;AACjBC,MAAAA,OAAO,EAAEC,YAAAA;AAEX,KAAC,GAAGX,KAAK;AADJY,IAAAA,cAAc,GAAAC,wBAAA,CACfb,KAAK,EAAAc,SAAA,CAAA,CAAA;AAET,EAAA,MAAMN,KAAK,GAAGO,QAAQ,CAACN,UAAU,CAAC,CAAA;EAClC,MAAMJ,KAAK,GAAG,CAAC,GAAGW,MAAM,CAACC,MAAM,CAACC,yBAAyB,CAAC,EAAE,GAAGF,MAAM,CAACC,MAAM,CAACE,wBAAwB,CAAC,CAAC,CAACC,QAAQ,CAC9Gd,UACF,CAAC,GACGA,UAAU,GACV,UAAU,CAAA;AACd,EAAA,MAAMI,OAAO,GAAGM,MAAM,CAACC,MAAM,CAACI,YAAY,CAAC,CAACD,QAAQ,CAACT,YAAa,CAAC,GAAGA,YAAY,GAAG,KAAK,CAAA;EAE1F,oBACEW,cAAA,CAAAC,aAAA,CAACC,WAAW,EAAAC,QAAA,KACNb,cAAc,EAAA;AAClBc,IAAAA,UAAU,EAAExB,SAAU;AACtByB,IAAAA,MAAM,EAAEtB,KAAM;AACduB,IAAAA,WAAW,EAAErB,UAAW;AACxBsB,IAAAA,MAAM,EAAErB,KAAM;AACdsB,IAAAA,QAAQ,EAAEpB,OAAQ;AAClBN,IAAAA,SAAS,EAAE2B,UAAU,CAACjC,KAAK,CAACM,SAAS,EAAG,CAAA,EAAEN,KAAK,CAACM,SAAU,CAAGM,CAAAA,EAAAA,OAAQ,CAAC,CAAA,EAAEN,SAAS,CAAE;AACnFH,IAAAA,GAAG,EAAEA,GAAAA;GAEJS,CAAAA,EAAAA,OAAO,KAAKW,YAAY,CAACW,QAAQ,GAAG7B,QAAQ,GAAG,IACrC,CAAC,CAAA;AAElB,CAAC,EAAC;AACFL,KAAK,CAACM,SAAS,GAAGP,SAAS,CAAA;AAC3BC,KAAK,CAACmC,WAAW,GAAGrC,cAAc;;;;"}

package/components/badge/styles.js

@@ -0,0 +1,93 @@
+import styled, { css } from 'styled-components';
+import { BadgeVariant } from './types.js';
+import { Theme, PresentationColorPalette, NotificationsColorPalette } from '../../types/colors.js';
+import { baseStyling } from '../shared/styles.js';
+
+/**
+ * Component style.
+ */
+const StyledBadge = styled.div`
+  ${baseStyling}
+  box-sizing: content-box;
+
+  ${_ref => {
+  let {
+    $color,
+    $isReversed,
+    $theme
+  } = _ref;
+  if ($isReversed) {
+    return css`
+        background-color: var(--redsift-color-neutral-${$theme === Theme.light ? 'white' : 'x-dark-grey'});
+
+        &,
+        .redsift-icon {
+          color: ${Object.keys(PresentationColorPalette).includes($color) ? `var(--redsift-color-presentation-${$color}-darker);` : Object.keys(NotificationsColorPalette).includes($color) ? `var(--redsift-color-notifications-${$color}-primary);` : css`var(--redsift-color-neutral-x-dark-grey);`};
+        }
+      `;
+  } else {
+    return css`
+        background-color: ${Object.keys(PresentationColorPalette).includes($color) ? `var(--redsift-color-presentation-${$color}-darker);` : Object.keys(NotificationsColorPalette).includes($color) ? `var(--redsift-color-notifications-${$color}-primary);` : css`var(--redsift-color-neutral-x-dark-grey);`};
+        &,
+        .redsift-icon {
+          color: var(--redsift-color-neutral-white);
+        }
+      `;
+  }
+}}
+
+  ${_ref2 => {
+  let {
+    $variant,
+    $autoBreak
+  } = _ref2;
+  switch ($variant) {
+    case BadgeVariant.dot:
+      return css`
+          border-radius: 50%;
+          height: 8px;
+          margin-bottom: 12px;
+          margin-right: 12px;
+          width: 8px;
+        `;
+    case BadgeVariant.standard:
+    default:
+      return css`
+          align-items: center;
+          border-radius: 64px;
+          display: inline-flex;
+          gap: 4px;
+          height: fit-content;
+          justify-content: center;
+          min-width: 8px;
+          padding: 4px 6px;
+          text-align: center;
+          width: fit-content;
+          word-break: ${$autoBreak ? 'break-word' : 'normal'};
+
+          &,
+          .redsift-icon,
+          .redsift-number,
+          .redsift-text {
+            font-family: var(--redsift-typography-badge-font-family);
+            font-size: var(--redsift-typography-badge-font-size);
+            font-weight: var(--redsift-typography-badge-font-weight);
+            line-height: var(--redsift-typography-badge-line-height);
+          }
+
+          .redsift-icon {
+            width: unset;
+            height: unset;
+
+            > svg {
+              width: 1em;
+              height: 1em;
+            }
+          }
+        `;
+  }
+}}
+`;
+
+export { StyledBadge };
+//# sourceMappingURL=styles.js.map

package/components/badge/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/badge/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { NotificationsColorPalette, PresentationColorPalette, Theme } from '../../types';\nimport { BadgeVariant, StyledBadgeProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledBadge = styled.div<StyledBadgeProps>`\n  ${baseStyling}\n  box-sizing: content-box;\n\n  ${({ $color, $isReversed, $theme }) => {\n    if ($isReversed) {\n      return css`\n        background-color: var(--redsift-color-neutral-${$theme === Theme.light ? 'white' : 'x-dark-grey'});\n\n        &,\n        .redsift-icon {\n          color: ${Object.keys(PresentationColorPalette).includes($color!)\n            ? `var(--redsift-color-presentation-${$color}-darker);`\n            : Object.keys(NotificationsColorPalette).includes($color!)\n            ? `var(--redsift-color-notifications-${$color}-primary);`\n            : css`var(--redsift-color-neutral-x-dark-grey);`};\n        }\n      `;\n    } else {\n      return css`\n        background-color: ${Object.keys(PresentationColorPalette).includes($color!)\n          ? `var(--redsift-color-presentation-${$color}-darker);`\n          : Object.keys(NotificationsColorPalette).includes($color!)\n          ? `var(--redsift-color-notifications-${$color}-primary);`\n          : css`var(--redsift-color-neutral-x-dark-grey);`};\n        &,\n        .redsift-icon {\n          color: var(--redsift-color-neutral-white);\n        }\n      `;\n    }\n  }}\n\n  ${({ $variant, $autoBreak }) => {\n    switch ($variant) {\n      case BadgeVariant.dot:\n        return css`\n          border-radius: 50%;\n          height: 8px;\n          margin-bottom: 12px;\n          margin-right: 12px;\n          width: 8px;\n        `;\n      case BadgeVariant.standard:\n      default:\n        return css`\n          align-items: center;\n          border-radius: 64px;\n          display: inline-flex;\n          gap: 4px;\n          height: fit-content;\n          justify-content: center;\n          min-width: 8px;\n          padding: 4px 6px;\n          text-align: center;\n          width: fit-content;\n          word-break: ${$autoBreak ? 'break-word' : 'normal'};\n\n          &,\n          .redsift-icon,\n          .redsift-number,\n          .redsift-text {\n            font-family: var(--redsift-typography-badge-font-family);\n            font-size: var(--redsift-typography-badge-font-size);\n            font-weight: var(--redsift-typography-badge-font-weight);\n            line-height: var(--redsift-typography-badge-line-height);\n          }\n\n          .redsift-icon {\n            width: unset;\n            height: unset;\n\n            > svg {\n              width: 1em;\n              height: 1em;\n            }\n          }\n        `;\n    }\n  }}\n`;\n"],"names":["StyledBadge","styled","div","baseStyling","_ref","$color","$isReversed","$theme","css","Theme","light","Object","keys","PresentationColorPalette","includes","NotificationsColorPalette","_ref2","$variant","$autoBreak","BadgeVariant","dot","standard"],"mappings":";;;;;AAKA;AACA;AACA;AACaA,MAAAA,WAAW,GAAGC,MAAM,CAACC,GAAsB,CAAA;AACxD,EAAA,EAAIC,WAAY,CAAA;AAChB;AACA;AACA,EAAA,EAAIC,IAAA,IAAqC;EAAA,IAApC;IAAEC,MAAM;IAAEC,WAAW;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAH,IAAA,CAAA;AAChC,EAAA,IAAIE,WAAW,EAAE;AACf,IAAA,OAAOE,GAAI,CAAA;AACjB,sDAAwDD,EAAAA,MAAM,KAAKE,KAAK,CAACC,KAAK,GAAG,OAAO,GAAG,aAAc,CAAA;AACzG;AACA;AACA;AACA,iBAAA,EAAmBC,MAAM,CAACC,IAAI,CAACC,wBAAwB,CAAC,CAACC,QAAQ,CAACT,MAAO,CAAC,GAC3D,CAAA,iCAAA,EAAmCA,MAAO,CAAU,SAAA,CAAA,GACrDM,MAAM,CAACC,IAAI,CAACG,yBAAyB,CAAC,CAACD,QAAQ,CAACT,MAAO,CAAC,GACvD,CAAoCA,kCAAAA,EAAAA,MAAO,CAAW,UAAA,CAAA,GACvDG,GAAI,CAA2C,yCAAA,CAAA,CAAA;AAC7D;AACA,MAAO,CAAA,CAAA;AACH,GAAC,MAAM;AACL,IAAA,OAAOA,GAAI,CAAA;AACjB,0BAAA,EAA4BG,MAAM,CAACC,IAAI,CAACC,wBAAwB,CAAC,CAACC,QAAQ,CAACT,MAAO,CAAC,GACtE,CAAA,iCAAA,EAAmCA,MAAO,CAAU,SAAA,CAAA,GACrDM,MAAM,CAACC,IAAI,CAACG,yBAAyB,CAAC,CAACD,QAAQ,CAACT,MAAO,CAAC,GACvD,CAAoCA,kCAAAA,EAAAA,MAAO,CAAW,UAAA,CAAA,GACvDG,GAAI,CAA2C,yCAAA,CAAA,CAAA;AAC3D;AACA;AACA;AACA;AACA,MAAO,CAAA,CAAA;AACH,GAAA;AACF,CAAE,CAAA;AACJ;AACA,EAAA,EAAIQ,KAAA,IAA8B;EAAA,IAA7B;IAAEC,QAAQ;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAAF,KAAA,CAAA;AACzB,EAAA,QAAQC,QAAQ;IACd,KAAKE,YAAY,CAACC,GAAG;AACnB,MAAA,OAAOZ,GAAI,CAAA;AACnB;AACA;AACA;AACA;AACA;AACA,QAAS,CAAA,CAAA;IACH,KAAKW,YAAY,CAACE,QAAQ,CAAA;AAC1B,IAAA;AACE,MAAA,OAAOb,GAAI,CAAA;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAA,EAAwBU,UAAU,GAAG,YAAY,GAAG,QAAS,CAAA;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAS,CAAA,CAAA;AACL,GAAA;AACF,CAAE,CAAA;AACJ;;;;"}

package/components/badge/types.d.ts

@@ -0,0 +1,37 @@
+import { ComponentProps } from 'react';
+import { NotificationsColorPalette, PresentationColorPalette, Theme } from '../../types/colors.js';
+import { ValueOf } from '../../types/helpers.js';
+import { LayoutProps, SpacingProps, PositioningProps } from '../../types/styles.js';
+
+/**
+ * Component variant.
+ */
+declare const BadgeVariant: {
+    readonly dot: "dot";
+    readonly standard: "standard";
+};
+type BadgeVariant = ValueOf<typeof BadgeVariant>;
+/**
+ * Component props.
+ */
+interface BadgeProps extends ComponentProps<'div'>, LayoutProps, SpacingProps, PositioningProps {
+    /** Whether the badge should automatically break content. */
+    autoBreak?: boolean;
+    /** Color variant. The product colors are available but should only be used to display the Badge in the color of another product. To display a Badge with a color of the current product, use `default`. */
+    color?: NotificationsColorPalette | PresentationColorPalette;
+    /** Whether the Badge has its colors reversed or not. */
+    isReversed?: boolean;
+    /** Theme. */
+    theme?: Theme;
+    /** Badge variant. */
+    variant?: BadgeVariant;
+}
+type StyledBadgeProps = Omit<BadgeProps, 'color' | 'variant' | 'isReversed' | 'autoBreak'> & {
+    $autoBreak: BadgeProps['autoBreak'];
+    $color: BadgeProps['color'];
+    $isReversed: BadgeProps['isReversed'];
+    $variant: BadgeProps['variant'];
+    $theme: BadgeProps['theme'];
+};
+
+export { BadgeProps, BadgeVariant, StyledBadgeProps };