@formkit/pro 1.0.0-alpha.5 → 1.0.0-alpha.50

package/LICENSE.md

@@ -1,6 +1,6 @@
 # License
 
-This license is a legal agreement between you and FormKit, Inc (the "Company"). for the use of the FormKit Pro Software (the “Software”). By downloading the Software you agree to be bound by the terms of this license and the Terms of Service found at https://formkit.com/terms. The Company reserves the right to alter this agreement at any time, for any reason, without notice.
+This license is a legal agreement between you and FormKit, Inc. (the "Company") for the use of the FormKit Pro Software (the “Software”). By downloading the Software you agree to be bound by the terms of this license and the Terms of Service found at https://formkit.com/terms. The Company reserves the right to alter this agreement at any time, for any reason, without notice.
 
 ## 1. Permitted use
 
@@ -36,7 +36,7 @@ You agree to indemnify and hold harmless FormKit and its officers, directors, em
 THIS SOFTWARE IS PROVIDED “AS IS”, “AS AVAILABLE” AND WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF TITLE, NON-INFRINGEMENT, MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE, AND ANY WARRANTIES IMPLIED BY ANY COURSE OF PERFORMANCE OR USAGE OF TRADE, ALL OF WHICH ARE EXPRESSLY DISCLAIMED. WE AND OUR DIRECTORS, EMPLOYEES, AGENTS, SUPPLIERS, PARTNERS, AND CONTENT PROVIDERS DO NOT WARRANT THAT:
 
   1. THE SOFTWARE WILL BE SECURE OR AVAILABLE AT ANY PARTICULAR TIME OR LOCATION;
-  2. ANY DEFECTS OR ERRORS WILL BE CORRECTED
+  2. ANY DEFECTS OR ERRORS WILL BE CORRECTED;
   3. ANY CONTENT OR SOFTWARE AVAILABLE AT OR THROUGH THE SOFTWARE IS FREE OF VIRUSES OR OTHER HARMFUL COMPONENTS;
   4. THE SOFTWARE WILL ALWAYS BE AVAILABLE;
   5. THE RESULTS OF USING THE SOFTWARE WILL MEET YOUR REQUIREMENTS.

package/README.md

@@ -7,6 +7,8 @@ FormKit Pro is a first party library of professional grade "synthetic" inputs fo
 - Repeater
 - Dropdown
 - Autocomplete
+- Taglist
+- Mask
 
 ## Usage
 

package/autocomplete/autocomplete.ts

@@ -1,8 +1,10 @@
 import { default as dropdownFeature } from '../features/dropdown'
-import { autocompletes } from '../features/autocompletes'
+import { default as autocompleteFeature } from '../features/autocompletes'
+import { default as taglistFeature } from '../features/taglist'
 import {
   dropdownKeyHandler,
   dropdownDisplayHandler,
+  getSelections,
 } from '../features/dropdownFeatures'
 import { options, defaultIcon, localize } from '@formkit/inputs'
 import { FormKitProInput } from '@formkit/pro'
@@ -62,7 +64,7 @@ export const autocomplete: FormKitProInput = {
         listboxButton(icon('select')),
         listbox(),
         suffix(),
-        icon('prefix')
+        icon('suffix')
       ),
       $if(
         '$multiple && $selectionAppearance === option',
@@ -100,8 +102,9 @@ export const autocomplete: FormKitProInput = {
    */
   features: [
     options,
-    dropdownFeature(dropdownKeyHandler, dropdownDisplayHandler),
-    autocompletes,
+    taglistFeature,
+    dropdownFeature(dropdownKeyHandler, dropdownDisplayHandler(getSelections)),
+    autocompleteFeature(getSelections),
     defaultIcon('select', 'select'),
     defaultIcon('close', 'close'),
     defaultIcon('selected', 'check'),

package/autocomplete/index.mjs

@@ -1 +1 @@
-import{$if as e,createSectionFactory as i,createBaseSections as o}from"../index.mjs";import{icon as t}from"@formkit/inputs";const n=(e,i)=>()=>t(e,i),a=i("ac"),{outer:d,wrapper:l,inner:s,icon:r,label:$,prefix:p,suffix:c,help:u,messages:b,message:x}=o(a),f=a("input",(()=>({$el:"input",bind:"$attrs",attrs:{id:"$id",type:"text",onClick:"$handlers.click",onBlur:"$handlers.blur",onKeydown:"$handlers.keydown",onInput:"$handlers.input",value:"$inputText",placeholder:"$isLoadingOption && $ui.isLoading.value || $placeholder || undefined",tabindex:"0",role:"combobox",autocomplete:"off",autocapitalize:"none",readonly:"$attrs.readonly || $isLoadingOption || undefined",disabled:"$disabled || undefined",onTouchmove:"$handlers.touchmove",onTouchstart:"$handlers.touchmove",onTouchend:"$handlers.touchend","aria-autocomplete":"list","aria-expanded":"$expanded","aria-controls":'$expanded && $id + "_listbox" || undefined',"aria-describedBy":"$describedBy","aria-activedescendant":"$expanded && $activeDescendant || undefined"}}))),v=a("listboxButton",(()=>({$el:"button",attrs:{style:"$visibilityStyles",id:'$id + "_listbox_button"',type:"button",onClick:"$handlers.toggleListbox",tabindex:"-1","aria-haspopup":"true","aria-expanded":"$expanded","aria-controls":'$expanded && $id + "_listbox" || undefined'}}))),h=a("selection",(()=>({for:["option","$selections"],$el:"div"}))),m=a("selections",(()=>({$el:"div",attrs:{"aria-live":"polite"}}))),y=a("removeSelection",(()=>({$el:"button",if:"$_value !== undefined",attrs:{tabindex:"-1",type:"button",onClick:"$handlers.removeSelection($option)","aria-controls":"$id"}}))),g=a("optionLoading","span"),_=a("option",(()=>({$el:"div",if:"$_value !== undefined"}))),k=function(i){const o=i("dropdownWrapper",(()=>({$el:"div",attrs:{id:'$id + "_dropdown_wrapper"',"data-is-wrapper":!0,style:"$dropdownWrapperStyles",onScroll:"$handlers.scroll"}}))),t=i("listbox",(()=>({$el:"ul",if:"$expanded",attrs:{style:"$listboxStyles",id:'$id + "_listbox"',role:"listbox","aria-activedescendant":"$activeDescendant"}}))),a=i("listitem",(()=>({$el:"li",for:["option","index","$options"],bind:"$option.attrs",attrs:{id:'$id + "_listitem_" + $index',"data-disabled":"$option.attrs.disabled",key:"$option.value",onClick:"$handlers.selectOption($option)",role:"option","aria-selected":"$fns.isSelected($option)","data-is-active":"$fns.isActive($option)"}}))),d=i("loadMore",(()=>({$el:"li",if:"$state.loading || $state.hasNextPage",attrs:{id:'$id + "_load_more"',key:"loadMore",role:"option",onClick:"$handlers.loadMore","aria-selected":"false","data-is-active":"$fns.isActive($loadMoreOption)"}}))),l=i("loadMoreInner","span"),s=i("option","div");return()=>o(t(a(e("$fns.isSelected($option)",n("selected")),s("$option.label")),d(l(e("$state.loading",n("loader")),"$state.loading && $ui.isLoading.value || $ui.loadMore.value"))))}(a);export{a as createSection,u as help,r as icon,s as inner,f as input,$ as label,k as listbox,v as listboxButton,x as message,b as messages,_ as option,g as optionLoading,d as outer,p as prefix,y as removeSelection,h as selection,m as selections,c as suffix,l as wrapper};
+import{$if as e,createSectionFactory as t,createBaseSections as i}from"../index.mjs";import{icon as o}from"@formkit/inputs";const a=(e,t)=>()=>o(e,t),n=t("ac"),{outer:d,wrapper:l,inner:s,icon:r,label:$,prefix:p,suffix:c,help:u,messages:v,message:x}=i(n),b=n("input",(()=>({$el:"input",bind:"$attrs",attrs:{id:"$id",type:"text",onClick:"$handlers.click",onBlur:"$handlers.blur",onKeydown:"$handlers.keydown",onInput:"$handlers.input",value:"$inputText",placeholder:"$isLoadingOption && $ui.isLoading.value || $placeholder || undefined",tabindex:"0",role:"combobox",autocomplete:"off",autocapitalize:"none",readonly:"$attrs.readonly || $isLoadingOption || $multiple && $max && $value && $value.length >= $max && $hasHighlightedRange !== true || undefined","data-selection-appearance":"$selectionAppearance",disabled:"$disabled || undefined",onTouchmove:"$handlers.touchmove",onTouchstart:"$handlers.touchmove",onTouchend:"$handlers.touchend",onFocusout:"$handlers.focusOut","aria-autocomplete":"list","aria-expanded":"$expanded","aria-controls":'$expanded && $id + "_listbox" || undefined',"aria-describedBy":"$describedBy","aria-activedescendant":"$expanded && $activeDescendant || undefined"}}))),f=n("listboxButton",(()=>({$el:"button",attrs:{style:"$visibilityStyles",id:'$id + "_listbox_button"',type:"button",onClick:"$handlers.toggleListbox",tabindex:"-1","aria-haspopup":"true","aria-expanded":"$expanded","aria-controls":'$expanded && $id + "_listbox" || undefined'}}))),h=n("selection",(()=>({for:["option","index","$selections"],$el:"div",attrs:{key:"$option.value","data-value":"$option.value",tabindex:"-1",onClick:"$handlers.selectTag($option)"}}))),m=n("selections",(()=>({$el:"div",attrs:{"aria-live":"polite",id:'$id + "_selections"',onKeydown:"$handlers.keydown"}}))),y=n("removeSelection",(()=>({$el:"button",if:"$_value !== undefined",attrs:{id:'$id + "_remove_selection_" + $index',tabindex:"-1",type:"button",onClick:"$handlers.removeSelection($option)","aria-controls":"$id"}}))),g=n("optionLoading","span"),_=n("option",(()=>({$el:"div",if:"$_value !== undefined"}))),k=function(t){const i=t("dropdownWrapper",(()=>({$el:"div",attrs:{id:'$id + "_dropdown_wrapper"',"data-is-wrapper":!0,style:"$dropdownWrapperStyles",onScroll:"$handlers.scroll"}}))),o=t("listbox",(()=>({$el:"ul",if:"$expanded || $forceExpanded",attrs:{style:"$listboxStyles",id:'$id + "_listbox"',role:"listbox","aria-activedescendant":"$activeDescendant"}}))),n=t("listitem",(()=>({$el:"li",for:["option","index","$options"],bind:"$option.attrs",attrs:{id:'$id + "_listitem_" + $index',"data-disabled":"$option.attrs.disabled","data-value":"$option.value",key:"$option.value",onClick:"$handlers.selectOption($option)",role:"option","aria-selected":"$fns.isSelected($option)","data-is-active":"$fns.isActive($option)"}}))),d=t("loadMore",(()=>({$el:"li",if:"$state.loading || $state.hasNextPage",attrs:{id:'$id + "_load_more"',key:"loadMore",role:"option",onClick:"$handlers.loadMore","aria-selected":"false","data-is-active":"$fns.isActive($loadMoreOption)"}}))),l=t("loadMoreInner","span"),s=t("emptyMessage",(()=>({$el:"li",if:"$showEmptyMessage && $state.loading !== true",attrs:{id:'$id + "_empty_message"',key:"$emptyMessage",role:"presentation"}}))),r=t("emptyMessageInner","span"),$=t("option",(()=>({$el:"div",attrs:{"data-checked":"$fns.isSelected($option)"}})));return()=>i(o(s(r("$emptyMessage")),n(e("$fns.isSelected($option)",a("selected")),$("$option.label")),d(l(e("$state.loading",a("loader")),"$state.loading && $ui.isLoading.value || $ui.loadMore.value"))))}(n);export{n as createSection,u as help,r as icon,s as inner,b as input,$ as label,k as listbox,f as listboxButton,x as message,v as messages,_ as option,g as optionLoading,d as outer,p as prefix,y as removeSelection,h as selection,m as selections,c as suffix,l as wrapper};

package/datepicker/datepicker.ts

@@ -0,0 +1,115 @@
+import { FormKitProInput } from '@formkit/pro'
+import {
+  outer,
+  wrapper,
+  inner,
+  label,
+  prefix,
+  suffix,
+  help,
+  messages,
+  message,
+  icon,
+  input,
+  panelWrapper,
+  panel,
+  calendar,
+  months,
+  month,
+  week,
+  day,
+  next,
+  prev,
+  weekDay,
+  prevLabel,
+  nextLabel,
+  openButton,
+  years,
+  year,
+  panelHeader,
+  yearsHeader,
+  monthsHeader,
+  calendarHeader,
+  calendarWeeks,
+  daysHeader,
+  timeHeader,
+  yearButton,
+  monthButton,
+  dayButton,
+  time,
+  timeInput,
+  weekDays,
+} from '../sections/datepickerSections'
+import { useCalendar } from '../features/calendar'
+import { defaultIcon, localize } from '@formkit/inputs'
+
+/**
+ * Input definition for a datepicker input.
+ * @public
+ */
+export const datepicker: FormKitProInput = {
+  /**
+   * The actual schema of the input, or a function that returns the schema.
+   */
+  schema: outer(
+    wrapper(
+      label('$label'),
+      inner(
+        icon('prefix'),
+        prefix(),
+        input(),
+        panelWrapper(
+          panelHeader(
+            prev(prevLabel('$ui.prev.value'), icon('prev')),
+            yearsHeader('$decade'),
+            monthsHeader(yearButton()),
+            daysHeader(monthButton(), yearButton()),
+            timeHeader(monthButton(), dayButton(), yearButton()),
+            next(nextLabel('$ui.next.value'), icon('next'))
+          ),
+          panel(
+            years(year('$fns.format($year, $yearFormat)')),
+            months(month('$fns.format($month, $monthFormat)')),
+            calendar(
+              calendarHeader(
+                weekDays(weekDay('$fns.format($day, $weekdayFormat)'))
+              ),
+              calendarWeeks(week(day('$fns.format($day, $dateFormat)')))
+            ),
+            time(timeInput())
+          )
+        ),
+        openButton(icon('calendar')),
+        suffix(),
+        icon('suffix')
+      )
+    ),
+    help('$help'),
+    messages(message('$message.value'))
+  ),
+  /**
+   * The type of node, can be a list, group, or input.
+   */
+  type: 'input',
+  /**
+   * In the datepicker family of inputs.
+   */
+  family: 'date',
+  /**
+   * An array of extra props to accept for this input.
+   */
+  props: ['startingMonth'],
+  /**
+   * Additional features that make this input work.
+   */
+  features: [
+    useCalendar,
+    localize('next'),
+    localize('prev'),
+    localize('changeDate'),
+    localize('chooseDate'),
+    defaultIcon('next', 'right'),
+    defaultIcon('prev', 'left'),
+    defaultIcon('calendar', 'date'),
+  ],
+}

package/datepicker/index.mjs

@@ -0,0 +1 @@
+import{createSectionFactory as e,createBaseSections as a}from"../index.mjs";const t=e("dp"),{outer:n,wrapper:o,inner:r,icon:$,label:l,prefix:d,suffix:s,help:i,messages:y,message:m}=a(t),h=t("input",(()=>({$el:"input",bind:"$attrs",attrs:{id:"$id",onKeydown:"$handlers.inputKeydown",value:"$inputText",readonly:!0,onClick:"$handlers.open"}}))),u=t("panelWrapper",(()=>({$el:"div",if:"$expanded",attrs:{id:"$id + _panels",role:"dialog","aria-modal":"true","aria-label":"Choose date"}}))),p=t("next",(()=>({$el:"button",if:"$showPagination",attrs:{id:"$id + _next_button",type:"button",onClick:"$handlers.next"}}))),f=t("nextLabel","span"),b=t("prev",(()=>({$el:"button",if:"$showPagination",attrs:{id:"$id + _prev_button",type:"button",onClick:"$handlers.prev"}}))),c=t("prevLabel","span"),k=t("calendar",(()=>({if:'$panel === "day"',$el:"table",for:["month","$calendar"],attrs:{key:'$fns.format($month.monthDay, "D")'}}))),v=t("calendarWeeks",(()=>({$el:"tbody"}))),w=t("calendarHeader",(()=>({$el:"thead"}))),x=t("weekDays",(()=>({$el:"tr"}))),D=t("weekDay",(()=>({$el:"th",for:["day","$month.weeks.0"],attrs:{"aria-label":'$fns.format($day, "dddd")'}}))),_=t("week",(()=>({$el:"tr",for:["week","$month.weeks"]}))),C=t("day",(()=>({$el:"td",for:["day","$week"],attrs:{key:'$: "day" + $fns.format($day, "D")',onClick:"$handlers.setDate($day)",onKeydown:"$handlers.keyDown",onMouseenter:"$handlers.mouseEnter($day)",onMouseleave:"$handlers.mouseLeave",tabindex:'$fns.sameDay($day) && "0" || "-1"',"data-is-extra":"$fns.notInMonth($month.monthDay, $day)","aria-selected":"$fns.isSelected($day)","aria-label":'$fns.format($day, "long")'}}))),M=t("openButton",(()=>({$el:"button",attrs:{style:"$visibilityStyles",id:'$id + "_listbox_button"',type:"button",onClick:"$handlers.open","aria-label":'$value && ($ui.changeDate.value + ", " + $inputText) || $ui.chooseDate.value',"aria-haspopup":"true","aria-expanded":"$expanded","aria-controls":'$expanded && $id + "_listbox" || undefined'}}))),g=t("years",(()=>({if:'$panel === "year"',$el:"ul"}))),T=t("year",(()=>({for:["year","$years"],$el:"li",attrs:{key:'$: "year" + $fns.format($year, "YYYY")',onClick:"$handlers.setDate($year)",onKeydown:"$handlers.keyDown",onMouseenter:"$handlers.mouseEnter($year)",onMouseleave:"$handlers.mouseLeave",tabindex:'$fns.sameYear($year) && "0" || "-1"',"aria-selected":"$fns.isSelected($year)"}}))),B=t("months",(()=>({if:'$panel === "month"',$el:"ul"}))),H=t("month",(()=>({$el:"li",for:["month","$months"],attrs:{key:'$: "month" + $fns.format($month, "M")',onClick:"$handlers.setDate($month)",onKeydown:"$handlers.keyDown",onMouseenter:"$handlers.mouseEnter($month)",onMouseleave:"$handlers.mouseLeave",tabindex:'$fns.sameMonth($month) && "0" || "-1"',"aria-selected":"$fns.isSelected($month)"}}))),K=t("panelHeader",(()=>({$el:"header",attrs:{"aria-live":"polite"}}))),L=t("yearsHeader",(()=>({$el:"div",if:'$panel === "year"'}))),Y=t("monthsHeader",(()=>({$el:"div",if:'$panel === "month"'}))),S=t("daysHeader",(()=>({$el:"div",if:'$panel === "day"'}))),j=t("timeHeader",(()=>({$el:"div",if:'$panel === "time"'}))),E=t("yearButton",(()=>({$el:"button",attrs:{id:"$id + _year_button",onClick:"$handlers.jumpTo(year)"},children:"$fns.format($renderedDate, $yearFormat)"}))),F=t("monthButton",(()=>({$el:"button",attrs:{id:"$id + _month_button",onClick:"$handlers.jumpTo(month)"},children:"$fns.format($renderedDate, $monthButtonFormat)"}))),I=t("dayButton",(()=>({$el:"button",attrs:{id:"$id + _day_button",onClick:"$handlers.jumpTo(day)",tabindex:"2"},children:"$fns.format($renderedDate, $dayButtonFormat)"}))),P=t("time",(()=>({$el:"div",if:'$panel === "time"'}))),W=t("timeInput",(()=>({$el:"input",attrs:{type:"time",value:"$localTime",onInput:"$handlers.localTime",onKeydown:"$handlers.keyDown"}}))),q=t("panel","div");export{k as calendar,w as calendarHeader,v as calendarWeeks,t as createSection,C as day,I as dayButton,S as daysHeader,i as help,$ as icon,r as inner,h as input,l as label,m as message,y as messages,H as month,F as monthButton,B as months,Y as monthsHeader,p as next,f as nextLabel,M as openButton,n as outer,q as panel,K as panelHeader,u as panelWrapper,d as prefix,b as prev,c as prevLabel,s as suffix,P as time,j as timeHeader,W as timeInput,_ as week,D as weekDay,x as weekDays,o as wrapper,T as year,E as yearButton,g as years,L as yearsHeader};

package/dropdown/dropdown.ts

@@ -5,6 +5,7 @@ import {
   dropdownKeyHandler,
   dropdownDisplayHandler,
   dropdownSearch,
+  getSelections
 } from '../features/dropdownFeatures'
 import { options, defaultIcon, localize } from '@formkit/inputs'
 import { FormKitProInput } from '@formkit/pro'
@@ -23,6 +24,7 @@ import {
   messages,
   message,
   listbox,
+  placeholder,
   icon,
 } from '../sections/dropdownSections'
 import { $if } from '../compose'
@@ -43,12 +45,16 @@ export const dropdown: FormKitProInput = {
         icon('prefix'),
         prefix(),
         selector(
-          selection(
-            option(
-              $if(
-                '$state.loading',
-                optionLoading('$ui.isLoading.value'),
-                '$option.label'
+          $if(
+            '$option.isPlaceholder && $state.loading !== true',
+            placeholder('$option.label'),
+            selection(
+              option(
+                $if(
+                  '$state.loading',
+                  optionLoading('$ui.isLoading.value'),
+                  '$option.label'
+                )
               )
             )
           ),
@@ -57,7 +63,7 @@ export const dropdown: FormKitProInput = {
         ),
         listbox(),
         suffix(),
-        icon('prefix')
+        icon('suffix')
       )
     ),
     help('$help'),
@@ -84,7 +90,7 @@ export const dropdown: FormKitProInput = {
       singleSelector,
       dropdownOpener,
       dropdownKeyHandler,
-      dropdownDisplayHandler,
+      dropdownDisplayHandler(getSelections),
       dropdownSearch
     ),
     overscroll,

package/dropdown/index.mjs

@@ -1 +1 @@
-import{$if as e,createSectionFactory as o,createBaseSections as i}from"../index.mjs";import{icon as t}from"@formkit/inputs";const a=(e,o)=>()=>t(e,o),d=o("dd"),{outer:l,wrapper:n,inner:s,icon:r,label:p,prefix:$,suffix:c,help:u,messages:b,message:f}=i(d),x=d("selector",(()=>({$el:"button",attrs:{id:"$id",type:"button",onClick:"$handlers.click",onBlur:"$handlers.blur",onKeydown:"$handlers.keydown",tabindex:"0","aria-has-popup":"listbox","aria-expanded":"$expanded","aria-controls":'$expanded && $id + "_listbox" || undefined',"aria-describedBy":"$describedBy"}}))),h=d("selection","div"),v=d("placeholder",(()=>({$el:"div",attrs:{key:"placeholder","data-is-placeholder":"true"}}))),y=d("optionLoading","span"),m=d("option",(()=>({$el:"div",attrs:{"data-is-placeholder":"$option.isPlaceholder || undefined"}}))),k=function(o){const i=o("dropdownWrapper",(()=>({$el:"div",attrs:{id:'$id + "_dropdown_wrapper"',"data-is-wrapper":!0,style:"$dropdownWrapperStyles",onScroll:"$handlers.scroll"}}))),t=o("listbox",(()=>({$el:"ul",if:"$expanded",attrs:{style:"$listboxStyles",id:'$id + "_listbox"',role:"listbox","aria-activedescendant":"$activeDescendant"}}))),d=o("listitem",(()=>({$el:"li",for:["option","index","$options"],bind:"$option.attrs",attrs:{id:'$id + "_listitem_" + $index',"data-disabled":"$option.attrs.disabled",key:"$option.value",onClick:"$handlers.selectOption($option)",role:"option","aria-selected":"$fns.isSelected($option)","data-is-active":"$fns.isActive($option)"}}))),l=o("loadMore",(()=>({$el:"li",if:"$state.loading || $state.hasNextPage",attrs:{id:'$id + "_load_more"',key:"loadMore",role:"option",onClick:"$handlers.loadMore","aria-selected":"false","data-is-active":"$fns.isActive($loadMoreOption)"}}))),n=o("loadMoreInner","span"),s=o("option","div");return()=>i(t(d(e("$fns.isSelected($option)",a("selected")),s("$option.label")),l(n(e("$state.loading",a("loader")),"$state.loading && $ui.isLoading.value || $ui.loadMore.value"))))}(d);export{d as createSection,u as help,r as icon,s as inner,p as label,k as listbox,f as message,b as messages,m as option,y as optionLoading,l as outer,v as placeholder,$ as prefix,h as selection,x as selector,c as suffix,n as wrapper};
+import{$if as e,createSectionFactory as t,createBaseSections as o}from"../index.mjs";import{icon as a}from"@formkit/inputs";const i=(e,t)=>()=>a(e,t),d=t("dd"),{outer:s,wrapper:l,inner:n,icon:r,label:p,prefix:$,suffix:c,help:u,messages:f,message:y}=o(d),m=d("selector",(()=>({$el:"button",attrs:{id:"$id",type:"button",onClick:"$handlers.click",onBlur:"$handlers.blur",onKeydown:"$handlers.keydown",tabindex:"0","aria-has-popup":"listbox","aria-expanded":"$expanded","aria-controls":'$expanded && $id + "_listbox" || undefined',"aria-describedBy":"$describedBy"}}))),x=d("selection","div"),b=d("placeholder",(()=>({$el:"div",attrs:{key:"placeholder","data-is-placeholder":"true"}}))),h=d("optionLoading","span"),v=d("option",(()=>({$el:"div",attrs:{"data-is-placeholder":"$option.isPlaceholder || undefined"}}))),g=function(t){const o=t("dropdownWrapper",(()=>({$el:"div",attrs:{id:'$id + "_dropdown_wrapper"',"data-is-wrapper":!0,style:"$dropdownWrapperStyles",onScroll:"$handlers.scroll"}}))),a=t("listbox",(()=>({$el:"ul",if:"$expanded || $forceExpanded",attrs:{style:"$listboxStyles",id:'$id + "_listbox"',role:"listbox","aria-activedescendant":"$activeDescendant"}}))),d=t("listitem",(()=>({$el:"li",for:["option","index","$options"],bind:"$option.attrs",attrs:{id:'$id + "_listitem_" + $index',"data-disabled":"$option.attrs.disabled","data-value":"$option.value",key:"$option.value",onClick:"$handlers.selectOption($option)",role:"option","aria-selected":"$fns.isSelected($option)","data-is-active":"$fns.isActive($option)"}}))),s=t("loadMore",(()=>({$el:"li",if:"$state.loading || $state.hasNextPage",attrs:{id:'$id + "_load_more"',key:"loadMore",role:"option",onClick:"$handlers.loadMore","aria-selected":"false","data-is-active":"$fns.isActive($loadMoreOption)"}}))),l=t("loadMoreInner","span"),n=t("emptyMessage",(()=>({$el:"li",if:"$showEmptyMessage && $state.loading !== true",attrs:{id:'$id + "_empty_message"',key:"$emptyMessage",role:"presentation"}}))),r=t("emptyMessageInner","span"),p=t("option",(()=>({$el:"div",attrs:{"data-checked":"$fns.isSelected($option)"}})));return()=>o(a(n(r("$emptyMessage")),d(e("$fns.isSelected($option)",i("selected")),p("$option.label")),s(l(e("$state.loading",i("loader")),"$state.loading && $ui.isLoading.value || $ui.loadMore.value"))))}(d);export{d as createSection,u as help,r as icon,n as inner,p as label,g as listbox,y as message,f as messages,v as option,h as optionLoading,s as outer,b as placeholder,$ as prefix,x as selection,m as selector,c as suffix,l as wrapper};

package/genesis.css

@@ -1 +1 @@
-:root{--fk-dropdown-bg:#fff;--fk-dropdown-margin:.5em;--fk-dropdown-active-bg:rgba(0,0,0,.15);--fk-dropdown-shadow:0 0 1.25em rgba(0,0,0,.25);--fk-dropdown-load-more-bg:rgba(0,0,0,.07);--fk-selection-bg:#f4f4f4;--fk-repeater-border-color:#E2E2E2;--fk-repeater-controls-bg:#F6F6F6;--fk-repeater-controls-color:#555555;--fk-toggle-width:48px;--fk-toggle-track-color:rgba(0,0,0,.1);--fk-toggle-thumb-color:var(--fk-color-button);--fk-toggle-thumb-shadow:0 0 .25em var(--fk-toggle-track-color);--fk-toggle-margin-ratio:0.0833333;--fk-rating-on-color:#ffd700;--fk-rating-off-color:var(--fk-color-border)}[data-type="toggle"] .formkit-inner{box-shadow:none;display:inline-block;vertical-align:middle}[data-type="toggle"] .formkit-track{display:block;min-width:var(--fk-toggle-width);border-radius:var(--fk-toggle-width);background-color:var(--fk-color-border);transition:all .2s;overflow:hidden}[data-type="toggle"] input{position:absolute;left:-9999px;visibility:hidden;opacity:0}[data-type="toggle"] input:focus{outline:0}[data-type="toggle"] .formkit-thumb{aspect-ratio:1;background-color:var(--fk-toggle-thumb-color);background-color:white;background-image:var(--fk-bg-decorator);border-radius:calc(var(--fk-toggle-width) / 2);box-shadow:var(--fk-toggle-thumb-shadow);box-sizing:border-box;left:0;margin:calc(var(--fk-toggle-width) / 2 * var(--fk-toggle-margin-ratio));position:relative;transition:all .2s;width:calc(var(--fk-toggle-width) / 2 * (1 - var(--fk-toggle-margin-ratio) * 2));z-index:2;display:flex;align-items:center;justify-content:center}[data-type="toggle"] input:checked~.formkit-track{background-color:var(--fk-color-primary)}[data-type="toggle"] input:checked~.formkit-track .formkit-thumb{left:calc(100% - var(--fk-toggle-width) * var(--fk-toggle-margin-ratio));transform:translateX(-100%)}[data-type="toggle"]:focus-within input:checked~.formkit-track{box-shadow:0 0 .5em var(--fk-color-primary)}[data-type="toggle"]:focus-within .formkit-track{box-shadow:0 0 .5em var(--fk-color-border)}[data-type="toggle"] .formkit-wrapper{align-items:center}[data-type="toggle"] .formkit-label,.formkit-alt-label,.formkit-value-label{font-family:var(--fk-font-family-label);font-size:var(--fk-font-size-label);font-weight:var(--fk-font-weight-label);line-height:var(--fk-line-height-label);padding:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle}[data-type="toggle"] .formkit-label,.formkit-value-label{display:inline-block;margin-left:0.5em}.formkit-alt-label{display:block;padding-bottom:0.5em}.formkit-inner-label{position:absolute;right:.5em;font-size:.5em;top:50%;transform:translateY(-50%);font-weight:600;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:1}[data-type="toggle"] input:checked~.formkit-track .formkit-inner-label{right:auto;left:.5em}[data-type="toggle"] .formkit-thumb .formkit-icon{width:calc(100% - .25em);align-items:center;justify-content:center}[data-type="toggle"] .formkit-thumb .formkit-icon svg{max-width:none;max-height:none;width:100%;aspect-ratio:1}[data-type="toggle"] .formkit-thumb img{width:calc(100% - .25em);height:auto;display:block}[data-type="rating"] .formkit-inner .formkit-rating-icon{width:100%}[data-type="rating"] .formkit-inner .formkit-off-item-wrapper img,[data-type="rating"] .formkit-inner .formkit-on-item-wrapper img{width:100%}[data-type="rating"] .formkit-inner{width:9em;box-shadow:none}[data-type="rating"] .formkit-inner .formkit-on-item-wrapper svg,[data-type="rating"] .formkit-inner .formkit-off-item-wrapper svg{width:100%;height:auto;max-width:none;max-height:none}[data-type="rating"] .formkit-on-items{color:var(--fk-rating-on-color)}[data-type="rating"] .formkit-off-items{color:var(--fk-rating-off-color)}.formkit-selector{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;background-color:transparent;border:0;color:black;display:flex;flex-grow:1;font-size:inherit;font-size:var(--fk-font-size-input);justify-content:space-between;line-height:1.1;margin:0;padding:0;text-align:inherit}.formkit-selector{-webkit-appearance:none;-moz-appearance:none;appearance:none;color:black;border:0;padding:0;width:100%;text-align:inherit;background-color:transparent;font-size:inherit;line-height:1.1}.formkit-selector:focus{outline:0}.formkit-listbox:focus{outline:0}.formkit-selection{flex-grow:1}[data-family="dropdown"] .formkit-option:empty::before{content:'\00a0'}[data-family="dropdown"] .formkit-option{padding:var(--fk-padding-input);font-family:var(--fk-font-family-input);font-size:var(--fk-font-size-input);font-weight:var(--fk-font-weight-input);line-height:var(--fk-line-height-input)}[data-family="dropdown"] .formkit-option[data-is-placeholder]{color:var(--fk-color-placeholder)}.formkit-listitem .formkit-option{padding-left:0}[data-family="dropdown"] .formkit-placeholder,.formkit-option-loading{color:var(--fk-color-placeholder)}.formkit-outer:not([data-overscroll]) .formkit-dropdown-wrapper{box-shadow:var(--fk-dropdown-shadow);background-color:white;border-radius:var(--fk-border-radius);margin:var(--fk-dropdown-margin) 0;-ms-overflow-style:none;scrollbar-width:none}[data-overscroll] .formkit-dropdown-wrapper{border-radius:var(--fk-border-radius);background-color:transparent;margin:0}.formkit-dropdown-wrapper::-webkit-scrollbar{display:none}.formkit-listbox{background-color:white;border-radius:var(--fk-border-radius);left:0;list-style-type:none;margin:0;opacity:1;outline:0;overflow:hidden;padding:0}.formkit-listitem{position:relative;padding-left:1.75em}.formkit-listbox .formkit-listitem .formkit-selected-icon{display:block;position:absolute;width:.8em;top:50%;left:.5em;transform:translateY(-50%);color:white}.formkit-selected-icon svg{width:100%}.formkit-listitem[data-is-active]{background-color:var(--fk-dropdown-active-bg)}.formkit-listitem[aria-selected="true"]{background-color:var(--fk-color-primary);color:white}[data-overscroll] .formkit-listbox{overflow:hidden;border-radius:var(--fk-border-radius);background-color:var(--fk-dropdown-bg);box-shadow:var(--fk-dropdown-shadow)}.formkit-outer .formkit-inner .formkit-loader-icon{width:1em}.formkit-outer .formkit-selector .formkit-loader-icon{margin-left:auto}.formkit-outer .formkit-inner .formkit-loader-icon svg{min-width:none;max-width:none;width:15px;height:15px}.formkit-load-more{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;width:100%;padding:0;margin:0;cursor:pointer;text-align:center;color:var(--fk-color-primary)}.formkit-load-more:first-child,.formkit-outer[data-loading] .formkit-load-more{color:var(--fk-color-placeholder)}.formkit-load-more:hover,.formkit-load-more:focus,.formkit-load-more[data-is-active]{background-color:var(--fk-dropdown-active-bg)}.formkit-load-more-inner{display:flex;align-items:center;justify-content:center;padding:calc(var(--fk-padding-base) * 3);font-size:.875em}.formkit-load-more-inner .formkit-loader-icon{margin-right:var(--fk-margin-base)}.formkit-listbox-button,.formkit-remove-selection{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background-color:transparent;display:flex;align-self:stretch;padding:0;cursor:pointer;font-size:1em}[data-type="autocomplete"] .formkit-selection{display:flex;background-color:var(--fk-selection-bg);border-radius:var(--fk-border-radius);margin-top:var(--fk-margin-base)}[data-type="autocomplete"] .formkit-inner .formkit-selection{position:absolute;left:0;top:0;right:0;bottom:0;margin-top:0}[data-type="autocomplete"] .formkit-selection .formkit-option{flex-grow:1}[data-type="autocomplete"] .formkit-selection:empty{display:none}[data-type="repeater"]>.formkit-fieldset{max-width:none;padding:1.25em}[data-type="repeater"][data-invalid]>.formkit-fieldset{border-color:var(--fk-color-error)}[data-type="repeater"]>.formkit-fieldset>.formkit-outer{margin-bottom:0}[data-type="repeater"]>.formkit-fieldset:focus-within{border:1px solid var(--fk-color-border)}[data-type="repeater"]>.formkit-fieldset>.formkit-inner{box-shadow:none;display:block}.formkit-items{padding:0;margin:0;list-style-type:none}.formkit-item{border:1px solid var(--fk-repeater-border-color);border-radius:var(--fk-border-radius);margin-bottom:var(--fk-margin-base);display:flex}.formkit-content{flex-grow:1;padding:var(--fk-padding-input);display:flex;flex-direction:column;justify-content:center}.formkit-controls{list-style-type:none;padding:0;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:var(--fk-padding-input);background-color:var(--fk-repeater-controls-bg);border-radius:0 var(--fk-border-radius-tr) var(--fk-border-radius-br) 0}.formkit-controls>li{flex:0 0 1.25em;width:1.25em;margin:.5em 0;display:flex;align-items:center;justify-content:center}.formkit-controls>li>button{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;cursor:pointer;display:flex;font-size:1em;justify-content:center;padding:0;color:var(--fk-repeater-controls-color)}.formkit-controls>li>button:hover{color:var(--fk-color-primary)}.formkit-controls>li .formkit-icon{display:flex;align-items:center;justify-content:center;width:100%}.formkit-controls>li>button:disabled{color:var(--fk-color-disabled);cursor:default}.formkit-controls>li .formkit-icon svg{max-width:1.5em;max-height:1.5em}.formkit-control-label{position:absolute;left:-999px}:root{--fk-icon-spinner:PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNSAxNSI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNNy41NiwxMy44OGMtLjI4LDAtLjUtLjIyLS41LS41cy4yMi0uNSwuNS0uNWMyLjk2LDAsNS4zOC0yLjQxLDUuMzgtNS4zOFMxMC41MywyLjEyLDcuNTYsMi4xMmMtLjI4LDAtLjUtLjIyLS41LS41cy4yMi0uNSwuNS0uNWMzLjUyLDAsNi4zOCwyLjg2LDYuMzgsNi4zOHMtMi44Niw2LjM4LTYuMzgsNi4zOFoiLz48L3N2Zz4=;--fk-icon-star:PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNSAxNSI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMTEuNDEsOC40MWgwbDEuMTQtLjkzLDEuMTQtLjkzYy40OC0uMzksLjM3LS43NC0uMjUtLjc3bC0xLjU4LS4wOS0yLjUtLjE0LS40MS0xLjA1czAsMCwwLDBsLS41My0xLjM4LS41My0xLjM4Yy0uMjItLjU4LS41OS0uNTgtLjgxLDBsLTEuMDcsMi43NXMwLDAsMCwwbC0uNDEsMS4wNS0yLjUsLjE0LTEuNTgsLjA5Yy0uNjIsLjAzLS43MywuMzgtLjI1LC43N2wxLjE0LC45MywxLjE0LC45M2gwbC44NywuNzEtLjU3LDIuMTUtLjQ3LDEuNzljLS4xNiwuNiwuMTQsLjgxLC42NiwuNDhsMi40OC0xLjZoMHMuOTQtLjYxLC45NC0uNjFsLjk0LC42MWgwczEuMjQsLjgsMS4yNCwuOGwxLjI0LC44Yy41MiwuMzMsLjgyLC4xMiwuNjYtLjQ4bC0uNDctMS43OS0uNTctMi4xNSwuODctLjcxWiIvPjwvc3ZnPg==;--fk-icon-trash:PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTE0LjUsNEgxLjVjLS4yOCwwLS41LS4yMi0uNS0uNXMuMjItLjUsLjUtLjVIMTQuNWMuMjgsMCwuNSwuMjIsLjUsLjVzLS4yMiwuNS0uNSwuNVoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjxwYXRoIGQ9Ik0xMS4wMiwzLjgxbC0uNDQtMS40NmMtLjA2LS4yMS0uMjYtLjM2LS40OC0uMzZINS45Yy0uMjIsMC0uNDEsLjE0LS40OCwuMzZsLS40NCwxLjQ2LS45Ni0uMjksLjQ0LTEuNDZjLjE5LS42NCwuNzctMS4wNywxLjQ0LTEuMDdoNC4yYy42NywwLDEuMjQsLjQzLDEuNDQsMS4wN2wuNDQsMS40Ni0uOTYsLjI5WiIgZmlsbD0iY3VycmVudENvbG9yIi8+PHBhdGggZD0iTTExLjUzLDE1SDQuNDdjLS44MSwwLTEuNDctLjY0LTEuNS0xLjQ1bC0uMzQtOS44NywxLS4wMywuMzQsOS44N2MwLC4yNywuMjMsLjQ4LC41LC40OGg3LjA3Yy4yNywwLC40OS0uMjEsLjUtLjQ4bC4zNC05Ljg3LDEsLjAzLS4zNCw5Ljg3Yy0uMDMsLjgxLS42OSwxLjQ1LTEuNSwxLjQ1WiIgZmlsbD0iY3VycmVudENvbG9yIi8+PHBhdGggZD0iTTYuNSwxMS42MmMtLjI4LDAtLjUtLjIyLS41LS41VjcuMTJjMC0uMjgsLjIyLS41LC41LS41cy41LC4yMiwuNSwuNXY0YzAsLjI4LS4yMiwuNS0uNSwuNVoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjxwYXRoIGQ9Ik05LjUsMTEuNjJjLS4yOCwwLS41LS4yMi0uNS0uNVY3LjEyYzAtLjI4LC4yMi0uNSwuNS0uNXMuNSwuMjIsLjUsLjV2NGMwLC4yOC0uMjIsLjUtLjUsLjVaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz48L3N2Zz4=;--fk-icon-add:PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTgsMTVjLTMuODYsMC03LTMuMTQtNy03UzQuMTQsMSw4LDFzNywzLjE0LDcsNy0zLjE0LDctNyw3Wm0wLTEzYy0zLjMxLDAtNiwyLjY5LTYsNnMyLjY5LDYsNiw2LDYtMi42OSw2LTYtMi42OS02LTYtNloiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjxwYXRoIGQ9Ik04LDExLjVjLS4yOCwwLS41LS4yMi0uNS0uNVY1YzAtLjI4LC4yMi0uNSwuNS0uNXMuNSwuMjIsLjUsLjV2NmMwLC4yOC0uMjIsLjUtLjUsLjVaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz48cGF0aCBkPSJNMTEsOC41SDVjLS4yOCwwLS41LS4yMi0uNS0uNXMuMjItLjUsLjUtLjVoNmMuMjgsMCwuNSwuMjIsLjUsLjVzLS4yMiwuNS0uNSwuNVoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjwvc3ZnPg==;--fk-icon-arrowUp:PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5IDE2Ij48cGF0aCBkPSJNNC41LDE0Yy0uMjgsMC0uNS0uMjItLjUtLjVWNC41YzAtLjI4LC4yMi0uNSwuNS0uNXMuNSwuMjIsLjUsLjVWMTMuNWMwLC4yOC0uMjIsLjUtLjUsLjVaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz48cGF0aCBkPSJNOCw3LjVjLS4xMywwLS4yNi0uMDUtLjM1LS4xNWwtMy4xNS0zLjE1TDEuMzUsNy4zNWMtLjIsLjItLjUxLC4yLS43MSwwLS4yLS4yLS4yLS41MSwwLS43MWwzLjUtMy41Yy4yLS4yLC41MS0uMiwuNzEsMGwzLjUsMy41Yy4yLC4yLC4yLC41MSwwLC43MS0uMSwuMS0uMjMsLjE1LS4zNSwuMTVaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz48L3N2Zz4=;--fk-icon-arrowDown:PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5IDE2Ij48cGF0aCBkPSJNNC41LDEzYy0uMjgsMC0uNS0uMjItLjUtLjVWMy41YzAtLjI4LC4yMi0uNSwuNS0uNXMuNSwuMjIsLjUsLjVWMTIuNWMwLC4yOC0uMjIsLjUtLjUsLjVaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz48cGF0aCBkPSJNNC41LDE0Yy0uMTMsMC0uMjYtLjA1LS4zNS0uMTVMLjY1LDEwLjM1Yy0uMi0uMi0uMi0uNTEsMC0uNzEsLjItLjIsLjUxLS4yLC43MSwwbDMuMTUsMy4xNSwzLjE1LTMuMTVjLjItLjIsLjUxLS4yLC43MSwwLC4yLC4yLC4yLC41MSwwLC43MWwtMy41LDMuNWMtLjEsLjEtLjIzLC4xNS0uMzUsLjE1WiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+}@-webkit-keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.formkit-loader-icon svg{-webkit-animation:spin .5s infinite linear;animation:spin .5s infinite linear}
+:root{--fk-dropdown-bg:#fff;--fk-dropdown-margin:.5em;--fk-dropdown-active-bg:rgba(0,0,0,.15);--fk-dropdown-shadow:0 0 1.25em rgba(0,0,0,.25);--fk-dropdown-load-more-bg:rgba(0,0,0,.07);--fk-selection-bg:#f4f4f4;--fk-repeater-border-color:#E2E2E2;--fk-repeater-controls-bg:#F6F6F6;--fk-repeater-controls-color:#555555;--fk-toggle-width:48px;--fk-toggle-track-color:rgba(0,0,0,.1);--fk-toggle-thumb-color:var(--fk-color-button);--fk-toggle-thumb-shadow:0 0 .25em var(--fk-toggle-track-color);--fk-toggle-margin-ratio:0.0833333;--fk-rating-on-color:#ffd700;--fk-rating-off-color:var(--fk-color-border);--fk-day-bg:#ececec;--fk-day-bg-hover:white;--fk-day-color-hover:white;--fk-day-bg-selected:var(--fk-color-primary)}[data-type="toggle"] .formkit-inner{box-shadow:none;display:inline-block;vertical-align:middle}[data-type="toggle"] .formkit-track{display:block;min-width:var(--fk-toggle-width);border-radius:var(--fk-toggle-width);background-color:var(--fk-color-border);transition:all .2s;overflow:hidden}[data-type="toggle"] input{position:absolute;left:-9999px;opacity:0}[data-type="toggle"] input:focus{outline:0}[data-type="toggle"] .formkit-thumb{aspect-ratio:1;background-color:var(--fk-toggle-thumb-color);background-color:white;background-image:var(--fk-bg-decorator);border-radius:calc(var(--fk-toggle-width) / 2);box-shadow:var(--fk-toggle-thumb-shadow);box-sizing:border-box;left:0;margin:calc(var(--fk-toggle-width) / 2 * var(--fk-toggle-margin-ratio));position:relative;transition:all .2s;width:calc(var(--fk-toggle-width) / 2 * (1 - var(--fk-toggle-margin-ratio) * 2));z-index:2;display:flex;align-items:center;justify-content:center}[data-type="toggle"] input:checked~.formkit-track{background-color:var(--fk-color-primary)}[data-type="toggle"] input:checked~.formkit-track .formkit-thumb{left:calc(100% - var(--fk-toggle-width) * var(--fk-toggle-margin-ratio));transform:translateX(-100%)}[data-type="toggle"]:focus-within input:checked~.formkit-track{box-shadow:0 0 .5em var(--fk-color-primary)}[data-type="toggle"]:focus-within .formkit-track{box-shadow:0 0 .5em var(--fk-color-border)}[data-type="toggle"] .formkit-wrapper{align-items:center}[data-type="toggle"] .formkit-label,.formkit-alt-label,.formkit-value-label{font-family:var(--fk-font-family-label);font-size:var(--fk-font-size-label);font-weight:var(--fk-font-weight-label);line-height:var(--fk-line-height-label);padding:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle}[data-type="toggle"] .formkit-label,.formkit-value-label{display:inline-block;margin-left:0.5em}.formkit-alt-label{display:block;padding-bottom:0.5em}.formkit-inner-label{position:absolute;right:.5em;font-size:.5em;top:50%;transform:translateY(-50%);font-weight:600;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:1}[data-type="toggle"] input:checked~.formkit-track .formkit-inner-label{right:auto;left:.5em}[data-type="toggle"] .formkit-thumb .formkit-icon{width:calc(100% - .25em);align-items:center;justify-content:center}[data-type="toggle"] .formkit-thumb .formkit-icon svg{max-width:none;max-height:none;width:100%;aspect-ratio:1}[data-type="toggle"] .formkit-thumb img{width:calc(100% - .25em);height:auto;display:block}[data-type="rating"] .formkit-inner .formkit-rating-icon{width:100%}[data-type="rating"] .formkit-inner .formkit-off-item-wrapper img,[data-type="rating"] .formkit-inner .formkit-on-item-wrapper img{width:100%}[data-type="rating"] .formkit-inner{width:9em;box-shadow:none}[data-type="rating"] .formkit-inner .formkit-on-item-wrapper svg,[data-type="rating"] .formkit-inner .formkit-off-item-wrapper svg{width:100%;height:auto;max-width:none;max-height:none}[data-type="rating"] .formkit-on-items{color:var(--fk-rating-on-color)}[data-type="rating"] .formkit-off-items{color:var(--fk-rating-off-color)}.formkit-selector{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;background-color:transparent;border:0;color:black;display:flex;flex-grow:1;font-size:inherit;font-size:var(--fk-font-size-input);justify-content:space-between;line-height:1.1;margin:0;padding:0;text-align:inherit}.formkit-selector{-webkit-appearance:none;-moz-appearance:none;appearance:none;color:black;border:0;padding:0;width:100%;text-align:inherit;background-color:transparent;font-size:inherit;line-height:1.1}.formkit-selector:focus{outline:0}.formkit-listbox:focus{outline:0}.formkit-selection{flex-grow:1}[data-family="dropdown"] .formkit-option:empty::before{content:'\00a0'}[data-family="dropdown"] .formkit-option,.formkit-placeholder{padding:var(--fk-padding-input);font-family:var(--fk-font-family-input);font-size:var(--fk-font-size-input);font-weight:var(--fk-font-weight-input);line-height:var(--fk-line-height-input)}.formkit-listitem .formkit-option{padding-left:0}[data-family="dropdown"] .formkit-placeholder,.formkit-option-loading{color:var(--fk-color-placeholder)}.formkit-outer:not([data-overscroll]) .formkit-dropdown-wrapper{box-shadow:var(--fk-dropdown-shadow);background-color:white;border-radius:var(--fk-border-radius);margin:var(--fk-dropdown-margin) 0;-ms-overflow-style:none;scrollbar-width:none}[data-overscroll] .formkit-dropdown-wrapper{border-radius:var(--fk-border-radius);background-color:transparent;margin:0}.formkit-dropdown-wrapper::-webkit-scrollbar{display:none}.formkit-listbox{background-color:white;border-radius:var(--fk-border-radius);left:0;list-style-type:none;margin:0;opacity:1;outline:0;overflow:hidden;padding:0}.formkit-listbox:empty{display:none}.formkit-listitem{position:relative;padding-left:1.75em}[data-disabled="true"]{opacity:.5}[data-disabled="true"] .formkit-selector{background-color:var(--fk-bg-disabled)}.formkit-listbox .formkit-listitem .formkit-selected-icon{display:block;position:absolute;width:.8em;top:50%;left:.5em;transform:translateY(-50%);color:white}.formkit-selected-icon svg{width:100%}.formkit-listitem[data-is-active]{background-color:var(--fk-dropdown-active-bg)}.formkit-listitem[aria-selected="true"]{background-color:var(--fk-color-primary);color:white}[data-overscroll] .formkit-listbox{overflow:hidden;border-radius:var(--fk-border-radius);background-color:var(--fk-dropdown-bg);box-shadow:var(--fk-dropdown-shadow)}.formkit-outer .formkit-inner .formkit-loader-icon{width:1em}.formkit-outer .formkit-selector .formkit-loader-icon{margin-left:auto}.formkit-outer .formkit-inner .formkit-loader-icon svg{min-width:none;max-width:none;width:15px;height:15px}.formkit-load-more,.formkit-empty-message{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;width:100%;padding:0;margin:0;cursor:pointer;text-align:center;color:var(--fk-color-primary)}.formkit-empty-message{color:var(--fk-color-placeholder);font-style:italic}.formkit-load-more:first-child,.formkit-outer[data-loading] .formkit-load-more{color:var(--fk-color-placeholder)}.formkit-load-more:hover,.formkit-load-more:focus,.formkit-load-more[data-is-active]{background-color:var(--fk-dropdown-active-bg)}.formkit-load-more-inner,.formkit-empty-message-inner{display:flex;align-items:center;justify-content:center;padding:calc(var(--fk-padding-base) * 3);font-size:.875em}.formkit-load-more-inner .formkit-loader-icon{margin-right:var(--fk-margin-base)}.formkit-listbox-button,.formkit-remove-selection,.formkit-open-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background-color:transparent;display:flex;align-self:stretch;padding:0;cursor:pointer;font-size:1em}[data-type="autocomplete"] .formkit-selection{display:flex;background-color:var(--fk-selection-bg);border-radius:var(--fk-border-radius);margin-top:var(--fk-margin-base)}[data-type="autocomplete"][data-disabled="true"] .formkit-inner{background-color:var(--fk-bg-disabled)}[data-type="autocomplete"][data-disabled="true"] .formkit-listbox-button{background-color:var(--fk-bg-disabled);cursor:not-allowed}[data-type="autocomplete"] .formkit-inner .formkit-selection{position:absolute;left:0;top:0;right:0;bottom:0;margin-top:0}[data-type="autocomplete"] .formkit-selection .formkit-option{flex-grow:1;max-width:100%;text-overflow:ellipsis;overflow:hidden}[data-type="autocomplete"] .formkit-selection:empty{display:none}.formkit-selection:focus{background-color:var(--fk-color-primary);color:white}.formkit-selection:focus .formkit-remove-selection{color:white}[data-is-max="true"] .formkit-input:not([data-selection-appearance="text-input"]),[data-is-max="true"] .formkit-listbox-button{cursor:not-allowed}[data-is-max="true"] .formkit-input:focus{outline:none}[data-type="repeater"]>.formkit-fieldset{max-width:none;padding:1.25em}[data-type="repeater"][data-invalid]>.formkit-fieldset{border-color:var(--fk-color-error)}[data-type="repeater"]>.formkit-fieldset>.formkit-outer{margin-bottom:0}[data-type="repeater"]>.formkit-fieldset:focus-within{border:1px solid var(--fk-color-border)}[data-type="repeater"]>.formkit-fieldset>.formkit-inner{box-shadow:none;display:block}.formkit-items{padding:0;margin:0;list-style-type:none}.formkit-item{border:1px solid var(--fk-repeater-border-color);border-radius:var(--fk-border-radius);margin-bottom:var(--fk-margin-base);display:flex}.formkit-content{flex-grow:1;padding:var(--fk-padding-input);display:flex;flex-direction:column;justify-content:center}.formkit-controls{position:relative;list-style-type:none;padding:0;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:var(--fk-padding-input);background-color:var(--fk-repeater-controls-bg);border-radius:0 var(--fk-border-radius-tr) var(--fk-border-radius-br) 0}.formkit-controls>li{flex:0 0 1.25em;width:1.25em;margin:.5em 0;display:flex;align-items:center;justify-content:center}.formkit-controls>li>button{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;cursor:pointer;display:flex;font-size:1em;justify-content:center;padding:0;color:var(--fk-repeater-controls-color)}.formkit-controls>li>button:hover{color:var(--fk-color-primary)}.formkit-controls>li .formkit-icon{display:flex;align-items:center;justify-content:center;width:100%}.formkit-controls>li>button:disabled{color:var(--fk-color-disabled);cursor:default}.formkit-controls>li .formkit-icon svg{max-width:1.5em;max-height:1.5em}.formkit-control-label{position:absolute;left:-999px}[data-type="taglist"] .formkit-inner{background-color:transparent}[data-type="taglist"] .formkit-tags{display:flex;align-items:center;flex-wrap:wrap;width:100%;padding:0.5em}.formkit-tag-wrapper{background-color:inherit}[data-type="taglist"] .formkit-tag{display:flex;align-items:center;color:white;max-width:calc(100% - 0.25em);border-radius:2em;padding:0.4em 0.5em;font-size:0.8em;cursor:default;background-color:var(--fk-repeater-border-color);color:black;margin:0.25em 0}[data-type="taglist"] .formkit-tag-label{padding:0 0.5em;white-space:pre}[data-type="taglist"] .formkit-remove-selection{width:1em;height:1em;align-self:center;color:black}[data-type="taglist"] .formkit-remove-selection .formkit-icon{width:100%;height:100%}[data-type="taglist"][data-disabled="true"] .formkit-inner{background-color:var(--fk-bg-disabled)}[data-type="taglist"] .formkit-input:disabled{background-color:transparent}[data-type="taglist"] .formkit-remove-selection .formkit-icon{display:inline-block}[data-type="taglist"] .formkit-remove-selection .formkit-icon svg{width:100%;height:100%}[data-type="taglist"] .formkit-input{width:0%;flex-grow:1;padding:0.25em}[data-type="taglist"] .formkit-inner{display:flex;align-items:center;justify-content:space-between;width:100%}[data-type="taglist"] .formkit-selection:empty{display:none}#dropZone{opacity:0.999}.dropZone .formkit-tag-label{visibility:hidden}.dropZone .formkit-remove-selection{visibility:hidden}.dropZone .formkit-tag{background-color:var(--fk-color-primary)}.dropZone.formkit-selection{background-color:var(--fk-color-primary)}.dropZone .formkit-option{color:transparent}.formkit-tag-wrapper:focus .formkit-tag{background-color:var(--fk-color-primary);color:white}.formkit-tag-wrapper:focus .formkit-tag .formkit-remove-selection{color:white}.formkit-tag-wrapper:focus{outline:none}:root{--fk-icon-spinner:PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNSAxNSI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNNy41NiwxMy44OGMtLjI4LDAtLjUtLjIyLS41LS41cy4yMi0uNSwuNS0uNWMyLjk2LDAsNS4zOC0yLjQxLDUuMzgtNS4zOFMxMC41MywyLjEyLDcuNTYsMi4xMmMtLjI4LDAtLjUtLjIyLS41LS41cy4yMi0uNSwuNS0uNWMzLjUyLDAsNi4zOCwyLjg2LDYuMzgsNi4zOHMtMi44Niw2LjM4LTYuMzgsNi4zOFoiLz48L3N2Zz4=;--fk-icon-star:PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNSAxNSI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMTEuNDEsOC40MWgwbDEuMTQtLjkzLDEuMTQtLjkzYy40OC0uMzksLjM3LS43NC0uMjUtLjc3bC0xLjU4LS4wOS0yLjUtLjE0LS40MS0xLjA1czAsMCwwLDBsLS41My0xLjM4LS41My0xLjM4Yy0uMjItLjU4LS41OS0uNTgtLjgxLDBsLTEuMDcsMi43NXMwLDAsMCwwbC0uNDEsMS4wNS0yLjUsLjE0LTEuNTgsLjA5Yy0uNjIsLjAzLS43MywuMzgtLjI1LC43N2wxLjE0LC45MywxLjE0LC45M2gwbC44NywuNzEtLjU3LDIuMTUtLjQ3LDEuNzljLS4xNiwuNiwuMTQsLjgxLC42NiwuNDhsMi40OC0xLjZoMHMuOTQtLjYxLC45NC0uNjFsLjk0LC42MWgwczEuMjQsLjgsMS4yNCwuOGwxLjI0LC44Yy41MiwuMzMsLjgyLC4xMiwuNjYtLjQ4bC0uNDctMS43OS0uNTctMi4xNSwuODctLjcxWiIvPjwvc3ZnPg==;--fk-icon-trash:PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTE0LjUsNEgxLjVjLS4yOCwwLS41LS4yMi0uNS0uNXMuMjItLjUsLjUtLjVIMTQuNWMuMjgsMCwuNSwuMjIsLjUsLjVzLS4yMiwuNS0uNSwuNVoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjxwYXRoIGQ9Ik0xMS4wMiwzLjgxbC0uNDQtMS40NmMtLjA2LS4yMS0uMjYtLjM2LS40OC0uMzZINS45Yy0uMjIsMC0uNDEsLjE0LS40OCwuMzZsLS40NCwxLjQ2LS45Ni0uMjksLjQ0LTEuNDZjLjE5LS42NCwuNzctMS4wNywxLjQ0LTEuMDdoNC4yYy42NywwLDEuMjQsLjQzLDEuNDQsMS4wN2wuNDQsMS40Ni0uOTYsLjI5WiIgZmlsbD0iY3VycmVudENvbG9yIi8+PHBhdGggZD0iTTExLjUzLDE1SDQuNDdjLS44MSwwLTEuNDctLjY0LTEuNS0xLjQ1bC0uMzQtOS44NywxLS4wMywuMzQsOS44N2MwLC4yNywuMjMsLjQ4LC41LC40OGg3LjA3Yy4yNywwLC40OS0uMjEsLjUtLjQ4bC4zNC05Ljg3LDEsLjAzLS4zNCw5Ljg3Yy0uMDMsLjgxLS42OSwxLjQ1LTEuNSwxLjQ1WiIgZmlsbD0iY3VycmVudENvbG9yIi8+PHBhdGggZD0iTTYuNSwxMS42MmMtLjI4LDAtLjUtLjIyLS41LS41VjcuMTJjMC0uMjgsLjIyLS41LC41LS41cy41LC4yMiwuNSwuNXY0YzAsLjI4LS4yMiwuNS0uNSwuNVoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjxwYXRoIGQ9Ik05LjUsMTEuNjJjLS4yOCwwLS41LS4yMi0uNS0uNVY3LjEyYzAtLjI4LC4yMi0uNSwuNS0uNXMuNSwuMjIsLjUsLjV2NGMwLC4yOC0uMjIsLjUtLjUsLjVaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz48L3N2Zz4=;--fk-icon-add:PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTgsMTVjLTMuODYsMC03LTMuMTQtNy03UzQuMTQsMSw4LDFzNywzLjE0LDcsNy0zLjE0LDctNyw3Wm0wLTEzYy0zLjMxLDAtNiwyLjY5LTYsNnMyLjY5LDYsNiw2LDYtMi42OSw2LTYtMi42OS02LTYtNloiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjxwYXRoIGQ9Ik04LDExLjVjLS4yOCwwLS41LS4yMi0uNS0uNVY1YzAtLjI4LC4yMi0uNSwuNS0uNXMuNSwuMjIsLjUsLjV2NmMwLC4yOC0uMjIsLjUtLjUsLjVaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz48cGF0aCBkPSJNMTEsOC41SDVjLS4yOCwwLS41LS4yMi0uNS0uNXMuMjItLjUsLjUtLjVoNmMuMjgsMCwuNSwuMjIsLjUsLjVzLS4yMiwuNS0uNSwuNVoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjwvc3ZnPg==;--fk-icon-arrowUp:PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5IDE2Ij48cGF0aCBkPSJNNC41LDE0Yy0uMjgsMC0uNS0uMjItLjUtLjVWNC41YzAtLjI4LC4yMi0uNSwuNS0uNXMuNSwuMjIsLjUsLjVWMTMuNWMwLC4yOC0uMjIsLjUtLjUsLjVaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz48cGF0aCBkPSJNOCw3LjVjLS4xMywwLS4yNi0uMDUtLjM1LS4xNWwtMy4xNS0zLjE1TDEuMzUsNy4zNWMtLjIsLjItLjUxLC4yLS43MSwwLS4yLS4yLS4yLS41MSwwLS43MWwzLjUtMy41Yy4yLS4yLC41MS0uMiwuNzEsMGwzLjUsMy41Yy4yLC4yLC4yLC41MSwwLC43MS0uMSwuMS0uMjMsLjE1LS4zNSwuMTVaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz48L3N2Zz4=;--fk-icon-arrowDown:PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5IDE2Ij48cGF0aCBkPSJNNC41LDEzYy0uMjgsMC0uNS0uMjItLjUtLjVWMy41YzAtLjI4LC4yMi0uNSwuNS0uNXMuNSwuMjIsLjUsLjVWMTIuNWMwLC4yOC0uMjIsLjUtLjUsLjVaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz48cGF0aCBkPSJNNC41LDE0Yy0uMTMsMC0uMjYtLjA1LS4zNS0uMTVMLjY1LDEwLjM1Yy0uMi0uMi0uMi0uNTEsMC0uNzEsLjItLjIsLjUxLS4yLC43MSwwbDMuMTUsMy4xNSwzLjE1LTMuMTVjLjItLjIsLjUxLS4yLC43MSwwLC4yLC4yLC4yLC41MSwwLC43MWwtMy41LDMuNWMtLjEsLjEtLjIzLC4xNS0uMzUsLjE1WiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+;--fk-icon-right:PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3IDE2Ij48cGF0aCBkPSJNMS41LDEzYy0uMTMsMC0uMjYtLjA1LS4zNS0uMTUtLjItLjItLjItLjUxLDAtLjcxbDQuMTUtNC4xNUwxLjE1LDMuODVjLS4yLS4yLS4yLS41MSwwLS43MSwuMi0uMiwuNTEtLjIsLjcxLDBMNi4zNSw3LjY1Yy4yLC4yLC4yLC41MSwwLC43MUwxLjg1LDEyLjg1Yy0uMSwuMS0uMjMsLjE1LS4zNSwuMTVaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz48L3N2Zz4=;--fk-icon-left:PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3IDE2Ij48cGF0aCBkPSJNNS41LDEzYy0uMTMsMC0uMjYtLjA1LS4zNS0uMTVMLjY1LDguMzVjLS4yLS4yLS4yLS41MSwwLS43MUw1LjE1LDMuMTVjLjItLjIsLjUxLS4yLC43MSwwLC4yLC4yLC4yLC41MSwwLC43MUwxLjcxLDhsNC4xNSw0LjE1Yy4yLC4yLC4yLC41MSwwLC43MS0uMSwuMS0uMjMsLjE1LS4zNSwuMTVaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz48L3N2Zz4=;--fk-icon-date:PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTE0LjUsMTZIMS41Yy0uODMsMC0xLjUtLjY3LTEuNS0xLjVWMi41YzAtLjgzLC42Ny0xLjUsMS41LTEuNUgxNC41Yy44MywwLDEuNSwuNjcsMS41LDEuNVYxNC41YzAsLjgzLS42NywxLjUtMS41LDEuNVpNMS41LDJjLS4yOCwwLS41LC4yMi0uNSwuNVYxNC41YzAsLjI4LC4yMiwuNSwuNSwuNUgxNC41Yy4yOCwwLC41LS4yMiwuNS0uNVYyLjVjMC0uMjgtLjIyLS41LS41LS41SDEuNVoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjxwYXRoIGQ9Ik00LjUsNGMtLjI4LDAtLjUtLjIyLS41LS41Vi41YzAtLjI4LC4yMi0uNSwuNS0uNXMuNSwuMjIsLjUsLjVWMy41YzAsLjI4LS4yMiwuNS0uNSwuNVoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjxwYXRoIGQ9Ik0xMS41LDRjLS4yOCwwLS41LS4yMi0uNS0uNVYuNWMwLS4yOCwuMjItLjUsLjUtLjVzLjUsLjIyLC41LC41VjMuNWMwLC4yOC0uMjIsLjUtLjUsLjVaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz48cGF0aCBkPSJNMTUuNSw2SC41Yy0uMjgsMC0uNS0uMjItLjUtLjVzLjIyLS41LC41LS41SDE1LjVjLjI4LDAsLjUsLjIyLC41LC41cy0uMjIsLjUtLjUsLjVaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz48L3N2Zz4=}@-webkit-keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.formkit-loader-icon svg{-webkit-animation:spin .5s infinite linear;animation:spin .5s infinite linear}