@northlight/ui 2.35.2 → 2.35.4

package/dist/umd/northlight.cjs

@@ -1006,8 +1006,9 @@
           _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
             }
@@ -1018,7 +1019,8 @@
           },
           _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"],
@@ -1057,20 +1059,20 @@
             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
           },
@@ -1157,11 +1159,11 @@
           _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
             }
@@ -1718,12 +1720,12 @@
           _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"],
@@ -1929,10 +1931,10 @@
         _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: {
@@ -1953,11 +1955,11 @@
         outline: "none",
         rounded: "md",
         _focus: {
-          bgColor: "blue.500",
+          bgColor: "bg.brand.default",
           color: color.text.inverted
         },
         _placeholder: {
-          color: "red.500"
+          color: "destructive"
         }
       }
     }),
@@ -7264,6 +7266,44 @@
       },
       label: "Year to Date"
     };
+    const S1 = {
+      value: {
+        start: startOfMonthWithDays(
+          date.startOfYear(thisDay).subtract({ years: offsetFiscalYear }),
+          {
+            months: fiscalStartMonth,
+            days: fiscalStartDay
+          }
+        ),
+        end: endOfMonthWithDays(
+          date.startOfYear(thisDay).subtract({ years: offsetFiscalYear }),
+          {
+            months: fiscalStartMonth + 6,
+            days: fiscalStartDay
+          }
+        )
+      },
+      label: fiscalStartMonth === 0 ? "S1" : "FS1"
+    };
+    const S2 = {
+      value: {
+        start: startOfMonthWithDays(
+          date.startOfYear(thisDay).subtract({ years: offsetFiscalYear }),
+          {
+            months: fiscalStartMonth + 6,
+            days: fiscalStartDay
+          }
+        ),
+        end: endOfMonthWithDays(
+          date.startOfYear(thisDay).subtract({ years: offsetFiscalYear }),
+          {
+            months: fiscalStartMonth + 12,
+            days: fiscalStartDay
+          }
+        )
+      },
+      label: fiscalStartMonth === 0 ? "S2" : "FS2"
+    };
     const F1 = {
       value: {
         start: startOfMonthWithDays(
@@ -7340,6 +7380,7 @@
       },
       label: fiscalStartMonth === 0 ? "Q4" : "FQ4"
     };
+    const fiscalSemesters = [S1, S2];
     const fiscalQuarters = [F1, F2, F3, F4];
     const fiscalYears = fiscalStartMonth === 0 ? [] : [thisFiscalYear, lastFiscalYear];
     const quickDates = [
@@ -7357,7 +7398,7 @@
       nextYear,
       ...fiscalYears
     ];
-    return { quickDates, fiscalQuarters };
+    return { quickDates, fiscalQuarters, fiscalSemesters };
   };
 
   const seperator = `1px solid ${tokens.palette.gray["100"]}`;
@@ -7368,7 +7409,7 @@
     locale = "",
     height = "17.5rem"
   }) => {
-    const { quickDates, fiscalQuarters } = React.useMemo(
+    const { quickDates, fiscalQuarters, fiscalSemesters } = React.useMemo(
       () => getQuickSelectOptions(state, locale, fiscalStartMonth, fiscalStartDay),
       []
     );
@@ -7411,10 +7452,31 @@
     ), /* @__PURE__ */ React.createElement(react.Spacer, null), /* @__PURE__ */ React.createElement(
       react.Flex,
       {
-        justifyContent: "space-between",
+        justifyContent: "space-around",
         w: "full",
         pt: "2",
         pr: "4",
+        display: shouldShow(fiscalSemesters) ? "flex" : "none"
+      },
+      ramda.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(
+      react.Flex,
+      {
+        justifyContent: "space-around",
+        w: "full",
+        pt: shouldShow(fiscalSemesters) ? "0" : "2",
+        pr: "4",
         display: shouldShow(fiscalQuarters) ? "flex" : "none"
       },
       ramda.map(