@box/blueprint-web-assets 4.104.11 → 4.105.0

package/README.md

@@ -1,13 +1,13 @@
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
-- [Blueprint Web assets `@box/blueprint-web-assets`](#blueprint-web-assets-boxblueprint-web-assets)
-- [Installation](#installation)
-- [Usage](#usage)
-  - [Tokens](#tokens)
-  - [Assets](#assets)
-- [How to update assets and tokens](#how-to-update-assets-and-tokens)
-- [Project scripts](#project-scripts)
+-   [Blueprint Web assets `@box/blueprint-web-assets`](#blueprint-web-assets-boxblueprint-web-assets)
+-   [Installation](#installation)
+-   [Usage](#usage)
+    -   [Tokens](#tokens)
+    -   [Assets](#assets)
+-   [How to update assets and tokens](#how-to-update-assets-and-tokens)
+-   [Project scripts](#project-scripts)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 

package/dist/icons/Medium/BoxRightArrow.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+const SvgBoxRightArrow = (props, ref) => (_jsx("svg", { width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", role: "img", ref: ref, ...props, children: _jsx("path", { fill: props.color || '#909090', d: "M16 2a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4v-1a1 1 0 1 1 2 0v1a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v1a1 1 0 0 1-2 0V6a4 4 0 0 1 4-4h8ZM9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 1 1-1.414-1.414L11.586 13H3a1 1 0 1 1 0-2h8.586L9.293 8.707a1 1 0 0 1 0-1.414Z" }) }));
+const ForwardRef = forwardRef(SvgBoxRightArrow);
+export default ForwardRef;

package/dist/icons/Medium/CloudDown.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+const SvgCloudDown = (props, ref) => (_jsx("svg", { width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", role: "img", ref: ref, ...props, children: _jsx("path", { fill: props.color || '#909090', d: "M12 10a1 1 0 0 1 1 1v7.586l2.293-2.293a1 1 0 1 1 1.414 1.414l-3.93 3.93-.083.075a1.1 1.1 0 0 1-1.388 0l-.083-.075-3.93-3.93a1 1 0 1 1 1.414-1.414L11 18.586V11a1 1 0 0 1 1-1Zm-1-8a7 7 0 0 1 7 7v.014c0 .005.004.009.009.01A5.5 5.5 0 0 1 23 14.5c0 2.44-1.818 4.004-3.587 4.709-.504.201-1.045-.104-1.217-.62l-.005-.015a1.019 1.019 0 0 1 .417-1.179C20.048 16.488 21 16.22 21 14.5a3.501 3.501 0 0 0-3.174-3.485A2.01 2.01 0 0 1 16 9.01V9a5 5 0 0 0-9.998-.147A2.011 2.011 0 0 1 5 10.535C3.8 11.23 3 12.523 3 14c0 1.575.98 2.645 2.325 3.206.443.185.772.593.773 1.072 0 .645-.579 1.146-1.198.965C2.231 18.463 1 16.61 1 14a5.998 5.998 0 0 1 2.998-5.196.01.01 0 0 0 .005-.008A7 7 0 0 1 11 2Z" }) }));
+const ForwardRef = forwardRef(SvgCloudDown);
+export default ForwardRef;

package/dist/icons/Medium/CollectionsPlus.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const ForwardRef: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default ForwardRef;

package/dist/icons/Medium/CollectionsPlus.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+const SvgCollectionsPlus = (props, ref) => (_jsx("svg", { width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", role: "img", ref: ref, ...props, children: _jsx("path", { fill: props.color || '#909090', d: "M3 9a1 1 0 0 1 1 1v7a3 3 0 0 0 3 3h7a1 1 0 1 1 0 2H7a5 5 0 0 1-5-5v-7a1 1 0 0 1 1-1Zm16 4a1 1 0 0 1 1 1v2h2a1 1 0 1 1 0 2h-2v2a1 1 0 1 1-2 0v-2h-2a1 1 0 1 1 0-2h2v-2a1 1 0 0 1 1-1ZM18 2a4 4 0 0 1 4 4v4a1 1 0 1 1-2 0V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h1a1 1 0 1 1 0 2h-1a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4h8Z" }) }));
+const ForwardRef = forwardRef(SvgCollectionsPlus);
+export default ForwardRef;

package/dist/icons/Medium/LightningBolt.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const ForwardRef: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default ForwardRef;

package/dist/icons/Medium/LightningBolt.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+const SvgLightningBolt = (props, ref) => (_jsx("svg", { width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", role: "img", ref: ref, ...props, children: _jsx("path", { stroke: props.color || '#909090', strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13 17.923 2l-3.77 8.5L19 11 6.077 22l3.77-8.5L5 13Z" }) }));
+const ForwardRef = forwardRef(SvgLightningBolt);
+export default ForwardRef;

package/dist/icons/Medium/index.d.ts

@@ -36,7 +36,7 @@ export { default as BoldUnderlineItalic } from './BoldUnderlineItalic';
 export { default as BoxAi } from './BoxAi';
 export { default as BoxAiAdvancedMonotone } from './BoxAiAdvancedMonotone';
 export { default as BoxDev } from './BoxDev';
-export { default as BoxLeftArrow } from './BoxLeftArrow';
+export { default as BoxRightArrow } from './BoxRightArrow';
 export { default as Brain } from './Brain';
 export { default as Briefcase } from './Briefcase';
 export { default as Broom } from './Broom';
@@ -74,12 +74,14 @@ export { default as ClockExclamation } from './ClockExclamation';
 export { default as ClockPlus } from './ClockPlus';
 export { default as Cloud } from './Cloud';
 export { default as CloudCheck } from './CloudCheck';
+export { default as CloudDown } from './CloudDown';
 export { default as CloudExclamation } from './CloudExclamation';
 export { default as CloudPlus } from './CloudPlus';
 export { default as CloudUp } from './CloudUp';
 export { default as CloudXMark } from './CloudXMark';
 export { default as Code } from './Code';
 export { default as Collections } from './Collections';
+export { default as CollectionsPlus } from './CollectionsPlus';
 export { default as Color } from './Color';
 export { default as ColorPalette } from './ColorPalette';
 export { default as Comment } from './Comment';
@@ -126,6 +128,7 @@ export { default as Items } from './Items';
 export { default as Keyboard } from './Keyboard';
 export { default as LargeListView } from './LargeListView';
 export { default as Layout } from './Layout';
+export { default as LightningBolt } from './LightningBolt';
 export { default as Link } from './Link';
 export { default as LinkPlus } from './LinkPlus';
 export { default as ListView } from './ListView';

package/dist/icons/Medium/index.js

@@ -36,7 +36,7 @@ export { default as BoldUnderlineItalic } from './BoldUnderlineItalic';
 export { default as BoxAi } from './BoxAi';
 export { default as BoxAiAdvancedMonotone } from './BoxAiAdvancedMonotone';
 export { default as BoxDev } from './BoxDev';
-export { default as BoxLeftArrow } from './BoxLeftArrow';
+export { default as BoxRightArrow } from './BoxRightArrow';
 export { default as Brain } from './Brain';
 export { default as Briefcase } from './Briefcase';
 export { default as Broom } from './Broom';
@@ -74,12 +74,14 @@ export { default as ClockExclamation } from './ClockExclamation';
 export { default as ClockPlus } from './ClockPlus';
 export { default as Cloud } from './Cloud';
 export { default as CloudCheck } from './CloudCheck';
+export { default as CloudDown } from './CloudDown';
 export { default as CloudExclamation } from './CloudExclamation';
 export { default as CloudPlus } from './CloudPlus';
 export { default as CloudUp } from './CloudUp';
 export { default as CloudXMark } from './CloudXMark';
 export { default as Code } from './Code';
 export { default as Collections } from './Collections';
+export { default as CollectionsPlus } from './CollectionsPlus';
 export { default as Color } from './Color';
 export { default as ColorPalette } from './ColorPalette';
 export { default as Comment } from './Comment';
@@ -126,6 +128,7 @@ export { default as Items } from './Items';
 export { default as Keyboard } from './Keyboard';
 export { default as LargeListView } from './LargeListView';
 export { default as Layout } from './Layout';
+export { default as LightningBolt } from './LightningBolt';
 export { default as Link } from './Link';
 export { default as LinkPlus } from './LinkPlus';
 export { default as ListView } from './ListView';

package/dist/icons/MediumFilled/LightningBolt.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const ForwardRef: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default ForwardRef;

package/dist/icons/MediumFilled/LightningBolt.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+const SvgLightningBolt = (props, ref) => (_jsx("svg", { width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", role: "img", ref: ref, ...props, children: _jsx("path", { fill: props.color || '#909090', stroke: props.color || '#909090', strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13 17.923 2l-3.77 8.5L19 11 6.077 22l3.77-8.5L5 13Z" }) }));
+const ForwardRef = forwardRef(SvgLightningBolt);
+export default ForwardRef;

package/dist/icons/MediumFilled/index.d.ts

@@ -31,11 +31,11 @@ export { default as Inbox } from './Inbox';
 export { default as InformationCircle } from './InformationCircle';
 export { default as Integrations } from './Integrations';
 export { default as Layout } from './Layout';
+export { default as LightningBolt } from './LightningBolt';
 export { default as Lock } from './Lock';
 export { default as MagicWand } from './MagicWand';
 export { default as Metadata } from './Metadata';
 export { default as Microphone } from './Microphone';
-export { default as Money } from './Money';
 export { default as Nav } from './Nav';
 export { default as Notes } from './Notes';
 export { default as Page } from './Page';

package/dist/icons/MediumFilled/index.js

@@ -31,11 +31,11 @@ export { default as Inbox } from './Inbox';
 export { default as InformationCircle } from './InformationCircle';
 export { default as Integrations } from './Integrations';
 export { default as Layout } from './Layout';
+export { default as LightningBolt } from './LightningBolt';
 export { default as Lock } from './Lock';
 export { default as MagicWand } from './MagicWand';
 export { default as Metadata } from './Metadata';
 export { default as Microphone } from './Microphone';
-export { default as Money } from './Money';
 export { default as Nav } from './Nav';
 export { default as Notes } from './Notes';
 export { default as Page } from './Page';

package/dist/tokens/BP2/dark_mode_value/px-tokens.d.ts

@@ -34,6 +34,9 @@ export const bpBorderDividerBorderBrand: string;
 export const bpBorderDropdownSecondaryBorder: string;
 export const bpBorderDropdownBorder: string;
 export const bpBorderDropdownBorderError: string;
+export const bpBorderEditableTextDisplayBorderError: string;
+export const bpBorderEditableTextDisplayBorderFocus: string;
+export const bpBorderEditableTextDisplayBorderHover: string;
 export const bpBorderFilterChipBorderMultiOn: string;
 export const bpBorderFilterChipBorderMultiOnHover: string;
 export const bpBorderGridThumbnailBorder: string;
@@ -289,6 +292,12 @@ export const bpSurfaceDropdownTertiarySurfaceHover: string;
 export const bpSurfaceDropdownTertiarySurfacePressed: string;
 export const bpSurfaceDropdownSurface: string;
 export const bpSurfaceDropdownSurfaceHover: string;
+export const bpSurfaceDualStateSurfaceActive: string;
+export const bpSurfaceDualStateSurfaceActiveHover: string;
+export const bpSurfaceDualStateSurfaceActivePressed: string;
+export const bpSurfaceDualStateSurfaceInactive: string;
+export const bpSurfaceDualStateSurfaceInactiveHover: string;
+export const bpSurfaceDualStateSurfaceInactivePressed: string;
 export const bpSurfaceFilterSurface: string;
 export const bpSurfaceFilterSurfaceFocus: string;
 export const bpSurfaceFilterSurfaceHover: string;
@@ -323,6 +332,7 @@ export const bpSurfaceIllustrationSurfaceBoxNeutral: string;
 export const bpSurfaceInlineNoticeSurfaceError: string;
 export const bpSurfaceInlineNoticeSurfaceInfo: string;
 export const bpSurfaceInlineNoticeSurfaceNote: string;
+export const bpSurfaceInlineNoticeSurfaceNoteSecondary: string;
 export const bpSurfaceInlineNoticeSurfaceSuccess: string;
 export const bpSurfaceInlineNoticeSurfaceWarning: string;
 export const bpSurfaceInlineTableSurface: string;
@@ -801,9 +811,13 @@ export const bpFontLineHeight03: string;
 export const bpFontLineHeight04: string;
 export const bpFontLineHeight05: string;
 export const bpFontLineHeight06: string;
+export const bpFontLineHeight065: string;
 export const bpFontLineHeight07: string;
+export const bpFontLineHeight08: string;
 export const bpFontSize10: string;
 export const bpFontSize11: string;
+export const bpFontSize12: string;
+export const bpFontSize105: string;
 export const bpFontSize01: string;
 export const bpFontSize02: string;
 export const bpFontSize03: string;
@@ -1040,3 +1054,19 @@ export const bpYellowOpacity04: string;
 export const bpYellowOpacity08: string;
 export const bpScreenHeight: number;
 export const bpScreenWidth: number;
+export const bpCurveExtraSmallOff: string;
+export const bpCurveExtraSmallOn: string;
+export const bpCurveLargeOff: string;
+export const bpCurveLargeOn: string;
+export const bpCurveMediumOff: string;
+export const bpCurveMediumOn: string;
+export const bpCurveSmallOff: string;
+export const bpCurveSmallOn: string;
+export const bpDurationLong: string;
+export const bpDurationMedium: string;
+export const bpDurationShort: string;
+export const bpOpacityHidden: string;
+export const bpOpacityVisible: string;
+export const bpScaleDefault: string;
+export const bpScaleLarge: string;
+export const bpScaleSmall: string;

package/dist/tokens/BP2/dark_mode_value/px-tokens.js

@@ -34,6 +34,9 @@ export const bpBorderDividerBorderBrand = 'rgba(232, 232, 232, 0.1)';
 export const bpBorderDropdownSecondaryBorder = 'rgba(0, 0, 0, 0.08)';
 export const bpBorderDropdownBorder = 'rgba(0, 0, 0, 0.08)';
 export const bpBorderDropdownBorderError = '#ed3757';
+export const bpBorderEditableTextDisplayBorderError = '#ed3757';
+export const bpBorderEditableTextDisplayBorderFocus = '#2486fc';
+export const bpBorderEditableTextDisplayBorderHover = '#222222';
 export const bpBorderFilterChipBorderMultiOn = '#99c0ee';
 export const bpBorderFilterChipBorderMultiOnHover = '#99c0ee';
 export const bpBorderGridThumbnailBorder = '#e8e8e8';
@@ -289,6 +292,12 @@ export const bpSurfaceDropdownTertiarySurfaceHover = 'rgba(0, 0, 0, 0.04)';
 export const bpSurfaceDropdownTertiarySurfacePressed = 'rgba(0, 0, 0, 0.08)';
 export const bpSurfaceDropdownSurface = 'rgba(255, 255, 255, 0.7)';
 export const bpSurfaceDropdownSurfaceHover = 'rgba(0, 0, 0, 0.04)';
+export const bpSurfaceDualStateSurfaceActive = 'rgba(0, 0, 0, 0)';
+export const bpSurfaceDualStateSurfaceActiveHover = 'rgba(0, 0, 0, 0.04)';
+export const bpSurfaceDualStateSurfaceActivePressed = 'rgba(0, 0, 0, 0.08)';
+export const bpSurfaceDualStateSurfaceInactive = 'rgba(0, 0, 0, 0)';
+export const bpSurfaceDualStateSurfaceInactiveHover = 'rgba(0, 0, 0, 0.04)';
+export const bpSurfaceDualStateSurfaceInactivePressed = 'rgba(0, 0, 0, 0.08)';
 export const bpSurfaceFilterSurface = '#0061d5';
 export const bpSurfaceFilterSurfaceFocus = '#0061d5';
 export const bpSurfaceFilterSurfaceHover = '#0061d5';
@@ -323,6 +332,7 @@ export const bpSurfaceIllustrationSurfaceBoxNeutral = '#0061d5';
 export const bpSurfaceInlineNoticeSurfaceError = '#fdebee';
 export const bpSurfaceInlineNoticeSurfaceInfo = '#e9f2fe';
 export const bpSurfaceInlineNoticeSurfaceNote = '#ffffff';
+export const bpSurfaceInlineNoticeSurfaceNoteSecondary = '#f4f4f4';
 export const bpSurfaceInlineNoticeSurfaceSuccess = '#e9f8f2';
 export const bpSurfaceInlineNoticeSurfaceWarning = '#fef7e8';
 export const bpSurfaceInlineTableSurface = '#ffffff';
@@ -801,9 +811,13 @@ export const bpFontLineHeight03 = '16px';
 export const bpFontLineHeight04 = '20px';
 export const bpFontLineHeight05 = '24px';
 export const bpFontLineHeight06 = '32px';
+export const bpFontLineHeight065 = '36px';
 export const bpFontLineHeight07 = '44px';
+export const bpFontLineHeight08 = '48px';
 export const bpFontSize10 = '21px';
 export const bpFontSize11 = '36px';
+export const bpFontSize12 = '48px';
+export const bpFontSize105 = '24px';
 export const bpFontSize01 = '9px';
 export const bpFontSize02 = '10px';
 export const bpFontSize03 = '12px';
@@ -1040,3 +1054,19 @@ export const bpYellowOpacity04 = 'rgba(255, 215, 0, 0.04)';
 export const bpYellowOpacity08 = 'rgba(255, 215, 0, 0.08)';
 export const bpScreenHeight = 900;
 export const bpScreenWidth = 1440;
+export const bpCurveExtraSmallOff = 'cubic-bezier(0, 0, 1, 1)';
+export const bpCurveExtraSmallOn = 'cubic-bezier(0, 0, 1, 1)';
+export const bpCurveLargeOff = 'cubic-bezier(0.55, 0, 0.6, 1)';
+export const bpCurveLargeOn = 'cubic-bezier(0.32, 0, 0.33, 1.3)';
+export const bpCurveMediumOff = 'cubic-bezier(0.55, 0.08, 0.68, 0.53)';
+export const bpCurveMediumOn = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)';
+export const bpCurveSmallOff = 'cubic-bezier(0.55, 0.08, 0.68, 0.53)';
+export const bpCurveSmallOn = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)';
+export const bpDurationLong = '300ms';
+export const bpDurationMedium = '150ms';
+export const bpDurationShort = '100ms';
+export const bpOpacityHidden = '0';
+export const bpOpacityVisible = '1';
+export const bpScaleDefault = 'scale(1.00)';
+export const bpScaleLarge = 'scale(1.12)';
+export const bpScaleSmall = 'scale(0.98)';

package/dist/tokens/BP2/dark_mode_value/tokens.css

@@ -337,9 +337,13 @@
     --bp-font-line-height-04: 1.25rem;
     --bp-font-line-height-05: 1.5rem;
     --bp-font-line-height-06: 2rem;
+    --bp-font-line-height-065: 2.25rem;
     --bp-font-line-height-07: 2.75rem;
+    --bp-font-line-height-08: 3rem;
     --bp-font-size-10: 1.3125rem;
     --bp-font-size-11: 2.25rem;
+    --bp-font-size-12: 3rem;
+    --bp-font-size-105: 1.5rem;
     --bp-font-size-01: 0.5625rem;
     --bp-font-size-02: 0.625rem;
     --bp-font-size-03: 0.75rem;
@@ -576,6 +580,22 @@
     --bp-yellow-opacity-08: rgba(255, 215, 0, 0.08);
     --bp-screen-height: 900;
     --bp-screen-width: 1440;
+    --bp-curve-extra-small-off: cubic-bezier(0, 0, 1, 1);
+    --bp-curve-extra-small-on: cubic-bezier(0, 0, 1, 1);
+    --bp-curve-large-off: cubic-bezier(0.55, 0, 0.6, 1);
+    --bp-curve-large-on: cubic-bezier(0.32, 0, 0.33, 1.3);
+    --bp-curve-medium-off: cubic-bezier(0.55, 0.08, 0.68, 0.53);
+    --bp-curve-medium-on: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    --bp-curve-small-off: cubic-bezier(0.55, 0.08, 0.68, 0.53);
+    --bp-curve-small-on: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    --bp-duration-long: 300ms;
+    --bp-duration-medium: 150ms;
+    --bp-duration-short: 100ms;
+    --bp-opacity-hidden: 0;
+    --bp-opacity-visible: 1;
+    --bp-scale-default: scale(1);
+    --bp-scale-large: scale(1.12);
+    --bp-scale-small: scale(0.98);
     --bp-border-accordion-border-hover: var(--bp-gray-10);
     --bp-border-avatar-border-hover: var(--bp-black-opacity-04);
     --bp-border-avatar-border-pressed: var(--bp-black-opacity-08);
@@ -606,6 +626,9 @@
     --bp-border-dropdown-secondary-border: var(--bp-black-opacity-08);
     --bp-border-dropdown-border: var(--bp-black-opacity-08);
     --bp-border-dropdown-border-error: var(--bp-watermelon-red-100);
+    --bp-border-editable-text-display-border-error: var(--bp-watermelon-red-100);
+    --bp-border-editable-text-display-border-focus: var(--bp-light-blue-100);
+    --bp-border-editable-text-display-border-hover: var(--bp-gray-100);
     --bp-border-filter-chip-border-multi-on: var(--bp-box-blue-40);
     --bp-border-filter-chip-border-multi-on-hover: var(--bp-box-blue-40);
     --bp-border-grid-thumbnail-border: var(--bp-gray-10);
@@ -831,6 +854,12 @@
     --bp-surface-dropdown-tertiary-surface-pressed: var(--bp-black-opacity-08);
     --bp-surface-dropdown-surface: var(--bp-white-opacity-70);
     --bp-surface-dropdown-surface-hover: var(--bp-black-opacity-04);
+    --bp-surface-dual-state-surface-active: var(--bp-black-opacity-00);
+    --bp-surface-dual-state-surface-active-hover: var(--bp-black-opacity-04);
+    --bp-surface-dual-state-surface-active-pressed: var(--bp-black-opacity-08);
+    --bp-surface-dual-state-surface-inactive: var(--bp-black-opacity-00);
+    --bp-surface-dual-state-surface-inactive-hover: var(--bp-black-opacity-04);
+    --bp-surface-dual-state-surface-inactive-pressed: var(--bp-black-opacity-08);
     --bp-surface-filter-surface: var(--bp-box-blue-100);
     --bp-surface-filter-surface-focus: var(--bp-box-blue-100);
     --bp-surface-filter-surface-hover: var(--bp-box-blue-100);
@@ -865,6 +894,7 @@
     --bp-surface-inline-notice-surface-error: var(--bp-watermelon-red-10);
     --bp-surface-inline-notice-surface-info: var(--bp-light-blue-10);
     --bp-surface-inline-notice-surface-note: var(--bp-gray-white);
+    --bp-surface-inline-notice-surface-note-secondary: var(--bp-gray-05);
     --bp-surface-inline-notice-surface-success: var(--bp-green-light-10);
     --bp-surface-inline-notice-surface-warning: var(--bp-yellorange-10);
     --bp-surface-inline-table-surface: var(--bp-gray-white);

package/dist/tokens/BP2/dark_mode_value/tokens.d.ts

@@ -30,6 +30,9 @@ export const bpBorderDividerBorderBrand: string;
 export const bpBorderDropdownSecondaryBorder: string;
 export const bpBorderDropdownBorder: string;
 export const bpBorderDropdownBorderError: string;
+export const bpBorderEditableTextDisplayBorderError: string;
+export const bpBorderEditableTextDisplayBorderFocus: string;
+export const bpBorderEditableTextDisplayBorderHover: string;
 export const bpBorderFilterChipBorderMultiOn: string;
 export const bpBorderFilterChipBorderMultiOnHover: string;
 export const bpBorderGridThumbnailBorder: string;
@@ -285,6 +288,12 @@ export const bpSurfaceDropdownTertiarySurfaceHover: string;
 export const bpSurfaceDropdownTertiarySurfacePressed: string;
 export const bpSurfaceDropdownSurface: string;
 export const bpSurfaceDropdownSurfaceHover: string;
+export const bpSurfaceDualStateSurfaceActive: string;
+export const bpSurfaceDualStateSurfaceActiveHover: string;
+export const bpSurfaceDualStateSurfaceActivePressed: string;
+export const bpSurfaceDualStateSurfaceInactive: string;
+export const bpSurfaceDualStateSurfaceInactiveHover: string;
+export const bpSurfaceDualStateSurfaceInactivePressed: string;
 export const bpSurfaceFilterSurface: string;
 export const bpSurfaceFilterSurfaceFocus: string;
 export const bpSurfaceFilterSurfaceHover: string;
@@ -319,6 +328,7 @@ export const bpSurfaceIllustrationSurfaceBoxNeutral: string;
 export const bpSurfaceInlineNoticeSurfaceError: string;
 export const bpSurfaceInlineNoticeSurfaceInfo: string;
 export const bpSurfaceInlineNoticeSurfaceNote: string;
+export const bpSurfaceInlineNoticeSurfaceNoteSecondary: string;
 export const bpSurfaceInlineNoticeSurfaceSuccess: string;
 export const bpSurfaceInlineNoticeSurfaceWarning: string;
 export const bpSurfaceInlineTableSurface: string;
@@ -797,9 +807,13 @@ export const bpFontLineHeight03: string;
 export const bpFontLineHeight04: string;
 export const bpFontLineHeight05: string;
 export const bpFontLineHeight06: string;
+export const bpFontLineHeight065: string;
 export const bpFontLineHeight07: string;
+export const bpFontLineHeight08: string;
 export const bpFontSize10: string;
 export const bpFontSize11: string;
+export const bpFontSize12: string;
+export const bpFontSize105: string;
 export const bpFontSize01: string;
 export const bpFontSize02: string;
 export const bpFontSize03: string;
@@ -1036,3 +1050,19 @@ export const bpYellowOpacity04: string;
 export const bpYellowOpacity08: string;
 export const bpScreenHeight: number;
 export const bpScreenWidth: number;
+export const bpCurveExtraSmallOff: string;
+export const bpCurveExtraSmallOn: string;
+export const bpCurveLargeOff: string;
+export const bpCurveLargeOn: string;
+export const bpCurveMediumOff: string;
+export const bpCurveMediumOn: string;
+export const bpCurveSmallOff: string;
+export const bpCurveSmallOn: string;
+export const bpDurationLong: string;
+export const bpDurationMedium: string;
+export const bpDurationShort: string;
+export const bpOpacityHidden: string;
+export const bpOpacityVisible: string;
+export const bpScaleDefault: string;
+export const bpScaleLarge: string;
+export const bpScaleSmall: string;

package/dist/tokens/BP2/dark_mode_value/tokens.js

@@ -30,6 +30,9 @@ export const bpBorderDividerBorderBrand = 'rgba(232, 232, 232, 0.1)';
 export const bpBorderDropdownSecondaryBorder = 'rgba(0, 0, 0, 0.08)';
 export const bpBorderDropdownBorder = 'rgba(0, 0, 0, 0.08)';
 export const bpBorderDropdownBorderError = '#ed3757';
+export const bpBorderEditableTextDisplayBorderError = '#ed3757';
+export const bpBorderEditableTextDisplayBorderFocus = '#2486fc';
+export const bpBorderEditableTextDisplayBorderHover = '#222222';
 export const bpBorderFilterChipBorderMultiOn = '#99c0ee';
 export const bpBorderFilterChipBorderMultiOnHover = '#99c0ee';
 export const bpBorderGridThumbnailBorder = '#e8e8e8';
@@ -285,6 +288,12 @@ export const bpSurfaceDropdownTertiarySurfaceHover = 'rgba(0, 0, 0, 0.04)';
 export const bpSurfaceDropdownTertiarySurfacePressed = 'rgba(0, 0, 0, 0.08)';
 export const bpSurfaceDropdownSurface = 'rgba(255, 255, 255, 0.7)';
 export const bpSurfaceDropdownSurfaceHover = 'rgba(0, 0, 0, 0.04)';
+export const bpSurfaceDualStateSurfaceActive = 'rgba(0, 0, 0, 0)';
+export const bpSurfaceDualStateSurfaceActiveHover = 'rgba(0, 0, 0, 0.04)';
+export const bpSurfaceDualStateSurfaceActivePressed = 'rgba(0, 0, 0, 0.08)';
+export const bpSurfaceDualStateSurfaceInactive = 'rgba(0, 0, 0, 0)';
+export const bpSurfaceDualStateSurfaceInactiveHover = 'rgba(0, 0, 0, 0.04)';
+export const bpSurfaceDualStateSurfaceInactivePressed = 'rgba(0, 0, 0, 0.08)';
 export const bpSurfaceFilterSurface = '#0061d5';
 export const bpSurfaceFilterSurfaceFocus = '#0061d5';
 export const bpSurfaceFilterSurfaceHover = '#0061d5';
@@ -319,6 +328,7 @@ export const bpSurfaceIllustrationSurfaceBoxNeutral = '#0061d5';
 export const bpSurfaceInlineNoticeSurfaceError = '#fdebee';
 export const bpSurfaceInlineNoticeSurfaceInfo = '#e9f2fe';
 export const bpSurfaceInlineNoticeSurfaceNote = '#ffffff';
+export const bpSurfaceInlineNoticeSurfaceNoteSecondary = '#f4f4f4';
 export const bpSurfaceInlineNoticeSurfaceSuccess = '#e9f8f2';
 export const bpSurfaceInlineNoticeSurfaceWarning = '#fef7e8';
 export const bpSurfaceInlineTableSurface = '#ffffff';
@@ -797,9 +807,13 @@ export const bpFontLineHeight03 = '1rem';
 export const bpFontLineHeight04 = '1.25rem';
 export const bpFontLineHeight05 = '1.5rem';
 export const bpFontLineHeight06 = '2rem';
+export const bpFontLineHeight065 = '2.25rem';
 export const bpFontLineHeight07 = '2.75rem';
+export const bpFontLineHeight08 = '3rem';
 export const bpFontSize10 = '1.3125rem';
 export const bpFontSize11 = '2.25rem';
+export const bpFontSize12 = '3rem';
+export const bpFontSize105 = '1.5rem';
 export const bpFontSize01 = '0.5625rem';
 export const bpFontSize02 = '0.625rem';
 export const bpFontSize03 = '0.75rem';
@@ -1036,3 +1050,19 @@ export const bpYellowOpacity04 = 'rgba(255, 215, 0, 0.04)';
 export const bpYellowOpacity08 = 'rgba(255, 215, 0, 0.08)';
 export const bpScreenHeight = 900;
 export const bpScreenWidth = 1440;
+export const bpCurveExtraSmallOff = 'cubic-bezier(0, 0, 1, 1)';
+export const bpCurveExtraSmallOn = 'cubic-bezier(0, 0, 1, 1)';
+export const bpCurveLargeOff = 'cubic-bezier(0.55, 0, 0.6, 1)';
+export const bpCurveLargeOn = 'cubic-bezier(0.32, 0, 0.33, 1.3)';
+export const bpCurveMediumOff = 'cubic-bezier(0.55, 0.08, 0.68, 0.53)';
+export const bpCurveMediumOn = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)';
+export const bpCurveSmallOff = 'cubic-bezier(0.55, 0.08, 0.68, 0.53)';
+export const bpCurveSmallOn = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)';
+export const bpDurationLong = '300ms';
+export const bpDurationMedium = '150ms';
+export const bpDurationShort = '100ms';
+export const bpOpacityHidden = '0';
+export const bpOpacityVisible = '1';
+export const bpScaleDefault = 'scale(1.00)';
+export const bpScaleLarge = 'scale(1.12)';
+export const bpScaleSmall = 'scale(0.98)';

package/dist/tokens/BP2/dark_mode_value/tokens.json

@@ -31,6 +31,9 @@
     "BpBorderDropdownSecondaryBorder": "rgba(0, 0, 0, 0.08)",
     "BpBorderDropdownBorder": "rgba(0, 0, 0, 0.08)",
     "BpBorderDropdownBorderError": "#ed3757",
+    "BpBorderEditableTextDisplayBorderError": "#ed3757",
+    "BpBorderEditableTextDisplayBorderFocus": "#2486fc",
+    "BpBorderEditableTextDisplayBorderHover": "#222222",
     "BpBorderFilterChipBorderMultiOn": "#99c0ee",
     "BpBorderFilterChipBorderMultiOnHover": "#99c0ee",
     "BpBorderGridThumbnailBorder": "#e8e8e8",
@@ -286,6 +289,12 @@
     "BpSurfaceDropdownTertiarySurfacePressed": "rgba(0, 0, 0, 0.08)",
     "BpSurfaceDropdownSurface": "rgba(255, 255, 255, 0.7)",
     "BpSurfaceDropdownSurfaceHover": "rgba(0, 0, 0, 0.04)",
+    "BpSurfaceDualStateSurfaceActive": "rgba(0, 0, 0, 0)",
+    "BpSurfaceDualStateSurfaceActiveHover": "rgba(0, 0, 0, 0.04)",
+    "BpSurfaceDualStateSurfaceActivePressed": "rgba(0, 0, 0, 0.08)",
+    "BpSurfaceDualStateSurfaceInactive": "rgba(0, 0, 0, 0)",
+    "BpSurfaceDualStateSurfaceInactiveHover": "rgba(0, 0, 0, 0.04)",
+    "BpSurfaceDualStateSurfaceInactivePressed": "rgba(0, 0, 0, 0.08)",
     "BpSurfaceFilterSurface": "#0061d5",
     "BpSurfaceFilterSurfaceFocus": "#0061d5",
     "BpSurfaceFilterSurfaceHover": "#0061d5",
@@ -320,6 +329,7 @@
     "BpSurfaceInlineNoticeSurfaceError": "#fdebee",
     "BpSurfaceInlineNoticeSurfaceInfo": "#e9f2fe",
     "BpSurfaceInlineNoticeSurfaceNote": "#ffffff",
+    "BpSurfaceInlineNoticeSurfaceNoteSecondary": "#f4f4f4",
     "BpSurfaceInlineNoticeSurfaceSuccess": "#e9f8f2",
     "BpSurfaceInlineNoticeSurfaceWarning": "#fef7e8",
     "BpSurfaceInlineTableSurface": "#ffffff",
@@ -798,9 +808,13 @@
     "BpFontLineHeight04": "1.25rem",
     "BpFontLineHeight05": "1.5rem",
     "BpFontLineHeight06": "2rem",
+    "BpFontLineHeight065": "2.25rem",
     "BpFontLineHeight07": "2.75rem",
+    "BpFontLineHeight08": "3rem",
     "BpFontSize10": "1.3125rem",
     "BpFontSize11": "2.25rem",
+    "BpFontSize12": "3rem",
+    "BpFontSize105": "1.5rem",
     "BpFontSize01": "0.5625rem",
     "BpFontSize02": "0.625rem",
     "BpFontSize03": "0.75rem",
@@ -1036,5 +1050,21 @@
     "BpYellowOpacity04": "rgba(255, 215, 0, 0.04)",
     "BpYellowOpacity08": "rgba(255, 215, 0, 0.08)",
     "BpScreenHeight": 900,
-    "BpScreenWidth": 1440
+    "BpScreenWidth": 1440,
+    "BpCurveExtraSmallOff": "cubic-bezier(0, 0, 1, 1)",
+    "BpCurveExtraSmallOn": "cubic-bezier(0, 0, 1, 1)",
+    "BpCurveLargeOff": "cubic-bezier(0.55, 0, 0.6, 1)",
+    "BpCurveLargeOn": "cubic-bezier(0.32, 0, 0.33, 1.3)",
+    "BpCurveMediumOff": "cubic-bezier(0.55, 0.08, 0.68, 0.53)",
+    "BpCurveMediumOn": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+    "BpCurveSmallOff": "cubic-bezier(0.55, 0.08, 0.68, 0.53)",
+    "BpCurveSmallOn": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+    "BpDurationLong": "300ms",
+    "BpDurationMedium": "150ms",
+    "BpDurationShort": "100ms",
+    "BpOpacityHidden": "0",
+    "BpOpacityVisible": "1",
+    "BpScaleDefault": "scale(1.00)",
+    "BpScaleLarge": "scale(1.12)",
+    "BpScaleSmall": "scale(0.98)"
 }

package/dist/tokens/BP2/light_mode_value/px-tokens.d.ts

@@ -35,6 +35,9 @@ export const bpBorderDividerBorderBrand: string;
 export const bpBorderDropdownSecondaryBorder: string;
 export const bpBorderDropdownBorder: string;
 export const bpBorderDropdownBorderError: string;
+export const bpBorderEditableTextDisplayBorderError: string;
+export const bpBorderEditableTextDisplayBorderFocus: string;
+export const bpBorderEditableTextDisplayBorderHover: string;
 export const bpBorderFilterChipBorderMultiOn: string;
 export const bpBorderFilterChipBorderMultiOnHover: string;
 export const bpBorderGridThumbnailBorder: string;
@@ -290,6 +293,12 @@ export const bpSurfaceDropdownTertiarySurfaceHover: string;
 export const bpSurfaceDropdownTertiarySurfacePressed: string;
 export const bpSurfaceDropdownSurface: string;
 export const bpSurfaceDropdownSurfaceHover: string;
+export const bpSurfaceDualStateSurfaceActive: string;
+export const bpSurfaceDualStateSurfaceActiveHover: string;
+export const bpSurfaceDualStateSurfaceActivePressed: string;
+export const bpSurfaceDualStateSurfaceInactive: string;
+export const bpSurfaceDualStateSurfaceInactiveHover: string;
+export const bpSurfaceDualStateSurfaceInactivePressed: string;
 export const bpSurfaceFilterSurface: string;
 export const bpSurfaceFilterSurfaceFocus: string;
 export const bpSurfaceFilterSurfaceHover: string;
@@ -324,6 +333,7 @@ export const bpSurfaceIllustrationSurfaceBoxNeutral: string;
 export const bpSurfaceInlineNoticeSurfaceError: string;
 export const bpSurfaceInlineNoticeSurfaceInfo: string;
 export const bpSurfaceInlineNoticeSurfaceNote: string;
+export const bpSurfaceInlineNoticeSurfaceNoteSecondary: string;
 export const bpSurfaceInlineNoticeSurfaceSuccess: string;
 export const bpSurfaceInlineNoticeSurfaceWarning: string;
 export const bpSurfaceInlineTableSurface: string;
@@ -802,9 +812,13 @@ export const bpFontLineHeight03: string;
 export const bpFontLineHeight04: string;
 export const bpFontLineHeight05: string;
 export const bpFontLineHeight06: string;
+export const bpFontLineHeight065: string;
 export const bpFontLineHeight07: string;
+export const bpFontLineHeight08: string;
 export const bpFontSize10: string;
 export const bpFontSize11: string;
+export const bpFontSize12: string;
+export const bpFontSize105: string;
 export const bpFontSize01: string;
 export const bpFontSize02: string;
 export const bpFontSize03: string;
@@ -1041,3 +1055,19 @@ export const bpYellowOpacity04: string;
 export const bpYellowOpacity08: string;
 export const bpScreenHeight: number;
 export const bpScreenWidth: number;
+export const bpCurveExtraSmallOff: string;
+export const bpCurveExtraSmallOn: string;
+export const bpCurveLargeOff: string;
+export const bpCurveLargeOn: string;
+export const bpCurveMediumOff: string;
+export const bpCurveMediumOn: string;
+export const bpCurveSmallOff: string;
+export const bpCurveSmallOn: string;
+export const bpDurationLong: string;
+export const bpDurationMedium: string;
+export const bpDurationShort: string;
+export const bpOpacityHidden: string;
+export const bpOpacityVisible: string;
+export const bpScaleDefault: string;
+export const bpScaleLarge: string;
+export const bpScaleSmall: string;