@openfin/ui-library 0.16.0 → 0.17.0-alpha.1684503988

package/README.md

@@ -2,10 +2,9 @@
 
 > React component library for OpenFin Workspace products – Informed by [Spatial](https://www.figma.com/file/0Y3pKZj0tJWuleF12h5Sua/Spatial---Components).
 
-**Storybook:** [openfin-ui.netlify.com](https://openfin-ui.netlify.com) (pw: pizza)
+**Storybook:** [cdn.openfin.co/workspace/storybook](https://cdn.openfin.co/workspace/storybook)
 **NPM Package:** [@openfin/ui-library](https://www.npmjs.com/package/@openfin/ui-library)
 
-[![Netlify Status](https://api.netlify.com/api/v1/badges/8fc15443-c69c-473b-b5cf-c5dbc516b0bf/deploy-status)](https://app.netlify.com/sites/openfin-ui/deploys)
 ![Release Package](https://github.com/openfin/ui-library/actions/workflows/release-package.yml/badge.svg)
 
 ## What is this for?

package/dist/components/controls/ExpandableButton/expandableButton.d.ts

@@ -11,5 +11,6 @@ export type ExpandableButtonProps = Omit<ButtonProps, 'shape'> & {
     closePanelOnSecondaryButtonClick?: boolean;
     expandDirection?: ExpandDirection;
     stretchExpandablePanel?: boolean;
+    document?: Document;
 };
 export declare const ExpandableButton: (props: ExpandableButtonProps) => JSX.Element;

package/dist/components/controls/ExpandableButton/expandablePanel.d.ts

@@ -9,5 +9,6 @@ export type ExpandablePanelProps = {
     expandDirection: ExpandDirection;
     panelId?: string;
     stretch?: boolean;
+    document?: Document;
 };
 export declare const ExpandablePanel: (props: ExpandablePanelProps) => JSX.Element;

package/dist/components/system/ThemeProvider/lib/constants.d.ts

@@ -30,7 +30,7 @@ export declare const Color: {
     readonly openFinLightest: "#6864FF";
     readonly functional1: "#35C759";
     readonly functional2: "#46C8F1";
-    readonly functional3: "#0498FB";
+    readonly functional3: "#0A76D3";
     readonly functional4: "#6CADE5";
     readonly functional5: "#0A76D3";
     readonly functional6: "#882BFE";

package/dist/index.js

@@ -94,7 +94,7 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
       &:focus {
         border-color: ${({theme:e})=>e.palette.inputFocused};
       }
-    `}}},4130:function(e,t,n){var r=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),o=this&&this.__exportStar||function(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||r(t,e,n)};Object.defineProperty(t,"__esModule",{value:!0}),o(n(4249),t),o(n(6126),t)},9644:(e,t)=>{var n;Object.defineProperty(t,"__esModule",{value:!0}),t.ExpandDirection=void 0,(n=t.ExpandDirection||(t.ExpandDirection={}))[n.Up=0]="Up",n[n.Down=1]="Down"},4021:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.ExpandableButton=void 0;const o=n(5893),i=n(6689),a=n(4130),l=r(n(7518)),c=n(9634),s=n(9141),u=n(3030),d=n(1335),f=n(9644);t.ExpandableButton=e=>{var t,n,r,l,c,C;const[b,y]=(0,i.useState)({show:!1,requestedByCollapse:!1}),x={size:e.size,kind:e.kind,disabled:e.disabled},L=Object.assign(Object.assign({},e),{shape:a.ButtonShape.square,"aria-label":null!==(t=e["aria-label"])&&void 0!==t?t:`Primary Button ${e.title}`}),O=null!==(n=e.expandDirection)&&void 0!==n?n:f.ExpandDirection.Down;return(0,i.useEffect)((()=>{if(!b.requestedByCollapse)return;const e=setTimeout((()=>y({requestedByCollapse:!1,show:!1})),200);return()=>clearTimeout(e)}),[b.requestedByCollapse]),(0,o.jsxs)(w,{children:[(0,o.jsxs)(m,{children:[(0,o.jsx)(v,Object.assign({},L,{children:(0,o.jsx)(h,{children:null!==(r=e.children)&&void 0!==r?r:L.title})})),e.secondaryButtons&&e.secondaryButtons.length>0&&(0,o.jsx)(d.Box,Object.assign({id:"dropdown-container"},{children:(0,o.jsxs)(g,Object.assign({},x,{role:"combobox",onClick:()=>{b.requestedByCollapse||y({requestedByCollapse:!1,show:!b.show})},"aria-label":"Expand Secondary Buttons Panel","aria-expanded":b.show},{children:[O===f.ExpandDirection.Down&&(0,o.jsx)(p,{kind:null!==(l=e.kind)&&void 0!==l?l:a.ButtonKind.primary,icon:"CaretDownIcon"}),O===f.ExpandDirection.Up&&(0,o.jsx)(p,{kind:null!==(c=e.kind)&&void 0!==c?c:a.ButtonKind.primary,icon:"CaretUpIcon"})]}))}))]}),e.secondaryButtons&&e.secondaryButtons.length>0&&(0,o.jsx)(s.AnimatePresence,{children:b.show&&(0,o.jsx)(u.ExpandablePanel,{expandDirection:O,secondaryButtons:null!==(C=e.secondaryButtons)&&void 0!==C?C:[],stretch:e.stretchExpandablePanel,closePanelOnSecondaryButtonClick:e.closePanelOnSecondaryButtonClick,onCollapseRequest:()=>y({show:!1,requestedByCollapse:!0}),buttonSize:e.size})})]})};const C={[a.ButtonKind.primary]:e=>e.palette.brandPrimaryText,[a.ButtonKind.secondary]:e=>e.palette.brandSecondaryText,[a.ButtonKind.textOnly]:e=>e.palette.textDefault},p=(0,l.default)(c.Icon)`
+    `}}},4130:function(e,t,n){var r=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),o=this&&this.__exportStar||function(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||r(t,e,n)};Object.defineProperty(t,"__esModule",{value:!0}),o(n(4249),t),o(n(6126),t)},9644:(e,t)=>{var n;Object.defineProperty(t,"__esModule",{value:!0}),t.ExpandDirection=void 0,(n=t.ExpandDirection||(t.ExpandDirection={}))[n.Up=0]="Up",n[n.Down=1]="Down"},4021:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.ExpandableButton=void 0;const o=n(5893),i=n(6689),a=n(4130),l=r(n(7518)),c=n(9634),s=n(9141),u=n(3030),d=n(1335),f=n(9644);t.ExpandableButton=e=>{var t,n,r,l,c,C;const[b,y]=(0,i.useState)({show:!1,requestedByCollapse:!1}),x={size:e.size,kind:e.kind,disabled:e.disabled},L=Object.assign(Object.assign({},e),{shape:a.ButtonShape.square,"aria-label":null!==(t=e["aria-label"])&&void 0!==t?t:`Primary Button ${e.title}`}),O=null!==(n=e.expandDirection)&&void 0!==n?n:f.ExpandDirection.Down;return(0,i.useEffect)((()=>{if(!b.requestedByCollapse)return;const e=setTimeout((()=>y({requestedByCollapse:!1,show:!1})),200);return()=>clearTimeout(e)}),[b.requestedByCollapse]),(0,o.jsxs)(w,{children:[(0,o.jsxs)(m,{children:[(0,o.jsx)(v,Object.assign({},L,{children:(0,o.jsx)(h,{children:null!==(r=e.children)&&void 0!==r?r:L.title})})),e.secondaryButtons&&e.secondaryButtons.length>0&&(0,o.jsx)(d.Box,Object.assign({id:"dropdown-container"},{children:(0,o.jsxs)(g,Object.assign({},x,{role:"combobox",onClick:()=>{b.requestedByCollapse||y({requestedByCollapse:!1,show:!b.show})},"aria-label":"Expand Secondary Buttons Panel","aria-expanded":b.show},{children:[O===f.ExpandDirection.Down&&(0,o.jsx)(p,{kind:null!==(l=e.kind)&&void 0!==l?l:a.ButtonKind.primary,icon:"CaretDownIcon"}),O===f.ExpandDirection.Up&&(0,o.jsx)(p,{kind:null!==(c=e.kind)&&void 0!==c?c:a.ButtonKind.primary,icon:"CaretUpIcon"})]}))}))]}),e.secondaryButtons&&e.secondaryButtons.length>0&&(0,o.jsx)(s.AnimatePresence,{children:b.show&&(0,o.jsx)(u.ExpandablePanel,{expandDirection:O,secondaryButtons:null!==(C=e.secondaryButtons)&&void 0!==C?C:[],stretch:e.stretchExpandablePanel,closePanelOnSecondaryButtonClick:e.closePanelOnSecondaryButtonClick,onCollapseRequest:()=>y({show:!1,requestedByCollapse:!0}),buttonSize:e.size,document:e.document})})]})};const C={[a.ButtonKind.primary]:e=>e.palette.brandPrimaryText,[a.ButtonKind.secondary]:e=>e.palette.brandSecondaryText,[a.ButtonKind.textOnly]:e=>e.palette.textDefault},p=(0,l.default)(c.Icon)`
   svg path {
     color: ${({theme:e,kind:t})=>C[t](e)};
   }
@@ -120,7 +120,7 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
 `,w=l.default.div`
   position: relative;
   display: inline-block;
-`},2128:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.setupExpandablePanel=void 0;const r=n(9644);t.setupExpandablePanel=(e,t,n=!1)=>{if(!e||0===e.childNodes.length)return;const o=e.parentElement,i=null==o?void 0:o.getBoundingClientRect(),a=e.getBoundingClientRect();if(!i)return;const l=a.height,c=a.width<=i.width||n?a.width:i.width,s=i.x+c>document.body.clientWidth||c<i.width;e.style.width=`${c}px`,e.style.opacity="1",s?e.style.right="0px":e.style.left="0px",t===r.ExpandDirection.Down&&(e.style.top=`${i.height}px`),t===r.ExpandDirection.Up&&(e.style.top=-1*l+"px")}},3030:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.ExpandablePanel=void 0;const o=n(5893),i=r(n(7518)),a=n(9141),l=n(4130),c=n(1335),s=n(2128),u=r(n(4483)),d={type:"spring",duration:.2,bounce:.25};t.ExpandablePanel=e=>{var t;const n=`${e.panelId}-expandable-panel`;return(0,o.jsx)(u.default,Object.assign({focusTrapOptions:{fallbackFocus:`#${n}`,clickOutsideDeactivates:!0,onDeactivate:e.onCollapseRequest,initialFocus:!1}},{children:(0,o.jsx)(p,Object.assign({ref:t=>(0,s.setupExpandablePanel)(t,e.expandDirection,e.stretch),tabIndex:0,id:n,initial:"initial",exit:"hidden",buttonSize:null!==(t=e.buttonSize)&&void 0!==t?t:l.ButtonSize.base,animate:"visible",role:"menu",transition:d,onMouseOver:()=>{var e;return null===(e=document.activeElement)||void 0===e?void 0:e.blur()}},{children:e.secondaryButtons.map(((t,n)=>(0,o.jsx)(l.Button,Object.assign({className:"menu-item",tabIndex:n+1,title:t.title,role:"menuitem",size:e.buttonSize,disabled:t.disabled,kind:"textOnly",onClick:n=>((t,n)=>{e.closePanelOnSecondaryButtonClick?(n.onClick(t),e.onCollapseRequest()):n.onClick(t,(()=>e.onCollapseRequest()))})(n,t),"aria-label":t.title},{children:(0,o.jsx)(f,Object.assign({"aria-label":t.title},{children:t.title}))}),n)))}),"expandablePanel")}))};const f=(0,i.default)(c.Box)`
+`},2128:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.setupExpandablePanel=void 0;const r=n(9644);t.setupExpandablePanel=(e,t,n=!1)=>{if(!e||0===e.childNodes.length)return;const o=e.parentElement,i=null==o?void 0:o.getBoundingClientRect(),a=e.getBoundingClientRect();if(!i)return;const l=a.height,c=a.width<=i.width||n?a.width:i.width,s=i.x+c>document.body.clientWidth||c<i.width;e.style.width=`${c}px`,e.style.opacity="1",s?e.style.right="0px":e.style.left="0px",t===r.ExpandDirection.Down&&(e.style.top=`${i.height}px`),t===r.ExpandDirection.Up&&(e.style.top=-1*l+"px")}},3030:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.ExpandablePanel=void 0;const o=n(5893),i=r(n(7518)),a=n(9141),l=n(4130),c=n(1335),s=n(2128),u=r(n(4483)),d={type:"spring",duration:.2,bounce:.25};t.ExpandablePanel=e=>{var t;const n=`${e.panelId}-expandable-panel`;return(0,o.jsx)(u.default,Object.assign({focusTrapOptions:{fallbackFocus:`#${n}`,clickOutsideDeactivates:!0,onDeactivate:e.onCollapseRequest,initialFocus:!1,document:e.document}},{children:(0,o.jsx)(p,Object.assign({ref:t=>(0,s.setupExpandablePanel)(t,e.expandDirection,e.stretch),tabIndex:0,id:n,initial:"initial",exit:"hidden",buttonSize:null!==(t=e.buttonSize)&&void 0!==t?t:l.ButtonSize.base,animate:"visible",role:"menu",transition:d,onMouseOver:()=>{var e;return null===(e=document.activeElement)||void 0===e?void 0:e.blur()}},{children:e.secondaryButtons.map(((t,n)=>(0,o.jsx)(l.Button,Object.assign({className:"menu-item",tabIndex:n+1,title:t.title,role:"menuitem",size:e.buttonSize,disabled:t.disabled,kind:"textOnly",onClick:n=>((t,n)=>{e.closePanelOnSecondaryButtonClick?(n.onClick(t),e.onCollapseRequest()):n.onClick(t,(()=>e.onCollapseRequest()))})(n,t),"aria-label":t.title},{children:(0,o.jsx)(f,Object.assign({"aria-label":t.title},{children:t.title}))}),n)))}),"expandablePanel")}))};const f=(0,i.default)(c.Box)`
   padding-bottom: 1px;
   padding-top: 1px;
   white-space: nowrap;
@@ -855,7 +855,7 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
       --openfin-ui-globalTransition: ${({theme:e})=>e.transition.none};
     }
   }
-`},1069:function(e,t,n){var r=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),o=this&&this.__exportStar||function(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||r(t,e,n)};Object.defineProperty(t,"__esModule",{value:!0}),o(n(9431),t)},9507:function(e,t,n){var r=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),o=this&&this.__exportStar||function(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||r(t,e,n)};Object.defineProperty(t,"__esModule",{value:!0}),o(n(3471),t),o(n(6714),t),o(n(9272),t),o(n(575),t),o(n(1441),t),o(n(8732),t),o(n(5459),t),o(n(5317),t),o(n(420),t)},9984:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.getMostReadable=t.darkenColor=t.lightenColor=void 0;const o=r(n(8207));t.lightenColor=(e,t)=>i(e,"lighten",t),t.darkenColor=(e,t)=>i(e,"darken",t);const i=(e,t,n)=>{if(n&&(n<0||n>100))throw new Error(`${n} must be a number between 0 and 100`);return(0,o.default)(e)[t](n).toString()};t.getMostReadable=(e,t)=>o.default.mostReadable(e,t).toHexString()},8029:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Configuration=void 0,t.Configuration={fontLoading:"cdn"}},3471:function(e,t,n){var r=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),o=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),i=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&r(t,e,n);return o(t,e),t};Object.defineProperty(t,"__esModule",{value:!0}),t.cdnFontFaceCss=t.IconSize=t.IconSet=t.Transition=t.Typography=t.LineHeight=t.FontWeight=t.FontSize=t.FontStack=t.Shadow=t.Radius=t.UnitPx=t.Unit=t.SizeName=t.Size=t.Color=void 0;const a=i(n(1521)),l=i(n(2772)),c=n(9272);t.Color={white:"#FFFFFF",lightGray1:"#FAFBFE",lightGray2:"#F3F5F8",lightGray3:"#ECEEF1",lightGray4:"#DDDFE4",lightGray5:"#C9CBD2",neutralGray:"#7D808A",neutralGray80:"rgba(125,128,138,0.8)",silverGray:"#C0C1C2",darkGray1:"#53565F",darkGray2:"#383A40",darkGray3:"#2F3136",darkGray4:"#24262B",darkGray5:"#1E1F23",darkGray6:"#111214",openFinDarkest:"#3D39CD",openFinDarker:"#4642E0",openFin:"#504CFF",openFinLight:"#5254FB",openFinLighter:"#5C5EFE",openFinLightest:"#6864FF",functional1:"#35C759",functional2:"#46C8F1",functional3:"#0498FB",functional4:"#6CADE5",functional5:"#0A76D3",functional6:"#882BFE",functional7:"#BE1D1F",functional8:"#C93400",functional9:"#FF5E60",functional10:"#F48F00",purple:"#8C61FF",lightblue:"#36C3FE",aqua:"#00CC88",yellow:"#FFEB00",salmon:"#FF8C4C",pink:"#FF5E60",lightpink:"#FF8FB8",white00:"rgba(255,255,255,0.0)",white10:"rgba(255,255,255,0.1)",white20:"rgba(255,255,255,0.2)",white30:"rgba(255,255,255,0.3)",white40:"rgba(255,255,255,0.4)",white50:"rgba(255,255,255,0.5)",white60:"rgba(255,255,255,0.6)",white70:"rgba(255,255,255,0.7)",white80:"rgba(255,255,255,0.8)",white90:"rgba(255,255,255,0.9)",black00:"rgba(0,0,0,0.0)",black10:"rgba(0,0,0,0.1)",black20:"rgba(0,0,0,0.2)",black30:"rgba(0,0,0,0.3)",black40:"rgba(0,0,0,0.4)",black50:"rgba(0,0,0,0.5)",black60:"rgba(0,0,0,0.6)",black70:"rgba(0,0,0,0.7)",black80:"rgba(0,0,0,0.8)",black90:"rgba(0,0,0,0.9)",transparent:"transparent"},t.Size={xsmall:"xsmall",small:"small",base:"base",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge",xxxxlarge:"xxxxlarge"},t.SizeName={[t.Size.xsmall]:"Extra Small",[t.Size.small]:"Small",[t.Size.base]:"Base",[t.Size.large]:"Large",[t.Size.xlarge]:"Extra Large",[t.Size.xxlarge]:"2X Large",[t.Size.xxxlarge]:"3X Large",[t.Size.xxxxlarge]:"4X Large"},t.Unit={[t.Size.xsmall]:4,[t.Size.small]:8,[t.Size.base]:12,[t.Size.large]:16,[t.Size.xlarge]:20,[t.Size.xxlarge]:24,[t.Size.xxxlarge]:32,[t.Size.xxxxlarge]:48},t.UnitPx={[t.Size.xsmall]:"4px",[t.Size.small]:"8px",[t.Size.base]:"12px",[t.Size.large]:"16px",[t.Size.xlarge]:"20px",[t.Size.xxlarge]:"24px",[t.Size.xxxlarge]:"32px",[t.Size.xxxxlarge]:"48px"},t.Radius={[t.Size.xsmall]:"2px",[t.Size.small]:"4px",[t.Size.base]:"8px",[t.Size.large]:"24px",pill:"100vh",round:"50%",none:"0"},t.Shadow={[t.Size.base]:"0 4px 4px rgba(0, 0, 0, 0.25)"},t.FontStack=["Inter","-apple-system","BlinkMacSystemFont","Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue","sans-serif"].join(", "),t.FontSize={[t.Size.xsmall]:"8px",[t.Size.small]:"10px",[t.Size.base]:"12px",[t.Size.large]:"14px",[t.Size.xlarge]:"16px",[t.Size.xxlarge]:"18px",[t.Size.xxxlarge]:"20px",[t.Size.xxxxlarge]:"40px"},t.FontWeight={normal:400,bold:600},t.LineHeight={ui:1,heading:1.2,text:1.5},t.Typography={base:`${t.FontSize.base}/${t.LineHeight.text} ${t.FontStack}`},t.Transition={base:"200ms cubic-bezier(0.16, 1, 0.3, 1)",none:"0ms"},t.IconSet=Object.assign(Object.assign({},a),l),t.IconSize={[t.Size.xsmall]:t.UnitPx.small,[t.Size.small]:t.UnitPx.base,[t.Size.base]:"15px",[t.Size.large]:t.UnitPx.xlarge,[t.Size.xlarge]:t.UnitPx.xxlarge,[t.Size.xxlarge]:t.UnitPx.xxxlarge,[t.Size.xxxlarge]:t.UnitPx.xxxxlarge},t.cdnFontFaceCss=(0,c.createFontFaceCss)({regular:"//cdn.openfin.co/fonts/inter/Inter-Regular.woff2?v3.15",italic:"//cdn.openfin.co/fonts/inter/Inter-Italic.woff2?v3.15",semiBold:"//cdn.openfin.co/fonts/inter/Inter-SemiBold.woff2?v3.15",semiBoldItalic:"//cdn.openfin.co/fonts/inter/Inter-SemiBoldItalic.woff2?v3.15"})},9272:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.createFontFaceCss=void 0;const r=n(7518),o=n(3471);t.createFontFaceCss=function(e){return r.css`
+`},1069:function(e,t,n){var r=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),o=this&&this.__exportStar||function(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||r(t,e,n)};Object.defineProperty(t,"__esModule",{value:!0}),o(n(9431),t)},9507:function(e,t,n){var r=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),o=this&&this.__exportStar||function(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||r(t,e,n)};Object.defineProperty(t,"__esModule",{value:!0}),o(n(3471),t),o(n(6714),t),o(n(9272),t),o(n(575),t),o(n(1441),t),o(n(8732),t),o(n(5459),t),o(n(5317),t),o(n(420),t)},9984:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.getMostReadable=t.darkenColor=t.lightenColor=void 0;const o=r(n(8207));t.lightenColor=(e,t)=>i(e,"lighten",t),t.darkenColor=(e,t)=>i(e,"darken",t);const i=(e,t,n)=>{if(n&&(n<0||n>100))throw new Error(`${n} must be a number between 0 and 100`);return(0,o.default)(e)[t](n).toString()};t.getMostReadable=(e,t)=>o.default.mostReadable(e,t).toHexString()},8029:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Configuration=void 0,t.Configuration={fontLoading:"cdn"}},3471:function(e,t,n){var r=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),o=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),i=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&r(t,e,n);return o(t,e),t};Object.defineProperty(t,"__esModule",{value:!0}),t.cdnFontFaceCss=t.IconSize=t.IconSet=t.Transition=t.Typography=t.LineHeight=t.FontWeight=t.FontSize=t.FontStack=t.Shadow=t.Radius=t.UnitPx=t.Unit=t.SizeName=t.Size=t.Color=void 0;const a=i(n(1521)),l=i(n(2772)),c=n(9272);t.Color={white:"#FFFFFF",lightGray1:"#FAFBFE",lightGray2:"#F3F5F8",lightGray3:"#ECEEF1",lightGray4:"#DDDFE4",lightGray5:"#C9CBD2",neutralGray:"#7D808A",neutralGray80:"rgba(125,128,138,0.8)",silverGray:"#C0C1C2",darkGray1:"#53565F",darkGray2:"#383A40",darkGray3:"#2F3136",darkGray4:"#24262B",darkGray5:"#1E1F23",darkGray6:"#111214",openFinDarkest:"#3D39CD",openFinDarker:"#4642E0",openFin:"#504CFF",openFinLight:"#5254FB",openFinLighter:"#5C5EFE",openFinLightest:"#6864FF",functional1:"#35C759",functional2:"#46C8F1",functional3:"#0A76D3",functional4:"#6CADE5",functional5:"#0A76D3",functional6:"#882BFE",functional7:"#BE1D1F",functional8:"#C93400",functional9:"#FF5E60",functional10:"#F48F00",purple:"#8C61FF",lightblue:"#36C3FE",aqua:"#00CC88",yellow:"#FFEB00",salmon:"#FF8C4C",pink:"#FF5E60",lightpink:"#FF8FB8",white00:"rgba(255,255,255,0.0)",white10:"rgba(255,255,255,0.1)",white20:"rgba(255,255,255,0.2)",white30:"rgba(255,255,255,0.3)",white40:"rgba(255,255,255,0.4)",white50:"rgba(255,255,255,0.5)",white60:"rgba(255,255,255,0.6)",white70:"rgba(255,255,255,0.7)",white80:"rgba(255,255,255,0.8)",white90:"rgba(255,255,255,0.9)",black00:"rgba(0,0,0,0.0)",black10:"rgba(0,0,0,0.1)",black20:"rgba(0,0,0,0.2)",black30:"rgba(0,0,0,0.3)",black40:"rgba(0,0,0,0.4)",black50:"rgba(0,0,0,0.5)",black60:"rgba(0,0,0,0.6)",black70:"rgba(0,0,0,0.7)",black80:"rgba(0,0,0,0.8)",black90:"rgba(0,0,0,0.9)",transparent:"transparent"},t.Size={xsmall:"xsmall",small:"small",base:"base",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge",xxxxlarge:"xxxxlarge"},t.SizeName={[t.Size.xsmall]:"Extra Small",[t.Size.small]:"Small",[t.Size.base]:"Base",[t.Size.large]:"Large",[t.Size.xlarge]:"Extra Large",[t.Size.xxlarge]:"2X Large",[t.Size.xxxlarge]:"3X Large",[t.Size.xxxxlarge]:"4X Large"},t.Unit={[t.Size.xsmall]:4,[t.Size.small]:8,[t.Size.base]:12,[t.Size.large]:16,[t.Size.xlarge]:20,[t.Size.xxlarge]:24,[t.Size.xxxlarge]:32,[t.Size.xxxxlarge]:48},t.UnitPx={[t.Size.xsmall]:"4px",[t.Size.small]:"8px",[t.Size.base]:"12px",[t.Size.large]:"16px",[t.Size.xlarge]:"20px",[t.Size.xxlarge]:"24px",[t.Size.xxxlarge]:"32px",[t.Size.xxxxlarge]:"48px"},t.Radius={[t.Size.xsmall]:"2px",[t.Size.small]:"4px",[t.Size.base]:"8px",[t.Size.large]:"24px",pill:"100vh",round:"50%",none:"0"},t.Shadow={[t.Size.base]:"0 4px 4px rgba(0, 0, 0, 0.25)"},t.FontStack=["Inter","-apple-system","BlinkMacSystemFont","Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue","sans-serif"].join(", "),t.FontSize={[t.Size.xsmall]:"8px",[t.Size.small]:"10px",[t.Size.base]:"12px",[t.Size.large]:"14px",[t.Size.xlarge]:"16px",[t.Size.xxlarge]:"18px",[t.Size.xxxlarge]:"20px",[t.Size.xxxxlarge]:"40px"},t.FontWeight={normal:400,bold:600},t.LineHeight={ui:1,heading:1.2,text:1.5},t.Typography={base:`${t.FontSize.base}/${t.LineHeight.text} ${t.FontStack}`},t.Transition={base:"200ms cubic-bezier(0.16, 1, 0.3, 1)",none:"0ms"},t.IconSet=Object.assign(Object.assign({},a),l),t.IconSize={[t.Size.xsmall]:t.UnitPx.small,[t.Size.small]:t.UnitPx.base,[t.Size.base]:"15px",[t.Size.large]:t.UnitPx.xlarge,[t.Size.xlarge]:t.UnitPx.xxlarge,[t.Size.xxlarge]:t.UnitPx.xxxlarge,[t.Size.xxxlarge]:t.UnitPx.xxxxlarge},t.cdnFontFaceCss=(0,c.createFontFaceCss)({regular:"//cdn.openfin.co/fonts/inter/Inter-Regular.woff2?v3.15",italic:"//cdn.openfin.co/fonts/inter/Inter-Italic.woff2?v3.15",semiBold:"//cdn.openfin.co/fonts/inter/Inter-SemiBold.woff2?v3.15",semiBoldItalic:"//cdn.openfin.co/fonts/inter/Inter-SemiBoldItalic.woff2?v3.15"})},9272:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.createFontFaceCss=void 0;const r=n(7518),o=n(3471);t.createFontFaceCss=function(e){return r.css`
     @font-face {
       font-family: 'Inter';
       src: url(${e.regular}) format('woff2');

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@openfin/ui-library",
   "description": "OpenFin UI Component Library",
-  "version": "0.16.0",
+  "version": "0.17.0-alpha.1684503988",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": "github:openfin/ui-library",
-  "homepage": "https://openfin-ui.netlify.app",
+  "homepage": "https://cdn.openfin.co/workspace/storybook",
   "files": [
     "dist/**/*"
   ],
@@ -17,12 +17,13 @@
     "build:src": "webpack build --config webpack.config.js --mode production",
     "build:clean": "rimraf dist",
     "build:dev": "webpack build --config webpack.config.js --mode development && yalc push",
-    "test": "jest",
+    "test:ci": "jest",
+    "test": "jest --watch",
     "lint": "npm run lint:typescript && npm run lint:styles",
     "lint:typescript": "eslint \"./src/**/*.{ts,tsx}\"",
     "lint:styles": "stylelint \"./src/**/*.{ts,tsx}\"",
-    "storybook": "start-storybook -p 6006 -s public --no-manager-cache",
-    "storybook:build": "build-storybook -s public",
+    "storybook": "storybook dev -p 6006 -s public",
+    "storybook:build": "storybook build -s public",
     "storybook:cache-clear": "rimraf ./node_modules/.cache/storybook"
   },
   "peerDependencies": {
@@ -38,14 +39,13 @@
   },
   "devDependencies": {
     "@babel/core": "^7.18.6",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-interactions": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/builder-webpack5": "^6.5.9",
-    "@storybook/manager-webpack5": "^6.5.9",
-    "@storybook/node-logger": "^6.5.9",
-    "@storybook/react": "^6.5.9",
+    "@storybook/addon-actions": "^7.0.11",
+    "@storybook/addon-essentials": "^7.0.11",
+    "@storybook/addon-interactions": "^7.0.11",
+    "@storybook/addon-links": "^7.0.11",
+    "@storybook/node-logger": "^7.0.11",
+    "@storybook/react": "^7.0.11",
+    "@storybook/react-webpack5": "^7.0.11",
     "@testing-library/dom": "^8.14.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.5",
@@ -58,30 +58,30 @@
     "@types/react-dom": "^17.0.2",
     "@types/styled-components": "^5.1.25",
     "@types/tinycolor2": "^1.4.3",
-    "@typescript-eslint/eslint-plugin": "^5.29.0",
-    "@typescript-eslint/parser": "^5.29.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.6",
+    "@typescript-eslint/parser": "^5.59.6",
     "babel-loader": "^8.2.5",
     "copy-webpack-plugin": "^11.0.0",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.3",
-    "eslint": "^8.18.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest": "^26.5.3",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.30.0",
+    "eslint": "^8.40.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
     "file-loader": "^6.2.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^28.1.2",
     "jest-environment-jsdom": "^28.1.2",
-    "prettier": "^2.7.1",
+    "postcss-styled-syntax": "^0.4.0",
+    "prettier": "^2.8.8",
     "react-is": "^17.0.2",
     "react-refresh": "^0.14.0",
     "rimraf": "^3.0.2",
-    "storybook-addon-performance": "^0.16.1",
-    "stylelint": "^14.9.1",
-    "stylelint-config-recommended": "^8.0.0",
-    "stylelint-config-styled-components": "^0.1.1",
-    "stylelint-processor-styled-components": "^1.10.0",
+    "storybook": "^7.0.11",
+    "storybook-addon-performance": "^0.17.1",
+    "stylelint": "^15.6.1",
+    "stylelint-config-recommended": "^12.0.0",
     "ts-jest": "^28.0.5",
     "ts-loader": "^9.3.1",
     "typescript": "^4.7.4",
@@ -148,13 +148,13 @@
     }
   },
   "stylelint": {
-    "processors": [
-      "stylelint-processor-styled-components"
-    ],
+    "customSyntax": "postcss-styled-syntax",
     "extends": [
-      "stylelint-config-recommended",
-      "stylelint-config-styled-components"
-    ]
+      "stylelint-config-recommended"
+    ],
+    "rules": {
+      "no-empty-source": null
+    }
   },
   "prettier": {
     "endOfLine": "lf",