@redsift/design-system 11.6.0-muiv5-alpha.9 → 11.6.0-muiv5-alpha.11

package/packages/design-system/src/components/app-bar/_internal/styles.js

@@ -0,0 +1,139 @@
+import styled, { css } from 'styled-components';
+
+/**
+ * Component style.
+ */
+const StyledAppBar = styled.header`
+  align-content: center;
+  align-items: center;
+
+  ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return css`
+    background-color: var(--redsift-color-${$theme}-components-app-bar-background);
+    color: var(--redsift-color-${$theme}-components-text);
+  `;
+}};
+
+  display: flex;
+  flex-direction: row;
+  z-index: var(--redsift-layout-z-index-header);
+
+  ${_ref2 => {
+  let {
+    $isAppFullScreen
+  } = _ref2;
+  return !$isAppFullScreen ? css`
+          height: 92px;
+          @media (max-width: 1080px) {
+            height: 72px;
+          }
+        ` : css`
+          height: 0;
+          visibility: hidden;
+          @media (max-width: 1080px) {
+            height: 0;
+          }
+        `;
+}}
+
+  justify-content: space-between;
+  left: 0;
+  position: sticky;
+  top: 0;
+
+  ${_ref3 => {
+  let {
+    $hasBorder,
+    $theme
+  } = _ref3;
+  return $hasBorder ? css`
+          border-bottom: 2px solid var(--redsift-color-${$theme}-components-app-bar-border);
+        ` : css`
+          border-bottom: none;
+        `;
+}}
+
+  ${_ref4 => {
+  let {
+    $isSidePanelCollapsed,
+    $isAppFullScreen
+  } = _ref4;
+  return $isAppFullScreen ? css`
+          width: calc(100%);
+        ` : !$isSidePanelCollapsed ? css`
+          transform: translate(254px);
+          width: calc(100% - 254px);
+        ` : css`
+          transform: translate(64px);
+          width: calc(100% - 64px);
+        `;
+}}
+
+  ${_ref5 => {
+  let {
+    $isLoaded
+  } = _ref5;
+  return $isLoaded ? css`
+          transition: transform 0.25s ease-out, width 0.25s ease-out, height 0.25s ease-out, visibility 0.25s ease-out;
+        ` : '';
+}}
+
+  h1 {
+    margin: unset;
+    padding: unset;
+  }
+
+  .redsift-icon-button {
+    > span,
+    > span > svg {
+      width: 30px;
+      height: 30px;
+    }
+  }
+
+  .redsift-app-bar__left {
+    align-content: center;
+    align-items: center;
+    display: inline-flex;
+    flex-direction: row;
+    gap: 8px;
+    justify-content: center;
+    margin-left: 19px;
+  }
+
+  .redsift-app-bar-left__expand-button,
+  .redsift-app-bar-left__collapse-button {
+    margin-right: 3px;
+    padding: 2px;
+    margin-left: -2px;
+  }
+
+  .redsift-app-bar__right {
+    display: inline-flex;
+    margin: 16px;
+  }
+
+  .redsift-breadcrumb-item,
+  .redsift-breadcrumbs__separator {
+    font-family: var(--redsift-typography-h1-font-family) !important;
+    font-size: var(--redsift-typography-h1-font-size) !important;
+    font-weight: var(--redsift-typography-body-font-weight) !important;
+    line-height: var(--redsift-typography-h1-line-height) !important;
+    color: ${_ref6 => {
+  let {
+    $theme
+  } = _ref6;
+  return css`var(--redsift-color-${$theme}-components-app-bar-breadcrumb-default) !important`;
+}};
+  }
+
+  h1.redsift-breadcrumb-item {
+    font-weight: var(--redsift-typography-h1-font-weight) !important;
+  }
+`;
+
+export { StyledAppBar };
+//# sourceMappingURL=styles.js.map

package/packages/design-system/src/components/app-bar/_internal/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../src/components/app-bar/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledAppBarProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppBar = styled.header<StyledAppBarProps>`\n  align-content: center;\n  align-items: center;\n\n  ${({ $theme }) => css`\n    background-color: var(--redsift-color-${$theme}-components-app-bar-background);\n    color: var(--redsift-color-${$theme}-components-text);\n  `};\n\n  display: flex;\n  flex-direction: row;\n  z-index: var(--redsift-layout-z-index-header);\n\n  ${({ $isAppFullScreen }) =>\n    !$isAppFullScreen\n      ? css`\n          height: 92px;\n          @media (max-width: 1080px) {\n            height: 72px;\n          }\n        `\n      : css`\n          height: 0;\n          visibility: hidden;\n          @media (max-width: 1080px) {\n            height: 0;\n          }\n        `}\n\n  justify-content: space-between;\n  left: 0;\n  position: sticky;\n  top: 0;\n\n  ${({ $hasBorder, $theme }) =>\n    $hasBorder\n      ? css`\n          border-bottom: 2px solid var(--redsift-color-${$theme}-components-app-bar-border);\n        `\n      : css`\n          border-bottom: none;\n        `}\n\n  ${({ $isSidePanelCollapsed, $isAppFullScreen }) =>\n    $isAppFullScreen\n      ? css`\n          width: calc(100%);\n        `\n      : !$isSidePanelCollapsed\n      ? css`\n          transform: translate(254px);\n          width: calc(100% - 254px);\n        `\n      : css`\n          transform: translate(64px);\n          width: calc(100% - 64px);\n        `}\n\n  ${({ $isLoaded }) =>\n    $isLoaded\n      ? css`\n          transition: transform 0.25s ease-out, width 0.25s ease-out, height 0.25s ease-out, visibility 0.25s ease-out;\n        `\n      : ''}\n\n  h1 {\n    margin: unset;\n    padding: unset;\n  }\n\n  .redsift-icon-button {\n    > span,\n    > span > svg {\n      width: 30px;\n      height: 30px;\n    }\n  }\n\n  .redsift-app-bar__left {\n    align-content: center;\n    align-items: center;\n    display: inline-flex;\n    flex-direction: row;\n    gap: 8px;\n    justify-content: center;\n    margin-left: 19px;\n  }\n\n  .redsift-app-bar-left__expand-button,\n  .redsift-app-bar-left__collapse-button {\n    margin-right: 3px;\n    padding: 2px;\n    margin-left: -2px;\n  }\n\n  .redsift-app-bar__right {\n    display: inline-flex;\n    margin: 16px;\n  }\n\n  .redsift-breadcrumb-item,\n  .redsift-breadcrumbs__separator {\n    font-family: var(--redsift-typography-h1-font-family) !important;\n    font-size: var(--redsift-typography-h1-font-size) !important;\n    font-weight: var(--redsift-typography-body-font-weight) !important;\n    line-height: var(--redsift-typography-h1-line-height) !important;\n    color: ${({ $theme }) => css`var(--redsift-color-${$theme}-components-app-bar-breadcrumb-default) !important`};\n  }\n\n  h1.redsift-breadcrumb-item {\n    font-weight: var(--redsift-typography-h1-font-weight) !important;\n  }\n`;\n"],"names":["StyledAppBar","styled","header","_ref","$theme","css","_ref2","$isAppFullScreen","_ref3","$hasBorder","_ref4","$isSidePanelCollapsed","_ref5","$isLoaded","_ref6"],"mappings":";;AAGA;AACA;AACA;AACaA,MAAAA,YAAY,GAAGC,MAAM,CAACC,MAA0B,CAAA;AAC7D;AACA;AACA;AACA,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAKE,GAAI,CAAA;AACxB,0CAAA,EAA4CD,MAAO,CAAA;AACnD,+BAAA,EAAiCA,MAAO,CAAA;AACxC,EAAG,CAAA,CAAA;AAAA,CAAC,CAAA;AACJ;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIE,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,gBAAAA;AAAiB,GAAC,GAAAD,KAAA,CAAA;EAAA,OACrB,CAACC,gBAAgB,GACbF,GAAI,CAAA;AACZ;AACA;AACA;AACA;AACA,QAAA,CAAS,GACDA,GAAI,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA,QAAS,CAAA,CAAA;AAAA,CAAC,CAAA;AACV;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIG,KAAA,IAAA;EAAA,IAAC;IAAEC,UAAU;AAAEL,IAAAA,MAAAA;AAAO,GAAC,GAAAI,KAAA,CAAA;EAAA,OACvBC,UAAU,GACNJ,GAAI,CAAA;AACZ,uDAAA,EAAyDD,MAAO,CAAA;AAChE,QAAA,CAAS,GACDC,GAAI,CAAA;AACZ;AACA,QAAS,CAAA,CAAA;AAAA,CAAC,CAAA;AACV;AACA,EAAA,EAAIK,KAAA,IAAA;EAAA,IAAC;IAAEC,qBAAqB;AAAEJ,IAAAA,gBAAAA;AAAiB,GAAC,GAAAG,KAAA,CAAA;EAAA,OAC5CH,gBAAgB,GACZF,GAAI,CAAA;AACZ;AACA,QAAA,CAAS,GACD,CAACM,qBAAqB,GACtBN,GAAI,CAAA;AACZ;AACA;AACA,QAAA,CAAS,GACDA,GAAI,CAAA;AACZ;AACA;AACA,QAAS,CAAA,CAAA;AAAA,CAAC,CAAA;AACV;AACA,EAAA,EAAIO,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,SAAAA;AAAU,GAAC,GAAAD,KAAA,CAAA;EAAA,OACdC,SAAS,GACLR,GAAI,CAAA;AACZ;AACA,QAAA,CAAS,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAA,EAAaS,KAAA,IAAA;EAAA,IAAC;AAAEV,IAAAA,MAAAA;AAAO,GAAC,GAAAU,KAAA,CAAA;EAAA,OAAKT,GAAI,CAAsBD,oBAAAA,EAAAA,MAAO,CAAmD,kDAAA,CAAA,CAAA;AAAA,CAAC,CAAA;AAClH;AACA;AACA;AACA;AACA;AACA;;;;"}

package/packages/design-system/src/components/app-bar/intl/_internal/en-US.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.js.map

package/packages/design-system/src/components/app-bar/intl/_internal/en-US.js.map

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

package/packages/design-system/src/components/app-bar/intl/_internal/fr-FR.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.js.map

package/packages/design-system/src/components/app-bar/intl/_internal/fr-FR.js.map

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

package/packages/design-system/src/components/app-bar/intl/index.js

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

package/packages/design-system/src/components/app-bar/intl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../src/components/app-bar/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/packages/design-system/src/components/app-container/_internal/AppContainer.js

@@ -0,0 +1,117 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../../../_virtual/_internal/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useRef, useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { AppContainerContext } from './context.js';
+import { StyledAppContainer } from './styles.js';
+import { AppSidePanelVariant } from '../../app-side-panel/_internal/types.js';
+import { I18nProvider } from '../../../react-aria/react-aria/i18n/_internal/context.js';
+import { useTheme } from '../../theme/_internal/useTheme.js';
+import { ThemeProvider } from '../../theme/_internal/context.js';
+
+const _excluded = ["children", "className", "locale", "product", "theme", "isFullScreen"];
+const COMPONENT_NAME = 'AppContainer';
+const CLASSNAME = 'redsift-app-container';
+const RadarSvgLinearGradient = () => /*#__PURE__*/React__default.createElement("svg", {
+  width: "0",
+  height: "0"
+}, /*#__PURE__*/React__default.createElement("linearGradient", {
+  id: "radar-gradient-default",
+  x1: "100%",
+  y1: "100%",
+  x2: "0%",
+  y2: "0%"
+}, /*#__PURE__*/React__default.createElement("stop", {
+  stopColor: "rgba(81, 183, 164, 1)",
+  offset: "0%"
+}), /*#__PURE__*/React__default.createElement("stop", {
+  stopColor: "rgba(0, 129, 195, 1)",
+  offset: "100%"
+})), /*#__PURE__*/React__default.createElement("linearGradient", {
+  id: "radar-gradient-hover",
+  x1: "100%",
+  y1: "100%",
+  x2: "0%",
+  y2: "0%"
+}, /*#__PURE__*/React__default.createElement("stop", {
+  stopColor: "rgba(65, 146, 131, 1)",
+  offset: "0%"
+}), /*#__PURE__*/React__default.createElement("stop", {
+  stopColor: "rgba(3, 114, 171, 1)",
+  offset: "100%"
+})), /*#__PURE__*/React__default.createElement("linearGradient", {
+  id: "radar-gradient-active",
+  x1: "100%",
+  y1: "100%",
+  x2: "0%",
+  y2: "0%"
+}, /*#__PURE__*/React__default.createElement("stop", {
+  stopColor: "rgba(58, 122, 110, 1)",
+  offset: "0%"
+}), /*#__PURE__*/React__default.createElement("stop", {
+  stopColor: "rgba(0, 96, 145, 1)",
+  offset: "100%"
+})));
+
+/**
+ * The AppContainer component.
+ */
+const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
+  const _ref = useRef();
+  const divRef = ref || _ref;
+  const {
+      children,
+      className,
+      locale,
+      product,
+      theme: propsTheme,
+      isFullScreen = false
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const [sidePanelVariant, setSidePanelVariant] = useState(isFullScreen ? AppSidePanelVariant.hidden : AppSidePanelVariant.standard);
+  const [breadcrumbs, setBreadcrumbs] = useState();
+  useEffect(() => {
+    if (isFullScreen && sidePanelVariant !== AppSidePanelVariant.hidden) {
+      setSidePanelVariant(AppSidePanelVariant.hidden);
+    } else if (!isFullScreen && sidePanelVariant !== AppSidePanelVariant.standard) {
+      setSidePanelVariant(AppSidePanelVariant.standard);
+    }
+  }, [isFullScreen]);
+  const state = {
+    collapseSidePanel() {
+      setSidePanelVariant(AppSidePanelVariant.shrinked);
+    },
+    expandSidePanel() {
+      setSidePanelVariant(AppSidePanelVariant.standard);
+    },
+    setBreadcrumbs(breadcrumbs) {
+      setBreadcrumbs(breadcrumbs);
+    },
+    product,
+    breadcrumbs,
+    sidePanelVariant,
+    setSidePanelVariant,
+    appContainerRef: divRef,
+    isFullScreen
+  };
+  return /*#__PURE__*/React__default.createElement(StyledAppContainer, _extends({}, forwardedProps, {
+    id: "redsift-app-container",
+    $theme: theme,
+    $product: product,
+    className: classNames(AppContainer.className, className),
+    ref: divRef
+  }), /*#__PURE__*/React__default.createElement(AppContainerContext.Provider, {
+    value: state
+  }, /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(I18nProvider, {
+    locale: locale
+  }, children))), /*#__PURE__*/React__default.createElement(RadarSvgLinearGradient, null));
+});
+AppContainer.className = CLASSNAME;
+AppContainer.displayName = COMPONENT_NAME;
+
+export { AppContainer, RadarSvgLinearGradient };
+//# sourceMappingURL=AppContainer.js.map

package/packages/design-system/src/components/app-container/_internal/AppContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppContainer.js","sources":["../../../../../../../src/components/app-container/AppContainer.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useEffect, useRef, useState } from 'react';\nimport { I18nProvider } from '../../react-aria/react-aria/i18n';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { AppContainerProps } from './types';\nimport { AppContainerContext } from './context';\nimport { StyledAppContainer } from './styles';\nimport { AppSidePanelVariant } from '../app-side-panel';\nimport { BreadcrumbItemProps } from '../breadcrumb-item';\nimport { ThemeProvider, useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'AppContainer';\nconst CLASSNAME = 'redsift-app-container';\n\nexport const RadarSvgLinearGradient: React.FC = () => (\n  <svg width=\"0\" height=\"0\">\n    <linearGradient id=\"radar-gradient-default\" x1=\"100%\" y1=\"100%\" x2=\"0%\" y2=\"0%\">\n      <stop stopColor=\"rgba(81, 183, 164, 1)\" offset=\"0%\" />\n      <stop stopColor=\"rgba(0, 129, 195, 1)\" offset=\"100%\" />\n    </linearGradient>\n    <linearGradient id=\"radar-gradient-hover\" x1=\"100%\" y1=\"100%\" x2=\"0%\" y2=\"0%\">\n      <stop stopColor=\"rgba(65, 146, 131, 1)\" offset=\"0%\" />\n      <stop stopColor=\"rgba(3, 114, 171, 1)\" offset=\"100%\" />\n    </linearGradient>\n    <linearGradient id=\"radar-gradient-active\" x1=\"100%\" y1=\"100%\" x2=\"0%\" y2=\"0%\">\n      <stop stopColor=\"rgba(58, 122, 110, 1)\" offset=\"0%\" />\n      <stop stopColor=\"rgba(0, 96, 145, 1)\" offset=\"100%\" />\n    </linearGradient>\n  </svg>\n);\n\n/**\n * The AppContainer component.\n */\nexport const AppContainer: Comp<AppContainerProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const _ref = useRef<HTMLDivElement>();\n  const divRef = ref || _ref;\n\n  const { children, className, locale, product, theme: propsTheme, isFullScreen = false, ...forwardedProps } = props;\n  const theme = useTheme(propsTheme);\n\n  const [sidePanelVariant, setSidePanelVariant] = useState<AppSidePanelVariant>(\n    isFullScreen ? AppSidePanelVariant.hidden : AppSidePanelVariant.standard\n  );\n  const [breadcrumbs, setBreadcrumbs] = useState<Omit<BreadcrumbItemProps, 'ref'>[] | undefined>();\n\n  useEffect(() => {\n    if (isFullScreen && sidePanelVariant !== AppSidePanelVariant.hidden) {\n      setSidePanelVariant(AppSidePanelVariant.hidden);\n    } else if (!isFullScreen && sidePanelVariant !== AppSidePanelVariant.standard) {\n      setSidePanelVariant(AppSidePanelVariant.standard);\n    }\n  }, [isFullScreen]);\n\n  const state = {\n    collapseSidePanel() {\n      setSidePanelVariant(AppSidePanelVariant.shrinked);\n    },\n    expandSidePanel() {\n      setSidePanelVariant(AppSidePanelVariant.standard);\n    },\n    setBreadcrumbs(breadcrumbs: Omit<BreadcrumbItemProps, 'ref'>[]) {\n      setBreadcrumbs(breadcrumbs);\n    },\n    product,\n    breadcrumbs,\n    sidePanelVariant,\n    setSidePanelVariant,\n    appContainerRef: divRef as RefObject<HTMLDivElement>,\n    isFullScreen,\n  };\n\n  return (\n    <StyledAppContainer\n      {...forwardedProps}\n      id=\"redsift-app-container\"\n      $theme={theme}\n      $product={product}\n      className={classNames(AppContainer.className, className)}\n      ref={divRef as RefObject<HTMLDivElement>}\n    >\n      <AppContainerContext.Provider value={state}>\n        <ThemeProvider value={{ theme }}>\n          <I18nProvider locale={locale}>{children}</I18nProvider>\n        </ThemeProvider>\n      </AppContainerContext.Provider>\n      <RadarSvgLinearGradient />\n    </StyledAppContainer>\n  );\n});\nAppContainer.className = CLASSNAME;\nAppContainer.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","RadarSvgLinearGradient","React","createElement","width","height","id","x1","y1","x2","y2","stopColor","offset","AppContainer","forwardRef","props","ref","_ref","useRef","divRef","children","className","locale","product","theme","propsTheme","isFullScreen","forwardedProps","_objectWithoutProperties","_excluded","useTheme","sidePanelVariant","setSidePanelVariant","useState","AppSidePanelVariant","hidden","standard","breadcrumbs","setBreadcrumbs","useEffect","state","collapseSidePanel","shrinked","expandSidePanel","appContainerRef","StyledAppContainer","_extends","$theme","$product","classNames","AppContainerContext","Provider","value","ThemeProvider","I18nProvider","displayName"],"mappings":";;;;;;;;;;;AAWA,MAAMA,cAAc,GAAG,cAAc,CAAA;AACrC,MAAMC,SAAS,GAAG,uBAAuB,CAAA;MAE5BC,sBAAgC,GAAGA,mBAC9CC,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,EAAAA,KAAK,EAAC,GAAG;AAACC,EAAAA,MAAM,EAAC,GAAA;AAAG,CACvBH,eAAAA,cAAA,CAAAC,aAAA,CAAA,gBAAA,EAAA;AAAgBG,EAAAA,EAAE,EAAC,wBAAwB;AAACC,EAAAA,EAAE,EAAC,MAAM;AAACC,EAAAA,EAAE,EAAC,MAAM;AAACC,EAAAA,EAAE,EAAC,IAAI;AAACC,EAAAA,EAAE,EAAC,IAAA;AAAI,CAC7ER,eAAAA,cAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMQ,EAAAA,SAAS,EAAC,uBAAuB;AAACC,EAAAA,MAAM,EAAC,IAAA;AAAI,CAAE,CAAC,eACtDV,cAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMQ,EAAAA,SAAS,EAAC,sBAAsB;AAACC,EAAAA,MAAM,EAAC,MAAA;AAAM,CAAE,CACxC,CAAC,eACjBV,cAAA,CAAAC,aAAA,CAAA,gBAAA,EAAA;AAAgBG,EAAAA,EAAE,EAAC,sBAAsB;AAACC,EAAAA,EAAE,EAAC,MAAM;AAACC,EAAAA,EAAE,EAAC,MAAM;AAACC,EAAAA,EAAE,EAAC,IAAI;AAACC,EAAAA,EAAE,EAAC,IAAA;AAAI,CAC3ER,eAAAA,cAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMQ,EAAAA,SAAS,EAAC,uBAAuB;AAACC,EAAAA,MAAM,EAAC,IAAA;AAAI,CAAE,CAAC,eACtDV,cAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMQ,EAAAA,SAAS,EAAC,sBAAsB;AAACC,EAAAA,MAAM,EAAC,MAAA;AAAM,CAAE,CACxC,CAAC,eACjBV,cAAA,CAAAC,aAAA,CAAA,gBAAA,EAAA;AAAgBG,EAAAA,EAAE,EAAC,uBAAuB;AAACC,EAAAA,EAAE,EAAC,MAAM;AAACC,EAAAA,EAAE,EAAC,MAAM;AAACC,EAAAA,EAAE,EAAC,IAAI;AAACC,EAAAA,EAAE,EAAC,IAAA;AAAI,CAC5ER,eAAAA,cAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMQ,EAAAA,SAAS,EAAC,uBAAuB;AAACC,EAAAA,MAAM,EAAC,IAAA;AAAI,CAAE,CAAC,eACtDV,cAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMQ,EAAAA,SAAS,EAAC,qBAAqB;AAACC,EAAAA,MAAM,EAAC,MAAA;AAAM,CAAE,CACvC,CACb,EACN;;AAED;AACA;AACA;AACO,MAAMC,YAAqD,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;AAC9F,EAAA,MAAMC,IAAI,GAAGC,MAAM,EAAkB,CAAA;AACrC,EAAA,MAAMC,MAAM,GAAGH,GAAG,IAAIC,IAAI,CAAA;EAE1B,MAAM;MAAEG,QAAQ;MAAEC,SAAS;MAAEC,MAAM;MAAEC,OAAO;AAAEC,MAAAA,KAAK,EAAEC,UAAU;AAAEC,MAAAA,YAAY,GAAG,KAAA;AAAyB,KAAC,GAAGX,KAAK;AAAxBY,IAAAA,cAAc,GAAAC,wBAAA,CAAKb,KAAK,EAAAc,SAAA,CAAA,CAAA;AAClH,EAAA,MAAML,KAAK,GAAGM,QAAQ,CAACL,UAAU,CAAC,CAAA;AAElC,EAAA,MAAM,CAACM,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGC,QAAQ,CACtDP,YAAY,GAAGQ,mBAAmB,CAACC,MAAM,GAAGD,mBAAmB,CAACE,QAClE,CAAC,CAAA;EACD,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGL,QAAQ,EAAkD,CAAA;AAEhGM,EAAAA,SAAS,CAAC,MAAM;AACd,IAAA,IAAIb,YAAY,IAAIK,gBAAgB,KAAKG,mBAAmB,CAACC,MAAM,EAAE;AACnEH,MAAAA,mBAAmB,CAACE,mBAAmB,CAACC,MAAM,CAAC,CAAA;KAChD,MAAM,IAAI,CAACT,YAAY,IAAIK,gBAAgB,KAAKG,mBAAmB,CAACE,QAAQ,EAAE;AAC7EJ,MAAAA,mBAAmB,CAACE,mBAAmB,CAACE,QAAQ,CAAC,CAAA;AACnD,KAAA;AACF,GAAC,EAAE,CAACV,YAAY,CAAC,CAAC,CAAA;AAElB,EAAA,MAAMc,KAAK,GAAG;AACZC,IAAAA,iBAAiBA,GAAG;AAClBT,MAAAA,mBAAmB,CAACE,mBAAmB,CAACQ,QAAQ,CAAC,CAAA;KAClD;AACDC,IAAAA,eAAeA,GAAG;AAChBX,MAAAA,mBAAmB,CAACE,mBAAmB,CAACE,QAAQ,CAAC,CAAA;KAClD;IACDE,cAAcA,CAACD,WAA+C,EAAE;MAC9DC,cAAc,CAACD,WAAW,CAAC,CAAA;KAC5B;IACDd,OAAO;IACPc,WAAW;IACXN,gBAAgB;IAChBC,mBAAmB;AACnBY,IAAAA,eAAe,EAAEzB,MAAmC;AACpDO,IAAAA,YAAAA;GACD,CAAA;EAED,oBACExB,cAAA,CAAAC,aAAA,CAAC0C,kBAAkB,EAAAC,QAAA,KACbnB,cAAc,EAAA;AAClBrB,IAAAA,EAAE,EAAC,uBAAuB;AAC1ByC,IAAAA,MAAM,EAAEvB,KAAM;AACdwB,IAAAA,QAAQ,EAAEzB,OAAQ;IAClBF,SAAS,EAAE4B,UAAU,CAACpC,YAAY,CAACQ,SAAS,EAAEA,SAAS,CAAE;AACzDL,IAAAA,GAAG,EAAEG,MAAAA;AAAoC,GAAA,CAAA,eAEzCjB,cAAA,CAAAC,aAAA,CAAC+C,mBAAmB,CAACC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEZ,KAAAA;AAAM,GAAA,eACzCtC,cAAA,CAAAC,aAAA,CAACkD,aAAa,EAAA;AAACD,IAAAA,KAAK,EAAE;AAAE5B,MAAAA,KAAAA;AAAM,KAAA;AAAE,GAAA,eAC9BtB,cAAA,CAAAC,aAAA,CAACmD,YAAY,EAAA;AAAChC,IAAAA,MAAM,EAAEA,MAAAA;AAAO,GAAA,EAAEF,QAAuB,CACzC,CACa,CAAC,eAC/BlB,cAAA,CAAAC,aAAA,CAACF,sBAAsB,EAAE,IAAA,CACP,CAAC,CAAA;AAEzB,CAAC,EAAC;AACFY,YAAY,CAACQ,SAAS,GAAGrB,SAAS,CAAA;AAClCa,YAAY,CAAC0C,WAAW,GAAGxD,cAAc;;;;"}

package/packages/design-system/src/components/app-container/_internal/app-container.js

@@ -0,0 +1,3 @@
+export { AppContainerContext } from './context.js';
+export { AppContainer, RadarSvgLinearGradient } from './AppContainer.js';
+//# sourceMappingURL=app-container.js.map

package/packages/design-system/src/components/app-container/_internal/context.js

@@ -0,0 +1,6 @@
+import React__default from 'react';
+
+const AppContainerContext = /*#__PURE__*/React__default.createContext(null);
+
+export { AppContainerContext };
+//# sourceMappingURL=context.js.map

package/packages/design-system/src/components/app-container/_internal/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../../../../../../src/components/app-container/context.ts"],"sourcesContent":["import React from 'react';\nimport { AppContainerState } from './types';\n\nexport const AppContainerContext =\n  React.createContext<AppContainerState | null>(null);\n"],"names":["AppContainerContext","React","createContext"],"mappings":";;AAGO,MAAMA,mBAAmB,gBAC9BC,cAAK,CAACC,aAAa,CAA2B,IAAI;;;;"}

package/packages/design-system/src/components/app-container/_internal/styles.js

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+/**
+ * Component style.
+ */
+const StyledAppContainer = styled.div`
+  box-sizing: content-box;
+
+  --redsift-color-text-primary: ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return `var(--redsift-color-${$theme}-components-text-primary);`;
+}};
+  --redsift-color-text-secondary: ${_ref2 => {
+  let {
+    $theme
+  } = _ref2;
+  return `var(--redsift-color-${$theme}-components-text-secondary);`;
+}};
+  color: ${_ref3 => {
+  let {
+    $theme
+  } = _ref3;
+  return `var(--redsift-color-${$theme}-components-text-primary)`;
+}};
+`;
+
+export { StyledAppContainer };
+//# sourceMappingURL=styles.js.map

package/packages/design-system/src/components/app-container/_internal/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../src/components/app-container/styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledAppContainerProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppContainer = styled.div<StyledAppContainerProps>`\n  box-sizing: content-box;\n\n  --redsift-color-text-primary: ${({ $theme }) => `var(--redsift-color-${$theme}-components-text-primary);`};\n  --redsift-color-text-secondary: ${({ $theme }) => `var(--redsift-color-${$theme}-components-text-secondary);`};\n  color: ${({ $theme }) => `var(--redsift-color-${$theme}-components-text-primary)`};\n`;\n"],"names":["StyledAppContainer","styled","div","_ref","$theme","_ref2","_ref3"],"mappings":";;AAGA;AACA;AACA;AACaA,MAAAA,kBAAkB,GAAGC,MAAM,CAACC,GAA6B,CAAA;AACtE;AACA;AACA,gCAAA,EAAkCC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;EAAA,OAAM,CAAA,oBAAA,EAAsBC,MAAO,CAA2B,0BAAA,CAAA,CAAA;AAAA,CAAC,CAAA;AAC5G,kCAAA,EAAoCC,KAAA,IAAA;EAAA,IAAC;AAAED,IAAAA,MAAAA;AAAO,GAAC,GAAAC,KAAA,CAAA;EAAA,OAAM,CAAA,oBAAA,EAAsBD,MAAO,CAA6B,4BAAA,CAAA,CAAA;AAAA,CAAC,CAAA;AAChH,SAAA,EAAWE,KAAA,IAAA;EAAA,IAAC;AAAEF,IAAAA,MAAAA;AAAO,GAAC,GAAAE,KAAA,CAAA;EAAA,OAAM,CAAA,oBAAA,EAAsBF,MAAO,CAA0B,yBAAA,CAAA,CAAA;AAAA,CAAC,CAAA;AACpF;;;;"}

package/packages/design-system/src/components/app-content/_internal/AppContent.js

@@ -0,0 +1,42 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../../../_virtual/_internal/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useContext } from 'react';
+import classNames from 'classnames';
+import { AppContainerContext } from '../../app-container/_internal/context.js';
+import { useIsLoaded } from '../../../hooks/_internal/useIsLoaded.js';
+import { StyledAppContent } from './styles.js';
+import { useTheme } from '../../theme/_internal/useTheme.js';
+import { AppSidePanelVariant } from '../../app-side-panel/_internal/types.js';
+
+const _excluded = ["children", "className", "theme"];
+const COMPONENT_NAME = 'AppContent';
+const CLASSNAME = 'redsift-app-content';
+
+/**
+ * The AppContent component.
+ */
+const AppContent = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      theme: propsTheme
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const {
+    isLoaded
+  } = useIsLoaded();
+  const appContainerState = useContext(AppContainerContext);
+  const theme = useTheme(propsTheme);
+  return /*#__PURE__*/React__default.createElement(StyledAppContent, _extends({}, forwardedProps, {
+    $isLoaded: isLoaded,
+    $isSidePanelCollapsed: appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked : true,
+    $isAppFullScreen: appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.hidden : false,
+    $theme: theme,
+    className: classNames(AppContent.className, className),
+    ref: ref
+  }), children);
+});
+AppContent.className = CLASSNAME;
+AppContent.displayName = COMPONENT_NAME;
+
+export { AppContent };
+//# sourceMappingURL=AppContent.js.map

package/packages/design-system/src/components/app-content/_internal/AppContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppContent.js","sources":["../../../../../../../src/components/app-content/AppContent.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useContext } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { AppContainerContext } from '../app-container/context';\nimport { useIsLoaded } from '../../hooks/useIsLoaded';\nimport { StyledAppContent } from './styles';\nimport { AppContentProps } from './types';\nimport { AppSidePanelVariant } from '../app-side-panel';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'AppContent';\nconst CLASSNAME = 'redsift-app-content';\n\n/**\n * The AppContent component.\n */\nexport const AppContent: Comp<AppContentProps, HTMLElement> = forwardRef((props, ref) => {\n  const { children, className, theme: propsTheme, ...forwardedProps } = props;\n\n  const { isLoaded } = useIsLoaded();\n  const appContainerState = useContext(AppContainerContext);\n  const theme = useTheme(propsTheme);\n\n  return (\n    <StyledAppContent\n      {...forwardedProps}\n      $isLoaded={isLoaded}\n      $isSidePanelCollapsed={\n        appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked : true\n      }\n      $isAppFullScreen={appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.hidden : false}\n      $theme={theme}\n      className={classNames(AppContent.className, className)}\n      ref={ref as RefObject<HTMLElement>}\n    >\n      {children}\n    </StyledAppContent>\n  );\n});\nAppContent.className = CLASSNAME;\nAppContent.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","AppContent","forwardRef","props","ref","children","className","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","isLoaded","useIsLoaded","appContainerState","useContext","AppContainerContext","useTheme","React","createElement","StyledAppContent","_extends","$isLoaded","$isSidePanelCollapsed","sidePanelVariant","AppSidePanelVariant","shrinked","$isAppFullScreen","hidden","$theme","classNames","displayName"],"mappings":";;;;;;;;;;AAUA,MAAMA,cAAc,GAAG,YAAY,CAAA;AACnC,MAAMC,SAAS,GAAG,qBAAqB,CAAA;;AAEvC;AACA;AACA;AACO,MAAMC,UAA8C,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACvF,MAAM;MAAEC,QAAQ;MAAEC,SAAS;AAAEC,MAAAA,KAAK,EAAEC,UAAAA;AAA8B,KAAC,GAAGL,KAAK;AAAxBM,IAAAA,cAAc,GAAAC,wBAAA,CAAKP,KAAK,EAAAQ,SAAA,CAAA,CAAA;EAE3E,MAAM;AAAEC,IAAAA,QAAAA;GAAU,GAAGC,WAAW,EAAE,CAAA;AAClC,EAAA,MAAMC,iBAAiB,GAAGC,UAAU,CAACC,mBAAmB,CAAC,CAAA;AACzD,EAAA,MAAMT,KAAK,GAAGU,QAAQ,CAACT,UAAU,CAAC,CAAA;EAElC,oBACEU,cAAA,CAAAC,aAAA,CAACC,gBAAgB,EAAAC,QAAA,KACXZ,cAAc,EAAA;AAClBa,IAAAA,SAAS,EAAEV,QAAS;IACpBW,qBAAqB,EACnBT,iBAAiB,GAAGA,iBAAiB,CAACU,gBAAgB,KAAKC,mBAAmB,CAACC,QAAQ,GAAG,IAC3F;IACDC,gBAAgB,EAAEb,iBAAiB,GAAGA,iBAAiB,CAACU,gBAAgB,KAAKC,mBAAmB,CAACG,MAAM,GAAG,KAAM;AAChHC,IAAAA,MAAM,EAAEtB,KAAM;IACdD,SAAS,EAAEwB,UAAU,CAAC7B,UAAU,CAACK,SAAS,EAAEA,SAAS,CAAE;AACvDF,IAAAA,GAAG,EAAEA,GAAAA;AAA8B,GAAA,CAAA,EAElCC,QACe,CAAC,CAAA;AAEvB,CAAC,EAAC;AACFJ,UAAU,CAACK,SAAS,GAAGN,SAAS,CAAA;AAChCC,UAAU,CAAC8B,WAAW,GAAGhC,cAAc;;;;"}

package/packages/design-system/src/components/app-content/_internal/app-content.js

@@ -0,0 +1,2 @@
+export { AppContent } from './AppContent.js';
+//# sourceMappingURL=app-content.js.map

package/packages/design-system/src/components/app-content/_internal/styles.js

@@ -0,0 +1,54 @@
+import styled, { css } from 'styled-components';
+import { baseContainer } from '../../shared/_internal/styles.js';
+
+/**
+ * Component style.
+ */
+const StyledAppContent = styled.main`
+  padding: 16px 64px;
+  ${baseContainer}
+
+  ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return $theme ? css`
+          background-color: var(--redsift-color-${$theme}-components-page-background);
+        ` : '';
+}}
+  box-sizing: border-box;
+  min-height: calc(100vh - 92px);
+
+  @media screen and (max-width: 768px) {
+    padding: 0px;
+  }
+
+  ${_ref2 => {
+  let {
+    $isSidePanelCollapsed,
+    $isAppFullScreen
+  } = _ref2;
+  return $isAppFullScreen ? css`
+          transform: translate(0px);
+          width: calc(100%);
+        ` : !$isSidePanelCollapsed ? css`
+          transform: translate(254px);
+          width: calc(100% - 254px);
+        ` : css`
+          transform: translate(68px);
+          width: calc(100% - 68px);
+        `;
+}}
+
+  ${_ref3 => {
+  let {
+    $isLoaded
+  } = _ref3;
+  return $isLoaded ? css`
+          transition: transform 0.25s ease-out, width 0.25s ease-out;
+        ` : '';
+}}
+`;
+
+export { StyledAppContent };
+//# sourceMappingURL=styles.js.map

package/packages/design-system/src/components/app-content/_internal/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../src/components/app-content/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseContainer } from '../shared';\nimport { StyledAppContentProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppContent = styled.main<StyledAppContentProps>`\n  padding: 16px 64px;\n  ${baseContainer}\n\n  ${({ $theme }) =>\n    $theme\n      ? css`\n          background-color: var(--redsift-color-${$theme}-components-page-background);\n        `\n      : ''}\n  box-sizing: border-box;\n  min-height: calc(100vh - 92px);\n\n  @media screen and (max-width: 768px) {\n    padding: 0px;\n  }\n\n  ${({ $isSidePanelCollapsed, $isAppFullScreen }) =>\n    $isAppFullScreen\n      ? css`\n          transform: translate(0px);\n          width: calc(100%);\n        `\n      : !$isSidePanelCollapsed\n      ? css`\n          transform: translate(254px);\n          width: calc(100% - 254px);\n        `\n      : css`\n          transform: translate(68px);\n          width: calc(100% - 68px);\n        `}\n\n  ${({ $isLoaded }) =>\n    $isLoaded\n      ? css`\n          transition: transform 0.25s ease-out, width 0.25s ease-out;\n        `\n      : ''}\n`;\n"],"names":["StyledAppContent","styled","main","baseContainer","_ref","$theme","css","_ref2","$isSidePanelCollapsed","$isAppFullScreen","_ref3","$isLoaded"],"mappings":";;;AAIA;AACA;AACA;AACaA,MAAAA,gBAAgB,GAAGC,MAAM,CAACC,IAA4B,CAAA;AACnE;AACA,EAAA,EAAIC,aAAc,CAAA;AAClB;AACA,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;EAAA,OACXC,MAAM,GACFC,GAAI,CAAA;AACZ,gDAAA,EAAkDD,MAAO,CAAA;AACzD,QAAA,CAAS,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIE,KAAA,IAAA;EAAA,IAAC;IAAEC,qBAAqB;AAAEC,IAAAA,gBAAAA;AAAiB,GAAC,GAAAF,KAAA,CAAA;EAAA,OAC5CE,gBAAgB,GACZH,GAAI,CAAA;AACZ;AACA;AACA,QAAA,CAAS,GACD,CAACE,qBAAqB,GACtBF,GAAI,CAAA;AACZ;AACA;AACA,QAAA,CAAS,GACDA,GAAI,CAAA;AACZ;AACA;AACA,QAAS,CAAA,CAAA;AAAA,CAAC,CAAA;AACV;AACA,EAAA,EAAII,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,SAAAA;AAAU,GAAC,GAAAD,KAAA,CAAA;EAAA,OACdC,SAAS,GACLL,GAAI,CAAA;AACZ;AACA,QAAA,CAAS,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACX;;;;"}

package/packages/design-system/src/components/app-side-panel/_internal/AppSidePanel.js

@@ -0,0 +1,86 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../../../_virtual/_internal/_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/_internal/context.js';
+import { StyledAppSidePanel } from './styles.js';
+import { mdiMenu } from '@redsift/icons';
+import { useWindowSize } from '../../../hooks/_internal/useWindowSize.js';
+import { useMessageFormatter } from '../../../react-aria/react-aria/i18n/_internal/useMessageFormatter.js';
+import { ProductLogo } from '../../../types/_internal/products.js';
+import { useTheme } from '../../theme/_internal/useTheme.js';
+import { Icon } from '../../icon/_internal/Icon2.js';
+import { IconButton } from '../../icon-button/_internal/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/packages/design-system/src/components/app-side-panel/_internal/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/packages/design-system/src/components/app-side-panel/_internal/app-side-panel.js

@@ -0,0 +1,4 @@
+export { AppSidePanelVariant } from './types.js';
+export { AppSidePanel } from './AppSidePanel.js';
+export { useAppSidePanel } from './useAppSidePanel.js';
+//# sourceMappingURL=app-side-panel.js.map

package/packages/design-system/src/components/app-side-panel/_internal/app-side-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-side-panel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}