@powerhousedao/design-system 1.0.0-alpha.13 → 1.0.0-alpha.15

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.
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ import { PressEvent } from 'react-aria-components';
3
+ export interface AddNewItemInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSubmit'> {
4
+ onCancel: () => void;
5
+ onSubmit: (value: string, event?: PressEvent) => void;
6
+ 'aria-label'?: string;
7
+ }
8
+ export declare const AddNewItemInput: React.FC<AddNewItemInputProps>;
@@ -0,0 +1,22 @@
1
+ /// <reference types="react" />
2
+ import { TreeItem } from '..';
3
+ export type BreadcrumbsProps<T extends string> = React.HTMLAttributes<HTMLDivElement> & {
4
+ rootItem: TreeItem<T>;
5
+ onItemClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, item: TreeItem<T>) => void;
6
+ onAddNewItem: (item: TreeItem, option: 'new-folder') => void;
7
+ onSubmitInput: (item: TreeItem) => void;
8
+ onCancelInput: (item: TreeItem) => void;
9
+ };
10
+ /**
11
+ * The `Breadcrumbs` component displays the current path of the selected item.
12
+ * It also allows the user to add a new folder to the current path.
13
+ * The component mirrors the state and setters of the TreeView, and should be used together with it.
14
+ * The `TreeItem` type is the source of truth.
15
+ */
16
+ export declare function Breadcrumbs<T extends string = string>(props: BreadcrumbsProps<T>): import("react/jsx-runtime").JSX.Element;
17
+ export type BreadcrumbProps<T extends string> = {
18
+ onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, item: TreeItem<string>) => void;
19
+ item: TreeItem<T>;
20
+ className?: string;
21
+ };
22
+ export declare function Breadcrumb<T extends string>(props: BreadcrumbProps<T>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export * from './breadcrumbs';
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { DropItem } from '@/powerhouse/hooks';
2
+ import type { DropItem } from '../../../powerhouse/hooks';
3
3
  import type { DragEndEvent, DragStartEvent, DropEvent } from 'react-aria';
4
4
  import { ConnectTreeViewItemProps, DefaultOptionId, ItemType, TreeItem } from '..';
5
5
  export type DriveType = 'public' | 'local' | 'cloud';
@@ -1,4 +1,4 @@
1
- import { DropdownMenuProps } from '@/powerhouse';
1
+ import { DropdownMenuProps } from '../../../powerhouse';
2
2
  export interface ConnectDropdownMenuItem<T extends string = string> {
3
3
  id: T;
4
4
  icon?: string;
@@ -1,4 +1,4 @@
1
- import { ModalProps } from '@/powerhouse/components/modal';
1
+ import { ModalProps } from '../../../powerhouse/components/modal';
2
2
  import React from 'react';
3
3
  export interface ConnectDeleteItemModalProps extends ModalProps {
4
4
  header: React.ReactNode;
@@ -1,4 +1,4 @@
1
- import { TextInputProps } from '@/powerhouse/components/text-input';
1
+ import { TextInputProps } from '../../../powerhouse/components/text-input';
2
2
  import React from 'react';
3
3
  import { FilterItemType } from './filter-item';
4
4
  export interface ConnectSearchBarProps extends TextInputProps {
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { SidebarFooterProps } from '@/powerhouse';
2
+ import { SidebarFooterProps } from '../../../powerhouse';
3
3
  import { SidebarUserProps } from './sidebar-user';
4
4
  export interface ConnectSidebarFooterProps extends SidebarFooterProps, SidebarUserProps {
5
5
  }
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { SidebarHeaderProps } from '@/powerhouse';
2
+ import { SidebarHeaderProps } from '../../../powerhouse';
3
3
  export interface ConnectSidebarHeaderProps extends SidebarHeaderProps {
4
4
  onToggle: () => void;
5
5
  }
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { SidebarProps } from '@/powerhouse';
2
+ import { SidebarProps } from '../../../powerhouse';
3
3
  import { ConnectSidebarFooterProps } from './sidebar-footer';
4
4
  import { ConnectSidebarHeaderProps } from './sidebar-header';
5
5
  export interface ConnectSidebarProps extends Omit<SidebarProps, 'maxWidth' | 'minWidth'>, ConnectSidebarHeaderProps, ConnectSidebarFooterProps {
@@ -1,4 +1,4 @@
1
- import { TreeViewInputProps } from '@/powerhouse/components/tree-view-input';
1
+ import { TreeViewInputProps } from '../../../powerhouse/components/tree-view-input';
2
2
  import React from 'react';
3
3
  import { TreeItem } from '../tree-view-item';
4
4
  export interface ConnectTreeViewInputProps extends Omit<TreeViewInputProps, 'initialValue' | 'onSubmit' | 'onCancel' | 'submitIcon' | 'cancelIcon' | 'icon'> {
@@ -1,5 +1,5 @@
1
- import { ConnectDropdownMenuItem } from '@/connect/components/dropdown-menu';
2
- import { TreeViewItemProps, UseDraggableTargetProps } from '@/powerhouse';
1
+ import { ConnectDropdownMenuItem } from '../../../connect/components/dropdown-menu';
2
+ import { TreeViewItemProps, UseDraggableTargetProps } from '../../../powerhouse';
3
3
  export declare enum ItemType {
4
4
  Folder = "folder",
5
5
  File = "file",
@@ -1,4 +1,4 @@
1
- import { DriveTreeItem } from '@/connect/components/drive-view';
2
- import { TreeItem } from '@/connect/components/tree-view-item';
1
+ import { DriveTreeItem } from '../../connect/components/drive-view';
2
+ import { TreeItem } from '../../connect/components/tree-view-item';
3
3
  export declare const traverseTree: (item: TreeItem, callback: (item: TreeItem) => TreeItem) => TreeItem;
4
4
  export declare const traverseDriveById: (drives: DriveTreeItem[], driveID: string, callback: (item: TreeItem) => TreeItem) => DriveTreeItem[];
package/dist/icons.svg ADDED
@@ -0,0 +1,21 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg">
2
+ <defs>
3
+ <symbol id="plus" viewBox="0 0 15 15" fill="currentcolor">
4
+ <path
5
+ d="M7.69559 0.850788C8.17872 0.840217 8.57895 1.22331 8.58952 1.70644L8.70436 6.95519L13.9531 6.84035C14.4362 6.82978 14.8365 7.21286 14.847 7.696C14.8576 8.17913 14.4745 8.57936 13.9914 8.58993L8.74264 8.70477L8.85748 13.9535C8.86805 14.4366 8.48496 14.8369 8.00183 14.8474C7.51869 14.858 7.11847 14.4749 7.1079 13.9918L6.99306 8.74305L1.74431 8.85789C1.26118 8.86846 0.860955 8.48537 0.850384 8.00223C0.839813 7.5191 1.2229 7.11887 1.70603 7.1083L6.95478 6.99347L6.83994 1.74472C6.82937 1.26158 7.21246 0.861359 7.69559 0.850788Z" />
6
+ </symbol>
7
+ <symbol id="check-fill" viewBox="0 0 24 24" fill="currentcolor">
8
+ <path
9
+ d="M10.1575 16.8849C10.5032 16.8849 10.8257 16.7467 11.0562 16.5162L18.3142 9.25817L16.517 7.46094L10.1575 13.8204L7.48473 11.1476L5.6875 12.9448L9.25893 16.5162C9.48934 16.7467 9.81192 16.8849 10.1575 16.8849Z" />
10
+ </symbol>
11
+ <symbol id="xmark" viewBox="0 0 24 24" fill="currentcolor">
12
+ <path fill-rule="evenodd" clip-rule="evenodd"
13
+ d="M16.9993 8.51506L15.4844 7L11.9994 10.4852L8.51497 7.00057L7 8.51562L10.4844 12.0003L7.00056 15.4843L8.51552 16.9994L11.9994 13.5153L15.4838 17L16.9988 15.4849L13.5144 12.0003L16.9993 8.51506Z"
14
+ />
15
+ </symbol>
16
+ <symbol id="check" viewBox="0 0 24 25" fill="currentcolor">
17
+ <path
18
+ d="M10.1575 17.0119C10.5032 17.0119 10.8257 16.8736 11.0562 16.6432L18.3142 9.38513L16.517 7.58789L10.1575 13.9473L7.48473 11.2745L5.6875 13.0718L9.25893 16.6432C9.48934 16.8736 9.81192 17.0119 10.1575 17.0119Z" />
19
+ </symbol>
20
+ </defs>
21
+ </svg>
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- *,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}[data-theme=ph-light]{--colors-neutral-1: 252 252 252;--colors-neutral-3: 239 239 239;--colors-neutral-4: 108 114 117;--colors-bg: 244 244 244}[data-theme=ph-dark]{--colors-bg: 20 23 24}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.bottom-0{bottom:0}.bottom-\[-2px\]{bottom:-2px}.right-0{right:0}.top-0{top:0}.top-10{top:2.5rem}.z-10{z-index:10}.z-\[1\]{z-index:1}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-3{margin-left:.75rem;margin-right:.75rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mt-8{margin-top:2rem}.mt-\[-50px\]{margin-top:-50px}.box-content{box-sizing:content-box}.flex{display:flex}.contents{display:contents}.hidden{display:none}.h-0{height:0px}.h-0\.5{height:.125rem}.h-1{height:.25rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-4{height:1rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[300px\]{height:300px}.h-\[50px\]{height:50px}.h-\[52px\]{height:52px}.h-full{height:100%}.h-screen{height:100vh}.max-h-\[49px\]{max-height:49px}.min-h-\[48px\]{min-height:48px}.w-12{width:3rem}.w-4{width:1rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-8{width:2rem}.w-\[312px\]{width:312px}.w-\[465px\]{width:465px}.w-full{width:100%}.w-screen{width:100vw}.min-w-0{min-width:0px}.min-w-\[142px\]{min-width:142px}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.rotate-90{--tw-rotate: 90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.self-end{align-self:flex-end}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-y{border-top-width:1px;border-bottom-width:1px}.border-t{border-top-width:1px}.border-\[\#2326271A\]{border-color:#2326271a}.border-\[\#EFEFEF\]{--tw-border-opacity: 1;border-color:rgb(239 239 239 / var(--tw-border-opacity))}.border-\[\#F4F4F4\]{--tw-border-opacity: 1;border-color:rgb(244 244 244 / var(--tw-border-opacity))}.border-bg{--tw-border-opacity: 1;border-color:rgb(var(--colors-bg) / var(--tw-border-opacity))}.border-indigo-600{--tw-border-opacity: 1;border-color:rgb(79 70 229 / var(--tw-border-opacity))}.border-neutral-3{--tw-border-opacity: 1;border-color:rgb(var(--colors-neutral-3) / var(--tw-border-opacity))}.bg-\[\#3E90F0\]{--tw-bg-opacity: 1;background-color:rgb(62 144 240 / var(--tw-bg-opacity))}.bg-\[\#E8ECEFBF\]{background-color:#e8ecefbf}.bg-\[\#EA4335\]{--tw-bg-opacity: 1;background-color:rgb(234 67 53 / var(--tw-bg-opacity))}.bg-\[\#F1F5F9\]{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.bg-\[\#FCFCFC\]{--tw-bg-opacity: 1;background-color:rgb(252 252 252 / var(--tw-bg-opacity))}.bg-bg{--tw-bg-opacity: 1;background-color:rgb(var(--colors-bg) / var(--tw-bg-opacity))}.bg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity))}.bg-inherit{background-color:inherit}.bg-neutral-1{--tw-bg-opacity: 1;background-color:rgb(var(--colors-neutral-1) / var(--tw-bg-opacity))}.bg-red-400{--tw-bg-opacity: 1;background-color:rgb(248 113 113 / var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-transparent{--tw-gradient-from: transparent var(--tw-gradient-from-position);--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-\[\#F1F5F9\]{--tw-gradient-to: #F1F5F9 var(--tw-gradient-to-position)}.to-bg{--tw-gradient-to: rgb(var(--colors-bg)) var(--tw-gradient-to-position)}.to-inherit{--tw-gradient-to: inherit var(--tw-gradient-to-position)}.to-neutral-1{--tw-gradient-to: rgb(var(--colors-neutral-1)) var(--tw-gradient-to-position)}.to-white{--tw-gradient-to: #fff var(--tw-gradient-to-position)}.object-contain{-o-object-fit:contain;object-fit:contain}.p-10{padding:2.5rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-\[10px\]{padding-top:10px;padding-bottom:10px}.pb-2{padding-bottom:.5rem}.pr-5{padding-right:1.25rem}.pt-11{padding-top:2.75rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-6{line-height:1.5rem}.leading-none{line-height:1}.text-\[\#141718\]{--tw-text-opacity: 1;color:rgb(20 23 24 / var(--tw-text-opacity))}.text-\[\#404446\]{--tw-text-opacity: 1;color:rgb(64 68 70 / var(--tw-text-opacity))}.text-\[\#565868\]{--tw-text-opacity: 1;color:rgb(86 88 104 / var(--tw-text-opacity))}.text-\[\#6C7275\]{--tw-text-opacity: 1;color:rgb(108 114 117 / var(--tw-text-opacity))}.text-\[\#6F767E\]{--tw-text-opacity: 1;color:rgb(111 118 126 / var(--tw-text-opacity))}.text-\[\#94A3B8\]{--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity))}.text-\[\#9EA0A1\]{--tw-text-opacity: 1;color:rgb(158 160 161 / var(--tw-text-opacity))}.text-\[\#EA4335\]{--tw-text-opacity: 1;color:rgb(234 67 53 / var(--tw-text-opacity))}.text-\[\#FEFEFE\]{--tw-text-opacity: 1;color:rgb(254 254 254 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\[0px_33px_32px_-16px_rgba\(0\,0\,0\,0\.10\)\,0px_0px_16px_4px_rgba\(0\,0\,0\,0\.04\)\]{--tw-shadow: 0px 33px 32px -16px rgba(0,0,0,.1),0px 0px 16px 4px rgba(0,0,0,.04);--tw-shadow-colored: 0px 33px 32px -16px var(--tw-shadow-color), 0px 0px 16px 4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-none{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-none{transition-property:none}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@keyframes enter{0%{opacity:var(--tw-enter-opacity, 1);transform:translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0) scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity, 1);transform:translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0) scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))}}.animate-in{animation-name:enter;animation-duration:.15s;--tw-enter-opacity: initial;--tw-enter-scale: initial;--tw-enter-rotate: initial;--tw-enter-translate-x: initial;--tw-enter-translate-y: initial}.animate-out{animation-name:exit;animation-duration:.15s;--tw-exit-opacity: initial;--tw-exit-scale: initial;--tw-exit-rotate: initial;--tw-exit-translate-x: initial;--tw-exit-translate-y: initial}.fade-in{--tw-enter-opacity: 0}.fade-out{--tw-exit-opacity: 0}.zoom-in-95{--tw-enter-scale: .95}.zoom-out-95{--tw-exit-scale: .95}.duration-200{animation-duration:.2s}.duration-300{animation-duration:.3s}.ease-in{animation-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{animation-timing-function:cubic-bezier(0,0,.2,1)}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.modal-shadow{box-shadow:0 0 24px 4px #0000000d,0 44px 48px -12px #00000026,0 2px 8px #0000000d}.bg-overlay{background:rgba(20,23,24,.5)}.placeholder-shown\:bg-transparent:-moz-placeholder-shown{background-color:transparent}.placeholder-shown\:bg-transparent:placeholder-shown{background-color:transparent}.hover\:scale-105:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:bg-\[\#F1F5F9\]:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.hover\:bg-\[\#F4F4F4\]:hover{--tw-bg-opacity: 1;background-color:rgb(244 244 244 / var(--tw-bg-opacity))}.hover\:bg-gray-200:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.hover\:to-\[\#F1F5F9\]:hover{--tw-gradient-to: #F1F5F9 var(--tw-gradient-to-position)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.active\:opacity-75:active{opacity:.75}.group\/tree-item:hover .group-hover\/tree-item\:inline-block{display:inline-block}.group\/tree-item:hover .group-hover\/tree-item\:hidden,.group.collapsed .collapsed\:hidden{display:none}.group.collapsed .collapsed\:rotate-180{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group.collapsed .collapsed\:justify-center{justify-content:center}.group.collapsed .collapsed\:border-\[rgba\(49\,53\,56\,0\.12\)\]{border-color:#3135381f}.group.collapsed .collapsed\:bg-neutral-3{--tw-bg-opacity: 1;background-color:rgb(var(--colors-neutral-3) / var(--tw-bg-opacity))}.group.collapsed .collapsed\:bg-transparent{background-color:transparent}.group.collapsed .collapsed\:px-1{padding-left:.25rem;padding-right:.25rem}.group.collapsed .collapsed\:px-3{padding-left:.75rem;padding-right:.75rem}.group.collapsed .collapsed\:shadow-\[0px_33px_32px_-16px_rgba\(0\,0\,0\,0\.10\)\,0px_0px_16px_4px_rgba\(0\,0\,0\,0\.04\)\]{--tw-shadow: 0px 33px 32px -16px rgba(0,0,0,.1),0px 0px 16px 4px rgba(0,0,0,.04);--tw-shadow-colored: 0px 33px 32px -16px var(--tw-shadow-color), 0px 0px 16px 4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.group.collapsed .collapsed\:hover\:bg-\[\#F1F5F9\]:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.group.collapsing .collapsing\:bg-transparent{background-color:transparent}.group.expanded .expanded\:block{display:block}.group.expanding .expanding\:hidden{display:none}.group.expanding .expanding\:justify-center{justify-content:center}.group.expanding .expanding\:bg-transparent{background-color:transparent}.group.expanding .expanding\:px-1{padding-left:.25rem;padding-right:.25rem}.group.expanding .expanding\:px-3{padding-left:.75rem;padding-right:.75rem}.storybook-button{font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;border:0;border-radius:3em;cursor:pointer;display:inline-block;line-height:1}.storybook-button--primary{color:#fff;background-color:#1ea7fd}.storybook-button--secondary{color:#333;box-shadow:#00000026 0 0 0 1px inset;--tw-bg-opacity: 1;background-color:rgb(var(--colors-bg) / var(--tw-bg-opacity))}.storybook-button--small{font-size:12px;padding:10px 16px}.storybook-button--medium{font-size:14px;padding:11px 20px}.storybook-button--large{font-size:16px;padding:12px 24px}.document-editor{position:absolute;display:block;box-sizing:border-box;width:100%;height:100%;overflow:hidden;background-color:#aaa;margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:11pt}.dark-mode.document-editor{background-color:#1a1d1f}.editor-toolbar{width:100%;height:36px;overflow:hidden;margin:0;padding:0;background-color:#fff;box-shadow:0 0 5px 1px #00000080;border-bottom:1px solid #aaa}.dark-mode .editor-toolbar{background-color:#141718;border-bottom:1px solid #0a0a0a;color:#6c7275}.editor-toolbar--column{width:25%;height:100%;box-sizing:border-box;display:inline-block;vertical-align:top;overflow:hidden;padding:4px;margin:0}.editor-toolbar--left{text-align:left}.editor-toolbar--center{width:50%;text-align:center}.editor-toolbar--right{text-align:right}.toolbar-button{display:inline-block;height:100%;border-radius:5px;border:1px solid transparent;box-sizing:border-box;margin:0 4px 0 0;padding:2px 6px;cursor:pointer}.toolbar-button:hover{background-color:#f6f6f6}.dark-mode .toolbar-button:hover{background-color:#323337;color:#d6d6d6}.editor-worksheet{display:block;height:calc(100% - 36px);overflow-y:auto;padding:1em;box-sizing:border-box}.editor-worksheet--header-left{box-sizing:border-box;display:inline-block;width:85%}.editor-worksheet--header-right{box-sizing:border-box;display:inline-block;width:15%;vertical-align:top}.editor-worksheet--page{max-width:60em;min-height:27em;height:100%;box-sizing:content-box;border:1px solid #eee;background-color:#fff;padding:6em;margin:0 auto;box-shadow:3px 3px 3px #0006}.editor-worksheet--page h1{font-weight:400;font-size:28pt;margin:0;padding:0}.editor-worksheet--page p{font-style:italic;margin:.25em 0 5em;padding:0}.dark-mode .editor-worksheet--page{background-color:#0a0a0a;border:1px solid #141718;color:#d6d6d6}
1
+ *,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}[data-theme=ph-light]{--colors-neutral-1: 252 252 252;--colors-neutral-3: 239 239 239;--colors-neutral-4: 108 114 117;--colors-bg: 244 244 244}[data-theme=ph-dark]{--colors-bg: 20 23 24}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.bottom-0{bottom:0}.bottom-\[-2px\]{bottom:-2px}.right-0{right:0}.top-0{top:0}.top-10{top:2.5rem}.z-10{z-index:10}.z-\[1\]{z-index:1}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-3{margin-left:.75rem;margin-right:.75rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mt-8{margin-top:2rem}.mt-\[-50px\]{margin-top:-50px}.box-content{box-sizing:content-box}.flex{display:flex}.contents{display:contents}.hidden{display:none}.h-0{height:0px}.h-0\.5{height:.125rem}.h-1{height:.25rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-4{height:1rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[14px\]{height:14px}.h-\[300px\]{height:300px}.h-\[50px\]{height:50px}.h-\[52px\]{height:52px}.h-full{height:100%}.h-screen{height:100vh}.max-h-\[49px\]{max-height:49px}.min-h-\[48px\]{min-height:48px}.w-12{width:3rem}.w-4{width:1rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-8{width:2rem}.w-\[14px\]{width:14px}.w-\[312px\]{width:312px}.w-\[465px\]{width:465px}.w-full{width:100%}.w-screen{width:100vw}.min-w-0{min-width:0px}.min-w-\[142px\]{min-width:142px}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.rotate-90{--tw-rotate: 90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.self-end{align-self:flex-end}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-\[6px\]{border-radius:6px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-y{border-top-width:1px;border-bottom-width:1px}.border-t{border-top-width:1px}.border-\[\#2326271A\]{border-color:#2326271a}.border-\[\#EFEFEF\]{--tw-border-opacity: 1;border-color:rgb(239 239 239 / var(--tw-border-opacity))}.border-\[\#F4F4F4\]{--tw-border-opacity: 1;border-color:rgb(244 244 244 / var(--tw-border-opacity))}.border-bg{--tw-border-opacity: 1;border-color:rgb(var(--colors-bg) / var(--tw-border-opacity))}.border-indigo-600{--tw-border-opacity: 1;border-color:rgb(79 70 229 / var(--tw-border-opacity))}.border-neutral-3{--tw-border-opacity: 1;border-color:rgb(var(--colors-neutral-3) / var(--tw-border-opacity))}.bg-\[\#3E90F0\]{--tw-bg-opacity: 1;background-color:rgb(62 144 240 / var(--tw-bg-opacity))}.bg-\[\#E8ECEFBF\]{background-color:#e8ecefbf}.bg-\[\#EA4335\]{--tw-bg-opacity: 1;background-color:rgb(234 67 53 / var(--tw-bg-opacity))}.bg-\[\#F1F5F9\]{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.bg-\[\#FCFCFC\]{--tw-bg-opacity: 1;background-color:rgb(252 252 252 / var(--tw-bg-opacity))}.bg-bg{--tw-bg-opacity: 1;background-color:rgb(var(--colors-bg) / var(--tw-bg-opacity))}.bg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity))}.bg-inherit{background-color:inherit}.bg-neutral-1{--tw-bg-opacity: 1;background-color:rgb(var(--colors-neutral-1) / var(--tw-bg-opacity))}.bg-red-400{--tw-bg-opacity: 1;background-color:rgb(248 113 113 / var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-transparent{--tw-gradient-from: transparent var(--tw-gradient-from-position);--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-\[\#F1F5F9\]{--tw-gradient-to: #F1F5F9 var(--tw-gradient-to-position)}.to-bg{--tw-gradient-to: rgb(var(--colors-bg)) var(--tw-gradient-to-position)}.to-inherit{--tw-gradient-to: inherit var(--tw-gradient-to-position)}.to-neutral-1{--tw-gradient-to: rgb(var(--colors-neutral-1)) var(--tw-gradient-to-position)}.to-white{--tw-gradient-to: #fff var(--tw-gradient-to-position)}.object-contain{-o-object-fit:contain;object-fit:contain}.p-10{padding:2.5rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-\[10px\]{padding-top:10px;padding-bottom:10px}.py-\[6px\]{padding-top:6px;padding-bottom:6px}.pb-2{padding-bottom:.5rem}.pr-5{padding-right:1.25rem}.pt-11{padding-top:2.75rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-6{line-height:1.5rem}.leading-none{line-height:1}.text-\[\#141718\]{--tw-text-opacity: 1;color:rgb(20 23 24 / var(--tw-text-opacity))}.text-\[\#404446\]{--tw-text-opacity: 1;color:rgb(64 68 70 / var(--tw-text-opacity))}.text-\[\#565868\]{--tw-text-opacity: 1;color:rgb(86 88 104 / var(--tw-text-opacity))}.text-\[\#6C7275\]{--tw-text-opacity: 1;color:rgb(108 114 117 / var(--tw-text-opacity))}.text-\[\#6F767E\]{--tw-text-opacity: 1;color:rgb(111 118 126 / var(--tw-text-opacity))}.text-\[\#94A3B8\]{--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity))}.text-\[\#9EA0A1\]{--tw-text-opacity: 1;color:rgb(158 160 161 / var(--tw-text-opacity))}.text-\[\#EA4335\]{--tw-text-opacity: 1;color:rgb(234 67 53 / var(--tw-text-opacity))}.text-\[\#FEFEFE\]{--tw-text-opacity: 1;color:rgb(254 254 254 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\[0px_33px_32px_-16px_rgba\(0\,0\,0\,0\.10\)\,0px_0px_16px_4px_rgba\(0\,0\,0\,0\.04\)\]{--tw-shadow: 0px 33px 32px -16px rgba(0,0,0,.1),0px 0px 16px 4px rgba(0,0,0,.04);--tw-shadow-colored: 0px 33px 32px -16px var(--tw-shadow-color), 0px 0px 16px 4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-none{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-none{transition-property:none}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@keyframes enter{0%{opacity:var(--tw-enter-opacity, 1);transform:translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0) scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity, 1);transform:translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0) scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))}}.animate-in{animation-name:enter;animation-duration:.15s;--tw-enter-opacity: initial;--tw-enter-scale: initial;--tw-enter-rotate: initial;--tw-enter-translate-x: initial;--tw-enter-translate-y: initial}.animate-out{animation-name:exit;animation-duration:.15s;--tw-exit-opacity: initial;--tw-exit-scale: initial;--tw-exit-rotate: initial;--tw-exit-translate-x: initial;--tw-exit-translate-y: initial}.fade-in{--tw-enter-opacity: 0}.fade-out{--tw-exit-opacity: 0}.zoom-in-95{--tw-enter-scale: .95}.zoom-out-95{--tw-exit-scale: .95}.duration-200{animation-duration:.2s}.duration-300{animation-duration:.3s}.ease-in{animation-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{animation-timing-function:cubic-bezier(0,0,.2,1)}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.modal-shadow{box-shadow:0 0 24px 4px #0000000d,0 44px 48px -12px #00000026,0 2px 8px #0000000d}.bg-overlay{background:rgba(20,23,24,.5)}.last-of-type\:text-\[\#404446\]:last-of-type{--tw-text-opacity: 1;color:rgb(64 68 70 / var(--tw-text-opacity))}.placeholder-shown\:bg-transparent:-moz-placeholder-shown{background-color:transparent}.placeholder-shown\:bg-transparent:placeholder-shown{background-color:transparent}.hover\:scale-105:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:bg-\[\#EFEFEF\]:hover{--tw-bg-opacity: 1;background-color:rgb(239 239 239 / var(--tw-bg-opacity))}.hover\:bg-\[\#F1F5F9\]:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.hover\:bg-\[\#F4F4F4\]:hover{--tw-bg-opacity: 1;background-color:rgb(244 244 244 / var(--tw-bg-opacity))}.hover\:bg-gray-200:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.hover\:to-\[\#F1F5F9\]:hover{--tw-gradient-to: #F1F5F9 var(--tw-gradient-to-position)}.hover\:text-\[\#404446\]:hover{--tw-text-opacity: 1;color:rgb(64 68 70 / var(--tw-text-opacity))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.active\:opacity-75:active{opacity:.75}.group\/tree-item:hover .group-hover\/tree-item\:inline-block{display:inline-block}.group\/tree-item:hover .group-hover\/tree-item\:hidden,.group.collapsed .collapsed\:hidden{display:none}.group.collapsed .collapsed\:rotate-180{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group.collapsed .collapsed\:justify-center{justify-content:center}.group.collapsed .collapsed\:border-\[rgba\(49\,53\,56\,0\.12\)\]{border-color:#3135381f}.group.collapsed .collapsed\:bg-neutral-3{--tw-bg-opacity: 1;background-color:rgb(var(--colors-neutral-3) / var(--tw-bg-opacity))}.group.collapsed .collapsed\:bg-transparent{background-color:transparent}.group.collapsed .collapsed\:px-1{padding-left:.25rem;padding-right:.25rem}.group.collapsed .collapsed\:px-3{padding-left:.75rem;padding-right:.75rem}.group.collapsed .collapsed\:shadow-\[0px_33px_32px_-16px_rgba\(0\,0\,0\,0\.10\)\,0px_0px_16px_4px_rgba\(0\,0\,0\,0\.04\)\]{--tw-shadow: 0px 33px 32px -16px rgba(0,0,0,.1),0px 0px 16px 4px rgba(0,0,0,.04);--tw-shadow-colored: 0px 33px 32px -16px var(--tw-shadow-color), 0px 0px 16px 4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.group.collapsed .collapsed\:hover\:bg-\[\#F1F5F9\]:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.group.collapsing .collapsing\:bg-transparent{background-color:transparent}.group.expanded .expanded\:block{display:block}.group.expanding .expanding\:hidden{display:none}.group.expanding .expanding\:justify-center{justify-content:center}.group.expanding .expanding\:bg-transparent{background-color:transparent}.group.expanding .expanding\:px-1{padding-left:.25rem;padding-right:.25rem}.group.expanding .expanding\:px-3{padding-left:.75rem;padding-right:.75rem}.storybook-button{font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;border:0;border-radius:3em;cursor:pointer;display:inline-block;line-height:1}.storybook-button--primary{color:#fff;background-color:#1ea7fd}.storybook-button--secondary{color:#333;box-shadow:#00000026 0 0 0 1px inset;--tw-bg-opacity: 1;background-color:rgb(var(--colors-bg) / var(--tw-bg-opacity))}.storybook-button--small{font-size:12px;padding:10px 16px}.storybook-button--medium{font-size:14px;padding:11px 20px}.storybook-button--large{font-size:16px;padding:12px 24px}.document-editor{position:absolute;display:block;box-sizing:border-box;width:100%;height:100%;overflow:hidden;background-color:#aaa;margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:11pt}.dark-mode.document-editor{background-color:#1a1d1f}.editor-toolbar{width:100%;height:36px;overflow:hidden;margin:0;padding:0;background-color:#fff;box-shadow:0 0 5px 1px #00000080;border-bottom:1px solid #aaa}.dark-mode .editor-toolbar{background-color:#141718;border-bottom:1px solid #0a0a0a;color:#6c7275}.editor-toolbar--column{width:25%;height:100%;box-sizing:border-box;display:inline-block;vertical-align:top;overflow:hidden;padding:4px;margin:0}.editor-toolbar--left{text-align:left}.editor-toolbar--center{width:50%;text-align:center}.editor-toolbar--right{text-align:right}.toolbar-button{display:inline-block;height:100%;border-radius:5px;border:1px solid transparent;box-sizing:border-box;margin:0 4px 0 0;padding:2px 6px;cursor:pointer}.toolbar-button:hover{background-color:#f6f6f6}.dark-mode .toolbar-button:hover{background-color:#323337;color:#d6d6d6}.editor-worksheet{display:block;height:calc(100% - 36px);overflow-y:auto;padding:1em;box-sizing:border-box}.editor-worksheet--header-left{box-sizing:border-box;display:inline-block;width:85%}.editor-worksheet--header-right{box-sizing:border-box;display:inline-block;width:15%;vertical-align:top}.editor-worksheet--page{max-width:60em;min-height:27em;height:100%;box-sizing:content-box;border:1px solid #eee;background-color:#fff;padding:6em;margin:0 auto;box-shadow:3px 3px 3px #0006}.editor-worksheet--page h1{font-weight:400;font-size:28pt;margin:0;padding:0}.editor-worksheet--page p{font-style:italic;margin:.25em 0 5em;padding:0}.dark-mode .editor-worksheet--page{background-color:#0a0a0a;border:1px solid #141718;color:#d6d6d6}
package/dist/index.js CHANGED
@@ -5202,6 +5202,9 @@ function zr(e) {
5202
5202
  ) })
5203
5203
  ] });
5204
5204
  }
5205
+ function wo({ name: e, ...t }) {
5206
+ return /* @__PURE__ */ p("svg", { ...t, children: /* @__PURE__ */ p("use", { href: `/icons.svg#${e}` }) });
5207
+ }
5205
5208
  function va(e) {
5206
5209
  const t = ["document-editor", `${e.mode}-mode`];
5207
5210
  return /* @__PURE__ */ p("div", { className: t.join(" "), children: e.children });
@@ -5532,7 +5535,7 @@ function wa(e) {
5532
5535
  }
5533
5536
  );
5534
5537
  }
5535
- const wo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
5538
+ const So = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
5536
5539
  __proto__: null,
5537
5540
  DocumentEditor: va,
5538
5541
  EditorToolbar: xa,
@@ -5980,7 +5983,7 @@ function Ba(e, t) {
5980
5983
  }
5981
5984
  };
5982
5985
  }
5983
- function So(e, t) {
5986
+ function Lo(e, t) {
5984
5987
  return (r, n) => Za(e, t(r), n);
5985
5988
  }
5986
5989
  function Za(e, t, r) {
@@ -6015,7 +6018,11 @@ function ft(e) {
6015
6018
  const N = f.items.find(
6016
6019
  (D) => D.kind === "text" && D.types.has(n || R)
6017
6020
  ), h = f.items.find((D) => D.kind === "file");
6018
- if (h && (r == null || r(h, t, f)), N) {
6021
+ if (h && (r == null || r(
6022
+ { ...h, dropAfterItem: a, dropBeforeItem: o },
6023
+ t,
6024
+ f
6025
+ )), N) {
6019
6026
  const D = await N.getText(
6020
6027
  n || R
6021
6028
  ), c = JSON.parse(D), T = {
@@ -6066,7 +6073,7 @@ function Fa(e) {
6066
6073
  }
6067
6074
  );
6068
6075
  }
6069
- const ht = "min-h-[48px] min-w-[142px] text-base font-semibold py-3 px-6 rounded-xl outline-none active:opacity-75 hover:scale-105 transform transition-all", Lo = (e) => {
6076
+ const ht = "min-h-[48px] min-w-[142px] text-base font-semibold py-3 px-6 rounded-xl outline-none active:opacity-75 hover:scale-105 transform transition-all", Oo = (e) => {
6070
6077
  const {
6071
6078
  body: t,
6072
6079
  header: r,
@@ -6139,7 +6146,7 @@ const ht = "min-h-[48px] min-w-[142px] text-base font-semibold py-3 px-6 rounded
6139
6146
  ]
6140
6147
  }
6141
6148
  );
6142
- }, Oo = (e) => {
6149
+ }, Co = (e) => {
6143
6150
  const {
6144
6151
  value: t,
6145
6152
  onChange: r,
@@ -6268,7 +6275,7 @@ const ht = "min-h-[48px] min-w-[142px] text-base font-semibold py-3 px-6 rounded
6268
6275
  )
6269
6276
  ]
6270
6277
  }
6271
- ), Co = ({
6278
+ ), Po = ({
6272
6279
  onToggle: e,
6273
6280
  username: t,
6274
6281
  address: r,
@@ -6491,15 +6498,15 @@ const Pr = (e, t) => {
6491
6498
  return r.children && (r.children = r.children.map(
6492
6499
  (n) => Pr(n, t)
6493
6500
  )), { ...r };
6494
- }, Po = (e, t, r) => e.map((a) => a.id === t ? Pr(a, r) : { ...a });
6501
+ }, Qo = (e, t, r) => e.map((a) => a.id === t ? Pr(a, r) : { ...a });
6495
6502
  export {
6496
6503
  We as ActionType,
6497
6504
  Eo as Button,
6498
6505
  R as CUSTOM_OBJECT_FORMAT,
6499
- Lo as ConnectDeleteItemModal,
6506
+ Oo as ConnectDeleteItemModal,
6500
6507
  Fa as ConnectDropdownMenu,
6501
- Oo as ConnectSearchBar,
6502
- Co as ConnectSidebar,
6508
+ Co as ConnectSearchBar,
6509
+ Po as ConnectSidebar,
6503
6510
  Ja as ConnectSidebarFooter,
6504
6511
  _a as ConnectSidebarHeader,
6505
6512
  ko as ConnectTreeView,
@@ -6511,6 +6518,7 @@ export {
6511
6518
  zo as DriveView,
6512
6519
  Ia as DropTarget,
6513
6520
  zr as DropdownMenu,
6521
+ wo as Icon,
6514
6522
  mo as ItemStatus,
6515
6523
  Mo as ItemType,
6516
6524
  Sa as Modal,
@@ -6522,10 +6530,10 @@ export {
6522
6530
  Ka as TextInput,
6523
6531
  Ua as TreeViewInput,
6524
6532
  Ya as TreeViewItem,
6525
- So as createUseDocumentReducer,
6526
- wo as legacy,
6533
+ Lo as createUseDocumentReducer,
6534
+ So as legacy,
6527
6535
  Ie as mergeClassNameProps,
6528
- Po as traverseDriveById,
6536
+ Qo as traverseDriveById,
6529
6537
  Pr as traverseTree,
6530
6538
  Za as useDocumentReducer,
6531
6539
  ft as useDraggableTarget,