@aquera/nile-elements 0.0.7-1 → 0.0.8

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.
@@ -1,2 +1,2 @@
1
- System.register(["../index-cd83c5c8.cjs.js"],function(_export,_context){"use strict";var o,_templateObject,e;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_index001CjsJs){o=_index001CjsJs.i;}],execute:function(){_export("s",e=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n --width: 31rem;\n --header-spacing: 1.25rem;\n --body-spacing: 1.25rem;\n --footer-spacing: 1.25rem;\n\n display: contents;\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n .dialog {\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 800;\n }\n\n .dialog__panel {\n display: flex;\n flex-direction: column;\n z-index: 2;\n width: var(--width);\n max-width: calc(100% - 2.25rem);\n max-height: calc(100% - 2.25rem);\n background-color: hsl(0, 0%, 100%);\n border-radius: 4px;\n box-shadow: 0 4px 16px rgb(0 0 0 / 24%);\n }\n\n .dialog__panel:focus {\n outline: none;\n }\n\n @media screen and (max-width: 420px) {\n .dialog__panel {\n max-height: 80vh;\n }\n }\n\n .dialog--open .dialog__panel {\n display: flex;\n opacity: 1;\n }\n\n .dialog__header {\n flex: 0 0 auto;\n display: flex;\n padding: 24px 24px 24px 24px;\n background-color: #FAFAFA;\n border-radius: 4px 4px 0 0;\n border: 1px solid #E5E9EB;\n }\n\n .dialog__title {\n flex: 1 1 auto;\n font: inherit;\n font-size: 1.25rem;\n line-height: 1.4;\n margin: 0;\n }\n\n .dialog__header-actions {\n flex-shrink: 0;\n display: flex;\n flex-wrap: wrap;\n justify-content: end;\n gap: 24px;\n }\n\n .dialog__header-actions nile-icon-button,\n .dialog__header-actions ::slotted(nile-icon-button) {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: 1rem;\n }\n\n .dialog__body {\n flex: 1 1 auto;\n display: block;\n padding: 1.25rem;\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n border: 1px solid #E5E9EB;\n }\n\n .dialog__footer {\n flex: 0 0 auto;\n text-align: right;\n padding: 12px 24px;\n background-color: #FAFAFA;\n border-radius: 0 0 4px 4px;\n border: 1px solid #E5E9EB;\n }\n\n .dialog__footer ::slotted(nile-button:not(:first-of-type)) {\n margin-inline-start: 0.5rem;\n }\n\n .dialog:not(.dialog--has-footer) .dialog__footer {\n display: none;\n }\n\n .dialog__overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: hsl(0 0% 0% / 43%);\n }\n\n @media (forced-colors: active) {\n .dialog__panel {\n border: solid 1px hsl(240, 5.9%, 11%);\n }\n }\n"]))));}};});
1
+ System.register(["../index-cd83c5c8.cjs.js"],function(_export,_context){"use strict";var o,_templateObject,e;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_index001CjsJs){o=_index001CjsJs.i;}],execute:function(){_export("s",e=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n --width: 31rem;\n --header-spacing: 1.25rem;\n --body-spacing: 1.25rem;\n --footer-spacing: 1.25rem;\n\n display: contents;\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n .dialog {\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 800;\n }\n\n .dialog__panel {\n display: flex;\n flex-direction: column;\n z-index: 2;\n width: var(--width);\n max-width: calc(100% - 2.25rem);\n max-height: calc(100% - 2.25rem);\n background-color: hsl(0, 0%, 100%);\n border-radius: 4px;\n box-shadow: 0 4px 16px rgb(0 0 0 / 24%);\n }\n\n .dialog__panel:focus {\n outline: none;\n }\n\n @media screen and (max-width: 420px) {\n .dialog__panel {\n max-height: 80vh;\n }\n }\n\n .dialog--open .dialog__panel {\n display: flex;\n opacity: 1;\n }\n\n .dialog__header {\n flex: 0 0 auto;\n display: flex;\n padding: 12px 24px;\n background-color: #fafafa;\n border-radius: 4px 4px 0 0;\n border: 1px solid #e5e9eb;\n }\n\n .dialog__title {\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n margin: 0;\n color: #000;\n font-family: Colfax-regular;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px;\n letter-spacing: 0.2px;\n }\n\n .dialog__header-actions {\n flex-shrink: 0;\n display: flex;\n flex-wrap: wrap;\n justify-content: end;\n gap: 24px;\n }\n\n .dialog__header-actions nile-icon-button,\n .dialog__header-actions ::slotted(nile-icon-button) {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: 1rem;\n }\n\n .dialog__body {\n flex: 1 1 auto;\n display: block;\n padding: 1.25rem;\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n border: 1px solid #e5e9eb;\n border-radius: 4px 4px 0px 0px;\n }\n\n .dialog__footer {\n flex: 0 0 auto;\n text-align: right;\n padding: 12px 24px;\n background-color: #fafafa;\n border-radius: 0 0 4px 4px;\n border: 1px solid #e5e9eb;\n }\n\n .dialog__footer ::slotted(nile-button:not(:first-of-type)) {\n margin-inline-start: 0.5rem;\n }\n\n .dialog:not(.dialog--has-footer) .dialog__footer {\n display: none;\n }\n\n .dialog__overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: hsl(0 0% 0% / 43%);\n }\n\n @media (forced-colors: active) {\n .dialog__panel {\n border: solid 1px hsl(240, 5.9%, 11%);\n }\n }\n"]))));}};});
2
2
  //# sourceMappingURL=nile-dialog.css.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"nile-dialog.css.cjs.js","sources":["../../../src/nile-dialog/nile-dialog.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-element';\n\n/**\n * Modal CSS\n */\nexport const styles = css`\n :host {\n --width: 31rem;\n --header-spacing: 1.25rem;\n --body-spacing: 1.25rem;\n --footer-spacing: 1.25rem;\n\n display: contents;\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n .dialog {\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 800;\n }\n\n .dialog__panel {\n display: flex;\n flex-direction: column;\n z-index: 2;\n width: var(--width);\n max-width: calc(100% - 2.25rem);\n max-height: calc(100% - 2.25rem);\n background-color: hsl(0, 0%, 100%);\n border-radius: 4px;\n box-shadow: 0 4px 16px rgb(0 0 0 / 24%);\n }\n\n .dialog__panel:focus {\n outline: none;\n }\n\n @media screen and (max-width: 420px) {\n .dialog__panel {\n max-height: 80vh;\n }\n }\n\n .dialog--open .dialog__panel {\n display: flex;\n opacity: 1;\n }\n\n .dialog__header {\n flex: 0 0 auto;\n display: flex;\n padding: 24px 24px 24px 24px;\n background-color: #FAFAFA;\n border-radius: 4px 4px 0 0;\n border: 1px solid #E5E9EB;\n }\n\n .dialog__title {\n flex: 1 1 auto;\n font: inherit;\n font-size: 1.25rem;\n line-height: 1.4;\n margin: 0;\n }\n\n .dialog__header-actions {\n flex-shrink: 0;\n display: flex;\n flex-wrap: wrap;\n justify-content: end;\n gap: 24px;\n }\n\n .dialog__header-actions nile-icon-button,\n .dialog__header-actions ::slotted(nile-icon-button) {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: 1rem;\n }\n\n .dialog__body {\n flex: 1 1 auto;\n display: block;\n padding: 1.25rem;\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n border: 1px solid #E5E9EB;\n }\n\n .dialog__footer {\n flex: 0 0 auto;\n text-align: right;\n padding: 12px 24px;\n background-color: #FAFAFA;\n border-radius: 0 0 4px 4px;\n border: 1px solid #E5E9EB;\n }\n\n .dialog__footer ::slotted(nile-button:not(:first-of-type)) {\n margin-inline-start: 0.5rem;\n }\n\n .dialog:not(.dialog--has-footer) .dialog__footer {\n display: none;\n }\n\n .dialog__overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: hsl(0 0% 0% / 43%);\n }\n\n @media (forced-colors: active) {\n .dialog__panel {\n border: solid 1px hsl(240, 5.9%, 11%);\n }\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"gXAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
1
+ {"version":3,"file":"nile-dialog.css.cjs.js","sources":["../../../src/nile-dialog/nile-dialog.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-element';\n\n/**\n * Modal CSS\n */\nexport const styles = css`\n :host {\n --width: 31rem;\n --header-spacing: 1.25rem;\n --body-spacing: 1.25rem;\n --footer-spacing: 1.25rem;\n\n display: contents;\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n .dialog {\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 800;\n }\n\n .dialog__panel {\n display: flex;\n flex-direction: column;\n z-index: 2;\n width: var(--width);\n max-width: calc(100% - 2.25rem);\n max-height: calc(100% - 2.25rem);\n background-color: hsl(0, 0%, 100%);\n border-radius: 4px;\n box-shadow: 0 4px 16px rgb(0 0 0 / 24%);\n }\n\n .dialog__panel:focus {\n outline: none;\n }\n\n @media screen and (max-width: 420px) {\n .dialog__panel {\n max-height: 80vh;\n }\n }\n\n .dialog--open .dialog__panel {\n display: flex;\n opacity: 1;\n }\n\n .dialog__header {\n flex: 0 0 auto;\n display: flex;\n padding: 12px 24px;\n background-color: #fafafa;\n border-radius: 4px 4px 0 0;\n border: 1px solid #e5e9eb;\n }\n\n .dialog__title {\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n margin: 0;\n color: #000;\n font-family: Colfax-regular;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px;\n letter-spacing: 0.2px;\n }\n\n .dialog__header-actions {\n flex-shrink: 0;\n display: flex;\n flex-wrap: wrap;\n justify-content: end;\n gap: 24px;\n }\n\n .dialog__header-actions nile-icon-button,\n .dialog__header-actions ::slotted(nile-icon-button) {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: 1rem;\n }\n\n .dialog__body {\n flex: 1 1 auto;\n display: block;\n padding: 1.25rem;\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n border: 1px solid #e5e9eb;\n border-radius: 4px 4px 0px 0px;\n }\n\n .dialog__footer {\n flex: 0 0 auto;\n text-align: right;\n padding: 12px 24px;\n background-color: #fafafa;\n border-radius: 0 0 4px 4px;\n border: 1px solid #e5e9eb;\n }\n\n .dialog__footer ::slotted(nile-button:not(:first-of-type)) {\n margin-inline-start: 0.5rem;\n }\n\n .dialog:not(.dialog--has-footer) .dialog__footer {\n display: none;\n }\n\n .dialog__overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: hsl(0 0% 0% / 43%);\n }\n\n @media (forced-colors: active) {\n .dialog__panel {\n border: solid 1px hsl(240, 5.9%, 11%);\n }\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"gXAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
@@ -60,18 +60,24 @@ import{i as o}from"../index-cd2f9c12.esm.js";const e=o`
60
60
  .dialog__header {
61
61
  flex: 0 0 auto;
62
62
  display: flex;
63
- padding: 24px 24px 24px 24px;
64
- background-color: #FAFAFA;
63
+ padding: 12px 24px;
64
+ background-color: #fafafa;
65
65
  border-radius: 4px 4px 0 0;
66
- border: 1px solid #E5E9EB;
66
+ border: 1px solid #e5e9eb;
67
67
  }
68
68
 
69
69
  .dialog__title {
70
+ display: flex;
70
71
  flex: 1 1 auto;
71
- font: inherit;
72
- font-size: 1.25rem;
73
- line-height: 1.4;
72
+ align-items: center;
74
73
  margin: 0;
74
+ color: #000;
75
+ font-family: Colfax-regular;
76
+ font-size: 16px;
77
+ font-style: normal;
78
+ font-weight: 400;
79
+ line-height: 16px;
80
+ letter-spacing: 0.2px;
75
81
  }
76
82
 
77
83
  .dialog__header-actions {
@@ -96,16 +102,17 @@ import{i as o}from"../index-cd2f9c12.esm.js";const e=o`
96
102
  padding: 1.25rem;
97
103
  overflow: auto;
98
104
  -webkit-overflow-scrolling: touch;
99
- border: 1px solid #E5E9EB;
105
+ border: 1px solid #e5e9eb;
106
+ border-radius: 4px 4px 0px 0px;
100
107
  }
101
108
 
102
109
  .dialog__footer {
103
110
  flex: 0 0 auto;
104
111
  text-align: right;
105
112
  padding: 12px 24px;
106
- background-color: #FAFAFA;
113
+ background-color: #fafafa;
107
114
  border-radius: 0 0 4px 4px;
108
- border: 1px solid #E5E9EB;
115
+ border: 1px solid #e5e9eb;
109
116
  }
110
117
 
111
118
  .dialog__footer ::slotted(nile-button:not(:first-of-type)) {
@@ -70,18 +70,24 @@ export const styles = css `
70
70
  .dialog__header {
71
71
  flex: 0 0 auto;
72
72
  display: flex;
73
- padding: 24px 24px 24px 24px;
74
- background-color: #FAFAFA;
73
+ padding: 12px 24px;
74
+ background-color: #fafafa;
75
75
  border-radius: 4px 4px 0 0;
76
- border: 1px solid #E5E9EB;
76
+ border: 1px solid #e5e9eb;
77
77
  }
78
78
 
79
79
  .dialog__title {
80
+ display: flex;
80
81
  flex: 1 1 auto;
81
- font: inherit;
82
- font-size: 1.25rem;
83
- line-height: 1.4;
82
+ align-items: center;
84
83
  margin: 0;
84
+ color: #000;
85
+ font-family: Colfax-regular;
86
+ font-size: 16px;
87
+ font-style: normal;
88
+ font-weight: 400;
89
+ line-height: 16px;
90
+ letter-spacing: 0.2px;
85
91
  }
86
92
 
87
93
  .dialog__header-actions {
@@ -106,16 +112,17 @@ export const styles = css `
106
112
  padding: 1.25rem;
107
113
  overflow: auto;
108
114
  -webkit-overflow-scrolling: touch;
109
- border: 1px solid #E5E9EB;
115
+ border: 1px solid #e5e9eb;
116
+ border-radius: 4px 4px 0px 0px;
110
117
  }
111
118
 
112
119
  .dialog__footer {
113
120
  flex: 0 0 auto;
114
121
  text-align: right;
115
122
  padding: 12px 24px;
116
- background-color: #FAFAFA;
123
+ background-color: #fafafa;
117
124
  border-radius: 0 0 4px 4px;
118
- border: 1px solid #E5E9EB;
125
+ border: 1px solid #e5e9eb;
119
126
  }
120
127
 
121
128
  .dialog__footer ::slotted(nile-button:not(:first-of-type)) {
@@ -1 +1 @@
1
- {"version":3,"file":"nile-dialog.css.js","sourceRoot":"","sources":["../../../src/nile-dialog/nile-dialog.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoIxB,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 * Modal CSS\n */\nexport const styles = css`\n :host {\n --width: 31rem;\n --header-spacing: 1.25rem;\n --body-spacing: 1.25rem;\n --footer-spacing: 1.25rem;\n\n display: contents;\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n .dialog {\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 800;\n }\n\n .dialog__panel {\n display: flex;\n flex-direction: column;\n z-index: 2;\n width: var(--width);\n max-width: calc(100% - 2.25rem);\n max-height: calc(100% - 2.25rem);\n background-color: hsl(0, 0%, 100%);\n border-radius: 4px;\n box-shadow: 0 4px 16px rgb(0 0 0 / 24%);\n }\n\n .dialog__panel:focus {\n outline: none;\n }\n\n @media screen and (max-width: 420px) {\n .dialog__panel {\n max-height: 80vh;\n }\n }\n\n .dialog--open .dialog__panel {\n display: flex;\n opacity: 1;\n }\n\n .dialog__header {\n flex: 0 0 auto;\n display: flex;\n padding: 24px 24px 24px 24px;\n background-color: #FAFAFA;\n border-radius: 4px 4px 0 0;\n border: 1px solid #E5E9EB;\n }\n\n .dialog__title {\n flex: 1 1 auto;\n font: inherit;\n font-size: 1.25rem;\n line-height: 1.4;\n margin: 0;\n }\n\n .dialog__header-actions {\n flex-shrink: 0;\n display: flex;\n flex-wrap: wrap;\n justify-content: end;\n gap: 24px;\n }\n\n .dialog__header-actions nile-icon-button,\n .dialog__header-actions ::slotted(nile-icon-button) {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: 1rem;\n }\n\n .dialog__body {\n flex: 1 1 auto;\n display: block;\n padding: 1.25rem;\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n border: 1px solid #E5E9EB;\n }\n\n .dialog__footer {\n flex: 0 0 auto;\n text-align: right;\n padding: 12px 24px;\n background-color: #FAFAFA;\n border-radius: 0 0 4px 4px;\n border: 1px solid #E5E9EB;\n }\n\n .dialog__footer ::slotted(nile-button:not(:first-of-type)) {\n margin-inline-start: 0.5rem;\n }\n\n .dialog:not(.dialog--has-footer) .dialog__footer {\n display: none;\n }\n\n .dialog__overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: hsl(0 0% 0% / 43%);\n }\n\n @media (forced-colors: active) {\n .dialog__panel {\n border: solid 1px hsl(240, 5.9%, 11%);\n }\n }\n`;\n\nexport default [styles];\n"]}
1
+ {"version":3,"file":"nile-dialog.css.js","sourceRoot":"","sources":["../../../src/nile-dialog/nile-dialog.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2IxB,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 * Modal CSS\n */\nexport const styles = css`\n :host {\n --width: 31rem;\n --header-spacing: 1.25rem;\n --body-spacing: 1.25rem;\n --footer-spacing: 1.25rem;\n\n display: contents;\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n .dialog {\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 800;\n }\n\n .dialog__panel {\n display: flex;\n flex-direction: column;\n z-index: 2;\n width: var(--width);\n max-width: calc(100% - 2.25rem);\n max-height: calc(100% - 2.25rem);\n background-color: hsl(0, 0%, 100%);\n border-radius: 4px;\n box-shadow: 0 4px 16px rgb(0 0 0 / 24%);\n }\n\n .dialog__panel:focus {\n outline: none;\n }\n\n @media screen and (max-width: 420px) {\n .dialog__panel {\n max-height: 80vh;\n }\n }\n\n .dialog--open .dialog__panel {\n display: flex;\n opacity: 1;\n }\n\n .dialog__header {\n flex: 0 0 auto;\n display: flex;\n padding: 12px 24px;\n background-color: #fafafa;\n border-radius: 4px 4px 0 0;\n border: 1px solid #e5e9eb;\n }\n\n .dialog__title {\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n margin: 0;\n color: #000;\n font-family: Colfax-regular;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px;\n letter-spacing: 0.2px;\n }\n\n .dialog__header-actions {\n flex-shrink: 0;\n display: flex;\n flex-wrap: wrap;\n justify-content: end;\n gap: 24px;\n }\n\n .dialog__header-actions nile-icon-button,\n .dialog__header-actions ::slotted(nile-icon-button) {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: 1rem;\n }\n\n .dialog__body {\n flex: 1 1 auto;\n display: block;\n padding: 1.25rem;\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n border: 1px solid #e5e9eb;\n border-radius: 4px 4px 0px 0px;\n }\n\n .dialog__footer {\n flex: 0 0 auto;\n text-align: right;\n padding: 12px 24px;\n background-color: #fafafa;\n border-radius: 0 0 4px 4px;\n border: 1px solid #e5e9eb;\n }\n\n .dialog__footer ::slotted(nile-button:not(:first-of-type)) {\n margin-inline-start: 0.5rem;\n }\n\n .dialog:not(.dialog--has-footer) .dialog__footer {\n display: none;\n }\n\n .dialog__overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: hsl(0 0% 0% / 43%);\n }\n\n @media (forced-colors: active) {\n .dialog__panel {\n border: solid 1px hsl(240, 5.9%, 11%);\n }\n }\n`;\n\nexport default [styles];\n"]}