@tcn/ui 0.0.3 → 0.1.1

package/src/utils/click_away_listener.stories.tsx

@@ -1,16 +1,26 @@
 import React, { useRef, useState } from 'react';
-import { ClickAwayListener } from './click_away_listener.js';
+import { ClickAwayListener as ClickAwayListenerComponent } from './click_away_listener.js';
 
 export default {
-  title: 'Click Away Listener',
+  title: 'Utils/Click Away Listener',
+  component: ClickAwayListenerComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A utility component that can be used to listen for click away events.',
+      },
+    },
+  },
 };
 
-export function Baseline() {
+export function ClickAwayListener() {
   const [message, setMessage] = useState('');
 
   return (
     <div>
-      <ClickAwayListener
+      <ClickAwayListenerComponent
         onClickAway={() => {
           setMessage('Clicked Outside');
         }}
@@ -27,7 +37,7 @@ export function Baseline() {
         >
           {message}
         </div>
-      </ClickAwayListener>
+      </ClickAwayListenerComponent>
     </div>
   );
 }
@@ -40,7 +50,7 @@ export function OtherRefChecks() {
 
   return (
     <div>
-      <ClickAwayListener
+      <ClickAwayListenerComponent
         refs={refs}
         onClickAway={() => {
           setMessage('Clicked Outside');
@@ -58,7 +68,7 @@ export function OtherRefChecks() {
         >
           {message}&nbsp;
         </div>
-      </ClickAwayListener>
+      </ClickAwayListenerComponent>
       <div
         ref={redRef}
         style={{
@@ -107,7 +117,7 @@ export function MountOnFocus() {
         }}
       />
       {show && (
-        <ClickAwayListener
+        <ClickAwayListenerComponent
           refs={refs}
           onClickAway={() => {
             setMessage('Clicked Outside');
@@ -129,7 +139,7 @@ export function MountOnFocus() {
           >
             {message}&nbsp;
           </div>
-        </ClickAwayListener>
+        </ClickAwayListenerComponent>
       )}
     </div>
   );
@@ -218,7 +228,7 @@ export function WithException() {
       </div>
 
       {/* Main click away listener */}
-      <ClickAwayListener onClickAway={handleClickAway} isException={isException}>
+      <ClickAwayListenerComponent onClickAway={handleClickAway} isException={isException}>
         <div
           style={{
             marginTop: '100px',
@@ -246,7 +256,7 @@ export function WithException() {
             </p>
           </div>
         </div>
-      </ClickAwayListener>
+      </ClickAwayListenerComponent>
 
       {/* Regular area that will trigger click away */}
       <div

package/src/utils/responsive/responsive_renderer.stories.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import { Meta } from '@storybook/react-vite';
 import { BodyText } from '../../typography/index.js';
 import { StyleBox } from '../../stacks/story_components/style_box.js';
-import { ResponsiveRenderer } from './responsive_renderer.js';
+import { ResponsiveRenderer as ResponsiveRendererComponent } from './responsive_renderer.js';
 
-const meta: Meta<typeof ResponsiveRenderer> = {
-  title: 'ResponsiveRenderer',
-  component: ResponsiveRenderer,
+const meta: Meta<typeof ResponsiveRendererComponent> = {
+  title: 'Utils/Responsive Renderer',
+  component: ResponsiveRendererComponent,
   tags: ['autodocs'],
   parameters: {
     layout: 'centered',
@@ -15,9 +15,9 @@ const meta: Meta<typeof ResponsiveRenderer> = {
 
 export default meta;
 
-export function Default() {
+export function ResponsiveRenderer() {
   return (
-    <ResponsiveRenderer
+    <ResponsiveRendererComponent
       mobile={
         <StyleBox
           className="surface-primary"
@@ -47,7 +47,7 @@ export function Default() {
 
 export function CustomBreakpoint() {
   return (
-    <ResponsiveRenderer
+    <ResponsiveRendererComponent
       breakpoint={1024}
       mobile={
         <StyleBox

package/src/utils/scroll_away_listener.stories.tsx

@@ -2,7 +2,17 @@ import React, { useState } from 'react';
 import { ScrollAwayListener } from './scroll_away_listener.js';
 
 export default {
-  title: 'Scroll Away Listener',
+  title: 'Utils/Scroll Away Listener',
+  component: ScrollAwayListener,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A utility component that can be used to listen for scroll away events.',
+      },
+    },
+  },
 };
 
 export function Baseline() {

package/tsconfig.json

@@ -3,9 +3,6 @@
     "esModuleInterop": true,
     "jsx": "react-jsx",
     "paths": {
-      "~tooling/*": [
-        "../tooling/src/*"
-      ],
       "~aip-160/*": [
         "../aip-160/src/*"
       ],

package/dist/card.css

@@ -1 +0,0 @@
-._card_a3c9492{box-shadow:0 2px 10px #00000040;padding:16px;gap:8px}

package/dist/portal-qqIp4SIl.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"portal-qqIp4SIl.js","sources":["../src/overlay/portal/portal.tsx"],"sourcesContent":["import React, { useState, useLayoutEffect } from 'react';\nimport { usePortalPlatform } from './portal_platform_context.js';\n\nexport interface PortalProps {\n  children: React.ReactNode | React.ReactNode[];\n  zIndex?: number;\n}\n\nexport const Portal = ({ children, zIndex }: PortalProps) => {\n  const portalPlatform = usePortalPlatform();\n\n  const [portal] = useState(() => {\n    return portalPlatform.createPortal();\n  });\n\n  useLayoutEffect(() => {\n    portal.setZIndex(zIndex);\n  }, [portal, zIndex]);\n\n  useLayoutEffect(() => {\n    portalPlatform.mountPortal(portal);\n    return () => portalPlatform.unmountPortal(portal);\n  }, [portal, portalPlatform]);\n\n  return portal.render(children);\n};\n"],"names":["Portal","children","zIndex","portalPlatform","usePortalPlatform","portal","useState","useLayoutEffect"],"mappings":";;AAQO,MAAMA,IAAS,CAAC,EAAE,UAAAC,GAAU,QAAAC,QAA0B;AAC3D,QAAMC,IAAiBC,EAAA,GAEjB,CAACC,CAAM,IAAIC,EAAS,MACjBH,EAAe,aAAA,CACvB;AAED,SAAAI,EAAgB,MAAM;AACpB,IAAAF,EAAO,UAAUH,CAAM;AAAA,EACzB,GAAG,CAACG,GAAQH,CAAM,CAAC,GAEnBK,EAAgB,OACdJ,EAAe,YAAYE,CAAM,GAC1B,MAAMF,EAAe,cAAcE,CAAM,IAC/C,CAACA,GAAQF,CAAc,CAAC,GAEpBE,EAAO,OAAOJ,CAAQ;AAC/B;"}

package/dist/themes/stylesheets/reset.css

@@ -1 +0,0 @@
-html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}legend{all:unset;display:block;margin:0;padding:0;font:inherit;color:inherit}

package/dist/themes/themes/ergo/ergo_theme.css

@@ -1 +0,0 @@
-html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}legend{all:unset;display:block;margin:0;padding:0;font:inherit;color:inherit}:root{--scalar: 1;--gap-small: 4px;--gap-medium: 8px;--gap-large: 16px;--padding-small: 4px;--padding-medium: 8px;--padding-large: 16px;--status-color-disabled: #7f7f7f;--status-color-info: #008cff;--status-color-warning: #ff0000;--status-color-error: #ff0000;--async-color-initial: #c0c0c0;--async-color-pending: #008cff;--async-color-success: #00ff00;--async-color-failed: #ff0000;--primary-color-faint: #c0c0c0;--primary-color: #008cff;--primary-color-strong: #008cff;--secondary-color-faint: #c0c0c0;--secondary-color: #008cff;--secondary-color-strong: #008cff;--tertiary-color-faint: #c0c0c0;--tertiary-color: #008cff;--tertiary-color-strong: #008cff;--quaternary-color-faint: #c0c0c0;--quaternary-color: #008cff;--quaternary-color-strong: #008cff;--font-color: #395578;--font-family: "Lato", sans-serif;--font-size: 12px;--background-color-primary: #ffffff;--background-color-secondary: #ffffff;--background-color-tertiary: #ffffff;--background-color-quaternary: #ffffff;--foreground-color-primary: #aaa;--foreground-color-secondary: #222222;--foreground-color-tertiary: #222222;--foreground-color-quaternary: #222222;--accent-color: #008cff;--shape-radius-small: 2px;--shape-radius-medium: 4px;--shape-radius-large: 8px}*{position:relative;box-sizing:border-box}.tcn-panel{--v-inset: var(--padding-large);background-color:var(--background-color-primary);border-radius:var(--shape-radius-medium)}.tcn-panel :where(.tcn-header){min-height:40px;border-bottom:1px solid var(--foreground-color-primary);padding:0 var(--v-inset);gap:var(--gap-medium)}.tcn-panel :where(.tcn-header) :where(.tcn-title){font-weight:700}.tcn-panel :where(.tcn-header) :where(.tcn-button){padding:0;min-width:18px;min-height:18px}.tcn-panel :where(.tcn-header) :where(.tcn-divider){padding:4px 0}.tcn-panel :where(.tcn-header) :where(.tcn-divider) :where(.tcn-divider-line){width:1.5px;min-height:18px;height:auto}.tcn-panel :where(.tcn-utility-bar){min-height:32px;border-bottom:1px solid var(--foreground-color-primary);padding:0 var(--v-inset)}.tcn-panel :where(.tcn-utility-bar) :where(.tcn-button){padding:0;min-width:18px;min-height:18px}.tcn-panel :where(.tcn-body){padding:0 var(--v-inset);gap:var(--gap-medium)}.tcn-panel :where(.tcn-footer){gap:var(--gap-medium);min-height:40px;border-top:1px solid var(--foreground-color-primary);padding:0 var(--v-inset)}

package/dist/themes/themes/windows_98/windows_98.css

@@ -1 +0,0 @@
-html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}legend{all:unset;display:block;margin:0;padding:0;font:inherit;color:inherit}*{position:relative;box-sizing:border-box}:root{--scalar: 1;--gap-small: 2px;--gap-medium: 4px;--gap-large: 8px;--padding-small: 2px;--padding-medium: 4px;--padding-large: 8px;--status-color-disabled: #7f7f7f;--status-color-info: #000080;--status-color-warning: #000080;--status-color-error: #be0000;--async-color-initial: #c0c0c0;--async-color-pending: #000080;--async-color-success: #00ff00;--async-color-failed: #be0000;--primary-color-faint: #c0c0c0;--primary-color: #000080;--primary-color-strong: #000080;--secondary-color-faint: #c0c0c0;--secondary-color: #000080;--secondary-color-strong: #000080;--tertiary-color-faint: #c0c0c0;--tertiary-color: #000080;--tertiary-color-strong: #000080;--quaternary-color-faint: #c0c0c0;--quaternary-color: #000080;--quaternary-color-strong: #000080;--font-color: #222222;--font-family: "Pixelated MS Sans Serif", Arial;--font-size: 12px;--background-color-primary: #c0c0c0;--background-color-secondary: #c0c0c0;--background-color-tertiary: #c0c0c0;--background-color-quaternary: #c0c0c0;--foreground-color-primary: #222222;--foreground-color-secondary: #222222;--foreground-color-tertiary: #222222;--foreground-color-quaternary: #222222;--accent-color: #000080}.title[data-size=sm]{font-size:10px}.title[data-size=md]{font-size:12px}.title[data-size=lg]{font-size:14px}.body-text[data-size=sm]{font-size:10px}.body-text[data-size=md]{font-size:11px}.body-text[data-size=lg]{font-size:12px}.button-text{position:relative;opacity:1;font-size:12px!important}.button,.button[data-hierarchy=primary],.button[data-hierarchy=secondary],.button[data-hierarchy=primary]:hover,.button[data-hierarchy=secondary]:hover{background:silver;border:none;border-radius:0;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver;box-sizing:border-box;color:#222;min-height:23px;min-width:0;padding:0 12px;font-size:12px;text-decoration:none;outline:none}.button[data-hierarchy=primary]>*,.button[data-hierarchy=secondary]>*{position:relative}.button[data-hierarchy=primary]:active>*,.button[data-hierarchy=secondary]:active>*{position:relative;top:0;left:1px}.button[data-hierarchy=primary]:focus:not(:active):before,.button[data-hierarchy=secondary]:focus:not(:active):before{content:"";position:absolute;inset:1px 2px 2px 1px;outline:1px dotted #222;outline-offset:-3px}.button[data-hierarchy=primary],.button[data-hierarchy=primary]:hover{box-shadow:inset -2px -2px #0a0a0a,inset 1px 1px #0a0a0a,inset -3px -3px gray,inset 2px 2px #fff,inset 3px 3px silver}.button[data-hierarchy=primary]:active,.button[data-hierarchy=secondary]:active{background:silver;box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px silver,inset 2px 2px gray;color:#222;border:none;text-decoration:none}.button[data-hierarchy=primary]:focus,.button[data-hierarchy=secondary]:focus,.button[data-hierarchy=primary]:focus:not(:active),.button[data-hierarchy=secondary]:focus:not(:active){background:silver;border:none;text-decoration:none}.button[data-hierarchy=tertiary]{padding:0 4px;background:none;border:none;border-radius:0;box-shadow:none;box-sizing:border-box;color:navy;min-height:auto;min-width:auto;text-decoration:none}.button[data-hierarchy=tertiary]:hover{background:none;border:none;border-radius:0;box-shadow:none;box-sizing:border-box;color:navy;min-height:auto;min-width:auto;text-decoration:none}.button[data-hierarchy=tertiary]:active{background:none;border:none;border-radius:0;box-shadow:none;box-sizing:border-box;color:#00008099;min-height:auto;min-width:auto;text-decoration:none}.button[data-hierarchy=tertiary]:focus,.button[data-hierarchy=tertiary]:focus:not(:active){background:none;outline:1px dotted #000080;outline-offset:0;border:none;text-decoration:none}.button[data-hierarchy=secondary][data-is-disabled=true]{box-shadow:inset -1px -1px #717171,inset 1px 1px #fff,inset -2px -2px #999,inset 2px 2px silver}.button[data-hierarchy=primary][data-is-disabled=true]{box-shadow:inset -2px -2px #717171,inset 1px 1px #717171,inset -3px -3px #999,inset 2px 2px #fff,inset 3px 3px silver}.button[data-hierarchy=primary][data-is-disabled=true],.button[data-hierarchy=secondary][data-is-disabled=true],.button[data-hierarchy=tertiary][data-is-disabled=true]{color:#7f7f7f;cursor:not-allowed}.button.select,.button.select:hover{position:relative;padding-inline-end:20px;padding-inline-start:4px}.button.select:dir(ltr):after{content:"";position:absolute;right:calc(4px * var(--scalar, 1));top:50%;transform:translateY(-50%);width:calc(12px * var(--scalar, 1));height:calc(12px * var(--scalar, 1));background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='currentColor'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='currentColor'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;pointer-events:none}.button.select:dir(rtl):after{content:"";position:absolute;left:calc(4px * var(--scalar, 1));top:50%;transform:translateY(-50%);width:calc(12px * var(--scalar, 1));height:calc(12px * var(--scalar, 1));background-color:#222;-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;pointer-events:none}.slim-button,.slim-button[data-hierarchy=primary],.slim-button[data-hierarchy=secondary],.slim-button[data-hierarchy=primary]:hover,.slim-button[data-hierarchy=secondary]:hover{padding:2px;min-width:0;min-height:0;height:auto;width:auto}.slim-button[data-size=sm],.slim-button[data-hierarchy=primary][data-size=sm],.slim-button[data-hierarchy=secondary][data-size=sm],.slim-button[data-hierarchy=primary][data-size=sm]:hover,.slim-button[data-hierarchy=secondary][data-size=sm]:hover{padding:1px}.slim-button[data-size=md],.slim-button[data-hierarchy=primary][data-size=md],.slim-button[data-hierarchy=secondary][data-size=md],.slim-button[data-hierarchy=primary][data-size=md]:hover,.slim-button[data-hierarchy=secondary][data-size=md]:hover{padding:2px}.slim-button[data-size=lg],.slim-button[data-hierarchy=primary][data-size=lg],.slim-button[data-hierarchy=secondary][data-size=lg],.slim-button[data-hierarchy=primary][data-size=lg]:hover,.slim-button[data-hierarchy=secondary][data-size=lg]:hover{padding:4px}.select-group .button[data-hierarchy=primary],.select-group .button[data-hierarchy=primary]:hover,.select-group .button[data-hierarchy=primary]:focus{background-color:navy;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver;color:#fff}.select-group .button:hover,.select-group .button:focus,.button-group .button:hover,.button-group .button:focus{z-index:1}.input,.textarea,.suggestion-list-search-input,.multi-combo-box-values-container,.multiselect-values-container{border-radius:0;outline:none;border:none;background-color:#fff;box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;box-sizing:border-box;padding:3px 4px}.suggestion-list-search-input{box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a,0 -2px 0 2px silver}.input,.textarea,.suggestion-list-search-input{height:23px}.input:is(:focus,:focus-visible,:active,:hover),.input:is(:focus,:focus-visible,:active,:hover)[data-is-disabled=false],.textarea:is(:focus,:focus-visible,:active,:hover),.textarea:is(:focus,:focus-visible,:active,:hover)[data-is-disabled=false]{outline:none;border:none}.input[data-is-disabled=true],.textarea[data-is-disabled=true],.suggestion-list-search-input[data-is-disabled=true],.multiselect-values-container[data-is-disabled=true]{box-shadow:inset -1px -1px #fff,inset 1px 1px #999,inset -2px -2px #dfdfdf,inset 2px 2px #717171}.input[data-is-disabled=true],.textarea[data-is-disabled=true],.suggestion-list-search-input[data-is-disabled=true],.multiselect-values-container[data-is-disabled=true],.input[data-is-disabled=true]::placeholder,.textarea[data-is-disabled=true]::placeholder,.suggestion-list-search-input[data-is-disabled=true]::placeholder,.multiselect-values-container[data-is-disabled=true]::placeholder{color:#7f7f7f;cursor:not-allowed;background-color:silver}.select-group .button[data-hierarchy=primary]:active{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px silver,inset 2px 2px gray;color:#fff}.select-group .button[data-hierarchy=primary]:focus:not(:active):before{outline:1px dotted #fcfcfc}.suggestion-list{padding:2px}.suggestion-item{padding:0;background:transparent;border:none;min-height:0}.suggestion-item:hover{background:navy;color:#fff}.suggestion-item[data-is-selected=true],.suggestion-item[data-is-focused=true]{padding:0;background:navy;color:#fff;border:none}.suggestion-list-search-input{border-radius:0;padding:4px;height:24px;min-height:24px}.title{color:#000}.header .title{color:#fff}.header[data-kind=window]{padding:4px;background:linear-gradient(90deg,navy,#1084d0);border:none;color:#fff}.header[data-kind=window]>.button{color:#222}.header[data-kind=toolbar],.header[data-kind=app],.header[data-kind=nav]{padding:4px 0;background:silver;color:#222;border-bottom:1px solid #808080;border-top:1px solid #f5f5f5;border-right:1px solid #808080;border-left:1px solid #f5f5f5;padding-inline-start:4px}.header[data-kind=panel]{padding:4px;background:linear-gradient(90deg,#7c7c7c,#aeaeae);border:none;color:#fff}.main[data-kind=window],.main[data-kind=app],.main[data-kind=nav],.main[data-kind=toolbar],.main[data-kind=section],.main[data-kind=panel],.main[data-kind=drawer],.main[data-kind=card],.panel,.h-panel,.v-panel,.sidebar-start[data-hierarchy],.sidebar-end[data-hierarchy]{border-radius:0;background:silver;color:#222;border-bottom:1px solid #808080;border-top:1px solid #f5f5f5;border-right:1px solid #808080;border-left:1px solid #f5f5f5}.column:after{content:"";position:absolute;bottom:var(--padding);top:var(--padding);right:0;width:0px;border-bottom:1px solid #f5f5f5;border-top:1px solid #808080;border-right:1px solid #f5f5f5;border-left:1px solid #808080}.column:last-child:after{display:none}.main[data-kind=panel],.sidebar-start[data-kind=panel],.sidebar-end[data-kind=panel]{padding:0}.sidebar-start[data-hierarchy=tertiary],.sidebar-start[data-hierarchy=secondary]{background:silver;color:#222}.sidebar-start[data-kind=nav],.v-nav{background:#fff;padding:2px;border-top:1px solid #808080;border-bottom:1px solid #f5f5f5;border-right:1px solid #f5f5f5;border-left:1px solid #808080}.sidebar-end[data-hierarchy=tertiary],.sidebar-end[data-hierarchy=secondary]{background:silver;color:#222}.sidebar-end[data-hierarchy=primary],.sidebar-start[data-hierarchy=primary]{background:#fff;color:#222}.footer[data-kind=window]{padding:4px;background:silver;box-shadow:inset 1px 1px gray,inset -1px -1px #f5f5f5,inset 2px 2px #c1c1c1,inset -2px -2px silver;color:#222}.window,.date-picker-popover,.date-picker-year-selector,.menu,.suggestion-list{border-radius:0;background:silver;padding:4px;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #f5f5f5,inset -2px -2px gray,inset 2px 2px silver}.suggestion-list-header{background:silver}.date-picker-box{background:silver;padding:0}.date-picker-date,.date-picker-year-button{box-shadow:none!important}.date-picker-header{height:20px}.button.phone-number-input-select,.button.phone-number-input-select:hover{min-width:0}.phone-number-input[data-has-phone-book=false]{border-end-end-radius:0px;border-start-end-radius:0px}.button.phone-number-input-phone-book{max-width:23px!important;max-height:23px!important;height:23px!important;min-width:23px!important;min-height:23px!important}.button.date-picker-year-select{padding-inline-end:20px}.button.date-picker-year-select:dir(ltr):after{width:calc(12px * var(--scalar, 1));height:calc(12px * var(--scalar, 1));-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E")}.button.date-picker-year-select:dir(rtl):after{width:calc(12px * var(--scalar, 1));height:calc(12px * var(--scalar, 1));-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E")}.time-box{border-radius:0;background:#fff;border:none;box-shadow:inset 1px 1px gray,inset -1px -1px #f5f5f5,inset 2px 2px #c1c1c1,inset -2px -2px silver}.time-box-title-container{min-height:25px;height:25px}.field-set{padding:8px 12px 12px;margin-top:10px;border-radius:0;background:silver;box-shadow:inset 1px 1px gray,inset -1px -1px #f5f5f5,inset 2px 2px #f5f5f5,inset -2px -2px gray}.field-set>.field-set-body{background:transparent;padding:0;gap:8px}.field-set>.field-set-legend{position:relative;top:-7px;left:-4px;height:0}.field-set-legend-text{background:silver;padding:0;font-size:12px}.chip{background:silver;border-radius:0;color:#222;border:none;font-size:12px;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver}.checkbox{outline:none;border-radius:0;background:#fff;border:none;background-position:center;background-repeat:no-repeat;box-shadow:inset 1px 1px gray,inset -1px -1px #f5f5f5,inset 2px 2px #c1c1c1,inset -2px -2px silver}.checkbox:focus{outline:none}.checkbox[data-checked=true]{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23222' stroke-width='2'/%3E%3C/svg%3E")}.checkbox[data-is-disabled=false]:active{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23222' stroke-width='2'/%3E%3C/svg%3E")}.checkbox[data-is-disabled=true]{background-color:silver}.checkbox[data-checked=true][data-is-disabled=true]{background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23707070' stroke-width='2'/%3E%3C/svg%3E")}.radio,.radio[data-checked=true],.radio[checked=true]{width:14px;height:14px;min-width:14px;min-height:14px;border-inline-end:1px solid #fff;border-inline-start:1px solid #222;border-block-end:1px solid #fff;border-block-start:1px solid #222}.radio:focus{outline:none}.radio:before{content:"";background:transparent;position:absolute;border-radius:50%;inset:0;border-inline-end:1px solid #dfdfdf;border-inline-start:1px solid #808080;border-block-end:1px solid #dfdfdf;border-block-start:1px solid #808080}.radio[data-checked=true]:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40%;height:40%;background:#222;border-radius:50%}.switch:focus,.switch:focus-visible,.switch-wrapper[data-focused=true][data-is-checked=false],.switch-wrapper[data-focused=true][data-is-checked=true]{outline:none}.switch-wrapper{border-radius:0;box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;border-color:silver;background-color:#fff;transition:background-color .2s ease-out;margin-top:2px;margin-bottom:3px}.switch-wrapper[data-is-checked=false]>.switch-icon{color:#222}.switch:after{content:"";cursor:pointer;position:absolute;top:0;transition:transform .2s ease-out;width:calc(16px * var(--scalar, 1));height:calc(16px * var(--scalar, 1));border-radius:0;background-color:silver;box-sizing:border-box;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver}.switch-wrapper[data-is-checked=true][data-is-disabled=false]{background-color:var(--accent-color);border-color:silver}.switch-wrapper[data-is-disabled=true]{background-color:silver;border-color:silver;box-shadow:inset -1px -1px #fff,inset 1px 1px #999,inset -2px -2px #dfdfdf,inset 2px 2px #7f7f7f}.switch[data-is-disabled=true]:after{box-shadow:inset -1px -1px #666,inset 1px 1px #fff,inset -2px -2px #949494,inset 2px 2px silver}.switch-wrapper[data-is-disabled=true]>.switch-icon{color:#707070}.slider::-webkit-slider-runnable-track{border-radius:0;height:5px;box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a}.slider::-webkit-slider-runnable-track [data-is-disabled=true]{box-shadow:inset -1px -1px #fff,inset 1px 1px #999,inset -2px -2px #dfdfdf,inset 2px 2px #717171}.slider::-webkit-slider-thumb{outline:none;width:calc(12px * var(--scalar, 1));height:calc(16px * var(--scalar, 1));border-radius:0;border:none;background-color:silver;box-sizing:border-box;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver}.slider[data-is-disabled=false]:active::-webkit-slider-thumb{background-color:silver}.slider[data-is-disabled=true]::-webkit-slider-thumb{box-shadow:inset -1px -1px #717171,inset 1px 1px #fff,inset -2px -2px #999,inset 2px 2px silver}.slider::-moz-range-track{border-radius:0;height:5px;border:none;background:silver;box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a}.slider::-moz-range-track [data-is-disabled=true]{box-shadow:inset -1px -1px #fff,inset 1px 1px #999,inset -2px -2px #dfdfdf,inset 2px 2px #717171}.slider::-moz-range-thumb{outline:none;width:calc(12px * var(--scalar, 1));height:calc(16px * var(--scalar, 1));border-radius:0;border:none;background-color:silver;box-sizing:border-box;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver;cursor:pointer}.slider[data-is-disabled=false]:active::-moz-range-thumb,.slider[data-is-disabled=false]:focus::-moz-range-thumb{background-color:silver;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver;outline:none}.slider[data-is-disabled=true]::-moz-range-thumb{box-shadow:inset -1px -1px #717171,inset 1px 1px #fff,inset -2px -2px #999,inset 2px 2px silver;cursor:not-allowed}.nav-item,.nav-item[data-is-selected],.menu-item{border-radius:0;font-size:12px}.nav-item,.menu-item .body-text{font-size:12px}.main[data-hierarchy=primary],.main[data-hierarchy=secondary],.main[data-hierarchy=tertiary]{background:silver;padding:0}.h-nav{border:none}.h-nav:after{content:"";position:absolute;left:0;right:0;bottom:0;height:0px;border-bottom:1px solid #f5f5f5;border-top:1px solid #808080;border-right:1px solid #f5f5f5;border-left:1px solid #808080}.footer{border:none}.footer:after{content:"";position:absolute;left:0;right:0;top:0;height:0px;border-bottom:1px solid #f5f5f5;border-top:1px solid #808080;border-right:1px solid #f5f5f5;border-left:1px solid #808080}

package/src/surfaces/card/card.module.css

@@ -1,5 +0,0 @@
-.card {
-  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.25);
-  padding: 16px;
-  gap: 8px;
-}

package/src/surfaces/modal/modal.stories.tsx

@@ -1,15 +0,0 @@
-import { Modal } from './modal.js';
-
-export default {
-  title: 'Frame / Modal',
-  component: Modal,
-  tags: ['autodocs'],
-};
-
-export const ModalStory = () => {
-  return (
-    <Modal>
-      <>modal</>
-    </Modal>
-  );
-};