ndcloud-storybook 1.3.0 → 1.3.5

package/dist/index.cjs

@@ -1,13 +1,13 @@
 'use strict';
 
 var react = require('@emotion/react');
-var styled17 = require('@emotion/styled');
-var jsxRuntime = require('@emotion/react/jsx-runtime');
+var styled18 = require('@emotion/styled');
 var react$1 = require('react');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var styled17__default = /*#__PURE__*/_interopDefault(styled17);
+var styled18__default = /*#__PURE__*/_interopDefault(styled18);
 
 // src/atoms/Button/Button.tsx
 var Spinner = ({
@@ -42,7 +42,7 @@ var spin = react.keyframes`
   from { transform: rotate(0deg); }
   to   { transform: rotate(360deg); }
 `;
-var Wrapper = styled17__default.default.div`
+var Wrapper = styled18__default.default.div`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -153,6 +153,7 @@ var Variant = /* @__PURE__ */ ((Variant2) => {
   Variant2["Primary"] = "primary";
   Variant2["Secondary"] = "secondary";
   Variant2["Outline"] = "outline";
+  Variant2["Dark"] = "dark";
   return Variant2;
 })(Variant || {});
 var VARIANTS = {
@@ -168,33 +169,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__ */ jsxRuntime.jsx(
-  StyledButton,
-  {
-    variant,
-    disabled: disabled || loading,
-    selected,
+var Button = react$1.forwardRef(
+  ({
+    label,
+    icon,
+    loading,
+    disabled,
     className,
-    ...rest,
-    children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner_default, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      icon && /* @__PURE__ */ jsxRuntime.jsx("span", { children: icon }),
-      label
-    ] })
-  }
+    variant = "primary",
+    selected,
+    type = "button",
+    ...rest
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    StyledButton,
+    {
+      ref,
+      variant,
+      disabled: disabled || loading,
+      selected,
+      className,
+      type,
+      "aria-busy": loading,
+      "aria-label": loading ? `${label} (loading)` : void 0,
+      ...rest,
+      children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner_default, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: icon }),
+        label
+      ] })
+    }
+  )
 );
 var Button_default = Button;
-var StyledButton = styled17__default.default.button`
+var StyledButton = styled18__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -214,6 +226,29 @@ var StyledButton = styled17__default.default.button`
   }
 
   ${({ variant = "primary", disabled, selected }) => {
+  if (variant === "dark") {
+    return react.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 react.css`
       background: ${background};
@@ -289,7 +324,7 @@ var Input = ({ className, error, warning, ...rest }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(StyledInput, { className, error, warning, ...rest });
 };
 var Input_default = Input;
-var StyledInput = styled17__default.default.input`
+var StyledInput = styled18__default.default.input`
   ${baseInputStyles}
 
   ${({ error }) => error && errorStyles}
@@ -309,9 +344,16 @@ var useDarkMode = () => {
   }, []);
   return isDark;
 };
-
-// src/assets/icons/Checkmark.svg?react
-var Checkmark_default = "./Checkmark-OGDFVW3O.svg?react";
+var CheckmarkIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    d: "M2 6L5 9L10 2",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
 var Checkbox = ({
   className,
   danger,
@@ -342,13 +384,13 @@ var Checkbox = ({
         darkMode,
         disabled,
         size,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Checkmark_default, {})
+        children: /* @__PURE__ */ jsxRuntime.jsx(CheckmarkIcon, {})
       }
     )
   ] });
 };
 var Checkbox_default = Checkbox;
-var CheckboxWrapper = styled17__default.default.label`
+var CheckboxWrapper = styled18__default.default.label`
   position: relative;
   display: inline-block;
   cursor: pointer;
@@ -369,7 +411,7 @@ var CheckboxWrapper = styled17__default.default.label`
           `}
   }
 `;
-var StyledCheckbox = styled17__default.default.input`
+var StyledCheckbox = styled18__default.default.input`
   position: absolute;
   opacity: 0;
   cursor: pointer;
@@ -387,7 +429,7 @@ var StyledCheckbox = styled17__default.default.input`
     cursor: not-allowed;
   }
 `;
-var CheckmarkWrapper = styled17__default.default.span`
+var CheckmarkWrapper = styled18__default.default.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -397,6 +439,7 @@ var CheckmarkWrapper = styled17__default.default.span`
   border-radius: 4px;
   transition: all 0.2s ease;
   color: transparent;
+  cursor: pointer;
 
   svg {
     width: 60%;
@@ -408,9 +451,11 @@ var CheckmarkWrapper = styled17__default.default.span`
     return darkMode ? react.css`
             background-color: ${colors.baseColors.grey1};
             border: 1px solid ${colors.baseColors.grey4};
+            cursor: not-allowed;
           ` : react.css`
             background-color: ${colors.baseColors.grey7};
             border: 1px solid ${colors.baseColors.grey7};
+            cursor: not-allowed;
           `;
   }
   if (checked) {
@@ -436,6 +481,72 @@ var CheckmarkWrapper = styled17__default.default.span`
         `;
 }}
 `;
+var XIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(ErrorNotificationWrapper, { className, darkMode, isLong: isLongMessage, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(IconContainer, { darkMode, isLong: isLongMessage, children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(MessageText, { darkMode, isLong: isLongMessage, children: message })
+  ] });
+};
+var ErrorNotification_default = ErrorNotification;
+var ErrorNotificationWrapper = styled18__default.default.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__default.default.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__default.default.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__ */ jsxRuntime.jsx("label", { className, htmlFor, ...rest, children });
 };
@@ -444,7 +555,7 @@ var Textarea = ({ className, error, warning, ...rest }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(StyledTextarea, { className, error, warning, ...rest });
 };
 var Textarea_default = Textarea;
-var StyledTextarea = styled17__default.default.textarea`
+var StyledTextarea = styled18__default.default.textarea`
   ${baseInputStyles}
   resize: vertical;
   min-height: 80px;
@@ -472,7 +583,7 @@ var Tab = ({
   );
 };
 var Tab_default = Tab;
-var StyledTab = styled17__default.default.div`
+var StyledTab = styled18__default.default.div`
   display: inline-block;
   padding: 8px 16px;
   user-select: none;
@@ -493,7 +604,7 @@ var StyledTab = styled17__default.default.div`
     }
   `}
 `;
-var HelperText = styled17__default.default.div`
+var HelperText = styled18__default.default.div`
   margin-top: 4px;
   font-size: ${typography.fontSize.xs}px;
   color: ${({ error, warning }) => {
@@ -533,7 +644,7 @@ function GroupBadge({ role, status, children }) {
   const displayText = status?.toLowerCase() === USER_STATUS.INVITED ? "Invited" : children;
   return /* @__PURE__ */ jsxRuntime.jsx(Badge, { badgeColor, children: displayText });
 }
-var Badge = styled17__default.default.div`
+var Badge = styled18__default.default.div`
   display: inline-flex;
   padding: 8px 28px;
   border-radius: 100px;
@@ -568,7 +679,7 @@ function UserAvatar({
   return /* @__PURE__ */ jsxRuntime.jsx(ColourAvatar, { badgeColor, size, children: initials });
 }
 var UserAvatar_default = UserAvatar;
-var ColourAvatar = styled17__default.default.div`
+var ColourAvatar = styled18__default.default.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%;
@@ -582,7 +693,7 @@ var ColourAvatar = styled17__default.default.div`
   font-weight: ${FONT_WEIGHTS.normal};
   flex-shrink: 0;
 `;
-var ProfileAvatar = styled17__default.default(ColourAvatar)`
+var ProfileAvatar = styled18__default.default(ColourAvatar)`
   color: #fff;
   background: ${colors.gradients.gradient1};
   border: none;
@@ -627,7 +738,7 @@ var FormField = ({
     displayText && /* @__PURE__ */ jsxRuntime.jsx(HelperText, { error: hasError, warning: hasWarning, children: displayText })
   ] });
 };
-var FormFieldWrapper = styled17__default.default.div`
+var FormFieldWrapper = styled18__default.default.div`
   display: flex;
   flex-direction: column;
   
@@ -675,7 +786,7 @@ var FormFieldTextarea = ({
     displayText && /* @__PURE__ */ jsxRuntime.jsx(HelperText, { error: hasError, warning: hasWarning, children: displayText })
   ] });
 };
-var FormFieldWrapper2 = styled17__default.default.div`
+var FormFieldWrapper2 = styled18__default.default.div`
   display: flex;
   flex-direction: column;
   
@@ -686,16 +797,16 @@ var FormFieldWrapper2 = styled17__default.default.div`
   }
 `;
 var FormFieldTextarea_default = FormFieldTextarea;
-var SearchContainer = styled17__default.default.div`
+var SearchContainer = styled18__default.default.div`
   width: ${({ width }) => typeof width === "number" ? `${width}px` : width || "208px"};
 `;
-var InputWrapper = styled17__default.default.div`
+var InputWrapper = styled18__default.default.div`
   position: relative;
   width: 100%;
   display: flex;
   align-items: center;
 `;
-var IconWrapper = styled17__default.default.div`
+var IconWrapper = styled18__default.default.div`
   position: absolute;
   left: 17px;
   top: 50%;
@@ -707,7 +818,7 @@ var IconWrapper = styled17__default.default.div`
   pointer-events: none;
   z-index: 2;
 `;
-var StyledInput2 = styled17__default.default(Input_default)`
+var StyledInput2 = styled18__default.default(Input_default)`
   width: 100%;
   padding-right: ${({ hasClearButton }) => hasClearButton ? "32px" : "17px"};
   padding-left: ${({ hasIcon }) => hasIcon ? "44px" : "17px"};
@@ -719,7 +830,7 @@ var StyledInput2 = styled17__default.default(Input_default)`
     padding-left: ${({ hasIcon }) => hasIcon ? "43px" : "16px"};
   }
 `;
-var ClearButton = styled17__default.default.button`
+var ClearButton = styled18__default.default.button`
   position: absolute;
   right: 8px;
   top: 50%;
@@ -745,7 +856,7 @@ var ClearButton = styled17__default.default.button`
     border-radius: 4px;
   }
 `;
-var ClearIcon = styled17__default.default.svg`
+var ClearIcon = styled18__default.default.svg`
   width: 16px;
   height: 16px;
   stroke-width: 2;
@@ -795,7 +906,7 @@ function TableElement({ children, ...rest }) {
   return /* @__PURE__ */ jsxRuntime.jsx(StyledTable, { ...rest, children });
 }
 var Table_default = TableElement;
-var StyledTable = styled17__default.default.table`
+var StyledTable = styled18__default.default.table`
   width: 100%;
   border-collapse: separate;
   border-spacing: 0 4px;
@@ -804,7 +915,7 @@ function TableHeader({ alignRight, children, ...rest }) {
   return /* @__PURE__ */ jsxRuntime.jsx(StyledTableHeader, { alignRight, ...rest, children });
 }
 var TableHeader_default = TableHeader;
-var StyledTableHeader = styled17__default.default.th`
+var StyledTableHeader = styled18__default.default.th`
   padding-bottom: 12px;
   text-align: ${({ alignRight }) => alignRight ? "right" : "left"};
   font-size: ${FONT_SIZES.xs}px;
@@ -816,17 +927,17 @@ function TableCell({ children, colSpan, ...rest }) {
   return /* @__PURE__ */ jsxRuntime.jsx(StyledTableCell, { colSpan, ...rest, children });
 }
 var TableCell_default = TableCell;
-var StyledTableCell = styled17__default.default.td`
+var StyledTableCell = styled18__default.default.td`
 
 `;
 function TableRow({ children, ...rest }) {
   return /* @__PURE__ */ jsxRuntime.jsx(StyledTableRow, { ...rest, children });
 }
 var TableRow_default = TableRow;
-var StyledTableRow = styled17__default.default.tr`
+var StyledTableRow = styled18__default.default.tr`
   /* Base row styling */
 `;
-var TableRowWrapper = styled17__default.default.div`
+var TableRowWrapper = styled18__default.default.div`
   border-radius: 6px;
   border: 1px solid ${colors.baseColors.grey7};
   display: flex;
@@ -834,16 +945,16 @@ var TableRowWrapper = styled17__default.default.div`
   justify-content: space-between;
   padding: 12px 24px;
 `;
-var CheckboxWrapper2 = styled17__default.default.div`
+var CheckboxWrapper2 = styled18__default.default.div`
   display: flex;
   align-items: center;
 `;
-var ActionsWrapper = styled17__default.default.div`
+var ActionsWrapper = styled18__default.default.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
 `;
-var AlignedTableCell = styled17__default.default(TableCell_default)`
+var AlignedTableCell = styled18__default.default(TableCell_default)`
   padding-top: 12px;
   padding-bottom: 12px;
   padding-left: ${({ alignRight }) => alignRight ? "0" : "24px"};
@@ -855,29 +966,29 @@ var AlignedTableCell = styled17__default.default(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__default.default.div`
+var CellContent = styled18__default.default.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__default.default.div`
+var TableWrapper = styled18__default.default.div`
   margin-top: 32px;
 `;
-var EmptyState = styled17__default.default.div`
+var EmptyState = styled18__default.default.div`
   padding: 24px;
   text-align: center;
   display: flex;
   flex-direction: column;
   gap: 8px;
 `;
-var EmptyHeader = styled17__default.default.div`
+var EmptyHeader = styled18__default.default.div`
   font-size: 26px;
   font-weight: 700;
   color: ${colors.baseColors.darkBlue1};
 `;
-var EmptySubheader = styled17__default.default.div`
+var EmptySubheader = styled18__default.default.div`
   font-size: 12px;
   font-weight: 500;
   color: ${colors.baseColors.grey3};
@@ -990,6 +1101,7 @@ var DataTable_default = Table;
 exports.Badge = Badge_default;
 exports.Button = Button_default;
 exports.Checkbox = Checkbox_default;
+exports.ErrorNotification = ErrorNotification_default;
 exports.FONT_SIZES = FONT_SIZES;
 exports.FONT_SIZE_KEYS = FONT_SIZE_KEYS;
 exports.FONT_WEIGHTS = FONT_WEIGHTS;