@clickhouse/click-ui 0.8.0 → 0.9.0

package/dist/cjs/click-ui.css

@@ -446,6 +446,100 @@
   color: var(--click-field-color-label-disabled);
   font: var(--click-field-typography-label-disabled);
 }
+.loading__5BGdj {
+  transform: scaleX(-1);
+}
+
+.loading-animated__hAN7V {
+  animation: loaders-spin__bMTqx 1s infinite linear;
+}
+
+.horizontal-loading__3ooCL circle {
+  animation-duration: 1.5s;
+  animation-iteration-count: infinite;
+  animation-name: horizontal-loading__3ooCL;
+  animation-timing-function: linear;
+}
+
+.horizontal-loading__3ooCL circle:nth-child(1) {
+  animation-name: loaders-horizontal-circle-1__GJ-tO;
+}
+
+.horizontal-loading__3ooCL circle:nth-child(2) {
+  animation-name: loaders-horizontal-circle-2__QOcb2;
+}
+
+.horizontal-loading__3ooCL circle:nth-child(3) {
+  animation-name: loaders-horizontal-circle-3__R51yU;
+}
+
+@keyframes loaders-spin__bMTqx {
+  from {
+    transform: rotate(0deg) scaleX(-1);
+  }
+
+  to {
+    transform: rotate(360deg) scaleX(-1);
+  }
+}
+
+@keyframes loaders-horizontal-circle-1__GJ-tO {
+  0 {
+    r: 0;
+  }
+
+  30% {
+    r: 1.5;
+  }
+
+  60% {
+    r: 0;
+  }
+
+  100% {
+    r: 0;
+  }
+}
+
+@keyframes loaders-horizontal-circle-2__QOcb2 {
+  0 {
+    r: 0;
+  }
+
+  20% {
+    r: 0;
+  }
+
+  40% {
+    r: 1.5;
+  }
+
+  80% {
+    r: 0;
+  }
+
+  100% {
+    r: 0;
+  }
+}
+
+@keyframes loaders-horizontal-circle-3__R51yU {
+  0 {
+    r: 0;
+  }
+
+  40% {
+    r: 0;
+  }
+
+  80% {
+    r: 1.5;
+  }
+
+  100% {
+    r: 0;
+  }
+}
 /* Kept at zero specificity via :where() so that modifier classes (e.g.
    .container_padding_md) and downstream styled-components overrides on a
    styled(Container) both win without needing a specificity hack — Container is
@@ -3892,6 +3986,274 @@ div:active + .topbadge__E79OZ {
   color: var(--click-dialog-color-description-default);
   font: var(--click-dialog-typography-description-default);
 }
+.row-number-column__n-aQm {
+  position: sticky;
+  top: var(--row-number-column-top);
+  left: 0;
+  width: var(--row-number-column-width);
+  height: 100%;
+}
+
+.row-number-column_scrolled-horizontal__L9fAB {
+  box-shadow: 0 0 0 1px var(--click-grid-header-cell-color-stroke-default);
+}
+
+.row-number-column__cell__00w03 {
+  position: absolute;
+  top: var(--row-number-cell-top);
+  left: 0;
+  width: 100%;
+  height: var(--row-number-cell-height);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. selectDirect) */
+
+/*
+ * The original styled-component dispatches background / text colour / border
+ * colour off `$type` (body|header) and `$selectionType`, and toggles individual
+ * borders / a `::before` overlay off boolean flags. Colours are aliased to local
+ * custom properties (set by the type + selection modifiers) so the shared border
+ * / overlay rules can reference them once.
+ */
+
+.cell__OXAxg {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--cell-space-y) var(--cell-space-x);
+  overflow: hidden;
+  border-top: 1px solid var(--cell-stroke-default);
+  border-left: 1px solid var(--cell-stroke-default);
+  background: var(--cell-background);
+  color: var(--cell-color);
+  font: var(--click-grid-cell-text-default);
+  text-align: left;
+  white-space: nowrap;
+  cursor: default;
+  text-overflow: ellipsis;
+}
+
+.cell__OXAxg[data-align='right'] {
+  text-align: right;
+}
+
+.cell_type_body__SohuF {
+  --cell-stroke-default: var(--click-grid-body-cell-color-stroke-default);
+  --cell-stroke-select-direct: var(--click-grid-body-cell-color-stroke-selectDirect);
+  --cell-stroke-last: var(--click-grid-body-cell-color-stroke-default);
+  --cell-space-y: var(--click-grid-body-cell-space-y);
+  --cell-space-x: var(--click-grid-body-cell-space-x);
+  --cell-background: var(--click-grid-body-cell-color-background-default);
+  --cell-color: var(--click-grid-body-cell-color-text-default);
+}
+
+.cell_type_body__SohuF.cell_selection_indirect__6e6yy {
+  --cell-stroke-last: var(--click-grid-body-cell-color-stroke-selectIndirect);
+  --cell-background: var(--click-grid-body-cell-color-background-selectIndirect);
+  --cell-color: var(--click-grid-body-cell-color-text-selectIndirect);
+}
+
+.cell_type_body__SohuF.cell_selection_direct__QEL9m {
+  --cell-stroke-last: var(--click-grid-body-cell-color-stroke-selectDirect);
+  --cell-background: var(--click-grid-body-cell-color-background-selectDirect);
+  --cell-color: var(--click-grid-body-cell-color-text-selectDirect);
+}
+
+.cell_type_header__3tsr- {
+  --cell-stroke-default: var(--click-grid-header-cell-color-stroke-default);
+  --cell-stroke-select-direct: var(--click-grid-header-cell-color-stroke-selectDirect);
+  --cell-stroke-last: var(--click-grid-header-cell-color-stroke-default);
+  --cell-space-y: var(--click-grid-header-cell-space-y);
+  --cell-space-x: var(--click-grid-header-cell-space-x);
+  --cell-background: var(--click-grid-header-cell-color-background-default);
+  --cell-color: var(--click-grid-header-cell-color-title-default);
+}
+
+.cell_type_header__3tsr-.cell_selection_indirect__6e6yy {
+  --cell-stroke-last: var(--click-grid-header-cell-color-stroke-selectIndirect);
+  --cell-background: var(--click-grid-header-cell-color-background-selectIndirect);
+  --cell-color: var(--click-grid-header-cell-color-title-selectIndirect);
+}
+
+.cell_type_header__3tsr-.cell_selection_direct__QEL9m {
+  --cell-stroke-last: var(--click-grid-header-cell-color-stroke-selectDirect);
+  --cell-background: var(--click-grid-header-cell-color-background-selectDirect);
+  --cell-color: var(--click-grid-header-cell-color-title-selectDirect);
+}
+
+/* header cell with no border removes top/left edges on the corner cells */
+.cell_type_header__3tsr-.cell_no-border__9gXDK[data-grid-row='-1'] {
+  border-top: none;
+}
+
+.cell_type_header__3tsr-.cell_no-border__9gXDK[data-grid-column='-1'] {
+  border-left: none;
+}
+
+/* a focused cell draws its last-edge borders with the select-direct stroke */
+.cell_focused__cmh-b {
+  box-shadow: inset 0 0 0 1px var(--cell-stroke-select-direct);
+}
+
+/*
+ * Focus must win the last-edge stroke colour over any selection state. The
+ * original styled-component resolved the last-row / last-column border colour
+ * inline as `stroke[$isFocused ? 'selectDirect' : $selectionType]`, so focus
+ * always overrode the selection stroke. The `.cell_type_*.cell_selection_*`
+ * rules above set `--cell-stroke-last` at (0,2,0) specificity, so the focus
+ * override is qualified with the type class to match that specificity and,
+ * coming later in source order, take precedence. `.cell_focused` always
+ * co-occurs with a type class.
+ */
+.cell_type_body__SohuF.cell_focused__cmh-b,
+.cell_type_header__3tsr-.cell_focused__cmh-b {
+  --cell-stroke-last: var(--cell-stroke-select-direct);
+}
+
+/* only the last row/column draw the closing border, colored by focus/selection */
+.cell_last-row__DoJdk {
+  border-bottom: 1px solid var(--cell-stroke-last);
+}
+
+.cell_last-column__LgKM7 {
+  border-right: 1px solid var(--cell-stroke-last);
+}
+
+/* rowAutoHeight resets the entire border last, overriding every rule above */
+.cell_row-auto-height__yzQUR {
+  min-height: auto;
+  overflow-y: auto;
+  border: none;
+}
+
+/* selection / focus overlay drawn on top of the cell so adjacent borders meet */
+.cell__overlay__U9XGO::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+
+.cell__overlay_selected_top__OMUJB::before {
+  border-top: 1px solid var(--cell-stroke-select-direct);
+}
+
+.cell__overlay_selected_left__MiimG::before {
+  border-left: 1px solid var(--cell-stroke-select-direct);
+}
+
+.cell__overlay_selected_bottom__2ra9F::before {
+  border-bottom: 1px solid var(--cell-stroke-select-direct);
+}
+
+.cell__overlay_selected_right__Dt-g5::before {
+  border-right: 1px solid var(--cell-stroke-select-direct);
+}
+
+.cell__overlay_row-auto-height__teKk1::before {
+  border: none;
+}
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. selectDirect) */
+
+.header__hXzAE {
+  display: flex;
+  position: sticky;
+  top: 0;
+  left: 0;
+  height: var(--header-height);
+  flex-direction: row;
+}
+
+.header_scrolled-vertical__mIp2- {
+  box-shadow: 0 0 0 1px var(--click-grid-header-cell-color-stroke-default);
+}
+
+.header__scroll-area__Nok8G {
+  position: relative;
+  left: var(--header-scroll-area-left);
+}
+
+.header__cell__ZCE9p {
+  display: flex;
+  position: absolute;
+  left: var(--header-cell-left);
+  width: var(--header-cell-width);
+  height: var(--header-cell-height);
+}
+
+.header__cell__ZCE9p:hover [data-resize] {
+  background: var(--click-grid-header-cell-color-stroke-selectDirect);
+}
+
+/* the sticky "select all" corner extends a header cell (styled(HeaderCellContainer)) */
+.header__row-column__ceu5w {
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: var(--header-cell-width);
+  text-align: right;
+}
+
+.header__row-column_scrolled-horizontal__QZO4p {
+  box-shadow: 0 0 0 1px var(--click-grid-header-cell-color-stroke-default);
+}
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. selectDirect) */
+
+.column-resizer__8f12T {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: calc(100% - 4px);
+  width: 4px;
+  height: var(--column-resizer-height);
+  overflow: auto;
+  cursor: col-resize;
+}
+
+.column-resizer__8f12T:hover,
+.column-resizer__8f12T:active {
+  background: var(--click-grid-header-cell-color-stroke-selectDirect);
+}
+
+.column-resizer_pressed__JGAln {
+  position: fixed;
+  height: 100%;
+}
+/*
+ * `.grid` is the Grid's outer container. It is rendered as the ContextMenu.Trigger
+ * (the root element the whole grid mounts into), which is why the trigger carries
+ * the grid's own box styling rather than a context-menu-specific class.
+ */
+.grid__h49fk {
+  width: 100%;
+  height: var(--grid-height, 100%);
+  overflow: hidden;
+  border-radius: var(--grid-radius);
+  background: var(--click-grid-body-cell-color-background-default);
+  outline: none;
+}
+
+.grid_bordered__kFqF5 {
+  border: 1px solid var(--click-grid-header-cell-color-stroke-default);
+}
+
+/* react-window's inner element that lays out the scrolling cell grid */
+.grid__inner__IZhj9 {
+  display: flex;
+  flex-direction: column-reverse;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- the original styled rule used overflow-anchor */
+  overflow-anchor: none;
+  user-select: none;
+}
+
+.grid__data__Mn4TK {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin-top: var(--grid-data-top, 0);
+  margin-left: var(--grid-data-left, 0);
+}
 /* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. genericMenu) */
 
 .trigger__4-zK2:focus-visible {

package/dist/cjs/components/Assets/Icons/Horizontal-Loading.cjs

@@ -1,58 +1,22 @@
+require("./Loaders.css");
 'use strict';
 
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
+const jsxRuntime = require('react/jsx-runtime');
+const cva = require('../../../lib/cva.cjs');
 const DotsHorizontal = require('./Dots-Horizontal.cjs');
-const styledComponents = require('styled-components');
+const Loaders_module = require('./Loaders.module.css.cjs');
 
-const animationCircle1 = styledComponents.keyframes`
-  0 {
-    r: 0;
-  }
-  30% {
-    r: 1.5;
-  }
-  60% {
-    r: 0;
-  }
-  100% {
-    r: 0;
-  }
-`;
-const animationCircle2 = styledComponents.keyframes`
-  0 {
-    r: 0;
-  }
-  20% {
-    r: 0;
-  }
-  40% {
-    r: 1.5;
-  }
-  80% {
-    r: 0;
-  }
-  100% {
-   r: 0
-  }
-`;
-const animationCircle3 = styledComponents.keyframes`
-  0 {
-    r: 0;
-  }
-  40% {
-    r: 0;
-  }
-  80% {
-    r: 1.5;
-  }
-  100% {
-   r: 0
-  }
-`;
-const Horizontal_Loading = styledComponents.styled(DotsHorizontal.default).withConfig({
-  componentId: "sc-52zndn-0"
-})(["circle{animation-name:horizontal-loading;animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:linear;-webkit-animation-name:horizontal-loading;-webkit-animation-duration:1.5s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-animation-name:horizontal-loading;-moz-animation-duration:1.5s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;&:nth-child(1){animation-name:", ";-webkit-animation-name:", ";-moz-animation-name:", ";}&:nth-child(2){animation-name:", ";-webkit-animation-name:", ";-moz-animation-name:", ";}&:nth-child(3){animation-name:", ";-webkit-animation-name:", ";-moz-animation-name:", ";}}"], animationCircle1, animationCircle1, animationCircle1, animationCircle2, animationCircle2, animationCircle2, animationCircle3, animationCircle3, animationCircle3);
+const Horizontal_Loading = ({
+  className,
+  // `theme` is destructured out so it is not forwarded onto the DOM <svg>: the
+  // original wrapped this icon in `styled(Dots_Horizontal)`, which consumed the
+  // `theme` prop and never rendered it as an attribute.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  theme,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(DotsHorizontal.default, { ...props, className: cva.cn(Loaders_module.default["horizontal-loading"], className) });
 
 exports.default = Horizontal_Loading;
 //# sourceMappingURL=Horizontal-Loading.cjs.map

package/dist/cjs/components/Assets/Icons/Horizontal-Loading.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Horizontal-Loading.cjs","sources":["../../../../../src/components/Assets/Icons/Horizontal-Loading.tsx"],"sourcesContent":["import Dots_Horizontal from './Dots-Horizontal';\nimport { keyframes, styled } from 'styled-components';\n\nconst animationCircle1 = keyframes`\n  0 {\n    r: 0;\n  }\n  30% {\n    r: 1.5;\n  }\n  60% {\n    r: 0;\n  }\n  100% {\n    r: 0;\n  }\n`;\nconst animationCircle2 = keyframes`\n  0 {\n    r: 0;\n  }\n  20% {\n    r: 0;\n  }\n  40% {\n    r: 1.5;\n  }\n  80% {\n    r: 0;\n  }\n  100% {\n   r: 0\n  }\n`;\nconst animationCircle3 = keyframes`\n  0 {\n    r: 0;\n  }\n  40% {\n    r: 0;\n  }\n  80% {\n    r: 1.5;\n  }\n  100% {\n   r: 0\n  }\n`;\n\nconst Horizontal_Loading = styled(Dots_Horizontal)`\n  circle {\n    animation-name: horizontal-loading;\n    animation-duration: 1.5s;\n    animation-iteration-count: infinite;\n    animation-timing-function: linear;\n    -webkit-animation-name: horizontal-loading;\n    -webkit-animation-duration: 1.5s;\n    -webkit-animation-iteration-count: infinite;\n    -webkit-animation-timing-function: linear;\n    -moz-animation-name: horizontal-loading;\n    -moz-animation-duration: 1.5s;\n    -moz-animation-iteration-count: infinite;\n    -moz-animation-timing-function: linear;\n    &:nth-child(1) {\n      animation-name: ${animationCircle1};\n      -webkit-animation-name: ${animationCircle1};\n      -moz-animation-name: ${animationCircle1};\n    }\n    &:nth-child(2) {\n      animation-name: ${animationCircle2};\n      -webkit-animation-name: ${animationCircle2};\n      -moz-animation-name: ${animationCircle2};\n    }\n    &:nth-child(3) {\n      animation-name: ${animationCircle3};\n      -webkit-animation-name: ${animationCircle3};\n      -moz-animation-name: ${animationCircle3};\n    }\n  }\n`;\n\nexport default Horizontal_Loading;\n"],"names":["animationCircle1","keyframes","animationCircle2","animationCircle3","Horizontal_Loading","styled","Dots_Horizontal","withConfig","componentId"],"mappings":";;;;;;;AAGA,MAAMA,gBAAAA,GAAmBC,0BAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,CAAAA;AAczB,MAAMC,gBAAAA,GAAmBD,0BAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,CAAAA;AAiBzB,MAAME,gBAAAA,GAAmBF,0BAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,CAAAA;AAezB,MAAMG,kBAAAA,GAAqBC,uBAAAA,CAAOC,sBAAe,CAAA,CAACC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,qdAAA,EAAA,0BAAA,EAAA,yBAAA,kCAAA,EAAA,0BAAA,EAAA,yBAAA,kCAAA,EAAA,0BAAA,EAAA,yBAAA,KAAA,CAAA,EAe1BR,kBACQA,gBAAAA,EACHA,gBAAAA,EAGLE,kBACQA,gBAAAA,EACHA,gBAAAA,EAGLC,gBAAAA,EACQA,gBAAAA,EACHA,gBAAgB;;;;"}
+{"version":3,"file":"Horizontal-Loading.cjs","sources":["../../../../../src/components/Assets/Icons/Horizontal-Loading.tsx"],"sourcesContent":["import type { SVGAssetProps } from '@/types';\nimport { cn } from '@/lib/cva';\nimport Dots_Horizontal from './Dots-Horizontal';\nimport styles from './Loaders.module.css';\n\nconst Horizontal_Loading = ({\n  className,\n  // `theme` is destructured out so it is not forwarded onto the DOM <svg>: the\n  // original wrapped this icon in `styled(Dots_Horizontal)`, which consumed the\n  // `theme` prop and never rendered it as an attribute.\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  theme,\n  ...props\n}: SVGAssetProps) => (\n  <Dots_Horizontal\n    {...props}\n    className={cn(styles['horizontal-loading'], className)}\n  />\n);\n\nexport default Horizontal_Loading;\n"],"names":["Horizontal_Loading","className","theme","props","jsx","Dots_Horizontal","cn","styles"],"mappings":";;;;;;;;;AAKA,MAAMA,qBAAqBA,CAAC;AAAA,EAC1BC,SAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAKAC,KAAAA;AAAAA,EACA,GAAGC;AACU,CAAA,qBACbC,cAAA,CAACC,sBAAA,EAAA,EACC,GAAIF,KAAAA,EACJ,SAAA,EAAWG,OAAGC,sBAAAA,CAAO,oBAAoB,CAAA,EAAGN,SAAS,CAAA,EAAE;;;;"}

package/dist/cjs/components/Assets/Icons/Loaders.css

@@ -0,0 +1,94 @@
+.loading__5BGdj {
+  transform: scaleX(-1);
+}
+
+.loading-animated__hAN7V {
+  animation: loaders-spin__bMTqx 1s infinite linear;
+}
+
+.horizontal-loading__3ooCL circle {
+  animation-duration: 1.5s;
+  animation-iteration-count: infinite;
+  animation-name: horizontal-loading__3ooCL;
+  animation-timing-function: linear;
+}
+
+.horizontal-loading__3ooCL circle:nth-child(1) {
+  animation-name: loaders-horizontal-circle-1__GJ-tO;
+}
+
+.horizontal-loading__3ooCL circle:nth-child(2) {
+  animation-name: loaders-horizontal-circle-2__QOcb2;
+}
+
+.horizontal-loading__3ooCL circle:nth-child(3) {
+  animation-name: loaders-horizontal-circle-3__R51yU;
+}
+
+@keyframes loaders-spin__bMTqx {
+  from {
+    transform: rotate(0deg) scaleX(-1);
+  }
+
+  to {
+    transform: rotate(360deg) scaleX(-1);
+  }
+}
+
+@keyframes loaders-horizontal-circle-1__GJ-tO {
+  0 {
+    r: 0;
+  }
+
+  30% {
+    r: 1.5;
+  }
+
+  60% {
+    r: 0;
+  }
+
+  100% {
+    r: 0;
+  }
+}
+
+@keyframes loaders-horizontal-circle-2__QOcb2 {
+  0 {
+    r: 0;
+  }
+
+  20% {
+    r: 0;
+  }
+
+  40% {
+    r: 1.5;
+  }
+
+  80% {
+    r: 0;
+  }
+
+  100% {
+    r: 0;
+  }
+}
+
+@keyframes loaders-horizontal-circle-3__R51yU {
+  0 {
+    r: 0;
+  }
+
+  40% {
+    r: 0;
+  }
+
+  80% {
+    r: 1.5;
+  }
+
+  100% {
+    r: 0;
+  }
+}

package/dist/cjs/components/Assets/Icons/Loaders.module.css.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const loading = "loading__5BGdj";
+const styles = {
+	loading: loading,
+	"loading-animated": "loading-animated__hAN7V",
+	"horizontal-loading": "horizontal-loading__3ooCL"};
+
+exports.default = styles;
+exports.loading = loading;
+//# sourceMappingURL=Loaders.module.css.cjs.map

package/dist/cjs/components/Assets/Icons/Loaders.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loaders.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/dist/cjs/components/Assets/Icons/Loading-Animated.cjs

@@ -1,21 +1,17 @@
+require("./Loaders.css");
 'use strict';
 
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
-const styledComponents = require('styled-components');
+const jsxRuntime = require('react/jsx-runtime');
+const cva = require('../../../lib/cva.cjs');
 const Loading = require('./Loading.cjs');
+const Loaders_module = require('./Loaders.module.css.cjs');
 
-const spin = styledComponents.keyframes`
-  from {
-    transform: rotate(0deg) scaleX(-1);
-  }
-  to {
-    transform: rotate(360deg) scaleX(-1);
-  }
-`;
-const Loading_Animated = styledComponents.styled(Loading.default).withConfig({
-  componentId: "sc-1ia82rw-0"
-})(["animation:", " 1s infinite linear;"], spin);
+const Loading_Animated = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(Loading.default, { ...props, className: cva.cn(Loaders_module.default["loading-animated"], className) });
 
 exports.default = Loading_Animated;
 //# sourceMappingURL=Loading-Animated.cjs.map

package/dist/cjs/components/Assets/Icons/Loading-Animated.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Loading-Animated.cjs","sources":["../../../../../src/components/Assets/Icons/Loading-Animated.tsx"],"sourcesContent":["import { keyframes, styled } from 'styled-components';\nimport Loading from './Loading';\n\nconst spin = keyframes`\n  from {\n    transform: rotate(0deg) scaleX(-1);\n  }\n  to {\n    transform: rotate(360deg) scaleX(-1);\n  }\n`;\n\nconst Loading_Animated = styled(Loading)`\n  animation: ${spin} 1s infinite linear;\n`;\n\nexport default Loading_Animated;\n"],"names":["spin","keyframes","Loading_Animated","styled","Loading","withConfig","componentId"],"mappings":";;;;;;;AAGA,MAAMA,IAAAA,GAAOC,0BAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,CAAAA;AASb,MAAMC,gBAAAA,GAAmBC,uBAAAA,CAAOC,eAAO,CAAA,CAACC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,YAAA,EAAA,sBAAA,GACzBN,IAAI;;;;"}
+{"version":3,"file":"Loading-Animated.cjs","sources":["../../../../../src/components/Assets/Icons/Loading-Animated.tsx"],"sourcesContent":["import type { SVGAssetProps } from '@/types';\nimport { cn } from '@/lib/cva';\nimport Loading from './Loading';\nimport styles from './Loaders.module.css';\n\nconst Loading_Animated = ({ className, ...props }: SVGAssetProps) => (\n  <Loading\n    {...props}\n    className={cn(styles['loading-animated'], className)}\n  />\n);\n\nexport default Loading_Animated;\n"],"names":["Loading_Animated","className","props","jsx","Loading","cn","styles"],"mappings":";;;;;;;;;AAKA,MAAMA,mBAAmBA,CAAC;AAAA,EAAEC,SAAAA;AAAAA,EAAW,GAAGC;AAAqB,CAAA,qBAC7DC,cAAA,CAACC,eAAA,EAAA,EACC,GAAIF,KAAAA,EACJ,SAAA,EAAWG,OAAGC,sBAAAA,CAAO,kBAAkB,CAAA,EAAGL,SAAS,CAAA,EAAE;;;;"}

package/dist/cjs/components/Assets/Icons/Loading.cjs

@@ -1,19 +1,26 @@
+require("./Loaders.css");
 'use strict';
 
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
 const jsxRuntime = require('react/jsx-runtime');
-const styledComponents = require('styled-components');
+const cva = require('../../../lib/cva.cjs');
+const Loaders_module = require('./Loaders.module.css.cjs');
 
-const Loading = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: [
+const Loading = ({
+  className,
+  // `theme` is destructured out so it is not forwarded onto the DOM <svg>: the
+  // original wrapped this icon in `styled(Loading)`, which consumed the `theme`
+  // prop and never rendered it as an attribute.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  theme,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, className: cva.cn(Loaders_module.default.loading, className), children: [
   /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.25, d: "M7.625 8.875H4.5V5.75" }),
   /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M19.5 12A7.495 7.495 0 0 0 5.188 8.875" }),
   /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.25, d: "M16.375 15.125H19.5v3.125" }),
   /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4.5 12a7.495 7.495 0 0 0 14.312 3.125" })
 ] });
-const LoadingFlipped = styledComponents.styled(Loading).withConfig({
-  componentId: "sc-1jt3d9w-0"
-})(["transform:scaleX(-1);"]);
 
-exports.default = LoadingFlipped;
+exports.default = Loading;
 //# sourceMappingURL=Loading.cjs.map

package/dist/cjs/components/Assets/Icons/Loading.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Loading.cjs","sources":["../../../../../src/components/Assets/Icons/Loading.tsx"],"sourcesContent":["import type { SVGAssetProps } from '@/types';\nimport { styled } from 'styled-components';\n\nconst Loading = (props: SVGAssetProps) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width={24}\n    height={24}\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    {...props}\n  >\n    <path\n      stroke=\"#161517\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.25}\n      d=\"M7.625 8.875H4.5V5.75\"\n    />\n    <path\n      stroke=\"#161517\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M19.5 12A7.495 7.495 0 0 0 5.188 8.875\"\n    />\n    <path\n      stroke=\"#161517\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.25}\n      d=\"M16.375 15.125H19.5v3.125\"\n    />\n    <path\n      stroke=\"#161517\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M4.5 12a7.495 7.495 0 0 0 14.312 3.125\"\n    />\n  </svg>\n);\n\nconst LoadingFlipped = styled(Loading)`\n  transform: scaleX(-1);\n`;\nexport default LoadingFlipped;\n"],"names":["Loading","props","jsxs","jsx","LoadingFlipped","styled","withConfig","componentId"],"mappings":";;;;;;;AAGA,MAAMA,UAAUA,CAACC,KAAAA,qBACfC,eAAA,CAAC,KAAA,EAAA,EACC,OAAM,4BAAA,EACN,KAAA,EAAO,EAAA,EACP,MAAA,EAAQ,IACR,OAAA,EAAQ,WAAA,EACR,IAAA,EAAK,MAAA,EACL,GAAID,KAAAA,EAEJ,QAAA,EAAA;AAAA,kBAAAE,cAAA,CAAC,MAAA,EAAA,EACC,MAAA,EAAO,SAAA,EACP,aAAA,EAAc,OAAA,EACd,gBAAe,OAAA,EACf,WAAA,EAAa,IAAA,EACb,CAAA,EAAE,uBAAA,EAAuB,CAAA;AAAA,kBAE3BA,cAAA,CAAC,MAAA,EAAA,EACC,MAAA,EAAO,SAAA,EACP,aAAA,EAAc,OAAA,EACd,cAAA,EAAe,OAAA,EACf,WAAA,EAAa,GAAA,EACb,CAAA,EAAE,wCAAA,EAAwC,CAAA;AAAA,kBAE5CA,cAAA,CAAC,MAAA,EAAA,EACC,MAAA,EAAO,SAAA,EACP,aAAA,EAAc,OAAA,EACd,cAAA,EAAe,OAAA,EACf,WAAA,EAAa,IAAA,EACb,CAAA,EAAE,2BAAA,EAA2B,CAAA;AAAA,kBAE/BA,cAAA,CAAC,MAAA,EAAA,EACC,MAAA,EAAO,SAAA,EACP,aAAA,EAAc,OAAA,EACd,cAAA,EAAe,OAAA,EACf,WAAA,EAAa,GAAA,EACb,CAAA,EAAE,wCAAA,EAAwC;AAAA,CAAA,EAE9C,CAAA;AAGF,MAAMC,cAAAA,GAAiBC,uBAAAA,CAAOL,OAAO,CAAA,CAACM,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,uBAAA,CAAA;;;;"}
+{"version":3,"file":"Loading.cjs","sources":["../../../../../src/components/Assets/Icons/Loading.tsx"],"sourcesContent":["import type { SVGAssetProps } from '@/types';\nimport { cn } from '@/lib/cva';\nimport styles from './Loaders.module.css';\n\nconst Loading = ({\n  className,\n  // `theme` is destructured out so it is not forwarded onto the DOM <svg>: the\n  // original wrapped this icon in `styled(Loading)`, which consumed the `theme`\n  // prop and never rendered it as an attribute.\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  theme,\n  ...props\n}: SVGAssetProps) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width={24}\n    height={24}\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    {...props}\n    className={cn(styles.loading, className)}\n  >\n    <path\n      stroke=\"#161517\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.25}\n      d=\"M7.625 8.875H4.5V5.75\"\n    />\n    <path\n      stroke=\"#161517\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M19.5 12A7.495 7.495 0 0 0 5.188 8.875\"\n    />\n    <path\n      stroke=\"#161517\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.25}\n      d=\"M16.375 15.125H19.5v3.125\"\n    />\n    <path\n      stroke=\"#161517\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M4.5 12a7.495 7.495 0 0 0 14.312 3.125\"\n    />\n  </svg>\n);\n\nexport default Loading;\n"],"names":["Loading","className","theme","props","cn","styles","loading","jsx"],"mappings":";;;;;;;;AAIA,MAAMA,UAAUA,CAAC;AAAA,EACfC,SAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAKAC,KAAAA;AAAAA,EACA,GAAGC;AACU,CAAA,qCACZ,KAAA,EAAA,EACC,KAAA,EAAM,8BACN,KAAA,EAAO,EAAA,EACP,QAAQ,EAAA,EACR,OAAA,EAAQ,aACR,IAAA,EAAK,MAAA,EACL,GAAIA,KAAAA,EACJ,SAAA,EAAWC,OAAGC,sBAAAA,CAAOC,OAAAA,EAASL,SAAS,CAAA,EAEvC,QAAA,EAAA;AAAA,kBAAAM,cAAA,CAAC,MAAA,EAAA,EACC,MAAA,EAAO,SAAA,EACP,aAAA,EAAc,OAAA,EACd,gBAAe,OAAA,EACf,WAAA,EAAa,IAAA,EACb,CAAA,EAAE,uBAAA,EAAuB,CAAA;AAAA,kBAE3BA,cAAA,CAAC,MAAA,EAAA,EACC,MAAA,EAAO,SAAA,EACP,aAAA,EAAc,OAAA,EACd,cAAA,EAAe,OAAA,EACf,WAAA,EAAa,GAAA,EACb,CAAA,EAAE,wCAAA,EAAwC,CAAA;AAAA,kBAE5CA,cAAA,CAAC,MAAA,EAAA,EACC,MAAA,EAAO,SAAA,EACP,aAAA,EAAc,OAAA,EACd,cAAA,EAAe,OAAA,EACf,WAAA,EAAa,IAAA,EACb,CAAA,EAAE,2BAAA,EAA2B,CAAA;AAAA,kBAE/BA,cAAA,CAAC,MAAA,EAAA,EACC,MAAA,EAAO,SAAA,EACP,aAAA,EAAc,OAAA,EACd,cAAA,EAAe,OAAA,EACf,WAAA,EAAa,GAAA,EACb,CAAA,EAAE,wCAAA,EAAwC;AAAA,CAAA,EAE9C;;;;"}