ndcloud-storybook 1.3.0 → 1.3.5

package/dist/index.js

@@ -1,7 +1,7 @@
 import { keyframes, css } from '@emotion/react';
-import styled17 from '@emotion/styled';
+import styled18 from '@emotion/styled';
+import { forwardRef, useState, useEffect } from 'react';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
-import { useState, useEffect } from 'react';
 
 // src/atoms/Button/Button.tsx
 var Spinner = ({
@@ -36,7 +36,7 @@ var spin = keyframes`
   from { transform: rotate(0deg); }
   to   { transform: rotate(360deg); }
 `;
-var Wrapper = styled17.div`
+var Wrapper = styled18.div`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -147,6 +147,7 @@ var Variant = /* @__PURE__ */ ((Variant2) => {
   Variant2["Primary"] = "primary";
   Variant2["Secondary"] = "secondary";
   Variant2["Outline"] = "outline";
+  Variant2["Dark"] = "dark";
   return Variant2;
 })(Variant || {});
 var VARIANTS = {
@@ -162,33 +163,44 @@ var VARIANTS = {
     background: colors.backgrounds.transparent,
     border: `1px solid ${getOpacity(colors.baseColors.grey2, 10)}`,
     color: getOpacity(colors.baseColors.darkBlue3, 85)
+  },
+  dark: {
+    background: colors.baseColors.grey6,
+    color: colors.baseColors.white1
   }
 };
-var Button = ({
-  label,
-  icon,
-  loading,
-  disabled,
-  className,
-  variant = "primary",
-  selected,
-  ...rest
-}) => /* @__PURE__ */ jsx(
-  StyledButton,
-  {
-    variant,
-    disabled: disabled || loading,
-    selected,
+var Button = forwardRef(
+  ({
+    label,
+    icon,
+    loading,
+    disabled,
     className,
-    ...rest,
-    children: loading ? /* @__PURE__ */ jsx(Spinner_default, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      icon && /* @__PURE__ */ jsx("span", { children: icon }),
-      label
-    ] })
-  }
+    variant = "primary",
+    selected,
+    type = "button",
+    ...rest
+  }, ref) => /* @__PURE__ */ jsx(
+    StyledButton,
+    {
+      ref,
+      variant,
+      disabled: disabled || loading,
+      selected,
+      className,
+      type,
+      "aria-busy": loading,
+      "aria-label": loading ? `${label} (loading)` : void 0,
+      ...rest,
+      children: loading ? /* @__PURE__ */ jsx(Spinner_default, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: icon }),
+        label
+      ] })
+    }
+  )
 );
 var Button_default = Button;
-var StyledButton = styled17.button`
+var StyledButton = styled18.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -208,6 +220,29 @@ var StyledButton = styled17.button`
   }
 
   ${({ variant = "primary", disabled, selected }) => {
+  if (variant === "dark") {
+    return css`
+        background: ${colors.baseColors.grey6};
+        border: ${selected ? `2px solid ${colors.baseColors.white1}` : "1px solid transparent"};
+        color: ${disabled ? colors.baseColors.grey4 : colors.baseColors.white1};
+        opacity: ${disabled ? 0.6 : 1};
+        cursor: ${disabled ? "not-allowed" : "pointer"};
+        pointer-events: ${disabled ? "none" : "auto"};
+
+        &:hover:not(:disabled) {
+          background: ${colors.baseColors.grey5};
+        }
+
+        &:active:not(:disabled) {
+          border: 1px solid ${colors.baseColors.primaryPurple};
+        }
+
+        &:focus-visible {
+          outline: 2px solid ${colors.baseColors.primaryBlue};
+          outline-offset: 2px;
+        }
+      `;
+  }
   const { background, color, border } = VARIANTS[variant];
   return css`
       background: ${background};
@@ -283,7 +318,7 @@ var Input = ({ className, error, warning, ...rest }) => {
   return /* @__PURE__ */ jsx(StyledInput, { className, error, warning, ...rest });
 };
 var Input_default = Input;
-var StyledInput = styled17.input`
+var StyledInput = styled18.input`
   ${baseInputStyles}
 
   ${({ error }) => error && errorStyles}
@@ -303,9 +338,16 @@ var useDarkMode = () => {
   }, []);
   return isDark;
 };
-
-// src/assets/icons/Checkmark.svg?react
-var Checkmark_default = "./Checkmark-OGDFVW3O.svg?react";
+var CheckmarkIcon = (props) => /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M2 6L5 9L10 2",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
 var Checkbox = ({
   className,
   danger,
@@ -336,13 +378,13 @@ var Checkbox = ({
         darkMode,
         disabled,
         size,
-        children: /* @__PURE__ */ jsx(Checkmark_default, {})
+        children: /* @__PURE__ */ jsx(CheckmarkIcon, {})
       }
     )
   ] });
 };
 var Checkbox_default = Checkbox;
-var CheckboxWrapper = styled17.label`
+var CheckboxWrapper = styled18.label`
   position: relative;
   display: inline-block;
   cursor: pointer;
@@ -363,7 +405,7 @@ var CheckboxWrapper = styled17.label`
           `}
   }
 `;
-var StyledCheckbox = styled17.input`
+var StyledCheckbox = styled18.input`
   position: absolute;
   opacity: 0;
   cursor: pointer;
@@ -381,7 +423,7 @@ var StyledCheckbox = styled17.input`
     cursor: not-allowed;
   }
 `;
-var CheckmarkWrapper = styled17.span`
+var CheckmarkWrapper = styled18.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -391,6 +433,7 @@ var CheckmarkWrapper = styled17.span`
   border-radius: 4px;
   transition: all 0.2s ease;
   color: transparent;
+  cursor: pointer;
 
   svg {
     width: 60%;
@@ -402,9 +445,11 @@ var CheckmarkWrapper = styled17.span`
     return darkMode ? css`
             background-color: ${colors.baseColors.grey1};
             border: 1px solid ${colors.baseColors.grey4};
+            cursor: not-allowed;
           ` : css`
             background-color: ${colors.baseColors.grey7};
             border: 1px solid ${colors.baseColors.grey7};
+            cursor: not-allowed;
           `;
   }
   if (checked) {
@@ -430,6 +475,72 @@ var CheckmarkWrapper = styled17.span`
         `;
 }}
 `;
+var XIcon = (props) => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M4 4L12 12M12 4L4 12",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var ErrorNotification = ({
+  message,
+  className,
+  darkMode: darkModeProp
+}) => {
+  const autoDarkMode = useDarkMode();
+  const darkMode = darkModeProp !== void 0 ? darkModeProp : autoDarkMode;
+  const isLongMessage = message.length > 120;
+  return /* @__PURE__ */ jsxs(ErrorNotificationWrapper, { className, darkMode, isLong: isLongMessage, children: [
+    /* @__PURE__ */ jsx(IconContainer, { darkMode, isLong: isLongMessage, children: /* @__PURE__ */ jsx(XIcon, {}) }),
+    /* @__PURE__ */ jsx(MessageText, { darkMode, isLong: isLongMessage, children: message })
+  ] });
+};
+var ErrorNotification_default = ErrorNotification;
+var ErrorNotificationWrapper = styled18.div`
+  display: flex;
+  align-items: ${({ isLong }) => isLong ? "flex-start" : "center"};
+  gap: 12px;
+  min-height: 74px;
+  max-width: 356px;
+  padding: ${({ isLong }) => isLong ? "20px" : "0"} 16px;
+  border-radius: 6px;
+  background-color: ${getOpacity(colors.accents.error, 30)};
+  border: 1px solid ${colors.accents.error};
+  color: ${({ darkMode }) => darkMode ? colors.baseColors.white1 : colors.baseColors.darkBlue1};
+  font-family: ${typography.fontFamily.primary};
+  font-size: ${FONT_SIZES.m}px;
+  font-weight: ${FONT_WEIGHTS.normal};
+  line-height: ${typography.lineHeight.normal};
+`;
+var IconContainer = styled18.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  margin: 0;
+  border-radius: 50%;
+  background-color: ${getOpacity(colors.baseColors.white1, 30)};
+  color: ${colors.accents.error};
+  
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+var MessageText = styled18.p`
+  flex: 1;
+  margin: 0;
+  padding: 0;
+  color: ${({ darkMode }) => darkMode ? colors.baseColors.white1 : colors.baseColors.darkBlue1};
+  font-weight: ${FONT_WEIGHTS.bold};
+  word-wrap: break-word;
+  word-break: break-word;
+`;
 var Label = ({ className, htmlFor, children, ...rest }) => {
   return /* @__PURE__ */ jsx("label", { className, htmlFor, ...rest, children });
 };
@@ -438,7 +549,7 @@ var Textarea = ({ className, error, warning, ...rest }) => {
   return /* @__PURE__ */ jsx(StyledTextarea, { className, error, warning, ...rest });
 };
 var Textarea_default = Textarea;
-var StyledTextarea = styled17.textarea`
+var StyledTextarea = styled18.textarea`
   ${baseInputStyles}
   resize: vertical;
   min-height: 80px;
@@ -466,7 +577,7 @@ var Tab = ({
   );
 };
 var Tab_default = Tab;
-var StyledTab = styled17.div`
+var StyledTab = styled18.div`
   display: inline-block;
   padding: 8px 16px;
   user-select: none;
@@ -487,7 +598,7 @@ var StyledTab = styled17.div`
     }
   `}
 `;
-var HelperText = styled17.div`
+var HelperText = styled18.div`
   margin-top: 4px;
   font-size: ${typography.fontSize.xs}px;
   color: ${({ error, warning }) => {
@@ -527,7 +638,7 @@ function GroupBadge({ role, status, children }) {
   const displayText = status?.toLowerCase() === USER_STATUS.INVITED ? "Invited" : children;
   return /* @__PURE__ */ jsx(Badge, { badgeColor, children: displayText });
 }
-var Badge = styled17.div`
+var Badge = styled18.div`
   display: inline-flex;
   padding: 8px 28px;
   border-radius: 100px;
@@ -562,7 +673,7 @@ function UserAvatar({
   return /* @__PURE__ */ jsx(ColourAvatar, { badgeColor, size, children: initials });
 }
 var UserAvatar_default = UserAvatar;
-var ColourAvatar = styled17.div`
+var ColourAvatar = styled18.div`
   width: ${({ size }) => typeof size === "number" ? `${size}px` : size === "large" ? "56px" : "40px"};
   height: ${({ size }) => typeof size === "number" ? `${size}px` : size === "large" ? "56px" : "40px"};
   border-radius: 50%;
@@ -576,7 +687,7 @@ var ColourAvatar = styled17.div`
   font-weight: ${FONT_WEIGHTS.normal};
   flex-shrink: 0;
 `;
-var ProfileAvatar = styled17(ColourAvatar)`
+var ProfileAvatar = styled18(ColourAvatar)`
   color: #fff;
   background: ${colors.gradients.gradient1};
   border: none;
@@ -621,7 +732,7 @@ var FormField = ({
     displayText && /* @__PURE__ */ jsx(HelperText, { error: hasError, warning: hasWarning, children: displayText })
   ] });
 };
-var FormFieldWrapper = styled17.div`
+var FormFieldWrapper = styled18.div`
   display: flex;
   flex-direction: column;
   
@@ -669,7 +780,7 @@ var FormFieldTextarea = ({
     displayText && /* @__PURE__ */ jsx(HelperText, { error: hasError, warning: hasWarning, children: displayText })
   ] });
 };
-var FormFieldWrapper2 = styled17.div`
+var FormFieldWrapper2 = styled18.div`
   display: flex;
   flex-direction: column;
   
@@ -680,16 +791,16 @@ var FormFieldWrapper2 = styled17.div`
   }
 `;
 var FormFieldTextarea_default = FormFieldTextarea;
-var SearchContainer = styled17.div`
+var SearchContainer = styled18.div`
   width: ${({ width }) => typeof width === "number" ? `${width}px` : width || "208px"};
 `;
-var InputWrapper = styled17.div`
+var InputWrapper = styled18.div`
   position: relative;
   width: 100%;
   display: flex;
   align-items: center;
 `;
-var IconWrapper = styled17.div`
+var IconWrapper = styled18.div`
   position: absolute;
   left: 17px;
   top: 50%;
@@ -701,7 +812,7 @@ var IconWrapper = styled17.div`
   pointer-events: none;
   z-index: 2;
 `;
-var StyledInput2 = styled17(Input_default)`
+var StyledInput2 = styled18(Input_default)`
   width: 100%;
   padding-right: ${({ hasClearButton }) => hasClearButton ? "32px" : "17px"};
   padding-left: ${({ hasIcon }) => hasIcon ? "44px" : "17px"};
@@ -713,7 +824,7 @@ var StyledInput2 = styled17(Input_default)`
     padding-left: ${({ hasIcon }) => hasIcon ? "43px" : "16px"};
   }
 `;
-var ClearButton = styled17.button`
+var ClearButton = styled18.button`
   position: absolute;
   right: 8px;
   top: 50%;
@@ -739,7 +850,7 @@ var ClearButton = styled17.button`
     border-radius: 4px;
   }
 `;
-var ClearIcon = styled17.svg`
+var ClearIcon = styled18.svg`
   width: 16px;
   height: 16px;
   stroke-width: 2;
@@ -789,7 +900,7 @@ function TableElement({ children, ...rest }) {
   return /* @__PURE__ */ jsx(StyledTable, { ...rest, children });
 }
 var Table_default = TableElement;
-var StyledTable = styled17.table`
+var StyledTable = styled18.table`
   width: 100%;
   border-collapse: separate;
   border-spacing: 0 4px;
@@ -798,7 +909,7 @@ function TableHeader({ alignRight, children, ...rest }) {
   return /* @__PURE__ */ jsx(StyledTableHeader, { alignRight, ...rest, children });
 }
 var TableHeader_default = TableHeader;
-var StyledTableHeader = styled17.th`
+var StyledTableHeader = styled18.th`
   padding-bottom: 12px;
   text-align: ${({ alignRight }) => alignRight ? "right" : "left"};
   font-size: ${FONT_SIZES.xs}px;
@@ -810,17 +921,17 @@ function TableCell({ children, colSpan, ...rest }) {
   return /* @__PURE__ */ jsx(StyledTableCell, { colSpan, ...rest, children });
 }
 var TableCell_default = TableCell;
-var StyledTableCell = styled17.td`
+var StyledTableCell = styled18.td`
 
 `;
 function TableRow({ children, ...rest }) {
   return /* @__PURE__ */ jsx(StyledTableRow, { ...rest, children });
 }
 var TableRow_default = TableRow;
-var StyledTableRow = styled17.tr`
+var StyledTableRow = styled18.tr`
   /* Base row styling */
 `;
-var TableRowWrapper = styled17.div`
+var TableRowWrapper = styled18.div`
   border-radius: 6px;
   border: 1px solid ${colors.baseColors.grey7};
   display: flex;
@@ -828,16 +939,16 @@ var TableRowWrapper = styled17.div`
   justify-content: space-between;
   padding: 12px 24px;
 `;
-var CheckboxWrapper2 = styled17.div`
+var CheckboxWrapper2 = styled18.div`
   display: flex;
   align-items: center;
 `;
-var ActionsWrapper = styled17.div`
+var ActionsWrapper = styled18.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
 `;
-var AlignedTableCell = styled17(TableCell_default)`
+var AlignedTableCell = styled18(TableCell_default)`
   padding-top: 12px;
   padding-bottom: 12px;
   padding-left: ${({ alignRight }) => alignRight ? "0" : "24px"};
@@ -849,29 +960,29 @@ var AlignedTableCell = styled17(TableCell_default)`
   ${({ isFirst }) => isFirst && `border-top-left-radius: 6px; border-bottom-left-radius: 6px;`}
   ${({ isLast }) => isLast && `border-top-right-radius: 6px; border-bottom-right-radius: 6px;`}
 `;
-var CellContent = styled17.div`
+var CellContent = styled18.div`
   display: flex;
   align-items: center;
   justify-content: ${({ alignRight }) => alignRight ? "flex-end" : "flex-start"};
   flex: ${({ alignRight }) => alignRight ? "0 0 auto" : "1"};
   min-width: 0;
 `;
-var TableWrapper = styled17.div`
+var TableWrapper = styled18.div`
   margin-top: 32px;
 `;
-var EmptyState = styled17.div`
+var EmptyState = styled18.div`
   padding: 24px;
   text-align: center;
   display: flex;
   flex-direction: column;
   gap: 8px;
 `;
-var EmptyHeader = styled17.div`
+var EmptyHeader = styled18.div`
   font-size: 26px;
   font-weight: 700;
   color: ${colors.baseColors.darkBlue1};
 `;
-var EmptySubheader = styled17.div`
+var EmptySubheader = styled18.div`
   font-size: 12px;
   font-weight: 500;
   color: ${colors.baseColors.grey3};
@@ -981,6 +1092,6 @@ function Table({
 }
 var DataTable_default = Table;
 
-export { Badge_default as Badge, Button_default as Button, Checkbox_default as Checkbox, FONT_SIZES, FONT_SIZE_KEYS, FONT_WEIGHTS, FormField_default as FormField, FormFieldTextarea_default as FormFieldTextarea, GroupBadge, HelperText, Input_default as Input, Label_default as Label, SearchInput_default as SearchInput, Tab_default as Tab, DataTable_default as Table, TableCell_default as TableCell, Table_default as TableElement, TableHeader_default as TableHeader, TableRow_default as TableRow, TableRowWrapper, Textarea_default as Textarea, USER_ROLES, USER_STATUS, UserAvatar_default as UserAvatar, Variant, colors, getBadgeColor, getOpacity, typography };
+export { Badge_default as Badge, Button_default as Button, Checkbox_default as Checkbox, ErrorNotification_default as ErrorNotification, FONT_SIZES, FONT_SIZE_KEYS, FONT_WEIGHTS, FormField_default as FormField, FormFieldTextarea_default as FormFieldTextarea, GroupBadge, HelperText, Input_default as Input, Label_default as Label, SearchInput_default as SearchInput, Tab_default as Tab, DataTable_default as Table, TableCell_default as TableCell, Table_default as TableElement, TableHeader_default as TableHeader, TableRow_default as TableRow, TableRowWrapper, Textarea_default as Textarea, USER_ROLES, USER_STATUS, UserAvatar_default as UserAvatar, Variant, colors, getBadgeColor, getOpacity, typography };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map