@spaced-out/ui-design-system 0.4.14 → 0.4.15

package/.cspell/custom-words.txt

@@ -139,3 +139,4 @@ yourcomponentname
 Yuzhno
 yxxx
 incase
+diwaker

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.4.15](https://github.com/spaced-out/ui-design-system/compare/v0.4.14...v0.4.15) (2025-08-13)
+
+
+### Bug Fixes
+
+* toggle checked control ([#389](https://github.com/spaced-out/ui-design-system/issues/389)) ([a56ea7c](https://github.com/spaced-out/ui-design-system/commit/a56ea7c7819cd0789c0909472499004fc2ce36e6))
+
 ### [0.4.14](https://github.com/spaced-out/ui-design-system/compare/v0.4.13...v0.4.14) (2025-08-11)
 
 

package/eslint.config.mjs

@@ -0,0 +1,193 @@
+// ESLint 9 flat config for @spaced-out/ui-design-system
+// Uses Babel parser to support Flow and JSX
+// Install these dependencies with:
+// yarn add -D @babel/eslint-parser eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import eslint-plugin-flowtype eslint-plugin-simple-import-sort eslint-plugin-unused-imports eslint-plugin-jest eslint-plugin-storybook globals
+
+import babelParser from '@babel/eslint-parser';
+import reactPlugin from 'eslint-plugin-react';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
+import importPlugin from 'eslint-plugin-import';
+import ftFlowPlugin from 'eslint-plugin-ft-flow';
+import simpleImportSortPlugin from 'eslint-plugin-simple-import-sort';
+import unusedImportsPlugin from 'eslint-plugin-unused-imports';
+import jestPlugin from 'eslint-plugin-jest';
+import storybookPlugin from 'eslint-plugin-storybook';
+import globals from 'globals';
+
+export default [
+  // Global ignores (replaces .eslintignore)
+  {
+    ignores: [
+      'node_modules/**',
+      'lib/**',
+      'dist/**',
+      'storybook-static/**',
+      'src/assets/fontawesome/**',
+    ],
+  },
+
+  // Lint project source
+  {
+    files: ['src/**/*.{js,jsx}'],
+    languageOptions: {
+      parser: babelParser,
+      parserOptions: {
+        requireConfigFile: true,
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        ecmaFeatures: { jsx: true },
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        Iterator: 'readonly',
+      },
+    },
+    settings: {
+      react: { version: 'detect' },
+    },
+    plugins: {
+      react: reactPlugin,
+      'react-hooks': reactHooksPlugin,
+      import: importPlugin,
+      'ft-flow': ftFlowPlugin,
+      'simple-import-sort': simpleImportSortPlugin,
+      'unused-imports': unusedImportsPlugin,
+      jest: jestPlugin,
+      storybook: storybookPlugin,
+    },
+    rules: {
+      // Core
+      'arrow-body-style': ['warn', 'as-needed'],
+      curly: ['warn', 'all'],
+      'comma-spacing': ['warn', { before: false, after: true }],
+      'eol-last': 'warn',
+      eqeqeq: ['error', 'always', { null: 'ignore' }],
+      indent: ['error', 2],
+      'max-params': ['warn', { max: 4 }],
+      'no-alert': 'warn',
+      'no-console': ['error', { allow: ['warn', 'error'] }],
+      'no-const-assign': 'error',
+      'no-dupe-args': 'error',
+      'no-dupe-keys': 'error',
+      'no-duplicate-case': 'error',
+      'no-dupe-class-members': 'error',
+      'no-empty-function': 'warn',
+      'no-empty-pattern': 'error',
+      'no-eval': 'error',
+      'no-extend-native': 'error',
+      'no-extra-boolean-cast': 'error',
+      'no-fallthrough': 'error',
+      'no-floating-decimal': 'error',
+      'no-inner-declarations': 'error',
+      'no-loop-func': 'error',
+      'no-mixed-requires': 'off',
+      'no-nested-ternary': 'off',
+      'no-new-symbol': 'error',
+      'no-redeclare': 'error',
+      'no-restricted-globals': ['error', 'event', 'location'],
+      'no-sparse-arrays': 'error',
+      'no-tabs': 'warn',
+      'no-this-before-super': 'error',
+      'no-trailing-spaces': 'warn',
+      'no-underscore-dangle': 'off',
+      'no-unmodified-loop-condition': 'warn',
+      'no-undef': ['error', { typeof: true }],
+      'no-unreachable': 'warn',
+      'no-useless-constructor': 'error',
+      'no-var': 'error',
+      'no-with': 'error',
+      'object-shorthand': 'error',
+      'prefer-arrow-callback': 'error',
+      'prefer-const': 'warn',
+      'prefer-spread': 'warn',
+      quotes: ['warn', 'single', { allowTemplateLiterals: true }],
+      'require-yield': 'error',
+      'rest-spread-spacing': 'error',
+      strict: ['warn', 'never'],
+
+      // import
+      'import/newline-after-import': ['warn', { count: 2 }],
+      'import/no-duplicates': 'error',
+
+      // react
+      'react/jsx-no-undef': 'error',
+      'react/jsx-pascal-case': 'warn',
+      'react/jsx-uses-react': 'error',
+      'react/jsx-uses-vars': 'error',
+      'react/no-array-index-key': 'warn',
+      'react/no-deprecated': 'error',
+      'react/no-direct-mutation-state': 'error',
+      'react/no-string-refs': 'warn',
+      'react/prop-types': 'off',
+      'react/react-in-jsx-scope': 'error',
+
+      // flowtype
+      'ft-flow/define-flow-type': 'error',
+      'ft-flow/delimiter-dangle': ['warn', 'always-multiline'],
+      'ft-flow/no-existential-type': 'warn',
+      'ft-flow/no-weak-types': 'warn',
+      'ft-flow/semi': ['warn', 'always'],
+
+      // hooks //NOTE:(diwaker) temp disable for migration fix this later
+      'react-hooks/rules-of-hooks': 'warn',
+
+      // sorting
+      'simple-import-sort/imports': 'error',
+      'simple-import-sort/exports': 'error',
+
+      // unused
+      'unused-imports/no-unused-imports': 'error',
+      'unused-imports/no-unused-vars': [
+        'warn',
+        {
+          vars: 'all',
+          varsIgnorePattern: '^_',
+          args: 'after-used',
+          argsIgnorePattern: '^_',
+        },
+      ],
+    },
+  },
+
+  // Tests
+  {
+    files: ['**/__tests__/*.{js,jsx}'],
+    languageOptions: {
+      globals: globals.jest,
+    },
+    plugins: {
+      jest: jestPlugin,
+    },
+  },
+
+  // Storybook specifics
+  {
+    files: ['**/*.stories.jsx'],
+    rules: {
+      semi: ['warn', 'always'],
+    },
+  },
+
+  // Project import sort groups
+  {
+    files: ['*.{js,jsx}', '**/*.{js,jsx}'],
+    rules: {
+      'simple-import-sort/imports': [
+        'error',
+        {
+          groups: [
+            ['^react', '^@?\\w'],
+            ['^(@|components)(/.*|$)'],
+            ['^\\u0000'],
+            ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
+            ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
+            ['^.+\\.?(css)$'],
+          ],
+        },
+      ],
+    },
+  },
+];
+
+

package/lib/components/Accordion/Accordion.js

@@ -21,13 +21,12 @@ const Accordion = exports.Accordion = /*#__PURE__*/React.forwardRef((_ref, ref)
     classNames,
     isOpen = false,
     showToggle = false,
+    checked = false,
     children
   } = _ref;
   const [accordionIsOpen, setAccordionIsOpen] = React.useState(isOpen);
-  const [checked, setChecked] = React.useState(false);
   const handleToggle = () => {
-    setChecked(!checked);
-    onToggle?.(id, !checked);
+    onToggle?.(!checked);
   };
   const handleAccordionClick = () => {
     if (!disabled) {
@@ -54,7 +53,8 @@ const Accordion = exports.Accordion = /*#__PURE__*/React.forwardRef((_ref, ref)
   }, /*#__PURE__*/React.createElement(_Toggle.Toggle, {
     checked: checked,
     onChange: handleToggle,
-    ariaLabel: 'toggle'
+    ariaLabel: 'toggle',
+    disabled: disabled
   })), header), /*#__PURE__*/React.createElement(_Button.Button, {
     iconLeftName: accordionIsOpen ? 'chevron-up' : 'chevron-down',
     disabled: disabled,

package/lib/components/Accordion/Accordion.js.flow

@@ -25,7 +25,8 @@ export type AccordionPropsType = {
   disabled?: boolean,
   showToggle?: boolean,
   onChange?: ?(id?: string, isOpen: boolean) => mixed,
-  onToggle?: ?(id?: string, checked?: boolean) => mixed,
+  checked?: boolean,
+  onToggle?: (checked: boolean) => mixed,
 };
 
 export const Accordion: React$AbstractComponent<
@@ -42,17 +43,14 @@ export const Accordion: React$AbstractComponent<
       classNames,
       isOpen = false,
       showToggle = false,
+      checked = false,
       children,
     }: AccordionPropsType,
     ref,
   ) => {
     const [accordionIsOpen, setAccordionIsOpen] = React.useState(isOpen);
-
-    const [checked, setChecked] = React.useState<boolean>(false);
-
     const handleToggle = () => {
-      setChecked(!checked);
-      onToggle?.(id, !checked);
+      onToggle?.(!checked);
     };
 
     const handleAccordionClick = () => {
@@ -87,6 +85,7 @@ export const Accordion: React$AbstractComponent<
                   checked={checked}
                   onChange={handleToggle}
                   ariaLabel={'toggle'}
+                  disabled={disabled}
                 />
               </div>
             )}

package/lib/components/Accordion/AccordionGroup.js

@@ -14,18 +14,15 @@ const AccordionGroup = _ref => {
     children,
     onAccordionClick,
     onToggle,
-    enabledToggleIds = [],
     initialOpenId = '',
     classNames
   } = _ref;
   const [openId, setOpenedId] = React.useState(initialOpenId);
-  const [checks, setChecks] = React.useState(enabledToggleIds);
   const handleAccordionChange = (id, isOpen) => {
     setOpenedId(isOpen ? id : '');
     onAccordionClick?.(id, isOpen);
   };
   const handleToggle = (id, checked) => {
-    setChecks(prev => checked ? [...prev, id] : prev.filter(x => x !== id));
     setOpenedId(prev => checked ? id : prev === id ? '' : prev);
     onToggle?.(id, checked);
   };
@@ -34,18 +31,21 @@ const AccordionGroup = _ref => {
       return null;
     }
     const childId = child.props.id;
-    const isDisabled = !checks.includes(childId);
     const isOpen = openId === childId;
+    const accordionOnToggle = checked => {
+      handleToggle(childId, checked); // parents onToggle, pass id as well.
+      child.props.onToggle?.(checked);
+    };
     return /*#__PURE__*/React.cloneElement(child, {
       classNames: {
-        headerWrapper: _AccordionGroupModule.default.accordionHeaderWrapper,
-        wrapper: _AccordionGroupModule.default.accordionWrapper
+        ...child.props.classNames,
+        wrapper: (0, _classify.default)(_AccordionGroupModule.default.accordionWrapper, child.props.classNames?.wrapper)
       },
       onChange: handleAccordionChange,
-      onToggle: handleToggle,
+      onToggle: accordionOnToggle,
       showToggle: true,
-      disabled: isDisabled,
-      isOpen
+      isOpen,
+      key: childId
     });
   });
   return /*#__PURE__*/React.createElement("div", {

package/lib/components/Accordion/AccordionGroup.js.flow

@@ -24,20 +24,16 @@ export const AccordionGroup = ({
   children,
   onAccordionClick,
   onToggle,
-  enabledToggleIds = [],
   initialOpenId = '',
   classNames,
 }: AccordionGroupPropsType): React.Node => {
   const [openId, setOpenedId] = React.useState(initialOpenId);
-  const [checks, setChecks] = React.useState(enabledToggleIds);
+
   const handleAccordionChange = (id, isOpen) => {
     setOpenedId(isOpen ? id : '');
     onAccordionClick?.(id, isOpen);
   };
   const handleToggle = (id, checked) => {
-    setChecks((prev) =>
-      checked ? [...prev, id] : prev.filter((x) => x !== id),
-    );
     setOpenedId((prev) => (checked ? id : prev === id ? '' : prev));
     onToggle?.(id, checked);
   };
@@ -48,20 +44,26 @@ export const AccordionGroup = ({
 
     const childId = child.props.id;
 
-    const isDisabled = !checks.includes(childId);
-
     const isOpen = openId === childId;
 
+    const accordionOnToggle = (checked) => {
+      handleToggle(childId, checked); // parents onToggle, pass id as well.
+      child.props.onToggle?.(checked);
+    };
+
     return React.cloneElement(child, {
       classNames: {
-        headerWrapper: css.accordionHeaderWrapper,
-        wrapper: css.accordionWrapper,
+        ...child.props.classNames,
+        wrapper: classify(
+          css.accordionWrapper,
+          child.props.classNames?.wrapper,
+        ),
       },
       onChange: handleAccordionChange,
-      onToggle: handleToggle,
+      onToggle: accordionOnToggle,
       showToggle: true,
-      disabled: isDisabled,
       isOpen,
+      key: childId,
     });
   });
 

package/lib/components/ButtonDropdown/ButtonDropdown.js.flow

@@ -21,7 +21,7 @@ import {
 import {useReferenceElementWidth} from '../../hooks';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
-import {type ClickAwayRefType, ClickAway} from '../../utils/click-away';
+import {ClickAway, type ClickAwayRefType} from '../../utils/click-away';
 import {mergeRefs} from '../../utils/merge-refs';
 import type {ButtonProps} from '../Button';
 import {Button} from '../Button';

package/lib/components/Charts/ColumnChart/ColumnChart.js.flow

@@ -19,9 +19,9 @@ import {
 } from '../../../utils/charts';
 import classify from '../../../utils/classify';
 import {
+  ChartWrapper,
   type ChartWrapperClassNames,
   type ExportOptionType,
-  ChartWrapper,
 } from '../ChartWrapper';
 
 import css from './ColumnChart.module.css';

package/lib/components/Charts/DonutChart/DonutChart.js.flow

@@ -19,9 +19,9 @@ import {
 } from '../../../utils/charts';
 import classify from '../../../utils/classify';
 import {
+  ChartWrapper,
   type ChartWrapperClassNames,
   type ExportOptionType,
-  ChartWrapper,
 } from '../ChartWrapper';
 
 import typographyCss from '../../../styles/typography.module.css';

package/lib/components/Charts/FunnelChart/FunnelChart.js.flow

@@ -21,9 +21,9 @@ import {
 } from '../../../utils/charts/funnelChart';
 import classify from '../../../utils/classify';
 import {
+  ChartWrapper,
   type ChartWrapperClassNames,
   type ExportOptionType,
-  ChartWrapper,
 } from '../ChartWrapper';
 
 import css from './FunnelChart.module.css';

package/lib/components/Charts/LineChart/LineChart.js.flow

@@ -18,9 +18,9 @@ import {
 } from '../../../utils/charts';
 import classify from '../../../utils/classify';
 import {
+  ChartWrapper,
   type ChartWrapperClassNames,
   type ExportOptionType,
-  ChartWrapper,
 } from '../ChartWrapper';
 
 import css from './LineChart.module.css';

package/lib/components/Charts/SpiderChart/SpiderChart.js.flow

@@ -16,9 +16,9 @@ import {
 } from '../../../utils/charts';
 import classify from '../../../utils/classify';
 import {
+  ChartWrapper,
   type ChartWrapperClassNames,
   type ExportOptionType,
-  ChartWrapper,
 } from '../ChartWrapper';
 
 import css from './SpiderChart.module.css';

package/lib/components/Dropdown/Dropdown.js.flow

@@ -19,7 +19,7 @@ import {
 import {useReferenceElementWidth} from '../../hooks';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
-import {type ClickAwayRefType, ClickAway} from '../../utils/click-away';
+import {ClickAway, type ClickAwayRefType} from '../../utils/click-away';
 import {mergeRefs} from '../../utils/merge-refs';
 import type {InputProps} from '../Input';
 import {Input} from '../Input';

package/lib/components/FileUpload/FileUpload.js.flow

@@ -3,8 +3,8 @@ import * as React from 'react';
 
 // $FlowFixMe[untyped-import] -- this should be fixed soon
 import {
-  type UseFileUploadReturnProps,
   useFileUpload,
+  type UseFileUploadReturnProps,
 } from '../../hooks/useFileUpload';
 import classify from '../../utils/classify';
 import {UnstyledButton} from '../Button';

package/lib/components/InlineDropdown/InlineDropdown.js.flow

@@ -21,7 +21,7 @@ import {
 import {useReferenceElementWidth} from '../../hooks';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
-import {type ClickAwayRefType, ClickAway} from '../../utils/click-away';
+import {ClickAway, type ClickAwayRefType} from '../../utils/click-away';
 import {mergeRefs} from '../../utils/merge-refs';
 import type {UnstyledButtonProps} from '../Button';
 import {UnstyledButton} from '../Button';

package/lib/components/Table/Table.js

@@ -57,7 +57,7 @@ function Table(props) {
   /**
    *
    */
-  // eslint-disable-next-line unused-imports/no-unused-vars
+
   const {
     sortedEntries,
     sortedKeys,

package/lib/components/Table/Table.js.flow

@@ -118,7 +118,7 @@ export function Table<Data: GenericObject, Extras: GenericObject>(
   /**
    *
    */
-  // eslint-disable-next-line unused-imports/no-unused-vars
+
   const {sortedEntries, sortedKeys, ...sortableProps} = useSortableEntries(
     entries,
     idName,

package/lib/components/Toggle/Toggle.js

@@ -75,4 +75,5 @@ const Toggle = exports.Toggle = /*#__PURE__*/React.forwardRef((_ref, forwardRef)
   })), labelPosition === 'right' && React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_ToggleModule.default.toggleLabel, classNames?.label)
   }, children));
-});
+});
+Toggle.name = Toggle.displayName = 'Toggle';

package/lib/components/Toggle/Toggle.js.flow

@@ -111,3 +111,5 @@ export const Toggle: React$AbstractComponent<ToggleProps, HTMLInputElement> =
       );
     },
   );
+
+Toggle.name = Toggle.displayName = 'Toggle';

package/lib/components/Tooltip/Tooltip.js

@@ -16,7 +16,7 @@ var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-/* eslint-disable flowtype/no-weak-types */
+/* eslint-disable ft-flow/no-weak-types */
 
 const DELAY_MOTION_DURATION_TYPES = exports.DELAY_MOTION_DURATION_TYPES = Object.freeze({
   none: 'none',

package/lib/components/Tooltip/Tooltip.js.flow

@@ -37,7 +37,7 @@ import {Truncate} from '../Truncate';
 
 import css from './Tooltip.module.css';
 
-/* eslint-disable flowtype/no-weak-types */
+/* eslint-disable ft-flow/no-weak-types */
 type ClassNames = $ReadOnly<{tooltip?: string, title?: string, body?: string}>;
 
 export const DELAY_MOTION_DURATION_TYPES = Object.freeze({

package/lib/components/Typeahead/Typeahead.js.flow

@@ -19,7 +19,7 @@ import {
 import {useReferenceElementWidth} from '../../hooks';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
-import {type ClickAwayRefType, ClickAway} from '../../utils/click-away';
+import {ClickAway, type ClickAwayRefType} from '../../utils/click-away';
 import {mergeRefs} from '../../utils/merge-refs';
 import type {InputProps} from '../Input';
 import type {MenuOption, MenuProps} from '../Menu';

package/lib/hooks/useLockedBody/useLockedBody.js

@@ -47,7 +47,6 @@ function useLockedBody() {
     if (locked !== initialLocked) {
       setLocked(initialLocked);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [initialLocked]);
   return [locked, setLocked];
 }

package/lib/hooks/useLockedBody/useLockedBody.js.flow

@@ -48,7 +48,6 @@ export function useLockedBody(initialLocked: boolean = false): ReturnType {
     if (locked !== initialLocked) {
       setLocked(initialLocked);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [initialLocked]);
 
   return [locked, setLocked];

package/lib/hooks/usePagination/usePagination.js

@@ -48,12 +48,12 @@ const usePagination = props => {
   if (style === 'primary') {
     itemList = [...(showFirstButton ? ['first'] : []), ...(hidePrevButton ? [] : ['previous']), ...startPages,
     // Start ellipsis
-    // eslint-disable-next-line no-nested-ternary
+
     ...(siblingsStart > boundaryCount + 2 ? ['start-ellipsis'] : boundaryCount + 1 < totalPages - boundaryCount ? [boundaryCount + 1] : []),
     // Sibling pages
     ...(0, _helpers.range)(siblingsStart, siblingsEnd),
     // End ellipsis
-    // eslint-disable-next-line no-nested-ternary
+
     ...(siblingsEnd < totalPages - boundaryCount - 1 ? ['end-ellipsis'] : totalPages - boundaryCount > boundaryCount ? [totalPages - boundaryCount] : []), ...endPages, ...(hideNextButton ? [] : ['next']), ...(showLastButton ? ['last'] : [])];
   } else if (style === 'secondary') {
     itemList = [...(showFirstButton ? ['first'] : []), ...(hidePrevButton ? [] : ['previous']), ...(hideNextButton ? [] : ['next']), ...(showLastButton ? ['last'] : [])];

package/lib/hooks/usePagination/usePagination.js.flow

@@ -72,7 +72,7 @@ export const usePagination = (
       ...startPages,
 
       // Start ellipsis
-      // eslint-disable-next-line no-nested-ternary
+
       ...(siblingsStart > boundaryCount + 2
         ? ['start-ellipsis']
         : boundaryCount + 1 < totalPages - boundaryCount
@@ -83,7 +83,7 @@ export const usePagination = (
       ...range(siblingsStart, siblingsEnd),
 
       // End ellipsis
-      // eslint-disable-next-line no-nested-ternary
+
       ...(siblingsEnd < totalPages - boundaryCount - 1
         ? ['end-ellipsis']
         : totalPages - boundaryCount > boundaryCount

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.4.14",
+  "version": "0.4.15",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {
@@ -58,8 +58,8 @@
   "devDependencies": {
     "@babel/cli": "^7.18.10",
     "@babel/core": "^7.18.13",
-    "@babel/eslint-parser": "^7.18.9",
-    "@babel/eslint-plugin": "^7.18.10",
+    "@babel/eslint-parser": "^7.28.0",
+    "@babel/eslint-plugin": "^7.25.9",
     "@babel/preset-env": "^7.18.10",
     "@babel/preset-flow": "^7.18.6",
     "@babel/preset-react": "^7.18.6",
@@ -80,16 +80,17 @@
     "chalk": "^5.0.1",
     "chromatic": "^6.11.4",
     "cspell": "^9.1.2",
-    "eslint": "^8.22.0",
-    "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^26.8.3",
-    "eslint-plugin-react": "^7.30.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-simple-import-sort": "^8.0.0",
-    "eslint-plugin-storybook": "^9.0.10",
-    "eslint-plugin-unused-imports": "^2.0.0",
+    "eslint": "^9.9.0",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jest": "^29.0.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-storybook": "^9.1.2",
+    "eslint-plugin-unused-imports": "^4.1.4",
     "flow-bin": "^0.184.0",
+    "globals": "^16.3.0",
     "gulp": "^4.0.2",
     "gulp-babel": "^8.0.0",
     "gulp-rename": "^2.0.0",

package/.eslintignore

@@ -1,2 +0,0 @@
-/src/assets/fontawesome/
-node_modules/

package/.eslintrc.yml

@@ -1,122 +0,0 @@
-{
-  'root': true,
-  'env': {'browser': true, 'node': true, 'es2020': true},
-  'parser': '@babel/eslint-parser',
-  'plugins':
-    ['flowtype', '@babel', 'react', 'import', 'unused-imports', 'react-hooks','simple-import-sort'],
-  'settings': {'react': {'version': 'detect'}},
-  'globals': {'Iterator': 'readonly'},
-  'rules':
-    {
-      'arrow-body-style': ['warn', 'as-needed'],
-      'curly': ['warn', 'all'],
-      comma-spacing: ["warn", { "before": false, "after": true }],
-      'eol-last': 'warn',
-      'eqeqeq': ['error', 'always', {'null': 'ignore'}],
-      indent: ["error", 2],
-      'max-params': ['warn', {'max': 4}],
-      'no-alert': 'warn',
-      'no-console': ['error', {allow: ['warn', 'error']}],
-
-      'no-const-assign': 'error',
-      'no-dupe-args': 'error',
-      'no-dupe-keys': 'error',
-      'no-duplicate-case': 'error',
-      'no-dupe-class-members': 'error',
-      'no-empty-function': 'warn',
-      'no-empty-pattern': 'error',
-      'no-eval': 'error',
-      'no-extend-native': 'error',
-      'no-extra-boolean-cast': 'error',
-      'no-fallthrough': 'error',
-      'no-floating-decimal': 'error',
-      'no-inner-declarations': 'error',
-      'no-loop-func': 'error',
-      'no-mixed-requires': 'off',
-      'no-nested-ternary': 'off',
-      'no-new-symbol': 'error',
-      'no-redeclare': 'error',
-      'no-restricted-globals': ['error', 'event', 'location'],
-      'no-sparse-arrays': 'error',
-      'no-tabs': 'warn',
-      'no-this-before-super': 'error',
-      'no-trailing-spaces': 'warn',
-      'no-underscore-dangle': 'off',
-      'no-unmodified-loop-condition': 'warn',
-      'no-undef': ['error', {'typeof': true}],
-      'no-unreachable': 'warn',
-      'unused-imports/no-unused-imports': 'error',
-      'unused-imports/no-unused-vars':
-        [
-          'warn',
-          {
-            'vars': 'all',
-            'varsIgnorePattern': '^_',
-            'args': 'after-used',
-            'argsIgnorePattern': '^_',
-          },
-        ],
-      'no-useless-constructor': 'error',
-      'no-var': 'error',
-      'no-with': 'error',
-      'object-shorthand': 'error',
-      'prefer-arrow-callback': 'error',
-      'prefer-const': 'warn',
-      'prefer-spread': 'warn',
-      'quotes': ['warn', 'single', {'allowTemplateLiterals': true}],
-      'require-yield': 'error',
-      'rest-spread-spacing': 'error',
-      'strict': ['warn', 'never'],
-
-      'import/newline-after-import': ['warn', {'count': 2}],
-      'import/no-duplicates': 'error',
-
-      'react/jsx-no-undef': 'error',
-      'react/jsx-pascal-case': 'warn',
-      'react/jsx-uses-react': 'error',
-      'react/jsx-uses-vars': 'error',
-      'react/no-array-index-key': 'warn',
-      'react/no-deprecated': 'error',
-      'react/no-direct-mutation-state': 'error',
-      'react/no-string-refs': 'warn',
-      'react/prop-types': 'off',
-      'react/react-in-jsx-scope': 'error',
-
-      'flowtype/define-flow-type': 'error',
-      'flowtype/delimiter-dangle': ['warn', 'always-multiline'],
-      'flowtype/no-existential-type': 'warn',
-      'flowtype/no-weak-types': 'warn',
-      'flowtype/semi': ['warn', 'always'],
-
-      'react-hooks/rules-of-hooks': 'error',
-      "simple-import-sort/imports": "error",
-      "simple-import-sort/exports": "error"
-    },
-  'overrides':
-    [
-      {
-        'files': ['**/__tests__/*.js', '**/__tests__/*.jsx'],
-        'env': {'jest': true},
-        'plugins': ['jest'],
-      },
-      {'files': ['**/*.stories.jsx'], 'rules': {'semi': ['warn', 'always']}},
-      {
-        "files": ["*.js", "*.jsx", "*.ts", "*.tsx"],
-        "rules": {
-          "simple-import-sort/imports": [
-            "error",
-            {
-              "groups": [
-                ["^react", "^@?\\w"],
-                ["^(@|components)(/.*|$)"],
-                ["^\\u0000"],
-                ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
-                ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
-                ["^.+\\.?(css)$"]
-              ]
-            }
-          ]
-        }
-      }
-    ],
-}