ndcloud-storybook 1.2.2 → 1.3.1

package/dist/index.js

@@ -1,6 +1,7 @@
 import { keyframes, css } from '@emotion/react';
-import styled16 from '@emotion/styled';
+import styled18 from '@emotion/styled';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { useState, useEffect } from 'react';
 
 // src/atoms/Button/Button.tsx
 var Spinner = ({
@@ -35,7 +36,7 @@ var spin = keyframes`
   from { transform: rotate(0deg); }
   to   { transform: rotate(360deg); }
 `;
-var Wrapper = styled16.div`
+var Wrapper = styled18.div`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -187,7 +188,7 @@ var Button = ({
   }
 );
 var Button_default = Button;
-var StyledButton = styled16.button`
+var StyledButton = styled18.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -282,12 +283,229 @@ var Input = ({ className, error, warning, ...rest }) => {
   return /* @__PURE__ */ jsx(StyledInput, { className, error, warning, ...rest });
 };
 var Input_default = Input;
-var StyledInput = styled16.input`
+var StyledInput = styled18.input`
   ${baseInputStyles}
 
   ${({ error }) => error && errorStyles}
   ${({ warning }) => warning && warningStyles}
 `;
+var useDarkMode = () => {
+  const checkDarkMode = () => {
+    if (typeof window === "undefined") return false;
+    const globals = new URLSearchParams(window.location.search).get("globals");
+    return !!(globals?.includes("backgrounds.value:dark") || window.location.href.includes("backgrounds.value:dark"));
+  };
+  const [isDark, setIsDark] = useState(checkDarkMode);
+  useEffect(() => {
+    const handlePopState = () => setIsDark(checkDarkMode());
+    window.addEventListener("popstate", handlePopState);
+    return () => window.removeEventListener("popstate", handlePopState);
+  }, []);
+  return isDark;
+};
+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,
+  darkMode: darkModeProp,
+  checked,
+  size = 20,
+  disabled,
+  ...rest
+}) => {
+  const autoDarkMode = useDarkMode();
+  const darkMode = darkModeProp !== void 0 ? darkModeProp : autoDarkMode;
+  return /* @__PURE__ */ jsxs(CheckboxWrapper, { className, danger, darkMode, size, children: [
+    /* @__PURE__ */ jsx(
+      StyledCheckbox,
+      {
+        type: "checkbox",
+        checked,
+        danger,
+        disabled,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CheckmarkWrapper,
+      {
+        checked,
+        danger,
+        darkMode,
+        disabled,
+        size,
+        children: /* @__PURE__ */ jsx(CheckmarkIcon, {})
+      }
+    )
+  ] });
+};
+var Checkbox_default = Checkbox;
+var CheckboxWrapper = styled18.label`
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+
+  &:has(input:disabled) {
+    cursor: not-allowed;
+  }
+
+  &:hover input:not(:checked):not(:disabled) + span {
+    ${({ danger, darkMode }) => danger ? css`
+            border-color: ${colors.accents.danger};
+          ` : darkMode ? css`
+            background-color: ${colors.baseColors.grey2};
+            border-color: ${colors.baseColors.grey4};
+          ` : css`
+            background-color: ${getOpacity(colors.baseColors.grey7, 40)};
+            border-color: ${colors.baseColors.grey3};
+          `}
+  }
+`;
+var StyledCheckbox = styled18.input`
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+
+  &:focus-visible + * {
+    outline: 2px solid ${colors.baseColors.primaryBlue};
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+
+  &:disabled + * {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+var CheckmarkWrapper = styled18.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: ${({ size }) => size}px;
+  height: ${({ size }) => size}px;
+  box-sizing: border-box;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  color: transparent;
+  cursor: pointer;
+
+  svg {
+    width: 60%;
+    height: 60%;
+  }
+
+  ${({ checked, danger, darkMode, disabled }) => {
+  if (disabled) {
+    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) {
+    const bgColor = danger ? colors.accents.danger : colors.baseColors.primaryPurple;
+    return css`
+        background-color: ${bgColor};
+        border: 1px solid ${bgColor};
+        color: ${colors.baseColors.white1};
+      `;
+  }
+  if (danger) {
+    return css`
+        background-color: ${getOpacity(colors.accents.danger, 10)};
+        border: 1px solid ${colors.accents.danger};
+      `;
+  }
+  return darkMode ? css`
+          background-color: ${colors.baseColors.grey1};
+          border: 1px solid ${colors.baseColors.grey4};
+        ` : css`
+          background-color: ${colors.baseColors.white1};
+          border: 1px solid ${colors.baseColors.grey7};
+        `;
+}}
+`;
+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 });
 };
@@ -296,7 +514,7 @@ var Textarea = ({ className, error, warning, ...rest }) => {
   return /* @__PURE__ */ jsx(StyledTextarea, { className, error, warning, ...rest });
 };
 var Textarea_default = Textarea;
-var StyledTextarea = styled16.textarea`
+var StyledTextarea = styled18.textarea`
   ${baseInputStyles}
   resize: vertical;
   min-height: 80px;
@@ -324,7 +542,7 @@ var Tab = ({
   );
 };
 var Tab_default = Tab;
-var StyledTab = styled16.div`
+var StyledTab = styled18.div`
   display: inline-block;
   padding: 8px 16px;
   user-select: none;
@@ -345,7 +563,7 @@ var StyledTab = styled16.div`
     }
   `}
 `;
-var HelperText = styled16.div`
+var HelperText = styled18.div`
   margin-top: 4px;
   font-size: ${typography.fontSize.xs}px;
   color: ${({ error, warning }) => {
@@ -385,7 +603,7 @@ function GroupBadge({ role, status, children }) {
   const displayText = status?.toLowerCase() === USER_STATUS.INVITED ? "Invited" : children;
   return /* @__PURE__ */ jsx(Badge, { badgeColor, children: displayText });
 }
-var Badge = styled16.div`
+var Badge = styled18.div`
   display: inline-flex;
   padding: 8px 28px;
   border-radius: 100px;
@@ -420,7 +638,7 @@ function UserAvatar({
   return /* @__PURE__ */ jsx(ColourAvatar, { badgeColor, size, children: initials });
 }
 var UserAvatar_default = UserAvatar;
-var ColourAvatar = styled16.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%;
@@ -434,12 +652,12 @@ var ColourAvatar = styled16.div`
   font-weight: ${FONT_WEIGHTS.normal};
   flex-shrink: 0;
 `;
-var ProfileAvatar = styled16(ColourAvatar)`
+var ProfileAvatar = styled18(ColourAvatar)`
   color: #fff;
   background: ${colors.gradients.gradient1};
   border: none;
   border-radius: 999px;
-  line-height: 138%;
+  padding-top: 2px;
   margin-bottom: 12px;
 `;
 var FormField = ({
@@ -479,7 +697,7 @@ var FormField = ({
     displayText && /* @__PURE__ */ jsx(HelperText, { error: hasError, warning: hasWarning, children: displayText })
   ] });
 };
-var FormFieldWrapper = styled16.div`
+var FormFieldWrapper = styled18.div`
   display: flex;
   flex-direction: column;
   
@@ -527,7 +745,7 @@ var FormFieldTextarea = ({
     displayText && /* @__PURE__ */ jsx(HelperText, { error: hasError, warning: hasWarning, children: displayText })
   ] });
 };
-var FormFieldWrapper2 = styled16.div`
+var FormFieldWrapper2 = styled18.div`
   display: flex;
   flex-direction: column;
   
@@ -538,16 +756,16 @@ var FormFieldWrapper2 = styled16.div`
   }
 `;
 var FormFieldTextarea_default = FormFieldTextarea;
-var SearchContainer = styled16.div`
+var SearchContainer = styled18.div`
   width: ${({ width }) => typeof width === "number" ? `${width}px` : width || "208px"};
 `;
-var InputWrapper = styled16.div`
+var InputWrapper = styled18.div`
   position: relative;
   width: 100%;
   display: flex;
   align-items: center;
 `;
-var IconWrapper = styled16.div`
+var IconWrapper = styled18.div`
   position: absolute;
   left: 17px;
   top: 50%;
@@ -559,7 +777,7 @@ var IconWrapper = styled16.div`
   pointer-events: none;
   z-index: 2;
 `;
-var StyledInput2 = styled16(Input_default)`
+var StyledInput2 = styled18(Input_default)`
   width: 100%;
   padding-right: ${({ hasClearButton }) => hasClearButton ? "32px" : "17px"};
   padding-left: ${({ hasIcon }) => hasIcon ? "44px" : "17px"};
@@ -571,7 +789,7 @@ var StyledInput2 = styled16(Input_default)`
     padding-left: ${({ hasIcon }) => hasIcon ? "43px" : "16px"};
   }
 `;
-var ClearButton = styled16.button`
+var ClearButton = styled18.button`
   position: absolute;
   right: 8px;
   top: 50%;
@@ -597,7 +815,7 @@ var ClearButton = styled16.button`
     border-radius: 4px;
   }
 `;
-var ClearIcon = styled16.svg`
+var ClearIcon = styled18.svg`
   width: 16px;
   height: 16px;
   stroke-width: 2;
@@ -647,7 +865,7 @@ function TableElement({ children, ...rest }) {
   return /* @__PURE__ */ jsx(StyledTable, { ...rest, children });
 }
 var Table_default = TableElement;
-var StyledTable = styled16.table`
+var StyledTable = styled18.table`
   width: 100%;
   border-collapse: separate;
   border-spacing: 0 4px;
@@ -656,7 +874,7 @@ function TableHeader({ alignRight, children, ...rest }) {
   return /* @__PURE__ */ jsx(StyledTableHeader, { alignRight, ...rest, children });
 }
 var TableHeader_default = TableHeader;
-var StyledTableHeader = styled16.th`
+var StyledTableHeader = styled18.th`
   padding-bottom: 12px;
   text-align: ${({ alignRight }) => alignRight ? "right" : "left"};
   font-size: ${FONT_SIZES.xs}px;
@@ -668,17 +886,17 @@ function TableCell({ children, colSpan, ...rest }) {
   return /* @__PURE__ */ jsx(StyledTableCell, { colSpan, ...rest, children });
 }
 var TableCell_default = TableCell;
-var StyledTableCell = styled16.td`
+var StyledTableCell = styled18.td`
 
 `;
 function TableRow({ children, ...rest }) {
   return /* @__PURE__ */ jsx(StyledTableRow, { ...rest, children });
 }
 var TableRow_default = TableRow;
-var StyledTableRow = styled16.tr`
+var StyledTableRow = styled18.tr`
   /* Base row styling */
 `;
-var TableRowWrapper = styled16.div`
+var TableRowWrapper = styled18.div`
   border-radius: 6px;
   border: 1px solid ${colors.baseColors.grey7};
   display: flex;
@@ -686,16 +904,16 @@ var TableRowWrapper = styled16.div`
   justify-content: space-between;
   padding: 12px 24px;
 `;
-var CheckboxWrapper = styled16.div`
+var CheckboxWrapper2 = styled18.div`
   display: flex;
   align-items: center;
 `;
-var ActionsWrapper = styled16.div`
+var ActionsWrapper = styled18.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
 `;
-var AlignedTableCell = styled16(TableCell_default)`
+var AlignedTableCell = styled18(TableCell_default)`
   padding-top: 12px;
   padding-bottom: 12px;
   padding-left: ${({ alignRight }) => alignRight ? "0" : "24px"};
@@ -707,29 +925,29 @@ var AlignedTableCell = styled16(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 = styled16.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 = styled16.div`
+var TableWrapper = styled18.div`
   margin-top: 32px;
 `;
-var EmptyState = styled16.div`
+var EmptyState = styled18.div`
   padding: 24px;
   text-align: center;
   display: flex;
   flex-direction: column;
   gap: 8px;
 `;
-var EmptyHeader = styled16.div`
+var EmptyHeader = styled18.div`
   font-size: 26px;
   font-weight: 700;
   color: ${colors.baseColors.darkBlue1};
 `;
-var EmptySubheader = styled16.div`
+var EmptySubheader = styled18.div`
   font-size: 12px;
   font-weight: 500;
   color: ${colors.baseColors.grey3};
@@ -798,7 +1016,7 @@ function Table({
       const isSelected = selectedRows.has(rowKey);
       if (rowLayout === "spaced") {
         return /* @__PURE__ */ jsx(TableRow_default, { children: /* @__PURE__ */ jsx(TableCell_default, { colSpan: totalColumns, children: /* @__PURE__ */ jsxs(TableRowWrapper, { children: [
-          showCheckboxes && /* @__PURE__ */ jsx(CheckboxWrapper, { children: /* @__PURE__ */ jsx(
+          showCheckboxes && /* @__PURE__ */ jsx(CheckboxWrapper2, { children: /* @__PURE__ */ jsx(
             "input",
             {
               type: "checkbox",
@@ -839,6 +1057,6 @@ function Table({
 }
 var DataTable_default = Table;
 
-export { Badge_default as Badge, Button_default as Button, 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