@laerdal/life-react-components 6.0.0-dev.1.full → 6.0.0-dev.12.full

package/dist/Accordion/styles.cjs

@@ -22,8 +22,12 @@ const AccordionItemHeaderContainer = exports.AccordionItemHeaderContainer = _sty
   cursor: pointer;
   outline: none;
   box-sizing: border-box;
+  color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
 
-  ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme))}
+  ${(0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null)}
 
   div:last-child {
     margin-left: auto;
@@ -38,7 +42,7 @@ const AccordionItemHeaderContainer = exports.AccordionItemHeaderContainer = _sty
   }
   
   .medium & {
-    ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme))}
+    ${(0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null)}
     padding: 0 24px;
     min-height: 56px;
 
@@ -49,7 +53,7 @@ const AccordionItemHeaderContainer = exports.AccordionItemHeaderContainer = _sty
   }
 
   .large & {
-    ${props => (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme))}
+    ${(0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null)}
     padding: 0 32px;
     min-height: 64px;
     svg {
@@ -63,28 +67,52 @@ const AccordionItemHeaderContainer = exports.AccordionItemHeaderContainer = _sty
   }
 
   &:hover {
-    background: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
-    color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+    background: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover'
+}, props.theme)};
     z-index: ${_zIndexes.Z_INDEXES.hover};
   }
 
   &:active {
-    color: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
-    background: ${props => _styles.COLORS.getColor('primary_100', props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'active'
+}, props.theme)};
+    background: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
     z-index: ${_zIndexes.Z_INDEXES.active};
   }
 
   &.active {
-    color: ${props => _styles.COLORS.getColor('neutral_800', props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme)};
   }
 
   &.disabled {
-    background: ${props => _styles.COLORS.getColor('white', props.theme)}!important;
-    color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+    background: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'disabled'
+}, props.theme)}!important;
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
     cursor: not-allowed;
     pointer-events: none;
     svg {
-      color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)}!important;
+      color: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  state: 'disabled'
+}, props.theme)}!important;
     }
   }
 `;
@@ -95,12 +123,22 @@ const AccordionItemContainer = exports.AccordionItemContainer = _styledComponent
   box-sizing: border-box;
   
   &:not(:last-child) ${AccordionItemHeaderContainer}:not(.active) {
-    border-bottom: 1px solid ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
+    border-bottom: 1px solid ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   }
 `;
 const AccordionItemBodyContainer = exports.AccordionItemBodyContainer = _styledComponents.default.div`
   padding: ${props => props.$padding || '8px 16px'};
-  background: ${props => _styles.COLORS.getColor('white', props.theme)};
+  background: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
+  color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
   
   ${(0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null)}
   

package/dist/Accordion/styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs","names":["_styledComponents","_interopRequireDefault","require","_styles","_zIndexes","AccordionMenuWrapper","exports","styled","div","AccordionItemHeaderContainer","props","ComponentSStyling","ComponentTextStyle","Regular","COLORS","getColor","theme","ComponentMStyling","ComponentLStyling","focusStyles","Z_INDEXES","hover","active","AccordionItemContainer","AccordionItemBodyContainer","$padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  focusStyles\r\n} from '../styles';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\n\r\nexport const AccordionMenuWrapper = styled.div`\r\n  min-width: 320px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n`;\r\n\r\n\r\n\r\nexport const AccordionItemHeaderContainer = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  cursor: pointer;\r\n  outline: none;\r\n  box-sizing: border-box;\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n\r\n  div:last-child {\r\n    margin-left: auto;\r\n  }\r\n\r\n  padding: 0 16px;\r\n  min-height: 48px;\r\n  \r\n  svg {\r\n    width: 20px;\r\n    height: 20px;\r\n  }\r\n  \r\n  .medium & {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n    padding: 0 24px;\r\n    min-height: 56px;\r\n\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  .large & {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n    padding: 0 32px;\r\n    min-height: 64px;\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  &:focus:not(:active) {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover {\r\n    background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    z-index: ${Z_INDEXES.hover};\r\n  }\r\n\r\n  &:active {\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n  &.active {\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &.disabled {\r\n    background: ${props => COLORS.getColor('white', props.theme)}!important;\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    cursor: not-allowed;\r\n    pointer-events: none;\r\n    svg {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)}!important;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const AccordionItemContainer = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n  \r\n  &:not(:last-child) ${AccordionItemHeaderContainer}:not(.active) {\r\n    border-bottom: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const AccordionItemBodyContainer = styled.div<{ $padding?: string }>`\r\n  padding: ${(props) => props.$padding || '8px 16px'};\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n  \r\n  ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n  \r\n  .medium & {\r\n    padding: ${(props) => props.$padding || '12px 24px'};\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n  \r\n  .large & {\r\n    padding: ${(props) => props.$padding || '14px 32px'};\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"styles.cjs","names":["_styledComponents","_interopRequireDefault","require","_styles","_zIndexes","AccordionMenuWrapper","exports","styled","div","AccordionItemHeaderContainer","props","COLORS","generateToken","componentType","defaultVariant","theme","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","focusStyles","state","Z_INDEXES","hover","active","AccordionItemContainer","AccordionItemBodyContainer","$padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  focusStyles\r\n} from '../styles';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\n\r\nexport const AccordionMenuWrapper = styled.div`\r\n  min-width: 320px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n`;\r\n\r\n\r\n\r\nexport const AccordionItemHeaderContainer = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  cursor: pointer;\r\n  outline: none;\r\n  box-sizing: border-box;\r\n  color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme)};\r\n\r\n  ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n\r\n  div:last-child {\r\n    margin-left: auto;\r\n  }\r\n\r\n  padding: 0 16px;\r\n  min-height: 48px;\r\n  \r\n  svg {\r\n    width: 20px;\r\n    height: 20px;\r\n  }\r\n  \r\n  .medium & {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    padding: 0 24px;\r\n    min-height: 56px;\r\n\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  .large & {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    padding: 0 32px;\r\n    min-height: 64px;\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  &:focus:not(:active) {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover {\r\n    background: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'hover' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'hover' }, props.theme)};\r\n    z-index: ${Z_INDEXES.hover};\r\n  }\r\n\r\n  &:active {\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'active' }, props.theme)};\r\n    background: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'active' }, props.theme)};\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n  &.active {\r\n    color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'default' }, props.theme)};\r\n  }\r\n\r\n  &.disabled {\r\n    background: ${props => COLORS.generateToken({componentType: 'bg-surface', state: 'disabled'}, props.theme)}!important;\r\n    color: ${props => COLORS.generateToken({componentType: 'text', state: 'disabled'}, props.theme)};\r\n    cursor: not-allowed;\r\n    pointer-events: none;\r\n    svg {\r\n      color: ${props => COLORS.generateToken({componentType: 'icon', state: 'disabled'}, props.theme)}!important;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const AccordionItemContainer = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n  \r\n  &:not(:last-child) ${AccordionItemHeaderContainer}:not(.active) {\r\n    border-bottom: 1px solid ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'subtle' }, props.theme)};\r\n  }\r\n`;\r\n\r\nexport const AccordionItemBodyContainer = styled.div<{ $padding?: string }>`\r\n  padding: ${(props) => props.$padding || '8px 16px'};\r\n  background: ${props => COLORS.generateToken({componentType: 'bg-surface', defaultVariant: 'default'}, props.theme)};\r\n  color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'subtle'}, props.theme)};\r\n  \r\n  ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n  \r\n  .medium & {\r\n    padding: ${(props) => props.$padding || '12px 24px'};\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n  \r\n  .large & {\r\n    padding: ${(props) => props.$padding || '14px 32px'};\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Accordion/styles.js

@@ -15,8 +15,12 @@ export const AccordionItemHeaderContainer = styled.div`
   cursor: pointer;
   outline: none;
   box-sizing: border-box;
+  color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
 
-  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}
+  ${ComponentSStyling(ComponentTextStyle.Regular, null)}
 
   div:last-child {
     margin-left: auto;
@@ -31,7 +35,7 @@ export const AccordionItemHeaderContainer = styled.div`
   }
   
   .medium & {
-    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}
+    ${ComponentMStyling(ComponentTextStyle.Regular, null)}
     padding: 0 24px;
     min-height: 56px;
 
@@ -42,7 +46,7 @@ export const AccordionItemHeaderContainer = styled.div`
   }
 
   .large & {
-    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}
+    ${ComponentLStyling(ComponentTextStyle.Regular, null)}
     padding: 0 32px;
     min-height: 64px;
     svg {
@@ -56,28 +60,52 @@ export const AccordionItemHeaderContainer = styled.div`
   }
 
   &:hover {
-    background: ${props => COLORS.getColor('primary_20', props.theme)};
-    color: ${props => COLORS.getColor('primary_700', props.theme)};
+    background: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover'
+}, props.theme)};
     z-index: ${Z_INDEXES.hover};
   }
 
   &:active {
-    color: ${props => COLORS.getColor('primary_800', props.theme)};
-    background: ${props => COLORS.getColor('primary_100', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'active'
+}, props.theme)};
+    background: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
     z-index: ${Z_INDEXES.active};
   }
 
   &.active {
-    color: ${props => COLORS.getColor('neutral_800', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme)};
   }
 
   &.disabled {
-    background: ${props => COLORS.getColor('white', props.theme)}!important;
-    color: ${props => COLORS.getColor('neutral_300', props.theme)};
+    background: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'disabled'
+}, props.theme)}!important;
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
     cursor: not-allowed;
     pointer-events: none;
     svg {
-      color: ${props => COLORS.getColor('neutral_300', props.theme)}!important;
+      color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  state: 'disabled'
+}, props.theme)}!important;
     }
   }
 `;
@@ -88,12 +116,22 @@ export const AccordionItemContainer = styled.div`
   box-sizing: border-box;
   
   &:not(:last-child) ${AccordionItemHeaderContainer}:not(.active) {
-    border-bottom: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};
+    border-bottom: 1px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   }
 `;
 export const AccordionItemBodyContainer = styled.div`
   padding: ${props => props.$padding || '8px 16px'};
-  background: ${props => COLORS.getColor('white', props.theme)};
+  background: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
+  color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
   
   ${ComponentSStyling(ComponentTextStyle.Regular, null)}
   

package/dist/Accordion/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","Z_INDEXES","AccordionMenuWrapper","div","AccordionItemHeaderContainer","props","Regular","getColor","theme","hover","active","AccordionItemContainer","AccordionItemBodyContainer","$padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  focusStyles\r\n} from '../styles';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\n\r\nexport const AccordionMenuWrapper = styled.div`\r\n  min-width: 320px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n`;\r\n\r\n\r\n\r\nexport const AccordionItemHeaderContainer = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  cursor: pointer;\r\n  outline: none;\r\n  box-sizing: border-box;\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n\r\n  div:last-child {\r\n    margin-left: auto;\r\n  }\r\n\r\n  padding: 0 16px;\r\n  min-height: 48px;\r\n  \r\n  svg {\r\n    width: 20px;\r\n    height: 20px;\r\n  }\r\n  \r\n  .medium & {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n    padding: 0 24px;\r\n    min-height: 56px;\r\n\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  .large & {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n    padding: 0 32px;\r\n    min-height: 64px;\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  &:focus:not(:active) {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover {\r\n    background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    z-index: ${Z_INDEXES.hover};\r\n  }\r\n\r\n  &:active {\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n  &.active {\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &.disabled {\r\n    background: ${props => COLORS.getColor('white', props.theme)}!important;\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    cursor: not-allowed;\r\n    pointer-events: none;\r\n    svg {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)}!important;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const AccordionItemContainer = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n  \r\n  &:not(:last-child) ${AccordionItemHeaderContainer}:not(.active) {\r\n    border-bottom: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const AccordionItemBodyContainer = styled.div<{ $padding?: string }>`\r\n  padding: ${(props) => props.$padding || '8px 16px'};\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n  \r\n  ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n  \r\n  .medium & {\r\n    padding: ${(props) => props.$padding || '12px 24px'};\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n  \r\n  .large & {\r\n    padding: ${(props) => props.$padding || '14px 32px'};\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"styles.js","names":["styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","Z_INDEXES","AccordionMenuWrapper","div","AccordionItemHeaderContainer","props","generateToken","componentType","defaultVariant","theme","Regular","state","hover","active","AccordionItemContainer","AccordionItemBodyContainer","$padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  focusStyles\r\n} from '../styles';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\n\r\nexport const AccordionMenuWrapper = styled.div`\r\n  min-width: 320px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n`;\r\n\r\n\r\n\r\nexport const AccordionItemHeaderContainer = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  cursor: pointer;\r\n  outline: none;\r\n  box-sizing: border-box;\r\n  color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme)};\r\n\r\n  ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n\r\n  div:last-child {\r\n    margin-left: auto;\r\n  }\r\n\r\n  padding: 0 16px;\r\n  min-height: 48px;\r\n  \r\n  svg {\r\n    width: 20px;\r\n    height: 20px;\r\n  }\r\n  \r\n  .medium & {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    padding: 0 24px;\r\n    min-height: 56px;\r\n\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  .large & {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    padding: 0 32px;\r\n    min-height: 64px;\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  &:focus:not(:active) {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover {\r\n    background: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'hover' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'hover' }, props.theme)};\r\n    z-index: ${Z_INDEXES.hover};\r\n  }\r\n\r\n  &:active {\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'active' }, props.theme)};\r\n    background: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'active' }, props.theme)};\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n  &.active {\r\n    color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'default' }, props.theme)};\r\n  }\r\n\r\n  &.disabled {\r\n    background: ${props => COLORS.generateToken({componentType: 'bg-surface', state: 'disabled'}, props.theme)}!important;\r\n    color: ${props => COLORS.generateToken({componentType: 'text', state: 'disabled'}, props.theme)};\r\n    cursor: not-allowed;\r\n    pointer-events: none;\r\n    svg {\r\n      color: ${props => COLORS.generateToken({componentType: 'icon', state: 'disabled'}, props.theme)}!important;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const AccordionItemContainer = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n  \r\n  &:not(:last-child) ${AccordionItemHeaderContainer}:not(.active) {\r\n    border-bottom: 1px solid ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'subtle' }, props.theme)};\r\n  }\r\n`;\r\n\r\nexport const AccordionItemBodyContainer = styled.div<{ $padding?: string }>`\r\n  padding: ${(props) => props.$padding || '8px 16px'};\r\n  background: ${props => COLORS.generateToken({componentType: 'bg-surface', defaultVariant: 'default'}, props.theme)};\r\n  color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'subtle'}, props.theme)};\r\n  \r\n  ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n  \r\n  .medium & {\r\n    padding: ${(props) => props.$padding || '12px 24px'};\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n  \r\n  .large & {\r\n    padding: ${(props) => props.$padding || '14px 32px'};\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/AuthPage/__tests__/AuthPage.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render } from '../../test-utils';
+import '@testing-library/jest-dom';
+import { AuthPage, Size, SystemIcons } from '../..';
+import 'jest-styled-components';
+
+
+
+
+describe('<AuthPage />', () => {
+  it('Renders AuthPage component', async () => {
+    const { getByText, container, getByTestId } = render(
+      <AuthPage
+        screenSetsContainerId="gigya_test"
+        panel={{
+          title: 'Sign in header',
+          content: 'Sign in information',
+        }}
+      />,
+    );
+    //expect gygia container displayed
+    expect(container.querySelector('[id="gigya_test"]')).toBeTruthy();
+    //expect sign in header and info text displayed
+    expect(getByText('Sign in header')).toBeTruthy();
+    expect(getByText('Sign in information')).toBeTruthy();
+  });
+});

package/dist/Banners/Banner.cjs

@@ -26,7 +26,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const BannerContainerStyles = exports.BannerContainerStyles = _styledComponents.default.div`
-  background: ${props => props.$type ? props.$type : _styles.COLORS.getColor('correct_100', props.theme)};
+  background: ${props => props.$backgroundColor};
   min-height: 48px;
   display: flex;
   color: ${props => _styles.COLORS.getColor('black', props.theme)};
@@ -58,11 +58,11 @@ const BannerContainerStyles = exports.BannerContainerStyles = _styledComponents.
       color: ${props => props.$link};
     }
     &:visited {
-      color: ${props => props.$linkVisited};
+      color: ${props => props.$linkActive};
     }
     &:focus,
     &:active {
-      background-color: ${props => props.$linkFocused};
+      background-color: ${props => props.$linkActive};
       color: ${props => _styles.COLORS.getColor('white', props.theme)};
     }
   }
@@ -163,69 +163,73 @@ const Banner = _ref => {
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);
   }, []);
+  let variant = 'primary';
+  switch (type) {
+    case 'warning':
+      variant = 'warning';
+      break;
+    case 'critical':
+      variant = 'critical';
+      break;
+    case 'positive':
+      variant = 'positive';
+      break;
+  }
   let bannerParams = {
-    typeColor: _styles.COLORS.getColor('primary_100', theme),
-    accentColor: _styles.COLORS.getColor('primary_700', theme),
-    closeIconColor: _styles.COLORS.getColor('primary_500', theme),
+    background: _styles.COLORS.generateToken({
+      componentType: 'bg-surface',
+      defaultVariant: variant
+    }, theme),
+    linkColor: _styles.COLORS.generateToken({
+      componentType: 'text-link',
+      defaultVariant: variant
+    }, theme),
+    closeIconColor: _styles.COLORS.generateToken({
+      componentType: 'icon',
+      defaultVariant: variant
+    }, theme),
     icon: _icons.SystemIcons.Tip,
     containerType: type,
-    focusBgColor: _styles.COLORS.getColor('primary_200', theme),
-    linkVisited: _styles.COLORS.getColor('primary_600', theme),
-    linkFocused: _styles.COLORS.getColor('primary_800', theme)
+    linkActive: _styles.COLORS.generateToken({
+      componentType: 'text-link',
+      defaultVariant: variant,
+      state: 'active'
+    }, theme)
   };
   switch (type) {
     case 'warning':
-      bannerParams.typeColor = _styles.COLORS.getColor('warning_100', theme);
-      bannerParams.accentColor = _styles.COLORS.getColor('warning_700', theme);
-      bannerParams.focusBgColor = _styles.COLORS.getColor('warning_200', theme);
       bannerParams.icon = _icons.SystemIcons.Help;
-      bannerParams.closeIconColor = _styles.COLORS.getColor('warning_500', theme);
-      bannerParams.linkVisited = _styles.COLORS.getColor('warning_800', theme);
-      bannerParams.linkFocused = _styles.COLORS.getColor('warning_800', theme);
       break;
     case 'critical':
-      bannerParams.typeColor = _styles.COLORS.getColor('critical_100', theme);
-      bannerParams.accentColor = _styles.COLORS.getColor('critical_700', theme);
-      bannerParams.focusBgColor = _styles.COLORS.getColor('critical_200', theme);
       bannerParams.icon = _icons.SystemIcons.TechnicalWarning;
-      bannerParams.closeIconColor = _styles.COLORS.getColor('critical_500', theme);
-      bannerParams.linkVisited = _styles.COLORS.getColor('critical_800', theme);
-      bannerParams.linkFocused = _styles.COLORS.getColor('critical_800', theme);
       break;
     case 'positive':
-      bannerParams.typeColor = _styles.COLORS.getColor('correct_100', theme);
-      bannerParams.accentColor = _styles.COLORS.getColor('correct_700', theme);
-      bannerParams.focusBgColor = _styles.COLORS.getColor('correct_200', theme);
       bannerParams.icon = _icons.SystemIcons.ThumbsUp;
-      bannerParams.closeIconColor = _styles.COLORS.getColor('correct_500', theme);
-      bannerParams.linkVisited = _styles.COLORS.getColor('correct_800', theme);
-      bannerParams.linkFocused = _styles.COLORS.getColor('correct_800', theme);
       break;
   }
   const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContainerStyles, _objectSpread(_objectSpread({
     "data-testid": testId,
-    $type: bannerParams.typeColor,
-    $linkFocused: bannerParams.linkFocused,
-    $linkVisited: bannerParams.linkVisited,
-    $link: bannerParams.accentColor,
+    $backgroundColor: bannerParams.background,
+    $linkActive: bannerParams.linkActive,
+    $link: bannerParams.linkColor,
     $bottom: bottom,
     className: cls,
     role: "note"
   }, rest), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(BannerCenterStyles, {
       style: {
-        color: bannerParams.accentColor
+        color: bannerParams.linkColor
       },
       className: size,
       children: [icon ? icon : noIcon ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(bannerParams.icon, {
-        color: bannerParams.accentColor,
+        color: bannerParams.linkColor,
         size: "24px"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContentWrapperStyles, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ComponentResponsive, {
           size: size,
           width: width,
-          color: bannerParams.accentColor,
+          color: bannerParams.linkColor,
           children: [children, "\xA0", link && linkText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_HyperLink.default, {
             id: `${Math.floor(Math.random() * 999999999999)}_BannerLink`,
             onClick: e => {

package/dist/Banners/Banner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_styles","_icons","_Button","_styles2","_HyperLink","_utils","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","BannerContainerStyles","exports","styled","div","props","$type","COLORS","getColor","theme","$bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","$link","$linkVisited","$linkFocused","BannerCenterStyles","ComponentMStyling","ComponentTextStyle","Regular","BannerCloseButtonWrapperStyles","BannerCloseButtonContainerStyles","getButtonStyle","BannerContentWrapperStyles","Banner","_ref","size","type","children","bottom","testId","linkText","link","onClose","icon","noIcon","linkAction","fullWidth","className","rest","_objectWithoutProperties2","useTheme","width","setWidth","useState","hasWindow","window","innerWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","accentColor","closeIconColor","SystemIcons","Tip","containerType","focusBgColor","linkVisited","linkFocused","Help","TechnicalWarning","ThumbsUp","cls","jsx","role","jsxs","style","color","ComponentResponsive","id","Math","floor","random","onClick","preventDefault","href","variant","IconButton","shape","useTransparentBackground","action","Close","propTypes","_propTypes","oneOf","string","func","bool","node","_default"],"sources":["../../src/Banners/Banner.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\r\nimport { SystemIcons } from '../icons';\r\nimport { IconButton } from '../Button';\r\nimport { getButtonStyle } from './styles';\r\nimport { Size } from '../types';\r\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\r\nimport HyperLink from '../HyperLink/HyperLink';\r\nimport { StyledLink } from '../HyperLink/HyperLink';\r\nimport { hasWindow } from '../utils/utils';\r\n\r\n/**\r\n * Styles for <Banner />\r\n */\r\nexport type StyleBannerProps = BannerProps & { type: string; linkVisited: string; linkFocused: string };\r\n\r\nexport const BannerContainerStyles = styled.div<{ $link?: string, $bottom?: boolean, $type: string; $linkVisited: string; $linkFocused: string }>`\r\n  background: ${props => (props.$type ? props.$type : COLORS.getColor('correct_100', props.theme))};\r\n  min-height: 48px;\r\n  display: flex;\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n  margin-top: ${props => (props.$bottom ? 'auto' : '0')};\r\n  border-radius: 4px;\r\n\r\n  button:last-child {\r\n    line-height: 0;\r\n    margin: 0 0 0 8px;\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      margin: 0 0 0 16px;\r\n    }\r\n    ${BREAKPOINTS.LARGE} {\r\n      margin: 0 0 0 32px;\r\n    }\r\n    &.small {\r\n      margin: 0 0 0 8px;\r\n    }\r\n    &.medium {\r\n      margin: 0 0 0 16px;\r\n    }\r\n    &.large {\r\n      margin: 0 0 0 32px;\r\n    }\r\n  }\r\n\r\n  ${StyledLink} {\r\n    &:link {\r\n      color: ${(props) => props.$link};\r\n    }\r\n    &:visited {\r\n      color: ${(props) => props.$linkVisited};\r\n    }\r\n    &:focus,\r\n    &:active {\r\n      background-color: ${(props) => props.$linkFocused};\r\n      color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.full-width-banner {\r\n    margin: 8px;\r\n  }\r\n`;\r\n\r\nexport const BannerCenterStyles = styled.div`\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n\r\n  display: flex;\r\n  width: 100%;\r\n  margin: 0 16px;\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin: 0 32px;\r\n  }\r\n  ${BREAKPOINTS.LARGE} {\r\n    margin: 0 56px;\r\n  }\r\n  &.small {\r\n    margin: 0 16px;\r\n  }\r\n  &.medium {\r\n    margin: 0 32px;\r\n  }\r\n  &.large {\r\n    margin: 0 64px;\r\n  }\r\n\r\n  > svg {\r\n    flex-shrink: 0;\r\n    margin: 12px 0;\r\n  }\r\n\r\n  .full-width-banner & {\r\n    margin: 0 16px;\r\n\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      margin: 0 32px;\r\n    }\r\n    ${BREAKPOINTS.LARGE} {\r\n      margin: 0 64px;\r\n    }\r\n\r\n    &.small {\r\n      margin: 0 16px;\r\n    }\r\n\r\n    &.medium {\r\n      margin: 0 32px;\r\n    }\r\n\r\n    &.large {\r\n      margin: 0 64px;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const BannerCloseButtonWrapperStyles = styled.div`\r\n  margin: 0 0 0 auto;\r\n`;\r\n\r\nexport const BannerCloseButtonContainerStyles = styled.div<{ $type?: string }>`\r\n  display: contents;\r\n  ${(props) => (props.$type ? getButtonStyle(props.$type, props.theme) : null)};\r\n`;\r\n\r\nexport const BannerContentWrapperStyles = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  margin: 12px 0;\r\n  &:not(:first-child) {\r\n    margin-left: 8px;\r\n  }\r\n`;\r\n\r\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  /** Size of the banner. */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Type of the banner. Different types have different color schemes. */\r\n  type?: 'warning' | 'critical' | 'positive' | 'neutral';\r\n  /** Link that will be shown after the children of the component. */\r\n  link?: string;\r\n  /** Text of the link */\r\n  linkText?: string;\r\n  /** If provided, then after user clicks on the link instead of following the link this method will be executed. */\r\n  linkAction?: (ev: React.MouseEvent) => void;\r\n  /** If set to true, then Banner will have 'margin-top' set to auto, and will render it at the bottom of the parent. */\r\n  bottom?: boolean;\r\n  /** For testing purposes. Will be set on top level container. */\r\n  testId?: string;\r\n  /** Icon to be shown instead of default icon on the left side of the Banner. */\r\n  icon?: React.ReactNode;\r\n  /** Callback event to be executed when user clicks on Close button. */\r\n  onClose?: () => void;\r\n  /** By default different banner types have different icons shown. If this flag is set, then no icon will be shown */\r\n  noIcon?: boolean;\r\n  /** Modifies margin of the banner for the cases when Banner stretches to full page width. */\r\n  fullWidth?: boolean;\r\n};\r\n\r\n/** Banner component is used as a middle-interrupting message to the user with zero to one actions. */\r\nconst Banner: React.FunctionComponent<BannerProps> = ({\r\n  size,\r\n  type = 'neutral',\r\n  children,\r\n  bottom,\r\n  testId,\r\n  linkText,\r\n  link,\r\n  onClose,\r\n  icon,\r\n  noIcon,\r\n  linkAction,\r\n  fullWidth,\r\n  className,\r\n  ...rest\r\n}) => {\r\n  const theme = useTheme();\r\n  const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\r\n  React.useEffect(() => {\r\n    function handleResize() {\r\n      setWidth(window.innerWidth);\r\n    }\r\n    window.addEventListener('resize', handleResize);\r\n    return () => window.removeEventListener('resize', handleResize);\r\n  }, []);\r\n\r\n  let bannerParams = {\r\n    typeColor: COLORS.getColor('primary_100', theme),\r\n    accentColor: COLORS.getColor('primary_700', theme),\r\n    closeIconColor: COLORS.getColor('primary_500', theme),\r\n    icon: SystemIcons.Tip,\r\n    containerType: type,\r\n    focusBgColor: COLORS.getColor('primary_200', theme),\r\n    linkVisited: COLORS.getColor('primary_600', theme),\r\n    linkFocused: COLORS.getColor('primary_800', theme),\r\n  };\r\n  switch (type) {\r\n    case 'warning':\r\n      bannerParams.typeColor = COLORS.getColor('warning_100', theme);\r\n      bannerParams.accentColor = COLORS.getColor('warning_700', theme);\r\n      bannerParams.focusBgColor = COLORS.getColor('warning_200', theme);\r\n      bannerParams.icon = SystemIcons.Help;\r\n      bannerParams.closeIconColor = COLORS.getColor('warning_500', theme);\r\n      bannerParams.linkVisited = COLORS.getColor('warning_800', theme);\r\n      bannerParams.linkFocused = COLORS.getColor('warning_800', theme);\r\n      break;\r\n    case 'critical':\r\n      bannerParams.typeColor = COLORS.getColor('critical_100', theme);\r\n      bannerParams.accentColor = COLORS.getColor('critical_700', theme);\r\n      bannerParams.focusBgColor = COLORS.getColor('critical_200', theme);\r\n      bannerParams.icon = SystemIcons.TechnicalWarning;\r\n      bannerParams.closeIconColor = COLORS.getColor('critical_500', theme);\r\n      bannerParams.linkVisited = COLORS.getColor('critical_800', theme);\r\n      bannerParams.linkFocused = COLORS.getColor('critical_800', theme);\r\n      break;\r\n    case 'positive':\r\n      bannerParams.typeColor = COLORS.getColor('correct_100', theme);\r\n      bannerParams.accentColor = COLORS.getColor('correct_700', theme);\r\n      bannerParams.focusBgColor = COLORS.getColor('correct_200', theme);\r\n      bannerParams.icon = SystemIcons.ThumbsUp;\r\n      bannerParams.closeIconColor = COLORS.getColor('correct_500', theme);\r\n      bannerParams.linkVisited = COLORS.getColor('correct_800', theme);\r\n      bannerParams.linkFocused = COLORS.getColor('correct_800', theme);\r\n      break;\r\n  }\r\n\r\n  const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\r\n\r\n  return (\r\n    <BannerContainerStyles\r\n      data-testid={testId}\r\n      $type={bannerParams.typeColor}\r\n      $linkFocused={bannerParams.linkFocused}\r\n      $linkVisited={bannerParams.linkVisited}\r\n      $link={bannerParams.accentColor}\r\n      $bottom={bottom}\r\n      className={cls}\r\n      role=\"note\"\r\n      {...rest}>\r\n      <BannerCenterStyles style={{ color: bannerParams.accentColor }} className={size}>\r\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\r\n        <BannerContentWrapperStyles>\r\n          <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\r\n            {children}&nbsp;\r\n            {link && linkText && (\r\n              <HyperLink\r\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\r\n                onClick={(e) => {\r\n                  if (linkAction) {\r\n                    e.preventDefault();\r\n                    linkAction(e);\r\n                  }\r\n                }}\r\n                href={link}\r\n                variant=\"default\">\r\n                {linkText}\r\n              </HyperLink>\r\n            )}\r\n          </ComponentResponsive>\r\n        </BannerContentWrapperStyles>\r\n        {onClose && (\r\n          <BannerCloseButtonWrapperStyles>\r\n            <BannerCloseButtonContainerStyles $type={bannerParams.containerType}>\r\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={() => onClose()}>\r\n                <SystemIcons.Close color={bannerParams.closeIconColor} size=\"24px\" />\r\n              </IconButton>\r\n            </BannerCloseButtonContainerStyles>\r\n          </BannerCloseButtonWrapperStyles>\r\n        )}\r\n      </BannerCenterStyles>\r\n    </BannerContainerStyles>\r\n  );\r\n};\r\n\r\nexport default Banner;\r\n"],"mappings":"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AM,GAAG,GAAI;AACvD;AACA;AACA;AACA;AACA;AACA,MAAMC,mBAAW,CAACC,MAAM;AACxB;AACA;AACA,MAAMD,mBAAW,CAACE,KAAK;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIC,qBAAU;AACd;AACA,eAAgBT,KAAK,IAAKA,KAAK,CAACU,KAAK;AACrC;AACA;AACA,eAAgBV,KAAK,IAAKA,KAAK,CAACW,YAAY;AAC5C;AACA;AACA;AACA,0BAA2BX,KAAK,IAAKA,KAAK,CAACY,YAAY;AACvD,eAAeZ,KAAK,IAAIE,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEH,KAAK,CAACI,KAAK,CAAC;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMS,kBAAkB,GAAAhB,OAAA,CAAAgB,kBAAA,GAAGf,yBAAM,CAACC,GAAG;AAC5C,IAAI,IAAAe,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC;AACvD;AACA;AACA;AACA;AACA,IAAIV,mBAAW,CAACC,MAAM;AACtB;AACA;AACA,IAAID,mBAAW,CAACE,KAAK;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMF,mBAAW,CAACC,MAAM;AACxB;AACA;AACA,MAAMD,mBAAW,CAACE,KAAK;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMS,8BAA8B,GAAApB,OAAA,CAAAoB,8BAAA,GAAGnB,yBAAM,CAACC,GAAG;AACxD;AACA,CAAC;AAEM,MAAMmB,gCAAgC,GAAArB,OAAA,CAAAqB,gCAAA,GAAGpB,yBAAM,CAACC,GAAuB;AAC9E;AACA,IAAKC,KAAK,IAAMA,KAAK,CAACC,KAAK,GAAG,IAAAkB,uBAAc,EAACnB,KAAK,CAACC,KAAK,EAAED,KAAK,CAACI,KAAK,CAAC,GAAG,IAAK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","ignoreList":[]}
+{"version":3,"file":"Banner.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_styles","_icons","_Button","_styles2","_HyperLink","_utils","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","BannerContainerStyles","exports","styled","div","props","$backgroundColor","COLORS","getColor","theme","$bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","$link","$linkActive","BannerCenterStyles","ComponentMStyling","ComponentTextStyle","Regular","BannerCloseButtonWrapperStyles","BannerCloseButtonContainerStyles","$type","getButtonStyle","BannerContentWrapperStyles","Banner","_ref","size","type","children","bottom","testId","linkText","link","onClose","icon","noIcon","linkAction","fullWidth","className","rest","_objectWithoutProperties2","useTheme","width","setWidth","useState","hasWindow","window","innerWidth","useEffect","handleResize","addEventListener","removeEventListener","variant","bannerParams","background","generateToken","componentType","defaultVariant","linkColor","closeIconColor","SystemIcons","Tip","containerType","linkActive","state","Help","TechnicalWarning","ThumbsUp","cls","jsx","role","jsxs","style","color","ComponentResponsive","id","Math","floor","random","onClick","preventDefault","href","IconButton","shape","useTransparentBackground","action","Close","propTypes","_propTypes","oneOf","string","func","bool","node","_default"],"sources":["../../src/Banners/Banner.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\r\nimport { SystemIcons } from '../icons';\r\nimport { IconButton } from '../Button';\r\nimport { getButtonStyle } from './styles';\r\nimport { Size } from '../types';\r\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\r\nimport HyperLink from '../HyperLink/HyperLink';\r\nimport { StyledLink } from '../HyperLink/HyperLink';\r\nimport { hasWindow } from '../utils/utils';\r\nimport { ColorVariant } from 'src/utils/color-tokens';\r\n\r\n/**\r\n * Styles for <Banner />\r\n */\r\nexport type StyleBannerProps = BannerProps & { type: string; linkVisited: string; linkFocused: string };\r\n\r\nexport const BannerContainerStyles = styled.div<{ $link?: string, $bottom?: boolean, $backgroundColor: string; $linkActive: string; }>`\r\n  background: ${props => props.$backgroundColor};\r\n  min-height: 48px;\r\n  display: flex;\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n  margin-top: ${props => (props.$bottom ? 'auto' : '0')};\r\n  border-radius: 4px;\r\n\r\n  button:last-child {\r\n    line-height: 0;\r\n    margin: 0 0 0 8px;\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      margin: 0 0 0 16px;\r\n    }\r\n    ${BREAKPOINTS.LARGE} {\r\n      margin: 0 0 0 32px;\r\n    }\r\n    &.small {\r\n      margin: 0 0 0 8px;\r\n    }\r\n    &.medium {\r\n      margin: 0 0 0 16px;\r\n    }\r\n    &.large {\r\n      margin: 0 0 0 32px;\r\n    }\r\n  }\r\n\r\n  ${StyledLink} {\r\n    &:link {\r\n      color: ${(props) => props.$link};\r\n    }\r\n    &:visited {\r\n      color: ${(props) => props.$linkActive};\r\n    }\r\n    &:focus,\r\n    &:active {\r\n      background-color: ${(props) => props.$linkActive};\r\n      color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.full-width-banner {\r\n    margin: 8px;\r\n  }\r\n`;\r\n\r\nexport const BannerCenterStyles = styled.div`\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n\r\n  display: flex;\r\n  width: 100%;\r\n  margin: 0 16px;\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin: 0 32px;\r\n  }\r\n  ${BREAKPOINTS.LARGE} {\r\n    margin: 0 56px;\r\n  }\r\n  &.small {\r\n    margin: 0 16px;\r\n  }\r\n  &.medium {\r\n    margin: 0 32px;\r\n  }\r\n  &.large {\r\n    margin: 0 64px;\r\n  }\r\n\r\n  > svg {\r\n    flex-shrink: 0;\r\n    margin: 12px 0;\r\n  }\r\n\r\n  .full-width-banner & {\r\n    margin: 0 16px;\r\n\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      margin: 0 32px;\r\n    }\r\n    ${BREAKPOINTS.LARGE} {\r\n      margin: 0 64px;\r\n    }\r\n\r\n    &.small {\r\n      margin: 0 16px;\r\n    }\r\n\r\n    &.medium {\r\n      margin: 0 32px;\r\n    }\r\n\r\n    &.large {\r\n      margin: 0 64px;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const BannerCloseButtonWrapperStyles = styled.div`\r\n  margin: 0 0 0 auto;\r\n`;\r\n\r\nexport const BannerCloseButtonContainerStyles = styled.div<{ $type?: string }>`\r\n  display: contents;\r\n  ${(props) => (props.$type ? getButtonStyle(props.$type, props.theme) : null)};\r\n`;\r\n\r\nexport const BannerContentWrapperStyles = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  margin: 12px 0;\r\n  &:not(:first-child) {\r\n    margin-left: 8px;\r\n  }\r\n`;\r\n\r\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  /** Size of the banner. */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Type of the banner. Different types have different color schemes. */\r\n  type?: 'warning' | 'critical' | 'positive' | 'neutral';\r\n  /** Link that will be shown after the children of the component. */\r\n  link?: string;\r\n  /** Text of the link */\r\n  linkText?: string;\r\n  /** If provided, then after user clicks on the link instead of following the link this method will be executed. */\r\n  linkAction?: (ev: React.MouseEvent) => void;\r\n  /** If set to true, then Banner will have 'margin-top' set to auto, and will render it at the bottom of the parent. */\r\n  bottom?: boolean;\r\n  /** For testing purposes. Will be set on top level container. */\r\n  testId?: string;\r\n  /** Icon to be shown instead of default icon on the left side of the Banner. */\r\n  icon?: React.ReactNode;\r\n  /** Callback event to be executed when user clicks on Close button. */\r\n  onClose?: () => void;\r\n  /** By default different banner types have different icons shown. If this flag is set, then no icon will be shown */\r\n  noIcon?: boolean;\r\n  /** Modifies margin of the banner for the cases when Banner stretches to full page width. */\r\n  fullWidth?: boolean;\r\n};\r\n\r\n/** Banner component is used as a middle-interrupting message to the user with zero to one actions. */\r\nconst Banner: React.FunctionComponent<BannerProps> = ({\r\n  size,\r\n  type = 'neutral',\r\n  children,\r\n  bottom,\r\n  testId,\r\n  linkText,\r\n  link,\r\n  onClose,\r\n  icon,\r\n  noIcon,\r\n  linkAction,\r\n  fullWidth,\r\n  className,\r\n  ...rest\r\n}) => {\r\n  const theme = useTheme();\r\n  const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\r\n  React.useEffect(() => {\r\n    function handleResize() {\r\n      setWidth(window.innerWidth);\r\n    }\r\n    window.addEventListener('resize', handleResize);\r\n    return () => window.removeEventListener('resize', handleResize);\r\n  }, []);\r\n\r\n\r\n  let variant = 'primary';\r\n  switch(type)\r\n  {\r\n    case 'warning':\r\n      variant = 'warning';\r\n      break;\r\n\r\n    case 'critical':\r\n      variant = 'critical';\r\n      break;\r\n\r\n    case 'positive':\r\n      variant = 'positive';\r\n      break;\r\n  }\r\n  \r\n  let bannerParams = {\r\n    background:     COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: variant as ColorVariant }, theme),\r\n    linkColor:      COLORS.generateToken({ componentType: 'text-link',  defaultVariant: variant as ColorVariant }, theme),\r\n    closeIconColor: COLORS.generateToken({ componentType: 'icon',       defaultVariant: variant as ColorVariant }, theme),\r\n    icon: SystemIcons.Tip,\r\n    containerType: type,\r\n    linkActive:     COLORS.generateToken({ componentType: 'text-link',  defaultVariant: variant as ColorVariant, state: 'active' }, theme),\r\n  };\r\n\r\n  switch (type) {\r\n    case 'warning':\r\n      bannerParams.icon = SystemIcons.Help;\r\n      break;\r\n    case 'critical':\r\n      bannerParams.icon = SystemIcons.TechnicalWarning;\r\n      break;\r\n    case 'positive':\r\n      bannerParams.icon = SystemIcons.ThumbsUp;\r\n      break;\r\n  }\r\n\r\n  const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\r\n\r\n  return (\r\n    <BannerContainerStyles\r\n      data-testid={testId}\r\n      $backgroundColor={bannerParams.background}\r\n      $linkActive={bannerParams.linkActive}\r\n      $link={bannerParams.linkColor}\r\n      $bottom={bottom}\r\n      className={cls}\r\n      role=\"note\"\r\n      {...rest}>\r\n      <BannerCenterStyles style={{ color: bannerParams.linkColor }} className={size}>\r\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.linkColor} size=\"24px\" />}\r\n        <BannerContentWrapperStyles>\r\n          <ComponentResponsive size={size} width={width} color={bannerParams.linkColor}>\r\n            {children}&nbsp;\r\n            {link && linkText && (\r\n              <HyperLink\r\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\r\n                onClick={(e) => {\r\n                  if (linkAction) {\r\n                    e.preventDefault();\r\n                    linkAction(e);\r\n                  }\r\n                }}\r\n                href={link}\r\n                variant=\"default\">\r\n                {linkText}\r\n              </HyperLink>\r\n            )}\r\n          </ComponentResponsive>\r\n        </BannerContentWrapperStyles>\r\n        {onClose && (\r\n          <BannerCloseButtonWrapperStyles>\r\n            <BannerCloseButtonContainerStyles $type={bannerParams.containerType}>\r\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={() => onClose()}>\r\n                <SystemIcons.Close color={bannerParams.closeIconColor} size=\"24px\" />\r\n              </IconButton>\r\n            </BannerCloseButtonContainerStyles>\r\n          </BannerCloseButtonWrapperStyles>\r\n        )}\r\n      </BannerCenterStyles>\r\n    </BannerContainerStyles>\r\n  );\r\n};\r\n\r\nexport default Banner;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Banners/Banner.d.ts

@@ -11,9 +11,8 @@ export type StyleBannerProps = BannerProps & {
 export declare const BannerContainerStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $link?: string;
     $bottom?: boolean;
-    $type: string;
-    $linkVisited: string;
-    $linkFocused: string;
+    $backgroundColor: string;
+    $linkActive: string;
 }>> & string;
 export declare const BannerCenterStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const BannerCloseButtonWrapperStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;