@northlight/ui 2.35.2 → 2.35.4

package/dist/es/northlight.js

@@ -1046,8 +1046,9 @@ const Input = {
         _focusVisible: {
           bgColor: color.background.input["outline-focus"],
           borderColor: color.border.input.focus,
+          boxShadow: `inset 0 0 0 1px ${color.border.input.focus}`,
           _invalid: {
-            boxShadow: `0 0 0 1px ${color.border.input.error}`,
+            boxShadow: `inset 0 0 0 1px ${color.border.input.error}`,
             bgColor: color.background.input["outline-error"],
             borderColor: color.border.input.error
           }
@@ -1058,7 +1059,8 @@ const Input = {
         },
         _invalid: {
           bgColor: color.background.input["outline-error"],
-          borderColor: color.border.input.error
+          borderColor: color.border.input.error,
+          boxShadow: `inset 0 0 0 1px ${color.border.input.error}`
         },
         _disabled: {
           bgColor: color.background.input["outline-disabled"],
@@ -1097,20 +1099,20 @@ const Input = {
           bgColor: color.background.input["filled-hover"]
         },
         _focusVisible: {
-          boxShadow: `0 0 0 1px ${color.border.input.focus}`,
+          boxShadow: `inset 0 0 0 1px ${color.border.input.focus}`,
           borderColor: color.border.input.focus,
           bgColor: color.background.input["filled-focus"],
           _readOnly: {
             bgColor: color.background.input["filled-default"]
           },
           _invalid: {
-            boxShadow: `0 0 0 1px ${color.border.input.error}`,
+            boxShadow: `inset 0 0 0 1px ${color.border.input.error}`,
             bgColor: color.background.input["outline-error"],
             borderColor: color.border.input.error
           }
         },
         _invalid: {
-          boxShadow: `0 0 0 1px ${color.border.input.error}`,
+          boxShadow: `inset 0 0 0 1px ${color.border.input.error}`,
           bgColor: color.background.input["filled-error"],
           borderColor: color.border.input.error
         },
@@ -1197,11 +1199,11 @@ const Input = {
         _focusVisible: {
           bgColor: color.background.input["outline-focus"],
           _hover: {
-            boxShadow: `0 0 0 1px ${color.border.ai}`,
+            boxShadow: `inset 0 0 0 1px ${color.border.ai}`,
             borderColor: color.border.ai
           },
           _invalid: {
-            boxShadow: `0 0 0 1px ${color.border.input.error}`,
+            boxShadow: `inset 0 0 0 1px ${color.border.input.error}`,
             bgColor: color.background.input["outline-error"],
             borderColor: color.border.input.error
           }
@@ -1758,12 +1760,12 @@ const NumberInput$1 = {
         _focusVisible: {
           bg: color.background.input["outline-focus"],
           borderColor: color.border.input.focus,
-          boxShadow: `0 0 0 1px ${color.border.textarea.focus}`
+          boxShadow: `inset 0 0 0 1px ${color.border.textarea.focus}`
         },
         _invalid: {
           bg: color.background.input["outline-error"],
           borderColor: color.border.input.error,
-          boxShadow: `0 0 0 1px ${color.border.input.error}`
+          boxShadow: `inset 0 0 0 1px ${color.border.input.error}`
         },
         _disabled: {
           bg: color.background.input["outline-disabled"],
@@ -1969,10 +1971,10 @@ const DatePicker$1 = {
       _focusWithin: {
         bgColor: color.background.input["outline-focus"],
         borderColor: color.border.textarea.focus,
-        boxShadow: `0 0 0 1px ${color.border.textarea.focus}`
+        boxShadow: `inset 0 0 0 1px ${color.border.textarea.focus}`
       },
       _invalid: {
-        boxShadow: `0 0 0 1px ${color.border.input.error}`,
+        boxShadow: `inset 0 0 0 1px ${color.border.input.error}`,
         borderColor: color.border.input.error
       },
       _disabled: {
@@ -1993,11 +1995,11 @@ const DatePicker$1 = {
       outline: "none",
       rounded: "md",
       _focus: {
-        bgColor: "blue.500",
+        bgColor: "bg.brand.default",
         color: color.text.inverted
       },
       _placeholder: {
-        color: "red.500"
+        color: "destructive"
       }
     }
   }),
@@ -7304,6 +7306,44 @@ const getQuickSelectOptions = (state, locale, fiscalStartMonth, fiscalStartDay)
     },
     label: "Year to Date"
   };
+  const S1 = {
+    value: {
+      start: startOfMonthWithDays(
+        startOfYear(thisDay).subtract({ years: offsetFiscalYear }),
+        {
+          months: fiscalStartMonth,
+          days: fiscalStartDay
+        }
+      ),
+      end: endOfMonthWithDays(
+        startOfYear(thisDay).subtract({ years: offsetFiscalYear }),
+        {
+          months: fiscalStartMonth + 6,
+          days: fiscalStartDay
+        }
+      )
+    },
+    label: fiscalStartMonth === 0 ? "S1" : "FS1"
+  };
+  const S2 = {
+    value: {
+      start: startOfMonthWithDays(
+        startOfYear(thisDay).subtract({ years: offsetFiscalYear }),
+        {
+          months: fiscalStartMonth + 6,
+          days: fiscalStartDay
+        }
+      ),
+      end: endOfMonthWithDays(
+        startOfYear(thisDay).subtract({ years: offsetFiscalYear }),
+        {
+          months: fiscalStartMonth + 12,
+          days: fiscalStartDay
+        }
+      )
+    },
+    label: fiscalStartMonth === 0 ? "S2" : "FS2"
+  };
   const F1 = {
     value: {
       start: startOfMonthWithDays(
@@ -7380,6 +7420,7 @@ const getQuickSelectOptions = (state, locale, fiscalStartMonth, fiscalStartDay)
     },
     label: fiscalStartMonth === 0 ? "Q4" : "FQ4"
   };
+  const fiscalSemesters = [S1, S2];
   const fiscalQuarters = [F1, F2, F3, F4];
   const fiscalYears = fiscalStartMonth === 0 ? [] : [thisFiscalYear, lastFiscalYear];
   const quickDates = [
@@ -7397,7 +7438,7 @@ const getQuickSelectOptions = (state, locale, fiscalStartMonth, fiscalStartDay)
     nextYear,
     ...fiscalYears
   ];
-  return { quickDates, fiscalQuarters };
+  return { quickDates, fiscalQuarters, fiscalSemesters };
 };
 
 const seperator = `1px solid ${palette.gray["100"]}`;
@@ -7408,7 +7449,7 @@ const QuickSelect = ({
   locale = "",
   height = "17.5rem"
 }) => {
-  const { quickDates, fiscalQuarters } = useMemo(
+  const { quickDates, fiscalQuarters, fiscalSemesters } = useMemo(
     () => getQuickSelectOptions(state, locale, fiscalStartMonth, fiscalStartDay),
     []
   );
@@ -7451,10 +7492,31 @@ const QuickSelect = ({
   ), /* @__PURE__ */ React.createElement(Spacer, null), /* @__PURE__ */ React.createElement(
     Flex,
     {
-      justifyContent: "space-between",
+      justifyContent: "space-around",
       w: "full",
       pt: "2",
       pr: "4",
+      display: shouldShow(fiscalSemesters) ? "flex" : "none"
+    },
+    map(
+      (semester) => validRange(semester.value, state) && /* @__PURE__ */ React.createElement(
+        DateButton,
+        {
+          onClick: updateDate(semester.value),
+          isActive: getIsActive(semester),
+          key: `quick-select-${semester.label}`
+        },
+        semester.label
+      ),
+      fiscalSemesters
+    )
+  ), /* @__PURE__ */ React.createElement(
+    Flex,
+    {
+      justifyContent: "space-around",
+      w: "full",
+      pt: shouldShow(fiscalSemesters) ? "0" : "2",
+      pr: "4",
       display: shouldShow(fiscalQuarters) ? "flex" : "none"
     },
     map(