@acusti/uikit-docs 0.4.4 → 0.4.6

package/dist/assets/DatePicker.stories-X2JO2cn6.js

@@ -0,0 +1,585 @@
+import{E as e,r as t}from"./iframe-BsC6HWDY.js";import{t as n}from"./jsx-runtime-CZwoFFIL.js";import{t as r}from"./compiler-runtime-BOsKKfMw.js";import{t as i}from"./clsx-Bdud1Ih_.js";import{n as a}from"./dist-BreUZhw6.js";var o=r(),s=e(t(),1),c=n(),l=`uktmonthcalendar`,u=`
+.${l} {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    box-sizing: border-box;
+    max-width: 325px;
+}
+
+.${l}-month-title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    box-sizing: border-box;
+    padding-bottom: 25px;
+}
+
+h3.${l}-month-title-text {
+    font-size: 18px;
+    line-height: 23px;
+    font-weight: 600;
+    color: #000;
+    margin: 0px;
+    text-align: center;
+}
+
+.${l}-month-week {
+    flex: 0 0 auto;
+    display: grid;
+    grid-column-gap: 0px;
+    grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
+    grid-auto-flow: dense;
+    box-sizing: border-box;
+    padding-bottom: 12px;
+}
+
+.${l}-month-week .week-day-item {
+    flex: 1 1 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.${l}-month-week span.week-day-item-text {
+    text-align: center;
+    font-size: 13px;
+    line-height: 21px;
+    margin: 0px;
+    color: #9a9a9a;
+}
+
+.${l}-month-days {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+}
+
+.${l}-month-row {
+    flex: 1 1 auto;
+    display: grid;
+    grid-column-gap: 0px;
+    grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
+    grid-auto-flow: dense;
+    margin-bottom: 1px;
+}
+
+.${l}-month-day-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    height: 46px;
+    width: 46px;
+    cursor: pointer;
+    border: none;
+    background-color: transparent;
+}
+
+.${l}-month-day-item:disabled {
+    cursor: auto;
+}
+
+.${l}-month-day-item.is-today span.month-day-item-text {
+    color: #eb4e3d;
+}
+
+.${l}.is-range .${l}-month-day-item.is-selected {
+    background-color: #f6f6f6;
+}
+
+.${l}.is-range .${l}-month-day-item.start-date {
+    background-color: #f6f6f6;
+    border-top-left-radius: 50%;
+    border-bottom-left-radius: 50%;
+}
+
+.${l}-month-day-item.start-date:after {
+    background-color: #000;
+    opacity: 1;
+    visibility: visible;
+}
+
+.${l}-month-day-item.start-date span.month-day-item-text {
+    color: #fff;
+}
+
+.${l}.is-range .${l}-month-day-item.end-date {
+    background-color: #f6f6f6;
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+}
+
+.${l}-month-day-item.end-date:after {
+    background-color: #000;
+    opacity: 1;
+    visibility: visible;
+}
+
+.${l}-month-day-item.end-date span.month-day-item-text {
+    color: #fff;
+}
+
+.${l}-month-day-item:hover:after,
+.${l}-month-day-item.is-today:hover:after {
+    border-color: #000;
+    opacity: 1;
+    visibility: visible;
+}
+
+.${l}-month-day-item:after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    border-radius: 50%;
+    border: 1px solid #000;
+    width: 43px;
+    height: 43px;
+    transition: opacity 0.25s ease-in-out;
+    opacity: 0;
+    visibility: hidden;
+}
+
+.${l}-month-day-item.is-empty:after {
+    content: none;
+}
+
+.${l}-month-day-item span.month-day-item-text {
+    text-align: center;
+    font-size: 13px;
+    line-height: 21px;
+    margin: 0px;
+    color: #000;
+    position: relative;
+    z-index: 1;
+}
+`,d=1970,f=[`January`,`February`,`March`,`April`,`May`,`June`,`July`,`August`,`September`,`October`,`November`,`December`],p=(e,t)=>(t?e.getUTCFullYear():e.getFullYear())-d,m=(e,t)=>p(e,t)*12+(t?e.getUTCMonth():e.getMonth()),h=e=>Math.floor(e/12)+d,g=e=>{let t=e%12;return Number.isNaN(t)?``:(t<0&&(t=12+t),f[t])},_=e=>{let t=g(e);return t===`September`?`Sept`:t.substring(0,3)},v=(e,t,n)=>{let r=e<0?(12-Math.abs(e%12))%12:e%12,i=h(e);return n?new Date(Date.UTC(i,r,t)):new Date(i,r,t)},y=(e,t)=>v(e+1,0,t),b=Array(7).fill(null);function x(e){let t=(0,o.c)(47),{className:n,dateEnd:r,dateEndPreview:d,dateStart:f,isRange:p,month:_,onChange:x,onChangeEndPreview:S,title:C}=e,w,T,E,D,O,k,A;if(t[0]!==_||t[1]!==n||t[2]!==r||t[3]!==d||t[4]!==f||t[5]!==p||t[6]!==x||t[7]!==S||t[8]!==C){let e=new Date,o=Number.isFinite(_)?Math.max(-(2**53-1),Math.min(2**53-1,_)):m(e),j=h(o);C??=`${g(o)} ${j}`;let M=v(o,1),N=y(o),P=N.getDate(),F=M.getDay(),I=7-N.getDay()%7,L=P+F+I,[R,z,B]=[f,r,d].reduce((e,t,n)=>{if(t!=null&&!(t instanceof Date)&&(t=new Date(t)),t==null||Number.isNaN(t.getTime()))return e;let r=m(t);if(r<o?e[n]=-1:r>o?e[n]=P+1:e[n]=t.getDate(),n===1){let t=e[n-1],r=e[n];t!=null&&r!=null&&t>r&&(e[n-1]=r,e[n]=t)}return e},[null,null,null]),V;t[17]===x?V=t[18]:(V=e=>{let{date:t}=e.currentTarget.dataset;t&&x&&x(t)},t[17]=x,t[18]=V);let ee=V,H;t[19]!==p||t[20]!==S?(H=e=>{if(p&&S){let{date:t}=e.currentTarget.dataset;t&&S(t)}},t[19]=p,t[20]=S,t[21]=H):H=t[21];let te=H;w=s.Fragment,t[22]===Symbol.for(`react.memo_cache_sentinel`)?(A=(0,c.jsx)(a,{href:`@acusti/date-picker/MonthCalendar`,children:u}),t[22]=A):A=t[22],t[23]!==n||t[24]!==p?(D=i(l,n,{"is-range":p}),t[23]=n,t[24]=p,t[25]=D):D=t[25],t[26]===C?O=t[27]:(O=(0,c.jsx)(`div`,{className:`${l}-month-title`,children:(0,c.jsx)(`h3`,{className:`${l}-month-title-text`,children:C})}),t[26]=C,t[27]=O);let U;t[28]===Symbol.for(`react.memo_cache_sentinel`)?(U=(0,c.jsx)(`div`,{className:`week-day-item`,children:(0,c.jsx)(`span`,{className:`week-day-item-text`,children:`Su`})}),t[28]=U):U=t[28];let W;t[29]===Symbol.for(`react.memo_cache_sentinel`)?(W=(0,c.jsx)(`div`,{className:`week-day-item`,children:(0,c.jsx)(`span`,{className:`week-day-item-text`,children:`Mo`})}),t[29]=W):W=t[29];let G;t[30]===Symbol.for(`react.memo_cache_sentinel`)?(G=(0,c.jsx)(`div`,{className:`week-day-item`,children:(0,c.jsx)(`span`,{className:`week-day-item-text`,children:`Tu`})}),t[30]=G):G=t[30];let K;t[31]===Symbol.for(`react.memo_cache_sentinel`)?(K=(0,c.jsx)(`div`,{className:`week-day-item`,children:(0,c.jsx)(`span`,{className:`week-day-item-text`,children:`We`})}),t[31]=K):K=t[31];let q;t[32]===Symbol.for(`react.memo_cache_sentinel`)?(q=(0,c.jsx)(`div`,{className:`week-day-item`,children:(0,c.jsx)(`span`,{className:`week-day-item-text`,children:`Th`})}),t[32]=q):q=t[32];let J;t[33]===Symbol.for(`react.memo_cache_sentinel`)?(J=(0,c.jsx)(`div`,{className:`week-day-item`,children:(0,c.jsx)(`span`,{className:`week-day-item-text`,children:`Fr`})}),t[33]=J):J=t[33],t[34]===Symbol.for(`react.memo_cache_sentinel`)?(k=(0,c.jsxs)(`div`,{className:`${l}-month-week`,children:[U,W,G,K,q,J,(0,c.jsx)(`div`,{className:`week-day-item`,children:(0,c.jsx)(`span`,{className:`week-day-item-text`,children:`Sa`})})]}),t[34]=k):k=t[34],T=`${l}-month-days`,E=Array(Math.floor(L/7)).fill(null).map((t,n)=>(0,c.jsx)(`div`,{className:`${l}-month-row`,children:b.map((t,r)=>{r+=n*7;let a=r-F+1,s=a<1||a>P,u=s?null:v(o,a),d=R!=null&&a>R,f=z==null&&B!=null&&a<B||z!=null&&a<z;return(0,c.jsx)(`button`,{className:i(`${l}-month-day-item`,{"end-date":!s&&a===z,"is-empty":s,"is-selected":!s&&d&&f,"is-today":!s&&o===m(e)&&a===e.getDate(),"start-date":!s&&a===R}),"data-date":u?.toISOString(),disabled:s,onClick:ee,onMouseEnter:te,type:`button`,children:s?null:(0,c.jsx)(`span`,{className:`month-day-item-text`,children:a})},`MonthDayItem-${a}`)})},`MonthRow-${n}`)),t[0]=_,t[1]=n,t[2]=r,t[3]=d,t[4]=f,t[5]=p,t[6]=x,t[7]=S,t[8]=C,t[9]=w,t[10]=T,t[11]=E,t[12]=D,t[13]=O,t[14]=k,t[15]=A,t[16]=C}else w=t[9],T=t[10],E=t[11],D=t[12],O=t[13],k=t[14],A=t[15],C=t[16];let j;t[35]!==T||t[36]!==E?(j=(0,c.jsx)(`div`,{className:T,children:E}),t[35]=T,t[36]=E,t[37]=j):j=t[37];let M;t[38]!==D||t[39]!==O||t[40]!==k||t[41]!==j?(M=(0,c.jsxs)(`div`,{className:D,children:[O,k,j]}),t[38]=D,t[39]=O,t[40]=k,t[41]=j,t[42]=M):M=t[42];let N;return t[43]!==w||t[44]!==A||t[45]!==M?(N=(0,c.jsxs)(w,{children:[A,M]}),t[43]=w,t[44]=A,t[45]=M,t[46]=N):N=t[46],N}var S=`uktdatepicker`,C=`
+.${S} {
+    display: flex;
+    box-sizing: border-box;
+    padding: 40px 60px 60px;
+    flex: 1 1 auto;
+    position: relative;
+    max-width: 450px;
+}
+
+.${S}.two-up {
+    max-width: 820px;
+}
+
+.${S}-range-arrow-wrap {
+    position: absolute;
+    top: 30px;
+    left: 0px;
+    display: flex;
+    justify-content: space-between;
+    height: 0px;
+    width: 100%;
+    padding: 0px 60px;
+    box-sizing: border-box;
+}
+
+.${S}-range-arrow {
+    background-color: transparent;
+    border: 0;
+    width: 35px;
+    height: 35px;
+    text-align: center;
+    cursor: pointer;
+}
+
+.${S}-range-arrow.disabled {
+    color: #ccc;
+    cursor: default;
+}
+
+.${S}-range-arrow:active {
+    transform: translateY(1px);
+}
+
+.${S}-range-arrow.left-arrow:after,
+.${S}-range-arrow.right-arrow:after {
+    content: "‹";
+    font-size: 24px;
+    line-height: 35px;
+}
+
+.${S}-range-arrow.right-arrow:after {
+    content: "›";
+}
+
+.${S}-month-container {
+    display: flex;
+    flex: 1 1 auto;
+    justify-content: space-between;
+}
+`,w=e=>`${_(e)} ${h(e)}`,T=e=>e==null||e===``?null:typeof e==`string`?e:new Date(e).toISOString();function E(e){let t=(0,o.c)(62),{className:n,defaultDateEnd:r,defaultDateStart:l,initialMonth:u,isRange:d,isTwoUp:f,monthLimitFirst:p,monthLimitLast:h,onChange:g,showEndInitially:_,useMonthAbbreviations:v}=e,y=d??r!=null,b=f&&h!=null?h-1:h,E;t[0]===r?E=t[1]:(E=T(r),t[0]=r,t[1]=E);let D=E,O;t[2]===l?O=t[3]:(O=T(l),t[2]=l,t[3]=O);let k=O,[A,j]=(0,s.useState)(D),[M,N]=(0,s.useState)(k),P=(0,s.useRef)(!1);if(u==null){let e=M==null||!!(_&&A),n=e?A:M,r;t[4]===n?r=t[5]:(r=m(n==null?new Date:new Date(n)),t[4]=n,t[5]=r),u=r,e&&f&&--u}let F=(b??2**53-1)+(f?-1:0);u=Math.max(Math.min(u,F),p??-(2**53-1));let[I,L]=(0,s.useState)(u),[R,z]=(0,s.useState)(null),B=f?2:1,V;t[6]!==B||t[7]!==p?(V=()=>{L(e=>Math.max(e-B,p??-1/0))},t[6]=B,t[7]=p,t[8]=V):V=t[8];let ee=V,H;t[9]!==B||t[10]!==b?(H=()=>{L(e=>Math.min(e+B,b??1/0))},t[9]=B,t[10]=b,t[11]=H):H=t[11];let te=H,U;t[12]!==A||t[13]!==M||t[14]!==y||t[15]!==g?(U=e=>{y&&M!=null&&(P.current||A==null)?(e<M?(N(e),j(M),g({dateEnd:M,dateStart:e})):(j(e),g({dateEnd:e,dateStart:M})),P.current=!1):(N(e),j(null),y?(g({dateEnd:null,dateStart:e}),P.current=!0):g({dateStart:e}))},t[12]=A,t[13]=M,t[14]=y,t[15]=g,t[16]=U):U=t[16];let W=U,G;t[17]===Symbol.for(`react.memo_cache_sentinel`)?(G=e=>{z(e)},t[17]=G):G=t[17];let K=G,q;t[18]===Symbol.for(`react.memo_cache_sentinel`)?(q=(0,c.jsx)(a,{href:`@acusti/date-picker/DatePicker`,children:C}),t[18]=q):q=t[18];let J;t[19]!==n||t[20]!==f?(J=i(S,n,{"two-up":f}),t[19]=n,t[20]=f,t[21]=J):J=t[21];let ne=p!=null&&I<=p,Y;t[22]===ne?Y=t[23]:(Y=i(`${S}-range-arrow left-arrow`,{disabled:ne}),t[22]=ne,t[23]=Y);let X;t[24]!==ee||t[25]!==Y?(X=(0,c.jsx)(`button`,{"aria-label":`Previous Month`,className:Y,onClick:ee,type:`button`}),t[24]=ee,t[25]=Y,t[26]=X):X=t[26];let re=b!=null&&I>=b,Z;t[27]===re?Z=t[28]:(Z=i(`${S}-range-arrow right-arrow`,{disabled:re}),t[27]=re,t[28]=Z);let Q;t[29]!==te||t[30]!==Z?(Q=(0,c.jsx)(`button`,{"aria-label":`Next Month`,className:Z,onClick:te,type:`button`}),t[29]=te,t[30]=Z,t[31]=Q):Q=t[31];let $;t[32]!==X||t[33]!==Q?($=(0,c.jsxs)(`div`,{className:`${S}-range-arrow-wrap`,children:[X,Q]}),t[32]=X,t[33]=Q,t[34]=$):$=t[34];let ie;t[35]!==I||t[36]!==v?(ie=v?w(I):void 0,t[35]=I,t[36]=v,t[37]=ie):ie=t[37];let ae;t[38]!==A||t[39]!==R||t[40]!==M||t[41]!==W||t[42]!==y||t[43]!==I||t[44]!==ie?(ae=(0,c.jsx)(x,{dateEnd:A,dateEndPreview:R,dateStart:M,isRange:y,month:I,onChange:W,onChangeEndPreview:K,title:ie}),t[38]=A,t[39]=R,t[40]=M,t[41]=W,t[42]=y,t[43]=I,t[44]=ie,t[45]=ae):ae=t[45];let oe;t[46]!==A||t[47]!==R||t[48]!==M||t[49]!==W||t[50]!==y||t[51]!==f||t[52]!==I||t[53]!==v?(oe=f?(0,c.jsx)(x,{dateEnd:A,dateEndPreview:R,dateStart:M,isRange:y,month:I+1,onChange:W,onChangeEndPreview:K,title:v?w(I+1):void 0}):null,t[46]=A,t[47]=R,t[48]=M,t[49]=W,t[50]=y,t[51]=f,t[52]=I,t[53]=v,t[54]=oe):oe=t[54];let se;t[55]!==ae||t[56]!==oe?(se=(0,c.jsxs)(`div`,{className:`${S}-month-container`,children:[ae,oe]}),t[55]=ae,t[56]=oe,t[57]=se):se=t[57];let ce;return t[58]!==$||t[59]!==se||t[60]!==J?(ce=(0,c.jsxs)(s.Fragment,{children:[q,(0,c.jsxs)(`div`,{className:J,children:[$,se]})]}),t[58]=$,t[59]=se,t[60]=J,t[61]=ce):ce=t[61],ce}var D={argTypes:{defaultDateEnd:{control:`date`,description:`(optional) default end date of current date range`},defaultDateStart:{control:`date`,description:`(optional) default start date of current date range`}},component:E,parameters:{docs:{description:{component:"`DatePicker` is a React component that renders a calendar-based date picker UI with support for date ranges."}}},tags:[`autodocs`],title:`UIKit/Controls/DatePicker/DatePicker`};const O={args:{className:`default-date-picker-story`}},k={args:{className:`two-up-date-picker-story`,isTwoUp:!0}};var A={className:`date-range-date-picker-story`,defaultDateEnd:new Date(2024,0,6).toISOString(),defaultDateStart:new Date(2023,11,25).toISOString(),isTwoUp:!0};const j={args:A,render(){let[e,t]=(0,s.useState)(0),[n,r]=(0,s.useState)({start:A.defaultDateStart,end:A.defaultDateEnd});return(0,c.jsxs)(`div`,{children:[(0,c.jsx)(E,{className:A.className,isTwoUp:A.isTwoUp,defaultDateEnd:n.end,defaultDateStart:n.start,onChange:e=>{r({start:e.dateStart,end:e.dateEnd??``})}},e),(0,c.jsxs)(`div`,{style:{marginTop:`16px`},children:[(0,c.jsx)(`button`,{onClick:()=>{t(e=>e+1),r({start:A.defaultDateStart,end:A.defaultDateEnd})},style:{padding:`8px 16px`,border:`1px solid #ccc`,borderRadius:`4px`,cursor:`pointer`,backgroundColor:`#f5f5f5`},children:`Reset to Christmas-Epiphany Range`}),n.start&&(0,c.jsxs)(`p`,{style:{marginTop:`8px`},children:[`Selected: `,new Date(n.start).toLocaleDateString(),n.end&&` - ${new Date(n.end).toLocaleDateString()}`]})]})]})}},M={args:{className:`no-future-two-up-date-picker-story`,isTwoUp:!0,monthLimitLast:m(new Date)}},N={args:{className:`no-future-two-up-date-picker-story`,defaultDateEnd:new Date(1234,0,1).toISOString(),defaultDateStart:new Date(1233,0,1).toISOString(),isTwoUp:!0,showEndInitially:!0}};var P={className:`booking-date-picker-story`,isRange:!0,isTwoUp:!0,useMonthAbbreviations:!0};const F={args:P,render(){let[e,t]=(0,s.useState)(0),[n,r]=(0,s.useState)(``),[i,a]=(0,s.useState)(``),o=n&&i,l=m(new Date),u=l+12,d=()=>{t(e=>e+1),r(``),a(``)};return(0,c.jsxs)(`div`,{className:`booking-date-picker`,children:[(0,c.jsx)(`h3`,{children:`Select Your Stay`}),(0,c.jsx)(E,{...P,monthLimitFirst:l,monthLimitLast:u,onChange:({dateStart:e,dateEnd:t})=>{r(e),a(t??``)},defaultDateStart:n,defaultDateEnd:i},e),(0,c.jsx)(`div`,{style:{marginTop:`16px`},children:(0,c.jsx)(`button`,{onClick:d,style:{padding:`8px 16px`,border:`1px solid #dc3545`,borderRadius:`4px`,cursor:`pointer`,backgroundColor:`#fff`,color:`#dc3545`,marginRight:`8px`},children:`Clear Dates`})}),o?(0,c.jsxs)(`div`,{className:`booking-summary`,style:{marginTop:`16px`,padding:`16px`,border:`1px solid #e1e5e9`,borderRadius:`8px`,backgroundColor:`#f8f9fa`},children:[(0,c.jsxs)(`p`,{children:[(0,c.jsx)(`strong`,{children:`Check-in:`}),` `,new Date(n).toLocaleDateString()]}),(0,c.jsxs)(`p`,{children:[(0,c.jsx)(`strong`,{children:`Check-out:`}),` `,new Date(i).toLocaleDateString()]}),(0,c.jsxs)(`p`,{children:[(0,c.jsx)(`strong`,{children:`Duration:`}),` `,(()=>{let e=new Date(n).getTime(),t=new Date(i).getTime()-e,r=Math.ceil(t/(1e3*60*60*24));return Math.max(0,r)})(),` `,`nights`]})]}):null]})},parameters:{docs:{description:{story:`A complete booking system example with date range selection, month limits, and booking summary display.`}}}};var I={className:`event-scheduler-story`};const L={args:I,render(){let[e,t]=(0,s.useState)(0),[n,r]=(0,s.useState)(``),[i,a]=(0,s.useState)(!1),o=m(new Date);return(0,c.jsxs)(`div`,{className:`event-scheduler`,children:[(0,c.jsxs)(`div`,{style:{marginBottom:`16px`},children:[(0,c.jsx)(`label`,{htmlFor:`event-date`,style:{display:`block`,marginBottom:`8px`,fontWeight:500},children:`Event Date:`}),(0,c.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,gap:`8px`},children:[(0,c.jsx)(`input`,{id:`event-date`,type:`text`,value:n?new Date(n).toLocaleDateString():``,onClick:()=>a(!0),placeholder:`Click to select date`,readOnly:!0,style:{padding:`8px 12px`,border:`2px solid #e1e5e9`,borderRadius:`6px`,cursor:`pointer`,width:`200px`}}),n&&(0,c.jsx)(`button`,{onClick:()=>{t(e=>e+1),r(``),a(!1)},style:{padding:`6px 12px`,border:`1px solid #dc3545`,borderRadius:`4px`,cursor:`pointer`,backgroundColor:`#fff`,color:`#dc3545`,fontSize:`12px`},children:`Clear`})]})]}),i?(0,c.jsx)(`div`,{style:{position:`relative`,zIndex:1e3,marginTop:`8px`},children:(0,c.jsxs)(`div`,{style:{padding:`16px`,border:`1px solid #e1e5e9`,borderRadius:`8px`,backgroundColor:`white`,boxShadow:`0 4px 6px rgba(0, 0, 0, 0.1)`},children:[(0,c.jsx)(E,{...I,monthLimitFirst:o,onChange:({dateStart:e})=>{r(e),a(!1)},defaultDateStart:n},e),(0,c.jsx)(`button`,{onClick:()=>a(!1),style:{marginTop:`12px`,padding:`8px 16px`,border:`1px solid #ccc`,borderRadius:`4px`,cursor:`pointer`},children:`Cancel`})]})}):null]})},parameters:{docs:{description:{story:`An event scheduling interface with modal-style date picker that only allows future dates.`}}}},R={render(){let[e,t]=(0,s.useState)(0),[n,r]=(0,s.useState)(``),i=new Date,a=new Date(i.getFullYear()-120,i.getMonth(),i.getDate()),o=new Date(i.getFullYear()-13,i.getMonth(),i.getDate()),l=m(a),u=m(o),d=m(new Date(i.getFullYear()-25,i.getMonth(),i.getDate()));return(0,c.jsxs)(`div`,{className:`birthday-picker`,children:[(0,c.jsx)(`h3`,{children:`Enter Your Birthday`}),(0,c.jsx)(E,{initialMonth:d,monthLimitFirst:l,monthLimitLast:u,onChange:({dateStart:e})=>r(e),defaultDateStart:n},e),(0,c.jsx)(`div`,{style:{marginTop:`16px`},children:n&&(0,c.jsx)(`button`,{onClick:()=>{t(e=>e+1),r(``)},style:{padding:`6px 12px`,border:`1px solid #dc3545`,borderRadius:`4px`,cursor:`pointer`,backgroundColor:`#fff`,color:`#dc3545`,fontSize:`14px`,marginBottom:`12px`},children:`Clear Birthday`})}),n?(0,c.jsx)(`p`,{style:{marginTop:`8px`,padding:`12px`,backgroundColor:`#e3f2fd`,borderRadius:`6px`},children:(0,c.jsxs)(`strong`,{children:[`You are`,` `,Math.floor((i.getTime()-new Date(n).getTime())/(1e3*60*60*24*365.25)),` `,`years old`]})}):null]})},parameters:{docs:{description:{story:`A birthday picker with reasonable age limits (13-120 years) and automatic age calculation.`}}}},z={render(){let[e,t]=(0,s.useState)(0),[n,r]=(0,s.useState)(``),[i,a]=(0,s.useState)(`single`);return(0,c.jsxs)(`div`,{className:`flexible-date-picker`,children:[(0,c.jsxs)(`div`,{style:{marginBottom:`16px`},children:[(0,c.jsxs)(`label`,{style:{marginRight:`16px`},children:[(0,c.jsx)(`input`,{type:`radio`,checked:i===`single`,onChange:()=>a(`single`),style:{marginRight:`4px`}}),`Single Month`]}),(0,c.jsxs)(`label`,{style:{marginRight:`16px`},children:[(0,c.jsx)(`input`,{type:`radio`,checked:i===`double`,onChange:()=>a(`double`),style:{marginRight:`4px`}}),`Two Months`]}),n&&(0,c.jsx)(`button`,{onClick:()=>{t(e=>e+1),r(``)},style:{padding:`4px 8px`,border:`1px solid #dc3545`,borderRadius:`4px`,cursor:`pointer`,backgroundColor:`#fff`,color:`#dc3545`,fontSize:`12px`},children:`Clear`})]}),(0,c.jsx)(E,{isTwoUp:i===`double`,useMonthAbbreviations:i===`double`,onChange:({dateStart:e})=>r(e),defaultDateStart:n},e),n?(0,c.jsxs)(`div`,{style:{marginTop:`16px`,padding:`12px`,border:`1px solid #e1e5e9`,borderRadius:`6px`},children:[(0,c.jsx)(`strong`,{children:`Selected:`}),` `,new Date(n).toLocaleDateString(),(0,c.jsx)(`br`,{}),(0,c.jsx)(`strong`,{children:`Day of week:`}),` `,new Date(n).toLocaleDateString(`en`,{weekday:`long`})]}):null]})},parameters:{docs:{description:{story:`A flexible date picker that can switch between single and two-month views dynamically.`}}}};O.parameters={...O.parameters,docs:{...O.parameters?.docs,source:{originalSource:`{
+  args: {
+    className: 'default-date-picker-story'
+  }
+}`,...O.parameters?.docs?.source}}},k.parameters={...k.parameters,docs:{...k.parameters?.docs,source:{originalSource:`{
+  args: {
+    className: 'two-up-date-picker-story',
+    isTwoUp: true
+  }
+}`,...k.parameters?.docs?.source}}},j.parameters={...j.parameters,docs:{...j.parameters?.docs,source:{originalSource:`{
+  args: DATE_RANGE_NAVIDAD_DIA_DE_LOS_REYES_PROPS,
+  render() {
+    const [resetKey, setResetKey] = useState(0);
+    const [selectedDates, setSelectedDates] = useState({
+      start: DATE_RANGE_NAVIDAD_DIA_DE_LOS_REYES_PROPS.defaultDateStart,
+      end: DATE_RANGE_NAVIDAD_DIA_DE_LOS_REYES_PROPS.defaultDateEnd
+    });
+    const handleReset = () => {
+      setResetKey(prev => prev + 1);
+      setSelectedDates({
+        start: DATE_RANGE_NAVIDAD_DIA_DE_LOS_REYES_PROPS.defaultDateStart,
+        end: DATE_RANGE_NAVIDAD_DIA_DE_LOS_REYES_PROPS.defaultDateEnd
+      });
+    };
+    return <div>
+                <DatePicker key={resetKey} className={DATE_RANGE_NAVIDAD_DIA_DE_LOS_REYES_PROPS.className} isTwoUp={DATE_RANGE_NAVIDAD_DIA_DE_LOS_REYES_PROPS.isTwoUp} defaultDateEnd={selectedDates.end} defaultDateStart={selectedDates.start} onChange={update => {
+        setSelectedDates({
+          start: update.dateStart,
+          end: update.dateEnd ?? ''
+        });
+      }} />
+                <div style={{
+        marginTop: '16px'
+      }}>
+                    <button onClick={handleReset} style={{
+          padding: '8px 16px',
+          border: '1px solid #ccc',
+          borderRadius: '4px',
+          cursor: 'pointer',
+          backgroundColor: '#f5f5f5'
+        }}>
+                        Reset to Christmas-Epiphany Range
+                    </button>
+                    {selectedDates.start && <p style={{
+          marginTop: '8px'
+        }}>
+                            Selected: {new Date(selectedDates.start).toLocaleDateString()}
+                            {selectedDates.end && \` - \${new Date(selectedDates.end).toLocaleDateString()}\`}
+                        </p>}
+                </div>
+            </div>;
+  }
+}`,...j.parameters?.docs?.source}}},M.parameters={...M.parameters,docs:{...M.parameters?.docs,source:{originalSource:`{
+  args: {
+    className: 'no-future-two-up-date-picker-story',
+    isTwoUp: true,
+    monthLimitLast: getMonthFromDate(new Date())
+  }
+}`,...M.parameters?.docs?.source}}},N.parameters={...N.parameters,docs:{...N.parameters?.docs,source:{originalSource:`{
+  args: {
+    className: 'no-future-two-up-date-picker-story',
+    defaultDateEnd: new Date(1234, 0, 1).toISOString(),
+    defaultDateStart: new Date(1233, 0, 1).toISOString(),
+    isTwoUp: true,
+    showEndInitially: true
+  }
+}`,...N.parameters?.docs?.source}}},F.parameters={...F.parameters,docs:{...F.parameters?.docs,source:{originalSource:`{
+  args: BOOKING_PROPS,
+  render() {
+    const [resetKey, setResetKey] = useState(0);
+    const [checkIn, setCheckIn] = useState('');
+    const [checkOut, setCheckOut] = useState('');
+    const isValid = checkIn && checkOut;
+
+    // Limit to next 12 months only
+    const today = new Date();
+    const monthLimitFirst = getMonthFromDate(today);
+    const monthLimitLast = monthLimitFirst + 12;
+    const handleClearDates = () => {
+      setResetKey(prev => prev + 1);
+      setCheckIn('');
+      setCheckOut('');
+    };
+    return <div className="booking-date-picker">
+                <h3>Select Your Stay</h3>
+                <DatePicker key={resetKey} {...BOOKING_PROPS} monthLimitFirst={monthLimitFirst} monthLimitLast={monthLimitLast} onChange={({
+        dateStart,
+        dateEnd
+      }) => {
+        setCheckIn(dateStart);
+        setCheckOut(dateEnd ?? '');
+      }} defaultDateStart={checkIn} defaultDateEnd={checkOut} />
+
+                <div style={{
+        marginTop: '16px'
+      }}>
+                    <button onClick={handleClearDates} style={{
+          padding: '8px 16px',
+          border: '1px solid #dc3545',
+          borderRadius: '4px',
+          cursor: 'pointer',
+          backgroundColor: '#fff',
+          color: '#dc3545',
+          marginRight: '8px'
+        }}>
+                        Clear Dates
+                    </button>
+                </div>
+
+                {isValid ? <div className="booking-summary" style={{
+        marginTop: '16px',
+        padding: '16px',
+        border: '1px solid #e1e5e9',
+        borderRadius: '8px',
+        backgroundColor: '#f8f9fa'
+      }}>
+                        <p>
+                            <strong>Check-in:</strong>{' '}
+                            {new Date(checkIn).toLocaleDateString()}
+                        </p>
+                        <p>
+                            <strong>Check-out:</strong>{' '}
+                            {new Date(checkOut).toLocaleDateString()}
+                        </p>
+                        <p>
+                            <strong>Duration:</strong>{' '}
+                            {(() => {
+            const checkInTime = new Date(checkIn).getTime();
+            const checkOutTime = new Date(checkOut).getTime();
+            const diffTime = checkOutTime - checkInTime;
+            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+            return Math.max(0, diffDays);
+          })()}{' '}
+                            nights
+                        </p>
+                    </div> : null}
+            </div>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A complete booking system example with date range selection, month limits, and booking summary display.'
+      }
+    }
+  }
+}`,...F.parameters?.docs?.source}}},L.parameters={...L.parameters,docs:{...L.parameters?.docs,source:{originalSource:`{
+  args: EVENT_PROPS,
+  render() {
+    const [resetKey, setResetKey] = useState(0);
+    const [eventDate, setEventDate] = useState('');
+    const [showPicker, setShowPicker] = useState(false);
+
+    // Only allow future dates
+    const monthLimitFirst = getMonthFromDate(new Date());
+    const handleClearDate = () => {
+      setResetKey(prev => prev + 1);
+      setEventDate('');
+      setShowPicker(false);
+    };
+    return <div className="event-scheduler">
+                <div style={{
+        marginBottom: '16px'
+      }}>
+                    <label htmlFor="event-date" style={{
+          display: 'block',
+          marginBottom: '8px',
+          fontWeight: 500
+        }}>
+                        Event Date:
+                    </label>
+                    <div style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px'
+        }}>
+                        <input id="event-date" type="text" value={eventDate ? new Date(eventDate).toLocaleDateString() : ''} onClick={() => setShowPicker(true)} placeholder="Click to select date" readOnly style={{
+            padding: '8px 12px',
+            border: '2px solid #e1e5e9',
+            borderRadius: '6px',
+            cursor: 'pointer',
+            width: '200px'
+          }} />
+                        {eventDate && <button onClick={handleClearDate} style={{
+            padding: '6px 12px',
+            border: '1px solid #dc3545',
+            borderRadius: '4px',
+            cursor: 'pointer',
+            backgroundColor: '#fff',
+            color: '#dc3545',
+            fontSize: '12px'
+          }}>
+                                Clear
+                            </button>}
+                    </div>
+                </div>
+
+                {showPicker ? <div style={{
+        position: 'relative',
+        zIndex: 1000,
+        marginTop: '8px'
+      }}>
+                        <div style={{
+          padding: '16px',
+          border: '1px solid #e1e5e9',
+          borderRadius: '8px',
+          backgroundColor: 'white',
+          boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
+        }}>
+                            <DatePicker key={resetKey} {...EVENT_PROPS} monthLimitFirst={monthLimitFirst} onChange={({
+            dateStart
+          }) => {
+            setEventDate(dateStart);
+            setShowPicker(false);
+          }} defaultDateStart={eventDate} />
+                            <button onClick={() => setShowPicker(false)} style={{
+            marginTop: '12px',
+            padding: '8px 16px',
+            border: '1px solid #ccc',
+            borderRadius: '4px',
+            cursor: 'pointer'
+          }}>
+                                Cancel
+                            </button>
+                        </div>
+                    </div> : null}
+            </div>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'An event scheduling interface with modal-style date picker that only allows future dates.'
+      }
+    }
+  }
+}`,...L.parameters?.docs?.source}}},R.parameters={...R.parameters,docs:{...R.parameters?.docs,source:{originalSource:`{
+  render() {
+    const [resetKey, setResetKey] = useState(0);
+    const [birthday, setBirthday] = useState('');
+
+    // Reasonable age limits: 13 to 120 years ago
+    const today = new Date();
+    const maxAge = new Date(today.getFullYear() - 120, today.getMonth(), today.getDate());
+    const minAge = new Date(today.getFullYear() - 13, today.getMonth(), today.getDate());
+    const monthLimitFirst = getMonthFromDate(maxAge);
+    const monthLimitLast = getMonthFromDate(minAge);
+
+    // Start showing calendar at a reasonable age (25 years ago)
+    const defaultMonth = getMonthFromDate(new Date(today.getFullYear() - 25, today.getMonth(), today.getDate()));
+    const handleClear = () => {
+      setResetKey(prev => prev + 1);
+      setBirthday('');
+    };
+    return <div className="birthday-picker">
+                <h3>Enter Your Birthday</h3>
+                <DatePicker key={resetKey} initialMonth={defaultMonth} monthLimitFirst={monthLimitFirst} monthLimitLast={monthLimitLast} onChange={({
+        dateStart
+      }) => setBirthday(dateStart)} defaultDateStart={birthday} />
+
+                <div style={{
+        marginTop: '16px'
+      }}>
+                    {birthday && <button onClick={handleClear} style={{
+          padding: '6px 12px',
+          border: '1px solid #dc3545',
+          borderRadius: '4px',
+          cursor: 'pointer',
+          backgroundColor: '#fff',
+          color: '#dc3545',
+          fontSize: '14px',
+          marginBottom: '12px'
+        }}>
+                            Clear Birthday
+                        </button>}
+                </div>
+
+                {birthday ? <p style={{
+        marginTop: '8px',
+        padding: '12px',
+        backgroundColor: '#e3f2fd',
+        borderRadius: '6px'
+      }}>
+                        <strong>
+                            You are{' '}
+                            {Math.floor((today.getTime() - new Date(birthday).getTime()) / (1000 * 60 * 60 * 24 * 365.25))}{' '}
+                            years old
+                        </strong>
+                    </p> : null}
+            </div>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A birthday picker with reasonable age limits (13-120 years) and automatic age calculation.'
+      }
+    }
+  }
+}`,...R.parameters?.docs?.source}}},z.parameters={...z.parameters,docs:{...z.parameters?.docs,source:{originalSource:`{
+  render() {
+    const [resetKey, setResetKey] = useState(0);
+    const [selectedDate, setSelectedDate] = useState('');
+    const [viewMode, setViewMode] = useState<'single' | 'double'>('single');
+    const handleClear = () => {
+      setResetKey(prev => prev + 1);
+      setSelectedDate('');
+    };
+    return <div className="flexible-date-picker">
+                <div style={{
+        marginBottom: '16px'
+      }}>
+                    <label style={{
+          marginRight: '16px'
+        }}>
+                        <input type="radio" checked={viewMode === 'single'} onChange={() => setViewMode('single')} style={{
+            marginRight: '4px'
+          }} />
+                        Single Month
+                    </label>
+                    <label style={{
+          marginRight: '16px'
+        }}>
+                        <input type="radio" checked={viewMode === 'double'} onChange={() => setViewMode('double')} style={{
+            marginRight: '4px'
+          }} />
+                        Two Months
+                    </label>
+                    {selectedDate && <button onClick={handleClear} style={{
+          padding: '4px 8px',
+          border: '1px solid #dc3545',
+          borderRadius: '4px',
+          cursor: 'pointer',
+          backgroundColor: '#fff',
+          color: '#dc3545',
+          fontSize: '12px'
+        }}>
+                            Clear
+                        </button>}
+                </div>
+
+                <DatePicker key={resetKey} isTwoUp={viewMode === 'double'} useMonthAbbreviations={viewMode === 'double'} onChange={({
+        dateStart
+      }) => setSelectedDate(dateStart)} defaultDateStart={selectedDate} />
+
+                {selectedDate ? <div style={{
+        marginTop: '16px',
+        padding: '12px',
+        border: '1px solid #e1e5e9',
+        borderRadius: '6px'
+      }}>
+                        <strong>Selected:</strong>{' '}
+                        {new Date(selectedDate).toLocaleDateString()}
+                        <br />
+                        <strong>Day of week:</strong>{' '}
+                        {new Date(selectedDate).toLocaleDateString('en', {
+          weekday: 'long'
+        })}
+                    </div> : null}
+            </div>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A flexible date picker that can switch between single and two-month views dynamically.'
+      }
+    }
+  }
+}`,...z.parameters?.docs?.source}}};const B=[`DefaultDatePicker`,`TwoUpDatePicker`,`DateRangeNavidadDiaDeLosReyesDatePicker`,`NoFutureTwoUpDatePicker`,`ShowEndInitiallyDatePicker`,`BookingSystemDateRange`,`EventScheduler`,`BirthdayPicker`,`FlexibleDatePicker`];export{R as BirthdayPicker,F as BookingSystemDateRange,j as DateRangeNavidadDiaDeLosReyesDatePicker,O as DefaultDatePicker,L as EventScheduler,z as FlexibleDatePicker,M as NoFutureTwoUpDatePicker,N as ShowEndInitiallyDatePicker,k as TwoUpDatePicker,B as __namedExportsOrder,D as default};

package/dist/assets/DocsRenderer-LL677BLK-i2bqAbNY.js

@@ -0,0 +1,2 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./react-DcwytXSz.js","./lib-WXkUx4TK.js","./iframe-BsC6HWDY.js","./preload-helper-Bhb7V-Yo.js"])))=>i.map(i=>d[i]);
+import{t as e}from"./preload-helper-Bhb7V-Yo.js";import{E as t,r as n}from"./iframe-BsC6HWDY.js";import"./react-dom-CFVoDXTy.js";import"./jsx-runtime-CZwoFFIL.js";import"./components-CuDS54ZU.js";import{t as r}from"./client-Bvdml6v2.js";import{i,n as a,r as o,t as s}from"./blocks-C4xgyV4X.js";var c=t(n(),1),l=t(r(),1),u=new Map;function d(){return globalThis.IS_REACT_ACT_ENVIRONMENT}var f=({callback:e,children:t})=>{let n=c.useRef();return c.useLayoutEffect(()=>{n.current!==e&&(n.current=e,e())},[e]),t};typeof Promise.withResolvers>`u`&&(Promise.withResolvers=()=>{let e=null,t=null;return{promise:new Promise((n,r)=>{e=n,t=r}),resolve:e,reject:t}});var p=async(e,t,n)=>{let r=await h(t,n);if(d()){r.render(e);return}let{promise:i,resolve:a}=Promise.withResolvers();return r.render(c.createElement(f,{callback:a},e)),i},m=(e,t)=>{let n=u.get(e);n&&(n.unmount(),u.delete(e))},h=async(e,t)=>{let n=u.get(e);return n||(n=l.createRoot(e,t),u.set(e,n)),n},g={code:a,a:s,...i},_=class extends c.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e){let{showException:t}=this.props;t(e)}render(){let{hasError:e}=this.state,{children:t}=this.props;return e?null:c.createElement(c.Fragment,null,t)}},v=class{constructor(){this.render=async(t,n,r)=>{let i={...g,...n?.components},a=o;return new Promise((o,s)=>{e(async()=>{let{MDXProvider:e}=await import(`./react-DcwytXSz.js`);return{MDXProvider:e}},__vite__mapDeps([0,1,2,3]),import.meta.url).then(({MDXProvider:e})=>p(c.createElement(_,{showException:s,key:Math.random()},c.createElement(e,{components:i},c.createElement(a,{context:t,docsParameter:n}))),r)).then(()=>o())})},this.unmount=e=>{m(e)}}};export{v as DocsRenderer};

package/dist/assets/Dropdown-QkqMQiyU.css

@@ -0,0 +1 @@
+#storybook-root,.sb-story>div{flex-direction:column;display:flex}#storybook-root:has(.mk-header){height:1000px}#storybook-root:has(.position-right.uktdropdown){justify-content:center;align-items:center;width:calc(200vw - 270px);height:calc(200vh - 110px)}.sb-story:has(.position-right.uktdropdown){width:100%;height:350px;overflow:auto}.sb-story>div:has(.position-right.uktdropdown){justify-content:center;align-items:center;width:calc(200% - 190px);height:670px}.sb-story{min-height:180px}.uktdropdown input{box-sizing:border-box;width:110px}.uktdropdown-body ul{text-align:left;margin:0;padding-left:0;list-style-type:none}.uktdropdown-body li{white-space:nowrap;margin:4px 0;padding:4px 8px}.uktdropdown-body .heading{color:#aaa;text-transform:uppercase;letter-spacing:1px;margin:.75rem 0 .5rem;font-size:12px;font-weight:700}.uktdropdown-body:first-child{margin-top:.25rem}.no-trigger-text .uktdropdown-trigger{vertical-align:top;width:27px;height:21px;margin-left:3px;position:relative}.no-trigger-text .uktdropdown-trigger:before{content:"";background-color:#666;border-radius:2px 0 0 3px;width:9px;height:2px;display:block;position:absolute;top:10px;left:4px;transform:rotate(38deg)}.no-trigger-text .uktdropdown-trigger:after{content:"";background-color:#666;border-radius:0 2px 2px 0;width:9px;height:2px;display:block;position:absolute;top:10px;right:4px;transform:rotate(-38deg)}.font-weight{font-size:13px}.font-weight .item-title{color:#ababab}.font-weight [data-ukt-active] .item-title{color:#fff}:is(.searchable-with-label,.searchable-and-allow-create) input,:is(.searchable-with-label,.searchable-and-allow-create) .uktdropdown-body{width:85px}:is(.searchable-with-label,.searchable-and-allow-create) .uktdropdown-body{left:revert;right:anchor(right)}.css-value-input-trigger .uktdropdown-body{width:110px;left:revert;right:anchor(right);margin-right:14px}.dropdown-without-items .uktdropdown-body{width:300px}.textarea-trigger .uktdropdown-body{width:400px;font-size:13px}.checkboxes .uktdropdown-body{width:150px}.checkboxes input[type=checkbox]{width:auto}.overlapping-dropdown .uktdropdown-body{width:250px;min-height:200px;margin-top:-22px;margin-left:-10px}.out-of-bounds-example input{width:150px}.out-of-bounds-example .uktdropdown-body{width:250px}.out-of-bounds-example.no-direction-change.uktdropdown{margin-top:220px;position:relative}.out-of-bounds-example.no-direction-change .uktdropdown-trigger{width:255px}.out-of-bounds-example.no-direction-change.uktdropdown .uktdropdown-body{top:100%}#anchor--uikit-controls-dropdown--out-of-bounds-with-no-direction-change .innerZoomElementWrapper>*{height:200px;overflow:auto}#anchor--uikit-controls-dropdown--out-of-bounds-with-no-direction-change .sb-story{height:230px}:root{--ui-clr-1000:#fff;--ui-clr-900:#f8f8f8;--ui-clr-800:#f0f0f0;--ui-clr-700:#e2e2e2;--ui-clr-600:#d0d0d0;--ui-clr-500:#afafaf;--ui-clr-400:#909090;--ui-clr-300:#575757;--ui-clr-200:#313131;--ui-clr-100:#1a1a1a}.mk-header{box-sizing:border-box;z-index:2;flex-direction:row;grid-template-columns:1fr 1fr 1fr;justify-content:space-between;align-items:start;height:200px;padding:25px;font-family:system-ui;display:grid;position:fixed;inset:0 0 auto}.mk-header+h1{margin:70px 15px;font-family:system-ui}.mk-header a:link,.mk-header a:active,.mk-header a:hover,.mk-header a:visited{color:var(--ui-clr-200);text-decoration:underline}.mk-header p.mk{margin-bottom:1.5em;font-size:max(14px,min(2vw,18px));font-weight:300;line-height:1.7}.mk-header h1.mk{color:var(--ui-clr-100);margin-bottom:0;font-size:2.1875rem;font-weight:500;line-height:1.1}@media screen and (width<=768px){.mk-header h1.mk{line-height:1.1}}.mk-header h2.mk{letter-spacing:1px;text-transform:uppercase;max-width:14ch;margin-bottom:.25em;font-size:max(27px,min(2vw,35px));line-height:1.2}@media screen and (width<=550px){.mk-header h2.mk{margin-bottom:12px}}.mk-header h5.mk{color:var(--ui-clr-400);margin:10px 0;font-size:12px;font-weight:400;line-height:1.4}.mk-header h5.mk.hide{opacity:0}.mk-header h6.mk{font-size:11px;font-family:var(--font-mono);text-transform:uppercase;font-weight:400}@media screen and (width<=550px){.mk-header p.blurb-message{font-weight:400}}.mk-header .mk-nav{box-sizing:border-box;align-items:center;gap:8px;display:flex}.mk-header .mk-nav.a1{justify-content:flex-start}.mk-header .mk-nav.center{justify-content:center;display:flex}@media screen and (width<=768px){.mk-header .mk-nav.center{display:none}}.mk-header .mk-nav.a2{grid-column:3/-1;justify-content:flex-end;gap:20px}.mk-header .avatar-menu .avatar-profile,.mk-header .avatar-menu .avatar-edit{background-color:#fff;background-position:50%;background-repeat:no-repeat;background-size:cover;border:1px solid #000;border-radius:50%;width:35px;height:35px}.mk-header .avatar-menu .has-avatar{color:#0000;background-color:#0000}.mk-header .avatar-menu .uktdropdown-body{box-sizing:border-box;padding:20px;bottom:auto}.mk-header .avatar-menu p{margin:.5rem 0}.mk-header .avatar-menu .avatar-edit{cursor:pointer;position:relative;overflow:hidden}.mk-header .avatar-menu .avatar-edit:hover:after{content:"EDIT";color:#fff;text-transform:uppercase;letter-spacing:1px;text-align:center;background-color:#0006;width:100%;font-size:9px;line-height:1.3;position:absolute;bottom:5px}