@react-fabric/core 1.0.0-beta.5 → 1.0.0-beta.52

package/src/overlays/flyout/Flyout.tsx

@@ -30,12 +30,13 @@ import {
   useInteractions,
   useRole,
 } from "@floating-ui/react";
+import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
-  Fragment,
+  isValidElement,
   useCallback,
   useEffect,
-  type PropsWithChildren,
+  type ElementType,
 } from "react";
 import { Loading } from "../../components/animations/Animations";
 import { Icon } from "../../components/icon/Icon";
@@ -50,13 +51,13 @@ import {
   type TestProps,
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
-import classes from "./Flyout.module.css";
 
 export interface FlyoutProps
   extends AriaProps,
     TestProps,
-    IconProps,
+    Omit<IconProps, "icon">,
     ChildrenProp {
+  icon?: string | ElementType<IconProps>;
   /**
    * flyout alignment
    */
@@ -140,6 +141,7 @@ export const Flyout = ({
   });
   const dismiss = useDismiss(context, {
     outsidePressEvent: "mousedown",
+    outsidePress: !hideMask,
     escapeKey: true,
   });
   const role = useRole(context);
@@ -173,9 +175,6 @@ export const Flyout = ({
   useEffect(() => {
     setTimeout(() => {
       refs.floating.current && (refs.floating.current.dataset.show = "true");
-      refs.floating.current
-        ?.querySelector<HTMLElement>('[role="dialog"]')
-        ?.focus();
     }, 50);
   }, []);
 
@@ -193,91 +192,79 @@ export const Flyout = ({
     [closeOnClick, handleClose],
   );
 
-  const Wrapper = useCallback(
-    ({ children }: PropsWithChildren) => {
-      if (hideMask) return <Fragment>{children}</Fragment>;
-
-      return (
+  return (
+    <FloatingPortal>
+      {!hideMask && (
         <FloatingOverlay
           lockScroll
-          style={{ zIndex: "var(--z-overlay-mask)" }}
-          className="bg-base/10 backdrop-blur-sm transition-all"
+          style={{ zIndex: "var(--z-overlay-mask)", overflow: "hidden" }}
+          className="bg-tint-100/10 backdrop-blur-sm transition-all"
+        />
+      )}
+      <FloatingFocusManager context={context}>
+        <div
+          data-align={align}
+          className={classNames(
+            "fabric-flyout",
+            "fixed inset-y-0 overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl",
+            align === "start" ? "start-0" : "end-0",
+            size === "sm" && "w-[20rem]",
+            size === "md" && "w-[40rem]",
+            size === "lg" && "w-[60vw]",
+            size === "xl" && "w-[80vw]",
+          )}
+          style={{
+            width,
+            minWidth,
+          }}
+          onMouseUpCapture={tryClosing}
+          ref={refs.setFloating}
+          {...getFloatingProps()}
+          {...aria}
+          {...aria}
         >
-          {children}
-        </FloatingOverlay>
-      );
-    },
-    [hideMask, handleClose],
-  );
-
-  return (
-    <FloatingPortal>
-      <Wrapper>
-        <FloatingFocusManager context={context}>
-          <Wrapper>
+          <HotKeyWrapper>
+            <Header
+              flex
+              align="center"
+              className={classNames("fabric-flyoutHeader", headerClassName)}
+            >
+              {isString(icon) && (
+                <Icon
+                  icon={icon}
+                  bg={iconBg}
+                  color={iconColor}
+                  className={classNames(iconClassName, "p-1")}
+                  rtlFlip={rtlFlip}
+                />
+              )}
+              {isValidElement(icon) && icon}
+              <label className="flex-1 truncate py-2 px-1">{title}</label>
+              {actions}
+              <Icon
+                data-ref="panelClose"
+                className={classNames(
+                  "fabric-panelAction",
+                  "cursor-pointer p-1 text-xl self-stretch",
+                )}
+                icon={CoreIcons.close}
+                onClick={() => handleClose(false)}
+              />
+            </Header>
+            {loading && <Loading />}
             <div
-              data-align={align}
+              role="dialog"
               className={classNames(
-                classes.flyout,
-                "fixed inset-y-0 overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl",
-                align === "start" ? "start-0" : "end-0",
-                size === "sm" && "w-[20rem]",
-                size === "md" && "w-[40rem]",
-                size === "lg" && "w-[60vw]",
-                size === "xl" && "w-[80vw]",
+                "fabric-flyoutBody",
+                "flex-1 grid overflow-hidden",
               )}
-              style={{
-                width,
-                minWidth,
-              }}
-              onMouseUpCapture={tryClosing}
-              ref={refs.setFloating}
-              {...getFloatingProps()}
-              {...aria}
-              {...aria}
+              {...({ tabIndex: 0 } as AnyObject)}
             >
-              <HotKeyWrapper>
-                <Header
-                  flex
-                  className={classNames(classes.flyoutHeader, headerClassName)}
-                >
-                  {icon && (
-                    <Icon
-                      icon={icon}
-                      bg={iconBg}
-                      color={iconColor}
-                      className={classNames(iconClassName, "p-1")}
-                      rtlFlip={rtlFlip}
-                    />
-                  )}
-                  <label className="flex-1 truncate py-2 px-1">{title}</label>
-                  {actions}
-                  <Icon
-                    data-ref="panelClose"
-                    className={classNames(
-                      classes.panelAction,
-                      "cursor-pointer p-1 text-xl self-stretch",
-                    )}
-                    icon={CoreIcons.close}
-                    onClick={() => handleClose(false)}
-                  />
-                </Header>
-                {loading && <Loading />}
-                <div
-                  role="dialog"
-                  className={classNames(
-                    classes.flyoutBody,
-                    "flex-1 grid overflow-hidden",
-                  )}
-                  {...({ tabIndex: 0 } as AnyObject)}
-                >
-                  {children}
-                </div>
-              </HotKeyWrapper>
+              {children}
             </div>
-          </Wrapper>
-        </FloatingFocusManager>
-      </Wrapper>
+          </HotKeyWrapper>
+        </div>
+      </FloatingFocusManager>
     </FloatingPortal>
   );
 };

package/src/overlays/message/Message.tsx

@@ -24,9 +24,8 @@
 import classNames from "classnames";
 import { useCallback, useLayoutEffect, useRef } from "react";
 import { Icon } from "../../components/icon/Icon";
-import { type ColorType, type Elements, type IconProps } from "../../types";
-import { getBgClass, getColorClass } from "../../utils";
-import classes from "./Message.module.css";
+import { type ColorState, type Elements, type IconProps } from "../../types";
+import { getColor } from "../../utils";
 
 export interface MessageProps extends Omit<IconProps, "iconBg" | "iconColor"> {
   /**
@@ -40,7 +39,7 @@ export interface MessageProps extends Omit<IconProps, "iconBg" | "iconColor"> {
   /**
    * theme color
    */
-  color?: ColorType;
+  color?: ColorState;
   /**
    * extra action button
    */
@@ -77,11 +76,15 @@ export const Message = ({
   return (
     <div
       className={classNames(
-        classes.message,
-        color ? getBgClass(color + "-300") : "bg-invert",
-        color ? getColorClass(color + "-900") : "text-invert",
+        "fabric-message",
         "flex flex-nowrap gap-1 px-8 relative justify-center max-w-md pointer-events-auto rounded mb-2 select-none",
       )}
+      style={{
+        backgroundColor: color
+          ? getColor(color + "-300")
+          : "var(--bg-color-invert)",
+        color: color ? getColor(color + "-900") : "var(--text-color-invert)",
+      }}
       ref={elRef}
     >
       {icon && <Icon icon={icon} size="md" rtlFlip={rtlFlip} />}

package/src/overlays/modal/Modal.tsx

@@ -30,8 +30,14 @@ import {
   useInteractions,
   useRole,
 } from "@floating-ui/react";
+import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { useCallback, useEffect } from "react";
+import {
+  type ElementType,
+  isValidElement,
+  useCallback,
+  useEffect,
+} from "react";
 import { Loading } from "../../components/animations/Animations";
 import { Icon } from "../../components/icon/Icon";
 import { Header } from "../../core/headfoot/HeadFoot";
@@ -45,13 +51,13 @@ import {
   type TestProps,
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
-import classes from "./Modal.module.css";
 
 export interface ModalProps
   extends AriaProps,
     TestProps,
-    IconProps,
+    Omit<IconProps, "icon">,
     ChildrenProp {
+  icon?: string | ElementType<IconProps>;
   /**
    * header className
    */
@@ -92,6 +98,14 @@ export interface ModalProps
    * minimum width
    */
   minWidth?: string | number;
+  /**
+   * portal root element
+   */
+  root?: HTMLElement;
+  /**
+   * hide mask background
+   */
+  noMask?: boolean;
   /**
    * close handler
    */
@@ -115,7 +129,9 @@ export const Modal = ({
   onBeforeClose,
   children,
   loading,
+  root,
   size,
+  noMask,
   width,
   height,
   minHeight,
@@ -163,25 +179,29 @@ export const Modal = ({
   useEffect(() => {
     setTimeout(() => {
       refs.floating.current && (refs.floating.current.dataset.show = "true");
-      refs.floating.current
-        ?.querySelector<HTMLElement>("[role='dialog']")
-        ?.focus();
     }, 50);
   }, []);
 
   return (
-    <FloatingPortal>
+    <FloatingPortal root={root}>
       <FloatingOverlay
         lockScroll
-        style={{ zIndex: "var(--z-overlay-mask)" }}
-        className="bg-base/50 backdrop-blur-sm grid place-items-center"
+        style={{
+          zIndex: "var(--z-overlay-mask)",
+          position: "absolute",
+          overflow: "hidden",
+        }}
+        className={classNames(
+          "grid place-items-center p-16",
+          !noMask && "bg-tint-100/20 backdrop-blur-sm",
+        )}
       >
         <FloatingFocusManager context={context}>
           <dialog
             className={classNames(
-              classes.modal,
+              "fabric-modal",
               "rounded-capped relative overflow-hidden flex flex-col flex-nowrap",
-              "ring-1 ring-tint-100 ring-offset-1 focus-within:ring-primary-300 shadow-xl",
+              "ring-2 ring-offset-2 ring-tint-100 focus-within:ring-primary-300 shadow-xl",
               size === "sm" && "w-[20rem]",
               size === "md" && "w-[40rem]",
               size === "lg" && "w-[60vw]",
@@ -201,9 +221,10 @@ export const Modal = ({
             <HotKeyWrapper>
               <Header
                 flex
-                className={classNames(classes.modalHeader, headerClassName)}
+                align="center"
+                className={classNames("fabric-modalHeader", headerClassName)}
               >
-                {icon && (
+                {isString(icon) && (
                   <Icon
                     icon={icon}
                     bg={iconBg}
@@ -212,12 +233,13 @@ export const Modal = ({
                     rtlFlip={rtlFlip}
                   />
                 )}
+                {isValidElement(icon) && icon}
                 <label className="flex-1 truncate py-2 px-1">{title}</label>
                 {actions}
                 <Icon
                   data-ref="panelClose"
                   className={classNames(
-                    classes.panelAction,
+                    "fabric-panelAction",
                     "cursor-pointer p-1 text-xl self-stretch",
                   )}
                   icon={CoreIcons.close}
@@ -228,7 +250,7 @@ export const Modal = ({
               <div
                 role="dialog"
                 className={classNames(
-                  classes.modalBody,
+                  "fabric-modalBody",
                   "flex-1 grid overflow-hidden",
                 )}
                 {...({ tabIndex: 0 } as AnyObject)}

package/src/overlays/toast/Toast.tsx

@@ -27,10 +27,9 @@ import { useTranslation } from "react-i18next";
 import { AnimationIndicator } from "../../components/animations/Animations";
 import { Button } from "../../components/button/Button";
 import { Icon } from "../../components/icon/Icon";
-import { type ColorType, type Elements, type IconProps } from "../../types";
+import { type ColorState, type Elements, type IconProps } from "../../types";
 import { CoreIcons } from "../../types/icons";
-import { getBgClass, getBorderClass, getColorClass } from "../../utils";
-import classes from "./Toast.module.css";
+import { getColor } from "../../utils";
 
 export interface ToastProps extends Omit<IconProps, "iconBg" | "iconColor"> {
   /**
@@ -48,7 +47,7 @@ export interface ToastProps extends Omit<IconProps, "iconBg" | "iconColor"> {
   /**
    * theme color
    */
-  color?: ColorType;
+  color?: ColorState;
   /**
    * extra action button
    */
@@ -87,31 +86,16 @@ export const Toast = ({
       );
     switch (color) {
       case "danger":
-        return (
-          <AnimationIndicator
-            type="cross"
-            className={getColorClass(color + "-600")}
-          />
-        );
+        return <AnimationIndicator type="cross" color={"danger-600"} />;
       case "success":
-        return (
-          <AnimationIndicator
-            type="check"
-            className={getColorClass(color + "-600")}
-          />
-        );
+        return <AnimationIndicator type="check" color={"success-600"} />;
       case "warning":
-        return (
-          <AnimationIndicator
-            type="exclaim"
-            className={getColorClass(color + "-600")}
-          />
-        );
+        return <AnimationIndicator type="exclaim" color={"warning-600"} />;
       default:
         return (
           <AnimationIndicator
             type={type === "confirm" ? "question" : "info"}
-            className={getColorClass(color + "-600")}
+            color={`${color}-600`}
           />
         );
     }
@@ -138,22 +122,29 @@ export const Toast = ({
     <div
       role="alert"
       className={classNames(
-        classes.toast,
-        getBorderClass(color + "-300"),
+        "fabric-toast",
         "flex flex-nowrap max-w-sm bg-base min-w-72 border pointer-events-auto relative overflow-hidden rounded-capped mt-4 select-none",
       )}
+      style={{
+        borderColor: getColor(color + "-300"),
+      }}
       ref={elRef}
     >
       <div
-        className={classNames("flex-initial p-2", getBgClass(color + "-100"))}
+        className={classNames("flex-initial p-2")}
+        style={{
+          backgroundColor: getColor(color + "-300"),
+        }}
       >
         {iconType}
       </div>
       <div
         className={classNames(
-          getBgClass(color + "-50/50"),
           "flex flex-col flex-1 flex-nowrap overflow-hidden p-2",
         )}
+        style={{
+          backgroundColor: getColor(color + "-50"),
+        }}
       >
         <div className="flex flex-nowrap gap-2 items-start">
           <div className="font-medium flex-1">{title}</div>

package/src/overlays/tooltip/Tooltip.tsx

@@ -45,13 +45,14 @@ import {
   useMemo,
   useRef,
   useState,
+  type MouseEvent,
   type ReactElement,
 } from "react";
 import { Icon } from "../../components/icon/Icon";
 import { useIsRtl } from "../../hooks/useIsRtl";
 import { type RefProp, type TooltipType } from "../../types";
 import { CoreIcons } from "../../types/icons";
-import classes from "./Tooltip.module.css";
+import { getColor } from "../../utils";
 
 export interface TooltipProps extends TooltipType, RefProp {
   /**
@@ -63,7 +64,7 @@ export interface TooltipProps extends TooltipType, RefProp {
    */
   copyContent?: boolean | string;
   disabled?: boolean;
-  children: ReactElement;
+  children: ReactElement<KeyValue>;
 }
 
 export const getTooltipProps = (
@@ -82,6 +83,7 @@ export const Tooltip = ({
   ref,
   children,
   color,
+  textColor,
   content,
   open,
   copyContent,
@@ -125,7 +127,7 @@ export const Tooltip = ({
   });
 
   const hover = useHover(context, {
-    restMs: 250,
+    restMs: 500,
     delay: { open: 1000 },
     handleClose: copyContent ? safePolygon({ buffer: 1 }) : undefined,
   });
@@ -146,14 +148,15 @@ export const Tooltip = ({
   const copyEl = useMemo(() => {
     if (copyContent) {
       const copyText: AnyObject = isString(copyContent) ? copyContent : content;
-      const handler = () => {
+      const handler = (e: MouseEvent) => {
         setIsOpen(false);
+        e.stopPropagation();
         void navigator.clipboard.writeText(copyText.toString());
       };
       return (
         <span
           role="none"
-          className="ms-2 cursor-pointer text-invert flex-content opacity-75 hover:opacity-90 active:opacity-60"
+          className="ms-2 cursor-pointer text-dimmed flex-content opacity-75 hover:opacity-90 active:opacity-60"
           onClick={handler}
         >
           <Icon icon={CoreIcons.copy} />
@@ -173,25 +176,47 @@ export const Tooltip = ({
         <FloatingPortal>
           <dfn
             data-ref="tooltip"
-            data-color={color}
             className={classNames(
-              classes.tooltip,
-              "select-none text-sm not-italic flex py-1 px-2 rounded shadow-md bg-current",
+              "fabric-tooltip z-(--z-tooltip)",
+              "select-none text-sm not-italic flex py-1 px-2 !max-w-lg rounded shadow-md bg-muted",
             )}
             ref={refs.setFloating}
-            style={floatingStyles}
+            style={{
+              color: textColor ? getColor(textColor) : undefined,
+              backgroundColor: color ? getColor(color) : undefined,
+              ...floatingStyles,
+            }}
             {...getFloatingProps()}
           >
-            <span
-              className={classNames(
-                "font-medium text-invert flex-1",
-                isString(content) && "whitespace-pre-wrap",
-              )}
-            >
-              {content}
-            </span>
+            {isValidElement(content) && content}
+            {isString(content) && (
+              <span
+                className={classNames(
+                  "font-medium flex-1 break-all whitespace-pre-wrap mixed-lang",
+                  !textColor && "contrast",
+                )}
+                style={{
+                  color: textColor
+                    ? undefined
+                    : color
+                      ? getColor(color)
+                      : "var(--bg-color-muted)",
+                }}
+              >
+                {content}
+              </span>
+            )}
             {copyEl}
-            <FloatingArrow ref={arrowRef} context={context} />
+            <FloatingArrow
+              ref={arrowRef}
+              context={context}
+              strokeWidth={0.5}
+              className="fill-muted stroke-dimmed"
+              style={{
+                stroke: color ? getColor(color) : undefined,
+                fill: color ? getColor(color) : undefined,
+              }}
+            />
           </dfn>
         </FloatingPortal>
       )}

package/src/types/icons.ts

@@ -24,7 +24,11 @@
 /* istanbul ignore file */
 /* eslint-disable @typescript-eslint/no-namespace */
 
-export module CoreIcons {
+/**
+ * Core icons used in the application.
+ * These icons are typically used for navigation, actions, and other UI elements.
+ */
+export namespace CoreIcons {
   /**
    * carets
    */
@@ -100,6 +104,11 @@ export module CoreIcons {
   export const colapseAll =
     "M18.707 21.293l-6-6c-0.391-0.391-1.024-0.391-1.414 0l-6 6c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414zM5.293 2.707l6 6c0.391 0.391 1.024 0.391 1.414 0l6-6c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
 
+  export const expandAllVar =
+    "M13,9V15H16L12,19L8,15H11V9H8L12,5L16,9H13M4,2H20V4H4V2M4,20H20V22H4V20Z";
+  export const colapseAllVar =
+    "M4,12H20V14H4V12M4,9H20V11H4V9M16,4L12,8L8,4H11V1H13V4H16M8,19L12,15L16,19H13V22H11V19H8Z";
+
   export const folderClosed =
     "M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z";
   export const folderOpen =
@@ -119,11 +128,13 @@ export module CoreIcons {
     "M19.547 14.667c-0.736 2.083-2.245 3.67-4.094 4.553s-4.031 1.061-6.114 0.325-3.67-2.245-4.553-4.094-1.061-4.031-0.325-6.114 2.245-3.67 4.094-4.553 4.031-1.061 6.114-0.325c1.188 0.42 2.209 1.088 2.987 1.882l2.824 2.659h-3.48c-0.552 0-1 0.448-1 1s0.448 1 1 1h5.997c0.004 0 0.009 0 0.013 0 0.137-0.001 0.267-0.030 0.386-0.082 0.119-0.051 0.229-0.126 0.324-0.225 0.012-0.012 0.023-0.025 0.034-0.038 0.076-0.087 0.134-0.184 0.175-0.287s0.065-0.213 0.069-0.328c0.002-0.014 0.002-0.028 0.002-0.042v-5.998c0-0.552-0.448-1-1-1s-1 0.448-1 1v3.685l-2.916-2.745c-0.993-1.012-2.274-1.846-3.748-2.366-2.604-0.921-5.336-0.698-7.644 0.405s-4.197 3.088-5.117 5.692-0.696 5.335 0.406 7.643 3.088 4.197 5.692 5.117 5.335 0.697 7.643-0.406 4.197-3.088 5.117-5.692c0.184-0.521-0.089-1.092-0.61-1.276s-1.092 0.089-1.276 0.61z";
   export const search =
     "M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z";
+  export const ellipsis =
+    "M14 12c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 5c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 19c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414z";
   export const filter = "M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z";
   export const funnel =
     "M19.845 4l-6.609 7.814c-0.147 0.173-0.236 0.399-0.236 0.646v6.922l-2-1v-5.922c0.001-0.227-0.077-0.457-0.236-0.646l-6.609-7.814zM22 2h-20c-0.552 0-1 0.448-1 1 0 0.247 0.089 0.473 0.236 0.646l7.764 9.18v6.174c0 0.389 0.222 0.727 0.553 0.894l4 2c0.494 0.247 1.095 0.047 1.342-0.447 0.072-0.146 0.106-0.301 0.105-0.447v-8.174l7.764-9.18c0.357-0.422 0.304-1.053-0.118-1.409-0.189-0.16-0.419-0.238-0.646-0.237z";
-  export const ellipsis =
-    "M14 12c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 5c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 19c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414z";
+  export const funnelFull =
+    "M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z";
   export const funnelPlus =
     "M15 17H18V14H20V17H23V19H20V22H18V19H15V17M13 19.88C13.04 20.18 12.94 20.5 12.72 20.71C12.32 21.1 11.69 21.1 11.3 20.71L7.29 16.7C7.06 16.47 6.96 16.16 7 15.87V10.75L2.21 4.62C1.87 4.19 1.95 3.56 2.38 3.22C2.57 3.08 2.78 3 3 3V3H17V3C17.22 3 17.43 3.08 17.62 3.22C18.05 3.56 18.13 4.19 17.79 4.62L13 10.75V19.88M5.04 5L9 10.07V15.58L11 17.58V10.05L14.96 5H5.04Z";
   export const funnelRemove =
@@ -249,6 +260,7 @@ export module CoreIcons {
     "M5.541 2.159c-0.153-0.1-0.34-0.159-0.541-0.159-0.552 0-1 0.448-1 1v18c-0.001 0.182 0.050 0.372 0.159 0.541 0.299 0.465 0.917 0.599 1.382 0.3l14-9c0.114-0.072 0.219-0.174 0.3-0.3 0.299-0.465 0.164-1.083-0.3-1.382zM6 4.832l11.151 7.168-11.151 7.168z";
   export const pause =
     "M6 3c-0.552 0-1 0.448-1 1v16c0 0.552 0.448 1 1 1h4c0.552 0 1-0.448 1-1v-16c0-0.552-0.448-1-1-1zM7 5h2v14h-2zM14 3c-0.552 0-1 0.448-1 1v16c0 0.552 0.448 1 1 1h4c0.552 0 1-0.448 1-1v-16c0-0.552-0.448-1-1-1zM15 5h2v14h-2z";
+  export const stop = "M18,18H6V6H18V18Z";
   export const volumeOn =
     "M10 7.081v9.839l-3.375-2.7c-0.17-0.137-0.388-0.22-0.625-0.22h-3v-4h3c0.218 0.001 0.439-0.071 0.625-0.219zM10.375 4.219l-4.726 3.781h-3.649c-0.552 0-1 0.448-1 1v6c0 0.552 0.448 1 1 1h3.649l4.726 3.781c0.431 0.345 1.061 0.275 1.406-0.156 0.148-0.185 0.22-0.407 0.219-0.625v-14c0-0.552-0.448-1-1-1-0.237 0-0.455 0.083-0.625 0.219zM18.363 5.637c1.757 1.758 2.635 4.059 2.635 6.364 0 2.304-0.878 4.605-2.635 6.362-0.39 0.391-0.39 1.024 0 1.414s1.024 0.39 1.414 0c2.147-2.147 3.22-4.963 3.221-7.776s-1.074-5.63-3.221-7.778c-0.39-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM14.833 9.167c0.781 0.781 1.171 1.803 1.171 2.828s-0.39 2.047-1.171 2.828c-0.39 0.391-0.39 1.024 0 1.414s1.024 0.39 1.414 0c1.171-1.171 1.757-2.708 1.757-4.242s-0.586-3.071-1.757-4.242c-0.39-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
   export const volumeOff =
@@ -348,6 +360,9 @@ export module CoreIcons {
   export const colorPicker =
     "M19.35,11.72L17.22,13.85L15.81,12.43L8.1,20.14L3.5,22L2,20.5L3.86,15.9L11.57,8.19L10.15,6.78L12.28,4.65L19.35,11.72M16.76,3C17.93,1.83 19.83,1.83 21,3C22.17,4.17 22.17,6.07 21,7.24L19.08,9.16L14.84,4.92L16.76,3M5.56,17.03L4.5,19.5L6.97,18.44L14.4,11L13,9.6L5.56,17.03Z";
 
+  export const list =
+    "M11 15H17V17H11V15M9 7H7V9H9V7M11 13H17V11H11V13M11 9H17V7H11V9M9 11H7V13H9V11M21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3H19C20.1 3 21 3.9 21 5M19 5H5V19H19V5M9 15H7V17H9V15Z";
+
   /**
    * alert icons
    */