chore: update yarn.lock file and resolve merge conflicts

packages/react-docs/components/BorderedBox.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Box, useColorMode } from '@tonic-ui/react';
+
+const BorderedBox = (props) => {
+  const [colorMode] = useColorMode();
+  const styleProps = {
+    border: 1,
+    borderColor: colorMode === 'light' ? 'rgba(0, 0, 0, .12)' : 'rgba(255, 255, 255, .12)',
+  };
+
+  return (
+    <Box
+      {...styleProps}
+      {...props}
+    />
+  );
+};
+
+export default BorderedBox;

packages/react-docs/components/TableOfContents.js

@@ -53,7 +53,9 @@ const TableOfContents = (props) => {
 
     const mainContent = document.querySelector('#main-content');
     if (mainContent) {
-      setNodes(Array.from(mainContent.querySelectorAll('h2,h3,h4,h5,h6')));
+      // Use the `:scope` pseudo-class to select all direct child heading elements of the main content, excluding h1
+      const headingSelectors = ['h2', 'h3', 'h4', 'h5', 'h6'].map(h => `:scope>${h}`).join(',');
+      setNodes(Array.from(mainContent.querySelectorAll(headingSelectors)));
     }
 
     if (window.location.hash) {

packages/react-docs/config/sidebar-routes.js

@@ -35,7 +35,7 @@ export const routes = [
   {
     title: 'Contributing',
     icon: (props) => (
-      <UserTeamIcon size="4x" {...props} />
+      <Icon icon="user-team" size="4x" {...props} />
     ),
     routes: [
       { title: 'Contributing Guidelines', path: 'contributing' },
@@ -55,7 +55,7 @@ export const routes = [
   {
     title: 'Migrations',
     icon: (props) => (
-      <MigrateSuccessIcon size="4x" {...props} />
+      <Icon icon="migrate-success" size="4x" {...props} />
     ),
     routes: [
       { title: 'Migrating from v0 to v1', path: 'migrations/migrating-from-v0-to-v1' },

packages/react-docs/pages/contributing/react-components-part-1.page.mdx

@@ -18,7 +18,7 @@ Create the component file: `packages/react/src/code/Code.js`
 * Use `forwardRef` to let your component receive a `ref` and forward it to a child component.
 * Place styles in a separate file and apply style props before passing other props.
 
-```jsx
+```jsx disabled
 import React, { forwardRef } from 'react';
 import { Box } from '../box';
 import { useCodeStyle } from './styles';
@@ -48,7 +48,7 @@ Create the styles file: `packages/react/src/code/styles.js`
 * Utilize `useColorMode` to get the current color mode and apply corresponding color styles.
 * Exercise caution when using `useColorStyle` within the UI component library, as a React application may inadvertently overwrite the color style object for customization purposes.
 
-```js
+```js disabled
 import { useColorMode } from '../color-mode';
 
 const useCodeStyle = () => {
@@ -80,7 +80,7 @@ export {
 
 Create the index file: `packages/react/src/code/index.js`
 
-```js
+```js disabled
 import Code from './Code';
 
 export {
@@ -94,7 +94,7 @@ Create the test file: `packages/react/src/code/__tests__/Code.test.js`
 
 * Use `testA11y` to perform accessibility testing on the rendered component within the test. This helps ensure the component meets accessibility standards.
 
-```jsx
+```jsx disabled
 import { render } from '@tonic-ui/react/test-utils/render';
 import { testA11y } from '@tonic-ui/react/test-utils/accessibility';
 import { Code } from '@tonic-ui/react/src';
@@ -123,15 +123,15 @@ describe('Code', () => {
 #### Step 1: Update exports
 
 Modify `packages/react/src/index.js` to include the new component:
-```js
+```js disabled
 export * from './code';
 ```
 
 #### Step 2: Update tests
 
 Include the new component in the `expectedExports` list in `packages/react/__tests__/index.test.js`:
 
-```js
+```js disabled
 const expectedExports = [
   // other components
   'Code',
@@ -175,7 +175,7 @@ children | ReactNode | |
 
 Include the new documentation page in `packages/react-docs/config/sidebar-routes.js`:
 
-```js
+```js disabled
 {
   title: 'Code',
   path: 'components/code',

packages/react-docs/pages/contributing/react-components-part-2.page.mdx

@@ -8,7 +8,7 @@ The coding style guideline is provided here to help maintain consistency across
 
 A basic component should be a functional component that is wrapped in `forwardRef`. The `displayName` is set for easier debugging and inspection.
 
-```jsx
+```jsx disabled
 import React, { forwardRef } from 'react';
 import { useComponentStyle } from './styles';
 
@@ -33,7 +33,7 @@ export default Component;
 
 For components that accept a function as a child, use the `runIfFn` utility to ensure that the child function is executed correctly.
 
-```jsx
+```jsx disabled
 import { runIfFn } from '@tonic-ui/utils';
 import React, { forwardRef } from 'react';
 import { useComponentStyle } from './styles';
@@ -68,7 +68,7 @@ export default Component;
 
 When creating components that share state or methods via context, memoize the state to avoid unnecessary re-renders. You can use either `micro-memoize` or `useMemo` to achieve this. `micro-memoize` does not require specifying dependencies, making the code cleaner.
 
-```jsx
+```jsx disabled
 import { runIfFn } from '@tonic-ui/utils';
 import memoize from 'micro-memoize';
 import React, { forwardRef } from 'react';
@@ -110,7 +110,7 @@ export default Component;
 
 For components that manage their own state but can also be controlled externally, use a reducer and effect hooks to synchronize state changes.
 
-```jsx
+```jsx disabled
 import { runIfFn } from '@tonic-ui/utils';
 import memoize from 'micro-memoize';
 import React, { forwardRef, useEffect, useReducer } from 'react';

packages/react-docs/pages/contributing/react-documentation-site.page.mdx

@@ -17,10 +17,9 @@ _document.page.js | Custom `Document` component that allows you to modify the in
 [patterns/](../patterns) | Contains documentation on design patterns and best practices for Tonic UI.
 [components/](../components) | Contains documentation for Tonic UI React components: `@tonic-ui/react`
 [hooks/](../hooks) | Contains documentation for Tonic UI React Hooks: `@tonic-ui/react-hooks`
-[icons/](../icons) | Contains documentation for Tonic UI React Icons: `@tonic-ui/react-icons`
+[lab/](../lab) | Contains documentation for Tonic UI React Lab: `@tonic-ui/react-lab`
 [styled-system/](../styled-system) | Contains documentation for Tonic UI Styled System: `@tonic-ui/styled-system`
 [theme/](../theme) | Contains documentation for Tonic UI theme: `@tonic-ui/theme`
-[playground/](../playground) | Demonstrates how to create interactive applications with Tonic UI.
 
 > Tip: Page extensions should be either `.page.js` or `.page.mdx`; otherwise, they will be treated as non-page files. If you need to use other page extensions, you can configure them in `next.config.js`.
 
@@ -64,7 +63,7 @@ Specifies how to import the component into your project. This section provides t
 ````mdx
 ## Import
 
-```js
+```js disabled
 import { Box } from '@tonic-ui/react';
 ```
 ````
@@ -85,7 +84,7 @@ By default, the `Box` component renders a `div` element. There might be cases wh
 
 For the example above, add a `using-the-as-prop.js` file in the same directory:
 
-````jsx
+````jsx disabled
 import { Box } from '@tonic-ui/react';
 import React from 'react';
 

packages/react-lab/__tests__/index.test.js

@@ -1,15 +1,16 @@
-import * as moduleExport from '@tonic-ui/react-icons/src';
-import * as icons from '@tonic-ui/react-icons/src/icons';
+import * as moduleExport from '@tonic-ui/react-lab/src';
 
 test('should match expected exports', () => {
-  const expectedExports = [
-    'SVGIcon',
-    'createSVGIcon',
-
-    // icons
-    ...Object.keys(icons),
+  const exportedComponents = [
+    // date-time-pickers
+    'Calendar',
+    'DatePicker',
   ];
+
   const receivedExports = Object.keys(moduleExport);
+  const expectedExports = [
+    ...exportedComponents,
+  ];
 
   expect(receivedExports.sort()).toEqual(expectedExports.sort());
 });