@webiny/admin-ui 0.0.0-unstable.e6f0dc8ca7 → 0.0.0-unstable.e9333b3f0b

package/List/List.stories.js

@@ -1,351 +1,362 @@
-import React from "react";
-import { ReactComponent as ChartIcon } from "@webiny/icons/insert_chart.svg";
-import { ReactComponent as MoreIcon } from "@webiny/icons/more_vert.svg";
-import { ReactComponent as OpenIcon } from "@webiny/icons/visibility.svg";
-import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
-import { ReactComponent as TrashIcon } from "@webiny/icons/delete.svg";
-import { ReactComponent as UserIcon } from "@webiny/icons/person.svg";
-import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
-import { ReactComponent as HelpIcon } from "@webiny/icons/help.svg";
+import react from "react";
+import { ReactComponent } from "@webiny/icons/insert_chart.svg";
+import { ReactComponent as more_vert_svg_ReactComponent } from "@webiny/icons/more_vert.svg";
+import { ReactComponent as visibility_svg_ReactComponent } from "@webiny/icons/visibility.svg";
+import { ReactComponent as edit_svg_ReactComponent } from "@webiny/icons/edit.svg";
+import { ReactComponent as delete_svg_ReactComponent } from "@webiny/icons/delete.svg";
+import { ReactComponent as person_svg_ReactComponent } from "@webiny/icons/person.svg";
+import { ReactComponent as settings_svg_ReactComponent } from "@webiny/icons/settings.svg";
+import { ReactComponent as help_svg_ReactComponent } from "@webiny/icons/help.svg";
 import { List } from "./List.js";
 import { Avatar } from "../Avatar/index.js";
 const meta = {
-  title: "Components/List",
-  component: List,
-  parameters: {
-    layout: "padded"
-  }
-};
-export default meta;
-const ListItem = props => {
-  return /*#__PURE__*/React.createElement(List.Item, Object.assign({
-    title: `List item ${props.index}`
-  }, props));
+    title: "Components/List",
+    component: List,
+    parameters: {
+        layout: "padded"
+    }
 };
-export const Default = {
-  args: {
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItem, {
-      index: 1
-    }), /*#__PURE__*/React.createElement(ListItem, {
-      index: 2
-    }), /*#__PURE__*/React.createElement(ListItem, {
-      index: 3
-    }))
-  }
+const List_stories = meta;
+const ListItem = (props)=>/*#__PURE__*/ react.createElement(List.Item, {
+        title: `List item ${props.index}`,
+        ...props
+    });
+const Default = {
+    args: {
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(ListItem, {
+            index: 1
+        }), /*#__PURE__*/ react.createElement(ListItem, {
+            index: 2
+        }), /*#__PURE__*/ react.createElement(ListItem, {
+            index: 3
+        }))
+    }
 };
-export const WithTransparentBackground = {
-  args: {
-    background: "transparent",
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List.Item, {
-      icon: /*#__PURE__*/React.createElement(UserIcon, null),
-      title: "User Profile",
-      description: "View and edit your profile information"
-    }), /*#__PURE__*/React.createElement(List.Item, {
-      icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
-      title: "Settings",
-      description: "Configure application settings"
-    }), /*#__PURE__*/React.createElement(List.Item, {
-      icon: /*#__PURE__*/React.createElement(HelpIcon, null),
-      title: "Help & Support",
-      description: "Get assistance and view documentation"
-    }))
-  },
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "bg-neutral-light p-md"
-  }, /*#__PURE__*/React.createElement(Story, null))]
+const WithTransparentBackground = {
+    args: {
+        background: "transparent",
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(List.Item, {
+            icon: /*#__PURE__*/ react.createElement(person_svg_ReactComponent, null),
+            title: "User Profile",
+            description: "View and edit your profile information"
+        }), /*#__PURE__*/ react.createElement(List.Item, {
+            icon: /*#__PURE__*/ react.createElement(settings_svg_ReactComponent, null),
+            title: "Settings",
+            description: "Configure application settings"
+        }), /*#__PURE__*/ react.createElement(List.Item, {
+            icon: /*#__PURE__*/ react.createElement(help_svg_ReactComponent, null),
+            title: "Help & Support",
+            description: "Get assistance and view documentation"
+        }))
+    },
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", {
+                className: "bg-neutral-light p-md"
+            }, /*#__PURE__*/ react.createElement(Story, null))
+    ]
 };
-export const WithBaseBackground = {
-  args: {
-    ...Default.args,
-    background: "base"
-  }
+const WithBaseBackground = {
+    args: {
+        ...Default.args,
+        background: "base"
+    }
 };
-export const WithLightBackground = {
-  args: {
-    background: "light",
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List.Item, {
-      icon: /*#__PURE__*/React.createElement(UserIcon, null),
-      title: "User Profile",
-      description: "View and edit your profile information"
-    }), /*#__PURE__*/React.createElement(List.Item, {
-      icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
-      title: "Settings",
-      description: "Configure application settings"
-    }), /*#__PURE__*/React.createElement(List.Item, {
-      icon: /*#__PURE__*/React.createElement(HelpIcon, null),
-      title: "Help & Support",
-      description: "Get assistance and view documentation"
-    }))
-  }
+const WithLightBackground = {
+    args: {
+        background: "light",
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(List.Item, {
+            icon: /*#__PURE__*/ react.createElement(person_svg_ReactComponent, null),
+            title: "User Profile",
+            description: "View and edit your profile information"
+        }), /*#__PURE__*/ react.createElement(List.Item, {
+            icon: /*#__PURE__*/ react.createElement(settings_svg_ReactComponent, null),
+            title: "Settings",
+            description: "Configure application settings"
+        }), /*#__PURE__*/ react.createElement(List.Item, {
+            icon: /*#__PURE__*/ react.createElement(help_svg_ReactComponent, null),
+            title: "Help & Support",
+            description: "Get assistance and view documentation"
+        }))
+    }
 };
-export const WithUnderlineVariant = {
-  args: {
-    ...Default.args,
-    variant: "underline"
-  }
+const WithUnderlineVariant = {
+    args: {
+        ...Default.args,
+        variant: "underline"
+    }
 };
-export const WithContainerVariant = {
-  args: {
-    variant: "container",
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List.Item, {
-      icon: /*#__PURE__*/React.createElement(UserIcon, null),
-      title: "User Profile",
-      description: "View and edit your profile information"
-    }), /*#__PURE__*/React.createElement(List.Item, {
-      icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
-      title: "Settings",
-      description: "Configure application settings"
-    }), /*#__PURE__*/React.createElement(List.Item, {
-      icon: /*#__PURE__*/React.createElement(HelpIcon, null),
-      title: "Help & Support",
-      description: "Get assistance and view documentation"
-    }))
-  },
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "bg-neutral-light p-md"
-  }, /*#__PURE__*/React.createElement(Story, null))]
+const WithContainerVariant = {
+    args: {
+        variant: "container",
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(List.Item, {
+            icon: /*#__PURE__*/ react.createElement(person_svg_ReactComponent, null),
+            title: "User Profile",
+            description: "View and edit your profile information"
+        }), /*#__PURE__*/ react.createElement(List.Item, {
+            icon: /*#__PURE__*/ react.createElement(settings_svg_ReactComponent, null),
+            title: "Settings",
+            description: "Configure application settings"
+        }), /*#__PURE__*/ react.createElement(List.Item, {
+            icon: /*#__PURE__*/ react.createElement(help_svg_ReactComponent, null),
+            title: "Help & Support",
+            description: "Get assistance and view documentation"
+        }))
+    },
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", {
+                className: "bg-neutral-light p-md"
+            }, /*#__PURE__*/ react.createElement(Story, null))
+    ]
 };
-export const WithDescription = {
-  args: {
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List.Item, {
-      title: "User Profile",
-      description: "View and edit your profile information"
-    }), /*#__PURE__*/React.createElement(List.Item, {
-      title: "Settings",
-      description: "Configure application settings"
-    }), /*#__PURE__*/React.createElement(List.Item, {
-      title: "Help & Support",
-      description: "Get assistance and view documentation"
-    }))
-  }
+const WithDescription = {
+    args: {
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(List.Item, {
+            title: "User Profile",
+            description: "View and edit your profile information"
+        }), /*#__PURE__*/ react.createElement(List.Item, {
+            title: "Settings",
+            description: "Configure application settings"
+        }), /*#__PURE__*/ react.createElement(List.Item, {
+            title: "Help & Support",
+            description: "Get assistance and view documentation"
+        }))
+    }
 };
-export const WithIcon = {
-  args: {
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List.Item, {
-      icon: /*#__PURE__*/React.createElement(UserIcon, null),
-      title: "User Profile"
-    }), /*#__PURE__*/React.createElement(List.Item, {
-      icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
-      title: "Settings"
-    }), /*#__PURE__*/React.createElement(List.Item, {
-      icon: /*#__PURE__*/React.createElement(HelpIcon, null),
-      title: "Help & Support"
-    }))
-  }
+const WithIcon = {
+    args: {
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(List.Item, {
+            icon: /*#__PURE__*/ react.createElement(person_svg_ReactComponent, null),
+            title: "User Profile"
+        }), /*#__PURE__*/ react.createElement(List.Item, {
+            icon: /*#__PURE__*/ react.createElement(settings_svg_ReactComponent, null),
+            title: "Settings"
+        }), /*#__PURE__*/ react.createElement(List.Item, {
+            icon: /*#__PURE__*/ react.createElement(help_svg_ReactComponent, null),
+            title: "Help & Support"
+        }))
+    }
 };
-export const WithIconsAndDescriptions = {
-  args: {
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List.Item, {
-      icon: /*#__PURE__*/React.createElement(UserIcon, null),
-      title: "User Profile",
-      description: "View and edit your profile information"
-    }), /*#__PURE__*/React.createElement(List.Item, {
-      icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
-      title: "Settings",
-      description: "Configure application settings"
-    }), /*#__PURE__*/React.createElement(List.Item, {
-      icon: /*#__PURE__*/React.createElement(HelpIcon, null),
-      title: "Help & Support",
-      description: "Get assistance and view documentation"
-    }))
-  }
+const WithIconsAndDescriptions = {
+    args: {
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(List.Item, {
+            icon: /*#__PURE__*/ react.createElement(person_svg_ReactComponent, null),
+            title: "User Profile",
+            description: "View and edit your profile information"
+        }), /*#__PURE__*/ react.createElement(List.Item, {
+            icon: /*#__PURE__*/ react.createElement(settings_svg_ReactComponent, null),
+            title: "Settings",
+            description: "Configure application settings"
+        }), /*#__PURE__*/ react.createElement(List.Item, {
+            icon: /*#__PURE__*/ react.createElement(help_svg_ReactComponent, null),
+            title: "Help & Support",
+            description: "Get assistance and view documentation"
+        }))
+    }
 };
-export const WithAvatar = {
-  args: {
-    ...Default.args,
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItem, {
-      index: 1,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-      icon: /*#__PURE__*/React.createElement(Avatar, {
-        image: /*#__PURE__*/React.createElement(Avatar.Image, {
-          src: "https://i.pravatar.cc/300?img=1",
-          alt: "@webiny"
-        }),
-        fallback: /*#__PURE__*/React.createElement(Avatar.Fallback, null, "W")
-      })
-    }), /*#__PURE__*/React.createElement(ListItem, {
-      index: 2,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-      icon: /*#__PURE__*/React.createElement(Avatar, {
-        image: /*#__PURE__*/React.createElement(Avatar.Image, {
-          src: "https://i.pravatar.cc/300?img=2",
-          alt: "@webiny"
-        }),
-        fallback: /*#__PURE__*/React.createElement(Avatar.Fallback, null, "W")
-      })
-    }))
-  }
+const WithAvatar = {
+    args: {
+        ...Default.args,
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(ListItem, {
+            index: 1,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(Avatar, {
+                image: /*#__PURE__*/ react.createElement(Avatar.Image, {
+                    src: "https://i.pravatar.cc/300?img=1",
+                    alt: "@webiny"
+                }),
+                fallback: /*#__PURE__*/ react.createElement(Avatar.Fallback, null, "W")
+            })
+        }), /*#__PURE__*/ react.createElement(ListItem, {
+            index: 2,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(Avatar, {
+                image: /*#__PURE__*/ react.createElement(Avatar.Image, {
+                    src: "https://i.pravatar.cc/300?img=2",
+                    alt: "@webiny"
+                }),
+                fallback: /*#__PURE__*/ react.createElement(Avatar.Fallback, null, "W")
+            })
+        }))
+    }
 };
-export const WithHandle = {
-  args: {
-    ...Default.args,
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItem, {
-      index: 1,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-      handle: /*#__PURE__*/React.createElement(List.Item.Handle, null)
-    }), /*#__PURE__*/React.createElement(ListItem, {
-      index: 2,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-      handle: /*#__PURE__*/React.createElement(List.Item.Handle, null)
-    }))
-  }
+const WithHandle = {
+    args: {
+        ...Default.args,
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(ListItem, {
+            index: 1,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            handle: /*#__PURE__*/ react.createElement(List.Item.Handle, null)
+        }), /*#__PURE__*/ react.createElement(ListItem, {
+            index: 2,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            handle: /*#__PURE__*/ react.createElement(List.Item.Handle, null)
+        }))
+    }
 };
-export const WithActions = {
-  ...Default,
-  args: {
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItem, {
-      index: 1,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-      icon: /*#__PURE__*/React.createElement(List.Item.Icon, {
-        icon: /*#__PURE__*/React.createElement(ChartIcon, null),
-        label: "Chart"
-      }),
-      actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List.Item.Action, {
-        icon: /*#__PURE__*/React.createElement(EditIcon, null)
-      }), /*#__PURE__*/React.createElement(List.Item.Action, {
-        icon: /*#__PURE__*/React.createElement(TrashIcon, null)
-      }), /*#__PURE__*/React.createElement(List.Item.Action.Separator, null), /*#__PURE__*/React.createElement(List.Item.Action, {
-        icon: /*#__PURE__*/React.createElement(OpenIcon, null)
-      }), /*#__PURE__*/React.createElement(List.Item.Action, {
-        icon: /*#__PURE__*/React.createElement(MoreIcon, null)
-      }))
-    }), /*#__PURE__*/React.createElement(ListItem, {
-      index: 2,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-      icon: /*#__PURE__*/React.createElement(List.Item.Icon, {
-        icon: /*#__PURE__*/React.createElement(ChartIcon, null),
-        label: "Chart"
-      }),
-      actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List.Item.Action, {
-        icon: /*#__PURE__*/React.createElement(EditIcon, null)
-      }), /*#__PURE__*/React.createElement(List.Item.Action, {
-        icon: /*#__PURE__*/React.createElement(TrashIcon, null)
-      }), /*#__PURE__*/React.createElement(List.Item.Action.Separator, null), /*#__PURE__*/React.createElement(List.Item.Action, {
-        icon: /*#__PURE__*/React.createElement(OpenIcon, null)
-      }), /*#__PURE__*/React.createElement(List.Item.Action, {
-        icon: /*#__PURE__*/React.createElement(MoreIcon, null)
-      }))
-    }))
-  }
+const WithActions = {
+    ...Default,
+    args: {
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(ListItem, {
+            index: 1,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(List.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Chart"
+            }),
+            actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(List.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(edit_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(List.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(List.Item.Action.Separator, null), /*#__PURE__*/ react.createElement(List.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(visibility_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(List.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(more_vert_svg_ReactComponent, null)
+            }))
+        }), /*#__PURE__*/ react.createElement(ListItem, {
+            index: 2,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(List.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Chart"
+            }),
+            actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(List.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(edit_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(List.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(List.Item.Action.Separator, null), /*#__PURE__*/ react.createElement(List.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(visibility_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(List.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(more_vert_svg_ReactComponent, null)
+            }))
+        }))
+    }
 };
-export const WithDisabled = {
-  args: {
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List.Item, {
-      title: "User Profile",
-      description: "View and edit your profile information",
-      onClick: () => alert("User Profile clicked")
-    }), /*#__PURE__*/React.createElement(List.Item, {
-      title: "Settings",
-      description: "Configure application settings",
-      disabled: true,
-      onClick: () => alert("This alert won't show because the item is disabled")
-    }), /*#__PURE__*/React.createElement(List.Item, {
-      title: "Help & Support",
-      description: "Get assistance and view documentation",
-      onClick: () => alert("Help & Support clicked")
-    }))
-  }
+const WithDisabled = {
+    args: {
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(List.Item, {
+            title: "User Profile",
+            description: "View and edit your profile information",
+            onClick: ()=>alert("User Profile clicked")
+        }), /*#__PURE__*/ react.createElement(List.Item, {
+            title: "Settings",
+            description: "Configure application settings",
+            disabled: true,
+            onClick: ()=>alert("This alert won't show because the item is disabled")
+        }), /*#__PURE__*/ react.createElement(List.Item, {
+            title: "Help & Support",
+            description: "Get assistance and view documentation",
+            onClick: ()=>alert("Help & Support clicked")
+        }))
+    }
 };
-export const WithActivated = {
-  args: {
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List.Item, {
-      title: "User Profile",
-      description: "View and edit your profile information",
-      activated: true,
-      onClick: () => console.log("User Profile clicked")
-    }), /*#__PURE__*/React.createElement(List.Item, {
-      title: "Settings",
-      description: "Configure application settings",
-      onClick: () => console.log("Settings clicked")
-    }), /*#__PURE__*/React.createElement(List.Item, {
-      title: "Help & Support",
-      description: "Get assistance and view documentation",
-      onClick: () => console.log("Help & Support clicked")
-    }))
-  }
+const WithActivated = {
+    args: {
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(List.Item, {
+            title: "User Profile",
+            description: "View and edit your profile information",
+            activated: true,
+            onClick: ()=>console.log("User Profile clicked")
+        }), /*#__PURE__*/ react.createElement(List.Item, {
+            title: "Settings",
+            description: "Configure application settings",
+            onClick: ()=>console.log("Settings clicked")
+        }), /*#__PURE__*/ react.createElement(List.Item, {
+            title: "Help & Support",
+            description: "Get assistance and view documentation",
+            onClick: ()=>console.log("Help & Support clicked")
+        }))
+    }
 };
-export const WithClickHandlers = {
-  args: {
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List.Item, {
-      title: "User Profile",
-      description: "View and edit your profile information",
-      onClick: () => alert("User Profile clicked")
-    }), /*#__PURE__*/React.createElement(List.Item, {
-      title: "Settings",
-      description: "Configure application settings",
-      onClick: () => alert("Settings clicked")
-    }), /*#__PURE__*/React.createElement(List.Item, {
-      title: "Help & Support",
-      description: "Get assistance and view documentation",
-      onClick: () => alert("Help & Support clicked")
-    }))
-  }
+const WithClickHandlers = {
+    args: {
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(List.Item, {
+            title: "User Profile",
+            description: "View and edit your profile information",
+            onClick: ()=>alert("User Profile clicked")
+        }), /*#__PURE__*/ react.createElement(List.Item, {
+            title: "Settings",
+            description: "Configure application settings",
+            onClick: ()=>alert("Settings clicked")
+        }), /*#__PURE__*/ react.createElement(List.Item, {
+            title: "Help & Support",
+            description: "Get assistance and view documentation",
+            onClick: ()=>alert("Help & Support clicked")
+        }))
+    }
 };
-export const WithSelectedItem = {
-  render: () => {
-    // Using render function to handle state
-    const [selectedIndex, setSelectedIndex] = React.useState(0);
-    return /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(List.Item, {
-      title: "User Profile",
-      description: "View and edit your profile information",
-      selected: selectedIndex === 0,
-      onClick: () => setSelectedIndex(0)
-    }), /*#__PURE__*/React.createElement(List.Item, {
-      title: "Settings",
-      description: "Configure application settings",
-      selected: selectedIndex === 1,
-      onClick: () => setSelectedIndex(1)
-    }), /*#__PURE__*/React.createElement(List.Item, {
-      title: "Help & Support",
-      description: "Get assistance and view documentation",
-      selected: selectedIndex === 2,
-      onClick: () => setSelectedIndex(2)
-    }));
-  }
+const WithSelectedItem = {
+    render: ()=>{
+        const [selectedIndex, setSelectedIndex] = react.useState(0);
+        return /*#__PURE__*/ react.createElement(List, null, /*#__PURE__*/ react.createElement(List.Item, {
+            title: "User Profile",
+            description: "View and edit your profile information",
+            selected: 0 === selectedIndex,
+            onClick: ()=>setSelectedIndex(0)
+        }), /*#__PURE__*/ react.createElement(List.Item, {
+            title: "Settings",
+            description: "Configure application settings",
+            selected: 1 === selectedIndex,
+            onClick: ()=>setSelectedIndex(1)
+        }), /*#__PURE__*/ react.createElement(List.Item, {
+            title: "Help & Support",
+            description: "Get assistance and view documentation",
+            selected: 2 === selectedIndex,
+            onClick: ()=>setSelectedIndex(2)
+        }));
+    }
 };
-export const Documentation = {
-  args: {
-    variant: "underline",
-    background: "base",
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List.Item, {
-      icon: /*#__PURE__*/React.createElement(UserIcon, null),
-      title: "User Profile",
-      description: "View and edit your profile information",
-      onClick: () => console.log("User Profile clicked")
-    }), /*#__PURE__*/React.createElement(List.Item, {
-      icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
-      title: "Settings",
-      description: "Configure application settings",
-      onClick: () => console.log("Settings clicked")
-    }), /*#__PURE__*/React.createElement(List.Item, {
-      icon: /*#__PURE__*/React.createElement(HelpIcon, null),
-      title: "Help & Support",
-      description: "Get assistance and view documentation",
-      onClick: () => console.log("Help & Support clicked")
-    }))
-  },
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["underline", "container"],
-      description: "The visual style of the list"
+const Documentation = {
+    args: {
+        variant: "underline",
+        background: "base",
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(List.Item, {
+            icon: /*#__PURE__*/ react.createElement(person_svg_ReactComponent, null),
+            title: "User Profile",
+            description: "View and edit your profile information",
+            onClick: ()=>console.log("User Profile clicked")
+        }), /*#__PURE__*/ react.createElement(List.Item, {
+            icon: /*#__PURE__*/ react.createElement(settings_svg_ReactComponent, null),
+            title: "Settings",
+            description: "Configure application settings",
+            onClick: ()=>console.log("Settings clicked")
+        }), /*#__PURE__*/ react.createElement(List.Item, {
+            icon: /*#__PURE__*/ react.createElement(help_svg_ReactComponent, null),
+            title: "Help & Support",
+            description: "Get assistance and view documentation",
+            onClick: ()=>console.log("Help & Support clicked")
+        }))
     },
-    background: {
-      control: "select",
-      options: ["base", "light", "transparent"],
-      description: "The background color of the list"
+    argTypes: {
+        variant: {
+            control: "select",
+            options: [
+                "underline",
+                "container"
+            ],
+            description: "The visual style of the list"
+        },
+        background: {
+            control: "select",
+            options: [
+                "base",
+                "light",
+                "transparent"
+            ],
+            description: "The background color of the list"
+        },
+        children: {
+            description: "The content of the list. Please refer to the example code for details."
+        }
     },
-    children: {
-      description: "The content of the list. Please refer to the example code for details."
-    }
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "This example shows a List with icons, titles, descriptions, and click handlers."
-      }
+    parameters: {
+        docs: {
+            description: {
+                story: "This example shows a List with icons, titles, descriptions, and click handlers."
+            }
+        }
     }
-  }
 };
+export default List_stories;
+export { Default, Documentation, WithActions, WithActivated, WithAvatar, WithBaseBackground, WithClickHandlers, WithContainerVariant, WithDescription, WithDisabled, WithHandle, WithIcon, WithIconsAndDescriptions, WithLightBackground, WithSelectedItem, WithTransparentBackground, WithUnderlineVariant };
 
 //# sourceMappingURL=List.stories.js.map