@cck-ui/core 0.38.0 → 0.40.0

package/esm/index.mjs

@@ -68,6 +68,7 @@ import { CAspectRatio } from "./components/aspect-ratio/index.mjs";
 import { CAvatar, CAvatarGroup } from "./components/avatar/index.mjs";
 import { CBackgroundImage } from "./components/background-image/index.mjs";
 import { CBadge } from "./components/badge/index.mjs";
+import { CBlockquote } from "./components/blockquote/index.mjs";
 import { CBreadcrumbs } from "./components/breadcrumbs/index.mjs";
 import { CBurger } from "./components/burger/index.mjs";
 import { CButton, CButtonGroup, CButtonGroupSection } from "./components/button/index.mjs";
@@ -87,6 +88,7 @@ import { CGroup } from "./components/group/index.mjs";
 import { CImage } from "./components/image/index.mjs";
 import { CIndicator } from "./components/indicator/index.mjs";
 import { CKbd } from "./components/kbd/index.mjs";
+import { CNumberFormatter } from "./components/number-formatter/index.mjs";
 import { CPaper } from "./components/paper/index.mjs";
 import { CSemiCircleProgress } from "./components/semi-circle-progress/index.mjs";
 import { CSimpleGrid } from "./components/simple-grid/index.mjs";
@@ -112,6 +114,7 @@ const components = [
 	CAvatarGroup,
 	CBackgroundImage,
 	CBadge,
+	CBlockquote,
 	CBreadcrumbs,
 	CBurger,
 	CButton,
@@ -144,6 +147,7 @@ const components = [
 	CIndicator,
 	CKbd,
 	CLoader,
+	CNumberFormatter,
 	CPaper,
 	CPortal,
 	CSemiCircleProgress,
@@ -167,6 +171,6 @@ const CckUI = { install(app) {
 	});
 } };
 //#endregion
-export { CActionIcon, CActionIconGroup, CActionIconGroupSection, CAffix, CAlert, CAnchor, CAspectRatio, CAvatar, CAvatarGroup, CBackgroundImage, CBadge, CBox, CBreadcrumbs, CBurger, CButton, CButtonGroup, CButtonGroupSection, transitions as CCK_TRANSITIONS, CCard, CCardSection, CCenter, CCloseButton, CCol, CColorSwatch, CContainer, CCopyButton, CDataList, CDataListItem, CDataListItemLabel, CDataListItemValue, CDefaultLoaders, CDivider, CEmptyState, CEmptyStateActions, CEmptyStateDescription, CEmptyStateIndicator, CEmptyStateTitle, CFileButton, CFlex, CFocusTrap, CGrid, CGroup, CImage, CIndicator, CKbd, CLoader, CONFIG_KEY, CPaper, CPortal, CSemiCircleProgress, CSimpleGrid, CSkeleton, CSpace, CSplitter, CSplitterPane, CStack, CText, CTransition, CTypography, CVisuallyHidden, CckConfigProvider, CckUI, CckUI as default, DEFAULT_THEME, FOCUS_CLASS_NAMES, STYLE_PROPS_DATA, THEME_KEY, UnstyledButton, alpha, camelToKebabCase, colorsTuple, createTheme, createVarsResolver, darken, deepMerge, defaultCssVariablesResolver, defaultVariantColorsResolver, em, extractStyleProps, filterFalsyChildren, filterProps, getBaseValue, getBreakpointValue, getCSSColorVariables, getComponentName, getDefaultZIndex, getFontSize, getGradient, getLineHeight, getPrimaryShade, getRadius, getShadow, getSize, getSortedBreakpoints, getSpacing, getThemeColor, getTransitionProps, hashStyleProps, isLightColor, isNumber, isNumberLike, isString, isStringNumber, isUndefined, isVirtualColor, keys, luminance, mergeThemeOverrides, normalizeNumberLikeStringProp, numberLikeStringToNumber, parseStyleProps, parseThemeColor, px, rem, resolveClassNames, resolveStyles, responsiveStyleManager, rgb, rgba, stylesToString, toRgba, useCckClassNamesPrefix, useCckColorScheme, useCckCssVariablesResolver, useCckEnv, useCckIsHeadless, useCckStyleNonce, useCckStylesTransform, useCckSxTransform, useCckTheme, useCckWithStaticClasses, useComponentProps, useConfigContext, useProviderColorScheme, useRandomClassName, useStyles, virtualColor, withClasses, withExtend, withInstall, withPropsDefaultSetter, withPropsFactory, withVarsResolver };
+export { CActionIcon, CActionIconGroup, CActionIconGroupSection, CAffix, CAlert, CAnchor, CAspectRatio, CAvatar, CAvatarGroup, CBackgroundImage, CBadge, CBlockquote, CBox, CBreadcrumbs, CBurger, CButton, CButtonGroup, CButtonGroupSection, transitions as CCK_TRANSITIONS, CCard, CCardSection, CCenter, CCloseButton, CCol, CColorSwatch, CContainer, CCopyButton, CDataList, CDataListItem, CDataListItemLabel, CDataListItemValue, CDefaultLoaders, CDivider, CEmptyState, CEmptyStateActions, CEmptyStateDescription, CEmptyStateIndicator, CEmptyStateTitle, CFileButton, CFlex, CFocusTrap, CGrid, CGroup, CImage, CIndicator, CKbd, CLoader, CNumberFormatter, CONFIG_KEY, CPaper, CPortal, CSemiCircleProgress, CSimpleGrid, CSkeleton, CSpace, CSplitter, CSplitterPane, CStack, CText, CTransition, CTypography, CVisuallyHidden, CckConfigProvider, CckUI, CckUI as default, DEFAULT_THEME, FOCUS_CLASS_NAMES, STYLE_PROPS_DATA, THEME_KEY, UnstyledButton, alpha, camelToKebabCase, colorsTuple, createTheme, createVarsResolver, darken, deepMerge, defaultCssVariablesResolver, defaultVariantColorsResolver, em, extractStyleProps, filterFalsyChildren, filterProps, getBaseValue, getBreakpointValue, getCSSColorVariables, getComponentName, getDefaultZIndex, getFontSize, getGradient, getLineHeight, getPrimaryShade, getRadius, getShadow, getSize, getSortedBreakpoints, getSpacing, getThemeColor, getTransitionProps, hashStyleProps, isLightColor, isNumber, isNumberLike, isString, isStringNumber, isUndefined, isVirtualColor, keys, luminance, mergeThemeOverrides, normalizeNumberLikeStringProp, numberLikeStringToNumber, parseStyleProps, parseThemeColor, px, rem, resolveClassNames, resolveStyles, responsiveStyleManager, rgb, rgba, stylesToString, toRgba, useCckClassNamesPrefix, useCckColorScheme, useCckCssVariablesResolver, useCckEnv, useCckIsHeadless, useCckStyleNonce, useCckStylesTransform, useCckSxTransform, useCckTheme, useCckWithStaticClasses, useComponentProps, useConfigContext, useProviderColorScheme, useRandomClassName, useStyles, virtualColor, withClasses, withExtend, withInstall, withPropsDefaultSetter, withPropsFactory, withVarsResolver };
 
 //# sourceMappingURL=index.mjs.map

package/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["import type { App, Plugin } from 'vue'\nimport {\n  CActionIcon,\n  CActionIconGroup,\n  CActionIconGroupSection,\n  CAffix,\n  CAlert,\n  CAnchor,\n  CAspectRatio,\n  CAvatar,\n  CAvatarGroup,\n  CBackgroundImage,\n  CBadge,\n  CBreadcrumbs,\n  CBurger,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCard,\n  CCardSection,\n  CCenter,\n  CCloseButton,\n  CCol,\n  CColorSwatch,\n  CContainer,\n  CCopyButton,\n  CDataList,\n  CDataListItem,\n  CDataListItemLabel,\n  CDataListItemValue,\n  CDivider,\n  CEmptyState,\n  CEmptyStateActions,\n  CEmptyStateDescription,\n  CEmptyStateIndicator,\n  CEmptyStateTitle,\n  CFileButton,\n  CFlex,\n  CFocusTrap,\n  CGrid,\n  CGroup,\n  CImage,\n  CIndicator,\n  CKbd,\n  CLoader,\n  CPaper,\n  CPortal,\n  CSemiCircleProgress,\n  CSimpleGrid,\n  CSkeleton,\n  CSpace,\n  CSplitter,\n  CSplitterPane,\n  CStack,\n  CText,\n  CTransition,\n  CTypography,\n  CVisuallyHidden,\n  UnstyledButton,\n} from './components'\nimport { CckConfigProvider, CBox } from './core'\n\nconst INSTALLED_KEY = Symbol('INSTALLED_KEY')\n\nconst components = [\n  CckConfigProvider,\n  CBox,\n  CActionIcon,\n  CActionIconGroup,\n  CActionIconGroupSection,\n  CAffix,\n  CAlert,\n  CAnchor,\n  CAspectRatio,\n  CAvatar,\n  CAvatarGroup,\n  CBackgroundImage,\n  CBadge,\n  CBreadcrumbs,\n  CBurger,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCard,\n  CCardSection,\n  CCenter,\n  CCloseButton,\n  CCol,\n  CColorSwatch,\n  CContainer,\n  CCopyButton,\n  CDataList,\n  CDataListItem,\n  CDataListItemLabel,\n  CDataListItemValue,\n  CDivider,\n  CEmptyState,\n  CEmptyStateActions,\n  CEmptyStateDescription,\n  CEmptyStateIndicator,\n  CEmptyStateTitle,\n  CFileButton,\n  CFlex,\n  CFocusTrap,\n  CGrid,\n  CGroup,\n  CImage,\n  CIndicator,\n  CKbd,\n  CLoader,\n  CPaper,\n  CPortal,\n  CSemiCircleProgress,\n  CSimpleGrid,\n  CSkeleton,\n  CSpace,\n  CSplitter,\n  CSplitterPane,\n  CStack,\n  CText,\n  CTransition,\n  CTypography,\n  CVisuallyHidden,\n  UnstyledButton,\n]\n\nconst CckUI: Plugin = {\n  install(app: App) {\n    if ((app as any)[INSTALLED_KEY]) {\n      return\n    }\n    ;(app as any)[INSTALLED_KEY] = true\n    components.forEach((c) => {\n      if (c.name) {\n        app.component(c.name, c)\n      }\n    })\n  },\n}\n\nexport default CckUI\nexport { CckUI }\n\nexport * from './components'\nexport * from './core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,MAAM,gBAAgB,OAAO,eAAe;AAE5C,MAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,QAAgB,EACpB,QAAQ,KAAU;CAChB,IAAK,IAAY,gBACf;CAED,IAAa,iBAAiB;CAC/B,WAAW,SAAS,MAAM;EACxB,IAAI,EAAE,MACJ,IAAI,UAAU,EAAE,MAAM,CAAC;CAE3B,CAAC;AACH,EACF"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["import type { App, Plugin } from 'vue'\nimport {\n  CActionIcon,\n  CActionIconGroup,\n  CActionIconGroupSection,\n  CAffix,\n  CAlert,\n  CAnchor,\n  CAspectRatio,\n  CAvatar,\n  CAvatarGroup,\n  CBackgroundImage,\n  CBadge,\n  CBlockquote,\n  CBreadcrumbs,\n  CBurger,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCard,\n  CCardSection,\n  CCenter,\n  CCloseButton,\n  CCol,\n  CColorSwatch,\n  CContainer,\n  CCopyButton,\n  CDataList,\n  CDataListItem,\n  CDataListItemLabel,\n  CDataListItemValue,\n  CDivider,\n  CEmptyState,\n  CEmptyStateActions,\n  CEmptyStateDescription,\n  CEmptyStateIndicator,\n  CEmptyStateTitle,\n  CFileButton,\n  CFlex,\n  CFocusTrap,\n  CGrid,\n  CGroup,\n  CImage,\n  CIndicator,\n  CKbd,\n  CLoader,\n  CNumberFormatter,\n  CPaper,\n  CPortal,\n  CSemiCircleProgress,\n  CSimpleGrid,\n  CSkeleton,\n  CSpace,\n  CSplitter,\n  CSplitterPane,\n  CStack,\n  CText,\n  CTransition,\n  CTypography,\n  CVisuallyHidden,\n  UnstyledButton,\n} from './components'\nimport { CckConfigProvider, CBox } from './core'\n\nconst INSTALLED_KEY = Symbol('INSTALLED_KEY')\n\nconst components = [\n  CckConfigProvider,\n  CBox,\n  CActionIcon,\n  CActionIconGroup,\n  CActionIconGroupSection,\n  CAffix,\n  CAlert,\n  CAnchor,\n  CAspectRatio,\n  CAvatar,\n  CAvatarGroup,\n  CBackgroundImage,\n  CBadge,\n  CBlockquote,\n  CBreadcrumbs,\n  CBurger,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCard,\n  CCardSection,\n  CCenter,\n  CCloseButton,\n  CCol,\n  CColorSwatch,\n  CContainer,\n  CCopyButton,\n  CDataList,\n  CDataListItem,\n  CDataListItemLabel,\n  CDataListItemValue,\n  CDivider,\n  CEmptyState,\n  CEmptyStateActions,\n  CEmptyStateDescription,\n  CEmptyStateIndicator,\n  CEmptyStateTitle,\n  CFileButton,\n  CFlex,\n  CFocusTrap,\n  CGrid,\n  CGroup,\n  CImage,\n  CIndicator,\n  CKbd,\n  CLoader,\n  CNumberFormatter,\n  CPaper,\n  CPortal,\n  CSemiCircleProgress,\n  CSimpleGrid,\n  CSkeleton,\n  CSpace,\n  CSplitter,\n  CSplitterPane,\n  CStack,\n  CText,\n  CTransition,\n  CTypography,\n  CVisuallyHidden,\n  UnstyledButton,\n]\n\nconst CckUI: Plugin = {\n  install(app: App) {\n    if ((app as any)[INSTALLED_KEY]) {\n      return\n    }\n    ;(app as any)[INSTALLED_KEY] = true\n    components.forEach((c) => {\n      if (c.name) {\n        app.component(c.name, c)\n      }\n    })\n  },\n}\n\nexport default CckUI\nexport { CckUI }\n\nexport * from './components'\nexport * from './core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,MAAM,gBAAgB,OAAO,eAAe;AAE5C,MAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,QAAgB,EACpB,QAAQ,KAAU;CAChB,IAAK,IAAY,gBACf;CAED,IAAa,iBAAiB;CAC/B,WAAW,SAAS,MAAM;EACxB,IAAI,EAAE,MACJ,IAAI,UAAU,EAAE,MAAM,CAAC;CAE3B,CAAC;AACH,EACF"}

package/lib/components/blockquote/blockquote.types.d.ts

@@ -0,0 +1,30 @@
+import { BoxProps, CColor, CRadius, ElementProps, Factory, StylesApiProps } from '../../core';
+export type BlockquoteStylesNames = 'root' | 'icon' | 'cite';
+export type BlockquoteCssVariables = {
+    root: '--bq-bg-light' | '--bq-bg-dark' | '--bq-bd' | '--bq-icon-size' | '--bq-radius' | '--bq-text-wrap';
+};
+export interface BlockquoteProps extends BoxProps, StylesApiProps<BlockquoteFactory>, ElementProps<'blockquote', 'div'> {
+    /**
+     * Controls icon-wrapper span `width` and `height`, numbers are converted to rem
+     * @default 40
+     */
+    iconSize?: number | string;
+    /**
+     * Key of `theme.colors` or any valid CSS color
+     * @default theme.primaryColor
+     */
+    color?: CColor;
+    /**
+     * Key of `theme.radius` or any valid CSS value to set `border-radius`
+     * @default theme.defaultRadius
+     */
+    radius?: CRadius;
+    /** Controls `text-wrap` CSS property */
+    textWrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty' | 'stable';
+}
+export type BlockquoteFactory = Factory<{
+    props: BlockquoteProps;
+    ref: HTMLQuoteElement;
+    stylesNames: BlockquoteStylesNames;
+    vars: BlockquoteCssVariables;
+}>;

package/lib/components/blockquote/blockquote.utils.d.ts

@@ -0,0 +1,6 @@
+export declare const varsResolver: import("../..").VarsResolver<{
+    props: import("./blockquote.types").BlockquoteProps;
+    ref: HTMLQuoteElement;
+    stylesNames: import("./blockquote.types").BlockquoteStylesNames;
+    vars: import("./blockquote.types").BlockquoteCssVariables;
+}>;

package/lib/components/blockquote/index.d.ts

@@ -0,0 +1,6 @@
+import { SFCWithInstallAndClasses } from '../../core';
+import Blockquote from './blockquote.vue';
+import classes from './blockquote.module.css';
+export declare const CBlockquote: SFCWithInstallAndClasses<typeof Blockquote, typeof classes>;
+export default CBlockquote;
+export * from './blockquote.types';

package/lib/components/index.d.ts

@@ -6,6 +6,7 @@ export * from './aspect-ratio';
 export * from './avatar';
 export * from './background-image';
 export * from './badge';
+export * from './blockquote';
 export * from './breadcrumbs';
 export * from './burger';
 export * from './button';
@@ -27,6 +28,7 @@ export * from './image';
 export * from './indicator';
 export * from './kbd';
 export * from './loader';
+export * from './number-formatter';
 export * from './paper';
 export * from './portal';
 export * from './semi-circle-progress';

package/lib/components/number-formatter/index.d.ts

@@ -0,0 +1,5 @@
+import { SFCWithInstall } from '../../core';
+import NumberFormatter from './number-formatter.vue';
+export declare const CNumberFormatter: SFCWithInstall<typeof NumberFormatter>;
+export default CNumberFormatter;
+export * from './number-formatter.types';

package/lib/components/number-formatter/number-formatter.types.d.ts

@@ -0,0 +1,36 @@
+import { ElementProps, Factory } from '../../core';
+export interface NumberFormatterProps extends /* @vue-ignore */ ElementProps<'div'> {
+    /** Value to format */
+    value?: number | string;
+    /**
+     * If set, negative values are allowed
+     * @default true
+     */
+    allowNegative?: boolean;
+    /**
+     * Limits the number of digits that are displayed after the decimal point
+     * @default Infinity
+     */
+    decimalScale?: number;
+    /** Character used as a decimal separator, `'.'` by default */
+    decimalSeparator?: string;
+    /**
+     * If set, zeros are added after `decimalSeparator` to match given `decimalScale`.
+     * @default false
+     */
+    fixedDecimalScale?: boolean;
+    /** Prefix added before the value */
+    prefix?: string;
+    /** Suffix added after the value */
+    suffix?: string;
+    /** Defines the thousand grouping style */
+    thousandsGroupStyle?: 'thousand' | 'lakh' | 'wan' | 'none';
+    /** A character used to separate thousands
+     * @default ','
+     */
+    thousandSeparator?: string | boolean;
+}
+export type NumberFormatterFactory = Factory<{
+    props: NumberFormatterProps;
+    ref: HTMLDivElement;
+}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cck-ui/core",
-  "version": "0.38.0",
+  "version": "0.40.0",
   "description": "Vue component library focused on usability, accessibility and developer experience",
   "homepage": "https://cck-ui.jackatlas.xyz",
   "license": "ISC",

package/styles/blockquote.css

@@ -0,0 +1,42 @@
+.m_195949e0 {
+  --blockquote-border: 3px solid var(--bq-bd);
+
+  position: relative;
+  margin: 0;
+  text-wrap: var(--bq-text-wrap, var(--c-text-wrap));
+  border-inline-start: var(--blockquote-border);
+  border-start-end-radius: var(--bq-radius);
+  border-end-end-radius: var(--bq-radius);
+  padding: var(--c-spacing-xl) calc(2.375rem * var(--c-scale));
+}
+
+  :where([data-c-color-scheme='light']) .m_195949e0 {
+    background-color: var(--bq-bg-light);
+}
+
+  :where([data-c-color-scheme='dark']) .m_195949e0 {
+    background-color: var(--bq-bg-dark);
+}
+
+.m_19550577 {
+  --blockquote-icon-offset: calc(var(--bq-icon-size) / -2);
+
+  position: absolute;
+  color: var(--bq-bd);
+  background-color: var(--c-color-body);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: var(--blockquote-icon-offset);
+  inset-inline-start: var(--blockquote-icon-offset);
+  width: var(--bq-icon-size);
+  height: var(--bq-icon-size);
+  border-radius: var(--bq-icon-size);
+}
+
+.m_19526255 {
+  display: block;
+  margin-top: var(--c-spacing-md);
+  opacity: 0.6;
+  font-size: 85%;
+}

package/styles/blockquote.layer.css

@@ -0,0 +1,43 @@
+@layer cck {.m_195949e0 {
+  --blockquote-border: 3px solid var(--bq-bd);
+
+  position: relative;
+  margin: 0;
+  text-wrap: var(--bq-text-wrap, var(--c-text-wrap));
+  border-inline-start: var(--blockquote-border);
+  border-start-end-radius: var(--bq-radius);
+  border-end-end-radius: var(--bq-radius);
+  padding: var(--c-spacing-xl) calc(2.375rem * var(--c-scale));
+}
+
+  :where([data-c-color-scheme='light']) .m_195949e0 {
+    background-color: var(--bq-bg-light);
+}
+
+  :where([data-c-color-scheme='dark']) .m_195949e0 {
+    background-color: var(--bq-bg-dark);
+}
+
+.m_19550577 {
+  --blockquote-icon-offset: calc(var(--bq-icon-size) / -2);
+
+  position: absolute;
+  color: var(--bq-bd);
+  background-color: var(--c-color-body);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: var(--blockquote-icon-offset);
+  inset-inline-start: var(--blockquote-icon-offset);
+  width: var(--bq-icon-size);
+  height: var(--bq-icon-size);
+  border-radius: var(--bq-icon-size);
+}
+
+.m_19526255 {
+  display: block;
+  margin-top: var(--c-spacing-md);
+  opacity: 0.6;
+  font-size: 85%;
+}
+}

package/styles.css

@@ -1605,6 +1605,49 @@ fieldset:disabled .c-active:active {
     margin-inline-start: var(--badge-section-margin);
   }
 
+.m_195949e0 {
+  --blockquote-border: 3px solid var(--bq-bd);
+
+  position: relative;
+  margin: 0;
+  text-wrap: var(--bq-text-wrap, var(--c-text-wrap));
+  border-inline-start: var(--blockquote-border);
+  border-start-end-radius: var(--bq-radius);
+  border-end-end-radius: var(--bq-radius);
+  padding: var(--c-spacing-xl) calc(2.375rem * var(--c-scale));
+}
+
+  :where([data-c-color-scheme='light']) .m_195949e0 {
+    background-color: var(--bq-bg-light);
+}
+
+  :where([data-c-color-scheme='dark']) .m_195949e0 {
+    background-color: var(--bq-bg-dark);
+}
+
+.m_19550577 {
+  --blockquote-icon-offset: calc(var(--bq-icon-size) / -2);
+
+  position: absolute;
+  color: var(--bq-bd);
+  background-color: var(--c-color-body);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: var(--blockquote-icon-offset);
+  inset-inline-start: var(--blockquote-icon-offset);
+  width: var(--bq-icon-size);
+  height: var(--bq-icon-size);
+  border-radius: var(--bq-icon-size);
+}
+
+.m_19526255 {
+  display: block;
+  margin-top: var(--c-spacing-md);
+  opacity: 0.6;
+  font-size: 85%;
+}
+
 .m_bd72d3bf {
   display: flex;
   align-items: center;

package/styles.layer.css

@@ -1605,6 +1605,49 @@ fieldset:disabled .c-active:active {
     margin-inline-start: var(--badge-section-margin);
   }
 
+.m_195949e0 {
+  --blockquote-border: 3px solid var(--bq-bd);
+
+  position: relative;
+  margin: 0;
+  text-wrap: var(--bq-text-wrap, var(--c-text-wrap));
+  border-inline-start: var(--blockquote-border);
+  border-start-end-radius: var(--bq-radius);
+  border-end-end-radius: var(--bq-radius);
+  padding: var(--c-spacing-xl) calc(2.375rem * var(--c-scale));
+}
+
+  :where([data-c-color-scheme='light']) .m_195949e0 {
+    background-color: var(--bq-bg-light);
+}
+
+  :where([data-c-color-scheme='dark']) .m_195949e0 {
+    background-color: var(--bq-bg-dark);
+}
+
+.m_19550577 {
+  --blockquote-icon-offset: calc(var(--bq-icon-size) / -2);
+
+  position: absolute;
+  color: var(--bq-bd);
+  background-color: var(--c-color-body);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: var(--blockquote-icon-offset);
+  inset-inline-start: var(--blockquote-icon-offset);
+  width: var(--bq-icon-size);
+  height: var(--bq-icon-size);
+  border-radius: var(--bq-icon-size);
+}
+
+.m_19526255 {
+  display: block;
+  margin-top: var(--c-spacing-md);
+  opacity: 0.6;
+  font-size: 85%;
+}
+
 .m_bd72d3bf {
   display: flex;
   align-items: center;