tuix-webcomponents 0.3.0 → 0.5.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.js

@@ -29,7 +29,7 @@ TuixButton.styles = [
         padding: 16px 32px;
         border-radius: 4px;
         border: none;
-        font-family: 'rubik', sans-serif;
+        font-family: 'Rubik', sans-serif;
       }
 
       @media only screen and (max-width: ${ScreenSizes.TABLET}px) {

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

@@ -1 +1 @@
-{"version":3,"file":"TuixButton.js","sourceRoot":"","sources":["../../../src/tuix-button/TuixButton.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EACL,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGlD,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,cAAc;IA+CzB,gBAAgB;QACjC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO;QAC9C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;IACxC,CAAC;IAEkB,cAAc;QAC/B,IAAI,QAAQ,GAAG,eAAe,CAAC,MAAM,CAAC;QAEtC,IAAI,MAAM,CAAC,KAAK,IAAI,WAAW,CAAC,MAAM,EAAE;YACtC,QAAQ,GAAG,eAAe,CAAC,KAAK,CAAC;SAClC;QACD,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO;;QAErE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO;WACpE,CAAC;IACV,CAAC;;AA9DM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;2CAQoC,WAAW,CAAC,MAAM;;;;;;2CAMlB,WAAW,CAAC,MAAM;;;;;;;;;;;;;;2CAclB,WAAW,CAAC,MAAM;;;;;KAKxD;IACD,gBAAgB;IAChB,iBAAiB;IACjB,gBAAgB;CACjB,AAtCY,CAsCX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;6CACR;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;4CACT;AA7CT,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAgEtB;SAhEY,UAAU","sourcesContent":["import { TemplateResult, css, html, nothing } from 'lit';\nimport { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';\nimport {\n  buttonSizeStyles,\n  buttonColorStyles,\n  hostButtonStyles,\n} from './TuixButton.styles';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { TuixBaseButton } from './TuixBaseButton';\n\n@customElement('tuix-button')\nexport class TuixButton extends TuixBaseButton {\n  static styles = [\n    css`\n      .button {\n        padding: 16px 32px;\n        border-radius: 4px;\n        border: none;\n        font-family: 'rubik', sans-serif;\n      }\n\n      @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n        .button {\n          padding: 14px 32px;\n        }\n      }\n\n      @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n        .button {\n          padding: 12px 24px;\n        }\n      }\n\n      .container {\n        display: flex;\n        flex-direction: row;\n        justify-content: center;\n        align-items: center;\n        gap: 8px;\n      }\n\n      @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n        .container {\n          gap: 6px;\n        }\n      }\n    `,\n    hostButtonStyles,\n    buttonColorStyles,\n    buttonSizeStyles,\n  ];\n\n  @property({ type: IconName })\n  iconRight?: IconName;\n\n  @property({ type: IconName })\n  iconLeft?: IconName;\n\n  protected override _updateIconColor() {\n    if (!this.iconLeft && !this.iconRight) return;\n    this.iconColor = this._getTextColor();\n  }\n\n  protected override _buttonContent(): TemplateResult {\n    let iconSize = IconSizeVariant.MEDIUM;\n\n    if (screen.width <= ScreenSizes.TABLET) {\n      iconSize = IconSizeVariant.SMALL;\n    }\n    return html` <div class=\"container\">\n      ${this.iconLeft ? this._iconTemplate(this.iconLeft, iconSize) : nothing}\n      <slot></slot>\n      ${this.iconRight ? this._iconTemplate(this.iconRight, iconSize) : nothing}\n    </div>`;\n  }\n}\n"]}
+{"version":3,"file":"TuixButton.js","sourceRoot":"","sources":["../../../src/tuix-button/TuixButton.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EACL,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGlD,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,cAAc;IA+CzB,gBAAgB;QACjC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO;QAC9C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;IACxC,CAAC;IAEkB,cAAc;QAC/B,IAAI,QAAQ,GAAG,eAAe,CAAC,MAAM,CAAC;QAEtC,IAAI,MAAM,CAAC,KAAK,IAAI,WAAW,CAAC,MAAM,EAAE;YACtC,QAAQ,GAAG,eAAe,CAAC,KAAK,CAAC;SAClC;QACD,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO;;QAErE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO;WACpE,CAAC;IACV,CAAC;;AA9DM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;2CAQoC,WAAW,CAAC,MAAM;;;;;;2CAMlB,WAAW,CAAC,MAAM;;;;;;;;;;;;;;2CAclB,WAAW,CAAC,MAAM;;;;;KAKxD;IACD,gBAAgB;IAChB,iBAAiB;IACjB,gBAAgB;CACjB,AAtCY,CAsCX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;6CACR;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;4CACT;AA7CT,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAgEtB;SAhEY,UAAU","sourcesContent":["import { TemplateResult, css, html, nothing } from 'lit';\nimport { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';\nimport {\n  buttonSizeStyles,\n  buttonColorStyles,\n  hostButtonStyles,\n} from './TuixButton.styles';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { TuixBaseButton } from './TuixBaseButton';\n\n@customElement('tuix-button')\nexport class TuixButton extends TuixBaseButton {\n  static styles = [\n    css`\n      .button {\n        padding: 16px 32px;\n        border-radius: 4px;\n        border: none;\n        font-family: 'Rubik', sans-serif;\n      }\n\n      @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n        .button {\n          padding: 14px 32px;\n        }\n      }\n\n      @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n        .button {\n          padding: 12px 24px;\n        }\n      }\n\n      .container {\n        display: flex;\n        flex-direction: row;\n        justify-content: center;\n        align-items: center;\n        gap: 8px;\n      }\n\n      @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n        .container {\n          gap: 6px;\n        }\n      }\n    `,\n    hostButtonStyles,\n    buttonColorStyles,\n    buttonSizeStyles,\n  ];\n\n  @property({ type: IconName })\n  iconRight?: IconName;\n\n  @property({ type: IconName })\n  iconLeft?: IconName;\n\n  protected override _updateIconColor() {\n    if (!this.iconLeft && !this.iconRight) return;\n    this.iconColor = this._getTextColor();\n  }\n\n  protected override _buttonContent(): TemplateResult {\n    let iconSize = IconSizeVariant.MEDIUM;\n\n    if (screen.width <= ScreenSizes.TABLET) {\n      iconSize = IconSizeVariant.SMALL;\n    }\n    return html` <div class=\"container\">\n      ${this.iconLeft ? this._iconTemplate(this.iconLeft, iconSize) : nothing}\n      <slot></slot>\n      ${this.iconRight ? this._iconTemplate(this.iconRight, iconSize) : nothing}\n    </div>`;\n  }\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-checkbox/TuixCheckbox.styles.js

@@ -102,7 +102,7 @@ export const checkboxLabelStyles = css `
     font-size: 1rem;
     line-height: 1.5rem;
     font-weight: 300;
-    font-family: 'rubik', sans-serif;
+    font-family: 'Rubik', sans-serif;
     color: var(--t-text-color-label);
     margin-left: 0.625rem;
   }

package/dist/src/tuix-checkbox/TuixCheckbox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixCheckbox.styles.js","sourceRoot":"","sources":["../../../src/tuix-checkbox/TuixCheckbox.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,qBAAqB,CAAC;AAElD,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;2BAEF,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;4BACtB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;6BACvB,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;4BAC/B,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;8BACtB,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC;6BAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;4BAC/B,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;;;2BAGzB,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC;4BAC1B,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;6BAC3B,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;4BACnC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;8BAC1B,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;6BACjC,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;4BACnC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;;CAEvD,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBzC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDzC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiBrC,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { Palette } from '../utils/colors';\nimport { DarkPalette } from '../utils/darkColors';\n\nexport const hostStyles = css`\n  :host {\n    --t-main-color-tuix: ${unsafeCSS(Palette.MAIN)};\n    --t-bg-color-primary: ${unsafeCSS(Palette.WHITE)};\n    --t-bg-color-disabled: ${unsafeCSS(Palette.PRIMARY_100)};\n    --t-text-color-error: ${unsafeCSS(Palette.ERROR)};\n    --t-stroke-color-focus: ${unsafeCSS(Palette.SECONDARY)};\n    --t-stroke-color-grey: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-text-color-label: ${unsafeCSS(Palette.BLACK)};\n  }\n  :host([dark]) {\n    --t-main-color-tuix: ${unsafeCSS(DarkPalette.MAIN)};\n    --t-bg-color-primary: ${unsafeCSS(DarkPalette.BLACK)};\n    --t-bg-color-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n    --t-text-color-error: ${unsafeCSS(DarkPalette.ERROR)};\n    --t-stroke-color-focus: ${unsafeCSS(DarkPalette.SECONDARY)};\n    --t-stroke-color-grey: ${unsafeCSS(DarkPalette.PRIMARY_100)};\n    --t-text-color-label: ${unsafeCSS(DarkPalette.WHITE)};\n  }\n`;\n\nexport const checkboxContainerStyles = css`\n  .t-checkbox-full-container {\n    display: flex;\n    justify-content: space-between;\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  :host([disabled]) .t-checkbox-full-container {\n    cursor: not-allowed;\n  }\n  .t-checkbox-container {\n    display: block;\n    position: relative;\n    height: 1.5rem;\n    width: 1.5rem;\n  }\n  .t-checkbox-container .t-checkbox {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n  }\n`;\n\nexport const checkboxCheckmarkStyles = css`\n  .t-checkbox-container .t-checkbox-checkmark {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    height: 1.5rem;\n    width: 1.5rem;\n    border-radius: 0.25rem;\n    background-color: var(--t-bg-color-primary);\n    border: 2px solid var(--t-stroke-color-grey);\n    box-sizing: border-box;\n  }\n  .t-checkbox-container .t-checkbox-checkmark tuix-icon {\n    margin: auto;\n    display: none;\n  }\n  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark {\n    background-color: var(--t-main-color-tuix);\n    border: none;\n  }\n  .t-checkbox-container .t-checkbox:focus ~ .t-checkbox-checkmark {\n    box-shadow: 0 0 0px 2px var(--t-stroke-color-focus);\n    border: 2px solid var(--t-main-color-tuix);\n  }\n  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark tuix-icon {\n    display: block;\n  }\n  .t-checkbox-full-container:hover .t-checkbox-container .t-checkbox-checkmark {\n    border: 2px solid var(--t-main-color-tuix);\n  }\n  .t-checkbox-full-container.t-with-error\n    .t-checkbox-container\n    .t-checkbox-checkmark {\n    border: 2px solid var(--t-text-color-error);\n  }\n  .t-checkbox-full-container.t-with-error\n    .t-checkbox-container\n    .t-checkbox:checked\n    ~ .t-checkbox-checkmark {\n    background-color: var(--t-text-color-error);\n    border: none;\n  }\n  .t-checkbox-container .t-checkbox:disabled ~ .t-checkbox-checkmark {\n    background-color: var(--t-bg-color-disabled);\n    border: none;\n    box-shadow: none;\n  }\n`;\n\nexport const checkboxLabelStyles = css`\n  .t-checkbox-label {\n    display: block;\n    font-size: 1rem;\n    line-height: 1.5rem;\n    font-weight: 300;\n    font-family: 'rubik', sans-serif;\n    color: var(--t-text-color-label);\n    margin-left: 0.625rem;\n  }\n  .t-checkbox-full-container.t-with-label-left {\n    flex-direction: row-reverse;\n  }\n  .t-checkbox-full-container.t-with-label-left .t-checkbox-label {\n    margin-right: 0.625rem;\n    margin-left: 0;\n  }\n`;\n"]}
+{"version":3,"file":"TuixCheckbox.styles.js","sourceRoot":"","sources":["../../../src/tuix-checkbox/TuixCheckbox.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,qBAAqB,CAAC;AAElD,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;2BAEF,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;4BACtB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;6BACvB,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;4BAC/B,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;8BACtB,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC;6BAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;4BAC/B,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;;;2BAGzB,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC;4BAC1B,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;6BAC3B,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;4BACnC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;8BAC1B,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;6BACjC,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;4BACnC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;;CAEvD,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBzC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDzC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiBrC,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { Palette } from '../utils/colors';\nimport { DarkPalette } from '../utils/darkColors';\n\nexport const hostStyles = css`\n  :host {\n    --t-main-color-tuix: ${unsafeCSS(Palette.MAIN)};\n    --t-bg-color-primary: ${unsafeCSS(Palette.WHITE)};\n    --t-bg-color-disabled: ${unsafeCSS(Palette.PRIMARY_100)};\n    --t-text-color-error: ${unsafeCSS(Palette.ERROR)};\n    --t-stroke-color-focus: ${unsafeCSS(Palette.SECONDARY)};\n    --t-stroke-color-grey: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-text-color-label: ${unsafeCSS(Palette.BLACK)};\n  }\n  :host([dark]) {\n    --t-main-color-tuix: ${unsafeCSS(DarkPalette.MAIN)};\n    --t-bg-color-primary: ${unsafeCSS(DarkPalette.BLACK)};\n    --t-bg-color-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n    --t-text-color-error: ${unsafeCSS(DarkPalette.ERROR)};\n    --t-stroke-color-focus: ${unsafeCSS(DarkPalette.SECONDARY)};\n    --t-stroke-color-grey: ${unsafeCSS(DarkPalette.PRIMARY_100)};\n    --t-text-color-label: ${unsafeCSS(DarkPalette.WHITE)};\n  }\n`;\n\nexport const checkboxContainerStyles = css`\n  .t-checkbox-full-container {\n    display: flex;\n    justify-content: space-between;\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  :host([disabled]) .t-checkbox-full-container {\n    cursor: not-allowed;\n  }\n  .t-checkbox-container {\n    display: block;\n    position: relative;\n    height: 1.5rem;\n    width: 1.5rem;\n  }\n  .t-checkbox-container .t-checkbox {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n  }\n`;\n\nexport const checkboxCheckmarkStyles = css`\n  .t-checkbox-container .t-checkbox-checkmark {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    height: 1.5rem;\n    width: 1.5rem;\n    border-radius: 0.25rem;\n    background-color: var(--t-bg-color-primary);\n    border: 2px solid var(--t-stroke-color-grey);\n    box-sizing: border-box;\n  }\n  .t-checkbox-container .t-checkbox-checkmark tuix-icon {\n    margin: auto;\n    display: none;\n  }\n  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark {\n    background-color: var(--t-main-color-tuix);\n    border: none;\n  }\n  .t-checkbox-container .t-checkbox:focus ~ .t-checkbox-checkmark {\n    box-shadow: 0 0 0px 2px var(--t-stroke-color-focus);\n    border: 2px solid var(--t-main-color-tuix);\n  }\n  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark tuix-icon {\n    display: block;\n  }\n  .t-checkbox-full-container:hover .t-checkbox-container .t-checkbox-checkmark {\n    border: 2px solid var(--t-main-color-tuix);\n  }\n  .t-checkbox-full-container.t-with-error\n    .t-checkbox-container\n    .t-checkbox-checkmark {\n    border: 2px solid var(--t-text-color-error);\n  }\n  .t-checkbox-full-container.t-with-error\n    .t-checkbox-container\n    .t-checkbox:checked\n    ~ .t-checkbox-checkmark {\n    background-color: var(--t-text-color-error);\n    border: none;\n  }\n  .t-checkbox-container .t-checkbox:disabled ~ .t-checkbox-checkmark {\n    background-color: var(--t-bg-color-disabled);\n    border: none;\n    box-shadow: none;\n  }\n`;\n\nexport const checkboxLabelStyles = css`\n  .t-checkbox-label {\n    display: block;\n    font-size: 1rem;\n    line-height: 1.5rem;\n    font-weight: 300;\n    font-family: 'Rubik', sans-serif;\n    color: var(--t-text-color-label);\n    margin-left: 0.625rem;\n  }\n  .t-checkbox-full-container.t-with-label-left {\n    flex-direction: row-reverse;\n  }\n  .t-checkbox-full-container.t-with-label-left .t-checkbox-label {\n    margin-right: 0.625rem;\n    margin-left: 0;\n  }\n`;\n"]}

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

@@ -8,18 +8,16 @@ 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;
+    --t-field-color-option: ${unsafeCSS(DarkPalette.ELEVATION_2)};
   }
 `;
 export const dropdownMainContainerStyles = css `
   .t-dropdown-full-container {
     position: relative;
-    font-family: 'rubik', sans-serif;
+    font-family: 'Rubik', sans-serif;
   }
   .t-dropdown-container .t-input-dropdown {
     --t-field-input-cursor: pointer;
@@ -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 ${unsafeCSS(Palette.SHADOW)};
     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,WAAW,CAAC;;CAE/D,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,CAAA;;;;;;;;CAQ7C,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;kCAaL,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;wBAUnC,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.ELEVATION_2)};\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 ${unsafeCSS(Palette.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"]}

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-input/TuixInput.styles.js

@@ -64,7 +64,7 @@ export const inputComponentStyles = css `
   .t-input {
     padding: 1rem ${unsafeCSS(inputVars.paddingX)};
     border-radius: 4px;
-    font-family: 'rubik', sans-serif;
+    font-family: 'Rubik', sans-serif;
     cursor: var(--t-field-input-cursor);
     width: 100%;
     box-sizing: border-box;
@@ -174,7 +174,7 @@ export const inputTitleStyles = css `
     position: absolute;
     top: 50%;
     left: 1.25rem;
-    font-family: 'rubik', sans-serif;
+    font-family: 'Rubik', sans-serif;
     color: var(--t-field-color-title);
     transform: translateY(-50%);
     transition-duration: 0.3s;
@@ -301,7 +301,7 @@ export const inputSearchStyles = css `
 export const inputDescriptionStyles = css `
   .t-input-description-container {
     margin-top: 0.5rem;
-    font-family: 'rubik', sans-serif;
+    font-family: 'Rubik', sans-serif;
     font-size: 0.75rem;
     line-height: 1rem;
     color: var(--t-field-color-description);

package/dist/src/tuix-input/TuixInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixInput.styles.js","sourceRoot":"","sources":["../../../src/tuix-input/TuixInput.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { Palette } from '../utils/colors';\nimport { DarkPalette } from '../utils/darkColors';\nimport { hexToRgb } from '../utils/hex-rgb';\n\nconst inputVars = {\n  gapX: '10px',\n  iconDesktopSize: '1.5rem',\n  iconTabletSize: '1rem',\n  paddingX: '1.25rem',\n};\n\nconst rgbDarkValidation = hexToRgb(DarkPalette.VALIDATION);\nconst rgbDarkError = hexToRgb(DarkPalette.ERROR);\n\nexport const hostStyles = css`\n  :host {\n    --t-field-color-form: ${unsafeCSS(Palette.PRIMARY_50)};\n    --t-field-color-title: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-field-color-text: ${unsafeCSS(Palette.BLACK)};\n    --t-field-color-description: ${unsafeCSS(Palette.NEUTRAL_600)};\n    --t-field-color-stroke-hover: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-field-color-stroke-focus: ${unsafeCSS(Palette.MAIN)};\n    --t-field-color-text-disabled: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-field-color-stroke-validation: ${unsafeCSS(Palette.VALIDATION_200)};\n    --t-field-color-bg-validation: ${unsafeCSS(Palette.VALIDATION_50)};\n    --t-field-color-stroke-loading: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-field-color-bg-error: ${unsafeCSS(Palette.ERROR_50)};\n    --t-field-color-stroke-error: ${unsafeCSS(Palette.ERROR_200)};\n    --t-field-input-cursor: auto;\n  }\n  :host([dark]) {\n    --t-field-color-form: ${unsafeCSS(DarkPalette.PRIMARY_950)};\n    --t-field-color-text: ${unsafeCSS(DarkPalette.PRIMARY_100)};\n    --t-field-color-description: ${unsafeCSS(DarkPalette.NEUTRAL_200)};\n    --t-field-color-stroke-focus: ${unsafeCSS(DarkPalette.SECONDARY)};\n    --t-field-color-text-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n    --t-field-color-stroke-validation: ${unsafeCSS(DarkPalette.VALIDATION_200)};\n    --t-field-color-bg-validation: rgba(\n      ${rgbDarkValidation.r},\n      ${rgbDarkValidation.g},\n      ${rgbDarkValidation.b},\n      0.2\n    );\n    --t-field-color-bg-error: rgba(\n      ${rgbDarkError.r},\n      ${rgbDarkError.g},\n      ${rgbDarkError.b},\n      0.2\n    );\n    --t-field-color-stroke-error: ${unsafeCSS(DarkPalette.ERROR_200)};\n  }\n`;\n\nexport const inputComponentStyles = css`\n  .t-input-container {\n    position: relative;\n    --t-padding-x-desktop-with-icon: calc(\n      ${unsafeCSS(inputVars.paddingX)} + ${unsafeCSS(inputVars.iconDesktopSize)} +\n        ${unsafeCSS(inputVars.gapX)}\n    );\n    --t-padding-x-tablet-with-icon: calc(\n      ${unsafeCSS(inputVars.paddingX)} + ${unsafeCSS(inputVars.iconTabletSize)} +\n        ${unsafeCSS(inputVars.gapX)}\n    );\n  }\n  .t-input {\n    padding: 1rem ${unsafeCSS(inputVars.paddingX)};\n    border-radius: 4px;\n    font-family: 'rubik', sans-serif;\n    cursor: var(--t-field-input-cursor);\n    width: 100%;\n    box-sizing: border-box;\n  }\n  .t-input.with-title {\n    padding-top: 1.5rem;\n    padding-bottom: 0.5rem;\n  }\n  .t-input.with-icon-right {\n    padding-right: var(--t-padding-x-desktop-with-icon);\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input {\n      padding-top: 0.875rem;\n      padding-bottom: 0.875rem;\n    }\n    .t-input.with-title {\n      padding-top: 1.375rem;\n      padding-bottom: 0.375rem;\n    }\n    .t-input.with-icon-right {\n      padding-right: var(--t-padding-x-tablet-with-icon);\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-input {\n      padding-top: 0.75rem;\n      padding-bottom: 0.75rem;\n    }\n    .t-input.with-title {\n      padding-top: 1.25rem;\n      padding-bottom: 0.25rem;\n    }\n    .t-input.with-icon-right {\n      padding-right: var(--t-padding-x-tablet-with-icon);\n    }\n  }\n`;\n\nexport const inputFontStyles = css`\n  .t-input::placeholder,\n  .t-input,\n  .t-title {\n    font-size: 1rem;\n    font-weight: 400;\n    line-height: 1.5rem;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input::placeholder {\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n    }\n    .t-input {\n      font-size: 1rem;\n      line-height: 1.25rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-input {\n      font-size: 0.875rem;\n      line-height: 1rem;\n    }\n    .t-input::placeholder {\n      line-height: 1rem;\n    }\n  }\n`;\n\nexport const inputColorStyles = css`\n  .t-input {\n    background-color: var(--t-field-color-form);\n    border: 1px solid var(--t-field-color-form);\n    color: var(--t-field-color-text);\n  }\n  .t-input-container:hover .t-input,\n  .t-input:hover {\n    border: 1px solid var(--t-field-color-stroke-hover);\n  }\n  .t-input:focus {\n    border: 1px solid var(--t-field-color-stroke-focus);\n    outline: 1px solid var(--t-field-color-stroke-focus);\n  }\n  .t-input[disabled]:disabled {\n    cursor: not-allowed;\n    border: none;\n    color: var(--t-field-color-text-disabled);\n  }\n  .t-input.with-title::placeholder {\n    color: transparent;\n  }\n  .t-input::placeholder,\n  .t-input.with-title:focus::placeholder {\n    color: var(--t-field-color-title);\n  }\n  .t-input.with-warning {\n    border: 1px solid var(--t-field-color-stroke-validation);\n    background-color: var(--t-field-color-bg-validation);\n  }\n  .t-input.with-error {\n    border: 1px solid var(--t-field-color-stroke-error);\n    background-color: var(--t-field-color-bg-error);\n  }\n  .t-input.with-loading {\n    border: 1px solid var(--t-field-color-stroke-loading);\n  }\n`;\n\nexport const inputTitleStyles = css`\n  .t-title {\n    position: absolute;\n    top: 50%;\n    left: 1.25rem;\n    font-family: 'rubik', sans-serif;\n    color: var(--t-field-color-title);\n    transform: translateY(-50%);\n    transition-duration: 0.3s;\n    pointer-events: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  .t-textarea-container .t-title {\n    top: 1rem;\n    transform: none;\n  }\n  .t-input.with-title:focus + .t-title,\n  .t-input.with-title:not(:placeholder-shown) + .t-title {\n    font-size: 0.75rem;\n    font-weight: 400;\n    line-height: 1rem;\n    transform: translateY(0);\n    top: 0.5rem;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-title {\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n    }\n    .t-input.with-title:focus + .t-title,\n    .t-input.with-title:not(:placeholder-shown) + .t-title {\n      top: 0.375rem;\n    }\n    .t-textarea-container .t-title {\n      top: 0.875rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-input.with-title:focus + .t-title,\n    .t-input.with-title:not(:placeholder-shown) + .t-title {\n      top: 0.25rem;\n    }\n    .t-textarea-container .t-title {\n      top: 0.75rem;\n    }\n  }\n`;\n\nexport const inputIconStyles = css`\n  .t-input-container .t-icon-set-container {\n    height: ${unsafeCSS(inputVars.iconDesktopSize)};\n    width: ${unsafeCSS(inputVars.iconDesktopSize)};\n    cursor: var(--t-field-input-cursor);\n  }\n  .t-icon-set-container.t-icon-click {\n    cursor: pointer;\n  }\n  .t-input-container .t-icon-set-container.t-icon-right {\n    position: absolute;\n    top: 50%;\n    right: ${unsafeCSS(inputVars.paddingX)};\n    transform: translateY(-50%);\n  }\n  .t-input-container .t-icon-set-container.t-icon-left {\n    position: absolute;\n    top: 50%;\n    left: ${unsafeCSS(inputVars.paddingX)};\n    transform: translateY(-50%);\n  }\n  .t-icon-inactive {\n    display: inline;\n  }\n  .t-icon-active {\n    display: none;\n  }\n  .t-icon-disabled {\n    display: none;\n  }\n  .t-input-container:hover .t-icon-set-container .t-icon-inactive,\n  .t-input:hover ~ .t-icon-set-container .t-icon-inactive,\n  .t-input:focus ~ .t-icon-set-container .t-icon-inactive {\n    display: none;\n  }\n  .t-input-container:hover .t-icon-set-container .t-icon-active,\n  .t-input:hover ~ .t-icon-set-container .t-icon-active,\n  .t-input:focus ~ .t-icon-set-container .t-icon-active {\n    display: inline;\n  }\n  .t-input[disabled] ~ .t-icon-set-container .t-icon-active {\n    display: none;\n  }\n  .t-input[disabled] ~ .t-icon-set-container .t-icon-inactive {\n    display: none;\n  }\n  .t-input[disabled] ~ .t-icon-set-container .t-icon-disabled {\n    display: inline;\n    cursor: not-allowed;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input-container .t-icon-set-container {\n      height: ${unsafeCSS(inputVars.iconTabletSize)};\n      width: ${unsafeCSS(inputVars.iconTabletSize)};\n    }\n  }\n`;\n\nexport const inputSearchStyles = css`\n  .t-input[type='search'] {\n    padding-left: var(--t-padding-x-desktop-with-icon);\n  }\n  .t-input[type='search'] + .t-title {\n    left: var(--t-padding-x-desktop-with-icon);\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input[type='search'] {\n      padding-left: var(--t-padding-x-tablet-with-icon);\n    }\n    .t-input[type='search'] + .t-title {\n      left: var(--t-padding-x-tablet-with-icon);\n    }\n  }\n  input[type='search']::-webkit-search-decoration,\n  input[type='search']::-webkit-search-cancel-button,\n  input[type='search']::-webkit-search-results-button,\n  input[type='search']::-webkit-search-results-decoration {\n    display: none;\n  }\n`;\n\nexport const inputDescriptionStyles = css`\n  .t-input-description-container {\n    margin-top: 0.5rem;\n    font-family: 'rubik', sans-serif;\n    font-size: 0.75rem;\n    line-height: 1rem;\n    color: var(--t-field-color-description);\n    display: flex;\n    justify-content: space-between;\n  }\n  .t-input-description-container .t-letter-counter {\n    align-self: flex-end;\n  }\n  .t-input-description-container .t-input-description {\n    display: flex;\n    gap: 0.5rem;\n  }\n`;\n"]}
+{"version":3,"file":"TuixInput.styles.js","sourceRoot":"","sources":["../../../src/tuix-input/TuixInput.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { Palette } from '../utils/colors';\nimport { DarkPalette } from '../utils/darkColors';\nimport { hexToRgb } from '../utils/hex-rgb';\n\nconst inputVars = {\n  gapX: '10px',\n  iconDesktopSize: '1.5rem',\n  iconTabletSize: '1rem',\n  paddingX: '1.25rem',\n};\n\nconst rgbDarkValidation = hexToRgb(DarkPalette.VALIDATION);\nconst rgbDarkError = hexToRgb(DarkPalette.ERROR);\n\nexport const hostStyles = css`\n  :host {\n    --t-field-color-form: ${unsafeCSS(Palette.PRIMARY_50)};\n    --t-field-color-title: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-field-color-text: ${unsafeCSS(Palette.BLACK)};\n    --t-field-color-description: ${unsafeCSS(Palette.NEUTRAL_600)};\n    --t-field-color-stroke-hover: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-field-color-stroke-focus: ${unsafeCSS(Palette.MAIN)};\n    --t-field-color-text-disabled: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-field-color-stroke-validation: ${unsafeCSS(Palette.VALIDATION_200)};\n    --t-field-color-bg-validation: ${unsafeCSS(Palette.VALIDATION_50)};\n    --t-field-color-stroke-loading: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-field-color-bg-error: ${unsafeCSS(Palette.ERROR_50)};\n    --t-field-color-stroke-error: ${unsafeCSS(Palette.ERROR_200)};\n    --t-field-input-cursor: auto;\n  }\n  :host([dark]) {\n    --t-field-color-form: ${unsafeCSS(DarkPalette.PRIMARY_950)};\n    --t-field-color-text: ${unsafeCSS(DarkPalette.PRIMARY_100)};\n    --t-field-color-description: ${unsafeCSS(DarkPalette.NEUTRAL_200)};\n    --t-field-color-stroke-focus: ${unsafeCSS(DarkPalette.SECONDARY)};\n    --t-field-color-text-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n    --t-field-color-stroke-validation: ${unsafeCSS(DarkPalette.VALIDATION_200)};\n    --t-field-color-bg-validation: rgba(\n      ${rgbDarkValidation.r},\n      ${rgbDarkValidation.g},\n      ${rgbDarkValidation.b},\n      0.2\n    );\n    --t-field-color-bg-error: rgba(\n      ${rgbDarkError.r},\n      ${rgbDarkError.g},\n      ${rgbDarkError.b},\n      0.2\n    );\n    --t-field-color-stroke-error: ${unsafeCSS(DarkPalette.ERROR_200)};\n  }\n`;\n\nexport const inputComponentStyles = css`\n  .t-input-container {\n    position: relative;\n    --t-padding-x-desktop-with-icon: calc(\n      ${unsafeCSS(inputVars.paddingX)} + ${unsafeCSS(inputVars.iconDesktopSize)} +\n        ${unsafeCSS(inputVars.gapX)}\n    );\n    --t-padding-x-tablet-with-icon: calc(\n      ${unsafeCSS(inputVars.paddingX)} + ${unsafeCSS(inputVars.iconTabletSize)} +\n        ${unsafeCSS(inputVars.gapX)}\n    );\n  }\n  .t-input {\n    padding: 1rem ${unsafeCSS(inputVars.paddingX)};\n    border-radius: 4px;\n    font-family: 'Rubik', sans-serif;\n    cursor: var(--t-field-input-cursor);\n    width: 100%;\n    box-sizing: border-box;\n  }\n  .t-input.with-title {\n    padding-top: 1.5rem;\n    padding-bottom: 0.5rem;\n  }\n  .t-input.with-icon-right {\n    padding-right: var(--t-padding-x-desktop-with-icon);\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input {\n      padding-top: 0.875rem;\n      padding-bottom: 0.875rem;\n    }\n    .t-input.with-title {\n      padding-top: 1.375rem;\n      padding-bottom: 0.375rem;\n    }\n    .t-input.with-icon-right {\n      padding-right: var(--t-padding-x-tablet-with-icon);\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-input {\n      padding-top: 0.75rem;\n      padding-bottom: 0.75rem;\n    }\n    .t-input.with-title {\n      padding-top: 1.25rem;\n      padding-bottom: 0.25rem;\n    }\n    .t-input.with-icon-right {\n      padding-right: var(--t-padding-x-tablet-with-icon);\n    }\n  }\n`;\n\nexport const inputFontStyles = css`\n  .t-input::placeholder,\n  .t-input,\n  .t-title {\n    font-size: 1rem;\n    font-weight: 400;\n    line-height: 1.5rem;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input::placeholder {\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n    }\n    .t-input {\n      font-size: 1rem;\n      line-height: 1.25rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-input {\n      font-size: 0.875rem;\n      line-height: 1rem;\n    }\n    .t-input::placeholder {\n      line-height: 1rem;\n    }\n  }\n`;\n\nexport const inputColorStyles = css`\n  .t-input {\n    background-color: var(--t-field-color-form);\n    border: 1px solid var(--t-field-color-form);\n    color: var(--t-field-color-text);\n  }\n  .t-input-container:hover .t-input,\n  .t-input:hover {\n    border: 1px solid var(--t-field-color-stroke-hover);\n  }\n  .t-input:focus {\n    border: 1px solid var(--t-field-color-stroke-focus);\n    outline: 1px solid var(--t-field-color-stroke-focus);\n  }\n  .t-input[disabled]:disabled {\n    cursor: not-allowed;\n    border: none;\n    color: var(--t-field-color-text-disabled);\n  }\n  .t-input.with-title::placeholder {\n    color: transparent;\n  }\n  .t-input::placeholder,\n  .t-input.with-title:focus::placeholder {\n    color: var(--t-field-color-title);\n  }\n  .t-input.with-warning {\n    border: 1px solid var(--t-field-color-stroke-validation);\n    background-color: var(--t-field-color-bg-validation);\n  }\n  .t-input.with-error {\n    border: 1px solid var(--t-field-color-stroke-error);\n    background-color: var(--t-field-color-bg-error);\n  }\n  .t-input.with-loading {\n    border: 1px solid var(--t-field-color-stroke-loading);\n  }\n`;\n\nexport const inputTitleStyles = css`\n  .t-title {\n    position: absolute;\n    top: 50%;\n    left: 1.25rem;\n    font-family: 'Rubik', sans-serif;\n    color: var(--t-field-color-title);\n    transform: translateY(-50%);\n    transition-duration: 0.3s;\n    pointer-events: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  .t-textarea-container .t-title {\n    top: 1rem;\n    transform: none;\n  }\n  .t-input.with-title:focus + .t-title,\n  .t-input.with-title:not(:placeholder-shown) + .t-title {\n    font-size: 0.75rem;\n    font-weight: 400;\n    line-height: 1rem;\n    transform: translateY(0);\n    top: 0.5rem;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-title {\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n    }\n    .t-input.with-title:focus + .t-title,\n    .t-input.with-title:not(:placeholder-shown) + .t-title {\n      top: 0.375rem;\n    }\n    .t-textarea-container .t-title {\n      top: 0.875rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-input.with-title:focus + .t-title,\n    .t-input.with-title:not(:placeholder-shown) + .t-title {\n      top: 0.25rem;\n    }\n    .t-textarea-container .t-title {\n      top: 0.75rem;\n    }\n  }\n`;\n\nexport const inputIconStyles = css`\n  .t-input-container .t-icon-set-container {\n    height: ${unsafeCSS(inputVars.iconDesktopSize)};\n    width: ${unsafeCSS(inputVars.iconDesktopSize)};\n    cursor: var(--t-field-input-cursor);\n  }\n  .t-icon-set-container.t-icon-click {\n    cursor: pointer;\n  }\n  .t-input-container .t-icon-set-container.t-icon-right {\n    position: absolute;\n    top: 50%;\n    right: ${unsafeCSS(inputVars.paddingX)};\n    transform: translateY(-50%);\n  }\n  .t-input-container .t-icon-set-container.t-icon-left {\n    position: absolute;\n    top: 50%;\n    left: ${unsafeCSS(inputVars.paddingX)};\n    transform: translateY(-50%);\n  }\n  .t-icon-inactive {\n    display: inline;\n  }\n  .t-icon-active {\n    display: none;\n  }\n  .t-icon-disabled {\n    display: none;\n  }\n  .t-input-container:hover .t-icon-set-container .t-icon-inactive,\n  .t-input:hover ~ .t-icon-set-container .t-icon-inactive,\n  .t-input:focus ~ .t-icon-set-container .t-icon-inactive {\n    display: none;\n  }\n  .t-input-container:hover .t-icon-set-container .t-icon-active,\n  .t-input:hover ~ .t-icon-set-container .t-icon-active,\n  .t-input:focus ~ .t-icon-set-container .t-icon-active {\n    display: inline;\n  }\n  .t-input[disabled] ~ .t-icon-set-container .t-icon-active {\n    display: none;\n  }\n  .t-input[disabled] ~ .t-icon-set-container .t-icon-inactive {\n    display: none;\n  }\n  .t-input[disabled] ~ .t-icon-set-container .t-icon-disabled {\n    display: inline;\n    cursor: not-allowed;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input-container .t-icon-set-container {\n      height: ${unsafeCSS(inputVars.iconTabletSize)};\n      width: ${unsafeCSS(inputVars.iconTabletSize)};\n    }\n  }\n`;\n\nexport const inputSearchStyles = css`\n  .t-input[type='search'] {\n    padding-left: var(--t-padding-x-desktop-with-icon);\n  }\n  .t-input[type='search'] + .t-title {\n    left: var(--t-padding-x-desktop-with-icon);\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input[type='search'] {\n      padding-left: var(--t-padding-x-tablet-with-icon);\n    }\n    .t-input[type='search'] + .t-title {\n      left: var(--t-padding-x-tablet-with-icon);\n    }\n  }\n  input[type='search']::-webkit-search-decoration,\n  input[type='search']::-webkit-search-cancel-button,\n  input[type='search']::-webkit-search-results-button,\n  input[type='search']::-webkit-search-results-decoration {\n    display: none;\n  }\n`;\n\nexport const inputDescriptionStyles = css`\n  .t-input-description-container {\n    margin-top: 0.5rem;\n    font-family: 'Rubik', sans-serif;\n    font-size: 0.75rem;\n    line-height: 1rem;\n    color: var(--t-field-color-description);\n    display: flex;\n    justify-content: space-between;\n  }\n  .t-input-description-container .t-letter-counter {\n    align-self: flex-end;\n  }\n  .t-input-description-container .t-input-description {\n    display: flex;\n    gap: 0.5rem;\n  }\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;
 }