@charcoal-ui/styled 5.0.0-beta.6 → 5.0.0-beta.7

package/dist/index.cjs

@@ -1,608 +1,25 @@
-//#region rolldown:runtime
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-
-//#endregion
-let __charcoal_ui_utils = require("@charcoal-ui/utils");
-__charcoal_ui_utils = __toESM(__charcoal_ui_utils);
-let warning = require("warning");
-warning = __toESM(warning);
-let __charcoal_ui_foundation = require("@charcoal-ui/foundation");
-__charcoal_ui_foundation = __toESM(__charcoal_ui_foundation);
-let styled_components = require("styled-components");
-styled_components = __toESM(styled_components);
-let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = __toESM(react_jsx_runtime);
-let __charcoal_ui_react = require("@charcoal-ui/react");
-__charcoal_ui_react = __toESM(__charcoal_ui_react);
-
-//#region src/util.ts
-function unreachable(value) {
-	throw new Error(arguments.length === 0 ? "unreachable" : `unreachable (${JSON.stringify(value)})`);
-}
-/**
-* Check whether a value is non-null and non-undefined
-*
-* @param value nullable
-*/
-const isPresent = (value) => value != null;
-function objectAssign(...sources) {
-	return Object.assign({}, ...sources);
-}
-/**
-* Object.keys の返り値の型を厳しめにしてくれるやつ。
-*
-* ジェネリクスは基本的に明示して使うことを推奨。
-*
-* このライブラリでは Theme オブジェクトのジェネリクスを引き回すケースが多く、
-* ジェネリクスを省略するといつのまにか keys の返り値が `string | number | symbol` になりがちなので
-*
-* @param obj - キーを取りたいオブジェクト。ジェネリクスを省略したとき `never[]` のような使えない型が返って欲しい
-*/
-function keyof(obj) {
-	return Object.keys(obj);
-}
-/**
-* 配列じゃなかったら配列にする
-*/
-function wrapArray(value) {
-	return Array.isArray(value) ? value : [value];
-}
-const noThemeProvider = /* @__PURE__ */ new Error("`theme` is invalid. `<ThemeProvider>` is not likely mounted.");
-/**
-* 子孫要素で使われるカラーテーマの CSS Variables を上書きする
-*
-* @params colorParams - 上書きしたい色の定義（ `theme.color` の一部だけ書けば良い ）
-* @params effectParams - effect の定義を上書きしたい場合は渡す（必須ではない）
-*
-* @example
-* ```tsx
-* const LocalTheme = styled.div`
-*   ${defineThemeVariables({ text1: '#ff0000' })}
-*   // `text1` is now defined as red
-*   ${theme((o) => [o.font.text1])}
-* `
-* ```
-*/
-function defineThemeVariables(colorParams, effectParams) {
-	return function toCssObject(props) {
-		if (!isPresent(props.theme)) throw noThemeProvider;
-		const colors$1 = (0, __charcoal_ui_utils.filterObject)(colorParams, isPresent);
-		const effects = Object.entries({
-			...props.theme.effect,
-			...effectParams
-		});
-		return (0, __charcoal_ui_utils.flatMapObject)(colors$1, (colorKey, color) => [[(0, __charcoal_ui_utils.customPropertyToken)(colorKey), color], ...effects.map(([effectKey, effect]) => [(0, __charcoal_ui_utils.customPropertyToken)(colorKey, [effectKey]), (0, __charcoal_ui_utils.applyEffect)(color, [effect])])]);
-	};
-}
-function isSupportedEffect(effect) {
-	return [
-		"hover",
-		"press",
-		"disabled"
-	].includes(effect);
-}
-const variable = (value) => `var(${value})`;
-function onEffectPseudo(effect, css$8) {
-	return effect === "hover" ? { "&:hover": { [__charcoal_ui_utils.notDisabledSelector]: css$8 } } : effect === "press" ? { "&:active": { [__charcoal_ui_utils.notDisabledSelector]: css$8 } } : effect === "disabled" ? { [__charcoal_ui_utils.disabledSelector]: css$8 } : unreachable(effect);
-}
-function withPrefixes(...parts) {
-	return parts.join("-");
-}
-
-//#endregion
-//#region src/internals/index.ts
-/**
-* 絶対にこれを export してはいけない
-*
-* さもないと `o.bg[internalSym]` みたいな叩き方が可能になってしまう（補完にも意図せず出てしまう）
-*/
-const internalSym = Symbol("internal");
-/**
-* CSSObject に変換可能なオブジェクトを作成する
-*
-* 実際に CSSObject に変換するには外部から `__DO_NOT_USE_GET_INTERNAL__` を使わなければならない
-*
-* これ以降メソッドチェーンが続いてもいいし、続かなくても良い
-*/
-function createInternal({ toCSS, context = {} }) {
-	return { [internalSym]: {
-		toCSS,
-		context
-	} };
-}
-function __DO_NOT_USE_ACCESS_PRIVATE_PROPERTY__(internal) {
-	return internal[internalSym];
-}
-const shouldCancelHalfLeading = ({ cancelHalfLeadingPx, hasVerticalPadding = false }) => cancelHalfLeadingPx !== void 0 && !hasVerticalPadding;
-/**
-* 個別の Internal（ o.〇〇 の返り値 ）が提出した context の中身を1つの context にまとめる
-*/
-function getContext(internals) {
-	return internals.reduce((context, internal) => ({
-		...context,
-		...__DO_NOT_USE_ACCESS_PRIVATE_PROPERTY__(internal).context
-	}), {});
-}
-/**
-* 全ユーザー定義からコンテキスト生成し、styled-components 向けに CSSObject を構築
-*/
-function toCSSObjects(internals) {
-	const context = getContext(internals);
-	return internals.map((v) => __DO_NOT_USE_ACCESS_PRIVATE_PROPERTY__(v).toCSS(context));
-}
-
-//#endregion
-//#region src/factories/lib.ts
-/**
-* 配列で指定したプロパティを動的に生やす
-*
-* @param source 拡張するオブジェクト
-* @param member オブジェクトに生やすプロパティ一覧
-* @param chain プロパティに格納される値を生成する関数
-*
-* @example
-*
-* const o = factory({}, ['red', 'blue'],
-*   color => hex(color)
-* )
-*
-* console.log(o.red) //=> #ff0000
-*/
-const defineProperties = (source, member, chain) => Object.defineProperties(source, Object.fromEntries(member.map((key) => [key, {
-	get: () => chain(key),
-	enumerable: true,
-	configurable: true
-}])));
-/**
-* 配列で指定した名前のメソッドを動的に生やす
-*
-* @param source 拡張するオブジェクト
-* @param member オブジェクトに生やすメソッド名一覧
-* @param chain メソッドの戻り値になる値を生成する関数
-*
-* @example
-*
-* const o = defineMethods({}, ['red', 'blue'],
-*   (color, alpha: number) => hex(color, alpha)
-* )
-*
-* console.log(o.red(0.5)) //=> #ff000077
-*/
-const defineMethods = (source, member, chain) => Object.defineProperties(source, Object.fromEntries(member.map((key) => [key, {
-	value: (...args) => chain(key, ...args),
-	enumerable: true,
-	configurable: true
-}])));
-/**
-* オブジェクトで指定したプロパティ名と値を動的に生やす
-*
-* @param source 拡張するオブジェクト
-* @param def オブジェクトに生やす定義(プロパティ名と値)
-*
-* @example
-*
-* const o = defineConstantProperties({}, {
-*   red: '#f00',
-*   blue: '#00f',
-* })
-*
-* console.log(o.red) //=> #f00
-*/
-const defineConstantProperties = (source, def) => defineProperties(source, Object.keys(def), (key) => def[key]);
-/**
-* 配列で指定したモディファイア(プロパティ)をチェーン可能な再帰オブジェクトを動的に生やす
-*
-* @param modifiers オブジェクトに生やすモディファイヤ一覧
-* @param source 指定されたモディファイヤの一覧から値を生成する関数
-*
-* @example
-*
-* const o = definePropertyChains(['red', 'blue'],
-*   modifiers => modifiers.map(color => hex(color)).join(',')
-* )
-*
-* console.log(o.red.blue) => #f00,#00f
-*/
-const definePropertyChains = (modifiers, source) => (function definePropertiesRecursively(applied) {
-	const notApplied = modifiers.filter((v) => !applied.includes(v));
-	return defineProperties(source(applied), notApplied, (modifier) => notApplied.length === 0 ? unreachable() : definePropertiesRecursively([...applied, modifier]));
-})([]);
-/**
-* 配列で指定したモディファイア(メソッド)をチェーン可能な再帰オブジェクトを動的に生やす
-*
-* @param modifiers オブジェクトに生やすモディファイヤ一覧
-* @param source 指定されたモディファイヤの一覧から値を生成する関数
-* @param _inferPhantom 関数形式のモディファイヤの引数型を推論するためのメタタイプ(引数の個数に合わせてタプルで指定する)
-*
-* @example
-*
-* const o = defineMethodChains(['red', 'blue'],
-*   modifiers => modifiers.map(([color, alpha]) => hex(color, alpha)).join(',')
-* , {} as [number])
-*
-* console.log(o.red(0.5).blue(1)) => #ff000077,#0000ffff
-*/
-const defineMethodChains = (modifiers, source, ..._inferPhantom) => (function defineMethodsRecursively(applied) {
-	const notApplied = modifiers.filter((v) => !applied.map(([w]) => w).includes(v));
-	return defineMethods(source(applied), notApplied, (modifier, ...args) => notApplied.length === 0 ? unreachable() : defineMethodsRecursively([...applied, [modifier, ...args]]));
-})([]);
-
-//#endregion
-//#region src/builders/border.ts
-const borderDirections = [
-	"top",
-	"right",
-	"bottom",
-	"left"
-];
-const createBorderCss = (variant, directions) => {
-	const all = directions.length === 0;
-	const value = `solid 1px ${variable((0, __charcoal_ui_utils.customPropertyToken)(withPrefixes("border", variant.toString())))}`;
-	return createInternal({ toCSS() {
-		return { ...all ? { border: value } : directions.reduce((acc, direction) => ({
-			...acc,
-			[`border-${direction}`]: value
-		}), {}) };
-	} });
-};
-function border(theme) {
-	return defineConstantProperties({}, { border: defineProperties({}, keyof(theme.border), (variant) => definePropertyChains(borderDirections, (modifiers) => createBorderCss(variant, modifiers))) });
-}
-
-//#endregion
-//#region src/builders/borderRadius.ts
-const createBorderRadiusCss = (theme) => (size$1) => {
-	return createInternal({ toCSS() {
-		return { borderRadius: (0, __charcoal_ui_utils.px)(theme.borderRadius[size$1]) };
-	} });
-};
-function borderRadius(theme) {
-	const borderRadiusCss = createBorderRadiusCss(theme);
-	return defineConstantProperties({}, { borderRadius: (radius) => borderRadiusCss(radius) });
-}
-
-//#endregion
-//#region src/builders/transition.ts
-const TRANSITION_DURATION = .2;
-/**
-* context の状態を元に transition を追加する。必ず一番最後に呼ぶ
-*/
-function transition(_theme) {
-	const duration = (0, __charcoal_ui_utils.dur)(TRANSITION_DURATION);
-	const transition$1 = (property) => ({ transition: property.map((v) => `${duration} ${v}`).join(", ") });
-	function toCSS({ colorTransition = false, backgroundColorTransition = false, boxShadowTransition = false }) {
-		return transition$1([
-			colorTransition ? "color" : null,
-			backgroundColorTransition ? "background-color" : null,
-			boxShadowTransition ? "box-shadow" : null
-		].filter(isPresent));
-	}
-	return createInternal({ toCSS });
-}
-
-//#endregion
-//#region src/builders/colors.ts
-function targetProperty(target) {
-	return target === "bg" ? "background-color" : "color";
-}
-const createColorCss = (_theme) => (target, color, effects = []) => {
-	function toCSS() {
-		return {
-			[targetProperty(target)]: variable((0, __charcoal_ui_utils.customPropertyToken)(color.toString())),
-			...effects.filter(isSupportedEffect).reduce((acc, effect) => ({
-				...acc,
-				...onEffectPseudo(effect, { [targetProperty(target)]: variable((0, __charcoal_ui_utils.customPropertyToken)(color.toString(), [effect])) })
-			}), {})
-		};
-	}
-	return createInternal({
-		toCSS,
-		context: effects.length > 0 ? target === "font" ? { colorTransition: true } : { backgroundColorTransition: true } : {}
-	});
-};
-const createGradientColorCss = (theme) => (color, effects = [], direction) => {
-	const toLinearGradient = (0, __charcoal_ui_utils.gradient)(direction);
-	function toCSS(context) {
-		const optimized = !shouldCancelHalfLeading(context);
-		const duration = (0, __charcoal_ui_utils.dur)(TRANSITION_DURATION);
-		if (optimized && effects.length > 0) return {
-			position: "relative",
-			zIndex: 0,
-			overflow: "hidden",
-			...effects.filter(isSupportedEffect).reduce((acc, effect) => ({
-				...acc,
-				"&::before": {
-					zIndex: -1,
-					...overlayElement,
-					transition: `${duration} background-color`
-				},
-				"&::after": {
-					zIndex: -2,
-					...overlayElement,
-					...toLinearGradient(theme.gradientColor[color])
-				},
-				...onEffectPseudo(effect, { "&::before": { backgroundColor: (0, __charcoal_ui_utils.applyEffect)(null, theme.effect[effect] ?? []) } })
-			}), {})
-		};
-		(0, warning.default)(effects.length === 0, `'Transition' will not be applied. You can get around this by specifying 'preserveHalfLeading' or both 'padding' and 'typography'.`);
-		return {
-			...toLinearGradient(theme.gradientColor[color]),
-			...effects.filter(isSupportedEffect).reduce((acc, effect) => ({
-				...acc,
-				...onEffectPseudo(effect, { ...toLinearGradient((0, __charcoal_ui_utils.applyEffectToGradient)(theme.effect[effect] ?? [])(theme.gradientColor[color])) })
-			}), {})
-		};
-	}
-	return createInternal({ toCSS });
-};
-const overlayElement = {
-	content: "''",
-	display: "block",
-	position: "absolute",
-	width: "100%",
-	height: "100%",
-	top: 0,
-	left: 0
-};
-function colors(theme) {
-	const colors$1 = keyof(theme.color);
-	const effects = keyof(theme.effect);
-	const gradientColors = keyof(theme.gradientColor);
-	const colorCss = createColorCss(theme);
-	const gradientColorCss = createGradientColorCss(theme);
-	return defineConstantProperties({}, {
-		bg: objectAssign(defineProperties({}, colors$1, (color) => definePropertyChains(effects, (modifiers) => colorCss("bg", color, modifiers))), defineProperties({}, gradientColors, (color) => (direction) => definePropertyChains(effects, (modifiers) => gradientColorCss(color, modifiers, direction)))),
-		font: defineProperties({}, colors$1, (color) => definePropertyChains(effects, (modifiers) => colorCss("font", color, modifiers)))
-	});
-}
-
-//#endregion
-//#region src/builders/elementEffect.ts
-const createElementEffectCss = (theme) => (effects = []) => createInternal({ toCSS() {
-	return effects.filter(isSupportedEffect).reduce((acc, effect) => ({
-		...acc,
-		...onEffectPseudo(effect, { opacity: !Array.isArray(theme.elementEffect[effect]) && theme.elementEffect[effect]?.type === "opacity" ? theme.elementEffect[effect]?.opacity : unreachable() })
-	}), {});
-} });
-function elementEffect(theme) {
-	const effectTypes = keyof(theme.elementEffect);
-	const elementEffectCss = createElementEffectCss(theme);
-	return definePropertyChains(effectTypes, (modifiers) => elementEffectCss(modifiers));
-}
-
-//#endregion
-//#region src/builders/outline.ts
-const outlineType = ["focus"];
-const outlineCss = (weight, color) => ({ boxShadow: `0 0 0 ${(0, __charcoal_ui_utils.px)(weight)} ${color}` });
-const createOutlineColorCss = (theme) => (variant, modifiers) => {
-	const weight = theme.outline[variant].weight;
-	const color = theme.outline[variant].color;
-	return createInternal({
-		toCSS() {
-			return modifiers.includes("focus") ? onFocus(outlineCss(weight, color)) : { "&&": { [__charcoal_ui_utils.notDisabledSelector]: outlineCss(weight, color) } };
-		},
-		context: { boxShadowTransition: true }
-	});
-};
-/**
-* @see https://developer.mozilla.org/ja/docs/Web/CSS/:focus-visible#selectively_showing_the_focus_indicator
-*/
-const onFocus = (css$8) => ({ [__charcoal_ui_utils.notDisabledSelector]: {
-	"&:focus, &:active": {
-		outline: "none",
-		...css$8
-	},
-	"&:focus:not(:focus-visible), &:active:not(:focus-visible)": { outline: "none" },
-	"&:focus-visible": {
-		outline: "none",
-		...css$8
-	}
-} });
-function outline(theme) {
-	const outlineCss$1 = createOutlineColorCss(theme);
-	return defineConstantProperties({}, { outline: defineProperties({}, keyof(theme.outline), (variant) => definePropertyChains(outlineType, (modifiers) => outlineCss$1(variant, modifiers))) });
-}
-
-//#endregion
-//#region src/builders/size.ts
-const fixedProperties = ["width", "height"];
-const createFixedPxCss = (theme) => (property, size$1) => createInternal({ toCSS() {
-	return { [property]: size$1 === "auto" ? "auto" : (0, __charcoal_ui_utils.px)(theme.spacing[size$1]) };
-} });
-const createFixedRelativeCss = (_theme) => (property, amount) => createInternal({ toCSS() {
-	return { [property]: amount };
-} });
-const createFixedColumnCss = (theme) => (property, span) => createInternal({ toCSS() {
-	return { [property]: (0, __charcoal_ui_utils.px)((0, __charcoal_ui_foundation.columnSystem)(span, theme.grid.unit.column, theme.grid.unit.gutter)) };
-} });
-function size(theme) {
-	const fixedPxCss = createFixedPxCss(theme);
-	const fixedColumnCss = createFixedColumnCss(theme);
-	const fixedRelativeCss = createFixedRelativeCss(theme);
-	return defineProperties({}, fixedProperties, (property) => defineConstantProperties({}, {
-		px: (size$1) => fixedPxCss(property, size$1),
-		column: (span) => fixedColumnCss(property, span),
-		auto: fixedRelativeCss(property, "auto"),
-		full: fixedRelativeCss(property, "100%")
-	}));
-}
-
-//#endregion
-//#region src/builders/spacing.ts
-const spacingProperties = ["margin", "padding"];
-const spacingDirections = [
-	"top",
-	"right",
-	"bottom",
-	"left",
-	"vertical",
-	"horizontal",
-	"all"
-];
-function spacingProperty(property, direction) {
-	return `${property}-${direction}`;
-}
-const createSpacingCss = (theme) => (property, modifiers) => {
-	const { top, right, bottom, left } = modifiers.reduce((acc, [direction, size$1]) => {
-		if (direction === "all") {
-			acc.top = size$1;
-			acc.right = size$1;
-			acc.bottom = size$1;
-			acc.left = size$1;
-		} else if (direction === "vertical") {
-			acc.top = size$1;
-			acc.bottom = size$1;
-		} else if (direction === "horizontal") {
-			acc.right = size$1;
-			acc.left = size$1;
-		} else acc[direction] = size$1;
-		return acc;
-	}, {});
-	const hasVerticalPadding = property === "padding" && top !== void 0 && bottom !== void 0 && top !== "auto" && bottom !== "auto";
-	function toCSS({ cancelHalfLeadingPx = 0 }) {
-		return {
-			...top !== void 0 && { [spacingProperty(property, "top")]: top === "auto" ? "auto" : (0, __charcoal_ui_utils.px)(theme.spacing[top] + (hasVerticalPadding ? cancelHalfLeadingPx : 0)) },
-			...bottom !== void 0 && { [spacingProperty(property, "bottom")]: bottom === "auto" ? "auto" : (0, __charcoal_ui_utils.px)(theme.spacing[bottom] + (hasVerticalPadding ? cancelHalfLeadingPx : 0)) },
-			...right !== void 0 && { [spacingProperty(property, "right")]: right === "auto" ? "auto" : (0, __charcoal_ui_utils.px)(theme.spacing[right]) },
-			...left !== void 0 && { [spacingProperty(property, "left")]: left === "auto" ? "auto" : (0, __charcoal_ui_utils.px)(theme.spacing[left]) }
-		};
-	}
-	return createInternal({
-		toCSS,
-		context: hasVerticalPadding ? { hasVerticalPadding: true } : {}
-	});
-};
-function spacing(theme) {
-	const spacingCss = createSpacingCss(theme);
-	return defineProperties({}, spacingProperties, (spacingProperty$1) => defineMethodChains(spacingDirections, (modifiers) => spacingCss(spacingProperty$1, modifiers), {}));
-}
-
-//#endregion
-//#region src/builders/typography.ts
-const createTypographyCss = (theme) => (size$1, options = {}) => {
-	const { preserveHalfLeading = false, monospace = false, bold = false } = options;
-	const descriptor = theme.typography.size[size$1];
-	const margin$1 = -(0, __charcoal_ui_utils.halfLeading)(descriptor);
-	function toCSS(context) {
-		return {
-			fontSize: (0, __charcoal_ui_utils.px)(descriptor.fontSize),
-			lineHeight: (0, __charcoal_ui_utils.px)(descriptor.lineHeight),
-			...monospace && { fontFamily: "monospace" },
-			...bold && { fontWeight: "bold" },
-			...shouldCancelHalfLeading(context) && {
-				display: "flow-root",
-				"&::before": {
-					...leadingCancel,
-					marginTop: (0, __charcoal_ui_utils.px)(margin$1)
-				},
-				"&::after": {
-					...leadingCancel,
-					marginBottom: (0, __charcoal_ui_utils.px)(margin$1)
-				}
-			}
-		};
-	}
-	return createInternal({
-		toCSS,
-		context: !preserveHalfLeading ? { cancelHalfLeadingPx: margin$1 } : {}
-	});
-};
-const leadingCancel = {
-	display: "block",
-	width: 0,
-	height: 0,
-	content: `''`
-};
-const typographyModifiers = [
-	"monospace",
-	"bold",
-	"preserveHalfLeading"
-];
-function typography$1(theme) {
-	const typographyCss = createTypographyCss(theme);
-	return defineProperties({}, ["typography"], (_) => (size$1) => definePropertyChains(typographyModifiers, (modifiers) => typographyCss(size$1, {
-		preserveHalfLeading: modifiers.includes("preserveHalfLeading"),
-		monospace: modifiers.includes("monospace"),
-		bold: modifiers.includes("bold")
-	})));
-}
-
-//#endregion
-//#region src/builders/o.ts
-/**
-* `theme(o => [...])` の `o` の部分を構築する
-*
-* @param theme テーマオブジェクト
-*/
-function createO(theme) {
-	return objectAssign(colors(theme), typography$1(theme), spacing(theme), size(theme), elementEffect(theme), border(theme), borderRadius(theme), outline(theme));
-}
-
-//#endregion
-//#region src/TokenInjector.tsx
-const GlobalStyle = styled_components.createGlobalStyle`
-  ${({ themeMap, background }) => Object.entries(themeMap).map(([key, theme]) => key.startsWith("@media") ? styled_components.css`
-            ${key} {
+var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`@charcoal-ui/utils`);c=s(c);let l=require(`warning`);l=s(l);let u=require(`@charcoal-ui/foundation`);u=s(u);let d=require(`styled-components`);d=s(d);let f=require(`react/jsx-runtime`);f=s(f);let p=require(`@charcoal-ui/react`);p=s(p);function m(e){throw Error(arguments.length===0?`unreachable`:`unreachable (${JSON.stringify(e)})`)}const h=e=>e!=null;function g(...e){return Object.assign({},...e)}function _(e){return Object.keys(e)}function ee(e){return Array.isArray(e)?e:[e]}const v=Error("`theme` is invalid. `<ThemeProvider>` is not likely mounted.");function y(e,t){return function(n){if(!h(n.theme))throw v;let r=(0,c.filterObject)(e,h),i=Object.entries({...n.theme.effect,...t});return(0,c.flatMapObject)(r,(e,t)=>[[(0,c.customPropertyToken)(e),t],...i.map(([n,r])=>[(0,c.customPropertyToken)(e,[n]),(0,c.applyEffect)(t,[r])])])}}function b(e){return[`hover`,`press`,`disabled`].includes(e)}const x=e=>`var(${e})`;function S(e,t){return e===`hover`?{"&:hover":{[c.notDisabledSelector]:t}}:e===`press`?{"&:active":{[c.notDisabledSelector]:t}}:e===`disabled`?{[c.disabledSelector]:t}:m(e)}function C(...e){return e.join(`-`)}const w=Symbol(`internal`);function T({toCSS:e,context:t={}}){return{[w]:{toCSS:e,context:t}}}function E(e){return e[w]}const D=({cancelHalfLeadingPx:e,hasVerticalPadding:t=!1})=>e!==void 0&&!t;function O(e){return e.reduce((e,t)=>({...e,...E(t).context}),{})}function k(e){let t=O(e);return e.map(e=>E(e).toCSS(t))}const A=(e,t,n)=>Object.defineProperties(e,Object.fromEntries(t.map(e=>[e,{get:()=>n(e),enumerable:!0,configurable:!0}]))),te=(e,t,n)=>Object.defineProperties(e,Object.fromEntries(t.map(e=>[e,{value:(...t)=>n(e,...t),enumerable:!0,configurable:!0}]))),j=(e,t)=>A(e,Object.keys(t),e=>t[e]),M=(e,t)=>(function n(r){let i=e.filter(e=>!r.includes(e));return A(t(r),i,e=>i.length===0?m():n([...r,e]))})([]),ne=(e,t,...n)=>(function n(r){let i=e.filter(e=>!r.map(([e])=>e).includes(e));return te(t(r),i,(e,...t)=>i.length===0?m():n([...r,[e,...t]]))})([]),re=[`top`,`right`,`bottom`,`left`],ie=(e,t)=>{let n=t.length===0,r=`solid 1px ${x((0,c.customPropertyToken)(C(`border`,e.toString())))}`;return T({toCSS(){return{...n?{border:r}:t.reduce((e,t)=>({...e,[`border-${t}`]:r}),{})}}})};function ae(e){return j({},{border:A({},_(e.border),e=>M(re,t=>ie(e,t)))})}const oe=e=>t=>T({toCSS(){return{borderRadius:(0,c.px)(e.borderRadius[t])}}});function se(e){let t=oe(e);return j({},{borderRadius:e=>t(e)})}const N=.2;function ce(e){let t=(0,c.dur)(N),n=e=>({transition:e.map(e=>`${t} ${e}`).join(`, `)});function r({colorTransition:e=!1,backgroundColorTransition:t=!1,boxShadowTransition:r=!1}){return n([e?`color`:null,t?`background-color`:null,r?`box-shadow`:null].filter(h))}return T({toCSS:r})}function P(e){return e===`bg`?`background-color`:`color`}const le=e=>(e,t,n=[])=>{function r(){return{[P(e)]:x((0,c.customPropertyToken)(t.toString())),...n.filter(b).reduce((n,r)=>({...n,...S(r,{[P(e)]:x((0,c.customPropertyToken)(t.toString(),[r]))})}),{})}}return T({toCSS:r,context:n.length>0?e===`font`?{colorTransition:!0}:{backgroundColorTransition:!0}:{}})},F=e=>(t,n=[],r)=>{let i=(0,c.gradient)(r);function a(r){let a=!D(r),o=(0,c.dur)(N);return a&&n.length>0?{position:`relative`,zIndex:0,overflow:`hidden`,...n.filter(b).reduce((n,r)=>({...n,"&::before":{zIndex:-1,...I,transition:`${o} background-color`},"&::after":{zIndex:-2,...I,...i(e.gradientColor[t])},...S(r,{"&::before":{backgroundColor:(0,c.applyEffect)(null,e.effect[r]??[])}})}),{})}:((0,l.default)(n.length===0,`'Transition' will not be applied. You can get around this by specifying 'preserveHalfLeading' or both 'padding' and 'typography'.`),{...i(e.gradientColor[t]),...n.filter(b).reduce((n,r)=>({...n,...S(r,{...i((0,c.applyEffectToGradient)(e.effect[r]??[])(e.gradientColor[t]))})}),{})})}return T({toCSS:a})},I={content:`''`,display:`block`,position:`absolute`,width:`100%`,height:`100%`,top:0,left:0};function L(e){let t=_(e.color),n=_(e.effect),r=_(e.gradientColor),i=le(e),a=F(e);return j({},{bg:g(A({},t,e=>M(n,t=>i(`bg`,e,t))),A({},r,e=>t=>M(n,n=>a(e,n,t)))),font:A({},t,e=>M(n,t=>i(`font`,e,t)))})}const R=e=>(t=[])=>T({toCSS(){return t.filter(b).reduce((t,n)=>({...t,...S(n,{opacity:!Array.isArray(e.elementEffect[n])&&e.elementEffect[n]?.type===`opacity`?e.elementEffect[n]?.opacity:m()})}),{})}});function z(e){let t=_(e.elementEffect),n=R(e);return M(t,e=>n(e))}const B=[`focus`],V=(e,t)=>({boxShadow:`0 0 0 ${(0,c.px)(e)} ${t}`}),H=e=>(t,n)=>{let r=e.outline[t].weight,i=e.outline[t].color;return T({toCSS(){return n.includes(`focus`)?U(V(r,i)):{"&&":{[c.notDisabledSelector]:V(r,i)}}},context:{boxShadowTransition:!0}})},U=e=>({[c.notDisabledSelector]:{"&:focus, &:active":{outline:`none`,...e},"&:focus:not(:focus-visible), &:active:not(:focus-visible)":{outline:`none`},"&:focus-visible":{outline:`none`,...e}}});function W(e){let t=H(e);return j({},{outline:A({},_(e.outline),e=>M(B,n=>t(e,n)))})}const ue=[`width`,`height`],de=e=>(t,n)=>T({toCSS(){return{[t]:n===`auto`?`auto`:(0,c.px)(e.spacing[n])}}}),fe=e=>(e,t)=>T({toCSS(){return{[e]:t}}}),pe=e=>(t,n)=>T({toCSS(){return{[t]:(0,c.px)((0,u.columnSystem)(n,e.grid.unit.column,e.grid.unit.gutter))}}});function me(e){let t=de(e),n=pe(e),r=fe(e);return A({},ue,e=>j({},{px:n=>t(e,n),column:t=>n(e,t),auto:r(e,`auto`),full:r(e,`100%`)}))}const he=[`margin`,`padding`],ge=[`top`,`right`,`bottom`,`left`,`vertical`,`horizontal`,`all`];function G(e,t){return`${e}-${t}`}const _e=e=>(t,n)=>{let{top:r,right:i,bottom:a,left:o}=n.reduce((e,[t,n])=>(t===`all`?(e.top=n,e.right=n,e.bottom=n,e.left=n):t===`vertical`?(e.top=n,e.bottom=n):t===`horizontal`?(e.right=n,e.left=n):e[t]=n,e),{}),s=t===`padding`&&r!==void 0&&a!==void 0&&r!==`auto`&&a!==`auto`;function l({cancelHalfLeadingPx:n=0}){return{...r!==void 0&&{[G(t,`top`)]:r===`auto`?`auto`:(0,c.px)(e.spacing[r]+(s?n:0))},...a!==void 0&&{[G(t,`bottom`)]:a===`auto`?`auto`:(0,c.px)(e.spacing[a]+(s?n:0))},...i!==void 0&&{[G(t,`right`)]:i===`auto`?`auto`:(0,c.px)(e.spacing[i])},...o!==void 0&&{[G(t,`left`)]:o===`auto`?`auto`:(0,c.px)(e.spacing[o])}}}return T({toCSS:l,context:s?{hasVerticalPadding:!0}:{}})};function ve(e){let t=_e(e);return A({},he,e=>ne(ge,n=>t(e,n),{}))}const ye=e=>(t,n={})=>{let{preserveHalfLeading:r=!1,monospace:i=!1,bold:a=!1}=n,o=e.typography.size[t],s=-(0,c.halfLeading)(o);function l(e){return{fontSize:(0,c.px)(o.fontSize),lineHeight:(0,c.px)(o.lineHeight),...i&&{fontFamily:`monospace`},...a&&{fontWeight:`bold`},...D(e)&&{display:`flow-root`,"&::before":{...K,marginTop:(0,c.px)(s)},"&::after":{...K,marginBottom:(0,c.px)(s)}}}}return T({toCSS:l,context:r?{}:{cancelHalfLeadingPx:s}})},K={display:`block`,width:0,height:0,content:`''`},be=[`monospace`,`bold`,`preserveHalfLeading`];function xe(e){let t=ye(e);return A({},[`typography`],e=>e=>M(be,n=>t(e,{preserveHalfLeading:n.includes(`preserveHalfLeading`),monospace:n.includes(`monospace`),bold:n.includes(`bold`)})))}function Se(e){return g(L(e),xe(e),ve(e),me(e),z(e),ae(e),se(e),W(e))}const Ce=d.createGlobalStyle`
+  ${({themeMap:e,background:t})=>Object.entries(e).map(([e,n])=>e.startsWith(`@media`)?d.css`
+            ${e} {
               :root {
-                ${background !== void 0 && styled_components.css`
-                  background-color: ${theme.color[background]};
+                ${t!==void 0&&d.css`
+                  background-color: ${n.color[t]};
                 `}
-                ${defineColorVariableCSS(theme)}
+                ${q(n)}
               }
             }
-          ` : styled_components.css`
+          `:d.css`
             /* stylelint-disable-next-line no-duplicate-selectors */
-            ${key} {
-              ${background !== void 0 && styled_components.css`
-                background-color: ${theme.color[background]};
+            ${e} {
+              ${t!==void 0&&d.css`
+                background-color: ${n.color[t]};
               `}
-              ${defineColorVariableCSS(theme)}
+              ${q(n)}
             }
           `)}
-`;
-function TokenInjector({ theme: themeMap, background }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GlobalStyle, {
-		themeMap,
-		background
-	});
-}
-const defineColorVariableCSS = (theme) => {
-	const borders = (0, __charcoal_ui_utils.mapObject)(theme.border, (name, { color }) => [withPrefixes("border", name), color]);
-	return toCSSVariables(defineThemeVariables({
-		...theme.color,
-		...borders
-	})({ theme }));
-};
-function toCSSVariables(css$8) {
-	return Object.entries(css$8).map(([varName, value]) => variableDefinition(varName, value.toString())).join(";");
-}
-const variableDefinition = (prop, value) => `${prop}: ${value}`;
-
-//#endregion
-//#region src/utils/typographyCss.ts
-const boldCss = styled_components.css`
+`;function we({theme:e,background:t}){return(0,f.jsx)(Ce,{themeMap:e,background:t})}const q=e=>{let t=(0,c.mapObject)(e.border,(e,{color:t})=>[C(`border`,e),t]);return Te(y({...e.color,...t})({theme:e}))};function Te(e){return Object.entries(e).map(([e,t])=>Ee(e,t.toString())).join(`;`)}const Ee=(e,t)=>`${e}: ${t}`,De=d.css`
   font-weight: bold;
-`;
-const removeHalfLeadingCss = styled_components.css`
+`,J=d.css`
   &::before {
     display: block;
     width: 0;
@@ -618,25 +35,13 @@ const removeHalfLeadingCss = styled_components.css`
     content: '';
     margin-bottom: -4px;
   }
-`;
-function typography(size$1, bold = false, preserveHalfLeading = false) {
-	return styled_components.css`
-    font-size: ${size$1}px;
-    line-height: ${size$1 + 8}px;
+`;function Oe(e,t=!1,n=!1){return d.css`
+    font-size: ${e}px;
+    line-height: ${e+8}px;
     display: flow-root;
-    ${bold === true && boldCss}
-    ${preserveHalfLeading !== true && removeHalfLeadingCss}
-  `;
-}
-
-//#endregion
-//#region src/styles/focusVisibleFocusRingCss.ts
-/**
-* `&:focus:not(:focus-visible)` is backwards compatibility for legacy browsers.
-*
-* cf. https://github.com/WICG/focus-visible#backwards-compatibility
-*/
-const focusVisibleFocusRingCss = styled_components.css`
+    ${t===!0&&De}
+    ${n!==!0&&J}
+  `}const Y=d.css`
   &:focus {
     outline: none;
     box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
@@ -647,253 +52,39 @@ const focusVisibleFocusRingCss = styled_components.css`
   &:focus-visible {
     box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
   }
-`;
-
-//#endregion
-//#region src/styles/disabledCss.ts
-const disabledCss = styled_components.css`
+`,X=d.css`
   &:disabled,
   &[aria-disabled]:not([aria-disabled='false']) {
     opacity: 0.32;
     cursor: default;
   }
-`;
-
-//#endregion
-//#region src/styles/assertiveRingCss.ts
-const assertiveRingCss = styled_components.css`
+`,Z=d.css`
   box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
-`;
-
-//#endregion
-//#region src/utils/helpers/pxIfNum.ts
-function pxIfNum(v) {
-	if (v === void 0) return "";
-	if (typeof v === "number") return `${v}px`;
-	return v;
-}
-
-//#endregion
-//#region src/utils/margin.ts
-function margin(arg1, arg2, arg3, arg4) {
-	return styled_components.css`
-    margin: ${pxIfNum(arg1)} ${pxIfNum(arg2)} ${pxIfNum(arg3)} ${pxIfNum(arg4)};
-  `;
-}
-function marginTop(v) {
-	return styled_components.css`
-    margin-top: ${pxIfNum(v)};
-  `;
-}
-function marginBottom(v) {
-	return styled_components.css`
-    margin-bottom: ${pxIfNum(v)};
-  `;
-}
-function marginLeft(v) {
-	return styled_components.css`
-    margin-left: ${pxIfNum(v)};
-  `;
-}
-function marginRight(v) {
-	return styled_components.css`
-    margin-right: ${pxIfNum(v)};
-  `;
-}
-
-//#endregion
-//#region src/utils/padding.ts
-function padding(arg1, arg2, arg3, arg4) {
-	return styled_components.css`
-    padding: ${arg1}px ${pxIfNum(arg2)} ${pxIfNum(arg3)} ${pxIfNum(arg4)};
-  `;
-}
-function paddingTop(v) {
-	return styled_components.css`
-    padding-top: ${v}px;
-  `;
-}
-function paddingBottom(v) {
-	return styled_components.css`
-    padding-bottom: ${v}px;
-  `;
-}
-function paddingLeft(v) {
-	return styled_components.css`
-    padding-left: ${v}px;
-  `;
-}
-function paddingRight(v) {
-	return styled_components.css`
-    padding-right: ${v}px;
-  `;
-}
-
-//#endregion
-//#region src/utils/gap.ts
-function gap(v1, v2) {
-	return styled_components.css`
-    gap: ${v1}px ${pxIfNum(v2)};
-  `;
-}
-function rowGap(v) {
-	return styled_components.css`
-    row-gap: ${v}px;
-  `;
-}
-function columnGap(v) {
-	return styled_components.css`
-    column-gap: ${v}px;
-  `;
-}
-
-//#endregion
-//#region src/utils/addThemeUtils.ts
-/**
-* Adds some utilities to the theme object.
-* They can be used as an alternative `createTheme`(`theme(o=>)`) for styling.
-*/
-function addThemeUtils(theme) {
-	return {
-		...theme,
-		utils: {
-			margin,
-			marginTop,
-			marginLeft,
-			marginBottom,
-			marginRight,
-			padding,
-			paddingTop,
-			paddingLeft,
-			paddingBottom,
-			paddingRight,
-			gap,
-			rowGap,
-			columnGap,
-			typography,
-			focusVisibleFocusRingCss,
-			assertiveRingCss,
-			disabledCss
-		}
-	};
-}
-
-//#endregion
-//#region src/index.ts
-const nonBlank = (value) => isPresent(value) && value !== false;
-/**
-* @deprecated
-* 実行時のパフォーマンスが低い問題があります。
-* ref. https://github.com/pixiv/charcoal/pull/377
-*
-* styled-components の theming 方法を推奨します。
-* ref. https://styled-components.com/docs/advanced#theming
-*
-* `theme(o => [...])` の `theme` ユーティリティを構築する
-*
-* @param _styled - DEPRECATED: styled-components の `styled` そのものを渡すとそれを元に型推論ができる。が、型引数を渡す方が型推論が高速になりやすい
-*
-* @example
-*
-* import styled from 'styled-components'
-* const theme = createTheme(styled)
-*
-* @example
-*
-* const theme = createTheme<DefaultTheme>()
-*/
-function createTheme(_styled) {
-	return function theme(specFn) {
-		return function interpolate({ theme: theme$1 }) {
-			if (!isPresent(theme$1)) throw noThemeProvider;
-			return toCSSObjects([...wrapArray(
-				/**
-				* こう書いてはいけない
-				*
-				* ❌
-				* ```ts
-				* const o = createO(theme)
-				* const declaration = spec(o)
-				* ```
-				*
-				* `o` を一時変数に入れてしまうと型 `T` の具象化が行われるので関数内に書く
-				*/
-				specFn(
-					/** o = */
-					createO(theme$1)
-				)
-			), transition(theme$1)].filter(nonBlank));
-		};
-	};
-}
-
-//#endregion
-Object.defineProperty(exports, 'SetThemeScript', {
-  enumerable: true,
-  get: function () {
-    return __charcoal_ui_react.SetThemeScript;
-  }
-});
-exports.TokenInjector = TokenInjector;
-exports.addThemeUtils = addThemeUtils;
-exports.assertiveRingCss = assertiveRingCss;
-exports.createTheme = createTheme;
-exports.defineThemeVariables = defineThemeVariables;
-exports.disabledCss = disabledCss;
-exports.focusVisibleFocusRingCss = focusVisibleFocusRingCss;
-Object.defineProperty(exports, 'getThemeSync', {
-  enumerable: true,
-  get: function () {
-    return __charcoal_ui_react.getThemeSync;
-  }
-});
-Object.defineProperty(exports, 'makeSetThemeScriptCode', {
-  enumerable: true,
-  get: function () {
-    return __charcoal_ui_react.makeSetThemeScriptCode;
-  }
-});
-Object.defineProperty(exports, 'prefersColorScheme', {
-  enumerable: true,
-  get: function () {
-    return __charcoal_ui_react.prefersColorScheme;
-  }
-});
-exports.removeHalfLeadingCss = removeHalfLeadingCss;
-Object.defineProperty(exports, 'themeSelector', {
-  enumerable: true,
-  get: function () {
-    return __charcoal_ui_react.themeSelector;
-  }
-});
-Object.defineProperty(exports, 'themeSetter', {
-  enumerable: true,
-  get: function () {
-    return __charcoal_ui_react.themeSetter;
-  }
-});
-Object.defineProperty(exports, 'useLocalStorage', {
-  enumerable: true,
-  get: function () {
-    return __charcoal_ui_react.useLocalStorage;
-  }
-});
-Object.defineProperty(exports, 'useMedia', {
-  enumerable: true,
-  get: function () {
-    return __charcoal_ui_react.useMedia;
-  }
-});
-Object.defineProperty(exports, 'useTheme', {
-  enumerable: true,
-  get: function () {
-    return __charcoal_ui_react.useTheme;
-  }
-});
-Object.defineProperty(exports, 'useThemeSetter', {
-  enumerable: true,
-  get: function () {
-    return __charcoal_ui_react.useThemeSetter;
-  }
-});
+`;function Q(e){return e===void 0?``:typeof e==`number`?`${e}px`:e}function ke(e,t,n,r){return d.css`
+    margin: ${Q(e)} ${Q(t)} ${Q(n)} ${Q(r)};
+  `}function Ae(e){return d.css`
+    margin-top: ${Q(e)};
+  `}function je(e){return d.css`
+    margin-bottom: ${Q(e)};
+  `}function Me(e){return d.css`
+    margin-left: ${Q(e)};
+  `}function Ne(e){return d.css`
+    margin-right: ${Q(e)};
+  `}function Pe(e,t,n,r){return d.css`
+    padding: ${e}px ${Q(t)} ${Q(n)} ${Q(r)};
+  `}function $(e){return d.css`
+    padding-top: ${e}px;
+  `}function Fe(e){return d.css`
+    padding-bottom: ${e}px;
+  `}function Ie(e){return d.css`
+    padding-left: ${e}px;
+  `}function Le(e){return d.css`
+    padding-right: ${e}px;
+  `}function Re(e,t){return d.css`
+    gap: ${e}px ${Q(t)};
+  `}function ze(e){return d.css`
+    row-gap: ${e}px;
+  `}function Be(e){return d.css`
+    column-gap: ${e}px;
+  `}function Ve(e){return{...e,utils:{margin:ke,marginTop:Ae,marginLeft:Me,marginBottom:je,marginRight:Ne,padding:Pe,paddingTop:$,paddingLeft:Ie,paddingBottom:Fe,paddingRight:Le,gap:Re,rowGap:ze,columnGap:Be,typography:Oe,focusVisibleFocusRingCss:Y,assertiveRingCss:Z,disabledCss:X}}}const He=e=>h(e)&&e!==!1;function Ue(e){return function(e){return function({theme:t}){if(!h(t))throw v;return k([...ee(e(Se(t))),ce(t)].filter(He))}}}Object.defineProperty(exports,`SetThemeScript`,{enumerable:!0,get:function(){return p.SetThemeScript}}),exports.TokenInjector=we,exports.addThemeUtils=Ve,exports.assertiveRingCss=Z,exports.createTheme=Ue,exports.defineThemeVariables=y,exports.disabledCss=X,exports.focusVisibleFocusRingCss=Y,Object.defineProperty(exports,`getThemeSync`,{enumerable:!0,get:function(){return p.getThemeSync}}),Object.defineProperty(exports,`makeSetThemeScriptCode`,{enumerable:!0,get:function(){return p.makeSetThemeScriptCode}}),Object.defineProperty(exports,`prefersColorScheme`,{enumerable:!0,get:function(){return p.prefersColorScheme}}),exports.removeHalfLeadingCss=J,Object.defineProperty(exports,`themeSelector`,{enumerable:!0,get:function(){return p.themeSelector}}),Object.defineProperty(exports,`themeSetter`,{enumerable:!0,get:function(){return p.themeSetter}}),Object.defineProperty(exports,`useLocalStorage`,{enumerable:!0,get:function(){return p.useLocalStorage}}),Object.defineProperty(exports,`useMedia`,{enumerable:!0,get:function(){return p.useMedia}}),Object.defineProperty(exports,`useTheme`,{enumerable:!0,get:function(){return p.useTheme}}),Object.defineProperty(exports,`useThemeSetter`,{enumerable:!0,get:function(){return p.useThemeSetter}});
 //# sourceMappingURL=index.cjs.map