@veracity/vui 4.0.3 → 5.0.0-alpha.375407.2603121328

package/dist/core/vuiProvider/consts.js.map

@@ -1 +1 @@
-{"version":3,"file":"consts.js","names":[],"sources":["../../../src/core/vuiProvider/consts.ts"],"sourcesContent":["export const noScrollClass = 'vui-no-scroll'\n"],"mappings":";AAAA,MAAa,gBAAgB"}
+{"version":3,"file":"consts.js","names":[],"sources":["../../../src/core/vuiProvider/consts.ts"],"sourcesContent":["export const noScrollClass = 'vui-no-scroll'\n\n// Color Primitives - Split by Color Family\nexport const vuiColorDarkBlue = `\n--vui-color-dark-blue-95: #eaeffb;\n--vui-color-dark-blue-90: #d4def7;\n--vui-color-dark-blue-85: #bfcef2;\n--vui-color-dark-blue-80: #aabdee;\n--vui-color-dark-blue-75: #95adea;\n--vui-color-dark-blue-70: #7f9ce6;\n--vui-color-dark-blue-65: #6a8ce2;\n--vui-color-dark-blue-60: #557bdd;\n--vui-color-dark-blue-55: #3f6bd9;\n--vui-color-dark-blue-50: #2a5ad5;\n--vui-color-dark-blue-45: #2651c0;\n--vui-color-dark-blue-40: #2248aa;\n--vui-color-dark-blue-35: #1d3f95;\n--vui-color-dark-blue-30: #193680;\n--vui-color-dark-blue-25: #152d6a;\n--vui-color-dark-blue-18: #0f214d;\n--vui-color-dark-blue-15: #0d1b40;\n--vui-color-dark-blue-10: #08122b;\n--vui-color-dark-blue-8: #070e21;\n--vui-color-dark-blue-5: #040915;\n`\n\nexport const vuiColorSeaBlue = `\n--vui-color-sea-blue-95: #e5efff;\n--vui-color-sea-blue-90: #ccdfff;\n--vui-color-sea-blue-85: #b2cfff;\n--vui-color-sea-blue-80: #99beff;\n--vui-color-sea-blue-75: #80aeff;\n--vui-color-sea-blue-70: #669eff;\n--vui-color-sea-blue-65: #4d8eff;\n--vui-color-sea-blue-60: #337eff;\n--vui-color-sea-blue-55: #1a6eff;\n--vui-color-sea-blue-50: #005eff;\n--vui-color-sea-blue-45: #0054e5;\n--vui-color-sea-blue-40: #004bcc;\n--vui-color-sea-blue-35: #0041b2;\n--vui-color-sea-blue-28: #00348f;\n--vui-color-sea-blue-25: #002f80;\n--vui-color-sea-blue-20: #002566;\n--vui-color-sea-blue-15: #001c4d;\n--vui-color-sea-blue-10: #001333;\n--vui-color-sea-blue-5: #00091a;\n`\n\nexport const vuiColorSkyBlue = `\n--vui-color-sky-blue-97: #f2fafd;\n--vui-color-sky-blue-95: #e9f7fc;\n--vui-color-sky-blue-90: #d3eef8;\n--vui-color-sky-blue-85: #bce6f5;\n--vui-color-sky-blue-80: #a6def2;\n--vui-color-sky-blue-77: #99d9f0;\n--vui-color-sky-blue-65: #64c5e8;\n--vui-color-sky-blue-60: #4ebce4;\n--vui-color-sky-blue-55: #37b4e1;\n--vui-color-sky-blue-50: #21acde;\n--vui-color-sky-blue-45: #1e9ac8;\n--vui-color-sky-blue-40: #1b89b1;\n--vui-color-sky-blue-35: #17789b;\n--vui-color-sky-blue-30: #146785;\n--vui-color-sky-blue-25: #11566f;\n--vui-color-sky-blue-20: #0d4559;\n--vui-color-sky-blue-15: #0a3343;\n--vui-color-sky-blue-10: #07222c;\n--vui-color-sky-blue-5: #031116;\n`\n\nexport const vuiColorDigiGreen = `\n--vui-color-digi-green-95: #e5ffee;\n--vui-color-digi-green-90: #ccffdc;\n--vui-color-digi-green-85: #b3ffcb;\n--vui-color-digi-green-80: #99ffb9;\n--vui-color-digi-green-78: #8fffb2;\n--vui-color-digi-green-70: #66ff96;\n--vui-color-digi-green-65: #4dff85;\n--vui-color-digi-green-60: #33ff74;\n--vui-color-digi-green-55: #1aff62;\n--vui-color-digi-green-50: #00ff51;\n--vui-color-digi-green-45: #00e549;\n--vui-color-digi-green-40: #00cc41;\n--vui-color-digi-green-35: #00b239;\n--vui-color-digi-green-30: #009930;\n--vui-color-digi-green-25: #008028;\n--vui-color-digi-green-20: #006620;\n--vui-color-digi-green-15: #004d18;\n--vui-color-digi-green-10: #003310;\n--vui-color-digi-green-5: #001a08;\n`\n\nexport const vuiColorSandstone = `\n--vui-color-sandstone-97: #f8f7f7;\n--vui-color-sandstone-95: #f3f2f2;\n--vui-color-sandstone-90: #e6e6e5;\n--vui-color-sandstone-85: #dad9d8;\n--vui-color-sandstone-79: #cbcac8;\n--vui-color-sandstone-75: #c1c0bd;\n--vui-color-sandstone-70: #b5b3b0;\n--vui-color-sandstone-65: #a8a7a3;\n--vui-color-sandstone-60: #9c9a96;\n--vui-color-sandstone-55: #908d89;\n--vui-color-sandstone-50: #83817c;\n--vui-color-sandstone-45: #76746f;\n--vui-color-sandstone-40: #696763;\n--vui-color-sandstone-35: #5c5a57;\n--vui-color-sandstone-30: #4f4d4a;\n--vui-color-sandstone-25: #42403e;\n--vui-color-sandstone-20: #353431;\n--vui-color-sandstone-15: #272725;\n--vui-color-sandstone-12: #212120;\n--vui-color-sandstone-10: #1a1a19;\n--vui-color-sandstone-5: #0d0d0c;\n`\n\nexport const vuiColorWarmGrey = `\n--vui-color-warm-grey-95: #f3f2f1;\n--vui-color-warm-grey-90: #e8e5e3;\n--vui-color-warm-grey-85: #dcd9d6;\n--vui-color-warm-grey-80: #d0ccc8;\n--vui-color-warm-grey-75: #c4bfba;\n--vui-color-warm-grey-70: #b9b2ac;\n--vui-color-warm-grey-65: #ada69f;\n--vui-color-warm-grey-60: #a19991;\n--vui-color-warm-grey-56: #988f86;\n--vui-color-warm-grey-50: #8a8075;\n--vui-color-warm-grey-45: #7c736a;\n--vui-color-warm-grey-40: #6e665e;\n--vui-color-warm-grey-35: #605952;\n--vui-color-warm-grey-30: #534d46;\n--vui-color-warm-grey-25: #45403b;\n--vui-color-warm-grey-20: #37332f;\n--vui-color-warm-grey-15: #292623;\n--vui-color-warm-grey-10: #1c1a17;\n--vui-color-warm-grey-5: #0e0d0c;\n`\n\nexport const vuiColorEarth = `\n--vui-color-earth-97: #fbf8f3;\n--vui-color-earth-95: #f9f3eb;\n--vui-color-earth-89: #f2e5d4;\n--vui-color-earth-85: #eddcc4;\n--vui-color-earth-80: #e7d1b1;\n--vui-color-earth-75: #e1c59d;\n--vui-color-earth-70: #dbb98a;\n--vui-color-earth-65: #d5ae76;\n--vui-color-earth-60: #cfa263;\n--vui-color-earth-55: #c9964f;\n--vui-color-earth-50: #c38b3c;\n--vui-color-earth-45: #b07d36;\n--vui-color-earth-40: #9c6f30;\n--vui-color-earth-35: #89612a;\n--vui-color-earth-30: #755324;\n--vui-color-earth-25: #62451e;\n--vui-color-earth-20: #4e3818;\n--vui-color-earth-15: #3b2a12;\n--vui-color-earth-10: #271c0c;\n--vui-color-earth-5: #140e06;\n`\n\nexport const vuiColorPine = `\n--vui-color-pine-95: #ecf5f8;\n--vui-color-pine-90: #daebf1;\n--vui-color-pine-85: #c7e2ea;\n--vui-color-pine-80: #b5d8e3;\n--vui-color-pine-75: #a2cedd;\n--vui-color-pine-70: #8fc4d6;\n--vui-color-pine-65: #7dbacf;\n--vui-color-pine-60: #6ab0c8;\n--vui-color-pine-55: #57a7c1;\n--vui-color-pine-50: #459dba;\n--vui-color-pine-45: #3e8da8;\n--vui-color-pine-40: #377d95;\n--vui-color-pine-35: #306e82;\n--vui-color-pine-31: #2b6173;\n--vui-color-pine-25: #224e5d;\n--vui-color-pine-20: #1c3f4a;\n--vui-color-pine-15: #152f38;\n--vui-color-pine-10: #0e1f25;\n--vui-color-pine-5: #071013;\n`\n\nexport const vuiColorEucalyptus = `\n--vui-color-eucalyptus-95: #e8fdfc;\n--vui-color-eucalyptus-90: #d1faf9;\n--vui-color-eucalyptus-85: #baf7f5;\n--vui-color-eucalyptus-80: #a3f5f2;\n--vui-color-eucalyptus-75: #8cf2ef;\n--vui-color-eucalyptus-70: #75f0ec;\n--vui-color-eucalyptus-65: #5eede8;\n--vui-color-eucalyptus-60: #47ebe5;\n--vui-color-eucalyptus-55: #30e8e2;\n--vui-color-eucalyptus-50: #1ae5df;\n--vui-color-eucalyptus-45: #17cfc8;\n--vui-color-eucalyptus-41: #15c1bb;\n--vui-color-eucalyptus-35: #12a19c;\n--vui-color-eucalyptus-30: #0f8a86;\n--vui-color-eucalyptus-25: #0d736f;\n--vui-color-eucalyptus-20: #0a5c59;\n--vui-color-eucalyptus-15: #084543;\n--vui-color-eucalyptus-10: #052e2d;\n--vui-color-eucalyptus-5: #031716;\n`\n\nexport const vuiColorLavender = `\n--vui-color-lavender-95: #ebedfa;\n--vui-color-lavender-90: #d7dbf4;\n--vui-color-lavender-85: #c3c8ef;\n--vui-color-lavender-80: #aeb6ea;\n--vui-color-lavender-77: #a2abe6;\n--vui-color-lavender-70: #8692df;\n--vui-color-lavender-65: #7280da;\n--vui-color-lavender-60: #5e6ed4;\n--vui-color-lavender-55: #4a5bcf;\n--vui-color-lavender-50: #3649c9;\n--vui-color-lavender-45: #3042b5;\n--vui-color-lavender-40: #2b3ba1;\n--vui-color-lavender-35: #25338d;\n--vui-color-lavender-30: #202c79;\n--vui-color-lavender-25: #1b2565;\n--vui-color-lavender-20: #151d51;\n--vui-color-lavender-15: #10163c;\n--vui-color-lavender-10: #0b0f28;\n--vui-color-lavender-5: #050714;\n`\n\nexport const vuiColorTerracotta = `\n--vui-color-terracotta-95: #fff4e5;\n--vui-color-terracotta-90: #ffe9cc;\n--vui-color-terracotta-85: #ffdeb3;\n--vui-color-terracotta-80: #ffd399;\n--vui-color-terracotta-75: #ffc880;\n--vui-color-terracotta-70: #ffbd66;\n--vui-color-terracotta-65: #ffb24d;\n--vui-color-terracotta-60: #ffa733;\n--vui-color-terracotta-55: #ff9c1a;\n--vui-color-terracotta-50: #ff9100;\n--vui-color-terracotta-45: #e58200;\n--vui-color-terracotta-40: #cc7400;\n--vui-color-terracotta-35: #b26500;\n--vui-color-terracotta-30: #995700;\n--vui-color-terracotta-25: #804800;\n--vui-color-terracotta-20: #663a00;\n--vui-color-terracotta-15: #4d2b00;\n--vui-color-terracotta-10: #331d00;\n--vui-color-terracotta-5: #1a0e00;\n`\n\nexport const vuiColorLandGreen = `\n--vui-color-land-green-95: #edf8ec;\n--vui-color-land-green-90: #dcf2d9;\n--vui-color-land-green-85: #caebc6;\n--vui-color-land-green-80: #b8e5b3;\n--vui-color-land-green-75: #a6dea0;\n--vui-color-land-green-70: #95d88d;\n--vui-color-land-green-65: #83d17a;\n--vui-color-land-green-60: #71cb67;\n--vui-color-land-green-55: #5fc454;\n--vui-color-land-green-50: #4ebe41;\n--vui-color-land-green-45: #46ab3b;\n--vui-color-land-green-41: #409c35;\n--vui-color-land-green-35: #36852e;\n--vui-color-land-green-30: #2f7227;\n--vui-color-land-green-25: #275f21;\n--vui-color-land-green-20: #1f4c1a;\n--vui-color-land-green-15: #173914;\n--vui-color-land-green-10: #10260d;\n--vui-color-land-green-5: #081307;\n`\n\nexport const vuiColorSunflower = `\n--vui-color-sunflower-95: #fffde6;\n--vui-color-sunflower-90: #fffbcc;\n--vui-color-sunflower-85: #fff9b2;\n--vui-color-sunflower-80: #fff699;\n--vui-color-sunflower-73: #fff475;\n--vui-color-sunflower-70: #fff166;\n--vui-color-sunflower-65: #fff04d;\n--vui-color-sunflower-60: #ffee33;\n--vui-color-sunflower-55: #ffec1a;\n--vui-color-sunflower-50: #ffea00;\n--vui-color-sunflower-45: #e5d200;\n--vui-color-sunflower-40: #ccbb00;\n--vui-color-sunflower-35: #b2a400;\n--vui-color-sunflower-30: #998b00;\n--vui-color-sunflower-25: #807500;\n--vui-color-sunflower-20: #665e00;\n--vui-color-sunflower-15: #4d4600;\n--vui-color-sunflower-10: #332f00;\n--vui-color-sunflower-5: #1a1700;\n`\n\nexport const vuiColorEnergyRed = `\n--vui-color-energy-red-95: #fde8e9;\n--vui-color-energy-red-90: #fbd0d2;\n--vui-color-energy-red-85: #f8b9bc;\n--vui-color-energy-red-80: #f6a2a6;\n--vui-color-energy-red-75: #f48a90;\n--vui-color-energy-red-70: #f27379;\n--vui-color-energy-red-65: #f05c63;\n--vui-color-energy-red-60: #ee444d;\n--vui-color-energy-red-54: #eb2832;\n--vui-color-energy-red-50: #e91620;\n--vui-color-energy-red-45: #d2141d;\n--vui-color-energy-red-40: #bb111a;\n--vui-color-energy-red-35: #a30f17;\n--vui-color-energy-red-30: #8c0d13;\n--vui-color-energy-red-25: #750b10;\n--vui-color-energy-red-20: #5d090d;\n--vui-color-energy-red-15: #46070a;\n--vui-color-energy-red-10: #2f0406;\n--vui-color-energy-red-5: #170203;\n`\n\nexport const vuiColorCyan = `\n--vui-color-cyan-95: #e5f8ff;\n--vui-color-cyan-60: #33c8ff;\n--vui-color-cyan-43: #009fda;\n`\n\nexport const vuiColorOpacityDark = `\n--vui-color-opacity-dark-0: #00000000;\n--vui-color-opacity-dark-5: #0000000d;\n--vui-color-opacity-dark-10: #0000001a;\n--vui-color-opacity-dark-15: #00000026;\n--vui-color-opacity-dark-20: #00000033;\n--vui-color-opacity-dark-25: #00000040;\n--vui-color-opacity-dark-30: #0000004d;\n--vui-color-opacity-dark-35: #00000059;\n--vui-color-opacity-dark-40: #00000066;\n--vui-color-opacity-dark-45: #00000073;\n--vui-color-opacity-dark-50: #00000080;\n--vui-color-opacity-dark-55: #0000008c;\n--vui-color-opacity-dark-60: #00000099;\n--vui-color-opacity-dark-65: #000000a6;\n--vui-color-opacity-dark-70: #000000b2;\n--vui-color-opacity-dark-75: #000000bf;\n--vui-color-opacity-dark-80: #000000cc;\n--vui-color-opacity-dark-85: #000000d9;\n--vui-color-opacity-dark-90: #000000e5;\n--vui-color-opacity-dark-95: #000000f2;\n`\n\nexport const vuiColorOpacityLight = `\n--vui-color-opacity-light-0: #ffffff00;\n--vui-color-opacity-light-5: #ffffff0d;\n--vui-color-opacity-light-10: #ffffff1a;\n--vui-color-opacity-light-15: #ffffff26;\n--vui-color-opacity-light-20: #ffffff33;\n--vui-color-opacity-light-25: #ffffff40;\n--vui-color-opacity-light-30: #ffffff4d;\n--vui-color-opacity-light-35: #ffffff59;\n--vui-color-opacity-light-40: #ffffff66;\n--vui-color-opacity-light-45: #ffffff73;\n--vui-color-opacity-light-50: #ffffff80;\n--vui-color-opacity-light-55: #ffffff8c;\n--vui-color-opacity-light-60: #ffffff99;\n--vui-color-opacity-light-65: #ffffffa6;\n--vui-color-opacity-light-70: #ffffffb2;\n--vui-color-opacity-light-75: #ffffffbf;\n--vui-color-opacity-light-80: #ffffffcc;\n--vui-color-opacity-light-85: #ffffffd9;\n--vui-color-opacity-light-90: #ffffffe5;\n--vui-color-opacity-light-95: #fffffff2;\n`\n\nexport const vuiColorBase = `\n--vui-color-opacity-none: #00000000;\n--vui-color-white: #ffffff;\n--vui-color-black: #000000;\n`\n\nexport const vuiColorPrimitives = `\n/* Color Primitives */\n${vuiColorDarkBlue}\n${vuiColorSeaBlue}\n${vuiColorSkyBlue}\n${vuiColorDigiGreen}\n${vuiColorSandstone}\n${vuiColorWarmGrey}\n${vuiColorEarth}\n${vuiColorPine}\n${vuiColorEucalyptus}\n${vuiColorLavender}\n${vuiColorTerracotta}\n${vuiColorLandGreen}\n${vuiColorSunflower}\n${vuiColorEnergyRed}\n${vuiColorCyan}\n${vuiColorOpacityDark}\n${vuiColorOpacityLight}\n${vuiColorBase}\n`\n\n// Semantic Tokens\nexport const vuiSemanticForeground = `\n--vui-foreground-brand-primary: var(--vui-color-sea-blue-28);\n--vui-foreground-brand-secondary: var(--vui-color-dark-blue-18);\n--vui-foreground-contrast: var(--vui-color-digi-green-78);\n--vui-foreground-default: var(--vui-color-sandstone-10);\n--vui-foreground-inverse: var(--vui-color-white);\n--vui-foreground-muted: var(--vui-color-warm-grey-30);\n`\n\nexport const vuiSemanticBackground = `\n--vui-background-cold: var(--vui-color-sky-blue-97);\n--vui-background-contrast: var(--vui-color-dark-blue-18);\n--vui-background-default: var(--vui-color-white);\n--vui-background-elevated: var(--vui-color-white);\n--vui-background-muted: var(--vui-color-sandstone-95);\n--vui-background-subtle: var(--vui-color-sandstone-97);\n--vui-background-warm: var(--vui-color-earth-95);\n`\n\n// Utility Tokens\nexport const vuiUtilityBorder = `\n--vui-utility-border-brand: var(--vui-color-dark-blue-18);\n--vui-utility-border-default: var(--vui-color-opacity-dark-20);\n--vui-utility-border-inverse: var(--vui-color-white);\n--vui-utility-border-subtle: var(--vui-color-opacity-dark-10);\n`\n\nexport const vuiUtilityLoading = `\n--vui-utility-loading-brand: var(--vui-color-sea-blue-28);\n--vui-utility-loading-danger: var(--vui-color-energy-red-54);\n--vui-utility-loading-inverse: var(--vui-color-white);\n--vui-utility-loading-skeleton: var(--vui-color-opacity-dark-30);\n--vui-utility-loading-success: var(--vui-color-land-green-41);\n`\n\nexport const vuiUtilityMisc = `\n--vui-utility-focus: var(--vui-color-cyan-43);\n--vui-utility-indicator: var(--vui-data-cyan);\n--vui-utility-opacity-none: var(--vui-color-opacity-light-0);\n--vui-utility-overlay: var(--vui-color-opacity-dark-50);\n--vui-utility-tooltip-background: var(--vui-color-dark-blue-18);\n--vui-utility-tooltip-foreground: var(--vui-color-white);\n`\n\nexport const vuiUtilityTokens = `\n/* Utility Tokens */\n${vuiUtilityBorder}\n${vuiUtilityLoading}\n${vuiUtilityMisc}\n`\n\n// Navigation Tokens\nexport const vuiNavigationForeground = `\n--vui-navigation-foreground-active: var(--vui-color-sea-blue-28);\n--vui-navigation-foreground-default: var(--vui-color-sandstone-10);\n--vui-navigation-foreground-disabled: var(--vui-color-sandstone-55);\n--vui-navigation-foreground-hover: var(--vui-color-sandstone-10);\n--vui-navigation-foreground-pressed: var(--vui-color-sandstone-10);\n`\n\nexport const vuiNavigationBackground = `\n--vui-navigation-background-active: var(--vui-color-sky-blue-95);\n--vui-navigation-background-default: var(--vui-background-elevated);\n--vui-navigation-background-disabled: var(--vui-color-sandstone-95);\n--vui-navigation-background-hover: var(--vui-color-sky-blue-85);\n--vui-navigation-background-pressed: var(--vui-color-sky-blue-90);\n`\n\nexport const vuiNavigationBorder = `\n--vui-navigation-border-active: var(--vui-color-sea-blue-28);\n--vui-navigation-border-default: var(--vui-color-opacity-dark-5);\n--vui-navigation-border-disabled: var(--vui-color-opacity-dark-10);\n--vui-navigation-border-hover: var(--vui-color-dark-blue-18);\n--vui-navigation-border-pressed: var(--vui-color-sea-blue-28);\n`\n\nexport const vuiNavigationTokens = `\n/* Navigation Tokens */\n${vuiNavigationForeground}\n${vuiNavigationBackground}\n${vuiNavigationBorder}\n`\n\n// Action Tokens - Split by Color Family\nexport const vuiActionAI = `\n--vui-action-ai-solid: var(--vui-color-cyan-43);\n--vui-action-ai-solid-hover: var(--vui-color-sea-blue-20);\n--vui-action-ai-solid-inverse: var(--vui-color-white);\n--vui-action-ai-solid-pressed: var(--vui-color-sea-blue-35);\n--vui-action-ai-subtle: var(--vui-gradient-ai-1);\n--vui-action-ai-subtle-hover: var(--vui-gradient-ai-1);\n--vui-action-ai-subtle-inverse: var(--vui-color-dark-blue-18);\n--vui-action-ai-subtle-pressed: var(--vui-gradient-ai-1);\n`\n\nexport const vuiActionBlue = `\n--vui-action-blue-solid: var(--vui-color-dark-blue-18);\n--vui-action-blue-solid-hover: var(--vui-color-dark-blue-25);\n--vui-action-blue-solid-inverse: var(--vui-color-white);\n--vui-action-blue-solid-pressed: var(--vui-color-sea-blue-28);\n--vui-action-blue-subtle: var(--vui-color-sky-blue-90);\n--vui-action-blue-subtle-hover: var(--vui-color-sky-blue-80);\n--vui-action-blue-subtle-inverse: var(--vui-color-dark-blue-18);\n--vui-action-blue-subtle-pressed: var(--vui-color-sky-blue-85);\n`\n\nexport const vuiActionBrand = `\n--vui-action-brand-solid: var(--vui-color-sea-blue-28);\n--vui-action-brand-solid-hover: var(--vui-color-sea-blue-20);\n--vui-action-brand-solid-inverse: var(--vui-color-white);\n--vui-action-brand-solid-pressed: var(--vui-color-sea-blue-35);\n--vui-action-brand-subtle: var(--vui-color-sky-blue-95);\n--vui-action-brand-subtle-hover: var(--vui-color-sky-blue-85);\n--vui-action-brand-subtle-inverse: var(--vui-color-sea-blue-28);\n--vui-action-brand-subtle-pressed: var(--vui-color-sky-blue-90);\n`\n\nexport const vuiActionContrast = `\n--vui-action-contrast-solid: var(--vui-color-digi-green-78);\n--vui-action-contrast-solid-hover: var(--vui-color-digi-green-70);\n--vui-action-contrast-solid-inverse: var(--vui-color-dark-blue-18);\n--vui-action-contrast-solid-pressed: var(--vui-color-digi-green-85);\n--vui-action-contrast-subtle: var(--vui-color-digi-green-78);\n--vui-action-contrast-subtle-hover: var(--vui-color-opacity-light-25);\n--vui-action-contrast-subtle-inverse: var(--vui-color-dark-blue-18);\n--vui-action-contrast-subtle-pressed: var(--vui-color-opacity-light-15);\n`\n\nexport const vuiActionDanger = `\n--vui-action-danger-solid: var(--vui-color-energy-red-45);\n--vui-action-danger-solid-hover: var(--vui-color-energy-red-35);\n--vui-action-danger-solid-inverse: var(--vui-color-white);\n--vui-action-danger-solid-pressed: var(--vui-color-energy-red-50);\n--vui-action-danger-subtle: var(--vui-color-energy-red-95);\n--vui-action-danger-subtle-hover: var(--vui-color-energy-red-85);\n--vui-action-danger-subtle-inverse: var(--vui-color-energy-red-45);\n--vui-action-danger-subtle-pressed: var(--vui-color-energy-red-90);\n`\n\nexport const vuiActionEucalyptus = `\n--vui-action-eucalyptus-solid: var(--vui-color-eucalyptus-30);\n--vui-action-eucalyptus-solid-hover: var(--vui-color-eucalyptus-41);\n--vui-action-eucalyptus-solid-inverse: var(--vui-color-white);\n--vui-action-eucalyptus-solid-pressed: var(--vui-color-eucalyptus-35);\n--vui-action-eucalyptus-subtle: var(--vui-color-eucalyptus-95);\n--vui-action-eucalyptus-subtle-hover: var(--vui-color-eucalyptus-85);\n--vui-action-eucalyptus-subtle-inverse: var(--vui-color-eucalyptus-20);\n--vui-action-eucalyptus-subtle-pressed: var(--vui-color-eucalyptus-90);\n`\n\nexport const vuiActionGrey = `\n--vui-action-grey-solid: var(--vui-color-sandstone-40);\n--vui-action-grey-solid-hover: var(--vui-color-sandstone-50);\n--vui-action-grey-solid-inverse: var(--vui-color-white);\n--vui-action-grey-solid-pressed: var(--vui-color-sandstone-45);\n--vui-action-grey-subtle: var(--vui-color-sandstone-90);\n--vui-action-grey-subtle-hover: var(--vui-color-sandstone-79);\n--vui-action-grey-subtle-inverse: var(--vui-color-sandstone-10);\n--vui-action-grey-subtle-pressed: var(--vui-color-sandstone-85);\n`\n\nexport const vuiActionLavender = `\n--vui-action-lavender-solid: var(--vui-color-lavender-60);\n--vui-action-lavender-solid-hover: var(--vui-color-lavender-70);\n--vui-action-lavender-solid-inverse: var(--vui-color-white);\n--vui-action-lavender-solid-pressed: var(--vui-color-lavender-65);\n--vui-action-lavender-subtle: var(--vui-color-lavender-95);\n--vui-action-lavender-subtle-hover: var(--vui-color-lavender-85);\n--vui-action-lavender-subtle-inverse: var(--vui-color-lavender-20);\n--vui-action-lavender-subtle-pressed: var(--vui-color-lavender-90);\n`\n\nexport const vuiActionSuccess = `\n--vui-action-success-solid: var(--vui-color-land-green-41);\n--vui-action-success-solid-hover: var(--vui-color-land-green-25);\n--vui-action-success-solid-inverse: var(--vui-color-white);\n--vui-action-success-solid-pressed: var(--vui-color-land-green-30);\n--vui-action-success-subtle: var(--vui-color-land-green-95);\n--vui-action-success-subtle-hover: var(--vui-color-land-green-85);\n--vui-action-success-subtle-inverse: var(--vui-color-land-green-20);\n--vui-action-success-subtle-pressed: var(--vui-color-land-green-90);\n`\n\nexport const vuiActionTerracotta = `\n--vui-action-terracotta-solid: var(--vui-color-terracotta-30);\n--vui-action-terracotta-solid-hover: var(--vui-color-terracotta-40);\n--vui-action-terracotta-solid-inverse: var(--vui-color-white);\n--vui-action-terracotta-solid-pressed: var(--vui-color-terracotta-35);\n--vui-action-terracotta-subtle: var(--vui-color-terracotta-90);\n--vui-action-terracotta-subtle-hover: var(--vui-color-terracotta-80);\n--vui-action-terracotta-subtle-inverse: var(--vui-color-terracotta-20);\n--vui-action-terracotta-subtle-pressed: var(--vui-color-terracotta-85);\n`\n\nexport const vuiActionYellow = `\n--vui-action-yellow-solid: var(--vui-color-sunflower-60);\n--vui-action-yellow-solid-hover: var(--vui-color-sunflower-80);\n--vui-action-yellow-solid-inverse: var(--vui-color-sunflower-15);\n--vui-action-yellow-solid-pressed: var(--vui-color-sunflower-70);\n--vui-action-yellow-subtle: var(--vui-color-sunflower-85);\n--vui-action-yellow-subtle-hover: var(--vui-color-sunflower-73);\n--vui-action-yellow-subtle-inverse: var(--vui-color-sunflower-15);\n--vui-action-yellow-subtle-pressed: var(--vui-color-sunflower-80);\n`\n\nexport const vuiActionGeneric = `\n--vui-action-disabled-background: var(--vui-color-sandstone-75);\n--vui-action-disabled-foreground: var(--vui-color-sandstone-45);\n--vui-action-generic-hover: var(--vui-color-opacity-dark-20);\n--vui-action-generic-pressed: var(--vui-color-opacity-dark-15);\n`\n\nexport const vuiActionTokens = `\n/* Action Tokens */\n${vuiActionAI}\n${vuiActionBlue}\n${vuiActionBrand}\n${vuiActionContrast}\n${vuiActionDanger}\n${vuiActionEucalyptus}\n${vuiActionGrey}\n${vuiActionLavender}\n${vuiActionSuccess}\n${vuiActionTerracotta}\n${vuiActionYellow}\n${vuiActionGeneric}\n`\n\n// Control Tokens\nexport const vuiControlTokens = `\n/* Control Tokens */\n--vui-control-background-default: var(--vui-color-white);\n--vui-control-background-disabled: var(--vui-color-sandstone-70);\n--vui-control-background-off: var(--vui-color-sandstone-50);\n--vui-control-background-on: var(--vui-color-dark-blue-18);\n--vui-control-border-default: var(--vui-color-sandstone-70);\n--vui-control-border-hover: var(--vui-color-sandstone-10);\n--vui-control-foreground-default: var(--vui-color-sandstone-10);\n--vui-control-foreground-disabled: var(--vui-color-sandstone-20);\n--vui-control-foreground-off: var(--vui-color-white);\n--vui-control-foreground-on: var(--vui-color-white);\n--vui-control-helper: var(--vui-color-sandstone-35);\n--vui-control-label: var(--vui-color-sandstone-10);\n--vui-control-placeholder: var(--vui-color-sandstone-60);\n`\n\n// Feedback Tokens\nexport const vuiFeedbackTokens = `\n/* Feedback Tokens */\n--vui-feedback-danger-solid: var(--vui-color-energy-red-54);\n--vui-feedback-danger-subtle: var(--vui-color-energy-red-95);\n--vui-feedback-info-solid: var(--vui-color-sea-blue-28);\n--vui-feedback-info-subtle: var(--vui-color-sky-blue-95);\n--vui-feedback-neutral-solid: var(--vui-color-warm-grey-50);\n--vui-feedback-neutral-subtle: var(--vui-color-warm-grey-90);\n--vui-feedback-success-solid: var(--vui-color-land-green-35);\n--vui-feedback-success-subtle: var(--vui-color-land-green-95);\n--vui-feedback-warning-solid: var(--vui-color-sunflower-20);\n--vui-feedback-warning-subtle: var(--vui-color-sunflower-90);\n`\n\n// Data Visualization Tokens\nexport const vuiDataTokens = `\n/* Data Visualization Tokens */\n--vui-data-black: var(--vui-color-black);\n--vui-data-cyan: var(--vui-color-cyan-43);\n--vui-data-darkblue: var(--vui-color-dark-blue-18);\n--vui-data-earth: var(--vui-color-earth-75);\n--vui-data-eucalyptus: var(--vui-color-eucalyptus-41);\n--vui-data-landgreen: var(--vui-color-land-green-41);\n--vui-data-lavender: var(--vui-color-lavender-77);\n--vui-data-orange: var(--vui-color-terracotta-50);\n--vui-data-pine: var(--vui-color-pine-31);\n--vui-data-red: var(--vui-color-energy-red-54);\n--vui-data-skyblue: var(--vui-color-sky-blue-77);\n--vui-data-sunflower: var(--vui-color-sunflower-73);\n--vui-data-terracotta: var(--vui-color-terracotta-30);\n--vui-data-warmgrey: var(--vui-color-warm-grey-56);\n--vui-data-white: var(--vui-color-white);\n`\n\n// Gradient Tokens\nexport const vuiGradientTokens = `\n/* Gradient Tokens */\n--vui-gradient-ai-1: var(--vui-color-sky-blue-95);\n--vui-gradient-ai-2: var(--vui-color-digi-green-95);\n--vui-gradient-brand-1: var(--vui-color-sky-blue-80);\n--vui-gradient-brand-2: var(--vui-color-sky-blue-95);\n--vui-gradient-brand-3: var(--vui-color-digi-green-90);\n--vui-gradient-motion-1: var(--vui-color-sky-blue-90);\n--vui-gradient-motion-2: var(--vui-color-digi-green-90);\n--vui-gradient-motion-3: var(--vui-color-sea-blue-90);\n--vui-gradient-motion-4: var(--vui-color-eucalyptus-80);\n`\n\n// Combined Exports for Backward Compatibility\nexport const vuiColorSemantics = `\n/* Color Semantics */\n${vuiSemanticForeground}\n${vuiSemanticBackground}\n`\n\n// All Design Tokens Combined\nexport const vuiNextAllTokens = `\n${vuiColorPrimitives}\n${vuiColorSemantics}\n${vuiUtilityTokens}\n${vuiNavigationTokens}\n${vuiActionTokens}\n${vuiControlTokens}\n${vuiFeedbackTokens}\n${vuiDataTokens}\n${vuiGradientTokens}\n`\n"],"mappings":"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"}

package/dist/core/vuiProvider/context.js

@@ -5,5 +5,5 @@ const [VuiContextProvider, useVuiContext] = createContext({ isOptional: true });
 
 //#endregion
 export { VuiContextProvider, useVuiContext };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=context.js.map

package/dist/core/vuiProvider/fontFaces.js

@@ -162,5 +162,5 @@ var fontFaces_default = `
 
 //#endregion
 export { fontFaces_default as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=fontFaces.js.map

package/dist/core/vuiProvider/globalStyle.d.ts

@@ -1,3 +1,4 @@
+import * as react from "react";
 import * as styled_components0 from "styled-components";
 
 //#region src/core/vuiProvider/globalStyle.d.ts
@@ -11,7 +12,7 @@ type GlobalStyleProps = {
  * - animation keyframes
  * - CSS variables for each theme value
  */
-declare const _default: styled_components0.GlobalStyleComponent<GlobalStyleProps, styled_components0.DefaultTheme>;
+declare const _default: react.NamedExoticComponent<styled_components0.ExecutionProps & GlobalStyleProps>;
 //#endregion
 export { _default };
 

package/dist/core/vuiProvider/globalStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"globalStyle.d.ts","names":[],"sources":["../../../src/core/vuiProvider/globalStyle.tsx"],"mappings":";;;KAOK,gBAAA;EACH,WAAA;AAAA;;;;;;AAAW;;cAAA,QAAA"}
+{"version":3,"file":"globalStyle.d.ts","names":[],"sources":["../../../src/core/vuiProvider/globalStyle.tsx"],"mappings":";;;;KAOK,gBAAA;EACH,WAAA;AAAA;;;;;;;AAAW;cAAA,QAAA"}

package/dist/core/vuiProvider/globalStyle.js

@@ -2,7 +2,7 @@ import { isObject } from "../../utils/assertion.js";
 import foundations_default from "../../theme/foundations/index.js";
 import { createGlobalStyle, css } from "../styled.js";
 import { bounce, fadeDown, fadeIn, fadeLeft, fadeOut, fadeRight, fadeUp, pulse, spin } from "./animations.js";
-import { noScrollClass } from "./consts.js";
+import { noScrollClass, vuiNextAllTokens } from "./consts.js";
 import fontFaces_default from "./fontFaces.js";
 
 //#region src/core/vuiProvider/globalStyle.tsx
@@ -21,6 +21,8 @@ ${fontFaces_default}
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   ${generateCSSVariables}
+  --vui-colors-focusColor: #00a1db;
+  ${vuiNextAllTokens}
 }
 
 * {
@@ -42,7 +44,8 @@ li:focus-visible,
 .vui-avatar:focus-visible,
 .vui-tag:focus-visible,
 .vui-sidemenu-item:focus-visible,
-.vui-switchTrack:focus-visible {
+.vui-switchTrack:focus-visible,
+.vui-force-focus {
   --x-ring-color: var(--vui-colors-focusColor);
   outline: var(--vui-colors-focusColor) solid 3px;
   z-index: 1;
@@ -128,5 +131,5 @@ function generateCSSVariables() {
 
 //#endregion
 export { globalStyle_default as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=globalStyle.js.map

package/dist/core/vuiProvider/globalStyle.js.map

@@ -1 +1 @@
-{"version":3,"file":"globalStyle.js","names":["fontFaces","foundations"],"sources":["../../../src/core/vuiProvider/globalStyle.tsx"],"sourcesContent":["import foundations from '../../theme/foundations'\nimport { isObject } from '../../utils'\nimport { createGlobalStyle, css } from '../styled'\nimport { bounce, fadeDown, fadeIn, fadeLeft, fadeOut, fadeRight, fadeUp, pulse, spin } from './animations'\nimport { noScrollClass } from './consts'\nimport fontFaces from './fontFaces'\n\ntype GlobalStyleProps = {\n  globalStyle?: boolean\n}\n\n/**\n * Provides global styles, such as:\n * - font face definitions\n * - font base styles (color, size, family)\n * - animation keyframes\n * - CSS variables for each theme value\n */\nexport default createGlobalStyle<GlobalStyleProps>`\n${fontFaces}\n:root {\n  font-synthesis: none;\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  ${generateCSSVariables}\n}\n\n* {\n  --x-ring-color: var(--vui-colors-focusColor);\n  // Fixes a box-shadow issue between some parent and child components\n  --x-shadow: 0 0 0 0 transparent;\n}\n\nbutton,\n.vui-avatar,\n.vui-tag,\n.vui-sidemenu-item,\n.vui-switchTrack {\n  --x-ring-color: transparent;\n}\n\nbutton:focus-visible,\nli:focus-visible,\n.vui-avatar:focus-visible,\n.vui-tag:focus-visible,\n.vui-sidemenu-item:focus-visible,\n.vui-switchTrack:focus-visible {\n  --x-ring-color: var(--vui-colors-focusColor);\n  outline: var(--vui-colors-focusColor) solid 3px;\n  z-index: 1;\n}\n\nbody.${noScrollClass} {\n  overflow: hidden !important;\n  overscroll-behavior: contain;\n}\n\n${p =>\n  p.globalStyle &&\n  css`\n    body {\n      color: sandstone.10;\n      font-family: Gantari;\n      font-size: md;\n    }\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5 {\n      color: darkBlue.18;\n    }\n  `}\n\n@keyframes vui-bounce {\n${bounce}\n}\n\n@keyframes vui-fadeDown {\n${fadeDown(20)}\n}\n\n@keyframes vui-fadeIn {\n${fadeIn}\n}\n\n@keyframes vui-fadeLeft {\n${fadeLeft(20)}\n}\n\n@keyframes vui-fadeLeftLong {\n${fadeLeft(600)}\n}\n\n@keyframes vui-fadeOut {\n${fadeOut}\n}\n\n\n@keyframes vui-fadeRight {\n${fadeRight(20)}\n}\n\n@keyframes vui-fadeRightLong {\n${fadeRight(600)}\n}\n\n@keyframes vui-fadeUp {\n${fadeUp(20)}\n}\n\n@keyframes vui-pulse {\n${pulse}\n}\n\n@keyframes vui-spin {\n${spin}\n}\n`\n\n/** Recursively maps through all theme styles and generates a set of CSS properties. */\nfunction generateCSSVariables() {\n  function computeStyle(name: string, value: any): string {\n    if (!isObject(value)) return `${name}: ${typeof value === 'string' ? value : `${value}px`};\\n`\n\n    return Object.entries(value).reduce((str, [key, value]) => {\n      return (str += computeStyle(`${name}-${key}`, value))\n    }, '')\n  }\n\n  const { animations, transformers, ...styles } = foundations\n\n  return computeStyle('--vui', styles)\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,0BAAe,iBAAmC;EAChDA,kBAAU;;;;;;IAMR,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BlB,cAAc;;;;;GAKnB,MACA,EAAE,eACF,GAAG;;;;;;;;;;;;;;IAcD;;;EAGF,OAAO;;;;EAIP,SAAS,GAAG,CAAC;;;;EAIb,OAAO;;;;EAIP,SAAS,GAAG,CAAC;;;;EAIb,SAAS,IAAI,CAAC;;;;EAId,QAAQ;;;;;EAKR,UAAU,GAAG,CAAC;;;;EAId,UAAU,IAAI,CAAC;;;;EAIf,OAAO,GAAG,CAAC;;;;EAIX,MAAM;;;;EAIN,KAAK;;;;AAKP,SAAS,uBAAuB;CAC9B,SAAS,aAAa,MAAc,OAAoB;AACtD,MAAI,CAAC,SAAS,MAAM,CAAE,QAAO,GAAG,KAAK,IAAI,OAAO,UAAU,WAAW,QAAQ,GAAG,MAAM,IAAI;AAE1F,SAAO,OAAO,QAAQ,MAAM,CAAC,QAAQ,KAAK,CAAC,KAAK,WAAW;AACzD,UAAQ,OAAO,aAAa,GAAG,KAAK,GAAG,OAAO,MAAM;KACnD,GAAG;;CAGR,MAAM,EAAE,YAAY,cAAc,GAAG,WAAWC;AAEhD,QAAO,aAAa,SAAS,OAAO"}
+{"version":3,"file":"globalStyle.js","names":["fontFaces","foundations"],"sources":["../../../src/core/vuiProvider/globalStyle.tsx"],"sourcesContent":["import foundations from '../../theme/foundations'\nimport { isObject } from '../../utils'\nimport { createGlobalStyle, css } from '../styled'\nimport { bounce, fadeDown, fadeIn, fadeLeft, fadeOut, fadeRight, fadeUp, pulse, spin } from './animations'\nimport { noScrollClass, vuiNextAllTokens } from './consts'\nimport fontFaces from './fontFaces'\n\ntype GlobalStyleProps = {\n  globalStyle?: boolean\n}\n\n/**\n * Provides global styles, such as:\n * - font face definitions\n * - font base styles (color, size, family)\n * - animation keyframes\n * - CSS variables for each theme value\n */\nexport default createGlobalStyle<GlobalStyleProps>`\n${fontFaces}\n:root {\n  font-synthesis: none;\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  ${generateCSSVariables}\n  --vui-colors-focusColor: #00a1db;\n  ${vuiNextAllTokens}\n}\n\n* {\n  --x-ring-color: var(--vui-colors-focusColor);\n  // Fixes a box-shadow issue between some parent and child components\n  --x-shadow: 0 0 0 0 transparent;\n}\n\nbutton,\n.vui-avatar,\n.vui-tag,\n.vui-sidemenu-item,\n.vui-switchTrack {\n  --x-ring-color: transparent;\n}\n\nbutton:focus-visible,\nli:focus-visible,\n.vui-avatar:focus-visible,\n.vui-tag:focus-visible,\n.vui-sidemenu-item:focus-visible,\n.vui-switchTrack:focus-visible,\n.vui-force-focus {\n  --x-ring-color: var(--vui-colors-focusColor);\n  outline: var(--vui-colors-focusColor) solid 3px;\n  z-index: 1;\n}\n\nbody.${noScrollClass} {\n  overflow: hidden !important;\n  overscroll-behavior: contain;\n}\n\n${p =>\n  p.globalStyle &&\n  css`\n    body {\n      color: sandstone.10;\n      font-family: Gantari;\n      font-size: md;\n    }\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5 {\n      color: darkBlue.18;\n    }\n  `}\n\n@keyframes vui-bounce {\n${bounce}\n}\n\n@keyframes vui-fadeDown {\n${fadeDown(20)}\n}\n\n@keyframes vui-fadeIn {\n${fadeIn}\n}\n\n@keyframes vui-fadeLeft {\n${fadeLeft(20)}\n}\n\n@keyframes vui-fadeLeftLong {\n${fadeLeft(600)}\n}\n\n@keyframes vui-fadeOut {\n${fadeOut}\n}\n\n\n@keyframes vui-fadeRight {\n${fadeRight(20)}\n}\n\n@keyframes vui-fadeRightLong {\n${fadeRight(600)}\n}\n\n@keyframes vui-fadeUp {\n${fadeUp(20)}\n}\n\n@keyframes vui-pulse {\n${pulse}\n}\n\n@keyframes vui-spin {\n${spin}\n}\n`\n\n/** Recursively maps through all theme styles and generates a set of CSS properties. */\nfunction generateCSSVariables() {\n  function computeStyle(name: string, value: any): string {\n    if (!isObject(value)) return `${name}: ${typeof value === 'string' ? value : `${value}px`};\\n`\n\n    return Object.entries(value).reduce((str, [key, value]) => {\n      return (str += computeStyle(`${name}-${key}`, value))\n    }, '')\n  }\n\n  const { animations, transformers, ...styles } = foundations\n\n  return computeStyle('--vui', styles)\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,0BAAe,iBAAmC;EAChDA,kBAAU;;;;;;IAMR,qBAAqB;;IAErB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6Bd,cAAc;;;;;GAKnB,MACA,EAAE,eACF,GAAG;;;;;;;;;;;;;;IAcD;;;EAGF,OAAO;;;;EAIP,SAAS,GAAG,CAAC;;;;EAIb,OAAO;;;;EAIP,SAAS,GAAG,CAAC;;;;EAIb,SAAS,IAAI,CAAC;;;;EAId,QAAQ;;;;;EAKR,UAAU,GAAG,CAAC;;;;EAId,UAAU,IAAI,CAAC;;;;EAIf,OAAO,GAAG,CAAC;;;;EAIX,MAAM;;;;EAIN,KAAK;;;;AAKP,SAAS,uBAAuB;CAC9B,SAAS,aAAa,MAAc,OAAoB;AACtD,MAAI,CAAC,SAAS,MAAM,CAAE,QAAO,GAAG,KAAK,IAAI,OAAO,UAAU,WAAW,QAAQ,GAAG,MAAM,IAAI;AAE1F,SAAO,OAAO,QAAQ,MAAM,CAAC,QAAQ,KAAK,CAAC,KAAK,WAAW;AACzD,UAAQ,OAAO,aAAa,GAAG,KAAK,GAAG,OAAO,MAAM;KACnD,GAAG;;CAGR,MAAM,EAAE,YAAY,cAAc,GAAG,WAAWC;AAEhD,QAAO,aAAa,SAAS,OAAO"}

package/dist/core/vuiProvider/index.d.ts

@@ -2,7 +2,7 @@ import { bounce, fadeDown, fadeIn, fadeLeft, fadeOut, fadeRight, fadeUp, pulse,
 import { VuiContextProvider, useVuiContext } from "./context.js";
 import { useOfflineMode } from "./useOfflineMode.js";
 import { useBodyScrollLock } from "./useBodyScrollLock.js";
-import { noScrollClass } from "./consts.js";
+import { noScrollClass, vuiActionAI, vuiActionBlue, vuiActionBrand, vuiActionContrast, vuiActionDanger, vuiActionEucalyptus, vuiActionGeneric, vuiActionGrey, vuiActionLavender, vuiActionSuccess, vuiActionTerracotta, vuiActionTokens, vuiActionYellow, vuiColorBase, vuiColorCyan, vuiColorDarkBlue, vuiColorDigiGreen, vuiColorEarth, vuiColorEnergyRed, vuiColorEucalyptus, vuiColorLandGreen, vuiColorLavender, vuiColorOpacityDark, vuiColorOpacityLight, vuiColorPine, vuiColorPrimitives, vuiColorSandstone, vuiColorSeaBlue, vuiColorSemantics, vuiColorSkyBlue, vuiColorSunflower, vuiColorTerracotta, vuiColorWarmGrey, vuiControlTokens, vuiDataTokens, vuiFeedbackTokens, vuiGradientTokens, vuiNavigationBackground, vuiNavigationBorder, vuiNavigationForeground, vuiNavigationTokens, vuiNextAllTokens, vuiSemanticBackground, vuiSemanticForeground, vuiUtilityBorder, vuiUtilityLoading, vuiUtilityMisc, vuiUtilityTokens } from "./consts.js";
 import { _default } from "./fontFaces.js";
 import { _default as _default$1 } from "./globalStyle.js";
 import { _default as _default$2 } from "./resetCSS.js";

package/dist/core/vuiProvider/notifyOffline.js

@@ -20,5 +20,5 @@ var notifyOffline_default = memo(NotifyOffline);
 
 //#endregion
 export { notifyOffline_default as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=notifyOffline.js.map

package/dist/core/vuiProvider/reducers.js

@@ -10,5 +10,5 @@ const genericReducer = (state, action) => state = action;
 
 //#endregion
 export { genericReducer, toastsReducer };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=reducers.js.map

package/dist/core/vuiProvider/resetCSS.d.ts

@@ -1,8 +1,9 @@
+import * as react from "react";
 import * as styled_components0 from "styled-components";
 
 //#region src/core/vuiProvider/resetCSS.d.ts
 /** Set of CSS resets to unify styles across browsers and provide good style defaults. */
-declare const _default: styled_components0.GlobalStyleComponent<{}, styled_components0.DefaultTheme>;
+declare const _default: react.NamedExoticComponent<styled_components0.ExecutionProps & object>;
 //#endregion
 export { _default };
 

package/dist/core/vuiProvider/resetCSS.js

@@ -177,5 +177,5 @@ var resetCSS_default = createGlobalStyle`
 
 //#endregion
 export { resetCSS_default as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=resetCSS.js.map

package/dist/core/vuiProvider/useBodyScrollLock.js

@@ -20,5 +20,5 @@ const useBodyScrollLock = () => {
 
 //#endregion
 export { useBodyScrollLock };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=useBodyScrollLock.js.map

package/dist/core/vuiProvider/useOfflineMode.js

@@ -18,5 +18,5 @@ const useOfflineMode = () => {
 
 //#endregion
 export { useOfflineMode };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=useOfflineMode.js.map

package/dist/core/vuiProvider/vuiProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vuiProvider.d.ts","names":[],"sources":["../../../src/core/vuiProvider/vuiProvider.tsx"],"mappings":";;;;;KAgBK,gBAAA;gDAEH,WAAA,YAFmB;EAInB,QAAA,YAEgB;EAAhB,KAAA,GAAQ,QAAA,EAFR;EAIA,aAAA;AAAA;;cAII,WAAA,EAAa,EAAA,CAAG,gBAAA,GAAmB,YAAA"}
+{"version":3,"file":"vuiProvider.d.ts","names":[],"sources":["../../../src/core/vuiProvider/vuiProvider.tsx"],"mappings":";;;;;KAgBK,gBAAA;gDAEH,WAAA,YAFG;EAIH,QAAA;EAEA,KAAA,GAAQ,QAAA,EAJR;EAMA,aAAA;AAAA;;cAII,WAAA,EAAa,EAAA,CAAG,gBAAA,GAAmB,YAAA"}

package/dist/core/vuiProvider/vuiProvider.js

@@ -45,5 +45,5 @@ const VuiProvider = ({ children, globalStyle = true, resetCSS = true, theme = de
 
 //#endregion
 export { VuiProvider as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=vuiProvider.js.map

package/dist/core/vuiProvider/vuiProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"vuiProvider.js","names":["ResetCSS","GlobalStyle","NotifyOffline","Toaster"],"sources":["../../../src/core/vuiProvider/vuiProvider.tsx"],"sourcesContent":["import type { FC } from 'react'\nimport { useReducer } from 'react'\nimport { ThemeProvider } from 'styled-components'\n\nimport { Portal } from '../../portal'\nimport type { VuiTheme } from '../../theme'\nimport defaultTheme from '../../theme'\nimport { Toaster } from '../../toast'\nimport type { ToastListItem } from '../types'\nimport type { ChildrenProp } from '../types'\nimport { VuiContextProvider } from './context'\nimport GlobalStyle from './globalStyle'\nimport NotifyOffline from './notifyOffline'\nimport { genericReducer, toastsReducer } from './reducers'\nimport ResetCSS from './resetCSS'\n\ntype VuiProviderProps = {\n  /** Adds basic styles to body @default true */\n  globalStyle?: boolean\n  /** Applies custom CSS reset @default true */\n  resetCSS?: boolean\n  /** Modified theme config using 'extendTheme' utility */\n  theme?: VuiTheme\n  /** Enables displaying offline/online toast notifications @default false */\n  notifyOffline?: boolean\n}\n\n/** Provides theme to all wrapped components and by default includes CSS reset and global styles. */\nconst VuiProvider: FC<VuiProviderProps & ChildrenProp> = ({\n  children,\n  globalStyle = true,\n  resetCSS = true,\n  theme = defaultTheme as VuiTheme,\n  notifyOffline = false,\n}) => {\n  const [toasts, toastsDispatch] = useReducer(toastsReducer, { list: [] })\n  const [portalSlot, setPortalSlot] = useReducer(genericReducer, null)\n\n  const addToast = (toast: ToastListItem) => toastsDispatch({ type: 'add', toast })\n  const removeToast = (id: string) => toastsDispatch({ type: 'remove', toast: { id } })\n\n  const context = { toasts, addToast, removeToast, setPortalSlot }\n\n  return (\n    <VuiContextProvider value={context}>\n      <ThemeProvider theme={theme}>\n        <>\n          {resetCSS && <ResetCSS />}\n          <GlobalStyle globalStyle={globalStyle} />\n          {children}\n          {notifyOffline && <NotifyOffline />}\n          <Portal>\n            {portalSlot}\n            <Toaster />\n          </Portal>\n        </>\n      </ThemeProvider>\n    </VuiContextProvider>\n  )\n}\n\nexport default VuiProvider\n"],"mappings":";;;;;;;;;;;;;;AA4BA,MAAM,eAAoD,EACxD,UACA,cAAc,MACd,WAAW,MACX,QAAQ,cACR,gBAAgB,YACZ;CACJ,MAAM,CAAC,QAAQ,kBAAkB,WAAW,eAAe,EAAE,MAAM,EAAE,EAAE,CAAC;CACxE,MAAM,CAAC,YAAY,iBAAiB,WAAW,gBAAgB,KAAK;CAEpE,MAAM,YAAY,UAAyB,eAAe;EAAE,MAAM;EAAO;EAAO,CAAC;CACjF,MAAM,eAAe,OAAe,eAAe;EAAE,MAAM;EAAU,OAAO,EAAE,IAAI;EAAE,CAAC;AAIrF,QACE,oBAAC;EAAmB,OAHN;GAAE;GAAQ;GAAU;GAAa;GAAe;YAI5D,oBAAC;GAAqB;aACpB;IACG,YAAY,oBAACA,qBAAW;IACzB,oBAACC,uBAAyB,cAAe;IACxC;IACA,iBAAiB,oBAACC,0BAAgB;IACnC,qBAAC,qBACE,YACD,oBAACC,kBAAU,IACJ;OACR;IACW;GACG"}
+{"version":3,"file":"vuiProvider.js","names":["ResetCSS","GlobalStyle","NotifyOffline","Toaster"],"sources":["../../../src/core/vuiProvider/vuiProvider.tsx"],"sourcesContent":["import type { FC } from 'react'\nimport { useReducer } from 'react'\nimport { ThemeProvider } from 'styled-components'\n\nimport { Portal } from '../../portal'\nimport type { VuiTheme } from '../../theme'\nimport defaultTheme from '../../theme'\nimport { Toaster } from '../../toast'\nimport type { ToastListItem } from '../types'\nimport type { ChildrenProp } from '../types'\nimport { VuiContextProvider } from './context'\nimport GlobalStyle from './globalStyle'\nimport NotifyOffline from './notifyOffline'\nimport { genericReducer, toastsReducer } from './reducers'\nimport ResetCSS from './resetCSS'\n\ntype VuiProviderProps = {\n  /** Adds basic styles to body @default true */\n  globalStyle?: boolean\n  /** Applies custom CSS reset @default true */\n  resetCSS?: boolean\n  /** Modified theme config using 'extendTheme' utility */\n  theme?: VuiTheme\n  /** Enables displaying offline/online toast notifications @default false */\n  notifyOffline?: boolean\n}\n\n/** Provides theme to all wrapped components and by default includes CSS reset and global styles. */\nconst VuiProvider: FC<VuiProviderProps & ChildrenProp> = ({\n  children,\n  globalStyle = true,\n  resetCSS = true,\n  theme = defaultTheme as VuiTheme,\n  notifyOffline = false,\n}) => {\n  const [toasts, toastsDispatch] = useReducer(toastsReducer, { list: [] })\n  const [portalSlot, setPortalSlot] = useReducer(genericReducer, null)\n\n  const addToast = (toast: ToastListItem) => toastsDispatch({ type: 'add', toast })\n  const removeToast = (id: string) => toastsDispatch({ type: 'remove', toast: { id } })\n\n  const context = { toasts, addToast, removeToast, setPortalSlot }\n\n  return (\n    <VuiContextProvider value={context}>\n      <ThemeProvider theme={theme}>\n        <>\n          {resetCSS && <ResetCSS />}\n          <GlobalStyle globalStyle={globalStyle} />\n          {children}\n          {notifyOffline && <NotifyOffline />}\n          <Portal>\n            {portalSlot}\n            <Toaster />\n          </Portal>\n        </>\n      </ThemeProvider>\n    </VuiContextProvider>\n  )\n}\n\nexport default VuiProvider\n"],"mappings":";;;;;;;;;;;;;;AA4BA,MAAM,eAAoD,EACxD,UACA,cAAc,MACd,WAAW,MACX,QAAQ,cACR,gBAAgB,YACZ;CACJ,MAAM,CAAC,QAAQ,kBAAkB,WAAW,eAAe,EAAE,MAAM,EAAE,EAAE,CAAC;CACxE,MAAM,CAAC,YAAY,iBAAiB,WAAW,gBAAgB,KAAK;CAEpE,MAAM,YAAY,UAAyB,eAAe;EAAE,MAAM;EAAO;EAAO,CAAC;CACjF,MAAM,eAAe,OAAe,eAAe;EAAE,MAAM;EAAU,OAAO,EAAE,IAAI;EAAE,CAAC;AAIrF,QACE,oBAAC,oBAAD;EAAoB,OAHN;GAAE;GAAQ;GAAU;GAAa;GAAe;YAI5D,oBAAC,eAAD;GAAsB;aACpB;IACG,YAAY,oBAACA,kBAAD,EAAY;IACzB,oBAACC,qBAAD,EAA0B,aAAe;IACxC;IACA,iBAAiB,oBAACC,uBAAD,EAAiB;IACnC,qBAAC,QAAD,aACG,YACD,oBAACC,eAAD,EAAW,EACJ;IACR;GACW;EACG"}

package/dist/datePicker/dateInput.js

@@ -68,5 +68,5 @@ const DateInput = ({ initialDate, onChange, onValidate, setValidateStatus, ...re
 
 //#endregion
 export { DateInput };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=dateInput.js.map

package/dist/datePicker/dateInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"dateInput.js","names":[],"sources":["../../src/datePicker/dateInput.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport type { InputProps } from '../input'\nimport { Input } from '../input'\nimport { T } from '../t'\nimport { formatDate, parseIsoDate, validateDateFormat } from '../utils'\n\ntype Props = InputProps & {\n  initialDate?: Date\n  onChange: (date?: Date) => void\n  onValidate: (date?: Date) => string\n  setValidateStatus: (inValid: boolean) => void\n}\n\nexport const DateInput = ({ initialDate, onChange, onValidate, setValidateStatus, ...rest }: Props) => {\n  const formattedInitialDate = initialDate ? formatDate(initialDate, 'YYYY-MM-DD', { timeZone: 'UTC' }) : ''\n  const [dateInput, setDateInput] = useState<string>(formattedInitialDate)\n  const [dateInputValidated, setDateInputValidated] = useState<boolean>(true)\n  const [errorMessage, setErrorMessage] = useState<string>('')\n\n  const isValidDate = (dateString: string) => {\n    if (!validateDateFormat(dateString)) return false\n    if (!parseIsoDate(dateString)) return false\n    return true\n  }\n\n  const handleOnBlur = () => {\n    setDateInputValidated(!dateInput)\n    const parsedDate = parseIsoDate(dateInput)\n    if (parsedDate) {\n      setDateInput(formatDate(parsedDate, 'YYYY-MM-DD', { timeZone: 'UTC' }))\n      const validateMessage = onValidate(parsedDate)\n      !validateMessage && onChange(parsedDate)\n      setDateInputValidated(!validateMessage)\n      setErrorMessage(validateMessage)\n    }\n  }\n\n  useEffect(() => {\n    setDateInput(formattedInitialDate)\n    const validation = onValidate(initialDate)\n    setDateInputValidated(!validation)\n    setValidateStatus(!validation)\n    setErrorMessage(validation)\n  }, [initialDate])\n\n  useEffect(() => {\n    if (dateInput) {\n      const isValidDateString = isValidDate(dateInput)\n      setValidateStatus(isValidDateString)\n      if (!validateDateFormat(dateInput)) setErrorMessage('Supported format is YYYY-MM-DD')\n      else if (!parseIsoDate(dateInput)) setErrorMessage('Invalid date')\n      else {\n        const parsedDate = parseIsoDate(dateInput)\n        const validateMessage = onValidate(parsedDate)\n        !validateMessage && onChange(parsedDate)\n        setDateInputValidated(!validateMessage)\n        setErrorMessage(validateMessage)\n      }\n    }\n  }, [dateInput])\n\n  return (\n    <Input\n      borderColor={dateInputValidated ? 'sandstone.main' : 'energyRed.main'}\n      className=\"dateInput\"\n      data-testid=\"test-date-input\"\n      errorText={!dateInputValidated && <T size=\"md\">{errorMessage}</T>}\n      onBlur={handleOnBlur}\n      onChange={e => setDateInput(e.target.value)}\n      placeholder=\"YYYY-MM-DD\"\n      size=\"md\"\n      state={!dateInputValidated && !errorMessage ? 'error' : 'default'}\n      value={dateInput}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;;AAcA,MAAa,aAAa,EAAE,aAAa,UAAU,YAAY,mBAAmB,GAAG,WAAkB;CACrG,MAAM,uBAAuB,cAAc,WAAW,aAAa,cAAc,EAAE,UAAU,OAAO,CAAC,GAAG;CACxG,MAAM,CAAC,WAAW,gBAAgB,SAAiB,qBAAqB;CACxE,MAAM,CAAC,oBAAoB,yBAAyB,SAAkB,KAAK;CAC3E,MAAM,CAAC,cAAc,mBAAmB,SAAiB,GAAG;CAE5D,MAAM,eAAe,eAAuB;AAC1C,MAAI,CAAC,mBAAmB,WAAW,CAAE,QAAO;AAC5C,MAAI,CAAC,aAAa,WAAW,CAAE,QAAO;AACtC,SAAO;;CAGT,MAAM,qBAAqB;AACzB,wBAAsB,CAAC,UAAU;EACjC,MAAM,aAAa,aAAa,UAAU;AAC1C,MAAI,YAAY;AACd,gBAAa,WAAW,YAAY,cAAc,EAAE,UAAU,OAAO,CAAC,CAAC;GACvE,MAAM,kBAAkB,WAAW,WAAW;AAC9C,IAAC,mBAAmB,SAAS,WAAW;AACxC,yBAAsB,CAAC,gBAAgB;AACvC,mBAAgB,gBAAgB;;;AAIpC,iBAAgB;AACd,eAAa,qBAAqB;EAClC,MAAM,aAAa,WAAW,YAAY;AAC1C,wBAAsB,CAAC,WAAW;AAClC,oBAAkB,CAAC,WAAW;AAC9B,kBAAgB,WAAW;IAC1B,CAAC,YAAY,CAAC;AAEjB,iBAAgB;AACd,MAAI,WAAW;AAEb,qBAD0B,YAAY,UAAU,CACZ;AACpC,OAAI,CAAC,mBAAmB,UAAU,CAAE,iBAAgB,iCAAiC;YAC5E,CAAC,aAAa,UAAU,CAAE,iBAAgB,eAAe;QAC7D;IACH,MAAM,aAAa,aAAa,UAAU;IAC1C,MAAM,kBAAkB,WAAW,WAAW;AAC9C,KAAC,mBAAmB,SAAS,WAAW;AACxC,0BAAsB,CAAC,gBAAgB;AACvC,oBAAgB,gBAAgB;;;IAGnC,CAAC,UAAU,CAAC;AAEf,QACE,oBAAC;EACC,aAAa,qBAAqB,mBAAmB;EACrD,WAAU;EACV,eAAY;EACZ,WAAW,CAAC,sBAAsB,oBAAC;GAAE,MAAK;aAAM;IAAiB;EACjE,QAAQ;EACR,WAAU,MAAK,aAAa,EAAE,OAAO,MAAM;EAC3C,aAAY;EACZ,MAAK;EACL,OAAO,CAAC,sBAAsB,CAAC,eAAe,UAAU;EACxD,OAAO;EACP,GAAI;GACJ"}
+{"version":3,"file":"dateInput.js","names":[],"sources":["../../src/datePicker/dateInput.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport type { InputProps } from '../input'\nimport { Input } from '../input'\nimport { T } from '../t'\nimport { formatDate, parseIsoDate, validateDateFormat } from '../utils'\n\ntype Props = InputProps & {\n  initialDate?: Date\n  onChange: (date?: Date) => void\n  onValidate: (date?: Date) => string\n  setValidateStatus: (inValid: boolean) => void\n}\n\nexport const DateInput = ({ initialDate, onChange, onValidate, setValidateStatus, ...rest }: Props) => {\n  const formattedInitialDate = initialDate ? formatDate(initialDate, 'YYYY-MM-DD', { timeZone: 'UTC' }) : ''\n  const [dateInput, setDateInput] = useState<string>(formattedInitialDate)\n  const [dateInputValidated, setDateInputValidated] = useState<boolean>(true)\n  const [errorMessage, setErrorMessage] = useState<string>('')\n\n  const isValidDate = (dateString: string) => {\n    if (!validateDateFormat(dateString)) return false\n    if (!parseIsoDate(dateString)) return false\n    return true\n  }\n\n  const handleOnBlur = () => {\n    setDateInputValidated(!dateInput)\n    const parsedDate = parseIsoDate(dateInput)\n    if (parsedDate) {\n      setDateInput(formatDate(parsedDate, 'YYYY-MM-DD', { timeZone: 'UTC' }))\n      const validateMessage = onValidate(parsedDate)\n      !validateMessage && onChange(parsedDate)\n      setDateInputValidated(!validateMessage)\n      setErrorMessage(validateMessage)\n    }\n  }\n\n  useEffect(() => {\n    setDateInput(formattedInitialDate)\n    const validation = onValidate(initialDate)\n    setDateInputValidated(!validation)\n    setValidateStatus(!validation)\n    setErrorMessage(validation)\n  }, [initialDate])\n\n  useEffect(() => {\n    if (dateInput) {\n      const isValidDateString = isValidDate(dateInput)\n      setValidateStatus(isValidDateString)\n      if (!validateDateFormat(dateInput)) setErrorMessage('Supported format is YYYY-MM-DD')\n      else if (!parseIsoDate(dateInput)) setErrorMessage('Invalid date')\n      else {\n        const parsedDate = parseIsoDate(dateInput)\n        const validateMessage = onValidate(parsedDate)\n        !validateMessage && onChange(parsedDate)\n        setDateInputValidated(!validateMessage)\n        setErrorMessage(validateMessage)\n      }\n    }\n  }, [dateInput])\n\n  return (\n    <Input\n      borderColor={dateInputValidated ? 'sandstone.main' : 'energyRed.main'}\n      className=\"dateInput\"\n      data-testid=\"test-date-input\"\n      errorText={!dateInputValidated && <T size=\"md\">{errorMessage}</T>}\n      onBlur={handleOnBlur}\n      onChange={e => setDateInput(e.target.value)}\n      placeholder=\"YYYY-MM-DD\"\n      size=\"md\"\n      state={!dateInputValidated && !errorMessage ? 'error' : 'default'}\n      value={dateInput}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;;AAcA,MAAa,aAAa,EAAE,aAAa,UAAU,YAAY,mBAAmB,GAAG,WAAkB;CACrG,MAAM,uBAAuB,cAAc,WAAW,aAAa,cAAc,EAAE,UAAU,OAAO,CAAC,GAAG;CACxG,MAAM,CAAC,WAAW,gBAAgB,SAAiB,qBAAqB;CACxE,MAAM,CAAC,oBAAoB,yBAAyB,SAAkB,KAAK;CAC3E,MAAM,CAAC,cAAc,mBAAmB,SAAiB,GAAG;CAE5D,MAAM,eAAe,eAAuB;AAC1C,MAAI,CAAC,mBAAmB,WAAW,CAAE,QAAO;AAC5C,MAAI,CAAC,aAAa,WAAW,CAAE,QAAO;AACtC,SAAO;;CAGT,MAAM,qBAAqB;AACzB,wBAAsB,CAAC,UAAU;EACjC,MAAM,aAAa,aAAa,UAAU;AAC1C,MAAI,YAAY;AACd,gBAAa,WAAW,YAAY,cAAc,EAAE,UAAU,OAAO,CAAC,CAAC;GACvE,MAAM,kBAAkB,WAAW,WAAW;AAC9C,IAAC,mBAAmB,SAAS,WAAW;AACxC,yBAAsB,CAAC,gBAAgB;AACvC,mBAAgB,gBAAgB;;;AAIpC,iBAAgB;AACd,eAAa,qBAAqB;EAClC,MAAM,aAAa,WAAW,YAAY;AAC1C,wBAAsB,CAAC,WAAW;AAClC,oBAAkB,CAAC,WAAW;AAC9B,kBAAgB,WAAW;IAC1B,CAAC,YAAY,CAAC;AAEjB,iBAAgB;AACd,MAAI,WAAW;AAEb,qBAD0B,YAAY,UAAU,CACZ;AACpC,OAAI,CAAC,mBAAmB,UAAU,CAAE,iBAAgB,iCAAiC;YAC5E,CAAC,aAAa,UAAU,CAAE,iBAAgB,eAAe;QAC7D;IACH,MAAM,aAAa,aAAa,UAAU;IAC1C,MAAM,kBAAkB,WAAW,WAAW;AAC9C,KAAC,mBAAmB,SAAS,WAAW;AACxC,0BAAsB,CAAC,gBAAgB;AACvC,oBAAgB,gBAAgB;;;IAGnC,CAAC,UAAU,CAAC;AAEf,QACE,oBAAC,OAAD;EACE,aAAa,qBAAqB,mBAAmB;EACrD,WAAU;EACV,eAAY;EACZ,WAAW,CAAC,sBAAsB,oBAAC,GAAD;GAAG,MAAK;aAAM;GAAiB;EACjE,QAAQ;EACR,WAAU,MAAK,aAAa,EAAE,OAAO,MAAM;EAC3C,aAAY;EACZ,MAAK;EACL,OAAO,CAAC,sBAAsB,CAAC,eAAe,UAAU;EACxD,OAAO;EACP,GAAI;EACJ"}

package/dist/datePicker/datePicker.d.ts

@@ -1,7 +1,5 @@
 import { VuiComponent } from "../core/vui.js";
 import { DatePickerProps } from "./datePicker.types.js";
-import "../index.js";
-
 //#region src/datePicker/datePicker.d.ts
 /** Select or input a date. */
 declare const DatePicker: VuiComponent<"span", DatePickerProps>;

package/dist/datePicker/datePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"datePicker.d.ts","names":[],"sources":["../../src/datePicker/datePicker.tsx"],"mappings":";;;;;;cAaa,UAAA,EAAU,YAAA,SAAA,eAAA"}
+{"version":3,"file":"datePicker.d.ts","names":[],"sources":["../../src/datePicker/datePicker.tsx"],"mappings":";;;;cAaa,UAAA,EAAU,YAAA,SAAA,eAAA"}

package/dist/datePicker/datePicker.js

@@ -25,7 +25,7 @@ const DatePicker = vui((props, ref) => {
 	const isStartDateInRange = (date) => !!boundaries?.startDate && !!date ? date.getTime() - boundaries.startDate.getTime() >= 0 : true;
 	const isEndDateInRange = (date) => !!boundaries?.endDate && !!date ? date.getTime() - boundaries.endDate.getTime() <= 0 : true;
 	const isValidDateRange = (date) => {
-		return date >= new Date(minDateTimestamp) || date <= new Date(maxDateTimestamp);
+		return date >= new Date("1753-01-02T00:00:00Z") || date <= new Date("9000-12-31T23:59:59Z");
 	};
 	useEffect(() => {
 		if (!isOpen) {
@@ -163,5 +163,5 @@ DatePicker.displayName = "DatePicker";
 
 //#endregion
 export { DatePicker as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=datePicker.js.map

package/dist/datePicker/datePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"datePicker.js","names":[],"sources":["../../src/datePicker/datePicker.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport Box from '../box'\nimport Button, { LineButton } from '../button'\nimport type { DateRange } from '../calendar'\nimport Calendar, { maxDateTimestamp, minDateTimestamp } from '../calendar'\nimport { omitThemingProps, useStyleConfig, vui } from '../core'\nimport Popover from '../popover'\nimport { cs } from '../utils'\nimport { DateInput } from './dateInput'\nimport type { DatePickerProps } from './datePicker.types'\n\n/** Select or input a date. */\nexport const DatePicker = vui<'span', DatePickerProps>((props, ref) => {\n  const {\n    autoOpened,\n    boundaries,\n    popupPosition,\n    placement,\n    selectedDate: selectedDateProps,\n    showClearButton,\n    slotBottom,\n    slotTop,\n    onSelected,\n    children,\n    className,\n    ...rest\n  } = omitThemingProps(props)\n  const styles = useStyleConfig('DatePicker', props)\n\n  const [selectedDate, setSelectedDate] = useState<any>(selectedDateProps)\n  const [isOpen, setIsOpen] = useState(!selectedDate && autoOpened)\n  const [isInvalidInputDate, setIsInvalidInputDate] = useState(true)\n  const [isInvalidSelectedDate, setIsInvalidSelectedDate] = useState(!selectedDate)\n  const initialDateRef = useRef<Date | undefined>(selectedDateProps)\n  const isClearButtonVisible = showClearButton && initialDateRef.current\n\n  const isStartDateInRange = (date: Date) =>\n    !!boundaries?.startDate && !!date ? date.getTime() - boundaries.startDate.getTime() >= 0 : true\n\n  const isEndDateInRange = (date: Date) =>\n    !!boundaries?.endDate && !!date ? date.getTime() - boundaries.endDate.getTime() <= 0 : true\n\n  const isValidDateRange = (date: Date) => {\n    const minDateTime = new Date(minDateTimestamp)\n    const maxDateTime = new Date(maxDateTimestamp)\n    return date >= minDateTime || date <= maxDateTime\n  }\n\n  useEffect(() => {\n    if (!isOpen) {\n      setSelectedDate(selectedDateProps)\n      initialDateRef.current = selectedDateProps\n    }\n  }, [isOpen, selectedDateProps])\n\n  useEffect(() => {\n    setIsInvalidSelectedDate(\n      (selectedDate && !isStartDateInRange(selectedDate)) ||\n        (selectedDate && !isEndDateInRange(selectedDate)) ||\n        (selectedDate && !isValidDateRange(selectedDate)) ||\n        !selectedDate,\n    )\n  }, [selectedDate])\n\n  const onApplyDates = (date?: Date) => {\n    onSelected?.(date)\n    initialDateRef.current = date\n    setIsOpen(false)\n  }\n\n  const onClear = () => {\n    onClose()\n    onSelected?.(undefined)\n  }\n\n  const onClose = () => {\n    setSelectedDate(undefined)\n    setIsOpen(false)\n  }\n\n  const onToggle = () => {\n    if (isOpen) onClose()\n    setIsOpen(!isOpen)\n  }\n\n  const selectDate = (range: DateRange) => setSelectedDate(range?.startDate)\n\n  const onDateInputValidate = (date?: Date) => {\n    const minDateTime = new Date(minDateTimestamp)\n    const maxDateTime = new Date(maxDateTimestamp)\n\n    if (date) {\n      const conditions: [boolean, string][] = [\n        [isNaN(date.getTime()), 'Supported format is YYYY-MM-DD'],\n        [date < minDateTime, 'Invalid date, the minimum date time is 1753-01-02'],\n        [date > maxDateTime, 'Invalid date, the maximum date time is 9000-12-31'],\n        [!!boundaries?.startDate && !isStartDateInRange(date), 'Invalid date'],\n        [!!boundaries?.endDate && !isEndDateInRange(date), 'Invalid date'],\n      ]\n      const [validateErrorPair] = conditions.filter(([result]) => result)\n\n      if (validateErrorPair) {\n        const [_, message] = validateErrorPair\n        setIsInvalidInputDate(true)\n        return message\n      }\n    }\n    return ''\n  }\n\n  return (\n    <Box className={cs('vui-datePicker', className)} position=\"relative\" ref={ref} {...styles} {...rest}>\n      <Popover\n        isOpen={isOpen}\n        onClose={() => setIsOpen(false)}\n        placement={placement ? placement : popupPosition === 'right' ? 'bottom-end' : undefined}\n      >\n        <Popover.Trigger as={Box} onClick={onToggle}>\n          {children}\n        </Popover.Trigger>\n        <Popover.Content column>\n          {!!slotTop && <Box px={2}>{slotTop}</Box>}\n          <Box display=\"block\" mb={0} mt={2} mx={2}>\n            <DateInput\n              autoFocus\n              initialDate={selectedDate}\n              onChange={newDate => setSelectedDate(newDate)}\n              onValidate={onDateInputValidate}\n              setValidateStatus={inValid => setIsInvalidInputDate(!inValid)}\n            />\n          </Box>\n          <Box mx={2} my={1}>\n            <Calendar\n              boundaries={boundaries ?? { startDate: undefined, endDate: undefined }}\n              fixedNumberOfWeeks\n              fontWeight={500}\n              minH={200}\n              mode=\"exact\"\n              onSelectDates={range => selectDate(range)}\n              selectedDates={{ startDate: selectedDate, endDate: undefined }}\n              w=\"100%\"\n            />\n          </Box>\n          <Box overflow=\"unset\">\n            <Box alignItems=\"center\" flex={1} ml=\"auto\" pb={2} px={2}>\n              {isClearButtonVisible && (\n                <LineButton flex={1} onClick={onClear} size=\"md\">\n                  Clear\n                </LineButton>\n              )}\n              <Button\n                disabled={isInvalidSelectedDate || isInvalidInputDate}\n                flex={1}\n                ml={isClearButtonVisible ? 1 : 0}\n                onClick={() => onApplyDates(selectedDate)}\n                size=\"md\"\n              >\n                Apply\n              </Button>\n            </Box>\n          </Box>\n          {!!slotBottom && <Box px={2}>{slotBottom}</Box>}\n        </Popover.Content>\n      </Popover>\n    </Box>\n  )\n})\n\nDatePicker.displayName = 'DatePicker'\n\nexport default DatePicker\n"],"mappings":"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"}
+{"version":3,"file":"datePicker.js","names":[],"sources":["../../src/datePicker/datePicker.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport Box from '../box'\nimport Button, { LineButton } from '../button'\nimport type { DateRange } from '../calendar'\nimport Calendar, { maxDateTimestamp, minDateTimestamp } from '../calendar'\nimport { omitThemingProps, useStyleConfig, vui } from '../core'\nimport Popover from '../popover'\nimport { cs } from '../utils'\nimport { DateInput } from './dateInput'\nimport type { DatePickerProps } from './datePicker.types'\n\n/** Select or input a date. */\nexport const DatePicker = vui<'span', DatePickerProps>((props, ref) => {\n  const {\n    autoOpened,\n    boundaries,\n    popupPosition,\n    placement,\n    selectedDate: selectedDateProps,\n    showClearButton,\n    slotBottom,\n    slotTop,\n    onSelected,\n    children,\n    className,\n    ...rest\n  } = omitThemingProps(props)\n  const styles = useStyleConfig('DatePicker', props)\n\n  const [selectedDate, setSelectedDate] = useState<any>(selectedDateProps)\n  const [isOpen, setIsOpen] = useState(!selectedDate && autoOpened)\n  const [isInvalidInputDate, setIsInvalidInputDate] = useState(true)\n  const [isInvalidSelectedDate, setIsInvalidSelectedDate] = useState(!selectedDate)\n  const initialDateRef = useRef<Date | undefined>(selectedDateProps)\n  const isClearButtonVisible = showClearButton && initialDateRef.current\n\n  const isStartDateInRange = (date: Date) =>\n    !!boundaries?.startDate && !!date ? date.getTime() - boundaries.startDate.getTime() >= 0 : true\n\n  const isEndDateInRange = (date: Date) =>\n    !!boundaries?.endDate && !!date ? date.getTime() - boundaries.endDate.getTime() <= 0 : true\n\n  const isValidDateRange = (date: Date) => {\n    const minDateTime = new Date(minDateTimestamp)\n    const maxDateTime = new Date(maxDateTimestamp)\n    return date >= minDateTime || date <= maxDateTime\n  }\n\n  useEffect(() => {\n    if (!isOpen) {\n      setSelectedDate(selectedDateProps)\n      initialDateRef.current = selectedDateProps\n    }\n  }, [isOpen, selectedDateProps])\n\n  useEffect(() => {\n    setIsInvalidSelectedDate(\n      (selectedDate && !isStartDateInRange(selectedDate)) ||\n        (selectedDate && !isEndDateInRange(selectedDate)) ||\n        (selectedDate && !isValidDateRange(selectedDate)) ||\n        !selectedDate,\n    )\n  }, [selectedDate])\n\n  const onApplyDates = (date?: Date) => {\n    onSelected?.(date)\n    initialDateRef.current = date\n    setIsOpen(false)\n  }\n\n  const onClear = () => {\n    onClose()\n    onSelected?.(undefined)\n  }\n\n  const onClose = () => {\n    setSelectedDate(undefined)\n    setIsOpen(false)\n  }\n\n  const onToggle = () => {\n    if (isOpen) onClose()\n    setIsOpen(!isOpen)\n  }\n\n  const selectDate = (range: DateRange) => setSelectedDate(range?.startDate)\n\n  const onDateInputValidate = (date?: Date) => {\n    const minDateTime = new Date(minDateTimestamp)\n    const maxDateTime = new Date(maxDateTimestamp)\n\n    if (date) {\n      const conditions: [boolean, string][] = [\n        [isNaN(date.getTime()), 'Supported format is YYYY-MM-DD'],\n        [date < minDateTime, 'Invalid date, the minimum date time is 1753-01-02'],\n        [date > maxDateTime, 'Invalid date, the maximum date time is 9000-12-31'],\n        [!!boundaries?.startDate && !isStartDateInRange(date), 'Invalid date'],\n        [!!boundaries?.endDate && !isEndDateInRange(date), 'Invalid date'],\n      ]\n      const [validateErrorPair] = conditions.filter(([result]) => result)\n\n      if (validateErrorPair) {\n        const [_, message] = validateErrorPair\n        setIsInvalidInputDate(true)\n        return message\n      }\n    }\n    return ''\n  }\n\n  return (\n    <Box className={cs('vui-datePicker', className)} position=\"relative\" ref={ref} {...styles} {...rest}>\n      <Popover\n        isOpen={isOpen}\n        onClose={() => setIsOpen(false)}\n        placement={placement ? placement : popupPosition === 'right' ? 'bottom-end' : undefined}\n      >\n        <Popover.Trigger as={Box} onClick={onToggle}>\n          {children}\n        </Popover.Trigger>\n        <Popover.Content column>\n          {!!slotTop && <Box px={2}>{slotTop}</Box>}\n          <Box display=\"block\" mb={0} mt={2} mx={2}>\n            <DateInput\n              autoFocus\n              initialDate={selectedDate}\n              onChange={newDate => setSelectedDate(newDate)}\n              onValidate={onDateInputValidate}\n              setValidateStatus={inValid => setIsInvalidInputDate(!inValid)}\n            />\n          </Box>\n          <Box mx={2} my={1}>\n            <Calendar\n              boundaries={boundaries ?? { startDate: undefined, endDate: undefined }}\n              fixedNumberOfWeeks\n              fontWeight={500}\n              minH={200}\n              mode=\"exact\"\n              onSelectDates={range => selectDate(range)}\n              selectedDates={{ startDate: selectedDate, endDate: undefined }}\n              w=\"100%\"\n            />\n          </Box>\n          <Box overflow=\"unset\">\n            <Box alignItems=\"center\" flex={1} ml=\"auto\" pb={2} px={2}>\n              {isClearButtonVisible && (\n                <LineButton flex={1} onClick={onClear} size=\"md\">\n                  Clear\n                </LineButton>\n              )}\n              <Button\n                disabled={isInvalidSelectedDate || isInvalidInputDate}\n                flex={1}\n                ml={isClearButtonVisible ? 1 : 0}\n                onClick={() => onApplyDates(selectedDate)}\n                size=\"md\"\n              >\n                Apply\n              </Button>\n            </Box>\n          </Box>\n          {!!slotBottom && <Box px={2}>{slotBottom}</Box>}\n        </Popover.Content>\n      </Popover>\n    </Box>\n  )\n})\n\nDatePicker.displayName = 'DatePicker'\n\nexport default DatePicker\n"],"mappings":";;;;;;;;;;;;;;;AAaA,MAAa,aAAa,KAA8B,OAAO,QAAQ;CACrE,MAAM,EACJ,YACA,YACA,eACA,WACA,cAAc,mBACd,iBACA,YACA,SACA,YACA,UACA,WACA,GAAG,SACD,iBAAiB,MAAM;CAC3B,MAAM,SAAS,eAAe,cAAc,MAAM;CAElD,MAAM,CAAC,cAAc,mBAAmB,SAAc,kBAAkB;CACxE,MAAM,CAAC,QAAQ,aAAa,SAAS,CAAC,gBAAgB,WAAW;CACjE,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,KAAK;CAClE,MAAM,CAAC,uBAAuB,4BAA4B,SAAS,CAAC,aAAa;CACjF,MAAM,iBAAiB,OAAyB,kBAAkB;CAClE,MAAM,uBAAuB,mBAAmB,eAAe;CAE/D,MAAM,sBAAsB,SAC1B,CAAC,CAAC,YAAY,aAAa,CAAC,CAAC,OAAO,KAAK,SAAS,GAAG,WAAW,UAAU,SAAS,IAAI,IAAI;CAE7F,MAAM,oBAAoB,SACxB,CAAC,CAAC,YAAY,WAAW,CAAC,CAAC,OAAO,KAAK,SAAS,GAAG,WAAW,QAAQ,SAAS,IAAI,IAAI;CAEzF,MAAM,oBAAoB,SAAe;AAGvC,SAAO,QAFa,IAAI,4BAAsB,IAEhB,QADV,IAAI,4BAAsB;;AAIhD,iBAAgB;AACd,MAAI,CAAC,QAAQ;AACX,mBAAgB,kBAAkB;AAClC,kBAAe,UAAU;;IAE1B,CAAC,QAAQ,kBAAkB,CAAC;AAE/B,iBAAgB;AACd,2BACG,gBAAgB,CAAC,mBAAmB,aAAa,IAC/C,gBAAgB,CAAC,iBAAiB,aAAa,IAC/C,gBAAgB,CAAC,iBAAiB,aAAa,IAChD,CAAC,aACJ;IACA,CAAC,aAAa,CAAC;CAElB,MAAM,gBAAgB,SAAgB;AACpC,eAAa,KAAK;AAClB,iBAAe,UAAU;AACzB,YAAU,MAAM;;CAGlB,MAAM,gBAAgB;AACpB,WAAS;AACT,eAAa,OAAU;;CAGzB,MAAM,gBAAgB;AACpB,kBAAgB,OAAU;AAC1B,YAAU,MAAM;;CAGlB,MAAM,iBAAiB;AACrB,MAAI,OAAQ,UAAS;AACrB,YAAU,CAAC,OAAO;;CAGpB,MAAM,cAAc,UAAqB,gBAAgB,OAAO,UAAU;CAE1E,MAAM,uBAAuB,SAAgB;EAC3C,MAAM,cAAc,IAAI,KAAK,iBAAiB;EAC9C,MAAM,cAAc,IAAI,KAAK,iBAAiB;AAE9C,MAAI,MAAM;GAQR,MAAM,CAAC,qBAPiC;IACtC,CAAC,MAAM,KAAK,SAAS,CAAC,EAAE,iCAAiC;IACzD,CAAC,OAAO,aAAa,oDAAoD;IACzE,CAAC,OAAO,aAAa,oDAAoD;IACzE,CAAC,CAAC,CAAC,YAAY,aAAa,CAAC,mBAAmB,KAAK,EAAE,eAAe;IACtE,CAAC,CAAC,CAAC,YAAY,WAAW,CAAC,iBAAiB,KAAK,EAAE,eAAe;IACnE,CACsC,QAAQ,CAAC,YAAY,OAAO;AAEnE,OAAI,mBAAmB;IACrB,MAAM,CAAC,GAAG,WAAW;AACrB,0BAAsB,KAAK;AAC3B,WAAO;;;AAGX,SAAO;;AAGT,QACE,oBAAC,KAAD;EAAK,WAAW,GAAG,kBAAkB,UAAU;EAAE,UAAS;EAAgB;EAAK,GAAI;EAAQ,GAAI;YAC7F,qBAAC,SAAD;GACU;GACR,eAAe,UAAU,MAAM;GAC/B,WAAW,YAAY,YAAY,kBAAkB,UAAU,eAAe;aAHhF,CAKE,oBAAC,QAAQ,SAAT;IAAiB,IAAI;IAAK,SAAS;IAChC;IACe,GAClB,qBAAC,QAAQ,SAAT;IAAiB;cAAjB;KACG,CAAC,CAAC,WAAW,oBAAC,KAAD;MAAK,IAAI;gBAAI;MAAc;KACzC,oBAAC,KAAD;MAAK,SAAQ;MAAQ,IAAI;MAAG,IAAI;MAAG,IAAI;gBACrC,oBAAC,WAAD;OACE;OACA,aAAa;OACb,WAAU,YAAW,gBAAgB,QAAQ;OAC7C,YAAY;OACZ,oBAAmB,YAAW,sBAAsB,CAAC,QAAQ;OAC7D;MACE;KACN,oBAAC,KAAD;MAAK,IAAI;MAAG,IAAI;gBACd,oBAAC,UAAD;OACE,YAAY,cAAc;QAAE,WAAW;QAAW,SAAS;QAAW;OACtE;OACA,YAAY;OACZ,MAAM;OACN,MAAK;OACL,gBAAe,UAAS,WAAW,MAAM;OACzC,eAAe;QAAE,WAAW;QAAc,SAAS;QAAW;OAC9D,GAAE;OACF;MACE;KACN,oBAAC,KAAD;MAAK,UAAS;gBACZ,qBAAC,KAAD;OAAK,YAAW;OAAS,MAAM;OAAG,IAAG;OAAO,IAAI;OAAG,IAAI;iBAAvD,CACG,wBACC,oBAAC,YAAD;QAAY,MAAM;QAAG,SAAS;QAAS,MAAK;kBAAK;QAEpC,GAEf,oBAAC,QAAD;QACE,UAAU,yBAAyB;QACnC,MAAM;QACN,IAAI,uBAAuB,IAAI;QAC/B,eAAe,aAAa,aAAa;QACzC,MAAK;kBACN;QAEQ,EACL;;MACF;KACL,CAAC,CAAC,cAAc,oBAAC,KAAD;MAAK,IAAI;gBAAI;MAAiB;KAC/B;MACV;;EACN;EAER;AAEF,WAAW,cAAc"}

package/dist/datePicker/datePicker.types.d.ts

@@ -1,8 +1,6 @@
 import { ThemingProps } from "../theme/types.js";
 import { BoxProps } from "../box/box.types.js";
-import "../box/index.js";
 import { DateRange } from "../calendar/calendar.types.js";
-import "../calendar/index.js";
 import { ReactNode } from "react";
 import { Placement } from "@floating-ui/react";
 

package/dist/datePicker/datePicker.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"datePicker.types.d.ts","names":[],"sources":["../../src/datePicker/datePicker.types.ts"],"mappings":";;;;;;;;;KAOY,uBAAA;AAAA,KAEA,eAAA,GAAkB,IAAA,CAAK,QAAA,wBACjC,YAAA;mHAEE,UAAA,YALQ;EAOR,UAAA,GAAa,SAAA;EAEb,aAAA,GAAgB,uBAAA,EATe;EAW/B,SAAA,GAAY,SAAA,EATW;EAWvB,YAAA,GAAe,IAAA,EAXgB;EAa/B,eAAA,YAZF;EAcE,UAAA,GAAa,SAAA,EARG;EAUhB,OAAA,GAAU,SAAA,EANK;EAQf,UAAA,IAAc,IAAA,GAAO,IAAA;AAAA"}
+{"version":3,"file":"datePicker.types.d.ts","names":[],"sources":["../../src/datePicker/datePicker.types.ts"],"mappings":";;;;;;;KAOY,uBAAA;AAAA,KAEA,eAAA,GAAkB,IAAA,CAAK,QAAA,wBACjC,YAAA;mHAEE,UAAA;EAEA,UAAA,GAAa,SAAA,EAPkB;EAS/B,aAAA,GAAgB,uBAAA,EATe;EAW/B,SAAA,GAAY,SAAA,EATJ;EAWR,YAAA,GAAe,IAAA;EAEf,eAAA,YAb0B;EAe1B,UAAA,GAAa,SAAA,EAVA;EAYb,OAAA,GAAU,SAAA,EARE;EAUZ,UAAA,IAAc,IAAA,GAAO,IAAA;AAAA"}

package/dist/datePicker/theme.js

@@ -12,5 +12,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=theme.js.map

package/dist/definition/definition.d.ts

@@ -1,15 +1,14 @@
-import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
 import { DefinitionProps } from "./definition.types.js";
-import "../index.js";
 import * as styled_components0 from "styled-components";
+import * as styled_components_dist_types0 from "styled-components/dist/types";
 
 //#region src/definition/definition.d.ts
 /**
  * Properties are definition lists
  * */
-declare const DefinitionVerticalBase: styled_components0.StyledComponent<"dl", styled_components0.DefaultTheme, SystemProps, never>;
-declare const DefinitionHorizontalBase: styled_components0.StyledComponent<"dl", styled_components0.DefaultTheme, SystemProps, never>;
+declare const DefinitionVerticalBase: styled_components_dist_types0.IStyledComponentBase<"web", styled_components0.FastOmit<any, never>> & string;
+declare const DefinitionHorizontalBase: styled_components_dist_types0.IStyledComponentBase<"web", styled_components0.FastOmit<any, never>> & string;
 declare const Definition: VuiComponent<"dl", DefinitionProps>;
 //#endregion
 export { Definition, DefinitionHorizontalBase, DefinitionVerticalBase };

package/dist/definition/definition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"definition.d.ts","names":[],"sources":["../../src/definition/definition.tsx"],"mappings":";;;;;;;;;;cAQa,sBAAA,EAAsB,kBAAA,CAAA,eAAA,OAqBlC,kBAAA,CArBkC,YAAA,EAAA,WAAA;AAAA,cAuBtB,wBAAA,EAAwB,kBAAA,CAAA,eAAA,OA+BpC,kBAAA,CA/BoC,YAAA,EAAA,WAAA;AAAA,cAiCxB,UAAA,EAAU,YAAA,OAAA,eAAA"}
+{"version":3,"file":"definition.d.ts","names":[],"sources":["../../src/definition/definition.tsx"],"mappings":";;;;;;;;;cAQa,sBAAA,EAAsB,6BAAA,CAAA,oBAAA,QAqBlC,kBAAA,CArBkC,QAAA;AAAA,cAuBtB,wBAAA,EAAwB,6BAAA,CAAA,oBAAA,QA+BpC,kBAAA,CA/BoC,QAAA;AAAA,cAiCxB,UAAA,EAAU,YAAA,OAAA,eAAA"}

package/dist/definition/definition.js

@@ -90,5 +90,5 @@ Definition.displayName = "Definition";
 
 //#endregion
 export { DefinitionHorizontalBase, DefinitionVerticalBase, Definition as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=definition.js.map

package/dist/definition/definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"definition.js","names":[],"sources":["../../src/definition/definition.tsx"],"sourcesContent":["import { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport type { DefinitionProps } from './definition.types'\nimport { DefinitionContent } from './definitionContent'\n\n/**\n * Properties are definition lists\n * */\nexport const DefinitionVerticalBase = styled.dlBox`\n  display: grid;\n  gap: 1em;\n  grid-template-columns: repeat(auto-fit, minmax(10em, 20em));\n\n  .vui-definitionItemWrapper {\n    display: flex;\n    flex-direction: column;\n  }\n\n  dt {\n    display: inline-flex;\n  }\n\n  dd {\n    white-space: pre-wrap;\n  }\n\n  dd > * {\n    margin-left: 0 !important;\n  }\n`\n\nexport const DefinitionHorizontalBase = styled.dlBox`\n  padding: 10px;\n  display: grid;\n  gap: 0;\n\n  .vui-definitionItemWrapper {\n    display: flex;\n    flex-direction: column;\n    @media (min-width: 1024px) {\n      flex-direction: row;\n    }\n  }\n\n  dt,\n  dd {\n    display: inline-flex;\n    padding-left: 5px;\n  }\n\n  dt {\n    width: 20%;\n    min-width: 130px;\n  }\n\n  dd {\n    white-space: pre-wrap;\n  }\n\n  dd > * {\n    margin-left: 0 !important;\n  }\n`\n\nexport const Definition = vui<'dl', DefinitionProps>((props, ref) => {\n  const { orientation = 'horizontal', className, ...rest } = omitThemingProps(props)\n  const styles = useStyleConfig('Definition', props)\n  return orientation === 'horizontal' ? (\n    <DefinitionHorizontalBase\n      className={cs('vui-definition vui-definition-horizontal', className)}\n      ref={ref}\n      {...styles.container}\n      {...rest}\n    >\n      <DefinitionContent orientation=\"horizontal\" {...rest} />\n    </DefinitionHorizontalBase>\n  ) : (\n    <DefinitionVerticalBase\n      className={cs('vui-definition vui-definition-vertical', className)}\n      ref={ref}\n      {...styles.container}\n      {...rest}\n    >\n      <DefinitionContent orientation=\"vertical\" {...rest} />\n    </DefinitionVerticalBase>\n  )\n})\n\nDefinition.displayName = 'Definition'\nexport default Definition\n"],"mappings":";;;;;;;;;;;AAQA,MAAa,yBAAyB,OAAO,KAAK;;;;;;;;;;;;;;;;;;;;;;AAuBlD,MAAa,2BAA2B,OAAO,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCpD,MAAa,aAAa,KAA4B,OAAO,QAAQ;CACnE,MAAM,EAAE,cAAc,cAAc,WAAW,GAAG,SAAS,iBAAiB,MAAM;CAClF,MAAM,SAAS,eAAe,cAAc,MAAM;AAClD,QAAO,gBAAgB,eACrB,oBAAC;EACC,WAAW,GAAG,4CAA4C,UAAU;EAC/D;EACL,GAAI,OAAO;EACX,GAAI;YAEJ,oBAAC;GAAkB,aAAY;GAAa,GAAI;IAAQ;GAC/B,GAE3B,oBAAC;EACC,WAAW,GAAG,0CAA0C,UAAU;EAC7D;EACL,GAAI,OAAO;EACX,GAAI;YAEJ,oBAAC;GAAkB,aAAY;GAAW,GAAI;IAAQ;GAC/B;EAE3B;AAEF,WAAW,cAAc"}
+{"version":3,"file":"definition.js","names":[],"sources":["../../src/definition/definition.tsx"],"sourcesContent":["import { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport type { DefinitionProps } from './definition.types'\nimport { DefinitionContent } from './definitionContent'\n\n/**\n * Properties are definition lists\n * */\nexport const DefinitionVerticalBase = styled.dlBox`\n  display: grid;\n  gap: 1em;\n  grid-template-columns: repeat(auto-fit, minmax(10em, 20em));\n\n  .vui-definitionItemWrapper {\n    display: flex;\n    flex-direction: column;\n  }\n\n  dt {\n    display: inline-flex;\n  }\n\n  dd {\n    white-space: pre-wrap;\n  }\n\n  dd > * {\n    margin-left: 0 !important;\n  }\n`\n\nexport const DefinitionHorizontalBase = styled.dlBox`\n  padding: 10px;\n  display: grid;\n  gap: 0;\n\n  .vui-definitionItemWrapper {\n    display: flex;\n    flex-direction: column;\n    @media (min-width: 1024px) {\n      flex-direction: row;\n    }\n  }\n\n  dt,\n  dd {\n    display: inline-flex;\n    padding-left: 5px;\n  }\n\n  dt {\n    width: 20%;\n    min-width: 130px;\n  }\n\n  dd {\n    white-space: pre-wrap;\n  }\n\n  dd > * {\n    margin-left: 0 !important;\n  }\n`\n\nexport const Definition = vui<'dl', DefinitionProps>((props, ref) => {\n  const { orientation = 'horizontal', className, ...rest } = omitThemingProps(props)\n  const styles = useStyleConfig('Definition', props)\n  return orientation === 'horizontal' ? (\n    <DefinitionHorizontalBase\n      className={cs('vui-definition vui-definition-horizontal', className)}\n      ref={ref}\n      {...styles.container}\n      {...rest}\n    >\n      <DefinitionContent orientation=\"horizontal\" {...rest} />\n    </DefinitionHorizontalBase>\n  ) : (\n    <DefinitionVerticalBase\n      className={cs('vui-definition vui-definition-vertical', className)}\n      ref={ref}\n      {...styles.container}\n      {...rest}\n    >\n      <DefinitionContent orientation=\"vertical\" {...rest} />\n    </DefinitionVerticalBase>\n  )\n})\n\nDefinition.displayName = 'Definition'\nexport default Definition\n"],"mappings":";;;;;;;;;;;AAQA,MAAa,yBAAyB,OAAO,KAAK;;;;;;;;;;;;;;;;;;;;;;AAuBlD,MAAa,2BAA2B,OAAO,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCpD,MAAa,aAAa,KAA4B,OAAO,QAAQ;CACnE,MAAM,EAAE,cAAc,cAAc,WAAW,GAAG,SAAS,iBAAiB,MAAM;CAClF,MAAM,SAAS,eAAe,cAAc,MAAM;AAClD,QAAO,gBAAgB,eACrB,oBAAC,0BAAD;EACE,WAAW,GAAG,4CAA4C,UAAU;EAC/D;EACL,GAAI,OAAO;EACX,GAAI;YAEJ,oBAAC,mBAAD;GAAmB,aAAY;GAAa,GAAI;GAAQ;EAC/B,IAE3B,oBAAC,wBAAD;EACE,WAAW,GAAG,0CAA0C,UAAU;EAC7D;EACL,GAAI,OAAO;EACX,GAAI;YAEJ,oBAAC,mBAAD;GAAmB,aAAY;GAAW,GAAI;GAAQ;EAC/B;EAE3B;AAEF,WAAW,cAAc"}

package/dist/definition/definition.types.d.ts

@@ -1,8 +1,6 @@
 import { ThemingProps } from "../theme/types.js";
 import { SystemProps } from "../system/system.js";
-import "../system/index.js";
 import { IconProp } from "../icon/icon.types.js";
-import "../icon/index.js";
 import { JSX, ReactNode } from "react";
 
 //#region src/definition/definition.types.d.ts

package/dist/definition/definition.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"definition.types.d.ts","names":[],"sources":["../../src/definition/definition.types.ts"],"mappings":";;;;;;;;KAMY,cAAA,GAAiB,WAAA;EAC3B,GAAA;EACA,UAAA;EACA,KAAA,+BAAoC,SAAA;EACpC,YAAA;AAAA;AAAA,KAGU,eAAA,GAAkB,WAAA,GAC5B,YAAA;EAL6C,+CAO3C,QAAA,GAAW,QAAA,GAAW,GAAA,CAAI,OAAA,EAT5B;EAWE,SAAA,GAAY,QAAA,GAAW,GAAA,CAAI,OAAA;EAC3B,WAAA;EACA,WAAA;EACA,KAAA,GAAQ,cAAA,IAXE;EAaV,WAAA;EACA,IAAA;EACA,OAAA;AAAA"}
+{"version":3,"file":"definition.types.d.ts","names":[],"sources":["../../src/definition/definition.types.ts"],"mappings":";;;;;;KAMY,cAAA,GAAiB,WAAA;EAC3B,GAAA;EACA,UAAA;EACA,KAAA,+BAAoC,SAAA;EACpC,YAAA;AAAA;AAAA,KAGU,eAAA,GAAkB,WAAA,GAC5B,YAAA;iDAEE,QAAA,GAAW,QAAA,GAAW,GAAA,CAAI,OAAA,EAVD;EAYzB,SAAA,GAAY,QAAA,GAAW,GAAA,CAAI,OAAA;EAC3B,WAAA;EACA,WAAA;EACA,KAAA,GAAQ,cAAA,IAXV;EAaE,WAAA;EACA,IAAA;EACA,OAAA;AAAA"}

package/dist/definition/definitionContent.js

@@ -77,5 +77,5 @@ DefinitionContent.displayName = "DefinitionContent";
 
 //#endregion
 export { DefinitionContent as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=definitionContent.js.map

package/dist/definition/definitionContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"definitionContent.js","names":[],"sources":["../../src/definition/definitionContent.tsx"],"sourcesContent":["import Box from '../box'\nimport { styled, useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport P from '../p'\nimport { cs, isArray } from '../utils'\nimport type { DefinitionItem, DefinitionProps } from './definition.types'\n\nexport const DefinitionItemKey = styled.dtBox``\nexport const DefinitionItemValue = styled.ddBox``\n\nexport const DefinitionContent = vui<'dl', DefinitionProps>((props, ref) => {\n  const { iconLeft, iconRight, isLabelBold, isValueBold, items, orientation } = props as DefinitionProps\n\n  const styles = useStyleConfig('Definition', props)\n\n  return (\n    <>\n      {isArray<DefinitionItem>(items)\n        ? items.map(({ key, value, ...props }, index) => (\n            <Box className=\"vui-definitionItemWrapper\" key={index} ref={ref}>\n              <DefinitionItemKey fontWeight={isLabelBold ? 'demi' : 'default'} {...styles.dt}>\n                {props.keyHasIcon && iconLeft && (\n                  <Icon className={cs('vui-definitionIcon')} name={iconLeft} {...styles.icon} />\n                )}\n                {key}\n                {props.keyHasIcon && iconRight && (\n                  <Icon className={cs('vui-definitionIcon')} name={iconRight} {...styles.icon} />\n                )}\n              </DefinitionItemKey>\n              {isArray(value) ? (\n                <DefinitionItemValue\n                  display=\"block\"\n                  fontWeight={isValueBold ? 'demi' : 'default'}\n                  {...styles.dd}\n                  key={index}\n                >\n                  {orientation === 'horizontal'\n                    ? value.join(', ')\n                    : value.map((value, index) => (\n                        <P display=\"flex\" key={index + value}>\n                          {props.valueHasIcon && iconLeft && (\n                            <Icon className={cs('vui-definitionIcon')} name={iconLeft} {...styles.icon} />\n                          )}\n                          {value}\n                          {props.valueHasIcon && iconRight && (\n                            <Icon className={cs('vui-definitionIcon')} name={iconRight} {...styles.icon} />\n                          )}\n                        </P>\n                      ))}\n                  {}\n                </DefinitionItemValue>\n              ) : (\n                <DefinitionItemValue fontWeight={isValueBold ? 'demi' : 'default'} {...styles.dd}>\n                  {props.valueHasIcon && iconLeft && (\n                    <Icon className={cs('vui-definitionIcon')} name={iconLeft} {...styles.icon} />\n                  )}\n                  {value}\n                  {props.valueHasIcon && iconRight && (\n                    <Icon className={cs('vui-definitionIcon')} name={iconRight} {...styles.icon} />\n                  )}\n                </DefinitionItemValue>\n              )}\n            </Box>\n          ))\n        : items}\n    </>\n  )\n})\n\nDefinitionContent.displayName = 'DefinitionContent'\n\nexport default DefinitionContent\n"],"mappings":";;;;;;;;;;;;AAOA,MAAa,oBAAoB,OAAO,KAAK;AAC7C,MAAa,sBAAsB,OAAO,KAAK;AAE/C,MAAa,oBAAoB,KAA4B,OAAO,QAAQ;CAC1E,MAAM,EAAE,UAAU,WAAW,aAAa,aAAa,OAAO,gBAAgB;CAE9E,MAAM,SAAS,eAAe,cAAc,MAAM;AAElD,QACE,4CACG,QAAwB,MAAM,GAC3B,MAAM,KAAK,EAAE,KAAK,OAAO,GAAG,SAAS,UACnC,qBAAC;EAAI,WAAU;EAA6C;aAC1D,qBAAC;GAAkB,YAAY,cAAc,SAAS;GAAW,GAAI,OAAO;;IACzE,MAAM,cAAc,YACnB,oBAAC;KAAK,WAAW,GAAG,qBAAqB;KAAE,MAAM;KAAU,GAAI,OAAO;MAAQ;IAE/E;IACA,MAAM,cAAc,aACnB,oBAAC;KAAK,WAAW,GAAG,qBAAqB;KAAE,MAAM;KAAW,GAAI,OAAO;MAAQ;;IAE/D,EACnB,QAAQ,MAAM,GACb,8BAAC;GACC,SAAQ;GACR,YAAY,cAAc,SAAS;GACnC,GAAI,OAAO;GACX,KAAK;KAEJ,gBAAgB,eACb,MAAM,KAAK,KAAK,GAChB,MAAM,KAAK,OAAO,UAChB,qBAAC;GAAE,SAAQ;;IACR,MAAM,gBAAgB,YACrB,oBAAC;KAAK,WAAW,GAAG,qBAAqB;KAAE,MAAM;KAAU,GAAI,OAAO;MAAQ;IAE/E;IACA,MAAM,gBAAgB,aACrB,oBAAC;KAAK,WAAW,GAAG,qBAAqB;KAAE,MAAM;KAAW,GAAI,OAAO;MAAQ;;KAN5D,QAAQ,MAQ3B,CACJ,CAEc,GAEtB,qBAAC;GAAoB,YAAY,cAAc,SAAS;GAAW,GAAI,OAAO;;IAC3E,MAAM,gBAAgB,YACrB,oBAAC;KAAK,WAAW,GAAG,qBAAqB;KAAE,MAAM;KAAU,GAAI,OAAO;MAAQ;IAE/E;IACA,MAAM,gBAAgB,aACrB,oBAAC;KAAK,WAAW,GAAG,qBAAqB;KAAE,MAAM;KAAW,GAAI,OAAO;MAAQ;;IAE7D;IAzCsB,MA2C1C,CACN,GACF,QACH;EAEL;AAEF,kBAAkB,cAAc"}
+{"version":3,"file":"definitionContent.js","names":[],"sources":["../../src/definition/definitionContent.tsx"],"sourcesContent":["import Box from '../box'\nimport { styled, useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport P from '../p'\nimport { cs, isArray } from '../utils'\nimport type { DefinitionItem, DefinitionProps } from './definition.types'\n\nexport const DefinitionItemKey = styled.dtBox``\nexport const DefinitionItemValue = styled.ddBox``\n\nexport const DefinitionContent = vui<'dl', DefinitionProps>((props, ref) => {\n  const { iconLeft, iconRight, isLabelBold, isValueBold, items, orientation } = props as DefinitionProps\n\n  const styles = useStyleConfig('Definition', props)\n\n  return (\n    <>\n      {isArray<DefinitionItem>(items)\n        ? items.map(({ key, value, ...props }, index) => (\n            <Box className=\"vui-definitionItemWrapper\" key={index} ref={ref}>\n              <DefinitionItemKey fontWeight={isLabelBold ? 'demi' : 'default'} {...styles.dt}>\n                {props.keyHasIcon && iconLeft && (\n                  <Icon className={cs('vui-definitionIcon')} name={iconLeft} {...styles.icon} />\n                )}\n                {key}\n                {props.keyHasIcon && iconRight && (\n                  <Icon className={cs('vui-definitionIcon')} name={iconRight} {...styles.icon} />\n                )}\n              </DefinitionItemKey>\n              {isArray(value) ? (\n                <DefinitionItemValue\n                  display=\"block\"\n                  fontWeight={isValueBold ? 'demi' : 'default'}\n                  {...styles.dd}\n                  key={index}\n                >\n                  {orientation === 'horizontal'\n                    ? value.join(', ')\n                    : value.map((value, index) => (\n                        <P display=\"flex\" key={index + value}>\n                          {props.valueHasIcon && iconLeft && (\n                            <Icon className={cs('vui-definitionIcon')} name={iconLeft} {...styles.icon} />\n                          )}\n                          {value}\n                          {props.valueHasIcon && iconRight && (\n                            <Icon className={cs('vui-definitionIcon')} name={iconRight} {...styles.icon} />\n                          )}\n                        </P>\n                      ))}\n                  {}\n                </DefinitionItemValue>\n              ) : (\n                <DefinitionItemValue fontWeight={isValueBold ? 'demi' : 'default'} {...styles.dd}>\n                  {props.valueHasIcon && iconLeft && (\n                    <Icon className={cs('vui-definitionIcon')} name={iconLeft} {...styles.icon} />\n                  )}\n                  {value}\n                  {props.valueHasIcon && iconRight && (\n                    <Icon className={cs('vui-definitionIcon')} name={iconRight} {...styles.icon} />\n                  )}\n                </DefinitionItemValue>\n              )}\n            </Box>\n          ))\n        : items}\n    </>\n  )\n})\n\nDefinitionContent.displayName = 'DefinitionContent'\n\nexport default DefinitionContent\n"],"mappings":";;;;;;;;;;;;AAOA,MAAa,oBAAoB,OAAO,KAAK;AAC7C,MAAa,sBAAsB,OAAO,KAAK;AAE/C,MAAa,oBAAoB,KAA4B,OAAO,QAAQ;CAC1E,MAAM,EAAE,UAAU,WAAW,aAAa,aAAa,OAAO,gBAAgB;CAE9E,MAAM,SAAS,eAAe,cAAc,MAAM;AAElD,QACE,4CACG,QAAwB,MAAM,GAC3B,MAAM,KAAK,EAAE,KAAK,OAAO,GAAG,SAAS,UACnC,qBAAC,KAAD;EAAK,WAAU;EAA6C;YAA5D,CACE,qBAAC,mBAAD;GAAmB,YAAY,cAAc,SAAS;GAAW,GAAI,OAAO;aAA5E;IACG,MAAM,cAAc,YACnB,oBAAC,MAAD;KAAM,WAAW,GAAG,qBAAqB;KAAE,MAAM;KAAU,GAAI,OAAO;KAAQ;IAE/E;IACA,MAAM,cAAc,aACnB,oBAAC,MAAD;KAAM,WAAW,GAAG,qBAAqB;KAAE,MAAM;KAAW,GAAI,OAAO;KAAQ;IAE/D;MACnB,QAAQ,MAAM,GACb,8BAAC,qBAAD;GACE,SAAQ;GACR,YAAY,cAAc,SAAS;GACnC,GAAI,OAAO;GACX,KAAK;GAgBe,EAdnB,gBAAgB,eACb,MAAM,KAAK,KAAK,GAChB,MAAM,KAAK,OAAO,UAChB,qBAAC,GAAD;GAAG,SAAQ;aAAX;IACG,MAAM,gBAAgB,YACrB,oBAAC,MAAD;KAAM,WAAW,GAAG,qBAAqB;KAAE,MAAM;KAAU,GAAI,OAAO;KAAQ;IAE/E;IACA,MAAM,gBAAgB,aACrB,oBAAC,MAAD;KAAM,WAAW,GAAG,qBAAqB;KAAE,MAAM;KAAW,GAAI,OAAO;KAAQ;IAE/E;KARmB,QAAQ,MAQ3B,CACJ,CAEc,GAEtB,qBAAC,qBAAD;GAAqB,YAAY,cAAc,SAAS;GAAW,GAAI,OAAO;aAA9E;IACG,MAAM,gBAAgB,YACrB,oBAAC,MAAD;KAAM,WAAW,GAAG,qBAAqB;KAAE,MAAM;KAAU,GAAI,OAAO;KAAQ;IAE/E;IACA,MAAM,gBAAgB,aACrB,oBAAC,MAAD;KAAM,WAAW,GAAG,qBAAqB;KAAE,MAAM;KAAW,GAAI,OAAO;KAAQ;IAE7D;KAEpB;IA3C0C,MA2C1C,CACN,GACF,OACH;EAEL;AAEF,kBAAkB,cAAc"}

package/dist/definition/theme.js

@@ -67,5 +67,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=theme.js.map

package/dist/dialog/consts.js

@@ -33,5 +33,5 @@ const modalClass = "vui-modal";
 
 //#endregion
 export { containerId, dialogStatusMapping, modalAnimation, modalClass, modalJustifyContent };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=consts.js.map

package/dist/dialog/context.js

@@ -5,5 +5,5 @@ const [DialogProvider, useDialogContext] = createContext({ isOptional: true });
 
 //#endregion
 export { DialogProvider, useDialogContext };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=context.js.map

package/dist/dialog/dialog.d.ts

@@ -1,6 +1,4 @@
-import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
-import "../core/index.js";
 import { DialogProps } from "./dialog.types.js";
 import { DialogBody } from "./dialogBody.js";
 import { DialogCancelButton } from "./dialogCancelButton.js";
@@ -10,11 +8,11 @@ import { DialogHeader } from "./dialogHeader.js";
 import { DialogIcon } from "./dialogIcon.js";
 import { DialogSubmitButton } from "./dialogSubmitButton.js";
 import { DialogTitle } from "./dialogTitle.js";
-import "../index.js";
 import * as styled_components0 from "styled-components";
+import * as styled_components_dist_types0 from "styled-components/dist/types";
 
 //#region src/dialog/dialog.d.ts
-declare const DialogBase: styled_components0.StyledComponent<"div", styled_components0.DefaultTheme, SystemProps, never>;
+declare const DialogBase: styled_components_dist_types0.IStyledComponentBase<"web", styled_components0.FastOmit<any, never>> & string;
 /**
  * Displays content in a Modal window. Includes required accessibility configuration.
  *

package/dist/dialog/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","names":[],"sources":["../../src/dialog/dialog.tsx"],"mappings":";;;;;;;;;;;;;;;;cAkBa,UAAA,EAAU,kBAAA,CAAA,eAAA,QAOtB,kBAAA,CAPsB,YAAA,EAAA,WAAA;;;;;;AAAvB;;cAgBa,MAAA,EA2EP,YAAA,QAAoB,WAAA;EACxB,IAAA,SAAa,UAAA;EACb,YAAA,SAAqB,kBAAA;EACrB,WAAA,SAAoB,iBAAA;EACpB,MAAA,SAAe,YAAA;EACf,MAAA,SAAe,YAAA;EACf,IAAA,SAAa,UAAA;EACb,YAAA,SAAqB,kBAAA;EACrB,KAAA,SAAc,WAAA;AAAA"}
+{"version":3,"file":"dialog.d.ts","names":[],"sources":["../../src/dialog/dialog.tsx"],"mappings":";;;;;;;;;;;;;;cAkBa,UAAA,EAAU,6BAAA,CAAA,oBAAA,QAOtB,kBAAA,CAPsB,QAAA;;;;;AAAvB;;;cAgBa,MAAA,EA2EP,YAAA,QAAoB,WAAA;EACxB,IAAA,SAAa,UAAA;EACb,YAAA,SAAqB,kBAAA;EACrB,WAAA,SAAoB,iBAAA;EACpB,MAAA,SAAe,YAAA;EACf,MAAA,SAAe,YAAA;EACf,IAAA,SAAa,UAAA;EACb,YAAA,SAAqB,kBAAA;EACrB,KAAA,SAAc,WAAA;AAAA"}

package/dist/dialog/dialog.js

@@ -114,5 +114,5 @@ Dialog.displayName = "Dialog";
 
 //#endregion
 export { DialogBase, Dialog as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=dialog.js.map