@westpac/ui 0.42.2 → 0.43.0

package/dist/css/westpac-ui.min.css

@@ -2964,10 +2964,6 @@ body {
   --tw-shadow: 0 0 #0000 !important;
   --tw-shadow-colored: 0 0 #0000 !important;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
-  outline-style: solid;
-  outline-width: 2px;
-  outline-offset: 3px;
-  outline-color: rgb(var(--colors-focus));
 }
 .date-picker .duet-date__toggle {
   touch-action: manipulation;
@@ -3003,17 +2999,9 @@ body {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  outline-style: solid;
-  outline-width: 2px;
-  outline-offset: 3px;
-  outline-color: rgb(var(--colors-focus));
 }
 .date-picker .duet-date__select select:focus + .duet-date__select-label {
   border-radius: 0.1875rem;
-  outline-style: solid;
-  outline-width: 2px;
-  outline-offset: 3px;
-  outline-color: rgb(var(--colors-focus));
 }
 .date-picker .duet-date__toggle-icon {
   height: 18px;
@@ -3124,20 +3112,10 @@ body {
   color: rgba(var(--colors-primary), var(--tw-text-opacity, 1));
   outline-offset: 0px !important;
 }
-.date-picker .duet-date__prev:focus, .date-picker .duet-date__next:focus {
-  outline-style: solid;
-  outline-width: 2px;
-  outline-offset: 3px;
-  outline-color: rgb(var(--colors-focus));
-}
 .date-picker .duet-date-dialog-select select:focus + .duet-date-dialog-select-label {
   --tw-shadow: 0 0 #0000 !important;
   --tw-shadow-colored: 0 0 #0000 !important;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
-  outline-style: solid;
-  outline-width: 2px;
-  outline-offset: 3px;
-  outline-color: rgb(var(--colors-focus));
   outline-offset: 0 !important;
 }
 @media (hover: hover) and (pointer: fine) {
@@ -3157,19 +3135,11 @@ body {
   --tw-shadow: 0 0 #0000 !important;
   --tw-shadow-colored: 0 0 #0000 !important;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
-  outline-style: solid;
-  outline-width: 2px;
-  outline-offset: 3px;
-  outline-color: rgb(var(--colors-focus));
 }
 .date-picker .duet-date__day:active {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  outline-style: solid;
-  outline-width: 2px;
-  outline-offset: 3px;
-  outline-color: rgb(var(--colors-focus));
 }
 .date-picker .duet-date__day.is-today {
   border-width: 1px !important;
@@ -3217,13 +3187,59 @@ body {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
 }
 .date-picker .duet-date__close:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--colors-light), var(--tw-bg-opacity, 1));
+  outline-offset: 0 !important;
+}
+.date-picker.date-picker-focused .duet-date__input:focus {
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 3px;
+  outline-color: rgb(var(--colors-focus));
+}
+.date-picker.date-picker-focused .duet-date__toggle:focus {
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 3px;
+  outline-color: rgb(var(--colors-focus));
+}
+.date-picker.date-picker-focused .duet-date__select select:focus + .duet-date__select-label {
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 3px;
+  outline-color: rgb(var(--colors-focus));
+}
+.date-picker.date-picker-focused .duet-date__prev:focus, .date-picker.date-picker-focused .duet-date__next:focus {
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 3px;
+  outline-color: rgb(var(--colors-focus));
+}
+.date-picker.date-picker-focused .duet-date-dialog-select select:focus + .duet-date-dialog-select-label {
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 3px;
+  outline-color: rgb(var(--colors-focus));
+}
+.date-picker.date-picker-focused .duet-date__day:focus {
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 3px;
+  outline-color: rgb(var(--colors-focus));
+}
+.date-picker.date-picker-focused .duet-date__day:active {
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 3px;
+  outline-color: rgb(var(--colors-focus));
+}
+.date-picker.date-picker-focused .duet-date__close:focus {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--colors-light), var(--tw-bg-opacity, 1));
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 3px;
   outline-color: rgb(var(--colors-focus));
-  outline-offset: 0 !important;
 }
 .sr-only {
   position: absolute;
@@ -3723,6 +3739,10 @@ body {
   width: 64px;
   height: 64px;
 }
+.size-\[65px\] {
+  width: 65px;
+  height: 65px;
+}
 .size-fit {
   width: -moz-fit-content;
   width: fit-content;
@@ -3753,6 +3773,9 @@ body {
 .h-5 {
   height: 1.875rem;
 }
+.h-5\.5 {
+  height: 2.0625rem;
+}
 .h-6 {
   height: 2.25rem;
 }
@@ -4098,6 +4121,9 @@ body {
 .flex-none {
   flex: none;
 }
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -6597,6 +6623,56 @@ body {
     --tw-border-opacity: 1;
     border-color: rgb(196 0 0 / var(--tw-border-opacity, 1));
   }
+  .xsl\:date-picker-focused.date-picker .duet-date__input:focus {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .xsl\:date-picker-focused.date-picker .duet-date__toggle:focus {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .xsl\:date-picker-focused.date-picker .duet-date__select select:focus + .duet-date__select-label {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .xsl\:date-picker-focused.date-picker .duet-date__prev:focus,.xsl\:date-picker-focused .date-picker .duet-date__next:focus {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .xsl\:date-picker-focused.date-picker .duet-date-dialog-select select:focus + .duet-date-dialog-select-label {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .xsl\:date-picker-focused.date-picker .duet-date__day:focus {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .xsl\:date-picker-focused.date-picker .duet-date__day:active {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .xsl\:date-picker-focused.date-picker .duet-date__close:focus {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--colors-light), var(--tw-bg-opacity, 1));
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
 }
 @media (min-width: 768px) {
   .sm\:typography-body-1 {
@@ -6765,6 +6841,56 @@ body {
     --tw-border-opacity: 1;
     border-color: rgb(196 0 0 / var(--tw-border-opacity, 1));
   }
+  .sm\:date-picker-focused.date-picker .duet-date__input:focus {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .sm\:date-picker-focused.date-picker .duet-date__toggle:focus {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .sm\:date-picker-focused.date-picker .duet-date__select select:focus + .duet-date__select-label {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .sm\:date-picker-focused.date-picker .duet-date__prev:focus,.sm\:date-picker-focused .date-picker .duet-date__next:focus {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .sm\:date-picker-focused.date-picker .duet-date-dialog-select select:focus + .duet-date-dialog-select-label {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .sm\:date-picker-focused.date-picker .duet-date__day:focus {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .sm\:date-picker-focused.date-picker .duet-date__day:active {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .sm\:date-picker-focused.date-picker .duet-date__close:focus {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--colors-light), var(--tw-bg-opacity, 1));
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
 }
 @media (min-width: 992px) {
   .md\:typography-body-1 {
@@ -6933,6 +7059,56 @@ body {
     --tw-border-opacity: 1;
     border-color: rgb(196 0 0 / var(--tw-border-opacity, 1));
   }
+  .md\:date-picker-focused.date-picker .duet-date__input:focus {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .md\:date-picker-focused.date-picker .duet-date__toggle:focus {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .md\:date-picker-focused.date-picker .duet-date__select select:focus + .duet-date__select-label {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .md\:date-picker-focused.date-picker .duet-date__prev:focus,.md\:date-picker-focused .date-picker .duet-date__next:focus {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .md\:date-picker-focused.date-picker .duet-date-dialog-select select:focus + .duet-date-dialog-select-label {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .md\:date-picker-focused.date-picker .duet-date__day:focus {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .md\:date-picker-focused.date-picker .duet-date__day:active {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .md\:date-picker-focused.date-picker .duet-date__close:focus {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--colors-light), var(--tw-bg-opacity, 1));
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
 }
 @media (min-width: 1200px) {
   .lg\:typography-body-1 {
@@ -7101,6 +7277,56 @@ body {
     --tw-border-opacity: 1;
     border-color: rgb(196 0 0 / var(--tw-border-opacity, 1));
   }
+  .lg\:date-picker-focused.date-picker .duet-date__input:focus {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .lg\:date-picker-focused.date-picker .duet-date__toggle:focus {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .lg\:date-picker-focused.date-picker .duet-date__select select:focus + .duet-date__select-label {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .lg\:date-picker-focused.date-picker .duet-date__prev:focus,.lg\:date-picker-focused .date-picker .duet-date__next:focus {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .lg\:date-picker-focused.date-picker .duet-date-dialog-select select:focus + .duet-date-dialog-select-label {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .lg\:date-picker-focused.date-picker .duet-date__day:focus {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .lg\:date-picker-focused.date-picker .duet-date__day:active {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .lg\:date-picker-focused.date-picker .duet-date__close:focus {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--colors-light), var(--tw-bg-opacity, 1));
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
 }
 @media (min-width: 1584px) {
   .xl\:typography-body-1 {
@@ -7269,6 +7495,56 @@ body {
     --tw-border-opacity: 1;
     border-color: rgb(196 0 0 / var(--tw-border-opacity, 1));
   }
+  .xl\:date-picker-focused.date-picker .duet-date__input:focus {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .xl\:date-picker-focused.date-picker .duet-date__toggle:focus {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .xl\:date-picker-focused.date-picker .duet-date__select select:focus + .duet-date__select-label {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .xl\:date-picker-focused.date-picker .duet-date__prev:focus,.xl\:date-picker-focused .date-picker .duet-date__next:focus {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .xl\:date-picker-focused.date-picker .duet-date-dialog-select select:focus + .duet-date-dialog-select-label {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .xl\:date-picker-focused.date-picker .duet-date__day:focus {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .xl\:date-picker-focused.date-picker .duet-date__day:active {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
+  .xl\:date-picker-focused.date-picker .duet-date__close:focus {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--colors-light), var(--tw-bg-opacity, 1));
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 3px;
+    outline-color: rgb(var(--colors-focus));
+  }
 }
 .placeholder\:font-light::-moz-placeholder {
   font-weight: 300;
@@ -7946,6 +8222,10 @@ body {
     --tw-text-opacity: 1;
     color: rgba(var(--colors-primary), var(--tw-text-opacity, 1));
   }
+  .group:hover .group-hover\:text-white {
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+  }
 }
 .group.input-group-after .group-\[\.input-group-after\]\:rounded-r-none {
   border-top-right-radius: 0px;
@@ -7995,6 +8275,10 @@ body {
 .group.input-group-inset-before .group-\[\.input-group-inset-before\]\:pl-9 {
   padding-left: 3.375rem;
 }
+.group.is-focused .group-\[\.is-focused\]\:text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
 [data-theme="rams"] .active-theme-rams\:border-b-pop {
   --tw-border-opacity: 1;
   border-bottom-color: rgba(var(--colors-pop), var(--tw-border-opacity, 1));
@@ -8178,7 +8462,7 @@ body {
   .max-sm\:min-w-7 {
     min-width: 2.625rem;
   }
-  .max-sm\:translate-x-\[-50\%\] {
+  .max-sm\:-translate-x-1\/2 {
     --tw-translate-x: -50%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
@@ -9676,7 +9960,7 @@ body {
     .xsl\:max-sm\:z-0 {
       z-index: 0;
     }
-    .xsl\:max-sm\:translate-x-\[-50\%\] {
+    .xsl\:max-sm\:-translate-x-1\/2 {
       --tw-translate-x: -50%;
       transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
     }
@@ -11252,7 +11536,7 @@ body {
     .sm\:max-sm\:z-0 {
       z-index: 0;
     }
-    .sm\:max-sm\:translate-x-\[-50\%\] {
+    .sm\:max-sm\:-translate-x-1\/2 {
       --tw-translate-x: -50%;
       transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
     }
@@ -12874,7 +13158,7 @@ body {
     .md\:max-sm\:z-0 {
       z-index: 0;
     }
-    .md\:max-sm\:translate-x-\[-50\%\] {
+    .md\:max-sm\:-translate-x-1\/2 {
       --tw-translate-x: -50%;
       transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
     }
@@ -14474,7 +14758,7 @@ body {
     .lg\:max-sm\:z-0 {
       z-index: 0;
     }
-    .lg\:max-sm\:translate-x-\[-50\%\] {
+    .lg\:max-sm\:-translate-x-1\/2 {
       --tw-translate-x: -50%;
       transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
     }
@@ -16002,7 +16286,7 @@ body {
     .xl\:max-sm\:z-0 {
       z-index: 0;
     }
-    .xl\:max-sm\:translate-x-\[-50\%\] {
+    .xl\:max-sm\:-translate-x-1\/2 {
       --tw-translate-x: -50%;
       transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
     }

package/dist/tailwind/tailwind-plugin.js

@@ -8,7 +8,7 @@ import { generateDatePicker } from './utils/generate-date-picker-component.js';
 import { generateLinearLoader } from './utils/generate-linear-loader.js';
 import { createBrandFonts, createFontSizes, generateFontComponents, generateFormControlComponents } from './utils/index.js';
 export const WestpacUIKitBasePlugin = plugin.withOptions(function(options = {}) {
-    return ({ addComponents , addUtilities , addVariant , addBase , theme  })=>{
+    return ({ addComponents, addUtilities, addVariant, addBase, theme })=>{
         var _options_brandFonts;
         addBase({
             html: {
@@ -54,7 +54,7 @@ export const WestpacUIKitBasePlugin = plugin.withOptions(function(options = {})
             respectPrefix: true,
             respectImportant: true
         });
-        THEMES.forEach(({ name  })=>{
+        THEMES.forEach(({ name })=>{
             addVariant(`active-theme-${name.toLowerCase()}`, [
                 `[data-theme="${name.toLowerCase()}"] &`,
                 `.theme-${name.toLowerCase()} &`

package/dist/tailwind/tailwind-transformer.js

@@ -1,7 +1,6 @@
 import { withTV } from 'tailwind-variants/transformer';
 import { WestpacUIKitBasePlugin, WestpacUIKitThemesPlugin } from '@westpac/ui/tailwind';
-export const withGEL = (config)=>{
-    return withTV({
+export const withGEL = (config)=>withTV({
         ...config,
         safelist: [
             'date-picker',
@@ -18,4 +17,3 @@ export const withGEL = (config)=>{
             ] : []
         ]
     });
-};

package/dist/tailwind/utils/create-brand-fonts.js

@@ -1,12 +1,12 @@
 import { BRAND_FONTS } from '../constants/typography.js';
-export function createBrandFonts({ src ='' , brand =[
+export function createBrandFonts({ src = '', brand = [
     'bom',
     'bsa',
     'rams',
     'stg',
     'wbc',
     'wbg'
-] , display ='auto'  }) {
+], display = 'auto' }) {
     const trimSrc = src.replace(/\/$/, '');
     const brandList = Array.isArray(brand) ? brand : [
         brand

package/dist/tailwind/utils/generate-date-picker-component.d.ts

@@ -1,14 +1,14 @@
 export declare const generateDatePicker: () => {
     '.date-picker': {
         '.duet-date__input': {
-            '@apply text-lg focus:!border-borderDark focus:!shadow-none focus:focus-outline border border-borderDark border-solid rounded': {};
+            '@apply text-lg focus:!border-borderDark focus:!shadow-none border border-borderDark border-solid rounded': {};
         };
         '.duet-date__toggle': {
             '@apply shadow-none border-solid border-l !border-l-borderDark !bg-light touch-manipulation whitespace-nowrap transition hover:bg-white active:bg-white rounded-r': {};
-            '@apply focus:shadow-none focus:focus-outline': {};
+            '@apply focus:shadow-none': {};
         };
         '.duet-date__select select:focus + .duet-date__select-label': {
-            '@apply !focus-outline rounded': {};
+            '@apply rounded': {};
         };
         '.duet-date__toggle-icon': {
             '@apply w-[18px] h-[18px] bg-cover flex-auto': {};
@@ -93,15 +93,15 @@ export declare const generateDatePicker: () => {
             '@apply font-semibold': {};
         };
         '.duet-date__prev, .duet-date__next': {
-            '@apply bg-background focus:focus-outline !outline-offset-0 text-primary': {};
+            '@apply bg-background !outline-offset-0 text-primary': {};
         };
         '.duet-date-dialog-select select:focus + .duet-date-dialog-select-label': {
-            '@apply focus-outline !shadow-none': {};
+            '@apply !shadow-none': {};
             'outline-offset': string;
         };
         '.duet-date__day': {
             '@apply hover:!bg-primary/5 focus:!bg-white/0 focus:!text-text': {};
-            '@apply active:shadow active:focus-outline focus:focus-outline focus:!shadow-none !outline-offset-0': {};
+            '@apply active:shadow focus:!shadow-none !outline-offset-0': {};
             '&.is-today': {
                 '@apply !shadow-primary !text-text !bg-primary/5 !border !border-solid !border-primary': {};
             };
@@ -113,8 +113,31 @@ export declare const generateDatePicker: () => {
             };
         };
         '.duet-date__close:focus': {
-            '@apply bg-light focus-outline': {};
+            '@apply bg-light': {};
             'outline-offset': string;
         };
+        '&.date-picker-focused': {
+            '.duet-date__input': {
+                '@apply focus:focus-outline': {};
+            };
+            '.duet-date__toggle': {
+                '@apply focus:focus-outline': {};
+            };
+            '.duet-date__select select:focus + .duet-date__select-label': {
+                '@apply !focus-outline': {};
+            };
+            '.duet-date__prev, .duet-date__next': {
+                '@apply focus:focus-outline': {};
+            };
+            '.duet-date-dialog-select select:focus + .duet-date-dialog-select-label': {
+                '@apply focus-outline': {};
+            };
+            '.duet-date__day': {
+                '@apply active:focus-outline focus:focus-outline': {};
+            };
+            '.duet-date__close:focus': {
+                '@apply bg-light focus-outline': {};
+            };
+        };
     };
 };