@soul-refiner/design-system 2.5.0-alpha.4 → 2.5.0-alpha.6

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

@@ -1,11 +1,68 @@
-"use strict";var React=require("react"),styled=require("styled-components"),Link=require("next/link"),button=require("../../actions/button/button.js"),drawer=require("../../surfaces/drawer/drawer.js"),chevron_down=require("../../../icons/arrow/chevron_down.js"),chevron_left=require("../../../icons/arrow/chevron_left.js"),chevron_up=require("../../../icons/arrow/chevron_up.js"),plus=require("../../../icons/basic/plus.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Link__default=_interopDefaultCompat(Link);const INNER_NAV_CHILD_TYPES=["Header","Item","Dropdown","BackButton","Drawer","Misc"],InnerNav=({children:e})=>{var r={Header:[],Item:[],Dropdown:[],BackButton:[],Drawer:[],Misc:[]};for(const a of React__default.default.Children.toArray(e))(React__default.default.isValidElement(a)&&INNER_NAV_CHILD_TYPES.includes(a?.type?.displayName?.replace("InnerNav.",""))?r[a?.type?.displayName.replace("InnerNav.","")]:r.Misc).push(a);return React__default.default.createElement(NavWrapper,{"aria-label":"side-navigation"},React__default.default.createElement("div",null,r.Header),React__default.default.createElement("div",null,r.BackButton),React__default.default.createElement("div",null,r.Drawer),React__default.default.createElement("div",null,r.Item),React__default.default.createElement("div",null,r.Dropdown),React__default.default.createElement("div",null,r.Misc))},NavWrapper=styled.styled.nav`
+import React from 'react';
+import { styled } from 'styled-components';
+import Link from 'next/link';
+import { Button } from '../../../components/actions/button/button';
+import { Drawer } from '../../../components/surfaces/drawer/drawer';
+import { ChevronDown } from '../../../icons/arrow/chevron_down';
+import { ChevronLeft } from '../../../icons/arrow/chevron_left';
+import { ChevronUp } from '../../../icons/arrow/chevron_up';
+import { Plus } from '../../../icons/basic/plus';
+const INNER_NAV_CHILD_TYPES = [
+    'Header',
+    'Item',
+    'Dropdown',
+    'BackButton',
+    'Drawer',
+    'Misc',
+];
+/*************************************************************************************************************************
+ * Inner Navigation
+ */
+const InnerNav = ({ children }) => {
+    const elementsByType = {
+        Header: [],
+        Item: [],
+        Dropdown: [],
+        BackButton: [],
+        Drawer: [],
+        Misc: [],
+    };
+    const _children = React.Children.toArray(children);
+    for (const child of _children) {
+        const isValidChild = React.isValidElement(child);
+        const isInnerNavChild = isValidChild &&
+            INNER_NAV_CHILD_TYPES.includes(child?.type?.displayName?.replace('InnerNav.', ''));
+        if (isInnerNavChild) {
+            const type = child?.type?.displayName.replace('InnerNav.', '');
+            elementsByType[type].push(child);
+        }
+        else {
+            elementsByType['Misc'].push(child);
+        }
+    }
+    return (React.createElement(NavWrapper, { "aria-label": "side-navigation" },
+        React.createElement("div", null, elementsByType['Header']),
+        React.createElement("div", null, elementsByType['BackButton']),
+        React.createElement("div", null, elementsByType['Drawer']),
+        React.createElement("div", null, elementsByType['Item']),
+        React.createElement("div", null, elementsByType['Dropdown']),
+        React.createElement("div", null, elementsByType['Misc'])));
+};
+const NavWrapper = styled.nav `
   height: 100%;
   width: 365px;
   padding: 24px 12px 24px 16px;
   box-sizing: border-box;
   background-color: var(--color-blue-10);
   border-right: 1px solid var(--color-grey-9);
-`,InnerNavItem=({active:e,href:r,icon:a,label:t,isPaidIcon:n,sx:l,onClick:o})=>React__default.default.createElement(Item,{$active:e,$sx:l,href:r||"#",scroll:!1,onClick:o},a,t,n),Item=styled.styled(Link__default.default)`
+`;
+const InnerNavItem = ({ active, href, icon, label, isPaidIcon, sx, onClick, }) => {
+    return (React.createElement(Item, { "$active": active, "$sx": sx, href: href || '#', scroll: false, onClick: onClick },
+        icon,
+        label,
+        isPaidIcon));
+};
+const Item = styled(Link) `
   padding: 14px 16px;
   display: flex;
   gap: 16px;
@@ -20,24 +77,41 @@
   svg {
     fill: var(--color-blue-2);
   }
-  ${({$active:e})=>e?`
-    background-color: var(--color-primary-blue-3);`:`
+  ${({ $active }) => $active
+    ? `
+    background-color: var(--color-primary-blue-3);`
+    : `
     &:hover {
       background-color: var(--color-primary-blue-4);
     }`}
 
-  ${({$sx:e})=>e||""}
-`,InnerNavDropdown=((InnerNav.Item=InnerNavItem).displayName="InnerNav.Item",({children:e,icon:r,label:a,open:t,sx:n,onClick:l})=>React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(DropdownItem,{$active:!1,$sx:n,onClick:l},r,React__default.default.createElement(DropdownTriggerWrapper,null,a,t&&React__default.default.createElement(chevron_up.ChevronUp,{size:16}),!t&&React__default.default.createElement(chevron_down.ChevronDown,{size:16}))),t&&React__default.default.createElement(DropdownContent,null,e))),DropdownContent=styled.styled.div`
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+InnerNav.Item = InnerNavItem;
+InnerNavItem.displayName = 'InnerNav.Item';
+const InnerNavDropdown = ({ children, icon, label, open, sx, onClick, }) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DropdownItem, { "$active": false, "$sx": sx, onClick: onClick },
+            icon,
+            React.createElement(DropdownTriggerWrapper, null,
+                label,
+                open && React.createElement(ChevronUp, { size: 16 }),
+                !open && React.createElement(ChevronDown, { size: 16 }))),
+        open && React.createElement(DropdownContent, null, children)));
+};
+const DropdownContent = styled.div `
   & > a,
   & > button {
     padding-left: 40px;
   }
-`,DropdownTriggerWrapper=styled.styled.div`
+`;
+const DropdownTriggerWrapper = styled.div `
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex: 1;
-`,DropdownItem=styled.styled.a`
+`;
+const DropdownItem = styled.a `
   padding: 14px 16px;
   display: flex;
   gap: 16px;
@@ -52,14 +126,25 @@
   svg {
     fill: var(--color-blue-2);
   }
-  ${({$active:e})=>e?`
-    background-color: var(--color-primary-blue-3);`:`
+  ${({ $active }) => $active
+    ? `
+    background-color: var(--color-primary-blue-3);`
+    : `
     &:hover {
       background-color: var(--color-primary-blue-4);
     }`}
 
-  ${({$sx:e})=>e||""}
-`,InnerNavBackButton=((InnerNav.Dropdown=InnerNavDropdown).displayName="InnerNav.Dropdown",({href:e,label:r,sx:a})=>React__default.default.createElement(BackButton,{href:e,$sx:a,scroll:!1},React__default.default.createElement("div",null,React__default.default.createElement(chevron_left.ChevronLeft,{size:24})),r)),BackButton=styled.styled(Link__default.default)`
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+InnerNav.Dropdown = InnerNavDropdown;
+InnerNavDropdown.displayName = 'InnerNav.Dropdown';
+const InnerNavBackButton = ({ href, label, sx }) => {
+    return (React.createElement(BackButton, { href: href, "$sx": sx, scroll: false },
+        React.createElement("div", null,
+            React.createElement(ChevronLeft, { size: 24 })),
+        label));
+};
+const BackButton = styled(Link) `
   display: flex;
   align-items: center;
   gap: 8px;
@@ -79,5 +164,28 @@
     padding: 12px;
   }
 
-  ${({$sx:e})=>e||""}
-`,InnerNavHeader=((InnerNav.BackButton=InnerNavBackButton).displayName="InnerNav.BackButton",({children:e})=>React__default.default.createElement(HeaderWrapper,null,e)),HeaderWrapper=styled.styled.div``,InnerNavDrawer=((InnerNav.Header=InnerNavHeader).displayName="InnerNav.Header",({children:e,label:r,controlledOpen:a,onOpenChange:t})=>React__default.default.createElement(drawer.Drawer,{controlledOpen:a,onOpenChange:t},React__default.default.createElement(drawer.Drawer.Trigger,null,React__default.default.createElement(button.Button,{icon:React__default.default.createElement(plus.Plus,{color:"white"}),size:"small",sx:"width: 100%; margin-bottom: 24px;",type:"primary",onClick:()=>{t?.()}},r)),e));(InnerNav.Drawer=InnerNavDrawer).displayName="InnerNav.Drawer",InnerNav.DrawerHeader=drawer.Drawer.Header,InnerNav.DrawerContent=drawer.Drawer.Content,InnerNav.DrawerFooter=drawer.Drawer.Footer,InnerNav.DrawerTrigger=drawer.Drawer.Trigger,exports.InnerNav=InnerNav;
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+InnerNav.BackButton = InnerNavBackButton;
+InnerNavBackButton.displayName = 'InnerNav.BackButton';
+const InnerNavHeader = ({ children }) => {
+    return React.createElement(HeaderWrapper, null, children);
+};
+const HeaderWrapper = styled.div ``;
+InnerNav.Header = InnerNavHeader;
+InnerNavHeader.displayName = 'InnerNav.Header';
+const InnerNavDrawer = ({ children, label, controlledOpen, onOpenChange, }) => {
+    return (React.createElement(Drawer, { controlledOpen: controlledOpen, onOpenChange: onOpenChange },
+        React.createElement(Drawer.Trigger, null,
+            React.createElement(Button, { icon: React.createElement(Plus, { color: "white" }), size: "small", sx: "width: 100%; margin-bottom: 24px;", type: "primary", onClick: () => {
+                    onOpenChange?.();
+                } }, label)),
+        children));
+};
+InnerNav.Drawer = InnerNavDrawer;
+InnerNavDrawer.displayName = 'InnerNav.Drawer';
+InnerNav.DrawerHeader = Drawer.Header;
+InnerNav.DrawerContent = Drawer.Content;
+InnerNav.DrawerFooter = Drawer.Footer;
+InnerNav.DrawerTrigger = Drawer.Trigger;
+export { InnerNav };

package/dist/components/navigation/tabs/index.js

@@ -0,0 +1 @@
+export { Tabs } from './tabs';

package/dist/components/navigation/tabs/tabs.js

@@ -1,5 +1,59 @@
-"use client";
-"use strict";var React=require("react"),styled=require("styled-components"),Link=require("next/link"),paragraph=require("../../atoms/typography/paragraph.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Link__default=_interopDefaultCompat(Link);const colorLookup={blue:{bg:"var(--color-hue-blue-2)",icon:"var(--color-hue-blue-1)"},green:{bg:"var(--color-green-8)",icon:"var(--color-green-2)"},grey:{bg:"var(--color-grey-9)",icon:"var(--color-grey-7)"},mint:{bg:"var(--color-hue-mint-2)",icon:"var(--color-hue-mint-1)"},ocean:{bg:"var(--color-hue-ocean-2)",icon:"var(--color-hue-ocean-1)"},orange:{bg:"var(--color-hue-orange-2)",icon:"var(--color-hue-orange-1)"},pink:{bg:"var(--color-hue-pink-2)",icon:"var(--color-hue-pink-1)"},purple:{bg:"var(--color-hue-purple-2)",icon:"var(--color-hue-purple-1)"},red:{bg:"var(--color-red-9)",icon:"var(--color-red-3)"},yellow:{bg:"var(--color-yellow-8)",icon:"var(--color-yellow-3)"},dark:{bg:"var(--color-grey-1)",icon:"var(--color-grey-9)"}},Tabs=({activeIndex:o,items:e,onChange:a,size:t="large",sx:r})=>{const l=React__default.default.useId();return React__default.default.createElement(Wrapper,{$sx:r},e.map((e,r)=>React__default.default.createElement(Item,{active:o===r,color:e?.color,disabled:e?.disabled,href:e?.href,icon:e?.icon,key:l+r.toString(36),label:e.label,onClick:()=>a&&a(r),size:t})))},Wrapper=styled.styled.div`
+'use client';
+import React from 'react';
+import { styled } from 'styled-components';
+import Link from 'next/link';
+import { P } from '../../../components/atoms/typography/paragraph';
+const colorLookup = {
+    blue: {
+        bg: 'var(--color-hue-blue-2)',
+        icon: 'var(--color-hue-blue-1)',
+    },
+    green: {
+        bg: 'var(--color-green-8)',
+        icon: 'var(--color-green-2)',
+    },
+    grey: {
+        bg: 'var(--color-grey-9)',
+        icon: 'var(--color-grey-7)',
+    },
+    mint: {
+        bg: 'var(--color-hue-mint-2)',
+        icon: 'var(--color-hue-mint-1)',
+    },
+    ocean: {
+        bg: 'var(--color-hue-ocean-2)',
+        icon: 'var(--color-hue-ocean-1)',
+    },
+    orange: {
+        bg: 'var(--color-hue-orange-2)',
+        icon: 'var(--color-hue-orange-1)',
+    },
+    pink: {
+        bg: 'var(--color-hue-pink-2)',
+        icon: 'var(--color-hue-pink-1)',
+    },
+    purple: {
+        bg: 'var(--color-hue-purple-2)',
+        icon: 'var(--color-hue-purple-1)',
+    },
+    red: {
+        bg: 'var(--color-red-9)',
+        icon: 'var(--color-red-3)',
+    },
+    yellow: {
+        bg: 'var(--color-yellow-8)',
+        icon: 'var(--color-yellow-3)',
+    },
+    dark: {
+        bg: 'var(--color-grey-1)',
+        icon: 'var(--color-grey-9)',
+    },
+};
+const Tabs = ({ activeIndex, items, onChange, size = 'large', sx, }) => {
+    const id = React.useId();
+    return (React.createElement(Wrapper, { "$sx": sx }, items.map((item, index) => (React.createElement(Item, { active: activeIndex === index, color: item?.color, disabled: item?.disabled, href: item?.href, icon: item?.icon, key: id + index.toString(36), label: item.label, onClick: () => onChange && onChange(index), size: size })))));
+};
+const Wrapper = styled.div `
   display: flex;
   flex-flow: row nowrap;
   align-items: flex-end;
@@ -12,8 +66,30 @@
     text-decoration: none;
   }
 
-  ${({$sx:e})=>e||""}
-`,Item=({active:e,color:r,disabled:o,href:a,icon:t,label:l,onClick:c,size:i="large"})=>{var n=o?"grey":r||"blue",p=colorLookup[n].icon,n=colorLookup[n].bg,d="large"===i?16:"medium"===i?14:12,u="large"===i?24:"medium"===i?20:16,c={onClick:!o&&c?c:void 0,href:a||"#",scroll:!1,$active:e,$color:p,$disabled:o,$hasIcon:!!t,$size:i},a="dark"===r?DarkElement:Element;return React__default.default.createElement(a,{...c,$bg:n},t&&React__default.default.createElement(IconWrapper,{$bg:n},t),React__default.default.createElement(paragraph.P,{$fontSize:d,$lineHeight:u,$semiBold:!0},l))},Element=styled.styled(Link__default.default)`
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const Item = ({ active, color, disabled, href, icon, label, onClick, size = 'large', }) => {
+    const inputColor = disabled ? 'grey' : color ? color : 'blue';
+    const iconColor = colorLookup[inputColor].icon;
+    const bgColor = colorLookup[inputColor].bg;
+    const fontSize = size === 'large' ? 16 : size === 'medium' ? 14 : 12;
+    const lineHeight = size === 'large' ? 24 : size === 'medium' ? 20 : 16;
+    const elementProps = {
+        onClick: !disabled && onClick ? onClick : undefined,
+        href: href || '#',
+        scroll: false,
+        $active: active,
+        $color: iconColor,
+        $disabled: disabled,
+        $hasIcon: !!icon,
+        $size: size,
+    };
+    const ElementType = color === 'dark' ? DarkElement : Element;
+    return (React.createElement(ElementType, { ...elementProps, "$bg": bgColor },
+        icon && React.createElement(IconWrapper, { "$bg": bgColor }, icon),
+        React.createElement(P, { "$fontSize": fontSize, "$lineHeight": lineHeight, "$semiBold": true }, label)));
+};
+const Element = styled(Link) `
   position: relative;
   display: flex;
   align-items: center;
@@ -21,18 +97,33 @@
   cursor: pointer;
   user-select: none;
 
-  ${({$size:e,$hasIcon:r})=>{if(r)return"padding: 16px 12px;";switch(e){case"small":return"padding: 10px 8px;";case"medium":return"padding: 14px 10px;";default:return"padding: 22px 12px;"}}}
+  ${({ $size, $hasIcon }) => {
+    if ($hasIcon)
+        return 'padding: 16px 12px;';
+    switch ($size) {
+        case 'small':
+            return 'padding: 10px 8px;';
+        case 'medium':
+            return 'padding: 14px 10px;';
+        default:
+            return 'padding: 22px 12px;';
+    }
+}}
 
-  ${({$disabled:e,$hasIcon:r,$color:o})=>e?"cursor: initial;":r?`
+  ${({ $disabled, $hasIcon, $color }) => $disabled
+    ? 'cursor: initial;'
+    : $hasIcon
+        ? `
         &:hover {
           p {
-            color: ${o};
+            color: ${$color};
           }
         }
         div > svg {
-          fill: ${o};
+          fill: ${$color};
         }
-      `:`
+      `
+        : `
         &:hover {
           background-color: var(--color-grey-10);
           &:after {
@@ -52,7 +143,8 @@
         }
       `}
 
-  ${({$active:e,$color:r,$hasIcon:o})=>e&&`
+  ${({ $active, $color, $hasIcon }) => $active &&
+    `
       &:after {
         position: absolute;
         content: '';
@@ -60,37 +152,45 @@
         height: 3px;
         bottom: 0px;
         left: 0px;
-        background-color: ${o?r:"var(--color-primary-blue-2)"} !important;
+        background-color: ${$hasIcon ? $color : 'var(--color-primary-blue-2)'} !important;
         border-top-right-radius: 3px;
         border-top-left-radius: 3px;
       }
     `}
-`,DarkElement=styled.styled(Element)`
+`;
+const DarkElement = styled(Element) `
   p {
-    color: ${({$color:e})=>e};
+    color: ${({ $color }) => $color};
   }
 
   &:hover {
-    background-color: ${({$active:e,$bg:r})=>e?"var(--color-grey)":r};
+    background-color: ${({ $active, $bg }) => $active ? 'var(--color-grey)' : $bg};
 
     &:after {
       content: '';
       position: absolute;
       width: 100%;
-      height: ${({$active:e})=>e?"3px":"1px"};
+      height: ${({ $active }) => ($active ? '3px' : '1px')};
       bottom: 0;
       left: 0;
-      background-color: ${({$active:e})=>e?"var(--color-primary-blue-3)":"var(--color-primary-blue-1)"};
+      background-color: ${({ $active }) => $active
+    ? 'var(--color-primary-blue-3)'
+    : 'var(--color-primary-blue-1)'};
     }
   }
 
-  ${({$active:e,$color:r,$hasIcon:o})=>e&&`
+  ${({ $active, $color, $hasIcon }) => $active &&
+    `
       &:after {
-        background-color: ${o?r:"var(--color-primary-blue-2)"};
+        background-color: ${$hasIcon ? $color : 'var(--color-primary-blue-2)'};
       }
     `}
-`,IconWrapper=styled.styled.div`
+`;
+const IconWrapper = styled.div `
   padding: 8px;
   border-radius: 8px;
-  background-color: ${({$bg:e})=>e};
-`;(Tabs.Item=Item).displayName="Tabs.Item",exports.Tabs=Tabs;
+  background-color: ${({ $bg }) => $bg};
+`;
+Tabs.Item = Item;
+Item.displayName = 'Tabs.Item';
+export { Tabs };

package/dist/components/surfaces/accordion/accordion.js

@@ -1,7 +1,40 @@
-"use client";
-"use strict";var React=require("react"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),_function=require("../../../utils/function.js"),chevron_down=require("../../../icons/arrow/chevron_down.js"),chevron_up=require("../../../icons/arrow/chevron_up.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const AccordionContext=React__default.default.createContext([-1,()=>{}]),Accordion=({children:e,defaultOpen:t=-1,sx:n})=>{const[a,r]=React__default.default.useState(t);React__default.default.useEffect(()=>{r(t)},[t]);return React__default.default.createElement(AccordionContext.Provider,{value:[a,t=>{r(e=>e===t?-1:t)}]},React__default.default.createElement(Wrapper,{$sx:n},React__default.default.Children.map(e,(e,t)=>React__default.default.isValidElement(e)?React__default.default.cloneElement(e,{index:t}):null)))},Wrapper=styled.styled.div`
-  ${({$sx:e})=>e||""};
-`,AccordionItem=({buttonSx:e,children:t,index:n,sx:a,trigger:r})=>{const[o,c]=React__default.default.useContext(AccordionContext);return React__default.default.createElement(box.Box,{$dir:"column"},React__default.default.createElement(TriggerWrapper,{onClick:_function.callAll(()=>c(n),r?.props?.onClick),$sx:e},r,o===n?React__default.default.createElement(chevron_up.ChevronUp,null):React__default.default.createElement(chevron_down.ChevronDown,null)),React__default.default.createElement(box.Box,{sx:o===n?a:"visibility: hidden; height: 0px;"},t))},TriggerWrapper=styled.styled.button`
+'use client';
+import React from 'react';
+import { styled } from 'styled-components';
+import { Box } from '../../../components/atoms/box/box';
+import { callAll } from '../../../utils/function';
+import { ChevronDown } from '../../../icons/arrow/chevron_down';
+import { ChevronUp } from '../../../icons/arrow/chevron_up';
+const AccordionContext = React.createContext([-1, () => undefined]);
+const Accordion = ({ children, defaultOpen = -1, sx }) => {
+    const [openIndex, setOpenIndex] = React.useState(defaultOpen);
+    React.useEffect(() => {
+        setOpenIndex(defaultOpen);
+    }, [defaultOpen]);
+    const handleIndexChange = (index) => {
+        setOpenIndex((prev) => (prev === index ? -1 : index));
+    };
+    return (React.createElement(AccordionContext.Provider, { value: [openIndex, handleIndexChange] },
+        React.createElement(Wrapper, { "$sx": sx }, React.Children.map(children, (child, index) => {
+            if (React.isValidElement(child))
+                return React.cloneElement(child, { index });
+            return null;
+        }))));
+};
+const Wrapper = styled.div `
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+const AccordionItem = ({ buttonSx, children, index, sx, trigger, }) => {
+    const [openIndex, setOpenIndex] = React.useContext(AccordionContext);
+    return (React.createElement(Box, { "$dir": "column" },
+        React.createElement(TriggerWrapper, { onClick: callAll(
+            // eslint-disable-next-line
+            () => setOpenIndex(index), trigger?.props?.onClick), "$sx": buttonSx },
+            trigger,
+            openIndex === index ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null)),
+        React.createElement(Box, { sx: openIndex === index ? sx : 'visibility: hidden; height: 0px;' }, children)));
+};
+const TriggerWrapper = styled.button `
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -11,5 +44,8 @@
   outline: none;
   background-color: transparent;
   cursor: pointer;
-  ${({$sx:e})=>e||""};
-`;(Accordion.Item=AccordionItem).displayName="Accordion.Item",exports.Accordion=Accordion;
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+Accordion.Item = AccordionItem;
+AccordionItem.displayName = 'Accordion.Item';
+export { Accordion };

package/dist/components/surfaces/accordion/index.js

@@ -0,0 +1 @@
+export { Accordion } from './accordion';

package/dist/components/surfaces/calendar_date/calendar_date.js

@@ -1,26 +1,46 @@
-"use client";
-"use strict";var React=require("react"),styled=require("styled-components"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const CalendarDate=({monthAbbreviation:e,date:t,isDisabled:a,dayOfWeek:r,startTime:l,endTime:n,sx:d,size:i="large"})=>React__default.default.createElement(Container,{$sx:d},React__default.default.createElement(CalendarContainer,{$size:i},React__default.default.createElement(MonthContainer,{$size:i},"large"===i&&React__default.default.createElement(heading.H.Seven,{$color:"white",$textAlign:"center",$semiBold:!0},e),"small"===i&&React__default.default.createElement(paragraph.P,{$color:"white",$textAlign:"center",$fontSize:14},e)),React__default.default.createElement(DateContainer,{$size:i},"large"===i&&React__default.default.createElement(heading.H.One,{$textAlign:"center",$semiBold:!0},t),"small"===i&&React__default.default.createElement(heading.H.Six,{$color:"grey-2",$textAlign:"center"},t))),r&&l&&n&&React__default.default.createElement(TimeContainer,null,React__default.default.createElement(paragraph.P,{as:"span",$color:a?"grey-7":"red-5"},r+`, ${l} -> `+n))),Container=styled.styled.div`
+'use client';
+import React from 'react';
+import { styled } from 'styled-components';
+import { H } from '../../../components/atoms/typography/heading';
+import { P } from '../../../components/atoms/typography/paragraph';
+export const CalendarDate = ({ monthAbbreviation, date, isDisabled, dayOfWeek, startTime, endTime, sx, size = 'large', }) => {
+    return (React.createElement(Container, { "$sx": sx },
+        React.createElement(CalendarContainer, { "$size": size },
+            React.createElement(MonthContainer, { "$size": size },
+                size === 'large' && (React.createElement(H.Seven, { "$color": "white", "$textAlign": "center", "$semiBold": true }, monthAbbreviation)),
+                size === 'small' && (React.createElement(P, { "$color": "white", "$textAlign": "center", "$fontSize": 14 }, monthAbbreviation))),
+            React.createElement(DateContainer, { "$size": size },
+                size === 'large' && (React.createElement(H.One, { "$textAlign": "center", "$semiBold": true }, date)),
+                size === 'small' && (React.createElement(H.Six, { "$color": "grey-2", "$textAlign": "center" }, date)))),
+        dayOfWeek && startTime && endTime && (React.createElement(TimeContainer, null,
+            React.createElement(P, { as: "span", "$color": isDisabled ? 'grey-7' : 'red-5' }, `${dayOfWeek}, ${startTime} -> ${endTime}`)))));
+};
+const Container = styled.div `
   display: flex;
   flex-direction: column;
   align-items: center;
 
-  ${({$sx:e})=>e||""}
-`,CalendarContainer=styled.styled.div`
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const CalendarContainer = styled.div `
   display: flex;
   flex-direction: column;
 
-  ${({$size:e})=>"large"===e?"width: 120px;":"width: 64px;"}
-`,MonthContainer=styled.styled.div`
+  ${({ $size }) => ($size === 'large' ? 'width: 120px;' : 'width: 64px;')}
+`;
+const MonthContainer = styled.div `
   background-color: var(--color-red-5);
   border-radius: 16px 16px 0 0;
 
-  ${({$size:e})=>"large"===e?"padding: 8px 16px;":"padding: 2px 8px;"}
-`,DateContainer=styled.styled.div`
+  ${({ $size }) => $size === 'large' ? 'padding: 8px 16px;' : 'padding: 2px 8px;'}
+`;
+const DateContainer = styled.div `
   background-color: white;
   border-radius: 0 0 16px 16px;
   box-shadow: var(--elevation-3);
 
-  ${({$size:e})=>"large"===e?"padding: 8px 16px;":"padding: 2px 16px;"}
-`,TimeContainer=styled.styled.div`
+  ${({ $size }) => $size === 'large' ? 'padding: 8px 16px;' : 'padding: 2px 16px;'}
+`;
+const TimeContainer = styled.div `
   margin-top: 16px;
-`;exports.CalendarDate=CalendarDate;
+`;

package/dist/components/surfaces/calendar_date/index.js

@@ -0,0 +1 @@
+export { CalendarDate } from './calendar_date';

package/dist/components/surfaces/carousel/card/card.js

@@ -1,5 +1,40 @@
-"use client";
-"use strict";var React=require("react"),styled=require("styled-components"),chevron_left=require("../../../../icons/arrow/chevron_left.js"),chevron_right=require("../../../../icons/arrow/chevron_right.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const DEFAULT_SCROLL_TRIGGER_DISTANCE=11,DEFAULT_SCROLL_DISTANCE=450,CardCarousel=({children:e,onScrollEnd:t,scrollTriggerDistance:r=DEFAULT_SCROLL_TRIGGER_DISTANCE,scrollDistance:l=DEFAULT_SCROLL_DISTANCE,sx:o})=>{const a=React__default.default.useRef(null);return React__default.default.createElement(Wrapper,{$sx:o},React__default.default.createElement(Button,{className:"carousel-navigation",onClick:()=>{var e;a.current&&(e=a.current.scrollLeft-l,a.current.scrollLeft=e<0?0:e)},$side:"left"},React__default.default.createElement(chevron_left.ChevronLeft,{color:"white",size:48})),React__default.default.createElement(Inner,{onScroll:e=>{e=e.target;e.scrollWidth-e.scrollLeft-e.clientWidth<r&&t&&t()},ref:a},e),React__default.default.createElement(Button,{className:"carousel-navigation",onClick:()=>{var e;a.current&&(e=a.current.scrollLeft+l,a.current.scrollLeft=e)},$side:"right"},React__default.default.createElement(chevron_right.ChevronRight,{color:"white",size:48})))},Wrapper=styled.styled.div`
+'use client';
+import React from 'react';
+import { styled } from 'styled-components';
+import { ChevronLeft } from '../../../../icons/arrow/chevron_left';
+import { ChevronRight } from '../../../../icons/arrow/chevron_right';
+const DEFAULT_SCROLL_TRIGGER_DISTANCE = 11;
+const DEFAULT_SCROLL_DISTANCE = 450;
+export const CardCarousel = ({ children, onScrollEnd, scrollTriggerDistance = DEFAULT_SCROLL_TRIGGER_DISTANCE, scrollDistance = DEFAULT_SCROLL_DISTANCE, sx, }) => {
+    const ref = React.useRef(null);
+    const handleScroll = (event) => {
+        const target = event.target;
+        const scrollDistance = target.scrollWidth - target.scrollLeft;
+        if (scrollDistance - target.clientWidth < scrollTriggerDistance &&
+            onScrollEnd) {
+            onScrollEnd();
+        }
+    };
+    const onNavigateRight = () => {
+        if (ref.current) {
+            const amount = ref.current.scrollLeft + scrollDistance;
+            ref.current.scrollLeft = amount;
+        }
+    };
+    const onNavigateLeft = () => {
+        if (ref.current) {
+            const amount = ref.current.scrollLeft - scrollDistance;
+            ref.current.scrollLeft = amount < 0 ? 0 : amount;
+        }
+    };
+    return (React.createElement(Wrapper, { "$sx": sx },
+        React.createElement(Button, { className: "carousel-navigation", onClick: onNavigateLeft, "$side": "left" },
+            React.createElement(ChevronLeft, { color: "white", size: 48 })),
+        React.createElement(Inner, { onScroll: handleScroll, ref: ref }, children),
+        React.createElement(Button, { className: "carousel-navigation", onClick: onNavigateRight, "$side": "right" },
+            React.createElement(ChevronRight, { color: "white", size: 48 }))));
+};
+const Wrapper = styled.div `
   position: relative;
   height: 288px;
 
@@ -7,8 +42,9 @@
     display: block;
   }
 
-  ${({$sx:e})=>e||""}
-`,Inner=styled.styled.div`
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const Inner = styled.div `
   position: absolute;
   width: 100%;
   z-index: 0;
@@ -33,7 +69,8 @@
     width: 0px;
     height: 0px;
   }
-`,Button=styled.styled.button`
+`;
+const Button = styled.button `
   position: absolute;
   z-index: 1;
   top: 0px;
@@ -49,10 +86,12 @@
 
   display: none;
 
-  ${({$side:e})=>"left"===e?`
+  ${({ $side }) => $side === 'left'
+    ? `
     left: 0px;
     border-radius: 0px 16px 16px 0px;
-    `:`
+    `
+    : `
     right: 0px;
     border-radius: 16px 0px 0px 16px;`};
-`;exports.CardCarousel=CardCarousel;
+`;

package/dist/components/surfaces/carousel/card/index.js

@@ -0,0 +1 @@
+export { CardCarousel } from './card';

package/dist/components/surfaces/carousel/index.js

@@ -0,0 +1 @@
+export { CardCarousel } from './card';