@redsift/design-system 11.9.4 → 12.0.0-muiv5

package/_internal/styles5.js

@@ -1,143 +1,252 @@
-import styled, { css } from 'styled-components';
-import { N as NotificationsColorPalette, g as NeutralColorPalette, e as ProductColorPalette } from './colors.js';
-import { i as baseStyling } from './styles4.js';
-
-/**
- * Component variant.
- */
-const TextVariant = {
-  body: 'body',
-  button: 'button',
-  caption: 'caption',
-  helper: 'helper',
-  inherit: 'inherit'
-};
-const TextComponent = {
-  p: 'p',
-  b: 'b',
-  i: 'i',
-  u: 'u',
-  abbr: 'abbr',
-  cite: 'cite',
-  del: 'del',
-  em: 'em',
-  ins: 'ins',
-  kbd: 'kbd',
-  mark: 'mark',
-  s: 's',
-  samp: 'samp',
-  sub: 'sub',
-  sup: 'sup'
-};
-
-/**
- * Component props.
- */
-
-/**
- * Component style.
- */
-const StyledText = styled.span`
-  ${baseStyling}
+import { css } from 'styled-components';
 
+const baseLayout = css`
   ${_ref => {
   let {
-    $color
+    $flex,
+    $flexGrow,
+    $flexShrink,
+    $flexBasis,
+    $alignSelf,
+    $justifySelf,
+    $order,
+    $gridArea,
+    $gridColumn,
+    $gridRow,
+    $gridColumnStart,
+    $gridColumnEnd,
+    $gridRowStart,
+    $gridRowEnd
   } = _ref;
-  return $color && $color === 'radar' ? css`
-          background: linear-gradient(90deg, #51b78e 0%, #0081c3 100%);
-          background-clip: text;
-          color: transparent;
-        ` : Object.keys(NotificationsColorPalette).indexOf($color) !== -1 ? css`
-          color: var(--redsift-color-notifications-${$color}-primary);
-        ` : Object.keys(NeutralColorPalette).indexOf($color) !== -1 ? css`
-          color: var(--redsift-color-neutral-${$color});
-        ` : Object.keys(ProductColorPalette).indexOf($color) !== -1 ? css`
-          color: var(--redsift-color-product-${$color});
-        ` : css`
-          color: ${$color || css`inherit`};
-        `;
+  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 {
-    $as
+    $margin,
+    $marginBottom,
+    $marginLeft,
+    $marginRight,
+    $marginTop
   } = _ref2;
   return css`
-    ${$as === TextComponent.i || $as === TextComponent.cite || $as === TextComponent.em ? css`
-          font-style: italic;
-        ` : $as === TextComponent.sub ? css`
-          vertical-align: sub;
-        ` : $as === TextComponent.sup ? css`
-          vertical-align: super;
-        ` : $as === TextComponent.mark ? css`
-          color: var(--redsift-color-neutral-x-dark-grey);
-        ` : ''}
-  `;
+      ${$margin ? `margin: ${$margin};` : ''}
+      ${$marginBottom ? `margin-bottom: ${$marginBottom};` : ''}
+      ${$marginLeft ? `margin-left: ${$marginLeft};` : ''}
+      ${$marginRight ? `margin-right: ${$marginRight};` : ''}
+      ${$marginTop ? `margin-top: ${$marginTop};` : ''}
+    `;
 }}
-
+`;
+const baseInternalSpacing = css`
   ${_ref3 => {
   let {
-    $as,
-    $fontFamily,
-    $fontSize,
-    $fontWeight,
-    $lineHeight,
-    $variant
+    $padding,
+    $paddingBottom,
+    $paddingLeft,
+    $paddingRight,
+    $paddingTop
   } = _ref3;
-  return !$variant ? css`
-          ${$fontFamily ? css`
-                font-family: var(--redsift-typography-font-family-${$fontFamily});
-              ` : ''}
-          ${$fontSize ? css`
-                font-size: ${$fontSize};
-              ` : ''}
-          ${$fontWeight ? css`
-                font-weight: ${$fontWeight};
-              ` : ''}
-          ${$lineHeight ? css`
-                line-height: ${$lineHeight};
-              ` : ''}
-          ${$as === TextComponent.b ? css`
-                font-weight: ${$fontWeight ? $fontWeight : 'var(--redsift-typography-font-weight-bold)'};
-              ` : $as === TextComponent.sup || $as === TextComponent.sub ? css`
-                font-size: ${$fontSize ? $fontSize : '12px'};
-              ` : ''}
-        ` : $variant === TextVariant.inherit ? css`
-          font-family: ${$fontFamily ? css`var(--redsift-typography-font-family-${$fontFamily})` : css`inherit`};
-          font-size: ${$fontSize ? $fontSize : $as === TextComponent.sup || $as === TextComponent.sub ? '12px' : css`inherit`};
-          font-weight: ${$fontWeight ? $fontWeight : $as === TextComponent.b ? 'var(--redsift-typography-font-weight-bold)' : 'inherit'};
-          line-height: ${$lineHeight ? $lineHeight : css`inherit`};
-          text-transform: inherit;
-        ` : css`
-          font-family: ${$fontFamily ? css`var(--redsift-typography-font-family-${$fontFamily})` : css`var(--redsift-typography-${$variant}-font-family)`};
-          font-size: ${$fontSize ? $fontSize : css`var(--redsift-typography-${$variant}-font-size)`};
-          font-weight: ${$fontWeight ? $fontWeight : css`var(--redsift-typography-${$variant}-font-weight)`};
-          line-height: ${$lineHeight ? $lineHeight : css`var(--redsift-typography-${$variant}-line-height)`};
-          text-transform: var(--redsift-typography-${$variant}-text-transform);
-        `;
+  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 {
-    $noWrap
+    $height,
+    $maxHeight,
+    $maxWidth,
+    $minHeight,
+    $minWidth,
+    $width
   } = _ref4;
-  return $noWrap ? css`
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        ` : '';
+  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 {
-    wordBreak
+    $position,
+    $top,
+    $bottom,
+    $left,
+    $right,
+    $zIndex
   } = _ref5;
-  return wordBreak ? css`
-          word-break: ${wordBreak};
-        ` : '';
+  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: ${$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;
+
+  ${baseLayout}
+  ${baseInternalSpacing}
+  ${baseSpacing}
+  ${baseSizing}
+  ${basePositioning}
+  ${baseGrid}
+  ${baseFlexbox}
+  ${baseBorder}
+`;
+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 { StyledText as S, TextVariant as T, TextComponent as a };
+export { baseSpacing as a, baseLayout as b, baseInternalSpacing as c, baseSizing as d, basePositioning as e, baseBorder as f, baseFlexbox as g, baseGrid as h, baseStyling as i, baseContainer as j, focusRing as k, srOnly as s };
 //# sourceMappingURL=styles5.js.map

package/_internal/styles5.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles5.js","sources":["../../src/components/text/types.ts","../../src/components/text/styles.ts"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { NotificationsColorPalette, FontFamily, NeutralColorPalette, StylingProps, ValueOf, Theme } from '../../types';\n\n/**\n * Component variant.\n */\nexport const TextVariant = {\n  body: 'body',\n  button: 'button',\n  caption: 'caption',\n  helper: 'helper',\n  inherit: 'inherit',\n} as const;\nexport type TextVariant = ValueOf<typeof TextVariant>;\n\nexport const TextComponent = {\n  p: 'p',\n  b: 'b',\n  i: 'i',\n  u: 'u',\n  abbr: 'abbr',\n  cite: 'cite',\n  del: 'del',\n  em: 'em',\n  ins: 'ins',\n  kbd: 'kbd',\n  mark: 'mark',\n  s: 's',\n  samp: 'samp',\n  sub: 'sub',\n  sup: 'sup',\n} as const;\nexport type TextComponent = ValueOf<typeof TextComponent>;\n\n/**\n * Component props.\n */\nexport interface TextProps extends ComponentProps<'span'>, StylingProps {\n  /** Override component. */\n  as?: TextComponent;\n  /** Color variant. Either from color palette or hex or rgb strings. */\n  color?: NotificationsColorPalette | NeutralColorPalette | 'radar' | (string & {});\n  /** Font family. */\n  fontFamily?: FontFamily;\n  /** Font size. */\n  fontSize?: string;\n  /** Font weight. */\n  fontWeight?: string;\n  /** Line height. */\n  lineHeight?: string;\n  /** Whether the text will truncate with a text overflow ellipsis or wrap. */\n  noWrap?: boolean;\n  /** Theme. */\n  theme?: Theme;\n  /** Variant. */\n  variant?: TextVariant;\n  /** Word break CSS properties */\n  wordBreak?: string;\n}\n\nexport type StyledTextProps = Omit<\n  TextProps,\n  'as' | 'color' | 'fontFamily' | 'fontSize' | 'lineHeight' | 'noWrap' | 'variant'\n> & {\n  $as: TextProps['as'];\n  $color: TextProps['color'];\n  $fontFamily?: TextProps['fontFamily'];\n  $fontSize: TextProps['fontSize'];\n  $fontWeight: TextProps['fontWeight'];\n  $lineHeight: TextProps['lineHeight'];\n  $noWrap: TextProps['noWrap'];\n  $variant: TextProps['variant'];\n  $theme: TextProps['theme'];\n};\n","import styled, { css } from 'styled-components';\nimport { NotificationsColorPalette, NeutralColorPalette, ProductColorPalette } from '../../types';\nimport { baseStyling } from '../shared';\nimport { StyledTextProps, TextComponent, TextVariant } from './types';\n\n/**\n * Component style.\n */\nexport const StyledText = styled.span<StyledTextProps>`\n  ${baseStyling}\n\n  ${({ $color }) =>\n    $color && $color === 'radar'\n      ? css`\n          background: linear-gradient(90deg, #51b78e 0%, #0081c3 100%);\n          background-clip: text;\n          color: transparent;\n        `\n      : Object.keys(NotificationsColorPalette).indexOf($color!) !== -1\n      ? css`\n          color: var(--redsift-color-notifications-${$color}-primary);\n        `\n      : Object.keys(NeutralColorPalette).indexOf($color!) !== -1\n      ? css`\n          color: var(--redsift-color-neutral-${$color});\n        `\n      : Object.keys(ProductColorPalette).indexOf($color!) !== -1\n      ? css`\n          color: var(--redsift-color-product-${$color});\n        `\n      : css`\n          color: ${$color || css`inherit`};\n        `}\n\n  ${({ $as }) => css`\n    ${$as === TextComponent.i || $as === TextComponent.cite || $as === TextComponent.em\n      ? css`\n          font-style: italic;\n        `\n      : $as === TextComponent.sub\n      ? css`\n          vertical-align: sub;\n        `\n      : $as === TextComponent.sup\n      ? css`\n          vertical-align: super;\n        `\n      : $as === TextComponent.mark\n      ? css`\n          color: var(--redsift-color-neutral-x-dark-grey);\n        `\n      : ''}\n  `}\n\n  ${({ $as, $fontFamily, $fontSize, $fontWeight, $lineHeight, $variant }) =>\n    !$variant\n      ? css`\n          ${$fontFamily\n            ? css`\n                font-family: var(--redsift-typography-font-family-${$fontFamily});\n              `\n            : ''}\n          ${$fontSize\n            ? css`\n                font-size: ${$fontSize};\n              `\n            : ''}\n          ${$fontWeight\n            ? css`\n                font-weight: ${$fontWeight};\n              `\n            : ''}\n          ${$lineHeight\n            ? css`\n                line-height: ${$lineHeight};\n              `\n            : ''}\n          ${$as === TextComponent.b\n            ? css`\n                font-weight: ${$fontWeight ? $fontWeight : 'var(--redsift-typography-font-weight-bold)'};\n              `\n            : $as === TextComponent.sup || $as === TextComponent.sub\n            ? css`\n                font-size: ${$fontSize ? $fontSize : '12px'};\n              `\n            : ''}\n        `\n      : $variant === TextVariant.inherit\n      ? css`\n          font-family: ${$fontFamily ? css`var(--redsift-typography-font-family-${$fontFamily})` : css`inherit`};\n          font-size: ${$fontSize\n            ? $fontSize\n            : $as === TextComponent.sup || $as === TextComponent.sub\n            ? '12px'\n            : css`inherit`};\n          font-weight: ${$fontWeight\n            ? $fontWeight\n            : $as === TextComponent.b\n            ? 'var(--redsift-typography-font-weight-bold)'\n            : 'inherit'};\n          line-height: ${$lineHeight ? $lineHeight : css`inherit`};\n          text-transform: inherit;\n        `\n      : css`\n          font-family: ${$fontFamily\n            ? css`var(--redsift-typography-font-family-${$fontFamily})`\n            : css`var(--redsift-typography-${$variant}-font-family)`};\n          font-size: ${$fontSize ? $fontSize : css`var(--redsift-typography-${$variant}-font-size)`};\n          font-weight: ${$fontWeight ? $fontWeight : css`var(--redsift-typography-${$variant}-font-weight)`};\n          line-height: ${$lineHeight ? $lineHeight : css`var(--redsift-typography-${$variant}-line-height)`};\n          text-transform: var(--redsift-typography-${$variant}-text-transform);\n        `}\n  \n  ${({ $noWrap }) =>\n    $noWrap\n      ? css`\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        `\n      : ''}\n\n  ${({ wordBreak }) =>\n    wordBreak\n      ? css`\n          word-break: ${wordBreak};\n        `\n      : ''}\n`;\n"],"names":["TextVariant","body","button","caption","helper","inherit","TextComponent","p","b","i","u","abbr","cite","del","em","ins","kbd","mark","s","samp","sub","sup","StyledText","styled","span","baseStyling","_ref","$color","css","Object","keys","NotificationsColorPalette","indexOf","NeutralColorPalette","ProductColorPalette","_ref2","$as","_ref3","$fontFamily","$fontSize","$fontWeight","$lineHeight","$variant","_ref4","$noWrap","_ref5","wordBreak"],"mappings":"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"}
+{"version":3,"file":"styles5.js","sources":["../../src/components/shared/styles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport {\n  LayoutTransientProps,\n  SpacingTransientProps,\n  SizingTransientProps,\n  PositioningTransientProps,\n  FlexLayoutTransientProps,\n  GridLayoutTransientProps,\n  StylingTransientProps,\n  InternalSpacingTransientProps,\n  BorderTransientProps,\n  ContainerTransientProps,\n} from '../../types';\n\nexport const baseLayout = css<LayoutTransientProps>`\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<SpacingTransientProps>`\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<InternalSpacingTransientProps>`\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<SizingTransientProps>`\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<PositioningTransientProps>`\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<BorderTransientProps>`\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<FlexLayoutTransientProps>`\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: ${$gap};` : ''}\n      ${$justifyContent ? `justify-content: ${$justifyContent};` : ''}\n    `}\n`;\n\nexport const baseGrid = css<GridLayoutTransientProps>`\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<StylingTransientProps>`\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<\n  ContainerTransientProps &\n    LayoutTransientProps &\n    InternalSpacingTransientProps &\n    SpacingTransientProps &\n    SizingTransientProps &\n    PositioningTransientProps &\n    GridLayoutTransientProps &\n    FlexLayoutTransientProps &\n    BorderTransientProps\n>`\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  ${baseLayout}\n  ${baseInternalSpacing}\n  ${baseSpacing}\n  ${baseSizing}\n  ${basePositioning}\n  ${baseGrid}\n  ${baseFlexbox}\n  ${baseBorder}\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/_internal/styles6.js

@@ -1,84 +1,143 @@
-import styled, { keyframes, css } from 'styled-components';
-import { i as baseStyling, c as baseInternalSpacing } from './styles4.js';
-import { T as Theme } from './colors.js';
+import styled, { css } from 'styled-components';
+import { N as NotificationsColorPalette, g as NeutralColorPalette, e as ProductColorPalette } from './colors.js';
+import { i as baseStyling } from './styles5.js';
 
 /**
- * Component style.
+ * Component variant.
  */
-const wave = keyframes`
-  0% {
-    -webkit-transform: translateX(-100%);
-    -moz-transform: translateX(-100%);
-    -ms-transform: translateX(-100%);
-    transform: translateX(-100%);
-  }
-
-  50% {
-    -webkit-transform: translateX(100%);
-    -moz-transform: translateX(100%);
-    -ms-transform: translateX(100%);
-    transform: translateX(100%);
-  }
-
-  100% {
-    -webkit-transform: translateX(100%);
-    -moz-transform: translateX(100%);
-    -ms-transform: translateX(100%);
-    transform: translateX(100%);
-  }
-`;
-const StyledSkeleton = styled.div`
-  height: fit-content;
-  width: fit-content;
+const TextVariant = {
+  body: 'body',
+  button: 'button',
+  caption: 'caption',
+  helper: 'helper',
+  inherit: 'inherit'
+};
+const TextComponent = {
+  p: 'p',
+  b: 'b',
+  i: 'i',
+  u: 'u',
+  abbr: 'abbr',
+  cite: 'cite',
+  del: 'del',
+  em: 'em',
+  ins: 'ins',
+  kbd: 'kbd',
+  mark: 'mark',
+  s: 's',
+  samp: 'samp',
+  sub: 'sub',
+  sup: 'sup'
+};
 
-  * {
-    visibility: hidden;
-  }
-
-  flex: 0 0 auto;
+/**
+ * Component props.
+ */
 
+/**
+ * Component style.
+ */
+const StyledText = styled.span`
   ${baseStyling}
-  ${baseInternalSpacing}
 
-  display: block;
-  background-color: ${_ref => {
+  ${_ref => {
   let {
-    $theme
+    $color
   } = _ref;
-  return $theme === Theme.light ? css`rgba(0, 0, 0, 0.16)` : css`rgba(255, 255, 255, 0.16)`;
-}};
-  border-radius: 4px;
-  position: relative;
-  overflow: hidden;
-  -webkit-mask-image: -webkit-radial-gradient(white, black);
+  return $color && $color === 'radar' ? css`
+          background: linear-gradient(90deg, #51b78e 0%, #0081c3 100%);
+          background-clip: text;
+          color: transparent;
+        ` : Object.keys(NotificationsColorPalette).indexOf($color) !== -1 ? css`
+          color: var(--redsift-color-notifications-${$color}-primary);
+        ` : Object.keys(NeutralColorPalette).indexOf($color) !== -1 ? css`
+          color: var(--redsift-color-neutral-${$color});
+        ` : Object.keys(ProductColorPalette).indexOf($color) !== -1 ? css`
+          color: var(--redsift-color-product-${$color});
+        ` : css`
+          color: ${$color || css`inherit`};
+        `;
+}}
 
-  &::after {
-    -webkit-animation: ${wave} 1.6s linear 0.5s infinite;
-    animation: ${wave} 1.6s linear 0.5s infinite;
-    background: linear-gradient(
-      90deg,
-      transparent,
-      ${_ref2 => {
+  ${_ref2 => {
   let {
-    $theme
+    $as
   } = _ref2;
-  return $theme === Theme.light ? css`rgba(0, 0, 0, 0.04)` : css`rgba(255, 255, 255, 0.04)`;
-}},
-      transparent
-    );
-    background-clip: content-box;
-    content: '';
-    position: absolute;
-    -webkit-transform: translateX(-100%);
-    -moz-transform: translateX(-100%);
-    -ms-transform: translateX(-100%);
-    transform: translateX(-100%);
-    bottom: 0;
-    left: 0;
-    right: 0;
-    top: 0;
-  }
+  return css`
+    ${$as === TextComponent.i || $as === TextComponent.cite || $as === TextComponent.em ? css`
+          font-style: italic;
+        ` : $as === TextComponent.sub ? css`
+          vertical-align: sub;
+        ` : $as === TextComponent.sup ? css`
+          vertical-align: super;
+        ` : $as === TextComponent.mark ? css`
+          color: var(--redsift-color-neutral-x-dark-grey);
+        ` : ''}
+  `;
+}}
+
+  ${_ref3 => {
+  let {
+    $as,
+    $fontFamily,
+    $fontSize,
+    $fontWeight,
+    $lineHeight,
+    $variant
+  } = _ref3;
+  return !$variant ? css`
+          ${$fontFamily ? css`
+                font-family: var(--redsift-typography-font-family-${$fontFamily});
+              ` : ''}
+          ${$fontSize ? css`
+                font-size: ${$fontSize};
+              ` : ''}
+          ${$fontWeight ? css`
+                font-weight: ${$fontWeight};
+              ` : ''}
+          ${$lineHeight ? css`
+                line-height: ${$lineHeight};
+              ` : ''}
+          ${$as === TextComponent.b ? css`
+                font-weight: ${$fontWeight ? $fontWeight : 'var(--redsift-typography-font-weight-bold)'};
+              ` : $as === TextComponent.sup || $as === TextComponent.sub ? css`
+                font-size: ${$fontSize ? $fontSize : '12px'};
+              ` : ''}
+        ` : $variant === TextVariant.inherit ? css`
+          font-family: ${$fontFamily ? css`var(--redsift-typography-font-family-${$fontFamily})` : css`inherit`};
+          font-size: ${$fontSize ? $fontSize : $as === TextComponent.sup || $as === TextComponent.sub ? '12px' : css`inherit`};
+          font-weight: ${$fontWeight ? $fontWeight : $as === TextComponent.b ? 'var(--redsift-typography-font-weight-bold)' : 'inherit'};
+          line-height: ${$lineHeight ? $lineHeight : css`inherit`};
+          text-transform: inherit;
+        ` : css`
+          font-family: ${$fontFamily ? css`var(--redsift-typography-font-family-${$fontFamily})` : css`var(--redsift-typography-${$variant}-font-family)`};
+          font-size: ${$fontSize ? $fontSize : css`var(--redsift-typography-${$variant}-font-size)`};
+          font-weight: ${$fontWeight ? $fontWeight : css`var(--redsift-typography-${$variant}-font-weight)`};
+          line-height: ${$lineHeight ? $lineHeight : css`var(--redsift-typography-${$variant}-line-height)`};
+          text-transform: var(--redsift-typography-${$variant}-text-transform);
+        `;
+}}
+  
+  ${_ref4 => {
+  let {
+    $noWrap
+  } = _ref4;
+  return $noWrap ? css`
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        ` : '';
+}}
+
+  ${_ref5 => {
+  let {
+    $wordBreak
+  } = _ref5;
+  return $wordBreak ? css`
+          word-break: ${$wordBreak};
+        ` : '';
+}}
 `;
 
-export { StyledSkeleton as S };
+export { StyledText as S, TextVariant as T, TextComponent as a };
 //# sourceMappingURL=styles6.js.map