@northlight/ui 2.27.4 → 2.28.1

package/dist/umd/northlight.cjs

@@ -514,6 +514,7 @@
     }),
     option: (provided, state) => __spreadProps$w(__spreadValues$2k({}, provided), {
       background: state.isFocused && "background.select.option-focus",
+      overflowWrap: "anywhere",
       _active: {
         background: "background.select.option-active"
       }
@@ -3034,6 +3035,7 @@
     variants: {
       default: ({ theme: { colors: color } }) => ({
         bgColor: color.background.button.default,
+        color: color.text.button.default,
         _hover: {
           bgColor: color.background.button["default-hover"]
         },
@@ -3721,6 +3723,11 @@
 
   const Tabs$1 = {
     parts: ["tab"],
+    baseStyle: ({ theme: { fontWeights: coreFontWeight } }) => ({
+      tab: {
+        fontWeight: coreFontWeight.semiBold
+      }
+    }),
     variants: {
       "soft-rounded": ({ theme: { colors: color } }) => ({
         tab: {
@@ -3730,6 +3737,27 @@
             bg: color.background.tabs["soft-rounded-active"],
             color: color.text.tabs["soft-rounded-active"]
           },
+          _hover: {
+            color: color.text.tabs["soft-rounded-active"]
+          },
+          _focusVisible: {
+            ring: "2px",
+            ringColor: color.border.wcag,
+            ringOffset: "1px"
+          }
+        }
+      }),
+      rounded: ({ theme: { colors: color, radii: borderRadius } }) => ({
+        tab: {
+          color: color.text.subdued,
+          borderRadius: borderRadius.button.default,
+          _selected: {
+            bg: color.background.tabs["soft-rounded-active"],
+            color: color.text.tabs["soft-rounded-active"]
+          },
+          _hover: {
+            color: color.text.tabs["soft-rounded-active"]
+          },
           _focusVisible: {
             ring: "2px",
             ringColor: color.border.wcag,
@@ -3750,6 +3778,25 @@
             ringOffset: "1px"
           }
         }
+      }),
+      line: ({ theme: { colors: color } }) => ({
+        tab: {
+          color: color.text.subdued,
+          _selected: {
+            color: color.text.tabs["soft-rounded-active"]
+          },
+          _hover: {
+            color: color.text.tabs["soft-rounded-active"]
+          },
+          _active: {
+            bg: color.mono.transparent
+          },
+          _focusVisible: {
+            ring: "2px",
+            ringColor: color.border.wcag,
+            ringOffset: "1px"
+          }
+        }
       })
     }
   };
@@ -12629,7 +12676,7 @@
   const Tabs = (_a) => {
     var _b = _a, {
       children,
-      variant = "soft-rounded",
+      variant = "rounded",
       isManual = true
     } = _b, rest = __objRest$i(_b, [
       "children",
@@ -14328,6 +14375,10 @@
     enumerable: true,
     get: function () { return react.ListItem; }
   });
+  Object.defineProperty(exports, 'Mark', {
+    enumerable: true,
+    get: function () { return react.Mark; }
+  });
   Object.defineProperty(exports, 'MenuButton', {
     enumerable: true,
     get: function () { return react.MenuButton; }