flowcore-fn 2.8.3 → 2.8.5

package/dist/pkg-index.css

@@ -3,7 +3,7 @@
 @layer theme, base, components, utilities;
 @layer theme {
   :root,
-  .flowcore-root :host {
+  :host {
     --font-sans:
       ui-sans-serif,
       system-ui,
@@ -107,210 +107,9 @@
     --default-mono-font-family: var(--font-mono);
   }
 }
-@layer base {
-  .flowcore-root *,
-  .flowcore-root ::after,
-  .flowcore-root ::before,
-  .flowcore-root ::backdrop,
-  .flowcore-root ::file-selector-button {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    border: 0 solid;
-  }
-  html,
-  .flowcore-root :host {
-    line-height: 1.5;
-    -webkit-text-size-adjust: 100%;
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
-    tab-size: 4;
-    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
-    font-feature-settings: var(--default-font-feature-settings, normal);
-    font-variation-settings: var(--default-font-variation-settings, normal);
-    -webkit-tap-highlight-color: transparent;
-  }
-  .flowcore-root hr {
-    height: 0;
-    color: inherit;
-    border-top-width: 1px;
-  }
-  .flowcore-root abbr:where([title]) {
-    -webkit-text-decoration: underline dotted;
-    text-decoration: underline dotted;
-  }
-  .flowcore-root h1,
-  .flowcore-root h2,
-  .flowcore-root h3,
-  .flowcore-root h4,
-  .flowcore-root h5,
-  .flowcore-root h6 {
-    font-size: inherit;
-    font-weight: inherit;
-  }
-  .flowcore-root a {
-    color: inherit;
-    -webkit-text-decoration: inherit;
-    text-decoration: inherit;
-  }
-  .flowcore-root b,
-  .flowcore-root strong {
-    font-weight: bolder;
-  }
-  .flowcore-root code,
-  .flowcore-root kbd,
-  .flowcore-root samp,
-  .flowcore-root pre {
-    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
-    font-feature-settings: var(--default-mono-font-feature-settings, normal);
-    font-variation-settings: var(--default-mono-font-variation-settings, normal);
-    font-size: 1em;
-  }
-  .flowcore-root small {
-    font-size: 80%;
-  }
-  .flowcore-root sub,
-  .flowcore-root sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-  .flowcore-root sub {
-    bottom: -0.25em;
-  }
-  .flowcore-root sup {
-    top: -0.5em;
-  }
-  .flowcore-root table {
-    text-indent: 0;
-    border-color: inherit;
-    border-collapse: collapse;
-  }
-  .flowcore-root :-moz-focusring {
-    outline: auto;
-  }
-  .flowcore-root progress {
-    vertical-align: baseline;
-  }
-  .flowcore-root summary {
-    display: list-item;
-  }
-  .flowcore-root ol,
-  .flowcore-root ul,
-  .flowcore-root menu {
-    list-style: none;
-  }
-  .flowcore-root img,
-  .flowcore-root svg,
-  .flowcore-root video,
-  .flowcore-root canvas,
-  .flowcore-root audio,
-  .flowcore-root iframe,
-  .flowcore-root embed,
-  .flowcore-root object {
-    display: block;
-    vertical-align: middle;
-  }
-  .flowcore-root img,
-  .flowcore-root video {
-    max-width: 100%;
-    height: auto;
-  }
-  .flowcore-root button,
-  .flowcore-root input,
-  .flowcore-root select,
-  .flowcore-root optgroup,
-  .flowcore-root textarea,
-  .flowcore-root ::file-selector-button {
-    font: inherit;
-    font-feature-settings: inherit;
-    font-variation-settings: inherit;
-    letter-spacing: inherit;
-    color: inherit;
-    border-radius: 0;
-    background-color: transparent;
-    opacity: 1;
-  }
-  .flowcore-root :where(select:is([multiple], [size])) optgroup {
-    font-weight: bolder;
-  }
-  .flowcore-root :where(select:is([multiple], [size])) optgroup option {
-    padding-inline-start: 20px;
-  }
-  .flowcore-root ::file-selector-button {
-    margin-inline-end: 4px;
-  }
-  .flowcore-root ::-moz-placeholder {
-    opacity: 1;
-  }
-  .flowcore-root ::placeholder {
-    opacity: 1;
-  }
-  @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
-    .flowcore-root ::-moz-placeholder {
-      color: currentcolor;
-      @supports (color: color-mix(in lab, red, red)) {
-        color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-    .flowcore-root ::placeholder {
-      color: currentcolor;
-      @supports (color: color-mix(in lab, red, red)) {
-        color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-  }
-  .flowcore-root textarea {
-    resize: vertical;
-  }
-  .flowcore-root ::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-  .flowcore-root ::-webkit-date-and-time-value {
-    min-height: 1lh;
-    text-align: inherit;
-  }
-  .flowcore-root ::-webkit-datetime-edit {
-    display: inline-flex;
-  }
-  .flowcore-root ::-webkit-datetime-edit-fields-wrapper {
-    padding: 0;
-  }
-  .flowcore-root ::-webkit-datetime-edit,
-  .flowcore-root ::-webkit-datetime-edit-year-field,
-  .flowcore-root ::-webkit-datetime-edit-month-field,
-  .flowcore-root ::-webkit-datetime-edit-day-field,
-  .flowcore-root ::-webkit-datetime-edit-hour-field,
-  .flowcore-root ::-webkit-datetime-edit-minute-field,
-  .flowcore-root ::-webkit-datetime-edit-second-field,
-  .flowcore-root ::-webkit-datetime-edit-millisecond-field,
-  .flowcore-root ::-webkit-datetime-edit-meridiem-field {
-    padding-block: 0;
-  }
-  .flowcore-root ::-webkit-calendar-picker-indicator {
-    line-height: 1;
-  }
-  .flowcore-root :-moz-ui-invalid {
-    box-shadow: none;
-  }
-  .flowcore-root button,
-  .flowcore-root input:where([type=button], [type=reset], [type=submit]),
-  .flowcore-root ::file-selector-button {
-    -webkit-appearance: button;
-    -moz-appearance: button;
-    appearance: button;
-  }
-  .flowcore-root ::-webkit-inner-spin-button,
-  .flowcore-root ::-webkit-outer-spin-button {
-    height: auto;
-  }
-  .flowcore-root [hidden]:where(:not([hidden=until-found])) {
-    display: none !important;
-  }
-}
+
 @layer utilities {
-  .flowcore-root .pointer-events-none {
+  .pointer-events-none {
     pointer-events: none;
   }
   .flowcore-root .sr-only {
@@ -712,35 +511,35 @@
     gap: 18px;
   }
   .flowcore-root .space-y-1 {
-    .flowcore-root :where(& > :not(:last-child)) {
+    :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
       margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
       margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
   .flowcore-root .space-y-3 {
-    .flowcore-root :where(& > :not(:last-child)) {
+    :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
       margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
       margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
   .flowcore-root .space-y-4 {
-    .flowcore-root :where(& > :not(:last-child)) {
+    :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
       margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
       margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
   .flowcore-root .space-y-5 {
-    .flowcore-root :where(& > :not(:last-child)) {
+    :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
       margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
       margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
   .flowcore-root .space-y-8 {
-    .flowcore-root :where(& > :not(:last-child)) {
+    :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
       margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
       margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
@@ -751,7 +550,7 @@
     column-gap: calc(var(--spacing) * 6);
   }
   .flowcore-root .space-x-1\.5 {
-    .flowcore-root :where(& > :not(:last-child)) {
+    :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
       margin-inline-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-x-reverse));
       margin-inline-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-x-reverse)));
@@ -761,7 +560,7 @@
     row-gap: calc(var(--spacing) * 5);
   }
   .flowcore-root .divide-y {
-    .flowcore-root :where(& > :not(:last-child)) {
+    :where(& > :not(:last-child)) {
       --tw-divide-y-reverse: 0;
       border-bottom-style: var(--tw-border-style);
       border-top-style: var(--tw-border-style);
@@ -770,7 +569,7 @@
     }
   }
   .flowcore-root .divide-slate-100 {
-    .flowcore-root :where(& > :not(:last-child)) {
+    :where(& > :not(:last-child)) {
       border-color: var(--color-slate-100);
     }
   }
@@ -1399,10 +1198,10 @@
     -moz-osx-font-smoothing: grayscale;
   }
   .flowcore-root .placeholder-slate-400 {
-    .flowcore-root &::-moz-placeholder {
+    &::-moz-placeholder {
       color: var(--color-slate-400);
     }
-    .flowcore-root &::placeholder {
+    &::placeholder {
       color: var(--color-slate-400);
     }
   }
@@ -1566,104 +1365,104 @@
     user-select: none;
   }
   .flowcore-root .peer-checked\:bg-blue-600 {
-    .flowcore-root &:is(:where(.peer):checked ~ *) {
+    &:is(:where(.peer):checked ~ *) {
       background-color: var(--color-blue-600);
     }
   }
   .flowcore-root .peer-checked\:bg-indigo-600 {
-    .flowcore-root &:is(:where(.peer):checked ~ *) {
+    &:is(:where(.peer):checked ~ *) {
       background-color: var(--color-indigo-600);
     }
   }
   .flowcore-root .peer-focus\:outline-none {
-    .flowcore-root &:is(:where(.peer):focus ~ *) {
+    &:is(:where(.peer):focus ~ *) {
       --tw-outline-style: none;
       outline-style: none;
     }
   }
   .flowcore-root .placeholder\:text-slate-400 {
-    .flowcore-root &::-moz-placeholder {
+    &::-moz-placeholder {
       color: var(--color-slate-400);
     }
-    .flowcore-root &::placeholder {
+    &::placeholder {
       color: var(--color-slate-400);
     }
   }
   .flowcore-root .after\:absolute {
-    .flowcore-root &::after {
+    &::after {
       content: var(--tw-content);
       position: absolute;
     }
   }
   .flowcore-root .after\:start-\[2px\] {
-    .flowcore-root &::after {
+    &::after {
       content: var(--tw-content);
       inset-inline-start: 2px;
     }
   }
   .flowcore-root .after\:top-\[2px\] {
-    .flowcore-root &::after {
+    &::after {
       content: var(--tw-content);
       top: 2px;
     }
   }
   .flowcore-root .after\:left-\[2px\] {
-    .flowcore-root &::after {
+    &::after {
       content: var(--tw-content);
       left: 2px;
     }
   }
   .flowcore-root .after\:h-3\.5 {
-    .flowcore-root &::after {
+    &::after {
       content: var(--tw-content);
       height: calc(var(--spacing) * 3.5);
     }
   }
   .flowcore-root .after\:h-5 {
-    .flowcore-root &::after {
+    &::after {
       content: var(--tw-content);
       height: calc(var(--spacing) * 5);
     }
   }
   .flowcore-root .after\:w-3\.5 {
-    .flowcore-root &::after {
+    &::after {
       content: var(--tw-content);
       width: calc(var(--spacing) * 3.5);
     }
   }
   .flowcore-root .after\:w-5 {
-    .flowcore-root &::after {
+    &::after {
       content: var(--tw-content);
       width: calc(var(--spacing) * 5);
     }
   }
   .flowcore-root .after\:rounded-full {
-    .flowcore-root &::after {
+    &::after {
       content: var(--tw-content);
       border-radius: calc(infinity * 1px);
     }
   }
   .flowcore-root .after\:border {
-    .flowcore-root &::after {
+    &::after {
       content: var(--tw-content);
       border-style: var(--tw-border-style);
       border-width: 1px;
     }
   }
   .flowcore-root .after\:border-slate-300 {
-    .flowcore-root &::after {
+    &::after {
       content: var(--tw-content);
       border-color: var(--color-slate-300);
     }
   }
   .flowcore-root .after\:bg-white {
-    .flowcore-root &::after {
+    &::after {
       content: var(--tw-content);
       background-color: var(--color-white);
     }
   }
   .flowcore-root .after\:transition-all {
-    .flowcore-root &::after {
+    &::after {
       content: var(--tw-content);
       transition-property: all;
       transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1671,14 +1470,14 @@
     }
   }
   .flowcore-root .after\:content-\[\'\'\] {
-    .flowcore-root &::after {
+    &::after {
       --tw-content: "";
       content: var(--tw-content);
     }
   }
   .flowcore-root .peer-checked\:after\:translate-x-full {
-    .flowcore-root &:is(:where(.peer):checked ~ *) {
-      .flowcore-root &::after {
+    &:is(:where(.peer):checked ~ *) {
+      &::after {
         content: var(--tw-content);
         --tw-translate-x: 100%;
         translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1686,15 +1485,15 @@
     }
   }
   .flowcore-root .peer-checked\:after\:border-white {
-    .flowcore-root &:is(:where(.peer):checked ~ *) {
-      .flowcore-root &::after {
+    &:is(:where(.peer):checked ~ *) {
+      &::after {
         content: var(--tw-content);
         border-color: var(--color-white);
       }
     }
   }
   .flowcore-root .hover\:scale-105 {
-    .flowcore-root &:hover {
+    &:hover {
       @media (hover: hover) {
         --tw-scale-x: 105%;
         --tw-scale-y: 105%;
@@ -1704,42 +1503,42 @@
     }
   }
   .flowcore-root .hover\:border-transparent {
-    .flowcore-root &:hover {
+    &:hover {
       @media (hover: hover) {
         border-color: transparent;
       }
     }
   }
   .flowcore-root .hover\:bg-\[\#383838\] {
-    .flowcore-root &:hover {
+    &:hover {
       @media (hover: hover) {
         background-color: #383838;
       }
     }
   }
   .flowcore-root .hover\:bg-\[\#F3F5F9\] {
-    .flowcore-root &:hover {
+    &:hover {
       @media (hover: hover) {
         background-color: #F3F5F9;
       }
     }
   }
   .flowcore-root .hover\:bg-\[\#F6F8FC\] {
-    .flowcore-root &:hover {
+    &:hover {
       @media (hover: hover) {
         background-color: #F6F8FC;
       }
     }
   }
   .flowcore-root .hover\:bg-\[\#F7F8FC\] {
-    .flowcore-root &:hover {
+    &:hover {
       @media (hover: hover) {
         background-color: #F7F8FC;
       }
     }
   }
   .flowcore-root .hover\:bg-black\/\[\.04\] {
-    .flowcore-root &:hover {
+    &:hover {
       @media (hover: hover) {
         background-color: color-mix(in srgb, #000 4%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
@@ -1749,49 +1548,49 @@
     }
   }
   .flowcore-root .hover\:bg-blue-700 {
-    .flowcore-root &:hover {
+    &:hover {
       @media (hover: hover) {
         background-color: var(--color-blue-700);
       }
     }
   }
   .flowcore-root .hover\:bg-gray-50 {
-    .flowcore-root &:hover {
+    &:hover {
       @media (hover: hover) {
         background-color: var(--color-gray-50);
       }
     }
   }
   .flowcore-root .hover\:bg-gray-100 {
-    .flowcore-root &:hover {
+    &:hover {
       @media (hover: hover) {
         background-color: var(--color-gray-100);
       }
     }
   }
   .flowcore-root .hover\:bg-gray-200 {
-    .flowcore-root &:hover {
+    &:hover {
       @media (hover: hover) {
         background-color: var(--color-gray-200);
       }
     }
   }
   .flowcore-root .hover\:bg-indigo-700 {
-    .flowcore-root &:hover {
+    &:hover {
       @media (hover: hover) {
         background-color: var(--color-indigo-700);
       }
     }
   }
   .flowcore-root .hover\:bg-slate-50 {
-    .flowcore-root &:hover {
+    &:hover {
       @media (hover: hover) {
         background-color: var(--color-slate-50);
       }
     }
   }
   .flowcore-root .hover\:bg-slate-50\/40 {
-    .flowcore-root &:hover {
+    &:hover {
       @media (hover: hover) {
         background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 40%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
@@ -1801,7 +1600,7 @@
     }
   }
   .flowcore-root .hover\:bg-slate-50\/50 {
-    .flowcore-root &:hover {
+    &:hover {
       @media (hover: hover) {
         background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 50%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
@@ -1811,14 +1610,14 @@
     }
   }
   .flowcore-root .hover\:bg-slate-100 {
-    .flowcore-root &:hover {
+    &:hover {
       @media (hover: hover) {
         background-color: var(--color-slate-100);
       }
     }
   }
   .flowcore-root .hover\:bg-slate-100\/50 {
-    .flowcore-root &:hover {
+    &:hover {
       @media (hover: hover) {
         background-color: color-mix(in srgb, oklch(96.8% 0.007 247.896) 50%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
@@ -1828,42 +1627,42 @@
     }
   }
   .flowcore-root .hover\:text-indigo-600 {
-    .flowcore-root &:hover {
+    &:hover {
       @media (hover: hover) {
         color: var(--color-indigo-600);
       }
     }
   }
   .flowcore-root .hover\:text-red-500 {
-    .flowcore-root &:hover {
+    &:hover {
       @media (hover: hover) {
         color: var(--color-red-500);
       }
     }
   }
   .flowcore-root .hover\:text-slate-600 {
-    .flowcore-root &:hover {
+    &:hover {
       @media (hover: hover) {
         color: var(--color-slate-600);
       }
     }
   }
   .flowcore-root .hover\:text-slate-900 {
-    .flowcore-root &:hover {
+    &:hover {
       @media (hover: hover) {
         color: var(--color-slate-900);
       }
     }
   }
   .flowcore-root .hover\:underline {
-    .flowcore-root &:hover {
+    &:hover {
       @media (hover: hover) {
         text-decoration-line: underline;
       }
     }
   }
   .flowcore-root .hover\:shadow-lg {
-    .flowcore-root &:hover {
+    &:hover {
       @media (hover: hover) {
         --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
         box-shadow:
@@ -1876,7 +1675,7 @@
     }
   }
   .flowcore-root .hover\:shadow-blue-500\/30 {
-    .flowcore-root &:hover {
+    &:hover {
       @media (hover: hover) {
         --tw-shadow-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 30%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
@@ -1886,7 +1685,7 @@
     }
   }
   .flowcore-root .hover\:shadow-indigo-500\/30 {
-    .flowcore-root &:hover {
+    &:hover {
       @media (hover: hover) {
         --tw-shadow-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 30%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
@@ -1896,17 +1695,17 @@
     }
   }
   .flowcore-root .focus\:border-blue-500 {
-    .flowcore-root &:focus {
+    &:focus {
       border-color: var(--color-blue-500);
     }
   }
   .flowcore-root .focus\:border-indigo-500 {
-    .flowcore-root &:focus {
+    &:focus {
       border-color: var(--color-indigo-500);
     }
   }
   .flowcore-root .focus\:ring-2 {
-    .flowcore-root &:focus {
+    &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow:
         var(--tw-inset-shadow),
@@ -1917,7 +1716,7 @@
     }
   }
   .flowcore-root .focus\:ring-4 {
-    .flowcore-root &:focus {
+    &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow:
         var(--tw-inset-shadow),
@@ -1928,17 +1727,17 @@
     }
   }
   .flowcore-root .focus\:ring-blue-100 {
-    .flowcore-root &:focus {
+    &:focus {
       --tw-ring-color: var(--color-blue-100);
     }
   }
   .flowcore-root .focus\:ring-blue-500 {
-    .flowcore-root &:focus {
+    &:focus {
       --tw-ring-color: var(--color-blue-500);
     }
   }
   .flowcore-root .focus\:ring-blue-500\/10 {
-    .flowcore-root &:focus {
+    &:focus {
       --tw-ring-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 10%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         --tw-ring-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
@@ -1946,7 +1745,7 @@
     }
   }
   .flowcore-root .focus\:ring-indigo-500\/10 {
-    .flowcore-root &:focus {
+    &:focus {
       --tw-ring-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 10%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         --tw-ring-color: color-mix(in oklab, var(--color-indigo-500) 10%, transparent);
@@ -1954,13 +1753,13 @@
     }
   }
   .flowcore-root .focus\:outline-none {
-    .flowcore-root &:focus {
+    &:focus {
       --tw-outline-style: none;
       outline-style: none;
     }
   }
   .flowcore-root .active\:scale-95 {
-    .flowcore-root &:active {
+    &:active {
       --tw-scale-x: 95%;
       --tw-scale-y: 95%;
       --tw-scale-z: 95%;
@@ -2053,7 +1852,7 @@
   }
   .flowcore-root .dark\:hover\:bg-\[\#1a1a1a\] {
     @media (prefers-color-scheme: dark) {
-      .flowcore-root &:hover {
+      &:hover {
         @media (hover: hover) {
           background-color: #1a1a1a;
         }
@@ -2062,7 +1861,7 @@
   }
   .flowcore-root .dark\:hover\:bg-\[\#ccc\] {
     @media (prefers-color-scheme: dark) {
-      .flowcore-root &:hover {
+      &:hover {
         @media (hover: hover) {
           background-color: #ccc;
         }
@@ -2129,10 +1928,10 @@
 @property --tw-drop-shadow-size { syntax: "*"; inherits: false; }
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-    .flowcore-root *,
-    .flowcore-root ::before,
-    .flowcore-root ::after,
-    .flowcore-root ::backdrop {
+    *,
+    ::before,
+    ::after,
+    ::backdrop {
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;

package/package.json

@@ -1,16 +1,18 @@
 {
   "name": "flowcore-fn",
-  "version": "2.8.3",
+  "version": "2.8.5",
   "main": "dist/pkg-index.js",
   "module": "dist/pkg-index.mjs",
   "files": [
     "dist"
   ],
+  
   "scripts": {
-    "dev": "next dev",
+     "dev": "next dev",
     "build": "next build",
-    "build:pkg": "tsup"
+     "build:pkg": "tsup && node scripts/scope-css.js"
   },
+
   "peerDependencies": {
     "next": ">=14.0.0",
     "react": ">=18.0.0",