@fibery/ui-kit 1.40.0 → 1.40.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @fibery/ui-kit
 
+## 1.40.2
+
+### Patch Changes
+
+- 08ff4a6: [popover] pass through div props to trigger
+
+## 1.40.1
+
+### Patch Changes
+
+- f44f43b: add asChild to <Button/>
+
 ## 1.40.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.40.0",
+  "version": "1.40.2",
   "private": false,
   "license": "UNLICENSED",
   "dependencies": {
@@ -11,6 +11,7 @@
     "@radix-ui/react-context-menu": "2.2.1",
     "@radix-ui/react-dropdown-menu": "2.1.1",
     "@radix-ui/react-navigation-menu": "1.2.1",
+    "@radix-ui/react-slot": "1.2.4",
     "@radix-ui/react-toast": "1.2.2",
     "@radix-ui/react-toggle": "1.1.10",
     "@radix-ui/react-toggle-group": "1.1.11",
@@ -57,10 +58,10 @@
   "devDependencies": {
     "@babel/core": "7.28.5",
     "@babel/runtime": "7.28.4",
-    "@testing-library/dom": "8.19.1",
+    "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.9.1",
-    "@testing-library/react": "13.4.0",
-    "@testing-library/user-event": "13.5.0",
+    "@testing-library/react": "16.3.1",
+    "@testing-library/user-event": "14.6.1",
     "@types/chroma-js": "2.1.3",
     "@types/color-hash": "1.0.2",
     "@types/history": "4.7.11",

package/src/appIcons.json

@@ -13063,6 +13063,16 @@
     "imageUrl": "https://images-temp.fibery.io/ui/appIcons/linear.svg",
     "file": "linear.svg"
   },
+  {
+    "name": "Stripe",
+    "short_names": ["stripe"],
+    "customCategory": "Integrations",
+    "text": "",
+    "emoticons": [],
+    "keywords": ["logo", "brand", "integration", "stripe"],
+    "imageUrl": "https://images-temp.fibery.io/ui/appIcons/stripe.svg",
+    "file": "stripe.svg"
+  },
   {
     "name": "Openion",
     "short_names": ["openion"],

package/src/box.tsx

@@ -296,7 +296,7 @@ const defaultRadius = {
   rb: border.radius6,
   lb: border.radius6,
 };
-type Props = HTMLProps<HTMLDivElement> & {
+export type BoxProps = HTMLProps<HTMLDivElement> & {
   as?: React.ElementType;
 } & {
   ref?: Ref<HTMLDivElement>;
@@ -342,7 +342,7 @@ type Props = HTMLProps<HTMLDivElement> & {
  * Fibery system card-like container with all mouse, focus and selected states support.
  * States described at: https://www.figma.com/file/Qff2eEFvZhjpxSqeFD5n58/FI---UI-Projects?type=design&node-id=4085%3A30506&mode=design&t=UvkBPcZSg5hKi86D-1
  */
-export const Box = forwardRef<HTMLDivElement, Props>((props, ref) => {
+export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
   const {
     selected,
     done,

package/src/button/base-button.tsx

@@ -1,4 +1,5 @@
 import {css, CSSProperties, cx} from "@linaria/core";
+import {Slot} from "@radix-ui/react-slot";
 import {forwardRef} from "react";
 import {themeVars} from "../design-system";
 import {iconColorVar} from "../icons/Icon";
@@ -12,6 +13,7 @@ export type BaseButtonProps = {
   color?: ButtonColor;
   pressed?: boolean;
   supportMobile?: boolean;
+  asChild?: boolean;
 } & React.ComponentPropsWithRef<"button">;
 
 export const xLargeButtonHeight = 40;
@@ -36,6 +38,7 @@ export const baseButton = css`
 
   @media (any-hover: hover) {
     &:hover:not(:disabled) {
+      color: var(--fibery-button-text-color);
       background-color: var(--fibery-button-hover-color);
     }
   }
@@ -112,13 +115,25 @@ const getColors = (variant: ButtonVariant, color: ButtonColor) => {
 
 export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
   (
-    {variant = "solid", color = "accent", type = "button", className, children, style, pressed, ...buttonProps},
+    {
+      variant = "solid",
+      color = "accent",
+      type = "button",
+      className,
+      children,
+      style,
+      pressed,
+      asChild,
+      ...buttonProps
+    },
     ref
   ) => {
     const colors = getColors(variant, color);
 
+    const Component = asChild ? Slot : "button";
+
     return (
-      <button
+      <Component
         style={{...colors, ...style}}
         aria-pressed={pressed || buttonProps["aria-pressed"]}
         data-variant={variant}
@@ -129,7 +144,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
         {...buttonProps}
       >
         {children}
-      </button>
+      </Component>
     );
   }
 );

package/src/button/button.tsx

@@ -1,11 +1,12 @@
 import {css, cx} from "@linaria/core";
+import {Slot, Slottable} from "@radix-ui/react-slot";
 import {forwardRef} from "react";
 import {border, fontWeight, space, textStyles} from "../design-system";
 import {iconSizeVar} from "../icons/Icon";
 import SpinnerIcon from "../icons/react/Spinner";
-import {BaseButton, BaseButtonProps, ButtonSize, xLargeButtonHeight} from "./base-button";
-import {useIsSupportHardwareKeyboard} from "../use-is-support-hardware-keyboard";
 import {useIsPhone} from "../use-is-phone";
+import {useIsSupportHardwareKeyboard} from "../use-is-support-hardware-keyboard";
+import {BaseButton, BaseButtonProps, ButtonSize, xLargeButtonHeight} from "./base-button";
 
 export type ButtonProps = {
   size?: ButtonSize;
@@ -193,12 +194,16 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       disabled,
       shortcut,
       fullWidth,
+      asChild,
       ...buttonProps
     },
     ref
   ) => {
     const isSupportHardwareKeyboard = useIsSupportHardwareKeyboard();
     const isPhone = useIsPhone();
+
+    const Component = asChild ? Slot : "button";
+
     return (
       <BaseButton
         ref={ref}
@@ -213,12 +218,15 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           iconEnd && withIconEnd,
           !children && withoutChildren
         )}
+        asChild
         {...buttonProps}
       >
-        {pending ? <SpinnerIcon /> : iconStart}
-        {children}
-        {iconEnd}
-        {shortcut && isSupportHardwareKeyboard ? <span className={shortcutContainer}>{shortcut}</span> : null}
+        <Component>
+          {pending ? <SpinnerIcon /> : iconStart}
+          <Slottable>{children}</Slottable>
+          {iconEnd}
+          {shortcut && isSupportHardwareKeyboard ? <span className={shortcutContainer}>{shortcut}</span> : null}
+        </Component>
       </BaseButton>
     );
   }

package/src/button/icon-button.tsx

@@ -9,7 +9,10 @@ import {useIsPhone} from "../use-is-phone";
 export type IconButtonProps = {
   size?: ButtonSize;
   pending?: boolean;
-} & BaseButtonProps;
+
+  /** NOTE: it won't work properly together with `pending` prop. TODO: figure out how to use Slottable correctly (position spinner as absolute above?) */
+  asChild?: boolean;
+} & Omit<BaseButtonProps, "asChild">;
 
 export const iconButton = css`
   display: flex;

package/src/design-system.ts

@@ -532,7 +532,7 @@ export const themeColors = {
   todayMarkerColor: [red.red8, redDark.red6],
   viewBgOverlayColor: [getOpacities(slate.slate8).opacity20, getOpacities(slateDark.slate1).opacity60],
   floatEditorMenuBg: [slate.slate1, slateDark.slate6],
-  floatEditorActiveColor: [indigoDark.indigo10, indigoDark.indigo11],
+  floatEditorActiveColor: [indigo.indigo11, indigoDark.indigo11],
   planBadgeBgColor: [yellow.yellow10, yellowDark.yellow10],
   commentColor: [getOpacities(yellow.yellow6).opacity60, getOpacities(yellowDark.yellow9).opacity40],
   cellBackgroundColor: [slate.slate2, slateDark.slate2],
@@ -685,8 +685,8 @@ export const themeColors = {
     getOpacities(indigo.indigo11).opacity80,
     getOpacities(indigoDark.indigo11).opacity80,
   ],
-  colorTextButtonSoftNeutral: [slate.slate12, slateDark.slate12],
-  colorTextButtonSoftNeutralActive: [getOpacities(slate.slate12).opacity80, getOpacities(slateDark.slate12).opacity80],
+  colorTextButtonSoftNeutral: [slate.slate11, slateDark.slate11],
+  colorTextButtonSoftNeutralActive: [getOpacities(slate.slate11).opacity80, getOpacities(slateDark.slate11).opacity80],
   colorTextButtonSoftDestructive: [red.red11, redDark.red11],
   colorTextButtonSoftDestructiveActive: [getOpacities(red.red11).opacity80, getOpacities(redDark.red11).opacity80],
   colorIconButtonSoftAccent: [indigo.indigo11, indigoDark.indigo11],
@@ -740,6 +740,9 @@ export const themeColors = {
 
   // Text editor
   colorBgEditorImageZoomed: [slate.slate3, slateDark.slate6],
+  colorMermaidPrimaryColor: [slate.slate2, slateDark.slate8],
+  colorMermaidPrimaryBorderColor: [slate.slate9, slateDark.slate9],
+  colorMermaidLineColor: [slate.slate10, slateDark.slate9],
 
   //Whiteboard
   instrumentsMenuBg: [getOpacities(whiteA.whiteA0).opacity100, getOpacities(slateDark.slate4).opacity100],

package/src/dot.tsx

@@ -0,0 +1,36 @@
+import {css, CSSProperties, cx} from "@linaria/core";
+import {space, themeVars} from "./design-system";
+import {useMemo} from "react";
+
+const dotColorVar = "--fibery-dot-color";
+
+const dotCss = css`
+  background-color: var(${dotColorVar});
+  border-radius: 50%;
+
+  &[data-size="small"] {
+    width: ${space.s4}px;
+    height: ${space.s4}px;
+  }
+
+  &[data-size="medium"] {
+    width: ${space.s6}px;
+    height: ${space.s6}px;
+  }
+`;
+
+type Props = {
+  className?: string;
+  color?: string;
+  size?: "small" | "medium";
+} & React.ComponentProps<"div">;
+
+export const Dot = ({className, color = themeVars.active, size = "small", style, ...props}: Props) => {
+  const colors: CSSProperties = useMemo(() => {
+    return {
+      [dotColorVar]: color,
+    };
+  }, [color]);
+
+  return <div className={cx(className, dotCss)} style={{...colors, ...style}} data-size={size} {...props} />;
+};

package/src/file-item-2.tsx

@@ -102,6 +102,8 @@ export type FileItemProps = {
   disabled?: boolean;
 };
 
+export const minFileTileWidth = 120;
+
 export function FileItem(props: FileItemProps) {
   const {onDownloadClick, onRemoveClick} = props;
   const {name, thumbnailUrl, status, previewData: preview, contentType} = props.data;
@@ -133,7 +135,7 @@ export function FileItem(props: FileItemProps) {
 
   useEffect(() => {
     if (!preview) {
-      return;
+      return undefined;
     }
 
     if (zoomed) {
@@ -152,6 +154,10 @@ export function FileItem(props: FileItemProps) {
         actions: <FilePreviewActions url={preview.originalSrc} name={name} onDownloadClick={onDownloadClick} />,
       });
     }
+
+    return () => {
+      imagesRegistry.delete(preview.originalSrc);
+    };
   }, [galleryMethods, zoomed, preview, imagesRegistry, name, onDownloadClick]);
 
   const onContainerClick = useCallback(() => {
@@ -169,6 +175,7 @@ export function FileItem(props: FileItemProps) {
           css`
             flex: 1 0 0;
             height: 100%;
+            min-width: ${minFileTileWidth}px;
           `,
           isBackgroundReady &&
             css`
@@ -258,10 +265,9 @@ export function FileItem(props: FileItemProps) {
                 </Icon>
                 <div
                   className={css`
-                    align-content: center;
-
                     display: flex;
-                    align-items: center;
+                    width: 100%;
+                    justify-content: center;
                     gap: 10px;
                     flex-shrink: 0;
                     color: ${themeVars.colorTextMenuItem};
@@ -272,8 +278,6 @@ export function FileItem(props: FileItemProps) {
                   <FileTitle
                     title={name}
                     className={css`
-                      -webkit-line-clamp: 1;
-                      -webkit-box-orient: vertical;
                       overflow: hidden;
                       text-overflow: ellipsis;
                     `}
@@ -327,10 +331,10 @@ export function FileItem(props: FileItemProps) {
                 <div
                   className={css`
                     display: flex;
+                    width: 100%;
                     align-self: flex-start;
                     align-items: flex-end;
                     text-overflow: ellipsis;
-                    //overflow: hidden;
                     box-sizing: border-box;
                   `}
                 >
@@ -440,16 +444,12 @@ function FileTitle({title, className}: {title: string; className?: string}) {
           vertical-align: top;
           text-align: center;
           justify-content: center;
-          word-break: break-word;
           overflow: hidden;
           font-size: ${fontSize.mini}px;
           font-weight: ${fontWeight.medium};
           line-height: ${lineHeight.heading};
           text-transform: none;
           text-overflow: ellipsis;
-          -webkit-line-clamp: 1;
-          -webkit-box-orient: vertical;
-
           &:hover {
             text-decoration: none;
             color: inherit;
@@ -463,7 +463,7 @@ function FileTitle({title, className}: {title: string; className?: string}) {
           display: flex;
           min-width: 0;
           align-items: center;
-          max-width: 120px;
+          max-width: 180px;
         `}
       >
         <span

package/src/html-styles.ts

@@ -142,7 +142,7 @@ const htmlStyles = {
     paddingTop: space.s3,
     paddingBottom: space.s3,
     ...textStyles.big,
-    lineHeight: lineHeight.text,
+    lineHeight: lineHeight.regular,
   },
   "& .fibery-rich-text-check-item": {
     marginTop: space.s3,
@@ -150,7 +150,7 @@ const htmlStyles = {
     paddingTop: space.s3,
     paddingBottom: space.s3,
     ...textStyles.big,
-    lineHeight: lineHeight.text,
+    lineHeight: lineHeight.regular,
   },
   "& table": {
     marginTop: space.s8,
@@ -167,7 +167,7 @@ const htmlStyles = {
       paddingTop: space.s3,
       paddingBottom: space.s3,
       ...textStyles.big,
-      lineHeight: lineHeight.text,
+      lineHeight: lineHeight.regular,
     },
   },
   "& .code-block": {
@@ -223,14 +223,12 @@ const htmlStyles = {
     },
   },
   "& > *:first-child": {
-    marginTop: 0,
+    marginTop: space.s3,
     paddingTop: space.s3,
     paddingBottom: space.s3,
   },
   "& > *:last-child": {
-    marginBottom: 0,
-    paddingTop: space.s3,
-    paddingBottom: space.s3,
+    marginBottom: space.s3,
   },
   "& > .fibery-rich-text-image-block:last-child": {
     marginBottom: space.s4,
@@ -352,7 +350,7 @@ const smallHtmlStyles = {
     paddingTop: space.s2,
     paddingBottom: space.s2,
     ...textStyles.regular,
-    lineHeight: lineHeight.text,
+    lineHeight: lineHeight.regular,
   },
   "& .fibery-rich-text-check-item": {
     marginTop: space.s2,
@@ -360,7 +358,7 @@ const smallHtmlStyles = {
     paddingTop: space.s2,
     paddingBottom: space.s2,
     ...textStyles.regular,
-    lineHeight: lineHeight.text,
+    lineHeight: lineHeight.regular,
   },
   "& table": {
     marginTop: space.s6,
@@ -377,7 +375,7 @@ const smallHtmlStyles = {
       paddingTop: space.s2,
       paddingBottom: space.s2,
       ...textStyles.regular,
-      lineHeight: lineHeight.text,
+      lineHeight: lineHeight.regular,
     },
   },
   "& .code-block": {
@@ -439,8 +437,6 @@ const smallHtmlStyles = {
   },
   "& > *:last-child": {
     marginBottom: 0,
-    paddingTop: space.s2,
-    paddingBottom: space.s2,
   },
   "& > .fibery-rich-text-image-block:last-child": {
     marginBottom: space.s2,
@@ -546,7 +542,7 @@ const chatHtmlStyles = {
     paddingTop: space.s2,
     paddingBottom: space.s2,
     ...textStyles.regular,
-    lineHeight: lineHeight.text,
+    lineHeight: lineHeight.regular,
     [`${mobileRootSelector} &`]: {
       ...textStyles.big,
     },
@@ -557,7 +553,7 @@ const chatHtmlStyles = {
     paddingTop: space.s2,
     paddingBottom: space.s2,
     ...textStyles.regular,
-    lineHeight: lineHeight.text,
+    lineHeight: lineHeight.regular,
   },
   "& table": {
     marginTop: space.s4,
@@ -574,7 +570,7 @@ const chatHtmlStyles = {
       paddingTop: space.s2,
       paddingBottom: space.s2,
       ...textStyles.regular,
-      lineHeight: lineHeight.text,
+      lineHeight: lineHeight.regular,
     },
   },
   "& .code-block": {

package/src/icons/ast/Dividers.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const Dividers: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20},"children":[{"type":"element","tagName":"path","properties":{"d":"M5 16.027 5.221 18l1.435-1.369L9.11 9.876a3.465 3.465 0 0 1-1.568-.872L5 16.027Zm7.45-7.023a3.51 3.51 0 0 1-1.569.872l2.454 6.755L14.77 18l.23-1.973-2.55-7.023Zm.15-2.026a2.665 2.665 0 0 0-1.719-3.04v-1.05A.89.89 0 0 0 9.996 2a.89.89 0 0 0-.886.889v1.049a2.675 2.675 0 0 0-1.772 2.506 2.661 2.661 0 0 0 3.154 2.623 2.674 2.674 0 0 0 2.108-2.09Zm-2.604.355a.89.89 0 0 1 0-1.777.89.89 0 0 1 0 1.777Z"},"children":[]}],"metadata":""}]},"name":"dividers"};
+
+export default Dividers;

package/src/icons/ast/DoubleLine.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const DoubleLine: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M1.5 7.5a.75.75 0 0 1 .75-.75h15.5a.75.75 0 0 1 0 1.5H2.25a.75.75 0 0 1-.75-.75Zm0 5a.75.75 0 0 1 .75-.75h15.5a.75.75 0 0 1 0 1.5H2.25a.75.75 0 0 1-.75-.75Z"},"children":[]}],"metadata":""}]},"name":"double-line"};
+
+export default DoubleLine;

package/src/icons/ast/LineJump.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const LineJump: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M3.05 6.11h2.69c.37 0 .72.14.98.4L9.4 9.19a.83.83 0 0 0 1.18 0 .83.83 0 0 0 0-1.18L7.9 5.33a3.03 3.03 0 0 0-2.16-.89H3.05a.83.83 0 0 0 0 1.66v.01Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"m18.63 10.79-3.06-3.05a.83.83 0 1 0-1.17 1.17l1.63 1.64H.83a.83.83 0 1 0 0 1.66h15.2l-1.63 1.63a.83.83 0 1 0 1.17 1.18l3.05-3.05a.831.831 0 0 0 0-1.18h.01Z"},"children":[]}],"metadata":""}]},"name":"line-jump"};
+
+export default LineJump;

package/src/icons/ast/QuickFilter.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const QuickFilter: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"d":"M15.25 2A2.75 2.75 0 0 1 18 4.75v10.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25V4.75A2.75 2.75 0 0 1 4.75 2h10.5ZM4.75 3.5c-.69 0-1.25.56-1.25 1.25v10.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25V4.75c0-.69-.56-1.25-1.25-1.25H4.75Zm6.5 8.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1 0-1.5h2.5Zm1-2.75a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5h4.5Zm1-2.75a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h6.5Z","fill":"#000"},"children":[]}],"metadata":""}]},"name":"quick-filter"};
+
+export default QuickFilter;

package/src/icons/ast/QuickFilterPersonal.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const QuickFilterPersonal: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"d":"M2.75 11.25a.75.75 0 0 1 .75.75v3.25c0 .69.56 1.25 1.25 1.25H8A.75.75 0 0 1 8 18H4.75A2.75 2.75 0 0 1 2 15.25V12a.75.75 0 0 1 .75-.75Zm14.5 0A.75.75 0 0 1 18 12v3.25A2.75 2.75 0 0 1 15.25 18H12a.75.75 0 0 1 0-1.5h3.25c.69 0 1.25-.56 1.25-1.25V12a.75.75 0 0 1 .75-.75Zm-6 .75a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1 0-1.5h2.5Zm1-2.75a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5h4.5ZM8 2a.75.75 0 0 1 0 1.5H4.75c-.69 0-1.25.56-1.25 1.25V8A.75.75 0 0 1 2 8V4.75A2.75 2.75 0 0 1 4.75 2H8Zm7.25 0A2.75 2.75 0 0 1 18 4.75V8a.75.75 0 0 1-1.5 0V4.75c0-.69-.56-1.25-1.25-1.25H12A.75.75 0 0 1 12 2h3.25Zm-2 4.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h6.5Z","fill":"#000"},"children":[]}],"metadata":""}]},"name":"quick-filter-personal"};
+
+export default QuickFilterPersonal;

package/src/icons/ast/index.tsx

@@ -96,9 +96,11 @@ export { default as DateRange } from './DateRange';
 export { default as Delete } from './Delete';
 export { default as Demo } from './Demo';
 export { default as Dependency } from './Dependency';
+export { default as Dividers } from './Dividers';
 export { default as Document } from './Document';
 export { default as DoubleArrowLeft } from './DoubleArrowLeft';
 export { default as DoubleArrowRight } from './DoubleArrowRight';
+export { default as DoubleLine } from './DoubleLine';
 export { default as DragBlockHandleSingle } from './DragBlockHandleSingle';
 export { default as DragBlockHandle } from './DragBlockHandle';
 export { default as DragHandle } from './DragHandle';
@@ -190,6 +192,7 @@ export { default as LeftPanel } from './LeftPanel';
 export { default as LevelPlus } from './LevelPlus';
 export { default as Levels } from './Levels';
 export { default as LineDivider } from './LineDivider';
+export { default as LineJump } from './LineJump';
 export { default as Link } from './Link';
 export { default as LocationEdit } from './LocationEdit';
 export { default as LockOutline } from './LockOutline';
@@ -246,6 +249,8 @@ export { default as PresentPlay } from './PresentPlay';
 export { default as PresentStop } from './PresentStop';
 export { default as PrivateItems } from './PrivateItems';
 export { default as Question } from './Question';
+export { default as QuickFilterPersonal } from './QuickFilterPersonal';
+export { default as QuickFilter } from './QuickFilter';
 export { default as ReadOnly } from './ReadOnly';
 export { default as Refresh } from './Refresh';
 export { default as RemovePeople } from './RemovePeople';

package/src/icons/react/Dividers.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import DividersSvg from '../ast/Dividers';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const Dividers = forwardRef<SVGSVGElement, IconBaseProps>(function Dividers(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={DividersSvg} />});
+
+export default Dividers;

package/src/icons/react/DoubleLine.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import DoubleLineSvg from '../ast/DoubleLine';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const DoubleLine = forwardRef<SVGSVGElement, IconBaseProps>(function DoubleLine(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={DoubleLineSvg} />});
+
+export default DoubleLine;

package/src/icons/react/LineJump.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import LineJumpSvg from '../ast/LineJump';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const LineJump = forwardRef<SVGSVGElement, IconBaseProps>(function LineJump(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={LineJumpSvg} />});
+
+export default LineJump;

package/src/icons/react/QuickFilter.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import QuickFilterSvg from '../ast/QuickFilter';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const QuickFilter = forwardRef<SVGSVGElement, IconBaseProps>(function QuickFilter(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={QuickFilterSvg} />});
+
+export default QuickFilter;

package/src/icons/react/QuickFilterPersonal.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import QuickFilterPersonalSvg from '../ast/QuickFilterPersonal';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const QuickFilterPersonal = forwardRef<SVGSVGElement, IconBaseProps>(function QuickFilterPersonal(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={QuickFilterPersonalSvg} />});
+
+export default QuickFilterPersonal;

package/src/icons/react/index.tsx

@@ -96,9 +96,11 @@ export { default as DateRange } from './DateRange';
 export { default as Delete } from './Delete';
 export { default as Demo } from './Demo';
 export { default as Dependency } from './Dependency';
+export { default as Dividers } from './Dividers';
 export { default as Document } from './Document';
 export { default as DoubleArrowLeft } from './DoubleArrowLeft';
 export { default as DoubleArrowRight } from './DoubleArrowRight';
+export { default as DoubleLine } from './DoubleLine';
 export { default as DragBlockHandleSingle } from './DragBlockHandleSingle';
 export { default as DragBlockHandle } from './DragBlockHandle';
 export { default as DragHandle } from './DragHandle';
@@ -190,6 +192,7 @@ export { default as LeftPanel } from './LeftPanel';
 export { default as LevelPlus } from './LevelPlus';
 export { default as Levels } from './Levels';
 export { default as LineDivider } from './LineDivider';
+export { default as LineJump } from './LineJump';
 export { default as Link } from './Link';
 export { default as LocationEdit } from './LocationEdit';
 export { default as LockOutline } from './LockOutline';
@@ -246,6 +249,8 @@ export { default as PresentPlay } from './PresentPlay';
 export { default as PresentStop } from './PresentStop';
 export { default as PrivateItems } from './PrivateItems';
 export { default as Question } from './Question';
+export { default as QuickFilterPersonal } from './QuickFilterPersonal';
+export { default as QuickFilter } from './QuickFilter';
 export { default as ReadOnly } from './ReadOnly';
 export { default as Refresh } from './Refresh';
 export { default as RemovePeople } from './RemovePeople';