@vygruppen/spor-react 13.7.0 → 13.7.2

package/dist/index.d.cts

@@ -4333,6 +4333,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
         neutral: {
             backgroundColor: "surface";
             color: "text";
+            outlineColor: "outline";
             "& svg": {
                 color: "icon";
             };
@@ -4340,6 +4341,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
         grey: {
             backgroundColor: "surface.neutral";
             color: "text.neutral";
+            outlineColor: "outline.neutral";
             "& svg": {
                 color: "icon.neutral";
             };
@@ -4347,6 +4349,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
         green: {
             backgroundColor: "surface.success";
             color: "text.success";
+            outlineColor: "outline.success";
             "& svg": {
                 color: "icon.success";
             };
@@ -4354,6 +4357,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
         blue: {
             backgroundColor: "surface.info";
             color: "text.info";
+            outlineColor: "outline.info";
             "& svg": {
                 color: "icon.info";
             };
@@ -4361,6 +4365,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
         cream: {
             backgroundColor: "surface.warning";
             color: "text.warning";
+            outlineColor: "outline.warning";
             "& svg": {
                 color: "icon.warning";
             };
@@ -4368,6 +4373,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
         yellow: {
             backgroundColor: "surface.notice";
             color: "text.notice";
+            outlineColor: "outline.notice";
             "& svg": {
                 color: "icon.notice";
             };
@@ -4375,6 +4381,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
         orange: {
             backgroundColor: "surface.caution";
             color: "text.caution";
+            outlineColor: "outline.caution";
             "& svg": {
                 color: "icon.caution";
             };
@@ -4382,6 +4389,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
         red: {
             backgroundColor: "surface.critical";
             color: "text.critical";
+            outlineColor: "outline.critical";
             "& svg": {
                 color: "icon.critical";
             };
@@ -4395,6 +4403,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
                 _light: "pink";
                 _dark: "pink";
             };
+            outlineColor: "outline.error";
             "& svg": {
                 color: {
                     _light: "pink";
@@ -4405,6 +4414,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
         disabled: {
             backgroundColor: "surface.disabled";
             color: "text.disabled";
+            outlineColor: "outline.disabled";
             "& svg": {
                 color: "icon.disabled";
             };

package/dist/index.d.ts

@@ -4333,6 +4333,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
         neutral: {
             backgroundColor: "surface";
             color: "text";
+            outlineColor: "outline";
             "& svg": {
                 color: "icon";
             };
@@ -4340,6 +4341,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
         grey: {
             backgroundColor: "surface.neutral";
             color: "text.neutral";
+            outlineColor: "outline.neutral";
             "& svg": {
                 color: "icon.neutral";
             };
@@ -4347,6 +4349,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
         green: {
             backgroundColor: "surface.success";
             color: "text.success";
+            outlineColor: "outline.success";
             "& svg": {
                 color: "icon.success";
             };
@@ -4354,6 +4357,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
         blue: {
             backgroundColor: "surface.info";
             color: "text.info";
+            outlineColor: "outline.info";
             "& svg": {
                 color: "icon.info";
             };
@@ -4361,6 +4365,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
         cream: {
             backgroundColor: "surface.warning";
             color: "text.warning";
+            outlineColor: "outline.warning";
             "& svg": {
                 color: "icon.warning";
             };
@@ -4368,6 +4373,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
         yellow: {
             backgroundColor: "surface.notice";
             color: "text.notice";
+            outlineColor: "outline.notice";
             "& svg": {
                 color: "icon.notice";
             };
@@ -4375,6 +4381,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
         orange: {
             backgroundColor: "surface.caution";
             color: "text.caution";
+            outlineColor: "outline.caution";
             "& svg": {
                 color: "icon.caution";
             };
@@ -4382,6 +4389,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
         red: {
             backgroundColor: "surface.critical";
             color: "text.critical";
+            outlineColor: "outline.critical";
             "& svg": {
                 color: "icon.critical";
             };
@@ -4395,6 +4403,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
                 _light: "pink";
                 _dark: "pink";
             };
+            outlineColor: "outline.error";
             "& svg": {
                 color: {
                     _light: "pink";
@@ -4405,6 +4414,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
         disabled: {
             backgroundColor: "surface.disabled";
             color: "text.disabled";
+            outlineColor: "outline.disabled";
             "& svg": {
                 color: "icon.disabled";
             };

package/dist/index.mjs

@@ -673,58 +673,70 @@ var badgeRecipie = defineRecipe({
     alignItems: "center",
     justifyContent: "center",
     height: "fit-content",
-    gap: "0.5"
+    gap: "0.5",
+    outline: "1px solid",
+    outlineOffset: "-1px"
   },
   variants: {
     colorPalette: {
       neutral: {
         backgroundColor: "surface",
         color: "text",
+        outlineColor: "outline",
         "& svg": { color: "icon" }
       },
       grey: {
         backgroundColor: "surface.neutral",
         color: "text.neutral",
+        outlineColor: "outline.neutral",
         "& svg": { color: "icon.neutral" }
       },
       green: {
         backgroundColor: "surface.success",
         color: "text.success",
+        outlineColor: "outline.success",
         "& svg": { color: "icon.success" }
       },
       blue: {
         backgroundColor: "surface.info",
         color: "text.info",
+        outlineColor: "outline.info",
         "& svg": { color: "icon.info" }
       },
       cream: {
         backgroundColor: "surface.warning",
         color: "text.warning",
+        outlineColor: "outline.warning",
         "& svg": { color: "icon.warning" }
       },
       yellow: {
         backgroundColor: "surface.notice",
         color: "text.notice",
+        outlineColor: "outline.notice",
         "& svg": { color: "icon.notice" }
       },
       orange: {
         backgroundColor: "surface.caution",
         color: "text.caution",
+        outlineColor: "outline.caution",
         "& svg": { color: "icon.caution" }
       },
       red: {
         backgroundColor: "surface.critical",
         color: "text.critical",
+        outlineColor: "outline.critical",
         "& svg": { color: "icon.critical" }
       },
       brightRed: {
         backgroundColor: { _light: "brightRed", _dark: "brightRed" },
         color: { _light: "pink", _dark: "pink" },
+        outlineColor: "outline.error",
         "& svg": { color: { _light: "pink", _dark: "pink" } }
       },
       disabled: {
         backgroundColor: "surface.disabled",
         color: "text.disabled",
+        outlineColor: "outline.disabled",
         "& svg": { color: "icon.disabled" }
       }
     },
@@ -767,6 +779,7 @@ var badgeRecipie = defineRecipe({
       css: {
         backgroundColor: { _light: "darkBlue", _dark: "lightBlue" },
         color: { _light: "icyBlue", _dark: "royal" },
+        outlineColor: { _light: "ocean", _dark: "cloudy" },
         "& svg": { color: { _light: "royal", _dark: "icyBlue" } }
       }
     },
@@ -776,6 +789,7 @@ var badgeRecipie = defineRecipe({
       css: {
         backgroundColor: { _light: "darkTeal", _dark: "seaMist" },
         color: { _light: "mint", _dark: "jungle" },
+        outlineColor: { _light: "greenHaze", _dark: "coralGreen" },
         "& svg": { color: { _light: "mint", _dark: "jungle" } }
       }
     },
@@ -785,6 +799,7 @@ var badgeRecipie = defineRecipe({
       css: {
         backgroundColor: { _light: "carbon", _dark: "platinum" },
         color: { _light: "white", _dark: "darkGrey" },
+        outlineColor: { _light: "iron", _dark: "silver" },
         "& svg": { color: { _light: "white", _dark: "darkGrey" } }
       }
     },
@@ -795,6 +810,7 @@ var badgeRecipie = defineRecipe({
       css: {
         backgroundColor: { _light: "coffee", _dark: "blonde" },
         color: { _light: "cornsilk", _dark: "coffee" },
+        outlineColor: { _light: "bronze", _dark: "banana" },
         "& svg": { color: { _light: "cornsilk", _dark: "coffee" } }
       }
     },
@@ -804,6 +820,7 @@ var badgeRecipie = defineRecipe({
       css: {
         backgroundColor: { _light: "bronze", _dark: "banana" },
         color: { _light: "cornsilk", _dark: "coffee" },
+        outlineColor: { _light: "golden", _dark: "banana" },
         "& svg": { color: { _light: "cornsilk", _dark: "coffee" } }
       }
     },
@@ -813,6 +830,7 @@ var badgeRecipie = defineRecipe({
       css: {
         backgroundColor: { _light: "wood", _dark: "champagne" },
         color: { _light: "bisque", _dark: "wood" },
+        outlineColor: { _light: "russet", _dark: "saffron" },
         "& svg": { color: { _light: "bisque", _dark: "wood" } }
       }
     },
@@ -822,6 +840,7 @@ var badgeRecipie = defineRecipe({
       css: {
         backgroundColor: { _light: "burgundy", _dark: "lightRed" },
         color: { _light: "pink", _dark: "maroon" },
+        outlineColor: { _light: "crimson", _dark: "salmon" },
         "& svg": { color: { _light: "pink", _dark: "maroon" } }
       }
     },
@@ -831,6 +850,7 @@ var badgeRecipie = defineRecipe({
       inverted: true,
       css: {
         backgroundColor: { _light: "ink", _dark: "white" },
+        outlineColor: { _light: "whiteAlpha.400", _dark: "blackAlpha.400" },
         color: { _light: "white", _dark: "darkGrey" },
         "& svg": { color: { _light: "white", _dark: "darkGrey" } }
       }
@@ -1571,7 +1591,7 @@ var RadioCard = ({
     ),
     /* @__PURE__ */ jsxs(RadioCard$1.ItemControl, { id: itemControlId, "aria-hidden": true, children: [
       showIndicator && /* @__PURE__ */ jsx(RadioCard$1.ItemIndicator, {}),
-      children
+      /* @__PURE__ */ jsx(Flex, { direction: "column", width: "100%", children })
     ] })
   ] });
 };
@@ -2089,18 +2109,17 @@ var Field3 = ({
         id,
         gap,
         children: [
-          label && !floatingLabel && /* @__PURE__ */ jsx(Label, { asChild: labelAsChild, "aria-hidden": true, css: styles.label, children: renderLabelWithIndicator(label, labelAsChild) }),
-          children,
+          label && !floatingLabel && /* @__PURE__ */ jsx(Label, { asChild: labelAsChild, css: styles.label, children: renderLabelWithIndicator(label, labelAsChild) }),
           label && floatingLabel && /* @__PURE__ */ jsx(
             FloatingLabel,
             {
               "data-float": shouldFloat ? true : void 0,
               asChild: labelAsChild,
-              "aria-hidden": true,
               css: styles.label,
               children: renderLabelWithIndicator(label, labelAsChild)
             }
           ),
+          children,
           errorText && /* @__PURE__ */ jsx(Field.ErrorText, { "aria-live": "polite", children: errorText })
         ]
       }
@@ -11569,6 +11588,11 @@ var selectSlotRecipe = defineSlotRecipe({
         outlineColor: "outline.error"
       }
     },
+    valueText: {
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      overflow: "hidden"
+    },
     itemText: {
       flex: "1",
       alignItems: "center"