baseline-kit 2.0.1 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +126 -102
- package/dist/README.md +126 -102
- package/dist/components/Baseline/Baseline.d.ts +27 -5
- package/dist/components/Box/Box.d.ts +26 -5
- package/dist/components/Config/Config.d.ts +51 -8
- package/dist/components/Guide/Guide.d.ts +35 -12
- package/dist/components/Layout/Layout.d.ts +20 -6
- package/dist/components/Padder/Padder.d.ts +24 -7
- package/dist/components/Spacer/Spacer.d.ts +44 -11
- package/dist/components/Stack/Stack.d.ts +24 -8
- package/dist/components/types.d.ts +1 -1
- package/dist/hooks/useBaseline.d.ts +13 -18
- package/dist/hooks/useConfig.d.ts +0 -5
- package/dist/hooks/useDebug.d.ts +1 -6
- package/dist/hooks/useGuide.d.ts +2 -7
- package/dist/hooks/useVirtual.d.ts +0 -5
- package/dist/index.cjs +11 -11
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +1447 -1038
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/theme.css +140 -0
- package/dist/utils/convert.d.ts +0 -5
- package/dist/utils/grid.d.ts +22 -0
- package/dist/utils/index.d.ts +2 -0
- package/dist/utils/math.d.ts +26 -5
- package/dist/utils/merge.d.ts +54 -5
- package/dist/utils/parse.d.ts +0 -5
- package/dist/utils/snapping.d.ts +0 -5
- package/dist/utils/ssr.d.ts +33 -0
- package/dist/utils/timing.d.ts +0 -5
- package/package.json +43 -32
|
@@ -1,19 +1,52 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @file Spacer Component
|
|
3
|
-
* @description Flexible spacing element with measurement indicators
|
|
4
|
-
* @module components
|
|
5
|
-
*/
|
|
6
1
|
import * as React from 'react';
|
|
7
2
|
import { ComponentsProps, Variant } from '../types';
|
|
8
|
-
export type IndicatorNode = (value: number,
|
|
3
|
+
export type IndicatorNode = (value: number, type: 'width' | 'height') => React.ReactNode;
|
|
9
4
|
export type SpacerProps = {
|
|
10
|
-
/**
|
|
11
|
-
|
|
12
|
-
/**
|
|
5
|
+
/** Explicit width (takes precedence over block) */
|
|
6
|
+
width?: React.CSSProperties['width'];
|
|
7
|
+
/** Explicit height (takes precedence over block) */
|
|
8
|
+
height?: React.CSSProperties['height'];
|
|
9
|
+
/** Visual style in debug mode */
|
|
13
10
|
variant?: Variant;
|
|
11
|
+
/** Color to use for debug visuals (overrides theme) */
|
|
12
|
+
color?: string;
|
|
14
13
|
/** Base unit for measurements (defaults to theme value) */
|
|
15
14
|
base?: number;
|
|
16
|
-
/**
|
|
17
|
-
|
|
15
|
+
/** Custom content to render (for debugging info) */
|
|
16
|
+
children?: React.ReactNode;
|
|
17
|
+
/** Custom indicator node rendering function */
|
|
18
|
+
indicatorNode?: IndicatorNode;
|
|
19
|
+
/** Flag to enable SSR-compatible mode (simplified initial render) */
|
|
20
|
+
ssrMode?: boolean;
|
|
18
21
|
} & ComponentsProps;
|
|
22
|
+
/** Creates default spacer styles */
|
|
23
|
+
export declare const createDefaultSpacerStyles: (base: number, textColor: string, flatColor: string, lineColor: string) => Record<string, string>;
|
|
24
|
+
/** Generates measurement indicators for debugging */
|
|
25
|
+
export declare const generateMeasurements: (isShown: boolean, indicatorNode: SpacerProps["indicatorNode"], normWidth: number | string, normHeight: number | string) => React.ReactNode | null;
|
|
26
|
+
/**
|
|
27
|
+
* Creates empty space for implementing margins, gaps, and spacing.
|
|
28
|
+
*
|
|
29
|
+
* @remarks
|
|
30
|
+
* - Flexible sizing: Set width and height directly
|
|
31
|
+
* - Normalized values: All inputs convert to base unit multiples
|
|
32
|
+
* - Debug visuals: Shows spacing measurements with theming
|
|
33
|
+
* - Automatic: Empty in production, visible in debug mode
|
|
34
|
+
*
|
|
35
|
+
* @example
|
|
36
|
+
* ```tsx
|
|
37
|
+
* // Fixed size spacer
|
|
38
|
+
* <Spacer width={32} height={16} />
|
|
39
|
+
*
|
|
40
|
+
* // Percentage-based spacer with debug hints
|
|
41
|
+
* <Spacer
|
|
42
|
+
* width="50%"
|
|
43
|
+
* height={32}
|
|
44
|
+
* debugging="visible"
|
|
45
|
+
* variant="line"
|
|
46
|
+
* />
|
|
47
|
+
*
|
|
48
|
+
* // Full-width spacer
|
|
49
|
+
* <Spacer height={64} />
|
|
50
|
+
* ```
|
|
51
|
+
*/
|
|
19
52
|
export declare const Spacer: React.NamedExoticComponent<SpacerProps>;
|
|
@@ -1,14 +1,12 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @file Stack Component
|
|
3
|
-
* @description Flex container with baseline grid alignment
|
|
4
|
-
* @module components
|
|
5
|
-
*/
|
|
6
1
|
import * as React from 'react';
|
|
7
|
-
import type { Gaps
|
|
2
|
+
import type { Gaps } from '@components';
|
|
3
|
+
import { IndicatorNode } from '../Spacer';
|
|
8
4
|
import { ComponentsProps, Variant } from '../types';
|
|
5
|
+
export declare const DIRECTION_AXIS: Record<string, React.CSSProperties['flexDirection']>;
|
|
6
|
+
export type CSSPropertiesDirectionalAxis = keyof typeof DIRECTION_AXIS;
|
|
9
7
|
export type StackProps = {
|
|
10
8
|
/** Main axis orientation */
|
|
11
|
-
direction?: '
|
|
9
|
+
direction?: React.CSSProperties['flexDirection'] & CSSPropertiesDirectionalAxis;
|
|
12
10
|
/** Distribution of space on main axis */
|
|
13
11
|
justify?: React.CSSProperties['justifyContent'];
|
|
14
12
|
/** Alignment on cross axis */
|
|
@@ -21,8 +19,26 @@ export type StackProps = {
|
|
|
21
19
|
indicatorNode?: IndicatorNode;
|
|
22
20
|
/** Visual style in debug mode */
|
|
23
21
|
variant?: Variant;
|
|
22
|
+
/** Gap between items in base units */
|
|
23
|
+
gap?: Gaps;
|
|
24
|
+
/** Row gap when using different values for rows and columns */
|
|
25
|
+
rowGap?: Gaps;
|
|
26
|
+
/** Column gap when using different values for rows and columns */
|
|
27
|
+
columnGap?: Gaps;
|
|
28
|
+
/** Flag to enable SSR-compatible mode (simplified initial render) */
|
|
29
|
+
ssrMode?: boolean;
|
|
24
30
|
children?: React.ReactNode;
|
|
25
|
-
} & ComponentsProps
|
|
31
|
+
} & ComponentsProps;
|
|
32
|
+
/** Creates default stack styles with theme colors */
|
|
33
|
+
export declare const createDefaultStackStyles: (colors: Record<string, string>) => {
|
|
34
|
+
'--bkkw': string;
|
|
35
|
+
'--bkkh': string;
|
|
36
|
+
'--bkkcl': string;
|
|
37
|
+
'--bkkcf': string;
|
|
38
|
+
'--bkkci': string;
|
|
39
|
+
};
|
|
40
|
+
/** Creates gap styles for the stack */
|
|
41
|
+
export declare const createStackGapStyles: (rowGap?: number, columnGap?: number, gap?: number) => Record<string, number | undefined>;
|
|
26
42
|
/**
|
|
27
43
|
* A flexible container component aligning children to the baseline grid.
|
|
28
44
|
*
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { DebuggingMode } from '
|
|
2
|
+
import { DebuggingMode } from './Config/Config';
|
|
3
3
|
/**
|
|
4
4
|
* Defines spacing as either a single value, start/end pair, or object with explicit edges.
|
|
5
5
|
* Used for block and inline spacing across components.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as React from 'react';
|
|
2
2
|
import type { SnappingMode, Padding } from '@components';
|
|
3
3
|
export interface BaselineOptions {
|
|
4
4
|
base?: number;
|
|
@@ -34,22 +34,17 @@ export interface BaselineResult {
|
|
|
34
34
|
* @param options Configuration options for alignment behavior
|
|
35
35
|
* @returns Object with adjusted padding, alignment status, and height
|
|
36
36
|
*
|
|
37
|
-
*
|
|
38
|
-
*
|
|
39
|
-
*
|
|
40
|
-
*
|
|
41
|
-
*
|
|
42
|
-
*
|
|
43
|
-
*
|
|
44
|
-
*
|
|
45
|
-
*
|
|
46
|
-
*
|
|
47
|
-
*
|
|
48
|
-
* <div
|
|
49
|
-
* ref={ref}
|
|
50
|
-
* style={{
|
|
51
|
-
* paddingTop: padding.top,
|
|
52
|
-
* paddingBottom: padding.bottom,
|
|
37
|
+
* @example
|
|
38
|
+
* ```tsx
|
|
39
|
+
* export function MyComponent() {
|
|
40
|
+
* const ref = useRef<HTMLDivElement>(null)
|
|
41
|
+
* const { padding } = useBaseline(ref, {
|
|
42
|
+
* base: 8,
|
|
43
|
+
* snapping: 'height',
|
|
44
|
+
* spacing: {
|
|
45
|
+
* top: 16,
|
|
46
|
+
* bottom: 16
|
|
47
|
+
* }
|
|
53
48
|
* }}
|
|
54
49
|
* >
|
|
55
50
|
* Content
|
|
@@ -57,4 +52,4 @@ export interface BaselineResult {
|
|
|
57
52
|
* )
|
|
58
53
|
* }
|
|
59
54
|
*/
|
|
60
|
-
export declare function useBaseline(ref: RefObject<HTMLElement | null>, { base, snapping, spacing, warnOnMisalignment, }?: BaselineOptions): BaselineResult;
|
|
55
|
+
export declare function useBaseline(ref: React.RefObject<HTMLElement | null>, { base, snapping, spacing, warnOnMisalignment, }?: BaselineOptions): BaselineResult;
|
|
@@ -1,8 +1,3 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @file useConfig Hook
|
|
3
|
-
* @description Manages component-specific theme configuration
|
|
4
|
-
* @module hooks
|
|
5
|
-
*/
|
|
6
1
|
import { Config } from '@components';
|
|
7
2
|
/** Type helper that merges base configuration with component-specific settings. */
|
|
8
3
|
export type ComponentConfig<K extends keyof Config> = Config[K] & {
|
package/dist/hooks/useDebug.d.ts
CHANGED
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
* @file useDebug Hook
|
|
3
|
-
* @description Manages component debugging state
|
|
4
|
-
* @module hooks
|
|
5
|
-
*/
|
|
6
|
-
import { DebuggingMode } from '@components';
|
|
1
|
+
import { DebuggingMode } from '../components/Config/Config';
|
|
7
2
|
interface DebugResult {
|
|
8
3
|
/** Whether debug visuals should be shown */
|
|
9
4
|
isShown: boolean;
|
package/dist/hooks/useGuide.d.ts
CHANGED
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
* @file useGuide Hook
|
|
3
|
-
* @description Manages grid layout calculations for guide overlays
|
|
4
|
-
* @module hooks
|
|
5
|
-
*/
|
|
6
|
-
import { RefObject } from 'react';
|
|
1
|
+
import * as React from 'react';
|
|
7
2
|
import { GuideConfig } from '@components';
|
|
8
3
|
export interface GuideResult {
|
|
9
4
|
/** CSS grid template string */
|
|
@@ -63,4 +58,4 @@ export interface GuideResult {
|
|
|
63
58
|
* }
|
|
64
59
|
* ```
|
|
65
60
|
*/
|
|
66
|
-
export declare function useGuide(ref: RefObject<HTMLElement | null>, config: GuideConfig): GuideResult;
|
|
61
|
+
export declare function useGuide(ref: React.RefObject<HTMLElement | null>, config: GuideConfig): GuideResult;
|
package/dist/index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const K=require("react");function $t(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const r=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(n,o,r.get?r:{enumerable:!0,get:()=>e[o]})}}return n.default=e,Object.freeze(n)}const c=$t(K);var ye={exports:{}},be={};/**
|
|
2
2
|
* @license React
|
|
3
3
|
* react-jsx-runtime.production.js
|
|
4
4
|
*
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
|
-
*/var
|
|
9
|
+
*/var Je;function Vt(){if(Je)return be;Je=1;var e=Symbol.for("react.transitional.element"),n=Symbol.for("react.fragment");function o(r,s,a){var l=null;if(a!==void 0&&(l=""+a),s.key!==void 0&&(l=""+s.key),"key"in s){a={};for(var i in s)i!=="key"&&(a[i]=s[i])}else a=s;return s=a.ref,{$$typeof:e,type:r,key:l,ref:s!==void 0?s:null,props:a}}return be.Fragment=n,be.jsx=o,be.jsxs=o,be}var me={};/**
|
|
10
10
|
* @license React
|
|
11
11
|
* react-jsx-runtime.development.js
|
|
12
12
|
*
|
|
@@ -14,19 +14,19 @@
|
|
|
14
14
|
*
|
|
15
15
|
* This source code is licensed under the MIT license found in the
|
|
16
16
|
* LICENSE file in the root directory of this source tree.
|
|
17
|
-
*/var
|
|
18
|
-
at`)?" (<anonymous>)":-1<
|
|
19
|
-
`+
|
|
20
|
-
`),
|
|
21
|
-
`);for(
|
|
22
|
-
`+
|
|
17
|
+
*/var Ze;function Gt(){return Ze||(Ze=1,process.env.NODE_ENV!=="production"&&function(){function e(t){if(t==null)return null;if(typeof t=="function")return t.$$typeof===J?null:t.displayName||t.name||null;if(typeof t=="string")return t;switch(t){case D:return"Fragment";case P:return"Portal";case O:return"Profiler";case k:return"StrictMode";case W:return"Suspense";case v:return"SuspenseList"}if(typeof t=="object")switch(typeof t.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),t.$$typeof){case E:return(t.displayName||"Context")+".Provider";case I:return(t._context.displayName||"Context")+".Consumer";case H:var f=t.render;return t=t.displayName,t||(t=f.displayName||f.name||"",t=t!==""?"ForwardRef("+t+")":"ForwardRef"),t;case z:return f=t.displayName||null,f!==null?f:e(t.type)||"Memo";case B:f=t._payload,t=t._init;try{return e(t(f))}catch{}}return null}function n(t){return""+t}function o(t){try{n(t);var f=!1}catch{f=!0}if(f){f=console;var d=f.error,C=typeof Symbol=="function"&&Symbol.toStringTag&&t[Symbol.toStringTag]||t.constructor.name||"Object";return d.call(f,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",C),n(t)}}function r(){}function s(){if(X===0){Ie=console.log,Be=console.info,Pe=console.warn,We=console.error,ze=console.group,He=console.groupCollapsed,Le=console.groupEnd;var t={configurable:!0,enumerable:!0,value:r,writable:!0};Object.defineProperties(console,{info:t,log:t,warn:t,error:t,group:t,groupCollapsed:t,groupEnd:t})}X++}function a(){if(X--,X===0){var t={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:L({},t,{value:Ie}),info:L({},t,{value:Be}),warn:L({},t,{value:Pe}),error:L({},t,{value:We}),group:L({},t,{value:ze}),groupCollapsed:L({},t,{value:He}),groupEnd:L({},t,{value:Le})})}0>X&&console.error("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}function l(t){if(Ce===void 0)try{throw Error()}catch(d){var f=d.stack.trim().match(/\n( *(at )?)/);Ce=f&&f[1]||"",Ue=-1<d.stack.indexOf(`
|
|
18
|
+
at`)?" (<anonymous>)":-1<d.stack.indexOf("@")?"@unknown:0:0":""}return`
|
|
19
|
+
`+Ce+t+Ue}function i(t,f){if(!t||Re)return"";var d=_e.get(t);if(d!==void 0)return d;Re=!0,d=Error.prepareStackTrace,Error.prepareStackTrace=void 0;var C=null;C=_.H,_.H=null,s();try{var U={DetermineComponentFrameRoot:function(){try{if(f){var ae=function(){throw Error()};if(Object.defineProperty(ae.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(ae,[])}catch(te){var pe=te}Reflect.construct(t,[],ae)}else{try{ae.call()}catch(te){pe=te}t.call(ae.prototype)}}else{try{throw Error()}catch(te){pe=te}(ae=t())&&typeof ae.catch=="function"&&ae.catch(function(){})}}catch(te){if(te&&pe&&typeof te.stack=="string")return[te.stack,pe.stack]}return[null,null]}};U.DetermineComponentFrameRoot.displayName="DetermineComponentFrameRoot";var $=Object.getOwnPropertyDescriptor(U.DetermineComponentFrameRoot,"name");$&&$.configurable&&Object.defineProperty(U.DetermineComponentFrameRoot,"name",{value:"DetermineComponentFrameRoot"});var y=U.DetermineComponentFrameRoot(),ee=y[0],ue=y[1];if(ee&&ue){var F=ee.split(`
|
|
20
|
+
`),ce=ue.split(`
|
|
21
|
+
`);for(y=$=0;$<F.length&&!F[$].includes("DetermineComponentFrameRoot");)$++;for(;y<ce.length&&!ce[y].includes("DetermineComponentFrameRoot");)y++;if($===F.length||y===ce.length)for($=F.length-1,y=ce.length-1;1<=$&&0<=y&&F[$]!==ce[y];)y--;for(;1<=$&&0<=y;$--,y--)if(F[$]!==ce[y]){if($!==1||y!==1)do if($--,y--,0>y||F[$]!==ce[y]){var de=`
|
|
22
|
+
`+F[$].replace(" at new "," at ");return t.displayName&&de.includes("<anonymous>")&&(de=de.replace("<anonymous>",t.displayName)),typeof t=="function"&&_e.set(t,de),de}while(1<=$&&0<=y);break}}}finally{Re=!1,_.H=C,a(),Error.prepareStackTrace=d}return F=(F=t?t.displayName||t.name:"")?l(F):"",typeof t=="function"&&_e.set(t,F),F}function u(t){if(t==null)return"";if(typeof t=="function"){var f=t.prototype;return i(t,!(!f||!f.isReactComponent))}if(typeof t=="string")return l(t);switch(t){case W:return l("Suspense");case v:return l("SuspenseList")}if(typeof t=="object")switch(t.$$typeof){case H:return t=i(t.render,!1),t;case z:return u(t.type);case B:f=t._payload,t=t._init;try{return u(t(f))}catch{}}return""}function m(){var t=_.A;return t===null?null:t.getOwner()}function p(t){if(Y.call(t,"key")){var f=Object.getOwnPropertyDescriptor(t,"key").get;if(f&&f.isReactWarning)return!1}return t.key!==void 0}function b(t,f){function d(){Fe||(Fe=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",f))}d.isReactWarning=!0,Object.defineProperty(t,"key",{get:d,configurable:!0})}function M(){var t=e(this.type);return Ye[t]||(Ye[t]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),t=this.props.ref,t!==void 0?t:null}function S(t,f,d,C,U,$){return d=$.ref,t={$$typeof:R,type:t,key:f,props:$,_owner:U},(d!==void 0?d:null)!==null?Object.defineProperty(t,"ref",{enumerable:!1,get:M}):Object.defineProperty(t,"ref",{enumerable:!1,value:null}),t._store={},Object.defineProperty(t._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(t,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.freeze&&(Object.freeze(t.props),Object.freeze(t)),t}function h(t,f,d,C,U,$){if(typeof t=="string"||typeof t=="function"||t===D||t===O||t===k||t===W||t===v||t===A||typeof t=="object"&&t!==null&&(t.$$typeof===B||t.$$typeof===z||t.$$typeof===E||t.$$typeof===I||t.$$typeof===H||t.$$typeof===Z||t.getModuleId!==void 0)){var y=f.children;if(y!==void 0)if(C)if(q(y)){for(C=0;C<y.length;C++)j(y[C],t);Object.freeze&&Object.freeze(y)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else j(y,t)}else y="",(t===void 0||typeof t=="object"&&t!==null&&Object.keys(t).length===0)&&(y+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."),t===null?C="null":q(t)?C="array":t!==void 0&&t.$$typeof===R?(C="<"+(e(t.type)||"Unknown")+" />",y=" Did you accidentally export a JSX literal instead of a component?"):C=typeof t,console.error("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",C,y);if(Y.call(f,"key")){y=e(t);var ee=Object.keys(f).filter(function(F){return F!=="key"});C=0<ee.length?"{key: someKey, "+ee.join(": ..., ")+": ...}":"{key: someKey}",qe[y+C]||(ee=0<ee.length?"{"+ee.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
23
23
|
let props = %s;
|
|
24
24
|
<%s {...props} />
|
|
25
25
|
React keys must be passed directly to JSX without using spread:
|
|
26
26
|
let props = %s;
|
|
27
|
-
<%s key={someKey} {...props} />`,
|
|
27
|
+
<%s key={someKey} {...props} />`,C,y,ee,y),qe[y+C]=!0)}if(y=null,d!==void 0&&(o(d),y=""+d),p(f)&&(o(f.key),y=""+f.key),"key"in f){d={};for(var ue in f)ue!=="key"&&(d[ue]=f[ue])}else d=f;return y&&b(d,typeof t=="function"?t.displayName||t.name||"Unknown":t),S(t,y,$,U,m(),d)}function j(t,f){if(typeof t=="object"&&t&&t.$$typeof!==Nt){if(q(t))for(var d=0;d<t.length;d++){var C=t[d];T(C)&&g(C,f)}else if(T(t))t._store&&(t._store.validated=1);else if(t===null||typeof t!="object"?d=null:(d=Q&&t[Q]||t["@@iterator"],d=typeof d=="function"?d:null),typeof d=="function"&&d!==t.entries&&(d=d.call(t),d!==t))for(;!(t=d.next()).done;)T(t.value)&&g(t.value,f)}}function T(t){return typeof t=="object"&&t!==null&&t.$$typeof===R}function g(t,f){if(t._store&&!t._store.validated&&t.key==null&&(t._store.validated=1,f=V(f),!Xe[f])){Xe[f]=!0;var d="";t&&t._owner!=null&&t._owner!==m()&&(d=null,typeof t._owner.tag=="number"?d=e(t._owner.type):typeof t._owner.name=="string"&&(d=t._owner.name),d=" It was passed a child from "+d+".");var C=_.getCurrentStack;_.getCurrentStack=function(){var U=u(t.type);return C&&(U+=C()||""),U},console.error('Each child in a list should have a unique "key" prop.%s%s See https://react.dev/link/warning-keys for more information.',f,d),_.getCurrentStack=C}}function V(t){var f="",d=m();return d&&(d=e(d.type))&&(f=`
|
|
28
28
|
|
|
29
|
-
Check the render method of \``+
|
|
29
|
+
Check the render method of \``+d+"`."),f||(t=e(t))&&(f=`
|
|
30
30
|
|
|
31
|
-
Check the top-level render call using <`+t+">."),c}var k=I,C=Symbol.for("react.transitional.element"),E=Symbol.for("react.portal"),V=Symbol.for("react.fragment"),j=Symbol.for("react.strict_mode"),R=Symbol.for("react.profiler"),y=Symbol.for("react.consumer"),O=Symbol.for("react.context"),w=Symbol.for("react.forward_ref"),T=Symbol.for("react.suspense"),P=Symbol.for("react.suspense_list"),B=Symbol.for("react.memo"),L=Symbol.for("react.lazy"),F=Symbol.for("react.offscreen"),fe=Symbol.iterator,ct=Symbol.for("react.client.reference"),Q=k.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Ae=Object.prototype.hasOwnProperty,ee=Object.assign,ut=Symbol.for("react.client.reference"),xe=Array.isArray,re=0,Me,$e,Ne,Ve,Ge,Le,Be;a.__reactDisabledLog=!0;var ke,Pe,ye=!1,we=new(typeof WeakMap=="function"?WeakMap:Map),ft=Symbol.for("react.client.reference"),We,Ue={},ze={},Ie={};ie.Fragment=V,ie.jsx=function(t,c,u,S,U){return A(t,c,u,!1,S,U)},ie.jsxs=function(t,c,u,S,U){return A(t,c,u,!0,S,U)}}()),ie}var He;function gt(){return He||(He=1,process.env.NODE_ENV==="production"?be.exports=bt():be.exports=mt()),be.exports}var _=gt();function Ke(e){const n=e.trim().match(/^([+-]?[\d.]+)([a-zA-Z%]+)$/);if(!n)return null;const o=parseFloat(n[1]),a=n[2];return{value:o,unit:a}}function W(e,n){return e===void 0&&n!==void 0?`${n}px`:e==="auto"||typeof e=="string"&&/^(auto|100%|0|.*(fr|vh|vw|vmin|vmax|rem))$/.test(e)?String(e):typeof e=="number"?`${e}px`:e??""}const ht={parentSize:0,viewportWidth:typeof window<"u"?window.innerWidth:1920,viewportHeight:typeof window<"u"?window.innerHeight:1080,rootFontSize:16,parentFontSize:16},ge={px:1,in:96,cm:37.8,mm:3.78,pt:1.33,pc:16},Se=["em","rem","vh","vw","vmin","vmax","%"];function he(e,n){if(typeof e=="number")return e;if(typeof e!="string")return null;const o=Ke(e);if(!o)return null;const{value:a,unit:s}=o;if(s in ge)return a*ge[s];if(s==="auto")return null;if(Se.includes(s)){const r={...ht,...n};switch(s){case"em":return a*r.parentFontSize;case"rem":return a*r.rootFontSize;case"vh":return a/100*r.viewportHeight;case"vw":return a/100*r.viewportWidth;case"vmin":return a/100*Math.min(r.viewportWidth,r.viewportHeight);case"vmax":return a/100*Math.max(r.viewportWidth,r.viewportHeight);case"%":return a/100*r.parentSize;default:return null}}return null}function pt(e,n,o){const a=(o==null?void 0:o.round)??!0,s=e===void 0?0:typeof e=="number"?e:he(e)??0;return`${(a?Math.round(s):s)%n}px`}function Qe(e,n,o){return Math.min(Math.max(e,n),o)}function vt(e,n=0){if(n>=0)return Number((Math.round(e*10**n)/10**n).toFixed(n));{const o=10**Math.abs(n);return Math.round(e/o)*o}}function le(e,n={}){const{base:o=8,round:a=!0,clamp:s,suppressWarnings:r=!1}=n;if(e==="auto")return o;let i=null;if(typeof e=="number")i=e;else if(typeof e=="string"){const l=he(e);l===null?(r||console.error(`Failed to convert "${e}" to pixels. Falling back to base ${o}.`),i=o):i=l}i===null&&(i=o);const d=a?Math.round(i/o)*o:i,g=s!==void 0?Qe(d,s.min??-1/0,s.max??1/0):d;return!r&&g!==i&&console.warn(`Normalized ${i} to ${g} to match base ${o}px.`),g}function Ce(e,n,o){if(!e||e[0]===void 0&&e[1]===void 0)return n;const a=e[0]!==void 0?le(e[0],o):n[0],s=e[1]!==void 0?le(e[1],o):n[1];return[a,s]}function X(e){if("padding"in e&&e.padding!=null)return xt(e.padding);const n="block"in e&&e.block!=null?kt(e.block):{top:0,bottom:0},o="inline"in e&&e.inline!=null?yt(e.inline):{left:0,right:0};return{top:n.top,right:o.right,bottom:n.bottom,left:o.left}}function xt(e){if(typeof e=="number")return{top:e,right:e,bottom:e,left:e};if(Array.isArray(e)){if(e.length===2){const[n,o]=e;return{top:n,right:o,bottom:n,left:o}}if(e.length>=4){const[n,o,a,s]=e;return{top:n??0,right:o??0,bottom:a??0,left:s??0}}}if(typeof e=="object"&&!Array.isArray(e)){const n=e.top??0,o=e.bottom??0,a=e.left??0,s=e.right??0;return{top:n,right:s,bottom:o,left:a}}return{top:0,right:0,bottom:0,left:0}}function kt(e){if(typeof e=="number")return{top:e,bottom:e};if(Array.isArray(e)){const[n,o]=e;return{top:n??0,bottom:o??0}}return typeof e=="object"?{top:e.start??0,bottom:e.end??0}:{top:0,bottom:0}}function yt(e){if(typeof e=="number")return{left:e,right:e};if(Array.isArray(e)){const[n,o]=e;return{left:n??0,right:o??0}}return typeof e=="object"?{left:e.start??0,right:e.end??0}:{left:0,right:0}}function et(e,n,o,a){const s=X({padding:o});if(a==="none")return s;if(a==="height"){const r=e%n;r!==0&&(s.bottom+=n-r)}if(a==="clamp"){s.top=s.top%n;const r=e%n;r!==0&&(s.bottom+=n-r),s.bottom=s.bottom%n}return s}const D=(...e)=>e.filter(Boolean).join(" ").trim(),Y=(...e)=>Object.assign({},...e.filter(n=>n!==void 0));function wt(e,n){if(e)if(typeof e=="function")e(n);else try{Object.assign(e,{current:n})}catch(o){console.error("Error assigning ref:",o)}}function Re(...e){return n=>{e.forEach(o=>{wt(o,n)})}}const Et=(e,n)=>{let o=null;const a=()=>{o&&(clearTimeout(o),o=null)};return[(...r)=>{a(),o=setTimeout(()=>e(...r),n)},a]},_e=e=>{let n=null,o=null;return(...s)=>{o=s,n!==null&&cancelAnimationFrame(n),n=requestAnimationFrame(()=>{e(...o),n=null,o=null})}};function ce(e){const[n,o]=f.useState({width:0,height:0}),a=f.useCallback(()=>{if(e.current)try{const r=e.current.getBoundingClientRect(),i={width:r?Math.round(r.width):0,height:r?Math.round(r.height):0};o(d=>d.width===i.width&&d.height===i.height?d:i)}catch{o({width:0,height:0})}},[e]),s=f.useMemo(()=>_e(a),[a]);return f.useLayoutEffect(()=>{a()},[a]),f.useLayoutEffect(()=>{if(!e.current)return;const r=new ResizeObserver(()=>{s()});return r.observe(e.current),()=>{r.disconnect()}},[e,s]),{...n,refresh:s}}function tt({totalLines:e,lineHeight:n,containerRef:o,buffer:a=0}){const s=I.useMemo(()=>typeof a=="number"?a:parseInt(a,10)||0,[a]),r=I.useCallback(()=>{const m=o.current;if(!m)return{start:0,end:e};if(m.closest(".block"))return{start:0,end:e};const b=m.getBoundingClientRect().top+window.scrollY,v=Math.max(0,window.scrollY-b-s),A=v+window.innerHeight+s*2,$=Math.max(0,Math.floor(v/n)),h=Math.min(e,Math.ceil(A/n));return{start:$,end:h}},[e,n,o,s]),[i,d]=I.useState(r);St(["scroll","resize"],()=>{l()});const g=I.useCallback(()=>{d(m=>{const x=r();return m.start!==x.start||m.end!==x.end?x:m})},[r]),l=I.useMemo(()=>_e(g),[g]);return I.useLayoutEffect(()=>{const m=o.current;if(!m)return;const x=new IntersectionObserver(l,{threshold:0});return x.observe(m),l(),()=>{x.disconnect()}},[o,r,l]),i}function St(e,n){const o=I.useCallback(n,[n]);I.useLayoutEffect(()=>{const a=()=>o();return e.forEach(s=>window.addEventListener(s,a)),()=>e.forEach(s=>window.removeEventListener(s,a))},[e,o])}function ue(e,{base:n=8,snapping:o="none",spacing:a={},warnOnMisalignment:s=!1}={}){if(n<1)throw new Error("Base must be >= 1 for baseline alignment.");const{height:r}=ce(e),i=I.useRef(!1);return I.useMemo(()=>{const d=X({padding:a}),g=r%n===0;if(!g&&s&&process.env.NODE_ENV==="development"&&console.warn(`[useBaseline] Element height (${r}px) is not aligned with base (${n}px).`),o==="none")return{padding:d,isAligned:g,height:r};if(i.current)return{padding:d,isAligned:g,height:r};const l=et(r,n,d,o);return i.current=!0,{padding:l,isAligned:g,height:r}},[n,o,a,s,r])}function nt(e,n){const{width:o}=ce(e);return I.useMemo(()=>{const a=n.variant??"line",s=le(n.gap??0,{base:1});if(!o)return{template:"none",columnsCount:0,calculatedGap:0,isValid:!1};try{switch(a){case"line":{const r=Math.max(1,Math.floor(o/(s+1))+1);return{template:`repeat(${r}, 1px)`,columnsCount:r,calculatedGap:s,isValid:!0}}case"pattern":{if(!it(n.columns))throw new Error('Invalid "pattern" columns array');const r=n.columns.map(i=>typeof i=="number"?`${i}px`:i);return r.some(i=>i==="0"||i==="0px")?{template:"none",columnsCount:0,calculatedGap:0,isValid:!1}:{template:r.join(" "),columnsCount:r.length,calculatedGap:s,isValid:!0}}case"fixed":{const r=typeof n.columns=="number"?n.columns:0;if(r<1)throw new Error(`Invalid columns count: ${r}`);const i=n.columnWidth?W(n.columnWidth):"1fr";return{template:`repeat(${r}, ${i})`,columnsCount:r,calculatedGap:s,isValid:!0}}case"auto":{const r=n.columnWidth??"auto";if(r==="auto")return{template:"repeat(auto-fit, minmax(0, 1fr))",columnsCount:1,calculatedGap:s,isValid:!0};const i=typeof r=="number"?`${r}px`:r.toString(),d=he(i)??0,g=d>0?Math.max(1,Math.floor((o+s)/(d+s))):1;return{template:`repeat(auto-fit, minmax(${i}, 1fr))`,columnsCount:g,calculatedGap:s,isValid:!0}}default:{console.warn(`[useGuide] Unknown variant "${a}". Falling back to "line".`);const r=Math.max(1,Math.floor(o/(s+1))+1);return{template:`repeat(${r}, 1px)`,columnsCount:r,calculatedGap:s,isValid:!0}}}}catch(r){return console.warn("Error in useGuide:",r),{template:"none",columnsCount:0,calculatedGap:0,isValid:!1}}},[n,o])}function J(e){const n=je();return I.useMemo(()=>Object.assign({base:n.base},n[e]),[n,e])}function K(e,n){return I.useMemo(()=>{const o=e??n;return{isShown:o==="visible",isHidden:o==="hidden",isNone:o==="none",debugging:o}},[e,n])}const Ct={line:"var(--bk-guide-color-line-theme)",pattern:"var(--bk-guide-color-pattern-theme)",auto:"var(--bk-guide-color-auto-theme)",fixed:"var(--bk-guide-color-fixed-theme)"},Rt={line:"var(--bk-baseline-color-line-theme)",flat:"var(--bk-baseline-color-flat-theme)"},_t={line:"var(--bk-spacer-color-line-theme)",flat:"var(--bk-spacer-color-flat-theme)",text:"var(--bk-spacer-color-text-theme)"},Ot={line:"var(--bk-box-color-line-theme)",flat:"var(--bk-box-color-flat-theme)",text:"var(--bk-box-color-text-theme)"},jt={line:"var(--bk-stack-color-line-theme)",flat:"var(--bk-stack-color-flat-theme)",text:"var(--bk-stack-color-text-theme)"},Tt={line:"var(--bk-layout-color-line-theme)",flat:"var(--bk-layout-color-flat-theme)",text:"var(--bk-layout-color-text-theme)"},At="var(--bk-padder-color-theme)",ot={base:8,baseline:{variant:"line",debugging:"hidden",colors:Rt},guide:{variant:"line",debugging:"hidden",colors:Ct},spacer:{variant:"line",debugging:"hidden",colors:_t},box:{debugging:"hidden",colors:Ot},stack:{debugging:"hidden",colors:jt},layout:{debugging:"hidden",colors:Tt},padder:{debugging:"hidden",color:At}},Oe=f.createContext(null);Oe.displayName="ConfigContext";const je=()=>f.use(Oe)??ot,rt=({base:e,baseline:n,guide:o,stack:a,spacer:s,layout:r,box:i,padder:d})=>({"--bkb":`${e}px`,"--bkbcl":n.colors.line,"--bkbcf":n.colors.flat,"--bkgcl":o.colors.line,"--bkgcp":o.colors.pattern,"--bkgca":o.colors.auto,"--bkgcf":o.colors.fixed,"--bkscl":s.colors.line,"--bkscf":s.colors.flat,"--bksci":s.colors.text,"--bkxcl":i.colors.line,"--bkxcf":i.colors.flat,"--bkxci":i.colors.text,"--bkkcl":a.colors.line,"--bkkcf":a.colors.flat,"--bkkci":a.colors.text,"--bklcl":r.colors.line,"--bklcf":r.colors.flat,"--bklci":r.colors.text,"--bkpc":d.color});function pe({children:e,base:n,stack:o,baseline:a,guide:s,layout:r,spacer:i,box:d,padder:g}){const l=je(),m=f.useMemo(()=>{const x={base:n??l.base,baseline:{...l.baseline,...a},guide:{...l.guide,...s},spacer:{...l.spacer,...i},box:{...l.box,...d},stack:{...l.stack,...o},layout:{...l.layout,...r},padder:{...l.padder,...g}};return{...x,cssVariables:rt(x)}},[n,l.base,l.baseline,l.guide,l.spacer,l.box,l.stack,l.layout,l.padder,a,s,i,d,o,r,g]);return _.jsx(Oe,{value:m,children:e})}const Mt="spr_4aLVm",$t="line_lUa33",Nt="flat_zXVQF",qe={spr:Mt,line:$t,flat:Nt},st=f.memo(function({height:n,width:o,indicatorNode:a,debugging:s,variant:r,base:i,color:d,className:g,style:l,...m}){const x=f.useRef(null),b=J("spacer"),{isShown:v}=K(s,b.debugging),A=r??b.variant,$=i??b.base,[h,M]=Ce([o,n],[0,0],{base:$,suppressWarnings:!0}),N=f.useMemo(()=>!v||!a?null:[M!==0&&_.jsx("span",{children:a(M,"height")},"height"),h!==0&&_.jsx("span",{children:a(h,"width")},"width")].filter(Boolean),[v,a,M,h]),k=f.useMemo(()=>({"--bksh":"100%","--bksw":"100%","--bksb":`${b.base}px`,"--bksci":"var(--bk-spacer-color-text-theme)","--bkscl":"var(--bk-spacer-color-line-theme)","--bkscf":"var(--bk-spacer-color-flat-theme)"}),[b.base]),C=f.useCallback((V,j)=>(V==="--bksw"||V==="--bksh")&&j==="100%"?{}:j!==k[V]?{[V]:j}:{},[k]),E=f.useMemo(()=>{const V=W(M||"100%"),j=W(h||"100%"),R=`${i||b.base}px`,y={...C("--bksh",V),...C("--bksw",j),...C("--bksb",R),...C("--bksci",d??b.colors.text),...C("--bkscl",d??b.colors.line),...C("--bkscf",d??b.colors.flat)};return Y(y,l)},[C,M,h,b.base,d,b.colors.text,b.colors.line,b.colors.flat,l]);return _.jsx("div",{ref:x,"data-testid":"spacer",className:D(qe.spr,v&&qe[A],g),"data-variant":A,style:E,...m,children:N})}),Vt="pad_I0i9S",Gt="v_E0FRN",Ee={pad:Vt,v:Gt},ve=f.memo(f.forwardRef(function({children:n,className:o,debugging:a,height:s,indicatorNode:r,style:i,width:d,...g},l){const m=J("padder"),{variant:x}=J("spacer"),b=f.useMemo(()=>X(g),[g]),{isShown:v,isNone:A,debugging:$}=K(a,m.debugging),h=!A,M=f.useRef(null),{padding:{top:N,left:k,bottom:C,right:E}}=ue(M,{base:m.base,snapping:"height",spacing:b,warnOnMisalignment:!A}),V=Re(l,M),j=f.useMemo(()=>{const y={};return d!=="fit-content"&&(y["--bkpw"]=W(d||"fit-content")),s!=="fit-content"&&(y["--bkph"]=W(s||"fit-content")),m.base!==8&&(y["--bkpb"]=`${m.base}px`),m.color!=="var(--bk-padder-color-theme)"&&(y["--bkpc"]=m.color),h||((N>0||C>0)&&(y.paddingBlock=`${N}px ${C}px`),(k>0||E>0)&&(y.paddingInline=`${k}px ${E}px`)),Y(y,i)},[d,s,m.base,m.color,h,N,E,C,k,i]),R=(y,O)=>_.jsx(st,{variant:x,debugging:$,indicatorNode:r,height:O!=="100%"?O:void 0,width:y!=="100%"?y:void 0});return h?_.jsxs("div",{ref:V,"data-testid":"padder",className:D(Ee.pad,v&&Ee.v,o),style:j,children:[_.jsxs(_.Fragment,{children:[N>0&&_.jsx("div",{style:{gridColumn:"1 / -1"},children:R("100%",N)}),k>0&&_.jsx("div",{style:{gridRow:"2 / 3"},children:R(k,"100%")})]}),_.jsx("div",{style:{gridRow:"2 / 3",gridColumn:"2 / 3"},children:n}),_.jsxs(_.Fragment,{children:[E>0&&_.jsx("div",{style:{gridRow:"2 / 3"},children:R(E,"100%")}),C>0&&_.jsx("div",{style:{gridColumn:"1 / -1"},children:R("100%",C)})]})]}):_.jsx("div",{ref:V,"data-testid":"padder",className:D(Ee.pad,o),style:j,children:n})})),Lt="lay_yGGkG",Bt="v_uVoBP",De={lay:Lt,v:Bt};function Je(e){return typeof e=="number"?`repeat(${e}, 1fr)`:typeof e=="string"?e:Array.isArray(e)?e.map(n=>typeof n=="number"?`${n}px`:n).join(" "):"repeat(auto-fit, minmax(100px, 1fr))"}const Pt=f.memo(function({children:n,columns:o,rows:a,rowGap:s,columnGap:r,gap:i,height:d,width:g,indicatorNode:l,justifyItems:m,alignItems:x,justifyContent:b,alignContent:v,className:A,variant:$,style:h,debugging:M,...N}){const k=J("layout"),{isShown:C}=K(M,k.debugging),E=f.useRef(null),V=f.useMemo(()=>X(N),[N]),{padding:j}=ue(E,{base:k.base,snapping:"height",spacing:V,warnOnMisalignment:!0}),R=f.useMemo(()=>Je(o),[o]),y=f.useMemo(()=>a?Je(a):"auto",[a]),O=f.useMemo(()=>({"--bklw":"auto","--bklh":"auto","--bklcl":k.colors.line,"--bklcf":k.colors.flat,"--bklci":k.colors.text}),[k.colors.line,k.colors.flat,k.colors.text]),w=f.useCallback((B,L)=>(B==="--bklw"||B==="--bklh")&&L==="auto"?{}:L!==O[B]?{[B]:L}:{},[O]),T=f.useMemo(()=>({...i!==void 0&&{gap:W(i)},...s!==void 0&&{rowGap:W(s)},...r!==void 0&&{columnGap:W(r)}}),[i,s,r]),P=f.useMemo(()=>{const B=W(g||"auto"),L=W(d||"auto");return Y({...w("--bklw",B),...w("--bklh",L),...w("--bklcl",k.colors.line),...w("--bklcf",k.colors.flat),...w("--bklci",k.colors.text),...R!=="repeat(auto-fit, minmax(100px, 1fr))"&&{"--bklgtc":R},...y!=="auto"&&{"--bklgtr":y},...m&&{"--bklji":m},...x&&{"--bklai":x},...b&&{"--bkljc":b},...v&&{"--bklac":v},...T},h)},[R,y,m,x,b,v,g,d,k.colors.line,k.colors.flat,k.colors.text,w,h,T]);return _.jsx(pe,{spacer:{variant:$??"line"},children:_.jsx(ve,{ref:E,className:C?De.v:"",block:[j.top,j.bottom],indicatorNode:l,inline:[j.left,j.right],debugging:M,width:g,height:d,children:_.jsx("div",{"data-testid":"layout",className:D(A,De.lay),style:P,children:n})})})}),Wt="box_LHy8B",Ut="v_q3Ozc",Xe={box:Wt,v:Ut},zt=f.memo(f.forwardRef(function({children:n,snapping:o="clamp",debugging:a,className:s,colSpan:r,rowSpan:i,span:d,width:g,height:l,style:m,...x},b){const v=J("box"),{isShown:A,debugging:$}=K(a,v.debugging),h=f.useRef(null),{top:M,bottom:N,left:k,right:C}=X(x),{padding:E}=ue(h,{base:v.base,snapping:o,spacing:{top:M,bottom:N,left:k,right:C},warnOnMisalignment:$!=="none"}),V=f.useMemo(()=>{const O={};return d!==void 0?(O.gridColumn=`span ${d}`,O.gridRow=`span ${d}`):(r!==void 0&&(O.gridColumn=`span ${r}`),i!==void 0&&(O.gridRow=`span ${i}`)),O},[r,i,d]),j=f.useMemo(()=>({"--bkxw":"fit-content","--bkxh":"fit-content","--bkxb":`${v.base}px`,"--bkxcl":v.colors.line}),[v.base,v.colors.line]),R=f.useCallback((O,w)=>(O==="--bkxw"||O==="--bkxh")&&w==="fit-content"?{}:w!==j[O]?{[O]:w}:{},[j]),y=f.useMemo(()=>{const O=W(g||"fit-content"),w=W(l||"fit-content"),T={...R("--bkxw",O),...R("--bkxh",w),...R("--bkxb",`${v.base}px`),...R("--bkxcl",v.colors.line)};return Y(T,m)},[v.base,v.colors.line,g,l,R,m]);return _.jsx("div",{ref:Re(b,h),"data-testid":"box",className:D(Xe.box,A&&Xe.v,s),style:Y(y,V),children:_.jsx(pe,{base:1,spacer:{variant:"flat"},children:_.jsx(ve,{block:[E.top,E.bottom],inline:[E.left,E.right],width:"fit-content",height:l,debugging:$,children:n})})})})),It="stk_4t2AU",Yt="v_Uwir6",Ze={stk:It,v:Yt},Ft=f.memo(function({align:n="flex-start",children:o,className:a,columnGap:s,debugging:r,direction:i="row",gap:d,height:g,indicatorNode:l,justify:m="flex-start",rowGap:x,style:b,variant:v,width:A,...$}){const h=J("stack"),{isShown:M,debugging:N}=K(r,h.debugging),k=f.useRef(null),C=f.useMemo(()=>X($),[$]),{padding:E}=ue(k,{base:h.base,snapping:"height",spacing:C,warnOnMisalignment:!0}),V=f.useMemo(()=>({rowGap:x,columnGap:s,...d!==void 0&&{gap:d}}),[x,s,d]),j=f.useMemo(()=>({"--bkkw":"auto","--bkkh":"auto","--bkkcl":h.colors.line,"--bkkcf":h.colors.flat,"--bkkci":h.colors.text}),[h.colors.line,h.colors.flat,h.colors.text]),R=f.useCallback((w,T)=>w==="--bkkw"&&T==="auto"?{}:w==="--bkkh"&&T==="auto"?{}:T!==j[w]?{[w]:T}:{},[j]),y=f.useMemo(()=>{const w=W(A||"auto"),T=W(g||"auto"),P={...R("--bkkw",w),...R("--bkkh",T),...R("--bkkcl",h.colors.line),...R("--bkkcf",h.colors.flat),...R("--bkkci",h.colors.text)};return Y({flexDirection:i,justifyContent:m,alignItems:n,width:A,height:g},V,P,b)},[i,m,n,A,g,h.colors.line,h.colors.flat,h.colors.text,R,V,b]),O=N==="none"?{...y,paddingBlock:`${E.top}px ${E.bottom}px`,paddingInline:`${E.left}px ${E.right}px`}:y;return _.jsx(pe,{spacer:{variant:v??"line"},children:_.jsx(ve,{ref:k,className:M?Ze.v:"",block:[E.top,E.bottom],inline:[E.left,E.right],debugging:N,indicatorNode:l,width:A,height:g,children:_.jsx("div",{"data-testid":"stack",className:D(a,Ze.stk),style:O,...$,children:o})})})}),Ht="gde_eT-MH",qt="line_xcGxq",Dt="cols_LoPVp",Jt="col_ZgTMC",oe={gde:Ht,line:qt,cols:Dt,col:Jt},Xt=f.memo(function({className:n,debugging:o,style:a,variant:s,align:r="start",gap:i,height:d,width:g,columns:l,columnWidth:m,...x}){const b=J("guide"),v=s??b.variant,{isShown:A}=K(o,b.debugging),$=f.useRef(null),{width:h,height:M}=ce($),{top:N,right:k,bottom:C,left:E}=f.useMemo(()=>X(x),[x]),V=f.useMemo(()=>{const L=le(i);return{line:{variant:"line",gap:L-1,base:b.base},auto:m?{variant:"auto",columnWidth:m,gap:L,base:b.base}:null,pattern:Array.isArray(l)?{variant:"pattern",columns:l,gap:L,base:b.base}:null,fixed:typeof l=="number"?{variant:"fixed",columns:l,columnWidth:m,gap:L,base:b.base}:null}[v]??{variant:"line",gap:L-1,base:b.base}},[i,b.base,m,l,v]),{template:j,columnsCount:R,calculatedGap:y}=nt($,V),O=f.useMemo(()=>({"--bkgg":`${y}px`,"--bkgj":"start","--bkgcl":b.colors.line,"--bkgcp":b.colors.pattern,"--bkgw":"100vw","--bkgh":"100vh"}),[y,b.colors.line,b.colors.pattern]),w=f.useCallback((L,F)=>L==="--bkgw"&&F==="100vw"||L==="--bkgh"&&F==="100vh"?{}:F!==O[L]?{[L]:F}:{},[O]),T={"--bkgg":`${y}px`,"--bkgj":r,"--bkgcl":b.colors.line,"--bkgcp":b.colors.pattern,"--bkgpb":`${N}px ${C}px`,"--bkgpi":`${E}px ${k}px`,"--bkgt":j,"--bkgw":W(g??h,0)||"100vw","--bkgh":W(d??M,0)||"100vh"},P={...w("--bkgw",T["--bkgw"]),...w("--bkgh",T["--bkgh"]),...w("--bkgj",r),...w("--bkgcl",b.colors.line),...w("--bkgcp",b.colors.pattern),...w("--bkgg",`${y}px`)},B=Y(T,P,a);return _.jsx("div",{ref:$,"data-testid":"guide",className:D(oe.gde,n,A?oe.v:oe.h,v==="line"&&oe.line),"data-variant":v,style:B,...x,children:A&&_.jsx("div",{className:oe.cols,"data-variant":v,children:Array.from({length:R},(L,F)=>{const fe=b.colors[v]??b.colors.line;return _.jsx("div",{className:oe.col,"data-column-index":F,"data-variant":v,style:{backgroundColor:fe}},F)})})})}),Zt=/^\d*\.?\d+(?:fr|px|%|em|rem|vh|vw|vmin|vmax|pt|pc|in|cm|mm)$/,at=e=>typeof e=="number"?Number.isFinite(e)&&e>=0:typeof e!="string"?!1:e==="auto"||e==="100%"||Zt.test(e),it=e=>Array.isArray(e)&&e.length>0&&e.every(at),Kt=e=>{const n=[...Object.keys(ge),...Se];return typeof e=="number"||typeof e=="string"&&n.some(o=>e.endsWith(o))},Qt=e=>typeof e=="string"&<.includes(e),Te=e=>typeof e=="object"&&e!==null,en=e=>Te(e)&&e.variant==="line",tn=e=>Te(e)&&"columns"in e&&!("variant"in e),nn=e=>Te(e)&&"columnWidth"in e&&!("variant"in e)&&!("columns"in e),on="bas_qAJSK",rn="row_y6My5",me={bas:on,row:rn},sn=f.memo(function({className:n,debugging:o,style:a,variant:s,height:r,width:i,base:d,...g}){const l=J("baseline"),m=s??l.variant,x=d??l.base,{isShown:b}=K(o,l.debugging),v=f.useRef(null),{width:A,height:$}=ce(v),[h,M]=f.useMemo(()=>Ce([i,r],[A,$]),[i,r,A,$]),{top:N,right:k,bottom:C,left:E}=f.useMemo(()=>X(g),[g]),V=f.useMemo(()=>{const T=(M??0)-(N+C);return Math.max(1,Math.floor(T/x))},[M,N,C,x]),{start:j,end:R}=tt({totalLines:V,lineHeight:x,containerRef:v,buffer:160}),y=m==="line"?l.colors.line:l.colors.flat,O=f.useMemo(()=>{const T=[N,k,C,E].map(P=>P?`${P}px`:"0").join(" ");return Y({"--bkbw":i?`${h}px`:"100%","--bkbh":r?`${M}px`:"100%",...T!=="0 0 0 0"&&{padding:T}},a)},[N,k,C,E,i,h,r,M,a]),w=f.useCallback(T=>{const P=m==="line"?"1px":`${x}px`,B=m==="line"?l.colors.line:l.colors.flat;return Y({"--bkrt":`${T*x}px`,...P!=="1px"&&{"--bkrh":P},...y!==B&&{"--bkbcl":y}})},[x,m,y,l.colors.line,l.colors.flat]);return _.jsx("div",{ref:v,"data-testid":"baseline",className:D(me.bas,b?me.v:me.h,n),style:O,...g,children:b&&Array.from({length:R-j},(T,P)=>{const B=P+j;return _.jsx("div",{className:me.row,"data-row-index":B,style:w(B)},B)})})}),lt=["start","center","end"],an=["line","flat"];exports.ABSOLUTE_UNIT_CONVERSIONS=ge;exports.Baseline=sn;exports.Box=zt;exports.Config=pe;exports.DEFAULT_CONFIG=ot;exports.GRID_ALIGNMENTS=lt;exports.Guide=Xt;exports.Layout=Pt;exports.PADD_VARIANTS=an;exports.Padder=ve;exports.RELATIVE_UNITS=Se;exports.Spacer=st;exports.Stack=Ft;exports.calculateSnappedSpacing=et;exports.clamp=Qe;exports.convertValue=he;exports.createCSSVariables=rt;exports.debounce=Et;exports.formatValue=W;exports.isAutoCalculatedGuide=nn;exports.isGuideAlignment=Qt;exports.isGuideColumnConfig=tn;exports.isGuideLineConfig=en;exports.isGuideValue=Kt;exports.isValidGuideColumnValue=at;exports.isValidGuidePattern=it;exports.mergeClasses=D;exports.mergeRefs=Re;exports.mergeStyles=Y;exports.moduloize=pt;exports.normalizeValue=le;exports.normalizeValuePair=Ce;exports.parsePadding=X;exports.parseUnit=Ke;exports.rafThrottle=_e;exports.round=vt;exports.useBaseline=ue;exports.useConfig=J;exports.useDebug=K;exports.useDefaultConfig=je;exports.useGuide=nt;exports.useMeasure=ce;exports.useVirtual=tt;
|
|
31
|
+
Check the top-level render call using <`+t+">."),f}var N=K,R=Symbol.for("react.transitional.element"),P=Symbol.for("react.portal"),D=Symbol.for("react.fragment"),k=Symbol.for("react.strict_mode"),O=Symbol.for("react.profiler"),I=Symbol.for("react.consumer"),E=Symbol.for("react.context"),H=Symbol.for("react.forward_ref"),W=Symbol.for("react.suspense"),v=Symbol.for("react.suspense_list"),z=Symbol.for("react.memo"),B=Symbol.for("react.lazy"),A=Symbol.for("react.offscreen"),Q=Symbol.iterator,J=Symbol.for("react.client.reference"),_=N.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Y=Object.prototype.hasOwnProperty,L=Object.assign,Z=Symbol.for("react.client.reference"),q=Array.isArray,X=0,Ie,Be,Pe,We,ze,He,Le;r.__reactDisabledLog=!0;var Ce,Ue,Re=!1,_e=new(typeof WeakMap=="function"?WeakMap:Map),Nt=Symbol.for("react.client.reference"),Fe,Ye={},qe={},Xe={};me.Fragment=D,me.jsx=function(t,f,d,C,U){return h(t,f,d,!1,C,U)},me.jsxs=function(t,f,d,C,U){return h(t,f,d,!0,C,U)}}()),me}var Ke;function Dt(){return Ke||(Ke=1,process.env.NODE_ENV==="production"?ye.exports=Vt():ye.exports=Gt()),ye.exports}var w=Dt();function ot(e){const n=e.trim().match(/^([+-]?[\d.]+)([a-zA-Z%]+)$/);if(!n)return null;const o=parseFloat(n[1]),r=n[2];return{value:o,unit:r}}function G(e,n){return e===void 0&&n!==void 0?`${n}px`:e==="auto"||typeof e=="string"&&/^(auto|100%|0|.*(fr|vh|vw|vmin|vmax|rem))$/.test(e)?String(e):typeof e=="number"?`${e}px`:e??""}const It={parentSize:0,viewportWidth:typeof window<"u"?window.innerWidth:1920,viewportHeight:typeof window<"u"?window.innerHeight:1080,rootFontSize:16,parentFontSize:16},ve={px:1,in:96,cm:37.8,mm:3.78,pt:1.33,pc:16},Me=["em","rem","vh","vw","vmin","vmax","%"];function Se(e,n){if(typeof e=="number")return e;if(typeof e!="string")return null;const o=ot(e);if(!o)return null;const{value:r,unit:s}=o;if(s in ve)return r*ve[s];if(s==="auto")return null;if(Me.includes(s)){const a={...It,...n};switch(s){case"em":return r*a.parentFontSize;case"rem":return r*a.rootFontSize;case"vh":return r/100*a.viewportHeight;case"vw":return r/100*a.viewportWidth;case"vmin":return r/100*Math.min(a.viewportWidth,a.viewportHeight);case"vmax":return r/100*Math.max(a.viewportWidth,a.viewportHeight);case"%":return r/100*a.parentSize;default:return null}}return null}function Bt(e,n,o){const r=(o==null?void 0:o.round)??!0,s=e===void 0?0:typeof e=="number"?e:Se(e)??0;return`${(r?Math.round(s):s)%n}px`}function rt(e,n,o){return Math.min(Math.max(e,n),o)}function Pt(e,n=0){if(n>=0)return Number((Math.round(e*10**n)/10**n).toFixed(n));{const o=10**Math.abs(n);return Math.round(e/o)*o}}function st(e){const{height:n,top:o,bottom:r,base:s}=e,a=(n??0)-(o+r);return Math.max(1,Math.floor(a/s))}function xe(e,n={}){const{base:o=8,round:r=!0,clamp:s,suppressWarnings:a=!1}=n;if(e==="auto")return o;let l=null;if(typeof e=="number")l=e;else if(typeof e=="string"){const m=Se(e);m===null?(a||console.error(`Failed to convert "${e}" to pixels. Falling back to base ${o}.`),l=o):l=m}l===null&&(l=o);const i=r?Math.round(l/o)*o:l,u=s!==void 0?rt(i,s.min??-1/0,s.max??1/0):i;return!a&&u!==l&&console.warn(`Normalized ${l} to ${u} to match base ${o}px.`),u}function Te(e,n,o){if(!e||e[0]===void 0&&e[1]===void 0)return n;const r=e[0]!==void 0?xe(e[0],o):n[0],s=e[1]!==void 0?xe(e[1],o):n[1];return[r,s]}function le(e){if("padding"in e&&e.padding!=null)return Wt(e.padding);const n="block"in e&&e.block!=null?zt(e.block):{top:0,bottom:0},o="inline"in e&&e.inline!=null?Ht(e.inline):{left:0,right:0};return{top:n.top,right:o.right,bottom:n.bottom,left:o.left}}function Wt(e){if(typeof e=="number")return{top:e,right:e,bottom:e,left:e};if(Array.isArray(e)){if(e.length===2){const[n,o]=e;return{top:n,right:o,bottom:n,left:o}}if(e.length>=4){const[n,o,r,s]=e;return{top:n??0,right:o??0,bottom:r??0,left:s??0}}}if(typeof e=="object"&&!Array.isArray(e)){const n=e.top??0,o=e.bottom??0,r=e.left??0,s=e.right??0;return{top:n,right:s,bottom:o,left:r}}return{top:0,right:0,bottom:0,left:0}}function zt(e){if(typeof e=="number")return{top:e,bottom:e};if(Array.isArray(e)){const[n,o]=e;return{top:n??0,bottom:o??0}}return typeof e=="object"?{top:e.start??0,bottom:e.end??0}:{top:0,bottom:0}}function Ht(e){if(typeof e=="number")return{left:e,right:e};if(Array.isArray(e)){const[n,o]=e;return{left:n??0,right:o??0}}return typeof e=="object"?{left:e.start??0,right:e.end??0}:{left:0,right:0}}function at(e,n,o,r){const s=le({padding:o});if(r==="none")return s;if(r==="height"){const a=e%n;a!==0&&(s.bottom+=n-a)}if(r==="clamp"){s.top=s.top%n;const a=e%n;a!==0&&(s.bottom+=n-a),s.bottom=s.bottom%n}return s}const lt=(e,n,o)=>{const r={};return e!==void 0?(r.gridColumn=`span ${e}`,r.gridRow=`span ${e}`):(n!==void 0&&(r.gridColumn=`span ${n}`),o!==void 0&&(r.gridRow=`span ${o}`)),r},ne=(...e)=>e.filter(Boolean).join(" ").trim(),oe=(...e)=>Object.assign({},...e.filter(n=>n!==void 0));function Lt(e,n){if(e)if(typeof e=="function")e(n);else try{Object.assign(e,{current:n})}catch(o){console.error("Error assigning ref:",o)}}function Ae(...e){return n=>{e.forEach(o=>{Lt(o,n)})}}function x(e,n,o){var i,u,m;const r=typeof e=="string"?e:e.key,s=typeof e=="string"?n:e.value,a=typeof e=="string"?o:e.defaultStyles,l=typeof e=="object"?e.skipDimensions:void 0;if(l){if((i=l.fitContent)!=null&&i.includes(r)&&s==="fit-content")return{};if((u=l.auto)!=null&&u.includes(r)&&s==="auto")return{};if((m=l.fullSize)!=null&&m.includes(r)&&(s==="100%"||s==="100vh"||s==="100vw"))return{}}return s!==a[r]?{[r]:s}:{}}const Ut=(e,n)=>{let o=null;const r=()=>{o&&(clearTimeout(o),o=null)};return[(...a)=>{r(),o=setTimeout(()=>e(...a),n)},r]},Ne=e=>{let n=null,o=null;return(...s)=>{o=s,n!==null&&cancelAnimationFrame(n),n=requestAnimationFrame(()=>{e(...o),n=null,o=null})}},$e=typeof window>"u",it={width:1024,height:768};function Ft(e,n){if($e)return n;try{return e()}catch{return n}}function re(e,n,o){return!e||$e?n:o}function ge(e){const[n,o]=c.useState({width:0,height:0}),r=c.useCallback(()=>{if(e.current)try{const a=e.current.getBoundingClientRect(),l={width:a?Math.round(a.width):0,height:a?Math.round(a.height):0};o(i=>i.width===l.width&&i.height===l.height?i:l)}catch{o({width:0,height:0})}},[e]),s=c.useMemo(()=>Ne(r),[r]);return c.useLayoutEffect(()=>{r()},[r]),c.useLayoutEffect(()=>{if(!e.current)return;const a=new ResizeObserver(()=>{s()});return a.observe(e.current),()=>{a.disconnect()}},[e,s]),{...n,refresh:s}}function ct({totalLines:e,lineHeight:n,containerRef:o,buffer:r=0}){const s=K.useMemo(()=>typeof r=="number"?r:parseInt(r,10)||0,[r]),a=K.useCallback(()=>{const p=o.current;if(!p)return{start:0,end:e};if(p.closest(".block"))return{start:0,end:e};const M=p.getBoundingClientRect().top+window.scrollY,S=Math.max(0,window.scrollY-M-s),h=S+window.innerHeight+s*2,j=Math.max(0,Math.floor(S/n)),T=Math.min(e,Math.ceil(h/n));return{start:j,end:T}},[e,n,o,s]),[l,i]=K.useState(a);Yt(["scroll","resize"],()=>{m()});const u=K.useCallback(()=>{i(p=>{const b=a();return p.start!==b.start||p.end!==b.end?b:p})},[a]),m=K.useMemo(()=>Ne(u),[u]);return K.useLayoutEffect(()=>{const p=o.current;if(!p)return;const b=new IntersectionObserver(m,{threshold:0});return b.observe(p),m(),()=>{b.disconnect()}},[o,a,m]),l}function Yt(e,n){const o=K.useCallback(n,[n]);K.useLayoutEffect(()=>{const r=()=>o();return e.forEach(s=>window.addEventListener(s,r)),()=>e.forEach(s=>window.removeEventListener(s,r))},[e,o])}function he(e,{base:n=8,snapping:o="none",spacing:r={},warnOnMisalignment:s=!1}={}){if(n<1)throw new Error("Base must be >= 1 for baseline alignment.");const{height:a}=ge(e),l=c.useRef(!1),i=c.useRef(!1);return c.useMemo(()=>{const u=le({padding:r}),m=a%n===0;if(!m&&s&&process.env.NODE_ENV==="development"&&(i.current||(console.warn(`[useBaseline] Element height (${a}px) is not aligned with base (${n}px).`),i.current=!0)),o==="none")return{padding:u,isAligned:m,height:a};if(l.current)return{padding:u,isAligned:m,height:a};const p=at(a,n,u,o);return l.current=!0,{padding:p,isAligned:m,height:a}},[n,o,r,s,a])}function ut(e,n){const{width:o}=ge(e),r=c.useRef(!1);return c.useMemo(()=>{const s=n.variant??"line",a=n.base??8,l=xe(n.gap??0,{base:a});if(!o)return{template:"none",columnsCount:0,calculatedGap:0,isValid:!1};try{switch(s){case"line":{const i=Math.max(1,Math.floor(o/(l+1))+1);return{template:`repeat(${i}, 1px)`,columnsCount:i,calculatedGap:l,isValid:!0}}case"pattern":{if(!Ot(n.columns))throw new Error('Invalid "pattern" columns array');const i=n.columns.map(u=>typeof u=="number"?`${u}px`:u);return i.some(u=>u==="0"||u==="0px")?{template:"none",columnsCount:0,calculatedGap:0,isValid:!1}:{template:i.join(" "),columnsCount:i.length,calculatedGap:l,isValid:!0}}case"fixed":{const i=typeof n.columns=="number"?n.columns:0;if(i<1)throw new Error(`Invalid columns count: ${i}`);const u=n.columnWidth?G(n.columnWidth):"1fr";return{template:`repeat(${i}, ${u})`,columnsCount:i,calculatedGap:l,isValid:!0}}case"auto":{const i=n.columnWidth??"auto";if(i==="auto")return{template:"repeat(auto-fit, minmax(0, 1fr))",columnsCount:1,calculatedGap:l,isValid:!0};const u=typeof i=="number"?`${i}px`:i.toString(),m=Se(u)??0,p=m>0?Math.max(1,Math.floor((o+l)/(m+l))):1;return{template:`repeat(auto-fit, minmax(${u}, 1fr))`,columnsCount:p,calculatedGap:l,isValid:!0}}default:{r.current||(console.warn(`[useGuide] Unknown variant "${s}". Falling back to "line".`),r.current=!0);const i=Math.max(1,Math.floor(o/(l+1))+1);return{template:`repeat(${i}, 1px)`,columnsCount:i,calculatedGap:l,isValid:!0}}}}catch(i){return console.warn("Error in useGuide:",i),{template:"none",columnsCount:0,calculatedGap:0,isValid:!1}}},[n,o])}function se(e){const n=Ge();return K.useMemo(()=>Object.assign({base:n.base},n[e]),[n,e])}function ie(e,n){return K.useMemo(()=>{const o=e??n;return{isShown:o==="visible",isHidden:o==="hidden",isNone:o==="none",debugging:o}},[e,n])}const qt={line:"var(--bk-guide-color-line-theme)",pattern:"var(--bk-guide-color-pattern-theme)",auto:"var(--bk-guide-color-auto-theme)",fixed:"var(--bk-guide-color-fixed-theme)"},Xt={line:"var(--bk-baseline-color-line-theme)",flat:"var(--bk-baseline-color-flat-theme)"},Jt={line:"var(--bk-spacer-color-line-theme)",flat:"var(--bk-spacer-color-flat-theme)",text:"var(--bk-spacer-color-text-theme)"},Zt={line:"var(--bk-box-color-line-theme)",flat:"var(--bk-box-color-flat-theme)",text:"var(--bk-box-color-text-theme)"},Kt={line:"var(--bk-stack-color-line-theme)",flat:"var(--bk-stack-color-flat-theme)",text:"var(--bk-stack-color-text-theme)"},Qt={line:"var(--bk-layout-color-line-theme)",flat:"var(--bk-layout-color-flat-theme)",text:"var(--bk-layout-color-text-theme)"},en="var(--bk-padder-color-theme)",ft={base:8,baseline:{variant:"line",debugging:"hidden",colors:Xt},guide:{variant:"line",debugging:"hidden",colors:qt},spacer:{variant:"line",debugging:"hidden",colors:Jt},box:{debugging:"hidden",colors:Zt},stack:{debugging:"hidden",colors:Kt},layout:{debugging:"hidden",colors:Qt},padder:{debugging:"hidden",color:en}},Ve=c.createContext(ft);Ve.displayName="ConfigContext";const Ge=()=>c.use(Ve),tn=e=>{const{base:n,baseline:o,guide:r,stack:s,spacer:a,layout:l,box:i,padder:u}=e;return{"--bkb":`${n}px`,"--bkbcl":o.colors.line,"--bkbcf":o.colors.flat,"--bkgcl":r.colors.line,"--bkgcp":r.colors.pattern,"--bkgca":r.colors.auto,"--bkgcf":r.colors.fixed,"--bkscl":a.colors.line,"--bkscf":a.colors.flat,"--bksci":a.colors.text,"--bkxcl":i.colors.line,"--bkxcf":i.colors.flat,"--bkxci":i.colors.text,"--bkkcl":s.colors.line,"--bkkcf":s.colors.flat,"--bkkci":s.colors.text,"--bklcl":l.colors.line,"--bklcf":l.colors.flat,"--bklci":l.colors.text,"--bkpc":u.color}},dt=e=>{const{parentConfig:n,base:o,baseline:r,guide:s,spacer:a,box:l,stack:i,layout:u,padder:m}=e;return{base:o??n.base,baseline:{...n.baseline,...r},guide:{...n.guide,...s},spacer:{...n.spacer,...a},box:{...n.box,...l},stack:{...n.stack,...i},layout:{...n.layout,...u},padder:{...n.padder,...m}}};function we({children:e,base:n,stack:o,baseline:r,guide:s,layout:a,spacer:l,box:i,padder:u}){const m=Ge(),p=c.useMemo(()=>dt({parentConfig:m,base:n,baseline:r,guide:s,spacer:l,box:i,stack:o,layout:a,padder:u}),[m,n,r,s,l,i,o,a,u]);return w.jsx(Ve,{value:p,children:e})}const nn="spr_zbcF6",on="line_qHW69",rn="flat_gqixr",Qe={spr:nn,line:on,flat:rn},bt=(e,n,o,r)=>({"--bksw":"100%","--bksh":"100%","--bksb":`${e}px`,"--bksci":n,"--bkscl":r,"--bkscf":o}),mt=(e,n,o,r)=>{if(!e||!n)return null;const s=typeof o=="number"?o:0,a=typeof r=="number"?r:0;return w.jsxs(w.Fragment,{children:[a!==0&&w.jsx("span",{children:n(a,"height")},"height"),s!==0&&w.jsx("span",{children:n(s,"width")},"width")]})},gt=c.memo(function({height:n,width:o,indicatorNode:r,debugging:s,variant:a,base:l,color:i,className:u,style:m,children:p,ssrMode:b=!1,...M}){const S=c.useRef(null),h=se("spacer"),{isShown:j}=ie(s,h.debugging),T=a??h.variant,g=l??h.base,[V,N]=c.useState(!1);c.useEffect(()=>{N(!0)},[]);const[R,P]=c.useMemo(()=>Te([o,n],[0,0],{base:g,suppressWarnings:!0}),[o,n,g]),D=re(V&&!b,!1,j&&r!==void 0),k=c.useMemo(()=>D?mt(j,r,R,P):null,[D,j,r,R,P]),O=c.useMemo(()=>bt(g,h.colors.text,h.colors.flat,h.colors.line),[g,h.colors]),I=c.useMemo(()=>{const E=G(P||"100%"),H=G(R||"100%"),W=`${g}px`,v=["--bksw","--bksh"],z={...x({key:"--bksh",value:E,defaultStyles:O,skipDimensions:{fullSize:v}}),...x({key:"--bksw",value:H,defaultStyles:O,skipDimensions:{fullSize:v}}),"--bksb":W,...x({key:"--bksci",value:i??h.colors.text,defaultStyles:O}),...x({key:"--bkscl",value:i??h.colors.line,defaultStyles:O}),...x({key:"--bkscf",value:i??h.colors.flat,defaultStyles:O})};return oe(z,m)},[R,P,i,g,h.colors,O,m]);return w.jsxs("div",{ref:S,"data-testid":"spacer",className:ne(Qe.spr,j&&Qe[T],u),"data-variant":T,style:I,...M,children:[k,p]})}),sn="pad_w2-sL",an="v_lhGBy",je={pad:sn,v:an},ht=(e,n,o,r)=>{const s={};return e!=="fit-content"&&(s["--bkpw"]=G(e||"fit-content")),n!=="fit-content"&&(s["--bkph"]=G(n||"fit-content")),o!==8&&(s["--bkpb"]=`${o}px`),r!=="var(--bk-padder-color-theme)"&&(s["--bkpc"]=r),s},pt=(e,n)=>{const{top:o,right:r,bottom:s,left:a}=n,l={};return e||((o>0||s>0)&&(l.paddingBlock=`${o}px ${s}px`),(a>0||r>0)&&(l.paddingInline=`${a}px ${r}px`)),l},yt=(e,n,o)=>{const r=e||"line",s=n||"none",a=(l,i)=>w.jsx(gt,{variant:r,debugging:i===0||l===0?"none":s,indicatorNode:o,height:i!=="100%"?i:void 0,width:l!=="100%"?l:void 0});return a.displayName="PadderSpacer",a},Ee=c.memo(c.forwardRef(function({children:n,className:o,debugging:r,height:s,indicatorNode:a,style:l,width:i,ssrMode:u=!1,...m},p){const b=se("padder"),{variant:M}=se("spacer"),S=c.useMemo(()=>le(m),[m]),{isShown:h,isNone:j,debugging:T}=ie(r,b.debugging),g=!j,[V,N]=c.useState(!1);c.useEffect(()=>{N(!0)},[]);const R=c.useRef(null),P=he(R,{base:b.base,snapping:"height",spacing:S,warnOnMisalignment:!j}),D={padding:{top:S.top||0,right:S.right||0,bottom:S.bottom||0,left:S.left||0}},{padding:k}=re(V&&!u,D,P),O=Ae(p,R),I=c.useMemo(()=>{const H=ht(i,s,b.base,b.color),W=pt(g,{top:k.top,right:k.right,bottom:k.bottom,left:k.left});return oe({...H,...W},l)},[i,s,b.base,b.color,g,k.top,k.right,k.bottom,k.left,l]),E=c.useMemo(()=>yt(M,T,a),[M,T,a]);return g?w.jsxs("div",{ref:O,"data-testid":"padder",className:ne(je.pad,h&&je.v,o),style:I,children:[w.jsxs(w.Fragment,{children:[k.top>=0&&w.jsx("div",{style:{gridColumn:"1 / -1"},children:E("100%",k.top)}),k.left>=0&&w.jsx("div",{style:{gridRow:"2 / 3"},children:E(k.left,"100%")})]}),w.jsx("div",{style:{gridRow:"2 / 3",gridColumn:"2 / 3"},children:n}),w.jsxs(w.Fragment,{children:[k.right>=0&&w.jsx("div",{style:{gridRow:"2 / 3"},children:E(k.right,"100%")}),k.bottom>=0&&w.jsx("div",{style:{gridColumn:"1 / -1"},children:E("100%",k.bottom)})]})]}):w.jsx("div",{ref:O,"data-testid":"padder",className:ne(je.pad,o),style:I,children:n})})),ln="lay_5cMu5",cn="v_dprVE",et={lay:ln,v:cn},kt=e=>({"--bklw":"auto","--bklh":"auto","--bklcl":e.line,"--bklcf":e.flat,"--bklci":e.text}),Oe=e=>typeof e=="number"?`repeat(${e}, 1fr)`:typeof e=="string"?e:Array.isArray(e)?e.map(n=>typeof n=="number"?`${n}px`:n).join(" "):"repeat(auto-fit, minmax(100px, 1fr))",vt=(e,n,o)=>{const r={};return e!==void 0&&(r.gap=G(e)),n!==void 0&&(r.rowGap=G(n)),o!==void 0&&(r.columnGap=G(o)),r},un=c.memo(function({alignContent:n,alignItems:o,children:r,className:s,columns:a="repeat(auto-fit, minmax(100px, 1fr))",columnGap:l,debugging:i,gap:u,height:m,indicatorNode:p,justifyContent:b,justifyItems:M,rowGap:S,rows:h,style:j,variant:T,width:g,ssrMode:V=!1,...N}){const R=se("layout"),{isShown:P,debugging:D}=ie(i,R.debugging),[k,O]=c.useState(!1);c.useEffect(()=>{O(!0)},[]);const I=c.useRef(null),E=c.useMemo(()=>le(N),[N]),H=he(I,{base:R.base,snapping:"height",spacing:E,warnOnMisalignment:!0}),W={padding:{top:E.top||0,right:E.right||0,bottom:E.bottom||0,left:E.left||0}},{padding:v}=re(k&&!V,W,H),z=c.useMemo(()=>Oe(a),[a]),B=c.useMemo(()=>h?Oe(h):"auto",[h]),A=c.useMemo(()=>kt(R.colors),[R.colors]),Q=c.useMemo(()=>vt(u,S,l),[u,S,l]),J=c.useMemo(()=>{const _=G(g||"auto"),Y=G(m||"auto"),L=["--bklw","--bklh"];return oe({...x({key:"--bklw",value:_,defaultStyles:A,skipDimensions:{auto:L}}),...x({key:"--bklh",value:Y,defaultStyles:A,skipDimensions:{auto:L}}),...x({key:"--bklcl",value:R.colors.line,defaultStyles:A}),...x({key:"--bklcf",value:R.colors.flat,defaultStyles:A}),...x({key:"--bklci",value:R.colors.text,defaultStyles:A}),...z!=="repeat(auto-fit, minmax(100px, 1fr))"&&{"--bklgtc":z},...B!=="auto"&&{"--bklgtr":B},...M&&{"--bklji":M},...o&&{"--bklai":o},...b&&{"--bkljc":b},...n&&{"--bklac":n},...Q},j)},[z,B,M,o,b,n,g,m,R.colors,A,j,Q]);return w.jsx(we,{spacer:{variant:T??"line"},children:w.jsx(Ee,{ref:I,className:P?et.v:"",block:[v.top,v.bottom],...p?{indicatorNode:p}:{},inline:[v.left,v.right],debugging:D,width:g,height:m,ssrMode:V,children:w.jsx("div",{"data-testid":"layout",className:ne(s,et.lay),style:J,...N&&Object.keys(N).length>0?Object.fromEntries(Object.entries(N).filter(([_])=>_!=="ssrMode")):{},children:r})})})}),fn="box_rDCRX",dn="v_0MMHD",tt={box:fn,v:dn},xt=(e,n)=>({"--bkxw":"fit-content","--bkxh":"fit-content","--bkxb":`${e}px`,"--bkxcl":n}),St=({width:e,height:n,base:o,lineColor:r,defaultStyles:s})=>{const a=G(e||"fit-content"),l=G(n||"fit-content"),i=["--bkxw","--bkxh"];return{...x({key:"--bkxw",value:a,defaultStyles:s,skipDimensions:{fitContent:i}}),...x({key:"--bkxh",value:l,defaultStyles:s,skipDimensions:{fitContent:i}}),...x({key:"--bkxb",value:`${o}px`,defaultStyles:s}),...x({key:"--bkxcl",value:r,defaultStyles:s})}},bn=c.memo(c.forwardRef(function({children:n,snapping:o="clamp",debugging:r,className:s,colSpan:a,rowSpan:l,span:i,width:u,height:m,style:p,ssrMode:b=!1,...M},S){const h=se("box"),{isShown:j,debugging:T}=ie(r,h.debugging),[g,V]=c.useState(!1);c.useEffect(()=>{V(!0)},[]);const N=c.useRef(null),{top:R,bottom:P,left:D,right:k}=le(M),O=he(N,{base:h.base,snapping:o,spacing:{top:R,bottom:P,left:D,right:k},warnOnMisalignment:T!=="none"}),I={padding:{top:R||0,right:k||0,bottom:P||0,left:D||0}},{padding:E}=re(g&&!b,I,O),H=c.useMemo(()=>lt(i,a,l),[a,l,i]),W=c.useMemo(()=>xt(h.base,h.colors.line),[h.base,h.colors.line]),v=c.useMemo(()=>{const z=St({width:u,height:m,base:h.base,lineColor:h.colors.line,defaultStyles:W});return oe(z,p)},[h.base,h.colors.line,u,m,W,p]);return w.jsx("div",{ref:Ae(S,N),"data-testid":"box",className:ne(tt.box,j&&tt.v,s),style:oe(v,H),children:w.jsx(we,{base:1,spacer:{variant:"flat"},children:w.jsx(Ee,{block:[E.top,E.bottom],inline:[E.left,E.right],width:"fit-content",height:m,debugging:T,ssrMode:b,children:n})})})})),mn="stk_l-58l",gn="v_-k3qw",nt={stk:mn,v:gn},wt={x:"row",y:"column","-x":"row-reverse","-y":"column-reverse"},Et=e=>({"--bkkw":"auto","--bkkh":"auto","--bkkcl":e.line,"--bkkcf":e.flat,"--bkkci":e.text}),Ct=(e,n,o)=>({rowGap:o!==void 0?o:e,columnGap:o!==void 0?o:n}),hn=c.memo(function({align:n="flex-start",children:o,className:r,columnGap:s,debugging:a,direction:l="row",gap:i,height:u,indicatorNode:m,justify:p="flex-start",rowGap:b,style:M,variant:S,width:h,ssrMode:j=!1,...T}){const g=se("stack"),{isShown:V,debugging:N}=ie(a,g.debugging),[R,P]=c.useState(!1);c.useEffect(()=>{P(!0)},[]);const D=c.useRef(null),{top:k,right:O,bottom:I,left:E}=le({...T}),H=he(D,{base:g.base,snapping:"height",spacing:{top:k,right:O,bottom:I,left:E},warnOnMisalignment:N!=="none"}),W={padding:{top:k||0,right:O||0,bottom:I||0,left:E||0}},{padding:v}=re(R&&!j,W,H),z=c.useMemo(()=>{const J=b!==void 0?Number(b):void 0,_=s!==void 0?Number(s):void 0,Y=i!==void 0?Number(i):void 0;return Ct(J,_,Y)},[b,s,i]),B=c.useMemo(()=>Et(g.colors),[g.colors]),A=c.useMemo(()=>{const J=G(h||"auto"),_=G(u||"auto"),Y=wt[l]||l,L=["--bkkw","--bkkh"],Z={...x({key:"--bkkw",value:J,defaultStyles:B,skipDimensions:{auto:L}}),...x({key:"--bkkh",value:_,defaultStyles:B,skipDimensions:{auto:L}}),...x({key:"--bkkcl",value:g.colors.line,defaultStyles:B}),...x({key:"--bkkcf",value:g.colors.flat,defaultStyles:B}),...x({key:"--bkkci",value:g.colors.text,defaultStyles:B})};return oe({flexDirection:Y,justifyContent:p,alignItems:n,width:h,height:u},z,Z,M)},[l,p,n,h,u,g.colors.line,g.colors.flat,g.colors.text,B,z,M]),Q=N==="none"?{...A,paddingBlock:`${v.top}px ${v.bottom}px`,paddingInline:`${v.left}px ${v.right}px`}:A;return w.jsx(we,{spacer:{variant:S??"line"},children:w.jsx(Ee,{ref:D,className:V?nt.v:"",block:[v.top,v.bottom],inline:[v.left,v.right],debugging:N,indicatorNode:m,width:h,height:u,ssrMode:j,children:w.jsx("div",{"data-testid":"stack",className:ne(r,nt.stk),style:Q,...T,children:o})})})}),pn="gde_-Naxo",yn="line_-VS-e",kn="cols_8lD6D",vn="col_rlbsL",fe={gde:pn,line:yn,cols:kn,col:vn},Rt=e=>{const{variant:n,base:o,gap:r,columns:s,columnWidth:a}=e;return{line:{variant:"line",gap:r-1,base:o},auto:a?{variant:"auto",columnWidth:a,gap:r,base:o}:null,pattern:Array.isArray(s)?{variant:"pattern",columns:s,gap:r,base:o}:null,fixed:typeof s=="number"?{variant:"fixed",columns:s,columnWidth:a,gap:r,base:o}:null}[n]??{variant:"line",gap:r-1,base:o}},_t=(e,n)=>({"--bkgw":"auto","--bkgh":"auto","--bkgmw":"none","--bkgcw":"60px","--bkggw":"24px","--bkgc":"12","--bkgb":`${e}px`,"--bkgcl":n}),xn=c.memo(function({className:n,debugging:o,style:r,variant:s,align:a="start",gap:l,height:i,width:u,columns:m,columnWidth:p,gutterWidth:b,maxWidth:M,color:S,children:h,ssrMode:j=!1,...T}){const g=se("guide"),V=s??g.variant,N=typeof l=="number"?l:g.base,[R,P]=c.useState(!1);c.useEffect(()=>{P(!0)},[]);const D=c.useRef(null),k=ge(D),O=re(R&&!j,{width:1024,height:768,refresh:()=>{}},k),{width:I,height:E}=O,{isShown:H}=ie(o,g.debugging),W=c.useMemo(()=>Rt({variant:V,base:g.base,gap:N,columns:m,columnWidth:p}),[V,g.base,N,m,p]),{template:v,columnsCount:z,calculatedGap:B}=ut(D,W),A=c.useMemo(()=>_t(g.base,g.colors.line),[g.base,g.colors.line]),Q=c.useMemo(()=>{const J=G(u||I||"auto"),_=G(i||E||"auto"),Y=G(M||"none"),L=G(p||"60px"),Z=G(b||"24px"),q=["--bkgw","--bkgh"],X={...x({key:"--bkgw",value:J,defaultStyles:A,skipDimensions:{auto:q}}),...x({key:"--bkgh",value:_,defaultStyles:A,skipDimensions:{auto:q}}),...x({key:"--bkgmw",value:Y,defaultStyles:A}),...x({key:"--bkgcw",value:L,defaultStyles:A}),...x({key:"--bkggw",value:Z,defaultStyles:A}),...x({key:"--bkgc",value:`${z}`,defaultStyles:A}),...x({key:"--bkgb",value:`${g.base}px`,defaultStyles:A}),...x({key:"--bkgcl",value:S??g.colors.line,defaultStyles:A}),"--bkgg":`${B}px`,...v&&v!=="none"?{"--bkgt":v}:{},...v&&v!=="none"?{gridTemplateColumns:v}:{},...B?{gap:`${B}px`}:{},justifyContent:a};return oe(X,r)},[u,i,M,p,b,z,S,v,B,I,E,g.base,g.colors.line,A,r,a]);return w.jsxs("div",{ref:D,"data-testid":"guide",className:ne(fe.gde,n,H?fe.v:fe.h,V==="line"&&fe.line),"data-variant":V,style:Q,...T,children:[H&&w.jsx("div",{className:fe.cols,"data-variant":V,children:Array.from({length:z},(J,_)=>{const Y=g.colors[V]??g.colors.line;return w.jsx("div",{className:fe.col,"data-column-index":_,"data-variant":V,style:{backgroundColor:Y}},_)})}),h]})}),Sn=/^\d*\.?\d+(?:fr|px|%|em|rem|vh|vw|vmin|vmax|pt|pc|in|cm|mm)$/,jt=e=>typeof e=="number"?Number.isFinite(e)&&e>=0:typeof e!="string"?!1:e==="auto"||e==="100%"||Sn.test(e),Ot=e=>Array.isArray(e)&&e.length>0&&e.every(jt),wn=e=>{const n=[...Object.keys(ve),...Me];return typeof e=="number"||typeof e=="string"&&n.some(o=>e.endsWith(o))},En=e=>typeof e=="string"&&At.includes(e),De=e=>typeof e=="object"&&e!==null,Cn=e=>De(e)&&e.variant==="line",Rn=e=>De(e)&&"columns"in e&&!("variant"in e),_n=e=>De(e)&&"columnWidth"in e&&!("variant"in e)&&!("columns"in e),jn="bas_e-SXr",On="row_q-FZb",ke={bas:jn,row:On},Mt=(e,n,o)=>({"--bkbw":"100%","--bkbh":"100%","--bkbb":`${e}px`,"--bkbcl":n,"--bkbcf":o}),Tt=e=>{const{index:n,base:o,variant:r,chosenColor:s,lineColor:a,flatColor:l}=e;return{"--bkrt":n===0?"0px":`${n*o}px`,"--bkrh":r==="line"?"1px":`${o}px`,"--bkbc":s||(r==="line"?a:l)}},Mn=c.memo(function({className:n,debugging:o,style:r,variant:s,height:a,width:l,base:i,color:u,ssrMode:m=!1,...p}){const b=se("baseline"),M=s??b.variant,S=i??b.base,{isShown:h}=ie(o,b.debugging),j=c.useRef(null),[T,g]=c.useState(!1),V=ge(j);c.useEffect(()=>{g(!0)},[]);const N=re(T,it,V),{width:R,height:P}=N,[D,k]=c.useMemo(()=>Te([l,a],[R,P]),[l,a,R,P]),{top:O,right:I,bottom:E,left:H}=c.useMemo(()=>le(p),[p]),W=c.useMemo(()=>{const Z=[O,I,E,H].map(q=>q?`${q}px`:"0").join(" ");return Z!=="0 0 0 0"?Z:void 0},[O,I,E,H]),v=c.useMemo(()=>st({height:k,top:O,bottom:E,base:S}),[k,O,E,S]),z=ct({totalLines:v,lineHeight:S,containerRef:j,buffer:160}),B={start:0,end:Math.min(10,v)},{start:A,end:Q}=re(T&&!m,B,z),J=u||(M==="line"?b.colors.line:b.colors.flat),_=c.useMemo(()=>Mt(S,b.colors.line,b.colors.flat),[S,b.colors.line,b.colors.flat]),Y=c.useMemo(()=>{const Z=G(l||"100%"),q=G(a||"100%"),X=["--bkbw","--bkbh"];return oe({...x({key:"--bkbw",value:Z,defaultStyles:_,skipDimensions:{fullSize:X}}),...x({key:"--bkbh",value:q,defaultStyles:_,skipDimensions:{fullSize:X}}),...x({key:"--bkbb",value:`${S}px`,defaultStyles:_}),...x({key:"--bkbcl",value:u||b.colors.line,defaultStyles:_}),...x({key:"--bkbcf",value:u||b.colors.flat,defaultStyles:_}),...W&&{padding:W}},r)},[l,a,S,u,b.colors.line,b.colors.flat,W,_,r]),L=c.useCallback(Z=>Tt({index:Z,base:S,variant:M,chosenColor:J,lineColor:b.colors.line,flatColor:b.colors.flat}),[S,M,J,b.colors.line,b.colors.flat]);return w.jsx("div",{ref:j,"data-testid":"baseline",className:ne(ke.bas,h?ke.v:ke.h,n),style:Y,...p,children:h&&Array.from({length:Q-A},(Z,q)=>{const X=q+A;return w.jsx("div",{className:ke.row,"data-row-index":X,style:L(X)},X)})})}),At=["start","center","end"],Tn=["line","flat"];exports.ABSOLUTE_UNIT_CONVERSIONS=ve;exports.Baseline=Mn;exports.Box=bn;exports.Config=we;exports.DEFAULT_CONFIG=ft;exports.DIRECTION_AXIS=wt;exports.GRID_ALIGNMENTS=At;exports.Guide=xn;exports.Layout=un;exports.PADD_VARIANTS=Tn;exports.Padder=Ee;exports.RELATIVE_UNITS=Me;exports.SSR_DIMENSIONS=it;exports.Spacer=gt;exports.Stack=hn;exports.calculateRowCount=st;exports.calculateSnappedSpacing=at;exports.clamp=rt;exports.convertValue=Se;exports.createBaselineRowStyle=Tt;exports.createBoxCustomStyles=St;exports.createCSSVariables=tn;exports.createDefaultBaselineStyles=Mt;exports.createDefaultBoxStyles=xt;exports.createDefaultGuideStyles=_t;exports.createDefaultLayoutStyles=kt;exports.createDefaultSpacerStyles=bt;exports.createDefaultStackStyles=Et;exports.createDirectPaddingStyles=pt;exports.createGridConfig=Rt;exports.createGridGapStyles=vt;exports.createGridSpanStyles=lt;exports.createPadderContainerStyles=ht;exports.createRenderSpacerFn=yt;exports.createStackGapStyles=Ct;exports.createStyleOverride=x;exports.debounce=Ut;exports.formatValue=G;exports.generateMeasurements=mt;exports.getGridTemplate=Oe;exports.hydratedValue=re;exports.isAutoCalculatedGuide=_n;exports.isGuideAlignment=En;exports.isGuideColumnConfig=Rn;exports.isGuideLineConfig=Cn;exports.isGuideValue=wn;exports.isSSR=$e;exports.isValidGuideColumnValue=jt;exports.isValidGuidePattern=Ot;exports.mergeClasses=ne;exports.mergeConfig=dt;exports.mergeRefs=Ae;exports.mergeStyles=oe;exports.moduloize=Bt;exports.normalizeValue=xe;exports.normalizeValuePair=Te;exports.parsePadding=le;exports.parseUnit=ot;exports.rafThrottle=Ne;exports.round=Pt;exports.safeClientValue=Ft;exports.useBaseline=he;exports.useConfig=se;exports.useDebug=ie;exports.useDefaultConfig=Ge;exports.useGuide=ut;exports.useMeasure=ge;exports.useVirtual=ct;
|
|
32
32
|
//# sourceMappingURL=index.cjs.map
|