@wistia/ui 0.8.2-beta.16b605aa.d0ead36 → 0.8.2
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/dist/index.cjs +12 -16
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +3 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.mjs +12 -16
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license @wistia/ui v0.8.2
|
|
3
|
+
* @license @wistia/ui v0.8.2
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -9141,7 +9141,6 @@ var import_type_guards31 = require("@wistia/type-guards");
|
|
|
9141
9141
|
// src/css/sharedStyles/inputCssVariables.ts
|
|
9142
9142
|
var import_styled_components45 = require("styled-components");
|
|
9143
9143
|
var inputCssVariables = import_styled_components45.css`
|
|
9144
|
-
/* Colors */
|
|
9145
9144
|
--wui-input-color-bg: var(--wui-color-bg-surface);
|
|
9146
9145
|
--wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
|
|
9147
9146
|
--wui-input-color-border: var(--wui-color-border-secondary);
|
|
@@ -9149,20 +9148,13 @@ var inputCssVariables = import_styled_components45.css`
|
|
|
9149
9148
|
--wui-input-color-border-error: var(--wui-color-invalid-indicator);
|
|
9150
9149
|
--wui-input-color-border-disabled: var(--wui-color-border-disabled);
|
|
9151
9150
|
--wui-input-color-text: var(--wui-color-text);
|
|
9152
|
-
|
|
9153
|
-
/* Border */
|
|
9154
9151
|
--wui-input-border-radius: var(--wui-border-radius-03);
|
|
9155
9152
|
--wui-input-multiline-border-radius: var(--wui-border-radius-02);
|
|
9156
|
-
|
|
9157
|
-
/* Padding */
|
|
9158
9153
|
--wui-input-vertical-padding: var(--wui-space-02);
|
|
9159
9154
|
--wui-input-horizontal-padding: var(--wui-space-03);
|
|
9160
|
-
|
|
9161
|
-
/* Typography */
|
|
9162
9155
|
--wui-input-placeholder: var(--wui-gray-10);
|
|
9163
9156
|
--wui-input-font-size: var(--wui-typography-body-3-size);
|
|
9164
9157
|
--wui-input-line-height: 16px;
|
|
9165
|
-
--wui-input-font-weight: var(--wui-typography-weight-body);
|
|
9166
9158
|
`;
|
|
9167
9159
|
|
|
9168
9160
|
// src/components/Input/Input.tsx
|
|
@@ -9179,7 +9171,7 @@ var inputStyles = import_styled_components46.css`
|
|
|
9179
9171
|
border-radius: var(--wui-input-border-radius);
|
|
9180
9172
|
font-size: var(--wui-input-font-size);
|
|
9181
9173
|
line-height: var(--wui-input-line-height);
|
|
9182
|
-
font-weight: var(--wui-
|
|
9174
|
+
font-weight: var(--wui-typography-weight-body);
|
|
9183
9175
|
color: var(--wui-input-color-text);
|
|
9184
9176
|
|
|
9185
9177
|
&::placeholder {
|
|
@@ -9349,11 +9341,15 @@ var StyledInput = (0, import_styled_components47.default)(Input)`
|
|
|
9349
9341
|
min-height: unset;
|
|
9350
9342
|
}
|
|
9351
9343
|
|
|
9344
|
+
resize: vertical;
|
|
9345
|
+
font-size: var(--wui-typography-heading-1-size);
|
|
9346
|
+
font-weight: var(--wui-typography-heading-1-weight);
|
|
9347
|
+
line-height: var(--wui-typography-heading-1-line-height);
|
|
9348
|
+
font-family: var(--wui-typography-heading-1-family);
|
|
9349
|
+
outline: 2px solid var(--wui-color-focus-ring);
|
|
9350
|
+
outline-offset: -2px;
|
|
9351
|
+
|
|
9352
9352
|
&& {
|
|
9353
|
-
--wui-input-font-size: var(--wui-typography-heading-1-size);
|
|
9354
|
-
--wui-input-font-weight: var(--wui-typography-heading-1-weight);
|
|
9355
|
-
--wui-input-line-height: var(--wui-typography-heading-1-line-height);
|
|
9356
|
-
font-family: var(--wui-typography-heading-1-family);
|
|
9357
9353
|
width: 100%;
|
|
9358
9354
|
padding: var(--wui-space-02);
|
|
9359
9355
|
border: none;
|
|
@@ -9384,7 +9380,7 @@ var EditableHeading = ({
|
|
|
9384
9380
|
onEditingChange,
|
|
9385
9381
|
tooltipText = "Click to edit title",
|
|
9386
9382
|
ariaLabel = "Edit title",
|
|
9387
|
-
|
|
9383
|
+
forceEditing = false,
|
|
9388
9384
|
editingDisabled = false
|
|
9389
9385
|
}) => {
|
|
9390
9386
|
const [isEditing, setIsEditing] = (0, import_react29.useState)(false);
|
|
@@ -9437,7 +9433,7 @@ var EditableHeading = ({
|
|
|
9437
9433
|
if (editingDisabled) {
|
|
9438
9434
|
return HeadingComponent2;
|
|
9439
9435
|
}
|
|
9440
|
-
if (isEditing ||
|
|
9436
|
+
if (isEditing || forceEditing) {
|
|
9441
9437
|
return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
|
|
9442
9438
|
StyledInput,
|
|
9443
9439
|
{
|