@fountain-ui/core 3.0.0-alpha.10 → 3.0.0-alpha.12

package/build/module/internal/icons/Close.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { Path } from 'react-native-svg';
 import { createSvgIcon } from '../../utils';
 export default createSvgIcon( /*#__PURE__*/React.createElement(Path, {
-  d: "M19.7071 5.70711C20.0976 5.31658 20.0976 4.68342 19.7071 4.29289C19.3166 3.90237 18.6834 3.90237 18.2929 4.29289L12 10.5858L5.70711 4.29292C5.31658 3.9024 4.68342 3.9024 4.29289 4.29292C3.90237 4.68345 3.90237 5.31661 4.29289 5.70714L10.5858 12L4.29289 18.2929C3.90237 18.6834 3.90237 19.3166 4.29289 19.7071C4.68342 20.0976 5.31658 20.0976 5.70711 19.7071L12 13.4142L18.2929 19.7071C18.6834 20.0977 19.3166 20.0977 19.7071 19.7071C20.0976 19.3166 20.0976 18.6834 19.7071 18.2929L13.4142 12L19.7071 5.70711Z"
-}), 'Close');
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M0.292893 5.29289C0.683417 4.90237 1.31658 4.90237 1.70711 5.29289L7 10.5858L12.2929 5.29289C12.6834 4.90237 13.3166 4.90237 13.7071 5.29289C14.0976 5.68342 14.0976 6.31658 13.7071 6.70711L8.41421 12L13.7071 17.2929C14.0976 17.6834 14.0976 18.3166 13.7071 18.7071C13.3166 19.0976 12.6834 19.0976 12.2929 18.7071L7 13.4142L1.70711 18.7071C1.31658 19.0976 0.683417 19.0976 0.292893 18.7071C-0.0976311 18.3166 -0.0976311 17.6834 0.292893 17.2929L5.58579 12L0.292893 6.70711C-0.0976311 6.31658 -0.0976311 5.68342 0.292893 5.29289Z"
+}), 'Close', '0 0 14 24');
 //# sourceMappingURL=Close.js.map

package/build/module/internal/icons/Close.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Path","createSvgIcon"],"sources":["Close.tsx"],"sourcesContent":["import React from 'react';\nimport { Path } from 'react-native-svg';\nimport { createSvgIcon } from '../../utils';\n\nexport default createSvgIcon(\n    <Path\n        d=\"M19.7071 5.70711C20.0976 5.31658 20.0976 4.68342 19.7071 4.29289C19.3166 3.90237 18.6834 3.90237 18.2929 4.29289L12 10.5858L5.70711 4.29292C5.31658 3.9024 4.68342 3.9024 4.29289 4.29292C3.90237 4.68345 3.90237 5.31661 4.29289 5.70714L10.5858 12L4.29289 18.2929C3.90237 18.6834 3.90237 19.3166 4.29289 19.7071C4.68342 20.0976 5.31658 20.0976 5.70711 19.7071L12 13.4142L18.2929 19.7071C18.6834 20.0977 19.3166 20.0977 19.7071 19.7071C20.0976 19.3166 20.0976 18.6834 19.7071 18.2929L13.4142 12L19.7071 5.70711Z\"\n    />,\n    'Close',\n);\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,kBAArB;AACA,SAASC,aAAT,QAA8B,aAA9B;AAEA,eAAeA,aAAa,eACxB,oBAAC,IAAD;EACI,CAAC,EAAC;AADN,EADwB,EAIxB,OAJwB,CAA5B"}
+{"version":3,"names":["React","Path","createSvgIcon"],"sources":["Close.tsx"],"sourcesContent":["import React from 'react';\nimport { Path } from 'react-native-svg';\nimport { createSvgIcon } from '../../utils';\n\nexport default createSvgIcon(\n    <Path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M0.292893 5.29289C0.683417 4.90237 1.31658 4.90237 1.70711 5.29289L7 10.5858L12.2929 5.29289C12.6834 4.90237 13.3166 4.90237 13.7071 5.29289C14.0976 5.68342 14.0976 6.31658 13.7071 6.70711L8.41421 12L13.7071 17.2929C14.0976 17.6834 14.0976 18.3166 13.7071 18.7071C13.3166 19.0976 12.6834 19.0976 12.2929 18.7071L7 13.4142L1.70711 18.7071C1.31658 19.0976 0.683417 19.0976 0.292893 18.7071C-0.0976311 18.3166 -0.0976311 17.6834 0.292893 17.2929L5.58579 12L0.292893 6.70711C-0.0976311 6.31658 -0.0976311 5.68342 0.292893 5.29289Z\"\n    />,\n    'Close',\n    '0 0 14 24',\n);\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,kBAArB;AACA,SAASC,aAAT,QAA8B,aAA9B;AAEA,eAAeA,aAAa,eACxB,oBAAC,IAAD;EACI,QAAQ,EAAC,SADb;EAEI,QAAQ,EAAC,SAFb;EAGI,CAAC,EAAC;AAHN,EADwB,EAMxB,OANwB,EAOxB,WAPwB,CAA5B"}

package/build/typescript/Badge/BadgeProps.d.ts

@@ -29,6 +29,11 @@ export default interface BadgeProps extends OverridableComponentProps<ViewProps,
      * (only number variant)
      */
     content?: number;
+    /**
+     * The horizontal offset of the badge.
+     * @default 0
+     */
+    horizontalOffset?: number;
     /**
      * If `true`, the badge is invisible.
      * @default false
@@ -42,11 +47,6 @@ export default interface BadgeProps extends OverridableComponentProps<ViewProps,
      * }
      */
     position?: BadgePosition;
-    /**
-     * The offset of the badge.
-     * @default 0
-     */
-    offset?: number;
     /**
      *
      */
@@ -56,5 +56,10 @@ export default interface BadgeProps extends OverridableComponentProps<ViewProps,
      * @default 'dot'
      */
     variant?: BadgeVariant;
+    /**
+     * The vertical offset of the badge.
+     * @default 0
+     */
+    verticalOffset?: number;
 }> {
 }

package/build/typescript/ButtonBase/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacyButtonBase';
+export { default } from './ButtonBase';
 export type { default as ButtonBaseProps } from './ButtonBaseProps';

package/build/typescript/Chip/ChipProps.d.ts

@@ -1,23 +1,30 @@
 import React from 'react';
 import { OverridableComponentProps } from '../types';
 import type { ButtonBaseProps } from '../ButtonBase';
+export declare const chipColors: readonly ["default", "white"];
+export declare type ChipColor = typeof chipColors[number];
 export declare const chipSizes: readonly ["large", "small"];
 export declare type ChipSize = typeof chipSizes[number];
 export declare const chipStartElementVariants: readonly ["default", "avatar", "image", "icon"];
 export declare type ChipStartElementVariant = typeof chipStartElementVariants[number];
 export default interface ChipProps extends OverridableComponentProps<ButtonBaseProps, {
-    /**
-     * Element placed after the children.
-     */
-    endElement?: React.ReactElement;
     /**
      * The content of the component.
      */
     children: string;
+    /**
+     * Set backgroundColor of the component.
+     * @default 'default'
+     */
+    color?: ChipColor;
     /**
      * Number of lines of children.
      */
     numberOfLines?: number;
+    /**
+     * If `true`, showing a close icon and applying a highlighted style.
+     */
+    selected?: boolean;
     /**
      * Determines size of component.
      * @default 'small'

package/build/typescript/Chip/index.d.ts

@@ -1,3 +1,3 @@
 export { default } from './Chip';
 export type { default as ChipProps } from './ChipProps';
-export { chipSizes, chipStartElementVariants } from './ChipProps';
+export { chipColors, chipSizes, chipStartElementVariants } from './ChipProps';

package/build/typescript/Chip/useChipStyle.d.ts

@@ -1,11 +1,12 @@
 import type { TextStyle } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
-import type { ChipSize, ChipStartElementVariant } from './ChipProps';
+import type { ChipColor, ChipSize, ChipStartElementVariant } from './ChipProps';
 interface ChipStyle {
     container: FountainUiStyle;
-    endElement?: FountainUiStyle;
+    closeButton?: FountainUiStyle;
     label: TextStyle;
     startElement?: FountainUiStyle;
+    startElementContainer?: FountainUiStyle;
 }
-export default function useChipStyle(size: ChipSize, startElementVariant: ChipStartElementVariant, isEndElement: boolean): ChipStyle;
+export default function useChipStyle(size: ChipSize, startElementVariant: ChipStartElementVariant, color: ChipColor, selected: boolean): ChipStyle;
 export {};

package/build/typescript/Dialog/DialogProps.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { ModalProps } from '../Modal';
 import type { OverridableComponentProps } from '../types';
 import { ANIMATION_TYPE } from '../Modal';
-export declare const dialogSizes: readonly ["small", "medium", "large"];
+export declare const dialogSizes: readonly ["small", "medium", "large", "full"];
 export declare type DialogSize = typeof dialogSizes[number];
 export default interface DialogProps extends OverridableComponentProps<ModalProps, {
     /**
@@ -14,11 +14,6 @@ export default interface DialogProps extends OverridableComponentProps<ModalProp
      * Dialog children, usually the included sub-components.
      */
     children?: React.ReactNode;
-    /**
-     * If `true`, the dialog is full-screen.
-     * @default false
-     */
-    fullScreen?: boolean;
     /**
      * Determines the minWidth of the Dialog.
      * @default 'medium'

package/build/typescript/Dialog/useDialogStyle.d.ts

@@ -2,5 +2,5 @@ import type { NamedStylesStringUnion } from '@fountain-ui/styles';
 import type { DialogSize } from './DialogProps';
 declare type DialogStyleKeys = 'root' | 'container' | 'paper' | 'topElementContainer' | 'topElementContent';
 declare type DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;
-export default function useDialogStyle(size: DialogSize, fullScreen: boolean): DialogStyles;
+export default function useDialogStyle(size: DialogSize): DialogStyles;
 export {};

package/build/typescript/DialogTitle/DialogLargeTitle.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { DialogProps } from '../Dialog';
+import type DialogTitleProps from './DialogTitleProps';
+interface DialogLargeTitleProps extends DialogTitleProps {
+    closeButtonType?: 'back' | 'close';
+    onClose: DialogProps['onClose'];
+}
+export default function DialogLargeTitle(props: DialogLargeTitleProps): JSX.Element;
+export {};

package/build/typescript/DialogTitle/DialogTitle.d.ts

@@ -1,3 +1,8 @@
 /// <reference types="react" />
+import DialogLargeTitle from './DialogLargeTitle';
 import type DialogTitleProps from './DialogTitleProps';
-export default function DialogTitle(props: DialogTitleProps): JSX.Element;
+declare const DialogTitle: {
+    (props: DialogTitleProps): JSX.Element;
+    Large: typeof DialogLargeTitle;
+};
+export default DialogTitle;

package/build/typescript/Divider/DividerProps.d.ts

@@ -3,7 +3,7 @@ import type { ViewProps } from 'react-native';
 import type { OverridableComponentProps } from '../types';
 export declare const dividerElementAligns: readonly ["start", "center", "end"];
 export declare type DividerElementAlign = typeof dividerElementAligns[number];
-export declare const dividerVariants: readonly ["base", "strong"];
+export declare const dividerVariants: readonly ["base", "strong", "baseStatic", "strongStatic"];
 export declare type DividerVariant = typeof dividerVariants[number];
 export default interface DividerProps extends OverridableComponentProps<ViewProps, {
     /**

package/build/typescript/Pagination/PaginationProps.d.ts

@@ -1,9 +1,16 @@
 import React from 'react';
 import type { ViewProps } from 'react-native';
 import type { OverridableComponentProps } from '../types';
+export declare const paginationColors: readonly ["base", "static"];
+export declare type PaginationColor = typeof paginationColors[number];
 export declare const paginationVariants: readonly ["dot", "number"];
 export declare type PaginationVariant = typeof paginationVariants[number];
 export interface PaginationRenderItemParams {
+    /**
+     * Set color of dot.
+     * @default 'base'
+     */
+    color?: PaginationColor;
     /**
      * Index of the pagination item.
      */
@@ -27,6 +34,11 @@ export default interface PaginationProps extends OverridableComponentProps<ViewP
      * The pagination will be added relative to this node.
      */
     children?: React.ReactNode;
+    /**
+     * Set color of dot.
+     * @default 'base'
+     */
+    color?: PaginationColor;
     /**
      * The total number of pages.
      */

package/build/typescript/Pagination/index.d.ts

@@ -1,3 +1,3 @@
 export { default } from './Pagination';
-export type { default as PaginationProps } from './PaginationProps';
-export { paginationVariants } from './PaginationProps';
+export type { default as PaginationProps, PaginationColor, PaginationVariant } from './PaginationProps';
+export { paginationColors, paginationVariants } from './PaginationProps';

package/build/typescript/PaginationItem/PaginationItemProps.d.ts

@@ -1,6 +1,12 @@
 import type { ViewProps } from 'react-native';
 import type { OverridableComponentProps } from '../types';
+import { PaginationColor } from '../Pagination';
 export default interface PaginationItemProps extends OverridableComponentProps<ViewProps, {
+    /**
+     * Set color of dot.
+     * @default 'base'
+     */
+    color?: PaginationColor;
     /**
      * If `true`, the pagination item is disabled.
      * @default false

package/build/typescript/Toolbar/BackButton/BackButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type BackButtonProps from './BackButtonProps';
+export default function BackButton(props: BackButtonProps): JSX.Element;

package/build/typescript/Toolbar/BackButton/BackButtonProps.d.ts

@@ -0,0 +1,4 @@
+import type { IconButtonProps } from '../../IconButton';
+import type { OverridableComponentProps } from '../../types';
+export default interface BackButtonProps extends OverridableComponentProps<Omit<IconButtonProps, 'children'>, {}> {
+}

package/build/typescript/Toolbar/BackButton/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './BackButton';
+export type { default as BackButtonProps } from './BackButtonProps';

package/build/typescript/Toolbar/Toolbar.d.ts

@@ -1,3 +1,8 @@
 /// <reference types="react" />
+import BackButton from './BackButton';
 import type ToolbarProps from './ToolbarProps';
-export default function Toolbar(props: ToolbarProps): JSX.Element;
+declare const Toolbar: {
+    (props: ToolbarProps): JSX.Element;
+    BackButton: typeof BackButton;
+};
+export default Toolbar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "3.0.0-alpha.10",
+  "version": "3.0.0-alpha.12",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -14,7 +14,7 @@
     "prepare": "bob build"
   },
   "dependencies": {
-    "@fountain-ui/styles": "^3.0.0-alpha.7",
+    "@fountain-ui/styles": "^3.0.0-alpha.8",
     "@fountain-ui/utils": "^3.0.0-alpha.1"
   },
   "peerDependencies": {
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "20eb6bb3e12dcc17b0b01558dbbd75e7344bdaef"
+  "gitHead": "41dd1275144940053eca67f53504c81eee6eac2b"
 }

package/src/AppBar/AppBar.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { useBreakpointUp } from '../hooks';
 import { css, useTheme } from '../styles';
 import type AppBarProps from './AppBarProps';
 import type { AppBarColor } from './AppBarProps';
@@ -31,6 +32,8 @@ const AppBar = React.forwardRef<View, AppBarProps>(function AppBar(props, ref) {
 
     const theme = useTheme();
 
+    const isDesktop = useBreakpointUp('md', true, false);
+
     const styles = useStyles();
 
     const backgroundColorMap: Record<AppBarColor, string> = {
@@ -41,6 +44,7 @@ const AppBar = React.forwardRef<View, AppBarProps>(function AppBar(props, ref) {
     const paperStyle = css([
         styles.root,
         { backgroundColor: backgroundColorMap[color] },
+        isDesktop ? { paddingHorizontal: 8 } : undefined,
         style,
     ]);
 

package/src/Badge/Badge.tsx

@@ -15,12 +15,13 @@ export default function Badge(props: BadgeProps) {
         children,
         color = 'accent' as BadgeColor,
         content,
+        horizontalOffset = 0,
         invisible = false,
         position = defaultPosition,
         size = 'medium' as BadgeSize,
         style: styleProp,
-        offset = 0,
         variant = 'dot' as BadgeVariant,
+        verticalOffset = 0,
         ...otherProps
     } = props;
 
@@ -36,8 +37,8 @@ export default function Badge(props: BadgeProps) {
     const badgeStyle = css([
         baseBadgeStyle,
         {
-            [position.vertical]: offset,
-            [position.horizontal]: offset,
+            [position.vertical]: verticalOffset,
+            [position.horizontal]: horizontalOffset,
         },
     ]);
 

package/src/Badge/BadgeProps.ts

@@ -39,6 +39,12 @@ export default interface BadgeProps extends OverridableComponentProps<ViewProps,
      */
     content?: number;
 
+    /**
+     * The horizontal offset of the badge.
+     * @default 0
+     */
+    horizontalOffset?: number;
+
     /**
      * If `true`, the badge is invisible.
      * @default false
@@ -54,12 +60,6 @@ export default interface BadgeProps extends OverridableComponentProps<ViewProps,
      */
     position?: BadgePosition;
 
-    /**
-     * The offset of the badge.
-     * @default 0
-     */
-    offset?: number;
-
     /**
      *
      */
@@ -70,4 +70,10 @@ export default interface BadgeProps extends OverridableComponentProps<ViewProps,
      * @default 'dot'
      */
     variant?: BadgeVariant;
+
+    /**
+     * The vertical offset of the badge.
+     * @default 0
+     */
+    verticalOffset?: number;
 }> {}

package/src/ButtonBase/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacyButtonBase';
+export { default } from './ButtonBase';
 export type { default as ButtonBaseProps } from './ButtonBaseProps';

package/src/Chip/Chip.tsx

@@ -1,18 +1,20 @@
 import React from 'react';
 import { Text, View } from 'react-native';
+import ButtonBase from '../ButtonBase';
+import { Close } from '../internal';
 import { css } from '../styles';
 import { cloneElementSafely } from '../utils';
-import ButtonBase from '../ButtonBase/ButtonBase';
 import type ChipProps from './ChipProps';
-import type { ChipSize } from './ChipProps';
+import type { ChipColor, ChipSize } from './ChipProps';
 import useChipStyle from './useChipStyle';
 
 export default function Chip(props: ChipProps) {
     const {
         children,
-        endElement: endElementProp,
+        color = 'default' as ChipColor,
         numberOfLines,
         onPress,
+        selected = false,
         size = 'small' as ChipSize,
         startElement: startElementProp,
         startElementVariant = 'default',
@@ -22,26 +24,26 @@ export default function Chip(props: ChipProps) {
 
     const {
         container: containerStyle,
-        endElement: endElementStyle,
+        closeButton: closeButtonStyle,
         label: labelStyle,
         startElement: startElementStyle,
-    } = useChipStyle(size, startElementVariant, !!endElementProp);
+        startElementContainer: startElementContainerStyle,
+    } = useChipStyle(size, startElementVariant, color, selected);
 
     const chipStyle = css([
         containerStyle,
         styleProp,
     ]);
 
-    const startElement = startElementVariant === 'icon'
-        ? (
-            <View style={startElementStyle}>
-                {cloneElementSafely(startElementProp)}
-            </View>
-        ) : cloneElementSafely(startElementProp, { style: startElementStyle });
-    const endElement = cloneElementSafely(endElementProp, { style: endElementStyle });
+    const startElement = (
+        <View style={startElementContainerStyle}>
+            {cloneElementSafely(startElementProp, { style: startElementStyle })}
+        </View>
+    );
 
     return (
         <ButtonBase
+            disabled={!onPress}
             onPress={onPress}
             style={chipStyle}
             {...otherProps}
@@ -54,7 +56,12 @@ export default function Chip(props: ChipProps) {
                 style={labelStyle}
             />
 
-            {endElement}
+            {selected ? (
+                <Close
+                    color={'baseInverse'}
+                    style={closeButtonStyle}
+                />
+            ) : null}
         </ButtonBase>
     );
 }

package/src/Chip/ChipProps.ts

@@ -2,6 +2,9 @@ import React from 'react';
 import { OverridableComponentProps } from '../types';
 import type { ButtonBaseProps } from '../ButtonBase';
 
+export const chipColors = ['default', 'white'] as const;
+export type ChipColor = typeof chipColors[number];
+
 export const chipSizes = ['large', 'small'] as const;
 export type ChipSize = typeof chipSizes[number];
 
@@ -10,20 +13,26 @@ export type ChipStartElementVariant = typeof chipStartElementVariants[number];
 
 export default interface ChipProps extends OverridableComponentProps<ButtonBaseProps, {
     /**
-     * Element placed after the children.
+     * The content of the component.
      */
-    endElement?: React.ReactElement;
+    children: string;
 
     /**
-     * The content of the component.
+     * Set backgroundColor of the component.
+     * @default 'default'
      */
-    children: string;
+    color?: ChipColor;
 
     /**
      * Number of lines of children.
      */
     numberOfLines?: number;
 
+    /**
+     * If `true`, showing a close icon and applying a highlighted style.
+     */
+    selected?: boolean;
+
     /**
      * Determines size of component.
      * @default 'small'

package/src/Chip/index.ts

@@ -1,3 +1,3 @@
 export { default } from './Chip';
 export type { default as ChipProps } from './ChipProps';
-export { chipSizes, chipStartElementVariants } from './ChipProps';
+export { chipColors, chipSizes, chipStartElementVariants } from './ChipProps';

package/src/Chip/useChipStyle.ts

@@ -2,13 +2,14 @@ import { useMemo } from 'react';
 import type { TextStyle } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
 import { createFontStyle, useTheme } from '../styles';
-import type { ChipSize, ChipStartElementVariant } from './ChipProps';
+import type { ChipColor, ChipSize, ChipStartElementVariant } from './ChipProps';
 
 interface ChipStyle {
     container: FountainUiStyle;
-    endElement?: FountainUiStyle;
+    closeButton?: FountainUiStyle;
     label: TextStyle;
     startElement?: FountainUiStyle;
+    startElementContainer?: FountainUiStyle;
 }
 
 type VariantStyleMap = Record<ChipStartElementVariant, Partial<ChipStyle>>;
@@ -17,7 +18,8 @@ type VariantStyleMap = Record<ChipStartElementVariant, Partial<ChipStyle>>;
 export default function useChipStyle(
     size: ChipSize,
     startElementVariant: ChipStartElementVariant,
-    isEndElement: boolean,
+    color: ChipColor,
+    selected: boolean,
 ): ChipStyle {
     const theme = useTheme();
 
@@ -25,22 +27,22 @@ export default function useChipStyle(
         const fontStyleMap: Record<ChipSize, TextStyle> = {
             small: createFontStyle(theme, {
                 selector: (typography) => typography.caption1.medium,
-                color: theme.palette.text.strong,
+                color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong,
             }),
             large: createFontStyle(theme, {
                 selector: (typography) => typography.body2.medium,
-                color: theme.palette.text.strong,
+                color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong,
             }),
         };
 
-        const endElementStyleMap: Record<ChipSize, FountainUiStyle> = {
+        const closeButtonStyleMap: Record<ChipSize, FountainUiStyle> = {
             small: {
                 height: 14,
                 marginLeft: theme.spacing(2),
                 width: 8.17,
             },
             large: {
-                height: 16,
+                height: 17,
                 marginLeft: theme.spacing(2.5),
                 width: 9,
             },
@@ -48,7 +50,10 @@ export default function useChipStyle(
 
         const baseContainerStyle: FountainUiStyle = {
             alignItems: 'center',
-            backgroundColor: theme.palette.fill.weaker,
+            backgroundColor: selected ? theme.palette.fill.base
+                : color === 'white'
+                    ? theme.palette.surface.base
+                    : theme.palette.fill.weaker,
             borderRadius: theme.shape.radius.full,
             flexDirection: 'row',
             overflow: 'hidden',
@@ -65,9 +70,11 @@ export default function useChipStyle(
                 },
                 startElement: {
                     borderRadius: theme.shape.radius.full,
-                    height: isLarge ? 24 : 22,
+                    height: isLarge ? 26 : 23,
+                    width: isLarge ? 26 : 23,
+                },
+                startElementContainer: {
                     marginRight: theme.spacing(isLarge ? 1.5 : 1.25),
-                    width: isLarge ? 24 : 22,
                 },
             },
             icon: {
@@ -77,11 +84,18 @@ export default function useChipStyle(
                     paddingVertical: theme.spacing(isLarge ? 1.5 : 1.25),
                 },
                 startElement: {
+                    color: selected
+                        ? theme.palette.icon.strongInverse
+                        : theme.palette.icon.strong,
+                    height: isLarge ? 17 : 16,
+                    width: isLarge ? 17 : 16,
+                },
+                startElementContainer: {
                     alignItems: 'center',
-                    height: isLarge ? 22 : 20,
+                    height: isLarge ? 24 : 21,
                     justifyContent: 'center',
                     marginRight: theme.spacing(isLarge ? 1 : 0.75),
-                    width: isLarge ? 22 : 20,
+                    width: isLarge ? 24 : 21,
                 },
             },
             image: {
@@ -91,9 +105,11 @@ export default function useChipStyle(
                 },
                 startElement: {
                     borderRadius: theme.shape.radius.full,
-                    height: isLarge ? 34 : 30,
+                    height: isLarge ? 36 : 31,
+                    width: isLarge ? 48 : 40,
+                },
+                startElementContainer: {
                     marginRight: theme.spacing(1.5),
-                    width: isLarge ? 45 : 40,
                 },
             },
             default: {
@@ -109,11 +125,12 @@ export default function useChipStyle(
             container: {
                 ...baseContainerStyle,
                 ...variantStyleMap[startElementVariant]?.container,
-                ...(isEndElement ? { paddingRight: theme.spacing(isLarge ? 2.5 : 2.25) } : {}),
+                ...(selected ? { paddingRight: theme.spacing(isLarge ? 2.5 : 2.25) } : {}),
             },
-            endElement: endElementStyleMap[size],
+            closeButton: closeButtonStyleMap[size],
             label: fontStyleMap[size],
             startElement: variantStyleMap[startElementVariant]?.startElement,
+            startElementContainer: variantStyleMap[startElementVariant]?.startElementContainer,
         };
-    }, [theme, size, startElementVariant]);
+    }, [theme, size, startElementVariant, color, selected]);
 }