@westpac/ui 0.10.0 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @westpac/ui
 
+## 0.12.0
+
+### Minor Changes
+
+- 3b27f18: fixed date-picker import issue in CRA based apps
+
+## 0.11.0
+
+### Minor Changes
+
+- d9eb910: Add individual component exports
+
 ## 0.10.0
 
 ### Minor Changes

package/dist/components/accordion/accordion.component.js

@@ -41,7 +41,7 @@ function Accordion({ className , rounded =true , look ='soft' , ...props }, ref)
             rounded
         })
     }), React.createElement("div", {
-        className: "mt-[-1px]"
+        className: "ml-[-1px] mt-[-1px]"
     }, [
         ...state.collection
     ].map((item)=>React.createElement(AccordionItem, {

package/dist/components/accordion/components/accordion-item/accordion-item.styles.js

@@ -12,7 +12,7 @@ export const styles = tv({
                 itemHeader: 'border-t border-border bg-light'
             },
             lego: {
-                itemHeader: 'border-l-[0.375rem] border-t border-border bg-light transition-colors'
+                itemHeader: 'border-l-[0.375rem] border-border bg-light shadow-[inset_0_1px_0_var(--tw-shadow-color)] !shadow-border transition-colors'
             }
         },
         isOpen: {
@@ -21,7 +21,7 @@ export const styles = tv({
             },
             false: {
                 base: '',
-                itemHeader: 'hover:bg-background'
+                itemHeader: 'background-transition hover:bg-background'
             }
         },
         isDisabled: {

package/dist/components/date-picker/date-picker.component.js

@@ -20,7 +20,7 @@ export function DatePicker({ disableWeekends , disableDaysOfWeek , disableDates
     const [initialized, setInitialized] = useState(false);
     useEffect(()=>{
         const initDatePicker = async ()=>{
-            const { defineCustomElements  } = await import('@duetds/date-picker/custom-element');
+            const { defineCustomElements  } = await import('@duetds/date-picker/custom-element/index.js');
             defineCustomElements(window);
             setInitialized(true);
         };

package/dist/components/tabs/components/tab/tab.styles.js

@@ -8,7 +8,7 @@ export const styles = tv({
         },
         selected: {
             true: 'bg-white',
-            false: 'hover:bg-background'
+            false: 'background-transition hover:bg-background'
         },
         orientation: {
             horizontal: '',

package/dist/css/westpac-ui.css

@@ -3865,6 +3865,10 @@ video {
   --tw-shadow: 0 5px 10px rgba(0,0,0,0.2);
   --tw-shadow-colored: 0 5px 10px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}.shadow-\[inset_0_1px_0_var\(--tw-shadow-color\)\] {
+  --tw-shadow: inset 0 1px 0 var(--tw-shadow-color);
+  --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }.shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -3877,6 +3881,9 @@ video {
   --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);
+}.\!shadow-border {
+  --tw-shadow-color: rgb(var(--colors-border)) !important;
+  --tw-shadow: var(--tw-shadow-colored) !important;
 }.\!shadow-primary {
   --tw-shadow-color: rgb(var(--colors-primary)) !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
@@ -3927,10 +3934,14 @@ video {
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
+}.duration-300 {
+  transition-duration: 300ms;
 }.duration-\[\.3s\] {
   transition-duration: .3s;
 }.duration-\[\.6s\] {
   transition-duration: .6s;
+}.ease-ease {
+  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
 }.\!focus-outline {
   outline-style: solid;
   outline-width: 2px;
@@ -3941,6 +3952,11 @@ video {
   outline-width: 2px;
   outline-offset: 3px;
   outline-color: rgb(var(--colors-focus));
+}.background-transition {
+  transition-property: background;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
 }.select-caret {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' style='color: rgb(89,87,103);'><path fill='currentColor' d='M0 0l7 8 7-8z'/></svg>");
 }.read-only\:form-control-disabled:-moz-read-only {
@@ -5275,8 +5291,6 @@ video {
     border-left-width: 0px;
   }.xsl\:border-l-\[0\.125rem\] {
     border-left-width: 0.125rem;
-  }.xsl\:border-l-\[0\.375rem\] {
-    border-left-width: 0.375rem;
   }.xsl\:border-l-\[6px\] {
     border-left-width: 6px;
   }.xsl\:border-r-0 {
@@ -5543,15 +5557,16 @@ video {
   }.xsl\:outline-none {
     outline: 2px solid transparent;
     outline-offset: 2px;
-  }.xsl\:transition-colors {
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
   }.xsl\:focus-outline {
     outline-style: solid;
     outline-width: 2px;
     outline-offset: 3px;
     outline-color: rgb(var(--colors-focus));
+  }.xsl\:background-transition {
+    transition-property: background;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
+    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
   }.xsl\:before\:block::before {
     content: var(--tw-content);
     display: block;
@@ -6118,8 +6133,6 @@ video {
     border-left-width: 0px;
   }.sm\:border-l-\[0\.125rem\] {
     border-left-width: 0.125rem;
-  }.sm\:border-l-\[0\.375rem\] {
-    border-left-width: 0.375rem;
   }.sm\:border-l-\[6px\] {
     border-left-width: 6px;
   }.sm\:border-r-0 {
@@ -6397,15 +6410,16 @@ video {
   }.sm\:outline-none {
     outline: 2px solid transparent;
     outline-offset: 2px;
-  }.sm\:transition-colors {
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
   }.sm\:focus-outline {
     outline-style: solid;
     outline-width: 2px;
     outline-offset: 3px;
     outline-color: rgb(var(--colors-focus));
+  }.sm\:background-transition {
+    transition-property: background;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
+    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
   }.sm\:before\:block::before {
     content: var(--tw-content);
     display: block;
@@ -6975,8 +6989,6 @@ video {
     border-left-width: 0px;
   }.md\:border-l-\[0\.125rem\] {
     border-left-width: 0.125rem;
-  }.md\:border-l-\[0\.375rem\] {
-    border-left-width: 0.375rem;
   }.md\:border-l-\[6px\] {
     border-left-width: 6px;
   }.md\:border-r-0 {
@@ -7244,15 +7256,16 @@ video {
   }.md\:outline-none {
     outline: 2px solid transparent;
     outline-offset: 2px;
-  }.md\:transition-colors {
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
   }.md\:focus-outline {
     outline-style: solid;
     outline-width: 2px;
     outline-offset: 3px;
     outline-color: rgb(var(--colors-focus));
+  }.md\:background-transition {
+    transition-property: background;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
+    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
   }.md\:before\:block::before {
     content: var(--tw-content);
     display: block;
@@ -7827,8 +7840,6 @@ video {
     border-left-width: 0px;
   }.lg\:border-l-\[0\.125rem\] {
     border-left-width: 0.125rem;
-  }.lg\:border-l-\[0\.375rem\] {
-    border-left-width: 0.375rem;
   }.lg\:border-l-\[6px\] {
     border-left-width: 6px;
   }.lg\:border-r-0 {
@@ -8096,15 +8107,16 @@ video {
   }.lg\:outline-none {
     outline: 2px solid transparent;
     outline-offset: 2px;
-  }.lg\:transition-colors {
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
   }.lg\:focus-outline {
     outline-style: solid;
     outline-width: 2px;
     outline-offset: 3px;
     outline-color: rgb(var(--colors-focus));
+  }.lg\:background-transition {
+    transition-property: background;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
+    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
   }.lg\:before\:block::before {
     content: var(--tw-content);
     display: block;
@@ -8665,8 +8677,6 @@ video {
     border-left-width: 0px;
   }.xl\:border-l-\[0\.125rem\] {
     border-left-width: 0.125rem;
-  }.xl\:border-l-\[0\.375rem\] {
-    border-left-width: 0.375rem;
   }.xl\:border-l-\[6px\] {
     border-left-width: 6px;
   }.xl\:border-r-0 {
@@ -8928,15 +8938,16 @@ video {
   }.xl\:outline-none {
     outline: 2px solid transparent;
     outline-offset: 2px;
-  }.xl\:transition-colors {
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
   }.xl\:focus-outline {
     outline-style: solid;
     outline-width: 2px;
     outline-offset: 3px;
     outline-color: rgb(var(--colors-focus));
+  }.xl\:background-transition {
+    transition-property: background;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
+    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
   }.xl\:before\:block::before {
     content: var(--tw-content);
     display: block;

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

@@ -3865,6 +3865,10 @@ video {
   --tw-shadow: 0 5px 10px rgba(0,0,0,0.2);
   --tw-shadow-colored: 0 5px 10px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}.shadow-\[inset_0_1px_0_var\(--tw-shadow-color\)\] {
+  --tw-shadow: inset 0 1px 0 var(--tw-shadow-color);
+  --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }.shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -3877,6 +3881,9 @@ video {
   --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);
+}.\!shadow-border {
+  --tw-shadow-color: rgb(var(--colors-border)) !important;
+  --tw-shadow: var(--tw-shadow-colored) !important;
 }.\!shadow-primary {
   --tw-shadow-color: rgb(var(--colors-primary)) !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
@@ -3927,10 +3934,14 @@ video {
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
+}.duration-300 {
+  transition-duration: 300ms;
 }.duration-\[\.3s\] {
   transition-duration: .3s;
 }.duration-\[\.6s\] {
   transition-duration: .6s;
+}.ease-ease {
+  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
 }.\!focus-outline {
   outline-style: solid;
   outline-width: 2px;
@@ -3941,6 +3952,11 @@ video {
   outline-width: 2px;
   outline-offset: 3px;
   outline-color: rgb(var(--colors-focus));
+}.background-transition {
+  transition-property: background;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
 }.select-caret {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' style='color: rgb(89,87,103);'><path fill='currentColor' d='M0 0l7 8 7-8z'/></svg>");
 }.read-only\:form-control-disabled:-moz-read-only {
@@ -5275,8 +5291,6 @@ video {
     border-left-width: 0px;
   }.xsl\:border-l-\[0\.125rem\] {
     border-left-width: 0.125rem;
-  }.xsl\:border-l-\[0\.375rem\] {
-    border-left-width: 0.375rem;
   }.xsl\:border-l-\[6px\] {
     border-left-width: 6px;
   }.xsl\:border-r-0 {
@@ -5543,15 +5557,16 @@ video {
   }.xsl\:outline-none {
     outline: 2px solid transparent;
     outline-offset: 2px;
-  }.xsl\:transition-colors {
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
   }.xsl\:focus-outline {
     outline-style: solid;
     outline-width: 2px;
     outline-offset: 3px;
     outline-color: rgb(var(--colors-focus));
+  }.xsl\:background-transition {
+    transition-property: background;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
+    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
   }.xsl\:before\:block::before {
     content: var(--tw-content);
     display: block;
@@ -6118,8 +6133,6 @@ video {
     border-left-width: 0px;
   }.sm\:border-l-\[0\.125rem\] {
     border-left-width: 0.125rem;
-  }.sm\:border-l-\[0\.375rem\] {
-    border-left-width: 0.375rem;
   }.sm\:border-l-\[6px\] {
     border-left-width: 6px;
   }.sm\:border-r-0 {
@@ -6397,15 +6410,16 @@ video {
   }.sm\:outline-none {
     outline: 2px solid transparent;
     outline-offset: 2px;
-  }.sm\:transition-colors {
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
   }.sm\:focus-outline {
     outline-style: solid;
     outline-width: 2px;
     outline-offset: 3px;
     outline-color: rgb(var(--colors-focus));
+  }.sm\:background-transition {
+    transition-property: background;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
+    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
   }.sm\:before\:block::before {
     content: var(--tw-content);
     display: block;
@@ -6975,8 +6989,6 @@ video {
     border-left-width: 0px;
   }.md\:border-l-\[0\.125rem\] {
     border-left-width: 0.125rem;
-  }.md\:border-l-\[0\.375rem\] {
-    border-left-width: 0.375rem;
   }.md\:border-l-\[6px\] {
     border-left-width: 6px;
   }.md\:border-r-0 {
@@ -7244,15 +7256,16 @@ video {
   }.md\:outline-none {
     outline: 2px solid transparent;
     outline-offset: 2px;
-  }.md\:transition-colors {
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
   }.md\:focus-outline {
     outline-style: solid;
     outline-width: 2px;
     outline-offset: 3px;
     outline-color: rgb(var(--colors-focus));
+  }.md\:background-transition {
+    transition-property: background;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
+    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
   }.md\:before\:block::before {
     content: var(--tw-content);
     display: block;
@@ -7827,8 +7840,6 @@ video {
     border-left-width: 0px;
   }.lg\:border-l-\[0\.125rem\] {
     border-left-width: 0.125rem;
-  }.lg\:border-l-\[0\.375rem\] {
-    border-left-width: 0.375rem;
   }.lg\:border-l-\[6px\] {
     border-left-width: 6px;
   }.lg\:border-r-0 {
@@ -8096,15 +8107,16 @@ video {
   }.lg\:outline-none {
     outline: 2px solid transparent;
     outline-offset: 2px;
-  }.lg\:transition-colors {
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
   }.lg\:focus-outline {
     outline-style: solid;
     outline-width: 2px;
     outline-offset: 3px;
     outline-color: rgb(var(--colors-focus));
+  }.lg\:background-transition {
+    transition-property: background;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
+    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
   }.lg\:before\:block::before {
     content: var(--tw-content);
     display: block;
@@ -8665,8 +8677,6 @@ video {
     border-left-width: 0px;
   }.xl\:border-l-\[0\.125rem\] {
     border-left-width: 0.125rem;
-  }.xl\:border-l-\[0\.375rem\] {
-    border-left-width: 0.375rem;
   }.xl\:border-l-\[6px\] {
     border-left-width: 6px;
   }.xl\:border-r-0 {
@@ -8928,15 +8938,16 @@ video {
   }.xl\:outline-none {
     outline: 2px solid transparent;
     outline-offset: 2px;
-  }.xl\:transition-colors {
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
   }.xl\:focus-outline {
     outline-style: solid;
     outline-width: 2px;
     outline-offset: 3px;
     outline-color: rgb(var(--colors-focus));
+  }.xl\:background-transition {
+    transition-property: background;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
+    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
   }.xl\:before\:block::before {
     content: var(--tw-content);
     display: block;

package/dist/tailwind/tailwind-plugin.js

@@ -16,6 +16,9 @@ export const WestpacUIKitBasePlugin = plugin(({ addComponents , addUtilities , a
         '.focus-outline': {
             [`@apply ${theme('focusOutline')}`]: {}
         },
+        '.background-transition': {
+            [`@apply ${theme('backgroundTransition')}`]: {}
+        },
         '.select-caret': {
             backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' style='color: rgb(89,87,103);'><path fill='currentColor' d='M0 0l7 8 7-8z'/></svg>\")"
         }
@@ -85,6 +88,9 @@ export const WestpacUIKitBasePlugin = plugin(({ addComponents , addUtilities , a
                 md: BREAKPOINTS.md,
                 lg: BREAKPOINTS.lg,
                 container: '1320px'
+            },
+            transitionTimingFunction: {
+                ease: 'cubic-bezier(0.25, 0.1, 0.25, 1.0)'
             }
         },
         typographySizes: {
@@ -159,7 +165,8 @@ export const WestpacUIKitBasePlugin = plugin(({ addComponents , addUtilities , a
                 }
             }
         },
-        focusOutline: 'outline outline-2 outline-offset-[3px] outline-focus'
+        focusOutline: 'outline outline-2 outline-offset-[3px] outline-focus',
+        backgroundTransition: 'transition-[background] duration-300 ease-ease'
     }
 });
 export const WestpacUIKitThemesPlugin = createThemes({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -22,20 +22,143 @@
     "./css": {
       "default": "./dist/css/westpac-ui.min.css"
     },
+    "./hook": {
+      "default": "./dist/hook/index.js"
+    },
+    "./tailwind": {
+      "default": "./dist/tailwind/index.js"
+    },
+    "./accordion": {
+      "default": "./dist/components/accordion/index.js"
+    },
+    "./alert": {
+      "default": "./dist/components/alert/index.js"
+    },
+    "./autocomplete": {
+      "default": "./dist/components/autocomplete/index.js"
+    },
+    "./badge": {
+      "default": "./dist/components/badge/index.js"
+    },
+    "./breadcrumb": {
+      "default": "./dist/components/breadcrumb/index.js"
+    },
+    "./button": {
+      "default": "./dist/components/button/index.js"
+    },
+    "./button-dropdown": {
+      "default": "./dist/components/button-dropdown/index.js"
+    },
+    "./button-group": {
+      "default": "./dist/components/button-group/index.js"
+    },
+    "./checkbox-group": {
+      "default": "./dist/components/checkbox-group/index.js"
+    },
+    "./circle": {
+      "default": "./dist/components/circle/index.js"
+    },
+    "./collapsible": {
+      "default": "./dist/components/collapsible/index.js"
+    },
+    "./compacta": {
+      "default": "./dist/components/compacta/index.js"
+    },
+    "./date-picker": {
+      "default": "./dist/components/date-picker/index.js"
+    },
+    "./error-message": {
+      "default": "./dist/components/error-message/index.js"
+    },
+    "./field": {
+      "default": "./dist/components/field/index.js"
+    },
+    "./flexi-cell": {
+      "default": "./dist/components/flexi-cell/index.js"
+    },
+    "./form": {
+      "default": "./dist/components/form/index.js"
+    },
+    "./form-hint": {
+      "default": "./dist/components/form-hint/index.js"
+    },
+    "./form-label": {
+      "default": "./dist/components/form-label/index.js"
+    },
+    "./grid": {
+      "default": "./dist/components/grid/index.js"
+    },
     "./icon": {
       "default": "./dist/components/icon/index.js"
     },
-    "./hook": {
-      "default": "./dist/hook/index.js"
+    "./input": {
+      "default": "./dist/components/input/index.js"
+    },
+    "./input-field": {
+      "default": "./dist/components/input-field/index.js"
+    },
+    "./link": {
+      "default": "./dist/components/link/index.js"
+    },
+    "./list": {
+      "default": "./dist/components/list/index.js"
+    },
+    "./modal": {
+      "default": "./dist/components/modal/index.js"
+    },
+    "./pagination": {
+      "default": "./dist/components/pagination/index.js"
+    },
+    "./panel": {
+      "default": "./dist/components/panel/index.js"
     },
     "./pictogram": {
       "default": "./dist/components/pictogram/index.js"
     },
+    "./popover": {
+      "default": "./dist/components/popover/index.js"
+    },
+    "./progress-bar": {
+      "default": "./dist/components/progress-bar/index.js"
+    },
+    "./progress-rope": {
+      "default": "./dist/components/progress-rope/index.js"
+    },
+    "./radio-group": {
+      "default": "./dist/components/radio-group/index.js"
+    },
+    "./repeater": {
+      "default": "./dist/components/repeater/index.js"
+    },
+    "./select": {
+      "default": "./dist/components/select/index.js"
+    },
+    "./selector": {
+      "default": "./dist/components/selector/index.js"
+    },
+    "./skip-link": {
+      "default": "./dist/components/skip-link/index.js"
+    },
+    "./switch": {
+      "default": "./dist/components/switch/index.js"
+    },
     "./symbol": {
       "default": "./dist/components/symbol/index.js"
     },
-    "./tailwind": {
-      "default": "./dist/tailwind/index.js"
+    "./table": {
+      "default": "./dist/components/table/index.js"
+    },
+    "./tabs": {
+      "default": "./dist/components/tabs/index.js"
+    },
+    "./textarea": {
+      "default": "./dist/components/textarea/index.js"
+    },
+    "./visually-hidden": {
+      "default": "./dist/components/visually-hidden/index.js"
+    },
+    "./well": {
+      "default": "./dist/components/well/index.js"
     }
   },
   "files": [
@@ -137,6 +260,7 @@
     "build:types": "tsc --project tsconfig.build.json",
     "build:esm": "swc ./src -d dist --no-swcrc --config-file .swcrc",
     "build:icons": "ts-node --esm ./utils/build-icons/index.ts",
+    "build:exports": "ts-node --esm ./utils/build-exports/index.ts && prettier --write package.json",
     "build:watch": "pnpm clean && pnpm build:types && pnpm build:esm -w && pnpm build:css:all",
     "build:type-table": "node generate-component-types.cjs",
     "build": "pnpm clean && pnpm build:types && pnpm build:esm && pnpm build:css:all && pnpm build:type-table",
@@ -147,6 +271,6 @@
     "test:watch": "vitest --no-coverage",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "generate:component": "plop"
+    "generate:component": "plop && pnpm build:exports"
   }
 }

package/src/components/accordion/accordion.component.tsx

@@ -36,7 +36,7 @@ function Accordion<T extends object>(
 
   return (
     <div {...filterDOMProps(finalProps)} {...accordionProps} ref={domRef} className={styles({ className, rounded })}>
-      <div className="mt-[-1px]">
+      <div className="ml-[-1px] mt-[-1px]">
         {[...state.collection].map(item => (
           <AccordionItem<T> key={item.key} item={item} state={state} look={look} />
         ))}

package/src/components/accordion/components/accordion-item/accordion-item.styles.ts

@@ -14,7 +14,8 @@ export const styles = tv(
           itemHeader: 'border-t border-border bg-light',
         },
         lego: {
-          itemHeader: 'border-l-[0.375rem] border-t border-border bg-light transition-colors',
+          itemHeader:
+            'border-l-[0.375rem] border-border bg-light shadow-[inset_0_1px_0_var(--tw-shadow-color)] !shadow-border transition-colors',
         },
       },
       isOpen: {
@@ -23,7 +24,7 @@ export const styles = tv(
         },
         false: {
           base: '',
-          itemHeader: 'hover:bg-background',
+          itemHeader: 'background-transition hover:bg-background',
         },
       },
       isDisabled: {

package/src/components/date-picker/date-picker.component.tsx

@@ -28,7 +28,7 @@ export function DatePicker({
 
   useEffect(() => {
     const initDatePicker = async () => {
-      const { defineCustomElements } = await import('@duetds/date-picker/custom-element');
+      const { defineCustomElements } = await import('@duetds/date-picker/custom-element/index.js');
       defineCustomElements(window);
       setInitialized(true);
     };

package/src/components/tabs/components/tab/tab.styles.ts

@@ -10,7 +10,7 @@ export const styles = tv(
       },
       selected: {
         true: 'bg-white',
-        false: 'hover:bg-background',
+        false: 'background-transition hover:bg-background',
       },
       orientation: {
         horizontal: '',

package/src/tailwind/tailwind-plugin.ts

@@ -19,6 +19,7 @@ export const WestpacUIKitBasePlugin = plugin(
     });
     addUtilities({
       '.focus-outline': { [`@apply ${theme('focusOutline')}`]: {} },
+      '.background-transition': { [`@apply ${theme('backgroundTransition')}`]: {} },
       '.select-caret': {
         backgroundImage:
           "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' style='color: rgb(89,87,103);'><path fill='currentColor' d='M0 0l7 8 7-8z'/></svg>\")",
@@ -88,6 +89,9 @@ export const WestpacUIKitBasePlugin = plugin(
           lg: BREAKPOINTS.lg,
           container: '1320px', //1200 (lg) + 60 (paddingHorizontal) + 60 (paddingHorizontal)
         },
+        transitionTimingFunction: {
+          ease: 'cubic-bezier(0.25, 0.1, 0.25, 1.0)', // based on css ease timing function used in GEL 3.0
+        },
       },
       typographySizes: {
         1: {
@@ -164,6 +168,7 @@ export const WestpacUIKitBasePlugin = plugin(
         },
       },
       focusOutline: 'outline outline-2 outline-offset-[3px] outline-focus',
+      backgroundTransition: 'transition-[background] duration-300 ease-ease',
     },
   },
 );

package/utils/build-exports/index.ts

@@ -0,0 +1,38 @@
+import fs from 'fs/promises';
+import path from 'path';
+
+const exports: Record<string, { default: string }> = {
+  '.': {
+    default: './dist/index.js',
+  },
+  './component-type.json': {
+    default: './dist/component-type.json',
+  },
+  './css': {
+    default: './dist/css/westpac-ui.min.css',
+  },
+  './hook': {
+    default: './dist/hook/index.js',
+  },
+  './tailwind': {
+    default: './dist/tailwind/index.js',
+  },
+};
+
+const main = async () => {
+  const components = (await fs.readdir(path.join(process.cwd(), 'src/components'), { withFileTypes: true }))
+    .filter(dirent => dirent.isDirectory())
+    .map(dirent => dirent.name);
+
+  components.forEach(component => {
+    exports[`./${component}`] = { default: `./dist/components/${component}/index.js` };
+  });
+
+  const pkgJsonPath = path.join(process.cwd(), 'package.json');
+  const data = await fs.readFile(pkgJsonPath, 'utf-8');
+  const pkgJson = JSON.parse(data);
+  pkgJson.exports = exports;
+  await fs.writeFile(pkgJsonPath, JSON.stringify(pkgJson));
+};
+
+main();