@expcat/tigercat-vue 1.1.0 → 1.2.14

package/dist/chunk-UANF7XE5.mjs

@@ -1,7 +1,25 @@
-import { h, defineComponent, ref, shallowRef, onMounted, onBeforeUnmount, computed } from 'vue';
-import { backTopIconPath, createBackTopVisibilityController, classNames, backTopButtonClasses, backTopContainerClasses, backTopVisibleClasses, backTopHiddenClasses, coerceClassValue, mergeStyleValues, scrollToTop } from '@expcat/tigercat-core';
-
 // src/components/BackTop.ts
+import {
+  defineComponent,
+  h,
+  ref,
+  shallowRef,
+  computed,
+  onMounted,
+  onBeforeUnmount
+} from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  createBackTopVisibilityController,
+  mergeStyleValues,
+  scrollToTop,
+  backTopButtonClasses,
+  backTopContainerClasses,
+  backTopHiddenClasses,
+  backTopVisibleClasses,
+  backTopIconPath
+} from "@expcat/tigercat-core";
 var DefaultIcon = h(
   "svg",
   {
@@ -113,4 +131,7 @@ var BackTop = defineComponent({
 });
 var BackTop_default = BackTop;
 
-export { BackTop, BackTop_default };
+export {
+  BackTop,
+  BackTop_default
+};

package/dist/chunk-UHVUKLHF.js

@@ -1,10 +1,14 @@
-'use strict';
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/ChartCanvas.ts
+var _vue = require('vue');
 
-var vue = require('vue');
-var tigercatCore = require('@expcat/tigercat-core');
 
-// src/components/ChartCanvas.ts
-var ChartCanvas = vue.defineComponent({
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var ChartCanvas = _vue.defineComponent.call(void 0, {
   name: "TigerChartCanvas",
   inheritAttrs: false,
   props: {
@@ -35,26 +39,26 @@ var ChartCanvas = vue.defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
-    const svgRef = vue.ref(null);
-    const observedSize = vue.ref(null);
-    const resizeController = tigercatCore.createChartResizeObserverController({
+    const svgRef = _vue.ref.call(void 0, null);
+    const observedSize = _vue.ref.call(void 0, null);
+    const resizeController = _tigercatcore.createChartResizeObserverController.call(void 0, {
       onSizeChange: (size) => {
         observedSize.value = size;
       }
     });
-    const resolvedSize = vue.computed(
-      () => tigercatCore.resolveResponsiveChartSize(
+    const resolvedSize = _vue.computed.call(void 0, 
+      () => _tigercatcore.resolveResponsiveChartSize.call(void 0, 
         { width: props.width, height: props.height },
         props.responsive ? observedSize.value : null
       )
     );
-    const innerRect = vue.computed(
-      () => tigercatCore.getChartInnerRect(resolvedSize.value.width, resolvedSize.value.height, props.padding)
+    const innerRect = _vue.computed.call(void 0, 
+      () => _tigercatcore.getChartInnerRect.call(void 0, resolvedSize.value.width, resolvedSize.value.height, props.padding)
     );
-    const svgClasses = vue.computed(
-      () => tigercatCore.classNames(tigercatCore.chartCanvasBaseClasses, tigercatCore.coerceClassValue(attrs.class), props.className)
+    const svgClasses = _vue.computed.call(void 0, 
+      () => _tigercatcore.classNames.call(void 0, _tigercatcore.chartCanvasBaseClasses, _tigercatcore.coerceClassValue.call(void 0, attrs.class), props.className)
     );
-    const svgStyle = vue.computed(() => ({
+    const svgStyle = _vue.computed.call(void 0, () => ({
       ...attrs.style
     }));
     const syncResponsiveObserver = () => {
@@ -63,18 +67,18 @@ var ChartCanvas = vue.defineComponent({
         observedSize.value = null;
         return;
       }
-      const target = svgRef.value?.parentElement;
+      const target = _optionalChain([svgRef, 'access', _ => _.value, 'optionalAccess', _2 => _2.parentElement]);
       if (target) {
         resizeController.observe(target);
       }
     };
-    vue.onMounted(syncResponsiveObserver);
-    vue.watch(() => props.responsive, syncResponsiveObserver);
-    vue.onBeforeUnmount(() => resizeController.disconnect());
+    _vue.onMounted.call(void 0, syncResponsiveObserver);
+    _vue.watch.call(void 0, () => props.responsive, syncResponsiveObserver);
+    _vue.onBeforeUnmount.call(void 0, () => resizeController.disconnect());
     return () => {
       const rect = innerRect.value;
       const size = resolvedSize.value;
-      return vue.h(
+      return _vue.h.call(void 0, 
         "svg",
         {
           ...attrs,
@@ -86,14 +90,14 @@ var ChartCanvas = vue.defineComponent({
           style: svgStyle.value
         },
         [
-          props.title ? vue.h("title", props.title) : null,
-          props.desc ? vue.h("desc", props.desc) : null,
-          vue.h(
+          props.title ? _vue.h.call(void 0, "title", props.title) : null,
+          props.desc ? _vue.h.call(void 0, "desc", props.desc) : null,
+          _vue.h.call(void 0, 
             "g",
             {
               transform: `translate(${rect.x}, ${rect.y})`
             },
-            slots.default?.({ innerRect: rect })
+            _optionalChain([slots, 'access', _3 => _3.default, 'optionalCall', _4 => _4({ innerRect: rect })])
           )
         ].filter(Boolean)
       );
@@ -102,5 +106,7 @@ var ChartCanvas = vue.defineComponent({
 });
 var ChartCanvas_default = ChartCanvas;
 
-exports.ChartCanvas = ChartCanvas;
-exports.ChartCanvas_default = ChartCanvas_default;
+
+
+
+exports.ChartCanvas = ChartCanvas; exports.ChartCanvas_default = ChartCanvas_default;

package/dist/chunk-UI7N2ZDU.js

@@ -0,0 +1,142 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/components/Countdown.ts
+var _vue = require('vue');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var Countdown = _vue.defineComponent.call(void 0, {
+  name: "TigerCountdown",
+  inheritAttrs: false,
+  props: {
+    value: {
+      type: [String, Number, Date],
+      default: void 0
+    },
+    now: {
+      type: [String, Number, Date],
+      default: void 0
+    },
+    format: {
+      type: String,
+      default: _tigercatcore.COUNTDOWN_DEFAULT_FORMAT
+    },
+    interval: {
+      type: Number,
+      default: _tigercatcore.COUNTDOWN_DEFAULT_INTERVAL_MS
+    },
+    title: {
+      type: String,
+      default: void 0
+    },
+    prefix: {
+      type: String,
+      default: void 0
+    },
+    suffix: {
+      type: String,
+      default: void 0
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    ariaLabel: {
+      type: String,
+      default: void 0
+    },
+    className: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["change", "finish"],
+  setup(props, { attrs, emit }) {
+    const remaining = _vue.ref.call(void 0, _tigercatcore.getCountdownRemaining.call(void 0, props.value, props.now));
+    const formatted = _vue.computed.call(void 0, () => _tigercatcore.formatCountdown.call(void 0, remaining.value, props.format));
+    let finished = remaining.value <= 0;
+    let mounted = false;
+    let timerId = null;
+    const stopTimer = () => {
+      if (timerId !== null) clearInterval(timerId);
+      timerId = null;
+    };
+    const tick = () => {
+      const nextRemaining = _tigercatcore.getCountdownRemaining.call(void 0, props.value);
+      const payload = _tigercatcore.createCountdownPayload.call(void 0, nextRemaining, props.format);
+      remaining.value = nextRemaining;
+      emit("change", payload);
+      if (nextRemaining <= 0 && !finished) {
+        finished = true;
+        emit("finish", payload);
+        stopTimer();
+      }
+    };
+    const setupTimer = () => {
+      stopTimer();
+      if (!mounted || props.interval <= 0 || props.value === void 0) return;
+      timerId = setInterval(tick, props.interval);
+    };
+    _vue.watch.call(void 0, 
+      () => [props.value, props.now],
+      () => {
+        remaining.value = _tigercatcore.getCountdownRemaining.call(void 0, props.value, props.now);
+        finished = remaining.value <= 0;
+        setupTimer();
+      },
+      { immediate: true }
+    );
+    _vue.watch.call(void 0, 
+      () => [props.interval, props.format],
+      () => setupTimer()
+    );
+    _vue.onMounted.call(void 0, () => {
+      mounted = true;
+      setupTimer();
+    });
+    _vue.onBeforeUnmount.call(void 0, () => {
+      mounted = false;
+      stopTimer();
+    });
+    return () => _vue.h.call(void 0, 
+      "div",
+      {
+        ...attrs,
+        class: _tigercatcore.classNames.call(void 0, _tigercatcore.countdownBaseClasses, props.className, _tigercatcore.coerceClassValue.call(void 0, attrs.class))
+      },
+      [
+        props.title ? _vue.h.call(void 0, "div", { class: _tigercatcore.getCountdownTitleClasses.call(void 0, props.size) }, props.title) : null,
+        _vue.h.call(void 0, "div", { class: _tigercatcore.countdownValueWrapperClasses }, [
+          props.prefix ? _vue.h.call(void 0, "span", { class: _tigercatcore.countdownPrefixClasses }, props.prefix) : null,
+          _vue.h.call(void 0, 
+            "span",
+            {
+              class: _tigercatcore.getCountdownValueClasses.call(void 0, props.size),
+              role: "timer",
+              "aria-live": "polite",
+              "aria-label": props.ariaLabel
+            },
+            formatted.value
+          ),
+          props.suffix ? _vue.h.call(void 0, "span", { class: _tigercatcore.countdownSuffixClasses }, props.suffix) : null
+        ])
+      ]
+    );
+  }
+});
+var Countdown_default = Countdown;
+
+
+
+
+exports.Countdown = Countdown; exports.Countdown_default = Countdown_default;

package/dist/{chunk-5RA26RRN.js → chunk-ULUH6UNV.js}

@@ -1,14 +1,32 @@
-'use strict';
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var chunkGZK6R2E3_js = require('./chunk-GZK6R2E3.js');
-var chunkACYYQJ6M_js = require('./chunk-ACYYQJ6M.js');
-var chunkHBFFINAI_js = require('./chunk-HBFFINAI.js');
-var chunkZOUJFFG4_js = require('./chunk-ZOUJFFG4.js');
-var chunkUHVUKLHF_js = require('./chunk-UHVUKLHF.js');
-var vue = require('vue');
-var tigercatCore = require('@expcat/tigercat-core');
+var _chunk2VOZFFW6js = require('./chunk-2VOZFFW6.js');
 
-var SunburstChart = vue.defineComponent({
+
+var _chunkACYYQJ6Mjs = require('./chunk-ACYYQJ6M.js');
+
+
+var _chunkHBFFINAIjs = require('./chunk-HBFFINAI.js');
+
+
+var _chunkZOUJFFG4js = require('./chunk-ZOUJFFG4.js');
+
+
+var _chunkUHVUKLHFjs = require('./chunk-UHVUKLHF.js');
+
+// src/components/SunburstChart.ts
+var _vue = require('vue');
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var SunburstChart = _vue.defineComponent.call(void 0, {
   name: "TigerSunburstChart",
   props: {
     width: { type: Number, default: 320 },
@@ -55,14 +73,14 @@ var SunburstChart = vue.defineComponent({
       handleLegendHover,
       handleLegendLeave,
       wrapperClasses
-    } = chunkGZK6R2E3_js.useChartInteraction({
-      hoverable: vue.computed(() => props.hoverable),
+    } = _chunk2VOZFFW6js.useChartInteraction.call(void 0, {
+      hoverable: _vue.computed.call(void 0, () => props.hoverable),
       hoveredIndexProp: () => props.hoveredIndex,
-      selectable: vue.computed(() => props.selectable),
+      selectable: _vue.computed.call(void 0, () => props.selectable),
       selectedIndexProp: () => props.selectedIndex,
-      activeOpacity: vue.computed(() => props.activeOpacity),
-      inactiveOpacity: vue.computed(() => props.inactiveOpacity),
-      legendPosition: vue.computed(() => props.legendPosition),
+      activeOpacity: _vue.computed.call(void 0, () => props.activeOpacity),
+      inactiveOpacity: _vue.computed.call(void 0, () => props.inactiveOpacity),
+      legendPosition: _vue.computed.call(void 0, () => props.legendPosition),
       emit,
       getData: (index) => {
         const arc = arcs.value[index];
@@ -70,17 +88,17 @@ var SunburstChart = vue.defineComponent({
       },
       eventNames: { hover: "arc-hover", click: "arc-click" }
     });
-    const innerRect = vue.computed(() => tigercatCore.getChartInnerRect(props.width, props.height, props.padding));
-    const palette = vue.computed(() => tigercatCore.resolveChartPalette(props.colors));
-    const gradientPrefix = tigercatCore.getSunburstGradientPrefix();
-    const outerRadius = vue.computed(() => Math.min(innerRect.value.width, innerRect.value.height) / 2);
-    const innerRadius = vue.computed(
+    const innerRect = _vue.computed.call(void 0, () => _tigercatcore.getChartInnerRect.call(void 0, props.width, props.height, props.padding));
+    const palette = _vue.computed.call(void 0, () => _tigercatcore.resolveChartPalette.call(void 0, props.colors));
+    const gradientPrefix = _tigercatcore.getStableChartGradientPrefix.call(void 0, "sunburst", _vue.useId.call(void 0, ));
+    const outerRadius = _vue.computed.call(void 0, () => Math.min(innerRect.value.width, innerRect.value.height) / 2);
+    const innerRadius = _vue.computed.call(void 0, 
       () => outerRadius.value * Math.max(0, Math.min(1, props.innerRadiusRatio))
     );
-    const cx = vue.computed(() => innerRect.value.width / 2);
-    const cy = vue.computed(() => innerRect.value.height / 2);
-    const arcs = vue.computed(
-      () => tigercatCore.computeSunburstArcs(props.data, {
+    const cx = _vue.computed.call(void 0, () => innerRect.value.width / 2);
+    const cy = _vue.computed.call(void 0, () => innerRect.value.height / 2);
+    const arcs = _vue.computed.call(void 0, 
+      () => _tigercatcore.computeSunburstArcs.call(void 0, props.data, {
         cx: cx.value,
         cy: cy.value,
         innerRadius: innerRadius.value,
@@ -88,9 +106,9 @@ var SunburstChart = vue.defineComponent({
         colors: palette.value
       })
     );
-    const rootArcs = vue.computed(() => arcs.value.filter((a) => a.depth === 0));
-    const legendItems = vue.computed(
-      () => tigercatCore.buildChartLegendItems({
+    const rootArcs = _vue.computed.call(void 0, () => arcs.value.filter((a) => a.depth === 0));
+    const legendItems = _vue.computed.call(void 0, 
+      () => _tigercatcore.buildChartLegendItems.call(void 0, {
         data: rootArcs.value,
         palette: palette.value,
         activeIndex: activeIndex.value,
@@ -98,8 +116,8 @@ var SunburstChart = vue.defineComponent({
         getColor: (d) => d.color
       })
     );
-    const tooltipContent = vue.computed(
-      () => tigercatCore.resolveChartTooltipContent(
+    const tooltipContent = _vue.computed.call(void 0, 
+      () => _tigercatcore.resolveChartTooltipContent.call(void 0, 
         resolvedHoveredIndex.value,
         arcs.value,
         void 0,
@@ -108,23 +126,23 @@ var SunburstChart = vue.defineComponent({
     );
     return () => {
       const interactive = props.hoverable || props.selectable;
-      const chart = vue.h(
-        chunkUHVUKLHF_js.ChartCanvas,
+      const chart = _vue.h.call(void 0, 
+        _chunkUHVUKLHFjs.ChartCanvas,
         {
           width: props.width,
           height: props.height,
           padding: props.padding,
           title: props.title,
           desc: props.desc,
-          className: tigercatCore.classNames(props.className)
+          className: _tigercatcore.classNames.call(void 0, props.className)
         },
         {
           default: () => {
-            const gradientDefs = props.gradient ? vue.h(
+            const gradientDefs = props.gradient ? _vue.h.call(void 0, 
               "defs",
               null,
               arcs.value.map(
-                (arc) => vue.h(
+                (arc) => _vue.h.call(void 0, 
                   "linearGradient",
                   {
                     id: `${gradientPrefix}-${arc.index}`,
@@ -134,12 +152,12 @@ var SunburstChart = vue.defineComponent({
                     y2: "1"
                   },
                   [
-                    vue.h("stop", {
+                    _vue.h.call(void 0, "stop", {
                       offset: "0%",
                       "stop-color": arc.color,
                       "stop-opacity": "1"
                     }),
-                    vue.h("stop", {
+                    _vue.h.call(void 0, "stop", {
                       offset: "100%",
                       "stop-color": arc.color,
                       "stop-opacity": "0.7"
@@ -148,27 +166,27 @@ var SunburstChart = vue.defineComponent({
                 )
               )
             ) : null;
-            return vue.h(
-              chunkHBFFINAI_js.ChartSeries,
+            return _vue.h.call(void 0, 
+              _chunkHBFFINAIjs.ChartSeries,
               { data: arcs.value, type: "sunburst" },
               {
                 default: () => [
                   gradientDefs,
                   ...arcs.value.map((arc) => {
-                    const opacity = tigercatCore.getChartElementOpacity(arc.index, activeIndex.value, {
+                    const opacity = _tigercatcore.getChartElementOpacity.call(void 0, arc.index, activeIndex.value, {
                       activeOpacity: props.activeOpacity,
                       inactiveOpacity: props.inactiveOpacity
                     });
-                    return vue.h("path", {
+                    return _vue.h.call(void 0, "path", {
                       key: `arc-${arc.index}`,
                       d: arc.path,
                       fill: props.gradient ? `url(#${gradientPrefix}-${arc.index})` : arc.color,
                       opacity,
                       stroke: "var(--tiger-surface,#ffffff)",
                       "stroke-width": 1,
-                      class: tigercatCore.classNames(interactive && "cursor-pointer"),
+                      class: _tigercatcore.classNames.call(void 0, interactive && "cursor-pointer"),
                       style: {
-                        transition: "opacity 0.2s ease-out, filter 0.2s ease-out",
+                        transition: "opacity var(--tiger-motion-duration-base,0.2s) var(--tiger-motion-ease-decelerate,ease-out), filter var(--tiger-motion-duration-base,0.2s) var(--tiger-motion-ease-decelerate,ease-out)",
                         filter: activeIndex.value === arc.index ? "var(--tiger-chart-block-active-filter, none)" : "none"
                       },
                       tabindex: props.selectable ? 0 : void 0,
@@ -186,18 +204,18 @@ var SunburstChart = vue.defineComponent({
           }
         }
       );
-      const tooltip = props.showTooltip && props.hoverable ? vue.h(chunkZOUJFFG4_js.ChartTooltip, {
+      const tooltip = props.showTooltip && props.hoverable ? _vue.h.call(void 0, _chunkZOUJFFG4js.ChartTooltip, {
         content: tooltipContent.value,
         visible: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,
         y: tooltipPosition.value.y
       }) : null;
       if (!props.showLegend) {
-        return vue.h("div", { class: "inline-block relative" }, [chart, tooltip]);
+        return _vue.h.call(void 0, "div", { class: "inline-block relative" }, [chart, tooltip]);
       }
-      return vue.h("div", { class: wrapperClasses.value }, [
+      return _vue.h.call(void 0, "div", { class: wrapperClasses.value }, [
         chart,
-        vue.h(chunkACYYQJ6M_js.ChartLegend, {
+        _vue.h.call(void 0, _chunkACYYQJ6Mjs.ChartLegend, {
           items: legendItems.value,
           position: props.legendPosition,
           markerSize: props.legendMarkerSize,
@@ -214,5 +232,7 @@ var SunburstChart = vue.defineComponent({
 });
 var SunburstChart_default = SunburstChart;
 
-exports.SunburstChart = SunburstChart;
-exports.SunburstChart_default = SunburstChart_default;
+
+
+
+exports.SunburstChart = SunburstChart; exports.SunburstChart_default = SunburstChart_default;

package/dist/{chunk-LBHKQW3U.mjs → chunk-UMQUWX7U.mjs}

@@ -1,7 +1,14 @@
-import { PieChart } from './chunk-XVUATQPD.mjs';
-import { defineComponent, computed, h } from 'vue';
-import { getChartInnerRect, normalizeChartPadding, classNames } from '@expcat/tigercat-core';
+import {
+  PieChart
+} from "./chunk-NDS2DLUS.mjs";
 
+// src/components/DonutChart.ts
+import { defineComponent, computed, h } from "vue";
+import {
+  classNames,
+  getChartInnerRect,
+  normalizeChartPadding
+} from "@expcat/tigercat-core";
 var DONUT_PALETTE = [
   "var(--tiger-chart-1,#5470c6)",
   "var(--tiger-chart-2,#91cc75)",
@@ -293,4 +300,7 @@ var DonutChart = defineComponent({
 });
 var DonutChart_default = DonutChart;
 
-export { DonutChart, DonutChart_default };
+export {
+  DonutChart,
+  DonutChart_default
+};

package/dist/chunk-UNTTADHL.mjs

@@ -1,7 +1,18 @@
-import { RowContextKey } from './chunk-M3G6LJKZ.mjs';
-import { defineComponent, inject, computed, h } from 'vue';
-import { classNames, getSpanClasses, getOffsetClasses, getOrderClasses, getFlexClasses, getColGutterClasses, getColMergedStyleVars } from '@expcat/tigercat-core';
+import {
+  RowContextKey
+} from "./chunk-M3G6LJKZ.mjs";
 
+// src/components/Col.ts
+import { defineComponent, computed, h, inject } from "vue";
+import {
+  classNames,
+  getColMergedStyleVars,
+  getSpanClasses,
+  getOffsetClasses,
+  getOrderClasses,
+  getFlexClasses,
+  getColGutterClasses
+} from "@expcat/tigercat-core";
 var Col = defineComponent({
   name: "TigerCol",
   props: {
@@ -57,4 +68,6 @@ var Col = defineComponent({
   }
 });
 
-export { Col };
+export {
+  Col
+};

package/dist/chunk-UQK22ZMC.mjs

@@ -1,7 +1,19 @@
-import { defineComponent, ref, computed, watch, onBeforeUnmount, h } from 'vue';
-import { hexToRgb, rgbToHsv, classNames, colorPickerBaseClasses, coerceClassValue, getColorPickerTriggerClasses, colorPickerPanelClasses, colorPickerInputClasses, colorPickerPresetClasses, hsvToRgb, rgbToHex, isValidHex } from '@expcat/tigercat-core';
-
 // src/components/ColorPicker.ts
+import { defineComponent, h, ref, computed, watch, onBeforeUnmount } from "vue";
+import {
+  colorPickerBaseClasses,
+  getColorPickerTriggerClasses,
+  colorPickerPanelClasses,
+  colorPickerInputClasses,
+  colorPickerPresetClasses,
+  hexToRgb,
+  rgbToHex,
+  rgbToHsv,
+  hsvToRgb,
+  isValidHex,
+  classNames,
+  coerceClassValue
+} from "@expcat/tigercat-core";
 var ColorPicker = defineComponent({
   name: "TigerColorPicker",
   props: {
@@ -148,4 +160,7 @@ var ColorPicker = defineComponent({
 });
 var ColorPicker_default = ColorPicker;
 
-export { ColorPicker, ColorPicker_default };
+export {
+  ColorPicker,
+  ColorPicker_default
+};