@aquera/nile-elements 0.0.16 → 0.0.18

package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-button/nile-button.css.js

@@ -72,127 +72,176 @@ export const styles = css `
   }
 
   .button--standard.button--secondary {
-    background-color: var(--nile-colors-neutral-400);
-    border-color: var(--nile-colors-neutral-400);
-    color: var(--nile-colors-neutral-900);
+    background-color: var(--nile-colors-button-secondary);
+    border-color: var(--nile-colors-button-secondary-border);
+    color: var(--nile-colors-button-secondary-text);
   }
 
   .button--standard.button--secondary:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-neutral-500);
-    border : none;
-    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);
-    color: var(--nile-colors-neutral-900);
+    background-color: var(--nile-colors-button-secondary-hover);
+    border-color: var(--nile-colors-button-secondary-border);
+    color: var(--nile-colors-button-secondary-text);
   }
 
   .button--standard.button--secondary:active:not(.button--disabled) {
-    background-color: var(--nile-colors-neutral-500);
-    border-color: var(--nile-colors-neutral-700);
-    color: var(--nile-colors-neutral-900);
+    background-color: var(--nile-colors-button-secondary-pressed);
+    border-color: var(--nile-colors-button-secondary-pressed-border);
+    color: var(--nile-colors-button-secondary-text);
   }
 
   .button--standard.button--secondary.button--disabled {
-    background-color: var(--nile-colors-neutral-400);
-    border-color: var(--nile-colors-neutral-400);
-    color: var(--nile-colors-dark-500);
+    background-color: var(--nile-colors-button-secondary-disabled);
+    border-color: var(--nile-colors-button-secondary-disabled-border);
+    color: var(--nile-colors-button-secondary-disabled-text);
     cursor: not-allowed;
   }
 
   .button--standard.button--secondary.button--disabled:hover,
   .button--standard.button--secondary.button--disabled:active {
-    background-color: var(--nile-colors-neutral-400);
-    border-color: var(--nile-colors-neutral-400);
-    color: var(--nile-colors-dark-500);
-    box-shadow: none;
+    background-color: var(--nile-colors-button-secondary-disabled);
+    border-color: var(--nile-colors-button-secondary-disabled-border);
+    color: var(--nile-colors-button-secondary-disabled-text);
+    cursor: not-allowed;
   }
 
   /* Primary */
   .button--standard.button--primary {
-    background-color: var(--nile-colors-primary-600);
-    border-color: var(--nile-colors-primary-600);
-    color: var(--nile-colors-white-base);
+    background-color: var(--nile-colors-button-primary);
+    border-color: var(--nile-colors-button-primary-border);
+    color: var(--nile-colors-button-primary-text);
   }
 
   .button--standard.button--primary:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-primary-700);
-    border-color: var(--nile-colors-primary-700);
-    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);
-    color: var(--nile-colors-white-base);
+    background-color: var(--nile-colors-button-primary-hover);
+    border-color: var(--nile-colors-button-primary-hover);
+    color: var(--nile-colors-button-primary-text);
   }
 
   .button--standard.button--primary:active:not(.button--disabled) {
-    background-color: var(--nile-colors-primary-700);
-    border-color: var(--nile-colors-primary-900);
-    color: var(--nile-colors-white-base);
+    background-color: var(--nile-colors-button-primary-pressed);
+    border-color: var(--nile-colors-button-primary-pressed);
+    color: var(--nile-colors-button-primary-text);
   }
 
   .button--standard.button--primary.button--disabled {
-    background-color: var(--nile-colors-neutral-700);
-    border-color: var(--nile-colors-neutral-700);
-    color: var(--nile-colors-white-base);
+    background-color: var(--nile-colors-button-primary-disabled);
+    border-color: var(--nile-colors-button-primary-disabled);
+    color: var(--nile-colors-button-primary-disabled-text);
     cursor: not-allowed;
   }
 
   .button--standard.button--primary.button--disabled:hover,
   .button--standard.button--primary.button--disabled:active {
-    background-color: var(--nile-colors-neutral-700);
-    border-color: var(--nile-colors-neutral-700);
-    color: var(--nile-colors-white-base);
-    box-shadow: none;
+    background-color: var(--nile-colors-button-primary-disabled);
+    border-color: var(--nile-colors-button-primary-disabled);
+    color: var(--nile-colors-button-primary-disabled-text);
+    cursor: not-allowed;
   }
 
   /* Tertiary */
   .button--standard.button--tertiary {
-    background-color: var(--nile-colors-white-base);
-    border-color: var(--nile-colors-neutral-500);
-    color: var(--nile-colors-dark-900);
-    box-shadow: 0px 2px 4px var(--nile-colors-dark-200);
+    background-color: var(--nile-colors-button-tertiary);
+    border-color: var(--nile-colors-button-tertiary-border);
+    color: var(--nile-colors-button-tertiary-text);
   }
 
   .button--standard.button--tertiary:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-neutral-100);
+    background-color: var(--nile-colors-button-tertiary-hover);
     border-color: var(--nile-colors-neutral-500);
-    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);
-    color: var(--nile-colors-neutral-700);
+    color: var(--nile-colors-button-tertiary-text);
   }
 
   .button--standard.button--tertiary:active:not(.button--disabled) {
-    background-color: var(--nile-colors-neutral-400);
-    border-color: var(--nile-colors-neutral-700);
-    color: var(--nile-colors-neutral-700);
-  }
-  .button--standard.button--tertiary.button--disabled {
-    border-color: #e5e9eb;
-    background-color: var(--nile-colors-white-base);
-    color: var(--nile-colors-neutral-700);
-    cursor: not-allowed;
-    box-shadow: none;
+    background-color: var(--nile-colors-button-tertiary-pressed);
+    border-color: var(--nile-colors-button-tertiary-pressed-border);
+    color: var(--nile-colors-button-tertiary-text);
   }
 
+  .button--standard.button--tertiary.button--disabled,
   .button--standard.button--tertiary.button--disabled:hover,
   .button--standard.button--tertiary.button--disabled:active {
-    border-color: #e5e9eb;
-    background-color: var(--nile-colors-white-base);
-    color: var(--nile-colors-neutral-700);
+    border-color: var(--nile-colors-neutral-500);
+    background-color: var(--nile-colors-button-tertiary-disabled);
+    color: var(--nile-colors-button-tertiary-disabled-text);
+    cursor: not-allowed;
     box-shadow: none;
   }
 
   /* caution */
   .button--standard.button--caution {
-    background-color: var(--nile-colors-red-500);
-    border-color: var(--nile-colors-red-500);
-    color: var(--nile-colors-white-base);
+    background-color: var(--nile-colors-button-caution);
+    border-color: var(--nile-colors-button-caution);
+    color: var(--nile-colors-button-caution-text);
   }
+
   .button--standard.button--caution:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-red-700);
-    border-color: var(--nile-colors-red-700);
-    color: var(--nile-colors-white-base);
+    background-color: var(--nile-colors-button-caution-hover);
+    border-color: var(--nile-colors-button-caution-hover);
+    color: var(--nile-colors-button-caution-text);
   }
 
   .button--standard.button--caution:active:not(.button--disabled) {
-    background-color: var(--nile-colors-red-700);
-    border-color: var(--nile-colors-red-500);
-    color: var(--nile-colors-white-base);
-  }
+    background-color: var(--nile-colors-button-caution-pressed);
+    border-color: var(--nile-colors-button-caution-pressed);
+    color: var(--nile-colors-button-caution-text);
+  }
+
+  .button--standard.button--caution.button--disabled,
+  .button--standard.button--caution.button--disabled:hover,
+  .button--standard.button--caution.button--disabled:active {
+    background-color: var(--nile-colors-button-caution-disabled);
+    border-color: var(--nile-colors-button-caution-disabled);
+    color: var(--nile-colors-button-caution-disabled-text);
+  }
+
+
+        /* Primary Variant - Nile Icon Fill */
+        .button--standard.button--primary ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
+      }
+      .button--standard.button--primary:hover:not(.button--disabled) ::slotted(nile-icon),
+      .button--standard.button--primary:active:not(.button--disabled) ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
+      }
+      .button--standard.button--primary.button--disabled ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;
+      }
+
+      /* Secondary Variant */
+      .button--standard.button--secondary ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
+      }
+      .button--standard.button--secondary:hover:not(.button--disabled) ::slotted(nile-icon),
+      .button--standard.button--secondary:active:not(.button--disabled) ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
+      }
+      .button--standard.button--secondary.button--disabled ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-secondary-disabled-text) !important;
+      }
+
+      /* Tertiary Variant */
+      .button--standard.button--tertiary ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
+      }
+      .button--standard.button--tertiary:hover:not(.button--disabled) ::slotted(nile-icon),
+      .button--standard.button--tertiary:active:not(.button--disabled) ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
+      }
+      .button--standard.button--tertiary.button--disabled ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-tertiary-disabled-text) !important;
+      }
+
+      /* Caution Variant */
+      .button--standard.button--caution ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
+      }
+      .button--standard.button--caution:hover:not(.button--disabled) ::slotted(nile-icon),
+      .button--standard.button--caution:active:not(.button--disabled) ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
+      }
+      .button--standard.button--caution.button--disabled ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;
+      }
 
     /*
    * Outline buttons

package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-button/nile-button.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-button.css.js","sourceRoot":"","sources":["../../../src/nile-button/nile-button.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkYxB,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 * Button CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n    width: auto;\n    cursor: pointer;\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-style: solid;\n    border-width: 1px;\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-3);\n    text-align: center;\n    letter-spacing: 0.2px;\n    text-decoration: none;\n    user-select: none;\n    white-space: nowrap;\n    vertical-align: middle;\n    transition: var(--nile-transition-duration-default) background-color,\n      var(--nile-transition-duration-default) color,\n      var(--nile-transition-duration-default) border,\n      var(--nile-transition-duration-default) box-shadow;\n    cursor: inherit;\n    padding: var(--nile-spacing-2-x);\n    gap: var(--nile-spacing-2-x);\n    border-radius: var(--nile-radius-base-standard);\n    line-height: var(--nile-type-scale-3);\n    box-sizing: border-box;\n    height: 38px;\n  }\n\n  .button::-moz-focus-inner {\n    border: 0;\n  }\n\n  .button:focus {\n    outline: none;\n  }\n\n  .button:focus-visible {\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n\n  .button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .button--disabled * {\n    pointer-events: none;\n  }\n\n  .button__label::slotted(nile-icon) {\n    /* vertical-align: -2px; */\n  }\n\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-900);\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500);\n    border : none;\n    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\n    color: var(--nile-colors-neutral-900);\n  }\n\n  .button--standard.button--secondary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-900);\n  }\n\n  .button--standard.button--secondary.button--disabled {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-500);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary.button--disabled:hover,\n  .button--standard.button--secondary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-500);\n    box-shadow: none;\n  }\n\n  /* Primary */\n  .button--standard.button--primary {\n    background-color: var(--nile-colors-primary-600);\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--primary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700);\n    border-color: var(--nile-colors-primary-700);\n    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--primary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700);\n    border-color: var(--nile-colors-primary-900);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--primary.button--disabled {\n    background-color: var(--nile-colors-neutral-700);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--primary.button--disabled:hover,\n  .button--standard.button--primary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-700);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n    box-shadow: none;\n  }\n\n  /* Tertiary */\n  .button--standard.button--tertiary {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-dark-900);\n    box-shadow: 0px 2px 4px var(--nile-colors-dark-200);\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-100);\n    border-color: var(--nile-colors-neutral-500);\n    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--standard.button--tertiary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-700);\n  }\n  .button--standard.button--tertiary.button--disabled {\n    border-color: #e5e9eb;\n    background-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-neutral-700);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--tertiary.button--disabled:hover,\n  .button--standard.button--tertiary.button--disabled:active {\n    border-color: #e5e9eb;\n    background-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-neutral-700);\n    box-shadow: none;\n  }\n\n  /* caution */\n  .button--standard.button--caution {\n    background-color: var(--nile-colors-red-500);\n    border-color: var(--nile-colors-red-500);\n    color: var(--nile-colors-white-base);\n  }\n  .button--standard.button--caution:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-500);\n    color: var(--nile-colors-white-base);\n  }\n\n    /*\n   * Outline buttons\n   */\n\n  .button--outline {\n    background: none;\n    border: solid 2px;\n  }\n\n  /* Default */\n  .button--outline.button--secondary {\n    border-color: var(--nile-colors-neutral-300);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--outline.button--secondary:hover:not(.button--disabled),\n  .button--outline.button--secondary.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--secondary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Primary */\n  .button--outline.button--primary {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-primary-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Success */\n  .button--outline.button--success {\n    border-color: var(--nile-colors-green-600);\n    color: var(--nile-colors-green-600);\n  }\n\n  .button--outline.button--success:hover:not(.button--disabled),\n  .button--outline.button--success.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--success:active:not(.button--disabled) {\n    border-color: var(--nile-colors-green-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Neutral */\n  .button--outline.button--neutral {\n    border-color: var(--nile-colors-neutral-600);\n    color: var(--nile-colors-neutral-600);\n  }\n\n  .button--outline.button--neutral:hover:not(.button--disabled),\n  .button--outline.button--neutral.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--neutral:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Warning */\n  .button--outline.button--warning {\n    border-color: var(--nile-colors-orange-600);\n    color: var(--nile-colors-orange-600);\n  }\n\n  .button--outline.button--warning:hover:not(.button--disabled),\n  .button--outline.button--warning.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--warning:active:not(.button--disabled) {\n    border-color: var(--nile-colors-orange-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Danger */\n  .button--outline.button--danger {\n    border-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-red-600);\n  }\n\n  .button--outline.button--danger:hover:not(.button--disabled),\n  .button--outline.button--danger.button--checked:not(.button--disabled) {\n    background-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-white-base);\n  }\n\n .button--outline.button--danger:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  @media (forced-colors: active) {\n    .button.button--outline.button--checked:not(.button--disabled) {\n      outline: solid 2px transparent;\n    }\n  }\n\n  /*\n * Pill modifier\n */\n\n  .button--pill.button--small {\n    border-radius: 24px;\n  }\n\n  .button--pill.button--medium {\n    border-radius: 32px;\n  }\n\n  /*\n * Circle modifier\n */\n\n  .button--circle {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  .button--circle.button--small {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n  }\n\n  .button--circle.button--medium {\n    width: 38px;\n    height: 38px;\n    border-radius: 50%;\n  }\n\n  .button--circle .button__prefix,\n  .button--circle .button__suffix,\n  .button--circle .button__caret {\n    display: none;\n  }\n\n  /* Caret modifier */\n\n  .button--caret .button__suffix {\n    display: none;\n  }\n\n  .button--caret .button__caret {\n    height: auto;\n  }\n\n  /*\n * Loading modifier\n */\n\n  .button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  .button--loading .button__prefix,\n  .button--loading .button__label,\n  .button--loading .button__suffix,\n  .button--loading .button__caret {\n    visibility: hidden;\n  }\n\n  .button--loading nile-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    font-size: 1em;\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n  /*\n * Badges\n */\n\n  .button ::slotted(nile-badge) {\n    position: absolute;\n    top: 0;\n    right: 0;\n    translate: 50% -50%;\n    pointer-events: none;\n  }\n\n`;\n"]}
+{"version":3,"file":"nile-button.css.js","sourceRoot":"","sources":["../../../src/nile-button/nile-button.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmbxB,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 * Button CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n    width: auto;\n    cursor: pointer;\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-style: solid;\n    border-width: 1px;\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-3);\n    text-align: center;\n    letter-spacing: 0.2px;\n    text-decoration: none;\n    user-select: none;\n    white-space: nowrap;\n    vertical-align: middle;\n    transition: var(--nile-transition-duration-default) background-color,\n      var(--nile-transition-duration-default) color,\n      var(--nile-transition-duration-default) border,\n      var(--nile-transition-duration-default) box-shadow;\n    cursor: inherit;\n    padding: var(--nile-spacing-2-x);\n    gap: var(--nile-spacing-2-x);\n    border-radius: var(--nile-radius-base-standard);\n    line-height: var(--nile-type-scale-3);\n    box-sizing: border-box;\n    height: 38px;\n  }\n\n  .button::-moz-focus-inner {\n    border: 0;\n  }\n\n  .button:focus {\n    outline: none;\n  }\n\n  .button:focus-visible {\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n\n  .button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .button--disabled * {\n    pointer-events: none;\n  }\n\n  .button__label::slotted(nile-icon) {\n    /* vertical-align: -2px; */\n  }\n\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-button-secondary);\n    border-color: var(--nile-colors-button-secondary-border);\n    color: var(--nile-colors-button-secondary-text);\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-secondary-hover);\n    border-color: var(--nile-colors-button-secondary-border);\n    color: var(--nile-colors-button-secondary-text);\n  }\n\n  .button--standard.button--secondary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-secondary-pressed);\n    border-color: var(--nile-colors-button-secondary-pressed-border);\n    color: var(--nile-colors-button-secondary-text);\n  }\n\n  .button--standard.button--secondary.button--disabled {\n    background-color: var(--nile-colors-button-secondary-disabled);\n    border-color: var(--nile-colors-button-secondary-disabled-border);\n    color: var(--nile-colors-button-secondary-disabled-text);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary.button--disabled:hover,\n  .button--standard.button--secondary.button--disabled:active {\n    background-color: var(--nile-colors-button-secondary-disabled);\n    border-color: var(--nile-colors-button-secondary-disabled-border);\n    color: var(--nile-colors-button-secondary-disabled-text);\n    cursor: not-allowed;\n  }\n\n  /* Primary */\n  .button--standard.button--primary {\n    background-color: var(--nile-colors-button-primary);\n    border-color: var(--nile-colors-button-primary-border);\n    color: var(--nile-colors-button-primary-text);\n  }\n\n  .button--standard.button--primary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-primary-hover);\n    border-color: var(--nile-colors-button-primary-hover);\n    color: var(--nile-colors-button-primary-text);\n  }\n\n  .button--standard.button--primary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-primary-pressed);\n    border-color: var(--nile-colors-button-primary-pressed);\n    color: var(--nile-colors-button-primary-text);\n  }\n\n  .button--standard.button--primary.button--disabled {\n    background-color: var(--nile-colors-button-primary-disabled);\n    border-color: var(--nile-colors-button-primary-disabled);\n    color: var(--nile-colors-button-primary-disabled-text);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--primary.button--disabled:hover,\n  .button--standard.button--primary.button--disabled:active {\n    background-color: var(--nile-colors-button-primary-disabled);\n    border-color: var(--nile-colors-button-primary-disabled);\n    color: var(--nile-colors-button-primary-disabled-text);\n    cursor: not-allowed;\n  }\n\n  /* Tertiary */\n  .button--standard.button--tertiary {\n    background-color: var(--nile-colors-button-tertiary);\n    border-color: var(--nile-colors-button-tertiary-border);\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-hover);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--tertiary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-pressed);\n    border-color: var(--nile-colors-button-tertiary-pressed-border);\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--tertiary.button--disabled,\n  .button--standard.button--tertiary.button--disabled:hover,\n  .button--standard.button--tertiary.button--disabled:active {\n    border-color: var(--nile-colors-neutral-500);\n    background-color: var(--nile-colors-button-tertiary-disabled);\n    color: var(--nile-colors-button-tertiary-disabled-text);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  /* caution */\n  .button--standard.button--caution {\n    background-color: var(--nile-colors-button-caution);\n    border-color: var(--nile-colors-button-caution);\n    color: var(--nile-colors-button-caution-text);\n  }\n\n  .button--standard.button--caution:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-caution-hover);\n    border-color: var(--nile-colors-button-caution-hover);\n    color: var(--nile-colors-button-caution-text);\n  }\n\n  .button--standard.button--caution:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-caution-pressed);\n    border-color: var(--nile-colors-button-caution-pressed);\n    color: var(--nile-colors-button-caution-text);\n  }\n\n  .button--standard.button--caution.button--disabled,\n  .button--standard.button--caution.button--disabled:hover,\n  .button--standard.button--caution.button--disabled:active {\n    background-color: var(--nile-colors-button-caution-disabled);\n    border-color: var(--nile-colors-button-caution-disabled);\n    color: var(--nile-colors-button-caution-disabled-text);\n  }\n\n\n        /* Primary Variant - Nile Icon Fill */\n        .button--standard.button--primary ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n      }\n      .button--standard.button--primary:hover:not(.button--disabled) ::slotted(nile-icon),\n      .button--standard.button--primary:active:not(.button--disabled) ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n      }\n      .button--standard.button--primary.button--disabled ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;\n      }\n\n      /* Secondary Variant */\n      .button--standard.button--secondary ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n      }\n      .button--standard.button--secondary:hover:not(.button--disabled) ::slotted(nile-icon),\n      .button--standard.button--secondary:active:not(.button--disabled) ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n      }\n      .button--standard.button--secondary.button--disabled ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-secondary-disabled-text) !important;\n      }\n\n      /* Tertiary Variant */\n      .button--standard.button--tertiary ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n      }\n      .button--standard.button--tertiary:hover:not(.button--disabled) ::slotted(nile-icon),\n      .button--standard.button--tertiary:active:not(.button--disabled) ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n      }\n      .button--standard.button--tertiary.button--disabled ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-tertiary-disabled-text) !important;\n      }\n\n      /* Caution Variant */\n      .button--standard.button--caution ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n      }\n      .button--standard.button--caution:hover:not(.button--disabled) ::slotted(nile-icon),\n      .button--standard.button--caution:active:not(.button--disabled) ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n      }\n      .button--standard.button--caution.button--disabled ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;\n      }\n\n    /*\n   * Outline buttons\n   */\n\n  .button--outline {\n    background: none;\n    border: solid 2px;\n  }\n\n  /* Default */\n  .button--outline.button--secondary {\n    border-color: var(--nile-colors-neutral-300);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--outline.button--secondary:hover:not(.button--disabled),\n  .button--outline.button--secondary.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--secondary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Primary */\n  .button--outline.button--primary {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-primary-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Success */\n  .button--outline.button--success {\n    border-color: var(--nile-colors-green-600);\n    color: var(--nile-colors-green-600);\n  }\n\n  .button--outline.button--success:hover:not(.button--disabled),\n  .button--outline.button--success.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--success:active:not(.button--disabled) {\n    border-color: var(--nile-colors-green-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Neutral */\n  .button--outline.button--neutral {\n    border-color: var(--nile-colors-neutral-600);\n    color: var(--nile-colors-neutral-600);\n  }\n\n  .button--outline.button--neutral:hover:not(.button--disabled),\n  .button--outline.button--neutral.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--neutral:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Warning */\n  .button--outline.button--warning {\n    border-color: var(--nile-colors-orange-600);\n    color: var(--nile-colors-orange-600);\n  }\n\n  .button--outline.button--warning:hover:not(.button--disabled),\n  .button--outline.button--warning.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--warning:active:not(.button--disabled) {\n    border-color: var(--nile-colors-orange-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Danger */\n  .button--outline.button--danger {\n    border-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-red-600);\n  }\n\n  .button--outline.button--danger:hover:not(.button--disabled),\n  .button--outline.button--danger.button--checked:not(.button--disabled) {\n    background-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-white-base);\n  }\n\n .button--outline.button--danger:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  @media (forced-colors: active) {\n    .button.button--outline.button--checked:not(.button--disabled) {\n      outline: solid 2px transparent;\n    }\n  }\n\n  /*\n * Pill modifier\n */\n\n  .button--pill.button--small {\n    border-radius: 24px;\n  }\n\n  .button--pill.button--medium {\n    border-radius: 32px;\n  }\n\n  /*\n * Circle modifier\n */\n\n  .button--circle {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  .button--circle.button--small {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n  }\n\n  .button--circle.button--medium {\n    width: 38px;\n    height: 38px;\n    border-radius: 50%;\n  }\n\n  .button--circle .button__prefix,\n  .button--circle .button__suffix,\n  .button--circle .button__caret {\n    display: none;\n  }\n\n  /* Caret modifier */\n\n  .button--caret .button__suffix {\n    display: none;\n  }\n\n  .button--caret .button__caret {\n    height: auto;\n  }\n\n  /*\n * Loading modifier\n */\n\n  .button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  .button--loading .button__prefix,\n  .button--loading .button__label,\n  .button--loading .button__suffix,\n  .button--loading .button__caret {\n    visibility: hidden;\n  }\n\n  .button--loading nile-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    font-size: 1em;\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n  /*\n * Badges\n */\n\n  .button ::slotted(nile-badge) {\n    position: absolute;\n    top: 0;\n    right: 0;\n    translate: 50% -50%;\n    pointer-events: none;\n  }\n\n`;\n"]}

package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-calendar/nile-calendar.css.js

@@ -81,8 +81,17 @@ export const styles = css `
     cursor: pointer;
   }
 
+  .current-date {
+    border: 1px solid #1978b8;
+  }
+
+  .day:hover {
+    background-color: #e5e9eb;
+  }
+
   .filler {
-    color: grey;
+    color: #7f7f7f;
+    pointer-events: none;
   }
 
   .selected-date {
@@ -91,12 +100,15 @@ export const styles = css `
     background: #a5d3f3;
   }
 
+  .selected-date:hover {
+    background: #a5d3f3;
+  }
+
   .calendar-wrapper {
     background: white;
     display: flex;
     justify-content: space-between;
     width: 365px;
-    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
   }
 
   .selected-date,
@@ -148,6 +160,10 @@ export const styles = css `
     width: 365px;
   }
 
+  .base__relative {
+    width: 446px;
+  }
+
   .base__range {
     padding: 24px;
   }
@@ -158,6 +174,10 @@ export const styles = css `
     width: 365px;
   }
 
+  .calender-input--relative {
+    width: 446px;
+  }
+
   .from {
     display: flex;
     justify-content: space-between;
@@ -181,7 +201,101 @@ export const styles = css `
   .button-contaner {
     width: 100%;
     text-align: right;
-    padding: 12px 0 0 0;
+    padding: 24px 0 0 0;
+  }
+
+  .calendar-config {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+  }
+
+  .calendar-switcher {
+    display: flex;
+    align-items: flex-start;
+    gap: 24px;
+    justify-content: space-between;
+    border-bottom: 1px solid #e5e9eb;
+  }
+
+  .calendar-switch {
+    padding-bottom: 12px;
+    cursor: pointer;
+  }
+
+  .calendar-switch__active {
+    padding-bottom: 12px;
+    border-bottom: 4px solid #005ea6;
+  }
+
+  .unit-container {
+    display: flex;
+    flex-direction: column;
+    width: 446px;
+    margin-top: 24px;
+  }
+
+  .time-unit-group {
+    display: flex;
+    align-items: center;
+    margin-bottom: 24px;
+    gap: 24px;
+  }
+
+  .time-unit-name {
+    width: 54px;
+  }
+
+  .time-unit-name span {
+    margin-right: 24px;
+    color: var(--color-text-default, #000);
+    font-family: Colfax-regular;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 14px;
+    letter-spacing: 0.2px;
+  }
+
+  .time-unit-value {
+    display: flex;
+  }
+
+  .time-value {
+    display: inline-flex;
+    width: 48px;
+    height: 32px;
+    box-sizing: border-box;
+    padding: 5px;
+    border: 1px solid #ddd;
+    cursor: pointer;
+    justify-content: center;
+    align-items: center;
+    margin-right: 16px;
+    border-radius: 4px;
+    border: 1px solid #c7ced4;
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  .time-value--selected {
+    background: #a5d3f3;
+  }
+
+  .time-value:last-child {
+    margin-right: 0;
+  }
+
+  .time-value:hover {
+    background: #e5e9eb;
+  }
+
+  .time-value--selected:hover {
+    background-color: #a5d3f3;
+  }
+
+  .hidden {
+    display: none !important;
   }
 `;
 export default [styles];

package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-calendar/nile-calendar.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-calendar.css.js","sourceRoot":"","sources":["../../../src/nile-calendar/nile-calendar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+KxB,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 * DatePicker CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .calendar-container {\n    font-family: Colfax-regular;\n    width: 365px;\n    height: auto;\n    text-align: center;\n    background: white;\n  }\n\n  .calendar-container.with-margin {\n    margin-right: 20px;\n  }\n\n  .calendar-header {\n    display: flex;\n    justify-content: space-between;\n    padding: 10px;\n    padding: 22px 20px;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  .calendar-header__month-navigation {\n    cursor: pointer;\n  }\n\n  .divider {\n    width: 100%;\n    height: 1px;\n    background: #c7ced4;\n  }\n\n  .day-names {\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n    height: 50px;\n  }\n\n  .day-names,\n  .days {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: flex-start;\n    height: auto;\n    align-items: center;\n  }\n\n  .days {\n    height: auto;\n  }\n\n  .day {\n    flex-basis: calc(100% / 7);\n    box-sizing: border-box;\n    width: 48px;\n    align-items: center;\n    padding: 10px;\n    height: 32px;\n    margin-top: 6px;\n    margin-bottom: 6px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  .filler {\n    color: grey;\n  }\n\n  .selected-date {\n    color: white;\n    border-radius: 4px;\n    background: #a5d3f3;\n  }\n\n  .calendar-wrapper {\n    background: white;\n    display: flex;\n    justify-content: space-between;\n    width: 365px;\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .selected-date,\n  .range-start,\n  .range-end {\n    border-radius: 4px;\n    background: #a5d3f3;\n    color: white;\n  }\n\n  .range-start {\n    background: #a5d3f3;\n    border-radius: 4px 0 0 4px;\n    color: white;\n  }\n\n  .range-end {\n    background: #a5d3f3;\n    border-radius: 0 4px 4px 0;\n    color: white;\n  }\n\n  .range-middle {\n    background: #a5d3f3;\n    color: white;\n    border-radius: 0;\n  }\n\n  .day.selected {\n    background: #a5d3f3;\n    color: white;\n    border-radius: 4px;\n  }\n\n  .day.in-range {\n    background: #a5d3f3;\n    color: white;\n  }\n\n  .selected-date {\n    color: white;\n    border-radius: 4px;\n    background: #a5d3f3;\n  }\n\n  .base {\n    background-color: white;\n    border-radius: 4px;\n    width: 365px;\n  }\n\n  .base__range {\n    padding: 24px;\n  }\n\n  .calender-input {\n    margin-top: 6px;\n    padding-bottom: 0px;\n    width: 365px;\n  }\n\n  .from {\n    display: flex;\n    justify-content: space-between;\n    gap: 8px;\n    margin-top: 12px;\n  }\n\n  .manual-input {\n    width: 100%;\n  }\n\n  .manual-input-label {\n    color: #7f7f7f;\n    font-family: Colfax-regular;\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 12px;\n    letter-spacing: 0.2px;\n  }\n\n  .button-contaner {\n    width: 100%;\n    text-align: right;\n    padding: 12px 0 0 0;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-calendar.css.js","sourceRoot":"","sources":["../../../src/nile-calendar/nile-calendar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiSxB,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 * DatePicker CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .calendar-container {\n    font-family: Colfax-regular;\n    width: 365px;\n    height: auto;\n    text-align: center;\n    background: white;\n  }\n\n  .calendar-container.with-margin {\n    margin-right: 20px;\n  }\n\n  .calendar-header {\n    display: flex;\n    justify-content: space-between;\n    padding: 10px;\n    padding: 22px 20px;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  .calendar-header__month-navigation {\n    cursor: pointer;\n  }\n\n  .divider {\n    width: 100%;\n    height: 1px;\n    background: #c7ced4;\n  }\n\n  .day-names {\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n    height: 50px;\n  }\n\n  .day-names,\n  .days {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: flex-start;\n    height: auto;\n    align-items: center;\n  }\n\n  .days {\n    height: auto;\n  }\n\n  .day {\n    flex-basis: calc(100% / 7);\n    box-sizing: border-box;\n    width: 48px;\n    align-items: center;\n    padding: 10px;\n    height: 32px;\n    margin-top: 6px;\n    margin-bottom: 6px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  .current-date {\n    border: 1px solid #1978b8;\n  }\n\n  .day:hover {\n    background-color: #e5e9eb;\n  }\n\n  .filler {\n    color: #7f7f7f;\n    pointer-events: none;\n  }\n\n  .selected-date {\n    color: white;\n    border-radius: 4px;\n    background: #a5d3f3;\n  }\n\n  .selected-date:hover {\n    background: #a5d3f3;\n  }\n\n  .calendar-wrapper {\n    background: white;\n    display: flex;\n    justify-content: space-between;\n    width: 365px;\n  }\n\n  .selected-date,\n  .range-start,\n  .range-end {\n    border-radius: 4px;\n    background: #a5d3f3;\n    color: white;\n  }\n\n  .range-start {\n    background: #a5d3f3;\n    border-radius: 4px 0 0 4px;\n    color: white;\n  }\n\n  .range-end {\n    background: #a5d3f3;\n    border-radius: 0 4px 4px 0;\n    color: white;\n  }\n\n  .range-middle {\n    background: #a5d3f3;\n    color: white;\n    border-radius: 0;\n  }\n\n  .day.selected {\n    background: #a5d3f3;\n    color: white;\n    border-radius: 4px;\n  }\n\n  .day.in-range {\n    background: #a5d3f3;\n    color: white;\n  }\n\n  .selected-date {\n    color: white;\n    border-radius: 4px;\n    background: #a5d3f3;\n  }\n\n  .base {\n    background-color: white;\n    border-radius: 4px;\n    width: 365px;\n  }\n\n  .base__relative {\n    width: 446px;\n  }\n\n  .base__range {\n    padding: 24px;\n  }\n\n  .calender-input {\n    margin-top: 6px;\n    padding-bottom: 0px;\n    width: 365px;\n  }\n\n  .calender-input--relative {\n    width: 446px;\n  }\n\n  .from {\n    display: flex;\n    justify-content: space-between;\n    gap: 8px;\n    margin-top: 12px;\n  }\n\n  .manual-input {\n    width: 100%;\n  }\n\n  .manual-input-label {\n    color: #7f7f7f;\n    font-family: Colfax-regular;\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 12px;\n    letter-spacing: 0.2px;\n  }\n\n  .button-contaner {\n    width: 100%;\n    text-align: right;\n    padding: 24px 0 0 0;\n  }\n\n  .calendar-config {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 12px;\n  }\n\n  .calendar-switcher {\n    display: flex;\n    align-items: flex-start;\n    gap: 24px;\n    justify-content: space-between;\n    border-bottom: 1px solid #e5e9eb;\n  }\n\n  .calendar-switch {\n    padding-bottom: 12px;\n    cursor: pointer;\n  }\n\n  .calendar-switch__active {\n    padding-bottom: 12px;\n    border-bottom: 4px solid #005ea6;\n  }\n\n  .unit-container {\n    display: flex;\n    flex-direction: column;\n    width: 446px;\n    margin-top: 24px;\n  }\n\n  .time-unit-group {\n    display: flex;\n    align-items: center;\n    margin-bottom: 24px;\n    gap: 24px;\n  }\n\n  .time-unit-name {\n    width: 54px;\n  }\n\n  .time-unit-name span {\n    margin-right: 24px;\n    color: var(--color-text-default, #000);\n    font-family: Colfax-regular;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  .time-unit-value {\n    display: flex;\n  }\n\n  .time-value {\n    display: inline-flex;\n    width: 48px;\n    height: 32px;\n    box-sizing: border-box;\n    padding: 5px;\n    border: 1px solid #ddd;\n    cursor: pointer;\n    justify-content: center;\n    align-items: center;\n    margin-right: 16px;\n    border-radius: 4px;\n    border: 1px solid #c7ced4;\n    background: rgba(255, 255, 255, 0.2);\n  }\n\n  .time-value--selected {\n    background: #a5d3f3;\n  }\n\n  .time-value:last-child {\n    margin-right: 0;\n  }\n\n  .time-value:hover {\n    background: #e5e9eb;\n  }\n\n  .time-value--selected:hover {\n    background-color: #a5d3f3;\n  }\n\n  .hidden {\n    display: none !important;\n  }\n`;\n\nexport default [styles];\n"]}

package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-calendar/nile-calendar.d.ts

@@ -33,6 +33,10 @@ export declare class NileCalendar extends NileElement {
     endDate: Date | null;
     isSelectingStart: boolean;
     range: boolean;
+    type: string;
+    selectedUnit: string;
+    selectedValue: number;
+    selectedTimeZone: string;
     valueChanged(): void;
     updated(changedProperties: PropertyValues): void;
     static get observedAttributes(): string[];
@@ -45,6 +49,8 @@ export declare class NileCalendar extends NileElement {
     private prevMonth;
     private selectDate;
     private confimRange;
+    convertTZ(date: Date, tzString: any): Date;
+    isCurrentDate(day: number, month: number, year: number): boolean;
     private renderMonth;
     private formatDate;
     private formatDateRange;
@@ -57,9 +63,18 @@ export declare class NileCalendar extends NileElement {
     private parseTime;
     private handleStartTimeInput;
     private handleEndTimeInput;
+    setType(newType: string): void;
+    createRelativePeriod(unit: String, value: number): {
+        startDate: Date;
+        endDate: Date;
+    };
+    handleTimeValueClick(unit: string, value: number, event: any): void;
+    renderTimeValues(unit: string, values: any[]): TemplateResult<1>[];
+    handleDurationChange(event: any): void;
+    handleUnitChange(event: any): void;
+    handleTimeZoneChange(event: any): void;
     /**
      * Render method
-     * @slot This is a slot test
      */
     render(): TemplateResult;
 }