ndcloud-storybook 1.2.2 → 1.3.1

package/dist/index.cjs

@@ -1,12 +1,13 @@
 'use strict';
 
 var react = require('@emotion/react');
-var styled16 = require('@emotion/styled');
+var styled18 = require('@emotion/styled');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react$1 = require('react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var styled16__default = /*#__PURE__*/_interopDefault(styled16);
+var styled18__default = /*#__PURE__*/_interopDefault(styled18);
 
 // src/atoms/Button/Button.tsx
 var Spinner = ({
@@ -41,7 +42,7 @@ var spin = react.keyframes`
   from { transform: rotate(0deg); }
   to   { transform: rotate(360deg); }
 `;
-var Wrapper = styled16__default.default.div`
+var Wrapper = styled18__default.default.div`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -193,7 +194,7 @@ var Button = ({
   }
 );
 var Button_default = Button;
-var StyledButton = styled16__default.default.button`
+var StyledButton = styled18__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -288,12 +289,229 @@ var Input = ({ className, error, warning, ...rest }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(StyledInput, { className, error, warning, ...rest });
 };
 var Input_default = Input;
-var StyledInput = styled16__default.default.input`
+var StyledInput = styled18__default.default.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] = react$1.useState(checkDarkMode);
+  react$1.useEffect(() => {
+    const handlePopState = () => setIsDark(checkDarkMode());
+    window.addEventListener("popstate", handlePopState);
+    return () => window.removeEventListener("popstate", handlePopState);
+  }, []);
+  return isDark;
+};
+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,
+  darkMode: darkModeProp,
+  checked,
+  size = 20,
+  disabled,
+  ...rest
+}) => {
+  const autoDarkMode = useDarkMode();
+  const darkMode = darkModeProp !== void 0 ? darkModeProp : autoDarkMode;
+  return /* @__PURE__ */ jsxRuntime.jsxs(CheckboxWrapper, { className, danger, darkMode, size, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      StyledCheckbox,
+      {
+        type: "checkbox",
+        checked,
+        danger,
+        disabled,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CheckmarkWrapper,
+      {
+        checked,
+        danger,
+        darkMode,
+        disabled,
+        size,
+        children: /* @__PURE__ */ jsxRuntime.jsx(CheckmarkIcon, {})
+      }
+    )
+  ] });
+};
+var Checkbox_default = Checkbox;
+var CheckboxWrapper = styled18__default.default.label`
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+
+  &:has(input:disabled) {
+    cursor: not-allowed;
+  }
+
+  &:hover input:not(:checked):not(:disabled) + span {
+    ${({ danger, darkMode }) => danger ? react.css`
+            border-color: ${colors.accents.danger};
+          ` : darkMode ? react.css`
+            background-color: ${colors.baseColors.grey2};
+            border-color: ${colors.baseColors.grey4};
+          ` : react.css`
+            background-color: ${getOpacity(colors.baseColors.grey7, 40)};
+            border-color: ${colors.baseColors.grey3};
+          `}
+  }
+`;
+var StyledCheckbox = styled18__default.default.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__default.default.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 ? 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) {
+    const bgColor = danger ? colors.accents.danger : colors.baseColors.primaryPurple;
+    return react.css`
+        background-color: ${bgColor};
+        border: 1px solid ${bgColor};
+        color: ${colors.baseColors.white1};
+      `;
+  }
+  if (danger) {
+    return react.css`
+        background-color: ${getOpacity(colors.accents.danger, 10)};
+        border: 1px solid ${colors.accents.danger};
+      `;
+  }
+  return darkMode ? react.css`
+          background-color: ${colors.baseColors.grey1};
+          border: 1px solid ${colors.baseColors.grey4};
+        ` : react.css`
+          background-color: ${colors.baseColors.white1};
+          border: 1px solid ${colors.baseColors.grey7};
+        `;
+}}
+`;
+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 });
 };
@@ -302,7 +520,7 @@ var Textarea = ({ className, error, warning, ...rest }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(StyledTextarea, { className, error, warning, ...rest });
 };
 var Textarea_default = Textarea;
-var StyledTextarea = styled16__default.default.textarea`
+var StyledTextarea = styled18__default.default.textarea`
   ${baseInputStyles}
   resize: vertical;
   min-height: 80px;
@@ -330,7 +548,7 @@ var Tab = ({
   );
 };
 var Tab_default = Tab;
-var StyledTab = styled16__default.default.div`
+var StyledTab = styled18__default.default.div`
   display: inline-block;
   padding: 8px 16px;
   user-select: none;
@@ -351,7 +569,7 @@ var StyledTab = styled16__default.default.div`
     }
   `}
 `;
-var HelperText = styled16__default.default.div`
+var HelperText = styled18__default.default.div`
   margin-top: 4px;
   font-size: ${typography.fontSize.xs}px;
   color: ${({ error, warning }) => {
@@ -391,7 +609,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 = styled16__default.default.div`
+var Badge = styled18__default.default.div`
   display: inline-flex;
   padding: 8px 28px;
   border-radius: 100px;
@@ -426,7 +644,7 @@ function UserAvatar({
   return /* @__PURE__ */ jsxRuntime.jsx(ColourAvatar, { badgeColor, size, children: initials });
 }
 var UserAvatar_default = UserAvatar;
-var ColourAvatar = styled16__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%;
@@ -440,12 +658,12 @@ var ColourAvatar = styled16__default.default.div`
   font-weight: ${FONT_WEIGHTS.normal};
   flex-shrink: 0;
 `;
-var ProfileAvatar = styled16__default.default(ColourAvatar)`
+var ProfileAvatar = styled18__default.default(ColourAvatar)`
   color: #fff;
   background: ${colors.gradients.gradient1};
   border: none;
   border-radius: 999px;
-  line-height: 138%;
+  padding-top: 2px;
   margin-bottom: 12px;
 `;
 var FormField = ({
@@ -485,7 +703,7 @@ var FormField = ({
     displayText && /* @__PURE__ */ jsxRuntime.jsx(HelperText, { error: hasError, warning: hasWarning, children: displayText })
   ] });
 };
-var FormFieldWrapper = styled16__default.default.div`
+var FormFieldWrapper = styled18__default.default.div`
   display: flex;
   flex-direction: column;
   
@@ -533,7 +751,7 @@ var FormFieldTextarea = ({
     displayText && /* @__PURE__ */ jsxRuntime.jsx(HelperText, { error: hasError, warning: hasWarning, children: displayText })
   ] });
 };
-var FormFieldWrapper2 = styled16__default.default.div`
+var FormFieldWrapper2 = styled18__default.default.div`
   display: flex;
   flex-direction: column;
   
@@ -544,16 +762,16 @@ var FormFieldWrapper2 = styled16__default.default.div`
   }
 `;
 var FormFieldTextarea_default = FormFieldTextarea;
-var SearchContainer = styled16__default.default.div`
+var SearchContainer = styled18__default.default.div`
   width: ${({ width }) => typeof width === "number" ? `${width}px` : width || "208px"};
 `;
-var InputWrapper = styled16__default.default.div`
+var InputWrapper = styled18__default.default.div`
   position: relative;
   width: 100%;
   display: flex;
   align-items: center;
 `;
-var IconWrapper = styled16__default.default.div`
+var IconWrapper = styled18__default.default.div`
   position: absolute;
   left: 17px;
   top: 50%;
@@ -565,7 +783,7 @@ var IconWrapper = styled16__default.default.div`
   pointer-events: none;
   z-index: 2;
 `;
-var StyledInput2 = styled16__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"};
@@ -577,7 +795,7 @@ var StyledInput2 = styled16__default.default(Input_default)`
     padding-left: ${({ hasIcon }) => hasIcon ? "43px" : "16px"};
   }
 `;
-var ClearButton = styled16__default.default.button`
+var ClearButton = styled18__default.default.button`
   position: absolute;
   right: 8px;
   top: 50%;
@@ -603,7 +821,7 @@ var ClearButton = styled16__default.default.button`
     border-radius: 4px;
   }
 `;
-var ClearIcon = styled16__default.default.svg`
+var ClearIcon = styled18__default.default.svg`
   width: 16px;
   height: 16px;
   stroke-width: 2;
@@ -653,7 +871,7 @@ function TableElement({ children, ...rest }) {
   return /* @__PURE__ */ jsxRuntime.jsx(StyledTable, { ...rest, children });
 }
 var Table_default = TableElement;
-var StyledTable = styled16__default.default.table`
+var StyledTable = styled18__default.default.table`
   width: 100%;
   border-collapse: separate;
   border-spacing: 0 4px;
@@ -662,7 +880,7 @@ function TableHeader({ alignRight, children, ...rest }) {
   return /* @__PURE__ */ jsxRuntime.jsx(StyledTableHeader, { alignRight, ...rest, children });
 }
 var TableHeader_default = TableHeader;
-var StyledTableHeader = styled16__default.default.th`
+var StyledTableHeader = styled18__default.default.th`
   padding-bottom: 12px;
   text-align: ${({ alignRight }) => alignRight ? "right" : "left"};
   font-size: ${FONT_SIZES.xs}px;
@@ -674,17 +892,17 @@ function TableCell({ children, colSpan, ...rest }) {
   return /* @__PURE__ */ jsxRuntime.jsx(StyledTableCell, { colSpan, ...rest, children });
 }
 var TableCell_default = TableCell;
-var StyledTableCell = styled16__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 = styled16__default.default.tr`
+var StyledTableRow = styled18__default.default.tr`
   /* Base row styling */
 `;
-var TableRowWrapper = styled16__default.default.div`
+var TableRowWrapper = styled18__default.default.div`
   border-radius: 6px;
   border: 1px solid ${colors.baseColors.grey7};
   display: flex;
@@ -692,16 +910,16 @@ var TableRowWrapper = styled16__default.default.div`
   justify-content: space-between;
   padding: 12px 24px;
 `;
-var CheckboxWrapper = styled16__default.default.div`
+var CheckboxWrapper2 = styled18__default.default.div`
   display: flex;
   align-items: center;
 `;
-var ActionsWrapper = styled16__default.default.div`
+var ActionsWrapper = styled18__default.default.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
 `;
-var AlignedTableCell = styled16__default.default(TableCell_default)`
+var AlignedTableCell = styled18__default.default(TableCell_default)`
   padding-top: 12px;
   padding-bottom: 12px;
   padding-left: ${({ alignRight }) => alignRight ? "0" : "24px"};
@@ -713,29 +931,29 @@ var AlignedTableCell = styled16__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 = styled16__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 = styled16__default.default.div`
+var TableWrapper = styled18__default.default.div`
   margin-top: 32px;
 `;
-var EmptyState = styled16__default.default.div`
+var EmptyState = styled18__default.default.div`
   padding: 24px;
   text-align: center;
   display: flex;
   flex-direction: column;
   gap: 8px;
 `;
-var EmptyHeader = styled16__default.default.div`
+var EmptyHeader = styled18__default.default.div`
   font-size: 26px;
   font-weight: 700;
   color: ${colors.baseColors.darkBlue1};
 `;
-var EmptySubheader = styled16__default.default.div`
+var EmptySubheader = styled18__default.default.div`
   font-size: 12px;
   font-weight: 500;
   color: ${colors.baseColors.grey3};
@@ -804,7 +1022,7 @@ function Table({
       const isSelected = selectedRows.has(rowKey);
       if (rowLayout === "spaced") {
         return /* @__PURE__ */ jsxRuntime.jsx(TableRow_default, { children: /* @__PURE__ */ jsxRuntime.jsx(TableCell_default, { colSpan: totalColumns, children: /* @__PURE__ */ jsxRuntime.jsxs(TableRowWrapper, { children: [
-          showCheckboxes && /* @__PURE__ */ jsxRuntime.jsx(CheckboxWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          showCheckboxes && /* @__PURE__ */ jsxRuntime.jsx(CheckboxWrapper2, { children: /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
               type: "checkbox",
@@ -847,6 +1065,8 @@ 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;