@vygruppen/spor-react 7.0.0 → 7.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +10 -10
- package/CHANGELOG.md +16 -0
- package/dist/{CountryCodeSelect-OK6RZ6AY.mjs → CountryCodeSelect-NMBC7YLP.mjs} +1 -1
- package/dist/{chunk-CYU6YFQK.mjs → chunk-UQDHT6S5.mjs} +114 -89
- package/dist/index.d.mts +73 -19
- package/dist/index.d.ts +73 -19
- package/dist/index.js +112 -87
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
- package/src/stepper/Stepper.tsx +78 -54
- package/src/stepper/StepperStep.tsx +42 -51
- package/src/theme/components/button.ts +3 -3
- package/src/theme/components/fab.ts +6 -2
- package/src/theme/components/progress-indicator.ts +1 -1
- package/src/theme/components/stepper.ts +29 -15
package/dist/index.d.ts
CHANGED
|
@@ -1953,11 +1953,37 @@ type SporProviderProps = ChakraProviderProps & {
|
|
|
1953
1953
|
declare const SporProvider: ({ theme, language, brand, children, ...props }: SporProviderProps) => React__default.JSX.Element;
|
|
1954
1954
|
|
|
1955
1955
|
type StepperProps = {
|
|
1956
|
+
/** Callback for when a step is clicked */
|
|
1956
1957
|
onClick: (clickedStep: number) => void;
|
|
1958
|
+
/** Callback for when the back button is clicked (on smaller screens).
|
|
1959
|
+
* A boolean indicating whether or not the user is on the first step is passed as an argument.
|
|
1960
|
+
*
|
|
1961
|
+
* If this is not provided, the back button will not be shown on smaller screens on the first step.
|
|
1962
|
+
*/
|
|
1963
|
+
onBackButtonClick?: (isFirstStep: boolean) => void;
|
|
1964
|
+
/**
|
|
1965
|
+
* Heading shown on smaller devices
|
|
1966
|
+
* @deprecated Use `heading` instead
|
|
1967
|
+
*/
|
|
1957
1968
|
title?: string;
|
|
1969
|
+
/** Heading shown on smaller devices */
|
|
1970
|
+
heading?: string;
|
|
1971
|
+
/**
|
|
1972
|
+
* The heading level rendered for the heading shown on smaller devices.
|
|
1973
|
+
*
|
|
1974
|
+
* Defaults to h2
|
|
1975
|
+
* */
|
|
1976
|
+
headingLevel?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p";
|
|
1977
|
+
/** The currently active step */
|
|
1958
1978
|
activeStep: number;
|
|
1979
|
+
/** The labels of each step */
|
|
1959
1980
|
steps: string[];
|
|
1981
|
+
/** The variant.
|
|
1982
|
+
* "base" has a transparent background,
|
|
1983
|
+
* while "accent" has a slight accent color */
|
|
1960
1984
|
variant: "base" | "accent";
|
|
1985
|
+
/** Disables all clicks */
|
|
1986
|
+
isDisabled?: boolean;
|
|
1961
1987
|
};
|
|
1962
1988
|
/**
|
|
1963
1989
|
* A stepper is used to show which step of a process a user is currently in.
|
|
@@ -1966,21 +1992,22 @@ type StepperProps = {
|
|
|
1966
1992
|
*
|
|
1967
1993
|
* ```tsx
|
|
1968
1994
|
* <Stepper
|
|
1969
|
-
* title="
|
|
1995
|
+
* title="Example"
|
|
1970
1996
|
* onClick={handleStepClick}
|
|
1971
1997
|
* activeStep={2}
|
|
1972
|
-
* steps={['
|
|
1998
|
+
* steps={['Where', 'When', 'How']}
|
|
1973
1999
|
* />
|
|
1974
2000
|
* ```
|
|
1975
2001
|
**/
|
|
1976
|
-
declare const Stepper: ({ onClick, steps, activeStep: activeStepAsStringOrNumber, title, variant, }: StepperProps) => React__default.JSX.Element;
|
|
2002
|
+
declare const Stepper: ({ onClick, onBackButtonClick, steps, activeStep: activeStepAsStringOrNumber, title, heading, headingLevel, variant, isDisabled, }: StepperProps) => React__default.JSX.Element;
|
|
1977
2003
|
|
|
1978
2004
|
type StepperStepProps = {
|
|
1979
2005
|
children: React__default.ReactNode;
|
|
1980
2006
|
stepNumber: number;
|
|
1981
2007
|
variant: "base" | "accent";
|
|
2008
|
+
isDisabled?: boolean;
|
|
1982
2009
|
};
|
|
1983
|
-
declare const StepperStep: ({ children, stepNumber, variant, }: StepperStepProps) => React__default.JSX.Element;
|
|
2010
|
+
declare const StepperStep: ({ children, stepNumber, variant, isDisabled: isDisabledOverride, }: StepperStepProps) => React__default.JSX.Element;
|
|
1984
2011
|
|
|
1985
2012
|
type TabsProps = Exclude<TabsProps$1, "colorScheme" | "variant" | "orientation" | "size"> & {
|
|
1986
2013
|
colorScheme: "base" | "accent";
|
|
@@ -3312,6 +3339,10 @@ declare const theme: {
|
|
|
3312
3339
|
container: {
|
|
3313
3340
|
_hover: {
|
|
3314
3341
|
backgroundColor: string;
|
|
3342
|
+
_disabled: {
|
|
3343
|
+
backgroundColor: string;
|
|
3344
|
+
color: string;
|
|
3345
|
+
};
|
|
3315
3346
|
};
|
|
3316
3347
|
zIndex: string;
|
|
3317
3348
|
_focusVisible: {
|
|
@@ -3340,6 +3371,10 @@ declare const theme: {
|
|
|
3340
3371
|
} | {
|
|
3341
3372
|
_hover: {
|
|
3342
3373
|
backgroundColor: string;
|
|
3374
|
+
_disabled: {
|
|
3375
|
+
backgroundColor: string;
|
|
3376
|
+
color: string;
|
|
3377
|
+
};
|
|
3343
3378
|
};
|
|
3344
3379
|
zIndex: string;
|
|
3345
3380
|
_focusVisible: {
|
|
@@ -3372,6 +3407,10 @@ declare const theme: {
|
|
|
3372
3407
|
} | {
|
|
3373
3408
|
_hover: {
|
|
3374
3409
|
backgroundColor: string;
|
|
3410
|
+
_disabled: {
|
|
3411
|
+
backgroundColor: string;
|
|
3412
|
+
color: string;
|
|
3413
|
+
};
|
|
3375
3414
|
};
|
|
3376
3415
|
zIndex: string;
|
|
3377
3416
|
_focusVisible: {
|
|
@@ -3404,6 +3443,10 @@ declare const theme: {
|
|
|
3404
3443
|
} | {
|
|
3405
3444
|
_hover: {
|
|
3406
3445
|
backgroundColor: string;
|
|
3446
|
+
_disabled: {
|
|
3447
|
+
backgroundColor: string;
|
|
3448
|
+
color: string;
|
|
3449
|
+
};
|
|
3407
3450
|
};
|
|
3408
3451
|
zIndex: string;
|
|
3409
3452
|
_focusVisible: {
|
|
@@ -3436,6 +3479,10 @@ declare const theme: {
|
|
|
3436
3479
|
} | {
|
|
3437
3480
|
_hover: {
|
|
3438
3481
|
backgroundColor: string;
|
|
3482
|
+
_disabled: {
|
|
3483
|
+
backgroundColor: string;
|
|
3484
|
+
color: string;
|
|
3485
|
+
};
|
|
3439
3486
|
};
|
|
3440
3487
|
zIndex: string;
|
|
3441
3488
|
_focusVisible: {
|
|
@@ -4693,32 +4740,27 @@ declare const theme: {
|
|
|
4693
4740
|
} | undefined;
|
|
4694
4741
|
};
|
|
4695
4742
|
Stepper: {
|
|
4696
|
-
baseStyle?:
|
|
4743
|
+
baseStyle?: {
|
|
4697
4744
|
root: {
|
|
4698
4745
|
display: string;
|
|
4699
4746
|
alignItems: string;
|
|
4700
|
-
justifyContent: ("center" | "space-between")[];
|
|
4701
|
-
minHeight: ("48px" | "60px")[];
|
|
4747
|
+
justifyContent: ("center" | "space-between" | null)[];
|
|
4748
|
+
minHeight: ("48px" | "60px" | null)[];
|
|
4702
4749
|
overflowX: string;
|
|
4703
4750
|
width: string;
|
|
4704
4751
|
};
|
|
4705
4752
|
container: {
|
|
4706
|
-
paddingX: number[];
|
|
4753
|
+
paddingX: (number | null)[];
|
|
4707
4754
|
maxWidth: string;
|
|
4708
4755
|
marginX: string;
|
|
4709
4756
|
width: string;
|
|
4710
4757
|
};
|
|
4711
4758
|
innerContainer: {
|
|
4712
4759
|
overflow: string;
|
|
4713
|
-
display: ("flex" | "none")[];
|
|
4760
|
+
display: ("flex" | "none" | null)[];
|
|
4714
4761
|
alignItems: string;
|
|
4715
4762
|
justifyContent: string;
|
|
4716
|
-
|
|
4717
|
-
backButton: {
|
|
4718
|
-
borderRadius: string;
|
|
4719
|
-
paddingX: number;
|
|
4720
|
-
width: string;
|
|
4721
|
-
minWidth: string;
|
|
4763
|
+
gap: number;
|
|
4722
4764
|
};
|
|
4723
4765
|
title: {
|
|
4724
4766
|
overflow: string;
|
|
@@ -4726,8 +4768,8 @@ declare const theme: {
|
|
|
4726
4768
|
WebkitLineClamp: number;
|
|
4727
4769
|
display: string;
|
|
4728
4770
|
WebkitBoxOrient: string;
|
|
4729
|
-
marginLeft: number;
|
|
4730
4771
|
textAlign: string;
|
|
4772
|
+
maxWidth: string;
|
|
4731
4773
|
};
|
|
4732
4774
|
stepContainer: {
|
|
4733
4775
|
display: string;
|
|
@@ -4737,10 +4779,10 @@ declare const theme: {
|
|
|
4737
4779
|
textStyle: string;
|
|
4738
4780
|
whiteSpace: string;
|
|
4739
4781
|
};
|
|
4740
|
-
}
|
|
4782
|
+
} | undefined;
|
|
4741
4783
|
sizes?: {
|
|
4742
4784
|
[key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
|
|
4743
|
-
keys: ("title" | "container" | "closeButton" | "root" | "innerContainer" | "
|
|
4785
|
+
keys: ("title" | "container" | "closeButton" | "root" | "innerContainer" | "stepCounter" | "stepContainer" | "stepButton" | "stepNumber" | "stepTitle")[];
|
|
4744
4786
|
}>;
|
|
4745
4787
|
} | undefined;
|
|
4746
4788
|
variants?: {
|
|
@@ -4752,6 +4794,18 @@ declare const theme: {
|
|
|
4752
4794
|
accent: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
|
|
4753
4795
|
root: {
|
|
4754
4796
|
backgroundColor: string;
|
|
4797
|
+
color: string;
|
|
4798
|
+
};
|
|
4799
|
+
stepButton: {
|
|
4800
|
+
color: string;
|
|
4801
|
+
_hover: {
|
|
4802
|
+
backgroundColor: string;
|
|
4803
|
+
};
|
|
4804
|
+
};
|
|
4805
|
+
backButton: {
|
|
4806
|
+
_hover: {
|
|
4807
|
+
backgroundColor: string;
|
|
4808
|
+
};
|
|
4755
4809
|
};
|
|
4756
4810
|
};
|
|
4757
4811
|
} | undefined;
|
|
@@ -4760,7 +4814,7 @@ declare const theme: {
|
|
|
4760
4814
|
variant?: "base" | "accent" | undefined;
|
|
4761
4815
|
colorScheme?: string | undefined;
|
|
4762
4816
|
} | undefined;
|
|
4763
|
-
parts: ("title" | "container" | "closeButton" | "root" | "innerContainer" | "
|
|
4817
|
+
parts: ("title" | "container" | "closeButton" | "root" | "innerContainer" | "stepCounter" | "stepContainer" | "stepButton" | "stepNumber" | "stepTitle")[];
|
|
4764
4818
|
};
|
|
4765
4819
|
Switch: {
|
|
4766
4820
|
baseStyle?: {
|
package/dist/index.js
CHANGED
|
@@ -5140,16 +5140,22 @@ var init_Stepper = __esm({
|
|
|
5140
5140
|
exports.Stepper = ({
|
|
5141
5141
|
onClick = () => {
|
|
5142
5142
|
},
|
|
5143
|
+
onBackButtonClick,
|
|
5143
5144
|
steps,
|
|
5144
5145
|
activeStep: activeStepAsStringOrNumber,
|
|
5145
5146
|
title,
|
|
5146
|
-
|
|
5147
|
+
heading,
|
|
5148
|
+
headingLevel,
|
|
5149
|
+
variant,
|
|
5150
|
+
isDisabled
|
|
5147
5151
|
}) => {
|
|
5148
5152
|
const style = react.useMultiStyleConfig("Stepper", { variant });
|
|
5149
5153
|
const numberOfSteps = steps.length;
|
|
5150
5154
|
const activeStep = Number(activeStepAsStringOrNumber);
|
|
5151
5155
|
const { t: t2 } = useTranslation();
|
|
5152
|
-
|
|
5156
|
+
const hideBackButtonOnFirstStep = activeStep === 1 && !onBackButtonClick;
|
|
5157
|
+
const shownHeading = heading || title;
|
|
5158
|
+
return /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { sx: style.root }, /* @__PURE__ */ React69__namespace.default.createElement(
|
|
5153
5159
|
StepperProvider,
|
|
5154
5160
|
{
|
|
5155
5161
|
onClick,
|
|
@@ -5157,40 +5163,51 @@ var init_Stepper = __esm({
|
|
|
5157
5163
|
variant,
|
|
5158
5164
|
numberOfSteps
|
|
5159
5165
|
},
|
|
5160
|
-
/* @__PURE__ */ React69__namespace.default.createElement(react.Box, {
|
|
5161
|
-
|
|
5162
|
-
{
|
|
5163
|
-
"aria-label": t2(texts23.back),
|
|
5164
|
-
icon: /* @__PURE__ */ React69__namespace.default.createElement(sporIconReact.DropdownLeftFill24Icon, null),
|
|
5165
|
-
variant: "ghost",
|
|
5166
|
-
size: "sm",
|
|
5167
|
-
onClick: () => onClick(activeStep - 1),
|
|
5168
|
-
__css: style.backButton
|
|
5169
|
-
}
|
|
5170
|
-
), /* @__PURE__ */ React69__namespace.default.createElement(
|
|
5171
|
-
exports.SimplePopover,
|
|
5166
|
+
/* @__PURE__ */ React69__namespace.default.createElement(react.Box, { sx: style.container }, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { sx: style.innerContainer }, /* @__PURE__ */ React69__namespace.default.createElement(
|
|
5167
|
+
react.Flex,
|
|
5172
5168
|
{
|
|
5173
|
-
|
|
5174
|
-
|
|
5169
|
+
justifyContent: "space-between",
|
|
5170
|
+
alignItems: "center",
|
|
5171
|
+
gap: 2,
|
|
5172
|
+
flex: 1
|
|
5175
5173
|
},
|
|
5176
|
-
|
|
5177
|
-
exports.
|
|
5174
|
+
/* @__PURE__ */ React69__namespace.default.createElement(
|
|
5175
|
+
exports.IconButton,
|
|
5178
5176
|
{
|
|
5179
|
-
|
|
5180
|
-
|
|
5181
|
-
variant
|
|
5182
|
-
|
|
5183
|
-
|
|
5184
|
-
|
|
5185
|
-
|
|
5177
|
+
"aria-label": t2(texts23.back),
|
|
5178
|
+
icon: /* @__PURE__ */ React69__namespace.default.createElement(sporIconReact.ArrowLeftFill24Icon, null),
|
|
5179
|
+
variant: "ghost",
|
|
5180
|
+
size: "sm",
|
|
5181
|
+
visibility: hideBackButtonOnFirstStep ? "hidden" : "visible",
|
|
5182
|
+
onClick: () => {
|
|
5183
|
+
if (onBackButtonClick) {
|
|
5184
|
+
onBackButtonClick(activeStep === 1);
|
|
5185
|
+
}
|
|
5186
|
+
onClick(activeStep - 1);
|
|
5187
|
+
}
|
|
5188
|
+
}
|
|
5189
|
+
),
|
|
5190
|
+
shownHeading && /* @__PURE__ */ React69__namespace.default.createElement(exports.Text, { flex: 1, variant: "sm", as: headingLevel, sx: style.title }, shownHeading),
|
|
5191
|
+
/* @__PURE__ */ React69__namespace.default.createElement(react.Box, { sx: style.stepCounter }, t2(texts23.stepsOf(activeStep, numberOfSteps)))
|
|
5192
|
+
)), /* @__PURE__ */ React69__namespace.default.createElement(react.Flex, { justifyContent: "center", display: ["none", null, "flex"] }, steps.map((step, index) => /* @__PURE__ */ React69__namespace.default.createElement(
|
|
5193
|
+
exports.StepperStep,
|
|
5194
|
+
{
|
|
5195
|
+
key: index,
|
|
5196
|
+
stepNumber: index + 1,
|
|
5197
|
+
variant,
|
|
5198
|
+
"aria-current": index + 1 === activeStep ? "step" : void 0,
|
|
5199
|
+
isDisabled
|
|
5200
|
+
},
|
|
5201
|
+
step
|
|
5202
|
+
))))
|
|
5186
5203
|
));
|
|
5187
5204
|
};
|
|
5188
5205
|
texts23 = createTexts({
|
|
5189
5206
|
stepsOf: (activeStep, numberOfSteps) => ({
|
|
5190
|
-
nb: `Steg ${activeStep}
|
|
5191
|
-
nn: `Steg ${activeStep}
|
|
5192
|
-
sv: `Steg ${activeStep}
|
|
5193
|
-
en: `Step ${activeStep}
|
|
5207
|
+
nb: `Steg ${activeStep}/${numberOfSteps}`,
|
|
5208
|
+
nn: `Steg ${activeStep}/${numberOfSteps}`,
|
|
5209
|
+
sv: `Steg ${activeStep}/${numberOfSteps}`,
|
|
5210
|
+
en: `Step ${activeStep}/${numberOfSteps}`
|
|
5194
5211
|
}),
|
|
5195
5212
|
back: {
|
|
5196
5213
|
nb: "Tilbake",
|
|
@@ -5201,7 +5218,7 @@ var init_Stepper = __esm({
|
|
|
5201
5218
|
});
|
|
5202
5219
|
}
|
|
5203
5220
|
});
|
|
5204
|
-
exports.StepperStep = void 0; var
|
|
5221
|
+
exports.StepperStep = void 0; var getState;
|
|
5205
5222
|
var init_StepperStep = __esm({
|
|
5206
5223
|
"src/stepper/StepperStep.tsx"() {
|
|
5207
5224
|
init_src();
|
|
@@ -5209,7 +5226,8 @@ var init_StepperStep = __esm({
|
|
|
5209
5226
|
exports.StepperStep = ({
|
|
5210
5227
|
children,
|
|
5211
5228
|
stepNumber,
|
|
5212
|
-
variant
|
|
5229
|
+
variant,
|
|
5230
|
+
isDisabled: isDisabledOverride
|
|
5213
5231
|
}) => {
|
|
5214
5232
|
const { activeStep, onClick } = useStepper();
|
|
5215
5233
|
const state2 = getState(stepNumber, activeStep);
|
|
@@ -5217,45 +5235,42 @@ var init_StepperStep = __esm({
|
|
|
5217
5235
|
state: state2,
|
|
5218
5236
|
variant
|
|
5219
5237
|
});
|
|
5220
|
-
const
|
|
5221
|
-
|
|
5238
|
+
const disabledTextColor = react.useColorModeValue(
|
|
5239
|
+
"blackAlpha.400",
|
|
5240
|
+
"whiteAlpha.400"
|
|
5241
|
+
);
|
|
5242
|
+
const iconColor = react.useColorModeValue("blackAlpha.200", "whiteAlpha.200");
|
|
5243
|
+
const isDisabled = state2 !== "active" && isDisabledOverride || state2 === "disabled";
|
|
5244
|
+
return /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { sx: style.stepContainer }, stepNumber > 1 && /* @__PURE__ */ React69__namespace.default.createElement(
|
|
5245
|
+
sporIconReact.DropdownRightFill18Icon,
|
|
5246
|
+
{
|
|
5247
|
+
marginX: 5,
|
|
5248
|
+
display: ["none", null, "block"],
|
|
5249
|
+
color: iconColor
|
|
5250
|
+
}
|
|
5251
|
+
), isDisabled ? /* @__PURE__ */ React69__namespace.default.createElement(
|
|
5252
|
+
exports.Text,
|
|
5253
|
+
{
|
|
5254
|
+
variant: "xs",
|
|
5255
|
+
fontSize: "16px",
|
|
5256
|
+
color: disabledTextColor,
|
|
5257
|
+
cursor: "default",
|
|
5258
|
+
paddingX: 2
|
|
5259
|
+
},
|
|
5260
|
+
children
|
|
5261
|
+
) : /* @__PURE__ */ React69__namespace.default.createElement(
|
|
5222
5262
|
exports.Button,
|
|
5223
5263
|
{
|
|
5224
5264
|
size: "xs",
|
|
5225
|
-
variant: state2 === "active" ? "primary" :
|
|
5226
|
-
|
|
5227
|
-
|
|
5265
|
+
variant: state2 === "active" ? "primary" : "ghost",
|
|
5266
|
+
onClick: state2 === "completed" ? () => onClick(stepNumber) : void 0,
|
|
5267
|
+
pointerEvents: state2 === "active" ? "none" : "auto",
|
|
5268
|
+
tabIndex: state2 === "active" ? -1 : void 0,
|
|
5269
|
+
sx: style.stepButton
|
|
5228
5270
|
},
|
|
5229
5271
|
children
|
|
5230
5272
|
));
|
|
5231
5273
|
};
|
|
5232
|
-
getButtonStylesForState = (state2) => {
|
|
5233
|
-
switch (state2) {
|
|
5234
|
-
case "active":
|
|
5235
|
-
return {
|
|
5236
|
-
_hover: {},
|
|
5237
|
-
boxShadow: "none",
|
|
5238
|
-
_focus: {},
|
|
5239
|
-
_active: {},
|
|
5240
|
-
cursor: "auto"
|
|
5241
|
-
};
|
|
5242
|
-
case "completed":
|
|
5243
|
-
return {
|
|
5244
|
-
boxShadow: "none"
|
|
5245
|
-
};
|
|
5246
|
-
case "disabled":
|
|
5247
|
-
return {
|
|
5248
|
-
_disabled: {},
|
|
5249
|
-
_hover: {},
|
|
5250
|
-
_focus: {},
|
|
5251
|
-
_active: {},
|
|
5252
|
-
color: "dimGrey",
|
|
5253
|
-
cursor: "auto"
|
|
5254
|
-
};
|
|
5255
|
-
default:
|
|
5256
|
-
return {};
|
|
5257
|
-
}
|
|
5258
|
-
};
|
|
5259
5274
|
getState = (stepNumber, activeStep) => {
|
|
5260
5275
|
if (stepNumber < activeStep) {
|
|
5261
5276
|
return "completed";
|
|
@@ -11536,12 +11551,12 @@ var init_button2 = __esm({
|
|
|
11536
11551
|
_disabled: {
|
|
11537
11552
|
cursor: "not-allowed",
|
|
11538
11553
|
boxShadow: "none",
|
|
11539
|
-
backgroundColor: "
|
|
11540
|
-
color: "
|
|
11554
|
+
backgroundColor: themeTools.mode("blackAlpha.100", "whiteAlpha.100")(props),
|
|
11555
|
+
color: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
|
|
11541
11556
|
},
|
|
11542
11557
|
_hover: {
|
|
11543
11558
|
_disabled: {
|
|
11544
|
-
background: "
|
|
11559
|
+
background: themeTools.mode("blackAlpha.100", "whiteAlpha.100")(props)
|
|
11545
11560
|
}
|
|
11546
11561
|
}
|
|
11547
11562
|
}),
|
|
@@ -12754,12 +12769,16 @@ var init_fab = __esm({
|
|
|
12754
12769
|
position: "fixed",
|
|
12755
12770
|
...getPositionProps(props),
|
|
12756
12771
|
_disabled: {
|
|
12757
|
-
backgroundColor: "whiteAlpha.
|
|
12758
|
-
color: "
|
|
12772
|
+
backgroundColor: themeTools.mode("blackAlpha.100", "whiteAlpha.100")(props),
|
|
12773
|
+
color: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
|
|
12759
12774
|
},
|
|
12760
12775
|
...focusVisibleStyles(props),
|
|
12761
12776
|
_hover: {
|
|
12762
|
-
backgroundColor: "seaMist"
|
|
12777
|
+
backgroundColor: "seaMist",
|
|
12778
|
+
_disabled: {
|
|
12779
|
+
backgroundColor: themeTools.mode("blackAlpha.100", "whiteAlpha.100")(props),
|
|
12780
|
+
color: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
|
|
12781
|
+
}
|
|
12763
12782
|
},
|
|
12764
12783
|
zIndex: "sticky"
|
|
12765
12784
|
},
|
|
@@ -14048,7 +14067,7 @@ var init_progress_indicator2 = __esm({
|
|
|
14048
14067
|
}
|
|
14049
14068
|
},
|
|
14050
14069
|
circle: {
|
|
14051
|
-
fill: themeTools.mode("blackAlpha.
|
|
14070
|
+
fill: themeTools.mode("blackAlpha.200", "whiteAlpha.200")(props)
|
|
14052
14071
|
}
|
|
14053
14072
|
}
|
|
14054
14073
|
}),
|
|
@@ -14225,7 +14244,6 @@ var init_stepper2 = __esm({
|
|
|
14225
14244
|
"root",
|
|
14226
14245
|
"container",
|
|
14227
14246
|
"innerContainer",
|
|
14228
|
-
"backButton",
|
|
14229
14247
|
"title",
|
|
14230
14248
|
"stepCounter",
|
|
14231
14249
|
"stepContainer",
|
|
@@ -14236,32 +14254,27 @@ var init_stepper2 = __esm({
|
|
|
14236
14254
|
);
|
|
14237
14255
|
helpers22 = react.createMultiStyleConfigHelpers(parts14.keys);
|
|
14238
14256
|
config32 = helpers22.defineMultiStyleConfig({
|
|
14239
|
-
baseStyle:
|
|
14257
|
+
baseStyle: {
|
|
14240
14258
|
root: {
|
|
14241
14259
|
display: "flex",
|
|
14242
14260
|
alignItems: "center",
|
|
14243
|
-
justifyContent: ["space-between", "center"],
|
|
14244
|
-
minHeight: ["48px", "60px"],
|
|
14261
|
+
justifyContent: ["space-between", null, "center"],
|
|
14262
|
+
minHeight: ["48px", null, "60px"],
|
|
14245
14263
|
overflowX: "auto",
|
|
14246
14264
|
width: "100%"
|
|
14247
14265
|
},
|
|
14248
14266
|
container: {
|
|
14249
|
-
paddingX: [2,
|
|
14267
|
+
paddingX: [2, null, null, 0],
|
|
14250
14268
|
maxWidth: "container.lg",
|
|
14251
14269
|
marginX: "auto",
|
|
14252
14270
|
width: "100%"
|
|
14253
14271
|
},
|
|
14254
14272
|
innerContainer: {
|
|
14255
14273
|
overflow: "hidden",
|
|
14256
|
-
display: ["flex", "none"],
|
|
14274
|
+
display: ["flex", null, "none"],
|
|
14257
14275
|
alignItems: "center",
|
|
14258
|
-
justifyContent: "space-between"
|
|
14259
|
-
|
|
14260
|
-
backButton: {
|
|
14261
|
-
borderRadius: "xs",
|
|
14262
|
-
paddingX: 0,
|
|
14263
|
-
width: "auto",
|
|
14264
|
-
minWidth: "auto"
|
|
14276
|
+
justifyContent: "space-between",
|
|
14277
|
+
gap: 3
|
|
14265
14278
|
},
|
|
14266
14279
|
title: {
|
|
14267
14280
|
overflow: "hidden",
|
|
@@ -14269,8 +14282,8 @@ var init_stepper2 = __esm({
|
|
|
14269
14282
|
WebkitLineClamp: 2,
|
|
14270
14283
|
display: "-webkit-box",
|
|
14271
14284
|
WebkitBoxOrient: "vertical",
|
|
14272
|
-
|
|
14273
|
-
|
|
14285
|
+
textAlign: "center",
|
|
14286
|
+
maxWidth: "80%"
|
|
14274
14287
|
},
|
|
14275
14288
|
stepContainer: {
|
|
14276
14289
|
display: "flex",
|
|
@@ -14280,7 +14293,7 @@ var init_stepper2 = __esm({
|
|
|
14280
14293
|
textStyle: "sm",
|
|
14281
14294
|
whiteSpace: "nowrap"
|
|
14282
14295
|
}
|
|
14283
|
-
}
|
|
14296
|
+
},
|
|
14284
14297
|
variants: {
|
|
14285
14298
|
base: () => ({
|
|
14286
14299
|
root: {
|
|
@@ -14289,7 +14302,19 @@ var init_stepper2 = __esm({
|
|
|
14289
14302
|
}),
|
|
14290
14303
|
accent: (props) => ({
|
|
14291
14304
|
root: {
|
|
14292
|
-
backgroundColor: themeTools.mode("seaMist", "pine")(props)
|
|
14305
|
+
backgroundColor: themeTools.mode("seaMist", "pine")(props),
|
|
14306
|
+
color: themeTools.mode("darkTeal", "seaMist")(props)
|
|
14307
|
+
},
|
|
14308
|
+
stepButton: {
|
|
14309
|
+
color: props.state === "disabled" ? themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props) : props.state === "completed" ? themeTools.mode("darkTeal", "white")(props) : themeTools.mode("white", "darkTeal")(props),
|
|
14310
|
+
_hover: {
|
|
14311
|
+
backgroundColor: props.state === "disabled" ? "transparent" : themeTools.mode("coralGreen", "greenHaze")(props)
|
|
14312
|
+
}
|
|
14313
|
+
},
|
|
14314
|
+
backButton: {
|
|
14315
|
+
_hover: {
|
|
14316
|
+
backgroundColor: themeTools.mode("coralGreen", "greenHaze")(props)
|
|
14317
|
+
}
|
|
14293
14318
|
}
|
|
14294
14319
|
})
|
|
14295
14320
|
},
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-
|
|
1
|
+
export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-UQDHT6S5.mjs';
|