@aquera/nile-elements 0.1.17 → 0.1.18

package/dist/src/nile-tooltip/nile-tooltip.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-tooltip.css.js","sourceRoot":"","sources":["../../../src/nile-tooltip/nile-tooltip.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Tooltip CSS\n */\nexport const styles = css`\n  :host {\n    --max-width: 20rem;\n    --hide-delay: 0ms;\n    --show-delay: 150ms;\n\n    display: contents;\n  }\n\n  .tooltip {\n    --arrow-size: 6px;\n    --arrow-color: var(--nile-tooltip-color-background);\n  }\n\n  .tooltip::part(popup) {\n    pointer-events: none;\n    z-index: 1000;\n  }\n\n  .tooltip[placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .tooltip[placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  .tooltip[placement^='left']::part(popup) {\n    transform-origin: right;\n  }\n\n  .tooltip[placement^='right']::part(popup) {\n    transform-origin: left;\n  }\n\n  .tooltip__body {\n    display: block;\n    width: max-content;\n    max-width: var(--max-width);\n    border-radius: 4px;\n    background-color: var(--nile-tooltip-color-background);\n    font-size: var(--nile-tooltip-font-size-sm);\n    font-weight: var(--nile-tooltip-font-weight-sm);\n    line-height: var(--nile-tooltip-line-height-sm);\n    padding: var(--nile-tooltip-padding-y) var(--nile-tooltip-padding-x);\n    color: #ffffff;\n    pointer-events: none;\n    word-break: break-word;\n  }\n\n  .tooltip__body--large {\n    font-size: var(--nile-tooltip-font-size-lg);\n    line-height: var(--nile-tooltip-line-height-lg);\n    font-weight: var(--nile-tooltip-font-weight-lg);\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-tooltip.css.js","sourceRoot":"","sources":["../../../src/nile-tooltip/nile-tooltip.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Tooltip CSS\n */\nexport const styles = css`\n  :host {\n    --max-width: 20rem;\n    --hide-delay: 0ms;\n    --show-delay: 150ms;\n\n    display: contents;\n  }\n\n  .tooltip {\n    --arrow-size: 6px;\n    --arrow-color: var(--nile-tooltip-color-background);\n  }\n\n  .tooltip::part(popup) {\n    pointer-events: none;\n    z-index: 1000;\n  }\n\n  .tooltip[placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .tooltip[placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  .tooltip[placement^='left']::part(popup) {\n    transform-origin: right;\n  }\n\n  .tooltip[placement^='right']::part(popup) {\n    transform-origin: left;\n  }\n\n  .tooltip__body {\n    display: block;\n    width: max-content;\n    max-width: var(--max-width);\n    border-radius: 4px;\n    background-color: var(--nile-tooltip-color-background);\n    font-size: var(--nile-tooltip-font-size-sm);\n    font-weight: var(--nile-tooltip-font-weight-sm);\n    line-height: var(--nile-tooltip-line-height-sm);\n    padding: var(--nile-tooltip-padding-y) var(--nile-tooltip-padding-x);\n    color: var(--nile-colors-white-base);\n    pointer-events: none;\n    word-break: break-word;\n  }\n\n  .tooltip__body--large {\n    font-size: var(--nile-tooltip-font-size-lg);\n    line-height: var(--nile-tooltip-line-height-lg);\n    font-weight: var(--nile-tooltip-font-weight-lg);\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-tour/nile-tour.css.js

@@ -14,7 +14,7 @@ export const styles = css `
 
   .introjs-tooltip {
     background-color: var(--nile-tour-background-color, #1978B8);
-    color: var(--nile-tour-text-color, #fff);
+    color: var(--nile-tour-text-color, var(--nile-colors-white-base));
     width: 300px;
     max-width: 300px;
     border-radius: 4px;
@@ -26,7 +26,7 @@ export const styles = css `
   }
 
   .introjs-tooltip-title {
-    color: #ffffff;
+    color: var(--nile-colors-white-base);
     font-size: 16px;
     font-style: normal;
     font-weight: 500;
@@ -41,7 +41,7 @@ export const styles = css `
   }
 
   .introjs-tooltiptext {
-    color: #ffffff;
+    color: var(--nile-colors-white-base);
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -90,14 +90,14 @@ export const styles = css `
     transform: rotate(0);
     clip-path: inset(0px 1px 0px 0px);
     left: -13.5px;
-    border-right-color: var(--nile-tour-background-color, #fff) !important;
+    border-right-color: var(--nile-tour-background-color, var(--nile-colors-white-base)) !important;
   }
 
   .introjs-arrow.right-bottom {
     right: -12px;
     transform: rotate(180deg);
     clip-path: inset(0px 3px 0px 0px);
-    border-left-color: var(--nile-tour-background-color, #fff) !important;
+    border-left-color: var(--nile-tour-background-color, var(--nile-colors-white-base)) !important;
   }
 
   .introjs-arrow.top-middle {
@@ -111,7 +111,7 @@ export const styles = css `
   .introjs-button {
     background: none;
     border: none;
-    color: var(--nile-tour-text-color, #fff);
+    color: var(--nile-tour-text-color, var(--nile-colors-white-base));
     font-size: 14px;
     padding: 0;
     cursor: pointer;
@@ -129,7 +129,7 @@ export const styles = css `
   .introjs-button:hover {
     background: none;
     border: none;
-    color: var(--nile-tour-text-color, #fff);
+    color: var(--nile-tour-text-color, var(--nile-colors-white-base));
     font-size: 14px;
     padding: 0;
     cursor: pointer;
@@ -145,7 +145,7 @@ export const styles = css `
   .introjs-button:focus {
     background: none;
     border: none;
-    color: var(--nile-tour-text-color, #fff);
+    color: var(--nile-tour-text-color, var(--nile-colors-white-base));
     font-size: 14px;
     padding: 0;
     cursor: pointer;

package/dist/src/nile-tour/nile-tour.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-tour.css.js","sourceRoot":"","sources":["../../../src/nile-tour/nile-tour.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0NxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Tour CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .introjs-tooltip {\n    background-color: var(--nile-tour-background-color, #1978B8);\n    color: var(--nile-tour-text-color, #fff);\n    width: 300px;\n    max-width: 300px;\n    border-radius: 4px;\n    border: 1px solid var(--Neutral-30, #1978B8);\n    background: var(--White-Normal, #1978B8);\n\n    /* Elevation/Lifted */\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .introjs-tooltip-title {\n    color: #ffffff;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 16px;\n    letter-spacing: 0.2px;\n  }\n\n  .introjs-tooltip-header {\n    padding-left: 18px;\n    padding-right: 18px;\n    padding-top: 18px;\n  }\n\n  .introjs-tooltiptext {\n    color: #ffffff;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    letter-spacing: 0.2px;\n    padding: 15px 18px;\n  }\n\n  .introjs-arrow {\n    width: 15px;\n    height: 20px;\n    background-image: url('data:image/svg+xml,%3Csvg width=\"15\" height=\"20\" viewBox=\"0 0 15 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M1.13333 11.6C0.0666661 10.8 0.0666662 9.2 1.13333 8.4L11.8 0.400001C13.1185 -0.588854 15 0.351909 15 2L15 18C15 19.6481 13.1185 20.5889 11.8 19.6L1.13333 11.6Z\" fill=\"%231978B8\"/%3E%3C/svg%3E');\n    background-repeat: no-repeat;\n    background-size: contain;\n    background-position: center;\n    position: absolute;\n    border: none;\n    content: none;\n  }\n\n  .introjs-arrow.top {\n    top: -14.5px;\n    transform: rotate(90deg);\n    clip-path: inset(0px 3px 0px 0px);\n  }\n\n  .introjs-arrow.bottom {\n    bottom: -14.5px;\n    transform: rotate(270deg);\n    clip-path: inset(0px 3px 0px 0px);\n  }\n\n  .introjs-arrow.left {\n    left: -11.5px;\n    transform: rotate(0);\n    clip-path: inset(0px 3px 0px 0px);\n  }\n\n  .introjs-arrow.right {\n    right: -12px;\n    transform: rotate(180deg);\n    clip-path: inset(0px 3px 0px 0px);\n  }\n\n  .introjs-arrow.left-bottom {\n    transform: rotate(0);\n    clip-path: inset(0px 1px 0px 0px);\n    left: -13.5px;\n    border-right-color: var(--nile-tour-background-color, #fff) !important;\n  }\n\n  .introjs-arrow.right-bottom {\n    right: -12px;\n    transform: rotate(180deg);\n    clip-path: inset(0px 3px 0px 0px);\n    border-left-color: var(--nile-tour-background-color, #fff) !important;\n  }\n\n  .introjs-arrow.top-middle {\n    top: -14px;\n    left: 50%;\n    margin-left: -5px;\n    transform: rotate(90deg);\n    clip-path: inset(0px 3px 0px 0px);\n  }\n\n  .introjs-button {\n    background: none;\n    border: none;\n    color: var(--nile-tour-text-color, #fff);\n    font-size: 14px;\n    padding: 0;\n    cursor: pointer;\n    text-shadow: none;\n    background: var(--Primary-Normal, #1978B8);\n    border-color: transparent;\n    display: flex;\n    padding: 12px;\n    align-items: center;\n    gap: 12px;\n    border-radius: 4px;\n    font-weight: 500;\n  }\n\n  .introjs-button:hover {\n    background: none;\n    border: none;\n    color: var(--nile-tour-text-color, #fff);\n    font-size: 14px;\n    padding: 0;\n    cursor: pointer;\n    text-shadow: none;\n    background: var(--Primary-Normal, #1978B8);\n    border-color: transparent;\n    display: flex;\n    padding: 12px;\n    align-items: center;\n    gap: 12px;\n  }\n\n  .introjs-button:focus {\n    background: none;\n    border: none;\n    color: var(--nile-tour-text-color, #fff);\n    font-size: 14px;\n    padding: 0;\n    cursor: pointer;\n    text-shadow: none;\n    box-shadow: none;\n    background: var(--Primary-Normal, #1978B8);\n    border-color: transparent;\n    display: flex;\n    padding: 12px;\n    align-items: center;\n    gap: 12px;\n  }\n\n  .introjs-tooltipbuttons {\n    border-top: none;\n    display: flex;\n    justify-content: flex-end;\n    gap: 10px;\n  }\n\n  .introjs-helperNumberLayer {\n    display: none;\n  }\n\n  .introjs-bullets {\n    display: none;\n  }\n\n  .introjs-skipbutton {\n    display: none;\n  }\n\n  .introjs-prev-button {\n    color: #c7ced4;\n  }\n\n  .introjs-helperLayer {\n    display: none;\n    pointer-events: none;\n  }\n\n  .introjs-overlay {\n    display: none;\n    pointer-events: none;\n  }\n\n  .introjs-step-counter {\n    margin-right: auto;\n    font-size: 14px;\n    padding: 0 10px;\n    display: flex;\n    align-items: center;\n    color: var(--Color-Text-Inverted-Secondary, rgba(255, 255, 255, 0.50));\n    font-style: normal;\n    font-weight: 500;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  @keyframes shake {\n    0% {\n      transform: translateX(0);\n    }\n    25% {\n      transform: translateX(-5px);\n    }\n    50% {\n      transform: translateX(5px);\n    }\n    75% {\n      transform: translateX(-5px);\n    }\n    100% {\n      transform: translateX(0);\n    }\n  }\n\n  .introjs-shake {\n    animation: shake 0.5s ease infinite;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-tour.css.js","sourceRoot":"","sources":["../../../src/nile-tour/nile-tour.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0NxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Tour CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .introjs-tooltip {\n    background-color: var(--nile-tour-background-color, #1978B8);\n    color: var(--nile-tour-text-color, var(--nile-colors-white-base));\n    width: 300px;\n    max-width: 300px;\n    border-radius: 4px;\n    border: 1px solid var(--Neutral-30, #1978B8);\n    background: var(--White-Normal, #1978B8);\n\n    /* Elevation/Lifted */\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .introjs-tooltip-title {\n    color: var(--nile-colors-white-base);\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 16px;\n    letter-spacing: 0.2px;\n  }\n\n  .introjs-tooltip-header {\n    padding-left: 18px;\n    padding-right: 18px;\n    padding-top: 18px;\n  }\n\n  .introjs-tooltiptext {\n    color: var(--nile-colors-white-base);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    letter-spacing: 0.2px;\n    padding: 15px 18px;\n  }\n\n  .introjs-arrow {\n    width: 15px;\n    height: 20px;\n    background-image: url('data:image/svg+xml,%3Csvg width=\"15\" height=\"20\" viewBox=\"0 0 15 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M1.13333 11.6C0.0666661 10.8 0.0666662 9.2 1.13333 8.4L11.8 0.400001C13.1185 -0.588854 15 0.351909 15 2L15 18C15 19.6481 13.1185 20.5889 11.8 19.6L1.13333 11.6Z\" fill=\"%231978B8\"/%3E%3C/svg%3E');\n    background-repeat: no-repeat;\n    background-size: contain;\n    background-position: center;\n    position: absolute;\n    border: none;\n    content: none;\n  }\n\n  .introjs-arrow.top {\n    top: -14.5px;\n    transform: rotate(90deg);\n    clip-path: inset(0px 3px 0px 0px);\n  }\n\n  .introjs-arrow.bottom {\n    bottom: -14.5px;\n    transform: rotate(270deg);\n    clip-path: inset(0px 3px 0px 0px);\n  }\n\n  .introjs-arrow.left {\n    left: -11.5px;\n    transform: rotate(0);\n    clip-path: inset(0px 3px 0px 0px);\n  }\n\n  .introjs-arrow.right {\n    right: -12px;\n    transform: rotate(180deg);\n    clip-path: inset(0px 3px 0px 0px);\n  }\n\n  .introjs-arrow.left-bottom {\n    transform: rotate(0);\n    clip-path: inset(0px 1px 0px 0px);\n    left: -13.5px;\n    border-right-color: var(--nile-tour-background-color, var(--nile-colors-white-base)) !important;\n  }\n\n  .introjs-arrow.right-bottom {\n    right: -12px;\n    transform: rotate(180deg);\n    clip-path: inset(0px 3px 0px 0px);\n    border-left-color: var(--nile-tour-background-color, var(--nile-colors-white-base)) !important;\n  }\n\n  .introjs-arrow.top-middle {\n    top: -14px;\n    left: 50%;\n    margin-left: -5px;\n    transform: rotate(90deg);\n    clip-path: inset(0px 3px 0px 0px);\n  }\n\n  .introjs-button {\n    background: none;\n    border: none;\n    color: var(--nile-tour-text-color, var(--nile-colors-white-base));\n    font-size: 14px;\n    padding: 0;\n    cursor: pointer;\n    text-shadow: none;\n    background: var(--Primary-Normal, #1978B8);\n    border-color: transparent;\n    display: flex;\n    padding: 12px;\n    align-items: center;\n    gap: 12px;\n    border-radius: 4px;\n    font-weight: 500;\n  }\n\n  .introjs-button:hover {\n    background: none;\n    border: none;\n    color: var(--nile-tour-text-color, var(--nile-colors-white-base));\n    font-size: 14px;\n    padding: 0;\n    cursor: pointer;\n    text-shadow: none;\n    background: var(--Primary-Normal, #1978B8);\n    border-color: transparent;\n    display: flex;\n    padding: 12px;\n    align-items: center;\n    gap: 12px;\n  }\n\n  .introjs-button:focus {\n    background: none;\n    border: none;\n    color: var(--nile-tour-text-color, var(--nile-colors-white-base));\n    font-size: 14px;\n    padding: 0;\n    cursor: pointer;\n    text-shadow: none;\n    box-shadow: none;\n    background: var(--Primary-Normal, #1978B8);\n    border-color: transparent;\n    display: flex;\n    padding: 12px;\n    align-items: center;\n    gap: 12px;\n  }\n\n  .introjs-tooltipbuttons {\n    border-top: none;\n    display: flex;\n    justify-content: flex-end;\n    gap: 10px;\n  }\n\n  .introjs-helperNumberLayer {\n    display: none;\n  }\n\n  .introjs-bullets {\n    display: none;\n  }\n\n  .introjs-skipbutton {\n    display: none;\n  }\n\n  .introjs-prev-button {\n    color: #c7ced4;\n  }\n\n  .introjs-helperLayer {\n    display: none;\n    pointer-events: none;\n  }\n\n  .introjs-overlay {\n    display: none;\n    pointer-events: none;\n  }\n\n  .introjs-step-counter {\n    margin-right: auto;\n    font-size: 14px;\n    padding: 0 10px;\n    display: flex;\n    align-items: center;\n    color: var(--Color-Text-Inverted-Secondary, rgba(255, 255, 255, 0.50));\n    font-style: normal;\n    font-weight: 500;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  @keyframes shake {\n    0% {\n      transform: translateX(0);\n    }\n    25% {\n      transform: translateX(-5px);\n    }\n    50% {\n      transform: translateX(5px);\n    }\n    75% {\n      transform: translateX(-5px);\n    }\n    100% {\n      transform: translateX(0);\n    }\n  }\n\n  .introjs-shake {\n    animation: shake 0.5s ease infinite;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-tree/nile-tree.css.js

@@ -28,7 +28,7 @@ export const styles = css `
      * These are actually used by tree item, but we define them here so they can more easily be set and all tree items
      * stay consistent.
      */
-    --indent-guide-color: #F5F7F7;
+    --indent-guide-color: var(--nile-colors-dark-200);
     --indent-guide-offset: 0;
     --indent-guide-style: solid;
     --indent-guide-width: 0;

package/dist/src/nile-tree/nile-tree.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-tree.css.js","sourceRoot":"","sources":["../../../src/nile-tree/nile-tree.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * Tree CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    /*\n     * These are actually used by tree item, but we define them here so they can more easily be set and all tree items\n     * stay consistent.\n     */\n    --indent-guide-color: #F5F7F7;\n    --indent-guide-offset: 0;\n    --indent-guide-style: solid;\n    --indent-guide-width: 0;\n    --indent-size: 1.25rem;\n\n    display: block;\n    isolation: isolate;\n\n    /*\n     * Tree item indentation uses the \"em\" unit to increment its width on each level, so setting the font size to zero\n     * here removes the indentation for all the nodes on the first level.\n     */\n    font-size: 0;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-tree.css.js","sourceRoot":"","sources":["../../../src/nile-tree/nile-tree.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * Tree CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    /*\n     * These are actually used by tree item, but we define them here so they can more easily be set and all tree items\n     * stay consistent.\n     */\n    --indent-guide-color: var(--nile-colors-dark-200);\n    --indent-guide-offset: 0;\n    --indent-guide-style: solid;\n    --indent-guide-width: 0;\n    --indent-size: 1.25rem;\n\n    display: block;\n    isolation: isolate;\n\n    /*\n     * Tree item indentation uses the \"em\" unit to increment its width on each level, so setting the font size to zero\n     * here removes the indentation for all the nodes on the first level.\n     */\n    font-size: 0;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-tree-item/nile-tree-item.css.js

@@ -42,7 +42,7 @@ export const styles = css `
     display: flex;
     align-items: stretch;
     flex-direction: column;
-    color: #777D82;
+    color: var(--nile-colors-neutral-700);
     cursor: pointer;
     user-select: none;
   }
@@ -75,7 +75,7 @@ export const styles = css `
     align-items: center;
     justify-content: center;
     box-sizing: content-box;
-    color: #C7CED4;
+    color: var(--nile-colors-neutral-500);
     padding: 0.5rem;
     width: 1rem;
     height: 1rem;
@@ -121,18 +121,18 @@ export const styles = css `
   }
 
   :host(:focus-visible) .tree-item__item {
-    outline: solid 3px #C7CED4;
+    outline: solid 3px var(--nile-colors-neutral-500);
     outline-offset: 1px;
     z-index: 2;
   }
 
   :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
-    background-color: #eaecf0;
-    border-inline-start-color: #035da6;
+    background-color: var(--nile-colors-neutral-700);
+    border-inline-start-color: var(--nile-colors-primary-700);
   }
 
   :host(:not([aria-disabled='true'])) .tree-item__expand-button {
-    color: #777D82;
+    color: var(--nile-colors-neutral-700);
   }
 
   .tree-item__label {

package/dist/src/nile-tree-item/nile-tree-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-tree-item.css.js","sourceRoot":"","sources":["../../../src/nile-tree-item/nile-tree-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmKxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * TreeItem CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: block;\n    outline: 0;\n    z-index: 0;\n  }\n\n  :host(:focus) {\n    outline: none;\n  }\n\n  slot:not([name])::slotted(nile-icon) {\n    margin-inline-end: 0.5rem;\n  }\n\n  .tree-item {\n    position: relative;\n    display: flex;\n    align-items: stretch;\n    flex-direction: column;\n    color: #777D82;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .tree-item__checkbox {\n    pointer-events: none;\n  }\n\n  .tree-item__expand-button,\n  .tree-item__checkbox,\n  .tree-item__label {\n    font-family: var(--nile-font-family-serif);\n    font-size: 16px;\n    font-weight: 400;\n  }\n\n  .tree-item__checkbox::part(base) {\n    display: flex;\n    align-items: center;\n  }\n\n  .tree-item__indentation {\n    display: block;\n    width: 1em;\n    flex-shrink: 0;\n  }\n\n  .tree-item__expand-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: content-box;\n    color: #C7CED4;\n    padding: 0.5rem;\n    width: 1rem;\n    height: 1rem;\n    flex-shrink: 0;\n    cursor: pointer;\n  }\n\n  .tree-item__expand-button {\n    transition: 250ms rotate ease;\n  }\n\n  .tree-item--expanded .tree-item__expand-button {\n    rotate: 90deg;\n  }\n\n  .tree-item--expanded.tree-item--rtl .tree-item__expand-button {\n    rotate: -90deg;\n  }\n\n  .tree-item--expanded slot[name='expand-icon'],\n  .tree-item:not(.tree-item--expanded) slot[name='collapse-icon'] {\n    display: none;\n  }\n\n  .tree-item:not(.tree-item--has-expand-button) .tree-item__expand-icon-slot {\n    display: none;\n  }\n\n  .tree-item__expand-button--visible {\n    cursor: pointer;\n  }\n\n  .tree-item__item {\n    display: flex;\n    align-items: center;\n    border-inline-start: solid 3px transparent;\n  }\n\n  .tree-item--disabled .tree-item__item {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n\n  :host(:focus-visible) .tree-item__item {\n    outline: solid 3px #C7CED4;\n    outline-offset: 1px;\n    z-index: 2;\n  }\n\n  :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {\n    background-color: #eaecf0;\n    border-inline-start-color: #035da6;\n  }\n\n  :host(:not([aria-disabled='true'])) .tree-item__expand-button {\n    color: #777D82;\n  }\n\n  .tree-item__label {\n    display: flex;\n    align-items: center;\n    transition: 150ms color;\n  }\n\n  .tree-item__children {\n    display: block;\n    font-size: calc(1em + var(--indent-size, 1rem));\n  }\n\n  /* Indentation lines */\n  .tree-item__children {\n    position: relative;\n  }\n\n  .tree-item__children::before {\n    content: '';\n    position: absolute;\n    top: var(--indent-guide-offset);\n    bottom: var(--indent-guide-offset);\n    left: calc(1em - (var(--indent-guide-width) / 2) - 1px);\n    border-inline-end: var(--indent-guide-width) var(--indent-guide-style) var(--indent-guide-color);\n    z-index: 1;\n  }\n\n  .tree-item--rtl .tree-item__children::before {\n    left: auto;\n    right: 1em;\n  }\n\n  @media (forced-colors: active) {\n    :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {\n      outline: dashed 1px SelectedItem;\n    }\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-tree-item.css.js","sourceRoot":"","sources":["../../../src/nile-tree-item/nile-tree-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmKxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * TreeItem CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: block;\n    outline: 0;\n    z-index: 0;\n  }\n\n  :host(:focus) {\n    outline: none;\n  }\n\n  slot:not([name])::slotted(nile-icon) {\n    margin-inline-end: 0.5rem;\n  }\n\n  .tree-item {\n    position: relative;\n    display: flex;\n    align-items: stretch;\n    flex-direction: column;\n    color: var(--nile-colors-neutral-700);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .tree-item__checkbox {\n    pointer-events: none;\n  }\n\n  .tree-item__expand-button,\n  .tree-item__checkbox,\n  .tree-item__label {\n    font-family: var(--nile-font-family-serif);\n    font-size: 16px;\n    font-weight: 400;\n  }\n\n  .tree-item__checkbox::part(base) {\n    display: flex;\n    align-items: center;\n  }\n\n  .tree-item__indentation {\n    display: block;\n    width: 1em;\n    flex-shrink: 0;\n  }\n\n  .tree-item__expand-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: content-box;\n    color: var(--nile-colors-neutral-500);\n    padding: 0.5rem;\n    width: 1rem;\n    height: 1rem;\n    flex-shrink: 0;\n    cursor: pointer;\n  }\n\n  .tree-item__expand-button {\n    transition: 250ms rotate ease;\n  }\n\n  .tree-item--expanded .tree-item__expand-button {\n    rotate: 90deg;\n  }\n\n  .tree-item--expanded.tree-item--rtl .tree-item__expand-button {\n    rotate: -90deg;\n  }\n\n  .tree-item--expanded slot[name='expand-icon'],\n  .tree-item:not(.tree-item--expanded) slot[name='collapse-icon'] {\n    display: none;\n  }\n\n  .tree-item:not(.tree-item--has-expand-button) .tree-item__expand-icon-slot {\n    display: none;\n  }\n\n  .tree-item__expand-button--visible {\n    cursor: pointer;\n  }\n\n  .tree-item__item {\n    display: flex;\n    align-items: center;\n    border-inline-start: solid 3px transparent;\n  }\n\n  .tree-item--disabled .tree-item__item {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n\n  :host(:focus-visible) .tree-item__item {\n    outline: solid 3px var(--nile-colors-neutral-500);\n    outline-offset: 1px;\n    z-index: 2;\n  }\n\n  :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {\n    background-color: var(--nile-colors-neutral-700);\n    border-inline-start-color: var(--nile-colors-primary-700);\n  }\n\n  :host(:not([aria-disabled='true'])) .tree-item__expand-button {\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .tree-item__label {\n    display: flex;\n    align-items: center;\n    transition: 150ms color;\n  }\n\n  .tree-item__children {\n    display: block;\n    font-size: calc(1em + var(--indent-size, 1rem));\n  }\n\n  /* Indentation lines */\n  .tree-item__children {\n    position: relative;\n  }\n\n  .tree-item__children::before {\n    content: '';\n    position: absolute;\n    top: var(--indent-guide-offset);\n    bottom: var(--indent-guide-offset);\n    left: calc(1em - (var(--indent-guide-width) / 2) - 1px);\n    border-inline-end: var(--indent-guide-width) var(--indent-guide-style) var(--indent-guide-color);\n    z-index: 1;\n  }\n\n  .tree-item--rtl .tree-item__children::before {\n    left: auto;\n    right: 1em;\n  }\n\n  @media (forced-colors: active) {\n    :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {\n      outline: dashed 1px SelectedItem;\n    }\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-vertical-stepper-item/nile-vertical-stepper-item.css.js

@@ -59,23 +59,23 @@ export const styles = css `
 		width: var(--circle-height);
 		aspect-ratio: 1 / 1;
 		border-radius: 50%;
-		background: radial-gradient(var(--nile-colors-gray-light-mode-300, #d0d5dd) var(--bulletin--dot--seperation), var(--nile-colors-gray-neutral-50, #f9fafb) var(--bulletin--dot--seperation));
-		border: 2px solid var(--nile-colors-gray-light-mode-200, #eaecf0);
+		background: radial-gradient(var(--nile-colors-gray-light-mode-300) var(--bulletin--dot--seperation), var(--nile-colors-gray-neutral-50) var(--bulletin--dot--seperation));
+		border: 2px solid var(--nile-colors-gray-light-mode-200);
 	}
 
 	.stepper__bulletin__dot--active{
-		background: radial-gradient(#fff var(--bulletin--dot--seperation), var(--nile-colors-primary-600, #005EA6) var(--bulletin--dot--seperation));
-		border: 2px solid #85AAD18A;
+		background: radial-gradient(var(--nile-colors-white-base) var(--bulletin--dot--seperation), var(--nile-colors-primary-600) var(--bulletin--dot--seperation));
+		border: 2px solid var(--nile-colors-primary-400);
 	}
 
 	.stepper__bulletin--icon {
 		display:grid;
 		place-content:center;
 		width: var(--circle-height);
-		border: 2px solid var(--nile-colors-primary-600, #005EA6);
+		border: 2px solid var(--nile-colors-primary-600);
 		aspect-ratio: 1 / 1;
 		border-radius: 50%;
-		background-color:var(--nile-colors-primary-600, #005EA6);
+		background-color:var(--nile-colors-primary-600);
 		overflow:hidden;
 	}
 
@@ -89,10 +89,10 @@ export const styles = css `
 
 	.stepper__item__line{
 		height:100%;
-		border-left: 2px solid var(--nile-colors-primary-600, #005EA6);
+		border-left: 2px solid var(--nile-colors-primary-600);
 	}
 	.stepper__item__line--active{
-		border-left: 2px solid var(--nile-colors-primary-600, #005EA6);
+		border-left: 2px solid var(--nile-colors-primary-600);
 	}
 
 	.stepper__item__content{
@@ -101,7 +101,7 @@ export const styles = css `
 		justify-content:start;
 	}
 	.stepper__content__title {
-		color:var(--nile-colors-gray-light-mode-700, #344054);
+		color:var(--nile-colors-gray-light-mode-700);
 		font-size: var(--stepper-item-title-size);
 		line-height: var(--stepper-item-text-line-height);
 		font-family: var(--nile-font-family-medium);
@@ -109,11 +109,11 @@ export const styles = css `
 	}
 
 	.stepper__content__title--active{
-		color:var(--nile-colors-primary-700, #005291);
+		color:var(--nile-colors-primary-700);
 	}
 
 	.stepper__content__subtitle {
-		color:var(--nile-colors-gray-light-mode-600, #475467);
+		color:var(--nile-colors-gray-light-mode-600);
 		font-size: var(--stepper-item-subtitle-size);
 		line-height: var(--stepper-item-text-line-height);
 		font-family: var( --nile-font-family-sans-serif);
@@ -121,7 +121,7 @@ export const styles = css `
 	}
 
 	.stepper__content__subtitle--active{
-		color:var(--nile-colors-primary-600, #005EA6);
+		color:var(--nile-colors-primary-600);
 	}
 `;
 export default [styles];

package/dist/src/nile-vertical-stepper-item/nile-vertical-stepper-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-vertical-stepper-item.css.js","sourceRoot":"","sources":["../../../src/nile-vertical-stepper-item/nile-vertical-stepper-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmHxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * VerticalStepperItem CSS\n */\nexport const styles = css`\n\t:host {\n\t\t--vertical-stepper-flex-val:1;\n\t\tflex-grow:var(--vertical-stepper-flex-val);\n\t\t--bulletin--dot--seperation:30%;\n\t\t--min-line-container-height:25px;\n\t}\n\n\t.stepper__item {\n\t\tdisplay:flex;\n\t\tcolumn-gap:var(--item-spacing);\n\t\theight:100%;\n\t}\n\n\t.stepper__item--sm {\n\t\t--item-spacing: var(--nile-spacing-spacing-lg,12px);\n\t\t--stepper-item-title-size:14px;\n\t\t--stepper-item-subtitle-size:14px;\n\t\t--stepper-item-text-line-height:20px;\n\t\t--circle-height:16px;\n\t}\n\n\t.stepper__item--md {\n\t\t--item-spacing: var(--nile-spacing-spacing-xl, 16px);\n\t\t--stepper-item-title-size:16px;\n\t\t--stepper-item-subtitle-size:16px;\n\t\t--stepper-item-text-line-heightt:24px;\n\t\t--circle-height:20px;\n\t}\n\n\t.stepper__item--lg {\n\t\t--item-spacing: var(--nile-spacing-spacing-xl, 16px);\n\t\t--stepper-item-title-size:16px;\n\t\t--stepper-item-subtitle-size:16px;\n\t\t--stepper-item-text-line-height:24px;\n\t\t--circle-height:28px;\n\t}\n\t\n\t.stepper-item__connector-content{\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\t.stepper__item__bulletin {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t}\n\n\t.stepper__bulletin--dot {\n\t\twidth: var(--circle-height);\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: 50%;\n\t\tbackground: radial-gradient(var(--nile-colors-gray-light-mode-300, #d0d5dd) var(--bulletin--dot--seperation), var(--nile-colors-gray-neutral-50, #f9fafb) var(--bulletin--dot--seperation));\n\t\tborder: 2px solid var(--nile-colors-gray-light-mode-200, #eaecf0);\n\t}\n\n\t.stepper__bulletin__dot--active{\n\t\tbackground: radial-gradient(#fff var(--bulletin--dot--seperation), var(--nile-colors-primary-600, #005EA6) var(--bulletin--dot--seperation));\n\t\tborder: 2px solid #85AAD18A;\n\t}\n\n\t.stepper__bulletin--icon {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t\twidth: var(--circle-height);\n\t\tborder: 2px solid var(--nile-colors-primary-600, #005EA6);\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: 50%;\n\t\tbackground-color:var(--nile-colors-primary-600, #005EA6);\n\t\toverflow:hidden;\n\t}\n\n\t.stepper__item__line__container{\n\t\tflex-grow: 1;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tpadding: 2px;\n\t\tmin-height: var(--min-line-container-height);\n\t}\n\n\t.stepper__item__line{\n\t\theight:100%;\n\t\tborder-left: 2px solid var(--nile-colors-primary-600, #005EA6);\n\t}\n\t.stepper__item__line--active{\n\t\tborder-left: 2px solid var(--nile-colors-primary-600, #005EA6);\n\t}\n\n\t.stepper__item__content{\n\t\tdisplay:flex;\n\t\tflex-direction:column;\n\t\tjustify-content:start;\n\t}\n\t.stepper__content__title {\n\t\tcolor:var(--nile-colors-gray-light-mode-700, #344054);\n\t\tfont-size: var(--stepper-item-title-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family: var(--nile-font-family-medium);\n\t\tfont-weight: 600;\n\t}\n\n\t.stepper__content__title--active{\n\t\tcolor:var(--nile-colors-primary-700, #005291);\n\t}\n\n\t.stepper__content__subtitle {\n\t\tcolor:var(--nile-colors-gray-light-mode-600, #475467);\n\t\tfont-size: var(--stepper-item-subtitle-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family: var( --nile-font-family-sans-serif);\n\t\tfont-weight: 400;\n\t}\n\n\t.stepper__content__subtitle--active{\n\t\tcolor:var(--nile-colors-primary-600, #005EA6);\n\t}\n`;\n\nexport default [styles];"]}
+{"version":3,"file":"nile-vertical-stepper-item.css.js","sourceRoot":"","sources":["../../../src/nile-vertical-stepper-item/nile-vertical-stepper-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmHxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * VerticalStepperItem CSS\n */\nexport const styles = css`\n\t:host {\n\t\t--vertical-stepper-flex-val:1;\n\t\tflex-grow:var(--vertical-stepper-flex-val);\n\t\t--bulletin--dot--seperation:30%;\n\t\t--min-line-container-height:25px;\n\t}\n\n\t.stepper__item {\n\t\tdisplay:flex;\n\t\tcolumn-gap:var(--item-spacing);\n\t\theight:100%;\n\t}\n\n\t.stepper__item--sm {\n\t\t--item-spacing: var(--nile-spacing-spacing-lg,12px);\n\t\t--stepper-item-title-size:14px;\n\t\t--stepper-item-subtitle-size:14px;\n\t\t--stepper-item-text-line-height:20px;\n\t\t--circle-height:16px;\n\t}\n\n\t.stepper__item--md {\n\t\t--item-spacing: var(--nile-spacing-spacing-xl, 16px);\n\t\t--stepper-item-title-size:16px;\n\t\t--stepper-item-subtitle-size:16px;\n\t\t--stepper-item-text-line-heightt:24px;\n\t\t--circle-height:20px;\n\t}\n\n\t.stepper__item--lg {\n\t\t--item-spacing: var(--nile-spacing-spacing-xl, 16px);\n\t\t--stepper-item-title-size:16px;\n\t\t--stepper-item-subtitle-size:16px;\n\t\t--stepper-item-text-line-height:24px;\n\t\t--circle-height:28px;\n\t}\n\t\n\t.stepper-item__connector-content{\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\t.stepper__item__bulletin {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t}\n\n\t.stepper__bulletin--dot {\n\t\twidth: var(--circle-height);\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: 50%;\n\t\tbackground: radial-gradient(var(--nile-colors-gray-light-mode-300) var(--bulletin--dot--seperation), var(--nile-colors-gray-neutral-50) var(--bulletin--dot--seperation));\n\t\tborder: 2px solid var(--nile-colors-gray-light-mode-200);\n\t}\n\n\t.stepper__bulletin__dot--active{\n\t\tbackground: radial-gradient(var(--nile-colors-white-base) var(--bulletin--dot--seperation), var(--nile-colors-primary-600) var(--bulletin--dot--seperation));\n\t\tborder: 2px solid var(--nile-colors-primary-400);\n\t}\n\n\t.stepper__bulletin--icon {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t\twidth: var(--circle-height);\n\t\tborder: 2px solid var(--nile-colors-primary-600);\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: 50%;\n\t\tbackground-color:var(--nile-colors-primary-600);\n\t\toverflow:hidden;\n\t}\n\n\t.stepper__item__line__container{\n\t\tflex-grow: 1;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tpadding: 2px;\n\t\tmin-height: var(--min-line-container-height);\n\t}\n\n\t.stepper__item__line{\n\t\theight:100%;\n\t\tborder-left: 2px solid var(--nile-colors-primary-600);\n\t}\n\t.stepper__item__line--active{\n\t\tborder-left: 2px solid var(--nile-colors-primary-600);\n\t}\n\n\t.stepper__item__content{\n\t\tdisplay:flex;\n\t\tflex-direction:column;\n\t\tjustify-content:start;\n\t}\n\t.stepper__content__title {\n\t\tcolor:var(--nile-colors-gray-light-mode-700);\n\t\tfont-size: var(--stepper-item-title-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family: var(--nile-font-family-medium);\n\t\tfont-weight: 600;\n\t}\n\n\t.stepper__content__title--active{\n\t\tcolor:var(--nile-colors-primary-700);\n\t}\n\n\t.stepper__content__subtitle {\n\t\tcolor:var(--nile-colors-gray-light-mode-600);\n\t\tfont-size: var(--stepper-item-subtitle-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family: var( --nile-font-family-sans-serif);\n\t\tfont-weight: 400;\n\t}\n\n\t.stepper__content__subtitle--active{\n\t\tcolor:var(--nile-colors-primary-600);\n\t}\n`;\n\nexport default [styles];"]}