@clicoh/orion-library 1.0.3 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7,6 +7,8 @@ type MenuItemProps = {
7
7
  readonly icon?: ReactNode;
8
8
  readonly isActive?: boolean;
9
9
  readonly target?: HTMLAttributeAnchorTarget;
10
+ readonly level?: number;
11
+ readonly isOpen?: boolean;
10
12
  };
11
13
  /**
12
14
  * MenuItem component for rendering a navigation menu item with optional toggle functionality.
@@ -33,6 +35,6 @@ type MenuItemProps = {
33
35
  *
34
36
  * @returns {ReactNode} The rendered MenuItem component.
35
37
  */
36
- export declare function MenuItem({ text, path, toggle, onClickToggle, icon, isActive, target, }: MenuItemProps): ReactNode;
38
+ export declare function MenuItem({ text, path, toggle, onClickToggle, icon, isActive, target, level, isOpen, }: MenuItemProps): ReactNode;
37
39
  export {};
38
40
  //# sourceMappingURL=MenuItem.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Menu/MenuItem.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,yBAAyB,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAK9E,KAAK,aAAa,GAAG;IACnB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,aAAa,EAAE,MAAM,IAAI,CAAC;IACnC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,MAAM,CAAC,EAAE,yBAAyB,CAAC;CAC7C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,aAAa,EACb,IAAI,EACJ,QAAQ,EACR,MAAM,GACP,EAAE,aAAa,GAAG,SAAS,CAyC3B"}
1
+ {"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Menu/MenuItem.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,yBAAyB,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAK9E,KAAK,aAAa,GAAG;IACnB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,aAAa,EAAE,MAAM,IAAI,CAAC;IACnC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,MAAM,CAAC,EAAE,yBAAyB,CAAC;IAC5C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,aAAa,EACb,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,KAAS,EACT,MAAc,GACf,EAAE,aAAa,GAAG,SAAS,CAkD3B"}
@@ -29,33 +29,34 @@ import { Paragraph } from '../../01-atoms';
29
29
  *
30
30
  * @returns {ReactNode} The rendered MenuItem component.
31
31
  */
32
- export function MenuItem({ text, path, toggle, onClickToggle, icon, isActive, target, }) {
33
- const linkStyleMap = clsx('link relative flex h-12 w-full cursor-pointer items-center justify-between gap-2', isActive &&
32
+ export function MenuItem({ text, path, toggle, onClickToggle, icon, isActive, target, level = 1, isOpen = false, }) {
33
+ const linkStyleMap = clsx('link relative flex w-full cursor-pointer items-center justify-between gap-2', level === 1 && 'h-14 pl-12', level === 2 && 'h-10 pl-12', level >= 3 && 'text-gray-1 h-10 pl-16', level >= 2 && 'hover:bg-gray-6 hover:text-lavender', level === 1 && isOpen && 'bg-gray-6 text-lavender', isActive &&
34
34
  'before:bg-lavender before:absolute before:-bottom-2.5 before:left-0 before:block before:h-0.5 before:w-full');
35
35
  const handleToggleClick = (event) => {
36
36
  event.preventDefault();
37
37
  event.stopPropagation();
38
38
  onClickToggle();
39
39
  };
40
+ const isLink = Boolean(path) && !toggle;
40
41
  return (<Show>
41
- <Show.When isTrue={Boolean(path)}>
42
+ <Show.When isTrue={isLink}>
42
43
  <Link href={path} className={clsx('slide-over__close', linkStyleMap)} target={target ?? '_self'}>
43
- <MenuItemContent text={text} icon={icon} toggle={toggle} handleToggleClick={handleToggleClick}/>
44
+ <MenuItemContent text={text} icon={icon} toggle={toggle} handleToggleClick={handleToggleClick} level={level}/>
44
45
  </Link>
45
46
  </Show.When>
46
47
  <Show.Else>
47
48
  <span className={linkStyleMap} onClick={handleToggleClick}>
48
- <MenuItemContent text={text} icon={icon} toggle={toggle} handleToggleClick={handleToggleClick}/>
49
+ <MenuItemContent text={text} icon={icon} toggle={toggle} handleToggleClick={handleToggleClick} level={level}/>
49
50
  </span>
50
51
  </Show.Else>
51
52
  </Show>);
52
53
  }
53
- function MenuItemContent({ text, icon, toggle, handleToggleClick, }) {
54
+ function MenuItemContent({ text, icon, toggle, handleToggleClick, level, }) {
54
55
  return (<>
55
- {icon && <span className="icon">{icon}</span>}
56
- <Paragraph>{text}</Paragraph>
56
+ {level === 1 && icon && <span className="icon">{icon}</span>}
57
+ <Paragraph size={level >= 3 ? 'body-2' : 'body-1'}>{text}</Paragraph>
57
58
  {toggle && (<span onClick={handleToggleClick} className="toggle cursor-pointer p-2 transition-transform duration-500">
58
- <FaChevronDown size={16}/>
59
+ <FaChevronDown size={level >= 3 ? 12 : 16}/>
59
60
  </span>)}
60
61
  </>);
61
62
  }
@@ -1 +1 @@
1
- {"version":3,"file":"MenuItem.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Menu/MenuItem.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAY3C;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,aAAa,EACb,IAAI,EACJ,QAAQ,EACR,MAAM,GACQ;IACd,MAAM,YAAY,GAAG,IAAI,CACvB,kFAAkF,EAClF,QAAQ;QACN,6GAA6G,CAChH,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAAkC,EAAE,EAAE;QAC/D,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,aAAa,EAAE,CAAC;IAClB,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CACH;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAC/B;QAAA,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,IAAc,CAAC,CACrB,SAAS,CAAC,CAAC,IAAI,CAAC,mBAAmB,EAAE,YAAY,CAAC,CAAC,CACnD,MAAM,CAAC,CAAC,MAAM,IAAI,OAAO,CAAC,CAE1B;UAAA,CAAC,eAAe,CACd,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,EAEzC;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,IAAI,CAAC,IAAI,CACX;MAAA,CAAC,IAAI,CAAC,IAAI,CACR;QAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,iBAAiB,CAAC,CACxD;UAAA,CAAC,eAAe,CACd,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,EAEzC;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,IAAI,CAAC,IAAI,CACb;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CAAC,EACvB,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,iBAAiB,GAMlB;IACC,OAAO,CACL,EACE;MAAA,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAC7C;MAAA,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,EAAE,SAAS,CAC5B;MAAA,CAAC,MAAM,IAAI,CACT,CAAC,IAAI,CACH,OAAO,CAAC,CAAC,iBAAiB,CAAC,CAC3B,SAAS,CAAC,6DAA6D,CAEvE;UAAA,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAC1B;QAAA,EAAE,IAAI,CAAC,CACR,CACH;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"MenuItem.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Menu/MenuItem.tsx"],"names":[],"mappings":"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"}
@@ -8,6 +8,7 @@ type MenuListProps = {
8
8
  } & Omit<ComponentProps<typeof MenuItem>, 'toggle' | 'onClickToggle' | 'callback'>)[];
9
9
  level?: number;
10
10
  isToggle?: boolean;
11
+ parentOpen?: boolean;
11
12
  };
12
13
  /**
13
14
  * MenuList component for rendering a list of menu items with optional submenus.
@@ -34,6 +35,6 @@ type MenuListProps = {
34
35
  *
35
36
  * @returns {ReactNode} The rendered MenuList component.
36
37
  */
37
- export declare function MenuList({ menu, orientation, level, isToggle, }: MenuListProps): ReactNode;
38
+ export declare function MenuList({ menu, orientation, level, isToggle, parentOpen, }: MenuListProps): ReactNode;
38
39
  export {};
39
40
  //# sourceMappingURL=MenuList.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Menu/MenuList.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,KAAK,aAAa,GAAG;IACnB,WAAW,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,aAAa,CAAC,CAAC;IACxD,IAAI,EAAE,CAAC;QAAE,OAAO,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;KAAE,GAAG,IAAI,CAC/C,cAAc,CAAC,OAAO,QAAQ,CAAC,EAC/B,QAAQ,GAAG,eAAe,GAAG,UAAU,CACxC,CAAC,EAAE,CAAC;IACL,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA0CF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,WAAW,EACX,KAAS,EACT,QAAgB,GACjB,EAAE,aAAa,GAAG,SAAS,CA6E3B"}
1
+ {"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Menu/MenuList.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,KAAK,aAAa,GAAG;IACnB,WAAW,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,aAAa,CAAC,CAAC;IACxD,IAAI,EAAE,CAAC;QAAE,OAAO,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;KAAE,GAAG,IAAI,CAC/C,cAAc,CAAC,OAAO,QAAQ,CAAC,EAC/B,QAAQ,GAAG,eAAe,GAAG,UAAU,CACxC,CAAC,EAAE,CAAC;IACL,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAuCF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,WAAW,EACX,KAAS,EACT,QAAgB,EAChB,UAAiB,GAClB,EAAE,aAAa,GAAG,SAAS,CA4F3B"}
@@ -1,7 +1,7 @@
1
1
  'use client';
2
2
  import clsx from 'clsx';
3
3
  import { usePathname } from 'next/navigation';
4
- import { useState } from 'react';
4
+ import { useEffect, useState, } from 'react';
5
5
  import { Each } from '../../00-base';
6
6
  import { List } from '../../01-atoms';
7
7
  import { MenuItem } from './MenuItem';
@@ -10,13 +10,13 @@ const styleMap = {
10
10
  vertical: 'menu--vertical',
11
11
  };
12
12
  const styleMapLinkHorizontal = clsx('[.menu--horizontal_&>.link]:px-2 [.menu--horizontal_&>.link]:py-3');
13
- const styleMapLinkVertical = clsx('[.menu--vertical_&>.link]:py-2 [.menu--vertical_&>.link]:pr-4 [.menu--vertical_&>.link]:pl-16');
14
- const styleMapLink = clsx('[&:hover>.link]:underline', styleMapLinkHorizontal, styleMapLinkVertical);
13
+ const styleMapLinkVertical = clsx('[.menu--vertical_&>.link]:py-2 [.menu--vertical_&>.link]:pr-4');
14
+ const styleMapLink = clsx(styleMapLinkHorizontal, styleMapLinkVertical);
15
15
  const styleMapIcon = clsx('[.menu--vertical_&>.link>.icon]:absolute [.menu--vertical_&>.link>.icon]:left-4');
16
16
  const styleMapToggle = clsx('[.menu--horizontal_&:hover>.link>.toggle]:rotate-180 [.menu--vertical_&.open>.link>.toggle]:rotate-180');
17
17
  const styleMapSubmenuHorizontal = (level) => clsx('[.menu--horizontal_&>.submenu]:invisible [.menu--horizontal_&>.submenu]:absolute [.menu--horizontal_&>.submenu]:w-max [.menu--horizontal_&>.submenu]:max-w-full [.menu--horizontal_&>.submenu]:min-w-32 [.menu--horizontal_&>.submenu]:rounded-sm [.menu--horizontal_&>.submenu]:opacity-0 [.menu--horizontal_&>.submenu]:shadow-md', level > 1 &&
18
18
  '[.menu--horizontal_&>.submenu]:top-0 [.menu--horizontal_&>.submenu]:left-full', '[.menu--horizontal_&:hover>.submenu]:visible [.menu--horizontal_&:hover>.submenu]:opacity-100');
19
- const styleMapSubmenuVertical = clsx('[.menu--vertical_&.open>.submenu]:block [.menu--vertical_&>.submenu]:hidden');
19
+ const styleMapSubmenuVertical = clsx('[.menu--vertical_&>.submenu]:grid [.menu--vertical_&>.submenu]:[grid-template-rows:0fr] [.menu--vertical_&>.submenu]:transition-[grid-template-rows] [.menu--vertical_&>.submenu]:duration-300 [.menu--vertical_&>.submenu]:ease-in-out', '[.menu--vertical_&.open>.submenu]:[grid-template-rows:1fr]');
20
20
  const styleMapSubmenu = (level) => clsx(styleMapSubmenuHorizontal(level), styleMapSubmenuVertical);
21
21
  /**
22
22
  * MenuList component for rendering a list of menu items with optional submenus.
@@ -43,25 +43,30 @@ const styleMapSubmenu = (level) => clsx(styleMapSubmenuHorizontal(level), styleM
43
43
  *
44
44
  * @returns {ReactNode} The rendered MenuList component.
45
45
  */
46
- export function MenuList({ menu, orientation, level = 1, isToggle = false, }) {
46
+ export function MenuList({ menu, orientation, level = 1, isToggle = false, parentOpen = true, }) {
47
47
  const pathname = usePathname();
48
48
  const [showItems, setShowItems] = useState(menu.map(() => false));
49
+ useEffect(() => {
50
+ if (!parentOpen) {
51
+ setShowItems(menu.map(() => false));
52
+ }
53
+ }, [parentOpen, menu]);
49
54
  const toggleShowItems = (index) => {
50
- setShowItems((prevItems) => {
51
- const newItems = [...prevItems];
52
- newItems[index] = !prevItems[index];
53
- return newItems;
54
- });
55
+ setShowItems((prevItems) => prevItems.map((item, i) => (i === index ? !item : false)));
55
56
  };
56
57
  if (level === 1) {
57
58
  orientation === 'vertical' ? (isToggle = true) : (isToggle = false);
58
59
  }
59
- return (<List orientation={orientation} className={clsx('menu', level === 1 && styleMap[orientation], orientation === 'horizontal' && 'gap-2', `level-${level}`, (isToggle || (!isToggle && level !== 1)) && 'divide-gray-5 divide-y')}>
60
+ return (<List orientation={orientation} className={clsx('menu', level === 1 && styleMap[orientation], orientation === 'horizontal' && 'gap-2', `level-${level}`)}>
60
61
  <Each of={menu} render={({ submenu, ...menuItem }, index) => {
61
62
  return (<li key={menuItem.text} onClick={() => orientation === 'horizontal' && toggleShowItems(index)} className={clsx('relative', level > 1 && 'w-full', showItems[index] && 'open', styleMapLink, styleMapIcon, styleMapToggle, styleMapSubmenu(level))}>
62
- <MenuItem {...menuItem} isActive={orientation === 'horizontal' && menuItem.path === pathname} onClickToggle={() => toggleShowItems(index)} toggle={Boolean(submenu?.length)}/>
63
- {((isToggle && submenu?.length && showItems[index]) ||
64
- (!isToggle && submenu?.length)) && (<div className={clsx('submenu', isToggle && 'border-gray-5 border-t', level > 1 && 'top-0 left-full')}>
63
+ <MenuItem {...menuItem} isActive={orientation === 'horizontal' && menuItem.path === pathname} onClickToggle={() => toggleShowItems(index)} toggle={Boolean(submenu?.length)} level={level} isOpen={showItems[index]}/>
64
+ {isToggle && submenu?.length && (<div className={clsx('submenu', level > 1 && 'top-0 left-full')}>
65
+ <div className="min-h-0 overflow-hidden">
66
+ <MenuList orientation={'vertical'} menu={submenu} level={level + 1} isToggle={isToggle} parentOpen={showItems[index]}/>
67
+ </div>
68
+ </div>)}
69
+ {!isToggle && submenu?.length && (<div className={clsx('submenu', level > 1 && 'top-0 left-full')}>
65
70
  <MenuList orientation={'vertical'} menu={submenu} level={level + 1} isToggle={isToggle}/>
66
71
  </div>)}
67
72
  </li>);
@@ -1 +1 @@
1
- {"version":3,"file":"MenuList.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Menu/MenuList.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAuC,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAYtC,MAAM,QAAQ,GAAiD;IAC7D,UAAU,EAAE,kBAAkB;IAC9B,QAAQ,EAAE,gBAAgB;CAC3B,CAAC;AAEF,MAAM,sBAAsB,GAAG,IAAI,CACjC,mEAAmE,CACpE,CAAC;AACF,MAAM,oBAAoB,GAAG,IAAI,CAC/B,+FAA+F,CAChG,CAAC;AACF,MAAM,YAAY,GAAG,IAAI,CACvB,2BAA2B,EAC3B,sBAAsB,EACtB,oBAAoB,CACrB,CAAC;AAEF,MAAM,YAAY,GAAG,IAAI,CACvB,iFAAiF,CAClF,CAAC;AAEF,MAAM,cAAc,GAAG,IAAI,CACzB,wGAAwG,CACzG,CAAC;AAEF,MAAM,yBAAyB,GAAG,CAAC,KAAa,EAAE,EAAE,CAClD,IAAI,CACF,qUAAqU,EACrU,KAAK,GAAG,CAAC;IACP,+EAA+E,EACjF,+FAA+F,CAChG,CAAC;AAEJ,MAAM,uBAAuB,GAAG,IAAI,CAClC,6EAA6E,CAC9E,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,EAAE,CACxC,IAAI,CAAC,yBAAyB,CAAC,KAAK,CAAC,EAAE,uBAAuB,CAAC,CAAC;AAElE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,IAAI,EACJ,WAAW,EACX,KAAK,GAAG,CAAC,EACT,QAAQ,GAAG,KAAK,GACF;IACd,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAY,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAE7E,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,EAAE;QACxC,YAAY,CAAC,CAAC,SAAS,EAAE,EAAE;YACzB,MAAM,QAAQ,GAAG,CAAC,GAAG,SAAS,CAAC,CAAC;YAChC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;YACpC,OAAO,QAAQ,CAAC;QAClB,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;QAChB,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC;IACtE,CAAC;IAED,OAAO,CACL,CAAC,IAAI,CACH,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,SAAS,CAAC,CAAC,IAAI,CACb,MAAM,EACN,KAAK,KAAK,CAAC,IAAI,QAAQ,CAAC,WAAW,CAAC,EACpC,WAAW,KAAK,YAAY,IAAI,OAAO,EACvC,SAAS,KAAK,EAAE,EAChB,CAAC,QAAQ,IAAI,CAAC,CAAC,QAAQ,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,wBAAwB,CACrE,CAAC,CAEF;MAAA,CAAC,IAAI,CACH,EAAE,CAAC,CAAC,IAAI,CAAC,CACT,MAAM,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE;YAC1C,OAAO,CACL,CAAC,EAAE,CACD,GAAG,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CACnB,OAAO,CAAC,CAAC,GAAG,EAAE,CACZ,WAAW,KAAK,YAAY,IAAI,eAAe,CAAC,KAAK,CACvD,CAAC,CACD,SAAS,CAAC,CAAC,IAAI,CACb,UAAU,EACV,KAAK,GAAG,CAAC,IAAI,QAAQ,EACrB,SAAS,CAAC,KAAK,CAAC,IAAI,MAAM,EAC1B,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,eAAe,CAAC,KAAK,CAAC,CACvB,CAAC,CAEF;cAAA,CAAC,QAAQ,CACP,IAAI,QAAQ,CAAC,CACb,QAAQ,CAAC,CACP,WAAW,KAAK,YAAY,IAAI,QAAQ,CAAC,IAAI,KAAK,QACpD,CAAC,CACD,aAAa,CAAC,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAC5C,MAAM,CAAC,CAAC,OAAO,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,EAEnC;cAAA,CAAC,CAAC,CAAC,QAAQ,IAAI,OAAO,EAAE,MAAM,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC;oBACjD,CAAC,CAAC,QAAQ,IAAI,OAAO,EAAE,MAAM,CAAC,CAAC,IAAI,CACnC,CAAC,GAAG,CACF,SAAS,CAAC,CAAC,IAAI,CACb,SAAS,EACT,QAAQ,IAAI,wBAAwB,EACpC,KAAK,GAAG,CAAC,IAAI,iBAAiB,CAC/B,CAAC,CAEF;kBAAA,CAAC,QAAQ,CACP,WAAW,CAAC,CAAC,UAAU,CAAC,CACxB,IAAI,CAAC,CAAC,OAAO,CAAC,CACd,KAAK,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CACjB,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAEvB;gBAAA,EAAE,GAAG,CAAC,CACP,CACH;YAAA,EAAE,EAAE,CAAC,CACN,CAAC;QACJ,CAAC,CAAC,EAEN;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"MenuList.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Menu/MenuList.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@clicoh/orion-library",
3
- "version": "1.0.3",
3
+ "version": "1.0.4",
4
4
  "main": "index.js",
5
5
  "scripts": {
6
6
  "build": "tsc --project tsconfig.components.json",