@vygruppen/spor-react 12.3.5 → 12.4.1

package/.turbo/turbo-build.log

@@ -1,8 +1,8 @@
 
-> @vygruppen/spor-react@12.3.5 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.4.1 build /home/runner/work/spor/spor/packages/spor-react
 > tsup
 
-CLI Building entry: src/index.tsx
+CLI Building entry: src/index.tsx, src/icons/index.tsx
 CLI Using tsconfig: tsconfig.json
 CLI tsup v7.3.0
 CLI Using tsup config: /home/runner/work/spor/spor/packages/spor-react/tsup.config.ts
@@ -10,12 +10,18 @@ CLI Target: node16
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/index.js     315.48 KB
-CJS dist/index.js.map 633.72 KB
-CJS ⚡️ Build success in 2757ms
-ESM dist/index.mjs     294.85 KB
-ESM dist/index.mjs.map 633.72 KB
-ESM ⚡️ Build success in 2758ms
-DTS ⚡️ Build success in 23171ms
-DTS dist/index.d.ts  129.65 KB
-DTS dist/index.d.mts 129.65 KB
+ESM dist/icons/index.mjs     110.00 B
+ESM dist/index.mjs           295.23 KB
+ESM dist/icons/index.mjs.map 157.00 B
+ESM dist/index.mjs.map       633.84 KB
+ESM ⚡️ Build success in 2800ms
+CJS dist/index.js           315.85 KB
+CJS dist/icons/index.js     380.00 B
+CJS dist/index.js.map       633.84 KB
+CJS dist/icons/index.js.map 157.00 B
+CJS ⚡️ Build success in 2801ms
+DTS ⚡️ Build success in 30877ms
+DTS dist/icons/index.d.ts  44.00 B
+DTS dist/index.d.ts        126.10 KB
+DTS dist/icons/index.d.mts 44.00 B
+DTS dist/index.d.mts       126.10 KB

package/.turbo/turbo-postinstall.log

@@ -1,8 +1,26 @@
 
-> @vygruppen/spor-react@12.3.5 postinstall /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.4.1 postinstall /home/runner/work/spor/spor/packages/spor-react
 > chakra typegen src/theme/index.ts
 
 ┌  Chakra CLI ⚡️
+▲ [WARNING] The condition "types" here will never be used as it comes after both "import" and "require" [package.json]
+
+    ../spor-design-tokens/package.json:15:6:
+      15 │       "types": "./dist/tokens.d.ts"
+         ╵       ~~~~~~~
+
+  The "import" condition comes earlier and will be used for all "import" statements:
+
+    ../spor-design-tokens/package.json:13:6:
+      13 │       "import": "./dist/tokens.mjs",
+         ╵       ~~~~~~~~
+
+  The "require" condition comes earlier and will be used for all "require" calls:
+
+    ../spor-design-tokens/package.json:14:6:
+      14 │       "require": "./dist/tokens.js",
+         ╵       ~~~~~~~~~
+
 [?25l│
 ◒  Generating conditions types...
 ◇  ✅ Generated conditions typings

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @vygruppen/spor-react
 
+## 12.4.1
+
+### Patch Changes
+
+- 184803a: Support exporting icons directly from spor, which seems to fix SSR issues for icons.
+- 812afc9: CountryCodeSelect: Fixed onValueChange and UU styling in select.
+
+## 12.4.0
+
+### Minor Changes
+
+- 404114d: **spor-icon-react**:
+
+  - Upgraded Chakra UI to the latest version
+  - Removed `ClientOnlyWrapper` from all icons
+
+  **spor-react**:
+
+  - Upgraded Chakra UI to the latest version
+  - Fixed minor styling issues in the `Select` component
+
+### Patch Changes
+
+- Updated dependencies [404114d]
+  - @vygruppen/spor-icon-react@4.1.0
+
 ## 12.3.5
 
 ### Patch Changes

package/dist/icons/index.d.mts

@@ -0,0 +1 @@
+export * from '@vygruppen/spor-icon-react';

package/dist/icons/index.d.ts

@@ -0,0 +1 @@
+export * from '@vygruppen/spor-icon-react';

package/dist/icons/index.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var sporIconReact = require('@vygruppen/spor-icon-react');
+
+
+
+Object.keys(sporIconReact).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return sporIconReact[k]; }
+	});
+});
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/icons/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/icons/index.tsx"],"names":[],"mappings":";AAAA,cAAc","sourcesContent":["export * from \"@vygruppen/spor-icon-react\";\n"]}

package/dist/icons/index.mjs

@@ -0,0 +1,3 @@
+export * from '@vygruppen/spor-icon-react';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/icons/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/icons/index.tsx"],"names":[],"mappings":";AAAA,cAAc","sourcesContent":["export * from \"@vygruppen/spor-icon-react\";\n"]}

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
 import React__default, { PropsWithChildren, ReactNode } from 'react';
 import * as _chakra_ui_react from '@chakra-ui/react';
-import { Accordion as Accordion$1, Alert as Alert$1, ConditionalValue, Breadcrumb as Breadcrumb$1, RecipeVariantProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, Field as Field$1, PopoverRootProps, Dialog, Drawer as Drawer$1, Checkbox as Checkbox$1, CheckboxGroupProps as CheckboxGroupProps$1, CheckboxCardRootProps, CheckboxCard, Fieldset as Fieldset$1, InputProps as InputProps$1, ListRootProps, NativeSelectFieldProps, NativeSelect as NativeSelect$1, RadioGroup as RadioGroup$1, SelectRootProps, Select as Select$1, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, RadioCard as RadioCard$1, SeparatorProps, LinkProps as LinkProps$1, List as List$1, UseProgressProps, SkeletonProps as SkeletonProps$1, CircleProps, Popover as Popover$1, Pagination as Pagination$1, ChakraProviderProps, SystemContext, TabsRootProps, Tabs as Tabs$1, TableRootProps, Table as Table$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
+import { Accordion as Accordion$1, Alert as Alert$1, ConditionalValue, Breadcrumb as Breadcrumb$1, RecipeVariantProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, Field as Field$1, PopoverRootProps, Dialog, Drawer as Drawer$1, Checkbox as Checkbox$1, CheckboxGroupProps as CheckboxGroupProps$1, CheckboxCardRootProps, CheckboxCard, Fieldset as Fieldset$1, InputProps as InputProps$1, ListRootProps, NativeSelectFieldProps, NativeSelect as NativeSelect$1, RadioGroup as RadioGroup$1, SelectRootProps, SelectLabelProps, Select as Select$1, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, RadioCard as RadioCard$1, SeparatorProps, LinkProps as LinkProps$1, List as List$1, UseProgressProps, SkeletonProps as SkeletonProps$1, CircleProps, Popover as Popover$1, Pagination as Pagination$1, ChakraProviderProps, SystemContext, TabsRootProps, Tabs as Tabs$1, TableRootProps, Table as Table$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
 export { Box, BoxProps, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, CenterProps, Collapsible, CollapsibleRootProps, Container, ContainerProps, Em, Flex, FlexProps, For, FormatByte, FormatNumber, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Kbd, LocaleProvider, Portal, PortalProps, Show, SimpleGrid, SimpleGridProps, Spacer, SpacerProps, Span, Stack, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableColumn, TableColumnHeader, TableColumnHeaderProps, TableColumnProps, TableFooter, TableFooterProps, TableHeader, TableHeaderProps, TableRoot, TableRootProps, TableRow, TableRowProps, UseDisclosureProps, VStack, VisuallyHidden, createListCollection, createSystem, defineConfig, defineRecipe, defineStyle, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useToken } from '@chakra-ui/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { IconComponent } from '@vygruppen/spor-icon-react';
@@ -1574,80 +1574,7 @@ declare const SearchInput: React$1.ForwardRefExoticComponent<_chakra_ui_react.In
     onReset?: () => void;
 } & React$1.RefAttributes<HTMLInputElement>>;
 
-declare const selectSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "item" | "indicator" | "label" | "control" | "itemText" | "itemDescription" | "trigger" | "indicatorGroup" | "selectContent" | "itemGroup" | "itemGroupLabel" | "valueText", {
-    variant: {
-        core: {
-            control: {
-                outline: "1px solid";
-                outlineColor: "core.outline";
-                _hover: {
-                    outline: "2px solid";
-                    outlineColor: "core.outline";
-                };
-                _active: {
-                    backgroundColor: "brand.surface.active";
-                };
-                _disabled: {
-                    pointerEvents: "none";
-                    color: "text.disabled";
-                    backgroundColor: "surface.disabled";
-                };
-            };
-        };
-        floating: {
-            control: {
-                backgroundColor: {
-                    _light: "bg";
-                    _dark: "color-mix(in srgb, white 10%, var(--spor-colors-bg))";
-                };
-                outline: "1px solid";
-                outlineColor: "floating.outline";
-                _hover: {
-                    outline: "1px solid";
-                    outlineColor: "floating.outline.hover";
-                    backgroundColor: {
-                        _light: "floating.surface.hover";
-                        _dark: "color-mix(in srgb, white 10%, var(--spor-colors-bg))";
-                    };
-                };
-                _active: {
-                    outline: "1px solid";
-                    outlineColor: "floating.outline.active";
-                    backgroundColor: "floating.surface.active";
-                };
-            };
-            selectContent: {
-                outline: "1px solid";
-                outlineColor: "floating.outline";
-            };
-        };
-        rightSideSquare: {
-            control: {
-                outline: "1px solid";
-                outlineColor: "core.outline";
-            };
-            trigger: {
-                _focus: {
-                    borderRightRadius: "none";
-                };
-            };
-        };
-        leftSideSquare: {
-            control: {
-                outline: "1px solid";
-                outlineColor: "core.outline";
-            };
-            trigger: {
-                _focus: {
-                    borderLeftRadius: "none";
-                };
-            };
-        };
-    };
-}>;
-
-type SelectVariantProps = RecipeVariantProps<typeof selectSlotRecipe>;
-type SelectProps = SelectRootProps & FieldProps & PropsWithChildren<SelectVariantProps> & {
+type SelectProps = SelectRootProps & FieldProps & {
     label?: string;
 };
 /**
@@ -1680,52 +1607,30 @@ type SelectProps = SelectRootProps & FieldProps & PropsWithChildren<SelectVarian
 declare const Select: React$1.ForwardRefExoticComponent<SelectRootProps<any> & Omit<_chakra_ui_react.FieldRootProps, "label"> & {
     children?: React$1.ReactNode | undefined;
 } & FieldBaseProps & {
-    variant?: _chakra_ui_react.ConditionalValue<"floating" | "core" | "rightSideSquare" | "leftSideSquare" | undefined>;
-} & {
     label?: string;
 } & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: (props: SelectLabelProps) => react_jsx_runtime.JSX.Element;
 declare const SelectItem: React$1.ForwardRefExoticComponent<Select$1.ItemProps & {
-    variant?: _chakra_ui_react.ConditionalValue<"floating" | "core" | "rightSideSquare" | "leftSideSquare" | undefined>;
-} & {
-    children?: React$1.ReactNode | undefined;
-} & {
     children: React$1.ReactNode;
     description?: React$1.ReactNode;
 } & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectItemGroup: React$1.ForwardRefExoticComponent<Select$1.ItemGroupProps & {
-    variant?: _chakra_ui_react.ConditionalValue<"floating" | "core" | "rightSideSquare" | "leftSideSquare" | undefined>;
-} & {
-    children?: React$1.ReactNode | undefined;
-} & {
     label: React$1.ReactNode;
     children: React$1.ReactNode;
 } & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectTrigger: React$1.ForwardRefExoticComponent<Select$1.ControlProps & {
-    variant?: _chakra_ui_react.ConditionalValue<"floating" | "core" | "rightSideSquare" | "leftSideSquare" | undefined>;
-} & {
-    children?: React$1.ReactNode | undefined;
-} & {
     clearable?: boolean;
     children?: React$1.ReactNode;
 } & React$1.RefAttributes<HTMLButtonElement>>;
 declare const SelectContent: React$1.ForwardRefExoticComponent<Select$1.ContentProps & {
-    variant?: _chakra_ui_react.ConditionalValue<"floating" | "core" | "rightSideSquare" | "leftSideSquare" | undefined>;
-} & {
-    children?: React$1.ReactNode | undefined;
-} & {
     portalled?: boolean;
     portalRef?: React$1.RefObject<HTMLElement>;
 } & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectValueText: React$1.ForwardRefExoticComponent<Omit<Select$1.ValueTextProps, "children"> & {
-    variant?: _chakra_ui_react.ConditionalValue<"floating" | "core" | "rightSideSquare" | "leftSideSquare" | undefined>;
-} & {
-    children?: React$1.ReactNode | undefined;
-} & {
     children?(items: CollectionItem[]): React$1.ReactNode;
     placeholder?: string;
     withPlaceholder?: boolean;
 } & React$1.RefAttributes<HTMLSpanElement>>;
-declare const SelectLabel: React$1.ForwardRefExoticComponent<Select$1.LabelProps & React$1.RefAttributes<HTMLLabelElement>>;
 declare const SelectItemText: React$1.ForwardRefExoticComponent<Select$1.ItemTextProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectRoot: Select$1.RootComponent;
 
@@ -3582,7 +3487,7 @@ type ToastProps = {
     variant: Variant;
     id?: string;
 };
-declare const createToast: ({ text, variant, id, duration, }: ToastProps) => string | undefined;
+declare const createToast: ({ text, variant, id, duration, }: ToastProps) => string;
 
 type BadgeProps = BadgeProps$1 & {
     icon?: IconComponent;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
 import React__default, { PropsWithChildren, ReactNode } from 'react';
 import * as _chakra_ui_react from '@chakra-ui/react';
-import { Accordion as Accordion$1, Alert as Alert$1, ConditionalValue, Breadcrumb as Breadcrumb$1, RecipeVariantProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, Field as Field$1, PopoverRootProps, Dialog, Drawer as Drawer$1, Checkbox as Checkbox$1, CheckboxGroupProps as CheckboxGroupProps$1, CheckboxCardRootProps, CheckboxCard, Fieldset as Fieldset$1, InputProps as InputProps$1, ListRootProps, NativeSelectFieldProps, NativeSelect as NativeSelect$1, RadioGroup as RadioGroup$1, SelectRootProps, Select as Select$1, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, RadioCard as RadioCard$1, SeparatorProps, LinkProps as LinkProps$1, List as List$1, UseProgressProps, SkeletonProps as SkeletonProps$1, CircleProps, Popover as Popover$1, Pagination as Pagination$1, ChakraProviderProps, SystemContext, TabsRootProps, Tabs as Tabs$1, TableRootProps, Table as Table$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
+import { Accordion as Accordion$1, Alert as Alert$1, ConditionalValue, Breadcrumb as Breadcrumb$1, RecipeVariantProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, Field as Field$1, PopoverRootProps, Dialog, Drawer as Drawer$1, Checkbox as Checkbox$1, CheckboxGroupProps as CheckboxGroupProps$1, CheckboxCardRootProps, CheckboxCard, Fieldset as Fieldset$1, InputProps as InputProps$1, ListRootProps, NativeSelectFieldProps, NativeSelect as NativeSelect$1, RadioGroup as RadioGroup$1, SelectRootProps, SelectLabelProps, Select as Select$1, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, RadioCard as RadioCard$1, SeparatorProps, LinkProps as LinkProps$1, List as List$1, UseProgressProps, SkeletonProps as SkeletonProps$1, CircleProps, Popover as Popover$1, Pagination as Pagination$1, ChakraProviderProps, SystemContext, TabsRootProps, Tabs as Tabs$1, TableRootProps, Table as Table$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
 export { Box, BoxProps, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, CenterProps, Collapsible, CollapsibleRootProps, Container, ContainerProps, Em, Flex, FlexProps, For, FormatByte, FormatNumber, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Kbd, LocaleProvider, Portal, PortalProps, Show, SimpleGrid, SimpleGridProps, Spacer, SpacerProps, Span, Stack, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableColumn, TableColumnHeader, TableColumnHeaderProps, TableColumnProps, TableFooter, TableFooterProps, TableHeader, TableHeaderProps, TableRoot, TableRootProps, TableRow, TableRowProps, UseDisclosureProps, VStack, VisuallyHidden, createListCollection, createSystem, defineConfig, defineRecipe, defineStyle, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useToken } from '@chakra-ui/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { IconComponent } from '@vygruppen/spor-icon-react';
@@ -1574,80 +1574,7 @@ declare const SearchInput: React$1.ForwardRefExoticComponent<_chakra_ui_react.In
     onReset?: () => void;
 } & React$1.RefAttributes<HTMLInputElement>>;
 
-declare const selectSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "item" | "indicator" | "label" | "control" | "itemText" | "itemDescription" | "trigger" | "indicatorGroup" | "selectContent" | "itemGroup" | "itemGroupLabel" | "valueText", {
-    variant: {
-        core: {
-            control: {
-                outline: "1px solid";
-                outlineColor: "core.outline";
-                _hover: {
-                    outline: "2px solid";
-                    outlineColor: "core.outline";
-                };
-                _active: {
-                    backgroundColor: "brand.surface.active";
-                };
-                _disabled: {
-                    pointerEvents: "none";
-                    color: "text.disabled";
-                    backgroundColor: "surface.disabled";
-                };
-            };
-        };
-        floating: {
-            control: {
-                backgroundColor: {
-                    _light: "bg";
-                    _dark: "color-mix(in srgb, white 10%, var(--spor-colors-bg))";
-                };
-                outline: "1px solid";
-                outlineColor: "floating.outline";
-                _hover: {
-                    outline: "1px solid";
-                    outlineColor: "floating.outline.hover";
-                    backgroundColor: {
-                        _light: "floating.surface.hover";
-                        _dark: "color-mix(in srgb, white 10%, var(--spor-colors-bg))";
-                    };
-                };
-                _active: {
-                    outline: "1px solid";
-                    outlineColor: "floating.outline.active";
-                    backgroundColor: "floating.surface.active";
-                };
-            };
-            selectContent: {
-                outline: "1px solid";
-                outlineColor: "floating.outline";
-            };
-        };
-        rightSideSquare: {
-            control: {
-                outline: "1px solid";
-                outlineColor: "core.outline";
-            };
-            trigger: {
-                _focus: {
-                    borderRightRadius: "none";
-                };
-            };
-        };
-        leftSideSquare: {
-            control: {
-                outline: "1px solid";
-                outlineColor: "core.outline";
-            };
-            trigger: {
-                _focus: {
-                    borderLeftRadius: "none";
-                };
-            };
-        };
-    };
-}>;
-
-type SelectVariantProps = RecipeVariantProps<typeof selectSlotRecipe>;
-type SelectProps = SelectRootProps & FieldProps & PropsWithChildren<SelectVariantProps> & {
+type SelectProps = SelectRootProps & FieldProps & {
     label?: string;
 };
 /**
@@ -1680,52 +1607,30 @@ type SelectProps = SelectRootProps & FieldProps & PropsWithChildren<SelectVarian
 declare const Select: React$1.ForwardRefExoticComponent<SelectRootProps<any> & Omit<_chakra_ui_react.FieldRootProps, "label"> & {
     children?: React$1.ReactNode | undefined;
 } & FieldBaseProps & {
-    variant?: _chakra_ui_react.ConditionalValue<"floating" | "core" | "rightSideSquare" | "leftSideSquare" | undefined>;
-} & {
     label?: string;
 } & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: (props: SelectLabelProps) => react_jsx_runtime.JSX.Element;
 declare const SelectItem: React$1.ForwardRefExoticComponent<Select$1.ItemProps & {
-    variant?: _chakra_ui_react.ConditionalValue<"floating" | "core" | "rightSideSquare" | "leftSideSquare" | undefined>;
-} & {
-    children?: React$1.ReactNode | undefined;
-} & {
     children: React$1.ReactNode;
     description?: React$1.ReactNode;
 } & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectItemGroup: React$1.ForwardRefExoticComponent<Select$1.ItemGroupProps & {
-    variant?: _chakra_ui_react.ConditionalValue<"floating" | "core" | "rightSideSquare" | "leftSideSquare" | undefined>;
-} & {
-    children?: React$1.ReactNode | undefined;
-} & {
     label: React$1.ReactNode;
     children: React$1.ReactNode;
 } & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectTrigger: React$1.ForwardRefExoticComponent<Select$1.ControlProps & {
-    variant?: _chakra_ui_react.ConditionalValue<"floating" | "core" | "rightSideSquare" | "leftSideSquare" | undefined>;
-} & {
-    children?: React$1.ReactNode | undefined;
-} & {
     clearable?: boolean;
     children?: React$1.ReactNode;
 } & React$1.RefAttributes<HTMLButtonElement>>;
 declare const SelectContent: React$1.ForwardRefExoticComponent<Select$1.ContentProps & {
-    variant?: _chakra_ui_react.ConditionalValue<"floating" | "core" | "rightSideSquare" | "leftSideSquare" | undefined>;
-} & {
-    children?: React$1.ReactNode | undefined;
-} & {
     portalled?: boolean;
     portalRef?: React$1.RefObject<HTMLElement>;
 } & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectValueText: React$1.ForwardRefExoticComponent<Omit<Select$1.ValueTextProps, "children"> & {
-    variant?: _chakra_ui_react.ConditionalValue<"floating" | "core" | "rightSideSquare" | "leftSideSquare" | undefined>;
-} & {
-    children?: React$1.ReactNode | undefined;
-} & {
     children?(items: CollectionItem[]): React$1.ReactNode;
     placeholder?: string;
     withPlaceholder?: boolean;
 } & React$1.RefAttributes<HTMLSpanElement>>;
-declare const SelectLabel: React$1.ForwardRefExoticComponent<Select$1.LabelProps & React$1.RefAttributes<HTMLLabelElement>>;
 declare const SelectItemText: React$1.ForwardRefExoticComponent<Select$1.ItemTextProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectRoot: Select$1.RootComponent;
 
@@ -3582,7 +3487,7 @@ type ToastProps = {
     variant: Variant;
     id?: string;
 };
-declare const createToast: ({ text, variant, id, duration, }: ToastProps) => string | undefined;
+declare const createToast: ({ text, variant, id, duration, }: ToastProps) => string;
 
 type BadgeProps = BadgeProps$1 & {
     icon?: IconComponent;

package/dist/index.js

@@ -4181,7 +4181,7 @@ var CountryCodeSelect = React28.forwardRef((props, ref) => {
       lazyMount: true,
       "aria-label": t(texts15.countryCode),
       variant: "rightSideSquare",
-      children: callingCodes.items.map((code) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { item: code, children: code.label }, code.label))
+      children: callingCodes.items.map((code) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { as: "option", item: code, children: code.label }, code.label))
     }
   );
 });
@@ -4250,6 +4250,7 @@ var PhoneNumberInput = React28.forwardRef((props, ref) => {
           {
             ref,
             type: "tel",
+            ...props,
             value: value.nationalNumber,
             invalid,
             errorText,
@@ -4263,7 +4264,6 @@ var PhoneNumberInput = React28.forwardRef((props, ref) => {
             },
             variant,
             "data-state": "on",
-            ...props,
             label
           }
         )
@@ -4383,6 +4383,16 @@ var Select = React28__namespace.forwardRef(
     ) });
   }
 );
+var SelectLabel = (props) => {
+  const { value } = react.useSelectContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.Select.Label,
+    {
+      ...props,
+      "data-selected": value.length > 0 ? true : void 0
+    }
+  );
+};
 Select.displayName = "Select";
 var SelectItem = React28__namespace.forwardRef(
   (props, ref) => {
@@ -4390,7 +4400,7 @@ var SelectItem = React28__namespace.forwardRef(
     const recipe = react.useSlotRecipe({ key: "select" });
     const styles = recipe();
     return /* @__PURE__ */ jsxRuntime.jsxs(react.Select.Item, { item, ...rest, ref, css: styles.item, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { width: "100%", children: [
         /* @__PURE__ */ jsxRuntime.jsx(react.Select.ItemText, { display: "flex", children }),
         description && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css: styles.itemDescription, children: description })
       ] }),
@@ -4455,7 +4465,6 @@ var SelectValueText = React28__namespace.forwardRef(function SelectValueText2(pr
     }
   );
 });
-var SelectLabel = react.Select.Label;
 var SelectItemText = react.Select.ItemText;
 var SelectRoot = react.Select.Root;
 var Switch = React28.forwardRef(
@@ -7141,9 +7150,6 @@ var alertSlotRecipe = react.defineSlotRecipe({
       border: "sm"
     },
     description: {
-      display: "flex",
-      alignItems: "flex-start",
-      gap: 1.5,
       color: "text"
     },
     content: {
@@ -7154,7 +7160,8 @@ var alertSlotRecipe = react.defineSlotRecipe({
     },
     title: {
       fontWeight: "bold"
-    }
+    },
+    closeButton: {}
   },
   variants: {
     variant: {
@@ -9226,17 +9233,7 @@ var selectSlotRecipe = react.defineSlotRecipe({
       flexDirection: "column",
       position: "relative",
       cursor: "pointer",
-      zIndex: "dropdown",
-      "& [data-state='open']": {
-        "& + label": {
-          transform: ["scale(0.825) translateY(-10px)"]
-        }
-      },
-      "&:has(button span:not(:empty))": {
-        "& label": {
-          transform: ["scale(0.825) translateY(-10px)"]
-        }
-      }
+      zIndex: "dropdown"
     },
     label: {
       fontSize: ["mobile.sm", "desktop.sm"],
@@ -9244,7 +9241,11 @@ var selectSlotRecipe = react.defineSlotRecipe({
       left: 3,
       zIndex: 0,
       position: "absolute",
+      color: "text",
       marginY: 2,
+      _selected: {
+        transform: ["scale(0.825) translateY(-10px)"]
+      },
       transitionProperty: "transform",
       transitionDuration: "fast",
       transformOrigin: "top left",
@@ -9256,6 +9257,7 @@ var selectSlotRecipe = react.defineSlotRecipe({
       appearance: "none",
       width: "100%",
       height: 8,
+      color: "text",
       paddingY: 1.5,
       paddingX: 3,
       justifyContent: "space-between",
@@ -9306,7 +9308,8 @@ var selectSlotRecipe = react.defineSlotRecipe({
       _open: {
         animationStyle: "slide-fade-in",
         animationDuration: "fast",
-        zIndex: "popover"
+        zIndex: "popover",
+        outline: "none"
       },
       _closed: {
         animationStyle: "slide-fade-out",
@@ -9326,6 +9329,17 @@ var selectSlotRecipe = react.defineSlotRecipe({
       color: "ghost.text",
       cursor: "pointer",
       outline: "none",
+      "&[data-highlighted]:hover": {
+        outlineOffset: "2px",
+        outline: "2px solid",
+        outlineColor: "outline.focus",
+        backgroundColor: "ghost.surface.hover"
+      },
+      "&[data-highlighted]": {
+        outlineOffset: "2px",
+        outline: "2px solid",
+        outlineColor: "outline.focus"
+      },
       _active: {
         backgroundColor: "ghost.surface.active",
         color: "green"