@adamjanicki/ui 1.5.9 → 1.6.0

package/dist/aui.umd.js

@@ -0,0 +1,22 @@
+(function(f,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],l):(f=typeof globalThis<"u"?globalThis:f||self,l(f.Aui={},f.React))})(this,function(f,l){"use strict";var U={exports:{}},M={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var K;function be(){if(K)return M;K=1;var t=Symbol.for("react.transitional.element"),e=Symbol.for("react.fragment");function r(s,o,a){var i=null;if(a!==void 0&&(i=""+a),o.key!==void 0&&(i=""+o.key),"key"in o){a={};for(var d in o)d!=="key"&&(a[d]=o[d])}else a=o;return o=a.ref,{$$typeof:t,type:s,key:i,ref:o!==void 0?o:null,props:a}}return M.Fragment=e,M.jsx=r,M.jsxs=r,M}var P={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var ee;function ge(){return ee||(ee=1,process.env.NODE_ENV!=="production"&&function(){function t(n){if(n==null)return null;if(typeof n=="function")return n.$$typeof===et?null:n.displayName||n.name||null;if(typeof n=="string")return n;switch(n){case E:return"Fragment";case N:return"Profiler";case T:return"StrictMode";case B:return"Suspense";case _:return"SuspenseList";case Ke:return"Activity"}if(typeof n=="object")switch(typeof n.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),n.$$typeof){case S:return"Portal";case $:return(n.displayName||"Context")+".Provider";case I:return(n._context.displayName||"Context")+".Consumer";case Y:var m=n.render;return n=n.displayName,n||(n=m.displayName||m.name||"",n=n!==""?"ForwardRef("+n+")":"ForwardRef"),n;case R:return m=n.displayName||null,m!==null?m:t(n.type)||"Memo";case ce:m=n._payload,n=n._init;try{return t(n(m))}catch{}}return null}function e(n){return""+n}function r(n){try{e(n);var m=!1}catch{m=!0}if(m){m=console;var b=m.error,y=typeof Symbol=="function"&&Symbol.toStringTag&&n[Symbol.toStringTag]||n.constructor.name||"Object";return b.call(m,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",y),e(n)}}function s(n){if(n===E)return"<>";if(typeof n=="object"&&n!==null&&n.$$typeof===ce)return"<...>";try{var m=t(n);return m?"<"+m+">":"<...>"}catch{return"<...>"}}function o(){var n=X.A;return n===null?null:n.getOwner()}function a(){return Error("react-stack-top-frame")}function i(n){if(ue.call(n,"key")){var m=Object.getOwnPropertyDescriptor(n,"key").get;if(m&&m.isReactWarning)return!1}return n.key!==void 0}function d(n,m){function b(){fe||(fe=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",m))}b.isReactWarning=!0,Object.defineProperty(n,"key",{get:b,configurable:!0})}function h(){var n=t(this.type);return de[n]||(de[n]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),n=this.props.ref,n!==void 0?n:null}function u(n,m,b,y,O,A,G,Q){return b=A.ref,n={$$typeof:k,type:n,key:m,props:A,_owner:O},(b!==void 0?b:null)!==null?Object.defineProperty(n,"ref",{enumerable:!1,get:h}):Object.defineProperty(n,"ref",{enumerable:!1,value:null}),n._store={},Object.defineProperty(n._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(n,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(n,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:G}),Object.defineProperty(n,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:Q}),Object.freeze&&(Object.freeze(n.props),Object.freeze(n)),n}function v(n,m,b,y,O,A,G,Q){var x=m.children;if(x!==void 0)if(y)if(tt(x)){for(y=0;y<x.length;y++)j(x[y]);Object.freeze&&Object.freeze(x)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else j(x);if(ue.call(m,"key")){x=t(n);var L=Object.keys(m).filter(function(rt){return rt!=="key"});y=0<L.length?"{key: someKey, "+L.join(": ..., ")+": ...}":"{key: someKey}",pe[x+y]||(L=0<L.length?"{"+L.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,y,x,L,x),pe[x+y]=!0)}if(x=null,b!==void 0&&(r(b),x=""+b),i(m)&&(r(m.key),x=""+m.key),"key"in m){b={};for(var Z in m)Z!=="key"&&(b[Z]=m[Z])}else b=m;return x&&d(b,typeof n=="function"?n.displayName||n.name||"Unknown":n),u(n,x,A,O,o(),b,G,Q)}function j(n){typeof n=="object"&&n!==null&&n.$$typeof===k&&n._store&&(n._store.validated=1)}var w=l,k=Symbol.for("react.transitional.element"),S=Symbol.for("react.portal"),E=Symbol.for("react.fragment"),T=Symbol.for("react.strict_mode"),N=Symbol.for("react.profiler"),I=Symbol.for("react.consumer"),$=Symbol.for("react.context"),Y=Symbol.for("react.forward_ref"),B=Symbol.for("react.suspense"),_=Symbol.for("react.suspense_list"),R=Symbol.for("react.memo"),ce=Symbol.for("react.lazy"),Ke=Symbol.for("react.activity"),et=Symbol.for("react.client.reference"),X=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,ue=Object.prototype.hasOwnProperty,tt=Array.isArray,J=console.createTask?console.createTask:function(){return null};w={react_stack_bottom_frame:function(n){return n()}};var fe,de={},me=w.react_stack_bottom_frame.bind(w,a)(),he=J(s(a)),pe={};P.Fragment=E,P.jsx=function(n,m,b,y,O){var A=1e4>X.recentlyCreatedOwnerStacks++;return v(n,m,b,!1,y,O,A?Error("react-stack-top-frame"):me,A?J(s(n)):he)},P.jsxs=function(n,m,b,y,O){var A=1e4>X.recentlyCreatedOwnerStacks++;return v(n,m,b,!0,y,O,A?Error("react-stack-top-frame"):me,A?J(s(n)):he)}}()),P}var te;function we(){return te||(te=1,process.env.NODE_ENV==="production"?U.exports=be():U.exports=ge()),U.exports}var c=we();function p(...t){return t.filter(Boolean).join(" ")}function H(t,e){try{const r=document.getElementById(t);r&&r.scrollIntoView({behavior:e})}catch{return}}function ye(t,e){if(t===void 0)throw new Error(e||"Unexpected undefined value");return t}const g=l.forwardRef(({layout:t,className:e,style:r,...s},o)=>{const a=xe(t);return c.jsx("div",{...s,className:p(a.className,e),style:{...a.style,...r},ref:o})});function xe(t){if(!t)return{className:void 0,style:void 0};const{axis:e,gap:r,align:s,justify:o,padding:a,margin:i,wrap:d}=t,h={};let u=`aui-flex-${e}`;return s&&(u=p(u,`aui-align-${s}`)),o&&(u=p(u,`aui-justify-${o}`)),d&&(u=p(u,"aui-flex-wrap")),r&&(typeof r=="number"?h.gap=r:u=p(u,`aui-gap-${r}`)),a&&(typeof a=="number"?h.padding=a:u=p(u,`aui-pa-${a}`)),i&&(typeof i=="number"?h.margin=i:u=p(u,`aui-ma-${i}`)),{className:u,style:h}}const z="M94.0908,296.3057c-29.82338,0-54-24.17662-54-54s24.17662-54,54-54c.00237,0,.00475,0,.00712,0c.0017,0,141.65138,0,221.99288,0v-222c0-29.82338,24.17662-54,54-54s54,24.17662,54,54c0,.00237,0,.00475,0,.00712s0,273.40726,0,275.97468c0,.00607,0,.01213,0,.0182c0,29.82338-24.17662,54-54,54h-276Z",Ee={down:{contents:[c.jsx("path",{d:z,transform:"matrix(.707107 0.707107-.707107 0.707107 165.642289-79.868246)"})]},up:{contents:[c.jsx("path",{d:z,transform:"matrix(-.707107-.707107 0.707107-.707107 346.357711 591.868246)"})]},left:{contents:[c.jsx("path",{d:z,transform:"matrix(-.707107 0.707107-.707107-.707107 591.868246 165.642289)"})]},right:{contents:[c.jsx("path",{d:z,transform:"matrix(.707107-.707107 0.707107 0.707107-79.868246 346.357711)"})]}},ve="0 0 512 512",D=l.forwardRef(({icon:t,className:e,size:r,style:s,...o},a)=>{const{contents:i,viewBox:d}=Ee[t];return c.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:d||ve,className:p("aui-icon",e),style:{width:r,height:r,...s},...o,ref:a,children:i.map((h,u)=>c.jsx(l.Fragment,{children:h},u))})}),W=l.forwardRef(({className:t,...e},r)=>c.jsx("button",{...e,className:p("aui-action aui-button",t),ref:r})),q=l.forwardRef(({variant:t,corners:e,className:r,size:s,...o},a)=>c.jsx(W,{...o,className:p(re({variant:t,corners:e,size:s}),r),ref:a})),re=({variant:t="primary",corners:e="rounded",size:r="regular"})=>`aui-button--${t} aui-button-size--${r} aui-corners--${e}`,ne=l.forwardRef((t,e)=>{const{animated:r,duration:s=.25,keepMounted:o=!1,animateTo:a,animateFrom:i,className:d,style:h,...u}=t,[v,j]=l.useState(r||o),[w,k]=l.useState(!1),S=l.useRef(null),E=l.useRef(null),T=()=>{S.current&&(clearTimeout(S.current),S.current=null),E.current&&(cancelAnimationFrame(E.current),E.current=null)};if(l.useEffect(()=>(r&&v&&(T(),E.current=requestAnimationFrame(()=>k(!0))),T),[r,v]),l.useEffect(()=>(r?j(!0):(T(),k(!1),S.current=window.setTimeout(()=>{o||j(!1)},s*1e3)),T),[r,s,o]),!v)return null;const N=w?a:i;return c.jsx(g,{className:p(d,N?.className),style:{transition:`all ${s}s ease-in-out`,...h,...N?.style},...u,ref:e})}),je=l.forwardRef(({drawers:t,className:e,duration:r,hideDividers:s,...o},a)=>{const[i,d]=l.useState(new Set);return c.jsx(g,{layout:{axis:"y"},...o,className:p("aui-accordion aui-corners--rounded",e),ref:a,children:t.map((h,u)=>c.jsx(Te,{item:h,open:i.has(u),onOpenChange:v=>d(j=>{const w=new Set(j);return v?w.add(u):w.delete(u),w}),duration:r,showDivider:!s&&u<t.length-1},u))})}),Te=({item:t,open:e,onOpenChange:r,duration:s,showDivider:o})=>{const a=l.useRef(null),[i,d]=l.useState(),h=t.content;return l.useEffect(()=>{e&&h&&a.current&&d(a.current.offsetHeight)},[e,h]),c.jsxs(c.Fragment,{children:[c.jsxs(g,{layout:{axis:"y"},children:[c.jsx(W,{onClick:()=>r(!e),children:c.jsxs(g,{layout:{axis:"x",align:"center",gap:"m",padding:"l"},children:[c.jsx(D,{size:12,icon:e?"down":"right",className:"aui-accordion-arrow"}),c.jsx("span",{className:"aui-accordion-label",children:t.label})]})}),c.jsx(ne,{style:{overflow:"hidden"},keepMounted:!0,duration:s,animated:e,animateFrom:{style:{visibility:"hidden",height:0,transform:"translateY(-4px)",opacity:.9}},animateTo:{style:{height:i,transform:"translateY(0)",opacity:1}},children:c.jsx(g,{ref:a,children:h})})]}),o&&c.jsx("hr",{className:"aui-accordion-hr"})]})},Se=l.forwardRef(({type:t,corners:e="rounded",className:r,...s},o)=>c.jsx(g,{...s,className:p(`aui-alert aui-content--${t} aui-corners--${e}`,r),ref:o})),ke=l.forwardRef(({type:t,className:e,corners:r="rounded",...s},o)=>c.jsx(g,{...s,className:p(`aui-badge aui-content--${t} aui-corners--${r}`,e),ref:o})),Ne=l.forwardRef(({type:t,className:e,...r},s)=>c.jsx(g,{...r,className:p(`aui-content--${t} aui-banner`,e),ref:s})),_e=1,Ae=l.forwardRef(({children:t,className:e,hideArrows:r,hideDots:s,dotProps:o,leftArrowProps:a,rightArrowProps:i,autoplayInterval:d,duration:h,...u},v)=>{h=Math.max(h??_e,.1),d=d?Math.max(h,d):void 0;const j=t.length,[w,k]=l.useState({cur:0,delta:0,animating:!1}),S=l.useRef(null),{cur:E,delta:T,animating:N}=w,I=oe(E+T,j),$=l.useCallback(_=>{N||_===0||k(R=>({...R,delta:_,animating:!0}))},[N]),Y=()=>{k(({delta:_,cur:R})=>({delta:_,animating:!1,cur:oe(R+_,j)}))};if(l.useEffect(()=>(d&&(S.current=window.setInterval(()=>{$(1)},d*1e3)),()=>{const _=S.current;S.current=null,_&&clearInterval(_)}),[d,$]),j<=0)return null;const B=N?{transform:`translateX(${-(T/Math.abs(T))*100}%)`,transition:`transform ${h}s ease-in-out`}:void 0;return c.jsxs(g,{...u,className:p("aui-carousel",e),ref:v,children:[c.jsxs(g,{className:"aui-carousel-slider",style:{...B,flexDirection:T>=0?"row":"row-reverse"},onTransitionEnd:Y,children:[c.jsx(g,{className:"aui-carousel-item",children:t[E]}),c.jsx(g,{className:"aui-carousel-item","aria-hidden":!0,children:t[I]})]}),j>1&&c.jsxs(c.Fragment,{children:[!r&&c.jsxs(c.Fragment,{children:[c.jsx(q,{className:p("aui-flex-x aui-align-center aui-justify-center aui-carousel-arrow",a?.className),style:{left:8,...a?.style},corners:"pill","aria-label":"previous",onClick:()=>$(-1),children:a?.children??c.jsx(D,{icon:"left",size:12,style:{marginRight:2}})}),c.jsx(q,{className:p("aui-flex-x aui-align-center aui-justify-center aui-carousel-arrow",i?.className),style:{right:8,...i?.style},corners:"pill","aria-label":"next",onClick:()=>$(1),children:i?.children??c.jsx(D,{icon:"right",size:12,style:{marginLeft:2}})})]}),!s&&c.jsx(g,{layout:{axis:"x",align:"center",gap:"xs"},className:"aui-carousel-dots",children:t.map((_,R)=>c.jsx(q,{className:p("aui-carousel-dot",o?.className),corners:"pill",disabled:E===R||N,onClick:()=>$(R-E),style:o?.style},R))})]})]})});function oe(t,e){return(t%e+e)%e}const $e=({children:t,onClickOutside:e})=>{const r=l.useRef(null),s=l.useRef(!1),o=l.useRef(!1);l.useEffect(()=>{const i=window.setTimeout(()=>{o.current=!0},0);return()=>{clearTimeout(i),o.current=!1}},[]);const a=l.useCallback(i=>{const d=s.current;s.current=!1,!(!o.current||!r.current||d)&&(i.composedPath().includes(r.current)||e(i))},[e]);return l.useEffect(()=>(document.addEventListener("click",a),()=>document.removeEventListener("click",a)),[a]),l.cloneElement(t,{ref:r,onClick:i=>{s.current=!0,t.props?.onClick?.(i)}})},F={right:45,left:-45},se={right:-135,left:-225},C=t=>{const{size:e=36,duration:r=.25,double:s,openStyle:o,open:a,style:i,rounded:d,lineHeight:h,...u}=t,v=h||Math.max(1,Math.round(e/20)),j={width:e,height:e,display:"flex",position:"relative",justifyContent:"center",alignItems:"center",transition:`transform ${r}s ease`},w={height:v,width:e*.7,backgroundColor:"currentColor",position:"absolute",transition:`transform ${r}s ease, opacity ${r}s ease`,borderRadius:d?1e4:0},k=l.useMemo(()=>e/(s?7:4),[e,s]),{outer:S,top:E,middle:T,bottom:N}=o,I=a?S:{},$=a?E:{transform:`translateY(-${k}px)`},Y=a?N:{transform:`translateY(${k}px)`},B=a?T:{};return c.jsxs(W,{style:{...i,...I,...j},...u,"aria-label":u["aria-label"]||"hamburger","aria-expanded":a,children:[c.jsx("span",{style:{...w,...$}}),!s&&c.jsx("span",{style:{...w,...B}}),c.jsx("span",{style:{...w,...Y}})]})},ae=t=>{const{direction:e="left",...r}=t,s=l.useMemo(()=>{const o=F[e],a=`rotate(${o}deg)`,i=`rotate(${-o}deg)`;return{top:{transform:a},middle:{transform:"scale(0)"},bottom:{transform:i}}},[e]);return c.jsx(C,{...r,openStyle:s})},Re=t=>{const{direction:e="left",...r}=t,s=l.useMemo(()=>{const o=F[e],a=`rotate(${o}deg)`,i=`rotate(${-o}deg)`;return{top:{transform:a},bottom:{transform:i}}},[e]);return c.jsx(C,{...r,double:!0,openStyle:s})},Oe=t=>{const{direction:e="left",...r}=t,s=l.useMemo(()=>{const o=se[e],a=`rotate(${o}deg)`,i=`rotate(${-o}deg)`;return{top:{transform:a},bottom:{transform:i}}},[e]);return c.jsx(C,{...r,double:!0,openStyle:s})},Ce=t=>{const{direction:e="left",...r}=t,s=l.useMemo(()=>{const o=F[e],a=`rotate(${o}deg)`,i=`rotate(${-o}deg)`;return{top:{transform:a},bottom:{transform:i},outer:{transform:"rotate(180deg)"}}},[e]);return c.jsx(C,{...r,double:!0,openStyle:s})},Le=t=>{const{direction:e="left",...r}=t,s=l.useMemo(()=>{const o=F[e],a=`rotate(${o}deg)`,i=`rotate(${-o}deg)`;return{top:{transform:a},middle:{opacity:0},bottom:{transform:i}}},[e]);return c.jsx(C,{...r,openStyle:s})},Me=t=>{const{direction:e="left",...r}=t,s=l.useMemo(()=>{const o=se[e],a=`rotate(${o}deg)`,i=`rotate(${-o}deg)`;return{top:{transform:a},middle:{transform:"scale(0)"},bottom:{transform:i}}},[e]);return c.jsx(C,{...r,openStyle:s})},Pe=t=>{const{direction:e="left",...r}=t,s=l.useMemo(()=>{const o=F[e],a=`rotate(${o}deg)`,i=`rotate(${-o}deg)`;return{top:{transform:a},middle:{opacity:0},bottom:{transform:i},outer:{transform:"rotate(180deg)"}}},[e]);return c.jsx(C,{...r,openStyle:s})},De=l.forwardRef(({className:t,corners:e="rounded",...r},s)=>c.jsx("input",{...r,ref:s,className:p(`aui-input-base aui-input aui-corners--${e}`,t)})),Fe=l.forwardRef(({className:t,rows:e=3,corners:r="rounded",...s},o)=>c.jsx("textarea",{...s,ref:o,className:p(`aui-input-base aui-input aui-corners--${r}`,t),rows:e})),Ie=l.forwardRef(({startIcon:t,endIcon:e,className:r,style:s,corners:o="rounded",inputProps:a},i)=>c.jsxs(g,{layout:{axis:"x",align:"center"},className:p(`aui-input aui-icon-input aui-corners--${o}`,r),style:s,ref:i,children:[t,c.jsx("input",{...a,className:p(`aui-input-base aui-corners--${o}`,a?.className)}),e]})),Ye=()=>{const t=window.scrollY,e=document.body.style,r=document.documentElement.style,{overflow:s,position:o,top:a,width:i}=e,{scrollBehavior:d}=r;return r.scrollBehavior="auto",e.overflow="hidden",e.position="fixed",e.top=`-${t}px`,e.width="100%",()=>{e.overflow=s,e.position=o,e.top=a,e.width=i,window.scrollTo(0,t),r.scrollBehavior=d}},ie=(t=!0)=>{l.useEffect(()=>{if(t)return Ye()},[t])},Be=t=>{const{onMatch:e,onUnmatch:r,query:s}=t,[o,a]=l.useState(!1);return l.useEffect(()=>{const i=window.matchMedia(s),d=h=>{h.matches?e?.():r?.(),a(h.matches)};return i.addEventListener("change",d),a(i.matches),()=>i.removeEventListener("change",d)},[e,r,s]),o},Ue=()=>{const[t,e]=l.useState({scrollX:window.scrollX,scrollY:window.scrollY});return l.useEffect(()=>{const r=()=>{e({scrollX:window.scrollX,scrollY:window.scrollY})};return window.addEventListener("scroll",r),()=>window.removeEventListener("scroll",r)},[]),t},ze='a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]',le=(t=!0)=>{const e=l.useRef(null),r=l.useRef(null),s=l.useCallback(()=>{e.current&&(r.current=e.current.querySelectorAll(ze))},[]);return l.useEffect(()=>{if(!t||!e.current)return;s();const o=i=>{if(i.key!=="Tab")return;if(!r.current||r.current.length===0)return i.preventDefault();const{activeElement:d}=document,h=r.current[0],u=r.current[r.current.length-1];i.shiftKey&&d===h?(u.focus(),i.preventDefault()):!i.shiftKey&&d===u?(h.focus(),i.preventDefault()):e.current?.contains(d)||((i.shiftKey?u:h).focus(),i.preventDefault())},a=new MutationObserver(s);return a.observe(e.current,{childList:!0,subtree:!0}),document.addEventListener("keydown",o),()=>{document.removeEventListener("keydown",o),a.disconnect()}},[t,s]),e},We=(t={})=>{const{active:e=!0,behavior:r,delay:s}=t;l.useEffect(()=>{const o=window.location.hash;if(!e||o?.length<=1)return;const a=o.substring(1);if(s!==void 0){const i=setTimeout(()=>H(a,r),s);return()=>clearTimeout(i)}H(a,r)},[e,r,s])},qe=t=>{l.useEffect(()=>(window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)),[t])},He=l.forwardRef(({onClose:t,children:e,className:r,disableEscape:s=!1,visible:o,onMouseDown:a,...i},d)=>{const h=le(o);return l.useEffect(()=>{const u=v=>{v.key==="Escape"&&t?.()};return s||document.addEventListener("keydown",u),()=>{s||document.removeEventListener("keydown",u)}},[t,s]),c.jsx(g,{layout:{axis:"y",align:"center",justify:"center"},...i,className:p("aui-layer-backdrop",r),onMouseDown:u=>{a?.(u),t?.()},ref:d,children:l.cloneElement(e,{ref:h,onMouseDown:u=>{u.stopPropagation(),e.props?.onMouseDown?.(u)}})})}),Ve=l.forwardRef(({returnFocusOnEscape:t,disableScrollLock:e,...r},s)=>(ie(!e),l.useEffect(()=>()=>{const o=document.activeElement;t||o?.blur?.()},[t]),c.jsx(He,{...r,visible:!0,ref:s}))),V=l.forwardRef(({LinkElement:t,to:e,className:r,external:s,...o},a)=>{const i={...s?{target:"_blank",rel:"noreferrer noopener"}:{},...o,className:p("aui-action",r)};return t?c.jsx(t,{...i,to:e,ref:a}):c.jsx("a",{...i,href:e,ref:a})}),Xe=l.forwardRef(({className:t,variant:e,corners:r,size:s,...o},a)=>c.jsx(V,{...o,className:p(re({variant:e,corners:r,size:s}),t),ref:a})),Je=l.forwardRef(({className:t,...e},r)=>c.jsx(V,{...e,className:p("aui-link",t),ref:r})),Ge=({className:t,options:e,getOptionLabel:r,corners:s="rounded",style:o,disabled:a,...i},d)=>c.jsxs(g,{className:p("aui-select-container",`aui-corners--${s}`,a?"aui-select-disabled":void 0,t),style:o,children:[c.jsx("select",{...i,ref:d,className:`aui-select aui-corners--${s}`,disabled:a,children:e.map((h,u)=>c.jsx("option",{value:h,children:r?.(h)||h},u))}),c.jsx(D,{icon:"down",className:"aui-select-icon","aria-hidden":!0})]}),Qe=l.forwardRef(Ge),Ze=({className:t,...e})=>c.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",className:p("aui-spinner",t),...e,children:c.jsx("path",{fill:"currentColor",d:"M256,0C114.62,0,0,114.62,0,256S114.62,512,256,512c70.64,0,134.59-28.61,180.91-74.88l-31.11-31.11c-38.35,38.3-91.31,61.99-149.8,61.99-117.08,0-212-94.92-212-212S138.92,44,256,44V0Z"})});f.Accordion=je,f.Alert=Se,f.Animated=ne,f.Badge=ke,f.Banner=Ne,f.Box=g,f.Button=q,f.ButtonLink=Xe,f.Carousel=Ae,f.ClickOutside=$e,f.DoubleCross=Re,f.DoubleFlip=Oe,f.DoubleSpin=Ce,f.Hamburger=ae,f.Icon=D,f.IconInput=Ie,f.Input=De,f.Layer=Ve,f.Link=Je,f.Select=Qe,f.Spinner=Ze,f.TextArea=Fe,f.TripleFade=Le,f.TripleFlip=Me,f.TriplePrestige=ae,f.TripleSpin=Pe,f.UnstyledButton=W,f.UnstyledLink=V,f.assertDefined=ye,f.classNames=p,f.scrollToId=H,f.useFocusTrap=le,f.useMediaQuery=Be,f.useScroll=Ue,f.useScrollLock=ie,f.useScrollToHash=We,f.useWindowResize=qe,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});

package/functions/classNames.js

@@ -9,5 +9,8 @@ export default function classNames() {
     for (var _i = 0; _i < arguments.length; _i++) {
         classNames[_i] = arguments[_i];
     }
-    return classNames.filter(Boolean).join(" ");
+    return classNames
+        .map(function (className) { return className === null || className === void 0 ? void 0 : className.trim(); })
+        .filter(Boolean)
+        .join(" ");
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamjanicki/ui",
-  "version": "1.5.9",
+  "version": "1.6.0",
   "description": "Basic UI components and hooks for React in TypeScript",
   "type": "module",
   "main": "./index.js",
@@ -12,10 +12,11 @@
     "url": "git+https://github.com/adamjanicki2/ui.git"
   },
   "scripts": {
-    "clean": "./clean.sh",
+    "clean": "python clean.py",
     "lint": "eslint src test --max-warnings=0",
     "test": "jest",
-    "build": "npm run clean && npm run lint && npm run test && tsc; cp src/style.css ./style.css",
+    "scss": "sass --no-source-map --style=compressed src/style.scss style.css",
+    "build": "npm run clean && npm run lint && npm test && tsc && npm run scss",
     "prepare": "npm run build",
     "dryrun": "npm publish --dry-run"
   },
@@ -32,6 +33,7 @@
     "@types/react-dom": "^19.1.7",
     "jest": "^30.0.5",
     "jest-environment-jsdom": "^30.0.5",
+    "sass": "^1.90.0",
     "ts-jest": "^29.4.1",
     "typescript": "^5.9.2"
   }

package/style.css

@@ -1,564 +1 @@
-/* General styles */
-:root {
-  /* Sizing */
-  --aui-xxs: 1px;
-  --aui-xs: 2px;
-  --aui-s: 4px;
-  --aui-m: 8px;
-  --aui-l: 16px;
-  --aui-xl: 32px;
-  --aui-xxl: 64px;
-  /* General colors */
-  --aui-moon-gray: #ccc;
-  --aui-dark-gray: #555;
-  --aui-darkest-gray: #333;
-  --aui-obsidian: #121212;
-  --aui-focus-ring-color: #b2dbfa;
-  --aui-default-text-color: black;
-  --aui-default-background: white;
-  --aui-default-border: var(--aui-moon-gray);
-  /* General values */
-  --aui-disabled-opacity: 0.5;
-  --aui-default-transition: 0.25s ease-in-out;
-  --aui-default-opacity-dim: 0.75;
-  --aui-container-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
-  /* Corners */
-  --aui-sharp-radius: 0;
-  --aui-rounded-radius: 8px;
-  --aui-pill-radius: 9999px;
-  /* Buttons */
-  --aui-button-primary-background: black;
-  --aui-button-primary-color: white;
-  --aui-button-secondary-border-hover: var(--aui-darkest-gray);
-  --aui-subtle-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
-  --aui-button-primary-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.36);
-  /* Content types */
-  --aui-success-background: #dff2e1;
-  --aui-success-color: #1b5e20;
-  --aui-success-border: #b2dfb1;
-
-  --aui-warning-background: #fceeb6;
-  --aui-warning-color: #b23904;
-  --aui-warning-border: #e6d5a2;
-
-  --aui-error-background: #fdecea;
-  --aui-error-color: #b71c1c;
-  --aui-error-border: #f5b7b7;
-
-  --aui-info-background: #e3f2fd;
-  --aui-info-color: #0d47a1;
-  --aui-info-border: #90caf9;
-
-  --aui-static-background: #e8e8e8;
-  /* Layer */
-  --aui-layer-backdrop-background: rgba(200, 200, 200, 0.7);
-  /* Link */
-  --aui-link-color: #0070ff;
-  /* Select */
-  --aui-select-icon: var(--aui-dark-gray);
-}
-
-[data-theme="dark"] {
-  /* General colors */
-  --aui-focus-ring-color: #6699cc;
-  --aui-default-text-color: white;
-  --aui-default-background: var(--aui-obsidian);
-  --aui-default-border: var(--aui-dark-gray);
-  --aui-container-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.36);
-  /* Buttons */
-  --aui-button-primary-background: white;
-  --aui-button-primary-color: var(--aui-obsidian);
-  --aui-button-secondary-border-hover: var(--aui-moon-gray);
-  --aui-subtle-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
-  --aui-button-primary-box-shadow: 0 1px 2px rgba(64, 64, 64, 0.8);
-  /* Content types */
-  --aui-success-background: #2a5733;
-  --aui-success-color: #d9efd8;
-  --aui-success-border: #439e4a;
-
-  --aui-warning-background: #736230;
-  --aui-warning-color: #fff6d1;
-  --aui-warning-border: #927a3b;
-
-  --aui-error-background: #663232;
-  --aui-error-color: #f9dadc;
-  --aui-error-border: #8d2a2a;
-
-  --aui-info-background: #335f72;
-  --aui-info-color: #d4f1f5;
-  --aui-info-border: #1d8ea4;
-
-  --aui-static-background: var(--aui-darkest-gray);
-  /* Layer */
-  --aui-layer-backdrop-background: rgba(55, 55, 55, 0.7);
-  /* Link */
-  --aui-link-color: #33bfff;
-  /* Select */
-  --aui-select-icon: var(--aui-moon-gray);
-}
-
-/* General */
-.aui-corners--rounded {
-  border-radius: var(--aui-rounded-radius);
-}
-
-.aui-corners--pill {
-  border-radius: var(--aui-pill-radius);
-}
-
-.aui-corners--sharp {
-  border-radius: var(--aui-sharp-radius);
-}
-
-.aui-content--success {
-  background-color: var(--aui-success-background);
-  color: var(--aui-success-color);
-  border-color: var(--aui-success-border);
-}
-
-.aui-content--warning {
-  background-color: var(--aui-warning-background);
-  color: var(--aui-warning-color);
-  border-color: var(--aui-warning-border);
-}
-
-.aui-content--error {
-  background-color: var(--aui-error-background);
-  color: var(--aui-error-color);
-  border-color: var(--aui-error-border);
-}
-
-.aui-content--info {
-  background-color: var(--aui-info-background);
-  color: var(--aui-info-color);
-  border-color: var(--aui-info-border);
-}
-
-.aui-content--static {
-  background-color: var(--aui-static-background);
-  color: var(--aui-default-text-color);
-  border-color: var(--aui-default-border);
-}
-
-/* Accordion */
-.aui-accordion {
-  background-color: var(--aui-default-background);
-  box-shadow: 0 0 0 1px var(--aui-default-border) inset,
-    var(--aui-container-box-shadow);
-}
-.aui-accordion-label {
-  font-weight: 600;
-}
-
-.aui-accordion-hr {
-  border: none;
-  height: var(--aui-xxs);
-  background-color: var(--aui-default-border);
-  width: 100%;
-  margin: 0;
-}
-
-.aui-accordion-arrow {
-  color: var(--aui-select-icon);
-}
-
-/* Alert */
-.aui-alert {
-  padding: var(--aui-l);
-  border-style: solid;
-  border-width: 1px;
-  font-weight: 400;
-}
-
-/* Badge */
-.aui-badge {
-  padding: 2px 6px;
-  border-style: solid;
-  border-width: 1px;
-  font-weight: 500;
-  font-size: 14px;
-  width: fit-content;
-}
-
-/* Banner */
-.aui-banner {
-  padding: 24px var(--aui-xl);
-  border: none;
-  font-weight: 400;
-  width: 100%;
-}
-
-/* Action (link/button) */
-.aui-action {
-  color: inherit;
-  text-decoration: none;
-  cursor: pointer;
-  outline-color: var(--aui-link-color);
-}
-
-.aui-action:focus:not(:focus-visible) {
-  outline: none;
-}
-
-/* Button */
-.aui-button {
-  background: none;
-  border: none;
-  padding: 0;
-}
-
-.aui-button-size--regular {
-  padding: var(--aui-m);
-  font-weight: 600;
-}
-
-.aui-button-size--small {
-  padding: var(--aui-s);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.aui-button:disabled {
-  cursor: default !important;
-  opacity: var(--aui-disabled-opacity);
-}
-
-.aui-button--primary {
-  background-color: var(--aui-button-primary-background);
-  color: var(--aui-button-primary-color);
-  box-shadow: var(--aui-button-primary-box-shadow);
-  transition: opacity var(--aui-default-transition);
-}
-
-.aui-button--secondary {
-  color: var(--aui-default-text-color);
-  background-color: var(--aui-default-background);
-  box-shadow: 0 0 0 1px var(--aui-default-border) inset,
-    var(--aui-subtle-box-shadow);
-  transition: box-shadow var(--aui-default-transition);
-}
-
-.aui-link {
-  font-weight: 600;
-  color: var(--aui-link-color);
-  transition: opacity var(--aui-default-transition);
-}
-
-@media (hover: hover) {
-  .aui-button--primary:not([disabled]):hover,
-  .aui-link:hover {
-    opacity: var(--aui-default-opacity-dim);
-  }
-
-  .aui-button--secondary:not([disabled]):hover {
-    box-shadow: 0 0 0 1px var(--aui-button-secondary-border-hover) inset,
-      var(--aui-subtle-box-shadow);
-  }
-}
-
-/* Input */
-.aui-input-base {
-  outline: none;
-  border: none;
-  background-color: inherit;
-  color: inherit;
-  padding: var(--aui-m);
-  font-weight: 400;
-}
-
-.aui-input-base::selection {
-  background-color: var(--aui-focus-ring-color);
-}
-
-.aui-icon-input {
-  overflow: scroll;
-}
-
-.aui-icon-input input {
-  background-color: transparent;
-  width: 100%;
-}
-
-.aui-input {
-  transition: box-shadow var(--aui-default-transition);
-  box-shadow: 0 0 0 1px var(--aui-default-border) inset,
-    var(--aui-subtle-box-shadow);
-  background-color: var(--aui-default-background);
-}
-
-.aui-input:disabled {
-  opacity: var(--aui-disabled-opacity);
-  cursor: default;
-}
-
-.aui-input:not([disabled]):focus-within,
-.aui-select-container:not([disabled]):focus-within {
-  box-shadow: 0 0 0 1px var(--aui-default-border) inset,
-    var(--aui-subtle-box-shadow), 0 0 0 3px var(--aui-focus-ring-color);
-}
-
-/* Select */
-.aui-select-container {
-  position: relative;
-  padding: 0;
-  width: fit-content;
-  transition: box-shadow var(--aui-default-transition);
-  box-shadow: 0 0 0 1px var(--aui-default-border) inset,
-    var(--aui-subtle-box-shadow);
-  background-color: var(--aui-default-background);
-}
-
-.aui-select {
-  width: 100%;
-  color: inherit;
-  border: none;
-  outline: none;
-  box-shadow: none;
-  cursor: pointer;
-  background-color: transparent;
-  padding: var(--aui-m) 28px var(--aui-m) var(--aui-m);
-  font-weight: 600;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-}
-
-.aui-select-disabled * {
-  opacity: var(--aui-disabled-opacity);
-  cursor: default;
-}
-
-.aui-select-icon {
-  --size: 10px;
-  color: var(--aui-select-icon);
-  width: var(--size);
-  height: var(--size);
-  position: absolute;
-  top: calc(50% + 1px);
-  transform: translateY(-50%);
-  right: var(--size);
-  pointer-events: none;
-}
-
-/* Layer */
-.aui-layer-backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: 10000;
-  background: var(--aui-layer-backdrop-background);
-}
-
-/* Icons */
-.aui-icon * {
-  fill: currentColor;
-}
-
-/* Spinner */
-.aui-spinner {
-  animation: aui-spinner-animation 1s linear infinite;
-  transform-origin: center;
-  height: 24px;
-}
-
-@keyframes aui-spinner-animation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-/* Carousel */
-.aui-carousel {
-  max-width: 100%;
-  position: relative;
-  overflow: hidden;
-  min-height: var(--aui-xxl);
-  min-width: var(--aui-xxl);
-  width: fit-content;
-}
-
-.aui-carousel-slider {
-  width: 100%;
-  height: 100%;
-  display: flex;
-}
-
-.aui-carousel-item {
-  flex: 0 0 100%;
-  width: 100%;
-  height: 100%;
-}
-
-.aui-carousel-arrow {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  font-weight: 800;
-}
-
-.aui-carousel-dots {
-  position: absolute;
-  bottom: var(--aui-m);
-  transform: translateX(-50%);
-  left: 50%;
-}
-
-.aui-carousel-dot {
-  width: var(--aui-l);
-  height: var(--aui-m);
-  padding: 0;
-}
-
-/* Layout */
-.aui-flex-x,
-.aui-flex-y {
-  display: flex;
-  max-width: 100%;
-}
-
-.aui-flex-x {
-  flex-direction: row;
-}
-
-.aui-flex-y {
-  flex-direction: column;
-}
-
-.aui-flex-wrap {
-  flex-wrap: wrap;
-}
-
-.aui-align-start {
-  align-items: flex-start;
-}
-
-.aui-align-center {
-  align-items: center;
-}
-
-.aui-align-end {
-  align-items: flex-end;
-}
-
-.aui-justify-start {
-  justify-content: flex-start;
-}
-
-.aui-justify-center {
-  justify-content: center;
-}
-
-.aui-justify-between {
-  justify-content: space-between;
-}
-
-.aui-justify-end {
-  justify-content: flex-end;
-}
-
-/* Gap */
-.aui-gap-none {
-  gap: 0;
-}
-
-.aui-gap-xxs {
-  gap: var(--aui-xxs);
-}
-
-.aui-gap-xs {
-  gap: var(--aui-xs);
-}
-
-.aui-gap-s {
-  gap: var(--aui-s);
-}
-
-.aui-gap-m {
-  gap: var(--aui-m);
-}
-
-.aui-gap-l {
-  gap: var(--aui-l);
-}
-
-.aui-gap-xl {
-  gap: var(--aui-xl);
-}
-
-.aui-gap-xxl {
-  gap: var(--aui-xxl);
-}
-
-/* Padding */
-.aui-pa-none {
-  padding: 0;
-}
-
-.aui-pa-xxs {
-  padding: var(--aui-xxs);
-}
-
-.aui-pa-xs {
-  padding: var(--aui-xs);
-}
-
-.aui-pa-s {
-  padding: var(--aui-s);
-}
-
-.aui-pa-m {
-  padding: var(--aui-m);
-}
-
-.aui-pa-l {
-  padding: var(--aui-l);
-}
-
-.aui-pa-xl {
-  padding: var(--aui-xl);
-}
-
-.aui-pa-xxl {
-  padding: var(--aui-xxl);
-}
-
-/* Margin */
-.aui-ma-none {
-  margin: 0;
-}
-
-.aui-ma-xxs {
-  margin: var(--aui-xxs);
-}
-
-.aui-ma-xs {
-  margin: var(--aui-xs);
-}
-
-.aui-ma-s {
-  margin: var(--aui-s);
-}
-
-.aui-ma-m {
-  margin: var(--aui-m);
-}
-
-.aui-ma-l {
-  margin: var(--aui-l);
-}
-
-.aui-ma-xl {
-  margin: var(--aui-xl);
-}
-
-.aui-ma-xxl {
-  margin: var(--aui-xxl);
-}
+:root{--aui-xxs: 2px;--aui-xs: 4px;--aui-s: 8px;--aui-m: 16px;--aui-l: 24px;--aui-xl: 32px;--aui-xxl: 64px;--aui-moon-gray: #ccc;--aui-dark-gray: #555;--aui-darkest-gray: #333;--aui-obsidian: #121212;--aui-focus-ring-color: #b2dbfa;--aui-default-text-color: black;--aui-default-background: white;--aui-default-border: var(--aui-moon-gray);--aui-disabled-opacity: 0.5;--aui-default-transition: 0.25s ease-in-out;--aui-default-opacity-dim: 0.75;--aui-container-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);--aui-sharp-radius: 0;--aui-rounded-radius: 8px;--aui-pill-radius: 9999px;--aui-button-primary-background: black;--aui-button-primary-color: white;--aui-button-secondary-border-hover: var(--aui-darkest-gray);--aui-subtle-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);--aui-button-primary-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.36);--aui-success-background: #dff2e1;--aui-success-color: #1b5e20;--aui-success-border: #b2dfb1;--aui-warning-background: #fceeb6;--aui-warning-color: #b23904;--aui-warning-border: #e6d5a2;--aui-error-background: #fdecea;--aui-error-color: #b71c1c;--aui-error-border: #f5b7b7;--aui-info-background: #e3f2fd;--aui-info-color: #0d47a1;--aui-info-border: #90caf9;--aui-static-background: #e8e8e8;--aui-layer-backdrop-background: rgba(200, 200, 200, 0.7);--aui-link-color: #0070ff;--aui-select-icon: var(--aui-dark-gray)}[data-theme=dark]{--aui-focus-ring-color: #6699cc;--aui-default-text-color: white;--aui-default-background: var(--aui-obsidian);--aui-default-border: var(--aui-dark-gray);--aui-container-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.36);--aui-button-primary-background: white;--aui-button-primary-color: var(--aui-obsidian);--aui-button-secondary-border-hover: var(--aui-moon-gray);--aui-subtle-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);--aui-button-primary-box-shadow: 0 1px 2px rgba(64, 64, 64, 0.8);--aui-success-background: #2a5733;--aui-success-color: #d9efd8;--aui-success-border: #439e4a;--aui-warning-background: #736230;--aui-warning-color: #fff6d1;--aui-warning-border: #927a3b;--aui-error-background: #663232;--aui-error-color: #f9dadc;--aui-error-border: #8d2a2a;--aui-info-background: #335f72;--aui-info-color: #d4f1f5;--aui-info-border: #1d8ea4;--aui-static-background: var(--aui-darkest-gray);--aui-layer-backdrop-background: rgba(55, 55, 55, 0.7);--aui-link-color: #33bfff;--aui-select-icon: var(--aui-moon-gray)}.aui-flex-x,.aui-flex-y,.aui-flex--x,.aui-flex--y{display:flex}.aui-flex-x{flex-direction:row}.aui-flex-y{flex-direction:column}.aui-flex--x{flex-direction:row-reverse}.aui-flex--y{flex-direction:column-reverse}.aui-flex-wrap{flex-wrap:wrap}.aui-align-start{align-items:flex-start}.aui-align-center{align-items:center}.aui-align-end{align-items:flex-end}.aui-justify-start{justify-content:flex-start}.aui-justify-center{justify-content:center}.aui-justify-between{justify-content:space-between}.aui-justify-around{justify-content:space-around}.aui-justify-end{justify-content:flex-end}.aui-icon-xxs{width:8px;height:8px}.aui-icon-xs{width:12px;height:12px}.aui-icon-s{width:16px;height:16px}.aui-icon-m{width:24px;height:24px}.aui-icon-l{width:32px;height:32px}.aui-icon-xl{width:48px;height:48px}.aui-icon-xxl{width:64px;height:64px}.aui-gap-none{gap:0}.aui-gap-xxs{gap:var(--aui-xxs)}.aui-gap-xs{gap:var(--aui-xs)}.aui-gap-s{gap:var(--aui-s)}.aui-gap-m{gap:var(--aui-m)}.aui-gap-l{gap:var(--aui-l)}.aui-gap-xl{gap:var(--aui-xl)}.aui-gap-xxl{gap:var(--aui-xxl)}.aui-pa-none{padding:0}.aui-pa-xxs{padding:var(--aui-xxs)}.aui-pa-xs{padding:var(--aui-xs)}.aui-pa-s{padding:var(--aui-s)}.aui-pa-m{padding:var(--aui-m)}.aui-pa-l{padding:var(--aui-l)}.aui-pa-xl{padding:var(--aui-xl)}.aui-pa-xxl{padding:var(--aui-xxl)}.aui-pt-none{padding-top:0}.aui-pt-xxs{padding-top:var(--aui-xxs)}.aui-pt-xs{padding-top:var(--aui-xs)}.aui-pt-s{padding-top:var(--aui-s)}.aui-pt-m{padding-top:var(--aui-m)}.aui-pt-l{padding-top:var(--aui-l)}.aui-pt-xl{padding-top:var(--aui-xl)}.aui-pt-xxl{padding-top:var(--aui-xxl)}.aui-pb-none{padding-bottom:0}.aui-pb-xxs{padding-bottom:var(--aui-xxs)}.aui-pb-xs{padding-bottom:var(--aui-xs)}.aui-pb-s{padding-bottom:var(--aui-s)}.aui-pb-m{padding-bottom:var(--aui-m)}.aui-pb-l{padding-bottom:var(--aui-l)}.aui-pb-xl{padding-bottom:var(--aui-xl)}.aui-pb-xxl{padding-bottom:var(--aui-xxl)}.aui-pl-none{padding-left:0}.aui-pl-xxs{padding-left:var(--aui-xxs)}.aui-pl-xs{padding-left:var(--aui-xs)}.aui-pl-s{padding-left:var(--aui-s)}.aui-pl-m{padding-left:var(--aui-m)}.aui-pl-l{padding-left:var(--aui-l)}.aui-pl-xl{padding-left:var(--aui-xl)}.aui-pl-xxl{padding-left:var(--aui-xxl)}.aui-pr-none{padding-right:0}.aui-pr-xxs{padding-right:var(--aui-xxs)}.aui-pr-xs{padding-right:var(--aui-xs)}.aui-pr-s{padding-right:var(--aui-s)}.aui-pr-m{padding-right:var(--aui-m)}.aui-pr-l{padding-right:var(--aui-l)}.aui-pr-xl{padding-right:var(--aui-xl)}.aui-pr-xxl{padding-right:var(--aui-xxl)}.aui-ma-auto{margin:auto}.aui-mt-auto{margin-top:auto}.aui-mb-auto{margin-bottom:auto}.aui-ml-auto{margin-left:auto}.aui-mr-auto{margin-right:auto}.aui-ma-none{margin:0}.aui-ma-xxs{margin:var(--aui-xxs)}.aui-ma-xs{margin:var(--aui-xs)}.aui-ma-s{margin:var(--aui-s)}.aui-ma-m{margin:var(--aui-m)}.aui-ma-l{margin:var(--aui-l)}.aui-ma-xl{margin:var(--aui-xl)}.aui-ma-xxl{margin:var(--aui-xxl)}.aui-mt-none{margin-top:0}.aui-mt-xxs{margin-top:var(--aui-xxs)}.aui-mt-xs{margin-top:var(--aui-xs)}.aui-mt-s{margin-top:var(--aui-s)}.aui-mt-m{margin-top:var(--aui-m)}.aui-mt-l{margin-top:var(--aui-l)}.aui-mt-xl{margin-top:var(--aui-xl)}.aui-mt-xxl{margin-top:var(--aui-xxl)}.aui-mb-none{margin-bottom:0}.aui-mb-xxs{margin-bottom:var(--aui-xxs)}.aui-mb-xs{margin-bottom:var(--aui-xs)}.aui-mb-s{margin-bottom:var(--aui-s)}.aui-mb-m{margin-bottom:var(--aui-m)}.aui-mb-l{margin-bottom:var(--aui-l)}.aui-mb-xl{margin-bottom:var(--aui-xl)}.aui-mb-xxl{margin-bottom:var(--aui-xxl)}.aui-ml-none{margin-left:0}.aui-ml-xxs{margin-left:var(--aui-xxs)}.aui-ml-xs{margin-left:var(--aui-xs)}.aui-ml-s{margin-left:var(--aui-s)}.aui-ml-m{margin-left:var(--aui-m)}.aui-ml-l{margin-left:var(--aui-l)}.aui-ml-xl{margin-left:var(--aui-xl)}.aui-ml-xxl{margin-left:var(--aui-xxl)}.aui-mr-none{margin-right:0}.aui-mr-xxs{margin-right:var(--aui-xxs)}.aui-mr-xs{margin-right:var(--aui-xs)}.aui-mr-s{margin-right:var(--aui-s)}.aui-mr-m{margin-right:var(--aui-m)}.aui-mr-l{margin-right:var(--aui-l)}.aui-mr-xl{margin-right:var(--aui-xl)}.aui-mr-xxl{margin-right:var(--aui-xxl)}.aui-w-full{width:100%}.aui-w-fit{width:fit-content}.aui-w-min{width:min-content}.aui-w-max{width:max-content}.aui-mw-full{max-width:100%}.aui-mw-fit{max-width:fit-content}.aui-mw-min{max-width:min-content}.aui-mw-max{max-width:max-content}.aui-h-full{height:100%}.aui-h-fit{height:fit-content}.aui-h-min{height:min-content}.aui-h-max{height:max-content}.aui-mh-full{max-height:100%}.aui-mh-fit{max-height:fit-content}.aui-mh-min{max-height:min-content}.aui-mh-max{max-height:max-content}.aui-corners--rounded{border-radius:var(--aui-rounded-radius)}.aui-corners--pill{border-radius:var(--aui-pill-radius)}.aui-corners--sharp{border-radius:var(--aui-sharp-radius)}.aui-content--success{background-color:var(--aui-success-background);color:var(--aui-success-color);border-color:var(--aui-success-border)}.aui-content--warning{background-color:var(--aui-warning-background);color:var(--aui-warning-color);border-color:var(--aui-warning-border)}.aui-content--error{background-color:var(--aui-error-background);color:var(--aui-error-color);border-color:var(--aui-error-border)}.aui-content--info{background-color:var(--aui-info-background);color:var(--aui-info-color);border-color:var(--aui-info-border)}.aui-content--static{background-color:var(--aui-static-background);color:var(--aui-default-text-color);border-color:var(--aui-default-border)}.aui-accordion{background-color:var(--aui-default-background);box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-container-box-shadow)}.aui-accordion-label{font-weight:600}.aui-accordion-hr{border:none;height:1px;background-color:var(--aui-default-border);width:100%;margin:0}.aui-accordion-arrow{color:var(--aui-select-icon)}.aui-alert{padding:var(--aui-m);border-style:solid;border-width:1px;font-weight:400}.aui-badge{padding:var(--aui-xxs) var(--aui-xs);border-style:solid;border-width:1px;font-weight:500;font-size:14px;width:fit-content}.aui-banner{padding:var(--aui-l) var(--aui-xl);border:none;font-weight:400;width:100%}.aui-action{color:inherit;text-decoration:none;cursor:pointer;outline-color:var(--aui-link-color)}.aui-action:focus:not(:focus-visible){outline:none}.aui-button{background:none;border:none;padding:0}.aui-button-size--regular{padding:var(--aui-s);font-weight:600}.aui-button-size--small{padding:var(--aui-xs);font-size:12px;font-weight:600}.aui-button:disabled{cursor:default !important;opacity:var(--aui-disabled-opacity)}.aui-button--primary{background-color:var(--aui-button-primary-background);color:var(--aui-button-primary-color);box-shadow:var(--aui-button-primary-box-shadow);transition:opacity var(--aui-default-transition)}.aui-button--secondary{color:var(--aui-default-text-color);background-color:var(--aui-default-background);box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-subtle-box-shadow);transition:box-shadow var(--aui-default-transition)}.aui-link{font-weight:600;color:var(--aui-link-color);transition:opacity var(--aui-default-transition)}@media(hover: hover){.aui-button--primary:not([disabled]):hover,.aui-link:hover{opacity:var(--aui-default-opacity-dim)}.aui-button--secondary:not([disabled]):hover{box-shadow:0 0 0 1px var(--aui-button-secondary-border-hover) inset,var(--aui-subtle-box-shadow)}}.aui-input-base{outline:none;border:none;background-color:inherit;color:inherit;padding:var(--aui-s);font-weight:400}.aui-input-base::selection{background-color:var(--aui-focus-ring-color)}.aui-icon-input{overflow:scroll}.aui-icon-input input{background-color:rgba(0,0,0,0);width:100%}.aui-input{transition:box-shadow var(--aui-default-transition);box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-subtle-box-shadow);background-color:var(--aui-default-background)}.aui-input:disabled{opacity:var(--aui-disabled-opacity);cursor:default}.aui-input:not([disabled]):focus-within,.aui-select-container:not([disabled]):focus-within{box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-subtle-box-shadow),0 0 0 3px var(--aui-focus-ring-color)}.aui-select-container{position:relative;padding:0;width:fit-content;transition:box-shadow var(--aui-default-transition);box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-subtle-box-shadow);background-color:var(--aui-default-background)}.aui-select{width:100%;color:inherit;border:none;outline:none;box-shadow:none;cursor:pointer;background-color:rgba(0,0,0,0);padding:var(--aui-s) 28px var(--aui-s) var(--aui-s);font-weight:600;appearance:none;-webkit-appearance:none;-moz-appearance:none}.aui-select-disabled *{opacity:var(--aui-disabled-opacity);cursor:default}.aui-select-icon{--size: 10px;color:var(--aui-select-icon);width:var(--size);height:var(--size);position:absolute;top:calc(50% + 1px);transform:translateY(-50%);right:var(--size);pointer-events:none}.aui-layer-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10000;background:var(--aui-layer-backdrop-background)}.aui-icon *{color:currentColor;fill:currentColor}.aui-spinner{animation:aui-spinner-animation 1s linear infinite;transform-origin:center;height:var(--aui-l)}@keyframes aui-spinner-animation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.aui-carousel{max-width:100%;position:relative;overflow:hidden;min-height:var(--aui-xxl);min-width:var(--aui-xxl);width:fit-content}.aui-carousel-item{flex:0 0 100%;width:100%;height:100%}.aui-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:var(--aui-l);height:var(--aui-l);padding:0}.aui-carousel-dots{position:absolute;bottom:var(--aui-s);transform:translateX(-50%);left:50%}.aui-carousel-dot{width:var(--aui-m);height:var(--aui-s);padding:0}

package/utils/transformLayout.d.ts

@@ -0,0 +1,2 @@
+import { Layout } from "./types";
+export default function transformLayout(layout: Layout | undefined): string | null;