From 95882203c168277b191928567589dfb9b9de48de Mon Sep 17 00:00:00 2001
From: Aditya Gannavarapu <aditya.g@setu.co>
Date: Tue, 6 Aug 2024 00:25:03 +0530
Subject: [PATCH 1/3] 1.2.9

---
 CHANGELOG.md                                  | 779 +++++++++++-------
 package.json                                  |   2 +-
 src/components/CodeBlock/CodeBlock.tsx        |  77 +-
 .../ThemeProvider/ThemeProvider.stories.tsx   |  10 +-
 .../ThemeProvider/ThemeProvider.tsx           | 118 +--
 src/components/ThemeProvider/index.tsx        |   2 +-
 src/components/ThemeProvider/types.ts         |   8 +
 src/components/index.tsx                      | 101 +--
 src/index.tsx                                 | 106 ++-
 vite.config.js                                |  20 +
 10 files changed, 702 insertions(+), 521 deletions(-)
 create mode 100644 src/components/ThemeProvider/types.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index aa8b5036..5d96d0d1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,625 +1,790 @@
 # CHANGELOG
 
+## 1.2.9
+
+-   Update `ThemeProvider` to expose `setTheme` and `useTheme` functionality in any component via local storage
+    -   `const { theme, setTheme } = useTheme();`
+-   Removes the dependency of creating `RootClientSideLayout`
+-   Add a default theme for `CodeBlock`
+-   Update `vite.config.js` to retain `use client;` for Next 14+ support
+
 ## 1.2.7
-- Add `button-font` for each `kind` too
+
+-   Add `button-font` for each `kind` too
 
 ## 1.2.6
-- Fix `Button` active theme bug
-- Add `button-font` via theme
+
+-   Fix `Button` active theme bug
+-   Add `button-font` via theme
 
 ## 1.2.5
-- Fix text colour for lists
-- Add `height` prop for `Divider`
+
+-   Fix text colour for lists
+-   Add `height` prop for `Divider`
 
 ## 1.2.4
-- Add line numbers to `CodeBlock` component with `showLineNumbers` prop
-- Add better token support
-- Fix style overrides for `CodeBlock` component
+
+-   Add line numbers to `CodeBlock` component with `showLineNumbers` prop
+-   Add better token support
+-   Fix style overrides for `CodeBlock` component
 
 ## 1.2.3
-- Remove `as` prop from `Heading`, so you can now use `Heading1`, `Heading2` etc
+
+-   Remove `as` prop from `Heading`, so you can now use `Heading1`, `Heading2` etc
 
 ## 1.2.2
-- Tweak `Range` styles
+
+-   Tweak `Range` styles
 
 ## 1.2.1
-- Add accessibility improvements for `Breadcrumbs`, and `Badge`
+
+-   Add accessibility improvements for `Breadcrumbs`, and `Badge`
 
 ## 1.2.0
-- Add new `Meter` component
+
+-   Add new `Meter` component
 
 ## 1.1.1
-- Fix `Breadcrumbs` style not loading
-- Add resets for `Breadcrumbs` element
+
+-   Fix `Breadcrumbs` style not loading
+-   Add resets for `Breadcrumbs` element
 
 ## 1.1.0
-- Add `OptionCard` component
+
+-   Add `OptionCard` component
 
 ## 1.0.3
-- Rename `HRule` to `Divider`
+
+-   Rename `HRule` to `Divider`
 
 ## 1.0.2
-- Rename `ExpandableContent` to `OptionCard`
+
+-   Rename `ExpandableContent` to `OptionCard`
 
 ## 1.0.1
-- Fix `Breadcrumbs` element type
+
+-   Fix `Breadcrumbs` element type
 
 ## 1.0.0
+
 #### GENERIC CHANGES
-- Move to Vite
-- Move to `pnpm` for package management
-- Remove `styled-components` as a dependency
-- Adopt plain CSS for styling
-- Support twice as many `defaultColours`
-- Use `rem` units for font sizes
-- Ability to set `Element` as a flexbox/grid div using `layoutAsFlexbox` and `layoutAsGrid`
-- Add `horizontalPadding`, `verticalPadding`, `horizontalMargin`, and `verticalMargin`
-- Add generic block-level sectioning elements as custom components. Eg `<Div>`, `<Section>`, `<Article>` etc
-- Add copy code to clipboard for `CodeBlock`
-- Add `RadioTabGroup` component
-- Convert all millisecond values to seconds
+
+-   Move to Vite
+-   Move to `pnpm` for package management
+-   Remove `styled-components` as a dependency
+-   Adopt plain CSS for styling
+-   Support twice as many `defaultColours`
+-   Use `rem` units for font sizes
+-   Ability to set `Element` as a flexbox/grid div using `layoutAsFlexbox` and `layoutAsGrid`
+-   Add `horizontalPadding`, `verticalPadding`, `horizontalMargin`, and `verticalMargin`
+-   Add generic block-level sectioning elements as custom components. Eg `<Div>`, `<Section>`, `<Article>` etc
+-   Add copy code to clipboard for `CodeBlock`
+-   Add `RadioTabGroup` component
+-   Convert all millisecond values to seconds
 
 #### ⚠️ BREAKING CHANGES ⚠️
-- Remove `ThemeProvider` and `theme` prop from all components
-- Refactor `Row` and `Portion` to use CSS Grid and Flexbox both
-- Import, usage and extension of `CodeBlock`
-- Remove `defaultColours` object as exported
-- Remove `InfoPanel` and extend `Drawer` with `position` prop
-- Rename `sidePadding` and `sideMargin` to `horizontalPadding` and `horizontalMargin`
-- Rename `para` to `paragraph` in CSS variables
-- Rename `FormWrapper` to `Form`
-- Rename `CheckBox` to `Checkbox`
-- Add consistent `showWhen`, `closeWhen` and `secondsToShowFor` props for transitory components
-
-[//]: # (TODO: Make Fictoan more accessible)
-[//]: # (TODO: ⚠️ Remove style tag in CodeBlock)
-[//]: # (TODO: ⚠️ Fix TS issue in Select and SWS)
-[//]: # (TODO: Fix Dismiss Button in NotifcationItem)
-[//]: # (TODO: Add mask design to PinInputField)
-[//]: # (TODO: Fix Sidebar scrolling issue)
-[//]: # (TODO: Revamp BreadCrumbs?)
-~~[//]: # (TODO: ⚠️ Fix Meter height issue)~~
 
+-   Remove `ThemeProvider` and `theme` prop from all components
+-   Refactor `Row` and `Portion` to use CSS Grid and Flexbox both
+-   Import, usage and extension of `CodeBlock`
+-   Remove `defaultColours` object as exported
+-   Remove `InfoPanel` and extend `Drawer` with `position` prop
+-   Rename `sidePadding` and `sideMargin` to `horizontalPadding` and `horizontalMargin`
+-   Rename `para` to `paragraph` in CSS variables
+-   Rename `FormWrapper` to `Form`
+-   Rename `CheckBox` to `Checkbox`
+-   Add consistent `showWhen`, `closeWhen` and `secondsToShowFor` props for transitory components
+
+[//]: # "TODO: Make Fictoan more accessible"
+[//]: # "TODO: ⚠️ Remove style tag in CodeBlock"
+[//]: # "TODO: ⚠️ Fix TS issue in Select and SWS"
+[//]: # "TODO: Fix Dismiss Button in NotifcationItem"
+[//]: # "TODO: Add mask design to PinInputField"
+[//]: # "TODO: Fix Sidebar scrolling issue"
+[//]: # "TODO: Revamp BreadCrumbs?"
+
+~~[//]: # (TODO: ⚠️ Fix Meter height issue)~~
 
 ---
 
 ### 0.46.8
-- Fix `focusFirstInputOnReset` prop behaviour to properly set focus on first input on reset
+
+-   Fix `focusFirstInputOnReset` prop behaviour to properly set focus on first input on reset
 
 ### 0.46.7
-- Export custom `PinInputFieldElementType` for supporting custom ref types in TypeScript
+
+-   Export custom `PinInputFieldElementType` for supporting custom ref types in TypeScript
 
 ### 0.46.5
-- Add an imperative reset handler to reset `PinInputField` from the parent component with ref
-- Add a `focusFirstInputOnReset` prop for the above change, to opt out of focusing on first input on reset
+
+-   Add an imperative reset handler to reset `PinInputField` from the parent component with ref
+-   Add a `focusFirstInputOnReset` prop for the above change, to opt out of focusing on first input on reset
 
 ### 0.45.5
-- Add Tab component label prop to be used as reactnode for custom label
+
+-   Add Tab component label prop to be used as reactnode for custom label
 
 ### 0.45.4
-- Fix PinInputField behaviour on paste or replace at position
+
+-   Fix PinInputField behaviour on paste or replace at position
 
 ### 0.45.3
-- Add optional `isDismissable` prop for showing a close button for `Drawer` *(true by default)*
+
+-   Add optional `isDismissable` prop for showing a close button for `Drawer` _(true by default)_
 
 ### 0.45.2
-- Fix prop name for disable copy/paste to pasteFromClipboard which takes either enabled or disabled as parameters for `PinInput Field`
+
+-   Fix prop name for disable copy/paste to pasteFromClipboard which takes either enabled or disabled as parameters for `PinInput Field`
 
 ### 0.45.1
-- Export props types for all components
-- Fix excess margin issue for `Tabs` labels
-- Add toggle for disabling copy/paste functionality in the `PinInputField` component 
+
+-   Export props types for all components
+-   Fix excess margin issue for `Tabs` labels
+-   Add toggle for disabling copy/paste functionality in the `PinInputField` component
 
 ### 0.45.0
-- Add support for defaultTabIndex props in `Tabs` component because by default it select first tab as active tab
+
+-   Add support for defaultTabIndex props in `Tabs` component because by default it select first tab as active tab
 
 ### 0.44.0
-- Rename `style` prop for `Heading` and `Text` to `fontStyle` since `style` is a reserved
-  prop name in React and causes the react/style-prop-object eslint rule to complain in any
-  project with basic react-app rules setup.
+
+-   Rename `style` prop for `Heading` and `Text` to `fontStyle` since `style` is a reserved
+    prop name in React and causes the react/style-prop-object eslint rule to complain in any
+    project with basic react-app rules setup.
 
 ### 0.43.0
-- Fix npm publish action workflow
-- Fix unique key issue for `Tabs`
+
+-   Fix npm publish action workflow
+-   Fix unique key issue for `Tabs`
 
 ### 0.42.3
-- Update command for installing dependencies and build in CI
+
+-   Update command for installing dependencies and build in CI
 
 ### 0.42.2
-- Fix broken npm publish action
+
+-   Fix broken npm publish action
 
 ### 0.42.1
-- Fix styling issues in `Tabs`
+
+-   Fix styling issues in `Tabs`
 
 ### 0.42.0
-- Padding and margin values can now be configured via the `globals` object in the theme
-- Convert utility styles into JS file from plain CSS to access props
-- Refactor `TablePagination` for better theme-ing
-- Tweak `notification` theme object
-- Add String() constructor to theme object values
-- Fix a bunch of inconsistencies in theme values
+
+-   Padding and margin values can now be configured via the `globals` object in the theme
+-   Convert utility styles into JS file from plain CSS to access props
+-   Refactor `TablePagination` for better theme-ing
+-   Tweak `notification` theme object
+-   Add String() constructor to theme object values
+-   Fix a bunch of inconsistencies in theme values
 
 ### 0.41.27
-- ⚠ Breaking change: add `style` prop for `Heading` and `Text` to select font style.
+
+-   ⚠ Breaking change: add `style` prop for `Heading` and `Text` to select font style.
 
 ### 0.41.26
-- Add support for passing additional items to the navbar for `Tabs`
-- Update React peer dependency version
+
+-   Add support for passing additional items to the navbar for `Tabs`
+-   Update React peer dependency version
 
 ### 0.41.25
-- Export styled-components also from the project to allow component-wide over-rides
+
+-   Export styled-components also from the project to allow component-wide over-rides
 
 ### 0.41.24
-- Convert `isMono`, `isSans` and `isSerif` to a `style` enum
-- Fix `isSubtext` prop for text elements
-- Fix cursor-pointer on hover for `ExpandableGroup`
-- Add back the right margin bottoms for `FormItem` elements inside `FormItemGroup`
-- Fix margin bottom for `Checkbox` and `Switch` inside a `Form`
+
+-   Convert `isMono`, `isSans` and `isSerif` to a `style` enum
+-   Fix `isSubtext` prop for text elements
+-   Fix cursor-pointer on hover for `ExpandableGroup`
+-   Add back the right margin bottoms for `FormItem` elements inside `FormItemGroup`
+-   Fix margin bottom for `Checkbox` and `Switch` inside a `Form`
 
 ### 0.41.23
-- Remove `line-height` property from `body` and apply it more specifically to text elements only
+
+-   Remove `line-height` property from `body` and apply it more specifically to text elements only
 
 ### 0.41.22
-- Add `InputField` invalid state text theme colour
-- Rework text sizes progression
-- Add reset styles for `picture`
-- Add `weight` prop to `Element` to be used in `span` elements
-- Add types for possible font weight values
+
+-   Add `InputField` invalid state text theme colour
+-   Rework text sizes progression
+-   Add reset styles for `picture`
+-   Add `weight` prop to `Element` to be used in `span` elements
+-   Add types for possible font weight values
 
 ### 0.41.19
-- Fix `disabled` styling for `InputField`
+
+-   Fix `disabled` styling for `InputField`
 
 ### 0.41.18
-- Remove style overrides in Tabs component
+
+-   Remove style overrides in Tabs component
 
 ### 0.41.17
-- Add `closeOnClickOutside` prop for `InfoPanel` & `Drawer`
+
+-   Add `closeOnClickOutside` prop for `InfoPanel` & `Drawer`
 
 ### 0.41.16
-- Fix wrong font value for links in theme file
+
+-   Fix wrong font value for links in theme file
 
 ### 0.41.15
-- `Drawer` overlay is now theme-able and style-able with props
+
+-   `Drawer` overlay is now theme-able and style-able with props
 
 ### 0.41.14
-- Overhaul `Drawer` to now come with a page overlay
+
+-   Overhaul `Drawer` to now come with a page overlay
 
 ### 0.41.13
-- Add span types for `Portion`
+
+-   Add span types for `Portion`
 
 ### 0.41.11
-- Add `spacing` prop for `PinInputField`
+
+-   Add `spacing` prop for `PinInputField`
 
 ### 0.41.10
-- Add separate theme object for `Drawer`
+
+-   Add separate theme object for `Drawer`
 
 ### 0.41.9
-- Allow controlling auto-focus behaviour for `PinInputField`
+
+-   Allow controlling auto-focus behaviour for `PinInputField`
 
 ### 0.41.8
-- Add ability to theme disabled states for `primary`, `secondary` and `tertiary` buttons separately
+
+-   Add ability to theme disabled states for `primary`, `secondary` and `tertiary` buttons separately
 
 ### 0.41.7
-- Add different letter spacing values for empty and filled `input[type=password]`
+
+-   Add different letter spacing values for empty and filled `input[type=password]`
 
 ### 0.41.6
-- Fix `InputField` text colour dark theme bug
+
+-   Fix `InputField` text colour dark theme bug
 
 ### 0.41.5
-- Add `spacing` and `retainLayout` props for `FormItemGroup`
+
+-   Add `spacing` and `retainLayout` props for `FormItemGroup`
 
 ### 0.41.4
-- Fix bug in `onChange` implementation for `PinInputField`
+
+-   Fix bug in `onChange` implementation for `PinInputField`
 
 ### 0.41.3
-- Fix missing font family for `hepText` and `errorText`
+
+-   Fix missing font family for `hepText` and `errorText`
 
 ### 0.41.2
-- Replace `onComplete` with `onChange` callback for `PinInputField`
+
+-   Replace `onComplete` with `onChange` callback for `PinInputField`
 
 ### 0.41.1
-- Add `PinInputField` component
+
+-   Add `PinInputField` component
 
 ### 0.40.0
-- Add `Drawer` component
+
+-   Add `Drawer` component
 
 ### 0.39.3
-- Rename `timeout` prop for `Drawer` and `NotificationItem` to `showFor`
-- Fix `Select` border-radius bug
+
+-   Rename `timeout` prop for `Drawer` and `NotificationItem` to `showFor`
+-   Fix `Select` border-radius bug
 
 ### 0.39.2
-- Move `unit` prop in the `Meter` from being displayed via CSS to markup
+
+-   Move `unit` prop in the `Meter` from being displayed via CSS to markup
 
 ### 0.39.1
-- Tweak `Badge` padding values
+
+-   Tweak `Badge` padding values
 
 ### 0.39.0
-- Fix `Badge` line height bug
-- Fix `Switch` theme colour mismatch
+
+-   Fix `Badge` line height bug
+-   Fix `Switch` theme colour mismatch
 
 ### 0.38.3
-- Tweak `Badge` padding values
+
+-   Tweak `Badge` padding values
 
 ### 0.38.2
-- Fix `Badge` height bug
+
+-   Fix `Badge` height bug
 
 ### 0.38.1
-- Add opinionated defaults for `mark` element
+
+-   Add opinionated defaults for `mark` element
 
 ### 0.38.0
-- Add `Badge` component
+
+-   Add `Badge` component
 
 ### 0.37.1
-- Rename `Toast` to `Drawer` for better consistency
+
+-   Rename `Toast` to `Drawer` for better consistency
 
 ### 0.37.0
-- Add `Toast` component
+
+-   Add `Toast` component
 
 ### 0.36.4
-- Add `horizontallyCentreThis`, `horizontallyCenterThis`, `verticallyCentreItems`, `verticallyCenterItems`, `pushItemsToEnds` as props instead of class names
+
+-   Add `horizontallyCentreThis`, `horizontallyCenterThis`, `verticallyCentreItems`, `verticallyCenterItems`, `pushItemsToEnds` as props instead of class names
 
 ### 0.36.3
-- Fix `Select` border-radius inheritance bug
-- Fix `SidebarItemText` hover state text colour
+
+-   Fix `Select` border-radius inheritance bug
+-   Fix `SidebarItemText` hover state text colour
 
 ### 0.36.2
-- Fix inconsistent `tabLS` and `tabPT` props
+
+-   Fix inconsistent `tabLS` and `tabPT` props
 
 ### 0.36.1
-- Add types for `Element`’s `as` attribute
+
+-   Add types for `Element`’s `as` attribute
 
 ### 0.36.0
-- Fix text colour for nested links in sidebar for better differentiation
-- Fix typo in `portionProps`
-- Refactor sidebar theme object hierarchy for links and sublinks, remove `linksWrapper` object
-- Mention `styled-components` requirement in the README
+
+-   Fix text colour for nested links in sidebar for better differentiation
+-   Fix typo in `portionProps`
+-   Refactor sidebar theme object hierarchy for links and sublinks, remove `linksWrapper` object
+-   Mention `styled-components` requirement in the README
 
 ### 0.35.4
-- Rename `tabLS` to `tabletLandscape` and `tabPT` to `tabletPortrait` for more consistency with the naming scheme and less ambiguity.
+
+-   Rename `tabLS` to `tabletLandscape` and `tabPT` to `tabletPortrait` for more consistency with the naming scheme and less ambiguity.
 
 ### 0.35.3
-- Fix focus states for checkbox, switch, radio and select
+
+-   Fix focus states for checkbox, switch, radio and select
 
 ### 0.35.2
-- Fix theme throwing error on colour overrides
-- Add custom colours to ColorPropsType and export it from library
-- Fix InputField element type
+
+-   Fix theme throwing error on colour overrides
+-   Add custom colours to ColorPropsType and export it from library
+-   Fix InputField element type
 
 ### 0.35.0
 
 **General**
-- Add Storybook for easy testing and documentation
-    - Each component folder now contains a `<component_name>.stories.tsx` (to create stories) and `<component_name>.stories.mdx` (to write docs) file
-- Add make commands for easy creation of components
-- Remove `name` props from RadioGroup `options` type; Add `label` and `id`
-- Remove `as` from RadioButton and Checkbox props
-- Make `shadow` a global prop
-- Make `shape` a global prop
-- Add `ExpandableContent` component which implements details and summary tags
-- Add `Tag` component
-- Add `opacity` as a global prop
-- Divider now supports custom background colors
-    - Add `hr.default` to theme
-- All colour props are now typed
-    - Add command (`make color-props`) to generate colour props from default colors
+
+-   Add Storybook for easy testing and documentation
+    -   Each component folder now contains a `<component_name>.stories.tsx` (to create stories) and `<component_name>.stories.mdx` (to write docs) file
+-   Add make commands for easy creation of components
+-   Remove `name` props from RadioGroup `options` type; Add `label` and `id`
+-   Remove `as` from RadioButton and Checkbox props
+-   Make `shadow` a global prop
+-   Make `shape` a global prop
+-   Add `ExpandableContent` component which implements details and summary tags
+-   Add `Tag` component
+-   Add `opacity` as a global prop
+-   Divider now supports custom background colors
+    -   Add `hr.default` to theme
+-   All colour props are now typed
+    -   Add command (`make color-props`) to generate colour props from default colors
 
 **Form improvements**
-- Remove `isAnswers` prop from FormItem
-- Remove FormItemJointGroup component
-    - Add `isJoint` prop to FormItemGroup
-- Remove Extra spacing after FormItemGroup
-- Add `fields` and `onFieldsChange` prop to Form to allow form creation using an array of config 🎉
-- RadioGroup and Select now use BaseInputComponent
-- Add better and consistent help & error text for each form field
-    - Make InputLabel atomic
-- Add error text for Form which uses Callout component
-- Add sizes to Switch component
-- Make Select chevron consistent with ExpandableContent
-- Make required and disabled states consistent in form fields
-- Remove `name` props from RadioGroup `options` type; Add `label` and `id`
+
+-   Remove `isAnswers` prop from FormItem
+-   Remove FormItemJointGroup component
+    -   Add `isJoint` prop to FormItemGroup
+-   Remove Extra spacing after FormItemGroup
+-   Add `fields` and `onFieldsChange` prop to Form to allow form creation using an array of config 🎉
+-   RadioGroup and Select now use BaseInputComponent
+-   Add better and consistent help & error text for each form field
+    -   Make InputLabel atomic
+-   Add error text for Form which uses Callout component
+-   Add sizes to Switch component
+-   Make Select chevron consistent with ExpandableContent
+-   Make required and disabled states consistent in form fields
+-   Remove `name` props from RadioGroup `options` type; Add `label` and `id`
 
 **Sidebar improvements**
-- Remove `isSticky` from Sidebar footer
-- `sidebar.body.bg` is now `sidebar.bg` in theme
-- Add sidebar width properties to theme; SidebarHeader, SidebarFooter and SidebarItem span 100% automatically
-- Remove `isSticky` from SidebarFooter, it always sticks to bottom
-- Remove SidebarLink, SidebarNestedLinks and SidebarLinksWrapper
-- Make SidebarHeader and SidebarFooter sticky instead of fixed to get simpler and consistent sidebar layout
-- Remove `sidebar.linksWrapper.marginTop` and `sidebar.linksWrapper.marginBottom` from theme
-- Remove SidebarItemsGroup and SidebarItemsGroupHeader
+
+-   Remove `isSticky` from Sidebar footer
+-   `sidebar.body.bg` is now `sidebar.bg` in theme
+-   Add sidebar width properties to theme; SidebarHeader, SidebarFooter and SidebarItem span 100% automatically
+-   Remove `isSticky` from SidebarFooter, it always sticks to bottom
+-   Remove SidebarLink, SidebarNestedLinks and SidebarLinksWrapper
+-   Make SidebarHeader and SidebarFooter sticky instead of fixed to get simpler and consistent sidebar layout
+-   Remove `sidebar.linksWrapper.marginTop` and `sidebar.linksWrapper.marginBottom` from theme
+-   Remove SidebarItemsGroup and SidebarItemsGroupHeader
 
 **New components**
-- Tooltip (very basic, might overflow screens)
-- Callout
-- ExpandableContent
-- Tag
+
+-   Tooltip (very basic, might overflow screens)
+-   Callout
+-   ExpandableContent
+-   Tag
 
 **Removed components**
-- FormItemJointGroup
-- SidebarLink
-- SidebarNestedLinks
-- SidebarLinksWrapper
-- SidebarItemsGroup
-- SidebarItemsGroupHeader
+
+-   FormItemJointGroup
+-   SidebarLink
+-   SidebarNestedLinks
+-   SidebarLinksWrapper
+-   SidebarItemsGroup
+-   SidebarItemsGroupHeader
 
 ## BREAKING CHANGES ⚠️
 
-- Inside theme:
-    - `inputField.default.helpText` is now `inputField.onFocus.helpText`
-    - `inputField.isInvalid.helpText` is now `inputField.isInvalid.errorText`
-    - `sidebar.body.bg` is now `sidebar.bg`
-    - `sidebar.linksWrapper.marginTop` and `sidebar.linksWrapper.marginBottom` have been removed
-- Remove `isSticky` from SidebarFooter
-    - It always sticks to bottom
-- Remove FormItemJointGroup
-    - Use `isJoint` prop inside FormItemGroup instead
-- Remove SidebarLink, SidebarNestedLinks and SidebarLinksWrapper
-- Remove SidebarItemsGroup and SidebarItemsGroupHeader
-    - Use ExpandableContent component instead
-- Default Switch size now `medium` which is larger than before
-    - Set to size `small` for old size
+-   Inside theme:
+    -   `inputField.default.helpText` is now `inputField.onFocus.helpText`
+    -   `inputField.isInvalid.helpText` is now `inputField.isInvalid.errorText`
+    -   `sidebar.body.bg` is now `sidebar.bg`
+    -   `sidebar.linksWrapper.marginTop` and `sidebar.linksWrapper.marginBottom` have been removed
+-   Remove `isSticky` from SidebarFooter
+    -   It always sticks to bottom
+-   Remove FormItemJointGroup
+    -   Use `isJoint` prop inside FormItemGroup instead
+-   Remove SidebarLink, SidebarNestedLinks and SidebarLinksWrapper
+-   Remove SidebarItemsGroup and SidebarItemsGroupHeader
+    -   Use ExpandableContent component instead
+-   Default Switch size now `medium` which is larger than before
+    -   Set to size `small` for old size
 
 ### 0.34.0
-- Replace `react-syntax-highlighter` with `prism-react-renderer`
-- Add simple wrappers for `prism-components` to import specific languages from `prismjs`
-- Fix CodeBlock erratic output issue
+
+-   Replace `react-syntax-highlighter` with `prism-react-renderer`
+-   Add simple wrappers for `prism-components` to import specific languages from `prismjs`
+-   Fix CodeBlock erratic output issue
 
 ### 0.33.15
-- Fix `spinner` padding
+
+-   Fix `spinner` padding
 
 ### 0.33.14
-- Add `Spinner` component
+
+-   Add `Spinner` component
 
 ### 0.33.12
-- Remove `Element` props being passed to all HTML elements as attributes
-- Fix Badge `is-loading` colours
+
+-   Remove `Element` props being passed to all HTML elements as attributes
+-   Fix Badge `is-loading` colours
 
 ### 0.33.11
-- Fix transition for `SidebarHeader`
+
+-   Fix transition for `SidebarHeader`
 
 ### 0.33.10
-- Add `isSticky` prop for `SidebarHeader` and `SidebarFooter`
-- Add new component `SidebarLinksWrapper` to better manage `SidebarHeader` and `SidebarFooter`
+
+-   Add `isSticky` prop for `SidebarHeader` and `SidebarFooter`
+-   Add new component `SidebarLinksWrapper` to better manage `SidebarHeader` and `SidebarFooter`
 
 ### 0.33.9
-- Fix `polished` imports
+
+-   Fix `polished` imports
 
 ### 0.33.8
+
 ## BREAKING CHANGES ⚠️
 
-- Breadcrumbs
-    - `BreadcrumbWrapper` renamed to `Breadcrumbs`
-    - The `separator` is now configurable in the theme file
+-   Breadcrumbs
 
-- Badge
-    - `isLoading` class now works for `custom` kind buttons also
-    - Fix padding inconsistencies
-    - `with-loader` and `with-delete` classes renamed to `is-loading` and `has-delete`
+    -   `BreadcrumbWrapper` renamed to `Breadcrumbs`
+    -   The `separator` is now configurable in the theme file
 
-- Form elements
-    - `input` theme object is now `inputField`
-    - `Checkbox`, `RadioButton`, `Select` etc have been moved out from inside `input`
+-   Badge
 
-- InfoPanel
-    - Dismiss button now styled differently, and does not interfere with the content
+    -   `isLoading` class now works for `custom` kind buttons also
+    -   Fix padding inconsistencies
+    -   `with-loader` and `with-delete` classes renamed to `is-loading` and `has-delete`
 
-- Notifications
-    - The `type` prop is now `kind` to be more consistent with the rest of the components
-    - `onClose` is renamed to `onCloseCallback`
-    - `NotificationWrapper` has a `order` prop to set the stacking order of `NotificationItem` children
+-   Form elements
 
-- Meter
-    - `isThin` prop is deprecated in favour of a far more flexible `height` prop
-    - `shape` prop is now available just like the `Badge`
+    -   `input` theme object is now `inputField`
+    -   `Checkbox`, `RadioButton`, `Select` etc have been moved out from inside `input`
 
-- The theme object is now called `FictoanTheme`
+-   InfoPanel
+
+    -   Dismiss button now styled differently, and does not interfere with the content
+
+-   Notifications
+
+    -   The `type` prop is now `kind` to be more consistent with the rest of the components
+    -   `onClose` is renamed to `onCloseCallback`
+    -   `NotificationWrapper` has a `order` prop to set the stacking order of `NotificationItem` children
+
+-   Meter
+
+    -   `isThin` prop is deprecated in favour of a far more flexible `height` prop
+    -   `shape` prop is now available just like the `Badge`
+
+-   The theme object is now called `FictoanTheme`
 
 ### 0.33.7
-- Fix types for `CodeBlock`, `BaseInputElement`, `Meter`, `TextArea`, and `Select`.
+
+-   Fix types for `CodeBlock`, `BaseInputElement`, `Meter`, `TextArea`, and `Select`.
 
 ### 0.33.6
-- Add autoprefixer to add vendor styles to CSS
+
+-   Add autoprefixer to add vendor styles to CSS
 
 ### 0.33.5
-- Fix `alignText` styling for `Table` 😬
+
+-   Fix `alignText` styling for `Table` 😬
 
 ### 0.33.4
-- Add `alignText` prop for `Table`
+
+-   Add `alignText` prop for `Table`
 
 ### 0.33.3
-- Fix npm publish bug
+
+-   Fix npm publish bug
 
 ### 0.33.2
-- Fix CSS overrides for all components
+
+-   Fix CSS overrides for all components
 
 ### 0.33.1
-- Support heading in `InfoPanel`
+
+-   Support heading in `InfoPanel`
 
 ### 0.33.0
-- Replace lodash with lodash-es for tree shaking
-- Bump rollup to 2.52.7
-- Replace `prism-react-renderer` and `prismjs` with `react-syntax-highlighter` which is more customizable and tree-shakable
-- Add `@rollup/plugin-babel` to add /_#**PURE**_/ prefix to `React.forwardRef` which is required for tree-shaking
-- Add CSS files for Normalize, Reset, Colours and Utility to move static styles out of JS. Injecting to head tag using `rollup-plugin-styles`
-- Programmatically generate Colours.styled.tsx classes (To be added to build flow soon)
+
+-   Replace lodash with lodash-es for tree shaking
+-   Bump rollup to 2.52.7
+-   Replace `prism-react-renderer` and `prismjs` with `react-syntax-highlighter` which is more customizable and tree-shakable
+-   Add `@rollup/plugin-babel` to add /_#**PURE**_/ prefix to `React.forwardRef` which is required for tree-shaking
+-   Add CSS files for Normalize, Reset, Colours and Utility to move static styles out of JS. Injecting to head tag using `rollup-plugin-styles`
+-   Programmatically generate Colours.styled.tsx classes (To be added to build flow soon)
 
 ### 0.32.14
-- Fix crash in tabs component
+
+-   Fix crash in tabs component
 
 ### 0.32.13
-- Simplify TablePagination component (breaking)
+
+-   Simplify TablePagination component (breaking)
 
 ### 0.32.10
-- Add TablePagination component
+
+-   Add TablePagination component
 
 ### 0.32.9
-- Fix `InfoPanel` close button fixed position bug
+
+-   Fix `InfoPanel` close button fixed position bug
 
 ### 0.32.7
-- Cap `sidePadding` and `sideMargin` for `Row` and `Divider` in ultra-wide res displays above 2400px
+
+-   Cap `sidePadding` and `sideMargin` for `Row` and `Divider` in ultra-wide res displays above 2400px
 
 ### 0.32.5
-- Add @emotion/is-prop-valid as an optional dependency
+
+-   Add @emotion/is-prop-valid as an optional dependency
 
 ### 0.32.3
-- Add ability to set Sidebar logo width via the theme
+
+-   Add ability to set Sidebar logo width via the theme
 
 ### 0.32.1
-- Add Tabs component
+
+-   Add Tabs component
 
 ### 0.31.22
-- Remove opinionated `ul`, `ol`, and `li` styles
+
+-   Remove opinionated `ul`, `ol`, and `li` styles
 
 ### 0.31.21
-- Add opinionated version of Normalize.css
+
+-   Add opinionated version of Normalize.css
 
 ### 0.31.20
-- Remove Normalize.css
+
+-   Remove Normalize.css
 
 ### 0.31.19
-- Add theme variables for `RadioButton`, `Checkbox` and `ToggleSwitch`
+
+-   Add theme variables for `RadioButton`, `Checkbox` and `ToggleSwitch`
 
 ### 0.31.18
-- Upgrade to React 17.0.1
-- Tweak colour and font family for other input elements
+
+-   Upgrade to React 17.0.1
+-   Tweak colour and font family for other input elements
 
 ### 0.31.17
-- Change `fontFamily` to `font` for `Badge` component
-- Fix font fallback styling inconsistency for labels, tables, and links
+
+-   Change `fontFamily` to `font` for `Badge` component
+-   Fix font fallback styling inconsistency for labels, tables, and links
 
 ### 0.31.16
-- Rework Notification component
+
+-   Rework Notification component
 
 ### 0.31.15
-- Fix `bg` of `SidebarWrapper`
+
+-   Fix `bg` of `SidebarWrapper`
 
 ### 0.31.13
-- Add `size` property for `SidebarItemIcon` to be picked from theme file
+
+-   Add `size` property for `SidebarItemIcon` to be picked from theme file
 
 ### 0.31.12
-- Add `font-family` to tables, and inherit from body font
+
+-   Add `font-family` to tables, and inherit from body font
 
 ### 0.31.11
-- Remove improper colour override for dark sidebar theme
+
+-   Remove improper colour override for dark sidebar theme
 
 ### 0.31.10
-- Move React & styled-components to peerDependencies
+
+-   Move React & styled-components to peerDependencies
 
 ### 0.31.8
-- Switch to useState & useEffect for merging theme
+
+-   Switch to useState & useEffect for merging theme
 
 ### 0.31.7
-- Fix Drawer theme issue for setting `borderRadius`
+
+-   Fix Drawer theme issue for setting `borderRadius`
 
 ### 0.31.6
-- Fix broken builds (0.31.2 - 0.31.5)
+
+-   Fix broken builds (0.31.2 - 0.31.5)
 
 ### 0.31.2
-- Set ThemeType to recursive optional typeof RFTheme
+
+-   Set ThemeType to recursive optional typeof RFTheme
 
 ### 0.31.1
-- Export `StaticGlobalStyles`
+
+-   Export `StaticGlobalStyles`
 
 ### 0.31.0
-- Add support for passing `refs`
+
+-   Add support for passing `refs`
 
 ### 0.30.14
-- Upgrade `styled-components` from `5.0.1` to `5.1.1` for Jest reasons
+
+-   Upgrade `styled-components` from `5.0.1` to `5.1.1` for Jest reasons
 
 ### 0.30.13
-- Add `tertiary` button
+
+-   Add `tertiary` button
 
 ### 0.30.12
-- Add `transparent` as a `defaultColour`
+
+-   Add `transparent` as a `defaultColour`
 
 ### 0.30.11
-- Fix incorrect centering rule
+
+-   Fix incorrect centering rule
 
 ### 0.30.10
-- Make `borderRadius` themeable for cards and input fields
+
+-   Make `borderRadius` themeable for cards and input fields
 
 ### 0.30.9
-- Rename `baseColors` to `defaultColours`, and `mainColors` to `customColours`
+
+-   Rename `baseColors` to `defaultColours`, and `mainColors` to `customColours`
 
 ### 0.30.8
-- Memoize theme prop in ThemeProvider
+
+-   Memoize theme prop in ThemeProvider
 
 ### v0.30.7
-- Add missing props for theming some elements
+
+-   Add missing props for theming some elements
 
 ### v0.30.6
-- Add merge to reduce size of custom overrides
+
+-   Add merge to reduce size of custom overrides
 
 ### v0.30.5
-- Fix `a` tag hover colour bug
+
+-   Fix `a` tag hover colour bug
 
 ### v0.30.4
-- Fix type bug that wouldn’t let `paras` inherit `font-family`
+
+-   Fix type bug that wouldn’t let `paras` inherit `font-family`
 
 ### v0.30.3
-- Fix lodash `merge` speed issue
+
+-   Fix lodash `merge` speed issue
 
 ### v0.30.0
-- Remove static CSS classes from `GlobalStyles`
+
+-   Remove static CSS classes from `GlobalStyles`
 
 ### v0.29.3
-- Rename `Textarea` to `TextArea`
+
+-   Rename `Textarea` to `TextArea`
 
 ### v0.29.2
-- Add media queries for `InfoPanel` below `1200px` to handle `width` prop
+
+-   Add media queries for `InfoPanel` below `1200px` to handle `width` prop
 
 ### v0.29.1
-- Add `primary`, `secondary`, and `tertiary` props for the `Divider` element
+
+-   Add `primary`, `secondary`, and `tertiary` props for the `Divider` element
 
 ### v0.29.0
-- Add `bgColour`, `textColour`, `borderColour`, `strokeColour` and `fillColour` props with British English
+
+-   Add `bgColour`, `textColour`, `borderColour`, `strokeColour` and `fillColour` props with British English
 
 ### v0.28.7
-- Add `spring`, `brick` and `sienna` colour values
+
+-   Add `spring`, `brick` and `sienna` colour values
 
 ### v0.28.5
-- Fix `FormItem` margin bottom bug inside `FormItemGroup`
+
+-   Fix `FormItem` margin bottom bug inside `FormItemGroup`
 
 ### v0.28.4
-- Add `nano` and `micro` sizing for Text
+
+-   Add `nano` and `micro` sizing for Text
 
 ### v0.28.3
-- Tweak links theme styling
-    - `links.default.text` is now `links.default.color`
-    - `links.onHover.text` is now `links.onHover.color`
+
+-   Tweak links theme styling
+    -   `links.default.text` is now `links.default.color`
+    -   `links.onHover.text` is now `links.onHover.color`
 
 ### v0.28.2
-- Fix Textarea styling bug
-- Add `nano` and `micro` text sizes
-- Text theme tweaks
-    - `size` object deprecated
-    - `size.default` is now `paras.size`
-    - `size.multiplier` is now `headings.multiplier`
+
+-   Fix Textarea styling bug
+-   Add `nano` and `micro` text sizes
+-   Text theme tweaks
+    -   `size` object deprecated
+    -   `size.default` is now `paras.size`
+    -   `size.multiplier` is now `headings.multiplier`
 
 ### v0.27.0
-- Add props for Meter to display a label and value
+
+-   Add props for Meter to display a label and value
 
 ### v0.23.8
-- Remove all SCSS files
-- Remove unused svg icon
-- Move `theme` to `styles` folder
+
+-   Remove all SCSS files
+-   Remove unused svg icon
+-   Move `theme` to `styles` folder
 
 ### v0.23.7
-- Use relative path everywhere
+
+-   Use relative path everywhere
 
 ### v0.23.6
-- Generate typings
+
+-   Generate typings
 
 ### v0.23.5
-- Upgrade all packages
+
+-   Upgrade all packages
 
 ### v0.21.2
-- Update styled components
-- Remove unused component `EventHandler`
-- Fix rollup dependencies
+
+-   Update styled components
+-   Remove unused component `EventHandler`
+-   Fix rollup dependencies
 
 ### v0.21.1
-- Add `onCloseButtonClick` prop in `NotificationItem`
+
+-   Add `onCloseButtonClick` prop in `NotificationItem`
 
 ### v0.21.0
-- Code cleanup
+
+-   Code cleanup
diff --git a/package.json b/package.json
index 6cab65f5..10937532 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "fictoan-react",
-    "version": "1.2.8",
+    "version": "1.2.9",
     "private": false,
     "description": "",
     "type": "module",
diff --git a/src/components/CodeBlock/CodeBlock.tsx b/src/components/CodeBlock/CodeBlock.tsx
index e1257d8a..3ccc5f79 100644
--- a/src/components/CodeBlock/CodeBlock.tsx
+++ b/src/components/CodeBlock/CodeBlock.tsx
@@ -6,12 +6,13 @@ import { Button } from "../Button/Button";
 import { Badge } from "../Badge/Badge";
 
 import "./CodeBlock.css";
+import { themes } from "prism-react-renderer";
 
 export interface CodeBlockCustomProps {
-    source          ? : object | string;
-    language        ? : string | undefined;
-    showCopyButton  ? : boolean;
-    showLineNumbers ? : boolean;
+    source?: object | string;
+    language?: string | undefined;
+    showCopyButton?: boolean;
+    showLineNumbers?: boolean;
 }
 
 export type CodeBlockElementType = HTMLPreElement;
@@ -21,7 +22,7 @@ export type CodeBlockProps = Omit<CommonAndHTMLProps<CodeBlockElementType>, keyo
 const PrismReactRenderer = React.lazy(() =>
     import("prism-react-renderer").then((prismModule) => {
         if (prismModule.Highlight) {
-            return { default : prismModule.Highlight };
+            return { default: prismModule.Highlight };
         }
 
         // DON’T REMOVE THE WEIRD SPACING, IT’S FOR THE ASCII BOX
@@ -32,35 +33,34 @@ const PrismReactRenderer = React.lazy(() =>
 │   Please install the prism-react-renderer (https://www.npmjs.com/package/prism-react-renderer)   │
 │   package to have syntax highlighting in the CodeBlock component.                                │
 │   For example: \x1b[46m\x1b[30myarn add prism-react-renderer\x1B[0m\x1B[31m                                                     │
-╰──────────────────────────────────────────────────────────────────────────────────────────────────╯`,
+╰──────────────────────────────────────────────────────────────────────────────────────────────────╯`
         );
         const fallbackCodeBlock = ({ code }: { code: string }) => (
             <pre data-code-block className="module-fallback">
                 {code}
             </pre>
         );
-        return { default : fallbackCodeBlock };
-    }),
+        return { default: fallbackCodeBlock };
+    })
 );
 
-export const CodeBlock = React.forwardRef((
-        {
-            children,
-            source,
-            language = "json",
-            showCopyButton,
-            showLineNumbers,
-            ...props
-        }: CodeBlockProps, ref: React.Ref<CodeBlockElementType>) => {
-        const [ isCodeCopied, setIsCodeCopied ] = useState(false);
+export const CodeBlock = React.forwardRef(
+    (
+        { children, source, language = "json", showCopyButton, showLineNumbers, ...props }: CodeBlockProps,
+        ref: React.Ref<CodeBlockElementType>
+    ) => {
+        const [isCodeCopied, setIsCodeCopied] = useState(false);
 
         const copyToClipboard = () => {
-            navigator.clipboard.writeText(code).then(() => {
-                setIsCodeCopied(true);
-                setTimeout(() => setIsCodeCopied(false), 3000); // Revert back after 3 seconds
-            }).catch(err => {
-                console.error("Could not copy text: ", err);
-            });
+            navigator.clipboard
+                .writeText(code)
+                .then(() => {
+                    setIsCodeCopied(true);
+                    setTimeout(() => setIsCodeCopied(false), 3000); // Revert back after 3 seconds
+                })
+                .catch((err) => {
+                    console.error("Could not copy text: ", err);
+                });
         };
 
         // Use children if provided, else use source
@@ -79,18 +79,15 @@ export const CodeBlock = React.forwardRef((
             <Element<CodeBlockElementType> data-code-block as="div" classNames={classNames} {...props}>
                 {showCopyButton ? (
                     isCodeCopied ? (
-                        <Badge
-                            className="code-block-copied-badge"
-                            size="tiny" shape="rounded"
-                            aria-live="polite"
-                        >
+                        <Badge className="code-block-copied-badge" size="tiny" shape="rounded" aria-live="polite">
                             Copied!
                         </Badge>
                     ) : (
                         <Button
                             type="button"
                             className="code-block-copy-button"
-                            size="tiny" shape="rounded"
+                            size="tiny"
+                            shape="rounded"
                             onClick={copyToClipboard}
                             role="button"
                             aria-label="Copy code to clipboard"
@@ -100,17 +97,19 @@ export const CodeBlock = React.forwardRef((
                     )
                 ) : null}
 
-                <Suspense fallback={<pre data-code-block className="suspense-fallback">{code}</pre>}>
-                    <PrismReactRenderer code={code} language={language} theme={undefined}>
+                <Suspense
+                    fallback={
+                        <pre data-code-block className="suspense-fallback">
+                            {code}
+                        </pre>
+                    }
+                >
+                    <PrismReactRenderer code={code} language={language} theme={themes.shadesOfPurple}>
                         {({ className, tokens, getLineProps, getTokenProps }) => (
                             <pre ref={ref} className={className}>
                                 {tokens.map((line, i) => (
-                                    <div {...getLineProps({ line, key : i })}>
-                                        {showLineNumbers && (
-                                            <span className="line-numbers">
-                                                {i + 1}
-                                            </span>
-                                        )}
+                                    <div {...getLineProps({ line, key: i })}>
+                                        {showLineNumbers && <span className="line-numbers">{i + 1}</span>}
 
                                         <span className="l-o-c">
                                             {line.map((token, key) => (
@@ -125,5 +124,5 @@ export const CodeBlock = React.forwardRef((
                 </Suspense>
             </Element>
         );
-    },
+    }
 );
diff --git a/src/components/ThemeProvider/ThemeProvider.stories.tsx b/src/components/ThemeProvider/ThemeProvider.stories.tsx
index d45a03f3..3dddc30c 100644
--- a/src/components/ThemeProvider/ThemeProvider.stories.tsx
+++ b/src/components/ThemeProvider/ThemeProvider.stories.tsx
@@ -21,14 +21,6 @@ type Story = StoryObj<typeof ThemeProvider>;
 
 export const Default: Story = {
     args: {
-        theme: {
-            "paragraph-font-size": "4rem",
-            "card-bg": "var(--sky-light-80)",
-            "global-border-radius": "16px",
-        },
-        customColors: {
-            "peach": "#ff9e9e",
-        },
         currentTheme: "light",
     },
     render: (args) => (
@@ -37,5 +29,5 @@ export const Default: Story = {
                 <Text className="text-peach">Change the theme!</Text>
             </Card>
         </ThemeProvider>
-    )
+    ),
 };
diff --git a/src/components/ThemeProvider/ThemeProvider.tsx b/src/components/ThemeProvider/ThemeProvider.tsx
index fd5b26cd..0d168d58 100644
--- a/src/components/ThemeProvider/ThemeProvider.tsx
+++ b/src/components/ThemeProvider/ThemeProvider.tsx
@@ -1,102 +1,72 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
 import { Element } from "../Element/Element";
+import type { UseThemeProps } from "./types";
 import { CommonAndHTMLProps } from "../Element/constants";
 
 export type ThemeProviderElementType = HTMLDivElement;
 export type RenderProps = () => JSX.Element;
 
+const storageKey = "fictoan-theme";
+const themes = ["light", "dark"];
+
+const ThemeContext = React.createContext<UseThemeProps | undefined>(undefined);
+const defaultContext: UseThemeProps = { setTheme: (_) => {} };
+
+export const useTheme = () => React.useContext(ThemeContext) ?? defaultContext;
+
 export interface ThemeProviderProps extends CommonAndHTMLProps<ThemeProviderElementType> {
-    theme?: {
-        [key: string]: string;
-    };
-    customColors?: {
-        [key: string]: string;
-    };
     currentTheme?: string;
 }
 
+const getTheme = (key: string, fallback?: string) => {
+    let theme;
+    try {
+        theme = localStorage.getItem(key) || undefined;
+    } catch (e) {
+        // Unsupported
+    }
+    return theme || fallback;
+};
+
 export const ThemeProvider = React.forwardRef(
-    (
-        { theme, customColors, currentTheme, children, ...props }: ThemeProviderProps,
-        ref: React.Ref<ThemeProviderElementType>
-    ) => {
+    ({ currentTheme, children, ...props }: ThemeProviderProps, ref: React.Ref<ThemeProviderElementType>) => {
         const [shouldRender, setShouldRender] = useState<boolean>(false);
+        const [themeState, setThemeState] = React.useState(() => getTheme(storageKey, "theme-light"));
 
-        useEffect(() => {
-            if (theme) {
-                const styleTag = getStyleTag("fictoan-theme");
-                addCssVariables(styleTag, theme);
-                if (!shouldRender) {
-                    setShouldRender(true);
+        const setTheme = useCallback(
+            (newTheme: any) => {
+                if (!themes.includes(newTheme)) {
+                    newTheme = "light";
                 }
-            }
-
-            return () => {
-                const styleTag = getStyleTag("fictoan-theme");
-                styleTag.innerHTML = "";
-            };
-        }, [theme]);
-
-        useEffect(() => {
-            if (customColors) {
-                const styleTag = getStyleTag("fictoan-custom-colors");
-                addCssVariables(styleTag, customColors);
-                const styles = Object.keys(customColors).map(
-                    (colorName) => `
-.bg-${colorName} {background-color: var(--${colorName});}
-.text-${colorName} {color: var(--${colorName}); }
-.fill-${colorName} {fill: var(--${colorName});}
-.stroke-${colorName} {stroke: var(--${colorName});}
-.border-${colorName} {border-color: var(--${colorName});}`
-                );
-                styleTag.appendChild(document.createTextNode(styles.join("\n")));
+                document.documentElement.className = "";
+                setThemeState(`theme-${newTheme}`);
+                document.documentElement.classList.add(`theme-${newTheme}`);
                 if (!shouldRender) {
                     setShouldRender(true);
                 }
-            }
-
-            return () => {
-                const styleTag = getStyleTag("fictoan-custom-colors");
-                styleTag.innerHTML = "";
-            };
-        }, [customColors]);
+                // Save to storage
+                try {
+                    localStorage.setItem(storageKey, `theme-${newTheme}`);
+                } catch (e) {
+                    // Unsupported
+                }
+            },
+            [themeState]
+        );
 
         useEffect(() => {
             if (currentTheme) {
-                document.documentElement.classList.add(currentTheme);
-                if (!shouldRender) {
-                    setShouldRender(true);
-                }
+                setTheme(currentTheme);
             }
-
-            return () => {
-                document.documentElement.className = "";
-            };
         }, [currentTheme]);
 
-        const getStyleTag = (id: string): HTMLElement => {
-            let styleTag = document.getElementById(id);
-            if (!styleTag) {
-                styleTag = document.createElement("style");
-                styleTag.id = id;
-                document.head.appendChild(styleTag);
-            }
-            return styleTag;
-        };
-
-        const addCssVariables = (element: HTMLElement, variables: { [key: string]: string }) => {
-            let cssVariables: string | string[] = Object.entries(variables).map(
-                ([variableName, variableValue]) => `--${variableName}: ${variableValue};`
-            );
-            cssVariables = ":root {\n" + cssVariables.join("\n") + "\n}";
-            element.appendChild(document.createTextNode(cssVariables));
-        };
-
         return (
-            <Element<ThemeProviderElementType> as="div" data-theme-provider ref={ref} {...props}>
-                {shouldRender && children}
-            </Element>
+            <ThemeContext.Provider value={{ theme: themeState, setTheme }}>
+                <Element<ThemeProviderElementType> as="div" data-theme-provider ref={ref} {...props}>
+                    {shouldRender && children}
+                </Element>
+            </ThemeContext.Provider>
         );
     }
 );
diff --git a/src/components/ThemeProvider/index.tsx b/src/components/ThemeProvider/index.tsx
index 96973a1b..45227f3e 100644
--- a/src/components/ThemeProvider/index.tsx
+++ b/src/components/ThemeProvider/index.tsx
@@ -1 +1 @@
-export { ThemeProvider, type ThemeProviderProps } from "./ThemeProvider";
+export { ThemeProvider, type ThemeProviderProps, useTheme } from "./ThemeProvider";
diff --git a/src/components/ThemeProvider/types.ts b/src/components/ThemeProvider/types.ts
new file mode 100644
index 00000000..abb1699b
--- /dev/null
+++ b/src/components/ThemeProvider/types.ts
@@ -0,0 +1,8 @@
+import * as React from "react";
+
+export interface UseThemeProps {
+    /** Update the theme */
+    setTheme: React.Dispatch<React.SetStateAction<string>>;
+    /** Active theme name */
+    theme?: string | undefined;
+}
diff --git a/src/components/index.tsx b/src/components/index.tsx
index f2eab387..6be534a4 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -11,10 +11,7 @@ export { Drawer, type DrawerProps } from "./Drawer";
 export { Button, type ButtonProps } from "./Button";
 
 // BREADCRUMBS =========================================================================================================
-export {
-    Breadcrumbs, type BreadcrumbsProps,
-    BreadcrumbItem, type BreadcrumbItemProps
-} from "./Breadcrumbs";
+export { Breadcrumbs, type BreadcrumbsProps, BreadcrumbItem, type BreadcrumbItemProps } from "./Breadcrumbs";
 
 // CALLOUT =============================================================================================================
 export { Callout, type CalloutProps } from "./Callout";
@@ -32,37 +29,41 @@ export { ContentWrapper, type ContentWrapperProps } from "./ContentWrapper";
 export { Divider, type DividerProps } from "./Divider";
 
 // ELEMENT =============================================================================================================
-export {
-    Element, type ElementProps,
-    Div,
-    Article,
-    Aside,
-    Body,
-    Footer,
-    Header,
-    Main,
-    Nav,
-    Section
-} from "./Element";
+export { Element, type ElementProps, Div, Article, Aside, Body, Footer, Header, Main, Nav, Section } from "./Element";
 
 // FORM ================================================================================================================
 export {
-    Form, type FormProps,
-    FormItem, type FormItemProps,
-    FormItemGroup, type FormItemGroupProps,
-    InputField, type InputFieldProps,
-    TextArea, type TextareaProps,
-    InputLabel,type InputLabelProps,
-    Select, type SelectProps,
+    Form,
+    type FormProps,
+    FormItem,
+    type FormItemProps,
+    FormItemGroup,
+    type FormItemGroupProps,
+    InputField,
+    type InputFieldProps,
+    TextArea,
+    type TextareaProps,
+    InputLabel,
+    type InputLabelProps,
+    Select,
+    type SelectProps,
     SelectWithSearch,
-    FileUpload,type FileUploadProps,
-    RadioGroup,type RadioGroupProps,
-    RadioButton, type RadioButtonProps,
-    Checkbox, type CheckboxProps,
-    Switch, type SwitchProps,
-    Range, type RangeProps,
-    RadioTabGroup, type RadioTabGroupProps,
-    PinInputField, type PinInputFieldProps,
+    FileUpload,
+    type FileUploadProps,
+    RadioGroup,
+    type RadioGroupProps,
+    RadioButton,
+    type RadioButtonProps,
+    Checkbox,
+    type CheckboxProps,
+    Switch,
+    type SwitchProps,
+    Range,
+    type RangeProps,
+    RadioTabGroup,
+    type RadioTabGroupProps,
+    PinInputField,
+    type PinInputFieldProps,
 } from "./Form";
 
 // METER ===============================================================================================================
@@ -70,8 +71,10 @@ export { Meter, type MeterProps, type MeterMetaProps } from "./Meter";
 
 // NOTIFICATIONS =======================================================================================================
 export {
-    NotificationsWrapper, type NotificationsWrapperProps,
-    NotificationItem, type NotificationItemProps
+    NotificationsWrapper,
+    type NotificationsWrapperProps,
+    NotificationItem,
+    type NotificationItemProps,
 } from "./Notification";
 
 // PORTION =============================================================================================================
@@ -89,34 +92,34 @@ export { useOptionCard } from "./OptionCard";
 
 // SIDEBAR =============================================================================================================
 export {
-    SidebarWrapper, type SidebarWrapperProps,
-    SidebarHeader, type SidebarHeaderProps,
-    SidebarItem, type SidebarItemProps,
-    SidebarItemIcon, type SidebarItemIconProps,
-    SidebarItemText, type SidebarItemTextProps,
-    SidebarFooter, type SidebarFooterProps
+    SidebarWrapper,
+    type SidebarWrapperProps,
+    SidebarHeader,
+    type SidebarHeaderProps,
+    SidebarItem,
+    type SidebarItemProps,
+    SidebarItemIcon,
+    type SidebarItemIconProps,
+    SidebarItemText,
+    type SidebarItemTextProps,
+    SidebarFooter,
+    type SidebarFooterProps,
 } from "./Sidebar";
 
 // SPINNER =============================================================================================================
 export { Spinner, type SpinnerProps } from "./Spinner";
 
 // TABLE ===============================================================================================================
-export {
-    Table, type TableProps,
-    TablePagination, type TablePaginationProps
-} from "./Table";
+export { Table, type TableProps, TablePagination, type TablePaginationProps } from "./Table";
 
 // TABS ================================================================================================================
 export { Tabs, type TabsProps } from "./Tabs";
 
 // THEME PROVIDER ======================================================================================================
-export { ThemeProvider, type ThemeProviderProps } from "./ThemeProvider";
+export { ThemeProvider, type ThemeProviderProps, useTheme } from "./ThemeProvider";
 
 // TOAST ===============================================================================================================
-export {
-    ToastsWrapper, type ToastsWrapperProps,
-    ToastItem, type ToastItemProps
-} from "./Toast";
+export { ToastsWrapper, type ToastsWrapperProps, ToastItem, type ToastItemProps } from "./Toast";
 
 // TYPOGRAPHY ==========================================================================================================
 export {
@@ -128,5 +131,5 @@ export {
     Heading5,
     Heading6,
     type TextProps,
-    type HeadingProps
+    type HeadingProps,
 } from "./Typography";
diff --git a/src/index.tsx b/src/index.tsx
index 034ec1f4..ca947abc 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -21,7 +21,6 @@ import "./components/Typography/typography.css";
 // THEME ===============================================================================================================
 import "./styles/theme.css";
 
-
 // COMPONENTS //////////////////////////////////////////////////////////////////////////////////////////////////////////
 // ACCORDION ===========================================================================================================
 export { Accordion, type AccordionProps } from "./components/Accordion";
@@ -36,10 +35,7 @@ export { Drawer, type DrawerProps } from "./components/Drawer";
 export { Button, type ButtonProps } from "./components/Button";
 
 // BREADCRUMBS =========================================================================================================
-export {
-    Breadcrumbs, type BreadcrumbsProps,
-    BreadcrumbItem, type BreadcrumbItemProps
-} from "./components/Breadcrumbs";
+export { Breadcrumbs, type BreadcrumbsProps, BreadcrumbItem, type BreadcrumbItemProps } from "./components/Breadcrumbs";
 
 // CALLOUT =============================================================================================================
 export { Callout, type CalloutProps } from "./components/Callout";
@@ -47,6 +43,9 @@ export { Callout, type CalloutProps } from "./components/Callout";
 // CARD ================================================================================================================
 export { Card, type CardProps } from "./components/Card";
 
+// CODE BLOCK ==========================================================================================================
+export { CodeBlock, type CodeBlockProps } from "./components/CodeBlock";
+
 // CONTENT WRAPPER =====================================================================================================
 export { ContentWrapper, type ContentWrapperProps } from "./components/ContentWrapper";
 
@@ -55,7 +54,8 @@ export { Divider, type DividerProps } from "./components/Divider";
 
 // ELEMENT =============================================================================================================
 export {
-    Element, type ElementProps,
+    Element,
+    type ElementProps,
     Div,
     Article,
     Aside,
@@ -64,27 +64,42 @@ export {
     Header,
     Main,
     Nav,
-    Section
+    Section,
 } from "./components/Element";
 
 // FORM ================================================================================================================
 export {
-    Form, type FormProps,
-    FormItem, type FormItemProps,
-    FormItemGroup, type FormItemGroupProps,
-    InputField, type InputFieldProps,
-    TextArea, type TextareaProps,
-    InputLabel,type InputLabelProps,
-    Select, type SelectProps,
+    Form,
+    type FormProps,
+    FormItem,
+    type FormItemProps,
+    FormItemGroup,
+    type FormItemGroupProps,
+    InputField,
+    type InputFieldProps,
+    TextArea,
+    type TextareaProps,
+    InputLabel,
+    type InputLabelProps,
+    Select,
+    type SelectProps,
     SelectWithSearch,
-    FileUpload,type FileUploadProps,
-    RadioGroup,type RadioGroupProps,
-    RadioButton, type RadioButtonProps,
-    Checkbox, type CheckboxProps,
-    Switch, type SwitchProps,
-    Range, type RangeProps,
-    RadioTabGroup, type RadioTabGroupProps,
-    PinInputField, type PinInputFieldProps,
+    FileUpload,
+    type FileUploadProps,
+    RadioGroup,
+    type RadioGroupProps,
+    RadioButton,
+    type RadioButtonProps,
+    Checkbox,
+    type CheckboxProps,
+    Switch,
+    type SwitchProps,
+    Range,
+    type RangeProps,
+    RadioTabGroup,
+    type RadioTabGroupProps,
+    PinInputField,
+    type PinInputFieldProps,
 } from "./components/Form";
 
 // METER ===============================================================================================================
@@ -92,8 +107,10 @@ export { Meter, type MeterProps, type MeterMetaProps } from "./components/Meter"
 
 // NOTIFICATIONS  ======================================================================================================
 export {
-    NotificationsWrapper, type NotificationsWrapperProps,
-    NotificationItem, type NotificationItemProps
+    NotificationsWrapper,
+    type NotificationsWrapperProps,
+    NotificationItem,
+    type NotificationItemProps,
 } from "./components/Notification";
 
 // PORTION =============================================================================================================
@@ -111,37 +128,44 @@ export { useOptionCard } from "./components/OptionCard";
 
 // SIDEBAR =============================================================================================================
 export {
-    SidebarWrapper, type SidebarWrapperProps,
-    SidebarHeader, type SidebarHeaderProps,
-    SidebarItem, type SidebarItemProps,
-    SidebarItemIcon, type SidebarItemIconProps,
-    SidebarItemText, type SidebarItemTextProps,
-    SidebarFooter, type SidebarFooterProps
+    SidebarWrapper,
+    type SidebarWrapperProps,
+    SidebarHeader,
+    type SidebarHeaderProps,
+    SidebarItem,
+    type SidebarItemProps,
+    SidebarItemIcon,
+    type SidebarItemIconProps,
+    SidebarItemText,
+    type SidebarItemTextProps,
+    SidebarFooter,
+    type SidebarFooterProps,
 } from "./components/Sidebar";
 
 // SPINNER =============================================================================================================
 export { Spinner, type SpinnerProps } from "./components/Spinner";
 
 // TABLE ===============================================================================================================
-export {
-    Table, type TableProps,
-    TablePagination, type TablePaginationProps
-} from "./components/Table";
+export { Table, type TableProps, TablePagination, type TablePaginationProps } from "./components/Table";
 
 // TABS  ===============================================================================================================
 export { Tabs, type TabsProps } from "./components/Tabs";
 
 // THEME PROVIDER  =====================================================================================================
-export { ThemeProvider, type ThemeProviderProps } from "./components/ThemeProvider";
+export { ThemeProvider, type ThemeProviderProps, useTheme } from "./components/ThemeProvider";
 
 // TOAST ===============================================================================================================
-export {
-    ToastsWrapper, type ToastsWrapperProps,
-    ToastItem, type ToastItemProps
-} from "./components/Toast";
+export { ToastsWrapper, type ToastsWrapperProps, ToastItem, type ToastItemProps } from "./components/Toast";
 
 // TYPOGRAPHY ==========================================================================================================
 export {
-    Text, type TextProps,
-    Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, type HeadingProps
+    Text,
+    type TextProps,
+    Heading1,
+    Heading2,
+    Heading3,
+    Heading4,
+    Heading5,
+    Heading6,
+    type HeadingProps,
 } from "./components/Typography";
diff --git a/vite.config.js b/vite.config.js
index 3ddee3e2..1de7f1bc 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -20,6 +20,23 @@ const input = Object.fromEntries(
         ])
 );
 
+function preserveUseClient() {
+    return {
+        name: "preserve-use-client",
+        enforce: "post",
+        generateBundle(options, bundle) {
+            for (const file in bundle) {
+                if (bundle[file].type === "chunk") {
+                    bundle[file].code = bundle[file].code.replace(
+                        /("use client";|('use client';))?/,
+                        '"use client";\n'
+                    );
+                }
+            }
+        },
+    };
+}
+
 /** @type {import('vite').UserConfig} */
 export default defineConfig({
     css: {
@@ -40,11 +57,13 @@ export default defineConfig({
                     format: "es",
                     entryFileNames: "[name].js",
                     assetFileNames: "index.[ext]",
+                    banner: `"use client;"`,
                 },
                 {
                     format: "cjs",
                     entryFileNames: "[name].cjs",
                     assetFileNames: "index.[ext]",
+                    banner: `"use client;"`,
                 },
             ],
             external: [...Object.keys(pkg.peerDependencies)],
@@ -61,6 +80,7 @@ export default defineConfig({
     },
     plugins: [
         svgr(),
+        preserveUseClient(),
         react({
             babel: {
                 presets: [["@babel/preset-env", { modules: false }], ["@babel/preset-react"]],

From 63bd2e31099df74083287f64156b3efc6a1ce2ee Mon Sep 17 00:00:00 2001
From: Aditya Gannavarapu <aditya.g@setu.co>
Date: Wed, 21 Aug 2024 18:26:23 +0530
Subject: [PATCH 2/3] Removing the default theme

---
 src/components/CodeBlock/CodeBlock.tsx | 77 +++++++++++++-------------
 1 file changed, 39 insertions(+), 38 deletions(-)

diff --git a/src/components/CodeBlock/CodeBlock.tsx b/src/components/CodeBlock/CodeBlock.tsx
index 3ccc5f79..e1257d8a 100644
--- a/src/components/CodeBlock/CodeBlock.tsx
+++ b/src/components/CodeBlock/CodeBlock.tsx
@@ -6,13 +6,12 @@ import { Button } from "../Button/Button";
 import { Badge } from "../Badge/Badge";
 
 import "./CodeBlock.css";
-import { themes } from "prism-react-renderer";
 
 export interface CodeBlockCustomProps {
-    source?: object | string;
-    language?: string | undefined;
-    showCopyButton?: boolean;
-    showLineNumbers?: boolean;
+    source          ? : object | string;
+    language        ? : string | undefined;
+    showCopyButton  ? : boolean;
+    showLineNumbers ? : boolean;
 }
 
 export type CodeBlockElementType = HTMLPreElement;
@@ -22,7 +21,7 @@ export type CodeBlockProps = Omit<CommonAndHTMLProps<CodeBlockElementType>, keyo
 const PrismReactRenderer = React.lazy(() =>
     import("prism-react-renderer").then((prismModule) => {
         if (prismModule.Highlight) {
-            return { default: prismModule.Highlight };
+            return { default : prismModule.Highlight };
         }
 
         // DON’T REMOVE THE WEIRD SPACING, IT’S FOR THE ASCII BOX
@@ -33,34 +32,35 @@ const PrismReactRenderer = React.lazy(() =>
 │   Please install the prism-react-renderer (https://www.npmjs.com/package/prism-react-renderer)   │
 │   package to have syntax highlighting in the CodeBlock component.                                │
 │   For example: \x1b[46m\x1b[30myarn add prism-react-renderer\x1B[0m\x1B[31m                                                     │
-╰──────────────────────────────────────────────────────────────────────────────────────────────────╯`
+╰──────────────────────────────────────────────────────────────────────────────────────────────────╯`,
         );
         const fallbackCodeBlock = ({ code }: { code: string }) => (
             <pre data-code-block className="module-fallback">
                 {code}
             </pre>
         );
-        return { default: fallbackCodeBlock };
-    })
+        return { default : fallbackCodeBlock };
+    }),
 );
 
-export const CodeBlock = React.forwardRef(
-    (
-        { children, source, language = "json", showCopyButton, showLineNumbers, ...props }: CodeBlockProps,
-        ref: React.Ref<CodeBlockElementType>
-    ) => {
-        const [isCodeCopied, setIsCodeCopied] = useState(false);
+export const CodeBlock = React.forwardRef((
+        {
+            children,
+            source,
+            language = "json",
+            showCopyButton,
+            showLineNumbers,
+            ...props
+        }: CodeBlockProps, ref: React.Ref<CodeBlockElementType>) => {
+        const [ isCodeCopied, setIsCodeCopied ] = useState(false);
 
         const copyToClipboard = () => {
-            navigator.clipboard
-                .writeText(code)
-                .then(() => {
-                    setIsCodeCopied(true);
-                    setTimeout(() => setIsCodeCopied(false), 3000); // Revert back after 3 seconds
-                })
-                .catch((err) => {
-                    console.error("Could not copy text: ", err);
-                });
+            navigator.clipboard.writeText(code).then(() => {
+                setIsCodeCopied(true);
+                setTimeout(() => setIsCodeCopied(false), 3000); // Revert back after 3 seconds
+            }).catch(err => {
+                console.error("Could not copy text: ", err);
+            });
         };
 
         // Use children if provided, else use source
@@ -79,15 +79,18 @@ export const CodeBlock = React.forwardRef(
             <Element<CodeBlockElementType> data-code-block as="div" classNames={classNames} {...props}>
                 {showCopyButton ? (
                     isCodeCopied ? (
-                        <Badge className="code-block-copied-badge" size="tiny" shape="rounded" aria-live="polite">
+                        <Badge
+                            className="code-block-copied-badge"
+                            size="tiny" shape="rounded"
+                            aria-live="polite"
+                        >
                             Copied!
                         </Badge>
                     ) : (
                         <Button
                             type="button"
                             className="code-block-copy-button"
-                            size="tiny"
-                            shape="rounded"
+                            size="tiny" shape="rounded"
                             onClick={copyToClipboard}
                             role="button"
                             aria-label="Copy code to clipboard"
@@ -97,19 +100,17 @@ export const CodeBlock = React.forwardRef(
                     )
                 ) : null}
 
-                <Suspense
-                    fallback={
-                        <pre data-code-block className="suspense-fallback">
-                            {code}
-                        </pre>
-                    }
-                >
-                    <PrismReactRenderer code={code} language={language} theme={themes.shadesOfPurple}>
+                <Suspense fallback={<pre data-code-block className="suspense-fallback">{code}</pre>}>
+                    <PrismReactRenderer code={code} language={language} theme={undefined}>
                         {({ className, tokens, getLineProps, getTokenProps }) => (
                             <pre ref={ref} className={className}>
                                 {tokens.map((line, i) => (
-                                    <div {...getLineProps({ line, key: i })}>
-                                        {showLineNumbers && <span className="line-numbers">{i + 1}</span>}
+                                    <div {...getLineProps({ line, key : i })}>
+                                        {showLineNumbers && (
+                                            <span className="line-numbers">
+                                                {i + 1}
+                                            </span>
+                                        )}
 
                                         <span className="l-o-c">
                                             {line.map((token, key) => (
@@ -124,5 +125,5 @@ export const CodeBlock = React.forwardRef(
                 </Suspense>
             </Element>
         );
-    }
+    },
 );

From 6f4027510b6ca0e9f652785f474d800202886fe5 Mon Sep 17 00:00:00 2001
From: Aditya Gannavarapu <aditya.g@setu.co>
Date: Sun, 25 Aug 2024 08:28:27 +0530
Subject: [PATCH 3/3] Update default styles for Callout

---
 src/styles/theme.css | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/styles/theme.css b/src/styles/theme.css
index 266b7e3f..99b14da7 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -133,17 +133,17 @@
     --callout-border-radius  : var(--global-border-radius);
     --callout-border-width   : var(--nano);
 
-    --callout-info-bg        : var(--sky-light-60);
-    --callout-info-border    : var(--sky-dark-30);
+    --callout-info-bg: var(--blue-light-60);
+    --callout-info-border: var(--blue-dark-20);
 
-    --callout-success-bg     : var(--green-light-60);
-    --callout-success-border : var(--green-dark-40);
+    --callout-success-bg: var(--green-light-60);
+    --callout-success-border: var(--green-dark-20);
 
-    --callout-warning-bg     : var(--amber-light-60);
-    --callout-warning-border : var(--amber);
+    --callout-warning-bg: var(--amber-light-60);
+    --callout-warning-border: var(--amber-dark-10);
 
-    --callout-error-bg       : var(--red-light-60);
-    --callout-error-border   : var(--red-dark-40);
+    --callout-error-bg: var(--red-light-60);
+    --callout-error-border: var(--red-dark-10);
 }
 
 /* CARD ///////////////////////////////////////////////////////////////////// */