@servicetitan/navigation 4.0.0 → 4.1.0

package/src/components/left-navigation/header-navigation-tiny.tsx

@@ -0,0 +1,65 @@
+import classNames from 'classnames';
+import { FC, ReactElement, ReactNode } from 'react';
+import * as Styles from './header-navigation-tiny.module.less';
+
+export interface HeaderNavigationTinyProps {
+    /** container class name */
+    className?: string;
+    /** extra navigation */
+    right?: ReactNode;
+    /** extra navigation container class name */
+    rightClassName?: string;
+    /** container id */
+    id?: string;
+    /** left content (usually used for logo) */
+    left?: ReactElement;
+    /** left container class name */
+    leftClassName?: string;
+    /** center content */
+    center?: ReactElement;
+    /** center container class name */
+    centerClassName?: string;
+    /** minimal width for navigation bar */
+    minWidth?: number;
+}
+
+export const HeaderNavigationTiny: FC<HeaderNavigationTinyProps> = ({
+    className,
+    id,
+    left,
+    leftClassName,
+    right,
+    rightClassName,
+    center,
+    centerClassName,
+    minWidth = 800,
+}) => {
+    return (
+        <div
+            className={classNames(Styles.headerTiny, className)}
+            style={{ minWidth: `${minWidth}px` }}
+            id={id}
+            data-cy="header-navigation"
+        >
+            <div className={classNames(Styles.heTopLeft, leftClassName)} data-cy="navigation-left">
+                {left}
+            </div>
+            <div
+                className={classNames(Styles.heTopCenter, centerClassName)}
+                data-cy="navigation-center"
+            >
+                {center}
+            </div>
+            <div
+                className={classNames(
+                    'd-f flex-row justify-content-end align-items-center',
+                    Styles.heTopRight,
+                    rightClassName
+                )}
+                data-cy="navigation-right"
+            >
+                {right}
+            </div>
+        </div>
+    );
+};

package/src/components/left-navigation/index.ts

@@ -0,0 +1,2 @@
+export * from './header-navigation-tiny';
+export * from './side-navigation';

package/src/components/{side-navigation → left-navigation}/side-navigation.module.less

@@ -111,7 +111,7 @@
     }
 }
 
-.navigation-icon {
+.navigation-icon[data-anv][data-anv] {
     height: 24px;
     width: 24px;
     color: inherit;
@@ -146,13 +146,13 @@
         background-color: @bg-color-hover;
     }
 
-    .options-icon {
+    .options-icon-wrapper {
         height: 24px;
         width: 24px;
         padding-left: @spacing-1;
         padding-right: @spacing-1;
 
-        & > span > svg {
+        .options-icon[data-anv][data-anv] > svg {
             height: 24px;
             width: 24px;
             color: @text-color;

package/src/components/{side-navigation → left-navigation}/side-navigation.module.less.d.ts

@@ -8,6 +8,7 @@ export const navigationItemCounter: string;
 export const navigationItemIconState: string;
 export const navigationItemText: string;
 export const optionsIcon: string;
+export const optionsIconWrapper: string;
 export const optionsItem: string;
 export const optionsItemText: string;
 export const sideNav: string;

package/src/components/{side-navigation → left-navigation}/side-navigation.tsx

@@ -160,8 +160,8 @@ export const SideNavigationOptionsToggle: FC<{
             className={classNames(Styles.optionsItem)}
             onClick={() => onExpandedChange(!expanded)}
         >
-            <div className={Styles.optionsIcon}>
-                <Icon svg={expanded ? SvgCollapse : SvgExpand} />
+            <div className={Styles.optionsIconWrapper}>
+                <Icon className={Styles.optionsIcon} svg={expanded ? SvgCollapse : SvgExpand} />
             </div>
 
             {!!expanded && <span className={Styles.optionsItemText}>Collapse Menu</span>}

package/src/components/links.tsx

@@ -0,0 +1,31 @@
+import { FC, useContext } from 'react';
+import { HeaderNavigationLinkProps, HeaderNavigationTriggerProps } from '../utils/navigation';
+import { NavigationLegacyContext } from '../utils/navigation-context';
+import {
+    HeaderNavigationLink as HeaderNavigationLinkLegacy,
+    HeaderNavigationTrigger as HeaderNavigationTriggerLegacy,
+} from './header-navigation/header-navigation-links';
+import {
+    HeaderNavigationLink as HeaderNavigationLinkModern,
+    HeaderNavigationTrigger as HeaderNavigationTriggerModern,
+} from './left-navigation/header-navigation-tiny-links';
+
+export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = props => {
+    const isLegacy = useContext(NavigationLegacyContext);
+
+    return isLegacy ? (
+        <HeaderNavigationLinkLegacy {...props} />
+    ) : (
+        <HeaderNavigationLinkModern {...props} />
+    );
+};
+
+export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = props => {
+    const isLegacy = useContext(NavigationLegacyContext);
+
+    return isLegacy ? (
+        <HeaderNavigationTriggerLegacy {...props} />
+    ) : (
+        <HeaderNavigationTriggerModern {...props} />
+    );
+};

package/src/components/profile-dropdown/profile-dropdown-stacked.stories.tsx

@@ -1,11 +1,9 @@
-import { NavLinkMock, withAnvil, withMemoryRouter } from '../../test/data.stories';
+import { withAnvil, withMemoryRouter } from '../../test/data.stories';
 import { HeaderNavigationStacked } from '../header-navigation';
 export * from './profile-dropdown.stories';
 import { ProfileDropdown } from './profile-dropdown';
 
-const withHeaderNavigationStacked = (Story: any) => (
-    <HeaderNavigationStacked navigationComponent={NavLinkMock} right={<Story />} />
-);
+const withHeaderNavigationStacked = (Story: any) => <HeaderNavigationStacked right={<Story />} />;
 
 export default {
     title: 'Navigation/ProfileDropdownStacked',

package/src/components/profile-dropdown/profile-dropdown-tiny.stories.tsx

@@ -1,10 +1,10 @@
-import { NavLinkMock, withAnvil, withMemoryRouter } from '../../test/data.stories';
-import { HeaderNavigationTiny } from '../header-navigation';
+import { withAnvil, withMemoryRouter } from '../../test/data.stories';
+import { HeaderNavigationTiny } from '../left-navigation';
 export * from './profile-dropdown.stories';
 import { ProfileDropdown } from './profile-dropdown';
 
 const withHeaderNavigationTiny = (Story: any) => (
-    <HeaderNavigationTiny className="border" navigationComponent={NavLinkMock} right={<Story />} />
+    <HeaderNavigationTiny className="border" right={<Story />} />
 );
 
 export default {

package/src/components/profile-dropdown/profile-dropdown.stories.tsx

@@ -1,10 +1,10 @@
 import { Button } from '@servicetitan/design-system';
-import { NavLinkMock, withAnvil, withMemoryRouter } from '../../test/data.stories';
+import { withAnvil, withMemoryRouter } from '../../test/data.stories';
 import { HeaderNavigation } from '../header-navigation';
 import { ProfileDropdown } from './profile-dropdown';
 
 const withHeaderNavigation = (Story: any) => (
-    <HeaderNavigation navigationComponent={NavLinkMock}>
+    <HeaderNavigation>
         <Story />
     </HeaderNavigation>
 );

package/src/components/profile-dropdown/profile-dropdown.tsx

@@ -18,7 +18,10 @@ import {
     useState,
 } from 'react';
 
-import { NavigationContext } from '../../utils/navigation-context';
+import {
+    NavigationComponentContext,
+    NavigationLegacyContext,
+} from '../../utils/navigation-context';
 import { CounterTag, CounterTagPropsType } from '../counter-tag';
 import * as Styles from './profile-dropdown.module.less';
 import { ProfileLogo } from './profile-icon';
@@ -46,7 +49,7 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
 }) => {
     const [avatarSource, setAvatarSource] = useState(imageSrc ?? '');
     const [avatarSourceError, setAvatarSourceError] = useState(false);
-    const { isLegacy } = useContext(NavigationContext);
+    const isLegacy = useContext(NavigationLegacyContext);
 
     useEffect(() => {
         const src = imageSrc ?? '';
@@ -208,7 +211,7 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
     onClick,
     ...rest
 }: ProfileDropdownLinkProps) => {
-    const { NavigationComponent } = useContext(NavigationContext);
+    const NavigationComponent = useContext(NavigationComponentContext);
 
     const clickHandler = (e: MouseEvent<any>) => {
         e.preventDefault();

package/src/index.ts

@@ -4,6 +4,7 @@ export * from './components/logo/logo-company-title';
 export * from './components/logo/logo-titan';
 export * from './components/logo/logo-titan-text';
 export * from './components/counter-tag';
-export * from './components/side-navigation';
+export * from './components/left-navigation';
+export * from './components/links';
 export * from './utils/navigation';
 export * from './utils/with-tooltip';

package/src/test/data-stories.module.less

@@ -1,6 +1,8 @@
-// temp fix to reset incorrect coloring from anvil2
+// emulate temp anvil2 hotfix from monolith
 .fix-icons {
-    :global(span[data-anv='icon'] > svg > path) {
-        fill: inherit !important;
+    [data-anv][data-anv] {
+        all: revert-layer;
+        line-height: revert-layer;
+        -webkit-font-smoothing: auto;
     }
 }

package/src/test/data.stories.tsx

@@ -37,8 +37,9 @@ import { forwardRef, useState } from 'react';
 // needed only for storybook and added in root dependencies
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { MemoryRouter, useHistory, useLocation } from 'react-router-dom';
-import { HeaderNavigationTrigger } from '../components/header-navigation';
+import { HeaderNavigationTrigger } from '../components/links';
 import { HeaderNavigationItemData, NavLinkComponentProps } from '../utils/navigation';
+import { NavigationComponentContext } from '../utils/navigation-context';
 import * as Styles from './data-stories.module.less';
 
 export const NavLinkMock = forwardRef<any, NavLinkComponentProps>(
@@ -69,7 +70,9 @@ export const NavLinkMock = forwardRef<any, NavLinkComponentProps>(
 
 export const withMemoryRouter = (Story: any) => (
     <MemoryRouter>
-        <Story />
+        <NavigationComponentContext.Provider value={NavLinkMock}>
+            <Story />
+        </NavigationComponentContext.Provider>
     </MemoryRouter>
 );
 

package/src/utils/navigation-context.tsx

@@ -8,11 +8,6 @@ export const DefaultNavLinkComponent: FC<NavLinkComponentProps> = ({
     ...props
 }) => <a {...props}>{children}</a>;
 
-export interface NavigationContextType {
-    NavigationComponent: FC<NavLinkComponentProps>;
-    isLegacy: boolean;
-}
-export const NavigationContext = createContext<NavigationContextType>({
-    NavigationComponent: DefaultNavLinkComponent,
-    isLegacy: false,
-});
+export const NavigationComponentContext =
+    createContext<FC<NavLinkComponentProps>>(DefaultNavLinkComponent);
+export const NavigationLegacyContext = createContext(false);

package/src/utils/navigation.ts

@@ -57,3 +57,50 @@ export interface NavLinkComponentPropsStrict {
 export interface NavLinkComponentProps extends NavLinkComponentPropsStrict {
     [key: string]: any;
 }
+
+export interface HeaderNavigationTriggerPropsStrict {
+    /** unique identifier */
+    id: string;
+    /** tooltip text */
+    tooltip?: string;
+    /** item description */
+    hint?: string;
+    /** container class name */
+    className?: string;
+    /** isActive */
+    isActive?: boolean;
+    /** counter shown for item */
+    counter?: CounterTagPropsType;
+    /** counter component class name */
+    counterClassName?: string;
+    /** icon component class name */
+    iconClassName?: string;
+    /** IconComponent custom icon component */
+    iconComponent?: FC;
+    /** iconName name of anvil icon */
+    iconName?: IconPropsStrict['name'];
+    /** svg icon (anvil2) of inactive item */
+    icon: IconProps['svg'] | undefined;
+    /** svg icon (anvil2) of active item */
+    iconActive: IconProps['svg'] | undefined;
+}
+
+export interface HeaderNavigationTriggerProps extends HeaderNavigationTriggerPropsStrict {
+    /** unstrict props */
+    [key: string]: any;
+}
+
+export interface HeaderNavigationLinkPropsStrict
+    extends Omit<HeaderNavigationTriggerPropsStrict, 'isActive'> {
+    /** link href */
+    to: string;
+    /** isActive */
+    isActive?: boolean | ((pathname: string) => boolean);
+    /** link html target */
+    target?: HTMLAttributeAnchorTarget;
+}
+
+export interface HeaderNavigationLinkProps extends HeaderNavigationLinkPropsStrict {
+    /** unstrict props */
+    [key: string]: any;
+}

package/dist/components/header-navigation/header-navigation-tiny.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"header-navigation-tiny.stories.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation-tiny.stories.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;;;;;;;AAcrC,wBAaE;AAEF,eAAO,MAAM,iBAAiB,+CAO7B,CAAC;AAQF,eAAO,MAAM,mBAAmB,+CA6D/B,CAAC;AAEF,eAAO,MAAM,6BAA6B,+CAgEzC,CAAC"}

package/dist/components/header-navigation/header-navigation-tiny.stories.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import SvgSearch from '@servicetitan/anvil2/assets/icons/material/round/search.svg';
-import SvgSettingsActive from '@servicetitan/anvil2/assets/icons/st/gnav_settings_active.svg';
-import SvgSettings from '@servicetitan/anvil2/assets/icons/st/gnav_settings_inactive.svg';
-import SvgRocketActive from '@servicetitan/anvil2/assets/icons/st/gnav_titan_advisor_active.svg';
-import SvgRocket from '@servicetitan/anvil2/assets/icons/st/gnav_titan_advisor_inactive.svg';
-import { Input, Stack } from '@servicetitan/design-system';
-import { Fragment } from 'react';
-import { CallsNavigationTrigger, NavLinkMock, SearchIcon, withAnvil, withMemoryRouter, } from '../../test/data.stories';
-import { LogoCompanyTitle } from '../logo/logo-company-title';
-import { LogoTitan, LogoTitanTitle } from '../logo/logo-titan-text';
-import { ProfileDropdown } from '../profile-dropdown/profile-dropdown';
-import * as Styles from './header-navigation-stories.module.less';
-import { HeaderNavigationLink, HeaderNavigationTiny } from './';
-export default {
-    title: 'Navigation/HeaderNavigationTiny',
-    component: HeaderNavigationTiny,
-    parameters: {},
-    decorators: [
-        withMemoryRouter,
-        withAnvil,
-        (Story) => (_jsx("div", { className: "border", style: { height: '500px' }, children: _jsx(Story, {}) })),
-    ],
-};
-export const defaultNavigation = () => (_jsx(HeaderNavigationTiny, { className: "border-bottom", left: _jsx(LogoCompanyTitle, { className: "m-l-1", size: "150" }), leftClassName: "d-f align-items-center", navigationComponent: NavLinkMock }));
-const TimeZoneOffset = () => (_jsx("div", { className: "fs-2 ff-default p-r-1", children: _jsx("span", { children: "EST (-9 hrs)" }) }));
-export const WithAllMonolithData = () => (_jsx(HeaderNavigationTiny, { className: "border-bottom", left: _jsx(LogoCompanyTitle, { className: "m-l-1", size: "150" }), leftClassName: "d-f align-items-center", navigationComponent: NavLinkMock, right: _jsxs(Fragment, { children: [_jsx(TimeZoneOffset, {}), _jsx(HeaderNavigationLink, { id: "search", to: "https://google.com", target: "_blank", iconComponent: SearchIcon, hint: "Search: for all the questions", tooltip: "Search", icon: SvgSearch, iconActive: SvgSearch }), _jsx(CallsNavigationTrigger, {}), _jsx(HeaderNavigationLink, { id: "titanAdvisor", to: "titanAdvisor", iconName: "rocket", iconClassName: Styles.rocketIcon, icon: SvgRocket, iconActive: SvgRocketActive }), _jsx(HeaderNavigationLink, { id: "settings", to: "settings", target: "_blank", iconName: "settings", "aria-label": "search", hint: "Settings", icon: SvgSettings, iconActive: SvgSettingsActive }), _jsxs(ProfileDropdown, { children: [_jsx(ProfileDropdown.Link, { id: "tasks", to: "https://googgle.com", counter: 10, children: "Task Management" }), _jsx(ProfileDropdown.Divider, {}), _jsxs(ProfileDropdown.Link, { id: "sign-out", to: "https://googgle.com", children: ["Sign Out", ' ', _jsx("span", { className: "c-neutral-100 m-l-half t-truncate", children: "James Bond" })] }), _jsx(ProfileDropdown.Section, { id: "userid", className: "c-neutral-100 fs-1", children: "User ID: 007" })] })] }), center: _jsx(Input, { placeholder: "Search smth", size: "xsmall", className: "w-100" }), centerClassName: "d-f align-items-center" }));
-export const WithAllMonolithDataCommercial = () => (_jsx(HeaderNavigationTiny, { className: "border-bottom", left: _jsxs(Stack, { alignItems: "center", children: [_jsx(LogoTitan, { mantleFill: "#2270EE", className: "p-x-half", size: 48 }), _jsx(LogoTitanTitle, { children: "Commercial" })] }), leftClassName: "d-f align-items-center", navigationComponent: NavLinkMock, right: _jsxs(Fragment, { children: [_jsx(TimeZoneOffset, {}), _jsx(HeaderNavigationLink, { id: "search", to: "https://google.com", target: "_blank", iconComponent: SearchIcon, hint: "Search: for all the questions", icon: SvgSearch, iconActive: SvgSearch }), _jsx(CallsNavigationTrigger, {}), _jsx(HeaderNavigationLink, { id: "titanAdvisor", to: "titanAdvisor", iconName: "rocket", iconClassName: Styles.rocketIcon, icon: SvgRocket, iconActive: SvgRocketActive }), _jsx(HeaderNavigationLink, { id: "settings", to: "settings", iconName: "settings", "aria-label": "search", hint: "Settings", icon: SvgSettings, iconActive: SvgSettingsActive }), _jsxs(ProfileDropdown, { children: [_jsx(ProfileDropdown.Link, { id: "tasks", to: "https://googgle.com", counter: 10, children: "Task Management" }), _jsx(ProfileDropdown.Divider, {}), _jsxs(ProfileDropdown.Link, { id: "sign-out", to: "https://googgle.com", children: ["Sign Out", ' ', _jsx("span", { className: "c-neutral-100 m-l-half t-truncate", children: "James Bond" })] }), _jsx(ProfileDropdown.Section, { id: "userid", className: "c-neutral-100 fs-1", children: "User ID: 007" })] })] }), center: _jsx(Input, { placeholder: "Search smth", size: "xsmall", className: "w-100" }), centerClassName: "d-f align-items-center" }));
-//# sourceMappingURL=header-navigation-tiny.stories.js.map

package/dist/components/header-navigation/header-navigation-tiny.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"header-navigation-tiny.stories.js","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation-tiny.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/side-navigation/icons.d.ts

@@ -1,7 +0,0 @@
-import { FC } from 'react';
-export declare const IconSideOptions: FC<{
-    expanded?: boolean;
-}>;
-export declare const IconSideSlim: () => import("react/jsx-runtime").JSX.Element;
-export declare const IconSideExpanded: () => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=icons.d.ts.map

package/dist/components/side-navigation/icons.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/side-navigation/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAwBtD,CAAC;AAEF,eAAO,MAAM,YAAY,+CAkBxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,+CAyB5B,CAAC"}

package/dist/components/side-navigation/icons.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const IconSideOptions = ({ expanded }) => (_jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M5 21C4.45 21 3.98 20.8 3.59 20.41C3.2 20.02 3 19.55 3 19V5C3 4.45 3.2 3.98 3.59 3.59C3.98 3.2 4.45 3 5 3H19C19.55 3 20.02 3.2 20.41 3.59C20.8 3.98 21 4.45 21 5V19C21 19.55 20.8 20.02 20.41 20.41C20.02 20.8 19.55 21 19 21H5ZM8 19V5H5V19H8ZM10 19H19V5H10V19Z", fill: "currentColor" }), expanded ? (_jsx("path", { d: "M16.54 14.19C16.71 14.38 16.71 14.66 16.54 14.85L16 15.46C15.9 15.56 15.77 15.62 15.62 15.62C15.48 15.62 15.35 15.56 15.25 15.46L12.46 12.33C12.29 12.14 12.29 11.86 12.46 11.67L15.25 8.54001C15.44 8.33001 15.81 8.33001 16 8.54001L16.54 9.15001C16.71 9.34001 16.71 9.62001 16.54 9.81001L14.58 12L16.54 14.19Z", fill: "currentColor" })) : (_jsx("path", { d: "M16.54 12.33L13.75 15.46C13.65 15.56 13.52 15.62 13.38 15.62C13.23 15.62 13.1 15.56 13 15.46L12.46 14.85C12.29 14.66 12.29 14.38 12.46 14.19L14.41 12L12.46 9.81001C12.29 9.62001 12.29 9.34001 12.46 9.15001L13 8.54001C13.19 8.33001 13.56 8.33001 13.75 8.54001L16.54 11.67C16.71 11.86 16.71 12.14 16.54 12.33Z", fill: "currentColor" }))] }));
-export const IconSideSlim = () => (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M3 6.375C3 4.51104 4.51104 3 6.375 3H17.625C19.489 3 21 4.51104 21 6.375V17.625C21 19.489 19.489 21 17.625 21H6.375C4.51104 21 3 19.489 3 17.625V6.375Z", stroke: "currentColor", strokeOpacity: "1", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M7 8L7 16", stroke: "currentColor", strokeOpacity: "1", strokeWidth: "2", strokeLinecap: "round" })] }));
-export const IconSideExpanded = () => (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M3 6.375C3 4.51104 4.51104 3 6.375 3H17.625C19.489 3 21 4.51104 21 6.375V17.625C21 19.489 19.489 21 17.625 21H6.375C4.51104 21 3 19.489 3 17.625V6.375Z", stroke: "currentColor", strokeOpacity: "1", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M7 8L7 16", stroke: "currentColor", strokeOpacity: "1", strokeWidth: "2", strokeLinecap: "round" }), _jsx("path", { d: "M11 8V16", stroke: "currentColor", strokeOpacity: "1", strokeWidth: "2", strokeLinecap: "round" })] }));
-//# sourceMappingURL=icons.js.map

package/dist/components/side-navigation/icons.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../../src/components/side-navigation/icons.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,eAAe,GAA+B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACzE,eACI,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,aAElC,eACI,CAAC,EAAC,mQAAmQ,EACrQ,IAAI,EAAC,cAAc,GACrB,EACD,QAAQ,CAAC,CAAC,CAAC,CACR,eACI,CAAC,EAAC,qTAAqT,EACvT,IAAI,EAAC,cAAc,GACrB,CACL,CAAC,CAAC,CAAC,CACA,eACI,CAAC,EAAC,qTAAqT,EACvT,IAAI,EAAC,cAAc,GACrB,CACL,IACC,CACT,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,CAC9B,eAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,aAC1F,eACI,CAAC,EAAC,yJAAyJ,EAC3J,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,GAAG,EACjB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACxB,EACF,eACI,CAAC,EAAC,WAAW,EACb,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,GAAG,EACjB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,GACvB,IACA,CACT,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,CAClC,eAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,aAC1F,eACI,CAAC,EAAC,yJAAyJ,EAC3J,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,GAAG,EACjB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACxB,EACF,eACI,CAAC,EAAC,WAAW,EACb,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,GAAG,EACjB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,GACvB,EACF,eACI,CAAC,EAAC,UAAU,EACZ,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,GAAG,EACjB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,GACvB,IACA,CACT,CAAC"}

package/dist/components/side-navigation/index.d.ts

@@ -1,2 +0,0 @@
-export * from './side-navigation';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/side-navigation/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/side-navigation/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/dist/components/side-navigation/index.js

@@ -1,2 +0,0 @@
-export * from './side-navigation';
-//# sourceMappingURL=index.js.map

package/dist/components/side-navigation/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/side-navigation/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/src/components/side-navigation/icons.tsx

@@ -1,74 +0,0 @@
-import { FC } from 'react';
-
-export const IconSideOptions: FC<{ expanded?: boolean }> = ({ expanded }) => (
-    <svg
-        width="1em"
-        height="1em"
-        viewBox="0 0 24 24"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-    >
-        <path
-            d="M5 21C4.45 21 3.98 20.8 3.59 20.41C3.2 20.02 3 19.55 3 19V5C3 4.45 3.2 3.98 3.59 3.59C3.98 3.2 4.45 3 5 3H19C19.55 3 20.02 3.2 20.41 3.59C20.8 3.98 21 4.45 21 5V19C21 19.55 20.8 20.02 20.41 20.41C20.02 20.8 19.55 21 19 21H5ZM8 19V5H5V19H8ZM10 19H19V5H10V19Z"
-            fill="currentColor"
-        />
-        {expanded ? (
-            <path
-                d="M16.54 14.19C16.71 14.38 16.71 14.66 16.54 14.85L16 15.46C15.9 15.56 15.77 15.62 15.62 15.62C15.48 15.62 15.35 15.56 15.25 15.46L12.46 12.33C12.29 12.14 12.29 11.86 12.46 11.67L15.25 8.54001C15.44 8.33001 15.81 8.33001 16 8.54001L16.54 9.15001C16.71 9.34001 16.71 9.62001 16.54 9.81001L14.58 12L16.54 14.19Z"
-                fill="currentColor"
-            />
-        ) : (
-            <path
-                d="M16.54 12.33L13.75 15.46C13.65 15.56 13.52 15.62 13.38 15.62C13.23 15.62 13.1 15.56 13 15.46L12.46 14.85C12.29 14.66 12.29 14.38 12.46 14.19L14.41 12L12.46 9.81001C12.29 9.62001 12.29 9.34001 12.46 9.15001L13 8.54001C13.19 8.33001 13.56 8.33001 13.75 8.54001L16.54 11.67C16.71 11.86 16.71 12.14 16.54 12.33Z"
-                fill="currentColor"
-            />
-        )}
-    </svg>
-);
-
-export const IconSideSlim = () => (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-            d="M3 6.375C3 4.51104 4.51104 3 6.375 3H17.625C19.489 3 21 4.51104 21 6.375V17.625C21 19.489 19.489 21 17.625 21H6.375C4.51104 21 3 19.489 3 17.625V6.375Z"
-            stroke="currentColor"
-            strokeOpacity="1"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-        />
-        <path
-            d="M7 8L7 16"
-            stroke="currentColor"
-            strokeOpacity="1"
-            strokeWidth="2"
-            strokeLinecap="round"
-        />
-    </svg>
-);
-
-export const IconSideExpanded = () => (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-            d="M3 6.375C3 4.51104 4.51104 3 6.375 3H17.625C19.489 3 21 4.51104 21 6.375V17.625C21 19.489 19.489 21 17.625 21H6.375C4.51104 21 3 19.489 3 17.625V6.375Z"
-            stroke="currentColor"
-            strokeOpacity="1"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-        />
-        <path
-            d="M7 8L7 16"
-            stroke="currentColor"
-            strokeOpacity="1"
-            strokeWidth="2"
-            strokeLinecap="round"
-        />
-        <path
-            d="M11 8V16"
-            stroke="currentColor"
-            strokeOpacity="1"
-            strokeWidth="2"
-            strokeLinecap="round"
-        />
-    </svg>
-);

package/src/components/side-navigation/index.ts

@@ -1 +0,0 @@
-export * from './side-navigation';