@aquera/nile-elements 0.1.46-beta-1.4 → 0.1.46-beta-1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/demo/variables.css +2 -0
  2. package/dist/index.js +4 -4
  3. package/dist/nile-button-toggle/nile-button-toggle.css.cjs.js +1 -1
  4. package/dist/nile-button-toggle/nile-button-toggle.css.cjs.js.map +1 -1
  5. package/dist/nile-button-toggle/nile-button-toggle.css.esm.js +2 -2
  6. package/dist/nile-calendar/nile-calendar.css.cjs.js +1 -1
  7. package/dist/nile-calendar/nile-calendar.css.cjs.js.map +1 -1
  8. package/dist/nile-calendar/nile-calendar.css.esm.js +2 -2
  9. package/dist/src/nile-button-toggle/nile-button-toggle.css.js +2 -2
  10. package/dist/src/nile-button-toggle/nile-button-toggle.css.js.map +1 -1
  11. package/dist/src/nile-calendar/nile-calendar.css.js +2 -2
  12. package/dist/src/nile-calendar/nile-calendar.css.js.map +1 -1
  13. package/dist/tsconfig.tsbuildinfo +1 -1
  14. package/package.json +1 -1
  15. package/src/nile-button-toggle/nile-button-toggle.css.ts +2 -2
  16. package/src/nile-calendar/nile-calendar.css.ts +2 -2
package/demo/variables.css CHANGED
@@ -552,6 +552,7 @@
552
552
  --nile-spacing-9px: 9px;
553
553
  --nile-spacing-10px: 10px;
554
554
  --nile-spacing-14px: 14px;
555
+ --nile-spacing-22px: 22px;
555
556
 
556
557
 
557
558
  /* Width */
@@ -711,6 +712,7 @@
711
712
  --nile-line-height-normal: normal;
712
713
  --nile-line-height-inherit: inherit;
713
714
  --nile-line-height-1-8: 1.8;
715
+ --nile-line-height-20px: 20px;
714
716
 
715
717
 
716
718
  /* Display */
package/dist/index.js CHANGED
@@ -5591,7 +5591,7 @@ class tn{constructor(e){this._element=null;const M=e??window;this._node=M,e&&(th
5591
5591
  .calendar-header {
5592
5592
  display: flex;
5593
5593
  justify-content: space-between;
5594
- padding: var(--nile-spacing-2xl, var(--ng-spacing-2xl)) var(--nile-spacing-2xl, var(--ng-spacing-2xl));
5594
+ padding: var(--nile-spacing-22px, var(--ng-spacing-2xl)) var(--nile-spacing-2xl, var(--ng-spacing-2xl));
5595
5595
  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
5596
5596
  font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));
5597
5597
  line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
@@ -5615,7 +5615,7 @@ class tn{constructor(e){this._element=null;const M=e??window;this._node=M,e&&(th
5615
5615
  font-family: var( --nile-font-family-serif, var(--ng-font-family-body));
5616
5616
  font-style: normal;
5617
5617
  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
5618
- line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));
5618
+ line-height: var(--nile-line-height-20px, var(--ng-line-height-text-sm));
5619
5619
  text-align: center;
5620
5620
 
5621
5621
  /* width: 40px;
@@ -6143,8 +6143,8 @@ class tn{constructor(e){this._element=null;const M=e??window;this._node=M,e&&(th
6143
6143
  .nile-button-toggle {
6144
6144
  display: flex;
6145
6145
  padding: var(--nile-spacing-sm, var(--ng-spacing-sm))
6146
- var(--nile-type-scale-4, var(--ng-spacing-sm))
6147
- var(--nile-type-scale-sm, var(--ng-spacing-xl))
6146
+ var(--nile-spacing-xl, var(--ng-spacing-sm))
6147
+ var(--nile-spacing-sm, var(--ng-spacing-xl))
6148
6148
  var(--nile-spacing-14px, var(--ng-spacing-xl));
6149
6149
  border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
6150
6150
  cursor: pointer;
package/dist/nile-button-toggle/nile-button-toggle.css.cjs.js CHANGED
@@ -1,2 +1,2 @@
1
- System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,n;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",n=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .nile-button-toggle {\n display: flex;\n padding: var(--nile-spacing-sm, var(--ng-spacing-sm))\n var(--nile-type-scale-4, var(--ng-spacing-sm))\n var(--nile-type-scale-sm, var(--ng-spacing-xl))\n var(--nile-spacing-14px, var(--ng-spacing-xl));\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n cursor: pointer;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n text-align: center;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n justify-content: center;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n height: 40px;\n box-sizing: border-box;\n }\n\n .nile-button-toggle:hover {\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n }\n\n .nile-button-toggle:active {\n background: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary-hover));\n }\n\n .nile-button-toggle__initial {\n border-radius: \n var(--nile-radius-radius-xs, var(--ng-radius-md)) \n var(--nile-radius-radius-none, var(--ng-radius-none)) \n var(--nile-radius-radius-none, var(--ng-radius-none)) \n var(--nile-radius-radius-xs, var(--ng-radius-md));\n }\n\n .nile-button-toggle__end {\n border-radius: \n var(--nile-radius-radius-none, var(--ng-radius-none))\n var(--nile-radius-radius-xs, var(--ng-radius-md))\n var(--nile-radius-radius-xs, var(--ng-radius-md))\n var(--nile-radius-radius-none, var(--ng-radius-none));\n border-left: var(--nile-radius-radius-none, var(--ng-radius-none));\n }\n\n .nile-button-toggle__middle {\n border-width: 1px 1px 1px 0;\n border-style: solid;\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-radius-none, var(--ng-radius-none));\n }\n\n .nile-button-toggle__active {\n background-color: var( --nile-colors-neutral-500, var(--ng-colors-bg-primary-hover) );\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n }\n\n .nile-button-toggle__active:hover {\n background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n }\n\n .nile-button-toggle__disabled {\n cursor: not-allowed;\n }\n"]))));}};});
1
+ System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,n;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",n=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .nile-button-toggle {\n display: flex;\n padding: var(--nile-spacing-sm, var(--ng-spacing-sm))\n var(--nile-spacing-xl, var(--ng-spacing-sm))\n var(--nile-spacing-sm, var(--ng-spacing-xl))\n var(--nile-spacing-14px, var(--ng-spacing-xl));\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n cursor: pointer;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n text-align: center;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n justify-content: center;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n height: 40px;\n box-sizing: border-box;\n }\n\n .nile-button-toggle:hover {\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n }\n\n .nile-button-toggle:active {\n background: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary-hover));\n }\n\n .nile-button-toggle__initial {\n border-radius: \n var(--nile-radius-radius-xs, var(--ng-radius-md)) \n var(--nile-radius-radius-none, var(--ng-radius-none)) \n var(--nile-radius-radius-none, var(--ng-radius-none)) \n var(--nile-radius-radius-xs, var(--ng-radius-md));\n }\n\n .nile-button-toggle__end {\n border-radius: \n var(--nile-radius-radius-none, var(--ng-radius-none))\n var(--nile-radius-radius-xs, var(--ng-radius-md))\n var(--nile-radius-radius-xs, var(--ng-radius-md))\n var(--nile-radius-radius-none, var(--ng-radius-none));\n border-left: var(--nile-radius-radius-none, var(--ng-radius-none));\n }\n\n .nile-button-toggle__middle {\n border-width: 1px 1px 1px 0;\n border-style: solid;\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-radius-none, var(--ng-radius-none));\n }\n\n .nile-button-toggle__active {\n background-color: var( --nile-colors-neutral-500, var(--ng-colors-bg-primary-hover) );\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n }\n\n .nile-button-toggle__active:hover {\n background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n }\n\n .nile-button-toggle__disabled {\n cursor: not-allowed;\n }\n"]))));}};});
2
2
  //# sourceMappingURL=nile-button-toggle.css.cjs.js.map
package/dist/nile-button-toggle/nile-button-toggle.css.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nile-button-toggle.css.cjs.js","sources":["../../../src/nile-button-toggle/nile-button-toggle.css.ts"],"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 * ButtonToggle CSS\n */\nexport const styles = css`\n :host {\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .nile-button-toggle {\n display: flex;\n padding: var(--nile-spacing-sm, var(--ng-spacing-sm))\n var(--nile-type-scale-4, var(--ng-spacing-sm))\n var(--nile-type-scale-sm, var(--ng-spacing-xl))\n var(--nile-spacing-14px, var(--ng-spacing-xl));\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n cursor: pointer;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n text-align: center;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n justify-content: center;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n height: 40px;\n box-sizing: border-box;\n }\n\n .nile-button-toggle:hover {\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n }\n\n .nile-button-toggle:active {\n background: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary-hover));\n }\n\n .nile-button-toggle__initial {\n border-radius: \n var(--nile-radius-radius-xs, var(--ng-radius-md)) \n var(--nile-radius-radius-none, var(--ng-radius-none)) \n var(--nile-radius-radius-none, var(--ng-radius-none)) \n var(--nile-radius-radius-xs, var(--ng-radius-md));\n }\n\n .nile-button-toggle__end {\n border-radius: \n var(--nile-radius-radius-none, var(--ng-radius-none))\n var(--nile-radius-radius-xs, var(--ng-radius-md))\n var(--nile-radius-radius-xs, var(--ng-radius-md))\n var(--nile-radius-radius-none, var(--ng-radius-none));\n border-left: var(--nile-radius-radius-none, var(--ng-radius-none));\n }\n\n .nile-button-toggle__middle {\n border-width: 1px 1px 1px 0;\n border-style: solid;\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-radius-none, var(--ng-radius-none));\n }\n\n .nile-button-toggle__active {\n background-color: var( --nile-colors-neutral-500, var(--ng-colors-bg-primary-hover) );\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n }\n\n .nile-button-toggle__active:hover {\n background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n }\n\n .nile-button-toggle__disabled {\n cursor: not-allowed;\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
1
+ {"version":3,"file":"nile-button-toggle.css.cjs.js","sources":["../../../src/nile-button-toggle/nile-button-toggle.css.ts"],"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 * ButtonToggle CSS\n */\nexport const styles = css`\n :host {\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .nile-button-toggle {\n display: flex;\n padding: var(--nile-spacing-sm, var(--ng-spacing-sm))\n var(--nile-spacing-xl, var(--ng-spacing-sm))\n var(--nile-spacing-sm, var(--ng-spacing-xl))\n var(--nile-spacing-14px, var(--ng-spacing-xl));\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n cursor: pointer;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n text-align: center;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n justify-content: center;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n height: 40px;\n box-sizing: border-box;\n }\n\n .nile-button-toggle:hover {\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n }\n\n .nile-button-toggle:active {\n background: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary-hover));\n }\n\n .nile-button-toggle__initial {\n border-radius: \n var(--nile-radius-radius-xs, var(--ng-radius-md)) \n var(--nile-radius-radius-none, var(--ng-radius-none)) \n var(--nile-radius-radius-none, var(--ng-radius-none)) \n var(--nile-radius-radius-xs, var(--ng-radius-md));\n }\n\n .nile-button-toggle__end {\n border-radius: \n var(--nile-radius-radius-none, var(--ng-radius-none))\n var(--nile-radius-radius-xs, var(--ng-radius-md))\n var(--nile-radius-radius-xs, var(--ng-radius-md))\n var(--nile-radius-radius-none, var(--ng-radius-none));\n border-left: var(--nile-radius-radius-none, var(--ng-radius-none));\n }\n\n .nile-button-toggle__middle {\n border-width: 1px 1px 1px 0;\n border-style: solid;\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-radius-none, var(--ng-radius-none));\n }\n\n .nile-button-toggle__active {\n background-color: var( --nile-colors-neutral-500, var(--ng-colors-bg-primary-hover) );\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n }\n\n .nile-button-toggle__active:hover {\n background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n }\n\n .nile-button-toggle__disabled {\n cursor: not-allowed;\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
package/dist/nile-button-toggle/nile-button-toggle.css.esm.js CHANGED
@@ -8,8 +8,8 @@ import{css as r}from"lit";const n=r`
8
8
  .nile-button-toggle {
9
9
  display: flex;
10
10
  padding: var(--nile-spacing-sm, var(--ng-spacing-sm))
11
- var(--nile-type-scale-4, var(--ng-spacing-sm))
12
- var(--nile-type-scale-sm, var(--ng-spacing-xl))
11
+ var(--nile-spacing-xl, var(--ng-spacing-sm))
12
+ var(--nile-spacing-sm, var(--ng-spacing-xl))
13
13
  var(--nile-spacing-14px, var(--ng-spacing-xl));
14
14
  border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
15
15
  cursor: pointer;
package/dist/nile-calendar/nile-calendar.css.cjs.js CHANGED
@@ -1,2 +1,2 @@
1
- System.register(["lit"],function(_export,_context){"use strict";var a,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){a=_lit.css;}],execute:function execute(){_export("s",r=a(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n\n .base {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n width: 300px;\n box-shadow: 0px 8px 8px -4px var(--nile-colors-neutral-400);\n box-shadow: 0px 20px 24px -4px var(--nile-colors-dark-100, var(--ng-colors-effects-shadow-xl-01));\n border: var(--nile-spacing-spacing-none, 1px solid var(--ng-colors-border-secondary-alt));\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .calendar-container {\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n width: 100%;\n height: auto;\n text-align: center;\n background: white;\n border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n }\n\n .calendar-wrapper {\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n display: flex;\n justify-content: space-between;\n width: 100%;\n border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n }\n\n .calendar-header {\n display: flex;\n justify-content: space-between;\n padding: var(--nile-spacing-2xl, var(--ng-spacing-2xl)) var(--nile-spacing-2xl, var(--ng-spacing-2xl));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .calendar-header__month-navigation {\n cursor: pointer;\n }\n\n /* Date CSS_START */\n\n .days_container {\n\t\tdisplay: grid;\n padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n\t\tgrid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;\n\t\tgrid-row-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n }\n\n .day_date ,.day_name{\n\t\tfont-family: var( --nile-font-family-serif, var(--ng-font-family-body));\n\t\tfont-style: normal;\n\t\tfont-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\t\tline-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n\t\ttext-align: center;\n\n\t\t/* width: 40px;\n\t\theight: 30px; */\n\t\tpadding: 5px 8px;\n\t\tdisplay:grid;\n\t\tplace-items:center;\n }\n\n .day_name{\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n }\n\n .day_date{\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n user-select:none;\n }\n\n\t.current__date__dot{\n\t\tbackground-color:white;\n\t\tposition:absolute;\n\t\tborder-radius:50%;\n\t\theight:5px;\n\t\twidth:5px;\n\t\tleft:25%;\n\t\ttop:90%;\n\t}\n\n .day_date:not(.range-start, .selected-date, .range-end) .current__date__dot{\n\t\tbackground-color:var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n\n .day_date:hover {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary-hover));\n }\n\n .filler {\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n pointer-events: none;\n }\n\n .selected-date {\n color: white;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n .selected-date:hover {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n .selected-date,\n .range-start,\n .range-end {\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: white;\n }\n\n .selected-date:hover,\n .range-start:hover,\n .range-end:hover,\n .day_date.in-range:hover {\n background: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n }\n\n .range-start.in-range {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs));\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n .range-end {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n border-radius: var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none));\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n .range-middle {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-none, var(--ng-radius-none))\n }\n\n .day_date.selected {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n }\n\n .day_date.in-range:not(.range-start,.range-end, .selected-date) {\n background: var(--nile-colors-neutral-400, var(--ng-colors-bg-active));\n }\n\n .selected-date {\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n .not-allowed{\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n pointer-events: none;\n }\n\n /* Date CSS_END */\n\n .calender-input {\n box-sizing:border-box;\n padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n width:100%;\n justify-content: space-between;\n display: flex;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n flex-wrap: wrap;\n }\n\n .from {\n display: flex;\n justify-content: space-between;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n width: auto;\n }\n\n .manual-input-label {\n color: var(--nile-colors-dark-500);\n font-family: Colfax-regular;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n line-height: 12px;\n letter-spacing: 0.2px;\n } \n\n .button-container {\n width: 100%;\n display:flex;\n justify-content: end;\n gap: var(--nile-spacing-10px, var(--ng-spacing-lg));\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));\n box-sizing: border-box;\n }\n\n .calendar-config {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .calendar-switcher {\n width: 100%;\n margin: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .units-wrapper{\n width:min-content;\n margin:auto;\n }\n\n .unit-container{\n display:grid;\n grid-template-columns: auto auto;\n row-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-2xl));\n column-gap: var(--nile-spacing-spacing-sm, var(--ng-spacing-sm));\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n padding-bottom: var(--nile-spacing-none, var(--ng-spacing-none));\n }\n\n .duration-name{\n display:flex;\n align-items:center;\n font-family: var( --nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm)); \n }\n \n .duration-units{\n display:flex;\n font-family: var( --nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n }\n\n .duration__value{\n display: grid;\n place-items:center;\n width: 34px;\n height: 34px;\n cursor: pointer;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n }\n\n .duration__value:hover{\n background: var(--nile-colors-neutral-100);\n }\n\n .duration__value--selected{\n background-color:var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n }\n\n .duration__value--selected:hover{\n background:var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n }\n\n nile-input::part(input)::-webkit-inner-spin-button,\n nile-input::part(input)::-webkit-outer-spin-button {\n -webkit-appearance: none;\n }\n\n .hidden {\n display: none !important;\n }\n\n .unit-input-container {\n display: flex;\n justify-content: space-between;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n padding: var(--nile-spacing-none, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n padding-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .duration-input,.time-input,.manual-input {\n width: 125px;\n }\n"]))));}};});
1
+ System.register(["lit"],function(_export,_context){"use strict";var a,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){a=_lit.css;}],execute:function execute(){_export("s",r=a(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n\n .base {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n width: 300px;\n box-shadow: 0px 8px 8px -4px var(--nile-colors-neutral-400);\n box-shadow: 0px 20px 24px -4px var(--nile-colors-dark-100, var(--ng-colors-effects-shadow-xl-01));\n border: var(--nile-spacing-spacing-none, 1px solid var(--ng-colors-border-secondary-alt));\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .calendar-container {\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n width: 100%;\n height: auto;\n text-align: center;\n background: white;\n border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n }\n\n .calendar-wrapper {\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n display: flex;\n justify-content: space-between;\n width: 100%;\n border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n }\n\n .calendar-header {\n display: flex;\n justify-content: space-between;\n padding: var(--nile-spacing-22px, var(--ng-spacing-2xl)) var(--nile-spacing-2xl, var(--ng-spacing-2xl));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .calendar-header__month-navigation {\n cursor: pointer;\n }\n\n /* Date CSS_START */\n\n .days_container {\n\t\tdisplay: grid;\n padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n\t\tgrid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;\n\t\tgrid-row-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n }\n\n .day_date ,.day_name{\n\t\tfont-family: var( --nile-font-family-serif, var(--ng-font-family-body));\n\t\tfont-style: normal;\n\t\tfont-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\t\tline-height: var(--nile-line-height-20px, var(--ng-line-height-text-sm));\n\t\ttext-align: center;\n\n\t\t/* width: 40px;\n\t\theight: 30px; */\n\t\tpadding: 5px 8px;\n\t\tdisplay:grid;\n\t\tplace-items:center;\n }\n\n .day_name{\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n }\n\n .day_date{\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n user-select:none;\n }\n\n\t.current__date__dot{\n\t\tbackground-color:white;\n\t\tposition:absolute;\n\t\tborder-radius:50%;\n\t\theight:5px;\n\t\twidth:5px;\n\t\tleft:25%;\n\t\ttop:90%;\n\t}\n\n .day_date:not(.range-start, .selected-date, .range-end) .current__date__dot{\n\t\tbackground-color:var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n\n .day_date:hover {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary-hover));\n }\n\n .filler {\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n pointer-events: none;\n }\n\n .selected-date {\n color: white;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n .selected-date:hover {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n .selected-date,\n .range-start,\n .range-end {\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: white;\n }\n\n .selected-date:hover,\n .range-start:hover,\n .range-end:hover,\n .day_date.in-range:hover {\n background: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n }\n\n .range-start.in-range {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs));\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n .range-end {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n border-radius: var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none));\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n .range-middle {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-none, var(--ng-radius-none))\n }\n\n .day_date.selected {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n }\n\n .day_date.in-range:not(.range-start,.range-end, .selected-date) {\n background: var(--nile-colors-neutral-400, var(--ng-colors-bg-active));\n }\n\n .selected-date {\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n .not-allowed{\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n pointer-events: none;\n }\n\n /* Date CSS_END */\n\n .calender-input {\n box-sizing:border-box;\n padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n width:100%;\n justify-content: space-between;\n display: flex;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n flex-wrap: wrap;\n }\n\n .from {\n display: flex;\n justify-content: space-between;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n width: auto;\n }\n\n .manual-input-label {\n color: var(--nile-colors-dark-500);\n font-family: Colfax-regular;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n line-height: 12px;\n letter-spacing: 0.2px;\n } \n\n .button-container {\n width: 100%;\n display:flex;\n justify-content: end;\n gap: var(--nile-spacing-10px, var(--ng-spacing-lg));\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));\n box-sizing: border-box;\n }\n\n .calendar-config {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .calendar-switcher {\n width: 100%;\n margin: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .units-wrapper{\n width:min-content;\n margin:auto;\n }\n\n .unit-container{\n display:grid;\n grid-template-columns: auto auto;\n row-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-2xl));\n column-gap: var(--nile-spacing-spacing-sm, var(--ng-spacing-sm));\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n padding-bottom: var(--nile-spacing-none, var(--ng-spacing-none));\n }\n\n .duration-name{\n display:flex;\n align-items:center;\n font-family: var( --nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm)); \n }\n \n .duration-units{\n display:flex;\n font-family: var( --nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n }\n\n .duration__value{\n display: grid;\n place-items:center;\n width: 34px;\n height: 34px;\n cursor: pointer;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n }\n\n .duration__value:hover{\n background: var(--nile-colors-neutral-100);\n }\n\n .duration__value--selected{\n background-color:var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n }\n\n .duration__value--selected:hover{\n background:var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n }\n\n nile-input::part(input)::-webkit-inner-spin-button,\n nile-input::part(input)::-webkit-outer-spin-button {\n -webkit-appearance: none;\n }\n\n .hidden {\n display: none !important;\n }\n\n .unit-input-container {\n display: flex;\n justify-content: space-between;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n padding: var(--nile-spacing-none, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n padding-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .duration-input,.time-input,.manual-input {\n width: 125px;\n }\n"]))));}};});
2
2
  //# sourceMappingURL=nile-calendar.css.cjs.js.map
package/dist/nile-calendar/nile-calendar.css.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nile-calendar.css.cjs.js","sources":["../../../src/nile-calendar/nile-calendar.css.ts"],"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 * DatePicker CSS\n */\nexport const styles = css`\n\n .base {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n width: 300px;\n box-shadow: 0px 8px 8px -4px var(--nile-colors-neutral-400);\n box-shadow: 0px 20px 24px -4px var(--nile-colors-dark-100, var(--ng-colors-effects-shadow-xl-01));\n border: var(--nile-spacing-spacing-none, 1px solid var(--ng-colors-border-secondary-alt));\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .calendar-container {\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n width: 100%;\n height: auto;\n text-align: center;\n background: white;\n border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n }\n\n .calendar-wrapper {\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n display: flex;\n justify-content: space-between;\n width: 100%;\n border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n }\n\n .calendar-header {\n display: flex;\n justify-content: space-between;\n padding: var(--nile-spacing-2xl, var(--ng-spacing-2xl)) var(--nile-spacing-2xl, var(--ng-spacing-2xl));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .calendar-header__month-navigation {\n cursor: pointer;\n }\n\n /* Date CSS_START */\n\n .days_container {\n\t\tdisplay: grid;\n padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n\t\tgrid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;\n\t\tgrid-row-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n }\n\n .day_date ,.day_name{\n\t\tfont-family: var( --nile-font-family-serif, var(--ng-font-family-body));\n\t\tfont-style: normal;\n\t\tfont-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\t\tline-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n\t\ttext-align: center;\n\n\t\t/* width: 40px;\n\t\theight: 30px; */\n\t\tpadding: 5px 8px;\n\t\tdisplay:grid;\n\t\tplace-items:center;\n }\n\n .day_name{\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n }\n\n .day_date{\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n user-select:none;\n }\n\n\t.current__date__dot{\n\t\tbackground-color:white;\n\t\tposition:absolute;\n\t\tborder-radius:50%;\n\t\theight:5px;\n\t\twidth:5px;\n\t\tleft:25%;\n\t\ttop:90%;\n\t}\n\n .day_date:not(.range-start, .selected-date, .range-end) .current__date__dot{\n\t\tbackground-color:var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n\n .day_date:hover {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary-hover));\n }\n\n .filler {\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n pointer-events: none;\n }\n\n .selected-date {\n color: white;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n .selected-date:hover {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n .selected-date,\n .range-start,\n .range-end {\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: white;\n }\n\n .selected-date:hover,\n .range-start:hover,\n .range-end:hover,\n .day_date.in-range:hover {\n background: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n }\n\n .range-start.in-range {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs));\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n .range-end {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n border-radius: var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none));\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n .range-middle {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-none, var(--ng-radius-none))\n }\n\n .day_date.selected {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n }\n\n .day_date.in-range:not(.range-start,.range-end, .selected-date) {\n background: var(--nile-colors-neutral-400, var(--ng-colors-bg-active));\n }\n\n .selected-date {\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n .not-allowed{\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n pointer-events: none;\n }\n\n /* Date CSS_END */\n\n .calender-input {\n box-sizing:border-box;\n padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n width:100%;\n justify-content: space-between;\n display: flex;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n flex-wrap: wrap;\n }\n\n .from {\n display: flex;\n justify-content: space-between;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n width: auto;\n }\n\n .manual-input-label {\n color: var(--nile-colors-dark-500);\n font-family: Colfax-regular;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n line-height: 12px;\n letter-spacing: 0.2px;\n } \n\n .button-container {\n width: 100%;\n display:flex;\n justify-content: end;\n gap: var(--nile-spacing-10px, var(--ng-spacing-lg));\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));\n box-sizing: border-box;\n }\n\n .calendar-config {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .calendar-switcher {\n width: 100%;\n margin: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .units-wrapper{\n width:min-content;\n margin:auto;\n }\n\n .unit-container{\n display:grid;\n grid-template-columns: auto auto;\n row-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-2xl));\n column-gap: var(--nile-spacing-spacing-sm, var(--ng-spacing-sm));\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n padding-bottom: var(--nile-spacing-none, var(--ng-spacing-none));\n }\n\n .duration-name{\n display:flex;\n align-items:center;\n font-family: var( --nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm)); \n }\n \n .duration-units{\n display:flex;\n font-family: var( --nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n }\n\n .duration__value{\n display: grid;\n place-items:center;\n width: 34px;\n height: 34px;\n cursor: pointer;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n }\n\n .duration__value:hover{\n background: var(--nile-colors-neutral-100);\n }\n\n .duration__value--selected{\n background-color:var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n }\n\n .duration__value--selected:hover{\n background:var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n }\n\n nile-input::part(input)::-webkit-inner-spin-button,\n nile-input::part(input)::-webkit-outer-spin-button {\n -webkit-appearance: none;\n }\n\n .hidden {\n display: none !important;\n }\n\n .unit-input-container {\n display: flex;\n justify-content: space-between;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n padding: var(--nile-spacing-none, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n padding-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .duration-input,.time-input,.manual-input {\n width: 125px;\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
1
+ {"version":3,"file":"nile-calendar.css.cjs.js","sources":["../../../src/nile-calendar/nile-calendar.css.ts"],"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 * DatePicker CSS\n */\nexport const styles = css`\n\n .base {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n width: 300px;\n box-shadow: 0px 8px 8px -4px var(--nile-colors-neutral-400);\n box-shadow: 0px 20px 24px -4px var(--nile-colors-dark-100, var(--ng-colors-effects-shadow-xl-01));\n border: var(--nile-spacing-spacing-none, 1px solid var(--ng-colors-border-secondary-alt));\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .calendar-container {\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n width: 100%;\n height: auto;\n text-align: center;\n background: white;\n border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n }\n\n .calendar-wrapper {\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n display: flex;\n justify-content: space-between;\n width: 100%;\n border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n }\n\n .calendar-header {\n display: flex;\n justify-content: space-between;\n padding: var(--nile-spacing-22px, var(--ng-spacing-2xl)) var(--nile-spacing-2xl, var(--ng-spacing-2xl));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .calendar-header__month-navigation {\n cursor: pointer;\n }\n\n /* Date CSS_START */\n\n .days_container {\n\t\tdisplay: grid;\n padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n\t\tgrid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;\n\t\tgrid-row-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n }\n\n .day_date ,.day_name{\n\t\tfont-family: var( --nile-font-family-serif, var(--ng-font-family-body));\n\t\tfont-style: normal;\n\t\tfont-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\t\tline-height: var(--nile-line-height-20px, var(--ng-line-height-text-sm));\n\t\ttext-align: center;\n\n\t\t/* width: 40px;\n\t\theight: 30px; */\n\t\tpadding: 5px 8px;\n\t\tdisplay:grid;\n\t\tplace-items:center;\n }\n\n .day_name{\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n }\n\n .day_date{\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n user-select:none;\n }\n\n\t.current__date__dot{\n\t\tbackground-color:white;\n\t\tposition:absolute;\n\t\tborder-radius:50%;\n\t\theight:5px;\n\t\twidth:5px;\n\t\tleft:25%;\n\t\ttop:90%;\n\t}\n\n .day_date:not(.range-start, .selected-date, .range-end) .current__date__dot{\n\t\tbackground-color:var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n\n .day_date:hover {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary-hover));\n }\n\n .filler {\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n pointer-events: none;\n }\n\n .selected-date {\n color: white;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n .selected-date:hover {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n .selected-date,\n .range-start,\n .range-end {\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: white;\n }\n\n .selected-date:hover,\n .range-start:hover,\n .range-end:hover,\n .day_date.in-range:hover {\n background: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n }\n\n .range-start.in-range {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs));\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n .range-end {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n border-radius: var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none));\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n .range-middle {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-none, var(--ng-radius-none))\n }\n\n .day_date.selected {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n }\n\n .day_date.in-range:not(.range-start,.range-end, .selected-date) {\n background: var(--nile-colors-neutral-400, var(--ng-colors-bg-active));\n }\n\n .selected-date {\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n .not-allowed{\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n pointer-events: none;\n }\n\n /* Date CSS_END */\n\n .calender-input {\n box-sizing:border-box;\n padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n width:100%;\n justify-content: space-between;\n display: flex;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n flex-wrap: wrap;\n }\n\n .from {\n display: flex;\n justify-content: space-between;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n width: auto;\n }\n\n .manual-input-label {\n color: var(--nile-colors-dark-500);\n font-family: Colfax-regular;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n line-height: 12px;\n letter-spacing: 0.2px;\n } \n\n .button-container {\n width: 100%;\n display:flex;\n justify-content: end;\n gap: var(--nile-spacing-10px, var(--ng-spacing-lg));\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));\n box-sizing: border-box;\n }\n\n .calendar-config {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .calendar-switcher {\n width: 100%;\n margin: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .units-wrapper{\n width:min-content;\n margin:auto;\n }\n\n .unit-container{\n display:grid;\n grid-template-columns: auto auto;\n row-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-2xl));\n column-gap: var(--nile-spacing-spacing-sm, var(--ng-spacing-sm));\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n padding-bottom: var(--nile-spacing-none, var(--ng-spacing-none));\n }\n\n .duration-name{\n display:flex;\n align-items:center;\n font-family: var( --nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm)); \n }\n \n .duration-units{\n display:flex;\n font-family: var( --nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n }\n\n .duration__value{\n display: grid;\n place-items:center;\n width: 34px;\n height: 34px;\n cursor: pointer;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n }\n\n .duration__value:hover{\n background: var(--nile-colors-neutral-100);\n }\n\n .duration__value--selected{\n background-color:var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n }\n\n .duration__value--selected:hover{\n background:var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n }\n\n nile-input::part(input)::-webkit-inner-spin-button,\n nile-input::part(input)::-webkit-outer-spin-button {\n -webkit-appearance: none;\n }\n\n .hidden {\n display: none !important;\n }\n\n .unit-input-container {\n display: flex;\n justify-content: space-between;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n padding: var(--nile-spacing-none, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n padding-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .duration-input,.time-input,.manual-input {\n width: 125px;\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
package/dist/nile-calendar/nile-calendar.css.esm.js CHANGED
@@ -32,7 +32,7 @@ import{css as a}from"lit";const r=a`
32
32
  .calendar-header {
33
33
  display: flex;
34
34
  justify-content: space-between;
35
- padding: var(--nile-spacing-2xl, var(--ng-spacing-2xl)) var(--nile-spacing-2xl, var(--ng-spacing-2xl));
35
+ padding: var(--nile-spacing-22px, var(--ng-spacing-2xl)) var(--nile-spacing-2xl, var(--ng-spacing-2xl));
36
36
  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
37
37
  font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));
38
38
  line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
@@ -56,7 +56,7 @@ import{css as a}from"lit";const r=a`
56
56
  font-family: var( --nile-font-family-serif, var(--ng-font-family-body));
57
57
  font-style: normal;
58
58
  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
59
- line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));
59
+ line-height: var(--nile-line-height-20px, var(--ng-line-height-text-sm));
60
60
  text-align: center;
61
61
 
62
62
  /* width: 40px;
package/dist/src/nile-button-toggle/nile-button-toggle.css.js CHANGED
@@ -18,8 +18,8 @@ export const styles = css `
18
18
  .nile-button-toggle {
19
19
  display: flex;
20
20
  padding: var(--nile-spacing-sm, var(--ng-spacing-sm))
21
- var(--nile-type-scale-4, var(--ng-spacing-sm))
22
- var(--nile-type-scale-sm, var(--ng-spacing-xl))
21
+ var(--nile-spacing-xl, var(--ng-spacing-sm))
22
+ var(--nile-spacing-sm, var(--ng-spacing-xl))
23
23
  var(--nile-spacing-14px, var(--ng-spacing-xl));
24
24
  border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
25
25
  cursor: pointer;
package/dist/src/nile-button-toggle/nile-button-toggle.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nile-button-toggle.css.js","sourceRoot":"","sources":["../../../src/nile-button-toggle/nile-button-toggle.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2ExB,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 * ButtonToggle CSS\n */\nexport const styles = css`\n :host {\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .nile-button-toggle {\n display: flex;\n padding: var(--nile-spacing-sm, var(--ng-spacing-sm))\n var(--nile-type-scale-4, var(--ng-spacing-sm))\n var(--nile-type-scale-sm, var(--ng-spacing-xl))\n var(--nile-spacing-14px, var(--ng-spacing-xl));\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n cursor: pointer;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n text-align: center;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n justify-content: center;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n height: 40px;\n box-sizing: border-box;\n }\n\n .nile-button-toggle:hover {\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n }\n\n .nile-button-toggle:active {\n background: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary-hover));\n }\n\n .nile-button-toggle__initial {\n border-radius: \n var(--nile-radius-radius-xs, var(--ng-radius-md)) \n var(--nile-radius-radius-none, var(--ng-radius-none)) \n var(--nile-radius-radius-none, var(--ng-radius-none)) \n var(--nile-radius-radius-xs, var(--ng-radius-md));\n }\n\n .nile-button-toggle__end {\n border-radius: \n var(--nile-radius-radius-none, var(--ng-radius-none))\n var(--nile-radius-radius-xs, var(--ng-radius-md))\n var(--nile-radius-radius-xs, var(--ng-radius-md))\n var(--nile-radius-radius-none, var(--ng-radius-none));\n border-left: var(--nile-radius-radius-none, var(--ng-radius-none));\n }\n\n .nile-button-toggle__middle {\n border-width: 1px 1px 1px 0;\n border-style: solid;\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-radius-none, var(--ng-radius-none));\n }\n\n .nile-button-toggle__active {\n background-color: var( --nile-colors-neutral-500, var(--ng-colors-bg-primary-hover) );\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n }\n\n .nile-button-toggle__active:hover {\n background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n }\n\n .nile-button-toggle__disabled {\n cursor: not-allowed;\n }\n`;\n\nexport default [styles];\n"]}
1
+ {"version":3,"file":"nile-button-toggle.css.js","sourceRoot":"","sources":["../../../src/nile-button-toggle/nile-button-toggle.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2ExB,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 * ButtonToggle CSS\n */\nexport const styles = css`\n :host {\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .nile-button-toggle {\n display: flex;\n padding: var(--nile-spacing-sm, var(--ng-spacing-sm))\n var(--nile-spacing-xl, var(--ng-spacing-sm))\n var(--nile-spacing-sm, var(--ng-spacing-xl))\n var(--nile-spacing-14px, var(--ng-spacing-xl));\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n cursor: pointer;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n text-align: center;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n justify-content: center;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n height: 40px;\n box-sizing: border-box;\n }\n\n .nile-button-toggle:hover {\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n }\n\n .nile-button-toggle:active {\n background: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary-hover));\n }\n\n .nile-button-toggle__initial {\n border-radius: \n var(--nile-radius-radius-xs, var(--ng-radius-md)) \n var(--nile-radius-radius-none, var(--ng-radius-none)) \n var(--nile-radius-radius-none, var(--ng-radius-none)) \n var(--nile-radius-radius-xs, var(--ng-radius-md));\n }\n\n .nile-button-toggle__end {\n border-radius: \n var(--nile-radius-radius-none, var(--ng-radius-none))\n var(--nile-radius-radius-xs, var(--ng-radius-md))\n var(--nile-radius-radius-xs, var(--ng-radius-md))\n var(--nile-radius-radius-none, var(--ng-radius-none));\n border-left: var(--nile-radius-radius-none, var(--ng-radius-none));\n }\n\n .nile-button-toggle__middle {\n border-width: 1px 1px 1px 0;\n border-style: solid;\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-radius-none, var(--ng-radius-none));\n }\n\n .nile-button-toggle__active {\n background-color: var( --nile-colors-neutral-500, var(--ng-colors-bg-primary-hover) );\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n }\n\n .nile-button-toggle__active:hover {\n background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n }\n\n .nile-button-toggle__disabled {\n cursor: not-allowed;\n }\n`;\n\nexport default [styles];\n"]}
package/dist/src/nile-calendar/nile-calendar.css.js CHANGED
@@ -42,7 +42,7 @@ export const styles = css `
42
42
  .calendar-header {
43
43
  display: flex;
44
44
  justify-content: space-between;
45
- padding: var(--nile-spacing-2xl, var(--ng-spacing-2xl)) var(--nile-spacing-2xl, var(--ng-spacing-2xl));
45
+ padding: var(--nile-spacing-22px, var(--ng-spacing-2xl)) var(--nile-spacing-2xl, var(--ng-spacing-2xl));
46
46
  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
47
47
  font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));
48
48
  line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
@@ -66,7 +66,7 @@ export const styles = css `
66
66
  font-family: var( --nile-font-family-serif, var(--ng-font-family-body));
67
67
  font-style: normal;
68
68
  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
69
- line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));
69
+ line-height: var(--nile-line-height-20px, var(--ng-line-height-text-sm));
70
70
  text-align: center;
71
71
 
72
72
  /* width: 40px;
package/dist/src/nile-calendar/nile-calendar.css.js.map CHANGED
@@ -1 +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,KAAK,CAAC;AAE1B;;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';\n\n/**\n * DatePicker CSS\n */\nexport const styles = css`\n\n .base {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n width: 300px;\n box-shadow: 0px 8px 8px -4px var(--nile-colors-neutral-400);\n box-shadow: 0px 20px 24px -4px var(--nile-colors-dark-100, var(--ng-colors-effects-shadow-xl-01));\n border: var(--nile-spacing-spacing-none, 1px solid var(--ng-colors-border-secondary-alt));\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .calendar-container {\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n width: 100%;\n height: auto;\n text-align: center;\n background: white;\n border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n }\n\n .calendar-wrapper {\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n display: flex;\n justify-content: space-between;\n width: 100%;\n border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n }\n\n .calendar-header {\n display: flex;\n justify-content: space-between;\n padding: var(--nile-spacing-2xl, var(--ng-spacing-2xl)) var(--nile-spacing-2xl, var(--ng-spacing-2xl));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .calendar-header__month-navigation {\n cursor: pointer;\n }\n\n /* Date CSS_START */\n\n .days_container {\n\t\tdisplay: grid;\n padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n\t\tgrid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;\n\t\tgrid-row-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n }\n\n .day_date ,.day_name{\n\t\tfont-family: var( --nile-font-family-serif, var(--ng-font-family-body));\n\t\tfont-style: normal;\n\t\tfont-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\t\tline-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n\t\ttext-align: center;\n\n\t\t/* width: 40px;\n\t\theight: 30px; */\n\t\tpadding: 5px 8px;\n\t\tdisplay:grid;\n\t\tplace-items:center;\n }\n\n .day_name{\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n }\n\n .day_date{\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n user-select:none;\n }\n\n\t.current__date__dot{\n\t\tbackground-color:white;\n\t\tposition:absolute;\n\t\tborder-radius:50%;\n\t\theight:5px;\n\t\twidth:5px;\n\t\tleft:25%;\n\t\ttop:90%;\n\t}\n\n .day_date:not(.range-start, .selected-date, .range-end) .current__date__dot{\n\t\tbackground-color:var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n\n .day_date:hover {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary-hover));\n }\n\n .filler {\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n pointer-events: none;\n }\n\n .selected-date {\n color: white;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n .selected-date:hover {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n .selected-date,\n .range-start,\n .range-end {\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: white;\n }\n\n .selected-date:hover,\n .range-start:hover,\n .range-end:hover,\n .day_date.in-range:hover {\n background: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n }\n\n .range-start.in-range {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs));\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n .range-end {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n border-radius: var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none));\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n .range-middle {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-none, var(--ng-radius-none))\n }\n\n .day_date.selected {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n }\n\n .day_date.in-range:not(.range-start,.range-end, .selected-date) {\n background: var(--nile-colors-neutral-400, var(--ng-colors-bg-active));\n }\n\n .selected-date {\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n .not-allowed{\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n pointer-events: none;\n }\n\n /* Date CSS_END */\n\n .calender-input {\n box-sizing:border-box;\n padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n width:100%;\n justify-content: space-between;\n display: flex;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n flex-wrap: wrap;\n }\n\n .from {\n display: flex;\n justify-content: space-between;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n width: auto;\n }\n\n .manual-input-label {\n color: var(--nile-colors-dark-500);\n font-family: Colfax-regular;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n line-height: 12px;\n letter-spacing: 0.2px;\n } \n\n .button-container {\n width: 100%;\n display:flex;\n justify-content: end;\n gap: var(--nile-spacing-10px, var(--ng-spacing-lg));\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));\n box-sizing: border-box;\n }\n\n .calendar-config {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .calendar-switcher {\n width: 100%;\n margin: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .units-wrapper{\n width:min-content;\n margin:auto;\n }\n\n .unit-container{\n display:grid;\n grid-template-columns: auto auto;\n row-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-2xl));\n column-gap: var(--nile-spacing-spacing-sm, var(--ng-spacing-sm));\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n padding-bottom: var(--nile-spacing-none, var(--ng-spacing-none));\n }\n\n .duration-name{\n display:flex;\n align-items:center;\n font-family: var( --nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm)); \n }\n \n .duration-units{\n display:flex;\n font-family: var( --nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n }\n\n .duration__value{\n display: grid;\n place-items:center;\n width: 34px;\n height: 34px;\n cursor: pointer;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n }\n\n .duration__value:hover{\n background: var(--nile-colors-neutral-100);\n }\n\n .duration__value--selected{\n background-color:var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n }\n\n .duration__value--selected:hover{\n background:var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n }\n\n nile-input::part(input)::-webkit-inner-spin-button,\n nile-input::part(input)::-webkit-outer-spin-button {\n -webkit-appearance: none;\n }\n\n .hidden {\n display: none !important;\n }\n\n .unit-input-container {\n display: flex;\n justify-content: space-between;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n padding: var(--nile-spacing-none, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n padding-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .duration-input,.time-input,.manual-input {\n width: 125px;\n }\n`;\n\nexport default [styles];\n"]}
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,KAAK,CAAC;AAE1B;;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';\n\n/**\n * DatePicker CSS\n */\nexport const styles = css`\n\n .base {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n width: 300px;\n box-shadow: 0px 8px 8px -4px var(--nile-colors-neutral-400);\n box-shadow: 0px 20px 24px -4px var(--nile-colors-dark-100, var(--ng-colors-effects-shadow-xl-01));\n border: var(--nile-spacing-spacing-none, 1px solid var(--ng-colors-border-secondary-alt));\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .calendar-container {\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n width: 100%;\n height: auto;\n text-align: center;\n background: white;\n border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n }\n\n .calendar-wrapper {\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n display: flex;\n justify-content: space-between;\n width: 100%;\n border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n }\n\n .calendar-header {\n display: flex;\n justify-content: space-between;\n padding: var(--nile-spacing-22px, var(--ng-spacing-2xl)) var(--nile-spacing-2xl, var(--ng-spacing-2xl));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .calendar-header__month-navigation {\n cursor: pointer;\n }\n\n /* Date CSS_START */\n\n .days_container {\n\t\tdisplay: grid;\n padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n\t\tgrid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;\n\t\tgrid-row-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n }\n\n .day_date ,.day_name{\n\t\tfont-family: var( --nile-font-family-serif, var(--ng-font-family-body));\n\t\tfont-style: normal;\n\t\tfont-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\t\tline-height: var(--nile-line-height-20px, var(--ng-line-height-text-sm));\n\t\ttext-align: center;\n\n\t\t/* width: 40px;\n\t\theight: 30px; */\n\t\tpadding: 5px 8px;\n\t\tdisplay:grid;\n\t\tplace-items:center;\n }\n\n .day_name{\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n }\n\n .day_date{\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n user-select:none;\n }\n\n\t.current__date__dot{\n\t\tbackground-color:white;\n\t\tposition:absolute;\n\t\tborder-radius:50%;\n\t\theight:5px;\n\t\twidth:5px;\n\t\tleft:25%;\n\t\ttop:90%;\n\t}\n\n .day_date:not(.range-start, .selected-date, .range-end) .current__date__dot{\n\t\tbackground-color:var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n\n .day_date:hover {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary-hover));\n }\n\n .filler {\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n pointer-events: none;\n }\n\n .selected-date {\n color: white;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n .selected-date:hover {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n .selected-date,\n .range-start,\n .range-end {\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: white;\n }\n\n .selected-date:hover,\n .range-start:hover,\n .range-end:hover,\n .day_date.in-range:hover {\n background: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n }\n\n .range-start.in-range {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs));\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n .range-end {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n border-radius: var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none));\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n .range-middle {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-none, var(--ng-radius-none))\n }\n\n .day_date.selected {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n }\n\n .day_date.in-range:not(.range-start,.range-end, .selected-date) {\n background: var(--nile-colors-neutral-400, var(--ng-colors-bg-active));\n }\n\n .selected-date {\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n .not-allowed{\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n pointer-events: none;\n }\n\n /* Date CSS_END */\n\n .calender-input {\n box-sizing:border-box;\n padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n width:100%;\n justify-content: space-between;\n display: flex;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n flex-wrap: wrap;\n }\n\n .from {\n display: flex;\n justify-content: space-between;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n width: auto;\n }\n\n .manual-input-label {\n color: var(--nile-colors-dark-500);\n font-family: Colfax-regular;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n line-height: 12px;\n letter-spacing: 0.2px;\n } \n\n .button-container {\n width: 100%;\n display:flex;\n justify-content: end;\n gap: var(--nile-spacing-10px, var(--ng-spacing-lg));\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));\n box-sizing: border-box;\n }\n\n .calendar-config {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .calendar-switcher {\n width: 100%;\n margin: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .units-wrapper{\n width:min-content;\n margin:auto;\n }\n\n .unit-container{\n display:grid;\n grid-template-columns: auto auto;\n row-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-2xl));\n column-gap: var(--nile-spacing-spacing-sm, var(--ng-spacing-sm));\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n padding-bottom: var(--nile-spacing-none, var(--ng-spacing-none));\n }\n\n .duration-name{\n display:flex;\n align-items:center;\n font-family: var( --nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm)); \n }\n \n .duration-units{\n display:flex;\n font-family: var( --nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n }\n\n .duration__value{\n display: grid;\n place-items:center;\n width: 34px;\n height: 34px;\n cursor: pointer;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n }\n\n .duration__value:hover{\n background: var(--nile-colors-neutral-100);\n }\n\n .duration__value--selected{\n background-color:var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n }\n\n .duration__value--selected:hover{\n background:var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n }\n\n nile-input::part(input)::-webkit-inner-spin-button,\n nile-input::part(input)::-webkit-outer-spin-button {\n -webkit-appearance: none;\n }\n\n .hidden {\n display: none !important;\n }\n\n .unit-input-container {\n display: flex;\n justify-content: space-between;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n padding: var(--nile-spacing-none, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n padding-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .duration-input,.time-input,.manual-input {\n width: 125px;\n }\n`;\n\nexport default [styles];\n"]}