@rovula/ui 0.0.21 → 0.0.23

package/src/icons/material-icon/solid/CollapseContentIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const CollapseContentIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M8.923 15.077h-4a.892.892 0 0 1-.657-.266.893.893 0 0 1-.266-.658c0-.261.089-.48.266-.657a.893.893 0 0 1 .657-.265h4.734c.315 0 .58.106.793.32.213.213.32.477.32.792v4.734c0 .261-.09.48-.266.657a.893.893 0 0 1-.658.266.892.892 0 0 1-.658-.265.893.893 0 0 1-.265-.658v-4Zm6.154-6.154h4c.261 0 .48.089.657.266a.893.893 0 0 1 .266.657c0 .262-.088.481-.265.658a.893.893 0 0 1-.658.265h-4.734c-.315 0-.58-.106-.793-.32a1.077 1.077 0 0 1-.32-.792V4.923c0-.261.09-.48.266-.657A.893.893 0 0 1 14.154 4c.262 0 .481.089.658.266a.893.893 0 0 1 .265.657v4Z"
+    />
+  </svg>
+);
+
+export default CollapseContentIcon;

package/src/icons/material-icon/solid/ContentCopyIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const ContentCopyIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M9.308 18c-.505 0-.933-.175-1.283-.525a1.745 1.745 0 0 1-.525-1.283V4.808c0-.505.175-.933.525-1.283.35-.35.778-.525 1.283-.525h8.384c.505 0 .933.175 1.283.525.35.35.525.778.525 1.283v11.384c0 .505-.175.933-.525 1.283-.35.35-.778.525-1.283.525H9.308Zm0-1.5h8.384a.294.294 0 0 0 .212-.096.294.294 0 0 0 .096-.212V4.808a.294.294 0 0 0-.096-.212.294.294 0 0 0-.212-.096H9.308a.294.294 0 0 0-.212.096.294.294 0 0 0-.096.212v11.384c0 .077.032.148.096.212a.294.294 0 0 0 .212.096Zm-3.5 5c-.505 0-.933-.175-1.283-.525A1.745 1.745 0 0 1 4 19.692V7.558c0-.213.072-.391.215-.535a.726.726 0 0 1 .535-.215c.213 0 .391.072.535.215a.727.727 0 0 1 .215.535v12.134c0 .077.032.148.096.212a.294.294 0 0 0 .212.096h9.134c.213 0 .391.072.535.215a.726.726 0 0 1 .215.535.726.726 0 0 1-.215.535.726.726 0 0 1-.535.215H5.808Z"
+    />
+  </svg>
+);
+
+export default ContentCopyIcon;

package/src/icons/material-icon/solid/ContentPasteIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const ContentPasteIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M5.308 21.492a1.74 1.74 0 0 1-1.277-.53 1.74 1.74 0 0 1-.531-1.277V6.3c0-.497.177-.923.531-1.277a1.74 1.74 0 0 1 1.277-.53h4.405c.139-.488.422-.892.85-1.212.427-.32.906-.481 1.437-.481.551 0 1.038.16 1.46.48.423.321.704.725.842 1.212h4.39c.497 0 .923.177 1.277.531.354.354.531.78.531 1.277v13.384c0 .498-.177.923-.531 1.277a1.74 1.74 0 0 1-1.277.531H5.308Zm0-1.5h13.384a.294.294 0 0 0 .212-.096.294.294 0 0 0 .096-.212V6.3a.294.294 0 0 0-.096-.212.294.294 0 0 0-.212-.096H16.5v1.712c0 .256-.086.47-.259.644a.87.87 0 0 1-.641.26H8.4a.868.868 0 0 1-.641-.26.876.876 0 0 1-.259-.644V5.992H5.308a.294.294 0 0 0-.212.096A.294.294 0 0 0 5 6.3v13.384c0 .078.032.148.096.212a.293.293 0 0 0 .212.096Zm6.694-13.884a.87.87 0 0 0 .643-.26.88.88 0 0 0 .259-.646.871.871 0 0 0-.26-.644.88.88 0 0 0-.646-.258.87.87 0 0 0-.643.26.88.88 0 0 0-.259.645.87.87 0 0 0 .26.644.879.879 0 0 0 .646.259Z"
+    />
+  </svg>
+);
+
+export default ContentPasteIcon;

package/src/icons/material-icon/solid/DataTableIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const DataTableICon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M5.308 20.5c-.505 0-.933-.175-1.283-.525a1.745 1.745 0 0 1-.525-1.283V5.308c0-.505.175-.933.525-1.283.35-.35.778-.525 1.283-.525h13.384c.505 0 .933.175 1.283.525.35.35.525.778.525 1.283v13.384c0 .505-.175.933-.525 1.283-.35.35-.778.525-1.283.525H5.308ZM5 8.662h14V5.308a.294.294 0 0 0-.096-.212.294.294 0 0 0-.212-.096H5.308a.294.294 0 0 0-.212.096.294.294 0 0 0-.096.212v3.354Zm0 5.176h14v-3.676H5v3.676ZM5.308 19h13.384a.294.294 0 0 0 .212-.096.294.294 0 0 0 .096-.212v-3.354H5v3.354c0 .077.032.148.096.212a.294.294 0 0 0 .212.096ZM7.287 7.727a.87.87 0 0 1-.644-.26.879.879 0 0 1-.258-.645.87.87 0 0 1 .26-.644.879.879 0 0 1 .645-.259.87.87 0 0 1 .644.26.88.88 0 0 1 .258.646.87.87 0 0 1-.26.643.879.879 0 0 1-.645.259Zm0 5.177a.871.871 0 0 1-.644-.26.88.88 0 0 1-.258-.646.87.87 0 0 1 .26-.643.88.88 0 0 1 .645-.259c.257 0 .471.087.644.26a.88.88 0 0 1 .258.646.871.871 0 0 1-.26.643.88.88 0 0 1-.645.259Zm0 5.177a.87.87 0 0 1-.644-.26.88.88 0 0 1-.258-.646.87.87 0 0 1 .26-.643.879.879 0 0 1 .645-.259.87.87 0 0 1 .644.26.879.879 0 0 1 .258.645.87.87 0 0 1-.26.644.879.879 0 0 1-.645.259Z"
+    />
+  </svg>
+);
+
+export default DataTableICon;

package/src/icons/material-icon/solid/ExpandCircleDownIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const ExpandCircleDownIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="m12 13.03-2.558-2.557a.693.693 0 0 0-.513-.208.754.754 0 0 0-.531.208.7.7 0 0 0-.228.535c.003.207.08.386.228.534l2.97 2.97c.18.18.391.27.632.27s.452-.09.633-.27l2.984-2.985a.712.712 0 0 0 .22-.527.717.717 0 0 0-.235-.527.76.76 0 0 0-.527-.21.712.712 0 0 0-.527.22L12 13.03Zm.002 8.47a9.254 9.254 0 0 1-3.706-.748 9.596 9.596 0 0 1-3.016-2.03 9.595 9.595 0 0 1-2.032-3.016 9.246 9.246 0 0 1-.748-3.704c0-1.314.25-2.55.748-3.706a9.596 9.596 0 0 1 2.03-3.016 9.594 9.594 0 0 1 3.016-2.032 9.246 9.246 0 0 1 3.704-.748c1.314 0 2.55.25 3.706.748a9.596 9.596 0 0 1 3.017 2.03 9.594 9.594 0 0 1 2.03 3.016 9.247 9.247 0 0 1 .749 3.704c0 1.314-.25 2.55-.748 3.706a9.596 9.596 0 0 1-2.03 3.017 9.595 9.595 0 0 1-3.016 2.03 9.247 9.247 0 0 1-3.704.749Z"
+    />
+  </svg>
+);
+
+export default ExpandCircleDownIcon;

package/src/icons/material-icon/solid/ExpandCircleRightIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const ExpandCircleRightIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="m13.03 12-2.557 2.558a.693.693 0 0 0-.208.513c0 .205.07.382.208.531a.7.7 0 0 0 .535.228.746.746 0 0 0 .534-.228l2.97-2.97a.868.868 0 0 0 .27-.632.867.867 0 0 0-.27-.633l-2.985-2.984a.711.711 0 0 0-.527-.22.717.717 0 0 0-.527.235.76.76 0 0 0-.21.527.712.712 0 0 0 .22.527L13.03 12Zm-1.028 9.5a9.254 9.254 0 0 1-3.706-.748 9.596 9.596 0 0 1-3.016-2.03 9.595 9.595 0 0 1-2.032-3.016 9.246 9.246 0 0 1-.748-3.704c0-1.314.25-2.55.748-3.706a9.596 9.596 0 0 1 2.03-3.016 9.594 9.594 0 0 1 3.016-2.032 9.246 9.246 0 0 1 3.704-.748c1.314 0 2.55.25 3.706.748a9.596 9.596 0 0 1 3.017 2.03 9.594 9.594 0 0 1 2.03 3.016 9.247 9.247 0 0 1 .749 3.704c0 1.314-.25 2.55-.748 3.706a9.596 9.596 0 0 1-2.03 3.017 9.595 9.595 0 0 1-3.016 2.03 9.247 9.247 0 0 1-3.704.749Z"
+    />
+  </svg>
+);
+
+export default ExpandCircleRightIcon;

package/src/icons/material-icon/solid/ExpandCircleUpIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const ExpandCircleUpIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="m12 10.97 2.558 2.557a.693.693 0 0 0 .513.208c.205 0 .382-.07.531-.208a.7.7 0 0 0 .228-.535.746.746 0 0 0-.228-.534l-2.97-2.97a.867.867 0 0 0-.632-.27.867.867 0 0 0-.633.27l-2.984 2.985a.711.711 0 0 0-.22.527c.002.203.08.378.235.527a.76.76 0 0 0 .527.21.712.712 0 0 0 .527-.22L12 10.97Zm.002 10.53a9.254 9.254 0 0 1-3.706-.748 9.596 9.596 0 0 1-3.016-2.03 9.595 9.595 0 0 1-2.032-3.016 9.246 9.246 0 0 1-.748-3.704c0-1.314.25-2.55.748-3.706a9.596 9.596 0 0 1 2.03-3.016 9.594 9.594 0 0 1 3.016-2.032 9.246 9.246 0 0 1 3.704-.748c1.314 0 2.55.25 3.706.748a9.596 9.596 0 0 1 3.017 2.03 9.594 9.594 0 0 1 2.03 3.016 9.247 9.247 0 0 1 .749 3.704c0 1.314-.25 2.55-.748 3.706a9.596 9.596 0 0 1-2.03 3.017 9.595 9.595 0 0 1-3.016 2.03 9.247 9.247 0 0 1-3.704.749Z"
+    />
+  </svg>
+);
+
+export default ExpandCircleUpIcon;

package/src/icons/material-icon/solid/ExpandContentIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const ExpandContentIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M5.846 18.154h4c.262 0 .481.088.658.265a.894.894 0 0 1 .265.658.892.892 0 0 1-.265.658.894.894 0 0 1-.658.265H5.113c-.316 0-.58-.107-.793-.32a1.076 1.076 0 0 1-.32-.793v-4.733c0-.262.089-.481.266-.658a.894.894 0 0 1 .657-.265c.262 0 .481.088.658.265a.894.894 0 0 1 .265.658v4ZM18.154 5.846h-4a.893.893 0 0 1-.658-.265.894.894 0 0 1-.265-.658c0-.262.088-.481.265-.658A.894.894 0 0 1 14.154 4h4.733c.316 0 .58.107.793.32.213.213.32.477.32.793v4.733c0 .262-.088.481-.265.658a.894.894 0 0 1-.658.265.892.892 0 0 1-.658-.265.894.894 0 0 1-.265-.658v-4Z"
+    />
+  </svg>
+);
+
+export default ExpandContentIcon;

package/src/icons/material-icon/solid/InterestsIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const InterestsIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="m3.142 9.371 3.089-5.479a.903.903 0 0 1 .341-.357.914.914 0 0 1 .448-.11.91.91 0 0 1 .446.11.903.903 0 0 1 .342.357l3.088 5.48a.84.84 0 0 1 .113.455.98.98 0 0 1-.128.432.878.878 0 0 1-.775.452H3.932a.862.862 0 0 1-.774-.452.981.981 0 0 1-.128-.432.84.84 0 0 1 .112-.456ZM7.03 20.76c-1.042 0-1.93-.366-2.662-1.098C3.635 18.93 3.27 18.043 3.27 17s.366-1.93 1.098-2.662c.733-.731 1.62-1.097 2.662-1.097 1.042 0 1.93.366 2.661 1.098.733.731 1.099 1.619 1.099 2.661s-.366 1.93-1.099 2.662c-.732.732-1.619 1.098-2.661 1.098Zm6.23-.903v-5.712c0-.256.088-.47.26-.644a.874.874 0 0 1 .645-.26h5.711c.256 0 .47.087.644.26.173.173.26.388.26.644v5.712c0 .256-.087.47-.26.644a.875.875 0 0 1-.644.26h-5.711a.875.875 0 0 1-.644-.26.875.875 0 0 1-.26-.644Zm3.178-9.627-1.095-.913c-1.008-.833-1.747-1.54-2.216-2.12-.468-.58-.703-1.216-.703-1.905 0-.674.23-1.237.687-1.689.458-.453 1.033-.679 1.727-.679.424 0 .82.101 1.19.303.37.202.7.493.992.872a3.26 3.26 0 0 1 1.002-.867 2.447 2.447 0 0 1 1.19-.308c.685 0 1.257.231 1.716.694.459.463.688 1.03.688 1.702 0 .684-.234 1.312-.702 1.887-.469.574-1.208 1.277-2.217 2.11l-1.094.913a.845.845 0 0 1-.583.221.843.843 0 0 1-.582-.221Z"
+    />
+  </svg>
+);
+
+export default InterestsIcon;

package/src/icons/material-icon/solid/SaveIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const SaveIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M5.308 20.5c-.505 0-.933-.175-1.283-.525a1.745 1.745 0 0 1-.525-1.283V5.308c0-.505.175-.933.525-1.283.35-.35.778-.525 1.283-.525H16.04c.241 0 .473.047.695.14.223.094.416.223.58.387l2.658 2.658c.164.164.293.357.387.58.093.222.14.454.14.695v10.732c0 .505-.175.933-.525 1.283-.35.35-.778.525-1.283.525H5.308ZM19 7.85 16.15 5H5.308a.3.3 0 0 0-.221.087.3.3 0 0 0-.087.22v13.385a.3.3 0 0 0 .087.221.3.3 0 0 0 .22.087h13.385a.3.3 0 0 0 .221-.087.3.3 0 0 0 .087-.22V7.85Zm-7 9.42a2.41 2.41 0 0 0 1.77-.732 2.41 2.41 0 0 0 .73-1.769A2.41 2.41 0 0 0 13.77 13a2.41 2.41 0 0 0-1.77-.73 2.41 2.41 0 0 0-1.77.73 2.41 2.41 0 0 0-.73 1.77c0 .692.244 1.281.73 1.768a2.41 2.41 0 0 0 1.77.731ZM7.288 9.883h6.404a.876.876 0 0 0 .646-.258.876.876 0 0 0 .258-.645V7.289a.876.876 0 0 0-.258-.646.876.876 0 0 0-.646-.258H7.288a.876.876 0 0 0-.645.258.876.876 0 0 0-.258.646V8.98c0 .257.086.473.258.645a.876.876 0 0 0 .646.258Z"
+    />
+  </svg>
+);
+
+export default SaveIcon;

package/src/icons/material-icon/solid/TableChartIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const TableChartIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M3.5 8.25V5.308c0-.497.177-.923.531-1.277A1.74 1.74 0 0 1 5.308 3.5h13.384c.497 0 .923.177 1.277.531.354.354.531.78.531 1.277V8.25h-17ZM5.308 20.5a1.74 1.74 0 0 1-1.277-.531 1.74 1.74 0 0 1-.531-1.277V9.75h4.192V20.5H5.308Zm11 0V9.75H20.5v8.942c0 .497-.177.923-.531 1.277a1.74 1.74 0 0 1-1.277.531h-2.384Zm-7.116 0V9.75h5.616V20.5H9.192Z"
+    />
+  </svg>
+);
+
+export default TableChartIcon;

package/src/icons/material-icon/solid/index.ts

@@ -0,0 +1,12 @@
+export { default as SaveIcon } from "./SaveIcon";
+export { default as DataTableIcon } from "./DataTableIcon";
+export { default as TableChartIcon } from "./TableChartIcon";
+export { default as InterestsIcon } from "./InterestsIcon";
+export { default as CollapseContentIcon } from "./CollapseContentIcon";
+export { default as ExpandContentIcon } from "./ExpandContentIcon";
+export { default as ExpandCircleRightIcon } from "./ExpandCircleRightIcon";
+export { default as ExpandCircleDownIcon } from "./ExpandCircleDownIcon";
+export { default as ExpandCircleUpIcon } from "./ExpandCircleUpIcon";
+export { default as ContentCopyIcon } from "./ContentCopyIcon";
+export { default as ContentPasteIcon } from "./ContentPasteIcon";
+export { default as ChevronDownIcon } from "./ChevronDownIcon";

package/src/icons/materialIconConfig.tsx

@@ -0,0 +1,23 @@
+import * as MaterialIconSolid from "./material-icon/solid";
+import * as MaterialIconOutline from "./material-icon/outline";
+
+import { registerIconSet } from "./iconRegistry";
+import { getIconKeyByNaming } from "./utils";
+import { IconRegistryMap, IconSet } from "./type";
+
+const materialIcons: IconRegistryMap = Object.keys(MaterialIconSolid).reduce(
+  (prev, key) => {
+    const iconKey = getIconKeyByNaming(key);
+
+    return {
+      ...prev,
+      [iconKey]: {
+        solid: (MaterialIconSolid as IconSet)[key] ?? null,
+        outline: (MaterialIconOutline as IconSet)[key] ?? null,
+      },
+    };
+  },
+  {} as IconRegistryMap
+);
+
+registerIconSet("material", materialIcons);

package/src/icons/type.ts

@@ -0,0 +1,11 @@
+export type IconComponent = React.ComponentType<React.SVGProps<SVGSVGElement>>;
+
+export type IconVariant = "solid" | "outline";
+
+export type IconVariantsMap = {
+  [K in IconVariant]?: IconComponent; // | (() => Promise<{ default: IconComponent }>) TODO
+};
+
+export type IconRegistryMap = Record<string, IconVariantsMap>;
+
+export type IconSet = Record<string, IconComponent>;

package/src/icons/utils.ts

@@ -0,0 +1,6 @@
+export function getIconKeyByNaming(camelCaseStr: string): string {
+  return camelCaseStr
+    .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+    .toLowerCase()
+    .replace("-icon", "");
+}

package/src/index.ts

@@ -1,6 +1,8 @@
 // UI Components
 // import "./src/styles/style.css";
 import "./theme/global.css";
+import "./icons/iconConfig";
+
 export { default as Button } from "./components/Button/Button";
 export { default as TextInput } from "./components/TextInput/TextInput";
 export { default as Text } from "./components/Text/Text";
@@ -22,11 +24,14 @@ export {
 } from "./components/Popover/Popover";
 export { default as Loading } from "./components/Loading/Loading";
 export { default as ProgressBar } from "./components/ProgressBar/ProgressBar";
+export { default as Icon } from "./components/Icon/Icon";
 export * from "./components/Table/Table";
 export * from "./components/DataTable/DataTable";
 export * from "./components/Dialog/Dialog";
 export * from "./components/AlertDialog/AlertDialog";
 export * from "./components/Search/Search";
+export * from "./components/Slider/Slider";
+export * from "./components/Switch/Switch";
 
 // Export component types
 export type { ButtonProps } from "./components/Button/Button";

package/src/theme/main-preset.js

@@ -180,6 +180,30 @@ module.exports = {
             fontFamily: "var(--small5-family, 'Poppins')",
           },
         ],
+        small6: [
+          "var(--small5-size, 10px)",
+          {
+            lineHeight: "var(--small6-line-height, 12px)",
+            fontWeight: "var(--small6-weight, 600)",
+            fontFamily: "var(--small6-family, 'Poppins')",
+          },
+        ],
+        small7: [
+          "var(--small7-size, 8px)",
+          {
+            lineHeight: "var(--small7-line-height, 10px)",
+            fontWeight: "var(--small7-weight, 600)",
+            fontFamily: "var(--small7-family, 'Poppins')",
+          },
+        ],
+        small8: [
+          "var(--small8-size, 8px)",
+          {
+            lineHeight: "var(--small8-line-height, 10px)",
+            fontWeight: "var(--small8-weight, 700)",
+            fontFamily: "var(--small8-family, 'Poppins')",
+          },
+        ],
         label1: [
           "var(--label-label1-size, 12px)",
           {

package/src/theme/plugins/utilities/typography.js

@@ -65,6 +65,15 @@ module.exports = plugin(function ({ addUtilities }) {
     ".typography-small5": {
       "@apply text-small5": {},
     },
+    ".typography-small6": {
+      "@apply text-small6": {},
+    },
+    ".typography-small7": {
+      "@apply text-small7": {},
+    },
+    ".typography-small8": {
+      "@apply text-small8": {},
+    },
     ".typography-label1": {
       "@apply text-label1": {},
     },

package/src/theme/presets/colors.js

@@ -36,7 +36,7 @@ module.exports = {
         ...generateColorConfig("primary", "primary-ramps-primary"),
         ...generateColorConfig("secondary", "secondary-ramps-secondary"),
         ...generateColorConfig("tertiary", "tertiary-ramps-tertiary"),
-        ...generateColorConfig("grey", "grey"),
+        ...generateColorConfig("grey", "grey-grey"),
 
         ...generateColorConfig("grey2", "grey2-grey2", secondaryRange),
         ...generateColorConfig("info", "info-info", secondaryRange),
@@ -80,6 +80,13 @@ module.exports = {
         "base-popup-foreground": withColorMixin(
           "--base-color-popup-foreground"
         ),
+        "base-stroke": withColorMixin("--base-color-workspace-stroke"),
+        "base-workspace-stroke": withColorMixin(
+          "--base-color-workspace-stroke"
+        ),
+        "base-guideline-stroke": withColorMixin(
+          "--base-color-guideline-stroke"
+        ),
 
         "common-white": withColorMixin("--common-white"),
         "common-black": withColorMixin("--common-black"),

package/src/theme/tokens/color.css

@@ -23,6 +23,7 @@
   --base-color-bg2: #f5f5f5;
   --base-color-bg3: #d8d8d8;
   --base-color-workspace-stroke: #e2e2e2;
+  --base-color-guideline-stroke: #c5c5c5;
   --base-color-popup: #ffffff;
   --base-color-popup-hightlight: #343638;
   --base-color-popup-curtain: rgba(0 0 0 / 0.6);

package/src/theme/tokens/typography.css

@@ -147,6 +147,27 @@
   --small5-style: normal;
   --small5-line-height: 12px;
   --small5-line-height-rem: 0.75rem;
+  --small6-family: "Montserrat";
+  --small6-size: 10px;
+  --small6-size-rem: 0.625rem;
+  --small6-weight: 600;
+  --small6-style: normal;
+  --small6-line-height: 12px;
+  --small6-line-height-rem: 0.75rem;
+  --small7-family: "Montserrat";
+  --small7-size: 8px;
+  --small7-size-rem: 0.5rem;
+  --small7-weight: 600;
+  --small7-style: normal;
+  --small7-line-height: 10px;
+  --small7-line-height-rem: 0.625rem;
+  --small8-family: "Montserrat";
+  --small8-size: 8px;
+  --small8-size-rem: 0.5rem;
+  --small8-weight: 700;
+  --small8-style: normal;
+  --small8-line-height: 10px;
+  --small8-line-height-rem: 0.625rem;
   --label-label1-family: "Montserrat";
   --label-label1-size: 12px;
   --label-label1-size-rem: 0.75rem;

package/dist/cjs/types/components/ActionButton/ActionButton.styles copy.d.ts

@@ -1,6 +0,0 @@
-export declare const actionButtonVariants: (props?: ({
-    variant?: "solid" | "outline" | "icon" | null | undefined;
-    size?: "sm" | "md" | "lg" | "xs" | null | undefined;
-    disabled?: boolean | null | undefined;
-    active?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/dist/cjs/types/components/Button/Button.styles copy.d.ts

@@ -1,7 +0,0 @@
-export declare const buttonVariants: (props?: ({
-    color?: "primary" | "secondary" | "tertiary" | "success" | "info" | "warning" | "error" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
-    variant?: "solid" | "outline" | "flat" | "link" | null | undefined;
-    disabled?: boolean | null | undefined;
-    fullwidth?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/dist/components/ActionButton/ActionButton.styles copy.js

@@ -1,90 +0,0 @@
-import { cva } from "class-variance-authority";
-export var actionButtonVariants = cva(["rounded box-border flex items-center justify-center"], {
-    variants: {
-        variant: {
-            solid: [
-                "bg-secondary-default border-secondary-default text-secondary-foreground fill-secondary-foreground",
-                "hover:bg-secondary-hover hover:border-secondary-hover",
-                "active:bg-secondary-pressed active:border-secondary-pressed",
-            ],
-            outline: [
-                "border bg-transparent disabled:bg-transparent disabled:border-disable-outline",
-                "text-secondary-default fill-secondary-default border-secondary-stroke",
-                "hover:bg-secondary-hover-bg hover:border-secondary-hover hover:text-secondary-hover hover:fill-secondary-hover",
-                "active:bg-secondary-hover-bg active:border-secondary-pressed active:text-secondary-pressed active:fill-secondary-pressed",
-            ],
-            icon: [
-                "bg-transparent disabled:bg-transparent rounded-full",
-                "text-secondary-default fill-secondary-default",
-                "hover:bg-secondary-hover-bg hover:text-secondary-hover hover:fill-secondary-hover",
-                "active:text-secondary-pressed active:fill-secondary-pressed",
-            ],
-        },
-        size: {
-            xs: "p-[2px] w-[18px] h-[18px]",
-            sm: "px-2 py-1 w-[38px] h-[30px]",
-            md: "px-3 py-2 w-[46px] h-[38px]",
-            lg: "px-4 py-3 w-[64px] h-[56px]",
-        },
-        disabled: {
-            false: "",
-        },
-        active: {
-            false: "",
-        },
-    },
-    compoundVariants: [
-        {
-            variant: "solid",
-            active: true,
-            className: [
-                "bg-primary-default border-primary-default text-primary-foreground fill-primary-foreground",
-                "hover:bg-primary-hover hover:border-primary-hover",
-                "active:bg-primary-pressed active:border-primary-pressed",
-            ],
-        },
-        {
-            variant: "outline",
-            active: true,
-            className: [
-                "text-primary-default fill-primary-default border-primary-stroke",
-                "hover:bg-primary-hover-bg hover:border-primary-hover hover:text-primary-hover hover:fill-primary-hover",
-                "active:bg-primary-hover-bg active:border-primary-pressed active:text-primary-pressed active:fill-primary-pressed",
-            ],
-        },
-        {
-            variant: "icon",
-            active: true,
-            className: [
-                "text-primary-default fill-primary-default",
-                "hover:bg-primary-hover-bg hover:text-primary-hover hover:fill-primary-hover",
-                "active:text-primary-pressed active:fill-primary-pressed",
-            ],
-        },
-        {
-            size: "lg",
-            variant: "icon",
-            className: "w-[56px] h-[56px]",
-        },
-        {
-            size: "md",
-            variant: "icon",
-            className: "w-[38px] h-[38px]",
-        },
-        {
-            size: "sm",
-            variant: "icon",
-            className: "w-[30px] h-[30px]",
-        },
-        {
-            disabled: true,
-            className: "pointer-events-none border-transparent bg-disable-solid text-disable-outline fill-disable-outline",
-        },
-    ],
-    defaultVariants: {
-        size: "md",
-        variant: "solid",
-        disabled: false,
-        active: false,
-    },
-});