chore: upgrade dependencies for minors and fixes

.circleci/config.yml

@@ -10,7 +10,7 @@ parameters:
     default: v5
   nodejs_base_image:
     type: string
-    default: 'cimg/node:18.17.1'
+    default: 'cimg/node:20.17.0'
 
 executors:
   nodejs:
@@ -39,10 +39,10 @@ jobs:
     executor: nodejs
     steps:
       - *checkout
+      - *restore_node_modules
       - run:
           name: Run yarn install and save node modules
           command: yarn install
-      - *restore_node_modules
       - save_cache:
           key: << pipeline.parameters.cache_version >>-yarn-{{ checksum "/home/circleci/welcome-ui/yarn.lock" }}
           paths:
@@ -336,4 +336,4 @@ workflows:
             branches:
               ignore: /.*/
             tags:
-              only: /v\d.(\d\d|\d).(\d\d|\d)-.*/
+              only: /v\d.(\d\d|\d).(\d\d|\d)-.*/

.tool-versions

@@ -1,2 +1,2 @@
-nodejs 18.17.1
+nodejs 20.17.0
 yarn 1.22.10

lerna.json

@@ -1,10 +1,6 @@
 {
-  "packages": [
-    "packages/*",
-    "icons"
-  ],
+  "packages": ["packages/*", "icons"],
   "version": "5.19.0",
   "npmClient": "yarn",
-  "useWorkspaces": true,
   "useNx": false
 }

package.json

@@ -1,28 +1,26 @@
 {
   "name": "@welcome-ui/repo",
-  "version": "1.1.1",
-  "main": "dist/welcome-ui.cjs.js",
-  "module": "dist/welcome-ui.es.js",
+  "version": "1.0.0",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "scripts": {
     "build:core": "./scripts/core.sh",
-    "build:docs": "lerna run doc --concurrency 2",
-    "build:packages": "lerna run build --ignore website --ignore @welcome-ui/core",
-    "build:types": "lerna run types",
+    "build:docs": "yarn lerna run doc --concurrency 2",
+    "build:packages": "yarn lerna run build --ignore website --ignore @welcome-ui/core",
+    "build:types": "yarn lerna run types",
     "build": "yarn webfont:build && yarn build:core && yarn build:packages && yarn build:types && yarn build:docs",
     "check:audit": "/bin/bash -c 'yarn audit --level critical; [[ $? -ge 16 ]] && exit 1 || exit 0'",
-    "check:deps": "lerna exec --ignore website --no-bail --stream -- depcheck --quiet",
-    "clean": "lerna clean",
+    "check:deps": "yarn lerna exec --no-bail --stream depcheck",
+    "clean": "yarn lerna clean",
     "website:build": "cd website && yarn && yarn build",
     "website:deploy": "yarn && yarn icons:build && yarn build && yarn website:build",
     "website:dev": "cd website && yarn dev -p 3020",
     "website:examples": "node -r esm website/build-app/utils/examples-page-exporter.ts",
     "first:install": "yarn && yarn build && yarn icons:build",
     "homerun": "yarn clean --yes && rm -rf node_modules/ website/.next/ && yarn cache clean && yarn && yarn build && yarn start",
-    "icons:build": "lerna run build --scope @welcome-ui/icons",
+    "icons:build": "yarn lerna run build --scope @welcome-ui/icons",
     "icons:collect": "node -r esm scripts/icons-collect.js",
     "icons:optimize": "node -r esm scripts/icons-optimize.js",
-    "icons:types": "lerna run types --scope @welcome-ui/icons",
+    "icons:types": "yarn lerna run types --scope @welcome-ui/icons",
     "icons": "yarn icons:optimize && yarn icons:collect && yarn icons:build && yarn icons:types && yarn webfont && yarn build && yarn",
     "lint:css": "stylelint 'packages/**/styles.ts'",
     "lint:js": "eslint packages scripts --max-warnings 0",
@@ -74,69 +72,69 @@
     "url": "https://github.com/WTTJ/welcome-ui/issues"
   },
   "devDependencies": {
-    "@babel/cli": "7.22.10",
-    "@babel/core": "7.24.8",
-    "@babel/eslint-parser": "^7.22.11",
+    "@babel/cli": "7.24.8",
+    "@babel/core": "7.25.2",
+    "@babel/eslint-parser": "^7.25.1",
     "@babel/plugin-proposal-class-properties": "7.18.6",
     "@babel/plugin-proposal-optional-chaining": "7.21.0",
-    "@babel/plugin-transform-modules-commonjs": "7.23.0",
-    "@babel/plugin-transform-runtime": "^7.22.10",
-    "@babel/preset-env": "7.24.7",
-    "@babel/preset-react": "7.22.15",
+    "@babel/plugin-transform-modules-commonjs": "7.24.8",
+    "@babel/plugin-transform-runtime": "^7.25.4",
+    "@babel/preset-env": "7.25.4",
+    "@babel/preset-react": "7.24.7",
     "@babel/preset-typescript": "^7.22.11",
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
-    "@swc/core": "^1.3.86",
+    "@swc/core": "^1.7.18",
     "@swc/jest": "^0.2.29",
-    "@testing-library/dom": "9.3.4",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "14.5.2",
-    "@types/emoji-mart": "3.0.9",
-    "@types/jest": "^29.5.4",
+    "@types/emoji-mart": "3.0.14",
+    "@types/jest": "^29.5.12",
     "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.escaperegexp": "^4.1.6",
     "@types/lodash.groupby": "^4.6.6",
-    "@types/lodash.range": "^3.2.6",
+    "@types/lodash.range": "^3.2.9",
     "@types/ramda": "^0.29.2",
-    "@types/react": "18.0.25",
-    "@types/react-dom": "18.2.7",
-    "@types/react-window": "^1.8.5",
-    "@types/styled-components": "^5.1.25",
+    "@types/react": "18.3.4",
+    "@types/react-dom": "18.3.0",
+    "@types/react-window": "^1.8.8",
+    "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^5.59.11",
     "@typescript-eslint/parser": "^5.59.11",
     "@vusion/webfonts-generator": "^0.8.0",
     "@xstyled/styled-components": "^3.7.3",
-    "aws-sdk": "^2.1397.0",
-    "babel-jest": "29.6.4",
+    "aws-sdk": "^2.1682.0",
+    "babel-jest": "29.7.0",
     "babel-plugin-annotate-pure-calls": "^0.4.0",
     "babel-plugin-transform-async-to-promises": "^0.8.18",
     "colors": "^1.4.0",
     "conventional-github-releaser": "^3.1.3",
     "date-fns": "^2.30.0",
-    "depcheck": "^1.4.6",
+    "depcheck": "^1.4.7",
     "esbuild": "^0.17.11",
     "esbuild-plugin-replace": "^1.4.0",
     "esm": "^3.2.25",
     "husky": "8.0.3",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-styled-components": "7.2.0",
-    "lerna": "^6.5.1",
+    "lerna": "^8.1.8",
     "lerna-update-wizard": "^1.1.2",
     "lodash.difference": "^4.5.0",
     "minimist": "1.2.8",
     "onchange": "^7.0.2",
     "postcss-styled-syntax": "^0.5.0",
-    "react": "^18.1.0",
+    "react": "^18.3.1",
     "react-docgen-typescript": "^2.2.2",
-    "react-dom": "^18.1.0",
-    "react-router-dom": "6.16.0",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "6.26.1",
     "rimraf": "^4.1.1",
     "standard-version": "9.5.0",
     "styled-components": "^5.3.9",
-    "svgo": "^3.0.1",
+    "svgo": "3.0.2",
     "typescript": "5.0.2",
     "wttj-config": "^2.6.2",
     "yargs": "^17.7.2"

packages/Breadcrumb/src/Item.styles.ts

@@ -20,7 +20,7 @@ export const Item = styled.aBox`
   }
 `
 
-export const Separator = styled.span`
+export const Separator = styled.spanBox`
   ${th('breadcrumbs.separator')};
   display: flex;
   align-items: center;

packages/Breadcrumb/src/styles.ts

@@ -8,15 +8,15 @@ interface GradientProps {
   gradientBackground: Colors
 }
 
-export const StartGradient = styled.span<GradientProps>(
+export const StartGradient = styled.spanBox<GradientProps>(
   ({ gradientBackground, theme }) => css`
     left: 0;
     background-image: ${gradient(theme as Theme, gradientBackground)};
     transform-origin: left;
   `
 )
 
-export const EndGradient = styled.span<GradientProps>(
+export const EndGradient = styled.spanBox<GradientProps>(
   ({ gradientBackground, theme }) => css`
     right: 0;
     background-image: ${gradient(theme as Theme, gradientBackground, 'left')};
@@ -39,7 +39,7 @@ export const Breadcrumb = styled(Box)`
   }
 `
 
-export const List = styled.ol`
+export const List = styled.olBox`
   display: inline-flex;
   align-items: center;
   max-width: 100%;

packages/ButtonGroup/src/styles.ts

@@ -1,6 +1,6 @@
 import styled, { system } from '@xstyled/styled-components'
 
-export const ButtonGroup = styled.div`
+export const ButtonGroup = styled.divBox`
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;

packages/DateTimePicker/src/styles.ts

@@ -8,7 +8,7 @@ const focusStyles = css`
   }
 `
 
-export const DateTimePicker = styled.div`
+export const DateTimePicker = styled.divBox`
   position: relative;
   display: inline-flex;
   flex-wrap: nowrap;

packages/DateTimePickerCommon/src/CustomPopper.tsx

@@ -19,7 +19,7 @@ export const CustomPopper = ({
   return <StyledCustomPopper popperStyles={popperProps}>{children}</StyledCustomPopper>
 }
 
-const StyledCustomPopper = styled.div(
+const StyledCustomPopper = styled.divBox(
   ({ popperStyles }: { popperStyles: CSSObject }) => css`
     ${datePickerStyles};
     ${fixAriaMessageStyle};

packages/Field/src/styles.ts

@@ -58,7 +58,7 @@ type IconWrapperProps = {
   size?: FieldIconSize
 }
 
-export const IconWrapper = styled.div<IconWrapperProps>(
+export const IconWrapper = styled.divBox<IconWrapperProps>(
   ({ iconPlacement, size }) => css`
     position: absolute;
     top: 0;
@@ -89,7 +89,7 @@ export const IconWrapper = styled.div<IconWrapperProps>(
   `
 )
 
-export const IconGroupWrapper = styled.div(
+export const IconGroupWrapper = styled.divBox(
   ({ size }: { size: FieldIconSize }) => css`
     position: absolute;
     padding: 0;

packages/FileDrop/src/styles.ts

@@ -47,7 +47,7 @@ export const FilePreview = styled.div`
   justify-content: center;
 `
 
-export const ImagePreview = styled.img`
+export const ImagePreview = styled.imgBox`
   max-height: 100%;
   max-width: 100%;
   object-fit: contain;

packages/MarkdownEditor/src/styles.ts

@@ -56,7 +56,7 @@ export const Toolbar = styled.div`
   z-index: 1;
 `
 
-export const ToolbarIcon = styled.a.withConfig({ shouldForwardProp })<ToolbarIconOptions>(
+export const ToolbarIcon = styled.aBox.withConfig({ shouldForwardProp })<ToolbarIconOptions>(
   ({ active }) => css`
     display: flex;
     align-items: center;
@@ -91,7 +91,7 @@ export const EmojiPicker = styled.div`
   right: ${th('space.md')};
 `
 
-export const Actions = styled.div`
+export const Actions = styled.divBox`
   position: absolute;
   bottom: 0;
   left: 0;

packages/Modal/src/Assets/AssetWithTitle.tsx

@@ -17,7 +17,7 @@ type AssetWithTitleProps = {
 const titleBlockMobile = '4rem'
 const titleBlockDesktop = '6rem'
 
-const Wrapper = styled.div`
+const Wrapper = styled.divBox`
   display: flex;
   flex-direction: column;
 

packages/Pagination/src/styles.ts

@@ -9,7 +9,7 @@ export const List = styled.ul`
   margin: 0;
 `
 
-export const Item = styled.li`
+export const Item = styled.liBox`
   display: inline-block;
   vertical-align: bottom;
   padding: 0;
@@ -47,7 +47,7 @@ export const abstractLinkStyle = css`
   }
 `
 
-export const ArrowLink = styled.a(
+export const ArrowLink = styled.aBox(
   props => css`
     ${abstractLinkStyle};
     ${props['aria-disabled'] &&
@@ -58,7 +58,7 @@ export const ArrowLink = styled.a(
   `
 )
 
-export const PageLink = styled.a(
+export const PageLink = styled.aBox(
   props => css`
     ${abstractLinkStyle};
     ${props['aria-current'] && th('paginations.active')}

packages/RadioGroup/src/styles.ts

@@ -1,7 +1,7 @@
 import styled, { css, system } from '@xstyled/styled-components'
 import { WuiProps } from '@welcome-ui/system'
 
-export const Radios = styled.div<{
+export const Radios = styled.divBox<{
   flexDirection?: WuiProps['flexDirection']
 }>(
   ({ flexDirection }) => css`

packages/Select/package.json

@@ -65,7 +65,7 @@
   "sideEffects": false,
   "homepage": "https://welcome-ui.com/components/select",
   "devDependencies": {
-    "@types/lodash.capitalize": "^4.2.6",
+    "@types/lodash.capitalize": "^4.2.9",
     "lodash.capitalize": "^4.2.1"
   }
 }

packages/Select/src/styles.ts

@@ -13,6 +13,8 @@ import { IconWrapper as WUIIconWrapper } from '@welcome-ui/field'
 
 import { SelectOptions } from './index'
 
+export const IconWrapper = styled(WUIIconWrapper)``
+
 export const Wrapper = styled('div').withConfig({ shouldForwardProp })<{ disabled: boolean }>(
   ({ disabled }) => css`
     position: relative;
@@ -23,8 +25,6 @@ export const Wrapper = styled('div').withConfig({ shouldForwardProp })<{ disable
   `
 )
 
-export const IconWrapper = styled(WUIIconWrapper)``
-
 export const InputWrapper = styled.div`
   position: relative;
 `
@@ -123,7 +123,7 @@ export const Item = styled.li(
   `
 )
 
-export const Indicators = styled.div(
+export const Indicators = styled.divBox(
   ({ size }: { size: Size }) => css`
     position: absolute;
     padding: 0;
@@ -162,7 +162,7 @@ export const DropDownIndicator = styled.button.withConfig({ shouldForwardProp })
   `
 )
 
-export const Tags = styled.div`
+export const Tags = styled.divBox`
   margin-top: lg;
 
   ${/* sc-selector */ StyledTag}:not(:last-child) {

packages/Slider/src/styles.ts

@@ -4,6 +4,7 @@ import { Hint } from '@welcome-ui/hint'
 
 type BorderProps = {
   borderSelectorColor?: string
+  disabled?: boolean
 }
 
 const sliderSelector = css`
@@ -212,7 +213,7 @@ type OutputProps = {
   isVisible?: boolean
 }
 
-export const Output = styled.output<OutputProps>(
+export const Output = styled.outputBox<OutputProps>(
   ({ isVisible }) => css`
     opacity: 0;
     visibility: hidden;