@laerdal/life-react-components 3.0.1-dev.3 → 3.0.1-dev.9

package/dist/Card/VerticalCard/CardTopSection.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CardTopSection.cjs","names":["CardImageContainer","styled","div","CardTopTagContainer","CardTopSectionContainer","props","disabled","CardRibbonContainer","$backgroundColor","$color","CardCheckboxContainer","COLORS","white","CardTopSection","React","forwardRef","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","height","fallbackSrc","src","alt","loader","width","neutral_300","ComponentTextStyle","Regular"],"sources":["../../../src/Card/VerticalCard/CardTopSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {ComponentS, ComponentTextStyle} from '../../styles/typography';\nimport Checkbox from '../../InputFields/Checkbox';\nimport {Tag, TagVariants} from '../../Tag';\n\nimport {COLORS} from '../../index';\nimport {ImageWithFallbacks} from \"../../Image\";\n\nexport interface CardTopSectionProps {\n  selected?: boolean;\n  setSelected?: (arg0: boolean) => void;\n  tagLabel?: string;\n  tagIcon?: React.ReactNode;\n  tagVariant?: TagVariants;\n  highlightRibbonText?: string;\n  highlightRibbonIcon?: React.ReactNode;\n  highlightRibbonContentColor?: string;\n  highlightRibbonBgColor?: string;\n  image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\n  disabled?: boolean;\n}\n\nexport const CardImageContainer = styled.div`\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n  height: 100%;\n  width: 100%;\n  img{\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n    border-top-right-radius: 8px;\n    border-top-left-radius: 8px;\n  }\n`;\n\nexport const CardTopTagContainer = styled.div`\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n  width: calc(100% - 32px);\n`;\n\nexport const CardTopSectionContainer = styled.div<{ disabled?: boolean }>`\n  position: relative;\n  width: 100%;\n  overflow: visible;\n\n  ${props => props.disabled ? `\n  img, svg {\n    filter: grayscale(100%);\n  }` : ''}\n`;\n\nexport const CardRibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\n  min-height: calc(40px - 16px);\n  background-color: ${props => props.$backgroundColor};\n  width: calc(100% - 32px);\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  padding: 8px 16px 8px 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n\n  svg {\n    color: ${props => props.$color};\n    width: 24px;\n    height: 24px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nexport const CardCheckboxContainer = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1;\n\n  .checkbox-icon {\n    background-color: ${COLORS.white};\n  }\n`;\n\nconst CardTopSection = React.forwardRef(({\n                                           selected,\n                                           setSelected,\n                                           image,\n                                           tagLabel,\n                                           tagIcon,\n                                           tagVariant = 'positive',\n                                           highlightRibbonIcon,\n                                           highlightRibbonText,\n                                           highlightRibbonContentColor,\n                                           highlightRibbonBgColor,\n                                           disabled\n                                         }: CardTopSectionProps, ref: React.Ref<HTMLDivElement>) => {\n\n  return (\n    <CardTopSectionContainer disabled={disabled} data-testid={'card-topSection'} style={{height: image?.height ?? 200}}>\n      {\n        image &&\n        <CardImageContainer>\n            <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt} loader={image.loader ?? false} width={image.width} height={image.height}/>\n        </CardImageContainer>\n      }\n      {(!!selected || !!setSelected) && (\n        <CardCheckboxContainer data-testid={'card-topSection-checkbox'}>\n          <Checkbox ref={ref}\n                    disabled={disabled}\n                    select={(selected: boolean) => setSelected && setSelected(selected)}\n                    selected={selected || false}/>\n        </CardCheckboxContainer>\n      )}\n      {(tagLabel || tagIcon) && (\n        <CardTopTagContainer>\n          <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\n        </CardTopTagContainer>\n      )}\n      {(highlightRibbonIcon || highlightRibbonText) && (\n        <CardRibbonContainer data-testid={'card-topSection-ribbon'} $color={highlightRibbonContentColor ?? ''}\n                             $backgroundColor={disabled ? COLORS.neutral_300 : highlightRibbonBgColor ?? ''}>\n          {highlightRibbonIcon}\n          {highlightRibbonText && (\n            <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\n              {highlightRibbonText}\n            </ComponentS>\n          )}\n        </CardRibbonContainer>\n      )}\n    </CardTopSectionContainer>\n  );\n});\n\nexport default CardTopSection;\n"],"mappings":"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"}
+{"version":3,"file":"CardTopSection.cjs","names":["CardImageContainer","styled","div","CardTopTagContainer","CardTopSectionContainer","props","disabled","CardRibbonContainer","$backgroundColor","$color","CardCheckboxContainer","COLORS","white","CardTopSection","React","forwardRef","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","height","fallbackSrc","src","alt","loader","width","neutral_300","ComponentTextStyle","Regular"],"sources":["../../../src/Card/VerticalCard/CardTopSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {ComponentS, ComponentTextStyle} from '../../styles/typography';\r\nimport Checkbox from '../../InputFields/Checkbox';\r\nimport {Tag, TagVariants} from '../../Tag';\r\n\r\nimport {COLORS} from '../../index';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport interface CardTopSectionProps {\r\n  selected?: boolean;\r\n  setSelected?: (arg0: boolean) => void;\r\n  tagLabel?: string;\r\n  tagIcon?: React.ReactNode;\r\n  tagVariant?: TagVariants;\r\n  highlightRibbonText?: string;\r\n  highlightRibbonIcon?: React.ReactNode;\r\n  highlightRibbonContentColor?: string;\r\n  highlightRibbonBgColor?: string;\r\n  image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const CardImageContainer = styled.div`\r\n  border-top-right-radius: 8px;\r\n  border-top-left-radius: 8px;\r\n  height: 100%;\r\n  width: 100%;\r\n  img{\r\n    object-fit: cover;\r\n    width: 100%;\r\n    height: 100%;\r\n    border-top-right-radius: 8px;\r\n    border-top-left-radius: 8px;\r\n  }\r\n`;\r\n\r\nexport const CardTopTagContainer = styled.div`\r\n  position: absolute;\r\n\r\n  top: 16px;\r\n  left: 16px;\r\n  width: calc(100% - 32px);\r\n`;\r\n\r\nexport const CardTopSectionContainer = styled.div<{ disabled?: boolean }>`\r\n  position: relative;\r\n  width: 100%;\r\n  overflow: visible;\r\n\r\n  ${props => props.disabled ? `\r\n  img, svg {\r\n    filter: grayscale(100%);\r\n  }` : ''}\r\n`;\r\n\r\nexport const CardRibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\r\n  min-height: calc(40px - 16px);\r\n  background-color: ${props => props.$backgroundColor};\r\n  width: calc(100% - 32px);\r\n  position: absolute;\r\n  bottom: 0px;\r\n  left: 0px;\r\n  padding: 8px 16px 8px 16px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  gap: 8px;\r\n\r\n  svg {\r\n    color: ${props => props.$color};\r\n    width: 24px;\r\n    height: 24px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardCheckboxContainer = styled.div`\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  z-index: 1;\r\n\r\n  .checkbox-icon {\r\n    background-color: ${COLORS.white};\r\n  }\r\n`;\r\n\r\nconst CardTopSection = React.forwardRef(({\r\n                                           selected,\r\n                                           setSelected,\r\n                                           image,\r\n                                           tagLabel,\r\n                                           tagIcon,\r\n                                           tagVariant = 'positive',\r\n                                           highlightRibbonIcon,\r\n                                           highlightRibbonText,\r\n                                           highlightRibbonContentColor,\r\n                                           highlightRibbonBgColor,\r\n                                           disabled\r\n                                         }: CardTopSectionProps, ref: React.Ref<HTMLDivElement>) => {\r\n\r\n  return (\r\n    <CardTopSectionContainer disabled={disabled} data-testid={'card-topSection'} style={{height: image?.height ?? 200}}>\r\n      {\r\n        image &&\r\n        <CardImageContainer>\r\n            <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt} loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n        </CardImageContainer>\r\n      }\r\n      {(!!selected || !!setSelected) && (\r\n        <CardCheckboxContainer data-testid={'card-topSection-checkbox'}>\r\n          <Checkbox ref={ref}\r\n                    disabled={disabled}\r\n                    select={(selected: boolean) => setSelected && setSelected(selected)}\r\n                    selected={selected || false}/>\r\n        </CardCheckboxContainer>\r\n      )}\r\n      {(tagLabel || tagIcon) && (\r\n        <CardTopTagContainer>\r\n          <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\r\n        </CardTopTagContainer>\r\n      )}\r\n      {(highlightRibbonIcon || highlightRibbonText) && (\r\n        <CardRibbonContainer data-testid={'card-topSection-ribbon'} $color={highlightRibbonContentColor ?? ''}\r\n                             $backgroundColor={disabled ? COLORS.neutral_300 : highlightRibbonBgColor ?? ''}>\r\n          {highlightRibbonIcon}\r\n          {highlightRibbonText && (\r\n            <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\r\n              {highlightRibbonText}\r\n            </ComponentS>\r\n          )}\r\n        </CardRibbonContainer>\r\n      )}\r\n    </CardTopSectionContainer>\r\n  );\r\n});\r\n\r\nexport default CardTopSection;\r\n"],"mappings":"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"}

package/dist/Card/VerticalCard/CardTopSection.d.ts

@@ -1,34 +1,34 @@
-import * as React from 'react';
-import { TagVariants } from '../../Tag';
-export interface CardTopSectionProps {
-    selected?: boolean;
-    setSelected?: (arg0: boolean) => void;
-    tagLabel?: string;
-    tagIcon?: React.ReactNode;
-    tagVariant?: TagVariants;
-    highlightRibbonText?: string;
-    highlightRibbonIcon?: React.ReactNode;
-    highlightRibbonContentColor?: string;
-    highlightRibbonBgColor?: string;
-    image?: {
-        src: string;
-        fallbackSrc?: string;
-        alt: string;
-        height?: string;
-        width?: string;
-        loader?: boolean;
-    };
-    disabled?: boolean;
-}
-export declare const CardImageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardTopTagContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardTopSectionContainer: import("styled-components").StyledComponent<"div", any, {
-    disabled?: boolean | undefined;
-}, never>;
-export declare const CardRibbonContainer: import("styled-components").StyledComponent<"div", any, {
-    $color: string;
-    $backgroundColor: string;
-}, never>;
-export declare const CardCheckboxContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const CardTopSection: React.ForwardRefExoticComponent<CardTopSectionProps & React.RefAttributes<HTMLDivElement>>;
-export default CardTopSection;
+import * as React from 'react';
+import { TagVariants } from '../../Tag';
+export interface CardTopSectionProps {
+    selected?: boolean;
+    setSelected?: (arg0: boolean) => void;
+    tagLabel?: string;
+    tagIcon?: React.ReactNode;
+    tagVariant?: TagVariants;
+    highlightRibbonText?: string;
+    highlightRibbonIcon?: React.ReactNode;
+    highlightRibbonContentColor?: string;
+    highlightRibbonBgColor?: string;
+    image?: {
+        src: string;
+        fallbackSrc?: string;
+        alt: string;
+        height?: string;
+        width?: string;
+        loader?: boolean;
+    };
+    disabled?: boolean;
+}
+export declare const CardImageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardTopTagContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardTopSectionContainer: import("styled-components").StyledComponent<"div", any, {
+    disabled?: boolean | undefined;
+}, never>;
+export declare const CardRibbonContainer: import("styled-components").StyledComponent<"div", any, {
+    $color: string;
+    $backgroundColor: string;
+}, never>;
+export declare const CardCheckboxContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const CardTopSection: React.ForwardRefExoticComponent<CardTopSectionProps & React.RefAttributes<HTMLDivElement>>;
+export default CardTopSection;

package/dist/Card/VerticalCard/CardTopSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardTopSection.js","names":["React","styled","ComponentS","ComponentTextStyle","Checkbox","Tag","COLORS","ImageWithFallbacks","CardImageContainer","div","CardTopTagContainer","CardTopSectionContainer","props","disabled","CardRibbonContainer","$backgroundColor","$color","CardCheckboxContainer","white","CardTopSection","forwardRef","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","height","fallbackSrc","src","alt","loader","width","neutral_300","Regular"],"sources":["../../../src/Card/VerticalCard/CardTopSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {ComponentS, ComponentTextStyle} from '../../styles/typography';\nimport Checkbox from '../../InputFields/Checkbox';\nimport {Tag, TagVariants} from '../../Tag';\n\nimport {COLORS} from '../../index';\nimport {ImageWithFallbacks} from \"../../Image\";\n\nexport interface CardTopSectionProps {\n  selected?: boolean;\n  setSelected?: (arg0: boolean) => void;\n  tagLabel?: string;\n  tagIcon?: React.ReactNode;\n  tagVariant?: TagVariants;\n  highlightRibbonText?: string;\n  highlightRibbonIcon?: React.ReactNode;\n  highlightRibbonContentColor?: string;\n  highlightRibbonBgColor?: string;\n  image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\n  disabled?: boolean;\n}\n\nexport const CardImageContainer = styled.div`\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n  height: 100%;\n  width: 100%;\n  img{\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n    border-top-right-radius: 8px;\n    border-top-left-radius: 8px;\n  }\n`;\n\nexport const CardTopTagContainer = styled.div`\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n  width: calc(100% - 32px);\n`;\n\nexport const CardTopSectionContainer = styled.div<{ disabled?: boolean }>`\n  position: relative;\n  width: 100%;\n  overflow: visible;\n\n  ${props => props.disabled ? `\n  img, svg {\n    filter: grayscale(100%);\n  }` : ''}\n`;\n\nexport const CardRibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\n  min-height: calc(40px - 16px);\n  background-color: ${props => props.$backgroundColor};\n  width: calc(100% - 32px);\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  padding: 8px 16px 8px 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n\n  svg {\n    color: ${props => props.$color};\n    width: 24px;\n    height: 24px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nexport const CardCheckboxContainer = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1;\n\n  .checkbox-icon {\n    background-color: ${COLORS.white};\n  }\n`;\n\nconst CardTopSection = React.forwardRef(({\n                                           selected,\n                                           setSelected,\n                                           image,\n                                           tagLabel,\n                                           tagIcon,\n                                           tagVariant = 'positive',\n                                           highlightRibbonIcon,\n                                           highlightRibbonText,\n                                           highlightRibbonContentColor,\n                                           highlightRibbonBgColor,\n                                           disabled\n                                         }: CardTopSectionProps, ref: React.Ref<HTMLDivElement>) => {\n\n  return (\n    <CardTopSectionContainer disabled={disabled} data-testid={'card-topSection'} style={{height: image?.height ?? 200}}>\n      {\n        image &&\n        <CardImageContainer>\n            <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt} loader={image.loader ?? false} width={image.width} height={image.height}/>\n        </CardImageContainer>\n      }\n      {(!!selected || !!setSelected) && (\n        <CardCheckboxContainer data-testid={'card-topSection-checkbox'}>\n          <Checkbox ref={ref}\n                    disabled={disabled}\n                    select={(selected: boolean) => setSelected && setSelected(selected)}\n                    selected={selected || false}/>\n        </CardCheckboxContainer>\n      )}\n      {(tagLabel || tagIcon) && (\n        <CardTopTagContainer>\n          <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\n        </CardTopTagContainer>\n      )}\n      {(highlightRibbonIcon || highlightRibbonText) && (\n        <CardRibbonContainer data-testid={'card-topSection-ribbon'} $color={highlightRibbonContentColor ?? ''}\n                             $backgroundColor={disabled ? COLORS.neutral_300 : highlightRibbonBgColor ?? ''}>\n          {highlightRibbonIcon}\n          {highlightRibbonText && (\n            <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\n              {highlightRibbonText}\n            </ComponentS>\n          )}\n        </CardRibbonContainer>\n      )}\n    </CardTopSectionContainer>\n  );\n});\n\nexport default CardTopSection;\n"],"mappings":"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"}
+{"version":3,"file":"CardTopSection.js","names":["React","styled","ComponentS","ComponentTextStyle","Checkbox","Tag","COLORS","ImageWithFallbacks","CardImageContainer","div","CardTopTagContainer","CardTopSectionContainer","props","disabled","CardRibbonContainer","$backgroundColor","$color","CardCheckboxContainer","white","CardTopSection","forwardRef","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","height","fallbackSrc","src","alt","loader","width","neutral_300","Regular"],"sources":["../../../src/Card/VerticalCard/CardTopSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {ComponentS, ComponentTextStyle} from '../../styles/typography';\r\nimport Checkbox from '../../InputFields/Checkbox';\r\nimport {Tag, TagVariants} from '../../Tag';\r\n\r\nimport {COLORS} from '../../index';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport interface CardTopSectionProps {\r\n  selected?: boolean;\r\n  setSelected?: (arg0: boolean) => void;\r\n  tagLabel?: string;\r\n  tagIcon?: React.ReactNode;\r\n  tagVariant?: TagVariants;\r\n  highlightRibbonText?: string;\r\n  highlightRibbonIcon?: React.ReactNode;\r\n  highlightRibbonContentColor?: string;\r\n  highlightRibbonBgColor?: string;\r\n  image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const CardImageContainer = styled.div`\r\n  border-top-right-radius: 8px;\r\n  border-top-left-radius: 8px;\r\n  height: 100%;\r\n  width: 100%;\r\n  img{\r\n    object-fit: cover;\r\n    width: 100%;\r\n    height: 100%;\r\n    border-top-right-radius: 8px;\r\n    border-top-left-radius: 8px;\r\n  }\r\n`;\r\n\r\nexport const CardTopTagContainer = styled.div`\r\n  position: absolute;\r\n\r\n  top: 16px;\r\n  left: 16px;\r\n  width: calc(100% - 32px);\r\n`;\r\n\r\nexport const CardTopSectionContainer = styled.div<{ disabled?: boolean }>`\r\n  position: relative;\r\n  width: 100%;\r\n  overflow: visible;\r\n\r\n  ${props => props.disabled ? `\r\n  img, svg {\r\n    filter: grayscale(100%);\r\n  }` : ''}\r\n`;\r\n\r\nexport const CardRibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\r\n  min-height: calc(40px - 16px);\r\n  background-color: ${props => props.$backgroundColor};\r\n  width: calc(100% - 32px);\r\n  position: absolute;\r\n  bottom: 0px;\r\n  left: 0px;\r\n  padding: 8px 16px 8px 16px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  gap: 8px;\r\n\r\n  svg {\r\n    color: ${props => props.$color};\r\n    width: 24px;\r\n    height: 24px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardCheckboxContainer = styled.div`\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  z-index: 1;\r\n\r\n  .checkbox-icon {\r\n    background-color: ${COLORS.white};\r\n  }\r\n`;\r\n\r\nconst CardTopSection = React.forwardRef(({\r\n                                           selected,\r\n                                           setSelected,\r\n                                           image,\r\n                                           tagLabel,\r\n                                           tagIcon,\r\n                                           tagVariant = 'positive',\r\n                                           highlightRibbonIcon,\r\n                                           highlightRibbonText,\r\n                                           highlightRibbonContentColor,\r\n                                           highlightRibbonBgColor,\r\n                                           disabled\r\n                                         }: CardTopSectionProps, ref: React.Ref<HTMLDivElement>) => {\r\n\r\n  return (\r\n    <CardTopSectionContainer disabled={disabled} data-testid={'card-topSection'} style={{height: image?.height ?? 200}}>\r\n      {\r\n        image &&\r\n        <CardImageContainer>\r\n            <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt} loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n        </CardImageContainer>\r\n      }\r\n      {(!!selected || !!setSelected) && (\r\n        <CardCheckboxContainer data-testid={'card-topSection-checkbox'}>\r\n          <Checkbox ref={ref}\r\n                    disabled={disabled}\r\n                    select={(selected: boolean) => setSelected && setSelected(selected)}\r\n                    selected={selected || false}/>\r\n        </CardCheckboxContainer>\r\n      )}\r\n      {(tagLabel || tagIcon) && (\r\n        <CardTopTagContainer>\r\n          <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\r\n        </CardTopTagContainer>\r\n      )}\r\n      {(highlightRibbonIcon || highlightRibbonText) && (\r\n        <CardRibbonContainer data-testid={'card-topSection-ribbon'} $color={highlightRibbonContentColor ?? ''}\r\n                             $backgroundColor={disabled ? COLORS.neutral_300 : highlightRibbonBgColor ?? ''}>\r\n          {highlightRibbonIcon}\r\n          {highlightRibbonText && (\r\n            <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\r\n              {highlightRibbonText}\r\n            </ComponentS>\r\n          )}\r\n        </CardRibbonContainer>\r\n      )}\r\n    </CardTopSectionContainer>\r\n  );\r\n});\r\n\r\nexport default CardTopSection;\r\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,UAAU,EAAEC,kBAAkB,QAAO,yBAAyB;AACtE,OAAOC,QAAQ,MAAM,4BAA4B;AACjD,SAAQC,GAAG,QAAoB,WAAW;AAE1C,SAAQC,MAAM,QAAO,aAAa;AAClC,SAAQC,kBAAkB,QAAO,aAAa;AAAC;AAAA;AAgB/C,OAAO,IAAMC,kBAAkB,GAAGP,MAAM,CAACQ,GAAG,wTAY3C;AAED,OAAO,IAAMC,mBAAmB,GAAGT,MAAM,CAACQ,GAAG,4JAM5C;AAED,OAAO,IAAME,uBAAuB,GAAGV,MAAM,CAACQ,GAAG,iJAK7C,UAAAG,KAAK;EAAA,OAAIA,KAAK,CAACC,QAAQ,yDAGpB,EAAE;AAAA,EACR;AAED,OAAO,IAAMC,mBAAmB,GAAGb,MAAM,CAACQ,GAAG,sbAEvB,UAAAG,KAAK;EAAA,OAAIA,KAAK,CAACG,gBAAgB;AAAA,GAYxC,UAAAH,KAAK;EAAA,OAAIA,KAAK,CAACI,MAAM;AAAA,EAMjC;AAED,OAAO,IAAMC,qBAAqB,GAAGhB,MAAM,CAACQ,GAAG,gMAOvBH,MAAM,CAACY,KAAK,CAEnC;AAED,IAAMC,cAAc,gBAAGnB,KAAK,CAACoB,UAAU,CAAC,gBAYyBC,GAA8B,EAAK;EAAA;EAAA,IAXzDC,QAAQ,QAARA,QAAQ;IACRC,WAAW,QAAXA,WAAW;IACXC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IAAA,uBACPC,UAAU;IAAVA,UAAU,gCAAG,UAAU;IACvBC,mBAAmB,QAAnBA,mBAAmB;IACnBC,mBAAmB,QAAnBA,mBAAmB;IACnBC,2BAA2B,QAA3BA,2BAA2B;IAC3BC,sBAAsB,QAAtBA,sBAAsB;IACtBlB,QAAQ,QAARA,QAAQ;EAGjD,oBACE,MAAC,uBAAuB;IAAC,QAAQ,EAAEA,QAAS;IAAC,eAAa,iBAAkB;IAAC,KAAK,EAAE;MAACmB,MAAM,mBAAER,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEQ,MAAM,yDAAI;IAAG,CAAE;IAAA,WAE/GR,KAAK,iBACL,KAAC,kBAAkB;MAAA,uBACf,KAAC,kBAAkB;QAAC,SAAS,wBAAEA,KAAK,CAACS,WAAW,mEAAI,EAAG;QAAC,GAAG,EAAET,KAAK,CAACU,GAAI;QAAC,GAAG,EAAEV,KAAK,CAACW,GAAI;QAAC,MAAM,mBAAEX,KAAK,CAACY,MAAM,yDAAI,KAAM;QAAC,KAAK,EAAEZ,KAAK,CAACa,KAAM;QAAC,MAAM,EAAEb,KAAK,CAACQ;MAAO;IAAE,EACjJ,EAEtB,CAAC,CAAC,CAACV,QAAQ,IAAI,CAAC,CAACC,WAAW,kBAC3B,KAAC,qBAAqB;MAAC,eAAa,0BAA2B;MAAA,uBAC7D,KAAC,QAAQ;QAAC,GAAG,EAAEF,GAAI;QACT,QAAQ,EAAER,QAAS;QACnB,MAAM,EAAE,gBAACS,QAAiB;UAAA,OAAKC,WAAW,IAAIA,WAAW,CAACD,QAAQ,CAAC;QAAA,CAAC;QACpE,QAAQ,EAAEA,QAAQ,IAAI;MAAM;IAAE,EAE3C,EACA,CAACG,QAAQ,IAAIC,OAAO,kBACnB,KAAC,mBAAmB;MAAA,uBAClB,KAAC,GAAG;QAAC,KAAK,EAAED,QAAS;QAAC,OAAO,EAAEE,UAAW;QAAC,IAAI,EAAED;MAAQ;IAAE,EAE9D,EACA,CAACE,mBAAmB,IAAIC,mBAAmB,kBAC1C,MAAC,mBAAmB;MAAC,eAAa,wBAAyB;MAAC,MAAM,EAAEC,2BAA2B,aAA3BA,2BAA2B,cAA3BA,2BAA2B,GAAI,EAAG;MACjF,gBAAgB,EAAEjB,QAAQ,GAAGP,MAAM,CAACgC,WAAW,GAAGP,sBAAsB,aAAtBA,sBAAsB,cAAtBA,sBAAsB,GAAI,EAAG;MAAA,WACjGH,mBAAmB,EACnBC,mBAAmB,iBAClB,KAAC,UAAU;QAAC,KAAK,EAAEC,2BAA2B,aAA3BA,2BAA2B,cAA3BA,2BAA2B,GAAI,EAAG;QAAC,SAAS,EAAE3B,kBAAkB,CAACoC,OAAQ;QAAA,UACzFV;MAAmB,EAEvB;IAAA,EAEJ;EAAA,EACuB;AAE9B,CAAC,CAAC;AAAC;EA/HDP,QAAQ;EACRC,WAAW;EACXE,QAAQ;EACRC,OAAO;EAEPG,mBAAmB;EACnBD,mBAAmB;EACnBE,2BAA2B;EAC3BC,sBAAsB;EACtBP,KAAK;IAAKU,GAAG;IAAUD,WAAW;IAAWE,GAAG;IAAUH,MAAM;IAAWK,KAAK;IAAWD,MAAM;EAAA;EACjGvB,QAAQ;AAAA;AAuHV,eAAeM,cAAc"}

package/dist/Card/VerticalCard/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../../src/Card/VerticalCard/index.tsx"],"sourcesContent":["export {default as Card} from './Card';\n\nexport {default as CardBottomSection} from './CardBottomSection';\nexport * from './CardBottomSection';\nexport {default as CardMiddleSection} from './CardMiddleSection';\nexport * from './CardMiddleSection';\nexport {default as CardTopSection} from './CardTopSection';\nexport * from './CardTopSection';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAEA;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AAAiC;AAAA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../../src/Card/VerticalCard/index.tsx"],"sourcesContent":["export {default as Card} from './Card';\r\n\r\nexport {default as CardBottomSection} from './CardBottomSection';\r\nexport * from './CardBottomSection';\r\nexport {default as CardMiddleSection} from './CardMiddleSection';\r\nexport * from './CardMiddleSection';\r\nexport {default as CardTopSection} from './CardTopSection';\r\nexport * from './CardTopSection';\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAEA;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AAAiC;AAAA"}

package/dist/Card/VerticalCard/index.d.ts

@@ -1,7 +1,7 @@
-export { default as Card } from './Card';
-export { default as CardBottomSection } from './CardBottomSection';
-export * from './CardBottomSection';
-export { default as CardMiddleSection } from './CardMiddleSection';
-export * from './CardMiddleSection';
-export { default as CardTopSection } from './CardTopSection';
-export * from './CardTopSection';
+export { default as Card } from './Card';
+export { default as CardBottomSection } from './CardBottomSection';
+export * from './CardBottomSection';
+export { default as CardMiddleSection } from './CardMiddleSection';
+export * from './CardMiddleSection';
+export { default as CardTopSection } from './CardTopSection';
+export * from './CardTopSection';

package/dist/Card/VerticalCard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","Card","CardBottomSection","CardMiddleSection","CardTopSection"],"sources":["../../../src/Card/VerticalCard/index.tsx"],"sourcesContent":["export {default as Card} from './Card';\n\nexport {default as CardBottomSection} from './CardBottomSection';\nexport * from './CardBottomSection';\nexport {default as CardMiddleSection} from './CardMiddleSection';\nexport * from './CardMiddleSection';\nexport {default as CardTopSection} from './CardTopSection';\nexport * from './CardTopSection';\n"],"mappings":"AAAA,SAAQA,OAAO,IAAIC,IAAI,QAAO,QAAQ;AAEtC,SAAQD,OAAO,IAAIE,iBAAiB,QAAO,qBAAqB;AAChE,cAAc,qBAAqB;AACnC,SAAQF,OAAO,IAAIG,iBAAiB,QAAO,qBAAqB;AAChE,cAAc,qBAAqB;AACnC,SAAQH,OAAO,IAAII,cAAc,QAAO,kBAAkB;AAC1D,cAAc,kBAAkB"}
+{"version":3,"file":"index.js","names":["default","Card","CardBottomSection","CardMiddleSection","CardTopSection"],"sources":["../../../src/Card/VerticalCard/index.tsx"],"sourcesContent":["export {default as Card} from './Card';\r\n\r\nexport {default as CardBottomSection} from './CardBottomSection';\r\nexport * from './CardBottomSection';\r\nexport {default as CardMiddleSection} from './CardMiddleSection';\r\nexport * from './CardMiddleSection';\r\nexport {default as CardTopSection} from './CardTopSection';\r\nexport * from './CardTopSection';\r\n"],"mappings":"AAAA,SAAQA,OAAO,IAAIC,IAAI,QAAO,QAAQ;AAEtC,SAAQD,OAAO,IAAIE,iBAAiB,QAAO,qBAAqB;AAChE,cAAc,qBAAqB;AACnC,SAAQF,OAAO,IAAIG,iBAAiB,QAAO,qBAAqB;AAChE,cAAc,qBAAqB;AACnC,SAAQH,OAAO,IAAII,cAAc,QAAO,kBAAkB;AAC1D,cAAc,kBAAkB"}

package/dist/Card/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Card/index.ts"],"sourcesContent":["export * from './VerticalCard';\nexport * from './HorizontalCard';\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Card/index.ts"],"sourcesContent":["export * from './VerticalCard';\r\nexport * from './HorizontalCard';\r\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/dist/Card/index.d.ts

@@ -1,2 +1,2 @@
-export * from './VerticalCard';
-export * from './HorizontalCard';
+export * from './VerticalCard';
+export * from './HorizontalCard';

package/dist/Card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Card/index.ts"],"sourcesContent":["export * from './VerticalCard';\nexport * from './HorizontalCard';\n"],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,kBAAkB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Card/index.ts"],"sourcesContent":["export * from './VerticalCard';\r\nexport * from './HorizontalCard';\r\n"],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,kBAAkB"}

package/dist/Chips/ActionChip.cjs

@@ -28,8 +28,8 @@ var ActionChip = function ActionChip(_ref) {
     className = _ref.className,
     dataTestId = _ref.dataTestId,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  /**
-   * Return Action Chip component.
+  /**
+   * Return Action Chip component.
    */
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, _objectSpread(_objectSpread({
     className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " outline ").concat(!!_onClick ? 'interactive' : '', " ").concat(className || ''),

package/dist/Chips/ActionChip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionChip.cjs","names":["ActionChip","icon","text","size","Size","Medium","disabled","onClick","className","dataTestId","rest","defaultOnMouseDownHandler","e","key"],"sources":["../../src/Chips/ActionChip.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons as icons} from '../icons/index';\nimport {Size} from '../types';\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ActionChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\n                                                                icon,\n                                                                text,\n                                                                size = Size.Medium,\n                                                                disabled,\n                                                                onClick,\n                                                                className,\n                                                                dataTestId,\n                                                                ...rest\n                                                              }: ActionChipProps) => {\n\n  /**\n   * Return Action Chip component.\n   */\n  return (\n    <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n                   \n                   onClick={() => !disabled && onClick && onClick()}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   data-testid={dataTestId}\n                   role=\"button\"\n                   onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\n                   tabIndex={disabled || !onClick ? -1 : 0}\n                   {...rest}>\n      <ChipContentContainer>\n        <ChipContent>\n          {\n            icon &&\n            <div className={'chip-icon icon-left'}>\n              {icon}\n            </div>\n          }\n          <div>\n            {text}\n          </div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n};\n\nexport default ActionChip;\n"],"mappings":";;;;;;;;;;AAGA;AAMA;AAIA;AAMA;AAAoD;AAAA;AAAA;AAAA;AAAA;AAAA;AAEpD,IAAMA,UAAoD,GAAG,SAAvDA,UAAoD,OAS2B;EAAA,IARrBC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IAAA,iBACJC,IAAI;IAAJA,IAAI,0BAAGC,WAAI,CAACC,MAAM;IAClBC,QAAQ,QAARA,QAAQ;IACRC,QAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,IAAI;EAGrE;AACF;AACA;EACE,oBACE,qBAAC,yBAAa;IAAC,SAAS,YAAKP,IAAI,cAAIG,QAAQ,GAAG,UAAU,GAAG,EAAE,sBAAY,CAAC,CAACC,QAAO,GAAG,aAAa,GAAG,EAAE,cAAIC,SAAS,IAAI,EAAE,CAAG;IAEhH,OAAO,EAAE;MAAA,OAAM,CAACF,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IACjD,WAAW,EAAEI,iCAA0B;IACvC,eAAaF,UAAW;IACxB,IAAI,EAAC,QAAQ;IACb,SAAS,EAAE,mBAAAG,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAK,CAACP,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IAC1F,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAO,GAAG,CAAC,CAAC,GAAG;EAAE,GACpCG,IAAI;IAAA,uBACrB,qBAAC,gCAAoB;MAAA,uBACnB,sBAAC,uBAAW;QAAA,WAERT,IAAI,iBACJ;UAAK,SAAS,EAAE,qBAAsB;UAAA,UACnCA;QAAI,EACD,eAER;UAAA,UACGC;QAAI,EACD;MAAA;IACM;EACO,GACT;AAEpB,CAAC;AAAC,eAEaF,UAAU;AAAA"}
+{"version":3,"file":"ActionChip.cjs","names":["ActionChip","icon","text","size","Size","Medium","disabled","onClick","className","dataTestId","rest","defaultOnMouseDownHandler","e","key"],"sources":["../../src/Chips/ActionChip.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport {SystemIcons as icons} from '../icons/index';\r\nimport {Size} from '../types';\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {ActionChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\r\n                                                                icon,\r\n                                                                text,\r\n                                                                size = Size.Medium,\r\n                                                                disabled,\r\n                                                                onClick,\r\n                                                                className,\r\n                                                                dataTestId,\r\n                                                                ...rest\r\n                                                              }: ActionChipProps) => {\r\n\r\n  /**\r\n   * Return Action Chip component.\r\n   */\r\n  return (\r\n    <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''} ${className || ''}`}\r\n                   \r\n                   onClick={() => !disabled && onClick && onClick()}\r\n                   onMouseDown={defaultOnMouseDownHandler}\r\n                   data-testid={dataTestId}\r\n                   role=\"button\"\r\n                   onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\r\n                   tabIndex={disabled || !onClick ? -1 : 0}\r\n                   {...rest}>\r\n      <ChipContentContainer>\r\n        <ChipContent>\r\n          {\r\n            icon &&\r\n            <div className={'chip-icon icon-left'}>\r\n              {icon}\r\n            </div>\r\n          }\r\n          <div>\r\n            {text}\r\n          </div>\r\n        </ChipContent>\r\n      </ChipContentContainer>\r\n    </ChipContainer>\r\n  );\r\n};\r\n\r\nexport default ActionChip;\r\n"],"mappings":";;;;;;;;;;AAGA;AAMA;AAIA;AAMA;AAAoD;AAAA;AAAA;AAAA;AAAA;AAAA;AAEpD,IAAMA,UAAoD,GAAG,SAAvDA,UAAoD,OAS2B;EAAA,IARrBC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IAAA,iBACJC,IAAI;IAAJA,IAAI,0BAAGC,WAAI,CAACC,MAAM;IAClBC,QAAQ,QAARA,QAAQ;IACRC,QAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,IAAI;EAGrE;AACF;AACA;EACE,oBACE,qBAAC,yBAAa;IAAC,SAAS,YAAKP,IAAI,cAAIG,QAAQ,GAAG,UAAU,GAAG,EAAE,sBAAY,CAAC,CAACC,QAAO,GAAG,aAAa,GAAG,EAAE,cAAIC,SAAS,IAAI,EAAE,CAAG;IAEhH,OAAO,EAAE;MAAA,OAAM,CAACF,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IACjD,WAAW,EAAEI,iCAA0B;IACvC,eAAaF,UAAW;IACxB,IAAI,EAAC,QAAQ;IACb,SAAS,EAAE,mBAAAG,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAK,CAACP,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IAC1F,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAO,GAAG,CAAC,CAAC,GAAG;EAAE,GACpCG,IAAI;IAAA,uBACrB,qBAAC,gCAAoB;MAAA,uBACnB,sBAAC,uBAAW;QAAA,WAERT,IAAI,iBACJ;UAAK,SAAS,EAAE,qBAAsB;UAAA,UACnCA;QAAI,EACD,eAER;UAAA,UACGC;QAAI,EACD;MAAA;IACM;EACO,GACT;AAEpB,CAAC;AAAC,eAEaF,UAAU;AAAA"}

package/dist/Chips/ActionChip.d.ts

@@ -1,10 +1,10 @@
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-/**
- * Import custom types.
- */
-import { ActionChipProps } from './ChipTypes';
-declare const ActionChip: React.FunctionComponent<ActionChipProps>;
-export default ActionChip;
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+/**
+ * Import custom types.
+ */
+import { ActionChipProps } from './ChipTypes';
+declare const ActionChip: React.FunctionComponent<ActionChipProps>;
+export default ActionChip;

package/dist/Chips/ActionChip.js

@@ -3,23 +3,23 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["icon", "text", "size", "disabled", "onClick", "className", "dataTestId"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-/**
- * Import React libraries.
+/**
+ * Import React libraries.
  */
 import * as React from 'react';
 
-/**
- * Import custom components.
+/**
+ * Import custom components.
  */
 
 import { Size } from '../types';
-/**
- * Import custom styles.
+/**
+ * Import custom styles.
  */
 import { ChipContainer, ChipContent, ChipContentContainer } from './ChipStyles';
 
-/**
- * Import custom types.
+/**
+ * Import custom types.
  */
 
 import { defaultOnMouseDownHandler } from '../common';
@@ -35,8 +35,8 @@ var ActionChip = function ActionChip(_ref) {
     className = _ref.className,
     dataTestId = _ref.dataTestId,
     rest = _objectWithoutProperties(_ref, _excluded);
-  /**
-   * Return Action Chip component.
+  /**
+   * Return Action Chip component.
    */
   return /*#__PURE__*/_jsx(ChipContainer, _objectSpread(_objectSpread({
     className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " outline ").concat(!!_onClick ? 'interactive' : '', " ").concat(className || ''),

package/dist/Chips/ActionChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionChip.js","names":["React","Size","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","ActionChip","icon","text","size","Medium","disabled","onClick","className","dataTestId","rest","e","key"],"sources":["../../src/Chips/ActionChip.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons as icons} from '../icons/index';\nimport {Size} from '../types';\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ActionChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\n                                                                icon,\n                                                                text,\n                                                                size = Size.Medium,\n                                                                disabled,\n                                                                onClick,\n                                                                className,\n                                                                dataTestId,\n                                                                ...rest\n                                                              }: ActionChipProps) => {\n\n  /**\n   * Return Action Chip component.\n   */\n  return (\n    <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n                   \n                   onClick={() => !disabled && onClick && onClick()}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   data-testid={dataTestId}\n                   role=\"button\"\n                   onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\n                   tabIndex={disabled || !onClick ? -1 : 0}\n                   {...rest}>\n      <ChipContentContainer>\n        <ChipContent>\n          {\n            icon &&\n            <div className={'chip-icon icon-left'}>\n              {icon}\n            </div>\n          }\n          <div>\n            {text}\n          </div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n};\n\nexport default ActionChip;\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;;AAEA,SAAQC,IAAI,QAAO,UAAU;AAC7B;AACA;AACA;AACA,SAAQC,aAAa,EAAEC,WAAW,EAAEC,oBAAoB,QAAO,cAAc;;AAE7E;AACA;AACA;;AAEA,SAAQC,yBAAyB,QAAO,WAAW;AAAC;AAAA;AAEpD,IAAMC,UAAoD,GAAG,SAAvDA,UAAoD,OAS2B;EAAA,IARrBC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IAAA,iBACJC,IAAI;IAAJA,IAAI,0BAAGR,IAAI,CAACS,MAAM;IAClBC,QAAQ,QAARA,QAAQ;IACRC,QAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,IAAI;EAGrE;AACF;AACA;EACE,oBACE,KAAC,aAAa;IAAC,SAAS,YAAKN,IAAI,cAAIE,QAAQ,GAAG,UAAU,GAAG,EAAE,sBAAY,CAAC,CAACC,QAAO,GAAG,aAAa,GAAG,EAAE,cAAIC,SAAS,IAAI,EAAE,CAAG;IAEhH,OAAO,EAAE;MAAA,OAAM,CAACF,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IACjD,WAAW,EAAEP,yBAA0B;IACvC,eAAaS,UAAW;IACxB,IAAI,EAAC,QAAQ;IACb,SAAS,EAAE,mBAAAE,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAK,CAACN,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IAC1F,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAO,GAAG,CAAC,CAAC,GAAG;EAAE,GACpCG,IAAI;IAAA,uBACrB,KAAC,oBAAoB;MAAA,uBACnB,MAAC,WAAW;QAAA,WAERR,IAAI,iBACJ;UAAK,SAAS,EAAE,qBAAsB;UAAA,UACnCA;QAAI,EACD,eAER;UAAA,UACGC;QAAI,EACD;MAAA;IACM;EACO,GACT;AAEpB,CAAC;AAED,eAAeF,UAAU"}
+{"version":3,"file":"ActionChip.js","names":["React","Size","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","ActionChip","icon","text","size","Medium","disabled","onClick","className","dataTestId","rest","e","key"],"sources":["../../src/Chips/ActionChip.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport {SystemIcons as icons} from '../icons/index';\r\nimport {Size} from '../types';\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {ActionChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\r\n                                                                icon,\r\n                                                                text,\r\n                                                                size = Size.Medium,\r\n                                                                disabled,\r\n                                                                onClick,\r\n                                                                className,\r\n                                                                dataTestId,\r\n                                                                ...rest\r\n                                                              }: ActionChipProps) => {\r\n\r\n  /**\r\n   * Return Action Chip component.\r\n   */\r\n  return (\r\n    <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''} ${className || ''}`}\r\n                   \r\n                   onClick={() => !disabled && onClick && onClick()}\r\n                   onMouseDown={defaultOnMouseDownHandler}\r\n                   data-testid={dataTestId}\r\n                   role=\"button\"\r\n                   onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\r\n                   tabIndex={disabled || !onClick ? -1 : 0}\r\n                   {...rest}>\r\n      <ChipContentContainer>\r\n        <ChipContent>\r\n          {\r\n            icon &&\r\n            <div className={'chip-icon icon-left'}>\r\n              {icon}\r\n            </div>\r\n          }\r\n          <div>\r\n            {text}\r\n          </div>\r\n        </ChipContent>\r\n      </ChipContentContainer>\r\n    </ChipContainer>\r\n  );\r\n};\r\n\r\nexport default ActionChip;\r\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;;AAEA,SAAQC,IAAI,QAAO,UAAU;AAC7B;AACA;AACA;AACA,SAAQC,aAAa,EAAEC,WAAW,EAAEC,oBAAoB,QAAO,cAAc;;AAE7E;AACA;AACA;;AAEA,SAAQC,yBAAyB,QAAO,WAAW;AAAC;AAAA;AAEpD,IAAMC,UAAoD,GAAG,SAAvDA,UAAoD,OAS2B;EAAA,IARrBC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IAAA,iBACJC,IAAI;IAAJA,IAAI,0BAAGR,IAAI,CAACS,MAAM;IAClBC,QAAQ,QAARA,QAAQ;IACRC,QAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,IAAI;EAGrE;AACF;AACA;EACE,oBACE,KAAC,aAAa;IAAC,SAAS,YAAKN,IAAI,cAAIE,QAAQ,GAAG,UAAU,GAAG,EAAE,sBAAY,CAAC,CAACC,QAAO,GAAG,aAAa,GAAG,EAAE,cAAIC,SAAS,IAAI,EAAE,CAAG;IAEhH,OAAO,EAAE;MAAA,OAAM,CAACF,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IACjD,WAAW,EAAEP,yBAA0B;IACvC,eAAaS,UAAW;IACxB,IAAI,EAAC,QAAQ;IACb,SAAS,EAAE,mBAAAE,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAK,CAACN,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IAC1F,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAO,GAAG,CAAC,CAAC,GAAG;EAAE,GACpCG,IAAI;IAAA,uBACrB,KAAC,oBAAoB;MAAA,uBACnB,MAAC,WAAW;QAAA,WAERR,IAAI,iBACJ;UAAK,SAAS,EAAE,qBAAsB;UAAA,UACnCA;QAAI,EACD,eAER;UAAA,UACGC;QAAI,EACD;MAAA;IACM;EACO,GACT;AAEpB,CAAC;AAED,eAAeF,UAAU"}

package/dist/Chips/ChipInput.cjs

@@ -0,0 +1,199 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _index = require("./index");
+
+var _types = require("../types");
+
+var _styling = require("../InputFields/styling");
+
+var _styles = require("../styles");
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _ChipStyles = require("./ChipStyles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * Import React libraries.
+ */
+
+/**
+ * Import custom components.
+ */
+
+/**
+ * Import custom styles.
+ */
+var ChipInput = function ChipInput(_ref) {
+  var values = _ref.values,
+      inputId = _ref.inputId,
+      variants = _ref.variants,
+      required = _ref.required,
+      icon = _ref.icon,
+      placeholder = _ref.placeholder,
+      validationType = _ref.validationType,
+      validationMessage = _ref.validationMessage,
+      onValueChange = _ref.onValueChange;
+  // Globally used variables within the chip input
+  var chipInput;
+
+  var _React$useState = React.useState([]),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      chips = _React$useState2[0],
+      setChips = _React$useState2[1];
+
+  var _React$useState3 = React.useState(''),
+      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+      value = _React$useState4[0],
+      setValue = _React$useState4[1];
+  /**
+   * Sets initial values for the chips.
+   */
+
+
+  React.useEffect(function () {
+    // Let's add initial chip values
+    setChips(values);
+  }, [values]);
+  /**
+   * Adds a chip to the chip list.
+   * @param event - Event handler from the key down event.
+   */
+
+  var onAddChip = function onAddChip(event) {
+    // Let's trigger only on enter, comma and space key press
+    if ((event.keyCode === 13 || event.keyCode === 32 || event.keyCode === 188) && value) {
+      // Let's prevent default action - adding new key to the value
+      event.preventDefault(); // Let's add the chip
+
+      setChips([].concat((0, _toConsumableArray2.default)(chips), [value]));
+      onValueChange([].concat((0, _toConsumableArray2.default)(chips), [value])); // Let's clear the old value
+
+      chipInput.value = '';
+      setValue('');
+    }
+  };
+  /**
+   * Removes a specific chip from the chip list.
+   * @param index - Index of the chip that needs to be removed.
+   * @param elementToAdd - Element which needs to be added in the deleted element place.
+   */
+
+
+  var onRemoveChip = function onRemoveChip(index, elementToAdd) {
+    // Let's copy the chips
+    var newChips = (0, _toConsumableArray2.default)(chips); // Let's delete the chip
+    // If necessary, let's replace it with a different chip
+
+    if (elementToAdd) {
+      newChips.splice(index, 1, elementToAdd);
+    } else {
+      newChips.splice(index, 1);
+    } // Let's update the chip list
+
+
+    setChips((0, _toConsumableArray2.default)(newChips));
+    onValueChange((0, _toConsumableArray2.default)(newChips));
+  };
+  /**
+   * Changes a status of the chip to edit.
+   * @param text - Text of the chip that is being edited.
+   * @param index - Index of the chip in the array.
+   */
+
+
+  var onEditChip = function onEditChip(text, index) {
+    // Let's check if we have to add value as a chip (in case we have entered something in the input field)
+    if (chipInput.value !== '') {
+      // Let's replace the chip
+      onRemoveChip(index, chipInput.value);
+    } else {
+      // Let's just remove the chip
+      onRemoveChip(index);
+    } // Let's update the text value of input field
+
+
+    chipInput.value = text;
+    setValue(text);
+  };
+  /**
+   * Return Chip Input component.
+   */
+
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [required && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.RequiredStar, {
+      children: "*"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChipStyles.ChipInputContainer, {
+      onClick: function onClick() {
+        return chipInput.focus();
+      },
+      id: inputId,
+      className: validationType,
+      children: [chips.map(function (chip, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.InputChip, {
+          icon: icon,
+          size: _types.Size.Medium,
+          variant: variants && variants.length && variants[index] ? variants[index] : 'normal',
+          text: chip,
+          onRemove: function onRemove() {
+            return onRemoveChip(index);
+          },
+          onClick: function onClick() {
+            return onEditChip(chip, index);
+          }
+        }, "chip_".concat(index));
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipInputEl, {
+        type: "text",
+        onChange: function onChange(event) {
+          return setValue(event.target.value);
+        },
+        onKeyDown: function onKeyDown(event) {
+          onAddChip(event);
+        },
+        placeholder: placeholder && chips.length === 0 ? placeholder : '',
+        ref: function ref(input) {
+          chipInput = input;
+        }
+      })]
+    }), validationMessage && validationType === 'warning' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.WarningMessage, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.TechnicalWarning, {
+        size: "20px",
+        color: _styles.COLORS.critical_500
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: validationMessage
+      })]
+    }) : validationType === 'error' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ErrorMessage, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.TechnicalWarning, {
+        size: "20px",
+        color: _styles.COLORS.critical_400
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: validationMessage
+      })]
+    })]
+  });
+};
+
+var _default = ChipInput;
+exports.default = _default;
+//# sourceMappingURL=ChipInput.cjs.map

package/dist/Chips/ChipInput.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Chips/ChipInput.tsx"],"names":["ChipInput","values","inputId","variants","required","icon","placeholder","validationType","validationMessage","onValueChange","chipInput","React","useState","chips","setChips","value","setValue","useEffect","onAddChip","event","keyCode","preventDefault","onRemoveChip","index","elementToAdd","newChips","splice","onEditChip","text","focus","map","chip","Size","Medium","length","target","input","COLORS","critical_500","critical_400"],"mappings":"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","sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport { InputChip } from './index';\r\nimport { Size } from '../types';\r\nimport { WarningMessage, ErrorMessage } from '../InputFields/styling';\r\nimport { COLORS } from '../styles';\r\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { ChipInputContainer, ChipInputEl, RequiredStar } from './ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport { ChipInputProps } from './ChipTypes';\r\n\r\nconst ChipInput: React.FunctionComponent<ChipInputProps> = ({\r\n  values,\r\n  inputId,\r\n  variants,\r\n  required,\r\n  icon,\r\n  placeholder,\r\n  validationType,\r\n  validationMessage,\r\n  onValueChange,\r\n}: ChipInputProps) => {\r\n  // Globally used variables within the chip input\r\n  let chipInput: HTMLInputElement;\r\n  const [chips, setChips] = React.useState<string[]>([]);\r\n  const [value, setValue] = React.useState<string>('');\r\n\r\n  /**\r\n   * Sets initial values for the chips.\r\n   */\r\n  React.useEffect(() => {\r\n    // Let's add initial chip values\r\n    setChips(values);\r\n  }, [values]);\r\n\r\n  /**\r\n   * Adds a chip to the chip list.\r\n   * @param event - Event handler from the key down event.\r\n   */\r\n  const onAddChip = (event: React.KeyboardEvent<HTMLInputElement>): void => {\r\n    // Let's trigger only on enter, comma and space key press\r\n    if ((event.keyCode === 13 || event.keyCode === 32 || event.keyCode === 188) && value) {\r\n      // Let's prevent default action - adding new key to the value\r\n      event.preventDefault();\r\n\r\n      // Let's add the chip\r\n      setChips([...chips, value]);\r\n      onValueChange([...chips, value]);\r\n\r\n      // Let's clear the old value\r\n      chipInput.value = '';\r\n      setValue('');\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Removes a specific chip from the chip list.\r\n   * @param index - Index of the chip that needs to be removed.\r\n   * @param elementToAdd - Element which needs to be added in the deleted element place.\r\n   */\r\n  const onRemoveChip = (index: number, elementToAdd?: string): void => {\r\n    // Let's copy the chips\r\n    const newChips = [...chips];\r\n\r\n    // Let's delete the chip\r\n    // If necessary, let's replace it with a different chip\r\n    if (elementToAdd) {\r\n      newChips.splice(index, 1, elementToAdd);\r\n    } else {\r\n      newChips.splice(index, 1);\r\n    }\r\n\r\n    // Let's update the chip list\r\n    setChips([...newChips]);\r\n    onValueChange([...newChips]);\r\n  };\r\n\r\n  /**\r\n   * Changes a status of the chip to edit.\r\n   * @param text - Text of the chip that is being edited.\r\n   * @param index - Index of the chip in the array.\r\n   */\r\n  const onEditChip = (text: string, index: number): void => {\r\n    // Let's check if we have to add value as a chip (in case we have entered something in the input field)\r\n    if (chipInput.value !== '') {\r\n      // Let's replace the chip\r\n      onRemoveChip(index, chipInput.value);\r\n    } else {\r\n      // Let's just remove the chip\r\n      onRemoveChip(index);\r\n    }\r\n\r\n    // Let's update the text value of input field\r\n    chipInput.value = text;\r\n    setValue(text);\r\n  };\r\n\r\n  /**\r\n   * Return Chip Input component.\r\n   */\r\n  return (\r\n    <>\r\n      {required && <RequiredStar>*</RequiredStar>}\r\n      <ChipInputContainer onClick={() => chipInput.focus()} id={inputId} className={validationType}>\r\n        {chips.map((chip: string, index: number) => (\r\n          <InputChip\r\n            icon={icon}\r\n            size={Size.Medium}\r\n            variant={variants && variants.length && variants[index] ? variants[index] : 'normal'}\r\n            text={chip}\r\n            onRemove={() => onRemoveChip(index)}\r\n            onClick={() => onEditChip(chip, index)}\r\n            key={`chip_${index}`}/>\r\n        ))}\r\n        <ChipInputEl\r\n          type=\"text\"\r\n          onChange={(event: React.ChangeEvent<HTMLInputElement>) => setValue(event.target.value)}\r\n          onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {\r\n            onAddChip(event);\r\n          }}\r\n          placeholder={placeholder && chips.length === 0 ? placeholder : ''}\r\n          ref={(input: HTMLInputElement) => {\r\n            chipInput = input;\r\n          }}\r\n        />\r\n      </ChipInputContainer>\r\n\r\n      {/* If there is an error, let's render the error */}\r\n      {validationMessage && validationType === 'warning' ? (\r\n        <WarningMessage>\r\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_500} />\r\n          <span>{validationMessage}</span>\r\n        </WarningMessage>\r\n      ) : (\r\n        validationType === 'error' && (\r\n          <ErrorMessage>\r\n            <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\r\n            <span>{validationMessage}</span>\r\n          </ErrorMessage>\r\n        )\r\n      )}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default ChipInput;\r\n"],"file":"ChipInput.cjs"}

package/dist/Chips/ChipInput.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+/**
+ * Import custom types.
+ */
+import { ChipInputProps } from './ChipTypes';
+declare const ChipInput: React.FunctionComponent<ChipInputProps>;
+export default ChipInput;