@frollo/frollo-web-ui 8.5.4 → 9.0.0

package/esm/{fw-card-bsYbpPmW.js → fw-card-D45R4kN-.js}

@@ -1,6 +1,8 @@
-import { defineComponent, ref, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, toDisplayString, createCommentVNode, renderSlot } from 'vue';
+import { defineComponent, ref, computed, useCssVars, pushScopeId, popScopeId, createBlock, openBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, createCommentVNode, toDisplayString, renderSlot } from 'vue';
+import { u as useColours } from './get-root-colours-DCjlYelc.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 
-var script = defineComponent({
+var __default__ = defineComponent({
   name: 'FwCard',
   props: {
     /**
@@ -41,8 +43,9 @@ var script = defineComponent({
     }
   },
   setup: function setup(props) {
-    var linkClass = ref( // eslint-disable-next-line max-len
-    "block cursor-pointer focus:outline-none ring-offset-3 focus:ring focus:ring-primary transform-none transition-transform hover:-translate-y-1");
+    var linkClass = ref("block cursor-pointer focus:outline-none ring-offset-3 focus:ring focus:ring-primary transform-none transition-transform hover:-translate-y-1");
+    var _useColours = useColours(),
+      cardHeaderBg = _useColours.primaryFade5;
     var componentName = computed(function () {
       if (props.to) return 'router-link';
       if (props.href) return 'a';
@@ -50,14 +53,30 @@ var script = defineComponent({
     });
     return {
       componentName: componentName,
-      linkClass: linkClass
+      linkClass: linkClass,
+      cardHeaderBg: cardHeaderBg
     };
   }
 });
+var __injectCSSVars__ = function __injectCSSVars__() {
+  useCssVars(function (_ctx) {
+    return {
+      "64253360": _ctx.cardHeaderBg
+    };
+  });
+};
+var __setup__ = __default__.setup;
+__default__.setup = __setup__ ? function (props, ctx) {
+  __injectCSSVars__();
+  return __setup__(props, ctx);
+} : __injectCSSVars__;
 
+var _withScopeId = function _withScopeId(n) {
+  return pushScopeId("data-v-2a072d5e"), n = n(), popScopeId(), n;
+};
 var _hoisted_1 = {
   key: 0,
-  "class": "fw-card--header px-8 py-4 bg-grey-lightest rounded-t border-opacity-0"
+  "class": "fw-card--header px-8 py-4 rounded-t border-opacity-0"
 };
 var _hoisted_2 = {
   key: 0,
@@ -69,7 +88,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     to: _ctx.to ? _ctx.to : null,
     href: _ctx.href ? _ctx.href : null,
     tabindex: _ctx.to ? 0 : null,
-    "class": normalizeClass(["fw-card rounded", [_ctx.to || _ctx.href || !!_ctx.$attrs.onClick ? _ctx.linkClass : '', _ctx.isBordered ? 'border border-grey-40' : 'shadow-card']])
+    "class": normalizeClass(["fw-card rounded", [_ctx.to || _ctx.href || !!_ctx.$attrs.onClick ? _ctx.linkClass : '', _ctx.isBordered ? 'border border-grey-60' : 'shadow-card']])
   }, {
     "default": withCtx(function () {
       return [_ctx.title || _ctx.prefixTitle ? (openBlock(), createElementBlock("h4", _hoisted_1, [_ctx.prefixTitle ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(_ctx.prefixTitle), 1)) : createCommentVNode("", true), _ctx.title ? (openBlock(), createElementBlock("div", {
@@ -85,6 +104,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8, ["to", "href", "tabindex", "class"]);
 }
 
-script.render = render;
+var css_248z = ".fw-card--header[data-v-2a072d5e]{background-color:var(--64253360)}";
+var stylesheet = ".fw-card--header[data-v-2a072d5e]{background-color:var(--64253360)}";
+styleInject(css_248z);
+
+__default__.render = render;
+__default__.__scopeId = "data-v-2a072d5e";
 
-export { script as s };
+export { __default__ as _ };

package/esm/fw-card.js

@@ -1,2 +1,4 @@
-export { s as FwCard } from './fw-card-bsYbpPmW.js';
+export { _ as FwCard } from './fw-card-D45R4kN-.js';
 import 'vue';
+import './get-root-colours-DCjlYelc.js';
+import './style-inject.es-tgCJW-Cu.js';

package/esm/fw-checkbox.js

@@ -1,9 +1,10 @@
-import { defineComponent, pushScopeId, popScopeId, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, mergeProps, createCommentVNode, Transition, toDisplayString } from 'vue';
+import { defineComponent, useCssVars, pushScopeId, popScopeId, resolveComponent, createElementBlock, openBlock, createVNode, withCtx, createElementVNode, createCommentVNode, mergeProps, Transition, toDisplayString } from 'vue';
 import { a as Field } from './vee-validate.esm-3ptvCDR1.js';
-import { u as uniqueId } from './uniqueId-DK6xzFd8.js';
+import { u as uniqueId } from './uniqueId-DZdGzBh8.js';
+import { u as useColours } from './get-root-colours-DCjlYelc.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 
-var script = defineComponent({
+var __default__ = defineComponent({
   name: 'FwCheckbox',
   components: {
     InputField: Field
@@ -61,14 +62,31 @@ var script = defineComponent({
   },
   setup: function setup() {
     var uuid = uniqueId();
+    var _useColours = useColours(),
+      primaryFade5 = _useColours.primaryFade5,
+      colorErrorTextFade5 = _useColours.colorErrorTextFade5;
     return {
-      uuid: uuid
+      uuid: uuid,
+      primaryFade5: primaryFade5,
+      colorErrorTextFade5: colorErrorTextFade5
     };
   }
 });
+var __injectCSSVars__ = function __injectCSSVars__() {
+  useCssVars(function (_ctx) {
+    return {
+      "9b4d156a": _ctx.primaryFade5
+    };
+  });
+};
+var __setup__ = __default__.setup;
+__default__.setup = __setup__ ? function (props, ctx) {
+  __injectCSSVars__();
+  return __setup__(props, ctx);
+} : __injectCSSVars__;
 
 var _withScopeId = function _withScopeId(n) {
-  return pushScopeId("data-v-18f4083f"), n = n(), popScopeId(), n;
+  return pushScopeId("data-v-941e534e"), n = n(), popScopeId(), n;
 };
 var _hoisted_1 = {
   "class": "fw-checkbox w-full"
@@ -77,19 +95,20 @@ var _hoisted_2 = {
   "class": "flex flex-col"
 };
 var _hoisted_3 = ["for"];
-var _hoisted_4 = ["value", "name", "id"];
-var _hoisted_5 = ["value", "name", "id", "checked"];
+var _hoisted_4 = ["id", "value", "name"];
+var _hoisted_5 = ["id", "value", "name", "checked"];
 var _hoisted_6 = ["innerHTML"];
 var _hoisted_7 = {
   key: 0,
-  "class": "italic text-sm font-medium min-h-[21px]"
+  "class": "italic text-p-small min-h-[21px]"
 };
 var _hoisted_8 = {
   key: 0,
-  "class": "text-error"
+  "class": "text-brand-error-text"
 };
 var _hoisted_9 = {
-  key: 1
+  key: 1,
+  "class": "text-brand-text2"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_InputField = resolveComponent("InputField");
@@ -110,23 +129,23 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }, [_ctx.isChecked === undefined ? (openBlock(), createElementBlock("input", mergeProps({
         key: 0
       }, field, {
+        id: "fw-checkbox-".concat(_ctx.name, "-").concat(_ctx.uuid),
         value: _ctx.value ? _ctx.value : _ctx.name,
         name: "fw-checkbox-".concat(_ctx.name, "-").concat(_ctx.uuid),
-        id: "fw-checkbox-".concat(_ctx.name, "-").concat(_ctx.uuid),
         type: "checkbox",
-        "class": "text-link w-6 h-6 cursor-pointer bg-white border-grey-light border rounded"
+        "class": "bg-white w-6 h-6 cursor-pointer border-brand-text2 border rounded"
       }), null, 16, _hoisted_4)) : (openBlock(), createElementBlock("input", mergeProps({
         key: 1
       }, field, {
+        id: "fw-checkbox-".concat(_ctx.name, "-").concat(_ctx.uuid),
         value: _ctx.value ? _ctx.value : _ctx.name,
         name: "fw-checkbox-".concat(_ctx.name, "-").concat(_ctx.uuid),
-        id: "fw-checkbox-".concat(_ctx.name, "-").concat(_ctx.uuid),
         type: "checkbox",
         checked: _ctx.isChecked,
-        "class": "text-link w-6 h-6 cursor-pointer bg-white border-grey-light border rounded"
+        "class": "bg-white w-6 h-6 cursor-pointer border-brand-text2 border rounded"
       }), null, 16, _hoisted_5)), _ctx.label ? (openBlock(), createElementBlock("span", {
         key: 2,
-        "class": "ml-2",
+        "class": "ml-2 text-p text-body",
         innerHTML: _ctx.label
       }, null, 8, _hoisted_6)) : createCommentVNode("", true)], 8, _hoisted_3), _ctx.enableErrors ? (openBlock(), createElementBlock("div", _hoisted_7, [createVNode(Transition, {
         name: "fwFadeIn",
@@ -142,11 +161,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8, ["name", "value", "rules"])]);
 }
 
-var css_248z = ".fwFadeIn-enter-active[data-v-18f4083f]{-webkit-animation:fwFadeIn-18f4083f .35s;-moz-animation:fwFadeIn-18f4083f .35s;animation:fwFadeIn-18f4083f .35s;-webkit-transition:opacity .35s ease-in;-moz-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active[data-v-18f4083f]{animation:fwFadeIn-18f4083f .35s reverse;-webkit-transition:opacity .35s ease-out;-moz-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn-18f4083f{0%{opacity:0}to{opacity:1}}@-moz-keyframes fwFadeIn-18f4083f{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn-18f4083f{0%{opacity:0}to{opacity:1}}.fw-checkbox input[data-v-18f4083f]{-ms-flex-negative:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-origin:border-box;display:inline-block;-webkit-flex-shrink:0;flex-shrink:0;-webkit-transition:background .2s ease-in;-moz-transition:background .2s ease-in;transition:background .2s ease-in;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.fw-checkbox input[data-v-18f4083f]:checked{background-color:currentColor;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='3 3 10 10' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:transparent}";
-var stylesheet = ".fwFadeIn-enter-active[data-v-18f4083f]{-webkit-animation:fwFadeIn-18f4083f .35s;-moz-animation:fwFadeIn-18f4083f .35s;animation:fwFadeIn-18f4083f .35s;-webkit-transition:opacity .35s ease-in;-moz-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active[data-v-18f4083f]{animation:fwFadeIn-18f4083f .35s reverse;-webkit-transition:opacity .35s ease-out;-moz-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn-18f4083f{0%{opacity:0}to{opacity:1}}@-moz-keyframes fwFadeIn-18f4083f{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn-18f4083f{0%{opacity:0}to{opacity:1}}.fw-checkbox input[data-v-18f4083f]{-ms-flex-negative:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-origin:border-box;display:inline-block;-webkit-flex-shrink:0;flex-shrink:0;-webkit-transition:background .2s ease-in;-moz-transition:background .2s ease-in;transition:background .2s ease-in;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.fw-checkbox input[data-v-18f4083f]:checked{background-color:currentColor;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='3 3 10 10' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:transparent}";
+var css_248z = ".fwFadeIn-enter-active[data-v-941e534e]{-webkit-animation:fwFadeIn-941e534e .35s;-moz-animation:fwFadeIn-941e534e .35s;animation:fwFadeIn-941e534e .35s;-webkit-transition:opacity .35s ease-in;-moz-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active[data-v-941e534e]{animation:fwFadeIn-941e534e .35s reverse;-webkit-transition:opacity .35s ease-out;-moz-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn-941e534e{0%{opacity:0}to{opacity:1}}@-moz-keyframes fwFadeIn-941e534e{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn-941e534e{0%{opacity:0}to{opacity:1}}.fw-checkbox input[data-v-941e534e]{-ms-flex-negative:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-origin:border-box;background-size:60% 100%;display:inline-block;-webkit-flex-shrink:0;flex-shrink:0;-webkit-transition:background-color .15s ease-in;-moz-transition:background-color .15s ease-in;transition:background-color .15s ease-in;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.fw-checkbox input[data-v-941e534e]:hover{background-color:var(--9b4d156a);border-color:var(--colorPrimary)}.fw-checkbox input[data-v-941e534e]:checked{background-color:var(--colorPrimary);background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.753.219c.319.294.319.769 0 1.034l-8.25 8.25c-.266.319-.74.319-1.034 0l-4.25-4.25c-.292-.265-.292-.74 0-1.034a.754.754 0 0 1 1.061 0L5 7.94 12.719.219c.293-.292.769-.292 1.034 0Z' fill='%23F7F7F7'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:60%;border-color:var(--colorPrimary)}";
+var stylesheet = ".fwFadeIn-enter-active[data-v-941e534e]{-webkit-animation:fwFadeIn-941e534e .35s;-moz-animation:fwFadeIn-941e534e .35s;animation:fwFadeIn-941e534e .35s;-webkit-transition:opacity .35s ease-in;-moz-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active[data-v-941e534e]{animation:fwFadeIn-941e534e .35s reverse;-webkit-transition:opacity .35s ease-out;-moz-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn-941e534e{0%{opacity:0}to{opacity:1}}@-moz-keyframes fwFadeIn-941e534e{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn-941e534e{0%{opacity:0}to{opacity:1}}.fw-checkbox input[data-v-941e534e]{-ms-flex-negative:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-origin:border-box;background-size:60% 100%;display:inline-block;-webkit-flex-shrink:0;flex-shrink:0;-webkit-transition:background-color .15s ease-in;-moz-transition:background-color .15s ease-in;transition:background-color .15s ease-in;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.fw-checkbox input[data-v-941e534e]:hover{background-color:var(--9b4d156a);border-color:var(--colorPrimary)}.fw-checkbox input[data-v-941e534e]:checked{background-color:var(--colorPrimary);background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.753.219c.319.294.319.769 0 1.034l-8.25 8.25c-.266.319-.74.319-1.034 0l-4.25-4.25c-.292-.265-.292-.74 0-1.034a.754.754 0 0 1 1.061 0L5 7.94 12.719.219c.293-.292.769-.292 1.034 0Z' fill='%23F7F7F7'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:60%;border-color:var(--colorPrimary)}";
 styleInject(css_248z);
 
-script.render = render;
-script.__scopeId = "data-v-18f4083f";
+__default__.render = render;
+__default__.__scopeId = "data-v-941e534e";
 
-export { script as FwCheckbox };
+export { __default__ as FwCheckbox };

package/esm/fw-date-picker.js

@@ -1,11 +1,10 @@
-import { reactive, computed, ref, watch, onUnmounted, provide, inject, onMounted, watchEffect, defineComponent, nextTick, toRefs, openBlock, createElementBlock, normalizeClass, createVNode, Transition, withCtx, mergeProps, renderSlot, createTextVNode, toDisplayString, createElementVNode, createCommentVNode, unref, createBlock, resolveDynamicComponent, normalizeProps, Fragment, renderList, normalizeStyle, withKeys, withDirectives, toRef, resolveComponent, resolveDirective, toHandlers, withModifiers, isRef, guardReactiveProps, useCssVars } from 'vue';
-import { a as render$1 } from './index-CzZMBMV_.js';
-import { u as uniqueId } from './uniqueId-DK6xzFd8.js';
+import { reactive, computed, ref, watch, onUnmounted, provide, inject, onMounted, watchEffect, defineComponent, nextTick, toRefs, createElementBlock, openBlock, normalizeClass, createVNode, Transition, withCtx, createCommentVNode, mergeProps, renderSlot, createElementVNode, createTextVNode, toDisplayString, unref, createBlock, resolveDynamicComponent, normalizeProps, Fragment, renderList, normalizeStyle, withKeys, withDirectives, toRef, resolveComponent, resolveDirective, toHandlers, withModifiers, isRef, guardReactiveProps, useCssVars } from 'vue';
+import { u as uniqueId } from './uniqueId-DZdGzBh8.js';
 import { c as createPopper } from './index-BVcOAKar.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
-import { u as useColours } from './get-root-colours-DYEoJPEb.js';
+import { u as useColours } from './get-root-colours-DCjlYelc.js';
 import { u as useField } from './vee-validate.esm-3ptvCDR1.js';
-import './check--YD4Ts6g.js';
+import { c as render$1 } from './index-BsEH8YYr.js';
 
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -534,9 +533,9 @@ var _nodeUtil = {
     _nodeUtilExports = v;
   }
 };
-(function(module, exports) {
+(function(module, exports$1) {
   var freeGlobal2 = _freeGlobal;
-  var freeExports = exports && !exports.nodeType && exports;
+  var freeExports = exports$1 && !exports$1.nodeType && exports$1;
   var freeModule = freeExports && true && module && !module.nodeType && module;
   var moduleExports = freeModule && freeModule.exports === freeExports;
   var freeProcess = moduleExports && freeGlobal2.process;
@@ -827,9 +826,9 @@ function stubFalse() {
   return false;
 }
 var stubFalse_1 = stubFalse;
-(function(module, exports) {
+(function(module, exports$1) {
   var root2 = _root, stubFalse2 = stubFalse_1;
-  var freeExports = exports && !exports.nodeType && exports;
+  var freeExports = exports$1 && !exports$1.nodeType && exports$1;
   var freeModule = freeExports && true && module && !module.nodeType && module;
   var moduleExports = freeModule && freeModule.exports === freeExports;
   var Buffer2 = moduleExports ? root2.Buffer : void 0;
@@ -1468,9 +1467,9 @@ var _cloneBuffer = {
     _cloneBufferExports = v;
   }
 };
-(function(module, exports) {
+(function(module, exports$1) {
   var root2 = _root;
-  var freeExports = exports && !exports.nodeType && exports;
+  var freeExports = exports$1 && !exports$1.nodeType && exports$1;
   var freeModule = freeExports && true && module && !module.nodeType && module;
   var moduleExports = freeModule && freeModule.exports === freeExports;
   var Buffer2 = moduleExports ? root2.Buffer : void 0, allocUnsafe = Buffer2 ? Buffer2.allocUnsafe : void 0;
@@ -1771,11 +1770,11 @@ var toInteger$2 = {
     toIntegerExports = v;
   }
 };
-(function(module, exports) {
-  Object.defineProperty(exports, "__esModule", {
+(function(module, exports$1) {
+  Object.defineProperty(exports$1, "__esModule", {
     value: true
   });
-  exports.default = toInteger2;
+  exports$1.default = toInteger2;
   function toInteger2(dirtyNumber) {
     if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {
       return NaN;
@@ -1786,7 +1785,7 @@ var toInteger$2 = {
     }
     return number < 0 ? Math.ceil(number) : Math.floor(number);
   }
-  module.exports = exports.default;
+  module.exports = exports$1.default;
 })(toInteger$2, toIntegerExports);
 const toInteger$1 = /* @__PURE__ */ getDefaultExportFromCjs(toIntegerExports);
 var getTimezoneOffsetInMillisecondsExports = {};
@@ -1798,17 +1797,17 @@ var getTimezoneOffsetInMilliseconds$2 = {
     getTimezoneOffsetInMillisecondsExports = v;
   }
 };
-(function(module, exports) {
-  Object.defineProperty(exports, "__esModule", {
+(function(module, exports$1) {
+  Object.defineProperty(exports$1, "__esModule", {
     value: true
   });
-  exports.default = getTimezoneOffsetInMilliseconds2;
+  exports$1.default = getTimezoneOffsetInMilliseconds2;
   function getTimezoneOffsetInMilliseconds2(date) {
     var utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()));
     utcDate.setUTCFullYear(date.getFullYear());
     return date.getTime() - utcDate.getTime();
   }
-  module.exports = exports.default;
+  module.exports = exports$1.default;
 })(getTimezoneOffsetInMilliseconds$2, getTimezoneOffsetInMillisecondsExports);
 const getTimezoneOffsetInMilliseconds$1 = /* @__PURE__ */ getDefaultExportFromCjs(getTimezoneOffsetInMillisecondsExports);
 function tzTokenizeDate(date, timeZone) {
@@ -8278,13 +8277,13 @@ var __default__ = defineComponent({
     CalendarDaySvg: render$1,
     DatePicker: DatePicker
   },
-  emits: ['update:modelValue'],
   props: {
     /**
      * The date-picker v-model
      */
     modelValue: {
-      type: [String, Object]
+      type: [String, Object],
+      "default": null
     },
     /**
      * The name of the input field. Must be unique per form.
@@ -8386,9 +8385,10 @@ var __default__ = defineComponent({
       type: [Object, String, Function]
     }
   },
+  emits: ['update:modelValue'],
   setup: function setup(props, ctx) {
     var uuid = uniqueId();
-    var inputBaseClass = ref("border-2 text-body border-grey-40 focus:outline-none focus:ring-2 focus:ring-primary block w-full p-2.5");
+    var inputBaseClass = ref("caret-primary bg-white border-grey-100 hover:border-brand-text3 focus:border-brand-text3 \n      text-p text-body placeholder:text-p placeholder:text-grey-100 border outline-none block w-full px-2.5 py-3");
     var _useColours = useColours(),
       primaryFade5 = _useColours.primaryFade5,
       primaryFade10 = _useColours.primaryFade10,
@@ -8435,14 +8435,14 @@ var __default__ = defineComponent({
 var __injectCSSVars__ = function __injectCSSVars__() {
   useCssVars(function (_ctx) {
     return {
-      "248f74ee": _ctx.primaryFade5,
-      "6d5f2886": _ctx.primaryFade10,
-      "6d5f28a5": _ctx.primaryFade20,
-      "6d5f28c4": _ctx.primaryFade30,
-      "6d5f28e3": _ctx.primaryFade40,
-      "6d5f2902": _ctx.primaryFade50,
-      "6d5f2940": _ctx.primaryFade70,
-      "6d5f295f": _ctx.primaryFade80
+      "1690492e": _ctx.primaryFade5,
+      "890e4774": _ctx.primaryFade10,
+      "890e4736": _ctx.primaryFade20,
+      "890e46f8": _ctx.primaryFade30,
+      "890e46ba": _ctx.primaryFade40,
+      "890e467c": _ctx.primaryFade50,
+      "890e4600": _ctx.primaryFade70,
+      "890e45c2": _ctx.primaryFade80
     };
   });
 };
@@ -8459,7 +8459,6 @@ var _hoisted_2 = {
   "class": "flex flex-col"
 };
 var _hoisted_3 = {
-  key: 0,
   "class": "flex flex-col w-full space-y-4 md:flex-row md:space-x-4 md:space-y-0"
 };
 var _hoisted_4 = {
@@ -8469,7 +8468,7 @@ var _hoisted_5 = ["for"];
 var _hoisted_6 = {
   "class": "flex absolute w-9 h-full inset-y-0 left-0 items-center pl-3 pointer-events-none"
 };
-var _hoisted_7 = ["value", "id", "tabindex", "name", "placeholder"];
+var _hoisted_7 = ["id", "value", "tabindex", "name", "placeholder", "onClick"];
 var _hoisted_8 = {
   "class": "w-full md:w-1/2"
 };
@@ -8477,41 +8476,40 @@ var _hoisted_9 = ["for"];
 var _hoisted_10 = {
   "class": "flex absolute w-9 h-full inset-y-0 left-0 items-center pl-3 pointer-events-none"
 };
-var _hoisted_11 = ["value", "id", "tabindex", "name", "placeholder"];
+var _hoisted_11 = ["id", "value", "tabindex", "name", "placeholder", "onClick"];
 var _hoisted_12 = {
-  key: 1
+  "class": "flex flex-col"
 };
 var _hoisted_13 = ["for"];
 var _hoisted_14 = {
   key: 0,
-  "class": "text-error ml-0.5"
+  "class": "text-brand-error-text ml-0.5"
 };
 var _hoisted_15 = {
   "class": "flex absolute w-9 h-full inset-y-0 left-0 items-center pl-3 pointer-events-none"
 };
-var _hoisted_16 = ["value", "id", "tabindex", "name", "label", "placeholder"];
+var _hoisted_16 = ["id", "value", "tabindex", "name", "label", "placeholder", "onClick"];
 var _hoisted_17 = {
-  key: 0,
-  "class": "text-left text-sm min-h-[21px]"
+  key: 2,
+  "class": "text-left text-base min-h-[21px]"
 };
 var _hoisted_18 = {
   key: 0,
-  "class": "text-error"
+  "class": "text-brand-error-text"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_CalendarDaySvg = resolveComponent("CalendarDaySvg");
   var _component_DatePicker = resolveComponent("DatePicker");
-  return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(_component_DatePicker, {
+  return openBlock(), createElementBlock("div", _hoisted_1, [_ctx.isRange === true && typeof _ctx.dateModel !== 'string' ? (openBlock(), createBlock(_component_DatePicker, {
+    key: 0,
     modelValue: _ctx.dateModel,
     "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
       return _ctx.dateModel = $event;
     }),
     modelModifiers: {
+      range: true,
       string: true
     },
-    "model-modifiers": {
-      range: _ctx.isRange
-    },
     color: "primary",
     mode: "date",
     masks: {
@@ -8524,66 +8522,100 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, {
     "default": withCtx(function (_ref) {
       var inputValue = _ref.inputValue,
-        inputEvents = _ref.inputEvents;
-      return [createElementVNode("div", _hoisted_2, [_ctx.isRange === true ? (openBlock(), createElementBlock("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [_ctx.startLabel ? (openBlock(), createElementBlock("label", {
+        togglePopover = _ref.togglePopover;
+      return [createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [_ctx.startLabel ? (openBlock(), createElementBlock("label", {
         key: 0,
         "for": "fw-date-picker-input-start-".concat(_ctx.name, "-").concat(_ctx.uuid),
-        "class": "block mb-2 font-medium"
-      }, toDisplayString(_ctx.startLabel), 9, _hoisted_5)) : createCommentVNode("", true), createElementVNode("div", {
-        "class": normalizeClass(["relative", inputValue.start ? 'text-grey-base' : 'text-grey-light'])
+        "class": normalizeClass([[(_ctx.errorMessage || _ctx.errors[0]) && _ctx.meta.touched ? 'text-brand-error-text' : 'text-brand-text2'], "block mb-2 text-base"])
+      }, toDisplayString(_ctx.startLabel), 11, _hoisted_5)) : createCommentVNode("", true), createElementVNode("div", {
+        "class": normalizeClass(["relative", inputValue.start ? 'text-brand-text3' : 'text-grey-100'])
       }, [createElementVNode("div", _hoisted_6, [createVNode(_component_CalendarDaySvg, {
-        "class": "h-full"
-      })]), createElementVNode("input", mergeProps({
-        value: inputValue.start
-      }, toHandlers(inputEvents.start, true), {
+        name: "calendar-day",
+        "class": "size-6"
+      })]), createElementVNode("input", {
         id: "fw-date-picker-input-start-".concat(_ctx.name, "-").concat(_ctx.uuid),
+        value: inputValue.start,
         tabindex: _ctx.tabindex,
         name: "".concat(_ctx.name, "-start"),
-        "class": ["pl-10", [_ctx.inputBaseClass, _ctx.rounded ? 'rounded-full' : 'rounded']],
+        "class": normalizeClass(["pl-10", [_ctx.inputBaseClass, _ctx.rounded ? 'rounded-full' : 'rounded-lg']]),
         type: "text",
         autocomplete: "off",
-        placeholder: _ctx.startPlaceholder
-      }), null, 16, _hoisted_7)], 2)]), createElementVNode("div", _hoisted_8, [_ctx.endLabel ? (openBlock(), createElementBlock("label", {
+        placeholder: _ctx.startPlaceholder,
+        onClick: function onClick($event) {
+          return togglePopover();
+        }
+      }, null, 10, _hoisted_7)], 2)]), createElementVNode("div", _hoisted_8, [_ctx.endLabel ? (openBlock(), createElementBlock("label", {
         key: 0,
         "for": "fw-date-picker-input-end-".concat(_ctx.name, "-").concat(_ctx.uuid),
-        "class": "block mb-2 font-medium"
-      }, toDisplayString(_ctx.endLabel), 9, _hoisted_9)) : createCommentVNode("", true), createElementVNode("div", {
-        "class": normalizeClass(["relative", inputValue.end ? 'text-grey-base' : 'text-grey-light'])
+        "class": normalizeClass([[(_ctx.errorMessage || _ctx.errors[0]) && _ctx.meta.touched ? 'text-brand-error-text' : 'text-brand-text2'], "block mb-2 text-base"])
+      }, toDisplayString(_ctx.endLabel), 11, _hoisted_9)) : createCommentVNode("", true), createElementVNode("div", {
+        "class": normalizeClass(["relative", inputValue.end ? 'text-brand-text3' : 'text-grey-100'])
       }, [createElementVNode("div", _hoisted_10, [createVNode(_component_CalendarDaySvg, {
-        "class": "h-full"
-      })]), createElementVNode("input", mergeProps({
-        value: inputValue.end
-      }, toHandlers(inputEvents.end, true), {
+        name: "calendar-day",
+        "class": "size-6"
+      })]), createElementVNode("input", {
         id: "fw-date-picker-input-end-".concat(_ctx.name, "-").concat(_ctx.uuid),
+        value: inputValue.end,
         tabindex: _ctx.tabindex,
         name: "".concat(_ctx.name, "-end"),
-        "class": ["pl-10", [_ctx.inputBaseClass, _ctx.rounded ? 'rounded-full' : 'rounded']],
+        "class": normalizeClass(["pl-10", [_ctx.inputBaseClass, _ctx.rounded ? 'rounded-full' : 'rounded-lg']]),
         type: "text",
         autocomplete: "off",
-        placeholder: _ctx.endPlaceholder
-      }), null, 16, _hoisted_11)], 2)])])) : (openBlock(), createElementBlock("div", _hoisted_12, [_ctx.label ? (openBlock(), createElementBlock("label", {
+        placeholder: _ctx.endPlaceholder,
+        onClick: function onClick($event) {
+          return togglePopover();
+        }
+      }, null, 10, _hoisted_11)], 2)])])])];
+    }),
+    _: 1
+  }, 8, ["modelValue", "max-date", "min-date", "is-required"])) : (openBlock(), createBlock(_component_DatePicker, {
+    key: 1,
+    modelValue: _ctx.dateModel,
+    "onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
+      return _ctx.dateModel = $event;
+    }),
+    modelModifiers: {
+      string: true
+    },
+    color: "primary",
+    mode: "date",
+    masks: {
+      modelValue: 'YYYY-MM-DD'
+    },
+    "max-date": _ctx.maxDate,
+    "min-date": _ctx.minDate,
+    "update-on-input": false,
+    "is-required": _ctx.required
+  }, {
+    "default": withCtx(function (_ref2) {
+      var inputValue = _ref2.inputValue,
+        togglePopover = _ref2.togglePopover;
+      return [createElementVNode("div", _hoisted_12, [createElementVNode("div", null, [_ctx.label ? (openBlock(), createElementBlock("label", {
         key: 0,
         "for": "fw-date-picker-input-".concat(_ctx.name, "-").concat(_ctx.uuid),
-        "class": "block mb-2 font-medium"
-      }, [createTextVNode(toDisplayString(_ctx.label) + " ", 1), _ctx.required ? (openBlock(), createElementBlock("span", _hoisted_14, "*")) : createCommentVNode("", true)], 8, _hoisted_13)) : createCommentVNode("", true), createElementVNode("div", {
-        "class": normalizeClass(["relative", inputValue ? 'text-grey-base' : 'text-grey-light'])
+        "class": normalizeClass([[(_ctx.errorMessage || _ctx.errors[0]) && _ctx.meta.touched ? 'text-brand-error-text' : 'text-brand-text2'], "block mb-2 text-base"])
+      }, [createTextVNode(toDisplayString(_ctx.label) + " ", 1), _ctx.required ? (openBlock(), createElementBlock("span", _hoisted_14, "*")) : createCommentVNode("", true)], 10, _hoisted_13)) : createCommentVNode("", true), createElementVNode("div", {
+        "class": normalizeClass(["relative", inputValue ? 'text-brand-text3' : 'text-grey-100'])
       }, [createElementVNode("div", _hoisted_15, [createVNode(_component_CalendarDaySvg, {
-        "class": "h-full"
-      })]), createElementVNode("input", mergeProps({
-        value: inputValue
-      }, toHandlers(inputEvents, true), {
+        name: "calendar-day",
+        "class": "size-6"
+      })]), createElementVNode("input", {
         id: "fw-date-picker-input-".concat(_ctx.name, "-").concat(_ctx.uuid),
+        value: inputValue,
         tabindex: _ctx.tabindex,
         name: _ctx.name,
         label: _ctx.label,
-        "class": ["pl-10", [_ctx.inputBaseClass, _ctx.rounded ? 'rounded-full' : 'rounded']],
+        "class": normalizeClass(["pl-10", [_ctx.inputBaseClass, _ctx.rounded ? 'rounded-full' : 'rounded-lg']]),
         type: "text",
         autocomplete: "off",
-        placeholder: _ctx.placeholder
-      }), null, 16, _hoisted_16)], 2)]))])];
+        placeholder: _ctx.placeholder,
+        onClick: function onClick($event) {
+          return togglePopover();
+        }
+      }, null, 10, _hoisted_16)], 2)])])];
     }),
     _: 1
-  }, 8, ["modelValue", "model-modifiers", "max-date", "min-date", "is-required"]), _ctx.enableErrors ? (openBlock(), createElementBlock("div", _hoisted_17, [createVNode(Transition, {
+  }, 8, ["modelValue", "max-date", "min-date", "is-required"])), _ctx.enableErrors ? (openBlock(), createElementBlock("div", _hoisted_17, [createVNode(Transition, {
     name: "fwFadeIn",
     mode: "out-in"
   }, {
@@ -8594,8 +8626,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   })])) : createCommentVNode("", true)]);
 }
 
-var css_248z = ".fw-date-picker .vc-primary{--vc-accent-50:var(--248f74ee);--vc-accent-100:var(--6d5f2886);--vc-accent-200:var(--6d5f28a5);--vc-accent-300:var(--6d5f28c4);--vc-accent-400:var(--6d5f28e3);--vc-accent-500:var(--6d5f2902);--vc-accent-600:var(--colorPrimary);--vc-accent-700:var(--6d5f2940);--vc-accent-800:var(--6d5f295f);--vc-accent-900:var(--colorBody)}";
-var stylesheet = ".fw-date-picker .vc-primary{--vc-accent-50:var(--248f74ee);--vc-accent-100:var(--6d5f2886);--vc-accent-200:var(--6d5f28a5);--vc-accent-300:var(--6d5f28c4);--vc-accent-400:var(--6d5f28e3);--vc-accent-500:var(--6d5f2902);--vc-accent-600:var(--colorPrimary);--vc-accent-700:var(--6d5f2940);--vc-accent-800:var(--6d5f295f);--vc-accent-900:var(--colorBody)}";
+var css_248z = ".fw-date-picker .vc-primary{--vc-accent-50:var(--1690492e);--vc-accent-100:var(--890e4774);--vc-accent-200:var(--890e4736);--vc-accent-300:var(--890e46f8);--vc-accent-400:var(--890e46ba);--vc-accent-500:var(--890e467c);--vc-accent-600:var(--colorPrimary);--vc-accent-700:var(--890e4600);--vc-accent-800:var(--890e45c2);--vc-accent-900:var(--colorBody)}.fw-date-picker input:focus{background-color:var(--1690492e)}";
+var stylesheet = ".fw-date-picker .vc-primary{--vc-accent-50:var(--1690492e);--vc-accent-100:var(--890e4774);--vc-accent-200:var(--890e4736);--vc-accent-300:var(--890e46f8);--vc-accent-400:var(--890e46ba);--vc-accent-500:var(--890e467c);--vc-accent-600:var(--colorPrimary);--vc-accent-700:var(--890e4600);--vc-accent-800:var(--890e45c2);--vc-accent-900:var(--colorBody)}.fw-date-picker input:focus{background-color:var(--1690492e)}";
 styleInject(css_248z);
 
 __default__.render = render;