@laerdal/life-react-components 1.2.2-dev.23.full → 1.2.2-dev.24

package/dist/esm/styles/typography.js

@@ -363,11 +363,13 @@ const ComponentXLStyling = (textStyle, color) => ComponentStyling('24px', '28px'
 const ComponentXL = ({
   color,
   textStyle,
-  children
+  children,
+  className
 }) => {
   let fontWeight = componentFontWeight(textStyle);
   let fontStyle = componentFontStyle(textStyle);
   return /*#__PURE__*/React.createElement(TypographyBase, {
+    className: className,
     color: color,
     lineHeight: 28,
     fontSize: 24,
@@ -378,6 +380,7 @@ const ComponentXL = ({
 
 ComponentXL.propTypes = {
   color: _pt.string,
+  className: _pt.string,
   textStyle: _pt.oneOf([1, 2, 3, 4])
 };
 
@@ -386,11 +389,13 @@ const ComponentLStyling = (textStyle, color) => ComponentStyling('20px', '24px',
 const ComponentL = ({
   color,
   textStyle,
-  children
+  children,
+  className
 }) => {
   let fontWeight = componentFontWeight(textStyle);
   let fontStyle = componentFontStyle(textStyle);
   return /*#__PURE__*/React.createElement(TypographyBase, {
+    className: className,
     color: color,
     lineHeight: 24,
     fontSize: 20,
@@ -401,6 +406,7 @@ const ComponentL = ({
 
 ComponentL.propTypes = {
   color: _pt.string,
+  className: _pt.string,
   textStyle: _pt.oneOf([1, 2, 3, 4])
 };
 
@@ -409,11 +415,13 @@ const ComponentMStyling = (textStyle, color) => ComponentStyling('18px', '24px',
 const ComponentM = ({
   color,
   textStyle,
-  children
+  children,
+  className
 }) => {
   let fontWeight = componentFontWeight(textStyle);
   let fontStyle = componentFontStyle(textStyle);
   return /*#__PURE__*/React.createElement(TypographyBase, {
+    className: className,
     color: color,
     lineHeight: 24,
     fontSize: 18,
@@ -424,6 +432,7 @@ const ComponentM = ({
 
 ComponentM.propTypes = {
   color: _pt.string,
+  className: _pt.string,
   textStyle: _pt.oneOf([1, 2, 3, 4])
 };
 
@@ -432,11 +441,13 @@ const ComponentSStyling = (textStyle, color) => ComponentStyling('16px', '20px',
 const ComponentS = ({
   color,
   textStyle,
-  children
+  children,
+  className
 }) => {
   let fontWeight = componentFontWeight(textStyle);
   let fontStyle = componentFontStyle(textStyle);
   return /*#__PURE__*/React.createElement(TypographyBase, {
+    className: className,
     color: color,
     lineHeight: 20,
     fontSize: 16,
@@ -447,6 +458,7 @@ const ComponentS = ({
 
 ComponentS.propTypes = {
   color: _pt.string,
+  className: _pt.string,
   textStyle: _pt.oneOf([1, 2, 3, 4])
 };
 
@@ -455,12 +467,14 @@ const ComponentXSStyling = (textStyle, color) => ComponentStyling('14px', '16px'
 const ComponentXS = ({
   color,
   textStyle,
-  children
+  children,
+  className
 }) => {
   let fontWeight = componentFontWeight(textStyle);
   let fontStyle = componentFontStyle(textStyle);
   let textTransform = componentTextTransformation(textStyle);
   return /*#__PURE__*/React.createElement(TypographyBase, {
+    className: className,
     color: color,
     lineHeight: 16,
     fontSize: 14,
@@ -472,6 +486,7 @@ const ComponentXS = ({
 
 ComponentXS.propTypes = {
   color: _pt.string,
+  className: _pt.string,
   textStyle: _pt.oneOf([1, 2, 3, 4])
 };
 
@@ -480,12 +495,14 @@ const ComponentXXSStyling = (textStyle, color) => ComponentStyling('12px', '16px
 const ComponentXXS = ({
   color,
   textStyle,
-  children
+  children,
+  className
 }) => {
   let fontWeight = componentFontWeight(textStyle);
   let fontStyle = componentFontStyle(textStyle);
   let textTransform = componentTextTransformation(textStyle);
   return /*#__PURE__*/React.createElement(TypographyBase, {
+    className: className,
     color: color,
     lineHeight: 16,
     fontSize: 12,
@@ -497,6 +514,7 @@ const ComponentXXS = ({
 
 ComponentXXS.propTypes = {
   color: _pt.string,
+  className: _pt.string,
   textStyle: _pt.oneOf([1, 2, 3, 4])
 };
 
@@ -560,6 +578,7 @@ const ComponentResponsive = ({
 
 ComponentResponsive.propTypes = {
   color: _pt.string,
+  className: _pt.string,
   textStyle: _pt.oneOf([1, 2, 3, 4])
 };
 export { TYPOGRAPHY };

package/dist/esm/styles/typography.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/styles/typography.tsx"],"names":["React","styled","css","COLORS","Size","TYPOGRAPHY","fontFamily","TypographyBase","color","lineHeight","fontSize","fontWeight","fontStyle","textTransform","textDecorationLine","black","HeadlineBaseStyling","HeadlineBase","HeadlineXLStyling","HeadlineXL","HeadlineLStyling","HeadlineL","HeadlineMStyling","HeadlineM","HeadlineSStyling","HeadlineS","HeadlineXSStyling","HeadlineXS","HeadlineXXSStyling","HeadlineXXS","ParagraphStyling","ParagraphBase","props","marginBetweenParagraphs","ParagraphTextStyle","paragraphFontWeight","textStyle","Bold","paragraphFontStyle","Italic","paragraphTextDecorationLine","textDecoration","Underline","ParagraphBaseStyling","ParagraphXlStyling","ParagraphXL","children","ParagraphLStyling","ParagraphL","ParagraphMStyling","ParagraphM","ParagraphSStyling","ParagraphS","ParagraphXSStyling","ParagraphXS","ComponentTextStyle","componentFontWeight","UppercaseBold","componentFontStyle","componentTextTransformation","ComponentStyling","ComponentXLStyling","ComponentXL","ComponentLStyling","ComponentL","ComponentMStyling","ComponentM","ComponentSStyling","ComponentS","ComponentXSStyling","ComponentXS","ComponentXXSStyling","ComponentXXS","ComponentResponsive","size","width","fontsize","Small","Medium","Large","XXSmall","XSmall"],"mappings":"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","sourcesContent":["import React, { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { COLORS } from '.';\nimport { Property } from 'csstype';\nimport { Size } from '../types';\n\nconst TYPOGRAPHY = {\n  fontFamily: 'Lato, sans-serif',\n};\n\ninterface ITypographyBase {\n  color?: string;\n  lineHeight: number;\n  fontSize: number;\n  fontWeight: number;\n  fontStyle?: string;\n  textTransform?: Property.TextTransform;\n  textDecorationLine?: Property.TextDecorationLine;\n}\n\nconst TypographyBase = styled('div')<ITypographyBase>(({ color, lineHeight, fontSize, fontWeight, fontStyle, textTransform, textDecorationLine }) => ({\n  fontFamily: TYPOGRAPHY.fontFamily,\n  fontSize: fontSize,\n  fontWeight: fontWeight,\n  lineHeight: lineHeight + 'px',\n  textTransform: textTransform ? textTransform : 'none',\n  textDecorationLine: textDecorationLine ? textDecorationLine : 'none',\n  fontStyle: fontStyle ? fontStyle : 'normal',\n  color: color ? color : COLORS.black,\n}));\n\ninterface IHeadline {\n  color?: string;\n}\n\ninterface IHeadlineBase {\n  color?: string;\n  lineHeight: number;\n  fontSize: number;\n}\n\nconst HeadlineBaseStyling = (fontSize: string, lineHeight: string, color: string) => {\n  return css`\n    font-family: ${TYPOGRAPHY.fontFamily};\n    font-size: ${fontSize};\n    line-height: ${lineHeight};\n    font-weight: 700;\n    color: ${color};\n  `;\n}\nconst HeadlineBase = styled(TypographyBase)<IHeadlineBase>(({ color, lineHeight, fontSize }) => ({\n  fontSize: fontSize,\n  fontWeight: 700,\n  lineHeight: lineHeight,\n  color: color,\n}));\n\nconst HeadlineXLStyling = (color: string) => HeadlineBaseStyling('48px', '64px', color);\nconst HeadlineXL = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n  fontSize: '48px',\n  lineHeight: '64px',\n  color: color,\n}));\n\nconst HeadlineLStyling = (color: string) => HeadlineBaseStyling('40px', '52px', color);\nconst HeadlineL = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n  fontSize: '40px',\n  lineHeight: '52px',\n  color: color,\n}));\n\nconst HeadlineMStyling = (color: string) => HeadlineBaseStyling('32px', '40px', color);\nconst HeadlineM = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n  fontSize: '32px',\n  lineHeight: '40px',\n  color: color,\n}));\n\nconst HeadlineSStyling = (color: string) => HeadlineBaseStyling('28px', '36px', color);\nconst HeadlineS = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n  fontSize: '28px',\n  lineHeight: '36px',\n  color: color,\n}));\n\nconst HeadlineXSStyling = (color: string) => HeadlineBaseStyling('24px', '32px', color);\nconst HeadlineXS = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n  fontSize: '24px',\n  lineHeight: '32px',\n  color: color,\n}));\n\nconst HeadlineXXSStyling = (color: string) => HeadlineBaseStyling('20px', '24px', color);\nconst HeadlineXXS = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n  fontSize: '20px',\n  lineHeight: '24px',\n  color: color,\n}));\n\nconst ParagraphStyling = css`\n  :lang(ja-jp) > h1,\n  h2,\n  h3,\n  h4,\n  p,\n  span {\n    max-width: 30em;\n  }\n  :lang(ko-kr) > h1,\n  h2,\n  h3,\n  h4,\n  p,\n  span {\n    max-width: 30em;\n  }\n  :lang(zh-CN) > h1,\n  h2,\n  h3,\n  h4,\n  p,\n  span {\n    max-width: 30em;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  p,\n  span {\n    max-width: 34em;\n  }\n`;\n\ninterface IParagraphBase {\n  color?: string;\n  lineHeight: number;\n  fontSize: number;\n  marginBetweenParagraphs?: string;\n}\n\nconst ParagraphBase = styled(TypographyBase)<IParagraphBase>`\n  p {\n    margin-block-start: 0;\n    margin-block-end: 0;\n  }\n  p:not(:only-of-type) {\n    margin-bottom: ${(props) => props.marginBetweenParagraphs || '0'};\n  }\n  ${ParagraphStyling}\n`;\n\ninterface IParagraph {\n  color?: string;\n}\n\nenum ParagraphTextStyle {\n  Regular = 1,\n  Bold,\n  Italic,\n  Underline,\n}\n\ntype ParagraphProps = {\n  color?: string;\n  textStyle?: ParagraphTextStyle;\n};\n\nconst paragraphFontWeight = (textStyle?: ParagraphTextStyle) => {\n  let fontWeight = 400;\n  if (textStyle === ParagraphTextStyle.Bold) {\n    fontWeight = 700;\n  }\n  return fontWeight;\n};\n\nconst paragraphFontStyle = (textStyle?: ParagraphTextStyle) => {\n  let fontStyle = textStyle && textStyle === ParagraphTextStyle.Italic ? 'italic' : '';\n  return fontStyle;\n};\n\nconst paragraphTextDecorationLine = (textStyle?: ParagraphTextStyle): Property.TextDecorationLine => {\n  let textDecoration: Property.TextDecorationLine = textStyle && textStyle === ParagraphTextStyle.Underline ? 'underline' : 'none';\n  return textDecoration;\n};\n\nconst ParagraphBaseStyling = (fontSize: string, lineHeight: string, textStyle: ParagraphTextStyle, color: string) => {\n  return css`\n    font-family: ${TYPOGRAPHY.fontFamily};\n    font-size: ${fontSize};\n    font-weight: ${paragraphFontWeight(textStyle)};\n    line-height: ${lineHeight};\n    font-style: ${paragraphFontStyle(textStyle)};\n    color: ${color};\n  `;\n}\n\nconst ParagraphXlStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('24px', '36px', textStyle, color);\nconst ParagraphXL: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={36} fontSize={24} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"18px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphLStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('20px', '32px', textStyle, color);\nconst ParagraphL: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={32} fontSize={20} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"16px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphMStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('18px', '28px', textStyle, color);\nconst ParagraphM: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={28} fontSize={18} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"14px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphSStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('16px', '24px', textStyle, color);\nconst ParagraphS: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={24} fontSize={16} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"12px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphXSStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('14px', '20px', textStyle, color);\nconst ParagraphXS: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={20} fontSize={14} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"10px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nenum ComponentTextStyle {\n  Regular = 1,\n  Bold,\n  Italic,\n  UppercaseBold,\n}\n\ntype ComponentProps = {\n  color?: string;\n  textStyle?: ComponentTextStyle;\n};\n\nconst componentFontWeight = (textStyle?: ComponentTextStyle) => {\n  let fontWeight = 400;\n  if (textStyle === ComponentTextStyle.Bold || textStyle === ComponentTextStyle.UppercaseBold) {\n    fontWeight = 700;\n  }\n  return fontWeight;\n};\n\nconst componentFontStyle = (textStyle?: ComponentTextStyle) => {\n  let fontStyle = textStyle && textStyle === ComponentTextStyle.Italic ? 'italic' : '';\n  return fontStyle;\n};\n\nconst componentTextTransformation = (textStyle?: ComponentTextStyle): Property.TextTransform => {\n  let fontStyle: Property.TextTransform = textStyle && textStyle === ComponentTextStyle.UppercaseBold ? 'uppercase' : 'none';\n  return fontStyle;\n};\n\nconst ComponentStyling = (fontSize: string, lineHeight: string, textStyle: ComponentTextStyle, color: string | undefined | null) => {\n  return css`\n    font-family: ${TYPOGRAPHY.fontFamily};\n    font-size: ${fontSize};\n    font-weight: ${componentFontWeight(textStyle)};\n    line-height: ${lineHeight};\n    font-style: ${componentFontStyle(textStyle)};\n    ${color === null ? '' : `color: ${(color || COLORS.black)};`}\n  `;\n};\n\nconst ComponentXLStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('24px', '28px', textStyle, color);\nconst ComponentXL: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase color={color} lineHeight={28} fontSize={24} fontWeight={fontWeight} fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentLStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('20px', '24px', textStyle, color);\nconst ComponentL: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase color={color} lineHeight={24} fontSize={20} fontWeight={fontWeight} fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentMStyling = (textStyle: ComponentTextStyle, color: string | undefined | null) => ComponentStyling('18px', '24px', textStyle, color);\nconst ComponentM: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase color={color} lineHeight={24} fontSize={18} fontWeight={fontWeight} fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentSStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('16px', '20px', textStyle, color);\nconst ComponentS: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase color={color} lineHeight={20} fontSize={16} fontWeight={fontWeight} fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentXSStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('14px', '16px', textStyle, color);\nconst ComponentXS: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  let textTransform = componentTextTransformation(textStyle);\n  return (\n    <TypographyBase color={color} lineHeight={16} fontSize={14} fontWeight={fontWeight} fontStyle={fontStyle} textTransform={textTransform}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentXXSStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('12px', '16px', textStyle, color);\nconst ComponentXXS: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  let textTransform = componentTextTransformation(textStyle);\n  return (\n    <TypographyBase color={color} lineHeight={16} fontSize={12} fontWeight={fontWeight} fontStyle={fontStyle} textTransform={textTransform}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentResponsive: FunctionComponent<ComponentProps & { size?: Size; width: number }> = ({\n  color,\n  textStyle,\n  children,\n  size,\n  width,\n}) => {\n  let fontsize = size;\n  if (!size) {\n    if (width < 768) {\n      fontsize = Size.Small;\n    } else if (width < 992) {\n      fontsize = Size.Medium;\n    } else {\n      fontsize = Size.Large;\n    }\n  }\n  switch (fontsize) {\n    case Size.XXSmall:\n      return <ComponentXXS color={color} textStyle={textStyle} children={children} />;\n    case Size.XSmall:\n      return <ComponentXS color={color} textStyle={textStyle} children={children} />;\n    case Size.Small:\n      return <ComponentS color={color} textStyle={textStyle} children={children} />;\n    case Size.Medium:\n      return <ComponentM color={color} textStyle={textStyle} children={children} />;\n    case Size.Large:\n    default:\n      return <ComponentL color={color} textStyle={textStyle} children={children} />;\n  }\n};\n\nexport { TYPOGRAPHY };\nexport { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS };\nexport { ParagraphTextStyle, ParagraphXL, ParagraphL, ParagraphM, ParagraphS, ParagraphXS };\nexport { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS, ComponentResponsive };\nexport { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling };\nexport { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling };\nexport { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling };\n"],"file":"typography.js"}
+{"version":3,"sources":["../../../src/styles/typography.tsx"],"names":["React","styled","css","COLORS","Size","TYPOGRAPHY","fontFamily","TypographyBase","color","lineHeight","fontSize","fontWeight","fontStyle","textTransform","textDecorationLine","black","HeadlineBaseStyling","HeadlineBase","HeadlineXLStyling","HeadlineXL","HeadlineLStyling","HeadlineL","HeadlineMStyling","HeadlineM","HeadlineSStyling","HeadlineS","HeadlineXSStyling","HeadlineXS","HeadlineXXSStyling","HeadlineXXS","ParagraphStyling","ParagraphBase","props","marginBetweenParagraphs","ParagraphTextStyle","paragraphFontWeight","textStyle","Bold","paragraphFontStyle","Italic","paragraphTextDecorationLine","textDecoration","Underline","ParagraphBaseStyling","ParagraphXlStyling","ParagraphXL","children","ParagraphLStyling","ParagraphL","ParagraphMStyling","ParagraphM","ParagraphSStyling","ParagraphS","ParagraphXSStyling","ParagraphXS","ComponentTextStyle","componentFontWeight","UppercaseBold","componentFontStyle","componentTextTransformation","ComponentStyling","ComponentXLStyling","ComponentXL","className","ComponentLStyling","ComponentL","ComponentMStyling","ComponentM","ComponentSStyling","ComponentS","ComponentXSStyling","ComponentXS","ComponentXXSStyling","ComponentXXS","ComponentResponsive","size","width","fontsize","Small","Medium","Large","XXSmall","XSmall"],"mappings":"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","sourcesContent":["import React, { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { COLORS } from '.';\nimport { Property } from 'csstype';\nimport { Size } from '../types';\n\nconst TYPOGRAPHY = {\n  fontFamily: 'Lato, sans-serif',\n};\n\ninterface ITypographyBase {\n  color?: string;\n  lineHeight: number;\n  fontSize: number;\n  fontWeight: number;\n  fontStyle?: string;\n  textTransform?: Property.TextTransform;\n  textDecorationLine?: Property.TextDecorationLine;\n}\n\nconst TypographyBase = styled('div')<ITypographyBase>(({ color, lineHeight, fontSize, fontWeight, fontStyle, textTransform, textDecorationLine }) => ({\n  fontFamily: TYPOGRAPHY.fontFamily,\n  fontSize: fontSize,\n  fontWeight: fontWeight,\n  lineHeight: lineHeight + 'px',\n  textTransform: textTransform ? textTransform : 'none',\n  textDecorationLine: textDecorationLine ? textDecorationLine : 'none',\n  fontStyle: fontStyle ? fontStyle : 'normal',\n  color: color ? color : COLORS.black,\n}));\n\ninterface IHeadline {\n  color?: string;\n}\n\ninterface IHeadlineBase {\n  color?: string;\n  lineHeight: number;\n  fontSize: number;\n}\n\nconst HeadlineBaseStyling = (fontSize: string, lineHeight: string, color: string) => {\n  return css`\n    font-family: ${TYPOGRAPHY.fontFamily};\n    font-size: ${fontSize};\n    line-height: ${lineHeight};\n    font-weight: 700;\n    color: ${color};\n  `;\n}\nconst HeadlineBase = styled(TypographyBase)<IHeadlineBase>(({ color, lineHeight, fontSize }) => ({\n  fontSize: fontSize,\n  fontWeight: 700,\n  lineHeight: lineHeight,\n  color: color,\n}));\n\nconst HeadlineXLStyling = (color: string) => HeadlineBaseStyling('48px', '64px', color);\nconst HeadlineXL = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n  fontSize: '48px',\n  lineHeight: '64px',\n  color: color,\n}));\n\nconst HeadlineLStyling = (color: string) => HeadlineBaseStyling('40px', '52px', color);\nconst HeadlineL = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n  fontSize: '40px',\n  lineHeight: '52px',\n  color: color,\n}));\n\nconst HeadlineMStyling = (color: string) => HeadlineBaseStyling('32px', '40px', color);\nconst HeadlineM = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n  fontSize: '32px',\n  lineHeight: '40px',\n  color: color,\n}));\n\nconst HeadlineSStyling = (color: string) => HeadlineBaseStyling('28px', '36px', color);\nconst HeadlineS = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n  fontSize: '28px',\n  lineHeight: '36px',\n  color: color,\n}));\n\nconst HeadlineXSStyling = (color: string) => HeadlineBaseStyling('24px', '32px', color);\nconst HeadlineXS = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n  fontSize: '24px',\n  lineHeight: '32px',\n  color: color,\n}));\n\nconst HeadlineXXSStyling = (color: string) => HeadlineBaseStyling('20px', '24px', color);\nconst HeadlineXXS = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n  fontSize: '20px',\n  lineHeight: '24px',\n  color: color,\n}));\n\nconst ParagraphStyling = css`\n  :lang(ja-jp) > h1,\n  h2,\n  h3,\n  h4,\n  p,\n  span {\n    max-width: 30em;\n  }\n  :lang(ko-kr) > h1,\n  h2,\n  h3,\n  h4,\n  p,\n  span {\n    max-width: 30em;\n  }\n  :lang(zh-CN) > h1,\n  h2,\n  h3,\n  h4,\n  p,\n  span {\n    max-width: 30em;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  p,\n  span {\n    max-width: 34em;\n  }\n`;\n\ninterface IParagraphBase {\n  color?: string;\n  lineHeight: number;\n  fontSize: number;\n  marginBetweenParagraphs?: string;\n}\n\nconst ParagraphBase = styled(TypographyBase)<IParagraphBase>`\n  p {\n    margin-block-start: 0;\n    margin-block-end: 0;\n  }\n  p:not(:only-of-type) {\n    margin-bottom: ${(props) => props.marginBetweenParagraphs || '0'};\n  }\n  ${ParagraphStyling}\n`;\n\ninterface IParagraph {\n  color?: string;\n}\n\nenum ParagraphTextStyle {\n  Regular = 1,\n  Bold,\n  Italic,\n  Underline,\n}\n\ntype ParagraphProps = {\n  color?: string;\n  textStyle?: ParagraphTextStyle;\n};\n\nconst paragraphFontWeight = (textStyle?: ParagraphTextStyle) => {\n  let fontWeight = 400;\n  if (textStyle === ParagraphTextStyle.Bold) {\n    fontWeight = 700;\n  }\n  return fontWeight;\n};\n\nconst paragraphFontStyle = (textStyle?: ParagraphTextStyle) => {\n  let fontStyle = textStyle && textStyle === ParagraphTextStyle.Italic ? 'italic' : '';\n  return fontStyle;\n};\n\nconst paragraphTextDecorationLine = (textStyle?: ParagraphTextStyle): Property.TextDecorationLine => {\n  let textDecoration: Property.TextDecorationLine = textStyle && textStyle === ParagraphTextStyle.Underline ? 'underline' : 'none';\n  return textDecoration;\n};\n\nconst ParagraphBaseStyling = (fontSize: string, lineHeight: string, textStyle: ParagraphTextStyle, color: string) => {\n  return css`\n    font-family: ${TYPOGRAPHY.fontFamily};\n    font-size: ${fontSize};\n    font-weight: ${paragraphFontWeight(textStyle)};\n    line-height: ${lineHeight};\n    font-style: ${paragraphFontStyle(textStyle)};\n    color: ${color};\n  `;\n}\n\nconst ParagraphXlStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('24px', '36px', textStyle, color);\nconst ParagraphXL: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={36} fontSize={24} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"18px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphLStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('20px', '32px', textStyle, color);\nconst ParagraphL: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={32} fontSize={20} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"16px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphMStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('18px', '28px', textStyle, color);\nconst ParagraphM: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={28} fontSize={18} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"14px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphSStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('16px', '24px', textStyle, color);\nconst ParagraphS: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={24} fontSize={16} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"12px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphXSStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('14px', '20px', textStyle, color);\nconst ParagraphXS: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={20} fontSize={14} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"10px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nenum ComponentTextStyle {\n  Regular = 1,\n  Bold,\n  Italic,\n  UppercaseBold,\n}\n\ntype ComponentProps = {\n  color?: string;\n  className?: string;\n  textStyle?: ComponentTextStyle;\n};\n\nconst componentFontWeight = (textStyle?: ComponentTextStyle) => {\n  let fontWeight = 400;\n  if (textStyle === ComponentTextStyle.Bold || textStyle === ComponentTextStyle.UppercaseBold) {\n    fontWeight = 700;\n  }\n  return fontWeight;\n};\n\nconst componentFontStyle = (textStyle?: ComponentTextStyle) => {\n  let fontStyle = textStyle && textStyle === ComponentTextStyle.Italic ? 'italic' : '';\n  return fontStyle;\n};\n\nconst componentTextTransformation = (textStyle?: ComponentTextStyle): Property.TextTransform => {\n  let fontStyle: Property.TextTransform = textStyle && textStyle === ComponentTextStyle.UppercaseBold ? 'uppercase' : 'none';\n  return fontStyle;\n};\n\nconst ComponentStyling = (fontSize: string, lineHeight: string, textStyle: ComponentTextStyle, color: string | undefined | null) => {\n  return css`\n    font-family: ${TYPOGRAPHY.fontFamily};\n    font-size: ${fontSize};\n    font-weight: ${componentFontWeight(textStyle)};\n    line-height: ${lineHeight};\n    font-style: ${componentFontStyle(textStyle)};\n    ${color === null ? '' : `color: ${(color || COLORS.black)};`}\n  `;\n};\n\nconst ComponentXLStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('24px', '28px', textStyle, color);\nconst ComponentXL: FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase className={className} color={color} lineHeight={28} fontSize={24} fontWeight={fontWeight} fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentLStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('20px', '24px', textStyle, color);\nconst ComponentL: FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase className={className} color={color} lineHeight={24} fontSize={20} fontWeight={fontWeight} fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentMStyling = (textStyle: ComponentTextStyle, color: string | undefined | null) => ComponentStyling('18px', '24px', textStyle, color);\nconst ComponentM: FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase className={className} color={color} lineHeight={24} fontSize={18} fontWeight={fontWeight} fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentSStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('16px', '20px', textStyle, color);\nconst ComponentS: FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase className={className} color={color} lineHeight={20} fontSize={16} fontWeight={fontWeight} fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentXSStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('14px', '16px', textStyle, color);\nconst ComponentXS: FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  let textTransform = componentTextTransformation(textStyle);\n  return (\n    <TypographyBase className={className} color={color} lineHeight={16} fontSize={14} fontWeight={fontWeight} fontStyle={fontStyle} textTransform={textTransform}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentXXSStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('12px', '16px', textStyle, color);\nconst ComponentXXS: FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  let textTransform = componentTextTransformation(textStyle);\n  return (\n    <TypographyBase className={className} color={color} lineHeight={16} fontSize={12} fontWeight={fontWeight} fontStyle={fontStyle} textTransform={textTransform}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentResponsive: FunctionComponent<ComponentProps & { size?: Size; width: number }> = ({\n  color,\n  textStyle,\n  children,\n  size,\n  width,\n}) => {\n  let fontsize = size;\n  if (!size) {\n    if (width < 768) {\n      fontsize = Size.Small;\n    } else if (width < 992) {\n      fontsize = Size.Medium;\n    } else {\n      fontsize = Size.Large;\n    }\n  }\n  switch (fontsize) {\n    case Size.XXSmall:\n      return <ComponentXXS color={color} textStyle={textStyle} children={children} />;\n    case Size.XSmall:\n      return <ComponentXS color={color} textStyle={textStyle} children={children} />;\n    case Size.Small:\n      return <ComponentS color={color} textStyle={textStyle} children={children} />;\n    case Size.Medium:\n      return <ComponentM color={color} textStyle={textStyle} children={children} />;\n    case Size.Large:\n    default:\n      return <ComponentL color={color} textStyle={textStyle} children={children} />;\n  }\n};\n\nexport { TYPOGRAPHY };\nexport { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS };\nexport { ParagraphTextStyle, ParagraphXL, ParagraphL, ParagraphM, ParagraphS, ParagraphXS };\nexport { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS, ComponentResponsive };\nexport { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling };\nexport { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling };\nexport { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling };\n"],"file":"typography.js"}

package/dist/js/Accordion/AccordionItem.js

@@ -17,6 +17,18 @@ var _styles = require("./styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 var AccordionItem = function AccordionItem(props) {
   var id = props.id,
       onSelect = props.onSelect,
@@ -25,6 +37,18 @@ var AccordionItem = function AccordionItem(props) {
       icon = props.icon,
       disabled = props.disabled,
       isLast = props.isLast;
+
+  var supressFocusRef = _react.default.useRef(null);
+
+  var _React$useState = _react.default.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      tabbedHere = _React$useState2[0],
+      setTabbedHere = _React$useState2[1];
+
+  _react.default.useEffect(function () {
+    !!disabled && setTabbedHere(false);
+  }, [disabled]);
+
   return /*#__PURE__*/_react.default.createElement(_styles.AccordionItemContainer, {
     id: id,
     displaySeparator: !isActive && !isLast,
@@ -36,15 +60,35 @@ var AccordionItem = function AccordionItem(props) {
         onSelect(id);
       }
     },
+    onKeyDown: function onKeyDown(e) {
+      if (e.key == 'Enter') onSelect(id);
+    },
+    onBlur: function onBlur() {
+      setTabbedHere(false);
+      supressFocusRef.current = false;
+    },
+    onFocus: function onFocus() {
+      if (!disabled) {
+        if (!supressFocusRef.current) setTabbedHere(true);else supressFocusRef.current = false;
+      }
+    },
+    onMouseDown: function onMouseDown() {
+      if (!disabled && !tabbedHere) supressFocusRef.current = true;
+    },
+    tabbedHere: tabbedHere,
+    isActive: isActive,
     isDisabled: disabled !== null && disabled !== void 0 ? disabled : false
   }, icon && /*#__PURE__*/_react.default.cloneElement(icon, {
     size: '24px'
   }), /*#__PURE__*/_react.default.createElement(_.ComponentM, {
-    color: disabled ? _.COLORS.neutral_300 : undefined
+    className: "headerLabel",
+    color: isActive ? _.COLORS.neutral_800 : disabled ? _.COLORS.neutral_300 : undefined
   }, title), isActive ? /*#__PURE__*/_react.default.createElement(_icons.SystemIcons.ChevronUp, {
-    size: "24px"
+    color: _.COLORS.neutral_800,
+    size: "20px"
   }) : /*#__PURE__*/_react.default.createElement(_icons.SystemIcons.ChevronDown, {
-    size: "24px"
+    color: _.COLORS.neutral_600,
+    size: "20px"
   })), isActive && /*#__PURE__*/_react.default.createElement(_styles.ItemBodyContainer, null, /*#__PURE__*/_react.default.createElement(_.ComponentS, null, props.children)));
 };
 

package/dist/js/Accordion/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Accordion/AccordionItem.tsx"],"names":["AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","React","cloneElement","size","COLORS","neutral_300","undefined","children"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;AAQA,IAAMA,aAA+D,GAAG,SAAlEA,aAAkE,CAACC,KAAD,EAAoC;AAC1G,MAAQC,EAAR,GAAkED,KAAlE,CAAQC,EAAR;AAAA,MAAYC,QAAZ,GAAkEF,KAAlE,CAAYE,QAAZ;AAAA,MAAsBC,QAAtB,GAAkEH,KAAlE,CAAsBG,QAAtB;AAAA,MAAgCC,KAAhC,GAAkEJ,KAAlE,CAAgCI,KAAhC;AAAA,MAAuCC,IAAvC,GAAkEL,KAAlE,CAAuCK,IAAvC;AAAA,MAA6CC,QAA7C,GAAkEN,KAAlE,CAA6CM,QAA7C;AAAA,MAAuDC,MAAvD,GAAkEP,KAAlE,CAAuDO,MAAvD;AACA,sBACE,6BAAC,8BAAD;AAAwB,IAAA,EAAE,EAAEN,EAA5B;AAAgC,IAAA,gBAAgB,EAAE,CAACE,QAAD,IAAa,CAACI,MAAhE;AAAwE,IAAA,UAAU,EAAED,QAAF,aAAEA,QAAF,cAAEA,QAAF,GAAc;AAAhG,kBACE,6BAAC,2BAAD;AACE,IAAA,QAAQ,EAAE,CAACA,QAAD,GAAY,CAAZ,GAAgB,CAAC,CAD7B;AAEE,IAAA,OAAO,EAAE,mBAAM;AACb,UAAI,CAACA,QAAL,EAAe;AACbJ,QAAAA,QAAQ,CAACD,EAAD,CAAR;AACD;AACF,KANH;AAOE,IAAA,UAAU,EAAEK,QAAF,aAAEA,QAAF,cAAEA,QAAF,GAAc;AAP1B,KAQGD,IAAI,iBAAIG,eAAMC,YAAN,CAAmBJ,IAAnB,EAA+C;AAAEK,IAAAA,IAAI,EAAE;AAAR,GAA/C,CARX,eASE,6BAAC,YAAD;AAAY,IAAA,KAAK,EAAEJ,QAAQ,GAAGK,SAAOC,WAAV,GAAwBC;AAAnD,KAA+DT,KAA/D,CATF,EAUGD,QAAQ,gBAAG,6BAAC,kBAAD,CAAa,SAAb;AAAuB,IAAA,IAAI,EAAC;AAA5B,IAAH,gBAA2C,6BAAC,kBAAD,CAAa,WAAb;AAAyB,IAAA,IAAI,EAAC;AAA9B,IAVtD,CADF,EAaGA,QAAQ,iBACP,6BAAC,yBAAD,qBACE,6BAAC,YAAD,QAAaH,KAAK,CAACc,QAAnB,CADF,CAdJ,CADF;AAqBD,CAvBD;;;AALEZ,EAAAA,Q;AACAC,EAAAA,Q;AACAI,EAAAA,M;;eA4BaR,a","sourcesContent":["import React from 'react';\nimport { COLORS, ComponentM, ComponentS } from '..';\nimport { SystemIcons } from '../icons';\nimport { AccordionItemProps } from './AccordionMenu';\nimport { AccordionItemContainer, HeaderIconContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n  onSelect: (id: string) => void;\n  isActive: boolean;\n  isLast: boolean;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n  const { id, onSelect, isActive, title, icon, disabled, isLast } = props;\n  return (\n    <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast} isDisabled={disabled ?? false}>\n      <ItemHeaderContainer\n        tabIndex={!disabled ? 0 : -1}\n        onClick={() => {\n          if (!disabled) {\n            onSelect(id);\n          }\n        }}\n        isDisabled={disabled ?? false}>\n        {icon && React.cloneElement(icon as React.ReactElement, { size: '24px' })}\n        <ComponentM color={disabled ? COLORS.neutral_300 : undefined}>{title}</ComponentM>\n        {isActive ? <SystemIcons.ChevronUp size=\"24px\" /> : <SystemIcons.ChevronDown size=\"24px\" />}\n      </ItemHeaderContainer>\n      {isActive && (\n        <ItemBodyContainer>\n          <ComponentS>{props.children}</ComponentS>\n        </ItemBodyContainer>\n      )}\n    </AccordionItemContainer>\n  );\n};\n\nexport default AccordionItem;\n"],"file":"AccordionItem.js"}
+{"version":3,"sources":["../../../src/Accordion/AccordionItem.tsx"],"names":["AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","supressFocusRef","React","useRef","useState","tabbedHere","setTabbedHere","useEffect","e","key","current","cloneElement","size","COLORS","neutral_800","neutral_300","undefined","neutral_600","children"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { COLORS, ComponentM, ComponentS } from '..';\nimport { SystemIcons } from '../icons';\nimport { AccordionItemProps } from './AccordionMenu';\nimport { AccordionItemContainer, HeaderIconContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n  onSelect: (id: string) => void;\n  isActive: boolean;\n  isLast: boolean;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n  const { id, onSelect, isActive, title, icon, disabled, isLast } = props;\n\n  const supressFocusRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  React.useEffect(() => {\n    !!disabled && setTabbedHere(false);\n  }, [disabled]);\n\n  return (\n    <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast} isDisabled={disabled ?? false}>\n      <ItemHeaderContainer\n        tabIndex={!disabled ? 0 : -1}\n        onClick={() => {\n          if (!disabled) {\n            onSelect(id);\n          }\n        }}\n        onKeyDown={(e: any) => {\n          if(e.key == 'Enter')\n            onSelect(id);\n        }}\n        onBlur={() => {\n          setTabbedHere(false);\n          supressFocusRef.current = false;\n        }}\n        onFocus={() => {\n          if(!disabled) {\n            if (!supressFocusRef.current) setTabbedHere(true);\n            else supressFocusRef.current = false;\n          }\n        }}\n        onMouseDown={() => {\n          if (!disabled && !tabbedHere) supressFocusRef.current = true;\n        }}\n        tabbedHere={tabbedHere}\n        isActive={isActive}\n        isDisabled={disabled ?? false}>\n        {icon && React.cloneElement(icon as React.ReactElement, { size: '24px' })}\n        <ComponentM className=\"headerLabel\" color={isActive ? COLORS.neutral_800 : disabled ? COLORS.neutral_300 : undefined}>{title}</ComponentM>\n        {isActive ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\" /> : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\" />}\n      </ItemHeaderContainer>\n      {isActive && (\n        <ItemBodyContainer>\n          <ComponentS>{props.children}</ComponentS>\n        </ItemBodyContainer>\n      )}\n    </AccordionItemContainer>\n  );\n};\n\nexport default AccordionItem;\n"],"file":"AccordionItem.js"}

package/dist/js/Accordion/AccordionMenu.d.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
 export interface AccordionProps {
     items: AccordionItemProps[];
-    selectedItemId?: string;
-    onSelect: (id: string) => void;
+    selectedItems?: string[];
+    setSelectedItems?: (a: string[]) => void;
+    onSelect?: (id: string) => void;
+    multipleActive?: boolean;
 }
 export interface AccordionItemProps {
     id: string;

package/dist/js/Accordion/AccordionMenu.js

@@ -21,10 +21,62 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 var AccordionMenu = function AccordionMenu(_ref) {
   var items = _ref.items,
-      selectedItemId = _ref.selectedItemId,
-      onSelect = _ref.onSelect;
+      selectedItems = _ref.selectedItems,
+      setSelectedItems = _ref.setSelectedItems,
+      onSelect = _ref.onSelect,
+      multipleActive = _ref.multipleActive;
+
+  var _React$useState = React.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      builtinSelectedItems = _React$useState2[0],
+      builtinSetSelectedItems = _React$useState2[1];
+
+  var getCollection = function getCollection() {
+    return selectedItems ? selectedItems : builtinSelectedItems;
+  };
+
+  var getUpdateFunction = function getUpdateFunction() {
+    return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;
+  };
+
+  var onSelected = function onSelected(id) {
+    var collection = getCollection();
+    var updateFunc = getUpdateFunction();
+    var isActive = !!collection.find(function (x) {
+      return x == id;
+    });
+
+    if (multipleActive) {
+      if (isActive) updateFunc(collection.filter(function (x) {
+        return x != id;
+      }));else updateFunc([].concat(_toConsumableArray(collection), [id]));
+    } else updateFunc(isActive ? [] : [id]);
+
+    onSelect && onSelect(id);
+  };
+
   return /*#__PURE__*/React.createElement(_styles.AccordionMenuWrapper, null, items.map(function (item) {
     return /*#__PURE__*/React.createElement(_AccordionItem.default, {
       key: item.id,
@@ -32,9 +84,11 @@ var AccordionMenu = function AccordionMenu(_ref) {
       id: item.id,
       title: item.title,
       icon: item.icon,
-      isActive: item.id === selectedItemId,
+      isActive: !!getCollection().find(function (x) {
+        return x == item.id;
+      }),
       isLast: items.indexOf(item) === items.length - 1,
-      onSelect: onSelect
+      onSelect: onSelected
     }, item.children);
   }));
 };
@@ -47,8 +101,10 @@ AccordionMenu.propTypes = {
     icon: _propTypes.default.node,
     children: _propTypes.default.node.isRequired
   })).isRequired,
-  selectedItemId: _propTypes.default.string,
-  onSelect: _propTypes.default.func.isRequired
+  selectedItems: _propTypes.default.arrayOf(_propTypes.default.string),
+  setSelectedItems: _propTypes.default.func,
+  onSelect: _propTypes.default.func,
+  multipleActive: _propTypes.default.bool
 };
 var _default = AccordionMenu;
 exports.default = _default;

package/dist/js/Accordion/AccordionMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Accordion/AccordionMenu.tsx"],"names":["AccordionMenu","items","selectedItemId","onSelect","map","item","id","disabled","title","icon","indexOf","length","children"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAgBA,IAAMA,aAAsD,GAAG,SAAzDA,aAAyD,OAAyD;AAAA,MAAtDC,KAAsD,QAAtDA,KAAsD;AAAA,MAA/CC,cAA+C,QAA/CA,cAA+C;AAAA,MAA/BC,QAA+B,QAA/BA,QAA+B;AACtH,sBACE,oBAAC,4BAAD,QACGF,KAAK,CAACG,GAAN,CAAU,UAACC,IAAD;AAAA,wBACT,oBAAC,sBAAD;AACE,MAAA,GAAG,EAAEA,IAAI,CAACC,EADZ;AAEE,MAAA,QAAQ,EAAED,IAAI,CAACE,QAFjB;AAGE,MAAA,EAAE,EAAEF,IAAI,CAACC,EAHX;AAIE,MAAA,KAAK,EAAED,IAAI,CAACG,KAJd;AAKE,MAAA,IAAI,EAAEH,IAAI,CAACI,IALb;AAME,MAAA,QAAQ,EAAEJ,IAAI,CAACC,EAAL,KAAYJ,cANxB;AAOE,MAAA,MAAM,EAAED,KAAK,CAACS,OAAN,CAAcL,IAAd,MAAwBJ,KAAK,CAACU,MAAN,GAAe,CAPjD;AAQE,MAAA,QAAQ,EAAER;AARZ,OASGE,IAAI,CAACO,QATR,CADS;AAAA,GAAV,CADH,CADF;AAiBD,CAlBD;;;AAbEX,EAAAA,K;AAMAK,IAAAA,E;AACAC,IAAAA,Q;AACAC,IAAAA,K;AACAC,IAAAA,I;AACAG,IAAAA,Q;;AATAV,EAAAA,c;AACAC,EAAAA,Q;;eA+BaH,a","sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\n\nexport interface AccordionProps {\n  items: AccordionItemProps[];\n  selectedItemId?: string;\n  onSelect: (id: string) => void;\n}\n\nexport interface AccordionItemProps {\n  id: string;\n  disabled?: boolean;\n  title: string;\n  icon?: React.ReactNode;\n  children: React.ReactNode;\n}\n\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = ({ items, selectedItemId, onSelect }: AccordionProps) => {\n  return (\n    <AccordionMenuWrapper>\n      {items.map((item) => (\n        <AccordionItem\n          key={item.id}\n          disabled={item.disabled}\n          id={item.id}\n          title={item.title}\n          icon={item.icon}\n          isActive={item.id === selectedItemId}\n          isLast={items.indexOf(item) === items.length - 1}\n          onSelect={onSelect}>\n          {item.children}\n        </AccordionItem>\n      ))}\n    </AccordionMenuWrapper>\n  );\n};\n\nexport default AccordionMenu;\n"],"file":"AccordionMenu.js"}
+{"version":3,"sources":["../../../src/Accordion/AccordionMenu.tsx"],"names":["AccordionMenu","items","selectedItems","setSelectedItems","onSelect","multipleActive","React","useState","builtinSelectedItems","builtinSetSelectedItems","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","item","disabled","title","icon","indexOf","length","children"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,IAAMA,aAAsD,GAAG,SAAzDA,aAAyD,OAA0F;AAAA,MAAvFC,KAAuF,QAAvFA,KAAuF;AAAA,MAAhFC,aAAgF,QAAhFA,aAAgF;AAAA,MAAjEC,gBAAiE,QAAjEA,gBAAiE;AAAA,MAA/CC,QAA+C,QAA/CA,QAA+C;AAAA,MAArCC,cAAqC,QAArCA,cAAqC;;AAEvJ,wBAAwDC,KAAK,CAACC,QAAN,CAAyB,EAAzB,CAAxD;AAAA;AAAA,MAAOC,oBAAP;AAAA,MAA6BC,uBAA7B;;AAEA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,GAAM;AAC1B,WAAOR,aAAa,GAAGA,aAAH,GAAmBM,oBAAvC;AACD,GAFD;;AAIA,MAAMG,iBAAiB,GAAG,SAApBA,iBAAoB,GAAM;AAC9B,WAAOR,gBAAgB,GAAGA,gBAAH,GAAsBM,uBAA7C;AACD,GAFD;;AAIA,MAAMG,UAAU,GAAG,SAAbA,UAAa,CAACC,EAAD,EAAgB;AACjC,QAAMC,UAAU,GAAGJ,aAAa,EAAhC;AACA,QAAMK,UAAU,GAAGJ,iBAAiB,EAApC;AAEA,QAAMK,QAAQ,GAAG,CAAC,CAACF,UAAU,CAACG,IAAX,CAAgB,UAAAC,CAAC;AAAA,aAAIA,CAAC,IAAIL,EAAT;AAAA,KAAjB,CAAnB;;AACA,QAAGR,cAAH,EAAmB;AACjB,UAAGW,QAAH,EACED,UAAU,CAACD,UAAU,CAACK,MAAX,CAAkB,UAAAD,CAAC;AAAA,eAAIA,CAAC,IAAIL,EAAT;AAAA,OAAnB,CAAD,CAAV,CADF,KAIEE,UAAU,8BAAKD,UAAL,IAAiBD,EAAjB,GAAV;AACH,KAND,MAQEE,UAAU,CAACC,QAAQ,GAAG,EAAH,GAAQ,CAACH,EAAD,CAAjB,CAAV;;AAEFT,IAAAA,QAAQ,IAAIA,QAAQ,CAACS,EAAD,CAApB;AACD,GAhBD;;AAkBA,sBACE,oBAAC,4BAAD,QACGZ,KAAK,CAACmB,GAAN,CAAU,UAACC,IAAD;AAAA,wBACT,oBAAC,sBAAD;AACE,MAAA,GAAG,EAAEA,IAAI,CAACR,EADZ;AAEE,MAAA,QAAQ,EAAEQ,IAAI,CAACC,QAFjB;AAGE,MAAA,EAAE,EAAED,IAAI,CAACR,EAHX;AAIE,MAAA,KAAK,EAAEQ,IAAI,CAACE,KAJd;AAKE,MAAA,IAAI,EAAEF,IAAI,CAACG,IALb;AAME,MAAA,QAAQ,EAAE,CAAC,CAACd,aAAa,GAAGO,IAAhB,CAAqB,UAAAC,CAAC;AAAA,eAAIA,CAAC,IAAIG,IAAI,CAACR,EAAd;AAAA,OAAtB,CANd;AAOE,MAAA,MAAM,EAAEZ,KAAK,CAACwB,OAAN,CAAcJ,IAAd,MAAwBpB,KAAK,CAACyB,MAAN,GAAe,CAPjD;AAQE,MAAA,QAAQ,EAAEd;AARZ,OASGS,IAAI,CAACM,QATR,CADS;AAAA,GAAV,CADH,CADF;AAiBD,CA/CD;;;AAfE1B,EAAAA,K;AAQAY,IAAAA,E;AACAS,IAAAA,Q;AACAC,IAAAA,K;AACAC,IAAAA,I;AACAG,IAAAA,Q;;AAXAzB,EAAAA,a;AACAC,EAAAA,gB;AACAC,EAAAA,Q;AACAC,EAAAA,c;;eA4DaL,a","sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\n\nexport interface AccordionProps {\n  items: AccordionItemProps[];\n  selectedItems?: string[];\n  setSelectedItems?: (a: string[]) => void;\n  onSelect?: (id: string) => void;\n  multipleActive?: boolean;\n}\n\nexport interface AccordionItemProps {\n  id: string;\n  disabled?: boolean;\n  title: string;\n  icon?: React.ReactNode;\n  children: React.ReactNode;\n}\n\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = ({ items, selectedItems, setSelectedItems, onSelect, multipleActive }: AccordionProps) => {\n\n  const [builtinSelectedItems, builtinSetSelectedItems] = React.useState<string[]>([]);\n\n  const getCollection = () => {\n    return selectedItems ? selectedItems : builtinSelectedItems;\n  };\n\n  const getUpdateFunction = () => {\n    return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;\n  }\n\n  const onSelected = (id: string) => {\n    const collection = getCollection();\n    const updateFunc = getUpdateFunction();\n\n    const isActive = !!collection.find(x => x == id);\n    if(multipleActive) {\n      if(isActive)\n        updateFunc(collection.filter(x => x != id));\n      \n      else \n        updateFunc([...collection, id]);\n    }\n    else\n      updateFunc(isActive ? [] : [id]);\n\n    onSelect && onSelect(id);\n  };\n\n  return (\n    <AccordionMenuWrapper>\n      {items.map((item) => (\n        <AccordionItem\n          key={item.id}\n          disabled={item.disabled}\n          id={item.id}\n          title={item.title}\n          icon={item.icon}\n          isActive={!!getCollection().find(x => x == item.id)}\n          isLast={items.indexOf(item) === items.length - 1}\n          onSelect={onSelected}>\n          {item.children}\n        </AccordionItem>\n      ))}\n    </AccordionMenuWrapper>\n  );\n};\n\nexport default AccordionMenu;\n"],"file":"AccordionMenu.js"}

package/dist/js/Accordion/__tests__/AccordionMenu.test.js

@@ -83,7 +83,7 @@ describe('<AccordionMenu />', function () {
             _render3 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_AccordionMenu.default, {
               items: accordionItems,
               onSelect: function onSelect() {},
-              selectedItemId: 'test1_id'
+              selectedItems: ['test1_id']
             })), container = _render3.container;
             headerItem = container.querySelector('#test1_id'); //check item expanded
 

package/dist/js/Accordion/__tests__/AccordionMenu.test.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Accordion/__tests__/AccordionMenu.test.tsx"],"names":["accordionItems","id","title","children","describe","it","queryByText","expect","toBeDefined","toBeNull","container","headerItem","querySelector","toHaveStyleRule","COLORS","neutral_20","textContent","toContain"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA,IAAMA,cAAc,GAAG,CACrB;AACEC,EAAAA,EAAE,EAAE,UADN;AAEEC,EAAAA,KAAK,EAAE,wBAFT;AAGEC,EAAAA,QAAQ,eAAE;AAHZ,CADqB,EAMrB;AACEF,EAAAA,EAAE,EAAE,UADN;AAEEC,EAAAA,KAAK,EAAE,wBAFT;AAGEC,EAAAA,QAAQ,eAAE;AAHZ,CANqB,CAAvB;AAaAC,QAAQ,CAAC,mBAAD,EAAsB,YAAM;AAClCC,EAAAA,EAAE,CAAC,qCAAD,uEAAwC;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,sBAChB,kCAAO,6BAAC,sBAAD;AAAe,cAAA,KAAK,EAAEL,cAAtB;AAAsC,cAAA,QAAQ,EAAE,oBAAM,CAAE;AAAxD,cAAP,CADgB,EAChCM,WADgC,WAChCA,WADgC;AAExCC,YAAAA,MAAM,CAACD,WAAW,CAAC,wBAAD,CAAZ,CAAN,CAA8CE,WAA9C;AACAD,YAAAA,MAAM,CAACD,WAAW,CAAC,wBAAD,CAAZ,CAAN,CAA8CE,WAA9C;AACAD,YAAAA,MAAM,CAACD,WAAW,CAAC,eAAD,CAAZ,CAAN,CAAqCG,QAArC;;AAJwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAAxC,GAAF;AAOAJ,EAAAA,EAAE,CAAC,0CAAD,uEAA6C;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,uBACvB,kCAAO,6BAAC,sBAAD;AAAe,cAAA,KAAK,EAAEL,cAAtB;AAAsC,cAAA,QAAQ,EAAE,oBAAM,CAAE;AAAxD,cAAP,CADuB,EACrCU,SADqC,YACrCA,SADqC;AAEvCC,YAAAA,UAFuC,GAE1BD,SAAS,CAACE,aAAV,CAAwB,WAAxB,CAF0B;AAG7CL,YAAAA,MAAM,CAACI,UAAD,CAAN,CAAmBH,WAAnB;AACAD,YAAAA,MAAM,CAACI,UAAD,aAACA,UAAD,uBAACA,UAAU,CAAER,QAAZ,CAAqB,CAArB,CAAD,CAAN,CAAgCU,eAAhC,CAAgD,YAAhD,EAA8DC,eAAOC,UAArE;AACAR,YAAAA,MAAM,CAACI,UAAD,aAACA,UAAD,uBAACA,UAAU,CAAEK,WAAb,CAAN,CAAgCC,SAAhC,CAA0C,wBAA1C;;AAL6C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAA7C,GAAF;AAQAZ,EAAAA,EAAE,CAAC,0BAAD,uEAA6B;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,uBACP,kCAAO,6BAAC,sBAAD;AAAe,cAAA,KAAK,EAAEL,cAAtB;AAAsC,cAAA,QAAQ,EAAE,oBAAM,CAAE,CAAxD;AAA0D,cAAA,cAAc,EAAE;AAA1E,cAAP,CADO,EACrBU,SADqB,YACrBA,SADqB;AAEvBC,YAAAA,UAFuB,GAEVD,SAAS,CAACE,aAAV,CAAwB,WAAxB,CAFU,EAG7B;;AACAL,YAAAA,MAAM,CAACI,UAAD,aAACA,UAAD,uBAACA,UAAU,CAAER,QAAZ,CAAqB,CAArB,CAAD,CAAN,CAAgCK,WAAhC;AACAD,YAAAA,MAAM,CAACI,UAAD,aAACA,UAAD,gDAACA,UAAU,CAAER,QAAZ,CAAqB,CAArB,CAAD,0DAAC,sBAAyBa,WAA1B,CAAN,CAA6CC,SAA7C,CAAuD,eAAvD;;AAL6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAA7B,GAAF;AAOD,CAvBO,CAAR","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport 'jest-styled-components';\nimport { COLORS } from '../../styles';\nimport AccordionMenu from '../AccordionMenu';\n\nconst accordionItems = [\n  {\n    id: 'test1_id',\n    title: 'Item label with text 1',\n    children: <div>content test1</div>,\n  },\n  {\n    id: 'test2_id',\n    title: 'Item label with text 2',\n    children: <div>content test2</div>,\n  },\n];\n\ndescribe('<AccordionMenu />', () => {\n  it('Check correct text placed on labels', async () => {\n    const { queryByText } = render(<AccordionMenu items={accordionItems} onSelect={() => {}}></AccordionMenu>);\n    expect(queryByText('Item label with text 1')).toBeDefined();\n    expect(queryByText('Item label with text 2')).toBeDefined();\n    expect(queryByText('content test1')).toBeNull();\n  });\n\n  it('Check item label element color and label', async () => {\n    const { container } = render(<AccordionMenu items={accordionItems} onSelect={() => {}}></AccordionMenu>);\n    const headerItem = container.querySelector('#test2_id');\n    expect(headerItem).toBeDefined();\n    expect(headerItem?.children[0]).toHaveStyleRule('background', COLORS.neutral_20);\n    expect(headerItem?.textContent).toContain('Item label with text 2');\n  });\n\n  it('Check expanded item text', async () => {\n    const { container } = render(<AccordionMenu items={accordionItems} onSelect={() => {}} selectedItemId={'test1_id'}></AccordionMenu>);\n    const headerItem = container.querySelector('#test1_id');\n    //check item expanded\n    expect(headerItem?.children[1]).toBeDefined();\n    expect(headerItem?.children[1]?.textContent).toContain('content test1');\n  });\n});\n"],"file":"AccordionMenu.test.js"}
+{"version":3,"sources":["../../../../src/Accordion/__tests__/AccordionMenu.test.tsx"],"names":["accordionItems","id","title","children","describe","it","queryByText","expect","toBeDefined","toBeNull","container","headerItem","querySelector","toHaveStyleRule","COLORS","neutral_20","textContent","toContain"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA,IAAMA,cAAc,GAAG,CACrB;AACEC,EAAAA,EAAE,EAAE,UADN;AAEEC,EAAAA,KAAK,EAAE,wBAFT;AAGEC,EAAAA,QAAQ,eAAE;AAHZ,CADqB,EAMrB;AACEF,EAAAA,EAAE,EAAE,UADN;AAEEC,EAAAA,KAAK,EAAE,wBAFT;AAGEC,EAAAA,QAAQ,eAAE;AAHZ,CANqB,CAAvB;AAaAC,QAAQ,CAAC,mBAAD,EAAsB,YAAM;AAClCC,EAAAA,EAAE,CAAC,qCAAD,uEAAwC;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,sBAChB,kCAAO,6BAAC,sBAAD;AAAe,cAAA,KAAK,EAAEL,cAAtB;AAAsC,cAAA,QAAQ,EAAE,oBAAM,CAAE;AAAxD,cAAP,CADgB,EAChCM,WADgC,WAChCA,WADgC;AAExCC,YAAAA,MAAM,CAACD,WAAW,CAAC,wBAAD,CAAZ,CAAN,CAA8CE,WAA9C;AACAD,YAAAA,MAAM,CAACD,WAAW,CAAC,wBAAD,CAAZ,CAAN,CAA8CE,WAA9C;AACAD,YAAAA,MAAM,CAACD,WAAW,CAAC,eAAD,CAAZ,CAAN,CAAqCG,QAArC;;AAJwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAAxC,GAAF;AAOAJ,EAAAA,EAAE,CAAC,0CAAD,uEAA6C;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,uBACvB,kCAAO,6BAAC,sBAAD;AAAe,cAAA,KAAK,EAAEL,cAAtB;AAAsC,cAAA,QAAQ,EAAE,oBAAM,CAAE;AAAxD,cAAP,CADuB,EACrCU,SADqC,YACrCA,SADqC;AAEvCC,YAAAA,UAFuC,GAE1BD,SAAS,CAACE,aAAV,CAAwB,WAAxB,CAF0B;AAG7CL,YAAAA,MAAM,CAACI,UAAD,CAAN,CAAmBH,WAAnB;AACAD,YAAAA,MAAM,CAACI,UAAD,aAACA,UAAD,uBAACA,UAAU,CAAER,QAAZ,CAAqB,CAArB,CAAD,CAAN,CAAgCU,eAAhC,CAAgD,YAAhD,EAA8DC,eAAOC,UAArE;AACAR,YAAAA,MAAM,CAACI,UAAD,aAACA,UAAD,uBAACA,UAAU,CAAEK,WAAb,CAAN,CAAgCC,SAAhC,CAA0C,wBAA1C;;AAL6C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAA7C,GAAF;AAQAZ,EAAAA,EAAE,CAAC,0BAAD,uEAA6B;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,uBACP,kCAAO,6BAAC,sBAAD;AAAe,cAAA,KAAK,EAAEL,cAAtB;AAAsC,cAAA,QAAQ,EAAE,oBAAM,CAAE,CAAxD;AAA0D,cAAA,aAAa,EAAE,CAAC,UAAD;AAAzE,cAAP,CADO,EACrBU,SADqB,YACrBA,SADqB;AAEvBC,YAAAA,UAFuB,GAEVD,SAAS,CAACE,aAAV,CAAwB,WAAxB,CAFU,EAG7B;;AACAL,YAAAA,MAAM,CAACI,UAAD,aAACA,UAAD,uBAACA,UAAU,CAAER,QAAZ,CAAqB,CAArB,CAAD,CAAN,CAAgCK,WAAhC;AACAD,YAAAA,MAAM,CAACI,UAAD,aAACA,UAAD,gDAACA,UAAU,CAAER,QAAZ,CAAqB,CAArB,CAAD,0DAAC,sBAAyBa,WAA1B,CAAN,CAA6CC,SAA7C,CAAuD,eAAvD;;AAL6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAA7B,GAAF;AAOD,CAvBO,CAAR","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport 'jest-styled-components';\nimport { COLORS } from '../../styles';\nimport AccordionMenu from '../AccordionMenu';\n\nconst accordionItems = [\n  {\n    id: 'test1_id',\n    title: 'Item label with text 1',\n    children: <div>content test1</div>,\n  },\n  {\n    id: 'test2_id',\n    title: 'Item label with text 2',\n    children: <div>content test2</div>,\n  },\n];\n\ndescribe('<AccordionMenu />', () => {\n  it('Check correct text placed on labels', async () => {\n    const { queryByText } = render(<AccordionMenu items={accordionItems} onSelect={() => {}}></AccordionMenu>);\n    expect(queryByText('Item label with text 1')).toBeDefined();\n    expect(queryByText('Item label with text 2')).toBeDefined();\n    expect(queryByText('content test1')).toBeNull();\n  });\n\n  it('Check item label element color and label', async () => {\n    const { container } = render(<AccordionMenu items={accordionItems} onSelect={() => {}}></AccordionMenu>);\n    const headerItem = container.querySelector('#test2_id');\n    expect(headerItem).toBeDefined();\n    expect(headerItem?.children[0]).toHaveStyleRule('background', COLORS.neutral_20);\n    expect(headerItem?.textContent).toContain('Item label with text 2');\n  });\n\n  it('Check expanded item text', async () => {\n    const { container } = render(<AccordionMenu items={accordionItems} onSelect={() => {}} selectedItems={['test1_id']}></AccordionMenu>);\n    const headerItem = container.querySelector('#test1_id');\n    //check item expanded\n    expect(headerItem?.children[1]).toBeDefined();\n    expect(headerItem?.children[1]?.textContent).toContain('content test1');\n  });\n});\n"],"file":"AccordionMenu.test.js"}

package/dist/js/Accordion/styles.d.ts

@@ -5,6 +5,8 @@ export declare const AccordionItemContainer: import("styled-components").StyledC
 }, never>;
 export declare const ItemHeaderContainer: import("styled-components").StyledComponent<"div", any, {
     isDisabled: boolean;
+    isActive: boolean;
+    tabbedHere: boolean;
 }, never>;
 export declare const HeaderIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ItemBodyContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/js/Accordion/styles.js

@@ -13,7 +13,7 @@ var _styles = require("../styles");
 
 var _zIndexes = require("../styles/z-indexes");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -34,17 +34,19 @@ var AccordionItemContainer = _styledComponents.default.div(_templateObject2 || (
 exports.AccordionItemContainer = AccordionItemContainer;
 var disabledState = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background: ", "!important;\n  color: ", ";\n  pointer-events: none;\n  svg {\n    color: ", "!important;\n  }\n"])), _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
 
-var ItemHeaderContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  cursor: pointer;\n  background: ", ";\n  svg:last-child {\n    margin-left: auto;\n  }\n  :focus {\n    outline: none;\n    z-index: ", ";\n    box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", ";\n  }\n\n  ", "\n  :hover {\n    background: ", ";\n  }\n  :active {\n    background: ", ";\n  }\n"])), _styles.COLORS.neutral_20, _zIndexes.Z_INDEXES.focus, _styles.COLORS.primary_500, _styles.COLORS.primary_500, function (props) {
+var ItemHeaderContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  cursor: pointer;\n  background: ", ";\n  svg:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n  ", "\n\n  ", "\n  :hover {\n    background: ", ";\n  }\n\n  :hover .headerLabel {\n    color: ", ";\n  }\n\n  :active .headerLabel {\n    color: ", ";\n  }\n\n  :hover svg {\n    color: ", ";\n  }\n\n  :active svg {\n    color: ", ";\n  }\n\n  :active {\n    background: ", ";\n  }\n"])), _styles.COLORS.neutral_20, function (props) {
+  return props.tabbedHere ? (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    z-index: ", ";\n    box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", ";"])), _zIndexes.Z_INDEXES.focus, _styles.COLORS.primary_500, _styles.COLORS.primary_500) : '';
+}, function (props) {
   return props.isDisabled ? disabledState : '';
-}, _styles.COLORS.primary_20, _styles.COLORS.primary_100);
+}, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.primary_100);
 
 exports.ItemHeaderContainer = ItemHeaderContainer;
 
-var HeaderIconContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-left: auto;\n"])));
+var HeaderIconContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-left: auto;\n"])));
 
 exports.HeaderIconContainer = HeaderIconContainer;
 
-var ItemBodyContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  padding: 0px 24px;\n  margin: 12px 0;\n  background: ", ";\n"])), _styles.COLORS.white);
+var ItemBodyContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  padding: 0px 16px;\n  margin: 12px 0;\n  background: ", ";\n"])), _styles.COLORS.white);
 
 exports.ItemBodyContainer = ItemBodyContainer;
 //# sourceMappingURL=styles.js.map

package/dist/js/Accordion/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Accordion/styles.ts"],"names":["AccordionMenuWrapper","styled","div","AccordionItemContainer","props","displaySeparator","COLORS","neutral_100","isDisabled","disabledState","css","white","neutral_300","ItemHeaderContainer","neutral_20","Z_INDEXES","focus","primary_500","primary_20","primary_100","HeaderIconContainer","ItemBodyContainer"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;AAEO,IAAMA,oBAAoB,GAAGC,0BAAOC,GAAV,oKAA1B;;;;AAOA,IAAMC,sBAAsB,GAAGF,0BAAOC,GAAV,2MAKhB,UAACE,KAAD;AAAA,SAAYA,KAAK,CAACC,gBAAN,uBAAsCC,eAAOC,WAA7C,IAA6D,EAAzE;AAAA,CALgB,EAMvB,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACI,UAAN,GAAmB,aAAnB,GAAmC,SAA/C;AAAA,CANuB,CAA5B;;;AASP,IAAMC,aAAa,OAAGC,qBAAH,6LACHJ,eAAOK,KADJ,EAERL,eAAOM,WAFC,EAKNN,eAAOM,WALD,CAAnB;;AASO,IAAMC,mBAAmB,GAAGZ,0BAAOC,GAAV,6dAOhBI,eAAOQ,UAPS,EAajBC,oBAAUC,KAbO,EAcDV,eAAOW,WAdN,EAckCX,eAAOW,WAdzC,EAiB5B,UAACb,KAAD;AAAA,SAAYA,KAAK,CAACI,UAAN,GAAmBC,aAAnB,GAAmC,EAA/C;AAAA,CAjB4B,EAmBdH,eAAOY,UAnBO,EAsBdZ,eAAOa,WAtBO,CAAzB;;;;AA0BA,IAAMC,mBAAmB,GAAGnB,0BAAOC,GAAV,+FAAzB;;;;AAIA,IAAMmB,iBAAiB,GAAGpB,0BAAOC,GAAV,wIAGdI,eAAOK,KAHO,CAAvB","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean; isDisabled: boolean }>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};\n`;\n\nconst disabledState = css`\n  background: ${COLORS.white}!important;\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  svg {\n    color: ${COLORS.neutral_300}!important;\n  }\n`;\n\nexport const ItemHeaderContainer = styled.div<{ isDisabled: boolean }>`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  cursor: pointer;\n  background: ${COLORS.neutral_20};\n  svg:last-child {\n    margin-left: auto;\n  }\n  :focus {\n    outline: none;\n    z-index: ${Z_INDEXES.focus};\n    box-shadow: 0px 4px 12px ${COLORS.primary_500}, 0px 0px 8px ${COLORS.primary_500};\n  }\n\n  ${(props) => (props.isDisabled ? disabledState : '')}\n  :hover {\n    background: ${COLORS.primary_20};\n  }\n  :active {\n    background: ${COLORS.primary_100};\n  }\n`;\n\nexport const HeaderIconContainer = styled.div`\n  margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div`\n  padding: 0px 24px;\n  margin: 12px 0;\n  background: ${COLORS.white};\n`;\n"],"file":"styles.js"}
+{"version":3,"sources":["../../../src/Accordion/styles.ts"],"names":["AccordionMenuWrapper","styled","div","AccordionItemContainer","props","displaySeparator","COLORS","neutral_100","isDisabled","disabledState","css","white","neutral_300","ItemHeaderContainer","neutral_20","tabbedHere","Z_INDEXES","focus","primary_500","primary_20","primary_700","primary_800","primary_100","HeaderIconContainer","ItemBodyContainer"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;AAEO,IAAMA,oBAAoB,GAAGC,0BAAOC,GAAV,oKAA1B;;;;AAOA,IAAMC,sBAAsB,GAAGF,0BAAOC,GAAV,2MAKhB,UAACE,KAAD;AAAA,SAAYA,KAAK,CAACC,gBAAN,uBAAsCC,eAAOC,WAA7C,IAA6D,EAAzE;AAAA,CALgB,EAMvB,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACI,UAAN,GAAmB,aAAnB,GAAmC,SAA/C;AAAA,CANuB,CAA5B;;;AASP,IAAMC,aAAa,OAAGC,qBAAH,6LACHJ,eAAOK,KADJ,EAERL,eAAOM,WAFC,EAKNN,eAAOM,WALD,CAAnB;;AASO,IAAMC,mBAAmB,GAAGZ,0BAAOC,GAAV,kkBAOhBI,eAAOQ,UAPS,EAY5B,UAAAV,KAAK;AAAA,SAAIA,KAAK,CAACW,UAAN,OAAmBL,qBAAnB,mJACEM,oBAAUC,KADZ,EAEkBX,eAAOY,WAFzB,EAEqDZ,eAAOY,WAF5D,IAE6E,EAFjF;AAAA,CAZuB,EAgB5B,UAACd,KAAD;AAAA,SAAYA,KAAK,CAACI,UAAN,GAAmBC,aAAnB,GAAmC,EAA/C;AAAA,CAhB4B,EAkBdH,eAAOa,UAlBO,EAsBnBb,eAAOc,WAtBY,EA0BnBd,eAAOe,WA1BY,EA8BnBf,eAAOc,WA9BY,EAkCnBd,eAAOe,WAlCY,EAsCdf,eAAOgB,WAtCO,CAAzB;;;;AA0CA,IAAMC,mBAAmB,GAAGtB,0BAAOC,GAAV,+FAAzB;;;;AAIA,IAAMsB,iBAAiB,GAAGvB,0BAAOC,GAAV,wIAGdI,eAAOK,KAHO,CAAvB","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean; isDisabled: boolean }>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};\n`;\n\nconst disabledState = css`\n  background: ${COLORS.white}!important;\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  svg {\n    color: ${COLORS.neutral_300}!important;\n  }\n`;\n\nexport const ItemHeaderContainer = styled.div<{ isDisabled: boolean, isActive: boolean, tabbedHere: boolean }>`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  cursor: pointer;\n  background: ${COLORS.neutral_20};\n  svg:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n  ${props => props.tabbedHere ? css`\n    z-index: ${Z_INDEXES.focus};\n    box-shadow: 0px 4px 12px ${COLORS.primary_500}, 0px 0px 8px ${COLORS.primary_500};` : ''}\n\n  ${(props) => (props.isDisabled ? disabledState : '')}\n  :hover {\n    background: ${COLORS.primary_20};\n  }\n\n  :hover .headerLabel {\n    color: ${COLORS.primary_700};\n  }\n\n  :active .headerLabel {\n    color: ${COLORS.primary_800};\n  }\n\n  :hover svg {\n    color: ${COLORS.primary_700};\n  }\n\n  :active svg {\n    color: ${COLORS.primary_800};\n  }\n\n  :active {\n    background: ${COLORS.primary_100};\n  }\n`;\n\nexport const HeaderIconContainer = styled.div`\n  margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div`\n  padding: 0px 16px;\n  margin: 12px 0;\n  background: ${COLORS.white};\n`;\n"],"file":"styles.js"}