@redis-ui/components 44.0.2 → 46.1.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@redis-ui/components",
   "license": "UNLICENSED",
-  "version": "44.0.2",
+  "version": "46.1.2",
   "type": "module",
   "sideEffects": false,
   "repository": "git@github.com:redislabsdev/redis-ui.git",
@@ -19,8 +19,9 @@
   },
   "types": "./dist/index.d.ts",
   "scripts": {
-    "build": "tsc && vite build",
+    "build": "tsc --project tsconfig.build.json && vite build",
     "deploy": "node ../../scripts/deploy.js",
+    "deploy:public": "node ../../scripts/deploy-public.js",
     "lint": "oxlint --deny-warnings",
     "lint:fix": "oxlint --fix --deny-warnings",
     "format": "oxfmt --check",
@@ -28,10 +29,10 @@
     "test": "vitest"
   },
   "peerDependencies": {
-    "@redis-ui/icons": "^6.9.2",
-    "@redis-ui/styles": "^15.0.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0",
+    "@redis-ui/icons": "^8.0.0",
+    "@redis-ui/styles": "^16.0.0",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "styled-components": "^5.0.0"
   },
   "dependencies": {
@@ -64,6 +65,6 @@
     "@types/styled-components": "^5.1.26",
     "vi-canvas-mock": "^1.0.0",
     "vite-plugin-babel-macros": "^1.0.6",
-    "vite-plugin-css-injected-by-js": "^3.1.1"
+    "vite-plugin-css-injected-by-js": "^5.0.1"
   }
-}
+}

package/skills/redis-ui-components/SKILL.md

@@ -1,24 +1,27 @@
 ---
 name: redis-ui-components
-description: Use Redis UI components from @redislabsdev/redis-ui-components. Provides usage references, props, and examples for each component. Use any time you need to write frontend code.
+description: Use Redis UI components from redis-ui components. Provides usage references, props, and examples for each component. Use any time you need to write frontend code.
 ---
 
 # Redis UI Components
 
-Package: `@redislabsdev/redis-ui-components`
+Package: `@redis-ui/components`
 
 ## How to Use
 
 Import components as named exports:
 
 ```tsx
-import { Button, Modal, Select } from '@redislabsdev/redis-ui-components';
+import { Button, Modal, Select } from '@redis-ui/components';
 ```
 
-Icons are imported separately:
+Icons are imported separately. Monochrome icons accept a semantic `variant`; without it they
+inherit color from CSS `currentColor`. Use `style.color` for a custom color, and `customSize`
+or `style.width`/`height` for custom sizing. See the [Icons](./references/Icons.md) reference.
 
 ```tsx
-import { EditIcon, DeleteIcon } from '@redislabsdev/redis-ui-icons';
+import { EditIcon, DeleteIcon, iconVariants, type IconVariant } from '@redis-ui/icons';
+import { RedisIcon } from '@redis-ui/icons/multicolor';
 ```
 
 ## Key Patterns
@@ -27,7 +30,7 @@ import { EditIcon, DeleteIcon } from '@redislabsdev/redis-ui-icons';
 - **Compound Components**: Some components use `Object.assign` to attach sub-components (e.g., `Button.Icon`, `Modal.Content`, `Tabs.TabBar`). These sub-components share internal React context with their parent, so they must be rendered inside it.
 - **Layouts**: Use `FlexGroup` and `FlexItem` for flex layouts instead of raw `div` with inline styles. `FlexGroup` supports `gap`, `direction`, `align`, `justify`, and `wrap` props. See the Layout references.
 - **Typography**: Use `Typography.Heading`, `Typography.Body`, and `Typography.Code` for all text rendering instead of raw `<span>`, `<p>`, or `<h1>`–`<h6>` elements. See the [Typography](./references/Typography.md) reference.
-- **Theming**: Components use `styled-components` and access theme via `useTheme()` from `@redislabsdev/redis-ui-styles`.
+- **Theming**: Components use `styled-components` and access theme via `useTheme()` from `@redis-ui/styles`.
 - **ForwardRef**: Most components support `ref` forwarding.
 
 ## Important
@@ -106,12 +109,15 @@ Always check the relevant component reference before using a component. The refe
 - [ProgressBar](./references/ProgressBar.md)
 - [Typography](./references/Typography.md)
 - [MoreInfoIcon](./references/MoreInfoIcon.md)
+- [HighlightedIcon](./references/HighlightedIcon.md)
+- [Icons](./references/Icons.md)
 
 ### Data
 
 - [KeyValueList](./references/KeyValueList.md)
 - [Filters](./references/Filters.md)
 - [SearchBar](./references/SearchBar.md)
+- [DatePicker](./references/DatePicker.md)
 
 ### Misc
 

package/skills/redis-ui-components/references/ActionIconButton.md

@@ -5,13 +5,13 @@ Button with only an icon and a circular background. Use it for compact icon-only
 ## Import
 
 ```tsx
-import { ActionIconButton } from '@redislabsdev/redis-ui-components';
+import { ActionIconButton } from '@redis-ui/components';
 ```
 
 > If you use the examples below, also import the icon from:
 >
 > ```tsx
-> import { ActiveActiveIcon } from '@redislabsdev/redis-ui-icons';
+> import { ActiveActiveIcon } from '@redis-ui/icons';
 > ```
 
 ## Props
@@ -28,8 +28,8 @@ import { ActionIconButton } from '@redislabsdev/redis-ui-components';
 ### Basic Usage
 
 ```tsx
-import { ActionIconButton } from '@redislabsdev/redis-ui-components';
-import { ActiveActiveIcon } from '@redislabsdev/redis-ui-icons';
+import { ActionIconButton } from '@redis-ui/components';
+import { ActiveActiveIcon } from '@redis-ui/icons';
 
 <ActionIconButton size="L" disabled={false} icon={ActiveActiveIcon} />;
 ```
@@ -39,8 +39,8 @@ import { ActiveActiveIcon } from '@redislabsdev/redis-ui-icons';
 > 4 sizes are supported with `M` being the default.
 
 ```tsx
-import { ActionIconButton } from '@redislabsdev/redis-ui-components';
-import { ActiveActiveIcon } from '@redislabsdev/redis-ui-icons';
+import { ActionIconButton } from '@redis-ui/components';
+import { ActiveActiveIcon } from '@redis-ui/icons';
 
 <>
   <ActionIconButton size="XS" icon={ActiveActiveIcon} />
@@ -55,8 +55,8 @@ import { ActiveActiveIcon } from '@redislabsdev/redis-ui-icons';
 > 2 variants are supported, `primary` and `secondary`. The default is `primary`.
 
 ```tsx
-import { ActionIconButton, FormField } from '@redislabsdev/redis-ui-components';
-import { ActiveActiveIcon } from '@redislabsdev/redis-ui-icons';
+import { ActionIconButton, FormField } from '@redis-ui/components';
+import { ActiveActiveIcon } from '@redis-ui/icons';
 
 <>
   <FormField label="primary">
@@ -75,8 +75,8 @@ import { ActiveActiveIcon } from '@redislabsdev/redis-ui-icons';
 > This will disable any hover styles and prevent click events from firing.
 
 ```tsx
-import { ActionIconButton, FormField } from '@redislabsdev/redis-ui-components';
-import { ActiveActiveIcon } from '@redislabsdev/redis-ui-icons';
+import { ActionIconButton, FormField } from '@redis-ui/components';
+import { ActiveActiveIcon } from '@redis-ui/icons';
 
 <>
   <FormField label="primary">

package/skills/redis-ui-components/references/AppBar.md

@@ -4,7 +4,7 @@ A top-level application bar for header content, actions, and account controls. I
 
 ## Import
 ```tsx
-import { AppBar } from '@redislabsdev/redis-ui-components';
+import { AppBar } from '@redis-ui/components';
 ```
 
 ## Props
@@ -43,7 +43,7 @@ The component also extends all native `HTMLAttributes<HTMLDivElement>` props.
 
 ### Basic Usage
 ```tsx
-import { AppBar } from '@redislabsdev/redis-ui-components';
+import { AppBar } from '@redis-ui/components';
 
 <AppBar variant="default">
   <AppBar.LeftContainer>Left container</AppBar.LeftContainer>
@@ -57,7 +57,7 @@ import { AppBar } from '@redislabsdev/redis-ui-components';
 ### Variant
 > `AppBar` has additional variant. Set `"alert"` value to the `variant` prop to see it.
 ```tsx
-import { AppBar, AppSelectionMenu, ProfileIcon, Typography } from '@redislabsdev/redis-ui-components';
+import { AppBar, AppSelectionMenu, ProfileIcon, Typography } from '@redis-ui/components';
 import { items } from '../AppSelectionMenu/AppSelectionMenu.data';
 
 <AppBar variant="alert">
@@ -77,8 +77,8 @@ import { items } from '../AppSelectionMenu/AppSelectionMenu.data';
 > For details on the use of parts, please refer to the relevant documents.
 ```tsx
 import React from 'react';
-import { AppBar, AppSelectionMenu, Menu, ProfileIcon, Typography } from '@redislabsdev/redis-ui-components';
-import { EditIcon, SignoutIcon } from '@redislabsdev/redis-ui-icons';
+import { AppBar, AppSelectionMenu, Menu, ProfileIcon, Typography } from '@redis-ui/components';
+import { EditIcon, SignoutIcon } from '@redis-ui/icons';
 import { items } from '../AppSelectionMenu/AppSelectionMenu.data';
 import * as S from './AppBarStory.style';
 
@@ -97,7 +97,7 @@ const UserMenu = () => {
             <S.AccountName size="S">{USER_NAME}</S.AccountName>
             <S.ActiveAccount>
               <Typography.Body>{ACCOUNT_NAME}</Typography.Body>
-              <Menu.Trigger.Arrow customColor="currentColor" />
+              <Menu.Trigger.Arrow />
             </S.ActiveAccount>
           </S.TriggerToggleButton>
         </span>
@@ -139,7 +139,7 @@ const UserMenu = () => {
 ### Compose
 > Building blocks for composing custom `AppBar`.
 ```tsx
-import { AppBar, AppSelectionMenu, ProfileIcon, Typography } from '@redislabsdev/redis-ui-components';
+import { AppBar, AppSelectionMenu, ProfileIcon, Typography } from '@redis-ui/components';
 
 <AppBar>
   <AppBar.LeftContainer>

package/skills/redis-ui-components/references/AppSelectionMenu.md

@@ -5,10 +5,10 @@ App selection menu component. It renders a default menu trigger and item list, a
 ## Import
 
 ```tsx
-import { AppSelectionMenu } from '@redislabsdev/redis-ui-components';
+import { AppSelectionMenu } from '@redis-ui/components';
 ```
 
-> Examples also use icons from `@redislabsdev/redis-ui-icons`.
+> Examples also use icons from `@redis-ui/icons`.
 
 ## Props
 
@@ -87,8 +87,8 @@ import { AppSelectionMenu } from '@redislabsdev/redis-ui-components';
 ### Playground
 
 ```tsx
-import { AppSelectionMenu } from '@redislabsdev/redis-ui-components';
-import { ActiveActiveIcon, BillingIcon, RedisAiIcon } from '@redislabsdev/redis-ui-icons';
+import { AppSelectionMenu } from '@redis-ui/components';
+import { ActiveActiveIcon, BillingIcon, RedisAiIcon } from '@redis-ui/icons';
 
 const items = [
   { label: 'Disabled', onClick: () => {}, icon: RedisAiIcon, disabled: true },
@@ -102,8 +102,8 @@ const items = [
 ### Default Open
 
 ```tsx
-import { AppSelectionMenu } from '@redislabsdev/redis-ui-components';
-import { ActiveActiveIcon, BillingIcon, RedisAiIcon } from '@redislabsdev/redis-ui-icons';
+import { AppSelectionMenu } from '@redis-ui/components';
+import { ActiveActiveIcon, BillingIcon, RedisAiIcon } from '@redis-ui/icons';
 
 const items = [
   { label: 'Disabled', onClick: () => {}, icon: RedisAiIcon, disabled: true },
@@ -118,8 +118,8 @@ const items = [
 
 ```tsx
 import { useState } from 'react';
-import { AppSelectionMenu, Button } from '@redislabsdev/redis-ui-components';
-import { ActiveActiveIcon, BillingIcon, RedisAiIcon } from '@redislabsdev/redis-ui-icons';
+import { AppSelectionMenu, Button } from '@redis-ui/components';
+import { ActiveActiveIcon, BillingIcon, RedisAiIcon } from '@redis-ui/icons';
 
 const items = [
   { label: 'Disabled', onClick: () => {}, icon: RedisAiIcon, disabled: true },
@@ -140,8 +140,8 @@ const [open, setOpen] = useState(false);
 ### Composition
 
 ```tsx
-import { AppSelectionMenu, ActionIconButton, Typography } from '@redislabsdev/redis-ui-components';
-import { StarsIcon, ActiveActiveIcon, BillingIcon, RedisAiIcon } from '@redislabsdev/redis-ui-icons';
+import { AppSelectionMenu, ActionIconButton, Typography } from '@redis-ui/components';
+import { StarsIcon, ActiveActiveIcon, BillingIcon, RedisAiIcon } from '@redis-ui/icons';
 import * as S from './AppSelectionMenu.style';
 
 const items = [

package/skills/redis-ui-components/references/AutoCompleteSelect.md

@@ -5,7 +5,7 @@ A controlled autocomplete input that shows matching suggestions as the user type
 ## Import
 
 ```tsx
-import { AutoCompleteSelect } from '@redislabsdev/redis-ui-components';
+import { AutoCompleteSelect } from '@redis-ui/components';
 ```
 
 ## Props
@@ -31,7 +31,7 @@ The component also accepts standard `InputHTMLAttributes<HTMLInputElement>` prop
 
 ```tsx
 import { useState } from 'react';
-import { AutoCompleteSelect } from '@redislabsdev/redis-ui-components';
+import { AutoCompleteSelect } from '@redis-ui/components';
 import { storyOptions } from './AutoCompleteSelectStory.data';
 
 function Render() {
@@ -56,7 +56,7 @@ function Render() {
 
 ```tsx
 import { useState } from 'react';
-import { AutoCompleteSelect } from '@redislabsdev/redis-ui-components';
+import { AutoCompleteSelect } from '@redis-ui/components';
 import { storyOptions } from './AutoCompleteSelectStory.data';
 
 function Render() {
@@ -75,7 +75,7 @@ import { useState } from 'react';
 import {
   AutoCompleteOption,
   AutoCompleteSelect
-} from '@redislabsdev/redis-ui-components';
+} from '@redis-ui/components';
 import { storyOptions } from './AutoCompleteSelectStory.data';
 
 const fetchOptionsBySearchValue = async (search: string) => {
@@ -120,7 +120,7 @@ function Render() {
 
 ```tsx
 import { useState } from 'react';
-import { AutoCompleteSelect, FormField } from '@redislabsdev/redis-ui-components';
+import { AutoCompleteSelect, FormField } from '@redis-ui/components';
 import { storyOptions } from './AutoCompleteSelectStory.data';
 
 function Render() {
@@ -141,7 +141,7 @@ function Render() {
 
 ```tsx
 import { useState } from 'react';
-import { AutoCompleteSelect } from '@redislabsdev/redis-ui-components';
+import { AutoCompleteSelect } from '@redis-ui/components';
 import { storyOptions } from './AutoCompleteSelectStory.data';
 
 function Render() {
@@ -161,7 +161,7 @@ function Render() {
 ### Disabled
 
 ```tsx
-import { AutoCompleteSelect } from '@redislabsdev/redis-ui-components';
+import { AutoCompleteSelect } from '@redis-ui/components';
 import { storyOptions } from './AutoCompleteSelectStory.data';
 
 <>

package/skills/redis-ui-components/references/Badge.md

@@ -5,17 +5,17 @@ Compact status badge with variant-based coloring and optional icons.
 ## Import
 
 ```tsx
-import { Badge } from '@redislabsdev/redis-ui-components';
+import { Badge } from '@redis-ui/components';
 ```
 
-If you pass a custom icon in examples, import it from `@redislabsdev/redis-ui-icons`.
+If you pass a custom icon in examples, import it from `@redis-ui/icons`.
 
 ## Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | label | `string` | required | Text rendered inside the badge |
-| variant | `'white' \| 'light' \| 'default' \| 'informative' \| 'success' \| 'notice' \| 'danger' \| 'attention' \| 'disabled'` | `'default'` | Visual badge variant that controls surface and icon styling |
+| variant | `'white' \| 'light' \| 'default' \| 'informative' \| 'success' \| 'notice' \| 'danger' \| 'attention' \| 'upsell' \| 'disabled'` | `'default'` | Visual badge variant that controls surface and icon styling |
 | withIcon | `boolean` | `false` | Shows the default variant icon when enabled |
 | icon | `IconType` | - | Overrides the default icon used for the current variant |
 | color | `string` | - | Overrides the badge accent color directly |
@@ -28,7 +28,7 @@ The component also extends `React.HTMLAttributes<HTMLDivElement>`.
 ### Basic Usage
 
 ```tsx
-import { Badge } from '@redislabsdev/redis-ui-components';
+import { Badge } from '@redis-ui/components';
 
 <Badge label="Badge" withIcon />
 ```
@@ -36,7 +36,7 @@ import { Badge } from '@redislabsdev/redis-ui-components';
 ### WithCustomColor
 
 ```tsx
-import { Badge } from '@redislabsdev/redis-ui-components';
+import { Badge } from '@redis-ui/components';
 
 <Badge label="Badge" withIcon color="#0366d6" />
 ```
@@ -46,8 +46,8 @@ import { Badge } from '@redislabsdev/redis-ui-components';
 > `Badge` can be rendered with or without an icon using `withIcon`. Pass `icon` to customize the icon.
 
 ```tsx
-import { Badge } from '@redislabsdev/redis-ui-components';
-import { PhoneIcon } from '@redislabsdev/redis-ui-icons';
+import { Badge } from '@redis-ui/components';
+import { PhoneIcon } from '@redis-ui/icons';
 
 <>
   <Badge label="Without icon" />
@@ -61,7 +61,7 @@ import { PhoneIcon } from '@redislabsdev/redis-ui-icons';
 > `Badge` can be rendered in a few variants using the `variant` prop.
 
 ```tsx
-import { Badge, badgeVariants } from '@redislabsdev/redis-ui-components';
+import { Badge, badgeVariants } from '@redis-ui/components';
 
 <>
   {badgeVariants.map((variant) => (

package/skills/redis-ui-components/references/Banner.md

@@ -5,10 +5,10 @@ Semantic banner and strip component with automatic icon, message, action, and cl
 ## Import
 
 ```tsx
-import { Banner } from '@redislabsdev/redis-ui-components';
+import { Banner } from '@redis-ui/components';
 ```
 
-> Icons used in examples are imported separately from `@redislabsdev/redis-ui-icons`.
+> Icons used in examples are imported separately from `@redis-ui/icons`.
 
 ## Props
 
@@ -79,7 +79,7 @@ The root banner forwards standard `div` attributes through the compose container
 | variant | `'informative' \| 'notice' \| 'danger' \| 'attention' \| 'success'` | `informative` | Semantic icon variant |
 | customIcon | `IconType` | - | Custom icon override |
 
-`Banner.Icon` also inherits `MonochromeIconProps` from `@redislabsdev/redis-ui-icons`.
+`Banner.Icon` also accepts monochrome icon props from `@redis-ui/icons` except for `variant`, which is overridden with the Banner semantic variant above (`Omit<MonochromeIconProps, 'variant'>`). Pass `customIcon` to override the default semantic icon.
 
 ### Banner.Message
 
@@ -122,7 +122,7 @@ The root banner forwards standard `div` attributes through the compose container
 ### Playground
 
 ```tsx
-import { Banner, BannerProps } from '@redislabsdev/redis-ui-components';
+import { Banner, BannerProps } from '@redis-ui/components';
 import { unflatten } from '../../helpers/unflatten';
 
 const handleClose = () => {};
@@ -146,7 +146,7 @@ function Render(args: unknown) {
 ### BasicBanner
 
 ```tsx
-import { Banner } from '@redislabsdev/redis-ui-components';
+import { Banner } from '@redis-ui/components';
 
 <>
   <Banner message="Basic banner" />
@@ -159,8 +159,8 @@ import { Banner } from '@redislabsdev/redis-ui-components';
 > We support a few different semantic variants of banners.
 
 ```tsx
-import { Banner, BannerVariant, bannerVariants } from '@redislabsdev/redis-ui-components';
-import { PhoneIcon } from '@redislabsdev/redis-ui-icons';
+import { Banner, BannerVariant, bannerVariants } from '@redis-ui/components';
+import { PhoneIcon } from '@redis-ui/icons';
 
 const handleClose = () => {};
 const handleClick = () => {};
@@ -203,8 +203,8 @@ const renderSemanticBanner = (variant: BannerVariant, idx: number) => (
 > We support a few different semantic variants of banner strips.
 
 ```tsx
-import { Banner, BannerVariant, bannerVariants } from '@redislabsdev/redis-ui-components';
-import { PhoneIcon } from '@redislabsdev/redis-ui-icons';
+import { Banner, BannerVariant, bannerVariants } from '@redis-ui/components';
+import { PhoneIcon } from '@redis-ui/icons';
 
 const handleClose = () => {};
 const handleClick = () => {};
@@ -248,7 +248,7 @@ const renderSemanticBanner = (variant: BannerVariant, idx: number) => (
 > Banner can be one of the following sizes
 
 ```tsx
-import { Banner } from '@redislabsdev/redis-ui-components';
+import { Banner } from '@redis-ui/components';
 
 const handleClose = () => {};
 const handleClick = () => {};
@@ -279,7 +279,7 @@ const restOfBannerProps = {
 > Message can contain any JSX elements
 
 ```tsx
-import { Banner } from '@redislabsdev/redis-ui-components';
+import { Banner } from '@redis-ui/components';
 
 const handleClose = () => {};
 
@@ -333,7 +333,7 @@ const handleClose = () => {};
 > Each Banner can contain two independent action buttons: primary and secondary. Each of them can be added separately.
 
 ```tsx
-import { Banner } from '@redislabsdev/redis-ui-components';
+import { Banner } from '@redis-ui/components';
 
 const handleClick = () => {};
 
@@ -378,7 +378,7 @@ const handleClick = () => {};
 
 ```tsx
 import { useState } from 'react';
-import { Banner, Button } from '@redislabsdev/redis-ui-components';
+import { Banner, Button } from '@redis-ui/components';
 
 const handleClick = () => {};
 
@@ -411,8 +411,8 @@ function Render() {
 > Banner can have custom icon. Use `customIcon` property to specify it.
 
 ```tsx
-import { Banner } from '@redislabsdev/redis-ui-components';
-import { ShardIcon } from '@redislabsdev/redis-ui-icons';
+import { Banner } from '@redis-ui/components';
+import { ShardIcon } from '@redis-ui/icons';
 
 <>
   <Banner message="Banner with custom icon" customIcon={ShardIcon} />
@@ -425,7 +425,7 @@ import { ShardIcon } from '@redislabsdev/redis-ui-icons';
 > Icon of the banner can be hidden. Use `showIcon = false` to hide it.
 
 ```tsx
-import { Banner } from '@redislabsdev/redis-ui-components';
+import { Banner } from '@redis-ui/components';
 
 <>
   <Banner message="Banner without icon" showIcon={false} />
@@ -440,7 +440,7 @@ import { Banner } from '@redislabsdev/redis-ui-components';
 > The close button can be forced to be hidden, even if a close handler is specified. Use `showCloseButton={false}` to hide it.
 
 ```tsx
-import { Banner } from '@redislabsdev/redis-ui-components';
+import { Banner } from '@redis-ui/components';
 
 const handleClose = () => {};
 const handleClick = () => {};
@@ -471,7 +471,7 @@ const handleClick = () => {};
 > If the banner is stretched, it may leave space to the right of the short text. The strip always centers the entire content.
 
 ```tsx
-import { Banner } from '@redislabsdev/redis-ui-components';
+import { Banner } from '@redis-ui/components';
 
 const handleClose = () => {};
 const handleClick = () => {};
@@ -509,13 +509,13 @@ const handleClick = () => {};
 > Banner can be custom composed by using `Banner.Compose` as the root element. Composition elements can be styled.
 
 ```tsx
-import { Banner } from '@redislabsdev/redis-ui-components';
-import { ShardIcon } from '@redislabsdev/redis-ui-icons';
+import { Banner } from '@redis-ui/components';
+import { ShardIcon } from '@redis-ui/icons';
 
 <Banner.Compose
   style={{ backgroundColor: '#80ecf0a8', borderColor: '#a6d7d9', color: '#0a585b' }}
 >
-  <Banner.Icon customIcon={ShardIcon} customColor="#00999f" />
+  <Banner.Icon customIcon={ShardIcon} style={{ color: '#00999f' }} />
   <Banner.Message>
     This banner composed using custom icon and message with overridden style
   </Banner.Message>
@@ -527,8 +527,8 @@ import { ShardIcon } from '@redislabsdev/redis-ui-icons';
 > Actions have their own composition. Use `Banner.Actions.Compose` and `Banner.Actions.Action`.
 
 ```tsx
-import { Banner } from '@redislabsdev/redis-ui-components';
-import { ShardIcon, StarsIcon } from '@redislabsdev/redis-ui-icons';
+import { Banner } from '@redis-ui/components';
+import { ShardIcon, StarsIcon } from '@redis-ui/icons';
 
 const handleClose = () => {};
 const handleClick = () => {};