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

package/components/shared/styles.d.ts

@@ -0,0 +1,17 @@
+import * as styled_components from 'styled-components';
+import { LayoutProps, SpacingProps, InternalSpacingProps, SizingProps, PositioningProps, BorderProps, FlexLayoutProps, GridLayoutProps, StylingProps, ContainerProps } from '../../types/styles.js';
+
+declare const baseLayout: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<LayoutProps, any>>;
+declare const baseSpacing: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<SpacingProps, any>>;
+declare const baseInternalSpacing: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<InternalSpacingProps, any>>;
+declare const baseSizing: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<SizingProps, any>>;
+declare const basePositioning: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<PositioningProps, any>>;
+declare const baseBorder: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<BorderProps, any>>;
+declare const baseFlexbox: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<FlexLayoutProps, any>>;
+declare const baseGrid: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<GridLayoutProps, any>>;
+declare const baseStyling: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<StylingProps, any>>;
+declare const baseContainer: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<ContainerProps, any>>;
+declare const focusRing: styled_components.FlattenSimpleInterpolation;
+declare const srOnly: styled_components.FlattenSimpleInterpolation;
+
+export { baseBorder, baseContainer, baseFlexbox, baseGrid, baseInternalSpacing, baseLayout, basePositioning, baseSizing, baseSpacing, baseStyling, focusRing, srOnly };

package/components/shared/styles.js

@@ -0,0 +1,250 @@
+import { css } from 'styled-components';
+
+const baseLayout = css`
+  ${_ref => {
+  let {
+    flex,
+    flexGrow,
+    flexShrink,
+    flexBasis,
+    alignSelf,
+    justifySelf,
+    order,
+    gridArea,
+    gridColumn,
+    gridRow,
+    gridColumnStart,
+    gridColumnEnd,
+    gridRowStart,
+    gridRowEnd
+  } = _ref;
+  return css`
+      ${flex ? `flex: ${flex};` : ''}
+      ${flexGrow !== undefined ? `flex-grow: ${flexGrow};` : ''}
+      ${flexShrink !== undefined ? `flex-shrink: ${flexShrink};` : ''}
+      ${flexBasis ? `flex-basis: ${flexBasis};` : ''}
+      ${alignSelf ? `align-self: ${alignSelf};` : ''}
+      ${justifySelf ? `justify-self: ${justifySelf};` : ''}
+      ${order !== undefined ? `order: ${order};` : ''}
+      ${gridArea ? `grid-area: ${gridArea};` : ''}
+      ${gridColumn ? `grid-column: ${gridColumn};` : ''}
+      ${gridRow ? `grid-row: ${gridRow};` : ''}
+      ${gridColumnStart ? `grid-column-start: ${gridColumnStart};` : ''}
+      ${gridColumnEnd ? `grid-column-end: ${gridColumnEnd};` : ''}
+      ${gridRowStart ? `grid-row-start: ${gridRowStart};` : ''}
+      ${gridRowEnd ? `grid-row-end: ${gridRowEnd};` : ''}
+    `;
+}}
+`;
+const baseSpacing = css`
+  ${_ref2 => {
+  let {
+    margin,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    marginTop
+  } = _ref2;
+  return css`
+      ${margin ? `margin: ${margin};` : ''}
+      ${marginBottom ? `margin-bottom: ${marginBottom};` : ''}
+      ${marginLeft ? `margin-left: ${marginLeft};` : ''}
+      ${marginRight ? `margin-right: ${marginRight};` : ''}
+      ${marginTop ? `margin-top: ${marginTop};` : ''}
+    `;
+}}
+`;
+const baseInternalSpacing = css`
+  ${_ref3 => {
+  let {
+    padding,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  } = _ref3;
+  return css`
+      ${padding ? `padding: ${padding};` : ''}
+      ${paddingBottom ? `padding-bottom: ${paddingBottom};` : ''}
+      ${paddingLeft ? `padding-left: ${paddingLeft};` : ''}
+      ${paddingRight ? `padding-right: ${paddingRight};` : ''}
+      ${paddingTop ? `padding-top: ${paddingTop};` : ''}
+    `;
+}}
+`;
+const baseSizing = css`
+  ${_ref4 => {
+  let {
+    height,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+    width
+  } = _ref4;
+  return css`
+      ${height !== undefined ? `height: ${typeof height === 'number' ? `${height}px` : height};` : ''}
+      ${maxHeight ? `max-height: ${maxHeight};` : ''}
+      ${maxWidth ? `max-width: ${maxWidth};` : ''}
+      ${minHeight ? `min-height: ${minHeight};` : ''}
+      ${minWidth ? `min-width: ${minWidth};` : ''}
+      ${width !== undefined ? `width: ${typeof width === 'number' ? `${width}px` : width};` : ''}
+    `;
+}}
+`;
+const basePositioning = css`
+  ${_ref5 => {
+  let {
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    zIndex
+  } = _ref5;
+  return css`
+      ${position ? `position: ${position};` : ''}
+      ${top ? `top: ${top};` : ''}
+      ${bottom ? `bottom: ${bottom};` : ''}
+      ${left ? `left: ${left};` : ''}
+      ${right ? `right: ${right};` : ''}
+      ${zIndex ? `z-index: ${zIndex};` : ''}
+    `;
+}}
+`;
+const baseBorder = css`
+  ${_ref6 => {
+  let {
+    background,
+    backgroundColor,
+    border,
+    borderTop,
+    borderBottom,
+    borderLeft,
+    borderRight,
+    borderRadius,
+    boxShadow
+  } = _ref6;
+  return css`
+      ${background ? `background: ${background};` : ''}
+      ${backgroundColor ? `background-color: ${backgroundColor};` : ''}
+      ${border ? `border: ${border};` : ''}
+      ${borderTop ? `border-top: ${borderTop};` : ''}
+      ${borderBottom ? `border-bottom: ${borderBottom};` : ''}
+      ${borderLeft ? `border-left: ${borderLeft};` : ''}
+      ${borderRight ? `border-right: ${borderRight};` : ''}
+      ${borderRadius ? `border-radius: ${borderRadius};` : ''}
+      ${boxShadow ? `box-shadow: ${boxShadow};` : ''}
+    `;
+}}
+`;
+const baseFlexbox = css`
+  ${_ref7 => {
+  let {
+    alignContent,
+    alignItems,
+    flexDirection,
+    flexWrap,
+    gap,
+    justifyContent
+  } = _ref7;
+  return css`
+      ${alignContent ? `align-content: ${alignContent};` : ''}
+      ${alignItems ? `align-items: ${alignItems};` : ''}
+      ${flexDirection ? `flex-direction: ${flexDirection};` : ''}
+      ${flexWrap ? `flex-wrap: ${flexWrap};` : ''}
+      gap: ${gap};
+      ${justifyContent ? `justify-content: ${justifyContent};` : ''}
+    `;
+}}
+`;
+const baseGrid = css`
+  ${_ref8 => {
+  let {
+    alignContent,
+    alignItems,
+    gap,
+    gridAutoColumns,
+    gridAutoRows,
+    gridTemplateAreas,
+    gridTemplateColumns,
+    gridTemplateRows,
+    justifyContent,
+    justifyItems
+  } = _ref8;
+  return css`
+      ${alignContent ? `align-content: ${alignContent};` : ''}
+      ${alignItems ? `align-items: ${alignItems};` : ''}
+      ${gap ? `gap: ${gap};` : ''}
+      ${gridAutoColumns ? `grid-auto-columns: ${gridAutoColumns};` : ''}
+      ${gridAutoRows ? `grid-auto-rows: ${gridAutoRows};` : ''}
+      ${gridTemplateAreas ? `grid-template-areas: ${gridTemplateAreas};` : ''}
+      ${gridTemplateColumns ? `grid-template-columns: ${gridTemplateColumns};` : ''}
+      ${gridTemplateRows ? `grid-template-rows: ${gridTemplateRows};` : ''}
+      ${justifyContent ? `justify-content: ${justifyContent};` : ''}
+      ${justifyItems ? `justify-items: ${justifyItems};` : ''}
+    `;
+}}
+`;
+const baseStyling = css`
+  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);
+
+  ${baseLayout}
+  ${baseSpacing}
+  ${baseSizing}
+  ${basePositioning}
+`;
+const baseContainer = css`
+  ${_ref9 => {
+  let {
+    display
+  } = _ref9;
+  return display ? `display: ${display};` : '';
+}}
+  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: 20px;
+
+  ${baseInternalSpacing}
+  ${baseSpacing}
+  ${baseSizing}
+  ${basePositioning}
+  ${baseGrid}
+  ${baseFlexbox}
+`;
+const focusRing = css`
+  @media (prefers-reduced-motion: no-preference) {
+    :focus-visible {
+      outline: 2px solid var(--redsift-color-primary-n);
+      transition: outline-offset 75ms ease-out;
+    }
+
+    :not(:active):focus-visible {
+      transition-duration: 0.25s;
+    }
+  }
+
+  :not(:active):focus-visible {
+    outline-offset: 0.2rem;
+  }
+`;
+const srOnly = css`
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  margin: -1px !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important;
+`;
+
+export { baseBorder, baseContainer, baseFlexbox, baseGrid, baseInternalSpacing, baseLayout, basePositioning, baseSizing, baseSpacing, baseStyling, focusRing, srOnly };
+//# sourceMappingURL=styles.js.map

package/components/shared/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/shared/styles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport {\n  LayoutProps,\n  SpacingProps,\n  SizingProps,\n  PositioningProps,\n  FlexLayoutProps,\n  GridLayoutProps,\n  StylingProps,\n  ContainerProps,\n  InternalSpacingProps,\n  BorderProps,\n} from '../../types';\n\nexport const baseLayout = css<LayoutProps>`\n  ${({\n    flex,\n    flexGrow,\n    flexShrink,\n    flexBasis,\n    alignSelf,\n    justifySelf,\n    order,\n    gridArea,\n    gridColumn,\n    gridRow,\n    gridColumnStart,\n    gridColumnEnd,\n    gridRowStart,\n    gridRowEnd,\n  }) =>\n    css`\n      ${flex ? `flex: ${flex};` : ''}\n      ${flexGrow !== undefined ? `flex-grow: ${flexGrow};` : ''}\n      ${flexShrink !== undefined ? `flex-shrink: ${flexShrink};` : ''}\n      ${flexBasis ? `flex-basis: ${flexBasis};` : ''}\n      ${alignSelf ? `align-self: ${alignSelf};` : ''}\n      ${justifySelf ? `justify-self: ${justifySelf};` : ''}\n      ${order !== undefined ? `order: ${order};` : ''}\n      ${gridArea ? `grid-area: ${gridArea};` : ''}\n      ${gridColumn ? `grid-column: ${gridColumn};` : ''}\n      ${gridRow ? `grid-row: ${gridRow};` : ''}\n      ${gridColumnStart ? `grid-column-start: ${gridColumnStart};` : ''}\n      ${gridColumnEnd ? `grid-column-end: ${gridColumnEnd};` : ''}\n      ${gridRowStart ? `grid-row-start: ${gridRowStart};` : ''}\n      ${gridRowEnd ? `grid-row-end: ${gridRowEnd};` : ''}\n    `}\n`;\n\nexport const baseSpacing = css<SpacingProps>`\n  ${({ margin, marginBottom, marginLeft, marginRight, marginTop }) =>\n    css`\n      ${margin ? `margin: ${margin};` : ''}\n      ${marginBottom ? `margin-bottom: ${marginBottom};` : ''}\n      ${marginLeft ? `margin-left: ${marginLeft};` : ''}\n      ${marginRight ? `margin-right: ${marginRight};` : ''}\n      ${marginTop ? `margin-top: ${marginTop};` : ''}\n    `}\n`;\n\nexport const baseInternalSpacing = css<InternalSpacingProps>`\n  ${({ padding, paddingBottom, paddingLeft, paddingRight, paddingTop }) =>\n    css`\n      ${padding ? `padding: ${padding};` : ''}\n      ${paddingBottom ? `padding-bottom: ${paddingBottom};` : ''}\n      ${paddingLeft ? `padding-left: ${paddingLeft};` : ''}\n      ${paddingRight ? `padding-right: ${paddingRight};` : ''}\n      ${paddingTop ? `padding-top: ${paddingTop};` : ''}\n    `}\n`;\n\nexport const baseSizing = css<SizingProps>`\n  ${({ height, maxHeight, maxWidth, minHeight, minWidth, width }) =>\n    css`\n      ${height !== undefined ? `height: ${typeof height === 'number' ? `${height}px` : height};` : ''}\n      ${maxHeight ? `max-height: ${maxHeight};` : ''}\n      ${maxWidth ? `max-width: ${maxWidth};` : ''}\n      ${minHeight ? `min-height: ${minHeight};` : ''}\n      ${minWidth ? `min-width: ${minWidth};` : ''}\n      ${width !== undefined ? `width: ${typeof width === 'number' ? `${width}px` : width};` : ''}\n    `}\n`;\n\nexport const basePositioning = css<PositioningProps>`\n  ${({ position, top, bottom, left, right, zIndex }) =>\n    css`\n      ${position ? `position: ${position};` : ''}\n      ${top ? `top: ${top};` : ''}\n      ${bottom ? `bottom: ${bottom};` : ''}\n      ${left ? `left: ${left};` : ''}\n      ${right ? `right: ${right};` : ''}\n      ${zIndex ? `z-index: ${zIndex};` : ''}\n    `}\n`;\n\nexport const baseBorder = css<BorderProps>`\n  ${({\n    background,\n    backgroundColor,\n    border,\n    borderTop,\n    borderBottom,\n    borderLeft,\n    borderRight,\n    borderRadius,\n    boxShadow,\n  }) =>\n    css`\n      ${background ? `background: ${background};` : ''}\n      ${backgroundColor ? `background-color: ${backgroundColor};` : ''}\n      ${border ? `border: ${border};` : ''}\n      ${borderTop ? `border-top: ${borderTop};` : ''}\n      ${borderBottom ? `border-bottom: ${borderBottom};` : ''}\n      ${borderLeft ? `border-left: ${borderLeft};` : ''}\n      ${borderRight ? `border-right: ${borderRight};` : ''}\n      ${borderRadius ? `border-radius: ${borderRadius};` : ''}\n      ${boxShadow ? `box-shadow: ${boxShadow};` : ''}\n    `}\n`;\n\nexport const baseFlexbox = css<FlexLayoutProps>`\n  ${({ alignContent, alignItems, flexDirection, flexWrap, gap, justifyContent }) =>\n    css`\n      ${alignContent ? `align-content: ${alignContent};` : ''}\n      ${alignItems ? `align-items: ${alignItems};` : ''}\n      ${flexDirection ? `flex-direction: ${flexDirection};` : ''}\n      ${flexWrap ? `flex-wrap: ${flexWrap};` : ''}\n      gap: ${gap};\n      ${justifyContent ? `justify-content: ${justifyContent};` : ''}\n    `}\n`;\n\nexport const baseGrid = css<GridLayoutProps>`\n  ${({\n    alignContent,\n    alignItems,\n    gap,\n    gridAutoColumns,\n    gridAutoRows,\n    gridTemplateAreas,\n    gridTemplateColumns,\n    gridTemplateRows,\n    justifyContent,\n    justifyItems,\n  }) =>\n    css`\n      ${alignContent ? `align-content: ${alignContent};` : ''}\n      ${alignItems ? `align-items: ${alignItems};` : ''}\n      ${gap ? `gap: ${gap};` : ''}\n      ${gridAutoColumns ? `grid-auto-columns: ${gridAutoColumns};` : ''}\n      ${gridAutoRows ? `grid-auto-rows: ${gridAutoRows};` : ''}\n      ${gridTemplateAreas ? `grid-template-areas: ${gridTemplateAreas};` : ''}\n      ${gridTemplateColumns ? `grid-template-columns: ${gridTemplateColumns};` : ''}\n      ${gridTemplateRows ? `grid-template-rows: ${gridTemplateRows};` : ''}\n      ${justifyContent ? `justify-content: ${justifyContent};` : ''}\n      ${justifyItems ? `justify-items: ${justifyItems};` : ''}\n    `}\n`;\n\nexport const baseStyling = css<StylingProps>`\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\n  ${baseLayout}\n  ${baseSpacing}\n  ${baseSizing}\n  ${basePositioning}\n`;\n\nexport const baseContainer = css<ContainerProps>`\n  ${({ display }) => (display ? `display: ${display};` : '')}\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: 20px;\n\n  ${baseInternalSpacing}\n  ${baseSpacing}\n  ${baseSizing}\n  ${basePositioning}\n  ${baseGrid}\n  ${baseFlexbox}\n`;\n\nexport const focusRing = css`\n  @media (prefers-reduced-motion: no-preference) {\n    :focus-visible {\n      outline: 2px solid var(--redsift-color-primary-n);\n      transition: outline-offset 75ms ease-out;\n    }\n\n    :not(:active):focus-visible {\n      transition-duration: 0.25s;\n    }\n  }\n\n  :not(:active):focus-visible {\n    outline-offset: 0.2rem;\n  }\n`;\n\nexport const srOnly = css`\n  border: 0 !important;\n  clip: rect(1px, 1px, 1px, 1px) !important;\n  -webkit-clip-path: inset(50%) !important;\n  clip-path: inset(50%) !important;\n  height: 1px !important;\n  overflow: hidden !important;\n  margin: -1px !important;\n  padding: 0 !important;\n  position: absolute !important;\n  width: 1px !important;\n  white-space: nowrap !important;\n`;\n"],"names":["baseLayout","css","_ref","flex","flexGrow","flexShrink","flexBasis","alignSelf","justifySelf","order","gridArea","gridColumn","gridRow","gridColumnStart","gridColumnEnd","gridRowStart","gridRowEnd","undefined","baseSpacing","_ref2","margin","marginBottom","marginLeft","marginRight","marginTop","baseInternalSpacing","_ref3","padding","paddingBottom","paddingLeft","paddingRight","paddingTop","baseSizing","_ref4","height","maxHeight","maxWidth","minHeight","minWidth","width","basePositioning","_ref5","position","top","bottom","left","right","zIndex","baseBorder","_ref6","background","backgroundColor","border","borderTop","borderBottom","borderLeft","borderRight","borderRadius","boxShadow","baseFlexbox","_ref7","alignContent","alignItems","flexDirection","flexWrap","gap","justifyContent","baseGrid","_ref8","gridAutoColumns","gridAutoRows","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","justifyItems","baseStyling","baseContainer","_ref9","display","focusRing","srOnly"],"mappings":"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"}

package/components/shield/Shield.d.ts

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

package/components/shield/Shield.js

@@ -0,0 +1,136 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { ShieldVariant } from './types.js';
+import { StyledShield } from './styles.js';
+import { useTheme } from '../theme/useTheme.js';
+import { NotificationsColorPalette } from '../../types/colors.js';
+
+const _excluded = ["aria-hidden", "aria-label", "className", "svgProps", "isOutlined", "isReversed", "theme", "variant"];
+const COMPONENT_NAME = 'Shield';
+const CLASSNAME = 'redsift-shield';
+const getVariant = variant => {
+  switch (variant) {
+    case ShieldVariant.email:
+      return {
+        color: NotificationsColorPalette.info,
+        icon: 'M14.7,6.3H5.3c-0.6,0-1.2,0.5-1.2,1.2l0,7c0,0.6,0.5,1.2,1.2,1.2h9.3c0.6,0,1.2-0.5,1.2-1.2v-7 C15.8,6.9,15.3,6.3,14.7,6.3z M14.7,14.5H5.3V8.7l4.7,2.9l4.7-2.9V14.5z M10,10.4L5.3,7.5h9.3L10,10.4z'
+      };
+    case ShieldVariant.fail:
+      return {
+        color: NotificationsColorPalette.error,
+        icon: 'M9,15V5h2v10H9z M9,19v-2h2v2H9z'
+      };
+    case ShieldVariant.failLocked:
+      return {
+        color: NotificationsColorPalette.error,
+        icon: 'M13.5,9.7h-0.6V8.5c0-1.6-1.3-2.9-2.9-2.9S7.1,6.9,7.1,8.5v1.2H6.5c-0.6,0-1.2,0.5-1.2,1.2v5.8 c0,0.6,0.5,1.2,1.2,1.2h7c0.6,0,1.2-0.5,1.2-1.2v-5.8C14.7,10.2,14.1,9.7,13.5,9.7z M10,14.9c-0.6,0-1.2-0.5-1.2-1.2 s0.5-1.2,1.2-1.2c0.6,0,1.2,0.5,1.2,1.2S10.6,14.9,10,14.9z M11.8,9.7H8.2V8.5c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8V9.7z'
+      };
+    case ShieldVariant.failUnlocked:
+      return {
+        color: NotificationsColorPalette.error,
+        icon: 'M10,14.9c0.6,0,1.2-0.5,1.2-1.2s-0.5-1.2-1.2-1.2c-0.6,0-1.2,0.5-1.2,1.2S9.4,14.9,10,14.9z M13.5,9.7h-0.6V8.5 c0-1.6-1.3-2.9-2.9-2.9S7.1,6.9,7.1,8.5h1.1c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8v1.2H6.5c-0.6,0-1.2,0.5-1.2,1.2v5.8 c0,0.6,0.5,1.2,1.2,1.2h7c0.6,0,1.2-0.5,1.2-1.2v-5.8C14.7,10.2,14.1,9.7,13.5,9.7z M13.5,16.7h-7v-5.8h7V16.7z'
+      };
+    case ShieldVariant.ignored:
+      return {
+        color: NotificationsColorPalette['no-data'],
+        icon: 'M10,6.2c-3.2,0-5.8,2.6-5.8,5.8c0,3.2,2.6,5.8,5.8,5.8s5.8-2.6,5.8-5.8C15.8,8.8,13.2,6.2,10,6.2z M5.3,12 c0-2.6,2.1-4.7,4.7-4.7c1.1,0,2.1,0.4,2.9,1l-6.5,6.5C5.7,14.1,5.3,13.1,5.3,12z M10,16.7c-1.1,0-2.1-0.4-2.9-1l6.5-6.5 c0.6,0.8,1,1.8,1,2.9C14.7,14.6,12.6,16.7,10,16.7z'
+      };
+    case ShieldVariant.noData:
+      return {
+        color: NotificationsColorPalette['no-data'],
+        icon: 'M16,13H4v-2h12V13z'
+      };
+    case ShieldVariant.question:
+      return {
+        color: NotificationsColorPalette.question,
+        icon: 'M9,17h2v-2H9V17z M10,5C7.8,5,6,6.8,6,9h2c0-1.1,0.9-2,2-2s2,0.9,2,2c0,2-3,1.8-3,5h2c0-2.2,3-2.5,3-5 C14,6.8,12.2,5,10,5z'
+      };
+    case ShieldVariant.success:
+      return {
+        color: NotificationsColorPalette.success,
+        icon: 'M8,16.6l8.5-8.5l-1.4-1.4L8,13.7l-2.8-2.8l-1.4,1.4L8,16.6z'
+      };
+    case ShieldVariant.successLocked:
+      return {
+        color: NotificationsColorPalette.success,
+        icon: 'M13.5,9.7h-0.6V8.5c0-1.6-1.3-2.9-2.9-2.9S7.1,6.9,7.1,8.5v1.2H6.5c-0.6,0-1.2,0.5-1.2,1.2v5.8 c0,0.6,0.5,1.2,1.2,1.2h7c0.6,0,1.2-0.5,1.2-1.2v-5.8C14.7,10.2,14.1,9.7,13.5,9.7z M10,14.9c-0.6,0-1.2-0.5-1.2-1.2 s0.5-1.2,1.2-1.2c0.6,0,1.2,0.5,1.2,1.2S10.6,14.9,10,14.9z M11.8,9.7H8.2V8.5c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8V9.7z'
+      };
+    case ShieldVariant.successUnlocked:
+      return {
+        color: NotificationsColorPalette.success,
+        icon: 'M10,14.9c0.6,0,1.2-0.5,1.2-1.2s-0.5-1.2-1.2-1.2c-0.6,0-1.2,0.5-1.2,1.2S9.4,14.9,10,14.9z M13.5,9.7h-0.6V8.5 c0-1.6-1.3-2.9-2.9-2.9S7.1,6.9,7.1,8.5h1.1c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8v1.2H6.5c-0.6,0-1.2,0.5-1.2,1.2v5.8 c0,0.6,0.5,1.2,1.2,1.2h7c0.6,0,1.2-0.5,1.2-1.2v-5.8C14.7,10.2,14.1,9.7,13.5,9.7z M13.5,16.7h-7v-5.8h7V16.7z'
+      };
+    case ShieldVariant.warning:
+      return {
+        color: NotificationsColorPalette.warning,
+        icon: 'M10,5c0.7,0,1.4,0.4,1.7,1l4,7c0.4,0.6,0.4,1.4,0,2c-0.4,0.6-1,1-1.7,1H6c-0.7,0-1.4-0.4-1.7-1 c-0.4-0.6-0.4-1.4,0-2l4-7C8.6,5.4,9.3,5,10,5z M10,7l-4,7h8L10,7z'
+      };
+    case ShieldVariant.warningLocked:
+      return {
+        color: NotificationsColorPalette.warning,
+        icon: 'M13.5,9.7h-0.6V8.5c0-1.6-1.3-2.9-2.9-2.9S7.1,6.9,7.1,8.5v1.2H6.5c-0.6,0-1.2,0.5-1.2,1.2v5.8 c0,0.6,0.5,1.2,1.2,1.2h7c0.6,0,1.2-0.5,1.2-1.2v-5.8C14.7,10.2,14.1,9.7,13.5,9.7z M10,14.9c-0.6,0-1.2-0.5-1.2-1.2 s0.5-1.2,1.2-1.2c0.6,0,1.2,0.5,1.2,1.2S10.6,14.9,10,14.9z M11.8,9.7H8.2V8.5c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8V9.7z'
+      };
+    case ShieldVariant.warningUnlocked:
+      return {
+        color: NotificationsColorPalette.warning,
+        icon: 'M10,14.9c0.6,0,1.2-0.5,1.2-1.2s-0.5-1.2-1.2-1.2c-0.6,0-1.2,0.5-1.2,1.2S9.4,14.9,10,14.9z M13.5,9.7h-0.6V8.5 c0-1.6-1.3-2.9-2.9-2.9S7.1,6.9,7.1,8.5h1.1c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8v1.2H6.5c-0.6,0-1.2,0.5-1.2,1.2v5.8 c0,0.6,0.5,1.2,1.2,1.2h7c0.6,0,1.2-0.5,1.2-1.2v-5.8C14.7,10.2,14.1,9.7,13.5,9.7z M13.5,16.7h-7v-5.8h7V16.7z'
+      };
+  }
+};
+
+/**
+ * The Shield component.
+ */
+const Shield = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      'aria-hidden': ariaHidden,
+      'aria-label': ariaLabel,
+      className,
+      svgProps,
+      isOutlined,
+      isReversed,
+      theme: propsTheme,
+      variant = ShieldVariant.success
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const {
+    color,
+    icon
+  } = getVariant(variant);
+  return /*#__PURE__*/React__default.createElement(StyledShield, _extends({}, forwardedProps, {
+    "aria-hidden": ariaLabel ? ariaHidden ? ariaHidden : undefined : true,
+    "aria-label": ariaLabel,
+    className: classNames(Shield.className, className),
+    ref: ref,
+    $color: color,
+    $isOutlined: isOutlined,
+    $isReversed: isReversed,
+    $theme: theme,
+    $variant: variant
+  }), /*#__PURE__*/React__default.createElement("svg", _extends({
+    "aria-hidden": ariaLabel ? ariaHidden ? ariaHidden : undefined : true,
+    "aria-label": ariaLabel,
+    focusable: "false",
+    preserveAspectRatio: "xMidYMid meet",
+    role: "img",
+    style: {
+      verticalAlign: '-0.125em'
+    },
+    viewBox: "0 0 20 24",
+    width: "20",
+    height: "24"
+  }, svgProps), /*#__PURE__*/React__default.createElement("path", {
+    d: isOutlined ? 'M1,10.9V5l9-3.9L19,5v5.9c0,5.5-3.9,10.7-9,12.1C4.9,21.6,1,16.4,1,10.9z' : 'M10,0L0,4.4v6.5C0,17,4.3,22.6,10,24c5.7-1.4,10-7,10-13.1V4.4L10,0z',
+    className: "shield"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: icon,
+    className: "icon"
+  })));
+});
+Shield.className = CLASSNAME;
+Shield.displayName = COMPONENT_NAME;
+
+export { Shield };
+//# sourceMappingURL=Shield.js.map

package/components/shield/Shield.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shield.js","sources":["../../../src/components/shield/Shield.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { NotificationsColorPalette, Comp } from '../../types';\n\nimport { ShieldProps, ShieldVariant } from './types';\nimport { StyledShield } from './styles';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Shield';\nconst CLASSNAME = 'redsift-shield';\n\nconst getVariant = (variant: ShieldVariant) => {\n  switch (variant) {\n    case ShieldVariant.email:\n      return {\n        color: NotificationsColorPalette.info,\n        icon: 'M14.7,6.3H5.3c-0.6,0-1.2,0.5-1.2,1.2l0,7c0,0.6,0.5,1.2,1.2,1.2h9.3c0.6,0,1.2-0.5,1.2-1.2v-7 C15.8,6.9,15.3,6.3,14.7,6.3z M14.7,14.5H5.3V8.7l4.7,2.9l4.7-2.9V14.5z M10,10.4L5.3,7.5h9.3L10,10.4z',\n      };\n    case ShieldVariant.fail:\n      return {\n        color: NotificationsColorPalette.error,\n        icon: 'M9,15V5h2v10H9z M9,19v-2h2v2H9z',\n      };\n    case ShieldVariant.failLocked:\n      return {\n        color: NotificationsColorPalette.error,\n        icon: 'M13.5,9.7h-0.6V8.5c0-1.6-1.3-2.9-2.9-2.9S7.1,6.9,7.1,8.5v1.2H6.5c-0.6,0-1.2,0.5-1.2,1.2v5.8 c0,0.6,0.5,1.2,1.2,1.2h7c0.6,0,1.2-0.5,1.2-1.2v-5.8C14.7,10.2,14.1,9.7,13.5,9.7z M10,14.9c-0.6,0-1.2-0.5-1.2-1.2 s0.5-1.2,1.2-1.2c0.6,0,1.2,0.5,1.2,1.2S10.6,14.9,10,14.9z M11.8,9.7H8.2V8.5c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8V9.7z',\n      };\n    case ShieldVariant.failUnlocked:\n      return {\n        color: NotificationsColorPalette.error,\n        icon: 'M10,14.9c0.6,0,1.2-0.5,1.2-1.2s-0.5-1.2-1.2-1.2c-0.6,0-1.2,0.5-1.2,1.2S9.4,14.9,10,14.9z M13.5,9.7h-0.6V8.5 c0-1.6-1.3-2.9-2.9-2.9S7.1,6.9,7.1,8.5h1.1c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8v1.2H6.5c-0.6,0-1.2,0.5-1.2,1.2v5.8 c0,0.6,0.5,1.2,1.2,1.2h7c0.6,0,1.2-0.5,1.2-1.2v-5.8C14.7,10.2,14.1,9.7,13.5,9.7z M13.5,16.7h-7v-5.8h7V16.7z',\n      };\n    case ShieldVariant.ignored:\n      return {\n        color: NotificationsColorPalette['no-data'],\n        icon: 'M10,6.2c-3.2,0-5.8,2.6-5.8,5.8c0,3.2,2.6,5.8,5.8,5.8s5.8-2.6,5.8-5.8C15.8,8.8,13.2,6.2,10,6.2z M5.3,12 c0-2.6,2.1-4.7,4.7-4.7c1.1,0,2.1,0.4,2.9,1l-6.5,6.5C5.7,14.1,5.3,13.1,5.3,12z M10,16.7c-1.1,0-2.1-0.4-2.9-1l6.5-6.5 c0.6,0.8,1,1.8,1,2.9C14.7,14.6,12.6,16.7,10,16.7z',\n      };\n    case ShieldVariant.noData:\n      return {\n        color: NotificationsColorPalette['no-data'],\n        icon: 'M16,13H4v-2h12V13z',\n      };\n    case ShieldVariant.question:\n      return {\n        color: NotificationsColorPalette.question,\n        icon: 'M9,17h2v-2H9V17z M10,5C7.8,5,6,6.8,6,9h2c0-1.1,0.9-2,2-2s2,0.9,2,2c0,2-3,1.8-3,5h2c0-2.2,3-2.5,3-5 C14,6.8,12.2,5,10,5z',\n      };\n    case ShieldVariant.success:\n      return {\n        color: NotificationsColorPalette.success,\n        icon: 'M8,16.6l8.5-8.5l-1.4-1.4L8,13.7l-2.8-2.8l-1.4,1.4L8,16.6z',\n      };\n    case ShieldVariant.successLocked:\n      return {\n        color: NotificationsColorPalette.success,\n        icon: 'M13.5,9.7h-0.6V8.5c0-1.6-1.3-2.9-2.9-2.9S7.1,6.9,7.1,8.5v1.2H6.5c-0.6,0-1.2,0.5-1.2,1.2v5.8 c0,0.6,0.5,1.2,1.2,1.2h7c0.6,0,1.2-0.5,1.2-1.2v-5.8C14.7,10.2,14.1,9.7,13.5,9.7z M10,14.9c-0.6,0-1.2-0.5-1.2-1.2 s0.5-1.2,1.2-1.2c0.6,0,1.2,0.5,1.2,1.2S10.6,14.9,10,14.9z M11.8,9.7H8.2V8.5c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8V9.7z',\n      };\n    case ShieldVariant.successUnlocked:\n      return {\n        color: NotificationsColorPalette.success,\n        icon: 'M10,14.9c0.6,0,1.2-0.5,1.2-1.2s-0.5-1.2-1.2-1.2c-0.6,0-1.2,0.5-1.2,1.2S9.4,14.9,10,14.9z M13.5,9.7h-0.6V8.5 c0-1.6-1.3-2.9-2.9-2.9S7.1,6.9,7.1,8.5h1.1c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8v1.2H6.5c-0.6,0-1.2,0.5-1.2,1.2v5.8 c0,0.6,0.5,1.2,1.2,1.2h7c0.6,0,1.2-0.5,1.2-1.2v-5.8C14.7,10.2,14.1,9.7,13.5,9.7z M13.5,16.7h-7v-5.8h7V16.7z',\n      };\n    case ShieldVariant.warning:\n      return {\n        color: NotificationsColorPalette.warning,\n        icon: 'M10,5c0.7,0,1.4,0.4,1.7,1l4,7c0.4,0.6,0.4,1.4,0,2c-0.4,0.6-1,1-1.7,1H6c-0.7,0-1.4-0.4-1.7-1 c-0.4-0.6-0.4-1.4,0-2l4-7C8.6,5.4,9.3,5,10,5z M10,7l-4,7h8L10,7z',\n      };\n    case ShieldVariant.warningLocked:\n      return {\n        color: NotificationsColorPalette.warning,\n        icon: 'M13.5,9.7h-0.6V8.5c0-1.6-1.3-2.9-2.9-2.9S7.1,6.9,7.1,8.5v1.2H6.5c-0.6,0-1.2,0.5-1.2,1.2v5.8 c0,0.6,0.5,1.2,1.2,1.2h7c0.6,0,1.2-0.5,1.2-1.2v-5.8C14.7,10.2,14.1,9.7,13.5,9.7z M10,14.9c-0.6,0-1.2-0.5-1.2-1.2 s0.5-1.2,1.2-1.2c0.6,0,1.2,0.5,1.2,1.2S10.6,14.9,10,14.9z M11.8,9.7H8.2V8.5c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8V9.7z',\n      };\n    case ShieldVariant.warningUnlocked:\n      return {\n        color: NotificationsColorPalette.warning,\n        icon: 'M10,14.9c0.6,0,1.2-0.5,1.2-1.2s-0.5-1.2-1.2-1.2c-0.6,0-1.2,0.5-1.2,1.2S9.4,14.9,10,14.9z M13.5,9.7h-0.6V8.5 c0-1.6-1.3-2.9-2.9-2.9S7.1,6.9,7.1,8.5h1.1c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8v1.2H6.5c-0.6,0-1.2,0.5-1.2,1.2v5.8 c0,0.6,0.5,1.2,1.2,1.2h7c0.6,0,1.2-0.5,1.2-1.2v-5.8C14.7,10.2,14.1,9.7,13.5,9.7z M13.5,16.7h-7v-5.8h7V16.7z',\n      };\n  }\n};\n\n/**\n * The Shield component.\n */\nexport const Shield: Comp<ShieldProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    'aria-hidden': ariaHidden,\n    'aria-label': ariaLabel,\n    className,\n    svgProps,\n    isOutlined,\n    isReversed,\n    theme: propsTheme,\n    variant = ShieldVariant.success,\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme(propsTheme);\n\n  const { color, icon } = getVariant(variant!);\n\n  return (\n    <StyledShield\n      {...forwardedProps}\n      aria-hidden={ariaLabel ? (ariaHidden ? ariaHidden : undefined) : true}\n      aria-label={ariaLabel}\n      className={classNames(Shield.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n      $color={color}\n      $isOutlined={isOutlined}\n      $isReversed={isReversed}\n      $theme={theme}\n      $variant={variant}\n    >\n      <svg\n        aria-hidden={ariaLabel ? (ariaHidden ? ariaHidden : undefined) : true}\n        aria-label={ariaLabel}\n        focusable=\"false\"\n        preserveAspectRatio=\"xMidYMid meet\"\n        role=\"img\"\n        style={{ verticalAlign: '-0.125em' }}\n        viewBox=\"0 0 20 24\"\n        width=\"20\"\n        height=\"24\"\n        {...svgProps}\n      >\n        <path\n          d={\n            isOutlined\n              ? 'M1,10.9V5l9-3.9L19,5v5.9c0,5.5-3.9,10.7-9,12.1C4.9,21.6,1,16.4,1,10.9z'\n              : 'M10,0L0,4.4v6.5C0,17,4.3,22.6,10,24c5.7-1.4,10-7,10-13.1V4.4L10,0z'\n          }\n          className=\"shield\"\n        />\n        <path d={icon} className=\"icon\" />\n      </svg>\n    </StyledShield>\n  );\n});\nShield.className = CLASSNAME;\nShield.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getVariant","variant","ShieldVariant","email","color","NotificationsColorPalette","info","icon","fail","error","failLocked","failUnlocked","ignored","noData","question","success","successLocked","successUnlocked","warning","warningLocked","warningUnlocked","Shield","forwardRef","props","ref","ariaHidden","ariaLabel","className","svgProps","isOutlined","isReversed","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","useTheme","React","createElement","StyledShield","_extends","undefined","classNames","$color","$isOutlined","$isReversed","$theme","$variant","focusable","preserveAspectRatio","role","style","verticalAlign","viewBox","width","height","d","displayName"],"mappings":";;;;;;;;;AAQA,MAAMA,cAAc,GAAG,QAAQ,CAAA;AAC/B,MAAMC,SAAS,GAAG,gBAAgB,CAAA;AAElC,MAAMC,UAAU,GAAIC,OAAsB,IAAK;AAC7C,EAAA,QAAQA,OAAO;IACb,KAAKC,aAAa,CAACC,KAAK;MACtB,OAAO;QACLC,KAAK,EAAEC,yBAAyB,CAACC,IAAI;AACrCC,QAAAA,IAAI,EAAE,iMAAA;OACP,CAAA;IACH,KAAKL,aAAa,CAACM,IAAI;MACrB,OAAO;QACLJ,KAAK,EAAEC,yBAAyB,CAACI,KAAK;AACtCF,QAAAA,IAAI,EAAE,iCAAA;OACP,CAAA;IACH,KAAKL,aAAa,CAACQ,UAAU;MAC3B,OAAO;QACLN,KAAK,EAAEC,yBAAyB,CAACI,KAAK;AACtCF,QAAAA,IAAI,EAAE,mUAAA;OACP,CAAA;IACH,KAAKL,aAAa,CAACS,YAAY;MAC7B,OAAO;QACLP,KAAK,EAAEC,yBAAyB,CAACI,KAAK;AACtCF,QAAAA,IAAI,EAAE,2UAAA;OACP,CAAA;IACH,KAAKL,aAAa,CAACU,OAAO;MACxB,OAAO;AACLR,QAAAA,KAAK,EAAEC,yBAAyB,CAAC,SAAS,CAAC;AAC3CE,QAAAA,IAAI,EAAE,8QAAA;OACP,CAAA;IACH,KAAKL,aAAa,CAACW,MAAM;MACvB,OAAO;AACLT,QAAAA,KAAK,EAAEC,yBAAyB,CAAC,SAAS,CAAC;AAC3CE,QAAAA,IAAI,EAAE,oBAAA;OACP,CAAA;IACH,KAAKL,aAAa,CAACY,QAAQ;MACzB,OAAO;QACLV,KAAK,EAAEC,yBAAyB,CAACS,QAAQ;AACzCP,QAAAA,IAAI,EAAE,yHAAA;OACP,CAAA;IACH,KAAKL,aAAa,CAACa,OAAO;MACxB,OAAO;QACLX,KAAK,EAAEC,yBAAyB,CAACU,OAAO;AACxCR,QAAAA,IAAI,EAAE,2DAAA;OACP,CAAA;IACH,KAAKL,aAAa,CAACc,aAAa;MAC9B,OAAO;QACLZ,KAAK,EAAEC,yBAAyB,CAACU,OAAO;AACxCR,QAAAA,IAAI,EAAE,mUAAA;OACP,CAAA;IACH,KAAKL,aAAa,CAACe,eAAe;MAChC,OAAO;QACLb,KAAK,EAAEC,yBAAyB,CAACU,OAAO;AACxCR,QAAAA,IAAI,EAAE,2UAAA;OACP,CAAA;IACH,KAAKL,aAAa,CAACgB,OAAO;MACxB,OAAO;QACLd,KAAK,EAAEC,yBAAyB,CAACa,OAAO;AACxCX,QAAAA,IAAI,EAAE,8JAAA;OACP,CAAA;IACH,KAAKL,aAAa,CAACiB,aAAa;MAC9B,OAAO;QACLf,KAAK,EAAEC,yBAAyB,CAACa,OAAO;AACxCX,QAAAA,IAAI,EAAE,mUAAA;OACP,CAAA;IACH,KAAKL,aAAa,CAACkB,eAAe;MAChC,OAAO;QACLhB,KAAK,EAAEC,yBAAyB,CAACa,OAAO;AACxCX,QAAAA,IAAI,EAAE,2UAAA;OACP,CAAA;AACL,GAAA;AACF,CAAC,CAAA;;AAED;AACA;AACA;AACO,MAAMc,MAAyC,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAClF,MAAM;AACJ,MAAA,aAAa,EAAEC,UAAU;AACzB,MAAA,YAAY,EAAEC,SAAS;MACvBC,SAAS;MACTC,QAAQ;MACRC,UAAU;MACVC,UAAU;AACVC,MAAAA,KAAK,EAAEC,UAAU;MACjB/B,OAAO,GAAGC,aAAa,CAACa,OAAAA;AAE1B,KAAC,GAAGQ,KAAK;AADJU,IAAAA,cAAc,GAAAC,wBAAA,CACfX,KAAK,EAAAY,SAAA,CAAA,CAAA;AAET,EAAA,MAAMJ,KAAK,GAAGK,QAAQ,CAACJ,UAAU,CAAC,CAAA;EAElC,MAAM;IAAE5B,KAAK;AAAEG,IAAAA,IAAAA;AAAK,GAAC,GAAGP,UAAU,CAACC,OAAQ,CAAC,CAAA;EAE5C,oBACEoC,cAAA,CAAAC,aAAA,CAACC,YAAY,EAAAC,QAAA,KACPP,cAAc,EAAA;IAClB,aAAaP,EAAAA,SAAS,GAAID,UAAU,GAAGA,UAAU,GAAGgB,SAAS,GAAI,IAAK;AACtE,IAAA,YAAA,EAAYf,SAAU;IACtBC,SAAS,EAAEe,UAAU,CAACrB,MAAM,CAACM,SAAS,EAAEA,SAAS,CAAE;AACnDH,IAAAA,GAAG,EAAEA,GAAiC;AACtCmB,IAAAA,MAAM,EAAEvC,KAAM;AACdwC,IAAAA,WAAW,EAAEf,UAAW;AACxBgB,IAAAA,WAAW,EAAEf,UAAW;AACxBgB,IAAAA,MAAM,EAAEf,KAAM;AACdgB,IAAAA,QAAQ,EAAE9C,OAAAA;AAAQ,GAAA,CAAA,eAElBoC,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAAE,QAAA,CAAA;IACE,aAAad,EAAAA,SAAS,GAAID,UAAU,GAAGA,UAAU,GAAGgB,SAAS,GAAI,IAAK;AACtE,IAAA,YAAA,EAAYf,SAAU;AACtBsB,IAAAA,SAAS,EAAC,OAAO;AACjBC,IAAAA,mBAAmB,EAAC,eAAe;AACnCC,IAAAA,IAAI,EAAC,KAAK;AACVC,IAAAA,KAAK,EAAE;AAAEC,MAAAA,aAAa,EAAE,UAAA;KAAa;AACrCC,IAAAA,OAAO,EAAC,WAAW;AACnBC,IAAAA,KAAK,EAAC,IAAI;AACVC,IAAAA,MAAM,EAAC,IAAA;AAAI,GAAA,EACP3B,QAAQ,CAAA,eAEZS,cAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AACEkB,IAAAA,CAAC,EACC3B,UAAU,GACN,wEAAwE,GACxE,oEACL;AACDF,IAAAA,SAAS,EAAC,QAAA;AAAQ,GACnB,CAAC,eACFU,cAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMkB,IAAAA,CAAC,EAAEjD,IAAK;AAACoB,IAAAA,SAAS,EAAC,MAAA;GAAQ,CAC9B,CACO,CAAC,CAAA;AAEnB,CAAC,EAAC;AACFN,MAAM,CAACM,SAAS,GAAG5B,SAAS,CAAA;AAC5BsB,MAAM,CAACoC,WAAW,GAAG3D,cAAc;;;;"}

package/components/shield/styles.js

@@ -0,0 +1,71 @@
+import styled, { css } from 'styled-components';
+import { baseStyling } from '../shared/styles.js';
+
+const StyledShield = styled.div`
+  height: 24px;
+  width: 20px;
+  ${baseStyling}
+
+  box-sizing: content-box;
+
+  ${_ref => {
+  let {
+    $color,
+    $isOutlined,
+    $isReversed,
+    $theme
+  } = _ref;
+  if ($isReversed && $isOutlined) {
+    return css`
+        & .shield {
+          fill: var(--redsift-color-notifications-${$color}-primary);
+          stroke: var(--redsift-color-${$theme}-components-page-background);
+          stroke-width: 2;
+        }
+        & .icon {
+          fill-rule: evenodd;
+          clip-rule: evenodd;
+          fill: var(--redsift-color-${$theme}-components-page-background);
+        }
+      `;
+  } else if ($isOutlined) {
+    return css`
+        & .shield {
+          fill: var(--redsift-color-${$theme}-components-page-background);
+          stroke: var(--redsift-color-notifications-${$color}-primary);
+          stroke-width: 2;
+        }
+        & .icon {
+          fill-rule: evenodd;
+          clip-rule: evenodd;
+          fill: var(--redsift-color-notifications-${$color}-primary);
+        }
+      `;
+  } else if ($isReversed) {
+    return css`
+        & .shield {
+          fill: var(--redsift-color-${$theme}-components-page-background);
+        }
+        & .icon {
+          fill-rule: evenodd;
+          clip-rule: evenodd;
+          fill: var(--redsift-color-notifications-${$color}-primary);
+        }
+      `;
+  } else {
+    return css`
+        & .shield {
+          fill: var(--redsift-color-notifications-${$color}-primary);
+        }
+        & .icon {
+          fill-rule: evenodd;
+          clip-rule: evenodd;
+          fill: var(--redsift-color-${$theme}-components-page-background);
+        }
+      `;
+  }
+}}
+`;
+
+export { StyledShield };
+//# sourceMappingURL=styles.js.map

package/components/shield/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/shield/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledShieldProps } from './types';\n\nexport const StyledShield = styled.div<StyledShieldProps>`\n  height: 24px;\n  width: 20px;\n  ${baseStyling}\n\n  box-sizing: content-box;\n\n  ${({ $color, $isOutlined, $isReversed, $theme }) => {\n    if ($isReversed && $isOutlined) {\n      return css`\n        & .shield {\n          fill: var(--redsift-color-notifications-${$color}-primary);\n          stroke: var(--redsift-color-${$theme}-components-page-background);\n          stroke-width: 2;\n        }\n        & .icon {\n          fill-rule: evenodd;\n          clip-rule: evenodd;\n          fill: var(--redsift-color-${$theme}-components-page-background);\n        }\n      `;\n    } else if ($isOutlined) {\n      return css`\n        & .shield {\n          fill: var(--redsift-color-${$theme}-components-page-background);\n          stroke: var(--redsift-color-notifications-${$color}-primary);\n          stroke-width: 2;\n        }\n        & .icon {\n          fill-rule: evenodd;\n          clip-rule: evenodd;\n          fill: var(--redsift-color-notifications-${$color}-primary);\n        }\n      `;\n    } else if ($isReversed) {\n      return css`\n        & .shield {\n          fill: var(--redsift-color-${$theme}-components-page-background);\n        }\n        & .icon {\n          fill-rule: evenodd;\n          clip-rule: evenodd;\n          fill: var(--redsift-color-notifications-${$color}-primary);\n        }\n      `;\n    } else {\n      return css`\n        & .shield {\n          fill: var(--redsift-color-notifications-${$color}-primary);\n        }\n        & .icon {\n          fill-rule: evenodd;\n          clip-rule: evenodd;\n          fill: var(--redsift-color-${$theme}-components-page-background);\n        }\n      `;\n    }\n  }}\n`;\n"],"names":["StyledShield","styled","div","baseStyling","_ref","$color","$isOutlined","$isReversed","$theme","css"],"mappings":";;;AAIaA,MAAAA,YAAY,GAAGC,MAAM,CAACC,GAAuB,CAAA;AAC1D;AACA;AACA,EAAA,EAAIC,WAAY,CAAA;AAChB;AACA;AACA;AACA,EAAA,EAAIC,IAAA,IAAkD;EAAA,IAAjD;IAAEC,MAAM;IAAEC,WAAW;IAAEC,WAAW;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAJ,IAAA,CAAA;EAC7C,IAAIG,WAAW,IAAID,WAAW,EAAE;AAC9B,IAAA,OAAOG,GAAI,CAAA;AACjB;AACA,kDAAA,EAAoDJ,MAAO,CAAA;AAC3D,sCAAA,EAAwCG,MAAO,CAAA;AAC/C;AACA;AACA;AACA;AACA;AACA,oCAAA,EAAsCA,MAAO,CAAA;AAC7C;AACA,MAAO,CAAA,CAAA;GACF,MAAM,IAAIF,WAAW,EAAE;AACtB,IAAA,OAAOG,GAAI,CAAA;AACjB;AACA,oCAAA,EAAsCD,MAAO,CAAA;AAC7C,oDAAA,EAAsDH,MAAO,CAAA;AAC7D;AACA;AACA;AACA;AACA;AACA,kDAAA,EAAoDA,MAAO,CAAA;AAC3D;AACA,MAAO,CAAA,CAAA;GACF,MAAM,IAAIE,WAAW,EAAE;AACtB,IAAA,OAAOE,GAAI,CAAA;AACjB;AACA,oCAAA,EAAsCD,MAAO,CAAA;AAC7C;AACA;AACA;AACA;AACA,kDAAA,EAAoDH,MAAO,CAAA;AAC3D;AACA,MAAO,CAAA,CAAA;AACH,GAAC,MAAM;AACL,IAAA,OAAOI,GAAI,CAAA;AACjB;AACA,kDAAA,EAAoDJ,MAAO,CAAA;AAC3D;AACA;AACA;AACA;AACA,oCAAA,EAAsCG,MAAO,CAAA;AAC7C;AACA,MAAO,CAAA,CAAA;AACH,GAAA;AACF,CAAE,CAAA;AACJ;;;;"}

package/components/shield/types.d.ts

@@ -0,0 +1,52 @@
+import { ComponentProps } from 'react';
+import { ValueOf } from '../../types/helpers.js';
+import { StylingProps } from '../../types/styles.js';
+import { Theme, NotificationsColorPalette, ProductColorPalette } from '../../types/colors.js';
+
+/**
+ * Component variant.
+ */
+declare const ShieldVariant: {
+    readonly success: "success";
+    readonly successLocked: "successLocked";
+    readonly successUnlocked: "successUnlocked";
+    readonly fail: "fail";
+    readonly failLocked: "failLocked";
+    readonly failUnlocked: "failUnlocked";
+    readonly warning: "warning";
+    readonly warningLocked: "warningLocked";
+    readonly warningUnlocked: "warningUnlocked";
+    readonly ignored: "ignored";
+    readonly noData: "noData";
+    readonly question: "question";
+    readonly email: "email";
+};
+type ShieldVariant = ValueOf<typeof ShieldVariant>;
+/**
+ * Component props.
+ */
+interface ShieldProps extends ComponentProps<'div'>, StylingProps {
+    /** Indicates whether the element is exposed to an accessibility API. */
+    'aria-hidden'?: boolean | 'false' | 'true';
+    /** A screen reader only label for the Icon. */
+    'aria-label'?: string;
+    /** Additional properties to forward to the SVG tag. */
+    svgProps?: ComponentProps<'svg'>;
+    /** Whether the shield has an outline or not. */
+    isOutlined?: boolean;
+    /** Whether the shield has its colors reversed or not. */
+    isReversed?: boolean;
+    /** Theme. */
+    theme?: Theme;
+    /** Shield variant. */
+    variant?: ShieldVariant;
+}
+type StyledShieldProps = Omit<ShieldProps, 'color'> & {
+    $color?: NotificationsColorPalette | ProductColorPalette | (string & {});
+    $isOutlined: ShieldProps['isOutlined'];
+    $isReversed: ShieldProps['isReversed'];
+    $theme: ShieldProps['theme'];
+    $variant: ShieldProps['variant'];
+};
+
+export { ShieldProps, ShieldVariant, StyledShieldProps };

package/components/shield/types.js

@@ -0,0 +1,25 @@
+/**
+ * Component variant.
+ */
+const ShieldVariant = {
+  success: 'success',
+  successLocked: 'successLocked',
+  successUnlocked: 'successUnlocked',
+  fail: 'fail',
+  failLocked: 'failLocked',
+  failUnlocked: 'failUnlocked',
+  warning: 'warning',
+  warningLocked: 'warningLocked',
+  warningUnlocked: 'warningUnlocked',
+  ignored: 'ignored',
+  noData: 'noData',
+  question: 'question',
+  email: 'email'
+};
+
+/**
+ * Component props.
+ */
+
+export { ShieldVariant };
+//# sourceMappingURL=types.js.map

package/components/shield/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/shield/types.ts"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { NotificationsColorPalette, ProductColorPalette, StylingProps, Theme, ValueOf } from '../../types';\n\n/**\n * Component variant.\n */\nexport const ShieldVariant = {\n  success: 'success',\n  successLocked: 'successLocked',\n  successUnlocked: 'successUnlocked',\n  fail: 'fail',\n  failLocked: 'failLocked',\n  failUnlocked: 'failUnlocked',\n  warning: 'warning',\n  warningLocked: 'warningLocked',\n  warningUnlocked: 'warningUnlocked',\n  ignored: 'ignored',\n  noData: 'noData',\n  question: 'question',\n  email: 'email',\n} as const;\nexport type ShieldVariant = ValueOf<typeof ShieldVariant>;\n\n/**\n * Component props.\n */\nexport interface ShieldProps extends ComponentProps<'div'>, StylingProps {\n  /** Indicates whether the element is exposed to an accessibility API. */\n  'aria-hidden'?: boolean | 'false' | 'true';\n  /** A screen reader only label for the Icon. */\n  'aria-label'?: string;\n  /** Additional properties to forward to the SVG tag. */\n  svgProps?: ComponentProps<'svg'>;\n  /** Whether the shield has an outline or not. */\n  isOutlined?: boolean;\n  /** Whether the shield has its colors reversed or not. */\n  isReversed?: boolean;\n  /** Theme. */\n  theme?: Theme;\n  /** Shield variant. */\n  variant?: ShieldVariant;\n}\n\nexport type StyledShieldProps = Omit<ShieldProps, 'color'> & {\n  $color?: NotificationsColorPalette | ProductColorPalette | (string & {});\n  $isOutlined: ShieldProps['isOutlined'];\n  $isReversed: ShieldProps['isReversed'];\n  $theme: ShieldProps['theme'];\n  $variant: ShieldProps['variant'];\n};\n"],"names":["ShieldVariant","success","successLocked","successUnlocked","fail","failLocked","failUnlocked","warning","warningLocked","warningUnlocked","ignored","noData","question","email"],"mappings":"AAGA;AACA;AACA;AACO,MAAMA,aAAa,GAAG;AAC3BC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,aAAa,EAAE,eAAe;AAC9BC,EAAAA,eAAe,EAAE,iBAAiB;AAClCC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,UAAU,EAAE,YAAY;AACxBC,EAAAA,YAAY,EAAE,cAAc;AAC5BC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,aAAa,EAAE,eAAe;AAC9BC,EAAAA,eAAe,EAAE,iBAAiB;AAClCC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,MAAM,EAAE,QAAQ;AAChBC,EAAAA,QAAQ,EAAE,UAAU;AACpBC,EAAAA,KAAK,EAAE,OAAA;AACT,EAAU;;AAGV;AACA;AACA;;;;"}

package/components/side-navigation-menu/SideNavigationMenu.d.ts

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