@wordpress/ui 0.6.0 → 0.7.1-next.v.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/CHANGELOG.md +18 -1
- package/build/badge/badge.cjs +1 -1
- package/build/badge/badge.cjs.map +2 -2
- package/build/box/box.cjs +3 -7
- package/build/box/box.cjs.map +2 -2
- package/build/button/button.cjs +3 -3
- package/build/button/button.cjs.map +2 -2
- package/build/form/primitives/fieldset/root.cjs +3 -3
- package/build/form/primitives/fieldset/root.cjs.map +2 -2
- package/build/form/primitives/input-layout/input-layout.cjs +3 -3
- package/build/form/primitives/input-layout/input-layout.cjs.map +2 -2
- package/build/form/primitives/input-layout/slot.cjs +3 -3
- package/build/form/primitives/input-layout/slot.cjs.map +2 -2
- package/build/form/primitives/select/item.cjs +3 -3
- package/build/form/primitives/select/item.cjs.map +2 -2
- package/build/form/primitives/select/popup.cjs +3 -3
- package/build/form/primitives/select/popup.cjs.map +2 -2
- package/build/form/primitives/select/trigger.cjs +3 -3
- package/build/form/primitives/select/trigger.cjs.map +2 -2
- package/build/icon-button/icon-button.cjs +103 -0
- package/build/icon-button/icon-button.cjs.map +7 -0
- package/build/icon-button/index.cjs +31 -0
- package/build/icon-button/index.cjs.map +7 -0
- package/build/icon-button/types.cjs +19 -0
- package/build/icon-button/types.cjs.map +7 -0
- package/build/index.cjs +5 -0
- package/build/index.cjs.map +2 -2
- package/build/tabs/index.cjs +40 -0
- package/build/tabs/index.cjs.map +7 -0
- package/build/tabs/list.cjs +145 -0
- package/build/tabs/list.cjs.map +7 -0
- package/build/tabs/panel.cjs +67 -0
- package/build/tabs/panel.cjs.map +7 -0
- package/build/tabs/root.cjs +38 -0
- package/build/tabs/root.cjs.map +7 -0
- package/build/tabs/tab.cjs +71 -0
- package/build/tabs/tab.cjs.map +7 -0
- package/build/tabs/types.cjs +19 -0
- package/build/tabs/types.cjs.map +7 -0
- package/build/tooltip/popup.cjs +3 -3
- package/build/tooltip/popup.cjs.map +2 -2
- package/build-module/badge/badge.mjs +1 -1
- package/build-module/badge/badge.mjs.map +2 -2
- package/build-module/box/box.mjs +3 -7
- package/build-module/box/box.mjs.map +2 -2
- package/build-module/button/button.mjs +3 -3
- package/build-module/button/button.mjs.map +2 -2
- package/build-module/form/primitives/fieldset/root.mjs +3 -3
- package/build-module/form/primitives/fieldset/root.mjs.map +2 -2
- package/build-module/form/primitives/input-layout/input-layout.mjs +3 -3
- package/build-module/form/primitives/input-layout/input-layout.mjs.map +2 -2
- package/build-module/form/primitives/input-layout/slot.mjs +3 -3
- package/build-module/form/primitives/input-layout/slot.mjs.map +2 -2
- package/build-module/form/primitives/select/item.mjs +3 -3
- package/build-module/form/primitives/select/item.mjs.map +2 -2
- package/build-module/form/primitives/select/popup.mjs +3 -3
- package/build-module/form/primitives/select/popup.mjs.map +2 -2
- package/build-module/form/primitives/select/trigger.mjs +3 -3
- package/build-module/form/primitives/select/trigger.mjs.map +2 -2
- package/build-module/icon-button/icon-button.mjs +68 -0
- package/build-module/icon-button/icon-button.mjs.map +7 -0
- package/build-module/icon-button/index.mjs +6 -0
- package/build-module/icon-button/index.mjs.map +7 -0
- package/build-module/icon-button/types.mjs +1 -0
- package/build-module/icon-button/types.mjs.map +7 -0
- package/build-module/index.mjs +3 -0
- package/build-module/index.mjs.map +2 -2
- package/build-module/tabs/index.mjs +12 -0
- package/build-module/tabs/index.mjs.map +7 -0
- package/build-module/tabs/list.mjs +110 -0
- package/build-module/tabs/list.mjs.map +7 -0
- package/build-module/tabs/panel.mjs +32 -0
- package/build-module/tabs/panel.mjs.map +7 -0
- package/build-module/tabs/root.mjs +13 -0
- package/build-module/tabs/root.mjs.map +7 -0
- package/build-module/tabs/tab.mjs +36 -0
- package/build-module/tabs/tab.mjs.map +7 -0
- package/build-module/tabs/types.mjs +1 -0
- package/build-module/tabs/types.mjs.map +7 -0
- package/build-module/tooltip/popup.mjs +3 -3
- package/build-module/tooltip/popup.mjs.map +2 -2
- package/build-types/box/box.d.ts.map +1 -1
- package/build-types/box/stories/index.story.d.ts.map +1 -1
- package/build-types/button/stories/index.story.d.ts +1 -2
- package/build-types/button/stories/index.story.d.ts.map +1 -1
- package/build-types/form/primitives/field/stories/index.story.d.ts +0 -1
- package/build-types/form/primitives/field/stories/index.story.d.ts.map +1 -1
- package/build-types/form/primitives/select/stories/index.story.d.ts +0 -1
- package/build-types/form/primitives/select/stories/index.story.d.ts.map +1 -1
- package/build-types/icon-button/icon-button.d.ts +13 -0
- package/build-types/icon-button/icon-button.d.ts.map +1 -0
- package/build-types/icon-button/index.d.ts +2 -0
- package/build-types/icon-button/index.d.ts.map +1 -0
- package/build-types/icon-button/stories/index.story.d.ts +19 -0
- package/build-types/icon-button/stories/index.story.d.ts.map +1 -0
- package/build-types/icon-button/test/index.test.d.ts +2 -0
- package/build-types/icon-button/test/index.test.d.ts.map +1 -0
- package/build-types/icon-button/types.d.ts +36 -0
- package/build-types/icon-button/types.d.ts.map +1 -0
- package/build-types/index.d.ts +2 -0
- package/build-types/index.d.ts.map +1 -1
- package/build-types/tabs/index.d.ts +6 -0
- package/build-types/tabs/index.d.ts.map +1 -0
- package/build-types/tabs/list.d.ts +16 -0
- package/build-types/tabs/list.d.ts.map +1 -0
- package/build-types/tabs/panel.d.ts +15 -0
- package/build-types/tabs/panel.d.ts.map +1 -0
- package/build-types/tabs/root.d.ts +15 -0
- package/build-types/tabs/root.d.ts.map +1 -0
- package/build-types/tabs/stories/index.story.d.ts +13 -0
- package/build-types/tabs/stories/index.story.d.ts.map +1 -0
- package/build-types/tabs/tab.d.ts +15 -0
- package/build-types/tabs/tab.d.ts.map +1 -0
- package/build-types/tabs/test/index.test.d.ts +2 -0
- package/build-types/tabs/test/index.test.d.ts.map +1 -0
- package/build-types/tabs/types.d.ts +33 -0
- package/build-types/tabs/types.d.ts.map +1 -0
- package/package.json +11 -9
- package/src/badge/badge.tsx +1 -1
- package/src/box/box.tsx +4 -15
- package/src/box/stories/index.story.tsx +9 -1
- package/src/button/stories/index.story.tsx +3 -16
- package/src/button/style.module.css +6 -3
- package/src/form/primitives/field/stories/index.story.tsx +0 -1
- package/src/form/primitives/fieldset/style.module.css +1 -1
- package/src/form/primitives/input-layout/style.module.css +5 -8
- package/src/form/primitives/select/stories/index.story.tsx +0 -1
- package/src/icon-button/icon-button.tsx +64 -0
- package/src/icon-button/index.ts +1 -0
- package/src/icon-button/stories/index.story.tsx +128 -0
- package/src/icon-button/style.module.css +9 -0
- package/src/icon-button/test/index.test.tsx +86 -0
- package/src/icon-button/types.ts +38 -0
- package/src/index.ts +2 -0
- package/src/tabs/index.ts +6 -0
- package/src/tabs/list.tsx +130 -0
- package/src/tabs/panel.tsx +23 -0
- package/src/tabs/root.tsx +15 -0
- package/src/tabs/stories/best-practices.mdx +85 -0
- package/src/tabs/stories/index.story.tsx +363 -0
- package/src/tabs/style.module.css +269 -0
- package/src/tabs/tab.tsx +29 -0
- package/src/tabs/test/index.test.tsx +2260 -0
- package/src/tabs/types.ts +36 -0
- package/src/tooltip/style.module.css +2 -2
- package/src/utils/css/item-popup.module.css +1 -1
- package/src/utils/css/select-trigger.module.css +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,8 +2,26 @@
|
|
|
2
2
|
|
|
3
3
|
## Unreleased
|
|
4
4
|
|
|
5
|
+
## 0.7.0-next.0 (2026-02-05)
|
|
6
|
+
|
|
7
|
+
### New Features
|
|
8
|
+
|
|
9
|
+
- Add `Tabs` primitive ([#74652](https://github.com/WordPress/gutenberg/pull/74652)).
|
|
10
|
+
|
|
11
|
+
### Enhancements
|
|
12
|
+
|
|
13
|
+
- `Button`: Add minimum content width (`6ch` + padding) to prevent overly narrow buttons with short labels ([#75133](https://github.com/WordPress/gutenberg/pull/75133)).
|
|
14
|
+
|
|
15
|
+
### Internal
|
|
16
|
+
|
|
17
|
+
- `Button`, `InputLayout`, `Tabs`: use semantic dimension tokens ([#74557](https://github.com/WordPress/gutenberg/pull/74557)).
|
|
18
|
+
|
|
5
19
|
## 0.6.0 (2026-01-29)
|
|
6
20
|
|
|
21
|
+
### New Features
|
|
22
|
+
|
|
23
|
+
- Add `Select` primitive ([#74661](https://github.com/WordPress/gutenberg/pull/74661)).
|
|
24
|
+
|
|
7
25
|
## 0.5.0 (2026-01-16)
|
|
8
26
|
|
|
9
27
|
### Breaking Changes
|
|
@@ -20,4 +38,3 @@
|
|
|
20
38
|
- Add `Button` component ([#74415](https://github.com/WordPress/gutenberg/pull/74415), [#74416](https://github.com/WordPress/gutenberg/pull/74416), [#74470](https://github.com/WordPress/gutenberg/pull/74470)).
|
|
21
39
|
- Add `InputLayout` primitive ([#74313](https://github.com/WordPress/gutenberg/pull/74313)).
|
|
22
40
|
- Add `Input` primitive ([#74615](https://github.com/WordPress/gutenberg/pull/74615)).
|
|
23
|
-
- Add `Select` primitive ([#74661](https://github.com/WordPress/gutenberg/pull/74661)).
|
package/build/badge/badge.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/badge/badge.tsx"],
|
|
4
|
-
"sourcesContent": ["import { forwardRef } from '@wordpress/element';\nimport { Box } from '../box';\nimport { type BoxProps } from '../box/types';\nimport { type BadgeProps } from './types';\n\n/**\n * Default render function that renders a span element with the given props.\n */\nconst DEFAULT_RENDER = ( props: React.ComponentPropsWithoutRef< 'span' > ) => (\n\t<span { ...props } />\n);\n\n/**\n * Maps intent values to Box backgroundColor and color props.\n * Uses strong emphasis styles (as emphasis prop has been removed).\n */\nconst getIntentStyles = (\n\tintent: BadgeProps[ 'intent' ]\n): Partial< BoxProps > => {\n\tswitch ( intent ) {\n\t\tcase 'high':\n\t\t\treturn {\n\t\t\t\tbackgroundColor: 'error',\n\t\t\t\tcolor: 'error',\n\t\t\t};\n\t\tcase 'medium':\n\t\t\treturn {\n\t\t\t\tbackgroundColor: 'warning',\n\t\t\t\tcolor: 'warning',\n\t\t\t};\n\t\tcase 'low':\n\t\t\treturn {\n\t\t\t\tbackgroundColor: 'caution',\n\t\t\t\tcolor: 'caution',\n\t\t\t};\n\t\tcase 'stable':\n\t\t\treturn {\n\t\t\t\tbackgroundColor: 'success',\n\t\t\t\tcolor: 'success',\n\t\t\t};\n\t\tcase 'informational':\n\t\t\treturn {\n\t\t\t\tbackgroundColor: 'info',\n\t\t\t\tcolor: 'info',\n\t\t\t};\n\t\tcase 'draft':\n\t\t\treturn {\n\t\t\t\tbackgroundColor: 'neutral-weak',\n\t\t\t\tcolor: 'neutral',\n\t\t\t};\n\t\tcase 'none':\n\t\tdefault:\n\t\t\treturn {\n\t\t\t\tbackgroundColor: 'neutral',\n\t\t\t\tcolor: 'neutral-weak',\n\t\t\t};\n\t}\n};\n\n/**\n * A badge component for displaying labels with semantic intent.\n * Built on the Box primitive for consistent theming and accessibility.\n */\nexport const Badge = forwardRef< HTMLDivElement, BadgeProps >( function Badge(\n\t{ children, intent = 'none', render = DEFAULT_RENDER, ...props },\n\tref\n) {\n\tconst intentStyles = getIntentStyles( intent );\n\n\treturn (\n\t\t<Box\n\t\t\t{ ...intentStyles }\n\t\t\tpadding={ { inline: '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA2B;AAC3B,iBAAoB;AAQnB;AADD,IAAM,iBAAiB,CAAE,UACxB,4CAAC,UAAO,GAAG,OAAQ;AAOpB,IAAM,kBAAkB,CACvB,WACyB;AACzB,UAAS,QAAS;AAAA,IACjB,KAAK;AACJ,aAAO;AAAA,QACN,iBAAiB;AAAA,QACjB,OAAO;AAAA,MACR;AAAA,IACD,KAAK;AACJ,aAAO;AAAA,QACN,iBAAiB;AAAA,QACjB,OAAO;AAAA,MACR;AAAA,IACD,KAAK;AACJ,aAAO;AAAA,QACN,iBAAiB;AAAA,QACjB,OAAO;AAAA,MACR;AAAA,IACD,KAAK;AACJ,aAAO;AAAA,QACN,iBAAiB;AAAA,QACjB,OAAO;AAAA,MACR;AAAA,IACD,KAAK;AACJ,aAAO;AAAA,QACN,iBAAiB;AAAA,QACjB,OAAO;AAAA,MACR;AAAA,IACD,KAAK;AACJ,aAAO;AAAA,QACN,iBAAiB;AAAA,QACjB,OAAO;AAAA,MACR;AAAA,IACD,KAAK;AAAA,IACL;AACC,aAAO;AAAA,QACN,iBAAiB;AAAA,QACjB,OAAO;AAAA,MACR;AAAA,EACF;AACD;AAMO,IAAM,YAAQ,2BAA0C,SAASA,OACvE,EAAE,UAAU,SAAS,QAAQ,SAAS,gBAAgB,GAAG,MAAM,GAC/D,KACC;AACD,QAAM,eAAe,gBAAiB,MAAO;AAE7C,SACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACL,SAAU,EAAE,QAAQ,MAAM,OAAO,
|
|
4
|
+
"sourcesContent": ["import { forwardRef } from '@wordpress/element';\nimport { Box } from '../box';\nimport { type BoxProps } from '../box/types';\nimport { type BadgeProps } from './types';\n\n/**\n * Default render function that renders a span element with the given props.\n */\nconst DEFAULT_RENDER = ( props: React.ComponentPropsWithoutRef< 'span' > ) => (\n\t<span { ...props } />\n);\n\n/**\n * Maps intent values to Box backgroundColor and color props.\n * Uses strong emphasis styles (as emphasis prop has been removed).\n */\nconst getIntentStyles = (\n\tintent: BadgeProps[ 'intent' ]\n): Partial< BoxProps > => {\n\tswitch ( intent ) {\n\t\tcase 'high':\n\t\t\treturn {\n\t\t\t\tbackgroundColor: 'error',\n\t\t\t\tcolor: 'error',\n\t\t\t};\n\t\tcase 'medium':\n\t\t\treturn {\n\t\t\t\tbackgroundColor: 'warning',\n\t\t\t\tcolor: 'warning',\n\t\t\t};\n\t\tcase 'low':\n\t\t\treturn {\n\t\t\t\tbackgroundColor: 'caution',\n\t\t\t\tcolor: 'caution',\n\t\t\t};\n\t\tcase 'stable':\n\t\t\treturn {\n\t\t\t\tbackgroundColor: 'success',\n\t\t\t\tcolor: 'success',\n\t\t\t};\n\t\tcase 'informational':\n\t\t\treturn {\n\t\t\t\tbackgroundColor: 'info',\n\t\t\t\tcolor: 'info',\n\t\t\t};\n\t\tcase 'draft':\n\t\t\treturn {\n\t\t\t\tbackgroundColor: 'neutral-weak',\n\t\t\t\tcolor: 'neutral',\n\t\t\t};\n\t\tcase 'none':\n\t\tdefault:\n\t\t\treturn {\n\t\t\t\tbackgroundColor: 'neutral',\n\t\t\t\tcolor: 'neutral-weak',\n\t\t\t};\n\t}\n};\n\n/**\n * A badge component for displaying labels with semantic intent.\n * Built on the Box primitive for consistent theming and accessibility.\n */\nexport const Badge = forwardRef< HTMLDivElement, BadgeProps >( function Badge(\n\t{ children, intent = 'none', render = DEFAULT_RENDER, ...props },\n\tref\n) {\n\tconst intentStyles = getIntentStyles( intent );\n\n\treturn (\n\t\t<Box\n\t\t\t{ ...intentStyles }\n\t\t\tpadding={ { inline: 'sm', block: 'xs' } }\n\t\t\tborderRadius=\"lg\"\n\t\t\trender={ render }\n\t\t\tstyle={ {\n\t\t\t\tfontFamily: 'var(--wpds-font-family-body)',\n\t\t\t\tfontSize: 'var(--wpds-font-size-sm)',\n\t\t\t\tfontWeight: 'var(--wpds-font-weight-regular)',\n\t\t\t\tlineHeight: 'var(--wpds-font-line-height-xs)',\n\t\t\t\t...props.style,\n\t\t\t} }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t{ children }\n\t\t</Box>\n\t);\n} );\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA2B;AAC3B,iBAAoB;AAQnB;AADD,IAAM,iBAAiB,CAAE,UACxB,4CAAC,UAAO,GAAG,OAAQ;AAOpB,IAAM,kBAAkB,CACvB,WACyB;AACzB,UAAS,QAAS;AAAA,IACjB,KAAK;AACJ,aAAO;AAAA,QACN,iBAAiB;AAAA,QACjB,OAAO;AAAA,MACR;AAAA,IACD,KAAK;AACJ,aAAO;AAAA,QACN,iBAAiB;AAAA,QACjB,OAAO;AAAA,MACR;AAAA,IACD,KAAK;AACJ,aAAO;AAAA,QACN,iBAAiB;AAAA,QACjB,OAAO;AAAA,MACR;AAAA,IACD,KAAK;AACJ,aAAO;AAAA,QACN,iBAAiB;AAAA,QACjB,OAAO;AAAA,MACR;AAAA,IACD,KAAK;AACJ,aAAO;AAAA,QACN,iBAAiB;AAAA,QACjB,OAAO;AAAA,MACR;AAAA,IACD,KAAK;AACJ,aAAO;AAAA,QACN,iBAAiB;AAAA,QACjB,OAAO;AAAA,MACR;AAAA,IACD,KAAK;AAAA,IACL;AACC,aAAO;AAAA,QACN,iBAAiB;AAAA,QACjB,OAAO;AAAA,MACR;AAAA,EACF;AACD;AAMO,IAAM,YAAQ,2BAA0C,SAASA,OACvE,EAAE,UAAU,SAAS,QAAQ,SAAS,gBAAgB,GAAG,MAAM,GAC/D,KACC;AACD,QAAM,eAAe,gBAAiB,MAAO;AAE7C,SACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACL,SAAU,EAAE,QAAQ,MAAM,OAAO,KAAK;AAAA,MACtC,cAAa;AAAA,MACb;AAAA,MACA,OAAQ;AAAA,QACP,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,GAAG,MAAM;AAAA,MACV;AAAA,MACA;AAAA,MAEE;AAAA;AAAA,EACH;AAEF,CAAE;",
|
|
6
6
|
"names": ["Badge"]
|
|
7
7
|
}
|
package/build/box/box.cjs
CHANGED
|
@@ -28,13 +28,12 @@ var import_element = require("@wordpress/element");
|
|
|
28
28
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
29
29
|
var DEFAULT_RENDER = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...props });
|
|
30
30
|
var capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
|
|
31
|
-
var getSpacingValue = (property,
|
|
32
|
-
var getDimensionVariantStyles = (property,
|
|
31
|
+
var getSpacingValue = (property, value) => `var(--wpds-dimension-${property}-${value}, var(--wpds-dimension-${property}-${value}))`;
|
|
32
|
+
var getDimensionVariantStyles = (property, value) => typeof value !== "object" ? { [property]: getSpacingValue(property, value) } : Object.keys(value).reduce(
|
|
33
33
|
(result, key) => ({
|
|
34
34
|
...result,
|
|
35
35
|
[property + capitalize(key)]: getSpacingValue(
|
|
36
36
|
property,
|
|
37
|
-
target,
|
|
38
37
|
value[key]
|
|
39
38
|
)
|
|
40
39
|
}),
|
|
@@ -59,10 +58,7 @@ var Box = (0, import_element.forwardRef)(function Box2({
|
|
|
59
58
|
style.color = `var(--wpds-color-fg-${target}-${color}, var(--wpds-color-fg-content-${color}))`;
|
|
60
59
|
}
|
|
61
60
|
if (padding) {
|
|
62
|
-
Object.assign(
|
|
63
|
-
style,
|
|
64
|
-
getDimensionVariantStyles("padding", target, padding)
|
|
65
|
-
);
|
|
61
|
+
Object.assign(style, getDimensionVariantStyles("padding", padding));
|
|
66
62
|
}
|
|
67
63
|
if (borderRadius) {
|
|
68
64
|
style.borderRadius = `var(--wpds-border-radius-${target}-${borderRadius}, var(--wpds-border-radius-${borderRadius}))`;
|
package/build/box/box.cjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/box/box.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useRender, mergeProps } from '@base-ui/react';\nimport { forwardRef } from '@wordpress/element';\nimport { type BoxProps } from './types';\n\n/**\n * Default render function that renders a div element with the given props.\n */\nconst DEFAULT_RENDER = ( props: React.ComponentPropsWithoutRef< 'div' > ) => (\n\t<div { ...props } />\n);\n\n/**\n * Capitalizes the first character of a string.\n */\nconst capitalize = ( str: string ): string =>\n\tstr.charAt( 0 ).toUpperCase() + str.slice( 1 );\n\n/**\n * Converts a size token name to a CSS design token property reference (with\n * fallback).\n *\n * @param property The CSS property name.\n * @param
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsC;AACtC,qBAA2B;AAO1B;AADD,IAAM,iBAAiB,CAAE,UACxB,4CAAC,SAAM,GAAG,OAAQ;AAMnB,IAAM,aAAa,CAAE,QACpB,IAAI,OAAQ,CAAE,EAAE,YAAY,IAAI,IAAI,MAAO,CAAE;
|
|
4
|
+
"sourcesContent": ["import { useRender, mergeProps } from '@base-ui/react';\nimport { forwardRef } from '@wordpress/element';\nimport { type BoxProps } from './types';\n\n/**\n * Default render function that renders a div element with the given props.\n */\nconst DEFAULT_RENDER = ( props: React.ComponentPropsWithoutRef< 'div' > ) => (\n\t<div { ...props } />\n);\n\n/**\n * Capitalizes the first character of a string.\n */\nconst capitalize = ( str: string ): string =>\n\tstr.charAt( 0 ).toUpperCase() + str.slice( 1 );\n\n/**\n * Converts a size token name to a CSS design token property reference (with\n * fallback).\n *\n * @param property The CSS property name.\n * @param value The size token name.\n * @return A CSS value string with variable references.\n */\nconst getSpacingValue = ( property: string, value: string ): string =>\n\t`var(--wpds-dimension-${ property }-${ value }, var(--wpds-dimension-${ property }-${ value }))`;\n\n/**\n * Generates CSS styles for properties with optionally directional values,\n * normalizing single values and objects with directional keys for logical\n * properties.\n *\n * @param property The CSS property name from BoxProps.\n * @param value The property value (single or object with directional keys).\n * @return A CSSProperties object with the computed styles.\n */\nconst getDimensionVariantStyles = < T extends keyof BoxProps >(\n\tproperty: T,\n\tvalue: NonNullable< BoxProps[ T ] >\n): React.CSSProperties =>\n\ttypeof value !== 'object'\n\t\t? { [ property ]: getSpacingValue( property, value ) }\n\t\t: Object.keys( value ).reduce(\n\t\t\t\t( result, key ) => ( {\n\t\t\t\t\t...result,\n\t\t\t\t\t[ property + capitalize( key ) ]: getSpacingValue(\n\t\t\t\t\t\tproperty,\n\t\t\t\t\t\tvalue[ key ]\n\t\t\t\t\t),\n\t\t\t\t} ),\n\t\t\t\t{} as Record< string, string >\n\t\t );\n\n/**\n * A low-level visual primitive that provides an interface for applying design\n * token-based customization for background, text, padding, and more.\n */\nexport const Box = forwardRef< HTMLDivElement, BoxProps >( function Box(\n\t{\n\t\ttarget = 'surface',\n\t\tbackgroundColor,\n\t\tcolor,\n\t\tpadding,\n\t\tborderRadius,\n\t\tborderWidth,\n\t\tborderColor,\n\t\trender = DEFAULT_RENDER,\n\t\t...props\n\t},\n\tref\n) {\n\tconst style: React.CSSProperties = {};\n\n\tif ( backgroundColor ) {\n\t\tstyle.backgroundColor = `var(--wpds-color-bg-${ target }-${ backgroundColor }, var(--wpds-color-bg-surface-${ backgroundColor }))`;\n\t}\n\n\tif ( color ) {\n\t\tstyle.color = `var(--wpds-color-fg-${ target }-${ color }, var(--wpds-color-fg-content-${ color }))`;\n\t}\n\n\tif ( padding ) {\n\t\tObject.assign( style, getDimensionVariantStyles( 'padding', padding ) );\n\t}\n\n\tif ( borderRadius ) {\n\t\tstyle.borderRadius = `var(--wpds-border-radius-${ target }-${ borderRadius }, var(--wpds-border-radius-${ borderRadius }))`;\n\t}\n\n\tif ( borderWidth ) {\n\t\tstyle.borderWidth = `var(--wpds-border-width-${ target }-${ borderWidth }, var(--wpds-border-width-${ borderWidth }))`;\n\t\tstyle.borderStyle = 'solid';\n\t}\n\n\tif ( borderColor ) {\n\t\tstyle.borderColor = `var(--wpds-color-stroke-${ target }-${ borderColor }, var(--wpds-color-stroke-surface-${ borderColor }))`;\n\t}\n\n\tconst element = useRender( {\n\t\trender,\n\t\tref,\n\t\tprops: mergeProps< 'div' >( props, { style } ),\n\t} );\n\n\treturn element;\n} );\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsC;AACtC,qBAA2B;AAO1B;AADD,IAAM,iBAAiB,CAAE,UACxB,4CAAC,SAAM,GAAG,OAAQ;AAMnB,IAAM,aAAa,CAAE,QACpB,IAAI,OAAQ,CAAE,EAAE,YAAY,IAAI,IAAI,MAAO,CAAE;AAU9C,IAAM,kBAAkB,CAAE,UAAkB,UAC3C,wBAAyB,QAAS,IAAK,KAAM,0BAA2B,QAAS,IAAK,KAAM;AAW7F,IAAM,4BAA4B,CACjC,UACA,UAEA,OAAO,UAAU,WACd,EAAE,CAAE,QAAS,GAAG,gBAAiB,UAAU,KAAM,EAAE,IACnD,OAAO,KAAM,KAAM,EAAE;AAAA,EACrB,CAAE,QAAQ,SAAW;AAAA,IACpB,GAAG;AAAA,IACH,CAAE,WAAW,WAAY,GAAI,CAAE,GAAG;AAAA,MACjC;AAAA,MACA,MAAO,GAAI;AAAA,IACZ;AAAA,EACD;AAAA,EACA,CAAC;AACD;AAMG,IAAM,UAAM,2BAAwC,SAASA,KACnE;AAAA,EACC,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,GAAG;AACJ,GACA,KACC;AACD,QAAM,QAA6B,CAAC;AAEpC,MAAK,iBAAkB;AACtB,UAAM,kBAAkB,uBAAwB,MAAO,IAAK,eAAgB,iCAAkC,eAAgB;AAAA,EAC/H;AAEA,MAAK,OAAQ;AACZ,UAAM,QAAQ,uBAAwB,MAAO,IAAK,KAAM,iCAAkC,KAAM;AAAA,EACjG;AAEA,MAAK,SAAU;AACd,WAAO,OAAQ,OAAO,0BAA2B,WAAW,OAAQ,CAAE;AAAA,EACvE;AAEA,MAAK,cAAe;AACnB,UAAM,eAAe,4BAA6B,MAAO,IAAK,YAAa,8BAA+B,YAAa;AAAA,EACxH;AAEA,MAAK,aAAc;AAClB,UAAM,cAAc,2BAA4B,MAAO,IAAK,WAAY,6BAA8B,WAAY;AAClH,UAAM,cAAc;AAAA,EACrB;AAEA,MAAK,aAAc;AAClB,UAAM,cAAc,2BAA4B,MAAO,IAAK,WAAY,qCAAsC,WAAY;AAAA,EAC3H;AAEA,QAAM,cAAU,wBAAW;AAAA,IAC1B;AAAA,IACA;AAAA,IACA,WAAO,yBAAqB,OAAO,EAAE,MAAM,CAAE;AAAA,EAC9C,CAAE;AAEF,SAAO;AACR,CAAE;",
|
|
6
6
|
"names": ["Box"]
|
|
7
7
|
}
|
package/build/button/button.cjs
CHANGED
|
@@ -40,10 +40,10 @@ var import_element = require("@wordpress/element");
|
|
|
40
40
|
var import_i18n = require("@wordpress/i18n");
|
|
41
41
|
|
|
42
42
|
// packages/ui/src/button/style.module.css
|
|
43
|
-
if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='
|
|
43
|
+
if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='dcff330c64']")) {
|
|
44
44
|
const style = document.createElement("style");
|
|
45
|
-
style.setAttribute("data-wp-hash", "
|
|
46
|
-
style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._97b0fc33c028be1a__button,.abbb272e2ce49bd6__is-unstyled{appearance:none;padding:0}._97b0fc33c028be1a__button{--wp-ui-button-font-weight:499;--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-strong-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-strong-disabled);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-brand-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-brand-strong-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-strong-disabled);--wp-ui-button-padding-inline:
|
|
45
|
+
style.setAttribute("data-wp-hash", "dcff330c64");
|
|
46
|
+
style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._97b0fc33c028be1a__button,.abbb272e2ce49bd6__is-unstyled{appearance:none;padding:0}._97b0fc33c028be1a__button{--wp-ui-button-font-weight:499;--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-strong-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-strong-disabled);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-brand-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-brand-strong-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-strong-disabled);--wp-ui-button-padding-inline:var(--wpds-dimension-padding-md);--wp-ui-button-height:40px;--wp-ui-button-aspect-ratio:auto;--wp-ui-button-font-size:var(--wpds-font-size-md);--wp-ui-button-min-width:calc(4ch + var(--wp-ui-button-padding-inline)*2);--wp-ui-button-border-color:var(--wp-ui-button-background-color);--wp-ui-button-border-color-active:var(--wp-ui-button-background-color-active);--wp-ui-button-border-color-disabled:var(--wp-ui-button-background-color-disabled);align-items:center;aspect-ratio:var(--wp-ui-button-aspect-ratio);background-clip:padding-box;background-color:var(--wp-ui-button-background-color);border-color:var(--wp-ui-button-border-color);border-radius:var(--wpds-border-radius-sm);border-style:solid;border-width:1px;color:var(--wp-ui-button-foreground-color);display:inline-flex;font-family:var(--wpds-font-family-body);font-size:var(--wp-ui-button-font-size);font-weight:var(--wp-ui-button-font-weight);gap:var(--wpds-dimension-gap-sm);height:var(--wp-ui-button-height);justify-content:center;line-height:var(--wpds-font-line-height-sm);min-width:var(--wp-ui-button-min-width);padding-inline:var(--wp-ui-button-padding-inline);position:relative;text-decoration:none;@media not (prefers-reduced-motion){transition:color .1s ease-out;*{transition:opacity .1s ease-out}}&[href]{cursor:pointer}[href]{color:inherit;text-decoration:inherit}&:not([aria-disabled=true]):is(:hover,:active,:focus){--wp-ui-button-background-color:var(--wp-ui-button-background-color-active);--wp-ui-button-foreground-color:var(--wp-ui-button-foreground-color-active);--wp-ui-button-border-color:var(--wp-ui-button-border-color-active)}&[aria-disabled=true]:not(._914b42f315c0e580__is-loading){--wp-ui-button-background-color:var(--wp-ui-button-background-color-disabled);--wp-ui-button-foreground-color:var(--wp-ui-button-foreground-color-disabled);--wp-ui-button-border-color:var(--wp-ui-button-border-color-disabled);@media (forced-colors:active){border-bottom-color:GrayText;border-left-color:GrayText;border-right-color:GrayText;border-top-color:GrayText;color:GrayText}}&:before{aspect-ratio:1;border:var(--wpds-border-width-focus) solid;border-block-end-color:#0000;border-block-start-color:var(--wp-ui-button-foreground-color);border-inline-end-color:var(--wp-ui-button-foreground-color);border-inline-start-color:#0000;border-radius:50%;box-sizing:border-box;content:"";display:block;height:var(--wp-ui-button-font-size);inset-inline-start:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);@media not (prefers-reduced-motion){transition:opacity .1s ease-out}}}._908205475f9f2a92__is-small{--wp-ui-button-padding-inline:var(--wpds-dimension-padding-sm);--wp-ui-button-height:24px}.dd460c965226cc77__is-brand{&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-brand);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-brand-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-disabled)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-brand);--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-brand-active);--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-neutral-disabled)}&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled)}}.e722a8f96726aa99__is-neutral{&.b50b3358c5fb4d0b__is-solid{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-strong-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-strong-disabled);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-strong-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-strong-disabled)}&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-disabled)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-neutral);--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-neutral-active);--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-neutral-disabled)}&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled)}}.abbb272e2ce49bd6__is-unstyled{background:none;border:none;min-width:unset}.cf59cf1b69629838__is-compact{--wp-ui-button-height:32px}._914b42f315c0e580__is-loading{color:#0000;*{opacity:0}&:before{opacity:1;transition-delay:.05s;@media not (prefers-reduced-motion){animation:_5a1d53da6f830c8d__loading-animation 1s linear infinite}}}[aria-pressed=true].ad0619a3217c6a5b__is-minimal.e722a8f96726aa99__is-neutral{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-strong)}}@keyframes _5a1d53da6f830c8d__loading-animation{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}'));
|
|
47
47
|
document.head.appendChild(style);
|
|
48
48
|
}
|
|
49
49
|
var style_default = { "button": "_97b0fc33c028be1a__button", "is-unstyled": "abbb272e2ce49bd6__is-unstyled", "is-loading": "_914b42f315c0e580__is-loading", "is-small": "_908205475f9f2a92__is-small", "is-brand": "dd460c965226cc77__is-brand", "is-outline": "_62d5a778b7b258ee__is-outline", "is-minimal": "ad0619a3217c6a5b__is-minimal", "is-neutral": "e722a8f96726aa99__is-neutral", "is-solid": "b50b3358c5fb4d0b__is-solid", "is-compact": "cf59cf1b69629838__is-compact", "loading-animation": "_5a1d53da6f830c8d__loading-animation" };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/button/button.tsx", "../../src/button/style.module.css", "../../src/utils/css/resets.module.css", "../../src/utils/css/focus.module.css"],
|
|
4
|
-
"sourcesContent": ["import { Button as _Button } from '@base-ui/react/button';\nimport clsx from 'clsx';\nimport { speak } from '@wordpress/a11y';\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { type ButtonProps } from './types';\nimport styles from './style.module.css';\nimport resetStyles from '../utils/css/resets.module.css';\nimport focusStyles from '../utils/css/focus.module.css';\n\nexport const Button = forwardRef< HTMLButtonElement, ButtonProps >(\n\tfunction Button(\n\t\t{\n\t\t\ttone = 'brand',\n\t\t\tvariant = 'solid',\n\t\t\tsize = 'default',\n\t\t\tclassName,\n\t\t\tfocusableWhenDisabled = true,\n\t\t\tdisabled,\n\t\t\tloading,\n\t\t\tloadingAnnouncement = __( 'Loading' ),\n\t\t\tchildren,\n\t\t\t...props\n\t\t},\n\t\tref\n\t) {\n\t\tconst mergedClassName = clsx(\n\t\t\tresetStyles[ 'box-sizing' ],\n\t\t\tfocusStyles[ 'outset-ring--focus-except-active' ],\n\t\t\tvariant !== 'unstyled' && styles.button,\n\t\t\tstyles[ `is-${ tone }` ],\n\t\t\tstyles[ `is-${ variant }` ],\n\t\t\tstyles[ `is-${ size }` ],\n\t\t\tloading && styles[ 'is-loading' ],\n\t\t\tclassName\n\t\t);\n\n\t\t// Announce loading state to assistive technology\n\t\tuseEffect( () => {\n\t\t\tif ( loading && loadingAnnouncement ) {\n\t\t\t\tspeak( loadingAnnouncement );\n\t\t\t}\n\t\t}, [ loading, loadingAnnouncement ] );\n\n\t\treturn (\n\t\t\t<_Button\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ mergedClassName }\n\t\t\t\tfocusableWhenDisabled={ focusableWhenDisabled }\n\t\t\t\tdisabled={ disabled ?? loading }\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</_Button>\n\t\t);\n\t}\n);\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='e89bb0a0ac']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"e89bb0a0ac\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._97b0fc33c028be1a__button,.abbb272e2ce49bd6__is-unstyled{appearance:none;padding:0}._97b0fc33c028be1a__button{--wp-ui-button-font-weight:499;--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-strong-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-strong-disabled);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-brand-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-brand-strong-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-strong-disabled);--wp-ui-button-padding-inline:calc(var(--wpds-dimension-base)*3);--wp-ui-button-height:40px;--wp-ui-button-aspect-ratio:auto;--wp-ui-button-font-size:var(--wpds-font-size-md);--wp-ui-button-border-color:var(--wp-ui-button-background-color);--wp-ui-button-border-color-active:var(--wp-ui-button-background-color-active);--wp-ui-button-border-color-disabled:var(--wp-ui-button-background-color-disabled);align-items:center;aspect-ratio:var(--wp-ui-button-aspect-ratio);background-clip:padding-box;background-color:var(--wp-ui-button-background-color);border-color:var(--wp-ui-button-border-color);border-radius:var(--wpds-border-radius-sm);border-style:solid;border-width:1px;color:var(--wp-ui-button-foreground-color);display:inline-flex;font-family:var(--wpds-font-family-body);font-size:var(--wp-ui-button-font-size);font-weight:var(--wp-ui-button-font-weight);gap:calc(var(--wpds-dimension-base)*2);height:var(--wp-ui-button-height);justify-content:center;line-height:var(--wpds-font-line-height-sm);padding-inline:var(--wp-ui-button-padding-inline);position:relative;text-decoration:none;@media not (prefers-reduced-motion){transition:color .1s ease-out;*{transition:opacity .1s ease-out}}&[href]{cursor:pointer}[href]{color:inherit;text-decoration:inherit}&:not([aria-disabled=true]):is(:hover,:active,:focus){--wp-ui-button-background-color:var(--wp-ui-button-background-color-active);--wp-ui-button-foreground-color:var(--wp-ui-button-foreground-color-active);--wp-ui-button-border-color:var(--wp-ui-button-border-color-active)}&[aria-disabled=true]:not(._914b42f315c0e580__is-loading){--wp-ui-button-background-color:var(--wp-ui-button-background-color-disabled);--wp-ui-button-foreground-color:var(--wp-ui-button-foreground-color-disabled);--wp-ui-button-border-color:var(--wp-ui-button-border-color-disabled);@media (forced-colors:active){border-bottom-color:GrayText;border-left-color:GrayText;border-right-color:GrayText;border-top-color:GrayText;color:GrayText}}&:before{aspect-ratio:1;border:var(--wpds-border-width-focus) solid;border-block-end-color:#0000;border-block-start-color:var(--wp-ui-button-foreground-color);border-inline-end-color:var(--wp-ui-button-foreground-color);border-inline-start-color:#0000;border-radius:50%;box-sizing:border-box;content:\\\"\\\";display:block;height:var(--wp-ui-button-font-size);inset-inline-start:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);@media not (prefers-reduced-motion){transition:opacity .1s ease-out}}}._908205475f9f2a92__is-small{--wp-ui-button-padding-inline:calc(var(--wpds-dimension-base)*2);--wp-ui-button-height:24px}.dd460c965226cc77__is-brand{&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-brand);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-brand-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-disabled)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-brand);--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-brand-active);--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-neutral-disabled)}&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled)}}.e722a8f96726aa99__is-neutral{&.b50b3358c5fb4d0b__is-solid{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-strong-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-strong-disabled);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-strong-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-strong-disabled)}&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-disabled)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-neutral);--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-neutral-active);--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-neutral-disabled)}&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled)}}.abbb272e2ce49bd6__is-unstyled{background:none;border:none}.cf59cf1b69629838__is-compact{--wp-ui-button-height:32px}._914b42f315c0e580__is-loading{color:#0000;*{opacity:0}&:before{opacity:1;transition-delay:.05s;@media not (prefers-reduced-motion){animation:_5a1d53da6f830c8d__loading-animation 1s linear infinite}}}[aria-pressed=true].ad0619a3217c6a5b__is-minimal.e722a8f96726aa99__is-neutral{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-strong)}}@keyframes _5a1d53da6f830c8d__loading-animation{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"button\":\"_97b0fc33c028be1a__button\",\"is-unstyled\":\"abbb272e2ce49bd6__is-unstyled\",\"is-loading\":\"_914b42f315c0e580__is-loading\",\"is-small\":\"_908205475f9f2a92__is-small\",\"is-brand\":\"dd460c965226cc77__is-brand\",\"is-outline\":\"_62d5a778b7b258ee__is-outline\",\"is-minimal\":\"ad0619a3217c6a5b__is-minimal\",\"is-neutral\":\"e722a8f96726aa99__is-neutral\",\"is-solid\":\"b50b3358c5fb4d0b__is-solid\",\"is-compact\":\"cf59cf1b69629838__is-compact\",\"loading-animation\":\"_5a1d53da6f830c8d__loading-animation\"};\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='671ebfc62d']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"671ebfc62d\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._336cd3e4e743482f__box-sizing{box-sizing:border-box;*,:after,:before{box-sizing:inherit}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"box-sizing\":\"_336cd3e4e743482f__box-sizing\"};\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='28ad59e2e3']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"28ad59e2e3\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._08e8a2e44959f892__outset-ring--focus,._970d04df7376df67__outset-ring--focus-within-except-active,.c5cb3ee4bddaa8e4__outset-ring--focus-within-visible,.cd83dfc2126a0846__outset-ring--focus-within,.d0541bc9dd9dc7b6__outset-ring--focus-visible,.e25b2bdd7aa21721__outset-ring--focus-except-active{@media not (prefers-reduced-motion){transition:outline .1s ease-out}outline-color:#0000;outline-offset:1px;outline-style:solid;outline-width:0}._08e8a2e44959f892__outset-ring--focus:focus,._970d04df7376df67__outset-ring--focus-within-except-active:focus-within:not(:has(:active)),.c5cb3ee4bddaa8e4__outset-ring--focus-within-visible:focus-within:has(:focus-visible),.cd83dfc2126a0846__outset-ring--focus-within:focus-within,.d0541bc9dd9dc7b6__outset-ring--focus-visible:focus-visible,.e25b2bdd7aa21721__outset-ring--focus-except-active:focus:not(:active){outline-color:var(--wpds-color-stroke-focus-brand);outline-width:var(--wpds-border-width-focus)}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"outset-ring--focus\":\"_08e8a2e44959f892__outset-ring--focus\",\"outset-ring--focus-except-active\":\"e25b2bdd7aa21721__outset-ring--focus-except-active\",\"outset-ring--focus-visible\":\"d0541bc9dd9dc7b6__outset-ring--focus-visible\",\"outset-ring--focus-within\":\"cd83dfc2126a0846__outset-ring--focus-within\",\"outset-ring--focus-within-except-active\":\"_970d04df7376df67__outset-ring--focus-within-except-active\",\"outset-ring--focus-within-visible\":\"c5cb3ee4bddaa8e4__outset-ring--focus-within-visible\"};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAkC;AAClC,kBAAiB;AACjB,kBAAsB;AACtB,qBAAsC;AACtC,kBAAmB;;;ACJnB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,
|
|
4
|
+
"sourcesContent": ["import { Button as _Button } from '@base-ui/react/button';\nimport clsx from 'clsx';\nimport { speak } from '@wordpress/a11y';\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { type ButtonProps } from './types';\nimport styles from './style.module.css';\nimport resetStyles from '../utils/css/resets.module.css';\nimport focusStyles from '../utils/css/focus.module.css';\n\nexport const Button = forwardRef< HTMLButtonElement, ButtonProps >(\n\tfunction Button(\n\t\t{\n\t\t\ttone = 'brand',\n\t\t\tvariant = 'solid',\n\t\t\tsize = 'default',\n\t\t\tclassName,\n\t\t\tfocusableWhenDisabled = true,\n\t\t\tdisabled,\n\t\t\tloading,\n\t\t\tloadingAnnouncement = __( 'Loading' ),\n\t\t\tchildren,\n\t\t\t...props\n\t\t},\n\t\tref\n\t) {\n\t\tconst mergedClassName = clsx(\n\t\t\tresetStyles[ 'box-sizing' ],\n\t\t\tfocusStyles[ 'outset-ring--focus-except-active' ],\n\t\t\tvariant !== 'unstyled' && styles.button,\n\t\t\tstyles[ `is-${ tone }` ],\n\t\t\tstyles[ `is-${ variant }` ],\n\t\t\tstyles[ `is-${ size }` ],\n\t\t\tloading && styles[ 'is-loading' ],\n\t\t\tclassName\n\t\t);\n\n\t\t// Announce loading state to assistive technology\n\t\tuseEffect( () => {\n\t\t\tif ( loading && loadingAnnouncement ) {\n\t\t\t\tspeak( loadingAnnouncement );\n\t\t\t}\n\t\t}, [ loading, loadingAnnouncement ] );\n\n\t\treturn (\n\t\t\t<_Button\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ mergedClassName }\n\t\t\t\tfocusableWhenDisabled={ focusableWhenDisabled }\n\t\t\t\tdisabled={ disabled ?? loading }\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</_Button>\n\t\t);\n\t}\n);\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='dcff330c64']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"dcff330c64\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._97b0fc33c028be1a__button,.abbb272e2ce49bd6__is-unstyled{appearance:none;padding:0}._97b0fc33c028be1a__button{--wp-ui-button-font-weight:499;--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-strong-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-strong-disabled);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-brand-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-brand-strong-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-strong-disabled);--wp-ui-button-padding-inline:var(--wpds-dimension-padding-md);--wp-ui-button-height:40px;--wp-ui-button-aspect-ratio:auto;--wp-ui-button-font-size:var(--wpds-font-size-md);--wp-ui-button-min-width:calc(4ch + var(--wp-ui-button-padding-inline)*2);--wp-ui-button-border-color:var(--wp-ui-button-background-color);--wp-ui-button-border-color-active:var(--wp-ui-button-background-color-active);--wp-ui-button-border-color-disabled:var(--wp-ui-button-background-color-disabled);align-items:center;aspect-ratio:var(--wp-ui-button-aspect-ratio);background-clip:padding-box;background-color:var(--wp-ui-button-background-color);border-color:var(--wp-ui-button-border-color);border-radius:var(--wpds-border-radius-sm);border-style:solid;border-width:1px;color:var(--wp-ui-button-foreground-color);display:inline-flex;font-family:var(--wpds-font-family-body);font-size:var(--wp-ui-button-font-size);font-weight:var(--wp-ui-button-font-weight);gap:var(--wpds-dimension-gap-sm);height:var(--wp-ui-button-height);justify-content:center;line-height:var(--wpds-font-line-height-sm);min-width:var(--wp-ui-button-min-width);padding-inline:var(--wp-ui-button-padding-inline);position:relative;text-decoration:none;@media not (prefers-reduced-motion){transition:color .1s ease-out;*{transition:opacity .1s ease-out}}&[href]{cursor:pointer}[href]{color:inherit;text-decoration:inherit}&:not([aria-disabled=true]):is(:hover,:active,:focus){--wp-ui-button-background-color:var(--wp-ui-button-background-color-active);--wp-ui-button-foreground-color:var(--wp-ui-button-foreground-color-active);--wp-ui-button-border-color:var(--wp-ui-button-border-color-active)}&[aria-disabled=true]:not(._914b42f315c0e580__is-loading){--wp-ui-button-background-color:var(--wp-ui-button-background-color-disabled);--wp-ui-button-foreground-color:var(--wp-ui-button-foreground-color-disabled);--wp-ui-button-border-color:var(--wp-ui-button-border-color-disabled);@media (forced-colors:active){border-bottom-color:GrayText;border-left-color:GrayText;border-right-color:GrayText;border-top-color:GrayText;color:GrayText}}&:before{aspect-ratio:1;border:var(--wpds-border-width-focus) solid;border-block-end-color:#0000;border-block-start-color:var(--wp-ui-button-foreground-color);border-inline-end-color:var(--wp-ui-button-foreground-color);border-inline-start-color:#0000;border-radius:50%;box-sizing:border-box;content:\\\"\\\";display:block;height:var(--wp-ui-button-font-size);inset-inline-start:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);@media not (prefers-reduced-motion){transition:opacity .1s ease-out}}}._908205475f9f2a92__is-small{--wp-ui-button-padding-inline:var(--wpds-dimension-padding-sm);--wp-ui-button-height:24px}.dd460c965226cc77__is-brand{&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-brand);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-brand-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-disabled)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-brand);--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-brand-active);--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-neutral-disabled)}&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled)}}.e722a8f96726aa99__is-neutral{&.b50b3358c5fb4d0b__is-solid{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-strong-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-strong-disabled);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-strong-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-strong-disabled)}&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-disabled)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-neutral);--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-neutral-active);--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-neutral-disabled)}&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled)}}.abbb272e2ce49bd6__is-unstyled{background:none;border:none;min-width:unset}.cf59cf1b69629838__is-compact{--wp-ui-button-height:32px}._914b42f315c0e580__is-loading{color:#0000;*{opacity:0}&:before{opacity:1;transition-delay:.05s;@media not (prefers-reduced-motion){animation:_5a1d53da6f830c8d__loading-animation 1s linear infinite}}}[aria-pressed=true].ad0619a3217c6a5b__is-minimal.e722a8f96726aa99__is-neutral{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-strong)}}@keyframes _5a1d53da6f830c8d__loading-animation{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"button\":\"_97b0fc33c028be1a__button\",\"is-unstyled\":\"abbb272e2ce49bd6__is-unstyled\",\"is-loading\":\"_914b42f315c0e580__is-loading\",\"is-small\":\"_908205475f9f2a92__is-small\",\"is-brand\":\"dd460c965226cc77__is-brand\",\"is-outline\":\"_62d5a778b7b258ee__is-outline\",\"is-minimal\":\"ad0619a3217c6a5b__is-minimal\",\"is-neutral\":\"e722a8f96726aa99__is-neutral\",\"is-solid\":\"b50b3358c5fb4d0b__is-solid\",\"is-compact\":\"cf59cf1b69629838__is-compact\",\"loading-animation\":\"_5a1d53da6f830c8d__loading-animation\"};\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='671ebfc62d']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"671ebfc62d\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._336cd3e4e743482f__box-sizing{box-sizing:border-box;*,:after,:before{box-sizing:inherit}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"box-sizing\":\"_336cd3e4e743482f__box-sizing\"};\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='28ad59e2e3']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"28ad59e2e3\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._08e8a2e44959f892__outset-ring--focus,._970d04df7376df67__outset-ring--focus-within-except-active,.c5cb3ee4bddaa8e4__outset-ring--focus-within-visible,.cd83dfc2126a0846__outset-ring--focus-within,.d0541bc9dd9dc7b6__outset-ring--focus-visible,.e25b2bdd7aa21721__outset-ring--focus-except-active{@media not (prefers-reduced-motion){transition:outline .1s ease-out}outline-color:#0000;outline-offset:1px;outline-style:solid;outline-width:0}._08e8a2e44959f892__outset-ring--focus:focus,._970d04df7376df67__outset-ring--focus-within-except-active:focus-within:not(:has(:active)),.c5cb3ee4bddaa8e4__outset-ring--focus-within-visible:focus-within:has(:focus-visible),.cd83dfc2126a0846__outset-ring--focus-within:focus-within,.d0541bc9dd9dc7b6__outset-ring--focus-visible:focus-visible,.e25b2bdd7aa21721__outset-ring--focus-except-active:focus:not(:active){outline-color:var(--wpds-color-stroke-focus-brand);outline-width:var(--wpds-border-width-focus)}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"outset-ring--focus\":\"_08e8a2e44959f892__outset-ring--focus\",\"outset-ring--focus-except-active\":\"e25b2bdd7aa21721__outset-ring--focus-except-active\",\"outset-ring--focus-visible\":\"d0541bc9dd9dc7b6__outset-ring--focus-visible\",\"outset-ring--focus-within\":\"cd83dfc2126a0846__outset-ring--focus-within\",\"outset-ring--focus-within-except-active\":\"_970d04df7376df67__outset-ring--focus-within-except-active\",\"outset-ring--focus-within-visible\":\"c5cb3ee4bddaa8e4__outset-ring--focus-within-visible\"};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAkC;AAClC,kBAAiB;AACjB,kBAAsB;AACtB,qBAAsC;AACtC,kBAAmB;;;ACJnB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,6qOAA+qO,CAAC;AAC1tO,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,UAAS,6BAA4B,eAAc,iCAAgC,cAAa,iCAAgC,YAAW,+BAA8B,YAAW,8BAA6B,cAAa,iCAAgC,cAAa,gCAA+B,cAAa,gCAA+B,YAAW,8BAA6B,cAAa,gCAA+B,qBAAoB,uCAAsC;;;ACNpf,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,kMAAkM,CAAC;AAC7O,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,iBAAQ,EAAC,cAAa,gCAA+B;;;ACN5D,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,0hCAA0hC,CAAC;AACrkC,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,sBAAqB,yCAAwC,oCAAmC,sDAAqD,8BAA6B,gDAA+C,6BAA4B,+CAA8C,2CAA0C,8DAA6D,qCAAoC,sDAAqD;;;AHuCxf;AAnCI,IAAM,aAAS;AAAA,EACrB,SAASA,QACR;AAAA,IACC,OAAO;AAAA,IACP,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA,0BAAsB,gBAAI,SAAU;AAAA,IACpC;AAAA,IACA,GAAG;AAAA,EACJ,GACA,KACC;AACD,UAAM,sBAAkB,YAAAC;AAAA,MACvB,eAAa,YAAa;AAAA,MAC1B,cAAa,kCAAmC;AAAA,MAChD,YAAY,cAAc,cAAO;AAAA,MACjC,cAAQ,MAAO,IAAK,EAAG;AAAA,MACvB,cAAQ,MAAO,OAAQ,EAAG;AAAA,MAC1B,cAAQ,MAAO,IAAK,EAAG;AAAA,MACvB,WAAW,cAAQ,YAAa;AAAA,MAChC;AAAA,IACD;AAGA,kCAAW,MAAM;AAChB,UAAK,WAAW,qBAAsB;AACrC,+BAAO,mBAAoB;AAAA,MAC5B;AAAA,IACD,GAAG,CAAE,SAAS,mBAAoB,CAAE;AAEpC,WACC;AAAA,MAAC,cAAAC;AAAA,MAAA;AAAA,QACA;AAAA,QACA,WAAY;AAAA,QACZ;AAAA,QACA,UAAW,YAAY;AAAA,QACrB,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEF;AACD;",
|
|
6
6
|
"names": ["Button", "clsx", "_Button"]
|
|
7
7
|
}
|
|
@@ -38,10 +38,10 @@ var import_fieldset = require("@base-ui/react/fieldset");
|
|
|
38
38
|
var import_element = require("@wordpress/element");
|
|
39
39
|
|
|
40
40
|
// packages/ui/src/form/primitives/fieldset/style.module.css
|
|
41
|
-
if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='
|
|
41
|
+
if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='04ece4d23e']")) {
|
|
42
42
|
const style = document.createElement("style");
|
|
43
|
-
style.setAttribute("data-wp-hash", "
|
|
44
|
-
style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{.a946d12d3d763c87__root{border:0;display:flex;flex-direction:column;gap:var(--wpds-dimension-gap-
|
|
43
|
+
style.setAttribute("data-wp-hash", "04ece4d23e");
|
|
44
|
+
style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{.a946d12d3d763c87__root{border:0;display:flex;flex-direction:column;gap:var(--wpds-dimension-gap-xs);margin:0;padding:0}}"));
|
|
45
45
|
document.head.appendChild(style);
|
|
46
46
|
}
|
|
47
47
|
var style_default = { "root": "a946d12d3d763c87__root" };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/form/primitives/fieldset/root.tsx", "../../../../src/form/primitives/fieldset/style.module.css"],
|
|
4
|
-
"sourcesContent": ["import clsx from 'clsx';\nimport { Fieldset as _Fieldset } from '@base-ui/react/fieldset';\nimport { forwardRef, useState, useMemo } from '@wordpress/element';\nimport styles from './style.module.css';\nimport { FieldsetContext } from './context';\nimport type { FieldsetRootProps } from './types';\n\n/**\n * A low-level component that associates an accessible legend and description with\n * a group of multiple form control elements.\n *\n * To label a single form control element, use the `Field` component instead.\n */\nexport const FieldsetRoot = forwardRef<\n\tHTMLFieldSetElement,\n\tFieldsetRootProps\n>( function FieldsetRoot( { className, children, ...restProps }, ref ) {\n\tconst [ descriptionId, setDescriptionId ] = useState< string >();\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tregisterDescriptionId: ( id: string ) => setDescriptionId( id ),\n\t\t\tunregisterDescriptionId: () => setDescriptionId( undefined ),\n\t\t} ),\n\t\t[]\n\t);\n\n\treturn (\n\t\t<FieldsetContext.Provider value={ contextValue }>\n\t\t\t<_Fieldset.Root\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ clsx( styles.root, className ) }\n\t\t\t\t// Certain screen readers may not read a fieldset's description\n\t\t\t\t// https://w3c.github.io/using-aria/#label-support\n\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\t{ ...restProps }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</_Fieldset.Root>\n\t\t</FieldsetContext.Provider>\n\t);\n} );\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiB;AACjB,sBAAsC;AACtC,qBAA8C;;;ACF9C,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,
|
|
4
|
+
"sourcesContent": ["import clsx from 'clsx';\nimport { Fieldset as _Fieldset } from '@base-ui/react/fieldset';\nimport { forwardRef, useState, useMemo } from '@wordpress/element';\nimport styles from './style.module.css';\nimport { FieldsetContext } from './context';\nimport type { FieldsetRootProps } from './types';\n\n/**\n * A low-level component that associates an accessible legend and description with\n * a group of multiple form control elements.\n *\n * To label a single form control element, use the `Field` component instead.\n */\nexport const FieldsetRoot = forwardRef<\n\tHTMLFieldSetElement,\n\tFieldsetRootProps\n>( function FieldsetRoot( { className, children, ...restProps }, ref ) {\n\tconst [ descriptionId, setDescriptionId ] = useState< string >();\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tregisterDescriptionId: ( id: string ) => setDescriptionId( id ),\n\t\t\tunregisterDescriptionId: () => setDescriptionId( undefined ),\n\t\t} ),\n\t\t[]\n\t);\n\n\treturn (\n\t\t<FieldsetContext.Provider value={ contextValue }>\n\t\t\t<_Fieldset.Root\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ clsx( styles.root, className ) }\n\t\t\t\t// Certain screen readers may not read a fieldset's description\n\t\t\t\t// https://w3c.github.io/using-aria/#label-support\n\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\t{ ...restProps }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</_Fieldset.Root>\n\t\t</FieldsetContext.Provider>\n\t);\n} );\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='04ece4d23e']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"04ece4d23e\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{.a946d12d3d763c87__root{border:0;display:flex;flex-direction:column;gap:var(--wpds-dimension-gap-xs);margin:0;padding:0}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"root\":\"a946d12d3d763c87__root\"};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiB;AACjB,sBAAsC;AACtC,qBAA8C;;;ACF9C,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,iOAAiO,CAAC;AAC5Q,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,QAAO,yBAAwB;;;ADF/C,qBAAgC;AAyB7B;AAhBI,IAAM,mBAAe,2BAGzB,SAASA,cAAc,EAAE,WAAW,UAAU,GAAG,UAAU,GAAG,KAAM;AACtE,QAAM,CAAE,eAAe,gBAAiB,QAAI,yBAAmB;AAE/D,QAAM,mBAAe;AAAA,IACpB,OAAQ;AAAA,MACP,uBAAuB,CAAE,OAAgB,iBAAkB,EAAG;AAAA,MAC9D,yBAAyB,MAAM,iBAAkB,MAAU;AAAA,IAC5D;AAAA,IACA,CAAC;AAAA,EACF;AAEA,SACC,4CAAC,+BAAgB,UAAhB,EAAyB,OAAQ,cACjC;AAAA,IAAC,gBAAAC,SAAU;AAAA,IAAV;AAAA,MACA;AAAA,MACA,eAAY,YAAAC,SAAM,cAAO,MAAM,SAAU;AAAA,MAGzC,oBAAmB;AAAA,MACjB,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACD;AAEF,CAAE;",
|
|
6
6
|
"names": ["FieldsetRoot", "_Fieldset", "clsx"]
|
|
7
7
|
}
|
|
@@ -46,10 +46,10 @@ if (typeof document !== "undefined" && !document.head.querySelector("style[data-
|
|
|
46
46
|
var resets_default = { "box-sizing": "_336cd3e4e743482f__box-sizing" };
|
|
47
47
|
|
|
48
48
|
// packages/ui/src/form/primitives/input-layout/style.module.css
|
|
49
|
-
if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='
|
|
49
|
+
if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='b0af7bcc08']")) {
|
|
50
50
|
const style = document.createElement("style");
|
|
51
|
-
style.setAttribute("data-wp-hash", "
|
|
52
|
-
style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{.cb2baafdc08746bb__input-layout{--wp-ui-input-layout-padding-inline:
|
|
51
|
+
style.setAttribute("data-wp-hash", "b0af7bcc08");
|
|
52
|
+
style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{.cb2baafdc08746bb__input-layout{--wp-ui-input-layout-padding-inline:var(--wpds-dimension-padding-md);background-color:var(--wpds-color-bg-interactive-neutral-weak);border-color:var(--wpds-color-stroke-interactive-neutral);border-radius:var(--wpds-border-radius-sm);border-style:solid;border-width:var(--wpds-border-width-xs);color:var(--wpds-color-fg-interactive-neutral);display:flex;font-family:var(--wpds-font-family-body);font-size:max(var(--wpds-font-size-md),16px);height:40px;line-height:1;@media (min-width:600px){font-size:var(--wpds-font-size-md)}&._0c807a84cbb94e0c__is-size-compact{--wp-ui-input-layout-padding-inline:var(--wpds-dimension-padding-sm);height:32px}&.ed67cda122dc1e7b__is-size-small{--wp-ui-input-layout-padding-inline:var(--wpds-dimension-padding-sm);height:24px}&._6fb7104732387680__is-disabled,&:has([data-can-disable-input-layout][data-disabled]){background-color:var(--wpds-color-bg-interactive-neutral-weak-disabled);border-color:var(--wpds-color-stroke-interactive-neutral-disabled);color:var(--wpds-color-fg-interactive-neutral-disabled);@media (forced-colors:active){border-bottom-color:GrayText;border-left-color:GrayText;border-right-color:GrayText;border-top-color:GrayText;color:GrayText}}&._8097270636ca6100__is-borderless{border-color:#0000}&:has(._0d7afad74a057888__input-layout-slot:focus-within){outline:none}&:hover:not(._6fb7104732387680__is-disabled,:has([data-can-disable-input-layout][data-disabled]),._8097270636ca6100__is-borderless){border-color:var(--wpds-color-stroke-interactive-neutral-active)}}._0d7afad74a057888__input-layout-slot{align-items:center;display:flex;&._0c952682762ca288__is-padding-minimal{--wp-ui-input-layout-prefix-padding-start:calc(var(--wp-ui-input-layout-padding-inline) - var(--wpds-dimension-padding-xs));--wp-ui-input-layout-suffix-padding-end:calc(var(--wp-ui-input-layout-padding-inline) - var(--wpds-dimension-padding-xs))}&._7b34336f9cf989b9__is-prefix{padding-inline-start:var(--wp-ui-input-layout-prefix-padding-start,var(--wp-ui-input-layout-padding-inline))}&._47a7a5deefae3545__is-suffix{padding-inline-end:var(--wp-ui-input-layout-suffix-padding-end,var(--wp-ui-input-layout-padding-inline))}}}"));
|
|
53
53
|
document.head.appendChild(style);
|
|
54
54
|
}
|
|
55
55
|
var style_default = { "input-layout": "cb2baafdc08746bb__input-layout", "is-size-compact": "_0c807a84cbb94e0c__is-size-compact", "is-size-small": "ed67cda122dc1e7b__is-size-small", "is-disabled": "_6fb7104732387680__is-disabled", "is-borderless": "_8097270636ca6100__is-borderless", "input-layout-slot": "_0d7afad74a057888__input-layout-slot", "is-padding-minimal": "_0c952682762ca288__is-padding-minimal", "is-prefix": "_7b34336f9cf989b9__is-prefix", "is-suffix": "_47a7a5deefae3545__is-suffix" };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/form/primitives/input-layout/input-layout.tsx", "../../../../src/utils/css/resets.module.css", "../../../../src/form/primitives/input-layout/style.module.css"],
|
|
4
|
-
"sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport resetStyles from '../../../utils/css/resets.module.css';\nimport styles from './style.module.css';\nimport type { InputLayoutProps } from './types';\nimport { SlotContextProvider } from './context';\n\n/**\n * A low-level component that handles the visual layout of an input-like field,\n * including disabled states and standard prefix/suffix slots.\n */\nexport const InputLayout = forwardRef< HTMLDivElement, InputLayoutProps >(\n\tfunction InputLayout(\n\t\t{\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\tvisuallyDisabled,\n\t\t\tsize = 'default',\n\t\t\tisBorderless,\n\t\t\tprefix,\n\t\t\tsuffix,\n\t\t\t...restProps\n\t\t},\n\t\tref\n\t) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\tresetStyles[ 'box-sizing' ],\n\t\t\t\t\tstyles[ 'input-layout' ],\n\t\t\t\t\tstyles[ `is-size-${ size }` ],\n\t\t\t\t\tvisuallyDisabled && styles[ 'is-disabled' ],\n\t\t\t\t\tisBorderless && styles[ 'is-borderless' ],\n\t\t\t\t\tclassName\n\t\t\t\t) }\n\t\t\t\t{ ...restProps }\n\t\t\t>\n\t\t\t\t<SlotContextProvider type=\"prefix\">\n\t\t\t\t\t{ prefix }\n\t\t\t\t</SlotContextProvider>\n\t\t\t\t{ children }\n\t\t\t\t<SlotContextProvider type=\"suffix\">\n\t\t\t\t\t{ suffix }\n\t\t\t\t</SlotContextProvider>\n\t\t\t</div>\n\t\t);\n\t}\n);\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='671ebfc62d']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"671ebfc62d\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._336cd3e4e743482f__box-sizing{box-sizing:border-box;*,:after,:before{box-sizing:inherit}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"box-sizing\":\"_336cd3e4e743482f__box-sizing\"};\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiB;AACjB,qBAA2B;;;ACD3B,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,kMAAkM,CAAC;AAC7O,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,iBAAQ,EAAC,cAAa,gCAA+B;;;ACN5D,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,
|
|
4
|
+
"sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport resetStyles from '../../../utils/css/resets.module.css';\nimport styles from './style.module.css';\nimport type { InputLayoutProps } from './types';\nimport { SlotContextProvider } from './context';\n\n/**\n * A low-level component that handles the visual layout of an input-like field,\n * including disabled states and standard prefix/suffix slots.\n */\nexport const InputLayout = forwardRef< HTMLDivElement, InputLayoutProps >(\n\tfunction InputLayout(\n\t\t{\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\tvisuallyDisabled,\n\t\t\tsize = 'default',\n\t\t\tisBorderless,\n\t\t\tprefix,\n\t\t\tsuffix,\n\t\t\t...restProps\n\t\t},\n\t\tref\n\t) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\tresetStyles[ 'box-sizing' ],\n\t\t\t\t\tstyles[ 'input-layout' ],\n\t\t\t\t\tstyles[ `is-size-${ size }` ],\n\t\t\t\t\tvisuallyDisabled && styles[ 'is-disabled' ],\n\t\t\t\t\tisBorderless && styles[ 'is-borderless' ],\n\t\t\t\t\tclassName\n\t\t\t\t) }\n\t\t\t\t{ ...restProps }\n\t\t\t>\n\t\t\t\t<SlotContextProvider type=\"prefix\">\n\t\t\t\t\t{ prefix }\n\t\t\t\t</SlotContextProvider>\n\t\t\t\t{ children }\n\t\t\t\t<SlotContextProvider type=\"suffix\">\n\t\t\t\t\t{ suffix }\n\t\t\t\t</SlotContextProvider>\n\t\t\t</div>\n\t\t);\n\t}\n);\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='671ebfc62d']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"671ebfc62d\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._336cd3e4e743482f__box-sizing{box-sizing:border-box;*,:after,:before{box-sizing:inherit}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"box-sizing\":\"_336cd3e4e743482f__box-sizing\"};\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='b0af7bcc08']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"b0af7bcc08\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{.cb2baafdc08746bb__input-layout{--wp-ui-input-layout-padding-inline:var(--wpds-dimension-padding-md);background-color:var(--wpds-color-bg-interactive-neutral-weak);border-color:var(--wpds-color-stroke-interactive-neutral);border-radius:var(--wpds-border-radius-sm);border-style:solid;border-width:var(--wpds-border-width-xs);color:var(--wpds-color-fg-interactive-neutral);display:flex;font-family:var(--wpds-font-family-body);font-size:max(var(--wpds-font-size-md),16px);height:40px;line-height:1;@media (min-width:600px){font-size:var(--wpds-font-size-md)}&._0c807a84cbb94e0c__is-size-compact{--wp-ui-input-layout-padding-inline:var(--wpds-dimension-padding-sm);height:32px}&.ed67cda122dc1e7b__is-size-small{--wp-ui-input-layout-padding-inline:var(--wpds-dimension-padding-sm);height:24px}&._6fb7104732387680__is-disabled,&:has([data-can-disable-input-layout][data-disabled]){background-color:var(--wpds-color-bg-interactive-neutral-weak-disabled);border-color:var(--wpds-color-stroke-interactive-neutral-disabled);color:var(--wpds-color-fg-interactive-neutral-disabled);@media (forced-colors:active){border-bottom-color:GrayText;border-left-color:GrayText;border-right-color:GrayText;border-top-color:GrayText;color:GrayText}}&._8097270636ca6100__is-borderless{border-color:#0000}&:has(._0d7afad74a057888__input-layout-slot:focus-within){outline:none}&:hover:not(._6fb7104732387680__is-disabled,:has([data-can-disable-input-layout][data-disabled]),._8097270636ca6100__is-borderless){border-color:var(--wpds-color-stroke-interactive-neutral-active)}}._0d7afad74a057888__input-layout-slot{align-items:center;display:flex;&._0c952682762ca288__is-padding-minimal{--wp-ui-input-layout-prefix-padding-start:calc(var(--wp-ui-input-layout-padding-inline) - var(--wpds-dimension-padding-xs));--wp-ui-input-layout-suffix-padding-end:calc(var(--wp-ui-input-layout-padding-inline) - var(--wpds-dimension-padding-xs))}&._7b34336f9cf989b9__is-prefix{padding-inline-start:var(--wp-ui-input-layout-prefix-padding-start,var(--wp-ui-input-layout-padding-inline))}&._47a7a5deefae3545__is-suffix{padding-inline-end:var(--wp-ui-input-layout-suffix-padding-end,var(--wp-ui-input-layout-padding-inline))}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"input-layout\":\"cb2baafdc08746bb__input-layout\",\"is-size-compact\":\"_0c807a84cbb94e0c__is-size-compact\",\"is-size-small\":\"ed67cda122dc1e7b__is-size-small\",\"is-disabled\":\"_6fb7104732387680__is-disabled\",\"is-borderless\":\"_8097270636ca6100__is-borderless\",\"input-layout-slot\":\"_0d7afad74a057888__input-layout-slot\",\"is-padding-minimal\":\"_0c952682762ca288__is-padding-minimal\",\"is-prefix\":\"_7b34336f9cf989b9__is-prefix\",\"is-suffix\":\"_47a7a5deefae3545__is-suffix\"};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiB;AACjB,qBAA2B;;;ACD3B,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,kMAAkM,CAAC;AAC7O,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,iBAAQ,EAAC,cAAa,gCAA+B;;;ACN5D,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,ivEAAivE,CAAC;AAC5xE,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,gBAAe,kCAAiC,mBAAkB,sCAAqC,iBAAgB,mCAAkC,eAAc,kCAAiC,iBAAgB,oCAAmC,qBAAoB,wCAAuC,sBAAqB,yCAAwC,aAAY,gCAA+B,aAAY,+BAA8B;;;AFDxd,qBAAoC;AAqBjC;AAfI,IAAM,kBAAc;AAAA,EAC1B,SAASA,aACR;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACJ,GACA,KACC;AACD,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,eAAY,YAAAC;AAAA,UACX,eAAa,YAAa;AAAA,UAC1B,cAAQ,cAAe;AAAA,UACvB,cAAQ,WAAY,IAAK,EAAG;AAAA,UAC5B,oBAAoB,cAAQ,aAAc;AAAA,UAC1C,gBAAgB,cAAQ,eAAgB;AAAA,UACxC;AAAA,QACD;AAAA,QACE,GAAG;AAAA,QAEL;AAAA,sDAAC,sCAAoB,MAAK,UACvB,kBACH;AAAA,UACE;AAAA,UACF,4CAAC,sCAAoB,MAAK,UACvB,kBACH;AAAA;AAAA;AAAA,IACD;AAAA,EAEF;AACD;",
|
|
6
6
|
"names": ["InputLayout", "clsx"]
|
|
7
7
|
}
|
|
@@ -37,10 +37,10 @@ var import_clsx = __toESM(require("clsx"));
|
|
|
37
37
|
var import_element = require("@wordpress/element");
|
|
38
38
|
|
|
39
39
|
// packages/ui/src/form/primitives/input-layout/style.module.css
|
|
40
|
-
if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='
|
|
40
|
+
if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='b0af7bcc08']")) {
|
|
41
41
|
const style = document.createElement("style");
|
|
42
|
-
style.setAttribute("data-wp-hash", "
|
|
43
|
-
style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{.cb2baafdc08746bb__input-layout{--wp-ui-input-layout-padding-inline:
|
|
42
|
+
style.setAttribute("data-wp-hash", "b0af7bcc08");
|
|
43
|
+
style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{.cb2baafdc08746bb__input-layout{--wp-ui-input-layout-padding-inline:var(--wpds-dimension-padding-md);background-color:var(--wpds-color-bg-interactive-neutral-weak);border-color:var(--wpds-color-stroke-interactive-neutral);border-radius:var(--wpds-border-radius-sm);border-style:solid;border-width:var(--wpds-border-width-xs);color:var(--wpds-color-fg-interactive-neutral);display:flex;font-family:var(--wpds-font-family-body);font-size:max(var(--wpds-font-size-md),16px);height:40px;line-height:1;@media (min-width:600px){font-size:var(--wpds-font-size-md)}&._0c807a84cbb94e0c__is-size-compact{--wp-ui-input-layout-padding-inline:var(--wpds-dimension-padding-sm);height:32px}&.ed67cda122dc1e7b__is-size-small{--wp-ui-input-layout-padding-inline:var(--wpds-dimension-padding-sm);height:24px}&._6fb7104732387680__is-disabled,&:has([data-can-disable-input-layout][data-disabled]){background-color:var(--wpds-color-bg-interactive-neutral-weak-disabled);border-color:var(--wpds-color-stroke-interactive-neutral-disabled);color:var(--wpds-color-fg-interactive-neutral-disabled);@media (forced-colors:active){border-bottom-color:GrayText;border-left-color:GrayText;border-right-color:GrayText;border-top-color:GrayText;color:GrayText}}&._8097270636ca6100__is-borderless{border-color:#0000}&:has(._0d7afad74a057888__input-layout-slot:focus-within){outline:none}&:hover:not(._6fb7104732387680__is-disabled,:has([data-can-disable-input-layout][data-disabled]),._8097270636ca6100__is-borderless){border-color:var(--wpds-color-stroke-interactive-neutral-active)}}._0d7afad74a057888__input-layout-slot{align-items:center;display:flex;&._0c952682762ca288__is-padding-minimal{--wp-ui-input-layout-prefix-padding-start:calc(var(--wp-ui-input-layout-padding-inline) - var(--wpds-dimension-padding-xs));--wp-ui-input-layout-suffix-padding-end:calc(var(--wp-ui-input-layout-padding-inline) - var(--wpds-dimension-padding-xs))}&._7b34336f9cf989b9__is-prefix{padding-inline-start:var(--wp-ui-input-layout-prefix-padding-start,var(--wp-ui-input-layout-padding-inline))}&._47a7a5deefae3545__is-suffix{padding-inline-end:var(--wp-ui-input-layout-suffix-padding-end,var(--wp-ui-input-layout-padding-inline))}}}"));
|
|
44
44
|
document.head.appendChild(style);
|
|
45
45
|
}
|
|
46
46
|
var style_default = { "input-layout": "cb2baafdc08746bb__input-layout", "is-size-compact": "_0c807a84cbb94e0c__is-size-compact", "is-size-small": "ed67cda122dc1e7b__is-size-small", "is-disabled": "_6fb7104732387680__is-disabled", "is-borderless": "_8097270636ca6100__is-borderless", "input-layout-slot": "_0d7afad74a057888__input-layout-slot", "is-padding-minimal": "_0c952682762ca288__is-padding-minimal", "is-prefix": "_7b34336f9cf989b9__is-prefix", "is-suffix": "_47a7a5deefae3545__is-suffix" };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/form/primitives/input-layout/slot.tsx", "../../../../src/form/primitives/input-layout/style.module.css"],
|
|
4
|
-
"sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport styles from './style.module.css';\nimport type { InputLayoutSlotProps } from './types';\nimport { useInputLayoutSlotContext } from './context';\n\n/**\n * A layout helper to add paddings in a prefix or suffix.\n */\nexport const InputLayoutSlot = forwardRef<\n\tHTMLDivElement,\n\tInputLayoutSlotProps\n>( function InputLayoutSlot(\n\t{ type: typeProp, padding = 'default', ...restProps },\n\tref\n) {\n\tconst typeContext = useInputLayoutSlotContext();\n\tconst type = typeProp ?? typeContext;\n\n\tif ( ! type ) {\n\t\tthrow new Error(\n\t\t\t'InputLayoutSlot requires a `type` prop or must be used within an InputLayout prefix/suffix slot.'\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ clsx(\n\t\t\t\tstyles[ 'input-layout-slot' ],\n\t\t\t\tstyles[ `is-${ type }` ],\n\t\t\t\tstyles[ `is-padding-${ padding }` ]\n\t\t\t) }\n\t\t\t{ ...restProps }\n\t\t/>\n\t);\n} );\n\nInputLayoutSlot.displayName = 'InputLayout.Slot';\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiB;AACjB,qBAA2B;;;ACD3B,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,
|
|
4
|
+
"sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport styles from './style.module.css';\nimport type { InputLayoutSlotProps } from './types';\nimport { useInputLayoutSlotContext } from './context';\n\n/**\n * A layout helper to add paddings in a prefix or suffix.\n */\nexport const InputLayoutSlot = forwardRef<\n\tHTMLDivElement,\n\tInputLayoutSlotProps\n>( function InputLayoutSlot(\n\t{ type: typeProp, padding = 'default', ...restProps },\n\tref\n) {\n\tconst typeContext = useInputLayoutSlotContext();\n\tconst type = typeProp ?? typeContext;\n\n\tif ( ! type ) {\n\t\tthrow new Error(\n\t\t\t'InputLayoutSlot requires a `type` prop or must be used within an InputLayout prefix/suffix slot.'\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ clsx(\n\t\t\t\tstyles[ 'input-layout-slot' ],\n\t\t\t\tstyles[ `is-${ type }` ],\n\t\t\t\tstyles[ `is-padding-${ padding }` ]\n\t\t\t) }\n\t\t\t{ ...restProps }\n\t\t/>\n\t);\n} );\n\nInputLayoutSlot.displayName = 'InputLayout.Slot';\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='b0af7bcc08']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"b0af7bcc08\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{.cb2baafdc08746bb__input-layout{--wp-ui-input-layout-padding-inline:var(--wpds-dimension-padding-md);background-color:var(--wpds-color-bg-interactive-neutral-weak);border-color:var(--wpds-color-stroke-interactive-neutral);border-radius:var(--wpds-border-radius-sm);border-style:solid;border-width:var(--wpds-border-width-xs);color:var(--wpds-color-fg-interactive-neutral);display:flex;font-family:var(--wpds-font-family-body);font-size:max(var(--wpds-font-size-md),16px);height:40px;line-height:1;@media (min-width:600px){font-size:var(--wpds-font-size-md)}&._0c807a84cbb94e0c__is-size-compact{--wp-ui-input-layout-padding-inline:var(--wpds-dimension-padding-sm);height:32px}&.ed67cda122dc1e7b__is-size-small{--wp-ui-input-layout-padding-inline:var(--wpds-dimension-padding-sm);height:24px}&._6fb7104732387680__is-disabled,&:has([data-can-disable-input-layout][data-disabled]){background-color:var(--wpds-color-bg-interactive-neutral-weak-disabled);border-color:var(--wpds-color-stroke-interactive-neutral-disabled);color:var(--wpds-color-fg-interactive-neutral-disabled);@media (forced-colors:active){border-bottom-color:GrayText;border-left-color:GrayText;border-right-color:GrayText;border-top-color:GrayText;color:GrayText}}&._8097270636ca6100__is-borderless{border-color:#0000}&:has(._0d7afad74a057888__input-layout-slot:focus-within){outline:none}&:hover:not(._6fb7104732387680__is-disabled,:has([data-can-disable-input-layout][data-disabled]),._8097270636ca6100__is-borderless){border-color:var(--wpds-color-stroke-interactive-neutral-active)}}._0d7afad74a057888__input-layout-slot{align-items:center;display:flex;&._0c952682762ca288__is-padding-minimal{--wp-ui-input-layout-prefix-padding-start:calc(var(--wp-ui-input-layout-padding-inline) - var(--wpds-dimension-padding-xs));--wp-ui-input-layout-suffix-padding-end:calc(var(--wp-ui-input-layout-padding-inline) - var(--wpds-dimension-padding-xs))}&._7b34336f9cf989b9__is-prefix{padding-inline-start:var(--wp-ui-input-layout-prefix-padding-start,var(--wp-ui-input-layout-padding-inline))}&._47a7a5deefae3545__is-suffix{padding-inline-end:var(--wp-ui-input-layout-suffix-padding-end,var(--wp-ui-input-layout-padding-inline))}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"input-layout\":\"cb2baafdc08746bb__input-layout\",\"is-size-compact\":\"_0c807a84cbb94e0c__is-size-compact\",\"is-size-small\":\"ed67cda122dc1e7b__is-size-small\",\"is-disabled\":\"_6fb7104732387680__is-disabled\",\"is-borderless\":\"_8097270636ca6100__is-borderless\",\"input-layout-slot\":\"_0d7afad74a057888__input-layout-slot\",\"is-padding-minimal\":\"_0c952682762ca288__is-padding-minimal\",\"is-prefix\":\"_7b34336f9cf989b9__is-prefix\",\"is-suffix\":\"_47a7a5deefae3545__is-suffix\"};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiB;AACjB,qBAA2B;;;ACD3B,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,ivEAAivE,CAAC;AAC5xE,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,gBAAe,kCAAiC,mBAAkB,sCAAqC,iBAAgB,mCAAkC,eAAc,kCAAiC,iBAAgB,oCAAmC,qBAAoB,wCAAuC,sBAAqB,yCAAwC,aAAY,gCAA+B,aAAY,+BAA8B;;;ADFxd,qBAA0C;AAsBxC;AAjBK,IAAM,sBAAkB,2BAG5B,SAASA,iBACX,EAAE,MAAM,UAAU,UAAU,WAAW,GAAG,UAAU,GACpD,KACC;AACD,QAAM,kBAAc,0CAA0B;AAC9C,QAAM,OAAO,YAAY;AAEzB,MAAK,CAAE,MAAO;AACb,UAAM,IAAI;AAAA,MACT;AAAA,IACD;AAAA,EACD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,eAAY,YAAAC;AAAA,QACX,cAAQ,mBAAoB;AAAA,QAC5B,cAAQ,MAAO,IAAK,EAAG;AAAA,QACvB,cAAQ,cAAe,OAAQ,EAAG;AAAA,MACnC;AAAA,MACE,GAAG;AAAA;AAAA,EACN;AAEF,CAAE;AAEF,gBAAgB,cAAc;",
|
|
6
6
|
"names": ["InputLayoutSlot", "clsx"]
|
|
7
7
|
}
|
|
@@ -39,10 +39,10 @@ var import_element = require("@wordpress/element");
|
|
|
39
39
|
var import_icons = require("@wordpress/icons");
|
|
40
40
|
|
|
41
41
|
// packages/ui/src/utils/css/item-popup.module.css
|
|
42
|
-
if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='
|
|
42
|
+
if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='01a904506d']")) {
|
|
43
43
|
const style = document.createElement("style");
|
|
44
|
-
style.setAttribute("data-wp-hash", "
|
|
45
|
-
style.appendChild(document.createTextNode('@layer wp-ui-utilities{._380b81b8f79fb10f__dropdown-motion{--wp-ui-dropdown-slide-distance:4px;--wp-ui-dropdown-slide-duration:200ms;--wp-ui-dropdown-slide-easing:cubic-bezier(0,0,0,1);--wp-ui-dropdown-fade-duration:80ms;--wp-ui-dropdown-fade-easing:linear;@media not (prefers-reduced-motion){transition-duration:var(--wp-ui-dropdown-slide-duration),var(--wp-ui-dropdown-fade-duration);transition-property:transform,opacity;transition-timing-function:var(--wp-ui-dropdown-slide-easing),var(--wp-ui-dropdown-fade-easing);will-change:transform,opacity}opacity:0;&[data-side=bottom]{transform:translateY(calc(var(--wp-ui-dropdown-slide-distance)*-1))}&[data-side=top]{transform:translateY(var(--wp-ui-dropdown-slide-distance))}&[data-side=left]{transform:translateX(var(--wp-ui-dropdown-slide-distance))}&[data-side=right]{transform:translateX(calc(var(--wp-ui-dropdown-slide-distance)*-1))}&[data-open]:not([data-starting-style]){opacity:1;transform:translate(0)}}}@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._234b520016b4e56f__popup{--wp-ui-popup-padding:4px;background-color:var(--wpds-color-bg-surface-neutral-strong);border:1px solid var(--wpds-color-stroke-surface-neutral);border-radius:var(--wpds-border-radius-md);box-shadow:var(--wpds-elevation-medium);color:var(--wpds-color-fg-interactive-neutral);display:grid;font-family:var(--wpds-font-family-body);font-size:var(--wpds-font-size-md);grid-template-areas:"header" "main";grid-template-rows:auto minmax(0,1fr);line-height:1.4;max-height:min(var(--available-height),480px,60dvh);max-width:var(--available-width);min-width:var(--anchor-width)}.f43dc7c768d7b622__list{display:grid;grid-area:main;grid-template-areas:"scrollable" "footer";grid-template-rows:minmax(0,1fr) auto}._233cd60cdb84a2ef__list-scrollable-container{grid-area:scrollable;overflow-block:auto;overscroll-behavior:contain;scroll-padding-block:var(--wp-ui-popup-padding);&:not(:empty){padding-block:var(--wp-ui-popup-padding)}}.ec4db6f0122263e7__list-footer{grid-area:footer;padding-block:var(--wp-ui-popup-padding);._233cd60cdb84a2ef__list-scrollable-container:not(:empty)+&{border-block-start:1px solid var(--wpds-color-stroke-surface-neutral)}}._684ccb7988365b4f__item{--wp-ui-popup-item-height:40px;--wp-ui-popup-item-padding-inline:12px;--wp-ui-popup-item-padding-block:4px;align-items:center;border-radius:var(--wpds-border-radius-sm);display:grid;gap:var(--wpds-dimension-gap-
|
|
44
|
+
style.setAttribute("data-wp-hash", "01a904506d");
|
|
45
|
+
style.appendChild(document.createTextNode('@layer wp-ui-utilities{._380b81b8f79fb10f__dropdown-motion{--wp-ui-dropdown-slide-distance:4px;--wp-ui-dropdown-slide-duration:200ms;--wp-ui-dropdown-slide-easing:cubic-bezier(0,0,0,1);--wp-ui-dropdown-fade-duration:80ms;--wp-ui-dropdown-fade-easing:linear;@media not (prefers-reduced-motion){transition-duration:var(--wp-ui-dropdown-slide-duration),var(--wp-ui-dropdown-fade-duration);transition-property:transform,opacity;transition-timing-function:var(--wp-ui-dropdown-slide-easing),var(--wp-ui-dropdown-fade-easing);will-change:transform,opacity}opacity:0;&[data-side=bottom]{transform:translateY(calc(var(--wp-ui-dropdown-slide-distance)*-1))}&[data-side=top]{transform:translateY(var(--wp-ui-dropdown-slide-distance))}&[data-side=left]{transform:translateX(var(--wp-ui-dropdown-slide-distance))}&[data-side=right]{transform:translateX(calc(var(--wp-ui-dropdown-slide-distance)*-1))}&[data-open]:not([data-starting-style]){opacity:1;transform:translate(0)}}}@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._234b520016b4e56f__popup{--wp-ui-popup-padding:4px;background-color:var(--wpds-color-bg-surface-neutral-strong);border:1px solid var(--wpds-color-stroke-surface-neutral);border-radius:var(--wpds-border-radius-md);box-shadow:var(--wpds-elevation-medium);color:var(--wpds-color-fg-interactive-neutral);display:grid;font-family:var(--wpds-font-family-body);font-size:var(--wpds-font-size-md);grid-template-areas:"header" "main";grid-template-rows:auto minmax(0,1fr);line-height:1.4;max-height:min(var(--available-height),480px,60dvh);max-width:var(--available-width);min-width:var(--anchor-width)}.f43dc7c768d7b622__list{display:grid;grid-area:main;grid-template-areas:"scrollable" "footer";grid-template-rows:minmax(0,1fr) auto}._233cd60cdb84a2ef__list-scrollable-container{grid-area:scrollable;overflow-block:auto;overscroll-behavior:contain;scroll-padding-block:var(--wp-ui-popup-padding);&:not(:empty){padding-block:var(--wp-ui-popup-padding)}}.ec4db6f0122263e7__list-footer{grid-area:footer;padding-block:var(--wp-ui-popup-padding);._233cd60cdb84a2ef__list-scrollable-container:not(:empty)+&{border-block-start:1px solid var(--wpds-color-stroke-surface-neutral)}}._684ccb7988365b4f__item{--wp-ui-popup-item-height:40px;--wp-ui-popup-item-padding-inline:12px;--wp-ui-popup-item-padding-block:4px;align-items:center;border-radius:var(--wpds-border-radius-sm);display:grid;gap:var(--wpds-dimension-gap-xs);grid-template-columns:24px 1fr;justify-content:flex-start;margin-inline:var(--wp-ui-popup-padding);min-height:var(--wp-ui-popup-item-height);padding-block:var(--wp-ui-popup-item-padding-block);padding-inline-end:var(--wp-ui-popup-item-padding-inline);padding-inline-start:calc(var(--wp-ui-popup-item-padding-inline) - 4px);user-select:none;&.f181b98b0d33282a__is-size-compact{--wp-ui-popup-item-height:32px;--wp-ui-popup-item-padding-inline:8px}&._38f7faff93c61958__is-size-small{--wp-ui-popup-item-height:24px;--wp-ui-popup-item-padding-inline:8px;--wp-ui-popup-item-padding-block:2px}&:not([data-selected]){._92fbe4765dfad5ee__item-indicator-icon{opacity:0}}&[data-highlighted]:not([aria-disabled=true]){background-color:var(--wpds-color-bg-interactive-brand-weak-active);color:var(--wpds-color-fg-interactive-neutral);@media (forced-colors:active){outline:1px solid Highlight}}&[aria-disabled=true]{color:var(--wpds-color-fg-interactive-neutral-disabled);@media (forced-colors:active){color:GrayText}}}._888a2f021a37fa9c__item-indicator{justify-self:center}._06c7ff39d2f685b9__empty{--wp-ui-popup-empty-min-height:40px;--wp-ui-popup-empty-padding-inline:12px;align-items:center;color:var(--wpds-color-fg-content-neutral-weak);display:flex;grid-area:main;padding-inline:var(--wp-ui-popup-empty-padding-inline);&:not(:empty){min-height:var(--wp-ui-popup-empty-min-height)}}}'));
|
|
46
46
|
document.head.appendChild(style);
|
|
47
47
|
}
|
|
48
48
|
var item_popup_default = { "popup": "_234b520016b4e56f__popup _380b81b8f79fb10f__dropdown-motion", "list": "f43dc7c768d7b622__list", "list-scrollable-container": "_233cd60cdb84a2ef__list-scrollable-container", "list-footer": "ec4db6f0122263e7__list-footer", "item": "_684ccb7988365b4f__item", "is-size-compact": "f181b98b0d33282a__is-size-compact", "is-size-small": "_38f7faff93c61958__is-size-small", "item-indicator-icon": "_92fbe4765dfad5ee__item-indicator-icon", "item-indicator": "_888a2f021a37fa9c__item-indicator", "empty": "_06c7ff39d2f685b9__empty" };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/form/primitives/select/item.tsx", "../../../../src/utils/css/item-popup.module.css", "../../../../src/utils/css/resets.module.css"],
|
|
4
|
-
"sourcesContent": ["import { Select as _Select } from '@base-ui/react/select';\nimport clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport { check } from '@wordpress/icons';\nimport itemPopupStyles from '../../../utils/css/item-popup.module.css';\nimport resetStyles from '../../../utils/css/resets.module.css';\nimport { Icon } from '../../../icon';\nimport type { SelectItemProps } from './types';\n\nexport const Item = forwardRef< HTMLDivElement, SelectItemProps >(\n\tfunction Item(\n\t\t{ className, value, size = 'default', children = value, ...restProps },\n\t\tref\n\t) {\n\t\treturn (\n\t\t\t<_Select.Item\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\tresetStyles[ 'box-sizing' ],\n\t\t\t\t\titemPopupStyles.item,\n\t\t\t\t\titemPopupStyles[ `is-size-${ size }` ],\n\t\t\t\t\tclassName\n\t\t\t\t) }\n\t\t\t\tvalue={ value }\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...restProps }\n\t\t\t>\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ check }\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\titemPopupStyles[ 'item-indicator' ],\n\t\t\t\t\t\titemPopupStyles[ 'item-indicator-icon' ]\n\t\t\t\t\t) }\n\t\t\t\t\tsize={ size === 'small' ? 20 : 24 }\n\t\t\t\t/>\n\t\t\t\t<_Select.ItemText>{ children }</_Select.ItemText>\n\t\t\t</_Select.Item>\n\t\t);\n\t}\n);\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAkC;AAClC,kBAAiB;AACjB,qBAA2B;AAC3B,mBAAsB;;;ACHtB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,
|
|
4
|
+
"sourcesContent": ["import { Select as _Select } from '@base-ui/react/select';\nimport clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport { check } from '@wordpress/icons';\nimport itemPopupStyles from '../../../utils/css/item-popup.module.css';\nimport resetStyles from '../../../utils/css/resets.module.css';\nimport { Icon } from '../../../icon';\nimport type { SelectItemProps } from './types';\n\nexport const Item = forwardRef< HTMLDivElement, SelectItemProps >(\n\tfunction Item(\n\t\t{ className, value, size = 'default', children = value, ...restProps },\n\t\tref\n\t) {\n\t\treturn (\n\t\t\t<_Select.Item\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\tresetStyles[ 'box-sizing' ],\n\t\t\t\t\titemPopupStyles.item,\n\t\t\t\t\titemPopupStyles[ `is-size-${ size }` ],\n\t\t\t\t\tclassName\n\t\t\t\t) }\n\t\t\t\tvalue={ value }\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...restProps }\n\t\t\t>\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ check }\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\titemPopupStyles[ 'item-indicator' ],\n\t\t\t\t\t\titemPopupStyles[ 'item-indicator-icon' ]\n\t\t\t\t\t) }\n\t\t\t\t\tsize={ size === 'small' ? 20 : 24 }\n\t\t\t\t/>\n\t\t\t\t<_Select.ItemText>{ children }</_Select.ItemText>\n\t\t\t</_Select.Item>\n\t\t);\n\t}\n);\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='01a904506d']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"01a904506d\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities{._380b81b8f79fb10f__dropdown-motion{--wp-ui-dropdown-slide-distance:4px;--wp-ui-dropdown-slide-duration:200ms;--wp-ui-dropdown-slide-easing:cubic-bezier(0,0,0,1);--wp-ui-dropdown-fade-duration:80ms;--wp-ui-dropdown-fade-easing:linear;@media not (prefers-reduced-motion){transition-duration:var(--wp-ui-dropdown-slide-duration),var(--wp-ui-dropdown-fade-duration);transition-property:transform,opacity;transition-timing-function:var(--wp-ui-dropdown-slide-easing),var(--wp-ui-dropdown-fade-easing);will-change:transform,opacity}opacity:0;&[data-side=bottom]{transform:translateY(calc(var(--wp-ui-dropdown-slide-distance)*-1))}&[data-side=top]{transform:translateY(var(--wp-ui-dropdown-slide-distance))}&[data-side=left]{transform:translateX(var(--wp-ui-dropdown-slide-distance))}&[data-side=right]{transform:translateX(calc(var(--wp-ui-dropdown-slide-distance)*-1))}&[data-open]:not([data-starting-style]){opacity:1;transform:translate(0)}}}@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._234b520016b4e56f__popup{--wp-ui-popup-padding:4px;background-color:var(--wpds-color-bg-surface-neutral-strong);border:1px solid var(--wpds-color-stroke-surface-neutral);border-radius:var(--wpds-border-radius-md);box-shadow:var(--wpds-elevation-medium);color:var(--wpds-color-fg-interactive-neutral);display:grid;font-family:var(--wpds-font-family-body);font-size:var(--wpds-font-size-md);grid-template-areas:\\\"header\\\" \\\"main\\\";grid-template-rows:auto minmax(0,1fr);line-height:1.4;max-height:min(var(--available-height),480px,60dvh);max-width:var(--available-width);min-width:var(--anchor-width)}.f43dc7c768d7b622__list{display:grid;grid-area:main;grid-template-areas:\\\"scrollable\\\" \\\"footer\\\";grid-template-rows:minmax(0,1fr) auto}._233cd60cdb84a2ef__list-scrollable-container{grid-area:scrollable;overflow-block:auto;overscroll-behavior:contain;scroll-padding-block:var(--wp-ui-popup-padding);&:not(:empty){padding-block:var(--wp-ui-popup-padding)}}.ec4db6f0122263e7__list-footer{grid-area:footer;padding-block:var(--wp-ui-popup-padding);._233cd60cdb84a2ef__list-scrollable-container:not(:empty)+&{border-block-start:1px solid var(--wpds-color-stroke-surface-neutral)}}._684ccb7988365b4f__item{--wp-ui-popup-item-height:40px;--wp-ui-popup-item-padding-inline:12px;--wp-ui-popup-item-padding-block:4px;align-items:center;border-radius:var(--wpds-border-radius-sm);display:grid;gap:var(--wpds-dimension-gap-xs);grid-template-columns:24px 1fr;justify-content:flex-start;margin-inline:var(--wp-ui-popup-padding);min-height:var(--wp-ui-popup-item-height);padding-block:var(--wp-ui-popup-item-padding-block);padding-inline-end:var(--wp-ui-popup-item-padding-inline);padding-inline-start:calc(var(--wp-ui-popup-item-padding-inline) - 4px);user-select:none;&.f181b98b0d33282a__is-size-compact{--wp-ui-popup-item-height:32px;--wp-ui-popup-item-padding-inline:8px}&._38f7faff93c61958__is-size-small{--wp-ui-popup-item-height:24px;--wp-ui-popup-item-padding-inline:8px;--wp-ui-popup-item-padding-block:2px}&:not([data-selected]){._92fbe4765dfad5ee__item-indicator-icon{opacity:0}}&[data-highlighted]:not([aria-disabled=true]){background-color:var(--wpds-color-bg-interactive-brand-weak-active);color:var(--wpds-color-fg-interactive-neutral);@media (forced-colors:active){outline:1px solid Highlight}}&[aria-disabled=true]{color:var(--wpds-color-fg-interactive-neutral-disabled);@media (forced-colors:active){color:GrayText}}}._888a2f021a37fa9c__item-indicator{justify-self:center}._06c7ff39d2f685b9__empty{--wp-ui-popup-empty-min-height:40px;--wp-ui-popup-empty-padding-inline:12px;align-items:center;color:var(--wpds-color-fg-content-neutral-weak);display:flex;grid-area:main;padding-inline:var(--wp-ui-popup-empty-padding-inline);&:not(:empty){min-height:var(--wp-ui-popup-empty-min-height)}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"popup\":\"_234b520016b4e56f__popup _380b81b8f79fb10f__dropdown-motion\",\"list\":\"f43dc7c768d7b622__list\",\"list-scrollable-container\":\"_233cd60cdb84a2ef__list-scrollable-container\",\"list-footer\":\"ec4db6f0122263e7__list-footer\",\"item\":\"_684ccb7988365b4f__item\",\"is-size-compact\":\"f181b98b0d33282a__is-size-compact\",\"is-size-small\":\"_38f7faff93c61958__is-size-small\",\"item-indicator-icon\":\"_92fbe4765dfad5ee__item-indicator-icon\",\"item-indicator\":\"_888a2f021a37fa9c__item-indicator\",\"empty\":\"_06c7ff39d2f685b9__empty\"};\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='671ebfc62d']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"671ebfc62d\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._336cd3e4e743482f__box-sizing{box-sizing:border-box;*,:after,:before{box-sizing:inherit}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"box-sizing\":\"_336cd3e4e743482f__box-sizing\"};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAkC;AAClC,kBAAiB;AACjB,qBAA2B;AAC3B,mBAAsB;;;ACHtB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,uwHAA+wH,CAAC;AAC1zH,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,qBAAQ,EAAC,SAAQ,+DAA8D,QAAO,0BAAyB,6BAA4B,gDAA+C,eAAc,iCAAgC,QAAO,2BAA0B,mBAAkB,qCAAoC,iBAAgB,oCAAmC,uBAAsB,0CAAyC,kBAAiB,qCAAoC,SAAQ,2BAA0B;;;ACN/gB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,kMAAkM,CAAC;AAC7O,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,iBAAQ,EAAC,cAAa,gCAA+B;;;AFA5D,kBAAqB;AASlB;AANI,IAAM,WAAO;AAAA,EACnB,SAASA,MACR,EAAE,WAAW,OAAO,OAAO,WAAW,WAAW,OAAO,GAAG,UAAU,GACrE,KACC;AACD,WACC;AAAA,MAAC,cAAAC,OAAQ;AAAA,MAAR;AAAA,QACA,eAAY,YAAAC;AAAA,UACX,eAAa,YAAa;AAAA,UAC1B,mBAAgB;AAAA,UAChB,mBAAiB,WAAY,IAAK,EAAG;AAAA,UACrC;AAAA,QACD;AAAA,QACA;AAAA,QACA;AAAA,QACE,GAAG;AAAA,QAEL;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,MAAO;AAAA,cACP,eAAY,YAAAA;AAAA,gBACX,mBAAiB,gBAAiB;AAAA,gBAClC,mBAAiB,qBAAsB;AAAA,cACxC;AAAA,cACA,MAAO,SAAS,UAAU,KAAK;AAAA;AAAA,UAChC;AAAA,UACA,4CAAC,cAAAD,OAAQ,UAAR,EAAmB,UAAU;AAAA;AAAA;AAAA,IAC/B;AAAA,EAEF;AACD;",
|
|
6
6
|
"names": ["Item", "_Select", "clsx"]
|
|
7
7
|
}
|
|
@@ -40,10 +40,10 @@ var import_theme = require("@wordpress/theme");
|
|
|
40
40
|
var import_lock_unlock = require("../../../lock-unlock.cjs");
|
|
41
41
|
|
|
42
42
|
// packages/ui/src/utils/css/item-popup.module.css
|
|
43
|
-
if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='
|
|
43
|
+
if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='01a904506d']")) {
|
|
44
44
|
const style = document.createElement("style");
|
|
45
|
-
style.setAttribute("data-wp-hash", "
|
|
46
|
-
style.appendChild(document.createTextNode('@layer wp-ui-utilities{._380b81b8f79fb10f__dropdown-motion{--wp-ui-dropdown-slide-distance:4px;--wp-ui-dropdown-slide-duration:200ms;--wp-ui-dropdown-slide-easing:cubic-bezier(0,0,0,1);--wp-ui-dropdown-fade-duration:80ms;--wp-ui-dropdown-fade-easing:linear;@media not (prefers-reduced-motion){transition-duration:var(--wp-ui-dropdown-slide-duration),var(--wp-ui-dropdown-fade-duration);transition-property:transform,opacity;transition-timing-function:var(--wp-ui-dropdown-slide-easing),var(--wp-ui-dropdown-fade-easing);will-change:transform,opacity}opacity:0;&[data-side=bottom]{transform:translateY(calc(var(--wp-ui-dropdown-slide-distance)*-1))}&[data-side=top]{transform:translateY(var(--wp-ui-dropdown-slide-distance))}&[data-side=left]{transform:translateX(var(--wp-ui-dropdown-slide-distance))}&[data-side=right]{transform:translateX(calc(var(--wp-ui-dropdown-slide-distance)*-1))}&[data-open]:not([data-starting-style]){opacity:1;transform:translate(0)}}}@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._234b520016b4e56f__popup{--wp-ui-popup-padding:4px;background-color:var(--wpds-color-bg-surface-neutral-strong);border:1px solid var(--wpds-color-stroke-surface-neutral);border-radius:var(--wpds-border-radius-md);box-shadow:var(--wpds-elevation-medium);color:var(--wpds-color-fg-interactive-neutral);display:grid;font-family:var(--wpds-font-family-body);font-size:var(--wpds-font-size-md);grid-template-areas:"header" "main";grid-template-rows:auto minmax(0,1fr);line-height:1.4;max-height:min(var(--available-height),480px,60dvh);max-width:var(--available-width);min-width:var(--anchor-width)}.f43dc7c768d7b622__list{display:grid;grid-area:main;grid-template-areas:"scrollable" "footer";grid-template-rows:minmax(0,1fr) auto}._233cd60cdb84a2ef__list-scrollable-container{grid-area:scrollable;overflow-block:auto;overscroll-behavior:contain;scroll-padding-block:var(--wp-ui-popup-padding);&:not(:empty){padding-block:var(--wp-ui-popup-padding)}}.ec4db6f0122263e7__list-footer{grid-area:footer;padding-block:var(--wp-ui-popup-padding);._233cd60cdb84a2ef__list-scrollable-container:not(:empty)+&{border-block-start:1px solid var(--wpds-color-stroke-surface-neutral)}}._684ccb7988365b4f__item{--wp-ui-popup-item-height:40px;--wp-ui-popup-item-padding-inline:12px;--wp-ui-popup-item-padding-block:4px;align-items:center;border-radius:var(--wpds-border-radius-sm);display:grid;gap:var(--wpds-dimension-gap-
|
|
45
|
+
style.setAttribute("data-wp-hash", "01a904506d");
|
|
46
|
+
style.appendChild(document.createTextNode('@layer wp-ui-utilities{._380b81b8f79fb10f__dropdown-motion{--wp-ui-dropdown-slide-distance:4px;--wp-ui-dropdown-slide-duration:200ms;--wp-ui-dropdown-slide-easing:cubic-bezier(0,0,0,1);--wp-ui-dropdown-fade-duration:80ms;--wp-ui-dropdown-fade-easing:linear;@media not (prefers-reduced-motion){transition-duration:var(--wp-ui-dropdown-slide-duration),var(--wp-ui-dropdown-fade-duration);transition-property:transform,opacity;transition-timing-function:var(--wp-ui-dropdown-slide-easing),var(--wp-ui-dropdown-fade-easing);will-change:transform,opacity}opacity:0;&[data-side=bottom]{transform:translateY(calc(var(--wp-ui-dropdown-slide-distance)*-1))}&[data-side=top]{transform:translateY(var(--wp-ui-dropdown-slide-distance))}&[data-side=left]{transform:translateX(var(--wp-ui-dropdown-slide-distance))}&[data-side=right]{transform:translateX(calc(var(--wp-ui-dropdown-slide-distance)*-1))}&[data-open]:not([data-starting-style]){opacity:1;transform:translate(0)}}}@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._234b520016b4e56f__popup{--wp-ui-popup-padding:4px;background-color:var(--wpds-color-bg-surface-neutral-strong);border:1px solid var(--wpds-color-stroke-surface-neutral);border-radius:var(--wpds-border-radius-md);box-shadow:var(--wpds-elevation-medium);color:var(--wpds-color-fg-interactive-neutral);display:grid;font-family:var(--wpds-font-family-body);font-size:var(--wpds-font-size-md);grid-template-areas:"header" "main";grid-template-rows:auto minmax(0,1fr);line-height:1.4;max-height:min(var(--available-height),480px,60dvh);max-width:var(--available-width);min-width:var(--anchor-width)}.f43dc7c768d7b622__list{display:grid;grid-area:main;grid-template-areas:"scrollable" "footer";grid-template-rows:minmax(0,1fr) auto}._233cd60cdb84a2ef__list-scrollable-container{grid-area:scrollable;overflow-block:auto;overscroll-behavior:contain;scroll-padding-block:var(--wp-ui-popup-padding);&:not(:empty){padding-block:var(--wp-ui-popup-padding)}}.ec4db6f0122263e7__list-footer{grid-area:footer;padding-block:var(--wp-ui-popup-padding);._233cd60cdb84a2ef__list-scrollable-container:not(:empty)+&{border-block-start:1px solid var(--wpds-color-stroke-surface-neutral)}}._684ccb7988365b4f__item{--wp-ui-popup-item-height:40px;--wp-ui-popup-item-padding-inline:12px;--wp-ui-popup-item-padding-block:4px;align-items:center;border-radius:var(--wpds-border-radius-sm);display:grid;gap:var(--wpds-dimension-gap-xs);grid-template-columns:24px 1fr;justify-content:flex-start;margin-inline:var(--wp-ui-popup-padding);min-height:var(--wp-ui-popup-item-height);padding-block:var(--wp-ui-popup-item-padding-block);padding-inline-end:var(--wp-ui-popup-item-padding-inline);padding-inline-start:calc(var(--wp-ui-popup-item-padding-inline) - 4px);user-select:none;&.f181b98b0d33282a__is-size-compact{--wp-ui-popup-item-height:32px;--wp-ui-popup-item-padding-inline:8px}&._38f7faff93c61958__is-size-small{--wp-ui-popup-item-height:24px;--wp-ui-popup-item-padding-inline:8px;--wp-ui-popup-item-padding-block:2px}&:not([data-selected]){._92fbe4765dfad5ee__item-indicator-icon{opacity:0}}&[data-highlighted]:not([aria-disabled=true]){background-color:var(--wpds-color-bg-interactive-brand-weak-active);color:var(--wpds-color-fg-interactive-neutral);@media (forced-colors:active){outline:1px solid Highlight}}&[aria-disabled=true]{color:var(--wpds-color-fg-interactive-neutral-disabled);@media (forced-colors:active){color:GrayText}}}._888a2f021a37fa9c__item-indicator{justify-self:center}._06c7ff39d2f685b9__empty{--wp-ui-popup-empty-min-height:40px;--wp-ui-popup-empty-padding-inline:12px;align-items:center;color:var(--wpds-color-fg-content-neutral-weak);display:flex;grid-area:main;padding-inline:var(--wp-ui-popup-empty-padding-inline);&:not(:empty){min-height:var(--wp-ui-popup-empty-min-height)}}}'));
|
|
47
47
|
document.head.appendChild(style);
|
|
48
48
|
}
|
|
49
49
|
var item_popup_default = { "popup": "_234b520016b4e56f__popup _380b81b8f79fb10f__dropdown-motion", "list": "f43dc7c768d7b622__list", "list-scrollable-container": "_233cd60cdb84a2ef__list-scrollable-container", "list-footer": "ec4db6f0122263e7__list-footer", "item": "_684ccb7988365b4f__item", "is-size-compact": "f181b98b0d33282a__is-size-compact", "is-size-small": "_38f7faff93c61958__is-size-small", "item-indicator-icon": "_92fbe4765dfad5ee__item-indicator-icon", "item-indicator": "_888a2f021a37fa9c__item-indicator", "empty": "_06c7ff39d2f685b9__empty" };
|