@agregio-solutions/design-system 1.102.5 → 2.0.0

package/dist/packages/ds-design-tokens/src/tokens.style.d.ts

@@ -1,157 +1,160 @@
 /**
- * @deprecated Please use the CSS variables instead
+ * Raw token values, for advanced use cases only (not documented).
+ * Prefer the CSS variables of `tokens.css`, which hold the same values.
  */
 export declare const tokens: {
-    color: {
-        content: {
-            action: {
-                action: string;
-                actionDarker: string;
-                actionLighter: string;
+    readonly color: {
+        readonly content: {
+            readonly action: {
+                readonly action: "#1844ff";
+                readonly actionDarker: "#0626ac";
+                readonly actionLighter: "#f1f7ff";
             };
-            neutral: {
-                primary: string;
-                primaryReversed: string;
-                secondary: string;
-                secondaryLight: string;
-                tertiary: string;
-                stroke: string;
+            readonly neutral: {
+                readonly primary: "#001a70";
+                readonly primaryReversed: "#ffffff";
+                readonly secondary: "#454545";
+                readonly secondaryLight: "#666666";
+                readonly tertiary: "#b0b0b0";
+                readonly stroke: "#e7e7e7";
             };
-            brand: {
-                brand1: string;
-                brand2: string;
-                brand3: string;
-                brand4: string;
-                brand5: string;
-                brand6: string;
-                brand7: string;
-                brand8: string;
-                brand9: string;
+            readonly brand: {
+                readonly brand1: "#001a70";
+                readonly brand2: "#3f6eff";
+                readonly brand3: "#769fff";
+                readonly brand4: "#326a21";
+                readonly brand5: "#4f9e30";
+                readonly brand6: "#76c853";
+                readonly brand7: "#c62608";
+                readonly brand8: "#fe5716";
+                readonly brand9: "#ff7838";
             };
-            message: {
-                informative: string;
-                informativeDarker: string;
-                informativeDarkest: string;
-                informativeLighter: string;
-                negative: string;
-                negativeDarker: string;
-                negativeDarkest: string;
-                negativeLighter: string;
-                positive: string;
-                positiveDarker: string;
-                positiveDarkest: string;
-                positiveLighter: string;
-                warning: string;
-                warningDarker: string;
-                warningDarkest: string;
-                warningLighter: string;
+            readonly message: {
+                readonly informative: "#009fd4";
+                readonly informativeDarker: "#007fab";
+                readonly informativeDarkest: "#065874";
+                readonly informativeLighter: "#effbff";
+                readonly negative: "#ed1515";
+                readonly negativeDarker: "#c80d0d";
+                readonly negativeDarkest: "#881414";
+                readonly negativeLighter: "#fff1f1";
+                readonly positive: "#11ab51";
+                readonly positiveDarker: "#0c6f2d";
+                readonly positiveDarkest: "#0d2e17";
+                readonly positiveLighter: "#e3ffed";
+                readonly warning: "#e27500";
+                readonly warningDarker: "#bb5002";
+                readonly warningDarkest: "#7c330b";
+                readonly warningLighter: "#fffcea";
             };
-            dataviz: {
-                orange1: string;
-                orange2: string;
-                orange3: string;
-                orange4: string;
-                brown1: string;
-                brown2: string;
-                brown3: string;
-                brown4: string;
-                azure1: string;
-                azure2: string;
-                azure3: string;
-                azure4: string;
-                ocean1: string;
-                ocean2: string;
-                ocean3: string;
-                ocean4: string;
-                purple1: string;
-                purple2: string;
-                purple3: string;
-                purple4: string;
-                pink1: string;
-                pink2: string;
-                pink3: string;
-                pink4: string;
-                negative1: string;
-                negative2: string;
-                negative3: string;
-                negative4: string;
-                positive1: string;
-                positive2: string;
-                positive3: string;
-                positive4: string;
-                neutral1: string;
-                neutral2: string;
-                neutral3: string;
-                neutral4: string;
+            readonly dataviz: {
+                readonly orange1: "#fff5ed";
+                readonly orange2: "#ffcca8";
+                readonly orange3: "#fe5716";
+                readonly orange4: "#9d210f";
+                readonly brown1: "#fffcea";
+                readonly brown2: "#ffe785";
+                readonly brown3: "#ff9d00";
+                readonly brown4: "#983d08";
+                readonly azure1: "#f1f7ff";
+                readonly azure2: "#cee1ff";
+                readonly azure3: "#3f6eff";
+                readonly azure4: "#052dd2";
+                readonly ocean1: "#effbff";
+                readonly ocean2: "#b6efff";
+                readonly ocean3: "#009fd4";
+                readonly ocean4: "#006b8d";
+                readonly purple1: "#f9f5ff";
+                readonly purple2: "#e4d4ff";
+                readonly purple3: "#9351fb";
+                readonly purple4: "#5a1eab";
+                readonly pink1: "#ffedf8";
+                readonly pink2: "#ffc2e8";
+                readonly pink3: "#ee53b5";
+                readonly pink4: "#a11672";
+                readonly negative1: "#fff1f1";
+                readonly negative2: "#ffc5c5";
+                readonly negative3: "#ed1515";
+                readonly negative4: "#a50f0f";
+                readonly positive1: "#e3ffed";
+                readonly positive2: "#a4f2c2";
+                readonly positive3: "#11ab51";
+                readonly positive4: "#0c6f2d";
+                readonly neutral1: "#f6f6f6";
+                readonly neutral2: "#d1d1d1";
+                readonly neutral3: "#888888";
+                readonly neutral4: "#454545";
             };
         };
-        background: {
-            neutral: {
-                overground: string;
-                ground: string;
-                groundReversed: string;
-                underground1: string;
-                underground2: string;
+        readonly background: {
+            readonly neutral: {
+                readonly overground: "#ffffff";
+                readonly ground: "#ffffff";
+                readonly groundReversed: "#0e275d";
+                readonly underground1: "#f6f6f6";
+                readonly underground2: "#e7e7e7";
             };
-            highlight: {
-                focus: string;
-                focusReversed: string;
+            readonly highlight: {
+                readonly focus: "#009fd4";
+                readonly focusReversed: "#ffffff";
             };
         };
     };
-    spacing: {
-        xxs: string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        xxl: string;
+    readonly spacing: {
+        readonly xxs: "4px";
+        readonly xs: "8px";
+        readonly sm: "16px";
+        readonly md: "24px";
+        readonly lg: "32px";
+        readonly xl: "48px";
+        readonly xxl: "80px";
     };
-    radius: {
-        minimal: string;
-        rounded: string;
-        full: string;
+    readonly radius: {
+        readonly minimal: "2px";
+        readonly rounded: "4px";
+        readonly full: "8px";
     };
-    stroke: {
-        default: string;
-        doubled: string;
+    readonly stroke: {
+        readonly default: "1px";
+        readonly doubled: "2px";
     };
-    "z-index": {
-        base: string;
-        dropdown: string;
-        sticky: string;
-        fixed: string;
-        modalBackdrop: string;
-        offCanvas: string;
-        modal: string;
-        popover: string;
-        tooltip: string;
+    readonly "z-index": {
+        readonly base: "1";
+        readonly dropdown: "10";
+        readonly sticky: "20";
+        readonly fixed: "30";
+        readonly modalBackdrop: "40";
+        readonly offCanvas: "50";
+        readonly modal: "60";
+        readonly popover: "70";
+        readonly tooltip: "80";
     };
-    text: {
-        fontSize: {
-            "3xl": string;
-            "2xl": string;
-            xl: string;
-            lg: string;
-            md: string;
-            sm: string;
+    readonly text: {
+        readonly fontSize: {
+            readonly "3xl": "40px";
+            readonly "2xl": "32px";
+            readonly xl: "24px";
+            readonly lg: "20px";
+            readonly md: "16px";
+            readonly sm: "14px";
+            readonly xs: "12px";
         };
-        lineHeight: {
-            "3xl": string;
-            "2xl": string;
-            xl: string;
-            lg: string;
-            md: string;
-            sm: string;
+        readonly lineHeight: {
+            readonly "3xl": "56px";
+            readonly "2xl": "40px";
+            readonly xl: "32px";
+            readonly lg: "28px";
+            readonly md: "24px";
+            readonly sm: "20px";
+            readonly xs: "16px";
         };
     };
-    shadow: {
-        light: string;
-        "light-inverted": string;
-        medium: string;
-        "medium-inverted": string;
-        strong: string;
-        "strong-inverted": string;
+    readonly shadow: {
+        readonly light: "0 1px 4px 0 rgba(38, 38, 38, 0.12)";
+        readonly "light-inverted": "0 -1px 4px 0 rgba(38, 38, 38, 0.12)";
+        readonly medium: "0 2px 6px 0 rgba(38, 38, 38, 0.16)";
+        readonly "medium-inverted": "0 -2px 6px 0 rgba(38, 38, 38, 0.16)";
+        readonly strong: "0 4px 12px 0 rgba(38, 38, 38, 0.16)";
+        readonly "strong-inverted": "0 -4px 12px 0 rgba(38, 38, 38, 0.16)";
     };
 };

package/dist/packages/index.d.ts

@@ -17,7 +17,7 @@ import { default as DataTableRoot } from './components/DataTable/DataTableRoot/D
 import { default as DataTableRow } from './components/DataTable/DataTableRow/DataTableRow';
 import { default as DatePicker } from './components/DatePicker/DatePicker';
 import { default as DateRangePicker } from './components/DateRangePicker/DateRangePicker';
-import { default as Drawer } from './components/Drawer/Drawer';
+import { default as Drawer, DrawerContent, DrawerActions, DrawerForm } from './components/Drawer/Drawer';
 import { default as Dropdown } from './components/Dropdown/Dropdown';
 import { default as DropdownListItem } from './components/Dropdown/components/DropdownListItem/DropdownListItem';
 import { default as EmptyState } from './components/EmptyState/EmptyState';
@@ -70,9 +70,8 @@ import { default as ToggleButtonGroup } from './components/ToggleButtonGroup/Tog
 import { default as Tooltip, TooltipTrigger } from './components/Tooltip/Tooltip';
 import { default as YearMonthPicker } from './components/YearMonthPicker/YearMonthPicker';
 import { default as RouterProvider } from './components/RouterProvider/RouterProvider';
-import { default as createMuiTheme } from './mui/mui-theme.ts';
-import { tokens, fontSize, lineHeight } from './ds-design-tokens/index';
+import { tokens } from './ds-design-tokens/index';
 import { I18nProvider } from 'react-aria-components';
 import { toast } from 'sonner';
-export { Accordion, Badge, Breadcrumbs, Button, Calendar, CalendarCell, Card, ChartLegend, ChartTooltip, Checkbox, CheckboxGroup, Chip, Combobox, createMuiTheme, DataTable, DataTableCell, DataTableHeader, DataTableRoot, DataTableRow, DatePicker, DateRangePicker, Drawer, Dropdown, DropdownListItem, EmptyState, FileUpload, Filter, fontSize, Header, I18nProvider, Icon, Label, LinearProgressBar, lineHeight, Link, List, Loader, Menu, MenuItem, Message, Modal, ModalContent, ModalActions, ModalForm, Navigation, NavigationItem, Notifications, NotificationCard, NumberField, PageLayout, Pagination, Popover, PopoverTrigger, Radio, RouterProvider, SearchBar, SegmentedControl, SegmentedControlButton, SegmentedControlList, SegmentedControlPanel, Select, SelectItem, Skeleton, Slider, Stepper, Step, Switch, Tab, TabList, TabPanel, Tabs, Tag, TextInput, TimeField, TimePicker, Timeline, toast, Toaster, ToggleButton, ToggleButtonGroup, Tooltip, TooltipTrigger, tokens, YearMonthPicker, };
+export { Accordion, Badge, Breadcrumbs, Button, Calendar, CalendarCell, Card, ChartLegend, ChartTooltip, Checkbox, CheckboxGroup, Chip, Combobox, DataTable, DataTableCell, DataTableHeader, DataTableRoot, DataTableRow, DatePicker, DateRangePicker, Drawer, DrawerContent, DrawerActions, DrawerForm, Dropdown, DropdownListItem, EmptyState, FileUpload, Filter, Header, I18nProvider, Icon, Label, LinearProgressBar, Link, List, Loader, Menu, MenuItem, Message, Modal, ModalContent, ModalActions, ModalForm, Navigation, NavigationItem, Notifications, NotificationCard, NumberField, PageLayout, Pagination, Popover, PopoverTrigger, Radio, RouterProvider, SearchBar, SegmentedControl, SegmentedControlButton, SegmentedControlList, SegmentedControlPanel, Select, SelectItem, Skeleton, Slider, Stepper, Step, Switch, Tab, TabList, TabPanel, Tabs, Tag, TextInput, TimeField, TimePicker, Timeline, toast, Toaster, ToggleButton, ToggleButtonGroup, Tooltip, TooltipTrigger, tokens, YearMonthPicker, };
 export type { TypeTableColumnWithFilter };

package/dist/packages/internal-components/FormGroupWrapper/FormGroupWrapper.d.ts

@@ -11,12 +11,6 @@ export type Props = LabelProps & {
      * @default "vertical"
      */
     orientation?: "vertical" | "horizontal";
-    /**
-     * Optional description to display under the field.
-     * Please do NOT provide a description if you are on "horizontal" orientation.
-     * @deprecated Use `helperText` instead
-     */
-    description?: string | React.ReactNode;
     /**
      * Helper text displayed below the input field, like additional instructions.
      */
@@ -64,12 +58,6 @@ declare const FormGroupWrapper: React.ForwardRefExoticComponent<LabelProps & {
      * @default "vertical"
      */
     orientation?: "vertical" | "horizontal";
-    /**
-     * Optional description to display under the field.
-     * Please do NOT provide a description if you are on "horizontal" orientation.
-     * @deprecated Use `helperText` instead
-     */
-    description?: string | React.ReactNode;
     /**
      * Helper text displayed below the input field, like additional instructions.
      */

package/dist/public_docs/index.md

@@ -11,10 +11,11 @@ The Agregio Solutions Design System is a collection of reusable components and p
 
 ## How to use the docs
 
-The docs are organized into 2 sections:
+The docs are organized into 3 sections:
 
 - [Components](./components.md): list of all the components available in the design system, + their props, example usage and how to test them.
 - [Tokens](./tokens.md): list of all the tokens available in the design system and examples of how to use them.
+- [V2 migration guide](./migration-guide-v2.md): breaking changes shipped in the V2 release and how to adapt your codebase.
 
 ## Important rules to follow
 
@@ -26,5 +27,7 @@ Check the [Components](./components.md) each time you:
 - need to write of update tests for a Design System Component
 - need to check the available props or developer notes for a Design System Component
 
+Check the [V2 migration guide](./migration-guide-v2.md) each time you upgrade the design system across a major version, to know which breaking changes apply and how to adapt the code.
+
 Check the [Tokens](./tokens.md) each time you want to use CSS values like spacing, colors, typography, etc.
 It contains the complete list of all the tokens available in the design system and examples of how to use them as well as the rules to follow to use them correctly.