goto · rianmandala · Sep 15, 2025 · Feb 23, 2026 · Feb 23, 2026
@@ -2,7 +2,7 @@
     "packages": ["packages/*"],
     "npmClient": "yarn",
     "useWorkspaces": true,
-    "version": "0.11.9",
+    "version": "0.12.0-alpha.12",
     "command": {
         "version": {
             "message": "chore(release): publish %s"

@@ -1,6 +1,6 @@
 {
     "name": "@goto-company/icons",
-    "version": "0.11.9",
+    "version": "0.12.0-alpha.12",
     "description": "Apsara icons",
     "scripts": {
         "build": "node scripts/build.js",

@@ -1,6 +1,6 @@
 {
     "name": "@goto-company/apsara",
-    "version": "0.11.9",
+    "version": "0.12.0-alpha.12",
     "description": "A list of base components for apsara",
     "author": "Praveen Yadav <praveen.yadav@go-jek.com>",
     "license": "Apache-2.0",

@@ -1,23 +1,24 @@
-import { useState } from 'react';
-import Drawer from './Drawer';
+import { useState } from "react";
+import Drawer from "./Drawer";
 
 export const Basic = () => {
     const [open, setOpen] = useState(false);
     return (
         <>
-            <button type="button" onClick={() => setOpen(true)}>Click to open Drawer</button>
-            <Drawer
-                open={open}
-                onClose={() => setOpen(false)}
-            >
+            <button type="button" onClick={() => setOpen(true)}>
+                Click to open Drawer
+            </button>
+            <Drawer drawerStyle={{ zIndex: 1 }} open={open} onClose={() => setOpen(false)}>
                 <p>This is sample drawer content</p>
-                <button type="button" onClick={() => console.log('test')}>Test</button>
+                <button type="button" onClick={() => console.log("test")}>
+                    Test
+                </button>
             </Drawer>
         </>
     );
-}
+};
 
 export default {
     title: "Overlay/Drawer",
     component: Drawer,
-};
+};
@@ -11,25 +11,37 @@ type DrawerProps = {
     className?: string;
     position?: "left" | "right";
     children?: React.ReactNode;
+    drawerStyle?: React.CSSProperties;
+    drawerClassName?: string;
 };
 
-const Drawer = ({ onOverlayClick, disableCloseOnOverlayClick, onClose, open = false, children, className = "", position = "right" }: DrawerProps) => {
+const Drawer = ({
+    onOverlayClick,
+    disableCloseOnOverlayClick,
+    onClose,
+    open = false,
+    children,
+    className = "",
+    position = "right",
+    drawerStyle = {},
+    drawerClassName = "",
+}: DrawerProps) => {
     const theme = useContext(ThemeContext);
 
     if (!open) return null;
     return (
-        <Wrapper>
-            <Overlay onClick={() => {
-                if (!disableCloseOnOverlayClick) onClose();
-                if (onOverlayClick) onOverlayClick();
-            }}>
-            </Overlay>
+        <Wrapper className={drawerClassName} style={drawerStyle}>
+            <Overlay
+                onClick={() => {
+                    if (!disableCloseOnOverlayClick) onClose();
+                    if (onOverlayClick) onOverlayClick();
+                }}
+            ></Overlay>
             <Body className={className} position={position}>
                 <Icon name="cross" onClick={onClose} color={theme?.drawer?.close} />
                 {children}
             </Body>
         </Wrapper>
-
     );
 };
 

@@ -30,7 +30,11 @@ const _Notifications = () => {
             </Button>
             <Button
                 onClick={() => {
-                    showError("Error", "this is a test");
+                    showError(
+                        "Error",
+                        "user with email \"rian.putra01@gojek.com\" doesent have alicloud account. please refer into section 'A': <a href='https://gotocompany.sg.larksuite.com/docx/Izd4dNxLmosOSdx0dw0lXt0lgif?302from=wiki' target='_blank'>Goto AliCloud Handbook</a>",
+                        6000,
+                    );
                 }}
             >
                 show Error

@@ -13,8 +13,8 @@ const StyledViewport = styled(ToastPrimitive.Viewport)`
     flex-direction: column;
     padding: VIEWPORT_PADDING;
     gap: 10px;
-    width: 390px;
-    max-width: 100vw;
+    width: max-content;
+    max-width: 450px;
     margin: 0;
     list-style: none;
     z-index: 2147483647;
@@ -82,10 +82,12 @@ const StyledToast = styled(ToastPrimitive.Root)`
 const StyledTitle = styled(ToastPrimitive.Title)`
     grid-area: title;
     margin-bottom: 5px;
-    margin-left: 8px;
     font-weight: 600;
     color: ${slate.slate12};
     font-size: 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 `;
 
 const StyledDescription = styled(ToastPrimitive.Description)`
@@ -108,13 +110,47 @@ export const DescriptionWrapper = styled("div")`
     padding-left: 15px;
     gap: 10px;
     margin-bottom: 5px;
+    user-select: text;
+    word-break: break-word;
+    a {
+        text-decoration: underline;
+    }
 `;
 
 export const IconTitleWrapper = styled("div")`
     display: flex;
     gap: 10px;
     align-items: center;
 `;
+
+export const CopyButton = styled.button`
+    border: 1px solid #e1e1e1;
+    margin-bottom: 5px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    background: none;
+    cursor: pointer;
+    padding: 0.5px 4px;
+    padding-right: 6px;
+    border-radius: 2px;
+    font-size: 12px;
+    font-weight: 500;
+    color: ${slate.slate11};
+    transition: color 0.15s ease, background-color 0.15s ease;
+    white-space: nowrap;
+    line-height: 1;
+    flex-shrink: 0;
+
+    &:hover {
+        background-color: ${slate.slate3};
+        color: ${slate.slate12};
+    }
+
+    &:active {
+        background-color: ${slate.slate4};
+    }
+`;
 // Exports
 export const ToastProvider = ToastPrimitive.Provider;
 export const ToastViewport = StyledViewport;