@soul-refiner/design-system 1.7.21 → 1.7.22-alpha.0

package/dist/components/feedback/toast/toast.js

@@ -1,9 +1,14 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
-import { Styles } from '../../../common';
-import { Button, P } from '../../';
-import { AlertCircle, AlertOctogon, AlertTriangle, Close, Information, } from '../../../icons';
+import { Styles } from '../../../common/styles';
+import { Button } from '../../../components/actions/button/button';
+import { P } from '../../../components/atoms/typography/paragraph';
+import { AlertCircle } from '../../../icons/notifications/alert_circle';
+import { AlertOctogon } from '../../../icons/notifications/alert_octogon';
+import { AlertTriangle } from '../../../icons/notifications/alert_triangle';
+import { Close } from '../../../icons/basic/close';
+import { Information } from '../../../icons/notifications/information';
 export const Toast = ({ content, href, onClose, type, isAnimated = false, animationDuration, }) => {
     const iconLookup = {
         error: React.createElement(AlertOctogon, { size: 24 }),

package/dist/components/iconography/avatar/avatar.js

@@ -2,8 +2,18 @@
 import React from 'react';
 import Image from 'next/image';
 import styled from 'styled-components';
-import { Box, H, P } from '../../';
-import { Approved, Busy, Declined, Default, Focus, Locked, Offline, Online, Subscribed, } from './icons';
+import { Box } from '../../../components/atoms/box/box';
+import { H } from '../../../components/atoms/typography/heading';
+import { P } from '../../../components/atoms/typography/paragraph';
+import { Approved } from './icons';
+import { Busy } from './icons';
+import { Declined } from './icons';
+import { Default } from './icons';
+import { Focus } from './icons';
+import { Locked } from './icons';
+import { Offline } from './icons';
+import { Online } from './icons';
+import { Subscribed } from './icons';
 /**
  * Lookup tables for sizes
  */

package/dist/components/iconography/icon/icon.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
-import { COLORS } from '../../../common';
+import { COLORS } from '../../../common/colors';
 type NativeProps = Pick<React.HTMLAttributes<SVGElement>, 'children' | 'className' | 'dangerouslySetInnerHTML' | 'id' | 'onBlur' | 'onBlurCapture' | 'onClick' | 'onChange' | 'onCopy' | 'onCut' | 'onKeyDown' | 'onKeyDownCapture' | 'onKeyUp' | 'onKeyUpCapture' | 'onMouseDown' | 'onMouseDownCapture' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseOut' | 'onMouseOver'> & {
     value?: string;
 };
 export interface IconProps extends NativeProps {
     as?: React.ElementType;
     color?: (typeof COLORS)[number];
-    size?: 16 | 20 | 24 | 40;
+    size?: 16 | 20 | 24 | 32 | 40;
     sx?: string;
 }
 export declare const Icon: ({ as, children, color, size, sx, ...rest }: IconProps) => React.JSX.Element;

package/dist/components/iconography/icon/icon.js

@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
-import { colorReference } from '../../../common';
+import { colorReference } from '../../../common/colors';
 export const Icon = ({ as, children, color = 'grey-3', size = 16, sx, ...rest }) => {
     return (React.createElement(SVG, { as: as, width: size, height: size, viewBox: "0 0 16 16", fill: colorReference[color], xmlns: "http://www.w3.org/2000/svg", "$sx": sx, ...rest }, children));
 };

package/dist/components/input/calendar/calendar.js

@@ -1,10 +1,15 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
-import { MONTHS, WEEKDAYS } from '../../../common';
-import { Button, P } from '../..';
-import { ChevronLeft, ChevronRight, Calendar as CalendarIcon, } from '../../../icons';
-import { buildCalendar, zeroPad } from '../../../utils';
+import { MONTHS } from '../../../common/date';
+import { WEEKDAYS } from '../../../common/date';
+import { Button } from '../../../components/actions/button/button';
+import { P } from '../../../components/atoms/typography/paragraph';
+import { ChevronLeft } from '../../../icons/arrow/chevron_left';
+import { ChevronRight } from '../../../icons/arrow/chevron_right';
+import { Calendar as CalendarIcon } from '../../../icons/time/calendar';
+import { buildCalendar } from '../../../utils/date';
+import { zeroPad } from '../../../utils/date';
 export const CalendarInput = ({ selectedDate, onSelect: parentOnSelect, disablePastDates, }) => {
     const today = new Date();
     today.setHours(0);

package/dist/components/input/checkbox/checkbox.js

@@ -1,8 +1,8 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
-import { Styles } from '../../../common';
-import { Checkmark } from '../../../icons';
+import { Styles } from '../../../common/styles';
+import { Checkmark } from '../../../icons/basic/checkmark';
 export const Checkbox = ({ disabled, selected, sx, ...rest }) => {
     return (React.createElement(Box, { "$align": "center", "$disabled": !!disabled, "$display": "flex", "$justify": "center", "$selected": selected, "$sx": sx, ...rest }, selected && React.createElement(Checkmark, { color: "white" })));
 };

package/dist/components/input/date/date.js

@@ -1,10 +1,16 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
-import { MONTHS, WEEKDAYS } from '../../../common';
-import { Button, P } from '../../';
-import { ChevronLeft, ChevronRight, ArrowRight } from '../../../icons';
-import { buildCalendar, getMonthDays, zeroPad } from '../../../utils';
+import { MONTHS } from '../../../common/date';
+import { WEEKDAYS } from '../../../common/date';
+import { Button } from '../../../components/actions/button/button';
+import { P } from '../../../components/atoms/typography/paragraph';
+import { ChevronLeft } from '../../../icons/arrow/chevron_left';
+import { ChevronRight } from '../../../icons/arrow/chevron_right';
+import { ArrowRight } from '../../../icons/arrow/arrow_right';
+import { buildCalendar } from '../../../utils/date';
+import { getMonthDays } from '../../../utils/date';
+import { zeroPad } from '../../../utils/date';
 export const DatePicker = ({ endDate, label, onSelect: parentOnSelect, startDate, }) => {
     const today = new Date();
     today.setHours(0);

package/dist/components/input/filter/filter.js

@@ -1,10 +1,15 @@
 'use client';
 import React from 'react';
 import styled, { css } from 'styled-components';
-import { Box, Button, P } from '../../';
-import { ChevronDown, ChevronUp, Close } from '../../../icons';
-import { Styles } from '../../../common';
-import { Spacer, Option } from './filter_option';
+import { Box } from '../../../components/atoms/box/box';
+import { Button } from '../../../components/actions/button/button';
+import { P } from '../../../components/atoms/typography/paragraph';
+import { ChevronDown } from '../../../icons/arrow/chevron_down';
+import { ChevronUp } from '../../../icons/arrow/chevron_up';
+import { Close } from '../../../icons/basic/close';
+import { Styles } from '../../../common/styles';
+import { Spacer } from './filter_option';
+import { Option } from './filter_option';
 const Filter = ({ closeOnBlur = true, disabled, graphic, graphicAlignment = 'left', resetGraphic, label = '', sx, triggerType, options, defaultValue = '', closeOnChange = true, optionOnChange, optionShowClose, checkbox, applyOnClick, resetOnClick, applyResetActions, }) => {
     const multiple = !!checkbox;
     const wrapperRef = React.useRef(null);

package/dist/components/input/filter/filter_option.js

@@ -1,8 +1,11 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
-import { Box, P, Checkbox, Radio } from '../..';
-import { Close } from '../../../icons';
+import { Box } from '../../../components/atoms/box/box';
+import { P } from '../../../components/atoms/typography/paragraph';
+import { Checkbox } from '../../../components/input/checkbox/checkbox';
+import { Radio } from '../../../components/input/radio';
+import { Close } from '../../../icons/basic/close';
 const Option = ({ label, onClick, selected, sx, value, checkbox, radio = false, showClose = false, onClose, }) => {
     return (React.createElement(OptionWrapper, { "data-value": value, onClick: onClick, "$selected": selected, "$sx": sx, "$hasCheckbox": !!checkbox },
         checkbox && React.createElement(Checkbox, { selected: selected }),

package/dist/components/input/radio/radio.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps } from '../../';
+import { BoxProps } from '../../../components/atoms/box/box';
 type NativeProps = Pick<React.HTMLAttributes<HTMLInputElement>, 'onClick' | 'onChange' | 'onMouseDown' | 'onMouseDownCapture' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseOut' | 'onMouseOver'>;
 export interface RadioProps extends NativeProps {
     checked: boolean;

package/dist/components/input/radio/radio.js

@@ -1,7 +1,8 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
-import { Box, P } from '../../';
+import { Box } from '../../../components/atoms/box/box';
+import { P } from '../../../components/atoms/typography/paragraph';
 const Radio = ({ checked = false, disabled, label, onClick, reversed, sx, value, ...rest }) => {
     const handleInputClick = (event) => {
         event.stopPropagation();

package/dist/components/input/search/search.js

@@ -1,8 +1,9 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
-import { Styles } from '../../../common';
-import { Close, Search as SearchIcon } from '../../../icons';
+import { Styles } from '../../../common/styles';
+import { Close } from '../../../icons/basic/close';
+import { Search as SearchIcon } from '../../../icons/basic/search';
 export const Search = ({ dropdownFilter, onChange, onClearText, onSubmit, placeholder, size, sx, value, }) => {
     const [expanded, setExpanded] = React.useState(false);
     const [focused, setFocused] = React.useState(false);

package/dist/components/input/select/select.js

@@ -1,7 +1,7 @@
 'use client';
-import { P } from '../../../components/atoms/typography/paragraph';
 import React from 'react';
 import styled from 'styled-components';
+import { P } from '../../../components/atoms/typography/paragraph';
 export const Select = ({ label, onClick, selected, sx, value, }) => {
     return (React.createElement(Label, { onClick: (event) => onClick(event, value), "$sx": sx },
         React.createElement("input", { value: value, type: "radio", checked: selected, readOnly: true }),

package/dist/components/input/text_area/text_area.js

@@ -1,8 +1,9 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
-import { Box } from '../../atoms/box/box';
-import { CheckmarkCircle, AlertCircle } from '../../../icons';
+import { Box } from '../../../components/atoms/box/box';
+import { CheckmarkCircle } from '../../../icons/basic/checkmark_circle';
+import { AlertCircle } from '../../../icons/notifications/alert_circle';
 export const TextArea = ({ bg = 'var(--color-blue-10)', disabled, helperText, icon, label, maxCharacters, minHeight, minWidth, name, onChange, placeholder, resize = false, successful, sx, value, warning, }) => {
     const ref = React.useRef(null);
     React.useEffect(() => {

package/dist/components/input/text_input/text_input.js

@@ -2,7 +2,8 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Chip } from '../../feedback/chip/chip';
-import { CheckmarkCircle, AlertCircle } from '../../../icons';
+import { CheckmarkCircle } from '../../../icons/basic/checkmark_circle';
+import { AlertCircle } from '../../../icons/notifications/alert_circle';
 export const TextInput = ({ bg = 'var(--color-blue-10)', disabled, helperText, icon, label, maxCharacters, multiple, name, onChange, onMultipleChange, placeholder, size = 'large', successful, sx, value, warning, type = 'text', placeIconAtTheEnd = false, inputSx, }) => {
     const id = React.useId();
     const isMultiple = multiple;
@@ -36,7 +37,7 @@ export const TextInput = ({ bg = 'var(--color-blue-10)', disabled, helperText, i
         setMultipleValueToAdd('');
     };
     /**
-     * when the user clicks on the chip to remove it, remove it from the value
+     * when the user clicks on the chip to remove it, remove it frm the value
      */
     const handleMultipleItemRemoval = (removalItem) => {
         onMultipleChange &&

package/dist/components/input/time/time.js

@@ -1,8 +1,8 @@
 'use client';
-import { Dropdown } from '../../actions/dropdown';
+import { Dropdown } from '../../../components/actions/dropdown/dropdown';
 import React from 'react';
 import styled from 'styled-components';
-import { Clock } from '../../../icons';
+import { Clock } from '../../../icons/time/clock';
 export const Time = ({ selectedTime, setTime, selectedPeriod, setPeriod, }) => {
     const hours = React.useMemo(() => {
         const hours = [];

package/dist/components/media/video-player/playlist-item.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import Image from 'next/image';
 import styled from 'styled-components';
-import { Box } from '../../atoms/box';
-import { SecToDuration } from '../../atoms/seconds_to_duration';
-import { P } from '../../atoms/typography';
-import { Lock, PlaySolid } from '../../../icons';
+import { Box } from '../../../components/atoms/box/box';
+import { SecToDuration } from '../../../components';
+import { P } from '../../../components/atoms/typography/paragraph';
+import { Lock } from '../../../icons/security/lock';
+import { PlaySolid } from '../../../icons/audio_video/play_solid';
 export const PlaylistItem = ({ duration, onClick, playable, progress = 0, shortDescription, thumbnail, title, }) => {
     return (React.createElement(Wrapper, { onClick: playable ? onClick : undefined, "$playable": playable },
         playable ? (React.createElement(PlaySolid, { color: "white", size: 16, sx: "position: absolute; left: 8px; bottom: 4px;" })) : (React.createElement(Lock, { color: "white", size: 16, sx: "position: absolute; left: 8px; bottom: 4px;" })),

package/dist/components/media/video-player/video.d.ts

@@ -18,7 +18,7 @@ interface Trailer {
 }
 export interface VideoPlayerProps {
     /**
-     * @param activeIndex the media item from the playlist currently playing
+     * @param activeIndex the media item frm the playlist currently playing
      */
     activeIndex: number;
     /**

package/dist/components/media/video-player/video.js

@@ -3,10 +3,12 @@ import React from 'react';
 import Image from 'next/image';
 import ReactPlayer from 'react-player';
 import styled from 'styled-components';
-import { Box } from '../../atoms/box';
-import { H, P } from '../../atoms/typography';
-import { Button } from '../../actions/button';
-import { LockCircle, PlaySolid } from '../../../icons';
+import { Box } from '../../../components/atoms/box/box';
+import { H } from '../../../components/atoms/typography/heading';
+import { P } from '../../../components/atoms/typography/paragraph';
+import { Button } from '../../../components/actions/button/button';
+import { LockCircle } from '../../../icons/security/lock_circle';
+import { PlaySolid } from '../../../icons/audio_video/play_solid';
 import { PlaylistItem } from './playlist-item';
 /**
  * ReactPlayer props reference -> https://www.npmjs.com/package/react-player#props

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

@@ -2,8 +2,9 @@
 import React from 'react';
 import styled from 'styled-components';
 import Link from 'next/link';
-import { Box } from '../../';
-import { ChevronLeft, ChevronRight } from '../../../icons';
+import { Box } from '../../../components/atoms/box/box';
+import { ChevronLeft } from '../../../icons/arrow/chevron_left';
+import { ChevronRight } from '../../../icons/arrow/chevron_right';
 const Breadcrumb = ({ children, previous }) => {
     const id = React.useId();
     const _children = React.Children.toArray(children);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DrawerProps } from '../../../components/surfaces/drawer';
+import { DrawerProps } from '../../../components';
 /*************************************************************************************************************************
  * Inner Navigation
  */

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

@@ -1,9 +1,12 @@
 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';
+import { Button } from '../../../components/actions/button/button';
+import { Drawer } from '../../../components';
+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',
@@ -50,7 +53,7 @@ const NavWrapper = styled.nav `
   width: 365px;
   padding: 24px 12px 24px 16px;
   box-sizing: border-box;
-  background-color: var(--color-primary-blue-4);
+  background-color: var(--color-blue-10);
   border-right: 1px solid var(--color-grey-9);
 `;
 const InnerNavItem = ({ active, href, icon, label, sx, onClick, }) => {
@@ -65,7 +68,7 @@ const Item = styled(Link) `
   align-items: center;
   border-radius: 8px;
   font-family: var(--font-inter);
-  font-weight: 700;
+  font-weight: 500;
   font-size: 16px;
   line-height: 24px;
   color: var(--color-blue-2);

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

@@ -2,7 +2,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import Link from 'next/link';
-import { P } from '../../';
+import { P } from '../../../components/atoms/typography/paragraph';
 const colorLookup = {
     blue: {
         bg: 'var(--color-hue-blue-2)',

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

@@ -1,9 +1,10 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
-import { Box } from '../../';
-import { callAll } from '../../../utils';
-import { ChevronDown, ChevronUp } from '../../../icons';
+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, sx }) => {
     const [openIndex, setOpenIndex] = React.useState(-1);

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

@@ -1,7 +1,8 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
-import { H, P } from '../../atoms/typography';
+import { H } from '../../../components/atoms/typography/heading';
+import { P } from '../../../components/atoms/typography/paragraph';
 export const CalendarDate = ({ monthAbbreviation, date, dayOfWeek, startTime, endTime, sx, size = 'large', }) => {
     return (React.createElement(Container, { "$sx": sx },
         React.createElement(CalendarContainer, { "$size": size },

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

@@ -1,7 +1,8 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
-import { ChevronLeft, ChevronRight } from '../../../../icons';
+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, }) => {

package/dist/components/surfaces/comment/comment.js

@@ -2,12 +2,16 @@
 import React from 'react';
 import styled from 'styled-components';
 import Picker from '@emoji-mart/react';
-import { Avatar, Box, P, TextInput } from '../../';
-import { Button } from '../../actions/button';
-import { Portal } from '../portal';
+import { Avatar } from '../../../components/iconography/avatar/avatar';
+import { Box } from '../../../components/atoms/box/box';
+import { P } from '../../../components/atoms/typography/paragraph';
+import { TextInput } from '../../../components';
+import { Button } from '../../../components/actions/button/button';
+import { Portal } from '../../../components/surfaces/portal';
 import emojis from '../../../emoji/emojis.json';
-import { Styles } from '../../../common';
-import { ThumbsUp, Comment as CommentIcon } from '../../../icons';
+import { Styles } from '../../../common/styles';
+import { ThumbsUp } from '../../../icons/basic/thumbs_up';
+import { Comment as CommentIcon } from '../../../icons/message/comment';
 import { abbrTimeBeforeDate } from './helpers';
 const MAX_REACTIONS_SHOWN = 5;
 export const Comment = ({ avatarTooltipContent, avatarTooltipSx, content, createdDate, hasMoreReplies, id, onComment, onReact, onShowReplies, reactionModal, reactions, replies, userImageUri, userName, userReactions, userProfileUri, }) => {

package/dist/components/surfaces/drawer/drawer.js

@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
-import { callAll } from '../../../utils';
+import { callAll } from '../../../utils/function';
 const DrawerContext = React.createContext([false, (() => undefined)]);
 export const Drawer = ({ children, controlledOpen, onOpenChange, }) => {
     const [open, setOpen] = React.useState(controlledOpen || false);

package/dist/components/surfaces/message/message.js

@@ -1,7 +1,10 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
-import { Avatar, Box, P, H } from '../../';
+import { Avatar } from '../../../components/iconography/avatar/avatar';
+import { Box } from '../../../components/atoms/box/box';
+import { P } from '../../../components/atoms/typography/paragraph';
+import { H } from '../../../components/atoms/typography/heading';
 export const Message = ({ messages, userId }) => {
     const id = React.useId();
     return (React.createElement(Box, { "$display": "flex", "$dir": "column", "$gap": 16 }, messages.map(({ content, createdDate, senderAvatarURI, senderHref, senderId, senderName, }, index) => {

package/dist/components/surfaces/modal/modal.js

@@ -1,9 +1,9 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
-import { Button } from '../../';
-import { Close } from '../../../icons';
-import { callAll } from '../../../utils';
+import { Button } from '../../../components/actions/button/button';
+import { Close } from '../../../icons/basic/close';
+import { callAll } from '../../../utils/function';
 const ModalContext = React.createContext([false, (() => undefined)]);
 const Modal = ({ alwaysRender = true, controlledOpen, onChange, children, ...props }) => {
     const [open, setOpen] = React.useState(controlledOpen || false);

package/dist/components/surfaces/post/post.js

@@ -3,13 +3,15 @@ import React from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import styled from 'styled-components';
-import { H, P } from '../../atoms/typography';
-import { TimeAgo } from '../../atoms/time_ago/time_ago';
-import { Button } from '../../actions/button';
-import { Avatar } from '../../iconography/avatar';
-import { Lock } from '../../../icons';
-import { Modal } from '../modal';
-import { ChevronLeft, ChevronRight } from '../../../icons/arrow';
+import { H } from '../../../components/atoms/typography/heading';
+import { P } from '../../../components/atoms/typography/paragraph';
+import { TimeAgo } from '../../../components';
+import { Button } from '../../../components/actions/button/button';
+import { Avatar } from '../../../components/iconography/avatar/avatar';
+import { Lock } from '../../../icons/security/lock';
+import { Modal } from '../../../components/surfaces/modal/modal';
+import { ChevronLeft } from '../../../icons/arrow/chevron_left';
+import { ChevronRight } from '../../../icons/arrow/chevron_right';
 export const Post = ({ actions, author, authorActive, authorHref, authorImage, avatarTooltipContent, avatarTooltipSx, children, content, createdDate, dropdown, hasComments, id, images, isPaywalled = false, onJoin, }) => {
     const componentId = React.useId();
     const [curr, setCurr] = React.useState(-1);

package/dist/components/table/table/table.js

@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
-import { Box } from '../../';
+import { Box } from '../../../components/atoms/box/box';
 const Table = ({ border = true, children, compact, footer, header, separated, striped, sx, padding = 32, }) => {
     return (React.createElement(Box, { "$backgroundColor": "white", "$borderRadius": "large", "$display": "flex", "$dir": "column", "$gap": 32, "$padding": padding, sx: compact ? 'width: fit-content;' : '' },
         !!header && header,

package/dist/icons/arrow/arrow_all.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { IconProps } from '../../components';
+import { IconProps } from '../../components/iconography/icon/icon';
 export declare const ArrowAll: (props: IconProps) => React.JSX.Element;

package/dist/icons/arrow/arrow_all.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from '../../components';
+import { Icon } from '../../components/iconography/icon/icon';
 export const ArrowAll = (props) => {
     return (React.createElement(Icon, { ...props },
         React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.0573 8.66671H8.66677V13.0572L10.1954 11.5286L11.1382 12.4714L8.0001 15.6095L4.86203 12.4714L5.80484 11.5286L7.33343 13.0572V8.66671H2.94291L4.47151 10.1953L3.5287 11.1381L0.390625 8.00004L3.5287 4.86197L4.47151 5.80478L2.94291 7.33337H7.33343V2.94285L5.80484 4.47144L4.86203 3.52864L8.0001 0.390564L11.1382 3.52864L10.1954 4.47144L8.66677 2.94285V7.33337H13.0573L11.5287 5.80478L12.4715 4.86197L15.6096 8.00004L12.4715 11.1381L11.5287 10.1953L13.0573 8.66671Z" })));

package/dist/icons/arrow/arrow_all_diagonal.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { IconProps } from '../../components';
+import { IconProps } from '../../components/iconography/icon/icon';
 export declare const ArrowAllDiagonal: (props: IconProps) => React.JSX.Element;

package/dist/icons/arrow/arrow_all_diagonal.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from '../../components';
+import { Icon } from '../../components/iconography/icon/icon';
 export const ArrowAllDiagonal = (props) => {
     return (React.createElement(Icon, { ...props },
         React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.94281 8L12.6667 11.7239V9.33333H14V14H9.33333V12.6667H11.7239L8 8.94281L4.27614 12.6667H6.66667V14H2V9.33333H3.33333V11.7239L7.05719 8L3.33333 4.27614V6.66667H2V2H6.66667V3.33333H4.27614L8 7.05719L11.7239 3.33333H9.33333V2H14V6.66667H12.6667V4.27614L8.94281 8Z" })));

package/dist/icons/arrow/arrow_both_downwards.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { IconProps } from '../../components';
+import { IconProps } from '../../components/iconography/icon/icon';
 export declare const ArrowBothDownwards: (props: IconProps) => React.JSX.Element;

package/dist/icons/arrow/arrow_both_downwards.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from '../../components';
+import { Icon } from '../../components/iconography/icon/icon';
 export const ArrowBothDownwards = (props) => {
     return (React.createElement(Icon, { ...props },
         React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.27614 3.33333L12.6667 11.7239V9.33333H14V14H9.33333V12.6667H11.7239L3.33333 4.27614V6.66667H2V2H6.66667V3.33333H4.27614Z" })));

package/dist/icons/arrow/arrow_both_upwards.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { IconProps } from '../../components';
+import { IconProps } from '../../components/iconography/icon/icon';
 export declare const ArrowBothUpwards: (props: IconProps) => React.JSX.Element;

package/dist/icons/arrow/arrow_both_upwards.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from '../../components';
+import { Icon } from '../../components/iconography/icon/icon';
 export const ArrowBothUpwards = (props) => {
     return (React.createElement(Icon, { ...props },
         React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.33333 3.33333V2H14V6.66667H12.6667V4.27614L4.27614 12.6667H6.66667V14H2V9.33333H3.33333V11.7239L11.7239 3.33333H9.33333Z" })));

package/dist/icons/arrow/arrow_circle_left.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { IconProps } from '../../components';
+import { IconProps } from '../../components/iconography/icon/icon';
 export declare const ArrowCircleLeft: (props: IconProps) => React.JSX.Element;

package/dist/icons/arrow/arrow_circle_left.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from '../../components';
+import { Icon } from '../../components/iconography/icon/icon';
 export const ArrowCircleLeft = (props) => {
     return (React.createElement(Icon, { ...props },
         React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.12936 4.66671H6.66732V6.00004H2.00065V1.33337H3.33398V3.51361C4.48406 2.12172 6.13116 1.33337 8.00065 1.33337C11.6825 1.33337 14.6673 4.31814 14.6673 8.00004C14.6673 11.6819 11.6825 14.6667 8.00065 14.6667C4.31875 14.6667 1.33398 11.6819 1.33398 8.00004H2.66732C2.66732 10.9456 5.05513 13.3334 8.00065 13.3334C10.9462 13.3334 13.334 10.9456 13.334 8.00004C13.334 5.05452 10.9462 2.66671 8.00065 2.66671C6.4049 2.66671 5.03634 3.38584 4.12936 4.66671Z" })));

package/dist/icons/arrow/arrow_circle_left_double.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { IconProps } from '../../components';
+import { IconProps } from '../../components/iconography/icon/icon';
 export declare const ArrowCircleLeftDouble: (props: IconProps) => React.JSX.Element;

package/dist/icons/arrow/arrow_circle_left_double.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from '../../components';
+import { Icon } from '../../components/iconography/icon/icon';
 export const ArrowCircleLeftDouble = (props) => {
     return (React.createElement(Icon, { ...props },
         React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.66732 4.66671H4.12936C5.03634 3.38584 6.4049 2.66671 8.00065 2.66671C10.9462 2.66671 13.334 5.05452 13.334 8.00004H14.6673C14.6673 4.31814 11.6825 1.33337 8.00065 1.33337C6.13116 1.33337 4.48406 2.12172 3.33398 3.51361V1.33337H2.00065V6.00004H6.66732V4.66671ZM9.33398 11.3334H11.8719C10.965 12.6142 9.5964 13.3334 8.00065 13.3334C5.05513 13.3334 2.66732 10.9456 2.66732 8.00004H1.33398C1.33398 11.6819 4.31875 14.6667 8.00065 14.6667C9.87014 14.6667 11.5172 13.8784 12.6673 12.4865V14.6667H14.0007V10H9.33398V11.3334Z" })));

package/dist/icons/arrow/arrow_circle_left_double_alert.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { IconProps } from '../../components';
+import { IconProps } from '../../components/iconography/icon/icon';
 export declare const ArrowCircleLeftDoubleAlert: (props: IconProps) => React.JSX.Element;

package/dist/icons/arrow/arrow_circle_left_double_alert.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from '../../components';
+import { Icon } from '../../components/iconography/icon/icon';
 export const ArrowCircleLeftDoubleAlert = (props) => {
     return (React.createElement(Icon, { ...props },
         React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.33398 4.66671H4.12936C5.03634 3.38584 6.4049 2.66671 8.00065 2.66671C10.9462 2.66671 13.334 5.05452 13.334 8.00004H14.6673C14.6673 4.31814 11.6825 1.33337 8.00065 1.33337C6.13116 1.33337 4.48406 2.12172 3.33398 3.51361V2.66671H2.00065V6.00004H5.33398V4.66671ZM10.6673 11.3334H11.8719C10.965 12.6142 9.5964 13.3334 8.00065 13.3334C5.05513 13.3334 2.66732 10.9456 2.66732 8.00004H1.33398C1.33398 11.6819 4.31875 14.6667 8.00065 14.6667C9.87014 14.6667 11.5172 13.8784 12.6673 12.4865V13.3334H14.0007V10H10.6673V11.3334ZM8.00087 10.6656C8.36918 10.6656 8.66776 10.3671 8.66776 9.99894C8.66776 9.63075 8.36918 9.33227 8.00087 9.33227C7.63256 9.33227 7.33398 9.63075 7.33398 9.99894C7.33398 10.3671 7.63256 10.6656 8.00087 10.6656ZM8.66972 4.6656H7.33595V8.66561H8.66972V4.6656Z" })));