@soul-refiner/design-system 0.2.133 → 0.2.134

package/dist/components/navigation/breadcrumb/breadcrumb.js

@@ -1,6 +1,7 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
+import Link from 'next/link';
 import { Box } from '../../';
 import { ChevronLeft, ChevronRight } from '../../../icons';
 const Breadcrumb = ({ children, previous }) => {
@@ -28,14 +29,14 @@ const Breadcrumb = ({ children, previous }) => {
     })));
 };
 const BreadcrumbItem = ({ avatar, children, href, icon, iconColor = 'blue', onClick, }) => {
-    return (React.createElement(Item, { as: href ? 'a' : 'div', href: href, onClick: onClick, "$type": icon ? 'icon' : avatar ? 'avatar' : 'text', "$iconColor": `hue-${iconColor}-1` },
+    return (React.createElement(Item, { href: href || '#', onClick: onClick, "$type": icon ? 'icon' : avatar ? 'avatar' : 'text', "$iconColor": `hue-${iconColor}-1`, scroll: false },
         icon && (React.createElement(IconWrapper, { "$color": iconColor }, React.cloneElement(icon, { color: `hue-${iconColor}-1`, size: 24 }))),
         avatar,
         children));
 };
 Breadcrumb.Item = BreadcrumbItem;
 BreadcrumbItem.displayName = 'Breadcrumb.Item';
-const Item = styled.div `
+const Item = styled(Link) `
   display: flex;
   flex-flow: row nowrap;
   align-items: center;

package/dist/components/navigation/inner/inner.d.ts

@@ -9,7 +9,7 @@ declare const InnerNav: {
         displayName: string;
     };
     Dropdown: {
-        ({ children, href, icon, label, open, sx, onClick, }: InnerNavDropdownProps): React.JSX.Element;
+        ({ children, icon, label, open, sx, onClick, }: InnerNavDropdownProps): React.JSX.Element;
         displayName: string;
     };
     BackButton: {
@@ -63,7 +63,6 @@ export interface InnerNavItemProps {
  * Dropdown
  */
 export interface InnerNavDropdownProps extends React.PropsWithChildren {
-    href?: string;
     icon?: React.ReactElement;
     label: React.ReactNode;
     open: boolean;

package/dist/components/navigation/inner/inner.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import Link from 'next/link';
 import { Button } from '../../../components/actions/button';
 import { Drawer } from '../../../components/surfaces/drawer';
 import { ChevronDown, ChevronLeft, ChevronUp, Plus } from '../../../icons';
@@ -53,12 +54,11 @@ const NavWrapper = styled.nav `
   border-right: 1px solid var(--color-grey-9);
 `;
 const InnerNavItem = ({ active, href, icon, label, sx }) => {
-    const isAnchor = !!href;
-    return (React.createElement(Item, { "$active": active, "$sx": sx, as: isAnchor ? 'a' : 'button', href: href },
+    return (React.createElement(Item, { "$active": active, "$sx": sx, href: href || '#', scroll: false },
         icon,
         label));
 };
-const Item = styled.button `
+const Item = styled(Link) `
   padding: 14px 16px;
   display: flex;
   gap: 16px;
@@ -85,10 +85,9 @@ const Item = styled.button `
 `;
 InnerNav.Item = InnerNavItem;
 InnerNavItem.displayName = 'InnerNav.Item';
-const InnerNavDropdown = ({ children, href, icon, label, open, sx, onClick, }) => {
-    const isAnchor = !!href;
+const InnerNavDropdown = ({ children, icon, label, open, sx, onClick, }) => {
     return (React.createElement(React.Fragment, null,
-        React.createElement(Item, { "$active": false, "$sx": sx, as: isAnchor ? 'a' : 'button', href: !!onClick ? undefined : href, onClick: onClick },
+        React.createElement(DropdownItem, { "$active": false, "$sx": sx, onClick: onClick },
             icon,
             React.createElement(DropdownTriggerWrapper, null,
                 label,
@@ -108,15 +107,40 @@ const DropdownTriggerWrapper = styled.div `
   align-items: center;
   flex: 1;
 `;
+const DropdownItem = styled.a `
+  padding: 14px 16px;
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  border-radius: 8px;
+  font-family: var(--font-inter);
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--color-blue-2);
+  cursor: pointer;
+  svg {
+    fill: var(--color-blue-2);
+  }
+  ${({ $active }) => $active
+    ? `
+    background-color: var(--color-primary-blue-3);`
+    : `
+    &:hover {
+      background-color: var(--color-primary-blue-4);
+    }`}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
 InnerNav.Dropdown = InnerNavDropdown;
 InnerNavDropdown.displayName = 'InnerNav.Dropdown';
 const InnerNavBackButton = ({ href, label, sx }) => {
-    return (React.createElement(BackButton, { href: href, "$sx": sx },
+    return (React.createElement(BackButton, { href: href, "$sx": sx, scroll: false },
         React.createElement("div", null,
             React.createElement(ChevronLeft, { size: 24 })),
         label));
 };
-const BackButton = styled.a `
+const BackButton = styled(Link) `
   display: flex;
   align-items: center;
   gap: 8px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.133",
+  "version": "0.2.134",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {