@paygreen/pgui 3.1.1 → 3.1.3

package/dist/pgui.css

@@ -1 +1 @@
-:root{--PhoneInput-color--focus: #03b2cb;--PhoneInputInternationalIconPhone-opacity: .8;--PhoneInputInternationalIconGlobe-opacity: .65;--PhoneInputCountrySelect-marginRight: .35em;--PhoneInputCountrySelectArrow-width: .3em;--PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);--PhoneInputCountrySelectArrow-borderWidth: 1px;--PhoneInputCountrySelectArrow-opacity: .45;--PhoneInputCountrySelectArrow-color: currentColor;--PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);--PhoneInputCountrySelectArrow-transform: rotate(45deg);--PhoneInputCountryFlag-aspectRatio: 1.5;--PhoneInputCountryFlag-height: 1em;--PhoneInputCountryFlag-borderWidth: 1px;--PhoneInputCountryFlag-borderColor: rgba(0,0,0,.5);--PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);--PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,.1)}.PhoneInput{display:flex;align-items:center}.PhoneInputInput{flex:1;min-width:0}.PhoneInputCountryIcon{width:calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));height:var(--PhoneInputCountryFlag-height)}.PhoneInputCountryIcon--square{width:var(--PhoneInputCountryFlag-height)}.PhoneInputCountryIcon--border{background-color:var(--PhoneInputCountryFlag-backgroundColor--loading);box-shadow:0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor)}.PhoneInputCountryIconImg{display:block;width:100%;height:100%}.PhoneInputInternationalIconPhone{opacity:var(--PhoneInputInternationalIconPhone-opacity)}.PhoneInputInternationalIconGlobe{opacity:var(--PhoneInputInternationalIconGlobe-opacity)}.PhoneInputCountry{position:relative;align-self:stretch;display:flex;align-items:center;margin-right:var(--PhoneInputCountrySelect-marginRight)}.PhoneInputCountrySelect{position:absolute;top:0;left:0;height:100%;width:100%;z-index:1;border:0;opacity:0;cursor:pointer}.PhoneInputCountrySelect[disabled],.PhoneInputCountrySelect[readonly]{cursor:default}.PhoneInputCountrySelectArrow{display:block;content:"";width:var(--PhoneInputCountrySelectArrow-width);height:var(--PhoneInputCountrySelectArrow-width);margin-left:var(--PhoneInputCountrySelectArrow-marginLeft);border-style:solid;border-color:var(--PhoneInputCountrySelectArrow-color);border-top-width:0;border-bottom-width:var(--PhoneInputCountrySelectArrow-borderWidth);border-left-width:0;border-right-width:var(--PhoneInputCountrySelectArrow-borderWidth);transform:var(--PhoneInputCountrySelectArrow-transform);opacity:var(--PhoneInputCountrySelectArrow-opacity)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon+.PhoneInputCountrySelectArrow{opacity:1;color:var(--PhoneInputCountrySelectArrow-color--focus)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon--border{box-shadow:0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon .PhoneInputInternationalIconGlobe{opacity:1;color:var(--PhoneInputCountrySelectArrow-color--focus)}.select-custom-container{font-size:var(--chakra-font-sizes-sm);min-width:200px;display:inline-block;width:100%}.select-custom-container--error .select-custom__control{border-color:var(--chakra-colors-border-error)!important}.select-custom-container--error .select-custom__control--is-focused{border-color:var(--chakra-colors-border-error)!important;box-shadow:0 0 0 1px var(--chakra-colors-border-error)!important}.select-custom-container--error .select-custom__control:hover{border-color:var(--chakra-colors-border-error)!important}.select-custom__placeholder{color:var(--chakra-colors-fg-muted)!important}.select-custom__control--is-disabled{opacity:.5!important;cursor:not-allowed!important}.select-custom__control--is-disabled .select-custom__placeholder{color:var(--chakra-colors-fg-muted)!important}.select-custom__single-value{color:var(--chakra-colors-fg)!important}.select-custom__control{border:1px solid var(--chakra-colors-border)!important}.select-custom__control,.select-custom__control--is-focused{min-height:var(--chakra-sizes-9)!important;background-color:transparent!important}.select-custom__control--is-focused{box-shadow:none!important;outline-offset:0!important;outline-width:var(--focus-ring-width, 1px)!important;outline-color:var(--chakra-colors-color-palette-focus-ring)!important;outline-style:var(--focus-ring-style, solid)!important;border-color:var(--chakra-colors-color-palette-focus-ring)!important}@keyframes pgui-select-menu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.select-custom__menu{z-index:1000!important;border:1px solid var(--chakra-colors-border)!important;background-color:var(--chakra-colors-bg-panel)!important;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f!important;border-radius:var(--chakra-radii-md)!important;animation:pgui-select-menu-in .2s cubic-bezier(.4,0,.2,1)}.select-custom__menu-list{border-radius:var(--chakra-radii-md)!important;padding:0!important}.select-custom__multi-value{background-color:var(--chakra-colors-bg-panel)!important;border:1px solid var(--chakra-colors-border)!important;border-radius:var(--chakra-radii-sm)!important}.select-custom__multi-value__label{color:var(--chakra-colors-fg)!important}.select-custom__option{background-color:var(--chakra-colors-bg)!important;font-size:var(--chakra-font-sizes-sm)!important;padding:5px 10px!important}.select-custom__option:hover{background-color:var(--chakra-colors-bg-muted)!important;cursor:pointer!important}.select-custom__option--is-selected{color:var(--chakra-colors-fg)!important;background-color:var(--chakra-colors-bg-muted)!important}.select-custom__multi-value__label{font-size:var(--chakra-font-sizes-sm)!important}.select-custom__multi-value__remove{color:var(--chakra-colors-fg)!important}.select-custom__multi-value__remove:hover{cursor:pointer!important;background-color:var(--chakra-colors-danger-muted)!important}.select-custom__indicator svg{cursor:pointer;width:15px;height:15px}
+:root{--PhoneInput-color--focus: #03b2cb;--PhoneInputInternationalIconPhone-opacity: .8;--PhoneInputInternationalIconGlobe-opacity: .65;--PhoneInputCountrySelect-marginRight: .35em;--PhoneInputCountrySelectArrow-width: .3em;--PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);--PhoneInputCountrySelectArrow-borderWidth: 1px;--PhoneInputCountrySelectArrow-opacity: .45;--PhoneInputCountrySelectArrow-color: currentColor;--PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);--PhoneInputCountrySelectArrow-transform: rotate(45deg);--PhoneInputCountryFlag-aspectRatio: 1.5;--PhoneInputCountryFlag-height: 1em;--PhoneInputCountryFlag-borderWidth: 1px;--PhoneInputCountryFlag-borderColor: rgba(0,0,0,.5);--PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);--PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,.1)}.PhoneInput{display:flex;align-items:center}.PhoneInputInput{flex:1;min-width:0}.PhoneInputCountryIcon{width:calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));height:var(--PhoneInputCountryFlag-height)}.PhoneInputCountryIcon--square{width:var(--PhoneInputCountryFlag-height)}.PhoneInputCountryIcon--border{background-color:var(--PhoneInputCountryFlag-backgroundColor--loading);box-shadow:0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor)}.PhoneInputCountryIconImg{display:block;width:100%;height:100%}.PhoneInputInternationalIconPhone{opacity:var(--PhoneInputInternationalIconPhone-opacity)}.PhoneInputInternationalIconGlobe{opacity:var(--PhoneInputInternationalIconGlobe-opacity)}.PhoneInputCountry{position:relative;align-self:stretch;display:flex;align-items:center;margin-right:var(--PhoneInputCountrySelect-marginRight)}.PhoneInputCountrySelect{position:absolute;top:0;left:0;height:100%;width:100%;z-index:1;border:0;opacity:0;cursor:pointer}.PhoneInputCountrySelect[disabled],.PhoneInputCountrySelect[readonly]{cursor:default}.PhoneInputCountrySelectArrow{display:block;content:"";width:var(--PhoneInputCountrySelectArrow-width);height:var(--PhoneInputCountrySelectArrow-width);margin-left:var(--PhoneInputCountrySelectArrow-marginLeft);border-style:solid;border-color:var(--PhoneInputCountrySelectArrow-color);border-top-width:0;border-bottom-width:var(--PhoneInputCountrySelectArrow-borderWidth);border-left-width:0;border-right-width:var(--PhoneInputCountrySelectArrow-borderWidth);transform:var(--PhoneInputCountrySelectArrow-transform);opacity:var(--PhoneInputCountrySelectArrow-opacity)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon+.PhoneInputCountrySelectArrow{opacity:1;color:var(--PhoneInputCountrySelectArrow-color--focus)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon--border{box-shadow:0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon .PhoneInputInternationalIconGlobe{opacity:1;color:var(--PhoneInputCountrySelectArrow-color--focus)}.select-custom-container{font-size:var(--chakra-font-sizes-sm);min-width:200px;display:inline-block;width:100%}.select-custom-container--error .select-custom__control{border-color:var(--chakra-colors-border-error)!important}.select-custom-container--error .select-custom__control--is-focused{border-color:var(--chakra-colors-border-error)!important;box-shadow:0 0 0 1px var(--chakra-colors-border-error)!important}.select-custom-container--error .select-custom__control:hover{border-color:var(--chakra-colors-border-error)!important}.select-custom__placeholder{color:var(--chakra-colors-fg-muted)!important}.select-custom__control--is-disabled{opacity:.5!important;cursor:not-allowed!important}.select-custom__control--is-disabled .select-custom__placeholder{color:var(--chakra-colors-fg-muted)!important}.select-custom__single-value{color:var(--chakra-colors-fg)!important}.select-custom__control{border:1px solid var(--chakra-colors-border)!important}.select-custom__control,.select-custom__control--is-focused{min-height:var(--chakra-sizes-9)!important;background-color:transparent!important}.select-custom__control--is-focused{box-shadow:none!important;outline-offset:0!important;outline-width:var(--focus-ring-width, 1px)!important;outline-color:var(--chakra-colors-color-palette-focus-ring)!important;outline-style:var(--focus-ring-style, solid)!important;border-color:var(--chakra-colors-color-palette-focus-ring)!important}@keyframes pgui-select-menu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.select-custom__menu{z-index:1000!important;border:1px solid var(--chakra-colors-border)!important;background-color:var(--chakra-colors-bg-panel)!important;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f!important;border-radius:var(--chakra-radii-md)!important;animation:pgui-select-menu-in .2s cubic-bezier(.4,0,.2,1)}.select-custom__menu-list{border-radius:var(--chakra-radii-md)!important;padding:0!important}.select-custom__multi-value{background-color:var(--chakra-colors-bg-panel)!important;border:1px solid var(--chakra-colors-border)!important;border-radius:var(--chakra-radii-sm)!important}.select-custom__multi-value__label{color:var(--chakra-colors-fg)!important}.select-custom__option{background-color:var(--chakra-colors-bg)!important;font-size:var(--chakra-font-sizes-sm)!important;padding:5px 10px!important}.select-custom__option:hover{background-color:var(--chakra-colors-bg-muted)!important;cursor:pointer!important}.select-custom__option--is-focused{background-color:var(--chakra-colors-bg-muted)!important}.select-custom__option--is-selected{color:var(--chakra-colors-fg)!important;background-color:var(--chakra-colors-bg-muted)!important}.select-custom__multi-value__label{font-size:var(--chakra-font-sizes-sm)!important}.select-custom__multi-value__remove{color:var(--chakra-colors-fg)!important}.select-custom__multi-value__remove:hover{cursor:pointer!important;background-color:var(--chakra-colors-danger-muted)!important}.select-custom__indicator svg{cursor:pointer;width:15px;height:15px}

package/dist/theme/recipes/button-recipe.d.ts

@@ -42,5 +42,28 @@ declare const buttonRecipe: import('@chakra-ui/react').RecipeDefinition<{
             px: "6";
         };
     };
+    /**
+     * `white` — an outline-style button with a white foreground, meant to sit
+     * on a dark or coloured surface (e.g. the blue auth/onboarding layouts).
+     * It stays white in both light and dark mode (the surface it lives on is
+     * the same in both), so it intentionally does not flip with the color mode.
+     */
+    variant: {
+        white: {
+            color: "white";
+            bg: "transparent";
+            borderWidth: "1px";
+            borderColor: "opacities.white.50";
+            _hover: {
+                bg: "opacities.white.20";
+            };
+            _active: {
+                bg: "opacities.white.30";
+            };
+            _expanded: {
+                bg: "opacities.white.20";
+            };
+        };
+    };
 }>;
 export default buttonRecipe;

package/dist/theme/recipes/index.d.ts

@@ -63,6 +63,23 @@ declare const recipes: {
                 px: "6";
             };
         };
+        variant: {
+            white: {
+                color: "white";
+                bg: "transparent";
+                borderWidth: "1px";
+                borderColor: "opacities.white.50";
+                _hover: {
+                    bg: "opacities.white.20";
+                };
+                _active: {
+                    bg: "opacities.white.30";
+                };
+                _expanded: {
+                    bg: "opacities.white.20";
+                };
+            };
+        };
     }>;
 };
 export default recipes;

package/dist/theme/semanticTokens/colors.d.ts

@@ -408,6 +408,12 @@ declare const colors: {
                 _dark: string;
             };
         };
+        fgActive: {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
         fgLink: {
             value: {
                 _light: string;

package/dist/theme/semanticTokens/index.d.ts

@@ -409,6 +409,12 @@ declare const semanticThemeTokens: {
                     _dark: string;
                 };
             };
+            fgActive: {
+                value: {
+                    _light: string;
+                    _dark: string;
+                };
+            };
             fgLink: {
                 value: {
                     _light: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paygreen/pgui",
-  "version": "3.1.1",
+  "version": "3.1.3",
   "description": "core ui for paygreen apps",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/components/select/select.css

@@ -100,6 +100,10 @@
   cursor: pointer !important;
 }
 
+.select-custom__option--is-focused {
+  background-color: var(--chakra-colors-bg-muted) !important;
+}
+
 .select-custom__option--is-selected {
   color: var(--chakra-colors-fg) !important;
   background-color: var(--chakra-colors-bg-muted) !important;