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

package/components/app-bar/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-bar/intl/fr-FR.json.js.map

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

package/components/app-bar/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-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/components/app-bar/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/components/app-bar/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/components/app-bar/types.d.ts

@@ -0,0 +1,31 @@
+import { ComponentProps, RefObject, ReactElement } from 'react';
+import { BreadcrumbItemProps } from '../breadcrumb-item/types.js';
+import { IconButtonProps } from '../icon-button/types.js';
+import { Theme } from '../../types/colors.js';
+
+/**
+ * Component props.
+ */
+interface AppBarProps extends Omit<ComponentProps<'header'>, 'title'> {
+    /** Array of breadcrumb item props to use to generate a Breadcrumbs in place of the title. The last item is considered as the current page. */
+    breadcrumbs?: Omit<BreadcrumbItemProps, 'ref'>[];
+    /** 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>;
+    /** Title of the page if no one provided automatically */
+    fallbackTitle?: string;
+    /** Title of the page, if no breadcrumbs used. */
+    title?: string | ReactElement;
+    /** Theme. */
+    theme?: Theme;
+}
+type StyledAppBarProps = AppBarProps & {
+    $hasBorder: boolean;
+    $isLoaded: boolean;
+    $isSidePanelCollapsed: boolean;
+    $isAppFullScreen: boolean;
+    $theme: AppBarProps['theme'];
+};
+
+export { AppBarProps, StyledAppBarProps };

package/components/app-container/AppContainer.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { AppContainerProps } from './types.js';
+import { Comp } from '../../types/helpers.js';
+
+declare const RadarSvgLinearGradient: React.FC;
+/**
+ * The AppContainer component.
+ */
+declare const AppContainer: Comp<AppContainerProps, HTMLDivElement>;
+
+export { AppContainer, RadarSvgLinearGradient };

package/components/app-container/AppContainer.js

@@ -0,0 +1,117 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_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/types.js';
+import { I18nProvider } from '../../react-aria/react-aria/i18n/context.js';
+import { useTheme } from '../theme/useTheme.js';
+import { ThemeProvider } from '../theme/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/components/app-container/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":"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"}

package/components/app-container/context.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { AppContainerState } from './types.js';
+
+declare const AppContainerContext: React.Context<AppContainerState | null>;
+
+export { AppContainerContext };

package/components/app-container/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/components/app-container/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/components/app-container/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/components/app-container/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/components/app-container/types.d.ts

@@ -0,0 +1,51 @@
+import { Dispatch, SetStateAction, RefObject, ComponentProps, ReactElement } from 'react';
+import { AppSidePanelVariant } from '../app-side-panel/types.js';
+import { Product } from '../../types/products.js';
+import { BreadcrumbItemProps } from '../breadcrumb-item/types.js';
+import { Theme } from '../../types/colors.js';
+
+/**
+ * Context props.
+ */
+type AppContainerState = {
+    /** Collapses the side panel. */
+    collapseSidePanel(): void;
+    /** Expandes the side panel. */
+    expandSidePanel(): void;
+    /** Product theme. */
+    product?: AppContainerProps['product'];
+    /** Set breadcrumbs of the page. */
+    setBreadcrumbs(breadcrumbs?: Omit<BreadcrumbItemProps, 'ref'>[]): void;
+    /** Page breadcrumbs. */
+    readonly breadcrumbs?: Omit<BreadcrumbItemProps, 'ref'>[];
+    /** Side panel variant. */
+    sidePanelVariant: AppSidePanelVariant;
+    /** Change side panel variant. */
+    setSidePanelVariant: Dispatch<SetStateAction<AppSidePanelVariant>>;
+    /** AppContainer ref. */
+    appContainerRef: RefObject<HTMLDivElement>;
+    /** Whether the App takes the entire screen or not. */
+    isFullScreen?: boolean;
+};
+/**
+ * Component props.
+ */
+interface AppContainerProps extends ComponentProps<'div'> {
+    /** Whether the App takes the entire screen or not. */
+    isFullScreen?: boolean;
+    /** The locale to apply to the children. */
+    locale?: string;
+    /** Product theme to apply to everything within. This overrides the CSS variables automatically. */
+    product?: Product | {
+        name: string;
+        logo?: ReactElement;
+    };
+    /** Overall theme. */
+    theme?: Theme;
+}
+type StyledAppContainerProps = Omit<AppContainerProps, 'locale' | 'product'> & {
+    $theme: Theme;
+    $product?: AppContainerProps['product'];
+};
+
+export { AppContainerProps, AppContainerState, StyledAppContainerProps };

package/components/app-content/AppContent.d.ts

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

package/components/app-content/AppContent.js

@@ -0,0 +1,42 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useContext } from 'react';
+import classNames from 'classnames';
+import { AppContainerContext } from '../app-container/context.js';
+import { useIsLoaded } from '../../hooks/useIsLoaded.js';
+import { StyledAppContent } from './styles.js';
+import { useTheme } from '../theme/useTheme.js';
+import { AppSidePanelVariant } from '../app-side-panel/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/components/app-content/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/components/app-content/styles.js

@@ -0,0 +1,54 @@
+import styled, { css } from 'styled-components';
+import { baseContainer } from '../shared/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/components/app-content/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/components/app-content/types.d.ts

@@ -0,0 +1,19 @@
+import { ComponentProps } from 'react';
+import { StylingProps, ContainerProps } from '../../types/styles.js';
+import { Theme } from '../../types/colors.js';
+
+/**
+ * Component props.
+ */
+interface AppContentProps extends ComponentProps<'main'>, StylingProps, ContainerProps {
+    /** Theme. */
+    theme?: Theme;
+}
+type StyledAppContentProps = Omit<AppContentProps, 'product'> & {
+    $isLoaded: boolean;
+    $isSidePanelCollapsed: boolean;
+    $isAppFullScreen: boolean;
+    $theme: AppContentProps['theme'];
+};
+
+export { AppContentProps, StyledAppContentProps };

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

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