@nextui-org/theme 0.0.0-dev-v2-20230620154717 → 0.0.0-dev-v2-20230620200507

package/dist/components/checkbox.js

@@ -27,7 +27,7 @@ module.exports = __toCommonJS(checkbox_exports);
 var import_tailwind_variants = require("tailwind-variants");
 var checkbox = (0, import_tailwind_variants.tv)({
   slots: {
-    base: "group relative max-w-fit inline-flex items-center justify-start cursor-pointer",
+    base: "group relative max-w-fit inline-flex items-center justify-start cursor-pointer tap-highlight-transparent",
     wrapper: [
       "relative",
       "inline-flex",

package/dist/components/checkbox.mjs

@@ -1,7 +1,7 @@
 import {
   checkbox,
   checkboxGroup
-} from "../chunk-G34JOIZ3.mjs";
+} from "../chunk-C6TGDK6D.mjs";
 export {
   checkbox,
   checkboxGroup

package/dist/components/chip.js

@@ -64,7 +64,7 @@ var bordered = {
   foreground: "bg-transparent border-foreground text-foreground"
 };
 var flat = {
-  default: "bg-default/20 text-default-foreground",
+  default: "bg-default/40 text-default-foreground",
   primary: "bg-primary/20 text-primary",
   secondary: "bg-secondary/20 text-secondary",
   success: "bg-success/20 text-success-600 dark:text-success",
@@ -125,7 +125,8 @@ var chip = (0, import_tailwind_variants.tv)({
       "opacity-70",
       "hover:opacity-100",
       "cursor-pointer",
-      "active:opacity-70"
+      "active:opacity-50",
+      "tap-highlight-transparent"
     ]
   },
   variants: {

package/dist/components/chip.mjs

@@ -1,10 +1,10 @@
 import {
   chip
-} from "../chunk-GRAPREJD.mjs";
+} from "../chunk-ZSOCX2PK.mjs";
 import "../chunk-CMYR6AOY.mjs";
-import "../chunk-FPFQCKUP.mjs";
-import "../chunk-TSW7CNKY.mjs";
 import "../chunk-K7LK7NCE.mjs";
+import "../chunk-CEW7YOHH.mjs";
+import "../chunk-TSW7CNKY.mjs";
 export {
   chip
 };

package/dist/components/code.js

@@ -54,7 +54,7 @@ var bordered = {
   foreground: "bg-transparent border-foreground text-foreground"
 };
 var flat = {
-  default: "bg-default/20 text-default-foreground",
+  default: "bg-default/40 text-default-foreground",
   primary: "bg-primary/20 text-primary",
   secondary: "bg-secondary/20 text-secondary",
   success: "bg-success/20 text-success-600 dark:text-success",

package/dist/components/code.mjs

@@ -1,10 +1,10 @@
 import {
   code
-} from "../chunk-BH4BMASL.mjs";
+} from "../chunk-576B55VI.mjs";
 import "../chunk-CMYR6AOY.mjs";
-import "../chunk-FPFQCKUP.mjs";
-import "../chunk-TSW7CNKY.mjs";
 import "../chunk-K7LK7NCE.mjs";
+import "../chunk-CEW7YOHH.mjs";
+import "../chunk-TSW7CNKY.mjs";
 export {
   code
 };

package/dist/components/index.js

@@ -111,7 +111,7 @@ var bordered = {
   foreground: "bg-transparent border-foreground text-foreground"
 };
 var flat = {
-  default: "bg-default/20 text-default-foreground",
+  default: "bg-default/40 text-default-foreground",
   primary: "bg-primary/20 text-primary",
   secondary: "bg-secondary/20 text-secondary",
   success: "bg-success/20 text-success-600 dark:text-success",
@@ -530,7 +530,7 @@ var card = (0, import_tailwind_variants2.tv)({
     {
       isPressable: true,
       disableAnimation: false,
-      class: "data-[pressed=true]:scale-95"
+      class: "data-[pressed=true]:scale-95 tap-highlight-transparent"
     }
   ],
   defaultVariants: {
@@ -549,7 +549,7 @@ var card = (0, import_tailwind_variants2.tv)({
 var import_tailwind_variants3 = require("tailwind-variants");
 var link = (0, import_tailwind_variants3.tv)({
   base: [
-    "relative inline-flex items-center outline-none",
+    "relative inline-flex items-center outline-none tap-highlight-transparent",
     "data-[focus-visible=true]:outline-none",
     "data-[focus-visible=true]:ring-2",
     "data-[focus-visible=true]:ring-primary",
@@ -594,7 +594,7 @@ var link = (0, import_tailwind_variants3.tv)({
         "after:transition-background",
         "after:absolute"
       ],
-      false: "hover:opacity-80 transition-opacity"
+      false: "hover:opacity-80 active:opacity-50 transition-opacity"
     },
     isDisabled: {
       true: "opacity-50 cursor-default pointer-events-none"
@@ -687,6 +687,7 @@ var button = (0, import_tailwind_variants5.tv)({
     "subpixel-antialiased",
     "data-[pressed=true]:scale-95",
     "overflow-hidden",
+    "tap-highlight-transparent",
     "data-[focus-visible=true]:z-10",
     "data-[focus-visible=true]:outline-none",
     "data-[focus-visible=true]:ring-2",
@@ -1017,7 +1018,7 @@ var button = (0, import_tailwind_variants5.tv)({
     {
       isInGroup: true,
       variant: ["bordered", "ghost"],
-      class: "[&:not(:first-child)]:border-l-0"
+      class: "[&:not(:first-child)]:ml-[calc(theme(borderWidth.2)*-1)]"
     },
     {
       isIconOnly: true,
@@ -1680,7 +1681,8 @@ var chip = (0, import_tailwind_variants11.tv)({
       "opacity-70",
       "hover:opacity-100",
       "cursor-pointer",
-      "active:opacity-70"
+      "active:opacity-50",
+      "tap-highlight-transparent"
     ]
   },
   variants: {
@@ -2530,7 +2532,7 @@ var badge = (0, import_tailwind_variants12.tv)({
 var import_tailwind_variants13 = require("tailwind-variants");
 var checkbox = (0, import_tailwind_variants13.tv)({
   slots: {
-    base: "group relative max-w-fit inline-flex items-center justify-start cursor-pointer",
+    base: "group relative max-w-fit inline-flex items-center justify-start cursor-pointer tap-highlight-transparent",
     wrapper: [
       "relative",
       "inline-flex",
@@ -2698,7 +2700,7 @@ var checkboxGroup = (0, import_tailwind_variants13.tv)({
 var import_tailwind_variants14 = require("tailwind-variants");
 var radio = (0, import_tailwind_variants14.tv)({
   slots: {
-    base: "group relative max-w-fit inline-flex items-center justify-start cursor-pointer",
+    base: "group relative max-w-fit inline-flex items-center justify-start cursor-pointer tap-highlight-transparent",
     wrapper: [
       "relative",
       "inline-flex",
@@ -2870,8 +2872,19 @@ var radioGroup = (0, import_tailwind_variants14.tv)({
 var import_tailwind_variants15 = require("tailwind-variants");
 var pagination = (0, import_tailwind_variants15.tv)({
   slots: {
-    base: ["flex flex-nowrap overflow-x-scroll py-2.5 relative items-center gap-1 max-w-fit h-fit"],
-    item: [],
+    base: [
+      "flex",
+      "flex-nowrap",
+      "h-fit",
+      "max-w-fit",
+      "py-2.5",
+      "relative",
+      "gap-1",
+      "items-center",
+      "overflow-x-scroll",
+      "scrollbar-hide"
+    ],
+    item: ["tap-highlight-transparent"],
     prev: "",
     next: "",
     cursor: [
@@ -3252,7 +3265,7 @@ var pagination = (0, import_tailwind_variants15.tv)({
 var import_tailwind_variants16 = require("tailwind-variants");
 var toggle = (0, import_tailwind_variants16.tv)({
   slots: {
-    base: "group relative max-w-fit inline-flex items-center justify-start cursor-pointer touch-none",
+    base: "group relative max-w-fit inline-flex items-center justify-start cursor-pointer touch-none tap-highlight-transparent",
     wrapper: [
       "px-1",
       "relative",
@@ -3458,8 +3471,8 @@ var accordionItem = (0, import_tailwind_variants17.tv)({
     ],
     heading: "",
     trigger: [
-      "flex py-4 w-full h-full gap-3 outline-none items-center",
-      "data-[pressed=true]:opacity-80",
+      "flex py-4 w-full h-full gap-3 outline-none items-center tap-highlight-transparent",
+      "data-[pressed=true]:opacity-50",
       "data-[focus-visible=true]:outline-none",
       "data-[focus-visible=true]:ring-2",
       "data-[focus-visible=true]:ring-primary",
@@ -5170,6 +5183,7 @@ var modal = (0, import_tailwind_variants23.tv)({
       "rounded-full",
       "hover:bg-default-100",
       "active:bg-default-200",
+      "tap-highlight-transparent",
       "data-[focus-visible]:outline-none",
       "data-[focus-visible]:ring-2",
       "data-[focus-visible]:!ring-primary",
@@ -5322,6 +5336,7 @@ var navbar = (0, import_tailwind_variants24.tv)({
       "h-full",
       "outline-none",
       "rounded-sm",
+      "tap-highlight-transparent",
       "data-[focus-visible=true]:outline-none",
       "data-[focus-visible=true]:ring-2",
       "data-[focus-visible=true]:ring-primary",
@@ -5745,7 +5760,17 @@ var import_tailwind_variants29 = require("tailwind-variants");
 var tabs = (0, import_tailwind_variants29.tv)({
   slots: {
     base: "inline-flex",
-    tabList: ["flex", "items-center", "gap-2", "bg-default-100", "p-1", "h-fit"],
+    tabList: [
+      "flex",
+      "p-1",
+      "h-fit",
+      "gap-2",
+      "items-center",
+      "flex-nowrap",
+      "overflow-x-scroll",
+      "scrollbar-hide",
+      "bg-default-100"
+    ],
     tab: [
       "z-0",
       "w-full",
@@ -5761,7 +5786,7 @@ var tabs = (0, import_tailwind_variants29.tv)({
       "transition-opacity",
       "data-[disabled=true]:cursor-not-allowed",
       "data-[disabled=true]:opacity-30",
-      "data-[hover-unselected=true]:opacity-70",
+      "data-[hover-unselected=true]:opacity-50",
       "data-[focus-visible=true]:outline-none",
       "data-[focus-visible=true]:ring-2",
       "data-[focus-visible=true]:ring-primary",

package/dist/components/index.mjs

@@ -1,35 +1,23 @@
 import "../chunk-PRWEADY4.mjs";
-import {
-  table
-} from "../chunk-U54UQOTS.mjs";
-import {
-  tabs
-} from "../chunk-NVCWXYAR.mjs";
 import {
   toggle
-} from "../chunk-42RVICJN.mjs";
+} from "../chunk-UKSPZOXY.mjs";
 import {
   user
 } from "../chunk-ZFYINWFR.mjs";
-import {
-  pagination
-} from "../chunk-RT4IWYYT.mjs";
-import {
-  popover
-} from "../chunk-O32L4YWJ.mjs";
 import {
   progress
 } from "../chunk-BHHIVMOY.mjs";
 import {
   radio,
   radioGroup
-} from "../chunk-2RQFBKZ4.mjs";
+} from "../chunk-E7FRZBCH.mjs";
 import {
   skeleton
 } from "../chunk-P5E3PNHW.mjs";
 import {
   snippet
-} from "../chunk-DWC7GT4K.mjs";
+} from "../chunk-3D7G7PZH.mjs";
 import {
   spacer
 } from "../chunk-3B4SYPW2.mjs";
@@ -37,14 +25,11 @@ import {
   spinner
 } from "../chunk-HOQUCE4N.mjs";
 import {
-  dropdown,
-  dropdownItem,
-  dropdownMenu,
-  dropdownSection
-} from "../chunk-4K3TOAY2.mjs";
+  table
+} from "../chunk-U54UQOTS.mjs";
 import {
-  image
-} from "../chunk-R4PNBVFX.mjs";
+  tabs
+} from "../chunk-HI3IKEJ5.mjs";
 import {
   input
 } from "../chunk-YEHFHLHQ.mjs";
@@ -54,54 +39,69 @@ import {
 import {
   link,
   linkAnchorClasses
-} from "../chunk-YQXYRWJP.mjs";
+} from "../chunk-I36TDMJB.mjs";
 import {
   modal
-} from "../chunk-UHOIXUPW.mjs";
+} from "../chunk-AUOEYXLQ.mjs";
 import {
   navbar
-} from "../chunk-LWJT5D6G.mjs";
+} from "../chunk-A4SRDPJZ.mjs";
 import {
-  button,
-  buttonGroup
-} from "../chunk-QU6QFAKV.mjs";
+  pagination
+} from "../chunk-RHBJWSYV.mjs";
 import {
-  card
-} from "../chunk-QW2ZGOKD.mjs";
+  popover
+} from "../chunk-SEWAA5ZW.mjs";
 import {
   checkbox,
   checkboxGroup
-} from "../chunk-G34JOIZ3.mjs";
+} from "../chunk-C6TGDK6D.mjs";
 import {
   chip
-} from "../chunk-GRAPREJD.mjs";
+} from "../chunk-ZSOCX2PK.mjs";
 import {
   circularProgress
 } from "../chunk-UPBFQDTD.mjs";
 import {
   code
-} from "../chunk-BH4BMASL.mjs";
+} from "../chunk-576B55VI.mjs";
 import {
   divider
 } from "../chunk-2ENRZMQI.mjs";
 import {
   drip
 } from "../chunk-OIVGIOVG.mjs";
+import {
+  dropdown,
+  dropdownItem,
+  dropdownMenu,
+  dropdownSection
+} from "../chunk-4K3TOAY2.mjs";
+import {
+  image
+} from "../chunk-R4PNBVFX.mjs";
 import {
   accordion,
   accordionItem
-} from "../chunk-HNRHIJNK.mjs";
+} from "../chunk-YNGJCDQN.mjs";
 import {
   avatar,
   avatarGroup
-} from "../chunk-D4S5JGOT.mjs";
+} from "../chunk-ZQF2KGKX.mjs";
 import {
   badge
-} from "../chunk-4G25OMVV.mjs";
+} from "../chunk-I75M4OOG.mjs";
+import {
+  button,
+  buttonGroup
+} from "../chunk-7VYHIENL.mjs";
 import "../chunk-CMYR6AOY.mjs";
-import "../chunk-FPFQCKUP.mjs";
-import "../chunk-TSW7CNKY.mjs";
 import "../chunk-K7LK7NCE.mjs";
+import "../chunk-CEW7YOHH.mjs";
+import {
+  card
+} from "../chunk-IN5LCODJ.mjs";
+import "../chunk-TSW7CNKY.mjs";
 export {
   accordion,
   accordionItem,

package/dist/components/link.d.ts

@@ -33,7 +33,7 @@ declare const link: tailwind_variants.TVReturnType<{
     };
     isBlock: {
         true: string[];
-        false: "hover:opacity-80 transition-opacity";
+        false: "hover:opacity-80 active:opacity-50 transition-opacity";
     };
     isDisabled: {
         true: "opacity-50 cursor-default pointer-events-none";
@@ -66,7 +66,7 @@ declare const link: tailwind_variants.TVReturnType<{
     };
     isBlock: {
         true: string[];
-        false: "hover:opacity-80 transition-opacity";
+        false: "hover:opacity-80 active:opacity-50 transition-opacity";
     };
     isDisabled: {
         true: "opacity-50 cursor-default pointer-events-none";
@@ -99,7 +99,7 @@ declare const link: tailwind_variants.TVReturnType<{
     };
     isBlock: {
         true: string[];
-        false: "hover:opacity-80 transition-opacity";
+        false: "hover:opacity-80 active:opacity-50 transition-opacity";
     };
     isDisabled: {
         true: "opacity-50 cursor-default pointer-events-none";
@@ -132,7 +132,7 @@ declare const link: tailwind_variants.TVReturnType<{
     };
     isBlock: {
         true: string[];
-        false: "hover:opacity-80 transition-opacity";
+        false: "hover:opacity-80 active:opacity-50 transition-opacity";
     };
     isDisabled: {
         true: "opacity-50 cursor-default pointer-events-none";

package/dist/components/link.js

@@ -27,7 +27,7 @@ module.exports = __toCommonJS(link_exports);
 var import_tailwind_variants = require("tailwind-variants");
 var link = (0, import_tailwind_variants.tv)({
   base: [
-    "relative inline-flex items-center outline-none",
+    "relative inline-flex items-center outline-none tap-highlight-transparent",
     "data-[focus-visible=true]:outline-none",
     "data-[focus-visible=true]:ring-2",
     "data-[focus-visible=true]:ring-primary",
@@ -72,7 +72,7 @@ var link = (0, import_tailwind_variants.tv)({
         "after:transition-background",
         "after:absolute"
       ],
-      false: "hover:opacity-80 transition-opacity"
+      false: "hover:opacity-80 active:opacity-50 transition-opacity"
     },
     isDisabled: {
       true: "opacity-50 cursor-default pointer-events-none"

package/dist/components/link.mjs

@@ -1,7 +1,7 @@
 import {
   link,
   linkAnchorClasses
-} from "../chunk-YQXYRWJP.mjs";
+} from "../chunk-I36TDMJB.mjs";
 export {
   link,
   linkAnchorClasses

package/dist/components/modal.js

@@ -69,6 +69,7 @@ var modal = (0, import_tailwind_variants.tv)({
       "rounded-full",
       "hover:bg-default-100",
       "active:bg-default-200",
+      "tap-highlight-transparent",
       "data-[focus-visible]:outline-none",
       "data-[focus-visible]:ring-2",
       "data-[focus-visible]:!ring-primary",

package/dist/components/modal.mjs

@@ -1,6 +1,6 @@
 import {
   modal
-} from "../chunk-UHOIXUPW.mjs";
+} from "../chunk-AUOEYXLQ.mjs";
 export {
   modal
 };

package/dist/components/navbar.js

@@ -58,6 +58,7 @@ var navbar = (0, import_tailwind_variants.tv)({
       "h-full",
       "outline-none",
       "rounded-sm",
+      "tap-highlight-transparent",
       "data-[focus-visible=true]:outline-none",
       "data-[focus-visible=true]:ring-2",
       "data-[focus-visible=true]:ring-primary",

package/dist/components/navbar.mjs

@@ -1,6 +1,6 @@
 import {
   navbar
-} from "../chunk-LWJT5D6G.mjs";
+} from "../chunk-A4SRDPJZ.mjs";
 export {
   navbar
 };

package/dist/components/pagination.d.ts

@@ -100,7 +100,7 @@ declare const pagination: tailwind_variants.TVReturnType<{
     };
 }, {
     base: string[];
-    item: never[];
+    item: string[];
     prev: string;
     next: string;
     cursor: string[];
@@ -349,7 +349,7 @@ declare const pagination: tailwind_variants.TVReturnType<{
     };
 }, {
     base: string[];
-    item: never[];
+    item: string[];
     prev: string;
     next: string;
     cursor: string[];

package/dist/components/pagination.js

@@ -54,7 +54,7 @@ var bordered = {
   foreground: "bg-transparent border-foreground text-foreground"
 };
 var flat = {
-  default: "bg-default/20 text-default-foreground",
+  default: "bg-default/40 text-default-foreground",
   primary: "bg-primary/20 text-primary",
   secondary: "bg-secondary/20 text-secondary",
   success: "bg-success/20 text-success-600 dark:text-success",
@@ -102,8 +102,19 @@ var colorVariants = {
 // src/components/pagination.ts
 var pagination = (0, import_tailwind_variants.tv)({
   slots: {
-    base: ["flex flex-nowrap overflow-x-scroll py-2.5 relative items-center gap-1 max-w-fit h-fit"],
-    item: [],
+    base: [
+      "flex",
+      "flex-nowrap",
+      "h-fit",
+      "max-w-fit",
+      "py-2.5",
+      "relative",
+      "gap-1",
+      "items-center",
+      "overflow-x-scroll",
+      "scrollbar-hide"
+    ],
+    item: ["tap-highlight-transparent"],
     prev: "",
     next: "",
     cursor: [

package/dist/components/pagination.mjs

@@ -1,10 +1,10 @@
 import {
   pagination
-} from "../chunk-RT4IWYYT.mjs";
+} from "../chunk-RHBJWSYV.mjs";
 import "../chunk-CMYR6AOY.mjs";
-import "../chunk-FPFQCKUP.mjs";
-import "../chunk-TSW7CNKY.mjs";
 import "../chunk-K7LK7NCE.mjs";
+import "../chunk-CEW7YOHH.mjs";
+import "../chunk-TSW7CNKY.mjs";
 export {
   pagination
 };

package/dist/components/popover.js

@@ -54,7 +54,7 @@ var bordered = {
   foreground: "bg-transparent border-foreground text-foreground"
 };
 var flat = {
-  default: "bg-default/20 text-default-foreground",
+  default: "bg-default/40 text-default-foreground",
   primary: "bg-primary/20 text-primary",
   secondary: "bg-secondary/20 text-secondary",
   success: "bg-success/20 text-success-600 dark:text-success",

package/dist/components/popover.mjs

@@ -1,10 +1,10 @@
 import {
   popover
-} from "../chunk-O32L4YWJ.mjs";
+} from "../chunk-SEWAA5ZW.mjs";
 import "../chunk-CMYR6AOY.mjs";
-import "../chunk-FPFQCKUP.mjs";
-import "../chunk-TSW7CNKY.mjs";
 import "../chunk-K7LK7NCE.mjs";
+import "../chunk-CEW7YOHH.mjs";
+import "../chunk-TSW7CNKY.mjs";
 export {
   popover
 };

package/dist/components/radio.js

@@ -27,7 +27,7 @@ module.exports = __toCommonJS(radio_exports);
 var import_tailwind_variants = require("tailwind-variants");
 var radio = (0, import_tailwind_variants.tv)({
   slots: {
-    base: "group relative max-w-fit inline-flex items-center justify-start cursor-pointer",
+    base: "group relative max-w-fit inline-flex items-center justify-start cursor-pointer tap-highlight-transparent",
     wrapper: [
       "relative",
       "inline-flex",

package/dist/components/radio.mjs

@@ -1,7 +1,7 @@
 import {
   radio,
   radioGroup
-} from "../chunk-2RQFBKZ4.mjs";
+} from "../chunk-E7FRZBCH.mjs";
 export {
   radio,
   radioGroup

package/dist/components/snippet.js

@@ -54,7 +54,7 @@ var bordered = {
   foreground: "bg-transparent border-foreground text-foreground"
 };
 var flat = {
-  default: "bg-default/20 text-default-foreground",
+  default: "bg-default/40 text-default-foreground",
   primary: "bg-primary/20 text-primary",
   secondary: "bg-secondary/20 text-secondary",
   success: "bg-success/20 text-success-600 dark:text-success",

package/dist/components/snippet.mjs

@@ -1,10 +1,10 @@
 import {
   snippet
-} from "../chunk-DWC7GT4K.mjs";
+} from "../chunk-3D7G7PZH.mjs";
 import "../chunk-CMYR6AOY.mjs";
-import "../chunk-FPFQCKUP.mjs";
-import "../chunk-TSW7CNKY.mjs";
 import "../chunk-K7LK7NCE.mjs";
+import "../chunk-CEW7YOHH.mjs";
+import "../chunk-TSW7CNKY.mjs";
 export {
   snippet
 };

package/dist/components/tabs.js

@@ -54,7 +54,7 @@ var bordered = {
   foreground: "bg-transparent border-foreground text-foreground"
 };
 var flat = {
-  default: "bg-default/20 text-default-foreground",
+  default: "bg-default/40 text-default-foreground",
   primary: "bg-primary/20 text-primary",
   secondary: "bg-secondary/20 text-secondary",
   success: "bg-success/20 text-success-600 dark:text-success",
@@ -103,7 +103,17 @@ var colorVariants = {
 var tabs = (0, import_tailwind_variants.tv)({
   slots: {
     base: "inline-flex",
-    tabList: ["flex", "items-center", "gap-2", "bg-default-100", "p-1", "h-fit"],
+    tabList: [
+      "flex",
+      "p-1",
+      "h-fit",
+      "gap-2",
+      "items-center",
+      "flex-nowrap",
+      "overflow-x-scroll",
+      "scrollbar-hide",
+      "bg-default-100"
+    ],
     tab: [
       "z-0",
       "w-full",
@@ -119,7 +129,7 @@ var tabs = (0, import_tailwind_variants.tv)({
       "transition-opacity",
       "data-[disabled=true]:cursor-not-allowed",
       "data-[disabled=true]:opacity-30",
-      "data-[hover-unselected=true]:opacity-70",
+      "data-[hover-unselected=true]:opacity-50",
       "data-[focus-visible=true]:outline-none",
       "data-[focus-visible=true]:ring-2",
       "data-[focus-visible=true]:ring-primary",