feat(utils): add tinyWarning and tinyInvariant

packages/date/src/calendar/calendar-cell.css

@@ -1,4 +1,4 @@
-@layer sl-expended-components {
+@layer sl-extended-components {
   [data-sl-calendar-cell-button] {
     width: 100%;
     height: 100%;

packages/date/src/calendar/calendar-provider.tsx

@@ -1,6 +1,7 @@
 import type { CalendarState } from '@react-stately/calendar'
 import React, { createContext, useContext } from 'react'
 import type { Store } from '@vtex/shoreline-store'
+import { invariant } from '@vtex/shoreline-utils'
 
 export const CalendarContext = createContext<Store<CalendarState> | null>(null)
 
@@ -15,9 +16,7 @@ export function CalendarProvider({ store, children }: any) {
 export function useCalendarContext() {
   const context = useContext(CalendarContext)
 
-  if (!context) {
-    throw new Error('Calendar components must be wrapped by CalendarProvider')
-  }
+  invariant(context, 'Calendar components must be wrapped by CalendarProvider')
 
   return context
 }

packages/date/src/calendar/calendar.tsx

@@ -31,21 +31,19 @@ export function Calendar(props: CalendarProps) {
       <div data-sl-calendar {...calendarProps}>
         <div data-sl-calendar-header>
           <IconButton
-            label="Previous month"
+            label={prevButtonProps['aria-label']}
             variant="tertiary"
             disabled={prevButtonProps.isDisabled}
-            aria-label={prevButtonProps['aria-label']}
             onClick={prevButtonProps.onPress as any}
             onFocus={prevButtonProps.onFocusChange as any}
           >
             <IconCaretLeft />
           </IconButton>
           <h2 data-sl-calendar-title>{title}</h2>
           <IconButton
-            label="Next month"
+            label={nextButtonProps['aria-label']}
             variant="tertiary"
             disabled={nextButtonProps.isDisabled}
-            aria-label={nextButtonProps['aria-label']}
             onClick={nextButtonProps.onPress as any}
             onFocus={nextButtonProps.onFocusChange as any}
           >

packages/theme/src/preflight.css

@@ -1,4 +1,4 @@
-@layer sl-reset, sl-base, sl-tokens, sl-components, sl-expended-components;
+@layer sl-reset, sl-base, sl-tokens, sl-components, sl-extended-components;
 
 @layer sl-reset {
   *,

packages/utils/package.json

@@ -24,6 +24,8 @@
   "dependencies": {
     "csstype": "3.1.2",
     "deepmerge": "4.3.1",
-    "scule": "1.1.1"
+    "scule": "1.1.1",
+    "tiny-invariant": "1.3.1",
+    "tiny-warning": "1.0.3"
   }
 }

packages/utils/src/index.ts

@@ -27,6 +27,8 @@ import {
   splitByCase,
   upperFirst,
 } from './string-case'
+import { invariant } from './invariant'
+import { warning } from './warning'
 
 export {
   chain,
@@ -59,6 +61,8 @@ export {
   lowerFirst,
   splitByCase,
   upperFirst,
+  invariant,
+  warning,
 }
 
 export * from './css-types'

packages/utils/src/invariant.ts

@@ -0,0 +1,3 @@
+import invariant from 'tiny-invariant'
+
+export { invariant }

packages/utils/src/warning.ts

@@ -0,0 +1,3 @@
+import warning from 'tiny-warning'
+
+export { warning }