diff --git a/public/images/status/warning.svg b/public/images/status/warning.svg
new file mode 100644
index 0000000..6e58fe3
--- /dev/null
+++ b/public/images/status/warning.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 4ab82b9..0e72bd4 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -7,8 +7,9 @@ const STYLES = {
secondary: "bg-secondary-main text-secondary-contrast hover:bg-secondary-dark disabled:bg-primary/12",
},
outlined: {
- primary: "bg-primary-light text-secondary-contrast hover:bg-primary",
- secondary: "bg-secondary-main text-secondary-contrast hover:bg-secondary-dark",
+ primary: "border border-primary-light text-primary-main hover:border-primary hover:bg-primary/10",
+ secondary:
+ "border border-secondary-main text-secondary-main hover:border-secondary-light hover:bg-secondary-light/10",
},
} as const;
diff --git a/src/components/Dialog/Dialog.stories.tsx b/src/components/Dialog/Dialog.stories.tsx
index 6a34de0..93a36b2 100644
--- a/src/components/Dialog/Dialog.stories.tsx
+++ b/src/components/Dialog/Dialog.stories.tsx
@@ -7,6 +7,7 @@ import { ScrollLocker } from "@/context/Dialog.context";
import { Button } from "@/components/Button";
import { Checkbox } from "@/components/Input";
import { Text } from "@/components/Text";
+import { Heading } from "@/index";
const meta: Meta = {
component: Dialog,
@@ -77,3 +78,48 @@ export const Default: Story = {
);
},
};
+
+export const NoBackdrop: Story = {
+ args: {
+ hasBackdrop: false,
+ },
+ render: (props) => {
+ const [visible, setVisibility] = useState(false);
+
+ return (
+
+
+
+
+
+ );
+ },
+};
diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
index 2a655a4..227a646 100644
--- a/src/components/Dialog/Dialog.tsx
+++ b/src/components/Dialog/Dialog.tsx
@@ -8,9 +8,17 @@ import { Backdrop } from "./components/Backdrop";
export interface DialogProps extends DetailedHTMLProps, HTMLDivElement> {
open?: boolean;
onClose?: () => void;
+ hasBackdrop?: boolean;
}
-export const Dialog = ({ children, open = false, className, onClose, ...restProps }: DialogProps) => {
+export const Dialog = ({
+ children,
+ open = false,
+ className,
+ onClose,
+ hasBackdrop = true,
+ ...restProps
+}: DialogProps) => {
const { mounted, unmount } = useModalManager({ open });
return (
@@ -28,7 +36,7 @@ export const Dialog = ({ children, open = false, className, onClose, ...restProp
-
+ {hasBackdrop && }
);
};