@yamada-ui/alert 1.0.28 → 2.0.0-next-20240605095641

package/dist/alert.js

@@ -65,11 +65,6 @@ var Alert = (0, import_core.forwardRef)(
     });
     const { className, children, ...rest } = (0, import_core.omitThemeProps)(mergedProps);
     const css = {
-      w: "100%",
-      display: "flex",
-      alignItems: "center",
-      position: "relative",
-      overflow: "hidden",
       ...styles.container
     };
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertProvider, { value: { status, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -120,7 +115,6 @@ var AlertTitle = (0, import_core.forwardRef)(
   ({ className, ...rest }, ref) => {
     const { styles } = useAlert();
     const css = {
-      display: "block",
       ...styles.title
     };
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/alert.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/alert.tsx"],"sourcesContent":["import type {\n  HTMLUIProps,\n  ThemeProps,\n  CSSUIObject,\n  AlertStatuses,\n} from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n  useTheme,\n} from \"@yamada-ui/core\"\nimport { InfoIcon, WarningIcon, CheckIcon } from \"@yamada-ui/icon\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading } from \"@yamada-ui/loading\"\nimport { createContext, cx } from \"@yamada-ui/utils\"\nimport type { FC } from \"react\"\n\nconst defaultStatuses = {\n  info: { icon: InfoIcon, colorScheme: \"info\" },\n  success: { icon: CheckIcon, colorScheme: \"success\" },\n  warning: { icon: WarningIcon, colorScheme: \"warning\" },\n  error: { icon: WarningIcon, colorScheme: \"danger\" },\n  loading: { icon: Loading, colorScheme: \"primary\" },\n} as const\n\nexport type Status = keyof typeof defaultStatuses\n\ntype AlertContext = {\n  status: Status\n  styles: Record<string, CSSUIObject>\n}\n\nconst [AlertProvider, useAlert] = createContext<AlertContext>({\n  name: `AlertStylesContext`,\n  errorMessage: `useAlert returned is 'undefined'. Seems you forgot to wrap the components in \"<Alert />\" `,\n})\n\nexport const getStatusColorScheme = (\n  status: Status,\n  statuses?: AlertStatuses,\n) => statuses?.[status]?.colorScheme ?? defaultStatuses[status].colorScheme\n\nexport const getStatusIcon = (status: Status, statuses?: AlertStatuses) =>\n  statuses?.[status]?.icon ?? defaultStatuses[status].icon\n\ntype AlertOptions = {\n  /**\n   * The status of the alert.\n   *\n   * @default 'info'\n   */\n  status?: Status\n}\n\nexport type AlertProps = HTMLUIProps<\"div\"> & ThemeProps<\"Alert\"> & AlertOptions\n\n/**\n * `Alert` is a component that conveys information to the user.\n *\n * @see Docs https://yamada-ui.com/components/feedback/alert\n */\nexport const Alert = forwardRef<AlertProps, \"div\">(\n  ({ status = \"info\", colorScheme, ...props }, ref) => {\n    const { theme } = useTheme()\n    const statuses = theme.__config?.alert?.statuses ?? {}\n\n    colorScheme ??= getStatusColorScheme(status, statuses)\n\n    const [styles, mergedProps] = useMultiComponentStyle(\"Alert\", {\n      ...props,\n      colorScheme,\n    })\n    const { className, children, ...rest } = omitThemeProps(mergedProps)\n\n    const css: CSSUIObject = {\n      w: \"100%\",\n      display: \"flex\",\n      alignItems: \"center\",\n      position: \"relative\",\n      overflow: \"hidden\",\n      ...styles.container,\n    }\n\n    return (\n      <AlertProvider value={{ status, styles }}>\n        <ui.div\n          ref={ref}\n          className={cx(\"ui-alert\", className)}\n          role=\"alert\"\n          __css={css}\n          {...rest}\n        >\n          {children}\n        </ui.div>\n      </AlertProvider>\n    )\n  },\n)\n\nexport type AlertIconProps = HTMLUIProps<\"span\"> & {\n  variant?: LoadingProps[\"variant\"]\n}\n\nexport const AlertIcon: FC<AlertIconProps> = ({\n  className,\n  children,\n  variant = \"oval\",\n  ...rest\n}) => {\n  const { status, styles } = useAlert()\n  const { theme } = useTheme()\n  const statuses = theme.__config?.alert?.statuses ?? {}\n\n  const Icon = getStatusIcon(status, statuses)\n  const css: CSSUIObject = {\n    ...styles.icon,\n    ...(status === \"loading\" ? styles.loading : {}),\n  }\n\n  return (\n    <ui.span\n      display=\"inherit\"\n      className={cx(\"ui-alert__icon\", className)}\n      __css={css}\n      {...rest}\n    >\n      {children || (\n        <Icon\n          {...(status === \"loading\"\n            ? { variant, color: \"currentcolor\" }\n            : { boxSize: \"100%\" })}\n        />\n      )}\n    </ui.span>\n  )\n}\n\nexport type AlertTitleProps = HTMLUIProps<\"p\">\n\nexport const AlertTitle = forwardRef<AlertTitleProps, \"p\">(\n  ({ className, ...rest }, ref) => {\n    const { styles } = useAlert()\n\n    const css: CSSUIObject = {\n      display: \"block\",\n      ...styles.title,\n    }\n\n    return (\n      <ui.p\n        ref={ref}\n        className={cx(\"ui-alert__title\", className)}\n        __css={css}\n        {...rest}\n      />\n    )\n  },\n)\n\nexport type AlertDescriptionProps = HTMLUIProps<\"span\">\n\nexport const AlertDescription = forwardRef<AlertDescriptionProps, \"span\">(\n  ({ className, ...rest }, ref) => {\n    const { styles } = useAlert()\n\n    const css: CSSUIObject = {\n      ...styles.description,\n    }\n\n    return (\n      <ui.span\n        ref={ref}\n        className={cx(\"ui-alert__desc\", className)}\n        __css={css}\n        {...rest}\n      />\n    )\n  },\n)\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/alert.tsx"],"sourcesContent":["import type {\n  HTMLUIProps,\n  ThemeProps,\n  CSSUIObject,\n  AlertStatuses,\n} from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n  useTheme,\n} from \"@yamada-ui/core\"\nimport { InfoIcon, WarningIcon, CheckIcon } from \"@yamada-ui/icon\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading } from \"@yamada-ui/loading\"\nimport { createContext, cx } from \"@yamada-ui/utils\"\nimport type { FC } from \"react\"\n\nconst defaultStatuses = {\n  info: { icon: InfoIcon, colorScheme: \"info\" },\n  success: { icon: CheckIcon, colorScheme: \"success\" },\n  warning: { icon: WarningIcon, colorScheme: \"warning\" },\n  error: { icon: WarningIcon, colorScheme: \"danger\" },\n  loading: { icon: Loading, colorScheme: \"primary\" },\n} as const\n\nexport type Status = keyof typeof defaultStatuses\n\ntype AlertContext = {\n  status: Status\n  styles: Record<string, CSSUIObject>\n}\n\nconst [AlertProvider, useAlert] = createContext<AlertContext>({\n  name: `AlertStylesContext`,\n  errorMessage: `useAlert returned is 'undefined'. Seems you forgot to wrap the components in \"<Alert />\" `,\n})\n\nexport const getStatusColorScheme = (\n  status: Status,\n  statuses?: AlertStatuses,\n) => statuses?.[status]?.colorScheme ?? defaultStatuses[status].colorScheme\n\nexport const getStatusIcon = (status: Status, statuses?: AlertStatuses) =>\n  statuses?.[status]?.icon ?? defaultStatuses[status].icon\n\ntype AlertOptions = {\n  /**\n   * The status of the alert.\n   *\n   * @default 'info'\n   */\n  status?: Status\n}\n\nexport type AlertProps = HTMLUIProps<\"div\"> & ThemeProps<\"Alert\"> & AlertOptions\n\n/**\n * `Alert` is a component that conveys information to the user.\n *\n * @see Docs https://yamada-ui.com/components/feedback/alert\n */\nexport const Alert = forwardRef<AlertProps, \"div\">(\n  ({ status = \"info\", colorScheme, ...props }, ref) => {\n    const { theme } = useTheme()\n    const statuses = theme.__config?.alert?.statuses ?? {}\n\n    colorScheme ??= getStatusColorScheme(status, statuses)\n\n    const [styles, mergedProps] = useMultiComponentStyle(\"Alert\", {\n      ...props,\n      colorScheme,\n    })\n    const { className, children, ...rest } = omitThemeProps(mergedProps)\n\n    const css: CSSUIObject = {\n      ...styles.container,\n    }\n\n    return (\n      <AlertProvider value={{ status, styles }}>\n        <ui.div\n          ref={ref}\n          className={cx(\"ui-alert\", className)}\n          role=\"alert\"\n          __css={css}\n          {...rest}\n        >\n          {children}\n        </ui.div>\n      </AlertProvider>\n    )\n  },\n)\n\nexport type AlertIconProps = HTMLUIProps<\"span\"> & {\n  variant?: LoadingProps[\"variant\"]\n}\n\nexport const AlertIcon: FC<AlertIconProps> = ({\n  className,\n  children,\n  variant = \"oval\",\n  ...rest\n}) => {\n  const { status, styles } = useAlert()\n  const { theme } = useTheme()\n  const statuses = theme.__config?.alert?.statuses ?? {}\n\n  const Icon = getStatusIcon(status, statuses)\n  const css: CSSUIObject = {\n    ...styles.icon,\n    ...(status === \"loading\" ? styles.loading : {}),\n  }\n\n  return (\n    <ui.span\n      display=\"inherit\"\n      className={cx(\"ui-alert__icon\", className)}\n      __css={css}\n      {...rest}\n    >\n      {children || (\n        <Icon\n          {...(status === \"loading\"\n            ? { variant, color: \"currentcolor\" }\n            : { boxSize: \"100%\" })}\n        />\n      )}\n    </ui.span>\n  )\n}\n\nexport type AlertTitleProps = HTMLUIProps<\"p\">\n\nexport const AlertTitle = forwardRef<AlertTitleProps, \"p\">(\n  ({ className, ...rest }, ref) => {\n    const { styles } = useAlert()\n\n    const css: CSSUIObject = {\n      ...styles.title,\n    }\n\n    return (\n      <ui.p\n        ref={ref}\n        className={cx(\"ui-alert__title\", className)}\n        __css={css}\n        {...rest}\n      />\n    )\n  },\n)\n\nexport type AlertDescriptionProps = HTMLUIProps<\"span\">\n\nexport const AlertDescription = forwardRef<AlertDescriptionProps, \"span\">(\n  ({ className, ...rest }, ref) => {\n    const { styles } = useAlert()\n\n    const css: CSSUIObject = {\n      ...styles.description,\n    }\n\n    return (\n      <ui.span\n        ref={ref}\n        className={cx(\"ui-alert__desc\", className)}\n        __css={css}\n        {...rest}\n      />\n    )\n  },\n)\n"],"mappings":"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","names":[]}

package/dist/alert.mjs

@@ -6,7 +6,7 @@ import {
   AlertTitle,
   getStatusColorScheme,
   getStatusIcon
-} from "./chunk-5JHXAL6A.mjs";
+} from "./chunk-6PL6ZUOG.mjs";
 export {
   Alert,
   AlertDescription,

package/dist/{chunk-5JHXAL6A.mjs → chunk-6PL6ZUOG.mjs}

@@ -43,11 +43,6 @@ var Alert = forwardRef(
     });
     const { className, children, ...rest } = omitThemeProps(mergedProps);
     const css = {
-      w: "100%",
-      display: "flex",
-      alignItems: "center",
-      position: "relative",
-      overflow: "hidden",
       ...styles.container
     };
     return /* @__PURE__ */ jsx(AlertProvider, { value: { status, styles }, children: /* @__PURE__ */ jsx(
@@ -98,7 +93,6 @@ var AlertTitle = forwardRef(
   ({ className, ...rest }, ref) => {
     const { styles } = useAlert();
     const css = {
-      display: "block",
       ...styles.title
     };
     return /* @__PURE__ */ jsx(
@@ -138,4 +132,4 @@ export {
   AlertTitle,
   AlertDescription
 };
-//# sourceMappingURL=chunk-5JHXAL6A.mjs.map
+//# sourceMappingURL=chunk-6PL6ZUOG.mjs.map

package/dist/chunk-6PL6ZUOG.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/alert.tsx"],"sourcesContent":["import type {\n  HTMLUIProps,\n  ThemeProps,\n  CSSUIObject,\n  AlertStatuses,\n} from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n  useTheme,\n} from \"@yamada-ui/core\"\nimport { InfoIcon, WarningIcon, CheckIcon } from \"@yamada-ui/icon\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading } from \"@yamada-ui/loading\"\nimport { createContext, cx } from \"@yamada-ui/utils\"\nimport type { FC } from \"react\"\n\nconst defaultStatuses = {\n  info: { icon: InfoIcon, colorScheme: \"info\" },\n  success: { icon: CheckIcon, colorScheme: \"success\" },\n  warning: { icon: WarningIcon, colorScheme: \"warning\" },\n  error: { icon: WarningIcon, colorScheme: \"danger\" },\n  loading: { icon: Loading, colorScheme: \"primary\" },\n} as const\n\nexport type Status = keyof typeof defaultStatuses\n\ntype AlertContext = {\n  status: Status\n  styles: Record<string, CSSUIObject>\n}\n\nconst [AlertProvider, useAlert] = createContext<AlertContext>({\n  name: `AlertStylesContext`,\n  errorMessage: `useAlert returned is 'undefined'. Seems you forgot to wrap the components in \"<Alert />\" `,\n})\n\nexport const getStatusColorScheme = (\n  status: Status,\n  statuses?: AlertStatuses,\n) => statuses?.[status]?.colorScheme ?? defaultStatuses[status].colorScheme\n\nexport const getStatusIcon = (status: Status, statuses?: AlertStatuses) =>\n  statuses?.[status]?.icon ?? defaultStatuses[status].icon\n\ntype AlertOptions = {\n  /**\n   * The status of the alert.\n   *\n   * @default 'info'\n   */\n  status?: Status\n}\n\nexport type AlertProps = HTMLUIProps<\"div\"> & ThemeProps<\"Alert\"> & AlertOptions\n\n/**\n * `Alert` is a component that conveys information to the user.\n *\n * @see Docs https://yamada-ui.com/components/feedback/alert\n */\nexport const Alert = forwardRef<AlertProps, \"div\">(\n  ({ status = \"info\", colorScheme, ...props }, ref) => {\n    const { theme } = useTheme()\n    const statuses = theme.__config?.alert?.statuses ?? {}\n\n    colorScheme ??= getStatusColorScheme(status, statuses)\n\n    const [styles, mergedProps] = useMultiComponentStyle(\"Alert\", {\n      ...props,\n      colorScheme,\n    })\n    const { className, children, ...rest } = omitThemeProps(mergedProps)\n\n    const css: CSSUIObject = {\n      ...styles.container,\n    }\n\n    return (\n      <AlertProvider value={{ status, styles }}>\n        <ui.div\n          ref={ref}\n          className={cx(\"ui-alert\", className)}\n          role=\"alert\"\n          __css={css}\n          {...rest}\n        >\n          {children}\n        </ui.div>\n      </AlertProvider>\n    )\n  },\n)\n\nexport type AlertIconProps = HTMLUIProps<\"span\"> & {\n  variant?: LoadingProps[\"variant\"]\n}\n\nexport const AlertIcon: FC<AlertIconProps> = ({\n  className,\n  children,\n  variant = \"oval\",\n  ...rest\n}) => {\n  const { status, styles } = useAlert()\n  const { theme } = useTheme()\n  const statuses = theme.__config?.alert?.statuses ?? {}\n\n  const Icon = getStatusIcon(status, statuses)\n  const css: CSSUIObject = {\n    ...styles.icon,\n    ...(status === \"loading\" ? styles.loading : {}),\n  }\n\n  return (\n    <ui.span\n      display=\"inherit\"\n      className={cx(\"ui-alert__icon\", className)}\n      __css={css}\n      {...rest}\n    >\n      {children || (\n        <Icon\n          {...(status === \"loading\"\n            ? { variant, color: \"currentcolor\" }\n            : { boxSize: \"100%\" })}\n        />\n      )}\n    </ui.span>\n  )\n}\n\nexport type AlertTitleProps = HTMLUIProps<\"p\">\n\nexport const AlertTitle = forwardRef<AlertTitleProps, \"p\">(\n  ({ className, ...rest }, ref) => {\n    const { styles } = useAlert()\n\n    const css: CSSUIObject = {\n      ...styles.title,\n    }\n\n    return (\n      <ui.p\n        ref={ref}\n        className={cx(\"ui-alert__title\", className)}\n        __css={css}\n        {...rest}\n      />\n    )\n  },\n)\n\nexport type AlertDescriptionProps = HTMLUIProps<\"span\">\n\nexport const AlertDescription = forwardRef<AlertDescriptionProps, \"span\">(\n  ({ className, ...rest }, ref) => {\n    const { styles } = useAlert()\n\n    const css: CSSUIObject = {\n      ...styles.description,\n    }\n\n    return (\n      <ui.span\n        ref={ref}\n        className={cx(\"ui-alert__desc\", className)}\n        __css={css}\n        {...rest}\n      />\n    )\n  },\n)\n"],"mappings":"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","names":[]}

package/dist/index.js

@@ -65,11 +65,6 @@ var Alert = (0, import_core.forwardRef)(
     });
     const { className, children, ...rest } = (0, import_core.omitThemeProps)(mergedProps);
     const css = {
-      w: "100%",
-      display: "flex",
-      alignItems: "center",
-      position: "relative",
-      overflow: "hidden",
       ...styles.container
     };
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertProvider, { value: { status, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -120,7 +115,6 @@ var AlertTitle = (0, import_core.forwardRef)(
   ({ className, ...rest }, ref) => {
     const { styles } = useAlert();
     const css = {
-      display: "block",
       ...styles.title
     };
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/alert.tsx"],"sourcesContent":["export { Alert, AlertIcon, AlertTitle, AlertDescription } from \"./alert\"\nexport type {\n  AlertProps,\n  AlertIconProps,\n  AlertTitleProps,\n  AlertDescriptionProps,\n} from \"./alert\"\n","import type {\n  HTMLUIProps,\n  ThemeProps,\n  CSSUIObject,\n  AlertStatuses,\n} from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n  useTheme,\n} from \"@yamada-ui/core\"\nimport { InfoIcon, WarningIcon, CheckIcon } from \"@yamada-ui/icon\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading } from \"@yamada-ui/loading\"\nimport { createContext, cx } from \"@yamada-ui/utils\"\nimport type { FC } from \"react\"\n\nconst defaultStatuses = {\n  info: { icon: InfoIcon, colorScheme: \"info\" },\n  success: { icon: CheckIcon, colorScheme: \"success\" },\n  warning: { icon: WarningIcon, colorScheme: \"warning\" },\n  error: { icon: WarningIcon, colorScheme: \"danger\" },\n  loading: { icon: Loading, colorScheme: \"primary\" },\n} as const\n\nexport type Status = keyof typeof defaultStatuses\n\ntype AlertContext = {\n  status: Status\n  styles: Record<string, CSSUIObject>\n}\n\nconst [AlertProvider, useAlert] = createContext<AlertContext>({\n  name: `AlertStylesContext`,\n  errorMessage: `useAlert returned is 'undefined'. Seems you forgot to wrap the components in \"<Alert />\" `,\n})\n\nexport const getStatusColorScheme = (\n  status: Status,\n  statuses?: AlertStatuses,\n) => statuses?.[status]?.colorScheme ?? defaultStatuses[status].colorScheme\n\nexport const getStatusIcon = (status: Status, statuses?: AlertStatuses) =>\n  statuses?.[status]?.icon ?? defaultStatuses[status].icon\n\ntype AlertOptions = {\n  /**\n   * The status of the alert.\n   *\n   * @default 'info'\n   */\n  status?: Status\n}\n\nexport type AlertProps = HTMLUIProps<\"div\"> & ThemeProps<\"Alert\"> & AlertOptions\n\n/**\n * `Alert` is a component that conveys information to the user.\n *\n * @see Docs https://yamada-ui.com/components/feedback/alert\n */\nexport const Alert = forwardRef<AlertProps, \"div\">(\n  ({ status = \"info\", colorScheme, ...props }, ref) => {\n    const { theme } = useTheme()\n    const statuses = theme.__config?.alert?.statuses ?? {}\n\n    colorScheme ??= getStatusColorScheme(status, statuses)\n\n    const [styles, mergedProps] = useMultiComponentStyle(\"Alert\", {\n      ...props,\n      colorScheme,\n    })\n    const { className, children, ...rest } = omitThemeProps(mergedProps)\n\n    const css: CSSUIObject = {\n      w: \"100%\",\n      display: \"flex\",\n      alignItems: \"center\",\n      position: \"relative\",\n      overflow: \"hidden\",\n      ...styles.container,\n    }\n\n    return (\n      <AlertProvider value={{ status, styles }}>\n        <ui.div\n          ref={ref}\n          className={cx(\"ui-alert\", className)}\n          role=\"alert\"\n          __css={css}\n          {...rest}\n        >\n          {children}\n        </ui.div>\n      </AlertProvider>\n    )\n  },\n)\n\nexport type AlertIconProps = HTMLUIProps<\"span\"> & {\n  variant?: LoadingProps[\"variant\"]\n}\n\nexport const AlertIcon: FC<AlertIconProps> = ({\n  className,\n  children,\n  variant = \"oval\",\n  ...rest\n}) => {\n  const { status, styles } = useAlert()\n  const { theme } = useTheme()\n  const statuses = theme.__config?.alert?.statuses ?? {}\n\n  const Icon = getStatusIcon(status, statuses)\n  const css: CSSUIObject = {\n    ...styles.icon,\n    ...(status === \"loading\" ? styles.loading : {}),\n  }\n\n  return (\n    <ui.span\n      display=\"inherit\"\n      className={cx(\"ui-alert__icon\", className)}\n      __css={css}\n      {...rest}\n    >\n      {children || (\n        <Icon\n          {...(status === \"loading\"\n            ? { variant, color: \"currentcolor\" }\n            : { boxSize: \"100%\" })}\n        />\n      )}\n    </ui.span>\n  )\n}\n\nexport type AlertTitleProps = HTMLUIProps<\"p\">\n\nexport const AlertTitle = forwardRef<AlertTitleProps, \"p\">(\n  ({ className, ...rest }, ref) => {\n    const { styles } = useAlert()\n\n    const css: CSSUIObject = {\n      display: \"block\",\n      ...styles.title,\n    }\n\n    return (\n      <ui.p\n        ref={ref}\n        className={cx(\"ui-alert__title\", className)}\n        __css={css}\n        {...rest}\n      />\n    )\n  },\n)\n\nexport type AlertDescriptionProps = HTMLUIProps<\"span\">\n\nexport const AlertDescription = forwardRef<AlertDescriptionProps, \"span\">(\n  ({ className, ...rest }, ref) => {\n    const { styles } = useAlert()\n\n    const css: CSSUIObject = {\n      ...styles.description,\n    }\n\n    return (\n      <ui.span\n        ref={ref}\n        className={cx(\"ui-alert__desc\", className)}\n        __css={css}\n        {...rest}\n      />\n    )\n  },\n)\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/alert.tsx"],"sourcesContent":["export { Alert, AlertIcon, AlertTitle, AlertDescription } from \"./alert\"\nexport type {\n  AlertProps,\n  AlertIconProps,\n  AlertTitleProps,\n  AlertDescriptionProps,\n} from \"./alert\"\n","import type {\n  HTMLUIProps,\n  ThemeProps,\n  CSSUIObject,\n  AlertStatuses,\n} from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n  useTheme,\n} from \"@yamada-ui/core\"\nimport { InfoIcon, WarningIcon, CheckIcon } from \"@yamada-ui/icon\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading } from \"@yamada-ui/loading\"\nimport { createContext, cx } from \"@yamada-ui/utils\"\nimport type { FC } from \"react\"\n\nconst defaultStatuses = {\n  info: { icon: InfoIcon, colorScheme: \"info\" },\n  success: { icon: CheckIcon, colorScheme: \"success\" },\n  warning: { icon: WarningIcon, colorScheme: \"warning\" },\n  error: { icon: WarningIcon, colorScheme: \"danger\" },\n  loading: { icon: Loading, colorScheme: \"primary\" },\n} as const\n\nexport type Status = keyof typeof defaultStatuses\n\ntype AlertContext = {\n  status: Status\n  styles: Record<string, CSSUIObject>\n}\n\nconst [AlertProvider, useAlert] = createContext<AlertContext>({\n  name: `AlertStylesContext`,\n  errorMessage: `useAlert returned is 'undefined'. Seems you forgot to wrap the components in \"<Alert />\" `,\n})\n\nexport const getStatusColorScheme = (\n  status: Status,\n  statuses?: AlertStatuses,\n) => statuses?.[status]?.colorScheme ?? defaultStatuses[status].colorScheme\n\nexport const getStatusIcon = (status: Status, statuses?: AlertStatuses) =>\n  statuses?.[status]?.icon ?? defaultStatuses[status].icon\n\ntype AlertOptions = {\n  /**\n   * The status of the alert.\n   *\n   * @default 'info'\n   */\n  status?: Status\n}\n\nexport type AlertProps = HTMLUIProps<\"div\"> & ThemeProps<\"Alert\"> & AlertOptions\n\n/**\n * `Alert` is a component that conveys information to the user.\n *\n * @see Docs https://yamada-ui.com/components/feedback/alert\n */\nexport const Alert = forwardRef<AlertProps, \"div\">(\n  ({ status = \"info\", colorScheme, ...props }, ref) => {\n    const { theme } = useTheme()\n    const statuses = theme.__config?.alert?.statuses ?? {}\n\n    colorScheme ??= getStatusColorScheme(status, statuses)\n\n    const [styles, mergedProps] = useMultiComponentStyle(\"Alert\", {\n      ...props,\n      colorScheme,\n    })\n    const { className, children, ...rest } = omitThemeProps(mergedProps)\n\n    const css: CSSUIObject = {\n      ...styles.container,\n    }\n\n    return (\n      <AlertProvider value={{ status, styles }}>\n        <ui.div\n          ref={ref}\n          className={cx(\"ui-alert\", className)}\n          role=\"alert\"\n          __css={css}\n          {...rest}\n        >\n          {children}\n        </ui.div>\n      </AlertProvider>\n    )\n  },\n)\n\nexport type AlertIconProps = HTMLUIProps<\"span\"> & {\n  variant?: LoadingProps[\"variant\"]\n}\n\nexport const AlertIcon: FC<AlertIconProps> = ({\n  className,\n  children,\n  variant = \"oval\",\n  ...rest\n}) => {\n  const { status, styles } = useAlert()\n  const { theme } = useTheme()\n  const statuses = theme.__config?.alert?.statuses ?? {}\n\n  const Icon = getStatusIcon(status, statuses)\n  const css: CSSUIObject = {\n    ...styles.icon,\n    ...(status === \"loading\" ? styles.loading : {}),\n  }\n\n  return (\n    <ui.span\n      display=\"inherit\"\n      className={cx(\"ui-alert__icon\", className)}\n      __css={css}\n      {...rest}\n    >\n      {children || (\n        <Icon\n          {...(status === \"loading\"\n            ? { variant, color: \"currentcolor\" }\n            : { boxSize: \"100%\" })}\n        />\n      )}\n    </ui.span>\n  )\n}\n\nexport type AlertTitleProps = HTMLUIProps<\"p\">\n\nexport const AlertTitle = forwardRef<AlertTitleProps, \"p\">(\n  ({ className, ...rest }, ref) => {\n    const { styles } = useAlert()\n\n    const css: CSSUIObject = {\n      ...styles.title,\n    }\n\n    return (\n      <ui.p\n        ref={ref}\n        className={cx(\"ui-alert__title\", className)}\n        __css={css}\n        {...rest}\n      />\n    )\n  },\n)\n\nexport type AlertDescriptionProps = HTMLUIProps<\"span\">\n\nexport const AlertDescription = forwardRef<AlertDescriptionProps, \"span\">(\n  ({ className, ...rest }, ref) => {\n    const { styles } = useAlert()\n\n    const css: CSSUIObject = {\n      ...styles.description,\n    }\n\n    return (\n      <ui.span\n        ref={ref}\n        className={cx(\"ui-alert__desc\", className)}\n        __css={css}\n        {...rest}\n      />\n    )\n  },\n)\n"],"mappings":"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","names":[]}

package/dist/index.mjs

@@ -4,7 +4,7 @@ import {
   AlertDescription,
   AlertIcon,
   AlertTitle
-} from "./chunk-5JHXAL6A.mjs";
+} from "./chunk-6PL6ZUOG.mjs";
 export {
   Alert,
   AlertDescription,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/alert",
-  "version": "1.0.28",
+  "version": "2.0.0-next-20240605095641",
   "description": "Yamada UI alert component",
   "keywords": [
     "yamada",
@@ -36,10 +36,10 @@
     "url": "https://github.com/yamada-ui/yamada-ui/issues"
   },
   "dependencies": {
-    "@yamada-ui/core": "1.7.1",
-    "@yamada-ui/utils": "1.2.1",
-    "@yamada-ui/icon": "1.0.27",
-    "@yamada-ui/loading": "1.1.4"
+    "@yamada-ui/core": "1.7.1-next-20240605095641",
+    "@yamada-ui/utils": "1.2.1-next-20240605095641",
+    "@yamada-ui/icon": "1.0.27-next-20240605095641",
+    "@yamada-ui/loading": "1.1.4-next-20240605095641"
   },
   "devDependencies": {
     "react": "^18.0.0",

package/dist/chunk-5JHXAL6A.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/alert.tsx"],"sourcesContent":["import type {\n  HTMLUIProps,\n  ThemeProps,\n  CSSUIObject,\n  AlertStatuses,\n} from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n  useTheme,\n} from \"@yamada-ui/core\"\nimport { InfoIcon, WarningIcon, CheckIcon } from \"@yamada-ui/icon\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading } from \"@yamada-ui/loading\"\nimport { createContext, cx } from \"@yamada-ui/utils\"\nimport type { FC } from \"react\"\n\nconst defaultStatuses = {\n  info: { icon: InfoIcon, colorScheme: \"info\" },\n  success: { icon: CheckIcon, colorScheme: \"success\" },\n  warning: { icon: WarningIcon, colorScheme: \"warning\" },\n  error: { icon: WarningIcon, colorScheme: \"danger\" },\n  loading: { icon: Loading, colorScheme: \"primary\" },\n} as const\n\nexport type Status = keyof typeof defaultStatuses\n\ntype AlertContext = {\n  status: Status\n  styles: Record<string, CSSUIObject>\n}\n\nconst [AlertProvider, useAlert] = createContext<AlertContext>({\n  name: `AlertStylesContext`,\n  errorMessage: `useAlert returned is 'undefined'. Seems you forgot to wrap the components in \"<Alert />\" `,\n})\n\nexport const getStatusColorScheme = (\n  status: Status,\n  statuses?: AlertStatuses,\n) => statuses?.[status]?.colorScheme ?? defaultStatuses[status].colorScheme\n\nexport const getStatusIcon = (status: Status, statuses?: AlertStatuses) =>\n  statuses?.[status]?.icon ?? defaultStatuses[status].icon\n\ntype AlertOptions = {\n  /**\n   * The status of the alert.\n   *\n   * @default 'info'\n   */\n  status?: Status\n}\n\nexport type AlertProps = HTMLUIProps<\"div\"> & ThemeProps<\"Alert\"> & AlertOptions\n\n/**\n * `Alert` is a component that conveys information to the user.\n *\n * @see Docs https://yamada-ui.com/components/feedback/alert\n */\nexport const Alert = forwardRef<AlertProps, \"div\">(\n  ({ status = \"info\", colorScheme, ...props }, ref) => {\n    const { theme } = useTheme()\n    const statuses = theme.__config?.alert?.statuses ?? {}\n\n    colorScheme ??= getStatusColorScheme(status, statuses)\n\n    const [styles, mergedProps] = useMultiComponentStyle(\"Alert\", {\n      ...props,\n      colorScheme,\n    })\n    const { className, children, ...rest } = omitThemeProps(mergedProps)\n\n    const css: CSSUIObject = {\n      w: \"100%\",\n      display: \"flex\",\n      alignItems: \"center\",\n      position: \"relative\",\n      overflow: \"hidden\",\n      ...styles.container,\n    }\n\n    return (\n      <AlertProvider value={{ status, styles }}>\n        <ui.div\n          ref={ref}\n          className={cx(\"ui-alert\", className)}\n          role=\"alert\"\n          __css={css}\n          {...rest}\n        >\n          {children}\n        </ui.div>\n      </AlertProvider>\n    )\n  },\n)\n\nexport type AlertIconProps = HTMLUIProps<\"span\"> & {\n  variant?: LoadingProps[\"variant\"]\n}\n\nexport const AlertIcon: FC<AlertIconProps> = ({\n  className,\n  children,\n  variant = \"oval\",\n  ...rest\n}) => {\n  const { status, styles } = useAlert()\n  const { theme } = useTheme()\n  const statuses = theme.__config?.alert?.statuses ?? {}\n\n  const Icon = getStatusIcon(status, statuses)\n  const css: CSSUIObject = {\n    ...styles.icon,\n    ...(status === \"loading\" ? styles.loading : {}),\n  }\n\n  return (\n    <ui.span\n      display=\"inherit\"\n      className={cx(\"ui-alert__icon\", className)}\n      __css={css}\n      {...rest}\n    >\n      {children || (\n        <Icon\n          {...(status === \"loading\"\n            ? { variant, color: \"currentcolor\" }\n            : { boxSize: \"100%\" })}\n        />\n      )}\n    </ui.span>\n  )\n}\n\nexport type AlertTitleProps = HTMLUIProps<\"p\">\n\nexport const AlertTitle = forwardRef<AlertTitleProps, \"p\">(\n  ({ className, ...rest }, ref) => {\n    const { styles } = useAlert()\n\n    const css: CSSUIObject = {\n      display: \"block\",\n      ...styles.title,\n    }\n\n    return (\n      <ui.p\n        ref={ref}\n        className={cx(\"ui-alert__title\", className)}\n        __css={css}\n        {...rest}\n      />\n    )\n  },\n)\n\nexport type AlertDescriptionProps = HTMLUIProps<\"span\">\n\nexport const AlertDescription = forwardRef<AlertDescriptionProps, \"span\">(\n  ({ className, ...rest }, ref) => {\n    const { styles } = useAlert()\n\n    const css: CSSUIObject = {\n      ...styles.description,\n    }\n\n    return (\n      <ui.span\n        ref={ref}\n        className={cx(\"ui-alert__desc\", className)}\n        __css={css}\n        {...rest}\n      />\n    )\n  },\n)\n"],"mappings":"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","names":[]}