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

package/packages/design-system/src/components/app-side-panel/_internal/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/packages/design-system/src/components/app-side-panel/_internal/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":";;;AAGA;AACA;AACA;AACaA,MAAAA,kBAAkB,GAAGC,MAAM,CAACC,GAA6B,CAAA;AACtE;AACA,oBAAA,EAAsBC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;EAAA,OAAKE,GAAI,CAAsBD,oBAAAA,EAAAA,MAAO,CAAwC,uCAAA,CAAA,CAAA;AAAA,CAAC,CAAA;AAChH,0BAAA,EAA4BE,KAAA,IAAA;EAAA,IAAC;AAAEF,IAAAA,MAAAA;AAAO,GAAC,GAAAE,KAAA,CAAA;EAAA,OAAKD,GAAI,CAAsBD,oBAAAA,EAAAA,MAAO,CAAwC,uCAAA,CAAA,CAAA;AAAA,CAAC,CAAA;AACtH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAA,EAAWG,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,QAAAA;AAAS,GAAC,GAAAD,KAAA,CAAA;AAAA,EAAA,OACpBC,QAAQ,KAAKC,mBAAmB,CAACC,MAAM,GAAG,GAAG,GAAGF,QAAQ,KAAKC,mBAAmB,CAACE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAAA,CAAC,CAAA;AACjH;AACA;AACA;AACA;AACA;AACA;AACA,MAAA,EAAQC,KAAA,IAAA;EAAA,IAAC;AAAEJ,IAAAA,QAAAA;AAAS,GAAC,GAAAI,KAAA,CAAA;AAAA,EAAA,OACbJ,QAAQ,KAAKC,mBAAmB,CAACC,MAAM,GAAG,GAAG,GAAGF,QAAQ,KAAKC,mBAAmB,CAACE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;AAAA,CAAC,CAAA;AACpH;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,aAAA,EAAeE,KAAA,IAAA;EAAA,IAAC;AAAEL,IAAAA,QAAAA;AAAS,GAAC,GAAAK,KAAA,CAAA;EAAA,OAAML,QAAQ,KAAKC,mBAAmB,CAACE,QAAQ,GAAG,GAAG,GAAG,GAAG,CAAA;AAAA,CAAE,CAAA;AACzF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAA,EAAeG,KAAA,IAAA;EAAA,IAAC;AAAEN,IAAAA,QAAAA;AAAS,GAAC,GAAAM,KAAA,CAAA;EAAA,OAAMN,QAAQ,KAAKC,mBAAmB,CAACE,QAAQ,GAAG,GAAG,GAAG,GAAG,CAAA;AAAA,CAAE,CAAA;AACzF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAA,EAAqBI,KAAA,IAAA;EAAA,IAAC;AAAEX,IAAAA,MAAAA;AAAO,GAAC,GAAAW,KAAA,CAAA;EAAA,OAC5BV,GAAI,CAAsBD,oBAAAA,EAAAA,MAAO,CAA2D,0DAAA,CAAA,CAAA;AAAA,CAAC,CAAA;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAA,EAAwBY,KAAA,IAAA;EAAA,IAAC;AAAEZ,IAAAA,MAAAA;AAAO,GAAC,GAAAY,KAAA,CAAA;EAAA,OAC7BX,GAAI,CAAsBD,oBAAAA,EAAAA,MAAO,CAA+C,8CAAA,CAAA,CAAA;AAAA,CAAC,CAAA;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAA,EAA0Ba,KAAA,IAAA;EAAA,IAAC;AAAEb,IAAAA,MAAAA;AAAO,GAAC,GAAAa,KAAA,CAAA;EAAA,OAC7BZ,GAAI,CAAsBD,oBAAAA,EAAAA,MAAO,CAA6C,4CAAA,CAAA,CAAA;AAAA,CAAC,CAAA;AACvF;AACA;AACA;AACA;AACA;AACA;AACA,EAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;;;"}

package/packages/design-system/src/components/app-side-panel/_internal/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/packages/design-system/src/components/app-side-panel/_internal/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/packages/design-system/src/components/app-side-panel/_internal/useAppSidePanel.js

@@ -0,0 +1,23 @@
+import { extends as _extends } from '../../../../../../_virtual/_internal/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import { useSideNavigationMenuBar } from '../../side-navigation-menu-bar/_internal/useSideNavigationMenuBar.js';
+import { SideNavigationMenuBar } from '../../side-navigation-menu-bar/_internal/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/packages/design-system/src/components/app-side-panel/_internal/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/packages/design-system/src/components/app-side-panel/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-side-panel/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-side-panel/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-side-panel/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-side-panel/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-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/packages/design-system/src/components/badge/_internal/Badge2.js

@@ -0,0 +1,44 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../../../_virtual/_internal/_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/_internal/useTheme.js';
+import { NotificationsColorPalette, PresentationColorPalette } from '../../../types/_internal/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=Badge2.js.map

package/packages/design-system/src/components/badge/_internal/Badge2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge2.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/packages/design-system/src/components/badge/_internal/badge.js

@@ -0,0 +1,3 @@
+export { BadgeVariant } from './types.js';
+export { Badge } from './Badge2.js';
+//# sourceMappingURL=badge.js.map

package/packages/design-system/src/components/badge/_internal/badge.js.map

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

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

@@ -0,0 +1,93 @@
+import styled, { css } from 'styled-components';
+import { BadgeVariant } from './types.js';
+import { Theme, PresentationColorPalette, NotificationsColorPalette } from '../../../types/_internal/colors.js';
+import { baseStyling } from '../../shared/_internal/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/packages/design-system/src/components/badge/_internal/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/packages/design-system/src/components/badge/_internal/types.js

@@ -0,0 +1,14 @@
+/**
+ * Component variant.
+ */
+const BadgeVariant = {
+  dot: 'dot',
+  standard: 'standard'
+};
+
+/**
+ * Component props.
+ */
+
+export { BadgeVariant };
+//# sourceMappingURL=types.js.map

package/packages/design-system/src/components/badge/_internal/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../../../../../src/components/badge/types.ts"],"sourcesContent":["import { ComponentProps } from 'react';\nimport {\n  NotificationsColorPalette,\n  PresentationColorPalette,\n  LayoutProps,\n  PositioningProps,\n  SpacingProps,\n  ValueOf,\n  Theme,\n} from '../../types';\n\n/**\n * Component variant.\n */\nexport const BadgeVariant = {\n  dot: 'dot',\n  standard: 'standard',\n} as const;\nexport type BadgeVariant = ValueOf<typeof BadgeVariant>;\n\n/**\n * Component props.\n */\nexport interface BadgeProps extends ComponentProps<'div'>, LayoutProps, SpacingProps, PositioningProps {\n  /** Whether the badge should automatically break content. */\n  autoBreak?: boolean;\n  /** 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`. */\n  color?: NotificationsColorPalette | PresentationColorPalette;\n  /** Whether the Badge has its colors reversed or not. */\n  isReversed?: boolean;\n  /** Theme. */\n  theme?: Theme;\n  /** Badge variant. */\n  variant?: BadgeVariant;\n}\n\nexport type StyledBadgeProps = Omit<BadgeProps, 'color' | 'variant' | 'isReversed' | 'autoBreak'> & {\n  $autoBreak: BadgeProps['autoBreak'];\n  $color: BadgeProps['color'];\n  $isReversed: BadgeProps['isReversed'];\n  $variant: BadgeProps['variant'];\n  $theme: BadgeProps['theme'];\n};\n"],"names":["BadgeVariant","dot","standard"],"mappings":"AAWA;AACA;AACA;AACO,MAAMA,YAAY,GAAG;AAC1BC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,QAAQ,EAAE,UAAA;AACZ,EAAU;;AAGV;AACA;AACA;;;;"}

package/packages/design-system/src/components/breadcrumb-item/_internal/BreadcrumbItem.js

@@ -0,0 +1,47 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../../../_virtual/_internal/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { warnIfNoAccessibleLabelFound } from '../../../utils/_internal/warnIfNoAccessibleLabelFound.js';
+import { StyledBreadcrumbItem } from './styles.js';
+import { useTheme } from '../../theme/_internal/useTheme.js';
+
+const _excluded = ["as", "children", "className", "href", "isCurrent", "isDisabled", "theme"];
+const COMPONENT_NAME = 'BreadcrumbItem';
+const CLASSNAME = 'redsift-breadcrumb-item';
+
+/**
+ * The BreadcrumbItem components is a list of links to the parent pages of the current page in hierarchical order.
+ */
+const BreadcrumbItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      as,
+      children,
+      className,
+      href,
+      isCurrent,
+      isDisabled,
+      theme: propsTheme
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  warnIfNoAccessibleLabelFound(props, [children], 'BreadcrumbItem');
+  const theme = useTheme(propsTheme);
+  return /*#__PURE__*/React__default.createElement(StyledBreadcrumbItem, _extends({
+    as: as || 'a',
+    role: !isCurrent ? 'link' : undefined,
+    tabIndex: !isDisabled && !isCurrent ? 0 : undefined
+  }, forwardedProps, {
+    $isCurrent: isCurrent,
+    $isDisabled: isDisabled,
+    $theme: theme,
+    "aria-current": isCurrent ? 'page' : undefined,
+    "aria-disabled": isDisabled || isCurrent,
+    className: classNames(BreadcrumbItem.className, className),
+    href: !isDisabled && !isCurrent ? href : undefined,
+    ref: ref
+  }), children);
+});
+BreadcrumbItem.className = CLASSNAME;
+BreadcrumbItem.displayName = COMPONENT_NAME;
+
+export { BreadcrumbItem };
+//# sourceMappingURL=BreadcrumbItem.js.map

package/packages/design-system/src/components/breadcrumb-item/_internal/BreadcrumbItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbItem.js","sources":["../../../../../../../src/components/breadcrumb-item/BreadcrumbItem.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound';\nimport { StyledBreadcrumbItem } from './styles';\nimport { BreadcrumbItemProps } from './types';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'BreadcrumbItem';\nconst CLASSNAME = 'redsift-breadcrumb-item';\n\n/**\n * The BreadcrumbItem components is a list of links to the parent pages of the current page in hierarchical order.\n */\nexport const BreadcrumbItem: Comp<BreadcrumbItemProps, HTMLAnchorElement> = forwardRef((props, ref) => {\n  const { as, children, className, href, isCurrent, isDisabled, theme: propsTheme, ...forwardedProps } = props;\n\n  warnIfNoAccessibleLabelFound(props, [children], 'BreadcrumbItem');\n\n  const theme = useTheme(propsTheme);\n\n  return (\n    <StyledBreadcrumbItem\n      as={(as || 'a') as any}\n      role={!isCurrent ? 'link' : undefined}\n      tabIndex={!isDisabled && !isCurrent ? 0 : undefined}\n      {...forwardedProps}\n      $isCurrent={isCurrent}\n      $isDisabled={isDisabled}\n      $theme={theme}\n      aria-current={isCurrent ? 'page' : undefined}\n      aria-disabled={isDisabled || isCurrent}\n      className={classNames(BreadcrumbItem.className, className)}\n      href={!isDisabled && !isCurrent ? href : undefined}\n      ref={ref as RefObject<HTMLAnchorElement>}\n    >\n      {children}\n    </StyledBreadcrumbItem>\n  );\n});\nBreadcrumbItem.className = CLASSNAME;\nBreadcrumbItem.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","BreadcrumbItem","forwardRef","props","ref","as","children","className","href","isCurrent","isDisabled","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","warnIfNoAccessibleLabelFound","useTheme","React","createElement","StyledBreadcrumbItem","_extends","role","undefined","tabIndex","$isCurrent","$isDisabled","$theme","classNames","displayName"],"mappings":";;;;;;;;AAQA,MAAMA,cAAc,GAAG,gBAAgB,CAAA;AACvC,MAAMC,SAAS,GAAG,yBAAyB,CAAA;;AAE3C;AACA;AACA;AACO,MAAMC,cAA4D,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACrG,MAAM;MAAEC,EAAE;MAAEC,QAAQ;MAAEC,SAAS;MAAEC,IAAI;MAAEC,SAAS;MAAEC,UAAU;AAAEC,MAAAA,KAAK,EAAEC,UAAAA;AAA8B,KAAC,GAAGT,KAAK;AAAxBU,IAAAA,cAAc,GAAAC,wBAAA,CAAKX,KAAK,EAAAY,SAAA,CAAA,CAAA;EAE5GC,4BAA4B,CAACb,KAAK,EAAE,CAACG,QAAQ,CAAC,EAAE,gBAAgB,CAAC,CAAA;AAEjE,EAAA,MAAMK,KAAK,GAAGM,QAAQ,CAACL,UAAU,CAAC,CAAA;AAElC,EAAA,oBACEM,cAAA,CAAAC,aAAA,CAACC,oBAAoB,EAAAC,QAAA,CAAA;IACnBhB,EAAE,EAAGA,EAAE,IAAI,GAAY;AACvBiB,IAAAA,IAAI,EAAE,CAACb,SAAS,GAAG,MAAM,GAAGc,SAAU;IACtCC,QAAQ,EAAE,CAACd,UAAU,IAAI,CAACD,SAAS,GAAG,CAAC,GAAGc,SAAAA;AAAU,GAAA,EAChDV,cAAc,EAAA;AAClBY,IAAAA,UAAU,EAAEhB,SAAU;AACtBiB,IAAAA,WAAW,EAAEhB,UAAW;AACxBiB,IAAAA,MAAM,EAAEhB,KAAM;AACd,IAAA,cAAA,EAAcF,SAAS,GAAG,MAAM,GAAGc,SAAU;IAC7C,eAAeb,EAAAA,UAAU,IAAID,SAAU;IACvCF,SAAS,EAAEqB,UAAU,CAAC3B,cAAc,CAACM,SAAS,EAAEA,SAAS,CAAE;IAC3DC,IAAI,EAAE,CAACE,UAAU,IAAI,CAACD,SAAS,GAAGD,IAAI,GAAGe,SAAU;AACnDnB,IAAAA,GAAG,EAAEA,GAAAA;AAAoC,GAAA,CAAA,EAExCE,QACmB,CAAC,CAAA;AAE3B,CAAC,EAAC;AACFL,cAAc,CAACM,SAAS,GAAGP,SAAS,CAAA;AACpCC,cAAc,CAAC4B,WAAW,GAAG9B,cAAc;;;;"}

package/packages/design-system/src/components/breadcrumb-item/_internal/breadcrumb-item.js

@@ -0,0 +1,2 @@
+export { BreadcrumbItem } from './BreadcrumbItem.js';
+//# sourceMappingURL=breadcrumb-item.js.map

package/packages/design-system/src/components/breadcrumb-item/_internal/styles.js

@@ -0,0 +1,48 @@
+import styled, { css } from 'styled-components';
+
+/**
+ * Component style.
+ */
+const StyledBreadcrumbItem = styled.a`
+  background: none;
+  border: none;
+  cursor: unset;
+  font-family: var(--redsift-typography-body-font-family);
+  font-size: var(--redsift-typography-body-font-size);
+  font-weight: var(--redsift-typography-body-font-weight);
+  line-height: var(--redsift-typography-body-line-height);
+  padding: 4px;
+  text-decoration: none;
+
+  ${_ref => {
+  let {
+    $isDisabled,
+    $isCurrent
+  } = _ref;
+  return css`
+    ${$isDisabled ? `
+        color: var(--redsift-color-neutral-mid-grey);
+      ` : $isCurrent ? `
+        color: var(--redsift-color-primary-n);
+      ` : `
+        color: var(--redsift-redsift-color-text-primary);
+      `}
+
+    ${!$isDisabled && !$isCurrent && css`
+      &:hover,
+      &:focus-visible {
+        // cursor: pointer;
+        text-decoration: underline;
+        text-underline-offset: 2px;
+      }
+    `}
+  `;
+}}
+
+  &:focus-visible {
+    outline: 2px solid var(--redsift-redsift-color-text-primary);
+  }
+`;
+
+export { StyledBreadcrumbItem };
+//# sourceMappingURL=styles.js.map

package/packages/design-system/src/components/breadcrumb-item/_internal/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../src/components/breadcrumb-item/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledBreadcrumbItemProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledBreadcrumbItem = styled.a<StyledBreadcrumbItemProps>`\n  background: none;\n  border: none;\n  cursor: unset;\n  font-family: var(--redsift-typography-body-font-family);\n  font-size: var(--redsift-typography-body-font-size);\n  font-weight: var(--redsift-typography-body-font-weight);\n  line-height: var(--redsift-typography-body-line-height);\n  padding: 4px;\n  text-decoration: none;\n\n  ${({ $isDisabled, $isCurrent }) => css`\n    ${$isDisabled\n      ? `\n        color: var(--redsift-color-neutral-mid-grey);\n      `\n      : $isCurrent\n      ? `\n        color: var(--redsift-color-primary-n);\n      `\n      : `\n        color: var(--redsift-redsift-color-text-primary);\n      `}\n\n    ${!$isDisabled &&\n    !$isCurrent &&\n    css`\n      &:hover,\n      &:focus-visible {\n        // cursor: pointer;\n        text-decoration: underline;\n        text-underline-offset: 2px;\n      }\n    `}\n  `}\n\n  &:focus-visible {\n    outline: 2px solid var(--redsift-redsift-color-text-primary);\n  }\n`;\n"],"names":["StyledBreadcrumbItem","styled","a","_ref","$isDisabled","$isCurrent","css"],"mappings":";;AAGA;AACA;AACA;AACaA,MAAAA,oBAAoB,GAAGC,MAAM,CAACC,CAA6B,CAAA;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;IAAEC,WAAW;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAAF,IAAA,CAAA;AAAA,EAAA,OAAKG,GAAI,CAAA;AACzC,IAAA,EAAMF,WAAW,GACR,CAAA;AACT;AACA,MAAO,CAAA,GACCC,UAAU,GACT,CAAA;AACT;AACA,MAAA,CAAO,GACE,CAAA;AACT;AACA,MAAQ,CAAA,CAAA;AACR;AACA,IAAA,EAAM,CAACD,WAAW,IACd,CAACC,UAAU,IACXC,GAAI,CAAA;AACR;AACA;AACA;AACA;AACA;AACA;AACA,IAAM,CAAA,CAAA;AACN,EAAG,CAAA,CAAA;AAAA,CAAC,CAAA;AACJ;AACA;AACA;AACA;AACA;;;;"}