@kyndryl-design-system/shidoka-applications 1.1.21 → 1.2.0

package/components/reusable/modal/modal.scss.js

@@ -0,0 +1,195 @@
+import'./../../../external/@lit/reactive-element/reactive-element.js';import'./../../../external/lit-html/lit-html.js';import'./../../../external/lit-element/lit-element.js';import{css as i}from'./../../../external/@lit/reactive-element/css-tag.js';var e=i`*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:root {
+  --kd-current-breakpoint: sm;
+}
+@media (min-width: 42rem) {
+  :root {
+    --kd-current-breakpoint: md;
+  }
+}
+@media (min-width: 74rem) {
+  :root {
+    --kd-current-breakpoint: lg;
+  }
+}
+@media (min-width: 82rem) {
+  :root {
+    --kd-current-breakpoint: xl;
+  }
+}
+@media (min-width: 99rem) {
+  :root {
+    --kd-current-breakpoint: max;
+  }
+}
+
+dialog {
+  padding: 32px;
+  color: inherit;
+  background: var(--kd-color-background-ui-default);
+  border-radius: 8px;
+  border: 1px solid var(--kd-color-border-light);
+  box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.12);
+  min-width: 288px;
+  max-width: calc(100% - 32px);
+  max-height: calc(100% - 32px);
+}
+dialog[open] {
+  animation: dialog-in 250ms ease-out forwards;
+}
+dialog::backdrop {
+  background: none;
+}
+dialog.size--md {
+  width: 384px;
+}
+dialog.size--lg {
+  width: 711px;
+}
+
+button {
+  appearance: none;
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  padding: 0;
+  border-radius: 4px;
+  outline: 2px solid transparent;
+  transition: outline-color 150ms ease-out, color 150ms ease-out;
+}
+button:focus {
+  outline-color: var(--kd-color-border-focus);
+}
+button:hover {
+  color: var(--kd-color-text-link-hover);
+}
+button:active {
+  color: var(--kd-color-text-pressed);
+}
+
+header {
+  margin-bottom: 32px;
+  margin-right: 16px;
+}
+
+.close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+}
+.close kd-icon {
+  display: block;
+}
+
+.label {
+  font-family: var(--kd-font-family-secondary);
+  font-size: var(--kd-font-size-utility-3-sm);
+  line-height: var(--kd-line-height-utility-3-sm);
+  font-weight: var(--kd-font-weight-regular);
+  letter-spacing: var(--kd-letter-spacing-5);
+  color: var(--kd-color-text-placeholder);
+}
+@media (min-width: 42rem) {
+  .label {
+    font-size: var(--kd-font-size-utility-3-md);
+    line-height: var(--kd-line-height-utility-3-md);
+  }
+}
+@media (min-width: 74rem) {
+  .label {
+    font-size: var(--kd-font-size-utility-3-lg);
+    line-height: var(--kd-line-height-utility-3-lg);
+  }
+}
+@media (min-width: 82rem) {
+  .label {
+    font-size: var(--kd-font-size-utility-3-xlg);
+    line-height: var(--kd-line-height-utility-3-xlg);
+  }
+}
+@media (min-width: 99rem) {
+  .label {
+    font-size: var(--kd-font-size-utility-3-max);
+    line-height: var(--kd-line-height-utility-3-max);
+  }
+}
+
+h1 {
+  font-family: var(--kd-font-family-primary);
+  font-size: var(--kd-font-size-body-1-sm);
+  line-height: var(--kd-line-height-body-1-sm);
+  font-weight: var(--kd-font-weight-regular);
+  letter-spacing: var(--kd-letter-spacing-4);
+  margin: 0;
+  order: 1;
+}
+@media (min-width: 42rem) {
+  h1 {
+    font-size: var(--kd-font-size-body-1-md);
+    line-height: var(--kd-line-height-body-1-md);
+  }
+}
+@media (min-width: 74rem) {
+  h1 {
+    font-size: var(--kd-font-size-body-1-lg);
+    line-height: var(--kd-line-height-body-1-lg);
+  }
+}
+@media (min-width: 82rem) {
+  h1 {
+    font-size: var(--kd-font-size-body-1-xlg);
+    line-height: var(--kd-line-height-body-1-xlg);
+  }
+}
+@media (min-width: 99rem) {
+  h1 {
+    font-size: var(--kd-font-size-body-1-max);
+    line-height: var(--kd-line-height-body-1-max);
+  }
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-top: 32px;
+}
+@media (max-width: 42rem) {
+  .actions kd-button {
+    width: 100%;
+    flex-grow: 1;
+  }
+}
+
+.custom-actions {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+@keyframes dialog-in {
+  0% {
+    opacity: 0;
+    transform: scale(0);
+    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0);
+  }
+  75% {
+    transform: scale(1.1);
+    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.4);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.4);
+  }
+}`;export{e as default};
+//# sourceMappingURL=modal.scss.js.map

package/components/reusable/modal/modal.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/components/reusable/overflowMenu/overflowMenuItem.scss.js

@@ -5,7 +5,27 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
 }
 
 :root {
-  --kd-grid-max-width: 99rem;
+  --kd-current-breakpoint: sm;
+}
+@media (min-width: 42rem) {
+  :root {
+    --kd-current-breakpoint: md;
+  }
+}
+@media (min-width: 74rem) {
+  :root {
+    --kd-current-breakpoint: lg;
+  }
+}
+@media (min-width: 82rem) {
+  :root {
+    --kd-current-breakpoint: xl;
+  }
+}
+@media (min-width: 99rem) {
+  :root {
+    --kd-current-breakpoint: max;
+  }
 }
 
 :host {

package/components/reusable/overflowMenu/overflowMenuItem.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"overflowMenuItem.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"overflowMenuItem.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/components/reusable/pagination/pagination-items-range.scss.js

@@ -1,11 +1,31 @@
-import'./../../../external/@lit/reactive-element/reactive-element.js';import'./../../../external/lit-html/lit-html.js';import'./../../../external/lit-element/lit-element.js';import{css as e}from'./../../../external/@lit/reactive-element/css-tag.js';var i=e`*,
+import'./../../../external/@lit/reactive-element/reactive-element.js';import'./../../../external/lit-html/lit-html.js';import'./../../../external/lit-element/lit-element.js';import{css as e}from'./../../../external/@lit/reactive-element/css-tag.js';var t=e`*,
 *::before,
 *::after {
   box-sizing: border-box;
 }
 
 :root {
-  --kd-grid-max-width: 99rem;
+  --kd-current-breakpoint: sm;
+}
+@media (min-width: 42rem) {
+  :root {
+    --kd-current-breakpoint: md;
+  }
+}
+@media (min-width: 74rem) {
+  :root {
+    --kd-current-breakpoint: lg;
+  }
+}
+@media (min-width: 82rem) {
+  :root {
+    --kd-current-breakpoint: xl;
+  }
+}
+@media (min-width: 99rem) {
+  :root {
+    --kd-current-breakpoint: max;
+  }
 }
 
 :host {
@@ -40,5 +60,5 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
     font-size: var(--kd-font-size-body-2-max);
     line-height: var(--kd-line-height-body-2-max);
   }
-}`;export{i as default};
+}`;export{t as default};
 //# sourceMappingURL=pagination-items-range.scss.js.map

package/components/reusable/pagination/pagination-items-range.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination-items-range.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"pagination-items-range.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/components/reusable/pagination/pagination-navigation-buttons.scss.js

@@ -1,11 +1,31 @@
-import'./../../../external/@lit/reactive-element/reactive-element.js';import'./../../../external/lit-html/lit-html.js';import'./../../../external/lit-element/lit-element.js';import{css as e}from'./../../../external/@lit/reactive-element/css-tag.js';var i=e`*,
+import'./../../../external/@lit/reactive-element/reactive-element.js';import'./../../../external/lit-html/lit-html.js';import'./../../../external/lit-element/lit-element.js';import{css as e}from'./../../../external/@lit/reactive-element/css-tag.js';var t=e`*,
 *::before,
 *::after {
   box-sizing: border-box;
 }
 
 :root {
-  --kd-grid-max-width: 99rem;
+  --kd-current-breakpoint: sm;
+}
+@media (min-width: 42rem) {
+  :root {
+    --kd-current-breakpoint: md;
+  }
+}
+@media (min-width: 74rem) {
+  :root {
+    --kd-current-breakpoint: lg;
+  }
+}
+@media (min-width: 82rem) {
+  :root {
+    --kd-current-breakpoint: xl;
+  }
+}
+@media (min-width: 99rem) {
+  :root {
+    --kd-current-breakpoint: max;
+  }
 }
 
 :host {
@@ -40,5 +60,5 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
     font-size: var(--kd-font-size-body-2-max);
     line-height: var(--kd-line-height-body-2-max);
   }
-}`;export{i as default};
+}`;export{t as default};
 //# sourceMappingURL=pagination-navigation-buttons.scss.js.map

package/components/reusable/pagination/pagination-navigation-buttons.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination-navigation-buttons.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"pagination-navigation-buttons.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/components/reusable/pagination/pagination-page-size-dropdown.scss.js

@@ -1,11 +1,31 @@
-import'./../../../external/@lit/reactive-element/reactive-element.js';import'./../../../external/lit-html/lit-html.js';import'./../../../external/lit-element/lit-element.js';import{css as e}from'./../../../external/@lit/reactive-element/css-tag.js';var i=e`*,
+import'./../../../external/@lit/reactive-element/reactive-element.js';import'./../../../external/lit-html/lit-html.js';import'./../../../external/lit-element/lit-element.js';import{css as e}from'./../../../external/@lit/reactive-element/css-tag.js';var t=e`*,
 *::before,
 *::after {
   box-sizing: border-box;
 }
 
 :root {
-  --kd-grid-max-width: 99rem;
+  --kd-current-breakpoint: sm;
+}
+@media (min-width: 42rem) {
+  :root {
+    --kd-current-breakpoint: md;
+  }
+}
+@media (min-width: 74rem) {
+  :root {
+    --kd-current-breakpoint: lg;
+  }
+}
+@media (min-width: 82rem) {
+  :root {
+    --kd-current-breakpoint: xl;
+  }
+}
+@media (min-width: 99rem) {
+  :root {
+    --kd-current-breakpoint: max;
+  }
 }
 
 :host {
@@ -40,5 +60,5 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
     font-size: var(--kd-font-size-body-2-max);
     line-height: var(--kd-line-height-body-2-max);
   }
-}`;export{i as default};
+}`;export{t as default};
 //# sourceMappingURL=pagination-page-size-dropdown.scss.js.map

package/components/reusable/pagination/pagination-page-size-dropdown.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination-page-size-dropdown.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"pagination-page-size-dropdown.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/components/reusable/pagination/pagination.scss.js

@@ -5,7 +5,27 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
 }
 
 :root {
-  --kd-grid-max-width: 99rem;
+  --kd-current-breakpoint: sm;
+}
+@media (min-width: 42rem) {
+  :root {
+    --kd-current-breakpoint: md;
+  }
+}
+@media (min-width: 74rem) {
+  :root {
+    --kd-current-breakpoint: lg;
+  }
+}
+@media (min-width: 82rem) {
+  :root {
+    --kd-current-breakpoint: xl;
+  }
+}
+@media (min-width: 99rem) {
+  :root {
+    --kd-current-breakpoint: max;
+  }
 }
 
 :host {

package/components/reusable/pagination/pagination.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"pagination.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/components/reusable/radioButton/radioButtonGroup.scss.js

@@ -5,7 +5,27 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
 }
 
 :root {
-  --kd-grid-max-width: 99rem;
+  --kd-current-breakpoint: sm;
+}
+@media (min-width: 42rem) {
+  :root {
+    --kd-current-breakpoint: md;
+  }
+}
+@media (min-width: 74rem) {
+  :root {
+    --kd-current-breakpoint: lg;
+  }
+}
+@media (min-width: 82rem) {
+  :root {
+    --kd-current-breakpoint: xl;
+  }
+}
+@media (min-width: 99rem) {
+  :root {
+    --kd-current-breakpoint: max;
+  }
 }
 
 :host {

package/components/reusable/radioButton/radioButtonGroup.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"radioButtonGroup.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"radioButtonGroup.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/components/reusable/table/table-cell.scss.js

@@ -5,7 +5,27 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
 }
 
 :root {
-  --kd-grid-max-width: 99rem;
+  --kd-current-breakpoint: sm;
+}
+@media (min-width: 42rem) {
+  :root {
+    --kd-current-breakpoint: md;
+  }
+}
+@media (min-width: 74rem) {
+  :root {
+    --kd-current-breakpoint: lg;
+  }
+}
+@media (min-width: 82rem) {
+  :root {
+    --kd-current-breakpoint: xl;
+  }
+}
+@media (min-width: 99rem) {
+  :root {
+    --kd-current-breakpoint: max;
+  }
 }
 
 :host {

package/components/reusable/table/table-cell.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-cell.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"table-cell.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/components/reusable/table/table-header.scss.js

@@ -5,7 +5,27 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
 }
 
 :root {
-  --kd-grid-max-width: 99rem;
+  --kd-current-breakpoint: sm;
+}
+@media (min-width: 42rem) {
+  :root {
+    --kd-current-breakpoint: md;
+  }
+}
+@media (min-width: 74rem) {
+  :root {
+    --kd-current-breakpoint: lg;
+  }
+}
+@media (min-width: 82rem) {
+  :root {
+    --kd-current-breakpoint: xl;
+  }
+}
+@media (min-width: 99rem) {
+  :root {
+    --kd-current-breakpoint: max;
+  }
 }
 
 :host {

package/components/reusable/table/table-header.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-header.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"table-header.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/components/reusable/table/table-toolbar.scss.js

@@ -5,7 +5,27 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
 }
 
 :root {
-  --kd-grid-max-width: 99rem;
+  --kd-current-breakpoint: sm;
+}
+@media (min-width: 42rem) {
+  :root {
+    --kd-current-breakpoint: md;
+  }
+}
+@media (min-width: 74rem) {
+  :root {
+    --kd-current-breakpoint: lg;
+  }
+}
+@media (min-width: 82rem) {
+  :root {
+    --kd-current-breakpoint: xl;
+  }
+}
+@media (min-width: 99rem) {
+  :root {
+    --kd-current-breakpoint: max;
+  }
 }
 
 :host {

package/components/reusable/table/table-toolbar.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-toolbar.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"table-toolbar.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/components/reusable/textArea/textArea.scss.js

@@ -5,7 +5,27 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
 }
 
 :root {
-  --kd-grid-max-width: 99rem;
+  --kd-current-breakpoint: sm;
+}
+@media (min-width: 42rem) {
+  :root {
+    --kd-current-breakpoint: md;
+  }
+}
+@media (min-width: 74rem) {
+  :root {
+    --kd-current-breakpoint: lg;
+  }
+}
+@media (min-width: 82rem) {
+  :root {
+    --kd-current-breakpoint: xl;
+  }
+}
+@media (min-width: 99rem) {
+  :root {
+    --kd-current-breakpoint: max;
+  }
 }
 
 :host {

package/components/reusable/textArea/textArea.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"textArea.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"textArea.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/components/reusable/textInput/textInput.scss.js

@@ -5,7 +5,27 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
 }
 
 :root {
-  --kd-grid-max-width: 99rem;
+  --kd-current-breakpoint: sm;
+}
+@media (min-width: 42rem) {
+  :root {
+    --kd-current-breakpoint: md;
+  }
+}
+@media (min-width: 74rem) {
+  :root {
+    --kd-current-breakpoint: lg;
+  }
+}
+@media (min-width: 82rem) {
+  :root {
+    --kd-current-breakpoint: xl;
+  }
+}
+@media (min-width: 99rem) {
+  :root {
+    --kd-current-breakpoint: max;
+  }
 }
 
 :host {

package/components/reusable/textInput/textInput.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"textInput.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"textInput.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/components/reusable/timepicker/timepicker.scss.js

@@ -5,7 +5,27 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
 }
 
 :root {
-  --kd-grid-max-width: 99rem;
+  --kd-current-breakpoint: sm;
+}
+@media (min-width: 42rem) {
+  :root {
+    --kd-current-breakpoint: md;
+  }
+}
+@media (min-width: 74rem) {
+  :root {
+    --kd-current-breakpoint: lg;
+  }
+}
+@media (min-width: 82rem) {
+  :root {
+    --kd-current-breakpoint: xl;
+  }
+}
+@media (min-width: 99rem) {
+  :root {
+    --kd-current-breakpoint: max;
+  }
 }
 
 :host {

package/components/reusable/timepicker/timepicker.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"timepicker.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"timepicker.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}