@laerdal/life-react-components 2.1.0-dev.3 → 2.1.0-dev.7

package/dist/InputFields/Label.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /**
  * Import React libraries.
  */
@@ -17,33 +17,43 @@ import { Size } from '../types';
  * Import third-party libraries.
  */
 import styled from 'styled-components';
-import { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';
+import { ComponentXS, ComponentXSStyling, ComponentXXS, ComponentXXSStyling, TypographyBase } from '../styles/typography';
 import { SystemIcons } from '../icons';
-
-// Add component-specific styles.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Label = styled.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  ", " {\n    ", "\n  }\n\n  &.small {\n    ", "\n  }\n  &.medium {\n    ", "\n  }\n\n  pointer-events: none;\n"])), ComponentXXSStyling(1, COLORS.neutral_500), BREAKPOINTS.MEDIUM, ComponentXSStyling(1, COLORS.neutral_500), ComponentXXSStyling(1, COLORS.neutral_500), ComponentXSStyling(1, COLORS.neutral_500));
+// Add component-specific styles.
+var Label = styled.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  ", " {\n    ", "\n  }\n\n  &.small {\n    ", "\n  }\n  &.medium {\n    ", "\n  }\n\n  pointer-events: none;\n  flex: 1;\n"])), ComponentXXSStyling(1, COLORS.neutral_500), BREAKPOINTS.MEDIUM, ComponentXSStyling(1, COLORS.neutral_500), ComponentXXSStyling(1, COLORS.neutral_500), ComponentXSStyling(1, COLORS.neutral_500));
 var LabelRow = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  ", "\n"])), function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 });
-var LabelRowInner = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  gap: ", ";\n  align-items: center;\n"])), function (props) {
+var CopyContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\n  &:visited:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled),\n  &.hover-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      text-decoration-line: underline;\n    }\n  }\n\n  &:focus:not(.disabled),\n  &.focus-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:active:not(.disabled),\n  &.active-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:not(.disabled)\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n\n  &.disabled\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n  cursor: pointer;\n"])), TypographyBase, COLORS.primary_800, TypographyBase, COLORS.primary_700, TypographyBase, COLORS.primary_700, TypographyBase, COLORS.primary_700, TypographyBase, COLORS.primary_600, TypographyBase, COLORS.neutral_300);
+var LabelRowInner = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  gap: ", ";\n  align-items: center;\n"])), function (props) {
   return props.size === Size.Small ? '2px' : '4px';
 });
 
 // Add component-specific types
-
+var CopyState;
+(function (CopyState) {
+  CopyState[CopyState["Disabled"] = 0] = "Disabled";
+  CopyState[CopyState["Available"] = 1] = "Available";
+  CopyState[CopyState["Copied"] = 2] = "Copied";
+})(CopyState || (CopyState = {}));
 var InputLabel = function InputLabel(_ref) {
   var inputId = _ref.inputId,
     text = _ref.text,
     size = _ref.size,
     margin = _ref.margin,
-    requiredProp = _ref.required;
+    requiredProp = _ref.required,
+    showCopyButton = _ref.showCopyButton;
   // Globally used variables within the component
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     required = _React$useState2[0],
     setRequired = _React$useState2[1];
+  var _React$useState3 = React.useState(CopyState.Available),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    copyState = _React$useState4[0],
+    setCopyState = _React$useState4[1];
 
   /**
    * Checks if field is set as required and we have to mark it accordingly.
@@ -66,6 +76,19 @@ var InputLabel = function InputLabel(_ref) {
     var _document$getElementB2;
     (_document$getElementB2 = document.getElementById(id)) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.click();
   };
+  var copyInputClick = function copyInputClick(e) {
+    var _document$getElementB3;
+    e.preventDefault();
+    if (copyState == CopyState.Copied) return;
+    var val = (_document$getElementB3 = document.getElementById(inputId)) === null || _document$getElementB3 === void 0 ? void 0 : _document$getElementB3.value;
+    if (val) {
+      window.navigator.clipboard.writeText(val);
+      setCopyState(CopyState.Copied);
+      setTimeout(function () {
+        setCopyState(CopyState.Available);
+      }, 1000);
+    }
+  };
   return /*#__PURE__*/_jsx(LabelRow, {
     margin: margin,
     children: /*#__PURE__*/_jsxs(LabelRowInner, {
@@ -80,6 +103,14 @@ var InputLabel = function InputLabel(_ref) {
         },
         className: size || '',
         children: text
+      }), showCopyButton && /*#__PURE__*/_jsx(CopyContainer, {
+        className: copyState != CopyState.Available ? "disabled" : "",
+        onClick: copyInputClick,
+        children: size == Size.Medium ? /*#__PURE__*/_jsx(ComponentXS, {
+          children: copyState == CopyState.Copied ? 'Copied' : 'Copy'
+        }) : /*#__PURE__*/_jsx(ComponentXXS, {
+          children: copyState == CopyState.Copied ? 'Copied' : 'Copy'
+        })
       })]
     })
   });
@@ -88,7 +119,8 @@ InputLabel.propTypes = {
   inputId: _pt.string.isRequired,
   text: _pt.string.isRequired,
   margin: _pt.string,
-  required: _pt.bool
+  required: _pt.bool,
+  showCopyButton: _pt.bool
 };
 export default InputLabel;
 //# sourceMappingURL=Label.js.map

package/dist/InputFields/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","names":["React","BREAKPOINTS","COLORS","Size","styled","ComponentXSStyling","ComponentXXSStyling","SystemIcons","Label","label","neutral_500","MEDIUM","LabelRow","div","props","margin","LabelRowInner","size","Small","InputLabel","inputId","text","requiredProp","required","useState","setRequired","useEffect","undefined","document","getElementById","getAttribute","Boolean","onTriggerClick","id","click","critical_500"],"sources":["../../src/InputFields/Label.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\nimport { SystemIcons } from '../icons';\n\n// Add component-specific styles.\nconst Label = styled.label`\n  ${ComponentXXSStyling(1, COLORS.neutral_500)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  &.small {\n    ${ComponentXXSStyling(1, COLORS.neutral_500)}\n  }\n  &.medium {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  pointer-events: none;\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst LabelRowInner = styled.div<{ size: Size.Small | Size.Medium | undefined }>`\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  gap: ${(props) => (props.size === Size.Small ? '2px' : '4px')};\n  align-items: center;\n`;\n\n// Add component-specific types\ntype LabelProps = {\n  inputId: string;\n  text: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  required?: boolean;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin, required: requiredProp }: LabelProps) => {\n  // Globally used variables within the component\n  const [required, setRequired] = React.useState<boolean>(false);\n\n  /**\n   * Checks if field is set as required and we have to mark it accordingly.\n   */\n  React.useEffect(() => {\n    if(requiredProp === undefined)\n    {\n      if (document.getElementById(inputId)?.getAttribute('required') === '') {\n        setRequired(true);\n      } else {\n        setRequired(false);\n      }\n    }\n    else\n      setRequired(Boolean(requiredProp));\n  }, []);\n  /**\n   * Triggers a click element on a specific element.\n   * @param id - ID of the element which needs to be clicked.\n   */\n  const onTriggerClick = (id: string): void => {\n    document.getElementById(id)?.click();\n  };\n\n  return (\n    <LabelRow margin={margin}>\n      <LabelRowInner size={size}>\n        {required && <SystemIcons.Asterisk size=\"16px\" color={COLORS.critical_500} />}\n        <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n          {text}\n        </Label>\n      </LabelRowInner>\n    </LabelRow>\n  );\n};\n\nexport default InputLabel;\n"],"mappings":";;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;AACA,SAASC,WAAW,EAAEC,MAAM,QAAQ,WAAW;AAC/C,SAASC,IAAI,QAAQ,UAAU;;AAE/B;AACA;AACA;AACA,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,kBAAkB,EAAEC,mBAAmB,QAAQ,sBAAsB;AAC9E,SAASC,WAAW,QAAQ,UAAU;;AAEtC;AAAA;AAAA;AACA,IAAMC,KAAK,GAAGJ,MAAM,CAACK,KAAK,iMACtBH,mBAAmB,CAAC,CAAC,EAAEJ,MAAM,CAACQ,WAAW,CAAC,EAE1CT,WAAW,CAACU,MAAM,EAChBN,kBAAkB,CAAC,CAAC,EAAEH,MAAM,CAACQ,WAAW,CAAC,EAIzCJ,mBAAmB,CAAC,CAAC,EAAEJ,MAAM,CAACQ,WAAW,CAAC,EAG1CL,kBAAkB,CAAC,CAAC,EAAEH,MAAM,CAACQ,WAAW,CAAC,CAI9C;AAED,IAAME,QAAQ,GAAGR,MAAM,CAACS,GAAG,iJAIvB,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACC,MAAM,qBAAcD,KAAK,CAACC,MAAM,SAAM,EAAE;AAAA,CAAC,CAC9D;AAED,IAAMC,aAAa,GAAGZ,MAAM,CAACS,GAAG,2KAIvB,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACG,IAAI,KAAKd,IAAI,CAACe,KAAK,GAAG,KAAK,GAAG,KAAK;AAAA,CAAC,CAE9D;;AAED;;AASA,IAAMC,UAA+C,GAAG,SAAlDA,UAA+C,OAA4E;EAAA,IAAtEC,OAAO,QAAPA,OAAO;IAAEC,IAAI,QAAJA,IAAI;IAAEJ,IAAI,QAAJA,IAAI;IAAEF,MAAM,QAANA,MAAM;IAAYO,YAAY,QAAtBC,QAAQ;EAC9F;EACA,sBAAgCvB,KAAK,CAACwB,QAAQ,CAAU,KAAK,CAAC;IAAA;IAAvDD,QAAQ;IAAEE,WAAW;;EAE5B;AACF;AACA;EACEzB,KAAK,CAAC0B,SAAS,CAAC,YAAM;IACpB,IAAGJ,YAAY,KAAKK,SAAS,EAC7B;MAAA;MACE,IAAI,0BAAAC,QAAQ,CAACC,cAAc,CAACT,OAAO,CAAC,0DAAhC,sBAAkCU,YAAY,CAAC,UAAU,CAAC,MAAK,EAAE,EAAE;QACrEL,WAAW,CAAC,IAAI,CAAC;MACnB,CAAC,MAAM;QACLA,WAAW,CAAC,KAAK,CAAC;MACpB;IACF,CAAC,MAECA,WAAW,CAACM,OAAO,CAACT,YAAY,CAAC,CAAC;EACtC,CAAC,EAAE,EAAE,CAAC;EACN;AACF;AACA;AACA;EACE,IAAMU,cAAc,GAAG,SAAjBA,cAAc,CAAIC,EAAU,EAAW;IAAA;IAC3C,0BAAAL,QAAQ,CAACC,cAAc,CAACI,EAAE,CAAC,2DAA3B,uBAA6BC,KAAK,EAAE;EACtC,CAAC;EAED,oBACE,KAAC,QAAQ;IAAC,MAAM,EAAEnB,MAAO;IAAA,uBACvB,MAAC,aAAa;MAAC,IAAI,EAAEE,IAAK;MAAA,WACvBM,QAAQ,iBAAI,KAAC,WAAW,CAAC,QAAQ;QAAC,IAAI,EAAC,MAAM;QAAC,KAAK,EAAErB,MAAM,CAACiC;MAAa,EAAG,eAC7E,KAAC,KAAK;QAAC,OAAO,EAAEf,OAAQ;QAAC,OAAO,EAAE;UAAA,OAAMY,cAAc,CAACZ,OAAO,CAAC;QAAA,CAAC;QAAC,SAAS,EAAEH,IAAI,IAAI,EAAG;QAAA,UACpFI;MAAI,EACC;IAAA;EACM,EACP;AAEf,CAAC;AAAC;EA5CAD,OAAO;EACPC,IAAI;EAEJN,MAAM;EACNQ,QAAQ;AAAA;AA0CV,eAAeJ,UAAU"}
+{"version":3,"file":"Label.js","names":["React","BREAKPOINTS","COLORS","Size","styled","ComponentXS","ComponentXSStyling","ComponentXXS","ComponentXXSStyling","TypographyBase","SystemIcons","Label","label","neutral_500","MEDIUM","LabelRow","div","props","margin","CopyContainer","primary_800","primary_700","primary_600","neutral_300","LabelRowInner","size","Small","CopyState","InputLabel","inputId","text","requiredProp","required","showCopyButton","useState","setRequired","Available","copyState","setCopyState","useEffect","undefined","document","getElementById","getAttribute","Boolean","onTriggerClick","id","click","copyInputClick","e","preventDefault","Copied","val","value","window","navigator","clipboard","writeText","setTimeout","critical_500","Medium"],"sources":["../../src/InputFields/Label.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXS, ComponentXSStyling, ComponentXXS, ComponentXXSStyling, TypographyBase } from '../styles/typography';\nimport { SystemIcons } from '../icons';\nimport {HyperLink, StyledLink} from '../HyperLink';\n\n// Add component-specific styles.\nconst Label = styled.label`\n  ${ComponentXXSStyling(1, COLORS.neutral_500)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  &.small {\n    ${ComponentXXSStyling(1, COLORS.neutral_500)}\n  }\n  &.medium {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  pointer-events: none;\n  flex: 1;\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst CopyContainer = styled.div`\n\n  &:visited:not(.disabled) {\n    ${TypographyBase}\n    {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &:hover:not(.disabled),\n  &.hover-state:not(.disabled) {\n    ${TypographyBase}\n    {\n      color: ${COLORS.primary_700};\n      text-decoration-line: underline;\n    }\n  }\n\n  &:focus:not(.disabled),\n  &.focus-state:not(.disabled) {\n    ${TypographyBase}\n    {\n      color: ${COLORS.primary_700};\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:active:not(.disabled),\n  &.active-state:not(.disabled) {\n    ${TypographyBase}\n    {\n      color: ${COLORS.primary_700};\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:not(.disabled)\n  {\n    ${TypographyBase}\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ${COLORS.primary_600};\n    }\n  }\n\n  &.disabled\n  {\n    ${TypographyBase}\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ${COLORS.neutral_300};\n    }\n  }\n  cursor: pointer;\n`;\n\nconst LabelRowInner = styled.div<{ size: Size.Small | Size.Medium | undefined }>`\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  gap: ${(props) => (props.size === Size.Small ? '2px' : '4px')};\n  align-items: center;\n`;\n\n// Add component-specific types\ntype LabelProps = {\n  inputId: string;\n  text: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  required?: boolean;\n  showCopyButton?: boolean;\n};\n\nenum CopyState {\n  Disabled = 0,\n  Available = 1,\n  Copied = 2\n}\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin, required: requiredProp, showCopyButton }: LabelProps) => {\n  // Globally used variables within the component\n  const [required, setRequired] = React.useState<boolean>(false);\n  const [copyState, setCopyState] = React.useState<CopyState>(CopyState.Available);\n\n  /**\n   * Checks if field is set as required and we have to mark it accordingly.\n   */\n  React.useEffect(() => {\n    if(requiredProp === undefined)\n    {\n      if (document.getElementById(inputId)?.getAttribute('required') === '') {\n        setRequired(true);\n      } else {\n        setRequired(false);\n      }\n    }\n    else\n      setRequired(Boolean(requiredProp));\n  }, []);\n  /**\n   * Triggers a click element on a specific element.\n   * @param id - ID of the element which needs to be clicked.\n   */\n  const onTriggerClick = (id: string): void => {\n    document.getElementById(id)?.click();\n  };\n\n  const copyInputClick = (e: any) => {\n    e.preventDefault();\n    if(copyState == CopyState.Copied)\n      return;\n    \n    const val = (document.getElementById(inputId) as HTMLInputElement)?.value;\n    if(val)\n    {\n      window.navigator.clipboard.writeText(val);\n      setCopyState(CopyState.Copied);\n      setTimeout(() => {\n        setCopyState(CopyState.Available);\n      }, 1000);\n    }\n  };\n\n  return (\n    <LabelRow margin={margin}>\n      <LabelRowInner size={size}>\n        {required && <SystemIcons.Asterisk size=\"16px\" color={COLORS.critical_500} />}\n        <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n          {text}\n        </Label>\n        {showCopyButton && \n        <CopyContainer className={copyState != CopyState.Available ? \"disabled\" : \"\"} onClick={copyInputClick}>\n          { size == Size.Medium ? <ComponentXS>{copyState == CopyState.Copied ? 'Copied' : 'Copy'}</ComponentXS> :\n          <ComponentXXS>{copyState == CopyState.Copied ? 'Copied' : 'Copy'}</ComponentXXS> }\n        </CopyContainer> }\n      </LabelRowInner>\n    </LabelRow>\n  );\n};\n\nexport default InputLabel;\n"],"mappings":"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"}

package/dist/InputFields/QuickSearch.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Size } from '../types';
-declare type QuickSearchProps = {
+type QuickSearchProps = {
     id: string;
     searchTerm?: string;
     setSearchTerm: (term: string) => void;

package/dist/InputFields/ResponsiveComponentWrapper.d.ts

@@ -3,7 +3,7 @@
  */
 import * as React from 'react';
 import { Size } from '../types';
-declare type LabelProps = {
+type LabelProps = {
     size?: Size.Small | Size.Medium;
     children?: any;
 };

package/dist/InputFields/SearchBar.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Size } from '../types';
 import { DropdownItem } from '../Dropdown';
-declare type SeachBarProps = {
+type SeachBarProps = {
     id: string;
     searchTerm?: string;
     setSearchTerm: (term: string) => void;

package/dist/InputFields/components/SearchBarInput.d.ts

@@ -3,7 +3,7 @@ import { Size } from '../../types';
 export declare const Search: import("styled-components").StyledComponent<"input", any, {
     type: "search";
 }, "type">;
-declare type SearchBarInputProps = {
+type SearchBarInputProps = {
     id: string;
     searchTerm?: string;
     setSearchTerm: (term: string) => void;

package/dist/InputFields/types.d.ts

@@ -1,6 +1,6 @@
 import { Size } from '../types';
 import React from 'react';
-export declare type TextFieldProps = {
+export type TextFieldProps = {
     id: string;
     disabled?: boolean;
     readOnly?: boolean;
@@ -19,7 +19,7 @@ export declare type TextFieldProps = {
     margin?: string;
     note?: TextFieldNote;
 };
-export declare type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'placeholder' | 'disabled' | 'required' | 'onChange'> & {
+export type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'placeholder' | 'disabled' | 'required' | 'onChange'> & {
     id: string;
     placeholder: string;
     value?: string;
@@ -33,7 +33,7 @@ export declare type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAr
     note?: TextFieldNote;
     required: boolean;
 };
-export declare type TextFieldNote = {
+export type TextFieldNote = {
     message: string;
     icon: React.ReactNode;
 };

package/dist/List/ListRow.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DropdownButtonProps } from '../Dropdown/DropdownButtonTypes';
 import { Size } from '../types';
-declare type Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown'> & {
+type Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown'> & {
     size?: Size;
     variant?: 'normal' | 'overlay';
     icon?: React.ReactNode;

package/dist/LoadingIndicator/LoadingIndicator.d.ts

@@ -1,5 +1,5 @@
 import { Size } from '../types';
-declare type LoadingIndicatorProps = {
+type LoadingIndicatorProps = {
     id?: string;
     size?: Size.Small | Size.Medium;
     color?: string;

package/dist/MiniProductCard/MiniProductCard.d.ts

@@ -1,5 +1,5 @@
 import { Product } from '../types';
-declare type CardProps = {
+type CardProps = {
     product: Product;
     url?: string;
 };

package/dist/Modals/Modal.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 export declare const ModalCloseButton: React.FunctionComponent<{
     onClick: () => void;
 }>;
-declare type ModalProps = {
+type ModalProps = {
     children: any;
 };
 declare const Modal: {

package/dist/Modals/ModalContainer.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare type ModalContainerProps = {
+type ModalContainerProps = {
     id?: string;
     showModal: boolean;
     closeModal: () => void;
@@ -12,7 +12,7 @@ declare type ModalContainerProps = {
     maxWidth?: string;
     zIndex?: number;
 };
-declare type ModalContainerState = {
+type ModalContainerState = {
     scroll: number;
 };
 declare class ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {

package/dist/Modals/ModalTypes.d.ts

@@ -20,4 +20,4 @@ export interface LeftFooterHyperlink extends HyperlinkProps, LeftFooterActionBas
 export interface LeftFooterButton extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'>, LeftFooterActionBase {
     text: string;
 }
-export declare type LeftFooterAction = LeftFooterButton | LeftFooterHyperlink;
+export type LeftFooterAction = LeftFooterButton | LeftFooterHyperlink;

package/dist/NavItem/NavItem.d.ts

@@ -1,6 +1,6 @@
 import { StyledComponentProps } from 'styled-components';
 import React from 'react';
-export declare type StyledComponentPropsWithAs<C extends string | React.ComponentType<any>, T extends object, O extends object, A extends keyof any, AsC extends string | React.ComponentType<any> = C, FAsC extends string | React.ComponentType<any> = C> = StyledComponentProps<C, T, O, A, FAsC> & {
+export type StyledComponentPropsWithAs<C extends string | React.ComponentType<any>, T extends object, O extends object, A extends keyof any, AsC extends string | React.ComponentType<any> = C, FAsC extends string | React.ComponentType<any> = C> = StyledComponentProps<C, T, O, A, FAsC> & {
     as?: AsC | undefined;
     forwardedAs?: FAsC | undefined;
 };

package/dist/Paginator/Paginator.d.ts

@@ -1,4 +1,4 @@
-declare type PaginatorProps = {
+type PaginatorProps = {
     pageCount: number;
     currentPage: number;
     baseUrl: string;

package/dist/Popover/Popover.d.ts

@@ -1,19 +1,19 @@
 import * as React from 'react';
 import { Position, Size } from '../types';
-declare type topSectionProps = {
+type topSectionProps = {
     text: string;
     note?: string;
 };
-declare type actionButtonProps = {
+type actionButtonProps = {
     icon: React.ReactNode;
     action: () => void;
     label?: string;
 };
-declare type bottomSectionProps = {
+type bottomSectionProps = {
     iconButtons?: actionButtonProps[];
     textButton?: actionButtonProps;
 };
-declare type PopoverProps = {
+type PopoverProps = {
     size?: Size.Small | Size.Medium | Size.Large;
     topSectionProps?: topSectionProps;
     bottomSectionProps?: bottomSectionProps;

package/dist/ProfileButton/ProfileButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare type ProfileButtonProps = {
+export type ProfileButtonProps = {
     portraitSrc?: string;
     icon?: React.ReactNode;
     initials?: string;

package/dist/QuizButton/QuizButton.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Size } from '..';
-declare type QuizButtonProps = {
+type QuizButtonProps = {
     resultType?: 'correct' | 'incorrect' | 'partial';
     text: string;
     onClick?: (arg: any) => void;

package/dist/SideMenu/types.d.ts

@@ -2,13 +2,13 @@ import { ButtonProps } from '../Button/Button';
 import { IconButtonProps } from '../Button/Iconbutton';
 import { MenuItemProps } from '../MenuItem/MenuItem';
 import { Size } from '../types';
-export declare type SideMenuAction = Omit<IconButtonProps, 'variant' | 'shape' | 'isInMobileMenu' | 'borderRadius' | 'flatEdge' | 'focusBackgroundColor' | 'useTransparentBackground' | 'unsetIconSize' | 'shouldNotInteract' | 'invertFocus' | 'hideOnLowWidth' | 'children'> & {
+export type SideMenuAction = Omit<IconButtonProps, 'variant' | 'shape' | 'isInMobileMenu' | 'borderRadius' | 'flatEdge' | 'focusBackgroundColor' | 'useTransparentBackground' | 'unsetIconSize' | 'shouldNotInteract' | 'invertFocus' | 'hideOnLowWidth' | 'children'> & {
     icon: React.ReactNode;
 };
-export declare type SideMenuButton = Omit<ButtonProps, 'size' | 'iconOnly' | 'minWidth' | 'testId' | 'width' | 'invertFocus' | 'colorTheme' | 'flatEdge' | 'children'> & {
+export type SideMenuButton = Omit<ButtonProps, 'size' | 'iconOnly' | 'minWidth' | 'testId' | 'width' | 'invertFocus' | 'colorTheme' | 'flatEdge' | 'children'> & {
     label: string;
 };
-export declare type SideMenuItem = Omit<MenuItemProps, 'size'>;
+export type SideMenuItem = Omit<MenuItemProps, 'size'>;
 export interface SideMenuHeader {
     actions?: SideMenuAction[];
     label?: string;

package/dist/SkipToContent/SkipToContent.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare type SkipToContentProps = {
+export type SkipToContentProps = {
     children: React.ReactNode;
 };
 declare const SkipToContent: React.FunctionComponent<SkipToContentProps>;

package/dist/Table/TableTypes.d.ts

@@ -51,10 +51,10 @@ export interface TableColumn {
     customContent?: (row: any, key: string) => any;
     sortable?: boolean;
 }
-export declare type TableColumnTypes = 'text' | 'boolean' | 'number' | 'custom' | 'button' | 'icon' | 'link';
-export declare type TableJustification = 'right' | 'left' | 'center';
-export declare type TableSortingDirection = 'asc' | 'desc';
-export declare type TableLayout = 'auto' | 'fixed';
+export type TableColumnTypes = 'text' | 'boolean' | 'number' | 'custom' | 'button' | 'icon' | 'link';
+export type TableJustification = 'right' | 'left' | 'center';
+export type TableSortingDirection = 'asc' | 'desc';
+export type TableLayout = 'auto' | 'fixed';
 export interface TablePagination {
     from: number;
     to: number;

package/dist/Tabs/TabLink.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { NavLinkProps } from 'react-router-dom';
 import { Size } from '../types';
-declare type TabLinkProps = {
+type TabLinkProps = {
     disabled?: boolean;
     requiredLine: string;
     optionalLine?: string;

package/dist/Tabs/Tabs.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Size } from '../types';
-declare type TabsProps = {
+type TabsProps = {
     children?: any;
     size: Size;
 };

package/dist/Tag/Tag.cjs

@@ -20,13 +20,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 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) { (0, _defineProperty2.default)(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; }
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: 24px;\n  width: calc(100%);\n  justify-content: center;\n  max-width: fit-content;\n  min-width: ", ";\n  border-radius: 2px;\n\n  &.neutral {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.positive {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.warning {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.critical {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent1 {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent2 {\n    background-color: ", ";\n    color: ", ";\n  }\n\n"])), function (props) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: 4px;\n  height: 24px;\n  width: calc(100%);\n  max-width: fit-content;\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  border-radius: 2px;\n  box-sizing: border-box;\n\n  &.neutral {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.positive {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.warning {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.critical {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent1 {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent2 {\n    background-color: ", ";\n    color: ", ";\n  }\n\n"])), function (props) {
   return props.isLabelPresent ? '64px' : '';
 }, _.COLORS.neutral_100, _.COLORS.neutral_600, _.COLORS.correct_100, _.COLORS.correct_600, _.COLORS.warning_100, _.COLORS.warning_600, _.COLORS.critical_100, _.COLORS.critical_600, _.COLORS.accent1_100, _.COLORS.accent1_600, _.COLORS.accent2_100, _.COLORS.accent2_600);
-var IconContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 2px;\n  margin: 4px;\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"])));
-var TextContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 2px;\n  margin: ", ";\n  height: 16px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ", "\n"])), function (props) {
-  return props.icon ? "4px 8px 4px 0" : "4px 8px";
-}, (0, _.ComponentXSStyling)(_.ComponentTextStyle.Bold, null));
+var IconContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 16px;\n  height: 16px;\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"])));
+var TextContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: 16px;\n  padding: 0 4px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ", "\n"])), (0, _.ComponentXSStyling)(_.ComponentTextStyle.Bold, null));
 var Tag = function Tag(_ref) {
   var label = _ref.label,
     icon = _ref.icon,

package/dist/Tag/Tag.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs","names":["Container","styled","div","props","isLabelPresent","COLORS","neutral_100","neutral_600","correct_100","correct_600","warning_100","warning_600","critical_100","critical_600","accent1_100","accent1_600","accent2_100","accent2_600","IconContainer","TextContainer","icon","ComponentXSStyling","ComponentTextStyle","Bold","Tag","label","variant","className","rest","cls"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\n  display: flex;\n  height: 24px;\n  width: calc(100%);\n  justify-content: center;\n  max-width: fit-content;\n  min-width: ${props=>props.isLabelPresent ? '64px' : ''};\n  border-radius: 2px;\n\n  &.neutral {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_600};\n  }\n  &.positive {\n    background-color: ${COLORS.correct_100};\n    color: ${COLORS.correct_600};\n  }\n  &.warning {\n    background-color: ${COLORS.warning_100};\n    color: ${COLORS.warning_600};\n  }\n  &.critical {\n    background-color: ${COLORS.critical_100};\n    color: ${COLORS.critical_600};\n  }\n  &.accent1 {\n    background-color: ${COLORS.accent1_100};\n    color: ${COLORS.accent1_600};\n  }\n  &.accent2 {\n    background-color: ${COLORS.accent2_100};\n    color: ${COLORS.accent2_600};\n  }\n\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n  border-radius: 2px;\n  margin: 4px;\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n  border-radius: 2px;\n  margin: ${props=> props.icon ? `4px 8px 4px 0` : `4px 8px`};\n  height: 16px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = React.HTMLAttributes<HTMLDivElement> & {\n  label?: string;\n  icon?: React.ReactNode;\n  variant?: TagVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\n  const cls = `${className ?? ''} ${variant}`;\n  return (   \n    <Container variant={variant} isLabelPresent={!!label} className={cls} {...rest}>\n      {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n          {icon}\n        </IconContainer>\n      }\n      {label && <TextContainer variant={variant} icon={icon}>\n          {label}\n        </TextContainer>\n      }\n    </Container>\n  );\n};\n\nexport default Tag;\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AAAoE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEpE,IAAMA,SAAS,GAAGC,yBAAM,CAACC,GAAG,yoBAMb,UAAAC,KAAK;EAAA,OAAEA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,EAAE;AAAA,GAIhCC,QAAM,CAACC,WAAW,EAC7BD,QAAM,CAACE,WAAW,EAGPF,QAAM,CAACG,WAAW,EAC7BH,QAAM,CAACI,WAAW,EAGPJ,QAAM,CAACK,WAAW,EAC7BL,QAAM,CAACM,WAAW,EAGPN,QAAM,CAACO,YAAY,EAC9BP,QAAM,CAACQ,YAAY,EAGRR,QAAM,CAACS,WAAW,EAC7BT,QAAM,CAACU,WAAW,EAGPV,QAAM,CAACW,WAAW,EAC7BX,QAAM,CAACY,WAAW,CAG9B;AAED,IAAMC,aAAa,GAAGjB,yBAAM,CAACC,GAAG,iLAO/B;AAED,IAAMiB,aAAa,GAAGlB,yBAAM,CAACC,GAAG,oOAEpB,UAAAC,KAAK;EAAA,OAAGA,KAAK,CAACiB,IAAI,8BAA8B;AAAA,GAKxD,IAAAC,oBAAkB,EAACC,oBAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,CACpD;AAWD,IAAMC,GAAsC,GAAG,SAAzCA,GAAsC,OAA6D;EAAA,IAAxDC,KAAK,QAALA,KAAK;IAAEL,IAAI,QAAJA,IAAI;IAAA,oBAAEM,OAAO;IAAPA,OAAO,6BAAC,SAAS;IAAEC,SAAS,QAATA,SAAS;IAAKC,IAAI;EACjG,IAAMC,GAAG,aAAMF,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,cAAID,OAAO,CAAE;EAC3C,oBACE,sBAAC,SAAS;IAAC,OAAO,EAAEA,OAAQ;IAAC,cAAc,EAAE,CAAC,CAACD,KAAM;IAAC,SAAS,EAAEI;EAAI,GAAKD,IAAI;IAAA,WAC3ER,IAAI,iBAAI,qBAAC,aAAa;MAAC,OAAO,EAAEM,OAAQ;MAAC,eAAa,eAAgB;MAAA,UAClEN;IAAI,EACS,EAEjBK,KAAK,iBAAI,qBAAC,aAAa;MAAC,OAAO,EAAEC,OAAQ;MAAC,IAAI,EAAEN,IAAK;MAAA,UACjDK;IAAK,EACQ;EAAA,GAER;AAEhB,CAAC;AAAC;EAnBAA,KAAK;EACLL,IAAI;EACJM,OAAO,4BALiB,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,SAAS;AAAA;AAAA,eAwBlFF,GAAG;AAAA"}
+{"version":3,"file":"Tag.cjs","names":["Container","styled","div","props","isLabelPresent","COLORS","neutral_100","neutral_600","correct_100","correct_600","warning_100","warning_600","critical_100","critical_600","accent1_100","accent1_600","accent2_100","accent2_600","IconContainer","TextContainer","ComponentXSStyling","ComponentTextStyle","Bold","Tag","label","icon","variant","className","rest","cls"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\n  display: flex;\n  padding: 4px;\n  height: 24px;\n  width: calc(100%);\n  max-width: fit-content;\n  align-items: center;\n  justify-content: center;\n  min-width: ${props=>props.isLabelPresent ? '64px' : ''};\n  border-radius: 2px;\n  box-sizing: border-box;\n\n  &.neutral {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_600};\n  }\n  &.positive {\n    background-color: ${COLORS.correct_100};\n    color: ${COLORS.correct_600};\n  }\n  &.warning {\n    background-color: ${COLORS.warning_100};\n    color: ${COLORS.warning_600};\n  }\n  &.critical {\n    background-color: ${COLORS.critical_100};\n    color: ${COLORS.critical_600};\n  }\n  &.accent1 {\n    background-color: ${COLORS.accent1_100};\n    color: ${COLORS.accent1_600};\n  }\n  &.accent2 {\n    background-color: ${COLORS.accent2_100};\n    color: ${COLORS.accent2_600};\n  }\n\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n  display: flex;\n  width: 16px;\n  height: 16px;\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n  height: 16px;\n  padding: 0 4px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = React.HTMLAttributes<HTMLDivElement> & {\n  label?: string;\n  icon?: React.ReactNode;\n  variant?: TagVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\n  const cls = `${className ?? ''} ${variant}`;\n  return (   \n    <Container variant={variant} isLabelPresent={!!label} className={cls} {...rest}>\n      {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n          {icon}\n        </IconContainer>\n      }\n      {label && <TextContainer variant={variant} icon={icon}>\n          {label}\n        </TextContainer>\n      }\n    </Container>\n  );\n};\n\nexport default Tag;\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AAAoE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEpE,IAAMA,SAAS,GAAGC,yBAAM,CAACC,GAAG,6sBAQb,UAAAC,KAAK;EAAA,OAAEA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,EAAE;AAAA,GAKhCC,QAAM,CAACC,WAAW,EAC7BD,QAAM,CAACE,WAAW,EAGPF,QAAM,CAACG,WAAW,EAC7BH,QAAM,CAACI,WAAW,EAGPJ,QAAM,CAACK,WAAW,EAC7BL,QAAM,CAACM,WAAW,EAGPN,QAAM,CAACO,YAAY,EAC9BP,QAAM,CAACQ,YAAY,EAGRR,QAAM,CAACS,WAAW,EAC7BT,QAAM,CAACU,WAAW,EAGPV,QAAM,CAACW,WAAW,EAC7BX,QAAM,CAACY,WAAW,CAG9B;AAED,IAAMC,aAAa,GAAGjB,yBAAM,CAACC,GAAG,6LAQ/B;AAED,IAAMiB,aAAa,GAAGlB,yBAAM,CAACC,GAAG,+MAM5B,IAAAkB,oBAAkB,EAACC,oBAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,CACpD;AAWD,IAAMC,GAAsC,GAAG,SAAzCA,GAAsC,OAA6D;EAAA,IAAxDC,KAAK,QAALA,KAAK;IAAEC,IAAI,QAAJA,IAAI;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAC,SAAS;IAAEC,SAAS,QAATA,SAAS;IAAKC,IAAI;EACjG,IAAMC,GAAG,aAAMF,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,cAAID,OAAO,CAAE;EAC3C,oBACE,sBAAC,SAAS;IAAC,OAAO,EAAEA,OAAQ;IAAC,cAAc,EAAE,CAAC,CAACF,KAAM;IAAC,SAAS,EAAEK;EAAI,GAAKD,IAAI;IAAA,WAC3EH,IAAI,iBAAI,qBAAC,aAAa;MAAC,OAAO,EAAEC,OAAQ;MAAC,eAAa,eAAgB;MAAA,UAClED;IAAI,EACS,EAEjBD,KAAK,iBAAI,qBAAC,aAAa;MAAC,OAAO,EAAEE,OAAQ;MAAC,IAAI,EAAED,IAAK;MAAA,UACjDD;IAAK,EACQ;EAAA,GAER;AAEhB,CAAC;AAAC;EAnBAA,KAAK;EACLC,IAAI;EACJC,OAAO,4BALiB,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,SAAS;AAAA;AAAA,eAwBlFH,GAAG;AAAA"}

package/dist/Tag/Tag.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-export declare type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';
-declare type TagProps = React.HTMLAttributes<HTMLDivElement> & {
+export type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';
+type TagProps = React.HTMLAttributes<HTMLDivElement> & {
     label?: string;
     icon?: React.ReactNode;
     variant?: TagVariants;

package/dist/Tag/Tag.js

@@ -11,13 +11,11 @@ import styled from 'styled-components';
 import { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  height: 24px;\n  width: calc(100%);\n  justify-content: center;\n  max-width: fit-content;\n  min-width: ", ";\n  border-radius: 2px;\n\n  &.neutral {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.positive {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.warning {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.critical {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent1 {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent2 {\n    background-color: ", ";\n    color: ", ";\n  }\n\n"])), function (props) {
+var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 4px;\n  height: 24px;\n  width: calc(100%);\n  max-width: fit-content;\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  border-radius: 2px;\n  box-sizing: border-box;\n\n  &.neutral {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.positive {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.warning {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.critical {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent1 {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent2 {\n    background-color: ", ";\n    color: ", ";\n  }\n\n"])), function (props) {
   return props.isLabelPresent ? '64px' : '';
 }, COLORS.neutral_100, COLORS.neutral_600, COLORS.correct_100, COLORS.correct_600, COLORS.warning_100, COLORS.warning_600, COLORS.critical_100, COLORS.critical_600, COLORS.accent1_100, COLORS.accent1_600, COLORS.accent2_100, COLORS.accent2_600);
-var IconContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: 2px;\n  margin: 4px;\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"])));
-var TextContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border-radius: 2px;\n  margin: ", ";\n  height: 16px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ", "\n"])), function (props) {
-  return props.icon ? "4px 8px 4px 0" : "4px 8px";
-}, ComponentXSStyling(ComponentTextStyle.Bold, null));
+var IconContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 16px;\n  height: 16px;\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"])));
+var TextContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 16px;\n  padding: 0 4px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null));
 var Tag = function Tag(_ref) {
   var label = _ref.label,
     icon = _ref.icon,

package/dist/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Container","div","props","isLabelPresent","neutral_100","neutral_600","correct_100","correct_600","warning_100","warning_600","critical_100","critical_600","accent1_100","accent1_600","accent2_100","accent2_600","IconContainer","TextContainer","icon","Bold","Tag","label","variant","className","rest","cls"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\n  display: flex;\n  height: 24px;\n  width: calc(100%);\n  justify-content: center;\n  max-width: fit-content;\n  min-width: ${props=>props.isLabelPresent ? '64px' : ''};\n  border-radius: 2px;\n\n  &.neutral {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_600};\n  }\n  &.positive {\n    background-color: ${COLORS.correct_100};\n    color: ${COLORS.correct_600};\n  }\n  &.warning {\n    background-color: ${COLORS.warning_100};\n    color: ${COLORS.warning_600};\n  }\n  &.critical {\n    background-color: ${COLORS.critical_100};\n    color: ${COLORS.critical_600};\n  }\n  &.accent1 {\n    background-color: ${COLORS.accent1_100};\n    color: ${COLORS.accent1_600};\n  }\n  &.accent2 {\n    background-color: ${COLORS.accent2_100};\n    color: ${COLORS.accent2_600};\n  }\n\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n  border-radius: 2px;\n  margin: 4px;\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n  border-radius: 2px;\n  margin: ${props=> props.icon ? `4px 8px 4px 0` : `4px 8px`};\n  height: 16px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = React.HTMLAttributes<HTMLDivElement> & {\n  label?: string;\n  icon?: React.ReactNode;\n  variant?: TagVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\n  const cls = `${className ?? ''} ${variant}`;\n  return (   \n    <Container variant={variant} isLabelPresent={!!label} className={cls} {...rest}>\n      {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n          {icon}\n        </IconContainer>\n      }\n      {label && <TextContainer variant={variant} icon={icon}>\n          {label}\n        </TextContainer>\n      }\n    </Container>\n  );\n};\n\nexport default Tag;\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,MAAM,EAAEC,kBAAkB,EAAEC,kBAAkB,QAAQ,IAAI;AAAC;AAAA;AAEpE,IAAMC,SAAS,GAAGJ,MAAM,CAACK,GAAG,2nBAMb,UAAAC,KAAK;EAAA,OAAEA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,EAAE;AAAA,GAIhCN,MAAM,CAACO,WAAW,EAC7BP,MAAM,CAACQ,WAAW,EAGPR,MAAM,CAACS,WAAW,EAC7BT,MAAM,CAACU,WAAW,EAGPV,MAAM,CAACW,WAAW,EAC7BX,MAAM,CAACY,WAAW,EAGPZ,MAAM,CAACa,YAAY,EAC9Bb,MAAM,CAACc,YAAY,EAGRd,MAAM,CAACe,WAAW,EAC7Bf,MAAM,CAACgB,WAAW,EAGPhB,MAAM,CAACiB,WAAW,EAC7BjB,MAAM,CAACkB,WAAW,CAG9B;AAED,IAAMC,aAAa,GAAGpB,MAAM,CAACK,GAAG,mKAO/B;AAED,IAAMgB,aAAa,GAAGrB,MAAM,CAACK,GAAG,sNAEpB,UAAAC,KAAK;EAAA,OAAGA,KAAK,CAACgB,IAAI,8BAA8B;AAAA,GAKxDnB,kBAAkB,CAACD,kBAAkB,CAACqB,IAAI,EAAE,IAAI,CAAC,CACpD;AAWD,IAAMC,GAAsC,GAAG,SAAzCA,GAAsC,OAA6D;EAAA,IAAxDC,KAAK,QAALA,KAAK;IAAEH,IAAI,QAAJA,IAAI;IAAA,oBAAEI,OAAO;IAAPA,OAAO,6BAAC,SAAS;IAAEC,SAAS,QAATA,SAAS;IAAKC,IAAI;EACjG,IAAMC,GAAG,aAAMF,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,cAAID,OAAO,CAAE;EAC3C,oBACE,MAAC,SAAS;IAAC,OAAO,EAAEA,OAAQ;IAAC,cAAc,EAAE,CAAC,CAACD,KAAM;IAAC,SAAS,EAAEI;EAAI,GAAKD,IAAI;IAAA,WAC3EN,IAAI,iBAAI,KAAC,aAAa;MAAC,OAAO,EAAEI,OAAQ;MAAC,eAAa,eAAgB;MAAA,UAClEJ;IAAI,EACS,EAEjBG,KAAK,iBAAI,KAAC,aAAa;MAAC,OAAO,EAAEC,OAAQ;MAAC,IAAI,EAAEJ,IAAK;MAAA,UACjDG;IAAK,EACQ;EAAA,GAER;AAEhB,CAAC;AAAC;EAnBAA,KAAK;EACLH,IAAI;EACJI,OAAO,aALiB,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,SAAS;AAAA;AAwBjG,eAAeF,GAAG"}
+{"version":3,"file":"Tag.js","names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Container","div","props","isLabelPresent","neutral_100","neutral_600","correct_100","correct_600","warning_100","warning_600","critical_100","critical_600","accent1_100","accent1_600","accent2_100","accent2_600","IconContainer","TextContainer","Bold","Tag","label","icon","variant","className","rest","cls"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\n  display: flex;\n  padding: 4px;\n  height: 24px;\n  width: calc(100%);\n  max-width: fit-content;\n  align-items: center;\n  justify-content: center;\n  min-width: ${props=>props.isLabelPresent ? '64px' : ''};\n  border-radius: 2px;\n  box-sizing: border-box;\n\n  &.neutral {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_600};\n  }\n  &.positive {\n    background-color: ${COLORS.correct_100};\n    color: ${COLORS.correct_600};\n  }\n  &.warning {\n    background-color: ${COLORS.warning_100};\n    color: ${COLORS.warning_600};\n  }\n  &.critical {\n    background-color: ${COLORS.critical_100};\n    color: ${COLORS.critical_600};\n  }\n  &.accent1 {\n    background-color: ${COLORS.accent1_100};\n    color: ${COLORS.accent1_600};\n  }\n  &.accent2 {\n    background-color: ${COLORS.accent2_100};\n    color: ${COLORS.accent2_600};\n  }\n\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n  display: flex;\n  width: 16px;\n  height: 16px;\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n  height: 16px;\n  padding: 0 4px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = React.HTMLAttributes<HTMLDivElement> & {\n  label?: string;\n  icon?: React.ReactNode;\n  variant?: TagVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\n  const cls = `${className ?? ''} ${variant}`;\n  return (   \n    <Container variant={variant} isLabelPresent={!!label} className={cls} {...rest}>\n      {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n          {icon}\n        </IconContainer>\n      }\n      {label && <TextContainer variant={variant} icon={icon}>\n          {label}\n        </TextContainer>\n      }\n    </Container>\n  );\n};\n\nexport default Tag;\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,MAAM,EAAEC,kBAAkB,EAAEC,kBAAkB,QAAQ,IAAI;AAAC;AAAA;AAEpE,IAAMC,SAAS,GAAGJ,MAAM,CAACK,GAAG,+rBAQb,UAAAC,KAAK;EAAA,OAAEA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,EAAE;AAAA,GAKhCN,MAAM,CAACO,WAAW,EAC7BP,MAAM,CAACQ,WAAW,EAGPR,MAAM,CAACS,WAAW,EAC7BT,MAAM,CAACU,WAAW,EAGPV,MAAM,CAACW,WAAW,EAC7BX,MAAM,CAACY,WAAW,EAGPZ,MAAM,CAACa,YAAY,EAC9Bb,MAAM,CAACc,YAAY,EAGRd,MAAM,CAACe,WAAW,EAC7Bf,MAAM,CAACgB,WAAW,EAGPhB,MAAM,CAACiB,WAAW,EAC7BjB,MAAM,CAACkB,WAAW,CAG9B;AAED,IAAMC,aAAa,GAAGpB,MAAM,CAACK,GAAG,+KAQ/B;AAED,IAAMgB,aAAa,GAAGrB,MAAM,CAACK,GAAG,iMAM5BF,kBAAkB,CAACD,kBAAkB,CAACoB,IAAI,EAAE,IAAI,CAAC,CACpD;AAWD,IAAMC,GAAsC,GAAG,SAAzCA,GAAsC,OAA6D;EAAA,IAAxDC,KAAK,QAALA,KAAK;IAAEC,IAAI,QAAJA,IAAI;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAC,SAAS;IAAEC,SAAS,QAATA,SAAS;IAAKC,IAAI;EACjG,IAAMC,GAAG,aAAMF,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,cAAID,OAAO,CAAE;EAC3C,oBACE,MAAC,SAAS;IAAC,OAAO,EAAEA,OAAQ;IAAC,cAAc,EAAE,CAAC,CAACF,KAAM;IAAC,SAAS,EAAEK;EAAI,GAAKD,IAAI;IAAA,WAC3EH,IAAI,iBAAI,KAAC,aAAa;MAAC,OAAO,EAAEC,OAAQ;MAAC,eAAa,eAAgB;MAAA,UAClED;IAAI,EACS,EAEjBD,KAAK,iBAAI,KAAC,aAAa;MAAC,OAAO,EAAEE,OAAQ;MAAC,IAAI,EAAED,IAAK;MAAA,UACjDD;IAAK,EACQ;EAAA,GAER;AAEhB,CAAC;AAAC;EAnBAA,KAAK;EACLC,IAAI;EACJC,OAAO,aALiB,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,SAAS;AAAA;AAwBjG,eAAeH,GAAG"}

package/dist/Tile/TileTypes.d.ts

@@ -5,33 +5,33 @@ import { DropdownButtonProps } from '../Dropdown/DropdownButtonTypes';
 import { ButtonProps } from '../Button/Button';
 import { HyperlinkProps } from '../HyperLink/HyperLink';
 import { Size } from '../types';
-export declare type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {
+export type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {
     componentType: 'icon';
     icon: React.ReactNode;
 };
-export declare type TileToggleButton = Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'> & {
+export type TileToggleButton = Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'> & {
     componentType: 'toggle';
 };
-export declare type TileDropdownButton = Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'> & {
+export type TileDropdownButton = Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'> & {
     componentType: 'dropdown';
     icon: React.ReactNode;
 };
-export declare type TileStandardButton = Pick<ButtonProps, 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {
+export type TileStandardButton = Pick<ButtonProps, 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {
     componentType: 'button';
     buttonText: string;
 };
-export declare type TileNote = {
+export type TileNote = {
     componentType: 'note';
     noteIcon?: React.ReactNode;
     noteText: string;
 };
-export declare type TileHyperLink = HyperlinkProps & {
+export type TileHyperLink = HyperlinkProps & {
     componentType: 'link';
     linkIcon?: React.ReactNode;
     linkText: string;
 };
-export declare type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;
-export declare type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton;
+export type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;
+export type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton;
 export interface TileHeaderProps {
     title: string;
     tooltip?: string;

package/dist/Toasters/Toast.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';
-export declare type ToastOptions = {
+export type ToastOptions = {
     color?: ToastColor;
     autoClose?: boolean;
     delay?: number;
@@ -14,7 +14,7 @@ export declare type ToastOptions = {
     enterFrom?: ToastEntryDirection;
     icon?: React.ReactNode;
 };
-declare type Props = {
+type Props = {
     remove?: any;
     content: any;
     options?: ToastOptions;

package/dist/Toasters/ToastContext.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ToastOptions } from './Toast';
-export declare type ToastProviderProps = {
+export type ToastProviderProps = {
     children?: any;
 };
 export interface toast {
@@ -8,7 +8,7 @@ export interface toast {
     id: string;
     content: any;
 }
-export declare type ToasterValueProps = {
+export type ToasterValueProps = {
     toasts: toast[];
     addToast: (content: any, options: ToastOptions) => string;
     removeToast: (id: string) => void;

package/dist/assets/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type IconProps = {
+export type IconProps = {
     className?: string;
     color?: string;
     size?: string;

package/dist/icons/index.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import * as ContentIcons from './contenticons/ContentIcons';
 import * as SystemIcons from './systemicons/SystemIcons';
-export declare type BaseProps = {
+export type BaseProps = {
     children?: any;
     tooltip?: string;
     tooltipId?: string;
 };
-export declare type IconProps = {
+export type IconProps = {
     label?: string;
     className?: string;
     color?: string;