sellmate-design-system-react 4.1.0 → 4.3.0

package/dist/index.d.ts

@@ -33,6 +33,7 @@ export * from './components/SGuide';
 export * from './components/SConfirmModal';
 export * from './components/SActionModal';
 export * from './components/SLoadingModal';
+export * from './components/SDrawer';
 export * from './components/SModal';
 export * from './components/SGnb';
 export * from './components/SLayout';

package/dist/index.js

@@ -3617,9 +3617,10 @@ var SExpansionItem = /* @__PURE__ */ forwardRef(
         className: cn(
           "group/expansion-item relative overflow-hidden bg-(--cmp-listExpansionItem-title-bg-default)",
           !bordered && "border-b border-(--cmp-listExpansionItem-border-default)",
-          // TODO: expansionItem/bordered/radius 및 border intent 토큰 생성 후 고정값을 토큰으로 교체한다.
-          bordered && "rounded-[8px] border border-[#E1E1E1] hover:border-[#AAAAAA] [&:has(>button:hover)]:border-[#AAAAAA]",
-          bordered && isExpanded && "!border-[#93C4FF]",
+          // 보더 색은 시맨틱 토큰(border-default → hover strong → 펼침 accentLight)을 쓴다.
+          // TODO: expansionItem/bordered/radius 토큰 생성 후 rounded 고정값도 토큰으로 교체한다.
+          bordered && "rounded-[8px] border border-border-default hover:border-border-strong [&:has(>button:hover)]:border-border-strong",
+          bordered && isExpanded && "!border-border-accentLight",
           className
         ),
         ...rest,
@@ -6571,6 +6572,170 @@ function SLoadingModal({
     }
   );
 }
+var CLOSE_ANIMATION_DURATION2 = 300;
+function SDrawer({
+  open,
+  onOpenChange,
+  onClose,
+  persistent = false,
+  title = "",
+  width = 572,
+  footerLeft,
+  button,
+  children,
+  className,
+  style
+}) {
+  const [shaking, setShaking] = useState(false);
+  const [rendered, setRendered] = useState(() => Boolean(open));
+  const [entered, setEntered] = useState(false);
+  const [portalContainer, setPortalContainer] = useState(null);
+  const backdropPointerDownRef = useRef(false);
+  const contentRef = useRef(null);
+  const stackRegistrationRef = useRef(null);
+  const [layerIndex, setLayerIndex] = useState(null);
+  useEffect(() => {
+    if (open) {
+      setRendered(true);
+      return;
+    }
+    if (!rendered) return;
+    const timer = window.setTimeout(() => setRendered(false), CLOSE_ANIMATION_DURATION2);
+    return () => window.clearTimeout(timer);
+  }, [open, rendered]);
+  useEffect(() => {
+    if (!open) {
+      setEntered(false);
+      return;
+    }
+    setEntered(false);
+    const frame = requestAnimationFrame(() => setEntered(true));
+    return () => cancelAnimationFrame(frame);
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const registration = registerModalStackEntry();
+    stackRegistrationRef.current = registration;
+    setLayerIndex(registration.layerIndex);
+    return () => {
+      registration.unregister();
+      if (stackRegistrationRef.current === registration) stackRegistrationRef.current = null;
+    };
+  }, [open]);
+  const triggerShake = useCallback(() => {
+    setShaking(false);
+    requestAnimationFrame(() => setShaking(true));
+  }, []);
+  const guardClose = persistent ? (event) => {
+    event.preventDefault();
+    if (stackRegistrationRef.current?.isTop()) triggerShake();
+  } : void 0;
+  const handleBackdropInteraction = () => {
+    if (persistent) {
+      if (stackRegistrationRef.current?.isTop()) triggerShake();
+      return;
+    }
+    onOpenChange?.(false);
+  };
+  const modalHost = getModalHost();
+  return /* @__PURE__ */ jsx(RDialog.Root, { open, onOpenChange, children: /* @__PURE__ */ jsx(RDialog.Portal, { container: modalHost, forceMount: rendered ? true : void 0, children: /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-0", style: { zIndex: layerIndex ?? 0 }, children: [
+    /* @__PURE__ */ jsx(
+      RDialog.Overlay,
+      {
+        forceMount: rendered ? true : void 0,
+        className: "pointer-events-auto absolute inset-0 bg-black/40 data-[state=open]:animate-overlay-in data-[state=closed]:animate-overlay-out",
+        style: { zIndex: 0, animationFillMode: "forwards" },
+        onPointerDown: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          backdropPointerDownRef.current = true;
+          handleBackdropInteraction();
+        },
+        onClick: (event) => {
+          event.stopPropagation();
+          if (backdropPointerDownRef.current) {
+            backdropPointerDownRef.current = false;
+            return;
+          }
+          handleBackdropInteraction();
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      RDialog.Content,
+      {
+        forceMount: rendered ? true : void 0,
+        ref: contentRef,
+        className: "pointer-events-auto absolute inset-y-0 right-0 w-fit max-w-full outline-none",
+        onOpenAutoFocus: (event) => {
+          event.preventDefault();
+          contentRef.current?.focus({ preventScroll: true });
+        },
+        onEscapeKeyDown: guardClose,
+        onPointerDownOutside: guardClose,
+        onInteractOutside: guardClose,
+        children: [
+          /* @__PURE__ */ jsx(RDialog.Title, { className: "sr-only", children: title || "Drawer" }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "pointer-events-auto relative flex h-full max-w-full translate-x-full flex-col overflow-hidden bg-[var(--cmp-drawer-bg)] shadow-[var(--shadow-overlay)] transition-transform duration-300 ease-out data-[state=open]:translate-x-0 data-[state=closed]:translate-x-full",
+                shaking && "animate-drawer-shake",
+                className
+              ),
+              "data-state": open && entered ? "open" : "closed",
+              style: { width, ...style },
+              onAnimationEnd: (event) => {
+                if (event.animationName === "drawer-shake") setShaking(false);
+              },
+              children: [
+                /* @__PURE__ */ jsxs("header", { className: "relative flex flex-shrink-0 items-center gap-[var(--cmp-overlay-header-gap)] bg-[var(--cmp-overlay-header-bg)] px-[var(--cmp-overlay-header-paddingX)] py-[var(--cmp-overlay-header-paddingY)]", children: [
+                  /* @__PURE__ */ jsx("h2", { className: "m-0 whitespace-nowrap text-[16px] font-bold leading-[26px] text-[color:var(--cmp-overlay-header-title-color)]", children: title }),
+                  /* @__PURE__ */ jsx(
+                    SGhostButton,
+                    {
+                      icon: "close",
+                      ariaLabel: "\uB2EB\uAE30",
+                      onClick: () => {
+                        onClose?.();
+                        onOpenChange?.(false);
+                      },
+                      className: "absolute right-[12px] top-[12px]"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto border-t border-solid border-[color:var(--cmp-drawer-body-border)]", children: /* @__PURE__ */ jsx(InsideModalProvider, { value: true, children: /* @__PURE__ */ jsx(PortalContainerProvider, { value: portalContainer, children }) }) }),
+                (button || footerLeft) && /* @__PURE__ */ jsxs("footer", { className: "flex flex-shrink-0 items-center justify-end gap-[var(--cmp-overlay-footer-gap)] bg-[var(--cmp-overlay-footer-bg-default)] px-[var(--cmp-overlay-footer-paddingX)] py-[var(--cmp-overlay-footer-paddingY)] shadow-[var(--shadow-overlay)]", children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center justify-between", children: footerLeft }),
+                  button && /* @__PURE__ */ jsx(
+                    SButton,
+                    {
+                      color: button.color ?? "primary",
+                      outline: button.outline,
+                      size: button.size ?? "md",
+                      disabled: button.disabled,
+                      onClick: () => button.onClick?.(),
+                      label: button.label ?? "\uD655\uC778"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: setPortalContainer,
+              className: "pointer-events-auto fixed left-0 top-0",
+              style: { zIndex: 2 }
+            }
+          )
+        ]
+      }
+    )
+  ] }) }) });
+}
 var EXIT_DURATION = 300;
 var EXIT_BUFFER = 100;
 var SModalRefImpl = class {
@@ -6933,6 +7098,10 @@ var GNB_RAIL_WIDTH = 68;
 var GNB_FOLD_MS = 200;
 var GNB_EXPAND_MS = 200;
 var GNB_MENU_WIDTH = 240;
+var GNB_FULL_LOGO_WIDTH = 140;
+var GNB_TOP_ICON_GAP = 8;
+var GNB_TOP_ICON_SIZE = 24;
+var GNB_FULL_LOGO_WIDTH_NO_LAUNCHER = GNB_FULL_LOGO_WIDTH + GNB_TOP_ICON_SIZE + GNB_TOP_ICON_GAP;
 function findGnbRailValue(items, value) {
   if (items.some((item) => item.value === value)) return value;
   return findGnbAncestors(items, value)[0];
@@ -7037,6 +7206,7 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
   onFoldChange,
   onLauncherClick,
   logo,
+  topContent,
   railFooter,
   menuFooter,
   foldedFooter,
@@ -7268,13 +7438,71 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
     ...style
   };
   const hideAfterSlide = (hidden) => `visibility 0s linear ${hidden ? `${GNB_FOLD_MS}ms` : "0s"}`;
-  const foldInline = !!logo;
   const sideFoldStyle = {
     opacity: railFolded ? 0 : 1,
     position: railFolded ? "absolute" : "static",
     visibility: railFolded ? "hidden" : "visible",
     transition: `opacity ${GNB_FOLD_MS}ms ease-out, ${hideAfterSlide(railFolded)}`
   };
+  const launcherButton = onLauncherClick ? /* @__PURE__ */ jsx(
+    SGhostButton,
+    {
+      icon: "launcher",
+      size: "xs",
+      intent: color === "dark" ? "inverse" : "default",
+      ariaLabel: "app launcher",
+      onClick: onLauncherClick,
+      className: "shrink-0",
+      style: { ...sideFoldStyle, marginRight: header === "fix" ? H.topGap : GNB_TOP_ICON_GAP }
+    },
+    "launcher"
+  ) : null;
+  const foldButton = /* @__PURE__ */ jsx(
+    SGhostButton,
+    {
+      icon: "sidebar",
+      size: "xs",
+      intent: color === "dark" ? "inverse" : "default",
+      ariaLabel: "toggle navigation",
+      ariaPressed: folded,
+      onClick: handleFoldToggle,
+      className: cn("shrink-0", header === "fix" && "ml-auto")
+    },
+    "fold"
+  );
+  const logoBox = logo ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex shrink-0 items-center",
+      style: {
+        height: H.logoHeight,
+        ...header === "full" ? (
+          // full 은 전폭이라 로고 자리가 고정이다 — 폭 140px(디자인 스펙, 전용 토큰 없음)로 못 박아
+          // 로고 내용이 바뀌어도 오른쪽 topContent 시작점이 흔들리지 않게 한다.
+          // 런처가 없으면 그 자리(버튼 + 간격)를 로고가 이어받아, 런처 유무로 topContent 가 밀리지 않는다.
+          {
+            width: launcherButton ? GNB_FULL_LOGO_WIDTH : GNB_FULL_LOGO_WIDTH_NO_LAUNCHER,
+            marginLeft: H.topGap
+          }
+        ) : (
+          // fix 는 폴드가 ml-auto 로 밀려나므로(margin-left 를 못 쓴다) 로고 오른쪽에 최소 간격을 둔다
+          { marginRight: H.topGap }
+        ),
+        ...sideFoldStyle
+      },
+      children: logo
+    },
+    "logo"
+  ) : null;
+  const topContentBox = header === "full" && topContent ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex min-w-0 flex-1 items-center",
+      style: { marginLeft: H.topGap },
+      children: topContent
+    },
+    "topContent"
+  ) : null;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -7292,8 +7520,9 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
             className: "relative box-border flex shrink-0 items-center overflow-hidden",
             style: {
               height: H.topHeight,
-              // 인라인 간격은 컨테이너 gap 대신 각 요소 margin 으로 준다 — 런처↔폴드(8px)와
-              // 폴드↔로고(top-gap)를 다르게 두기 위함. 접히면 런처·로고가 흐름에서 빠져 margin 도 무의미해진다.
+              // 간격은 컨테이너 gap 대신 각 요소 margin 으로 준다 — 순서가 header 마다 달라
+              // 이웃 쌍마다 값이 다르기 때문(위 launcherButton/logoBox 주석).
+              // 접히면 런처·로고가 흐름에서 빠져 margin 도 무의미해진다.
               padding: `0 ${railFolded ? GNB_RAIL.padding : H.topPaddingX}`,
               borderBottom: `1px solid ${C.topBorder}`,
               backgroundColor: C.panelBg,
@@ -7302,90 +7531,16 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
               // 아이콘 버튼은 자체 ghostButton 토큰을 쓰므로, 이 색은 logo 슬롯 상속용
               color: C.itemColorDefault
             },
-            children: foldInline ? (
-              // 런처(있을 때)·폴드·로고를 흐름에 나란히 둔다 → 폴드 버튼이 (런처와) 로고 사이에 선다.
-              // 접히면 런처·로고가 페이드하며 흐름에서 빠지고(sideFoldStyle), 폴드 버튼만 남아 레일 가운데에 선다.
-              /* @__PURE__ */ jsxs(Fragment, { children: [
-                onLauncherClick && /* @__PURE__ */ jsx(
-                  SGhostButton,
-                  {
-                    icon: "launcher",
-                    size: "xs",
-                    intent: color === "dark" ? "inverse" : "default",
-                    ariaLabel: "app launcher",
-                    onClick: onLauncherClick,
-                    className: "shrink-0",
-                    style: { ...sideFoldStyle, marginRight: "8px" }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  SGhostButton,
-                  {
-                    icon: "sidebar",
-                    size: "xs",
-                    intent: color === "dark" ? "inverse" : "default",
-                    ariaLabel: "toggle navigation",
-                    ariaPressed: folded,
-                    onClick: handleFoldToggle,
-                    className: "shrink-0"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "flex shrink-0 items-center",
-                    style: { height: H.logoHeight, marginLeft: H.topGap, ...sideFoldStyle },
-                    children: logo
-                  }
-                )
-              ] })
-            ) : (
-              // 런처·로고는 좌측 그룹(흐름에서 빼 폭 축소 중 폴드 버튼을 밀어내지 않는다),
-              // 폴드 버튼은 우측 끝(ml-auto)이라 폭·패딩이 줄면 저절로 레일 가운데에 선다.
-              /* @__PURE__ */ jsxs(Fragment, { children: [
-                (onLauncherClick || logo) && /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: "absolute inset-y-0 flex items-center",
-                    style: {
-                      left: H.topPaddingX,
-                      gap: H.topGap,
-                      opacity: railFolded ? 0 : 1,
-                      transition: `opacity ${GNB_FOLD_MS}ms ease-out, ${hideAfterSlide(railFolded)}, transform ${GNB_FOLD_MS}ms ease-out`,
-                      // 메뉴와 같은 방향으로 빠지되, 좁은 레일 안에서 꼬리가 비치지 않게 페이드가 거리를 대신한다
-                      transform: railFolded ? `translateX(-${H.topPaddingX})` : "none",
-                      visibility: railFolded ? "hidden" : "visible"
-                    },
-                    children: [
-                      onLauncherClick && /* @__PURE__ */ jsx(
-                        SGhostButton,
-                        {
-                          icon: "launcher",
-                          size: "xs",
-                          intent: color === "dark" ? "inverse" : "default",
-                          ariaLabel: "app launcher",
-                          onClick: onLauncherClick,
-                          className: "shrink-0"
-                        }
-                      ),
-                      logo && /* @__PURE__ */ jsx("div", { className: "flex items-center", style: { height: H.logoHeight }, children: logo })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  SGhostButton,
-                  {
-                    icon: "sidebar",
-                    size: "xs",
-                    intent: color === "dark" ? "inverse" : "default",
-                    ariaLabel: "toggle navigation",
-                    ariaPressed: folded,
-                    onClick: handleFoldToggle,
-                    className: "ml-auto shrink-0"
-                  }
-                )
-              ] })
-            )
+            children: header === "fix" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              launcherButton,
+              logoBox,
+              foldButton
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              launcherButton,
+              foldButton,
+              logoBox,
+              topContentBox
+            ] })
           }
         ),
         /* @__PURE__ */ jsxs(
@@ -7879,10 +8034,10 @@ function SStepper({
                       fill: "none",
                       xmlns: "http://www.w3.org/2000/svg",
                       children: [
-                        /* @__PURE__ */ jsx("rect", { width: "1.6", height: "1", fill: "#888888" }),
-                        /* @__PURE__ */ jsx("rect", { x: "5", width: "3.3", height: "1", fill: "#888888" }),
-                        /* @__PURE__ */ jsx("rect", { x: "11.7", width: "3.3", height: "1", fill: "#888888" }),
-                        /* @__PURE__ */ jsx("rect", { x: "18.4", width: "1.6", height: "1", fill: "#888888" })
+                        /* @__PURE__ */ jsx("rect", { width: "1.6", height: "1", fill: "currentColor" }),
+                        /* @__PURE__ */ jsx("rect", { x: "5", width: "3.3", height: "1", fill: "currentColor" }),
+                        /* @__PURE__ */ jsx("rect", { x: "11.7", width: "3.3", height: "1", fill: "currentColor" }),
+                        /* @__PURE__ */ jsx("rect", { x: "18.4", width: "1.6", height: "1", fill: "currentColor" })
                       ]
                     }
                   )
@@ -8032,7 +8187,7 @@ var SField = /* @__PURE__ */ forwardRef(function SField2({
                 }
               ),
               /* @__PURE__ */ jsx("span", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: label }),
-              (labelTooltip !== "" || labelTooltipProps) && /* @__PURE__ */ jsx("span", { className: "shrink-0", style: { marginLeft: s.labelGap }, children: /* @__PURE__ */ jsx(
+              (labelTooltip !== "" || labelTooltipProps) && /* @__PURE__ */ jsx("span", { className: "shrink-0 flex items-center", style: { marginLeft: s.labelGap }, children: /* @__PURE__ */ jsx(
                 STooltip2,
                 {
                   message: labelTooltip !== "" ? [labelTooltip] : void 0,
@@ -12277,7 +12432,7 @@ var SChipInput = /* @__PURE__ */ forwardRef(function SChipInput2({
                     "span",
                     {
                       className: "s-chip-input__divider shrink-0",
-                      style: { width: 1, height: 12, backgroundColor: "#E1E1E1" }
+                      style: { width: 1, height: 12, backgroundColor: "var(--color-divider-default)" }
                     }
                   ),
                   showMaxCount && /* @__PURE__ */ jsxs(
@@ -12339,7 +12494,7 @@ var SChipInput = /* @__PURE__ */ forwardRef(function SChipInput2({
                             role: "option",
                             "aria-selected": selected || active,
                             className: "rounded-full",
-                            style: active ? { outline: "2px solid #0075FF", outlineOffset: 1 } : void 0,
+                            style: active ? { outline: "2px solid var(--color-border-accent)", outlineOffset: 1 } : void 0,
                             onMouseDown: (e) => {
                               e.preventDefault();
                               if (!selected) addChip(item);
@@ -13435,6 +13590,6 @@ function STimeRangePicker({
   );
 }
 
-export { BADGE_COLORS, BUTTON_COLORS, BUTTON_SIZES, COLOR_KEYS, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, ICONS, PAGE_BACKGROUNDS, SActionModal, SBadge, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCallout, SCard, SCheckbox, SChip2 as SChip, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDateRangePicker, SDivider, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDropdownButton2 as SDropdownButton, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGuide, SIcon, SInput, SKeyValueTable, SLayout, SLayoutContext, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoadingViewport, SModal, SNumberInput, SPage, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioGroup, SScrollArea, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SStepper, SSwitch, STEPPER_SIZES, STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, findGnbAncestors, findGnbRailValue, isColorKey, loading, resolveColor, useSLayout };
+export { BADGE_COLORS, BUTTON_COLORS, BUTTON_SIZES, COLOR_KEYS, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, ICONS, PAGE_BACKGROUNDS, SActionModal, SBadge, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCallout, SCard, SCheckbox, SChip2 as SChip, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDateRangePicker, SDivider, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGuide, SIcon, SInput, SKeyValueTable, SLayout, SLayoutContext, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoadingViewport, SModal, SNumberInput, SPage, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioGroup, SScrollArea, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SStepper, SSwitch, STEPPER_SIZES, STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, findGnbAncestors, findGnbRailValue, isColorKey, loading, resolveColor, useSLayout };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map