@oxide/design-system 2.0.0 → 2.0.1--canary.8209c27.0

package/components/dist/index.d.ts

@@ -24,7 +24,15 @@ declare const SmallScreenOutline: ({ toc, activeItem, className, }: {
     className?: string | undefined;
 }) => react_jsx_runtime.JSX.Element | null;
 
-declare function useDelegatedReactRouterLinks(nodeRef: React.RefObject<HTMLElement>, key: string): void;
+interface Path {
+    pathname: string;
+    search: string;
+    hash: string;
+}
+type To = string | Partial<Path>;
+declare function useDelegatedReactRouterLinks(
+/** Pass in the result of `useNavigate()` in the calling application. */
+navigate: (to: To) => void, nodeRef: React.RefObject<HTMLElement>, key: string): void;
 
 declare const highlight: (block: Block) => Promise<Block>;
 declare const attrs: {

package/components/dist/index.js

@@ -115,18 +115,18 @@ import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var Link16Icon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs2(
   "svg",
   {
+    xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     viewBox: "0 0 16 16",
-    xmlns: "http://www.w3.org/2000/svg",
     role: "img",
     "aria-labelledby": titleId,
     ...props,
     children: [
       title ? /* @__PURE__ */ jsx2("title", { id: titleId, children: title }) : null,
       /* @__PURE__ */ jsxs2("g", { fill: "currentColor", children: [
-        /* @__PURE__ */ jsx2("path", { d: "m6.586 12.243 1.59-1.591a.75.75 0 0 1 1.061 0l.354.353a.75.75 0 0 1 0 1.06L8 13.658A4 4 0 0 1 2.343 8l1.591-1.591a.75.75 0 0 1 1.06 0l.354.354a.75.75 0 0 1 0 1.06l-1.59 1.591a2 2 0 1 0 2.828 2.829ZM12.066 9.591a.75.75 0 0 1-1.06 0l-.354-.354a.75.75 0 0 1 0-1.06l1.59-1.591a2 2 0 1 0-2.828-2.829l-1.59 1.591a.75.75 0 0 1-1.061 0l-.354-.353a.75.75 0 0 1 0-1.06L8 2.342A4 4 0 0 1 13.657 8l-1.591 1.591Z" }),
-        /* @__PURE__ */ jsx2("path", { d: "M9.945 5.702a.75.75 0 0 0-1.061 0L5.702 8.884a.75.75 0 0 0 0 1.06l.353.354a.75.75 0 0 0 1.061 0l3.182-3.182a.75.75 0 0 0 0-1.06l-.353-.354Z" })
+        /* @__PURE__ */ jsx2("path", { d: "m6.586 12.243 1.59-1.591a.75.75 0 0 1 1.061 0l.354.353a.75.75 0 0 1 0 1.06L8 13.658A4 4 0 0 1 2.343 8l1.591-1.591a.75.75 0 0 1 1.06 0l.354.354a.75.75 0 0 1 0 1.06l-1.59 1.591a2 2 0 1 0 2.828 2.829M12.066 9.591a.75.75 0 0 1-1.06 0l-.354-.354a.75.75 0 0 1 0-1.06l1.59-1.591a2 2 0 1 0-2.828-2.829l-1.59 1.591a.75.75 0 0 1-1.061 0l-.354-.353a.75.75 0 0 1 0-1.06L8 2.342A4 4 0 0 1 13.657 8z" }),
+        /* @__PURE__ */ jsx2("path", { d: "M9.945 5.702a.75.75 0 0 0-1.061 0L5.702 8.884a.75.75 0 0 0 0 1.06l.353.354a.75.75 0 0 0 1.061 0l3.182-3.182a.75.75 0 0 0 0-1.06z" })
       ] })
     ]
   }
@@ -142,10 +142,10 @@ var Checkmark12Icon = ({
 }) => /* @__PURE__ */ jsxs3(
   "svg",
   {
+    xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
-    xmlns: "http://www.w3.org/2000/svg",
     role: "img",
     "aria-labelledby": titleId,
     ...props,
@@ -154,10 +154,10 @@ var Checkmark12Icon = ({
       /* @__PURE__ */ jsx3(
         "path",
         {
+          fill: "currentColor",
           fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M10.492 2.651c.28.242.31.665.067.944L5.447 9.463a.667.667 0 0 1-.974.035L1.475 6.516a.667.667 0 0 1 0-.946l.237-.235a.667.667 0 0 1 .94 0l2.24 2.226L9.3 2.501a.667.667 0 0 1 .938-.068l.253.218Z",
-          fill: "currentColor"
+          d: "M10.492 2.651c.28.242.31.665.067.944L5.448 9.463a.667.667 0 0 1-.974.035L1.475 6.516a.667.667 0 0 1 0-.946l.237-.235a.667.667 0 0 1 .94 0l2.24 2.226L9.3 2.501a.667.667 0 0 1 .938-.068z",
+          clipRule: "evenodd"
         }
       )
     ]
@@ -174,10 +174,10 @@ var DirectionRightIcon = ({
 }) => /* @__PURE__ */ jsxs4(
   "svg",
   {
+    xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
-    xmlns: "http://www.w3.org/2000/svg",
     role: "img",
     "aria-labelledby": titleId,
     ...props,
@@ -186,8 +186,8 @@ var DirectionRightIcon = ({
       /* @__PURE__ */ jsx4(
         "path",
         {
-          d: "M8.807 6.597a.667.667 0 0 0 0-1.194l-5.842-2.92A.667.667 0 0 0 2 3.079v5.842c0 .496.522.818.965.596l5.842-2.92Z",
-          fill: "currentColor"
+          fill: "currentColor",
+          d: "M8.807 6.597a.667.667 0 0 0 0-1.194l-5.842-2.92A.667.667 0 0 0 2 3.079v5.842c0 .496.522.818.965.596z"
         }
       )
     ]
@@ -204,10 +204,10 @@ var SelectArrows6Icon = ({
 }) => /* @__PURE__ */ jsxs5(
   "svg",
   {
+    xmlns: "http://www.w3.org/2000/svg",
     width: 6,
     height: 14,
     viewBox: "0 0 6 14",
-    xmlns: "http://www.w3.org/2000/svg",
     role: "img",
     "aria-labelledby": titleId,
     ...props,
@@ -216,10 +216,10 @@ var SelectArrows6Icon = ({
       /* @__PURE__ */ jsx5(
         "path",
         {
+          fill: "currentColor",
           fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M3.322.536a.375.375 0 0 0-.644 0L.341 4.432C.19 4.682.37 5 .662 5h4.676a.375.375 0 0 0 .321-.568L3.322.536Zm-.644 12.928a.375.375 0 0 0 .644 0l2.337-3.896A.375.375 0 0 0 5.338 9H.662a.375.375 0 0 0-.321.568l2.337 3.896Z",
-          fill: "currentColor"
+          d: "M3.322.536a.375.375 0 0 0-.644 0L.341 4.432C.19 4.682.37 5 .662 5h4.676a.375.375 0 0 0 .321-.568zm-.644 12.928a.375.375 0 0 0 .644 0l2.337-3.896A.375.375 0 0 0 5.338 9H.662a.375.375 0 0 0-.321.568z",
+          clipRule: "evenodd"
         }
       )
     ]
@@ -267,7 +267,6 @@ var Table_default = Table;
 
 // components/src/asciidoc/TableOfContents.tsx
 import * as Accordion from "@radix-ui/react-accordion";
-import { Link } from "@remix-run/react";
 import cn3 from "classnames";
 import { Fragment as Fragment2, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -434,9 +433,9 @@ var DesktopOutline = ({
           "data-level": item.level,
           className: cn3("mb-0 list-none text-sans-sm", item.level > 2 && "hidden"),
           children: /* @__PURE__ */ jsx8(
-            Link,
+            "a",
             {
-              to: `#${item.id}`,
+              href: `#${item.id}`,
               className: cn3(
                 "block border-l py-[4px] pr-4",
                 activeItem === item.id ? "active text-accent-secondary border-accent-secondary hover:text-accent" : "text-tertiary border-secondary hover:text-secondary"
@@ -471,9 +470,9 @@ var SmallScreenOutline = ({
           "data-level": item.level,
           className: cn3("list-none text-sans-sm", item.level > 2 && "hidden"),
           children: /* @__PURE__ */ jsx8(
-            Link,
+            "a",
             {
-              to: `#${item.id}`,
+              href: `#${item.id}`,
               onClick: () => setValue(""),
               className: cn3(
                 "block border-l py-[4px]",
@@ -517,10 +516,8 @@ var SmallScreenOutline = ({
 };
 
 // components/src/asciidoc/use-delegated-links.ts
-import { useNavigate } from "@remix-run/react";
 import { useEffect as useEffect2 } from "react";
-function useDelegatedReactRouterLinks(nodeRef, key) {
-  const navigate = useNavigate();
+function useDelegatedReactRouterLinks(navigate, nodeRef, key) {
   useEffect2(() => {
     const node = nodeRef.current;
     const handler = (event) => {