tuix-webcomponents 0.0.21 → 0.1.0

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

@@ -0,0 +1,307 @@
+import { css, unsafeCSS } from 'lit';
+import { ScreenSizes } from '../utils/screenSizes.enum';
+import { palette } from '../utils/colors';
+import { darkPalette } from '../utils/darkColors';
+import { hexToRgb } from '../utils/hex-rgb';
+const inputVars = {
+    gapX: '10px',
+    iconDesktopSize: '1.5rem',
+    iconTabletSize: '1rem',
+    paddingX: '1.25rem',
+};
+const rgbDarkValidation = hexToRgb(darkPalette.validation);
+const rgbDarkError = hexToRgb(darkPalette.error);
+export const hostStyles = css `
+  :host {
+    --t-field-color-form: ${unsafeCSS(palette.primary_50)};
+    --t-field-color-title: ${unsafeCSS(palette.primary_300)};
+    --t-field-color-text: ${unsafeCSS(palette.dark)};
+    --t-field-color-description: ${unsafeCSS(palette.neutral_600)};
+    --t-field-color-stroke-hover: ${unsafeCSS(palette.primary_300)};
+    --t-field-color-stroke-focus: ${unsafeCSS(palette.main)};
+    --t-field-color-text-disabled: ${unsafeCSS(palette.primary_300)};
+    --t-field-color-stroke-validation: ${unsafeCSS(palette.validation_200)};
+    --t-field-color-bg-validation: ${unsafeCSS(palette.validation_50)};
+    --t-field-color-stroke-loading: ${unsafeCSS(palette.primary_300)};
+    --t-field-color-bg-error: ${unsafeCSS(palette.error_50)};
+    --t-field-color-stroke-error: ${unsafeCSS(palette.error_200)};
+    --t-field-input-cursor: auto;
+  }
+  :host([dark]) {
+    --t-field-color-form: ${unsafeCSS(darkPalette.primary_950)};
+    --t-field-color-text: ${unsafeCSS(darkPalette.primary_100)};
+    --t-field-color-description: ${unsafeCSS(darkPalette.neutral_200)};
+    --t-field-color-stroke-focus: ${unsafeCSS(darkPalette.secondary)};
+    --t-field-color-text-disabled: ${unsafeCSS(darkPalette.primary_800)};
+    --t-field-color-stroke-validation: ${unsafeCSS(darkPalette.validation_200)};
+    --t-field-color-bg-validation: rgba(
+      ${rgbDarkValidation.r},
+      ${rgbDarkValidation.g},
+      ${rgbDarkValidation.b},
+      0.2
+    );
+    --t-field-color-bg-error: rgba(
+      ${rgbDarkError.r},
+      ${rgbDarkError.g},
+      ${rgbDarkError.b},
+      0.2
+    );
+    --t-field-color-stroke-error: ${unsafeCSS(darkPalette.error_200)};
+  }
+`;
+export const inputComponentStyles = css `
+  .t-input-container {
+    position: relative;
+    --t-padding-x-desktop-with-icon: calc(
+      ${unsafeCSS(inputVars.paddingX)} + ${unsafeCSS(inputVars.iconDesktopSize)} +
+        ${unsafeCSS(inputVars.gapX)}
+    );
+    --t-padding-x-tablet-with-icon: calc(
+      ${unsafeCSS(inputVars.paddingX)} + ${unsafeCSS(inputVars.iconTabletSize)} +
+        ${unsafeCSS(inputVars.gapX)}
+    );
+  }
+  .t-input {
+    padding: 1rem ${unsafeCSS(inputVars.paddingX)};
+    border-radius: 4px;
+    font-family: 'rubik', sans-serif;
+    cursor: var(--t-field-input-cursor);
+  }
+  .t-input.with-title {
+    padding-top: 1.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .t-input.with-icon-right {
+    padding-right: var(--t-padding-x-desktop-with-icon);
+  }
+  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
+    .t-input {
+      padding-top: 0.875rem;
+      padding-bottom: 0.875rem;
+    }
+    .t-input.with-title {
+      padding-top: 1.375rem;
+      padding-bottom: 0.375rem;
+    }
+    .t-input.with-icon-right {
+      padding-right: var(--t-padding-x-tablet-with-icon);
+    }
+  }
+  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
+    .t-input {
+      padding-top: 0.75rem;
+      padding-bottom: 0.75rem;
+    }
+    .t-input.with-title {
+      padding-top: 1.25rem;
+      padding-bottom: 0.25rem;
+    }
+    .t-input.with-icon-right {
+      padding-right: var(--t-padding-x-tablet-with-icon);
+    }
+  }
+`;
+export const inputFontStyles = css `
+  .t-input::placeholder,
+  .t-input,
+  .t-title {
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5rem;
+  }
+  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
+    .t-input::placeholder {
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+    }
+    .t-input {
+      font-size: 1rem;
+      line-height: 1.25rem;
+    }
+  }
+  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
+    .t-input {
+      font-size: 0.875rem;
+      line-height: 1rem;
+    }
+    .t-input::placeholder {
+      line-height: 1rem;
+    }
+  }
+`;
+export const inputColorStyles = css `
+  .t-input {
+    background-color: var(--t-field-color-form);
+    border: 1px solid var(--t-field-color-form);
+    color: var(--t-field-color-text);
+  }
+  .t-input-container:hover .t-input,
+  .t-input:hover {
+    border: 1px solid var(--t-field-color-stroke-hover);
+  }
+  .t-input:focus {
+    border: 1px solid var(--t-field-color-stroke-focus);
+    outline: 1px solid var(--t-field-color-stroke-focus);
+  }
+  .t-input[disabled] {
+    pointer-events: none;
+    color: var(--t-field-color-text-disabled);
+  }
+  .t-input.with-title::placeholder {
+    color: transparent;
+  }
+  .t-input::placeholder,
+  .t-input.with-title:focus::placeholder {
+    color: var(--t-field-color-title);
+  }
+  .t-input.with-warning {
+    border: 1px solid var(--t-field-color-stroke-validation);
+    background-color: var(--t-field-color-bg-validation);
+  }
+  .t-input.with-error {
+    border: 1px solid var(--t-field-color-stroke-error);
+    background-color: var(--t-field-color-bg-error);
+  }
+  .t-input.with-loading {
+    border: 1px solid var(--t-field-color-stroke-loading);
+  }
+`;
+export const inputTitleStyles = css `
+  .t-title {
+    position: absolute;
+    top: 50%;
+    left: 1.25rem;
+    font-family: 'rubik', sans-serif;
+    color: var(--t-field-color-title);
+    transform: translateY(-50%);
+    transition-duration: 0.3s;
+    pointer-events: none;
+  }
+  .t-textarea-container .t-title {
+    top: 1rem;
+    transform: none;
+  }
+  .t-input.with-title:focus + .t-title,
+  .t-input.with-title:not(:placeholder-shown) + .t-title {
+    font-size: 0.75rem;
+    font-weight: 400;
+    line-height: 1rem;
+    transform: translateY(0);
+    top: 0.5rem;
+  }
+  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
+    .t-title {
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+    }
+    .t-input.with-title:focus + .t-title,
+    .t-input.with-title:not(:placeholder-shown) + .t-title {
+      top: 0.375rem;
+    }
+    .t-textarea-container .t-title {
+      top: 0.875rem;
+    }
+  }
+  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
+    .t-input.with-title:focus + .t-title,
+    .t-input.with-title:not(:placeholder-shown) + .t-title {
+      top: 0.25rem;
+    }
+    .t-textarea-container .t-title {
+      top: 0.75rem;
+    }
+  }
+`;
+export const inputIconStyles = css `
+  .t-icon-set-container.t-icon-click {
+    cursor: pointer;
+  }
+  .t-input-container .t-icon-set-container {
+    height: ${unsafeCSS(inputVars.iconDesktopSize)};
+    width: ${unsafeCSS(inputVars.iconDesktopSize)};
+  }
+  .t-input-container .t-icon-set-container.t-icon-right {
+    position: absolute;
+    top: 50%;
+    right: ${unsafeCSS(inputVars.paddingX)};
+    transform: translateY(-50%);
+  }
+  .t-input-container .t-icon-set-container.t-icon-left {
+    position: absolute;
+    top: 50%;
+    left: ${unsafeCSS(inputVars.paddingX)};
+    transform: translateY(-50%);
+  }
+  .t-icon-inactive {
+    display: inline;
+  }
+  .t-icon-active {
+    display: none;
+  }
+  .t-icon-disabled {
+    display: none;
+  }
+  .t-input-container:hover .t-icon-set-container .t-icon-inactive,
+  .t-input:hover ~ .t-icon-set-container .t-icon-inactive,
+  .t-input:focus ~ .t-icon-set-container .t-icon-inactive {
+    display: none;
+  }
+  .t-input-container:hover .t-icon-set-container .t-icon-active,
+  .t-input:hover ~ .t-icon-set-container .t-icon-active,
+  .t-input:focus ~ .t-icon-set-container .t-icon-active {
+    display: inline;
+  }
+  .t-input[disabled] ~ .t-icon-set-container .t-icon-inactive {
+    display: none;
+  }
+  .t-input[disabled] ~ .t-icon-set-container .t-icon-disabled {
+    display: inline;
+  }
+  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
+    .t-input-container .t-icon-set-container {
+      height: ${unsafeCSS(inputVars.iconTabletSize)};
+      width: ${unsafeCSS(inputVars.iconTabletSize)};
+    }
+  }
+`;
+export const inputSearchStyles = css `
+  .t-input[type='search'] {
+    padding-left: var(--t-padding-x-desktop-with-icon);
+  }
+  .t-input[type='search'] + .t-title {
+    left: var(--t-padding-x-desktop-with-icon);
+  }
+  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
+    .t-input[type='search'] {
+      padding-left: var(--t-padding-x-tablet-with-icon);
+    }
+    .t-input[type='search'] + .t-title {
+      left: var(--t-padding-x-tablet-with-icon);
+    }
+  }
+  input[type='search']::-webkit-search-decoration,
+  input[type='search']::-webkit-search-cancel-button,
+  input[type='search']::-webkit-search-results-button,
+  input[type='search']::-webkit-search-results-decoration {
+    display: none;
+  }
+`;
+export const inputDescriptionStyles = css `
+  .t-input-description-container {
+    margin-top: 0.5rem;
+    font-family: 'rubik', sans-serif;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    color: var(--t-field-color-description);
+    display: flex;
+    justify-content: space-between;
+  }
+  .t-input-description-container .t-letter-counter {
+    align-self: flex-end;
+  }
+  .t-input-description-container .t-input-description {
+    display: flex;
+    gap: 0.5rem;
+  }
+`;
+//# sourceMappingURL=TuixInput.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TuixInput.styles.js","sourceRoot":"","sources":["../../../src/tuix-input/TuixInput.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,MAAM,SAAS,GAAG;IAChB,IAAI,EAAE,MAAM;IACZ,eAAe,EAAE,QAAQ;IACzB,cAAc,EAAE,MAAM;IACtB,QAAQ,EAAE,SAAS;CACpB,CAAC;AAEF,MAAM,iBAAiB,GAAG,QAAQ,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;AAC3D,MAAM,YAAY,GAAG,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAEjD,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;4BAED,SAAS,CAAC,OAAO,CAAC,UAAU,CAAC;6BAC5B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;4BAC/B,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;mCAChB,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;oCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;oCAC9B,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;qCACtB,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;yCAC1B,SAAS,CAAC,OAAO,CAAC,cAAc,CAAC;qCACrC,SAAS,CAAC,OAAO,CAAC,aAAa,CAAC;sCAC/B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;gCACpC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC;oCACvB,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC;;;;4BAIpC,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;4BAClC,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;mCAC3B,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;oCACjC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;qCAC/B,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;yCAC9B,SAAS,CAAC,WAAW,CAAC,cAAc,CAAC;;QAEtE,iBAAiB,CAAC,CAAC;QACnB,iBAAiB,CAAC,CAAC;QACnB,iBAAiB,CAAC,CAAC;;;;QAInB,YAAY,CAAC,CAAC;QACd,YAAY,CAAC,CAAC;QACd,YAAY,CAAC,CAAC;;;oCAGc,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;;CAEnE,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;QAI/B,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,SAAS,CAAC,SAAS,CAAC,eAAe,CAAC;UACrE,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC;;;QAG3B,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,SAAS,CAAC,SAAS,CAAC,cAAc,CAAC;UACpE,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC;;;;oBAIf,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC;;;;;;;;;;;;uCAYV,WAAW,CAAC,MAAM;;;;;;;;;;;;;uCAalB,WAAW,CAAC,MAAM;;;;;;;;;;;;;CAaxD,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;uCAQK,WAAW,CAAC,MAAM;;;;;;;;;;uCAUlB,WAAW,CAAC,MAAM;;;;;;;;;CASxD,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoClC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;uCAuBI,WAAW,CAAC,MAAM;;;;;;;;;;;;;uCAalB,WAAW,CAAC,MAAM;;;;;;;;;CASxD,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;cAKpB,SAAS,CAAC,SAAS,CAAC,eAAe,CAAC;aACrC,SAAS,CAAC,SAAS,CAAC,eAAe,CAAC;;;;;aAKpC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC;;;;;;YAM9B,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCA4BF,WAAW,CAAC,MAAM;;gBAEzC,SAAS,CAAC,SAAS,CAAC,cAAc,CAAC;eACpC,SAAS,CAAC,SAAS,CAAC,cAAc,CAAC;;;CAGjD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;uCAOG,WAAW,CAAC,MAAM;;;;;;;;;;;;;;CAcxD,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiBxC,CAAC","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.dark)};\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  }\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] {\n    pointer-events: 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  }\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-icon-set-container.t-icon-click {\n    cursor: pointer;\n  }\n  .t-input-container .t-icon-set-container {\n    height: ${unsafeCSS(inputVars.iconDesktopSize)};\n    width: ${unsafeCSS(inputVars.iconDesktopSize)};\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-inactive {\n    display: none;\n  }\n  .t-input[disabled] ~ .t-icon-set-container .t-icon-disabled {\n    display: inline;\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-input/enums/tuix-input.enums.d.ts

@@ -0,0 +1,36 @@
+import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';
+export declare enum InputType {
+    TEXT = "text",
+    SEARCH = "search",
+    PASSWORD = "password",
+    TEXT_AREA = "textarea"
+}
+export declare enum InputIconLocation {
+    LEFT = "left",
+    RIGHT = "right"
+}
+export declare enum DescriptionType {
+    TEXT = "text",
+    WARNING = "warning",
+    ERROR = "error",
+    SUCCESS = "success",
+    LOADING = "loading"
+}
+export declare const IconByDescriptionType: {
+    warning: IconName;
+    error: IconName;
+    success: IconName;
+    loading: IconName;
+};
+export declare const IconDescriptionColorLight: {
+    warning: string;
+    error: string;
+    success: string;
+    loading: string;
+};
+export declare const IconDescriptionColorDark: {
+    warning: string;
+    error: string;
+    success: string;
+    loading: string;
+};

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

@@ -0,0 +1,42 @@
+import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';
+import { palette } from '../../utils/colors';
+import { darkPalette } from '../../utils/darkColors';
+export var InputType;
+(function (InputType) {
+    InputType["TEXT"] = "text";
+    InputType["SEARCH"] = "search";
+    InputType["PASSWORD"] = "password";
+    InputType["TEXT_AREA"] = "textarea";
+})(InputType || (InputType = {}));
+export var InputIconLocation;
+(function (InputIconLocation) {
+    InputIconLocation["LEFT"] = "left";
+    InputIconLocation["RIGHT"] = "right";
+})(InputIconLocation || (InputIconLocation = {}));
+export var DescriptionType;
+(function (DescriptionType) {
+    DescriptionType["TEXT"] = "text";
+    DescriptionType["WARNING"] = "warning";
+    DescriptionType["ERROR"] = "error";
+    DescriptionType["SUCCESS"] = "success";
+    DescriptionType["LOADING"] = "loading";
+})(DescriptionType || (DescriptionType = {}));
+export const IconByDescriptionType = {
+    [DescriptionType.WARNING]: IconName.TRIANGLE_EXCLAMATION,
+    [DescriptionType.ERROR]: IconName.CIRCLE_X,
+    [DescriptionType.SUCCESS]: IconName.CIRCLE_CHECK,
+    [DescriptionType.LOADING]: IconName.LOADER,
+};
+export const IconDescriptionColorLight = {
+    [DescriptionType.WARNING]: palette.validation,
+    [DescriptionType.ERROR]: palette.error,
+    [DescriptionType.SUCCESS]: palette.success,
+    [DescriptionType.LOADING]: palette.primary_300,
+};
+export const IconDescriptionColorDark = {
+    [DescriptionType.WARNING]: darkPalette.validation,
+    [DescriptionType.ERROR]: darkPalette.error,
+    [DescriptionType.SUCCESS]: darkPalette.success,
+    [DescriptionType.LOADING]: darkPalette.primary_300,
+};
+//# sourceMappingURL=tuix-input.enums.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tuix-input.enums.js","sourceRoot":"","sources":["../../../../src/tuix-input/enums/tuix-input.enums.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,MAAM,CAAN,IAAY,SAKX;AALD,WAAY,SAAS;IACnB,0BAAa,CAAA;IACb,8BAAiB,CAAA;IACjB,kCAAqB,CAAA;IACrB,mCAAsB,CAAA;AACxB,CAAC,EALW,SAAS,KAAT,SAAS,QAKpB;AAED,MAAM,CAAN,IAAY,iBAGX;AAHD,WAAY,iBAAiB;IAC3B,kCAAa,CAAA;IACb,oCAAe,CAAA;AACjB,CAAC,EAHW,iBAAiB,KAAjB,iBAAiB,QAG5B;AAED,MAAM,CAAN,IAAY,eAMX;AAND,WAAY,eAAe;IACzB,gCAAa,CAAA;IACb,sCAAmB,CAAA;IACnB,kCAAe,CAAA;IACf,sCAAmB,CAAA;IACnB,sCAAmB,CAAA;AACrB,CAAC,EANW,eAAe,KAAf,eAAe,QAM1B;AAED,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC,oBAAoB;IACxD,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,QAAQ;IAC1C,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC,YAAY;IAChD,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC,MAAM;CAC3C,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU;IAC7C,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK;IACtC,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,OAAO;IAC1C,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,WAAW;CAC/C,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,UAAU;IACjD,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,KAAK;IAC1C,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,OAAO;IAC9C,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,WAAW;CACnD,CAAC","sourcesContent":["import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';\nimport { palette } from '../../utils/colors';\nimport { darkPalette } from '../../utils/darkColors';\n\nexport enum InputType {\n  TEXT = 'text',\n  SEARCH = 'search',\n  PASSWORD = 'password',\n  TEXT_AREA = 'textarea',\n}\n\nexport enum InputIconLocation {\n  LEFT = 'left',\n  RIGHT = 'right',\n}\n\nexport enum DescriptionType {\n  TEXT = 'text',\n  WARNING = 'warning',\n  ERROR = 'error',\n  SUCCESS = 'success',\n  LOADING = 'loading',\n}\n\nexport const IconByDescriptionType = {\n  [DescriptionType.WARNING]: IconName.TRIANGLE_EXCLAMATION,\n  [DescriptionType.ERROR]: IconName.CIRCLE_X,\n  [DescriptionType.SUCCESS]: IconName.CIRCLE_CHECK,\n  [DescriptionType.LOADING]: IconName.LOADER,\n};\n\nexport const IconDescriptionColorLight = {\n  [DescriptionType.WARNING]: palette.validation,\n  [DescriptionType.ERROR]: palette.error,\n  [DescriptionType.SUCCESS]: palette.success,\n  [DescriptionType.LOADING]: palette.primary_300,\n};\n\nexport const IconDescriptionColorDark = {\n  [DescriptionType.WARNING]: darkPalette.validation,\n  [DescriptionType.ERROR]: darkPalette.error,\n  [DescriptionType.SUCCESS]: darkPalette.success,\n  [DescriptionType.LOADING]: darkPalette.primary_300,\n};\n"]}

package/dist/src/tuix-input/interfaces/tuix-input.interface.d.ts

@@ -0,0 +1,13 @@
+import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';
+import { InputIconLocation } from '../enums/tuix-input.enums';
+export interface InputIconColors {
+    inactive: string;
+    active: string;
+    disabled: string;
+}
+export interface FormatIconSetParams {
+    iconName: IconName;
+    colorByState: InputIconColors;
+    location?: InputIconLocation;
+    clickHandler?: (e: MouseEvent) => void;
+}

package/dist/src/tuix-input/interfaces/tuix-input.interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tuix-input.interface.js.map

package/dist/src/tuix-input/interfaces/tuix-input.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tuix-input.interface.js","sourceRoot":"","sources":["../../../../src/tuix-input/interfaces/tuix-input.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';\nimport { InputIconLocation } from '../enums/tuix-input.enums';\n\nexport interface InputIconColors {\n  inactive: string;\n  active: string;\n  disabled: string;\n}\n\nexport interface FormatIconSetParams {\n  iconName: IconName;\n  colorByState: InputIconColors;\n  location?: InputIconLocation;\n  clickHandler?: (e: MouseEvent) => void;\n}\n"]}

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

@@ -0,0 +1,11 @@
+import { LitElement } 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;
+    target: LinkTarget;
+    variant: MainVariant;
+    disabled: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,72 @@
+import { __decorate } from "tslib";
+import { html, css, LitElement, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { palette } from '../utils/colors';
+import { ScreenSizes } from '../utils/screenSizes.enum';
+import { MainVariant } from '../utils/mainVariant.enum';
+import { LinkTarget } from './enums/linkTarget.enum';
+let TuixLink = class TuixLink extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.href = '';
+        this.target = LinkTarget.Blank;
+        this.variant = MainVariant.PRIMARY;
+        this.disabled = false;
+    }
+    render() {
+        return html `
+      <a
+        target="${this.disabled ? LinkTarget.Self : this.target}"
+        class="link ${this.variant} ${this.disabled ? 'disabled' : ''}"
+        href="${this.disabled ? 'javascript:void(0)' : this.href}"
+      >
+        <slot></slot>
+      </a>
+    `;
+    }
+};
+TuixLink.styles = css `
+    a.link {
+      font-family: 'rubik', sans-serif;
+      font-size: 1rem;
+      font-weight: 400;
+      line-height: 1.25rem;
+      text-decoration: none;
+      color: ${unsafeCSS(palette.main)};
+    }
+    a.link:hover {
+      text-decoration: underline;
+    }
+    a.link.secondary {
+      color: ${unsafeCSS(palette.white)};
+    }
+    @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
+      a.link {
+        font-size: 0.875rem;
+        font-weight: 400;
+        line-height: 1rem;
+      }
+    }
+    a.link.disabled {
+      text-decoration: underline;
+      color: ${unsafeCSS(palette.primary_300)};
+      cursor: not-allowed;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], TuixLink.prototype, "href", void 0);
+__decorate([
+    property({ type: LinkTarget })
+], TuixLink.prototype, "target", void 0);
+__decorate([
+    property({ type: MainVariant })
+], TuixLink.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean })
+], TuixLink.prototype, "disabled", void 0);
+TuixLink = __decorate([
+    customElement('tuix-link')
+], TuixLink);
+export { TuixLink };
+//# sourceMappingURL=TuixLink.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TuixLink.js","sourceRoot":"","sources":["../../../src/tuix-link/TuixLink.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGrD,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QA+BE,SAAI,GAAG,EAAE,CAAC;QAGV,WAAM,GAAG,UAAU,CAAC,KAAK,CAAC;QAG1B,YAAO,GAAG,WAAW,CAAC,OAAO,CAAC;QAG9B,aAAQ,GAAG,KAAK,CAAC;IAanB,CAAC;IAXC,MAAM;QACJ,OAAO,IAAI,CAAA;;kBAEG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM;sBACzC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;gBACrD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI;;;;KAI3D,CAAC;IACJ,CAAC;;AAnDM,eAAM,GAAG,GAAG,CAAA;;;;;;;eAON,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;;;;;;eAMvB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;;yCAEE,WAAW,CAAC,MAAM;;;;;;;;;eAS5C,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;GAG1C,AA3BY,CA2BX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;wCACL;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;yCACF;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACX;AAxCN,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAqDpB;SArDY,QAAQ","sourcesContent":["import { html, css, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { palette } from '../utils/colors';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { MainVariant } from '../utils/mainVariant.enum';\nimport { LinkTarget } from './enums/linkTarget.enum';\n\n@customElement('tuix-link')\nexport class TuixLink extends LitElement {\n  static styles = css`\n    a.link {\n      font-family: 'rubik', sans-serif;\n      font-size: 1rem;\n      font-weight: 400;\n      line-height: 1.25rem;\n      text-decoration: none;\n      color: ${unsafeCSS(palette.main)};\n    }\n    a.link:hover {\n      text-decoration: underline;\n    }\n    a.link.secondary {\n      color: ${unsafeCSS(palette.white)};\n    }\n    @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n      a.link {\n        font-size: 0.875rem;\n        font-weight: 400;\n        line-height: 1rem;\n      }\n    }\n    a.link.disabled {\n      text-decoration: underline;\n      color: ${unsafeCSS(palette.primary_300)};\n      cursor: not-allowed;\n    }\n  `;\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: LinkTarget })\n  target = LinkTarget.Blank;\n\n  @property({ type: MainVariant })\n  variant = MainVariant.PRIMARY;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  render() {\n    return html`\n      <a\n        target=\"${this.disabled ? LinkTarget.Self : this.target}\"\n        class=\"link ${this.variant} ${this.disabled ? 'disabled' : ''}\"\n        href=\"${this.disabled ? 'javascript:void(0)' : this.href}\"\n      >\n        <slot></slot>\n      </a>\n    `;\n  }\n}\n"]}

package/dist/src/tuix-link/enums/linkTarget.enum.d.ts

@@ -0,0 +1,6 @@
+export declare enum LinkTarget {
+    Blank = "_blank",
+    Self = "_self",
+    Parent = "_parent",
+    Top = "_top"
+}

package/dist/src/tuix-link/enums/linkTarget.enum.js

@@ -0,0 +1,8 @@
+export var LinkTarget;
+(function (LinkTarget) {
+    LinkTarget["Blank"] = "_blank";
+    LinkTarget["Self"] = "_self";
+    LinkTarget["Parent"] = "_parent";
+    LinkTarget["Top"] = "_top";
+})(LinkTarget || (LinkTarget = {}));
+//# sourceMappingURL=linkTarget.enum.js.map

package/dist/src/tuix-link/enums/linkTarget.enum.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"linkTarget.enum.js","sourceRoot":"","sources":["../../../../src/tuix-link/enums/linkTarget.enum.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,8BAAgB,CAAA;IAChB,4BAAc,CAAA;IACd,gCAAkB,CAAA;IAClB,0BAAY,CAAA;AACd,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB","sourcesContent":["export enum LinkTarget {\n  Blank = '_blank',\n  Self = '_self',\n  Parent = '_parent',\n  Top = '_top',\n}\n"]}

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

@@ -0,0 +1,7 @@
+import { LitElement, TemplateResult } from 'lit';
+import { ShadowVariants } from './enums/tuix-paper.enum';
+export declare class TuixPaper extends LitElement {
+    elevation: ShadowVariants;
+    static styles: import("lit").CSSResult;
+    render(): TemplateResult;
+}

package/dist/src/tuix-paper/TuixPaper.js

@@ -0,0 +1,40 @@
+import { __decorate } from "tslib";
+import { LitElement, css, html, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ShadowVariants } from './enums/tuix-paper.enum';
+let TuixPaper = class TuixPaper extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.elevation = ShadowVariants.Variant_1;
+    }
+    render() {
+        return html ` <div class="elevation variant_${this.elevation}">
+      <slot></slot>
+    </div>`;
+    }
+};
+// prettier-ignore
+TuixPaper.styles = css `
+    .elevation {
+      border-radius: 20px;
+      padding: 16px 32px;
+    }
+
+    ${unsafeCSS(Object.values(ShadowVariants).slice(1)
+    .map((variant, index) => {
+    return `
+            .elevation.variant_${variant} {
+              box-shadow: 0px ${Math.pow(2, index)}px ${Math.pow(2, (index + 2))}px rgba(66, 79, 101, 0.16);
+            }
+          `;
+})
+    .join('\n'))}
+  `;
+__decorate([
+    property({ type: ShadowVariants })
+], TuixPaper.prototype, "elevation", void 0);
+TuixPaper = __decorate([
+    customElement('tuix-paper')
+], TuixPaper);
+export { TuixPaper };
+//# sourceMappingURL=TuixPaper.js.map

package/dist/src/tuix-paper/TuixPaper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TuixPaper.js","sourceRoot":"","sources":["../../../src/tuix-paper/TuixPaper.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAGzD,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAAzC;;QAEE,cAAS,GAAmB,cAAc,CAAC,SAAS,CAAC;IA2BvD,CAAC;IALC,MAAM;QACJ,OAAO,IAAI,CAAA,kCAAkC,IAAI,CAAC,SAAS;;WAEpD,CAAC;IACV,CAAC;;AAxBD,kBAAkB;AACX,gBAAM,GAAG,GAAG,CAAA;;;;;;MAMf,SAAS,CACT,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;KACnC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;IACtB,OAAO;iCACgB,OAAO;gCACR,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;;WAErE,CAAC;AACJ,CAAC,CAAC;KACD,IAAI,CAAC,IAAI,CAAC,CACd;GACF,AAjBY,CAiBX;AApBF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC;4CACkB;AAF1C,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA6BrB;SA7BY,SAAS","sourcesContent":["import { LitElement, TemplateResult, css, html, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ShadowVariants } from './enums/tuix-paper.enum';\n\n@customElement('tuix-paper')\nexport class TuixPaper extends LitElement {\n  @property({ type: ShadowVariants })\n  elevation: ShadowVariants = ShadowVariants.Variant_1;\n\n  // prettier-ignore\n  static styles = css`\n    .elevation {\n      border-radius: 20px;\n      padding: 16px 32px;\n    }\n\n    ${unsafeCSS(\n      Object.values(ShadowVariants).slice(1)\n        .map((variant, index) => {\n          return `\n            .elevation.variant_${variant} {\n              box-shadow: 0px ${Math.pow(2, index)}px ${Math.pow(2, (index + 2))}px rgba(66, 79, 101, 0.16);\n            }\n          `;\n        })\n        .join('\\n')\n    )}\n  `;\n\n  render(): TemplateResult {\n    return html` <div class=\"elevation variant_${this.elevation}\">\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}

package/dist/src/tuix-paper/enums/tuix-paper.enum.d.ts

@@ -0,0 +1,7 @@
+export declare enum ShadowVariants {
+    Variant_0 = "0",
+    Variant_1 = "1",
+    Variant_2 = "2",
+    Variant_3 = "3",
+    Variant_4 = "4"
+}

package/dist/src/tuix-paper/enums/tuix-paper.enum.js

@@ -0,0 +1,9 @@
+export var ShadowVariants;
+(function (ShadowVariants) {
+    ShadowVariants["Variant_0"] = "0";
+    ShadowVariants["Variant_1"] = "1";
+    ShadowVariants["Variant_2"] = "2";
+    ShadowVariants["Variant_3"] = "3";
+    ShadowVariants["Variant_4"] = "4";
+})(ShadowVariants || (ShadowVariants = {}));
+//# sourceMappingURL=tuix-paper.enum.js.map

package/dist/src/tuix-paper/enums/tuix-paper.enum.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tuix-paper.enum.js","sourceRoot":"","sources":["../../../../src/tuix-paper/enums/tuix-paper.enum.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,cAMX;AAND,WAAY,cAAc;IACxB,iCAAe,CAAA;IACf,iCAAe,CAAA;IACf,iCAAe,CAAA;IACf,iCAAe,CAAA;IACf,iCAAe,CAAA;AACjB,CAAC,EANW,cAAc,KAAd,cAAc,QAMzB","sourcesContent":["export enum ShadowVariants {\n  Variant_0 = '0',\n  Variant_1 = '1',\n  Variant_2 = '2',\n  Variant_3 = '3',\n  Variant_4 = '4',\n}\n"]}

package/dist/src/tuix-text/TuixText.d.ts

@@ -1,10 +1,9 @@
 import { LitElement } from 'lit';
-import { TextType, TextColor, TextSize } from '../enums/tuix-text.enums.js';
+import { TextSize } from './enums/tuix-text.enums.js';
+import { TextVariant } from '../utils/colors.js';
 export declare class TuixText extends LitElement {
     size?: TextSize;
-    color?: TextColor;
-    type?: TextType;
+    color?: TextVariant.PRIMARY;
     static styles: import("lit").CSSResult[];
-    getTextClass(): string;
     render(): import("lit-html").TemplateResult<1>;
 }