@moda/om 21.7.2 → 21.8.0

package/dist/src/components/Field/Field.d.ts

@@ -4,6 +4,6 @@ import './Field.scss';
 export type FieldProps = TextInputProps & {
     children?: JSX.Element;
 };
-export declare const Field: React.ForwardRefExoticComponent<import("../TextInput").InputProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> & {
+export declare const Field: React.ForwardRefExoticComponent<import("..").InputProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> & {
     children?: JSX.Element;
 } & React.RefAttributes<HTMLInputElement>>;

package/dist/src/components/Tabs/TabList.d.ts

@@ -5,5 +5,6 @@ export type TabListProps = {
     tabs: Tab[];
     onTabSelected(tabName: string): void;
     activePanel: string;
+    className?: string;
 };
 export declare const TabList: React.FC<TabListProps>;

package/dist/src/components/Tabs/Tabs.d.ts

@@ -6,5 +6,6 @@ export type TabsProps = React.HTMLAttributes<HTMLDivElement> & {
     onTabClicked?: (tabName: string) => void;
     defaultActiveTab?: string;
     activeTab?: string;
+    tabListClassName?: string;
 };
 export declare const Tabs: React.FC<TabsProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moda/om",
-  "version": "21.7.2",
+  "version": "21.8.0",
   "description": "Moda Operandi design system",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -53,106 +53,106 @@
     }
   },
   "dependencies": {
-    "@moda/icons": "^6.1.14",
-    "@moda/tokens": "^6.5.0",
+    "@moda/icons": "^6.2.34",
+    "@moda/tokens": "^6.6.46",
     "@mona-health/react-input-mask": "^3.0.3",
     "@storybook/addon-styling": "^2.0.0",
     "classnames": "^2.5.1",
-    "credit-card-type": "^10.0.2",
+    "credit-card-type": "^10.1.0",
     "focus-visible": "^5.2.1",
     "proportional-scale": "^4.0.0",
-    "react-focus-on": "^3.10.0",
+    "react-focus-on": "^3.10.2",
     "scroll-into-view-if-needed": "^3.1.0",
-    "storybook": "^9.0.17",
+    "storybook": "^10.1.11",
     "use-cursor": "^1.2.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.0",
-    "@babel/preset-env": "^7.28.0",
-    "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.27.1",
-    "@commitlint/cli": "^20.0.0",
-    "@commitlint/config-conventional": "^20.0.0",
-    "@eslint/js": "^9.31.0",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@commitlint/cli": "^20.3.0",
+    "@commitlint/config-conventional": "^20.3.0",
+    "@eslint/js": "^9.39.2",
     "@moda/rollup-plugin-postcss": "^4.0.1",
-    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-babel": "^6.1.0",
     "@rollup/plugin-commonjs": "^29.0.0",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@storybook/addon-links": "^9.0.17",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@storybook/addon-links": "^10.1.11",
     "@storybook/addon-postcss": "^2.0.0",
     "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
     "@storybook/addons": "^7.6.17",
-    "@storybook/react": "^9.0.17",
-    "@storybook/react-webpack5": "^9.0.17",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
+    "@storybook/react": "^10.1.11",
+    "@storybook/react-webpack5": "^10.1.11",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
     "@testing-library/user-event": "^14.6.1",
-    "@types/chai": "^5.2.2",
+    "@types/chai": "^5.2.3",
     "@types/cheerio": "^1.0.0",
     "@types/classnames": "^2.3.4",
     "@types/credit-card-type": "^9.0.3",
     "@types/jest": "^30.0.0",
-    "@types/ramda": "^0.31.0",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
+    "@types/ramda": "^0.31.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@types/react-input-mask": "^3.0.6",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^8.37.0",
-    "@typescript-eslint/parser": "^8.37.0",
-    "autoprefixer": "^10.4.21",
+    "@typescript-eslint/eslint-plugin": "^8.52.0",
+    "@typescript-eslint/parser": "^8.52.0",
+    "autoprefixer": "^10.4.23",
     "babel-loader": "^10.0.0",
     "commitizen": "^4.3.1",
     "css-loader": "^7.1.2",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^9.31.0",
-    "eslint-config-prettier": "^10.1.5",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jest-dom": "^5.5.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-no-loops": "^0.4.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^5.5.1",
+    "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-promise": "^7.2.1",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-standard": "^5.0.0",
-    "eslint-plugin-testing-library": "^7.6.0",
-    "globals": "^16.3.0",
+    "eslint-plugin-testing-library": "^7.15.4",
+    "globals": "^17.0.0",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "ignore-not-found-export-webpack-plugin": "^1.0.2",
-    "jest": "^30.0.4",
-    "jest-environment-jsdom": "^30.0.4",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
     "jest-matchmedia-mock": "^1.1.0",
-    "lint-staged": "^16.1.2",
+    "lint-staged": "^16.2.7",
     "node-sass-package-importer": "^5.3.3",
     "pinst": "^3.0.0",
     "postcss": "^8.5.6",
-    "postcss-loader": "^8.1.1",
-    "prettier": "^3.6.2",
+    "postcss-loader": "^8.2.0",
+    "prettier": "^3.7.4",
     "ramda": "^0.32.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "react-router-dom": "^5.1.2",
-    "rollup": "^4.45.1",
+    "rollup": "^4.55.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-scss": "^4.0.1",
-    "sass": "^1.89.2",
-    "sass-loader": "^16.0.5",
-    "semantic-release": "^25.0.0",
-    "semantic-release-npm-github": "^5.0.0",
+    "sass": "^1.97.2",
+    "sass-loader": "^16.0.6",
+    "semantic-release": "^25.0.2",
+    "semantic-release-npm-github": "^6.0.0",
     "style-loader": "^4.0.0",
-    "ts-jest": "^29.4.0",
-    "typescript": "^5.8.3",
-    "typescript-eslint": "^8.37.0",
+    "ts-jest": "^29.4.6",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.52.0",
     "waait": "^1.0.5",
-    "webpack": "^5.100.2",
+    "webpack": "^5.104.1",
     "webpack-cli": "^6.0.1"
   },
   "overrides": {
-    "@types/react": "^19.1.8",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "@types/react": "^19.2.7",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
   },
   "config": {
     "commitizen": {

package/src/components/Tabs/TabList.tsx

@@ -1,19 +1,25 @@
 import React from 'react';
+import classNames from 'classnames';
 import { Tab } from './Tab';
+
 import './TabList.scss';
 
 export type TabListProps = {
   tabs: Tab[];
   onTabSelected(tabName: string): void;
   activePanel: string;
+  className?: string;
 };
 
-export const TabList: React.FC<TabListProps> = ({ tabs, onTabSelected, activePanel }) => {
-  return (
-    <div className='TabList'>
-      {tabs.map(tab => (
-        <Tab key={tab.name} tab={tab} onTabChosen={onTabSelected} activeTab={activePanel} />
-      ))}
-    </div>
-  );
-};
+export const TabList: React.FC<TabListProps> = ({
+  tabs,
+  onTabSelected,
+  activePanel,
+  className
+}) => (
+  <div className={classNames('TabList', className)}>
+    {tabs.map(tab => (
+      <Tab key={tab.name} tab={tab} onTabChosen={onTabSelected} activeTab={activePanel} />
+    ))}
+  </div>
+);

package/src/components/Tabs/Tabs.tsx

@@ -10,6 +10,7 @@ export type TabsProps = React.HTMLAttributes<HTMLDivElement> & {
   onTabClicked?: (tabName: string) => void;
   defaultActiveTab?: string;
   activeTab?: string;
+  tabListClassName?: string;
 };
 
 export const Tabs: React.FC<TabsProps> = ({
@@ -18,6 +19,7 @@ export const Tabs: React.FC<TabsProps> = ({
   defaultActiveTab,
   activeTab,
   className,
+  tabListClassName,
   ...rest
 }) => {
   const [activePanel, setActivePanel] = useState(activeTab || defaultActiveTab || tabs[0].name);
@@ -33,7 +35,12 @@ export const Tabs: React.FC<TabsProps> = ({
 
   return (
     <div className={classNames('Tabs', className)} {...rest}>
-      <TabList tabs={tabs} onTabSelected={handleTabClick} activePanel={activePanel} />
+      <TabList
+        tabs={tabs}
+        onTabSelected={handleTabClick}
+        activePanel={activePanel}
+        className={tabListClassName}
+      />
       <TabPanels panels={tabs} activePanel={activePanel} />
     </div>
   );