tuix-webcomponents 0.3.0 → 0.4.0

package/dist/src/index.d.ts

@@ -19,11 +19,12 @@ export { TuixToggleButton } from './tuix-toggle-button/TuixToggleButton.js';
 export { TextSize, TextVariant } from './tuix-text/enums/tuix-text.enums.js';
 export { MainVariant } from './utils/mainVariant.enum.js';
 export { CheckboxLabelSide } from './tuix-checkbox/enums/tuix-checkbox.enums.js';
-export { PaperVariant } from './tuix-paper/enums/tuix-paper.enum.js';
+export { PaperElevation } from './tuix-paper/enums/tuix-paper.enum.js';
 export { LinkTarget } from './tuix-link/enums/linkTarget.enum.js';
 export { IconName, IconSizeVariant, } from './tuix-icon/enums/tuix-icon.enums.js';
 export { DescriptionType, InputType, } from './tuix-input/enums/tuix-input.enums.js';
 export { Palette } from './utils/colors.js';
 export { DarkPalette } from './utils/darkColors.js';
 export { DropdownType } from './tuix-dropdown/enums/tuix-dropdown.enums.js';
+export { BorderRadiusPaper } from './tuix-paper/enums/tuix-paper.enum.js';
 export declare function loadFonts(): void;

package/dist/src/index.js

@@ -12,13 +12,14 @@ export { TuixToggleButton } from './tuix-toggle-button/TuixToggleButton.js';
 export { TextSize, TextVariant } from './tuix-text/enums/tuix-text.enums.js';
 export { MainVariant } from './utils/mainVariant.enum.js';
 export { CheckboxLabelSide } from './tuix-checkbox/enums/tuix-checkbox.enums.js';
-export { PaperVariant } from './tuix-paper/enums/tuix-paper.enum.js';
+export { PaperElevation } from './tuix-paper/enums/tuix-paper.enum.js';
 export { LinkTarget } from './tuix-link/enums/linkTarget.enum.js';
 export { IconName, IconSizeVariant, } from './tuix-icon/enums/tuix-icon.enums.js';
 export { DescriptionType, InputType, } from './tuix-input/enums/tuix-input.enums.js';
 export { Palette } from './utils/colors.js';
 export { DarkPalette } from './utils/darkColors.js';
 export { DropdownType } from './tuix-dropdown/enums/tuix-dropdown.enums.js';
+export { BorderRadiusPaper } from './tuix-paper/enums/tuix-paper.enum.js';
 export function loadFonts() {
     const link1 = document.createElement('link');
     link1.rel = 'preconnect';

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,8CAA8C,CAAC;AACjF,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EACL,QAAQ,EACR,eAAe,GAChB,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EACL,eAAe,EACf,SAAS,GACV,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAC;AAE5E,MAAM,UAAU,SAAS;IACvB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7C,KAAK,CAAC,GAAG,GAAG,YAAY,CAAC;IACzB,KAAK,CAAC,IAAI,GAAG,8BAA8B,CAAC;IAC5C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7C,KAAK,CAAC,GAAG,GAAG,YAAY,CAAC;IACzB,KAAK,CAAC,IAAI,GAAG,2BAA2B,CAAC;IACzC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7C,KAAK,CAAC,GAAG,GAAG,YAAY,CAAC;IACzB,KAAK,CAAC,IAAI;QACR,2JAA2J,CAAC;IAC9J,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACjC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACjC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AACnC,CAAC","sourcesContent":["export { CustomEventTuixButton } from './tuix-button/interfaces/tuix-button.interface.js';\nexport {\n  CustomEventTuixCheckbox,\n  DetailValueCheckbox,\n} from './tuix-checkbox/interfaces/tuix-checkbox.interface.js';\nexport {\n  CustomEventTuixDropdownInput,\n  CustomEventTuixDropdownSelect,\n} from './tuix-dropdown/interfaces/tuix-dropdown.interface.js';\nexport { CustomEventTuixInput } from './tuix-input/interfaces/tuix-input.interface.js';\nexport { CustomEventTuixRadioButton } from './tuix-radio-button/interfaces/tuix-radio-button.interface.js';\nexport { CustomEventTuixToggle } from './tuix-toggle-button/interfaces/tuix-toggle.interface.js';\nexport { DetailValue } from './utils/interfaces/detail-value.interface.js';\nexport { TuixText } from './tuix-text/TuixText.js';\nexport { TuixIcon } from './tuix-icon/TuixIcon.js';\nexport { TuixButton } from './tuix-button/TuixButton.js';\nexport { TuixPaper } from './tuix-paper/TuixPaper.js';\nexport { TuixIconButton } from './tuix-icon-button/TuixIconButton.js';\nexport { TuixLink } from './tuix-link/TuixLink.js';\nexport { TuixInput } from './tuix-input/TuixInput.js';\nexport { TuixDropdown } from './tuix-dropdown/TuixDropdown.js';\nexport { TuixCheckbox } from './tuix-checkbox/TuixCheckbox.js';\nexport { TuixRadioButton } from './tuix-radio-button/TuixRadioButton.js';\nexport { TuixToggleButton } from './tuix-toggle-button/TuixToggleButton.js';\nexport { TextSize, TextVariant } from './tuix-text/enums/tuix-text.enums.js';\nexport { MainVariant } from './utils/mainVariant.enum.js';\nexport { CheckboxLabelSide } from './tuix-checkbox/enums/tuix-checkbox.enums.js';\nexport { PaperVariant } from './tuix-paper/enums/tuix-paper.enum.js';\nexport { LinkTarget } from './tuix-link/enums/linkTarget.enum.js';\nexport {\n  IconName,\n  IconSizeVariant,\n} from './tuix-icon/enums/tuix-icon.enums.js';\nexport {\n  DescriptionType,\n  InputType,\n} from './tuix-input/enums/tuix-input.enums.js';\nexport { Palette } from './utils/colors.js';\nexport { DarkPalette } from './utils/darkColors.js';\nexport { DropdownType } from './tuix-dropdown/enums/tuix-dropdown.enums.js';\n\nexport function loadFonts() {\n  const link1 = document.createElement('link');\n  link1.rel = 'preconnect';\n  link1.href = 'https://fonts.googleapis.com';\n  const link2 = document.createElement('link');\n  link2.rel = 'preconnect';\n  link2.href = 'https://fonts.gstatic.com';\n  const link3 = document.createElement('link');\n  link3.rel = 'stylesheet';\n  link3.href =\n    'https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap';\n  document.head.appendChild(link1);\n  document.head.appendChild(link2);\n  document.head.appendChild(link3);\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,8CAA8C,CAAC;AACjF,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EACL,QAAQ,EACR,eAAe,GAChB,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EACL,eAAe,EACf,SAAS,GACV,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAE1E,MAAM,UAAU,SAAS;IACvB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7C,KAAK,CAAC,GAAG,GAAG,YAAY,CAAC;IACzB,KAAK,CAAC,IAAI,GAAG,8BAA8B,CAAC;IAC5C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7C,KAAK,CAAC,GAAG,GAAG,YAAY,CAAC;IACzB,KAAK,CAAC,IAAI,GAAG,2BAA2B,CAAC;IACzC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7C,KAAK,CAAC,GAAG,GAAG,YAAY,CAAC;IACzB,KAAK,CAAC,IAAI;QACR,2JAA2J,CAAC;IAC9J,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACjC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACjC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AACnC,CAAC","sourcesContent":["export { CustomEventTuixButton } from './tuix-button/interfaces/tuix-button.interface.js';\nexport {\n  CustomEventTuixCheckbox,\n  DetailValueCheckbox,\n} from './tuix-checkbox/interfaces/tuix-checkbox.interface.js';\nexport {\n  CustomEventTuixDropdownInput,\n  CustomEventTuixDropdownSelect,\n} from './tuix-dropdown/interfaces/tuix-dropdown.interface.js';\nexport { CustomEventTuixInput } from './tuix-input/interfaces/tuix-input.interface.js';\nexport { CustomEventTuixRadioButton } from './tuix-radio-button/interfaces/tuix-radio-button.interface.js';\nexport { CustomEventTuixToggle } from './tuix-toggle-button/interfaces/tuix-toggle.interface.js';\nexport { DetailValue } from './utils/interfaces/detail-value.interface.js';\nexport { TuixText } from './tuix-text/TuixText.js';\nexport { TuixIcon } from './tuix-icon/TuixIcon.js';\nexport { TuixButton } from './tuix-button/TuixButton.js';\nexport { TuixPaper } from './tuix-paper/TuixPaper.js';\nexport { TuixIconButton } from './tuix-icon-button/TuixIconButton.js';\nexport { TuixLink } from './tuix-link/TuixLink.js';\nexport { TuixInput } from './tuix-input/TuixInput.js';\nexport { TuixDropdown } from './tuix-dropdown/TuixDropdown.js';\nexport { TuixCheckbox } from './tuix-checkbox/TuixCheckbox.js';\nexport { TuixRadioButton } from './tuix-radio-button/TuixRadioButton.js';\nexport { TuixToggleButton } from './tuix-toggle-button/TuixToggleButton.js';\nexport { TextSize, TextVariant } from './tuix-text/enums/tuix-text.enums.js';\nexport { MainVariant } from './utils/mainVariant.enum.js';\nexport { CheckboxLabelSide } from './tuix-checkbox/enums/tuix-checkbox.enums.js';\nexport { PaperElevation } from './tuix-paper/enums/tuix-paper.enum.js';\nexport { LinkTarget } from './tuix-link/enums/linkTarget.enum.js';\nexport {\n  IconName,\n  IconSizeVariant,\n} from './tuix-icon/enums/tuix-icon.enums.js';\nexport {\n  DescriptionType,\n  InputType,\n} from './tuix-input/enums/tuix-input.enums.js';\nexport { Palette } from './utils/colors.js';\nexport { DarkPalette } from './utils/darkColors.js';\nexport { DropdownType } from './tuix-dropdown/enums/tuix-dropdown.enums.js';\nexport { BorderRadiusPaper } from './tuix-paper/enums/tuix-paper.enum.js';\n\nexport function loadFonts() {\n  const link1 = document.createElement('link');\n  link1.rel = 'preconnect';\n  link1.href = 'https://fonts.googleapis.com';\n  const link2 = document.createElement('link');\n  link2.rel = 'preconnect';\n  link2.href = 'https://fonts.gstatic.com';\n  const link3 = document.createElement('link');\n  link3.rel = 'stylesheet';\n  link3.href =\n    'https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap';\n  document.head.appendChild(link1);\n  document.head.appendChild(link2);\n  document.head.appendChild(link3);\n}\n"]}

package/dist/src/tuix-button/TuixButton.styles.js

@@ -3,6 +3,8 @@ import { Palette } from '../utils/colors';
 import { ScreenSizes } from '../utils/screenSizes.enum';
 import { DarkPalette } from '../utils/darkColors';
 import { MainVariant } from '../utils/mainVariant.enum';
+import slottedClassName from '../utils/slottedClassName';
+import { TextSize } from '../tuix-text/enums/tuix-text.enums';
 export const hostButtonStyles = css `
   :host {
     --t-button-primary-color: ${unsafeCSS(Palette.MAIN)};
@@ -30,25 +32,27 @@ export const hostButtonStyles = css `
   }
 `;
 export const buttonSizeStyles = css `
-  .button {
+  ${unsafeCSS(`
+  ${slottedClassName(TextSize.Button)} {
     font-size: 1.25rem;
     font-weight: 400;
     line-height: 1.5rem;
   }
   @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
-    .button {
+    ${slottedClassName(TextSize.Button)} {
       font-size: 1rem;
       font-weight: 400;
       line-height: 1.25rem;
     }
   }
   @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
-    .button {
+    ${slottedClassName(TextSize.Button)} {
       font-size: 0.875rem;
       font-weight: 400;
       line-height: 1rem;
     }
   }
+`)}
 `;
 export const buttonColorStyles = css `
   :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button {

package/dist/src/tuix-button/TuixButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixButton.styles.js","sourceRoot":"","sources":["../../../src/tuix-button/TuixButton.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;gCAEH,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;kCACrB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;+BAC3B,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC;6BAC9B,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;uCACd,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;mCAC3B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;oCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;sCAC5B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;uCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;wCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;yCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;gCAGvC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC;6BAC9B,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;mCACtB,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;oCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;sCAC5B,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;uCACtB,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;kCACnC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;wCAClB,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;yCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;CAEtE,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;uCAMI,WAAW,CAAC,MAAM;;;;;;;uCAOlB,WAAW,CAAC,MAAM;;;;;;;CAOxD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;oBAChB,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC;;;;;oBAK9B,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC;;;;oBAI9B,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC;;;;oBAI9B,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC;;;;;oBAK9B,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;;;;;oBAKhC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;;;;;;oBAMhC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;;;;;oBAKhC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;;;;;oBAKhC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;;;;oBAIhC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;oBAChC,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC;;;;;CAKjD,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { Palette } from '../utils/colors';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { DarkPalette } from '../utils/darkColors';\nimport { MainVariant } from '../utils/mainVariant.enum';\n\nexport const hostButtonStyles = css`\n  :host {\n    --t-button-primary-color: ${unsafeCSS(Palette.MAIN)};\n    --t-button-secondary-color: ${unsafeCSS(Palette.WHITE)};\n    --t-button-accent-color: ${unsafeCSS(Palette.SECONDARY)};\n    --t-button-text-color: ${unsafeCSS(Palette.WHITE)};\n    --t-button-text-secondary-color: ${unsafeCSS(Palette.MAIN)};\n    --t-button-text-muted-color: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-button-disabled-bg-color: ${unsafeCSS(Palette.PRIMARY_100)};\n    --t-button-hover-primary-color: ${unsafeCSS(Palette.PRIMARY_600)};\n    --t-button-active-primary-color: ${unsafeCSS(Palette.PRIMARY_800)};\n    --t-button-hover-secondary-color: ${unsafeCSS(Palette.PRIMARY_100)};\n    --t-button-active-secondary-color: ${unsafeCSS(Palette.PRIMARY_200)};\n  }\n  :host([dark]) {\n    --t-button-primary-color: ${unsafeCSS(DarkPalette.MAIN)};\n    --t-button-text-color: ${unsafeCSS(DarkPalette.WHITE)};\n    --t-button-text-muted-color: ${unsafeCSS(Palette.PRIMARY_800)};\n    --t-button-disabled-bg-color: ${unsafeCSS(Palette.PRIMARY_950)};\n    --t-button-hover-primary-color: ${unsafeCSS(Palette.MAIN)};\n    --t-button-active-primary-color: ${unsafeCSS(Palette.PRIMARY_800)};\n    --t-button-secondary-color: ${unsafeCSS(Palette.BLACK)};\n    --t-button-hover-secondary-color: ${unsafeCSS(Palette.PRIMARY_950)};\n    --t-button-active-secondary-color: ${unsafeCSS(Palette.PRIMARY_800)};\n  }\n`;\n\nexport const buttonSizeStyles = css`\n  .button {\n    font-size: 1.25rem;\n    font-weight: 400;\n    line-height: 1.5rem;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .button {\n      font-size: 1rem;\n      font-weight: 400;\n      line-height: 1.25rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .button {\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 1rem;\n    }\n  }\n`;\n\nexport const buttonColorStyles = css`\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button {\n    background-color: var(--t-button-primary-color);\n    outline: none;\n    color: var(--t-button-text-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:hover {\n    background-color: var(--t-button-hover-primary-color);\n    cursor: pointer;\n  }\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:focus {\n    background-color: var(--t-button-hover-primary-color);\n    outline: 2px solid var(--t-button-accent-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:active {\n    background-color: var(--t-button-active-primary-color);\n    outline: none;\n  }\n\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button {\n    background-color: var(--t-button-secondary-color);\n    outline: 1px solid var(--t-button-hover-primary-color);\n    color: var(--t-button-text-secondary-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:hover {\n    background-color: var(--t-button-hover-secondary-color);\n    outline: 1px solid var(--t-button-primary-color);\n    color: var(--t-button-primary-color);\n    cursor: pointer;\n  }\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:focus {\n    background-color: var(--t-button-hover-secondary-color);\n    outline: 2px solid var(--t-button-accent-color);\n    color: var(--t-button-primary-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:active {\n    background-color: var(--t-button-active-secondary-color);\n    outline: 1px solid var(--t-button-primary-color);\n    color: var(--t-button-primary-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:disabled {\n    outline: 1px solid var(--t-button-text-muted-color);\n  }\n\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}'][disabled]) .button,\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}'][disabled]) .button {\n    background-color: var(--t-button-disabled-bg-color);\n    color: var(--t-button-text-muted-color);\n    cursor: not-allowed;\n  }\n`;\n"]}
+{"version":3,"file":"TuixButton.styles.js","sourceRoot":"","sources":["../../../src/tuix-button/TuixButton.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,gBAAgB,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAE9D,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;gCAEH,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;kCACrB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;+BAC3B,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC;6BAC9B,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;uCACd,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;mCAC3B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;oCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;sCAC5B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;uCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;wCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;yCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;gCAGvC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC;6BAC9B,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;mCACtB,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;oCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;sCAC5B,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;uCACtB,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;kCACnC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;wCAClB,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;yCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;CAEtE,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;IAC/B,SAAS,CAAC;IACV,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC;;;;;uCAKE,WAAW,CAAC,MAAM;MACnD,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC;;;;;;uCAMA,WAAW,CAAC,MAAM;MACnD,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC;;;;;;CAMtC,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;oBAChB,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC;;;;;oBAK9B,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC;;;;oBAI9B,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC;;;;oBAI9B,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC;;;;;oBAK9B,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;;;;;oBAKhC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;;;;;;oBAMhC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;;;;;oBAKhC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;;;;;oBAKhC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;;;;oBAIhC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;oBAChC,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC;;;;;CAKjD,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { Palette } from '../utils/colors';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { DarkPalette } from '../utils/darkColors';\nimport { MainVariant } from '../utils/mainVariant.enum';\nimport slottedClassName from '../utils/slottedClassName';\nimport { TextSize } from '../tuix-text/enums/tuix-text.enums';\n\nexport const hostButtonStyles = css`\n  :host {\n    --t-button-primary-color: ${unsafeCSS(Palette.MAIN)};\n    --t-button-secondary-color: ${unsafeCSS(Palette.WHITE)};\n    --t-button-accent-color: ${unsafeCSS(Palette.SECONDARY)};\n    --t-button-text-color: ${unsafeCSS(Palette.WHITE)};\n    --t-button-text-secondary-color: ${unsafeCSS(Palette.MAIN)};\n    --t-button-text-muted-color: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-button-disabled-bg-color: ${unsafeCSS(Palette.PRIMARY_100)};\n    --t-button-hover-primary-color: ${unsafeCSS(Palette.PRIMARY_600)};\n    --t-button-active-primary-color: ${unsafeCSS(Palette.PRIMARY_800)};\n    --t-button-hover-secondary-color: ${unsafeCSS(Palette.PRIMARY_100)};\n    --t-button-active-secondary-color: ${unsafeCSS(Palette.PRIMARY_200)};\n  }\n  :host([dark]) {\n    --t-button-primary-color: ${unsafeCSS(DarkPalette.MAIN)};\n    --t-button-text-color: ${unsafeCSS(DarkPalette.WHITE)};\n    --t-button-text-muted-color: ${unsafeCSS(Palette.PRIMARY_800)};\n    --t-button-disabled-bg-color: ${unsafeCSS(Palette.PRIMARY_950)};\n    --t-button-hover-primary-color: ${unsafeCSS(Palette.MAIN)};\n    --t-button-active-primary-color: ${unsafeCSS(Palette.PRIMARY_800)};\n    --t-button-secondary-color: ${unsafeCSS(Palette.BLACK)};\n    --t-button-hover-secondary-color: ${unsafeCSS(Palette.PRIMARY_950)};\n    --t-button-active-secondary-color: ${unsafeCSS(Palette.PRIMARY_800)};\n  }\n`;\n\nexport const buttonSizeStyles = css`\n  ${unsafeCSS(`\n  ${slottedClassName(TextSize.Button)} {\n    font-size: 1.25rem;\n    font-weight: 400;\n    line-height: 1.5rem;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    ${slottedClassName(TextSize.Button)} {\n      font-size: 1rem;\n      font-weight: 400;\n      line-height: 1.25rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    ${slottedClassName(TextSize.Button)} {\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 1rem;\n    }\n  }\n`)}\n`;\n\nexport const buttonColorStyles = css`\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button {\n    background-color: var(--t-button-primary-color);\n    outline: none;\n    color: var(--t-button-text-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:hover {\n    background-color: var(--t-button-hover-primary-color);\n    cursor: pointer;\n  }\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:focus {\n    background-color: var(--t-button-hover-primary-color);\n    outline: 2px solid var(--t-button-accent-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:active {\n    background-color: var(--t-button-active-primary-color);\n    outline: none;\n  }\n\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button {\n    background-color: var(--t-button-secondary-color);\n    outline: 1px solid var(--t-button-hover-primary-color);\n    color: var(--t-button-text-secondary-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:hover {\n    background-color: var(--t-button-hover-secondary-color);\n    outline: 1px solid var(--t-button-primary-color);\n    color: var(--t-button-primary-color);\n    cursor: pointer;\n  }\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:focus {\n    background-color: var(--t-button-hover-secondary-color);\n    outline: 2px solid var(--t-button-accent-color);\n    color: var(--t-button-primary-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:active {\n    background-color: var(--t-button-active-secondary-color);\n    outline: 1px solid var(--t-button-primary-color);\n    color: var(--t-button-primary-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:disabled {\n    outline: 1px solid var(--t-button-text-muted-color);\n  }\n\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}'][disabled]) .button,\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}'][disabled]) .button {\n    background-color: var(--t-button-disabled-bg-color);\n    color: var(--t-button-text-muted-color);\n    cursor: not-allowed;\n  }\n`;\n"]}

package/dist/src/tuix-dropdown/TuixDropdown.styles.js

@@ -8,12 +8,10 @@ export const dropdownHostStyles = css `
   :host {
     --t-field-color-option: ${unsafeCSS(Palette.WHITE)};
     --t-field-color-main: ${unsafeCSS(Palette.MAIN)};
-    --t-options-container-shadow: 0px 2px 8px 0px rgba(66, 79, 101, 0.16);
   }
 
   :host([dark]) {
     --t-field-color-option: ${unsafeCSS(DarkPalette.BLACK)};
-    --t-options-container-shadow: none;
   }
 `;
 export const dropdownMainContainerStyles = css `
@@ -38,7 +36,7 @@ export const dropdownOptionStyles = css `
     overflow-y: auto;
     max-height: 250px;
     color: var(--t-field-color-text);
-    box-shadow: var(--t-options-container-shadow);
+    box-shadow: 0px 2px 8px 0px rgba(66, 79, 101, 0.16);
     z-index: 9999;
   }
   .t-options-container::-webkit-scrollbar {

package/dist/src/tuix-dropdown/TuixDropdown.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixDropdown.styles.js","sourceRoot":"","sources":["../../../src/tuix-dropdown/TuixDropdown.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;IACjC,UAAU;;8BAEgB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;4BAC1B,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;;;;;8BAKrB,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;;;CAGzD,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,CAAA;;;;;;;;CAQ7C,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;wBAuBf,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAoCf,WAAW,CAAC,MAAM;;;;;;uCAMlB,WAAW,CAAC,MAAM;;;;;;CAMxD,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { hostStyles } from '../tuix-input/TuixInput.styles';\nimport { Palette } from '../utils/colors';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { DarkPalette } from '../utils/darkColors';\n\nexport const dropdownHostStyles = css`\n  ${hostStyles}\n  :host {\n    --t-field-color-option: ${unsafeCSS(Palette.WHITE)};\n    --t-field-color-main: ${unsafeCSS(Palette.MAIN)};\n    --t-options-container-shadow: 0px 2px 8px 0px rgba(66, 79, 101, 0.16);\n  }\n\n  :host([dark]) {\n    --t-field-color-option: ${unsafeCSS(DarkPalette.BLACK)};\n    --t-options-container-shadow: none;\n  }\n`;\n\nexport const dropdownMainContainerStyles = css`\n  .t-dropdown-full-container {\n    position: relative;\n    font-family: 'rubik', sans-serif;\n  }\n  .t-dropdown-container .t-input-dropdown {\n    --t-field-input-cursor: pointer;\n  }\n`;\n\nexport const dropdownOptionStyles = css`\n  .t-options-container {\n    width: 100%;\n    position: absolute;\n    top: calc(100% + 2px);\n    left: 0;\n    border: none;\n    border-radius: 0 0 5px 5px;\n    background-color: var(--t-field-color-option);\n    visibility: collapse;\n    overflow-y: auto;\n    max-height: 250px;\n    color: var(--t-field-color-text);\n    box-shadow: var(--t-options-container-shadow);\n    z-index: 9999;\n  }\n  .t-options-container::-webkit-scrollbar {\n    width: 0.75rem;\n  }\n  .t-options-container::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n  .t-options-container::-webkit-scrollbar-thumb {\n    background-color: ${unsafeCSS(Palette.PRIMARY_100)};\n    border-radius: 0.25rem;\n    border: 0.188rem solid transparent;\n    background-clip: content-box;\n  }\n  .t-options-container.show {\n    visibility: visible;\n  }\n  .t-options-container.show.t-with-description {\n    top: calc(100% + 2px - 1.5rem);\n  }\n  @media only screen and (max-height: 500px) {\n    .t-options-container {\n      max-height: 50vh;\n    }\n  }\n  .t-dropdown-option {\n    padding: 0.75rem 1rem;\n    cursor: pointer;\n    font-size: 1rem;\n    font-weight: 400;\n    line-height: 1.5rem;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  .t-dropdown-option.t-option-hover {\n    background-color: var(--t-field-color-form);\n  }\n  .t-dropdown-option.t-option-selected {\n    color: var(--t-field-color-main);\n  }\n  .t-dropdown-option:focus {\n    outline: none;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-dropdown-option {\n      font-size: 1rem;\n      line-height: 1.25rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-dropdown-option {\n      font-size: 0.875rem;\n      line-height: 1rem;\n    }\n  }\n`;\n"]}
+{"version":3,"file":"TuixDropdown.styles.js","sourceRoot":"","sources":["../../../src/tuix-dropdown/TuixDropdown.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;IACjC,UAAU;;8BAEgB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;4BAC1B,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;;;;8BAIrB,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;;CAEzD,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,CAAA;;;;;;;;CAQ7C,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;wBAuBf,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAoCf,WAAW,CAAC,MAAM;;;;;;uCAMlB,WAAW,CAAC,MAAM;;;;;;CAMxD,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { hostStyles } from '../tuix-input/TuixInput.styles';\nimport { Palette } from '../utils/colors';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { DarkPalette } from '../utils/darkColors';\n\nexport const dropdownHostStyles = css`\n  ${hostStyles}\n  :host {\n    --t-field-color-option: ${unsafeCSS(Palette.WHITE)};\n    --t-field-color-main: ${unsafeCSS(Palette.MAIN)};\n  }\n\n  :host([dark]) {\n    --t-field-color-option: ${unsafeCSS(DarkPalette.BLACK)};\n  }\n`;\n\nexport const dropdownMainContainerStyles = css`\n  .t-dropdown-full-container {\n    position: relative;\n    font-family: 'rubik', sans-serif;\n  }\n  .t-dropdown-container .t-input-dropdown {\n    --t-field-input-cursor: pointer;\n  }\n`;\n\nexport const dropdownOptionStyles = css`\n  .t-options-container {\n    width: 100%;\n    position: absolute;\n    top: calc(100% + 2px);\n    left: 0;\n    border: none;\n    border-radius: 0 0 5px 5px;\n    background-color: var(--t-field-color-option);\n    visibility: collapse;\n    overflow-y: auto;\n    max-height: 250px;\n    color: var(--t-field-color-text);\n    box-shadow: 0px 2px 8px 0px rgba(66, 79, 101, 0.16);\n    z-index: 9999;\n  }\n  .t-options-container::-webkit-scrollbar {\n    width: 0.75rem;\n  }\n  .t-options-container::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n  .t-options-container::-webkit-scrollbar-thumb {\n    background-color: ${unsafeCSS(Palette.PRIMARY_100)};\n    border-radius: 0.25rem;\n    border: 0.188rem solid transparent;\n    background-clip: content-box;\n  }\n  .t-options-container.show {\n    visibility: visible;\n  }\n  .t-options-container.show.t-with-description {\n    top: calc(100% + 2px - 1.5rem);\n  }\n  @media only screen and (max-height: 500px) {\n    .t-options-container {\n      max-height: 50vh;\n    }\n  }\n  .t-dropdown-option {\n    padding: 0.75rem 1rem;\n    cursor: pointer;\n    font-size: 1rem;\n    font-weight: 400;\n    line-height: 1.5rem;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  .t-dropdown-option.t-option-hover {\n    background-color: var(--t-field-color-form);\n  }\n  .t-dropdown-option.t-option-selected {\n    color: var(--t-field-color-main);\n  }\n  .t-dropdown-option:focus {\n    outline: none;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-dropdown-option {\n      font-size: 1rem;\n      line-height: 1.25rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-dropdown-option {\n      font-size: 0.875rem;\n      line-height: 1rem;\n    }\n  }\n`;\n"]}

package/dist/src/tuix-icon/TuixIcon.d.ts

@@ -1,9 +1,10 @@
 import { LitElement, TemplateResult } from 'lit';
 import { IconName, IconSizeVariant } from './enums/tuix-icon.enums';
+import { TextVariant } from '../tuix-text/enums/tuix-text.enums';
 export declare class TuixIcon extends LitElement {
     static styles: import("lit").CSSResult;
     name: IconName;
-    color?: string;
+    color?: string | TextVariant;
     size: IconSizeVariant;
     dark: boolean;
     private _getSelectedColor;

package/dist/src/tuix-icon/TuixIcon.icons.js

@@ -103,5 +103,12 @@ export const iconContentMap = {
   <path d="M20 6L9 17L4 12" stroke="#25282B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
   </svg>
   `,
+    [IconName.NAV_HAMBURGUER]: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g id="24/ outlined / action / main / menu">
+  <path id="Vector" d="M3 12H21" stroke="#25282B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path id="Vector_2" d="M3 6H21" stroke="#25282B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path id="Vector_3" d="M3 18H21" stroke="#25282B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+  </svg>`,
 };
 //# sourceMappingURL=TuixIcon.icons.js.map

package/dist/src/tuix-icon/TuixIcon.icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixIcon.icons.js","sourceRoot":"","sources":["../../../src/tuix-icon/TuixIcon.icons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,IAAe,EACf,QAAgB,OAAO,CAAC,KAAK,EACb,EAAE;IAClB,MAAM,QAAQ,GAAG,IAAI,IAAI,QAAQ,CAAC,UAAU,CAAC;IAC7C,MAAM,WAAW,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;IAE7C,IAAI,WAAW,EAAE;QACf,MAAM,cAAc,GAAG,IAAI,CAAA;QACvB,UAAU,CACV,WAAW;aACR,OAAO,CAAC,wBAAwB,EAAE,SAAS,KAAK,GAAG,CAAC;aACpD,OAAO,CAAC,iBAAiB,EAAE,WAAW,KAAK,GAAG,CAAC,CACnD;KACF,CAAC;QACF,OAAO,cAAc,CAAC;KACvB;IAED,OAAO,IAAI,CAAA,EAAE,CAAC;AAChB,CAAC,CAAC;AAIF,gEAAgE;AAChE,MAAM,CAAC,MAAM,cAAc,GAAuB;IAChD,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;;;;GAItB;IACD,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;;;;GAItB;IACD,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;;;;GAIpB;IACD,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;;;;GAIvB;IACD,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;;;;GAIlB;IACD,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;;;;GAIlB;IACD,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;;;;;;;;;;;GAWnB;IACD,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;;;GAG1B;IACD,CAAC,QAAQ,CAAC,oBAAoB,CAAC,EAAE;;;;;GAKhC;IACD,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;;;;;GAKpB;IACD,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;;;;;;;;;;GAUlB;IACD,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;;;;GAIxB;IACD,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;;;GAGxB;IACD,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;;;GAGtB;IACD,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;;;GAGjB;CACF,CAAC","sourcesContent":["import { TemplateResult, html } from 'lit';\nimport { Palette } from '../utils/colors';\nimport { IconName } from './enums/tuix-icon.enums';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport const iconTemplate = (\n  name?: IconName,\n  color: string = Palette.BLACK\n): TemplateResult => {\n  const iconName = name || IconName.ARROW_DOWN;\n  const iconContent = iconContentMap[iconName];\n\n  if (iconContent) {\n    const templateResult = html`\n      ${unsafeHTML(\n        iconContent\n          .replace(/fill=\"(?!none\")[^\"]+\"/g, `fill=\"${color}\"`)\n          .replace(/stroke=\"[^\"]+\"/g, `stroke=\"${color}\"`)\n      )}\n    `;\n    return templateResult;\n  }\n\n  return html``;\n};\n\ntype IconContentMapType = Record<IconName, string>;\n\n// Add new icons simply copy and paste the svg file content here\nexport const iconContentMap: IconContentMapType = {\n  [IconName.ARROW_DOWN]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M12 5V19\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M19 12L12 19L5 12\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.ARROW_LEFT]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M19 12H5\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 19L5 12L12 5\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.ARROW_UP]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M12 19V5\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M5 12L12 5L19 12\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.ARROW_RIGHT]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M5 12H19\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 5L19 12L12 19\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.SEARCH]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M20.9999 20.9999L16.6499 16.6499\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.EYE_ON]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.EYE_OFF]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <g clip-path=\"url(#clip0_2207_3897)\">\n  <path d=\"M9.9 4.24002C10.5883 4.0789 11.2931 3.99836 12 4.00003C19 4.00003 23 12 23 12C22.393 13.1356 21.6691 14.2048 20.84 15.19M14.12 14.12C13.8454 14.4148 13.5141 14.6512 13.1462 14.8151C12.7782 14.9791 12.3809 15.0673 11.9781 15.0744C11.5753 15.0815 11.1752 15.0074 10.8016 14.8565C10.4281 14.7056 10.0887 14.4811 9.80385 14.1962C9.51897 13.9113 9.29439 13.572 9.14351 13.1984C8.99262 12.8249 8.91853 12.4247 8.92563 12.0219C8.93274 11.6191 9.02091 11.2219 9.18488 10.8539C9.34884 10.4859 9.58525 10.1547 9.88 9.88003M17.94 17.94C16.2306 19.243 14.1491 19.9649 12 20C5 20 1 12 1 12C2.24389 9.68192 3.96914 7.65663 6.06 6.06003L17.94 17.94Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M1 1L23 23\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </g>\n  <defs>\n  <clipPath id=\"clip0_2207_3897\">\n  <rect width=\"24\" height=\"24\" fill=\"white\"/>\n  </clipPath>\n  </defs>\n  </svg>\n  `,\n  [IconName.EYE_CLOSE_LINE]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M9.34178 18.7821L7.41078 18.2641L8.19778 15.3251C7.01975 14.8906 5.9249 14.2575 4.96078 13.4531L2.80778 15.6071L1.39278 14.1921L3.54678 12.0391C2.33086 10.5829 1.51387 8.83587 1.17578 6.96911L3.14378 6.61011C3.90278 10.8121 7.57878 14.0001 11.9998 14.0001C16.4198 14.0001 20.0968 10.8121 20.8558 6.61011L22.8238 6.96811C22.4861 8.83512 21.6695 10.5825 20.4538 12.0391L22.6068 14.1921L21.1918 15.6071L19.0388 13.4531C18.0747 14.2575 16.9798 14.8906 15.8018 15.3251L16.5888 18.2651L14.6578 18.7821L13.8698 15.8421C12.6321 16.0542 11.3674 16.0542 10.1298 15.8421L9.34178 18.7821Z\" fill=\"black\"/>\n  </svg>\n  `,\n  [IconName.TRIANGLE_EXCLAMATION]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M10.2898 3.85996L1.81978 18C1.64514 18.3024 1.55274 18.6453 1.55177 18.9945C1.55079 19.3437 1.64127 19.6871 1.8142 19.9905C1.98714 20.2939 2.2365 20.5467 2.53748 20.7238C2.83847 20.9009 3.18058 20.9961 3.52978 21H20.4698C20.819 20.9961 21.1611 20.9009 21.4621 20.7238C21.7631 20.5467 22.0124 20.2939 22.1854 19.9905C22.3583 19.6871 22.4488 19.3437 22.4478 18.9945C22.4468 18.6453 22.3544 18.3024 22.1798 18L13.7098 3.85996C13.5315 3.56607 13.2805 3.32308 12.981 3.15444C12.6814 2.98581 12.3435 2.89722 11.9998 2.89722C11.656 2.89722 11.3181 2.98581 11.0186 3.15444C10.7191 3.32308 10.468 3.56607 10.2898 3.85996V3.85996Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 9V13\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 17H12.01\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.CIRCLE_X]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M15 9L9 15\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M9 9L15 15\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.LOADER]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M12 2V6\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 18V22\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M4.93018 4.92993L7.76018 7.75993\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M16.2402 16.24L19.0702 19.07\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M2 12H6\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M18 12H22\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M4.93018 19.07L7.76018 16.24\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M16.2402 7.75993L19.0702 4.92993\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.CIRCLE_CHECK]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M22 11.0801V12.0001C21.9988 14.1565 21.3005 16.2548 20.0093 17.9819C18.7182 19.7091 16.9033 20.9726 14.8354 21.584C12.7674 22.1954 10.5573 22.122 8.53447 21.3747C6.51168 20.6274 4.78465 19.2462 3.61096 17.4372C2.43727 15.6281 1.87979 13.4882 2.02168 11.3364C2.16356 9.18467 2.99721 7.13643 4.39828 5.49718C5.79935 3.85793 7.69279 2.71549 9.79619 2.24025C11.8996 1.76502 14.1003 1.98245 16.07 2.86011\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M22 4L12 14.01L9 11.01\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.CHEVRON_DOWN]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M6 9L12 15L18 9\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.CHEVRON_UP]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M18 15L12 9L6 15\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.CHECK]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M20 6L9 17L4 12\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n};\n"]}
+{"version":3,"file":"TuixIcon.icons.js","sourceRoot":"","sources":["../../../src/tuix-icon/TuixIcon.icons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,IAAe,EACf,QAAgB,OAAO,CAAC,KAAK,EACb,EAAE;IAClB,MAAM,QAAQ,GAAG,IAAI,IAAI,QAAQ,CAAC,UAAU,CAAC;IAC7C,MAAM,WAAW,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;IAE7C,IAAI,WAAW,EAAE;QACf,MAAM,cAAc,GAAG,IAAI,CAAA;QACvB,UAAU,CACV,WAAW;aACR,OAAO,CAAC,wBAAwB,EAAE,SAAS,KAAK,GAAG,CAAC;aACpD,OAAO,CAAC,iBAAiB,EAAE,WAAW,KAAK,GAAG,CAAC,CACnD;KACF,CAAC;QACF,OAAO,cAAc,CAAC;KACvB;IAED,OAAO,IAAI,CAAA,EAAE,CAAC;AAChB,CAAC,CAAC;AAIF,gEAAgE;AAChE,MAAM,CAAC,MAAM,cAAc,GAAuB;IAChD,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;;;;GAItB;IACD,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;;;;GAItB;IACD,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;;;;GAIpB;IACD,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;;;;GAIvB;IACD,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;;;;GAIlB;IACD,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;;;;GAIlB;IACD,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;;;;;;;;;;;GAWnB;IACD,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;;;GAG1B;IACD,CAAC,QAAQ,CAAC,oBAAoB,CAAC,EAAE;;;;;GAKhC;IACD,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;;;;;GAKpB;IACD,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;;;;;;;;;;GAUlB;IACD,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;;;;GAIxB;IACD,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;;;GAGxB;IACD,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;;;GAGtB;IACD,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;;;GAGjB;IACD,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;;;;;;SAMpB;CACR,CAAC","sourcesContent":["import { TemplateResult, html } from 'lit';\nimport { Palette } from '../utils/colors';\nimport { IconName } from './enums/tuix-icon.enums';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport const iconTemplate = (\n  name?: IconName,\n  color: string = Palette.BLACK\n): TemplateResult => {\n  const iconName = name || IconName.ARROW_DOWN;\n  const iconContent = iconContentMap[iconName];\n\n  if (iconContent) {\n    const templateResult = html`\n      ${unsafeHTML(\n        iconContent\n          .replace(/fill=\"(?!none\")[^\"]+\"/g, `fill=\"${color}\"`)\n          .replace(/stroke=\"[^\"]+\"/g, `stroke=\"${color}\"`)\n      )}\n    `;\n    return templateResult;\n  }\n\n  return html``;\n};\n\ntype IconContentMapType = Record<IconName, string>;\n\n// Add new icons simply copy and paste the svg file content here\nexport const iconContentMap: IconContentMapType = {\n  [IconName.ARROW_DOWN]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M12 5V19\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M19 12L12 19L5 12\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.ARROW_LEFT]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M19 12H5\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 19L5 12L12 5\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.ARROW_UP]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M12 19V5\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M5 12L12 5L19 12\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.ARROW_RIGHT]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M5 12H19\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 5L19 12L12 19\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.SEARCH]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M20.9999 20.9999L16.6499 16.6499\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.EYE_ON]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.EYE_OFF]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <g clip-path=\"url(#clip0_2207_3897)\">\n  <path d=\"M9.9 4.24002C10.5883 4.0789 11.2931 3.99836 12 4.00003C19 4.00003 23 12 23 12C22.393 13.1356 21.6691 14.2048 20.84 15.19M14.12 14.12C13.8454 14.4148 13.5141 14.6512 13.1462 14.8151C12.7782 14.9791 12.3809 15.0673 11.9781 15.0744C11.5753 15.0815 11.1752 15.0074 10.8016 14.8565C10.4281 14.7056 10.0887 14.4811 9.80385 14.1962C9.51897 13.9113 9.29439 13.572 9.14351 13.1984C8.99262 12.8249 8.91853 12.4247 8.92563 12.0219C8.93274 11.6191 9.02091 11.2219 9.18488 10.8539C9.34884 10.4859 9.58525 10.1547 9.88 9.88003M17.94 17.94C16.2306 19.243 14.1491 19.9649 12 20C5 20 1 12 1 12C2.24389 9.68192 3.96914 7.65663 6.06 6.06003L17.94 17.94Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M1 1L23 23\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </g>\n  <defs>\n  <clipPath id=\"clip0_2207_3897\">\n  <rect width=\"24\" height=\"24\" fill=\"white\"/>\n  </clipPath>\n  </defs>\n  </svg>\n  `,\n  [IconName.EYE_CLOSE_LINE]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M9.34178 18.7821L7.41078 18.2641L8.19778 15.3251C7.01975 14.8906 5.9249 14.2575 4.96078 13.4531L2.80778 15.6071L1.39278 14.1921L3.54678 12.0391C2.33086 10.5829 1.51387 8.83587 1.17578 6.96911L3.14378 6.61011C3.90278 10.8121 7.57878 14.0001 11.9998 14.0001C16.4198 14.0001 20.0968 10.8121 20.8558 6.61011L22.8238 6.96811C22.4861 8.83512 21.6695 10.5825 20.4538 12.0391L22.6068 14.1921L21.1918 15.6071L19.0388 13.4531C18.0747 14.2575 16.9798 14.8906 15.8018 15.3251L16.5888 18.2651L14.6578 18.7821L13.8698 15.8421C12.6321 16.0542 11.3674 16.0542 10.1298 15.8421L9.34178 18.7821Z\" fill=\"black\"/>\n  </svg>\n  `,\n  [IconName.TRIANGLE_EXCLAMATION]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M10.2898 3.85996L1.81978 18C1.64514 18.3024 1.55274 18.6453 1.55177 18.9945C1.55079 19.3437 1.64127 19.6871 1.8142 19.9905C1.98714 20.2939 2.2365 20.5467 2.53748 20.7238C2.83847 20.9009 3.18058 20.9961 3.52978 21H20.4698C20.819 20.9961 21.1611 20.9009 21.4621 20.7238C21.7631 20.5467 22.0124 20.2939 22.1854 19.9905C22.3583 19.6871 22.4488 19.3437 22.4478 18.9945C22.4468 18.6453 22.3544 18.3024 22.1798 18L13.7098 3.85996C13.5315 3.56607 13.2805 3.32308 12.981 3.15444C12.6814 2.98581 12.3435 2.89722 11.9998 2.89722C11.656 2.89722 11.3181 2.98581 11.0186 3.15444C10.7191 3.32308 10.468 3.56607 10.2898 3.85996V3.85996Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 9V13\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 17H12.01\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.CIRCLE_X]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M15 9L9 15\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M9 9L15 15\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.LOADER]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M12 2V6\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M12 18V22\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M4.93018 4.92993L7.76018 7.75993\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M16.2402 16.24L19.0702 19.07\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M2 12H6\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M18 12H22\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M4.93018 19.07L7.76018 16.24\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M16.2402 7.75993L19.0702 4.92993\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.CIRCLE_CHECK]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M22 11.0801V12.0001C21.9988 14.1565 21.3005 16.2548 20.0093 17.9819C18.7182 19.7091 16.9033 20.9726 14.8354 21.584C12.7674 22.1954 10.5573 22.122 8.53447 21.3747C6.51168 20.6274 4.78465 19.2462 3.61096 17.4372C2.43727 15.6281 1.87979 13.4882 2.02168 11.3364C2.16356 9.18467 2.99721 7.13643 4.39828 5.49718C5.79935 3.85793 7.69279 2.71549 9.79619 2.24025C11.8996 1.76502 14.1003 1.98245 16.07 2.86011\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M22 4L12 14.01L9 11.01\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.CHEVRON_DOWN]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M6 9L12 15L18 9\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.CHEVRON_UP]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M18 15L12 9L6 15\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.CHECK]: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path d=\"M20 6L9 17L4 12\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n  `,\n  [IconName.NAV_HAMBURGUER]: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g id=\"24/ outlined / action / main / menu\">\n  <path id=\"Vector\" d=\"M3 12H21\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path id=\"Vector_2\" d=\"M3 6H21\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path id=\"Vector_3\" d=\"M3 18H21\" stroke=\"#25282B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </g>\n  </svg>`,\n};\n"]}

package/dist/src/tuix-icon/TuixIcon.js

@@ -5,6 +5,7 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { IconName, IconSizeVariant, iconSize } from './enums/tuix-icon.enums';
 import { iconTemplate } from './TuixIcon.icons';
 import { Palette } from '../utils/colors';
+import { TextVariant, colorText, colorTextDark, } from '../tuix-text/enums/tuix-text.enums';
 let TuixIcon = class TuixIcon extends LitElement {
     constructor() {
         super(...arguments);
@@ -13,8 +14,12 @@ let TuixIcon = class TuixIcon extends LitElement {
         this.dark = false;
     }
     _getSelectedColor() {
-        const defaultValue = this.dark ? Palette.WHITE : Palette.BLACK;
-        let selectedColor = this.color || defaultValue;
+        let selectedColor = this.color || TextVariant.PRIMARY;
+        if (Object.values(TextVariant).includes(selectedColor)) {
+            const colorMap = this.dark ? colorTextDark : colorText;
+            const nameColor = colorMap[selectedColor];
+            return nameColor;
+        }
         if (Object.prototype.hasOwnProperty.call(Palette, selectedColor)) {
             const nameColor = selectedColor;
             selectedColor = Palette[nameColor];

package/dist/src/tuix-icon/TuixIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixIcon.js","sourceRoot":"","sources":["../../../src/tuix-icon/TuixIcon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAG1C,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QAgBE,SAAI,GAAG,QAAQ,CAAC,UAAU,CAAC;QAM3B,SAAI,GAAG,eAAe,CAAC,KAAK,CAAC;QAG7B,SAAI,GAAG,KAAK,CAAC;IA+Bf,CAAC;IA7BS,iBAAiB;QACvB,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC;QAC/D,IAAI,aAAa,GAAG,IAAI,CAAC,KAAK,IAAI,YAAY,CAAC;QAC/C,IAAI,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC,EAAE;YAChE,MAAM,SAAS,GAAG,aAAqC,CAAC;YACxD,aAAa,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;SACpC;QAED,OAAO,aAAa,CAAC;IACvB,CAAC;IAEO,gBAAgB;QACtB,OAAO,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC;IAC3D,CAAC;IAED,MAAM;;QACJ,MAAM,YAAY,GAAG,MAAA,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,mCAAI,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QAE5E,MAAM,aAAa,GAAG;YACpB,KAAK,EAAE,YAAY;YACnB,MAAM,EAAE,YAAY;SACrB,CAAC;QAEF,OAAO,IAAI,CAAA;2CAC4B,QAAQ,CAAC,aAAa,CAAC;UACxD,IAAI,CAAC,gBAAgB,EAAE;;KAE5B,CAAC;IACJ,CAAC;;AAtDM,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;GAYlB,AAZY,CAYX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;sCACF;AAG3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACZ;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC;sCACP;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCACf;AAzBF,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAwDpB;SAxDY,QAAQ","sourcesContent":["import { LitElement, TemplateResult, css, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { IconName, IconSizeVariant, iconSize } from './enums/tuix-icon.enums';\nimport { iconTemplate } from './TuixIcon.icons';\nimport { Palette } from '../utils/colors';\n\n@customElement('tuix-icon')\nexport class TuixIcon extends LitElement {\n  static styles = css`\n    .icon-component {\n      width: 24px;\n      height: 24px;\n      display: block;\n    }\n\n    svg {\n      width: 100%;\n      height: 100%;\n      display: block;\n    }\n  `;\n\n  @property({ type: IconName })\n  name = IconName.ARROW_DOWN;\n\n  @property({ type: String })\n  color?: string;\n\n  @property({ type: IconSizeVariant })\n  size = IconSizeVariant.SMALL;\n\n  @property({ type: Boolean })\n  dark = false;\n\n  private _getSelectedColor() {\n    const defaultValue = this.dark ? Palette.WHITE : Palette.BLACK;\n    let selectedColor = this.color || defaultValue;\n    if (Object.prototype.hasOwnProperty.call(Palette, selectedColor)) {\n      const nameColor = selectedColor as keyof typeof Palette;\n      selectedColor = Palette[nameColor];\n    }\n\n    return selectedColor;\n  }\n\n  private _getIconTemplate(): TemplateResult {\n    return iconTemplate(this.name, this._getSelectedColor());\n  }\n\n  render() {\n    const selectedSize = iconSize[this.size] ?? iconSize[IconSizeVariant.SMALL];\n\n    const dynamicStyles = {\n      width: selectedSize,\n      height: selectedSize,\n    };\n\n    return html`\n      <div class=\"icon-component\" style=\"${styleMap(dynamicStyles)}\">\n        ${this._getIconTemplate()}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"TuixIcon.js","sourceRoot":"","sources":["../../../src/tuix-icon/TuixIcon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EACL,WAAW,EACX,SAAS,EACT,aAAa,GACd,MAAM,oCAAoC,CAAC;AAG5C,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QAgBE,SAAI,GAAG,QAAQ,CAAC,UAAU,CAAC;QAM3B,SAAI,GAAG,eAAe,CAAC,KAAK,CAAC;QAG7B,SAAI,GAAG,KAAK,CAAC;IAkCf,CAAC;IAhCS,iBAAiB;QACvB,IAAI,aAAa,GAAG,IAAI,CAAC,KAAK,IAAI,WAAW,CAAC,OAAO,CAAC;QACtD,IAAI,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,aAA4B,CAAC,EAAE;YACrE,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;YACvD,MAAM,SAAS,GAAG,QAAQ,CAAC,aAA4B,CAAC,CAAC;YACzD,OAAO,SAAS,CAAC;SAClB;QACD,IAAI,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC,EAAE;YAChE,MAAM,SAAS,GAAG,aAAqC,CAAC;YACxD,aAAa,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;SACpC;QACD,OAAO,aAAa,CAAC;IACvB,CAAC;IAEO,gBAAgB;QACtB,OAAO,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC;IAC3D,CAAC;IAED,MAAM;;QACJ,MAAM,YAAY,GAAG,MAAA,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,mCAAI,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QAE5E,MAAM,aAAa,GAAG;YACpB,KAAK,EAAE,YAAY;YACnB,MAAM,EAAE,YAAY;SACrB,CAAC;QAEF,OAAO,IAAI,CAAA;2CAC4B,QAAQ,CAAC,aAAa,CAAC;UACxD,IAAI,CAAC,gBAAgB,EAAE;;KAE5B,CAAC;IACJ,CAAC;;AAzDM,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;GAYlB,AAZY,CAYX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;sCACF;AAG3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACE;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC;sCACP;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCACf;AAzBF,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA2DpB;SA3DY,QAAQ","sourcesContent":["import { LitElement, TemplateResult, css, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { IconName, IconSizeVariant, iconSize } from './enums/tuix-icon.enums';\nimport { iconTemplate } from './TuixIcon.icons';\nimport { Palette } from '../utils/colors';\nimport {\n  TextVariant,\n  colorText,\n  colorTextDark,\n} from '../tuix-text/enums/tuix-text.enums';\n\n@customElement('tuix-icon')\nexport class TuixIcon extends LitElement {\n  static styles = css`\n    .icon-component {\n      width: 24px;\n      height: 24px;\n      display: block;\n    }\n\n    svg {\n      width: 100%;\n      height: 100%;\n      display: block;\n    }\n  `;\n\n  @property({ type: IconName })\n  name = IconName.ARROW_DOWN;\n\n  @property({ type: String })\n  color?: string | TextVariant;\n\n  @property({ type: IconSizeVariant })\n  size = IconSizeVariant.SMALL;\n\n  @property({ type: Boolean })\n  dark = false;\n\n  private _getSelectedColor() {\n    let selectedColor = this.color || TextVariant.PRIMARY;\n    if (Object.values(TextVariant).includes(selectedColor as TextVariant)) {\n      const colorMap = this.dark ? colorTextDark : colorText;\n      const nameColor = colorMap[selectedColor as TextVariant];\n      return nameColor;\n    }\n    if (Object.prototype.hasOwnProperty.call(Palette, selectedColor)) {\n      const nameColor = selectedColor as keyof typeof Palette;\n      selectedColor = Palette[nameColor];\n    }\n    return selectedColor;\n  }\n\n  private _getIconTemplate(): TemplateResult {\n    return iconTemplate(this.name, this._getSelectedColor());\n  }\n\n  render() {\n    const selectedSize = iconSize[this.size] ?? iconSize[IconSizeVariant.SMALL];\n\n    const dynamicStyles = {\n      width: selectedSize,\n      height: selectedSize,\n    };\n\n    return html`\n      <div class=\"icon-component\" style=\"${styleMap(dynamicStyles)}\">\n        ${this._getIconTemplate()}\n      </div>\n    `;\n  }\n}\n"]}

package/dist/src/tuix-icon/enums/tuix-icon.enums.d.ts

@@ -20,5 +20,6 @@ export declare enum IconName {
     CIRCLE_CHECK = "circle-check",
     CHEVRON_DOWN = "chevron-down",
     CHEVRON_UP = "chevron-up",
-    CHECK = "check"
+    CHECK = "check",
+    NAV_HAMBURGUER = "nav-hamburguer"
 }

package/dist/src/tuix-icon/enums/tuix-icon.enums.js

@@ -28,5 +28,6 @@ export var IconName;
     IconName["CHEVRON_DOWN"] = "chevron-down";
     IconName["CHEVRON_UP"] = "chevron-up";
     IconName["CHECK"] = "check";
+    IconName["NAV_HAMBURGUER"] = "nav-hamburguer";
 })(IconName || (IconName = {}));
 //# sourceMappingURL=tuix-icon.enums.js.map

package/dist/src/tuix-icon/enums/tuix-icon.enums.js.map

@@ -1 +1 @@
-{"version":3,"file":"tuix-icon.enums.js","sourceRoot":"","sources":["../../../../src/tuix-icon/enums/tuix-icon.enums.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,eAKX;AALD,WAAY,eAAe;IACzB,kCAAe,CAAA;IACf,oCAAiB,CAAA;IACjB,kCAAe,CAAA;IACf,gCAAa,CAAA;AACf,CAAC,EALW,eAAe,KAAf,eAAe,QAK1B;AAED,MAAM,CAAC,MAAM,QAAQ,GAAoC;IACvD,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,MAAM;IAC/B,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,MAAM;IAChC,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,MAAM;IAC/B,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,MAAM;CAC/B,CAAC;AAEF,MAAM,CAAN,IAAY,QAgBX;AAhBD,WAAY,QAAQ;IAClB,qCAAyB,CAAA;IACzB,qCAAyB,CAAA;IACzB,iCAAqB,CAAA;IACrB,uCAA2B,CAAA;IAC3B,6BAAiB,CAAA;IACjB,6BAAiB,CAAA;IACjB,+BAAmB,CAAA;IACnB,6CAAiC,CAAA;IACjC,yDAA6C,CAAA;IAC7C,iCAAqB,CAAA;IACrB,6BAAiB,CAAA;IACjB,yCAA6B,CAAA;IAC7B,yCAA6B,CAAA;IAC7B,qCAAyB,CAAA;IACzB,2BAAe,CAAA;AACjB,CAAC,EAhBW,QAAQ,KAAR,QAAQ,QAgBnB","sourcesContent":["export enum IconSizeVariant {\n  SMALL = 'small',\n  MEDIUM = 'medium',\n  LARGE = 'large',\n  FULL = 'full',\n}\n\nexport const iconSize: Record<IconSizeVariant, string> = {\n  [IconSizeVariant.SMALL]: '16px',\n  [IconSizeVariant.MEDIUM]: '24px',\n  [IconSizeVariant.LARGE]: '32px',\n  [IconSizeVariant.FULL]: '100%',\n};\n\nexport enum IconName {\n  ARROW_DOWN = 'arrow-down',\n  ARROW_LEFT = 'arrow-left',\n  ARROW_UP = 'arrow-up',\n  ARROW_RIGHT = 'arrow-right',\n  SEARCH = 'search',\n  EYE_ON = 'eye-on',\n  EYE_OFF = 'eye-off',\n  EYE_CLOSE_LINE = 'eye-close-line',\n  TRIANGLE_EXCLAMATION = 'triangle-exclamation',\n  CIRCLE_X = 'circle-x',\n  LOADER = 'loader',\n  CIRCLE_CHECK = 'circle-check',\n  CHEVRON_DOWN = 'chevron-down',\n  CHEVRON_UP = 'chevron-up',\n  CHECK = 'check',\n}\n"]}
+{"version":3,"file":"tuix-icon.enums.js","sourceRoot":"","sources":["../../../../src/tuix-icon/enums/tuix-icon.enums.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,eAKX;AALD,WAAY,eAAe;IACzB,kCAAe,CAAA;IACf,oCAAiB,CAAA;IACjB,kCAAe,CAAA;IACf,gCAAa,CAAA;AACf,CAAC,EALW,eAAe,KAAf,eAAe,QAK1B;AAED,MAAM,CAAC,MAAM,QAAQ,GAAoC;IACvD,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,MAAM;IAC/B,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,MAAM;IAChC,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,MAAM;IAC/B,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,MAAM;CAC/B,CAAC;AAEF,MAAM,CAAN,IAAY,QAiBX;AAjBD,WAAY,QAAQ;IAClB,qCAAyB,CAAA;IACzB,qCAAyB,CAAA;IACzB,iCAAqB,CAAA;IACrB,uCAA2B,CAAA;IAC3B,6BAAiB,CAAA;IACjB,6BAAiB,CAAA;IACjB,+BAAmB,CAAA;IACnB,6CAAiC,CAAA;IACjC,yDAA6C,CAAA;IAC7C,iCAAqB,CAAA;IACrB,6BAAiB,CAAA;IACjB,yCAA6B,CAAA;IAC7B,yCAA6B,CAAA;IAC7B,qCAAyB,CAAA;IACzB,2BAAe,CAAA;IACf,6CAAiC,CAAA;AACnC,CAAC,EAjBW,QAAQ,KAAR,QAAQ,QAiBnB","sourcesContent":["export enum IconSizeVariant {\n  SMALL = 'small',\n  MEDIUM = 'medium',\n  LARGE = 'large',\n  FULL = 'full',\n}\n\nexport const iconSize: Record<IconSizeVariant, string> = {\n  [IconSizeVariant.SMALL]: '16px',\n  [IconSizeVariant.MEDIUM]: '24px',\n  [IconSizeVariant.LARGE]: '32px',\n  [IconSizeVariant.FULL]: '100%',\n};\n\nexport enum IconName {\n  ARROW_DOWN = 'arrow-down',\n  ARROW_LEFT = 'arrow-left',\n  ARROW_UP = 'arrow-up',\n  ARROW_RIGHT = 'arrow-right',\n  SEARCH = 'search',\n  EYE_ON = 'eye-on',\n  EYE_OFF = 'eye-off',\n  EYE_CLOSE_LINE = 'eye-close-line',\n  TRIANGLE_EXCLAMATION = 'triangle-exclamation',\n  CIRCLE_X = 'circle-x',\n  LOADER = 'loader',\n  CIRCLE_CHECK = 'circle-check',\n  CHEVRON_DOWN = 'chevron-down',\n  CHEVRON_UP = 'chevron-up',\n  CHECK = 'check',\n  NAV_HAMBURGUER = 'nav-hamburguer',\n}\n"]}

package/dist/src/tuix-link/TuixLink.d.ts

@@ -1,13 +1,15 @@
-import { LitElement } from 'lit';
+import { LitElement, TemplateResult } from 'lit';
 import { MainVariant } from '../utils/mainVariant.enum';
 import { LinkTarget } from './enums/linkTarget.enum';
 export declare class TuixLink extends LitElement {
-    static styles: import("lit").CSSResult;
-    href: string;
+    static styles: import("lit").CSSResult[];
+    href?: string;
     target: LinkTarget;
     variant: MainVariant;
     disabled: boolean;
     dark: boolean;
     private _getOptionalClasses;
-    render(): import("lit-html").TemplateResult<1>;
+    private _anchorTemplate;
+    private _divTemplate;
+    render(): TemplateResult;
 }

package/dist/src/tuix-link/TuixLink.js

@@ -1,15 +1,13 @@
 import { __decorate } from "tslib";
-import { html, css, LitElement, unsafeCSS } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { Palette } from '../utils/colors';
-import { ScreenSizes } from '../utils/screenSizes.enum';
 import { MainVariant } from '../utils/mainVariant.enum';
 import { LinkTarget } from './enums/linkTarget.enum';
 import { classMap } from 'lit/directives/class-map.js';
+import { linkStyles } from './TuixLink.styles';
 let TuixLink = class TuixLink extends LitElement {
     constructor() {
         super(...arguments);
-        this.href = '';
         this.target = LinkTarget.BLANK;
         this.variant = MainVariant.PRIMARY;
         this.disabled = false;
@@ -19,10 +17,10 @@ let TuixLink = class TuixLink extends LitElement {
         return {
             link: true,
             disabled: this.disabled,
-            [MainVariant.SECONDARY]: this.dark || this.variant === MainVariant.SECONDARY,
+            [MainVariant.SECONDARY]: this.variant === MainVariant.SECONDARY,
         };
     }
-    render() {
+    _anchorTemplate() {
         return html `
       <a
         target="${this.disabled ? LinkTarget.SELF : this.target}"
@@ -33,35 +31,24 @@ let TuixLink = class TuixLink extends LitElement {
       </a>
     `;
     }
-};
-TuixLink.styles = css `
-    a.link {
-      font-family: 'rubik', sans-serif;
-      font-size: 1rem;
-      font-weight: 400;
-      line-height: 1.25rem;
-      text-decoration: none;
-      color: ${unsafeCSS(Palette.MAIN)};
-    }
-    a.link:hover {
-      text-decoration: underline;
-    }
-    a.link.secondary {
-      color: ${unsafeCSS(Palette.WHITE)};
-    }
-    @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
-      a.link {
-        font-size: 0.875rem;
-        font-weight: 400;
-        line-height: 1rem;
-      }
+    _divTemplate() {
+        return html `
+      <div class="${classMap(this._getOptionalClasses())}">
+        <slot></slot>
+      </div>
+    `;
     }
-    a.link.disabled {
-      text-decoration: underline;
-      color: ${unsafeCSS(Palette.PRIMARY_300)};
-      cursor: not-allowed;
+    render() {
+        const isValidAnchor = this.href && !this.disabled;
+        if (isValidAnchor) {
+            return this._anchorTemplate();
+        }
+        else {
+            return this._divTemplate();
+        }
     }
-  `;
+};
+TuixLink.styles = [linkStyles];
 __decorate([
     property({ type: String })
 ], TuixLink.prototype, "href", void 0);
@@ -69,7 +56,7 @@ __decorate([
     property({ type: LinkTarget })
 ], TuixLink.prototype, "target", void 0);
 __decorate([
-    property({ type: MainVariant })
+    property({ type: MainVariant, reflect: true })
 ], TuixLink.prototype, "variant", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })

package/dist/src/tuix-link/TuixLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixLink.js","sourceRoot":"","sources":["../../../src/tuix-link/TuixLink.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAGlE,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QA+BE,SAAI,GAAG,EAAE,CAAC;QAGV,WAAM,GAAG,UAAU,CAAC,KAAK,CAAC;QAG1B,YAAO,GAAG,WAAW,CAAC,OAAO,CAAC;QAG9B,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;IAsBf,CAAC;IApBS,mBAAmB;QACzB,OAAO;YACL,IAAI,EAAE,IAAI;YACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,CAAC,WAAW,CAAC,SAAS,CAAC,EACrB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,SAAS;SACtD,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;kBAEG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM;iBAC9C,QAAQ,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;gBACrC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI;;;;KAI3D,CAAC;IACJ,CAAC;;AA/DM,eAAM,GAAG,GAAG,CAAA;;;;;;;eAON,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;;;;;;eAMvB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;;yCAEE,WAAW,CAAC,MAAM;;;;;;;;;eAS5C,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;GAG1C,AA3BY,CA2BX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;wCACL;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;yCACF;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAC9B;AA3CF,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAiEpB;SAjEY,QAAQ","sourcesContent":["import { html, css, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { Palette } from '../utils/colors';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { MainVariant } from '../utils/mainVariant.enum';\nimport { LinkTarget } from './enums/linkTarget.enum';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\n@customElement('tuix-link')\nexport class TuixLink extends LitElement {\n  static styles = css`\n    a.link {\n      font-family: 'rubik', sans-serif;\n      font-size: 1rem;\n      font-weight: 400;\n      line-height: 1.25rem;\n      text-decoration: none;\n      color: ${unsafeCSS(Palette.MAIN)};\n    }\n    a.link:hover {\n      text-decoration: underline;\n    }\n    a.link.secondary {\n      color: ${unsafeCSS(Palette.WHITE)};\n    }\n    @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n      a.link {\n        font-size: 0.875rem;\n        font-weight: 400;\n        line-height: 1rem;\n      }\n    }\n    a.link.disabled {\n      text-decoration: underline;\n      color: ${unsafeCSS(Palette.PRIMARY_300)};\n      cursor: not-allowed;\n    }\n  `;\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: LinkTarget })\n  target = LinkTarget.BLANK;\n\n  @property({ type: MainVariant })\n  variant = MainVariant.PRIMARY;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  private _getOptionalClasses(): ClassInfo {\n    return {\n      link: true,\n      disabled: this.disabled,\n      [MainVariant.SECONDARY]:\n        this.dark || this.variant === MainVariant.SECONDARY,\n    };\n  }\n\n  render() {\n    return html`\n      <a\n        target=\"${this.disabled ? LinkTarget.SELF : this.target}\"\n        class=\"${classMap(this._getOptionalClasses())}\"\n        href=\"${this.disabled ? 'javascript:void(0)' : this.href}\"\n      >\n        <slot></slot>\n      </a>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"TuixLink.js","sourceRoot":"","sources":["../../../src/tuix-link/TuixLink.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAG/C,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QAOE,WAAM,GAAG,UAAU,CAAC,KAAK,CAAC;QAG1B,YAAO,GAAG,WAAW,CAAC,OAAO,CAAC;QAG9B,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;IAsCf,CAAC;IApCS,mBAAmB;QACzB,OAAO;YACL,IAAI,EAAE,IAAI;YACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,SAAS;SAChE,CAAC;IACJ,CAAC;IAEO,eAAe;QACrB,OAAO,IAAI,CAAA;;kBAEG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM;iBAC9C,QAAQ,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;gBACrC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI;;;;KAI3D,CAAC;IACJ,CAAC;IAEO,YAAY;QAClB,OAAO,IAAI,CAAA;oBACK,QAAQ,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;;;KAGnD,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QAClD,IAAI,aAAa,EAAE;YACjB,OAAO,IAAI,CAAC,eAAe,EAAE,CAAC;SAC/B;aAAM;YACL,OAAO,IAAI,CAAC,YAAY,EAAE,CAAC;SAC5B;IACH,CAAC;;AApDM,eAAM,GAAG,CAAC,UAAU,CAAC,AAAf,CAAgB;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;wCACL;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACjB;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAC9B;AAhBF,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAsDpB;SAtDY,QAAQ","sourcesContent":["import { html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MainVariant } from '../utils/mainVariant.enum';\nimport { LinkTarget } from './enums/linkTarget.enum';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\nimport { linkStyles } from './TuixLink.styles';\n\n@customElement('tuix-link')\nexport class TuixLink extends LitElement {\n  static styles = [linkStyles];\n\n  @property({ type: String })\n  href?: string;\n\n  @property({ type: LinkTarget })\n  target = LinkTarget.BLANK;\n\n  @property({ type: MainVariant, reflect: true })\n  variant = MainVariant.PRIMARY;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  private _getOptionalClasses(): ClassInfo {\n    return {\n      link: true,\n      disabled: this.disabled,\n      [MainVariant.SECONDARY]: this.variant === MainVariant.SECONDARY,\n    };\n  }\n\n  private _anchorTemplate(): TemplateResult {\n    return html`\n      <a\n        target=\"${this.disabled ? LinkTarget.SELF : this.target}\"\n        class=\"${classMap(this._getOptionalClasses())}\"\n        href=\"${this.disabled ? 'javascript:void(0)' : this.href}\"\n      >\n        <slot></slot>\n      </a>\n    `;\n  }\n\n  private _divTemplate(): TemplateResult {\n    return html`\n      <div class=\"${classMap(this._getOptionalClasses())}\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  render() {\n    const isValidAnchor = this.href && !this.disabled;\n    if (isValidAnchor) {\n      return this._anchorTemplate();\n    } else {\n      return this._divTemplate();\n    }\n  }\n}\n"]}

package/dist/src/tuix-link/TuixLink.styles.d.ts

@@ -0,0 +1 @@
+export declare const linkStyles: import("lit").CSSResult;

package/dist/src/tuix-link/TuixLink.styles.js

@@ -0,0 +1,67 @@
+import { css, unsafeCSS } from 'lit';
+import { MainVariant } from '../utils/mainVariant.enum';
+import { Palette } from '../utils/colors';
+import { ScreenSizes } from '../utils/screenSizes.enum';
+import { DarkPalette } from '../utils/darkColors';
+export const linkStyles = css `
+  ${unsafeCSS(`
+  :host {
+    --t-link-border-color: ${Palette.MAIN};
+    --t-link-text-color: ${Palette.MAIN}
+  }
+
+  :host([dark]) {
+    --t-link-border-color: ${DarkPalette.MAIN};
+    --t-link-text-color: ${DarkPalette.MAIN}
+  }
+
+  :host([variant=${MainVariant.SECONDARY}]) {
+    --t-link-border-color: ${Palette.WHITE};
+    --t-link-text-color: ${Palette.WHITE}
+  }
+
+  :host([variant=${MainVariant.SECONDARY}][dark]) {
+    --t-link-border-color: ${DarkPalette.WHITE};
+    --t-link-text-color: ${DarkPalette.WHITE}
+  }
+
+  :host([disabled]) .link.disabled {
+    --t-link-border-color: ${Palette.PRIMARY_300};
+    --t-link-text-color: ${Palette.PRIMARY_300}
+  }
+
+  .link {
+    font-family: 'rubik', sans-serif;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.25rem;
+    text-decoration: none;
+    display: inline;
+    color: var(--t-link-text-color);
+    border-bottom: solid 1px transparent;
+  }
+  .link:hover {
+    border-bottom: solid 1px var(--t-link-border-color);
+    cursor: pointer;
+  }
+  .link.secondary {
+    color: var(--t-link-text-color);
+  }
+  .link.secondary:hover {
+    border-bottom: solid 1px var(--t-link-border-color);
+  }
+  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
+    .link {
+      font-size: 0.875rem;
+      font-weight: 400;
+      line-height: 1rem;
+    }
+  }
+  .link.disabled {
+    border-bottom: solid 1px var(--t-link-border-color);
+    color: var(--t-link-text-color);
+    cursor: not-allowed;
+  }
+`)}
+`;
+//# sourceMappingURL=TuixLink.styles.js.map

package/dist/src/tuix-link/TuixLink.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TuixLink.styles.js","sourceRoot":"","sources":["../../../src/tuix-link/TuixLink.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;IACzB,SAAS,CAAC;;6BAEe,OAAO,CAAC,IAAI;2BACd,OAAO,CAAC,IAAI;;;;6BAIV,WAAW,CAAC,IAAI;2BAClB,WAAW,CAAC,IAAI;;;mBAGxB,WAAW,CAAC,SAAS;6BACX,OAAO,CAAC,KAAK;2BACf,OAAO,CAAC,KAAK;;;mBAGrB,WAAW,CAAC,SAAS;6BACX,WAAW,CAAC,KAAK;2BACnB,WAAW,CAAC,KAAK;;;;6BAIf,OAAO,CAAC,WAAW;2BACrB,OAAO,CAAC,WAAW;;;;;;;;;;;;;;;;;;;;;;;uCAuBP,WAAW,CAAC,MAAM;;;;;;;;;;;;CAYxD,CAAC;CACD,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { MainVariant } from '../utils/mainVariant.enum';\nimport { Palette } from '../utils/colors';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { DarkPalette } from '../utils/darkColors';\n\nexport const linkStyles = css`\n  ${unsafeCSS(`\n  :host {\n    --t-link-border-color: ${Palette.MAIN};\n    --t-link-text-color: ${Palette.MAIN}\n  }\n\n  :host([dark]) {\n    --t-link-border-color: ${DarkPalette.MAIN};\n    --t-link-text-color: ${DarkPalette.MAIN}\n  }\n\n  :host([variant=${MainVariant.SECONDARY}]) {\n    --t-link-border-color: ${Palette.WHITE};\n    --t-link-text-color: ${Palette.WHITE}\n  }\n\n  :host([variant=${MainVariant.SECONDARY}][dark]) {\n    --t-link-border-color: ${DarkPalette.WHITE};\n    --t-link-text-color: ${DarkPalette.WHITE}\n  }\n\n  :host([disabled]) .link.disabled {\n    --t-link-border-color: ${Palette.PRIMARY_300};\n    --t-link-text-color: ${Palette.PRIMARY_300}\n  }\n\n  .link {\n    font-family: 'rubik', sans-serif;\n    font-size: 1rem;\n    font-weight: 400;\n    line-height: 1.25rem;\n    text-decoration: none;\n    display: inline;\n    color: var(--t-link-text-color);\n    border-bottom: solid 1px transparent;\n  }\n  .link:hover {\n    border-bottom: solid 1px var(--t-link-border-color);\n    cursor: pointer;\n  }\n  .link.secondary {\n    color: var(--t-link-text-color);\n  }\n  .link.secondary:hover {\n    border-bottom: solid 1px var(--t-link-border-color);\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .link {\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 1rem;\n    }\n  }\n  .link.disabled {\n    border-bottom: solid 1px var(--t-link-border-color);\n    color: var(--t-link-text-color);\n    cursor: not-allowed;\n  }\n`)}\n`;\n"]}

package/dist/src/tuix-paper/TuixPaper.d.ts

@@ -1,9 +1,10 @@
 import { LitElement, TemplateResult } from 'lit';
-import { PaperVariant } from './enums/tuix-paper.enum';
+import { BorderRadiusPaper, PaperElevation } from './enums/tuix-paper.enum';
 export declare class TuixPaper extends LitElement {
-    elevation: PaperVariant;
+    elevation: PaperElevation;
+    borderRadius: BorderRadiusPaper;
     dark: boolean;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     private _getOptionalClasses;
     render(): TemplateResult;
 }