npm - @pandacss/studio - Versions diffs - 0.3.0 → 0.3.2 - Mend

@pandacss/studio 0.3.0 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (96) hide show

package/LICENSE.md +1 -1
package/package.json +8 -8
package/src/components/analyzer/category-utilities.tsx +12 -4
package/src/components/analyzer/data-combobox.tsx +50 -27
package/src/components/analyzer/data-table.tsx +5 -9
package/src/components/analyzer/external-icon.tsx +1 -1
package/src/components/analyzer/report-item-columns.tsx +1 -1
package/src/components/analyzer/report-item-link.tsx +1 -1
package/src/components/analyzer/truncated-text.tsx +3 -1
package/src/components/analyzer/utility-details.tsx +31 -25
package/src/components/color-item.tsx +1 -1
package/src/components/colors.tsx +12 -3
package/src/components/icons.tsx +49 -0
package/src/components/input.tsx +3 -3
package/src/components/semantic-color.tsx +25 -19
package/src/components/token-analyzer.tsx +7 -5
package/src/layouts/Layout.astro +1 -1
package/src/layouts/Sidebar.astro +2 -2
package/styled-system/chunks/src__components__analyzer__category-utilities.css +21 -173
package/styled-system/chunks/src__components__analyzer__data-combobox.css +63 -205
package/styled-system/chunks/src__components__analyzer__data-table.css +8 -0
package/styled-system/chunks/src__components__analyzer__report-item-columns.css +12 -4
package/styled-system/chunks/src__components__analyzer__report-item-link.css +10 -106
package/styled-system/chunks/src__components__analyzer__truncated-text.css +4 -16
package/styled-system/chunks/src__components__analyzer__utility-details.css +32 -120
package/styled-system/chunks/src__components__color-item.css +2 -2
package/styled-system/chunks/src__components__colors.css +10 -2
package/styled-system/chunks/src__components__semantic-color.css +28 -8
package/styled-system/chunks/src__components__token-analyzer.css +18 -1361
package/styled-system/chunks/src__layouts__Sidebar.css +4 -4
package/styled-system/css/css.d.ts +1 -0
package/styled-system/css/cva.d.ts +1 -0
package/styled-system/css/cx.d.ts +1 -0
package/styled-system/css/index.d.ts +1 -0
package/styled-system/jsx/aspect-ratio.d.ts +1 -0
package/styled-system/jsx/box.d.ts +1 -0
package/styled-system/jsx/center.d.ts +1 -0
package/styled-system/jsx/circle.d.ts +1 -0
package/styled-system/jsx/container.d.ts +1 -0
package/styled-system/jsx/divider.d.ts +1 -0
package/styled-system/jsx/factory.d.ts +1 -0
package/styled-system/jsx/flex.d.ts +1 -0
package/styled-system/jsx/float.d.ts +1 -0
package/styled-system/jsx/grid-item.d.ts +1 -0
package/styled-system/jsx/grid.d.ts +1 -0
package/styled-system/jsx/hstack.d.ts +1 -0
package/styled-system/jsx/index.d.ts +1 -0
package/styled-system/jsx/link-box.d.ts +1 -0
package/styled-system/jsx/link-overlay.d.ts +1 -0
package/styled-system/jsx/spacer.d.ts +1 -0
package/styled-system/jsx/square.d.ts +1 -0
package/styled-system/jsx/stack.d.ts +1 -0
package/styled-system/jsx/styled-link.d.ts +1 -0
package/styled-system/jsx/vstack.d.ts +1 -0
package/styled-system/jsx/wrap.d.ts +1 -0
package/styled-system/patterns/aspect-ratio.d.ts +1 -0
package/styled-system/patterns/box.d.ts +1 -0
package/styled-system/patterns/center.d.ts +1 -0
package/styled-system/patterns/circle.d.ts +1 -0
package/styled-system/patterns/container.d.ts +1 -0
package/styled-system/patterns/divider.d.ts +1 -0
package/styled-system/patterns/flex.d.ts +1 -0
package/styled-system/patterns/float.d.ts +1 -0
package/styled-system/patterns/grid-item.d.ts +1 -0
package/styled-system/patterns/grid.d.ts +1 -0
package/styled-system/patterns/hstack.d.ts +1 -0
package/styled-system/patterns/index.d.ts +1 -0
package/styled-system/patterns/link-box.d.ts +1 -0
package/styled-system/patterns/link-overlay.d.ts +1 -0
package/styled-system/patterns/spacer.d.ts +1 -0
package/styled-system/patterns/square.d.ts +1 -0
package/styled-system/patterns/stack.d.ts +1 -0
package/styled-system/patterns/styled-link.d.ts +1 -0
package/styled-system/patterns/vstack.d.ts +1 -0
package/styled-system/patterns/wrap.d.ts +1 -0
package/styled-system/styles.css +80 -92
package/styled-system/tokens/index.d.ts +1 -0
package/styled-system/tokens/tokens.d.ts +1 -0
package/styled-system/types/composition.d.ts +1 -0
package/styled-system/types/conditions.d.ts +1 -0
package/styled-system/types/csstype.d.ts +1 -0
package/styled-system/types/global.d.ts +6 -5
package/styled-system/types/helpers.d.ts +1 -0
package/styled-system/types/index.d.ts +3 -2
package/styled-system/types/jsx.d.ts +1 -0
package/styled-system/types/parts.d.ts +1 -0
package/styled-system/types/pattern.d.ts +8 -6
package/styled-system/types/prop-type.d.ts +1 -0
package/styled-system/types/recipe.d.ts +1 -0
package/styled-system/types/selectors.d.ts +1 -0
package/styled-system/types/style-props.d.ts +4 -3
package/styled-system/types/system-types.d.ts +1 -0
package/styled-system/jsx/absolute-center.d.ts +0 -8
package/styled-system/jsx/absolute-center.mjs +0 -9
package/styled-system/patterns/absolute-center.d.ts +0 -14
package/styled-system/patterns/absolute-center.mjs +0 -23

package/styled-system/chunks/src__components__token-analyzer.css CHANGED Viewed

@@ -3,1347 +3,6 @@
     padding-block: 20px;
   }
-  .hover\:bg_gray\.50 {
-    &:where(:hover, [data-hover]) {
-      background-color: var(--colors-gray-50);
-    }
-  }
-  .hover\:bg_gray\.100 {
-    &:where(:hover, [data-hover]) {
-      background-color: var(--colors-gray-100);
-    }
-  }
-  .hover\:bg_bg {
-    &:where(:hover, [data-hover]) {
-      background: var(--colors-bg);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:bg_gray\.50 {
-    &:where(:hover, [data-hover]) {
-      background-color: var(--colors-gray-50);
-    }
-  }
-  .hover\:bg_gray\.100 {
-    &:where(:hover, [data-hover]) {
-      background-color: var(--colors-gray-100);
-    }
-  }
-  .hover\:bg_gray\.100 {
-    &:where(:hover, [data-hover]) {
-      background: var(--colors-gray-100);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:bg_gray\.50 {
-    &:where(:hover, [data-hover]) {
-      background-color: var(--colors-gray-50);
-    }
-  }
-  .hover\:bg_gray\.100 {
-    &:where(:hover, [data-hover]) {
-      background-color: var(--colors-gray-100);
-    }
-  }
-  .hover\:bg_gray\.100 {
-    &:where(:hover, [data-hover]) {
-      background: var(--colors-gray-100);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_0\.8 {
-    &:where(:hover, [data-hover]) {
-      opacity: 0.8;
-    }
-  }
-  .hover\:bg_gray\.100 {
-    &:where(:hover, [data-hover]) {
-      background-color: var(--colors-gray-100);
-    }
-  }
-  .hover\:bg_gray\.100 {
-    &:where(:hover, [data-hover]) {
-      background: var(--colors-gray-100);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_0\.8 {
-    &:where(:hover, [data-hover]) {
-      opacity: 0.8;
-    }
-  }
-  .hover\:opacity_0\.8 {
-    &:where(:hover, [data-hover]) {
-      opacity: 0.8;
-    }
-  }
-  .hover\:bg_gray\.100 {
-    &:where(:hover, [data-hover]) {
-      background: var(--colors-gray-100);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_0\.8 {
-    &:where(:hover, [data-hover]) {
-      opacity: 0.8;
-    }
-  }
-  .hover\:bg_border {
-    &:where(:hover, [data-hover]) {
-      background-color: var(--colors-border);
-    }
-  }
-  .hover\:bg_gray\.100 {
-    &:where(:hover, [data-hover]) {
-      background: var(--colors-gray-100);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .p_4 {
-    padding: var(--spacing-4);
-  }
-  .hover\:opacity_0\.8 {
-    &:where(:hover, [data-hover]) {
-      opacity: 0.8;
-    }
-  }
-  .hover\:bg_border {
-    &:where(:hover, [data-hover]) {
-      background-color: var(--colors-border);
-    }
-  }
-  .hover\:bg_gray\.100 {
-    &:where(:hover, [data-hover]) {
-      background: var(--colors-gray-100);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_0\.8 {
-    &:where(:hover, [data-hover]) {
-      opacity: 0.8;
-    }
-  }
-  .hover\:bg_border {
-    &:where(:hover, [data-hover]) {
-      background-color: var(--colors-border);
-    }
-  }
-  .hover\:bg_gray\.100 {
-    &:where(:hover, [data-hover]) {
-      background: var(--colors-gray-100);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_0\.8 {
-    &:where(:hover, [data-hover]) {
-      opacity: 0.8;
-    }
-  }
-  .hover\:bg_border {
-    &:where(:hover, [data-hover]) {
-      background-color: var(--colors-border);
-    }
-  }
-  .hover\:bg_gray\.100 {
-    &:where(:hover, [data-hover]) {
-      background: var(--colors-gray-100);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_0\.8 {
-    &:where(:hover, [data-hover]) {
-      opacity: 0.8;
-    }
-  }
-  .hover\:bg_border {
-    &:where(:hover, [data-hover]) {
-      background-color: var(--colors-border);
-    }
-  }
-  .hover\:bg_gray\.100 {
-    &:where(:hover, [data-hover]) {
-      background: var(--colors-gray-100);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_0\.8 {
-    &:where(:hover, [data-hover]) {
-      opacity: 0.8;
-    }
-  }
-  .hover\:bg_border {
-    &:where(:hover, [data-hover]) {
-      background-color: var(--colors-border);
-    }
-  }
-  .hover\:bg_gray\.100 {
-    &:where(:hover, [data-hover]) {
-      background: var(--colors-gray-100);
-    }
-  }
-  .debug_true {
-    & > * {
-      outline: 1px solid red !important;
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_0\.8 {
-    &:where(:hover, [data-hover]) {
-      opacity: 0.8;
-    }
-  }
-  .hover\:bg_border {
-    &:where(:hover, [data-hover]) {
-      background-color: var(--colors-border);
-    }
-  }
-  .hover\:bg_gray\.100 {
-    &:where(:hover, [data-hover]) {
-      background: var(--colors-gray-100);
-    }
-  }
-  .debug_true {
-    & > * {
-      outline: 1px solid red !important;
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_0\.8 {
-    &:where(:hover, [data-hover]) {
-      opacity: 0.8;
-    }
-  }
-  .hover\:bg_border {
-    &:where(:hover, [data-hover]) {
-      background-color: var(--colors-border);
-    }
-  }
-  .hover\:bg_gray\.100 {
-    &:where(:hover, [data-hover]) {
-      background: var(--colors-gray-100);
-    }
-  }
-  .debug_true {
-    & > * {
-      outline: 1px solid red !important;
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_0\.8 {
-    &:where(:hover, [data-hover]) {
-      opacity: 0.8;
-    }
-  }
-  .hover\:bg_border {
-    &:where(:hover, [data-hover]) {
-      background-color: var(--colors-border);
-    }
-  }
-  .hover\:bg_gray\.100 {
-    &:where(:hover, [data-hover]) {
-      background: var(--colors-gray-100);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .debug_true {
-    & > * {
-      outline: 1px solid red !important;
-    }
-  }
-  .hover\:opacity_0\.8 {
-    &:where(:hover, [data-hover]) {
-      opacity: 0.8;
-    }
-  }
-  .hover\:bg_border {
-    &:where(:hover, [data-hover]) {
-      background-color: var(--colors-border);
-    }
-  }
-  .hover\:bg_gray\.100 {
-    &:where(:hover, [data-hover]) {
-      background: var(--colors-gray-100);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_0\.8 {
-    &:where(:hover, [data-hover]) {
-      opacity: 0.8;
-    }
-  }
-  .hover\:bg_border {
-    &:where(:hover, [data-hover]) {
-      background-color: var(--colors-border);
-    }
-  }
-  .hover\:bg_gray\.100 {
-    &:where(:hover, [data-hover]) {
-      background: var(--colors-gray-100);
-    }
-  }
-  .debug_true {
-    & > * {
-      outline: 1px solid red !important;
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_0\.8 {
-    &:where(:hover, [data-hover]) {
-      opacity: 0.8;
-    }
-  }
-  .hover\:bg_border {
-    &:where(:hover, [data-hover]) {
-      background-color: var(--colors-border);
-    }
-  }
-  .hover\:bg_gray\.100 {
-    &:where(:hover, [data-hover]) {
-      background: var(--colors-gray-100);
-    }
-  }
-  .debug_true {
-    outline: 1px solid blue !important;
-    & > * {
-      outline: 1px solid red !important;
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_0\.8 {
-    &:where(:hover, [data-hover]) {
-      opacity: 0.8;
-    }
-  }
-  .hover\:bg_border {
-    &:where(:hover, [data-hover]) {
-      background-color: var(--colors-border);
-    }
-  }
-  .hover\:bg_gray\.100 {
-    &:where(:hover, [data-hover]) {
-      background: var(--colors-gray-100);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_0\.8 {
-    &:where(:hover, [data-hover]) {
-      opacity: 0.8;
-    }
-  }
-  .hover\:bg_border {
-    &:where(:hover, [data-hover]) {
-      background-color: var(--colors-border);
-    }
-  }
-  .hover\:bg_gray\.100 {
-    &:where(:hover, [data-hover]) {
-      background: var(--colors-gray-100);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_0\.8 {
-    &:where(:hover, [data-hover]) {
-      opacity: 0.8;
-    }
-  }
-  .hover\:bg_border {
-    &:where(:hover, [data-hover]) {
-      background-color: var(--colors-border);
-    }
-  }
-  .hover\:bg_gray\.100 {
-    &:where(:hover, [data-hover]) {
-      background: var(--colors-gray-100);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .bg_white {
-    background: var(--colors-white);
-  }
-  .hover\:opacity_0\.8 {
-    &:where(:hover, [data-hover]) {
-      opacity: 0.8;
-    }
-  }
-  .hover\:bg_border {
-    &:where(:hover, [data-hover]) {
-      background-color: var(--colors-border);
-    }
-  }
-  .hover\:bg_gray\.100 {
-    &:where(:hover, [data-hover]) {
-      background: var(--colors-gray-100);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_0\.8 {
-    &:where(:hover, [data-hover]) {
-      opacity: 0.8;
-    }
-  }
-  .hover\:bg_border {
-    &:where(:hover, [data-hover]) {
-      background-color: var(--colors-border);
-    }
-  }
-  .hover\:bg_gray\.100 {
-    &:where(:hover, [data-hover]) {
-      background: var(--colors-gray-100);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_0\.8 {
-    &:where(:hover, [data-hover]) {
-      opacity: 0.8;
-    }
-  }
-  .hover\:bg_border {
-    &:where(:hover, [data-hover]) {
-      background-color: var(--colors-border);
-    }
-  }
-  .hover\:bg_gray\.100 {
-    &:where(:hover, [data-hover]) {
-      background: var(--colors-gray-100);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_0\.8 {
-    &:where(:hover, [data-hover]) {
-      opacity: 0.8;
-    }
-  }
-  .hover\:bg_border {
-    &:where(:hover, [data-hover]) {
-      background-color: var(--colors-border);
-    }
-  }
-  .hover\:bg_gray\.100 {
-    &:where(:hover, [data-hover]) {
-      background: var(--colors-gray-100);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
-  .hover\:opacity_1 {
-    &:where(:hover, [data-hover]) {
-      opacity: 1;
-    }
-  }
-  .hover\:border-b_black {
-    &:where(:hover, [data-hover]) {
-      border-bottom-color: var(--colors-black);
-    }
-  }
   .p_4px_8px {
     padding: 4px 8px;
   }
@@ -1380,12 +39,8 @@
     width: 100%;
   }
-  .w_26px {
-    width: 26px;
-  }
-  .text_text {
-    color: var(--colors-text);
+  .w_5 {
+    width: var(--sizes-5);
   }
   .ml_auto {
@@ -1436,10 +91,6 @@
     padding: 0;
   }
-  .rounded_md {
-    border-radius: var(--radii-md);
-  }
   .hover\:bg_border {
     &:where(:hover, [data-hover]) {
       background-color: var(--colors-border);
@@ -1458,9 +109,19 @@
     transition: all 0.2s ease;
   }
-  .hover\:bg_gray\.100 {
+  .hover\:bg_border {
+    &:where(:hover, [data-hover]) {
+      background: var(--colors-border);
+    }
+  }
+  .rounded_md {
+    border-radius: var(--radii-md);
+  }
+  .hover\:opacity_0\.6 {
     &:where(:hover, [data-hover]) {
-      background: var(--colors-gray-100);
+      opacity: 0.6;
     }
   }
@@ -1480,6 +141,10 @@
     padding-right: var(--spacing-4);
   }
+  .text_text {
+    color: var(--colors-text);
+  }
   .gap_10px {
     gap: 10px;
   }
@@ -1595,12 +260,4 @@
       }
     }
   }
-  .\[\&_li\]\:hover\:opacity_0\.8 {
-    & li {
-      &:where(:hover, [data-hover]) {
-        opacity: 0.8;
-      }
-    }
-  }
 }