musae 0.1.40 → 0.1.42

package/dist/components/button/button.mjs

@@ -180,7 +180,7 @@ const styles = {
   }, {
     "--borderColor": props.color != null ? props.color : "initial",
     "--color": props.color != null ? props.color : "initial",
-    "--1e2mv7m": layer(props.hoveredBackgroundColor, "thin") != null ? layer(props.hoveredBackgroundColor, "thin") : "initial"
+    "--1e2mv7m": props.hoveredBackgroundColor != null ? props.hoveredBackgroundColor : "initial"
   }],
   text: props => [{
     color: "musae-19dipnz",
@@ -188,7 +188,7 @@ const styles = {
     $$css: true
   }, {
     "--color": props.color != null ? props.color : "initial",
-    "--1e2mv7m": layer(props.hoveredBackgroundColor, "thin") != null ? layer(props.hoveredBackgroundColor, "thin") : "initial"
+    "--1e2mv7m": props.hoveredBackgroundColor != null ? props.hoveredBackgroundColor : "initial"
   }],
   disabled: props => [{
     backgroundColor: "musae-q1mx2j",
@@ -198,7 +198,7 @@ const styles = {
     $$css: true
   }, {
     "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
-    "--color": layer(props.color, "thicker") != null ? layer(props.color, "thicker") : "initial"
+    "--color": props.color != null ? props.color : "initial"
   }],
   disabledOutline: props => [{
     borderColor: "musae-eqt46j",
@@ -212,7 +212,7 @@ const styles = {
     borderBottomColor: null,
     $$css: true
   }, {
-    "--borderColor": layer(props.outlineColor, "thicker") != null ? layer(props.outlineColor, "thicker") : "initial"
+    "--borderColor": props.outlineColor != null ? props.outlineColor : "initial"
   }]
 };
 /**
@@ -256,19 +256,19 @@ const Button = forwardRef(({
       color: theme.colors[`on-${color}`]
     }), variant === "outlined" && styles.outlined({
       color: theme.colors[color],
-      hoveredBackgroundColor: theme.colors[ColorToken.Primary]
+      hoveredBackgroundColor: layer(theme.colors[ColorToken.Primary], "thin")
     }), variant === "text" && styles.text({
       color: theme.colors[color],
-      hoveredBackgroundColor: theme.colors[ColorToken.Primary]
+      hoveredBackgroundColor: layer(theme.colors[ColorToken.Primary], "thin")
     }),
     // shape
     styles[shape],
     // disabled
     disabled && styles.disabled({
       backgroundColor: variant === "filled" ? layer(theme.colors[ColorToken.OnSurface], "medium") : "transparent",
-      color: theme.colors[ColorToken.OnSurface]
+      color: layer(theme.colors[ColorToken.OnSurface], "thicker")
     }), disabled && variant === "outlined" && styles.disabledOutline({
-      outlineColor: theme.colors[ColorToken.OnSurface]
+      outlineColor: layer(theme.colors[ColorToken.OnSurface], "thicker")
     }))
   };
   return React.createElement("button", {

package/dist/components/calendar/calendar.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { CalendarProps } from "./types";
-declare const Calendar: (props: CalendarProps) => React.JSX.Element;
+declare const Calendar: ({ className, style, ...props }: CalendarProps) => React.JSX.Element;
 export default Calendar;

package/dist/components/calendar/calendar.mjs

@@ -24,7 +24,11 @@ const styles = {
     $$css: true
   }
 };
-const Calendar = props$1 => {
+const Calendar = ({
+  className,
+  style,
+  ...props$1
+}) => {
   const {
     timespan,
     onClick
@@ -45,20 +49,21 @@ const Calendar = props$1 => {
       className: "musae-98rzlu musae-78zum5 musae-l56j7k"
     }
   };
-  return React.createElement("div", null, React.createElement("header", {
+  return React.createElement("div", {
+    className: className,
+    style: style
+  }, React.createElement("header", {
     className: clsx(classNames[CalendarClassToken.Header], styled.header.className),
     style: styled.header.style
   }, React.createElement(Button, {
     variant: "text",
     prefix: React.createElement(KeyboardDoubleArrowLeft, null),
     onClick: toPrevYear,
-    size: "small",
     shape: "circular"
   }), React.createElement(Button, {
     variant: "text",
     prefix: React.createElement(KeyboardArrowLeft, null),
     onClick: toPrevMonth,
-    size: "small",
     shape: "circular"
   }), React.createElement("span", {
     className: clsx(classNames[CalendarClassToken.Heading], styled.heading.className),
@@ -67,13 +72,11 @@ const Calendar = props$1 => {
     variant: "text",
     prefix: React.createElement(KeyboardArrowRight, null),
     onClick: toNextMonth,
-    size: "small",
     shape: "circular"
   }), React.createElement(Button, {
     variant: "text",
     prefix: React.createElement(KeyboardDoubleArrowRight, null),
     onClick: toNextYear,
-    size: "small",
     shape: "circular"
   })), React.createElement("table", null, React.createElement("thead", null, React.createElement("tr", null, headCells)), React.createElement("tbody", null, dateCells)));
 };

package/dist/components/calendar/types.d.ts

@@ -1,10 +1,11 @@
 import type { Dayjs } from "dayjs";
 import type { Partialable } from "@aiszlab/relax/types";
+import { ComponentProps } from "../../types/element";
 /**
  * @description
  * calendar props
  */
-export interface CalendarProps {
+export type CalendarProps = ComponentProps & {
     /**
      * @description
      * value
@@ -20,4 +21,4 @@ export interface CalendarProps {
      * click date handler
      */
     onClick?: (value: Dayjs) => void;
-}
+};

package/dist/components/config/hooks.d.ts

@@ -132,6 +132,15 @@ export declare const useClassNames: <T extends ComponentToken>(token: T) => {
     25: {
         0: string;
         1: string;
+        2: string;
+        3: string;
+        4: string;
+    };
+    26: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
     };
 }[T];
 /**

package/dist/components/date-picker/date-picker.mjs

@@ -1,4 +1,4 @@
-import React, { useRef, useMemo } from 'react';
+import React, { useRef } from 'react';
 import Picker from '../picker/picker.mjs';
 import Calendar from '../calendar/calendar.mjs';
 import { useValue } from './hooks.mjs';
@@ -13,27 +13,30 @@ const DatePicker = props => {
     value
   } = useValue([props.value, props.onChange, ref]);
   const classNames = useClassNames(ComponentToken.DatePicker);
-  /// picked date
-  const picked = useMemo(() => {
-    const styled = {
-      className: "musae-1a2a7pz musae-h8yej3"
-    };
-    return React.createElement("input", {
-      className: clsx(styled.className, classNames[DatePickerClassToken.Input]),
-      style: styled.style,
-      value: value?.format("YYYY-MM-DD") ?? "",
-      readOnly: true
-    });
-  }, [value, classNames]);
+  const styled = {
+    trigger: {
+      className: "musae-1a2a7pz musae-wfgd1y"
+    },
+    calendar: {
+      className: "musae-8kignx"
+    }
+  };
   return React.createElement(Picker, {
     ref: ref,
     className: classNames[DatePickerClassToken.Picker],
     pickable: React.createElement(Calendar, {
+      className: styled.calendar.className,
+      style: styled.calendar.style,
       value: value,
       onClick: onChange
     }),
     popupWidth: false
-  }, picked);
+  }, React.createElement("input", {
+    className: clsx(classNames[DatePickerClassToken.Input], styled.trigger.className),
+    style: styled.trigger.style,
+    value: value?.format("YYYY-MM-DD") ?? "",
+    readOnly: true
+  }));
 };
 var DatePicker$1 = DatePicker;
 

package/dist/components/dialog/dialog.mjs

@@ -1,10 +1,19 @@
 import Portal from '../portal/portal.mjs';
-import React from 'react';
+import React, { useEffect } from 'react';
 import Popup from './popup.mjs';
+import { useBoolean } from '@aiszlab/relax';
 
 const Dialog = ({ open, ...props }) => {
-    return (React.createElement(Portal, { open: open },
-        React.createElement(Popup, { open: open, ...props })));
+    /// `Portal` should disappear after `Dialog` disappear completely
+    const [_isVisible, { turnOn, turnOff }] = useBoolean(false);
+    useEffect(() => {
+        if (open) {
+            turnOn();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    return (React.createElement(Portal, { open: open || _isVisible },
+        React.createElement(Popup, { open: open, onClosed: turnOff, ...props })));
 };
 var Dialog$1 = Dialog;
 

package/dist/components/dialog/popup.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { PopupProps } from "./types";
-declare const Popup: ({ onClose, open, dismissable, ...props }: PopupProps) => React.JSX.Element;
+declare const Popup: ({ onClose, open, dismissable, onClosed, ...props }: PopupProps) => React.JSX.Element;
 export default Popup;

package/dist/components/dialog/popup.mjs

@@ -1,7 +1,7 @@
-import React, { useEffect } from 'react';
+import React, { useRef, useEffect } from 'react';
 import { useFooter } from './hooks.mjs';
 import { useAnimate } from 'framer-motion';
-import { ComponentToken, withDot, DialogClassToken } from '../../utils/class-name.mjs';
+import { ComponentToken, DialogClassToken } from '../../utils/class-name.mjs';
 import { useClassNames } from '../config/hooks.mjs';
 import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useTheme } from '../theme/hooks.mjs';
@@ -17,7 +17,7 @@ const styles = {
     paddingTop: "musae-522f2k",
     $$css: true
   },
-  mask: props => [{
+  overlay: props => [{
     position: "musae-10l6tqk",
     top: "musae-13vifvy",
     left: "musae-u96u03",
@@ -89,16 +89,20 @@ const Popup = ({
   onClose,
   open,
   dismissable = true,
+  onClosed,
   ...props$1
 }) => {
   const classNames = useClassNames(ComponentToken.Dialog);
-  const footer = useFooter([props$1.footer, props$1.onConfirm, onClose]);
   const [scope, animate] = useAnimate();
   const theme = useTheme();
+  const panelRef = useRef(null);
+  const overlayRef = useRef(null);
+  /// children render hooks
+  const footer = useFooter([props$1.footer, props$1.onConfirm, onClose]);
   const {
     closer,
     onKeyDown,
-    onMaskClick
+    onOverlayClick
   } = useDismissable({
     dismissable,
     onClose
@@ -107,19 +111,20 @@ const Popup = ({
     (async () => {
       if (open) {
         scope.current.attributeStyleMap.set("display", "flex");
-        Promise.all([animate(withDot(classNames[DialogClassToken.Panel]), {
+        await Promise.all([panelRef.current && animate(panelRef.current, {
           opacity: 1
-        }), animate(withDot(classNames[DialogClassToken.Mask]), {
+        }), overlayRef.current && animate(overlayRef.current, {
           opacity: 0.8
         })]);
         return;
       }
-      await Promise.all([animate(withDot(classNames[DialogClassToken.Panel]), {
+      await Promise.all([panelRef.current && animate(panelRef.current, {
         opacity: 0
-      }), animate(withDot(classNames[DialogClassToken.Mask]), {
+      }), overlayRef.current && animate(overlayRef.current, {
         opacity: 0
       })]);
       scope.current.attributeStyleMap.set("display", "none");
+      onClosed?.();
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
@@ -134,7 +139,7 @@ const Popup = ({
     popup: {
       className: "musae-ixxii4 musae-13vifvy musae-u96u03 musae-n9wirt musae-1dr59a3 musae-47corl musae-fo81ep musae-78zum5 musae-l56j7k musae-6s0dn4"
     },
-    mask: props(styles.mask({
+    overlay: props(styles.overlay({
       backgroundColor: theme.colors[ColorToken.SurfaceDim]
     })),
     panel: props(styles.panel({
@@ -153,15 +158,17 @@ const Popup = ({
     tabIndex: -1,
     onKeyDown: onKeyDown
   }, React.createElement("div", {
-    className: clsx(classNames[DialogClassToken.Mask], styled.mask.className),
-    style: styled.mask.style,
-    onClick: onMaskClick
+    className: clsx(classNames[DialogClassToken.Overlay], styled.overlay.className),
+    style: styled.overlay.style,
+    onClick: onOverlayClick,
+    ref: overlayRef
   }), React.createElement("div", {
     className: clsx(classNames[DialogClassToken.Panel], styled.panel.className),
     style: {
       ...styled.panel.style,
       ...props$1.styles?.panel
-    }
+    },
+    ref: panelRef
   }, closer, !!props$1.title && React.createElement("div", {
     className: clsx(classNames[DialogClassToken.Header], styled.header.className),
     style: styled.header.style

package/dist/components/dialog/types.d.ts

@@ -27,12 +27,7 @@ export interface DialogProps {
     onConfirm?: VoidFunction;
     /**
      * @description
-     * on close
-     */
-    onClose?: VoidFunction;
-    /**
-     * @description
-     * Whether the modal can be closed by clicking on the mask or pressing the Esc key.
+     * Whether the dialog can be closed by clicking on the overlay or pressing the Esc key.
      */
     dismissable?: boolean | Dismissable[];
     /**
@@ -49,9 +44,24 @@ export interface DialogProps {
         panel?: CSSProperties;
         body?: CSSProperties;
     };
+    /**
+     * @description
+     * close `Dialog` handler
+     *
+     * @template
+     * in `Dialog`, close icon & cancel button will render default
+     * if user click these nodes, this callback will be toggled
+     */
+    onClose?: VoidFunction;
 }
 /**
  * @description
  * popup
  */
-export type PopupProps = DialogProps;
+export type PopupProps = DialogProps & {
+    /**
+     * @description
+     * callback will be toggled after close animation end
+     */
+    onClosed?: () => void;
+};

package/dist/components/drawer/drawer.mjs

@@ -1,10 +1,19 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Portal from '../portal/portal.mjs';
 import Popup from './popup.mjs';
+import { useBoolean } from '@aiszlab/relax';
 
 const Drawer = ({ open, ...props }) => {
-    return (React.createElement(Portal, { open: open },
-        React.createElement(Popup, { open: open, ...props })));
+    /// `Portal` should disappear after `Dialog` disappear completely
+    const [_isVisible, { turnOn, turnOff }] = useBoolean(false);
+    useEffect(() => {
+        if (open) {
+            turnOn();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    return (React.createElement(Portal, { open: open || _isVisible },
+        React.createElement(Popup, { open: open, ...props, onClosed: turnOff })));
 };
 var Drawer$1 = Drawer;
 

package/dist/components/drawer/popup.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { PopupProps } from "./types";
-declare const Popup: ({ open, onClose, placement, dismissable, ...props }: PopupProps) => React.JSX.Element;
+declare const Popup: ({ open, onClose, placement, dismissable, onClosed, ...props }: PopupProps) => React.JSX.Element;
 export default Popup;

package/dist/components/drawer/popup.mjs

@@ -1,7 +1,7 @@
-import React, { useEffect } from 'react';
+import React, { useRef, useEffect } from 'react';
 import { useAnimate } from 'framer-motion';
 import { PLACEMENTS } from './hooks.mjs';
-import { ComponentToken, withDot, DrawerClassToken } from '../../utils/class-name.mjs';
+import { ComponentToken, DrawerClassToken } from '../../utils/class-name.mjs';
 import { useClassNames } from '../config/hooks.mjs';
 import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useTheme } from '../theme/hooks.mjs';
@@ -14,24 +14,30 @@ import { contains } from '../../node_modules/@aiszlab/relax/dist/dom/contains.mj
 const styles = {
   popup: {
     position: "musae-ixxii4",
-    top: "musae-13vifvy",
-    left: "musae-u96u03",
+    inset: "musae-10a8y8t",
+    insetInline: null,
     insetInlineStart: null,
     insetInlineEnd: null,
-    width: "musae-n9wirt",
-    height: "musae-1dr59a3",
+    left: null,
+    right: null,
+    insetBlock: null,
+    top: null,
+    bottom: null,
     pointerEvents: "musae-47corl",
     zIndex: "musae-fo81ep",
     $$css: true
   },
-  mask: props => [{
+  overlay: props => [{
     position: "musae-10l6tqk",
-    top: "musae-13vifvy",
-    left: "musae-u96u03",
+    inset: "musae-10a8y8t",
+    insetInline: null,
     insetInlineStart: null,
     insetInlineEnd: null,
-    width: "musae-n9wirt",
-    height: "musae-1dr59a3",
+    left: null,
+    right: null,
+    insetBlock: null,
+    top: null,
+    bottom: null,
     pointerEvents: "musae-67bb7w",
     zIndex: "musae-fo81ep",
     opacity: "musae-g01cxk",
@@ -60,7 +66,6 @@ const styles = {
     insetInlineEnd: null,
     top: "musae-13vifvy",
     bottom: "musae-1ey2m1c",
-    transform: "musae-umwmo6",
     width: "musae-1l2rt3b",
     $$css: true
   },
@@ -125,16 +130,20 @@ const Popup = ({
   onClose,
   placement = "right",
   dismissable = true,
+  onClosed,
   ...props$1
 }) => {
   const [scope, animate] = useAnimate();
   const classNames = useClassNames(ComponentToken.Drawer);
   const _placement = PLACEMENTS[placement];
   const theme = useTheme();
+  const panelRef = useRef(null);
+  const overlayRef = useRef(null);
+  /// children render hooks
   const {
     closer,
     onKeyDown,
-    onMaskClick
+    onOverlayClick
   } = useDismissable({
     dismissable,
     onClose
@@ -143,19 +152,20 @@ const Popup = ({
     (async () => {
       if (open) {
         scope.current.attributeStyleMap.set("display", "block");
-        Promise.all([animate(withDot(classNames[DrawerClassToken.Panel]), {
+        await Promise.all([panelRef.current && animate(panelRef.current, {
           transform: _placement.at(1)
-        }), animate(withDot(classNames[DrawerClassToken.Mask]), {
+        }), overlayRef.current && animate(overlayRef.current, {
           opacity: 0.8
         })]);
         return;
       }
-      await Promise.all([animate(withDot(classNames[DrawerClassToken.Panel]), {
+      await Promise.all([panelRef.current && animate(panelRef.current, {
         transform: _placement.at(0)
-      }), animate(withDot(classNames[DrawerClassToken.Mask]), {
+      }), overlayRef.current && animate(overlayRef.current, {
         opacity: 0
       })]);
       scope.current.attributeStyleMap.set("display", "none");
+      onClosed?.();
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open, ..._placement]);
@@ -168,9 +178,9 @@ const Popup = ({
   }, [open]);
   const styled = {
     popup: {
-      className: "musae-ixxii4 musae-13vifvy musae-u96u03 musae-n9wirt musae-1dr59a3 musae-47corl musae-fo81ep"
+      className: "musae-ixxii4 musae-10a8y8t musae-47corl musae-fo81ep"
     },
-    mask: props(styles.mask({
+    overlay: props(styles.overlay({
       backgroundColor: theme.colors[ColorToken.SurfaceDim]
     })),
     panel: props(styles.panel({
@@ -189,12 +199,14 @@ const Popup = ({
     style: styled.popup.style,
     onKeyDown: onKeyDown
   }, React.createElement("div", {
-    className: clsx(classNames[DrawerClassToken.Mask], styled.mask.className),
-    onClick: onMaskClick,
-    style: styled.mask.style
+    className: clsx(classNames[DrawerClassToken.Overlay], styled.overlay.className),
+    onClick: onOverlayClick,
+    style: styled.overlay.style,
+    ref: overlayRef
   }), React.createElement("div", {
     className: clsx(classNames[DrawerClassToken.Panel], styled.panel.className),
-    style: styled.panel.style
+    style: styled.panel.style,
+    ref: panelRef
   }, closer, React.createElement("div", {
     className: clsx(classNames[DrawerClassToken.Header], styled.header.className),
     style: styled.header.style

package/dist/components/drawer/types.d.ts

@@ -33,7 +33,7 @@ export interface DrawerProps {
     placement?: Placement;
     /**
      * @description
-     * Whether the modal can be closed by clicking on the mask or pressing the Esc key.
+     * Whether the drawer can be closed by clicking on the overlay or pressing the Esc key.
      */
     dismissable?: boolean | Dismissable[];
 }
@@ -41,5 +41,10 @@ export interface DrawerProps {
  * @description
  * popup
  */
-export interface PopupProps extends DrawerProps {
-}
+export type PopupProps = DrawerProps & {
+    /**
+     * @description
+     * callback will be toggled after close animation end
+     */
+    onClosed?: () => void;
+};

package/dist/components/icon/icon.mjs

@@ -8,7 +8,7 @@ import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 const styles = {
   icon: props => [{
     display: "musae-3nfvp2",
-    verticalAlign: "musae-1uuroth",
+    verticalAlign: "musae-xymvpz",
     color: "musae-19dipnz",
     $$css: true
   }, {

package/dist/components/icon/icons/index.d.ts

@@ -10,5 +10,7 @@ export * from "./navigation";
 export * as navigation from "./navigation";
 export * from "./image";
 export * as image from "./image";
+export * from "./toggle";
+export * as toggle from "./toggle";
 export * from "./mock";
 export * as mock from "./mock";

package/dist/components/icon/icons/index.mjs

@@ -10,8 +10,10 @@ import * as index$4 from './navigation/index.mjs';
 export { index$4 as navigation };
 import * as index$5 from './image/index.mjs';
 export { index$5 as image };
-import * as index$6 from './mock/index.mjs';
-export { index$6 as mock };
+import * as index$6 from './toggle/index.mjs';
+export { index$6 as toggle };
+import * as index$7 from './mock/index.mjs';
+export { index$7 as mock };
 export { default as Visibility } from './action/visibility.mjs';
 export { default as VisibilityOff } from './action/visibility-off.mjs';
 export { default as CheckCircleOutline } from './action/check-circle-outline.mjs';
@@ -38,4 +40,7 @@ export { default as Bedtime } from './image/bedtime.mjs';
 export { default as RotateLeft } from './image/rotate-left.mjs';
 export { default as RotateRight } from './image/rotate-right.mjs';
 export { default as WbSunny } from './image/wb-sunny.mjs';
+export { default as Star } from './toggle/star.mjs';
+export { default as StarHalf } from './toggle/star-half.mjs';
+export { default as StarOutline } from './toggle/star-outline.mjs';
 export { default as Github } from './mock/github.mjs';

package/dist/components/icon/icons/toggle/index.d.ts

@@ -0,0 +1,4 @@
+import Star from "./star";
+import StarHalf from "./star-half";
+import StarOutline from "./star-outline";
+export { Star, StarHalf, StarOutline };

package/dist/components/icon/icons/toggle/index.mjs

@@ -0,0 +1,3 @@
+export { default as Star } from './star.mjs';
+export { default as StarHalf } from './star-half.mjs';
+export { default as StarOutline } from './star-outline.mjs';

package/dist/components/icon/icons/toggle/star-half.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const StarHalf: (props: Omit<import("../..").IconProps, "as">) => React.FunctionComponentElement<import("../..").IconProps>;
+export default StarHalf;

package/dist/components/icon/icons/toggle/star-half.mjs

@@ -0,0 +1,10 @@
+import React from 'react';
+import { withIcon } from '../../hoc.mjs';
+
+const StarHalf = withIcon(({ size }) => {
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none" },
+        React.createElement("path", { d: "M22 9.74L14.81 9.12L12 2.5L9.19 9.13L2 9.74L7.46 14.47L5.82 21.5L12 17.77L18.18 21.5L16.55 14.47L22 9.74ZM12 15.9V6.6L13.71 10.64L18.09 11.02L14.77 13.9L15.77 18.18L12 15.9Z", fill: "currentColor" })));
+});
+var StarHalf$1 = StarHalf;
+
+export { StarHalf$1 as default };

package/dist/components/icon/icons/toggle/star-outline.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const StarOutline: (props: Omit<import("../..").IconProps, "as">) => React.FunctionComponentElement<import("../..").IconProps>;
+export default StarOutline;

package/dist/components/icon/icons/toggle/star-outline.mjs

@@ -0,0 +1,10 @@
+import React from 'react';
+import { withIcon } from '../../hoc.mjs';
+
+const StarOutline = withIcon(({ size }) => {
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none" },
+        React.createElement("path", { d: "M22 9.74L14.81 9.12L12 2.5L9.19 9.13L2 9.74L7.46 14.47L5.82 21.5L12 17.77L18.18 21.5L16.55 14.47L22 9.74ZM12 15.9L8.24 18.17L9.24 13.89L5.92 11.01L10.3 10.63L12 6.6L13.71 10.64L18.09 11.02L14.77 13.9L15.77 18.18L12 15.9Z", fill: "currentColor" })));
+});
+var StarOutline$1 = StarOutline;
+
+export { StarOutline$1 as default };

package/dist/components/icon/icons/toggle/star.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Star: (props: Omit<import("../..").IconProps, "as">) => React.FunctionComponentElement<import("../..").IconProps>;
+export default Star;