npm - @transferwise/components - Versions diffs - 0.0.0-experimental-d6b038b → 0.0.0-experimental-c84454a - Mend

@transferwise/components 0.0.0-experimental-d6b038b → 0.0.0-experimental-c84454a

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.

Files changed (480) hide show

package/build/field/Field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n FieldLabelContextProvider,\n InputDescribedByProvider,\n InputIdContextProvider,\n InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. /\n id?: string \| null;\n /* Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. /\n label?: React.ReactNode;\n required?: boolean;\n /* @deprecated ~~use~~ `description` prop instead /\n hint?: React.ReactNode;\n message?: React.ReactNode;\n /\n Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n * announced by the screen readers\n * /\n messageIconLabel?: string;\n /\n If true, shows a loading spinner in place of the message icon of the InlinePrompt\n /\n messageLoading?: boolean;\n description?: React.ReactNode;\n /* @deprecated ~~use~~ `message` and `type={Sentiment.NEGATIVE}` prop instead /\n error?: React.ReactNode;\n sentiment?: InlinePromptProps['sentiment'];\n className?: string;\n children?: React.ReactNode;\n};\n\nexport const Field = ({\n id,\n label,\n required = true,\n message: propMessage,\n messageIconLabel,\n messageLoading,\n hint,\n description = hint,\n sentiment: propType = Sentiment.NEUTRAL,\n className,\n children,\n ...props\n}: FieldProps) => {\n const labelRef = useRef<HTMLLabelElement>(null);\n const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n const message = propMessage \|\| props.error;\n const hasError = sentiment === Sentiment.NEGATIVE;\n\n const labelId = useId();\n\n const fallbackInputId = useId();\n const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n const messageId = useId();\n const descriptionId = useId();\n\n /\n form control can have multiple messages to describe it,\n * e.g the description underneath the label and inline alert\n */\n function ariaDescribedbyByIds() {\n const messageIds = [];\n if (description) {\n messageIds.push(descriptionId);\n }\n if (message) {\n messageIds.push(messageId);\n }\n return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n }\n\n return (\n <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n <InputIdContextProvider value={inputId}>\n <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n <InputInvalidProvider value={hasError}>\n <div\n className={clsx(\n 'np-field form-group d-block',\n {\n 'has-success': sentiment === Sentiment.POSITIVE,\n 'has-warning': sentiment === Sentiment.WARNING,\n 'has-error': hasError,\n 'has-info': sentiment === Sentiment.NEUTRAL,\n },\n className,\n )}\n >\n {label != null ? (\n <>\n <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n {required ? label : <Label.Optional>{label}</Label.Optional>}\n </Label>\n <Label.Description id={descriptionId}>{description}</Label.Description>\n <div className=\"np-field-control\">{children}</div>\n </>\n ) : (\n children\n )}\n\n {message && (\n <InlinePrompt\n sentiment={sentiment}\n id={messageId}\n mediaLabel={messageIconLabel}\n className=\"np-field__prompt\"\n loading={messageLoading}\n width=\"full\"\n >\n {message}\n </InlinePrompt>\n )}\n </div>\n </InputInvalidProvider>\n </InputDescribedByProvider>\n </InputIdContextProvider>\n </FieldLabelContextProvider>\n );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAuCO~~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"}
1	+ {"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n FieldLabelContextProvider,\n InputDescribedByProvider,\n InputIdContextProvider,\n InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. /\n id?: string \| null;\n /* Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. /\n label?: React.ReactNode;\n /* @default true /\n required?: boolean;\n /* @deprecated Use `description` prop instead. /\n hint?: React.ReactNode;\n message?: React.ReactNode;\n /\n Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n * announced by the screen readers\n * /\n messageIconLabel?: string;\n /\n If true, shows a loading spinner in place of the message icon of the InlinePrompt\n * @default false\n /\n messageLoading?: boolean;\n description?: React.ReactNode;\n /* @deprecated Use `message` and `type={Sentiment.NEGATIVE}` prop instead. /\n error?: React.ReactNode;\n /* @default Sentiment.NEUTRAL /\n sentiment?: InlinePromptProps['sentiment'];\n className?: string;\n children?: React.ReactNode;\n};\n\nexport const Field = ({\n id,\n label,\n required = true,\n message: propMessage,\n messageIconLabel,\n messageLoading,\n hint,\n description = hint,\n sentiment: propType = Sentiment.NEUTRAL,\n className,\n children,\n ...props\n}: FieldProps) => {\n const labelRef = useRef<HTMLLabelElement>(null);\n const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n const message = propMessage \|\| props.error;\n const hasError = sentiment === Sentiment.NEGATIVE;\n\n const labelId = useId();\n\n const fallbackInputId = useId();\n const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n const messageId = useId();\n const descriptionId = useId();\n\n /\n form control can have multiple messages to describe it,\n * e.g the description underneath the label and inline alert\n */\n function ariaDescribedbyByIds() {\n const messageIds = [];\n if (description) {\n messageIds.push(descriptionId);\n }\n if (message) {\n messageIds.push(messageId);\n }\n return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n }\n\n return (\n <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n <InputIdContextProvider value={inputId}>\n <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n <InputInvalidProvider value={hasError}>\n <div\n className={clsx(\n 'np-field form-group d-block',\n {\n 'has-success': sentiment === Sentiment.POSITIVE,\n 'has-warning': sentiment === Sentiment.WARNING,\n 'has-error': hasError,\n 'has-info': sentiment === Sentiment.NEUTRAL,\n },\n className,\n )}\n >\n {label != null ? (\n <>\n <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n {required ? label : <Label.Optional>{label}</Label.Optional>}\n </Label>\n <Label.Description id={descriptionId}>{description}</Label.Description>\n <div className=\"np-field-control\">{children}</div>\n </>\n ) : (\n children\n )}\n\n {message && (\n <InlinePrompt\n sentiment={sentiment}\n id={messageId}\n mediaLabel={messageIconLabel}\n className=\"np-field__prompt\"\n loading={messageLoading}\n width=\"full\"\n >\n {message}\n </InlinePrompt>\n )}\n </div>\n </InputInvalidProvider>\n </InputDescribedByProvider>\n </InputIdContextProvider>\n </FieldLabelContextProvider>\n );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":"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"}

package/build/field/Field.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n FieldLabelContextProvider,\n InputDescribedByProvider,\n InputIdContextProvider,\n InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. /\n id?: string \| null;\n /* Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. /\n label?: React.ReactNode;\n required?: boolean;\n /* @deprecated ~~use~~ `description` prop instead /\n hint?: React.ReactNode;\n message?: React.ReactNode;\n /\n Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n * announced by the screen readers\n * /\n messageIconLabel?: string;\n /\n If true, shows a loading spinner in place of the message icon of the InlinePrompt\n /\n messageLoading?: boolean;\n description?: React.ReactNode;\n /* @deprecated ~~use~~ `message` and `type={Sentiment.NEGATIVE}` prop instead /\n error?: React.ReactNode;\n sentiment?: InlinePromptProps['sentiment'];\n className?: string;\n children?: React.ReactNode;\n};\n\nexport const Field = ({\n id,\n label,\n required = true,\n message: propMessage,\n messageIconLabel,\n messageLoading,\n hint,\n description = hint,\n sentiment: propType = Sentiment.NEUTRAL,\n className,\n children,\n ...props\n}: FieldProps) => {\n const labelRef = useRef<HTMLLabelElement>(null);\n const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n const message = propMessage \|\| props.error;\n const hasError = sentiment === Sentiment.NEGATIVE;\n\n const labelId = useId();\n\n const fallbackInputId = useId();\n const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n const messageId = useId();\n const descriptionId = useId();\n\n /\n form control can have multiple messages to describe it,\n * e.g the description underneath the label and inline alert\n */\n function ariaDescribedbyByIds() {\n const messageIds = [];\n if (description) {\n messageIds.push(descriptionId);\n }\n if (message) {\n messageIds.push(messageId);\n }\n return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n }\n\n return (\n <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n <InputIdContextProvider value={inputId}>\n <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n <InputInvalidProvider value={hasError}>\n <div\n className={clsx(\n 'np-field form-group d-block',\n {\n 'has-success': sentiment === Sentiment.POSITIVE,\n 'has-warning': sentiment === Sentiment.WARNING,\n 'has-error': hasError,\n 'has-info': sentiment === Sentiment.NEUTRAL,\n },\n className,\n )}\n >\n {label != null ? (\n <>\n <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n {required ? label : <Label.Optional>{label}</Label.Optional>}\n </Label>\n <Label.Description id={descriptionId}>{description}</Label.Description>\n <div className=\"np-field-control\">{children}</div>\n </>\n ) : (\n children\n )}\n\n {message && (\n <InlinePrompt\n sentiment={sentiment}\n id={messageId}\n mediaLabel={messageIconLabel}\n className=\"np-field__prompt\"\n loading={messageLoading}\n width=\"full\"\n >\n {message}\n </InlinePrompt>\n )}\n </div>\n </InputInvalidProvider>\n </InputDescribedByProvider>\n </InputIdContextProvider>\n </FieldLabelContextProvider>\n );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAuCO~~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"}
1	+ {"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n FieldLabelContextProvider,\n InputDescribedByProvider,\n InputIdContextProvider,\n InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. /\n id?: string \| null;\n /* Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. /\n label?: React.ReactNode;\n /* @default true /\n required?: boolean;\n /* @deprecated Use `description` prop instead. /\n hint?: React.ReactNode;\n message?: React.ReactNode;\n /\n Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n * announced by the screen readers\n * /\n messageIconLabel?: string;\n /\n If true, shows a loading spinner in place of the message icon of the InlinePrompt\n * @default false\n /\n messageLoading?: boolean;\n description?: React.ReactNode;\n /* @deprecated Use `message` and `type={Sentiment.NEGATIVE}` prop instead. /\n error?: React.ReactNode;\n /* @default Sentiment.NEUTRAL /\n sentiment?: InlinePromptProps['sentiment'];\n className?: string;\n children?: React.ReactNode;\n};\n\nexport const Field = ({\n id,\n label,\n required = true,\n message: propMessage,\n messageIconLabel,\n messageLoading,\n hint,\n description = hint,\n sentiment: propType = Sentiment.NEUTRAL,\n className,\n children,\n ...props\n}: FieldProps) => {\n const labelRef = useRef<HTMLLabelElement>(null);\n const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n const message = propMessage \|\| props.error;\n const hasError = sentiment === Sentiment.NEGATIVE;\n\n const labelId = useId();\n\n const fallbackInputId = useId();\n const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n const messageId = useId();\n const descriptionId = useId();\n\n /\n form control can have multiple messages to describe it,\n * e.g the description underneath the label and inline alert\n */\n function ariaDescribedbyByIds() {\n const messageIds = [];\n if (description) {\n messageIds.push(descriptionId);\n }\n if (message) {\n messageIds.push(messageId);\n }\n return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n }\n\n return (\n <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n <InputIdContextProvider value={inputId}>\n <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n <InputInvalidProvider value={hasError}>\n <div\n className={clsx(\n 'np-field form-group d-block',\n {\n 'has-success': sentiment === Sentiment.POSITIVE,\n 'has-warning': sentiment === Sentiment.WARNING,\n 'has-error': hasError,\n 'has-info': sentiment === Sentiment.NEUTRAL,\n },\n className,\n )}\n >\n {label != null ? (\n <>\n <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n {required ? label : <Label.Optional>{label}</Label.Optional>}\n </Label>\n <Label.Description id={descriptionId}>{description}</Label.Description>\n <div className=\"np-field-control\">{children}</div>\n </>\n ) : (\n children\n )}\n\n {message && (\n <InlinePrompt\n sentiment={sentiment}\n id={messageId}\n mediaLabel={messageIconLabel}\n className=\"np-field__prompt\"\n loading={messageLoading}\n width=\"full\"\n >\n {message}\n </InlinePrompt>\n )}\n </div>\n </InputInvalidProvider>\n </InputDescribedByProvider>\n </InputIdContextProvider>\n </FieldLabelContextProvider>\n );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":"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"}

package/build/flowNavigation/FlowNavigation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FlowNavigation.js","sources":["../../src/flowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { Breakpoint, Layout } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader/FlowHeader';\nimport Logo from '../logo';\nimport Stepper, { type Step } from '../stepper/Stepper';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './animatedLabel';\nimport IconButton from '../iconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nexport interface FlowNavigationProps {\n activeStep?: number;\n avatar?: React.ReactNode;\n logo?: React.ReactNode;\n done?: boolean;\n /** Called when the close button is clicked. If not provided the close button won't show /\n onClose?: () => void;\n /* Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens /\n onGoBack?: () => void;\n /* Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */\n steps: readonly Step[];\n}\n\nconst FlowNavigation = ({\n activeStep = 0,\n avatar,\n logo = <Logo />,\n done = false,\n onClose,\n onGoBack,\n steps,\n}: FlowNavigationProps) => {\n const intl = useIntl();\n\n const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n\n const newAvatar = done ? null : avatar;\n\n const displayGoBack = onGoBack != null && activeStep > 0;\n\n return (\n <div\n className={clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {\n 'np-flow-navigation--border-bottom': !done,\n })}\n >\n <FlowHeader\n className={clsx(\n 'np-flow-navigation__content p-x-3',\n screenSm == null\n ? 'np-flow-navigation--hidden'\n : {\n 'np-flow-navigation--xs-max': !screenSm,\n // Size switches on parent container which may or may not have the same size as the window.\n 'np-flow-navigation--sm': screenSm,\n 'np-flow-navigation--lg': screenLg,\n },\n )}\n leftContent={\n <>\n {!screenSm && displayGoBack ? (\n <IconButton\n size={40}\n priority=\"tertiary\"\n type=\"default\"\n aria-label={intl.formatMessage(messages.back)}\n onClick={onGoBack}\n >\n <ArrowLeft />\n </IconButton>\n ) : (\n <div className=\"np-flow-header__left\">{logo}</div>\n )}\n {!screenSm && !done && (\n <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n )}\n </>\n }\n rightContent={\n <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n {newAvatar}\n {newAvatar && closeButton && <span className=\"m-x-1\" />}\n {closeButton}\n </div>\n }\n bottomContent={\n !done && (\n <Stepper\n activeStep={activeStep}\n steps={steps}\n className={clsx('np-flow-navigation__stepper')}\n />\n )\n }\n layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n />\n </div>\n );\n};\n\nexport default FlowNavigation;\n"],"names":["FlowNavigation","activeStep","avatar","logo","_jsx","Logo","done","onClose","onGoBack","steps","intl","useIntl","closeButton","CloseButton","size","onClick","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","newAvatar","displayGoBack","className","clsx","children","FlowHeader","leftContent","_jsxs","_Fragment","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AA4BA~~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"}
1	+ {"version":3,"file":"FlowNavigation.js","sources":["../../src/flowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { Breakpoint, Layout } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader/FlowHeader';\nimport Logo from '../logo';\nimport Stepper, { type Step } from '../stepper/Stepper';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './animatedLabel';\nimport IconButton from '../iconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nexport interface FlowNavigationProps {\n /** @default 0 /\n activeStep?: number;\n avatar?: React.ReactNode;\n /* @default <Logo /> /\n logo?: React.ReactNode;\n /* @default false /\n done?: boolean;\n /* Called when the close button is clicked. If not provided the close button won't show /\n onClose?: () => void;\n /* Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens /\n onGoBack?: () => void;\n /* Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */\n steps: readonly Step[];\n}\n\nconst FlowNavigation = ({\n activeStep = 0,\n avatar,\n logo = <Logo />,\n done = false,\n onClose,\n onGoBack,\n steps,\n}: FlowNavigationProps) => {\n const intl = useIntl();\n\n const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n\n const newAvatar = done ? null : avatar;\n\n const displayGoBack = onGoBack != null && activeStep > 0;\n\n return (\n <div\n className={clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {\n 'np-flow-navigation--border-bottom': !done,\n })}\n >\n <FlowHeader\n className={clsx(\n 'np-flow-navigation__content p-x-3',\n screenSm == null\n ? 'np-flow-navigation--hidden'\n : {\n 'np-flow-navigation--xs-max': !screenSm,\n // Size switches on parent container which may or may not have the same size as the window.\n 'np-flow-navigation--sm': screenSm,\n 'np-flow-navigation--lg': screenLg,\n },\n )}\n leftContent={\n <>\n {!screenSm && displayGoBack ? (\n <IconButton\n size={40}\n priority=\"tertiary\"\n type=\"default\"\n aria-label={intl.formatMessage(messages.back)}\n onClick={onGoBack}\n >\n <ArrowLeft />\n </IconButton>\n ) : (\n <div className=\"np-flow-header__left\">{logo}</div>\n )}\n {!screenSm && !done && (\n <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n )}\n </>\n }\n rightContent={\n <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n {newAvatar}\n {newAvatar && closeButton && <span className=\"m-x-1\" />}\n {closeButton}\n </div>\n }\n bottomContent={\n !done && (\n <Stepper\n activeStep={activeStep}\n steps={steps}\n className={clsx('np-flow-navigation__stepper')}\n />\n )\n }\n layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n />\n </div>\n );\n};\n\nexport default FlowNavigation;\n"],"names":["FlowNavigation","activeStep","avatar","logo","_jsx","Logo","done","onClose","onGoBack","steps","intl","useIntl","closeButton","CloseButton","size","onClick","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","newAvatar","displayGoBack","className","clsx","children","FlowHeader","leftContent","_jsxs","_Fragment","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":"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"}

package/build/flowNavigation/FlowNavigation.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FlowNavigation.mjs","sources":["../../src/flowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { Breakpoint, Layout } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader/FlowHeader';\nimport Logo from '../logo';\nimport Stepper, { type Step } from '../stepper/Stepper';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './animatedLabel';\nimport IconButton from '../iconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nexport interface FlowNavigationProps {\n activeStep?: number;\n avatar?: React.ReactNode;\n logo?: React.ReactNode;\n done?: boolean;\n /** Called when the close button is clicked. If not provided the close button won't show /\n onClose?: () => void;\n /* Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens /\n onGoBack?: () => void;\n /* Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */\n steps: readonly Step[];\n}\n\nconst FlowNavigation = ({\n activeStep = 0,\n avatar,\n logo = <Logo />,\n done = false,\n onClose,\n onGoBack,\n steps,\n}: FlowNavigationProps) => {\n const intl = useIntl();\n\n const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n\n const newAvatar = done ? null : avatar;\n\n const displayGoBack = onGoBack != null && activeStep > 0;\n\n return (\n <div\n className={clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {\n 'np-flow-navigation--border-bottom': !done,\n })}\n >\n <FlowHeader\n className={clsx(\n 'np-flow-navigation__content p-x-3',\n screenSm == null\n ? 'np-flow-navigation--hidden'\n : {\n 'np-flow-navigation--xs-max': !screenSm,\n // Size switches on parent container which may or may not have the same size as the window.\n 'np-flow-navigation--sm': screenSm,\n 'np-flow-navigation--lg': screenLg,\n },\n )}\n leftContent={\n <>\n {!screenSm && displayGoBack ? (\n <IconButton\n size={40}\n priority=\"tertiary\"\n type=\"default\"\n aria-label={intl.formatMessage(messages.back)}\n onClick={onGoBack}\n >\n <ArrowLeft />\n </IconButton>\n ) : (\n <div className=\"np-flow-header__left\">{logo}</div>\n )}\n {!screenSm && !done && (\n <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n )}\n </>\n }\n rightContent={\n <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n {newAvatar}\n {newAvatar && closeButton && <span className=\"m-x-1\" />}\n {closeButton}\n </div>\n }\n bottomContent={\n !done && (\n <Stepper\n activeStep={activeStep}\n steps={steps}\n className={clsx('np-flow-navigation__stepper')}\n />\n )\n }\n layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n />\n </div>\n );\n};\n\nexport default FlowNavigation;\n"],"names":["FlowNavigation","activeStep","avatar","logo","_jsx","Logo","done","onClose","onGoBack","steps","intl","useIntl","closeButton","CloseButton","size","onClick","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","newAvatar","displayGoBack","className","clsx","children","FlowHeader","leftContent","_jsxs","_Fragment","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AA4BA~~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"}
1	+ {"version":3,"file":"FlowNavigation.mjs","sources":["../../src/flowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { Breakpoint, Layout } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader/FlowHeader';\nimport Logo from '../logo';\nimport Stepper, { type Step } from '../stepper/Stepper';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './animatedLabel';\nimport IconButton from '../iconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nexport interface FlowNavigationProps {\n /** @default 0 /\n activeStep?: number;\n avatar?: React.ReactNode;\n /* @default <Logo /> /\n logo?: React.ReactNode;\n /* @default false /\n done?: boolean;\n /* Called when the close button is clicked. If not provided the close button won't show /\n onClose?: () => void;\n /* Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens /\n onGoBack?: () => void;\n /* Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */\n steps: readonly Step[];\n}\n\nconst FlowNavigation = ({\n activeStep = 0,\n avatar,\n logo = <Logo />,\n done = false,\n onClose,\n onGoBack,\n steps,\n}: FlowNavigationProps) => {\n const intl = useIntl();\n\n const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n\n const newAvatar = done ? null : avatar;\n\n const displayGoBack = onGoBack != null && activeStep > 0;\n\n return (\n <div\n className={clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {\n 'np-flow-navigation--border-bottom': !done,\n })}\n >\n <FlowHeader\n className={clsx(\n 'np-flow-navigation__content p-x-3',\n screenSm == null\n ? 'np-flow-navigation--hidden'\n : {\n 'np-flow-navigation--xs-max': !screenSm,\n // Size switches on parent container which may or may not have the same size as the window.\n 'np-flow-navigation--sm': screenSm,\n 'np-flow-navigation--lg': screenLg,\n },\n )}\n leftContent={\n <>\n {!screenSm && displayGoBack ? (\n <IconButton\n size={40}\n priority=\"tertiary\"\n type=\"default\"\n aria-label={intl.formatMessage(messages.back)}\n onClick={onGoBack}\n >\n <ArrowLeft />\n </IconButton>\n ) : (\n <div className=\"np-flow-header__left\">{logo}</div>\n )}\n {!screenSm && !done && (\n <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n )}\n </>\n }\n rightContent={\n <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n {newAvatar}\n {newAvatar && closeButton && <span className=\"m-x-1\" />}\n {closeButton}\n </div>\n }\n bottomContent={\n !done && (\n <Stepper\n activeStep={activeStep}\n steps={steps}\n className={clsx('np-flow-navigation__stepper')}\n />\n )\n }\n layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n />\n </div>\n );\n};\n\nexport default FlowNavigation;\n"],"names":["FlowNavigation","activeStep","avatar","logo","_jsx","Logo","done","onClose","onGoBack","steps","intl","useIntl","closeButton","CloseButton","size","onClick","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","newAvatar","displayGoBack","className","clsx","children","FlowHeader","leftContent","_jsxs","_Fragment","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":"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"}

package/build/header/Header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Header.js","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\nimport React, { useEffect, useRef, FunctionComponent, ReactNode } from 'react';\n\ntype ActionProps = AriaLabelProperty & {\n text: string;\n onClick?: (event: React.MouseEvent) => void;\n disabled?: boolean;\n};\n\ntype ButtonActionProps = ActionProps;\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport interface HeaderProps extends CommonProps {\n /*\n Optional prop to define the action for the header. If the `href` property\n * is provided, a `Link` will be rendered instead of a `Button`.\n /\n action?: ButtonActionProps \| LinkActionProps;\n\n /\n Option prop to specify DOM render element of the title\n \n - When `as=\"legend\"`, the `Header` will render as a `<legend>` element.\n * Note: `<legend>` elements must be the first child of a `<fieldset>` to comply with HTML semantics.\n * If this condition is not met, a warning will be logged to the console.\n \n - Other valid values include standard heading tags (`h1` to `h6`) or `header`.\n /\n as?: Heading \| 'legend' \| 'header';\n\n /* Required prop to set the title of the Header. /\n title: ReactNode;\n\n /* Optional prop to specify the level of the Header /\n level?: 'section' \| 'group';\n\n className?: string;\n testId?: string;\n}\n\n/\n Renders a header action which can be either a button or a link.\n \n @param {Object} props - The properties object.\n * @param {ButtonActionProps \| LinkActionProps} props.action - The action object which can be either a button or a link.\n * @returns {JSX.Element} The rendered header action component.\n /\nconst HeaderAction = React.forwardRef<\n HTMLButtonElement \| HTMLAnchorElement,\n { action: ButtonActionProps \| LinkActionProps }\n>(({ action }, ref) => {\n return (\n <Link\n className=\"np-header__action-button\"\n aria-label={action['aria-label']}\n href={'href' in action ? action.href : undefined}\n target={'target' in action ? action.target : undefined}\n disabled={action.disabled}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n );\n});\n\nHeaderAction.displayName = 'HeaderAction';\n\n/\n @param {ButtonActionProps \| LinkActionProps} [action] - Optional prop to specify the action button or link.\n * @param {Heading \| 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.\n * @param {string} title - Required prop to set the title of the section header.\n * @param {'group' \| 'section'} [level='group'] - Optional prop to specify the level of the section header.\n * @param {string} [className]\n * @param {string} [testId]\n \n @see {@link Header } for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/typography-header--docs\|Storybook Wise Design}\n */\nconst Header: FunctionComponent<HeaderProps> = React.forwardRef(\n (\n { as = 'h5', action, className, testId, title, level = 'group', ...props },\n ref: React.Ref<HTMLDivElement \| HTMLHeadingElement \| HTMLLegendElement>,\n ) => {\n const internalRef = useRef<HTMLLegendElement>(null);\n const levelTypography =\n level === 'group' ? Typography.TITLE_GROUP : Typography.TITLE_SUBSECTION;\n const headerClasses = clsx('np-header', className, {\n 'np-header--group': level === 'group',\n });\n\n const commonProps = {\n className: headerClasses,\n 'data-testid': testId,\n };\n\n useEffect(() => {\n if (as === 'legend' && internalRef.current) {\n const { parentElement } = internalRef.current;\n if (!parentElement \|\| parentElement.tagName.toLowerCase() !== 'fieldset') {\n console.warn(\n 'Legends should be the first child in a fieldset, and this is not possible when including an action',\n );\n }\n }\n }, [as]);\n\n if (!action) {\n return (\n <Title ref={internalRef} as={as} type={levelTypography} {...commonProps} {...props}>\n {title}\n </Title>\n );\n }\n\n return (\n <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>\n <Title as={as} type={levelTypography} className=\"np-header__title\">\n {title}\n </Title>\n <HeaderAction action={action} />\n </div>\n );\n },\n);\n\nHeader.displayName = 'Header';\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","_jsx","Link","className","href","undefined","target","disabled","onClick","children","text","displayName","Header","as","testId","title","level","props","internalRef","useRef","levelTypography","Typography","TITLE_GROUP","TITLE_SUBSECTION","headerClasses","clsx","commonProps","useEffect","current","parentElement","tagName","toLowerCase","console","warn","Title","type","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAmDA~~,MAAMA,YAAY,gBAAGC,sBAAK,CAACC,UAAU,CAGnC,CAAC;AAAEC,EAAAA;AAAM,CAAE,EAAEC,GAAG,KAAI;EACpB,oBACEC,cAAA,CAACC,YAAI,EAAA;AACHC,IAAAA,SAAS,EAAC,0BAA0B;IACpC,YAAA,EAAYJ,MAAM,CAAC,YAAY,CAAE;IACjCK,IAAI,EAAE,MAAM,IAAIL,MAAM,GAAGA,MAAM,CAACK,IAAI,GAAGC,SAAU;IACjDC,MAAM,EAAE,QAAQ,IAAIP,MAAM,GAAGA,MAAM,CAACO,MAAM,GAAGD,SAAU;IACvDE,QAAQ,EAAER,MAAM,CAACQ,QAAS;IAC1BC,OAAO,EAAET,MAAM,CAACS,OAAQ;IAAAC,QAAA,EAEvBV,MAAM,CAACW;AAAI,GACR,CAAC;AAEX,CAAC,CAAC;AAEFd,YAAY,CAACe,WAAW,GAAG,cAAc;AAEzC;;;;;;;;;;AAUG;AACH,MAAMC,MAAM,gBAAmCf,sBAAK,CAACC,UAAU,CAC7D,CACE;AAAEe,EAAAA,EAAE,GAAG,IAAI;EAAEd,MAAM;EAAEI,SAAS;EAAEW,MAAM;EAAEC,KAAK;AAAEC,EAAAA,KAAK,GAAG,OAAO;EAAE,GAAGC;AAAK,CAAE,EAC1EjB,GAAuE,KACrE;AACF,EAAA,MAAMkB,WAAW,GAAGC,YAAM,CAAoB,IAAI,CAAC;AACnD,EAAA,MAAMC,eAAe,GACnBJ,KAAK,KAAK,OAAO,GAAGK,qBAAU,CAACC,WAAW,GAAGD,qBAAU,CAACE,gBAAgB;AAC1E,EAAA,MAAMC,aAAa,GAAGC,SAAI,CAAC,WAAW,EAAEtB,SAAS,EAAE;IACjD,kBAAkB,EAAEa,KAAK,KAAK;AAC/B,GAAA,CAAC;AAEF,EAAA,MAAMU,WAAW,GAAG;AAClBvB,IAAAA,SAAS,EAAEqB,aAAa;AACxB,IAAA,aAAa,EAAEV;GAChB;AAEDa,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAId,EAAE,KAAK,QAAQ,IAAIK,WAAW,CAACU,OAAO,EAAE;MAC1C,MAAM;AAAEC,QAAAA;OAAe,GAAGX,WAAW,CAACU,OAAO;AAC7C,MAAA,IAAI,CAACC,aAAa,IAAIA,aAAa,CAACC,OAAO,CAACC,WAAW,EAAE,KAAK,UAAU,EAAE;AACxEC,QAAAA,OAAO,CAACC,IAAI,CACV,oGAAoG,CACrG;AACH,MAAA;AACF,IAAA;AACF,EAAA,CAAC,EAAE,CAACpB,EAAE,CAAC,CAAC;EAER,IAAI,CAACd,MAAM,EAAE;IACX,oBACEE,cAAA,CAACiC,aAAK,EAAA;AAAClC,MAAAA,GAAG,EAAEkB,WAAY;AAACL,MAAAA,EAAE,EAAEA,EAAG;AAACsB,MAAAA,IAAI,EAAEf,eAAgB;AAAA,MAAA,GAAKM,WAAW;AAAA,MAAA,GAAMT,KAAK;AAAAR,MAAAA,QAAA,EAC/EM;AAAK,KACD,CAAC;AAEZ,EAAA;AAEA,EAAA,oBACEqB,eAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GAASV,WAAW;AAAA,IAAA,GAAMT,KAAK;AAAEjB,IAAAA,GAAG,EAAEA,GAAiC;IAAAS,QAAA,EAAA,cACrER,cAAA,CAACiC,aAAK,EAAA;AAACrB,MAAAA,EAAE,EAAEA,EAAG;AAACsB,MAAAA,IAAI,EAAEf,eAAgB;AAACjB,MAAAA,SAAS,EAAC,kBAAkB;AAAAM,MAAAA,QAAA,EAC/DM;AAAK,KACD,CACP,eAAAd,cAAA,CAACL,YAAY,EAAA;AAACG,MAAAA,MAAM,EAAEA;AAAO,KAAA,CAC/B;AAAA,GAAK,CAAC;AAEV,CAAC;AAGHa,MAAM,CAACD,WAAW,GAAG,QAAQ;;;;"}
1	+ {"version":3,"file":"Header.js","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\nimport React, { useEffect, useRef, FunctionComponent, ReactNode } from 'react';\n\ntype ActionProps = AriaLabelProperty & {\n text: string;\n onClick?: (event: React.MouseEvent) => void;\n disabled?: boolean;\n};\n\ntype ButtonActionProps = ActionProps;\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport interface HeaderProps extends CommonProps {\n /*\n Optional prop to define the action for the header. If the `href` property\n * is provided, a `Link` will be rendered instead of a `Button`.\n /\n action?: ButtonActionProps \| LinkActionProps;\n\n /\n Option prop to specify DOM render element of the title\n \n - When `as=\"legend\"`, the `Header` will render as a `<legend>` element.\n * Note: `<legend>` elements must be the first child of a `<fieldset>` to comply with HTML semantics.\n * If this condition is not met, a warning will be logged to the console.\n \n - Other valid values include standard heading tags (`h1` to `h6`) or `header`.\n * @default 'h5'\n /\n as?: Heading \| 'legend' \| 'header';\n\n /* Required prop to set the title of the Header. /\n title: ReactNode;\n\n /\n Optional prop to specify the level of the Header\n * @default 'group'\n /\n level?: 'section' \| 'group';\n\n className?: string;\n testId?: string;\n}\n\n/\n Renders a header action which can be either a button or a link.\n \n @param {Object} props - The properties object.\n * @param {ButtonActionProps \| LinkActionProps} props.action - The action object which can be either a button or a link.\n * @returns {JSX.Element} The rendered header action component.\n /\nconst HeaderAction = React.forwardRef<\n HTMLButtonElement \| HTMLAnchorElement,\n { action: ButtonActionProps \| LinkActionProps }\n>(({ action }, ref) => {\n return (\n <Link\n className=\"np-header__action-button\"\n aria-label={action['aria-label']}\n href={'href' in action ? action.href : undefined}\n target={'target' in action ? action.target : undefined}\n disabled={action.disabled}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n );\n});\n\nHeaderAction.displayName = 'HeaderAction';\n\n/\n @param {ButtonActionProps \| LinkActionProps} [action] - Optional prop to specify the action button or link.\n * @param {Heading \| 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.\n * @param {string} title - Required prop to set the title of the section header.\n * @param {'group' \| 'section'} [level='group'] - Optional prop to specify the level of the section header.\n * @param {string} [className]\n * @param {string} [testId]\n \n @see {@link Header } for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/typography-header--docs\|Storybook Wise Design}\n */\nconst Header: FunctionComponent<HeaderProps> = React.forwardRef(\n (\n { as = 'h5', action, className, testId, title, level = 'group', ...props },\n ref: React.Ref<HTMLDivElement \| HTMLHeadingElement \| HTMLLegendElement>,\n ) => {\n const internalRef = useRef<HTMLLegendElement>(null);\n const levelTypography =\n level === 'group' ? Typography.TITLE_GROUP : Typography.TITLE_SUBSECTION;\n const headerClasses = clsx('np-header', className, {\n 'np-header--group': level === 'group',\n });\n\n const commonProps = {\n className: headerClasses,\n 'data-testid': testId,\n };\n\n useEffect(() => {\n if (as === 'legend' && internalRef.current) {\n const { parentElement } = internalRef.current;\n if (!parentElement \|\| parentElement.tagName.toLowerCase() !== 'fieldset') {\n console.warn(\n 'Legends should be the first child in a fieldset, and this is not possible when including an action',\n );\n }\n }\n }, [as]);\n\n if (!action) {\n return (\n <Title ref={internalRef} as={as} type={levelTypography} {...commonProps} {...props}>\n {title}\n </Title>\n );\n }\n\n return (\n <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>\n <Title as={as} type={levelTypography} className=\"np-header__title\">\n {title}\n </Title>\n <HeaderAction action={action} />\n </div>\n );\n },\n);\n\nHeader.displayName = 'Header';\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","_jsx","Link","className","href","undefined","target","disabled","onClick","children","text","displayName","Header","as","testId","title","level","props","internalRef","useRef","levelTypography","Typography","TITLE_GROUP","TITLE_SUBSECTION","headerClasses","clsx","commonProps","useEffect","current","parentElement","tagName","toLowerCase","console","warn","Title","type","_jsxs"],"mappings":"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"}

package/build/header/Header.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Header.mjs","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\nimport React, { useEffect, useRef, FunctionComponent, ReactNode } from 'react';\n\ntype ActionProps = AriaLabelProperty & {\n text: string;\n onClick?: (event: React.MouseEvent) => void;\n disabled?: boolean;\n};\n\ntype ButtonActionProps = ActionProps;\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport interface HeaderProps extends CommonProps {\n /*\n Optional prop to define the action for the header. If the `href` property\n * is provided, a `Link` will be rendered instead of a `Button`.\n /\n action?: ButtonActionProps \| LinkActionProps;\n\n /\n Option prop to specify DOM render element of the title\n \n - When `as=\"legend\"`, the `Header` will render as a `<legend>` element.\n * Note: `<legend>` elements must be the first child of a `<fieldset>` to comply with HTML semantics.\n * If this condition is not met, a warning will be logged to the console.\n \n - Other valid values include standard heading tags (`h1` to `h6`) or `header`.\n /\n as?: Heading \| 'legend' \| 'header';\n\n /* Required prop to set the title of the Header. /\n title: ReactNode;\n\n /* Optional prop to specify the level of the Header /\n level?: 'section' \| 'group';\n\n className?: string;\n testId?: string;\n}\n\n/\n Renders a header action which can be either a button or a link.\n \n @param {Object} props - The properties object.\n * @param {ButtonActionProps \| LinkActionProps} props.action - The action object which can be either a button or a link.\n * @returns {JSX.Element} The rendered header action component.\n /\nconst HeaderAction = React.forwardRef<\n HTMLButtonElement \| HTMLAnchorElement,\n { action: ButtonActionProps \| LinkActionProps }\n>(({ action }, ref) => {\n return (\n <Link\n className=\"np-header__action-button\"\n aria-label={action['aria-label']}\n href={'href' in action ? action.href : undefined}\n target={'target' in action ? action.target : undefined}\n disabled={action.disabled}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n );\n});\n\nHeaderAction.displayName = 'HeaderAction';\n\n/\n @param {ButtonActionProps \| LinkActionProps} [action] - Optional prop to specify the action button or link.\n * @param {Heading \| 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.\n * @param {string} title - Required prop to set the title of the section header.\n * @param {'group' \| 'section'} [level='group'] - Optional prop to specify the level of the section header.\n * @param {string} [className]\n * @param {string} [testId]\n \n @see {@link Header } for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/typography-header--docs\|Storybook Wise Design}\n */\nconst Header: FunctionComponent<HeaderProps> = React.forwardRef(\n (\n { as = 'h5', action, className, testId, title, level = 'group', ...props },\n ref: React.Ref<HTMLDivElement \| HTMLHeadingElement \| HTMLLegendElement>,\n ) => {\n const internalRef = useRef<HTMLLegendElement>(null);\n const levelTypography =\n level === 'group' ? Typography.TITLE_GROUP : Typography.TITLE_SUBSECTION;\n const headerClasses = clsx('np-header', className, {\n 'np-header--group': level === 'group',\n });\n\n const commonProps = {\n className: headerClasses,\n 'data-testid': testId,\n };\n\n useEffect(() => {\n if (as === 'legend' && internalRef.current) {\n const { parentElement } = internalRef.current;\n if (!parentElement \|\| parentElement.tagName.toLowerCase() !== 'fieldset') {\n console.warn(\n 'Legends should be the first child in a fieldset, and this is not possible when including an action',\n );\n }\n }\n }, [as]);\n\n if (!action) {\n return (\n <Title ref={internalRef} as={as} type={levelTypography} {...commonProps} {...props}>\n {title}\n </Title>\n );\n }\n\n return (\n <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>\n <Title as={as} type={levelTypography} className=\"np-header__title\">\n {title}\n </Title>\n <HeaderAction action={action} />\n </div>\n );\n },\n);\n\nHeader.displayName = 'Header';\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","_jsx","Link","className","href","undefined","target","disabled","onClick","children","text","displayName","Header","as","testId","title","level","props","internalRef","useRef","levelTypography","Typography","TITLE_GROUP","TITLE_SUBSECTION","headerClasses","clsx","commonProps","useEffect","current","parentElement","tagName","toLowerCase","console","warn","Title","type","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAmDA~~,MAAMA,YAAY,gBAAGC,cAAK,CAACC,UAAU,CAGnC,CAAC;AAAEC,EAAAA;AAAM,CAAE,EAAEC,GAAG,KAAI;EACpB,oBACEC,GAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,SAAS,EAAC,0BAA0B;IACpC,YAAA,EAAYJ,MAAM,CAAC,YAAY,CAAE;IACjCK,IAAI,EAAE,MAAM,IAAIL,MAAM,GAAGA,MAAM,CAACK,IAAI,GAAGC,SAAU;IACjDC,MAAM,EAAE,QAAQ,IAAIP,MAAM,GAAGA,MAAM,CAACO,MAAM,GAAGD,SAAU;IACvDE,QAAQ,EAAER,MAAM,CAACQ,QAAS;IAC1BC,OAAO,EAAET,MAAM,CAACS,OAAQ;IAAAC,QAAA,EAEvBV,MAAM,CAACW;AAAI,GACR,CAAC;AAEX,CAAC,CAAC;AAEFd,YAAY,CAACe,WAAW,GAAG,cAAc;AAEzC;;;;;;;;;;AAUG;AACH,MAAMC,MAAM,gBAAmCf,cAAK,CAACC,UAAU,CAC7D,CACE;AAAEe,EAAAA,EAAE,GAAG,IAAI;EAAEd,MAAM;EAAEI,SAAS;EAAEW,MAAM;EAAEC,KAAK;AAAEC,EAAAA,KAAK,GAAG,OAAO;EAAE,GAAGC;AAAK,CAAE,EAC1EjB,GAAuE,KACrE;AACF,EAAA,MAAMkB,WAAW,GAAGC,MAAM,CAAoB,IAAI,CAAC;AACnD,EAAA,MAAMC,eAAe,GACnBJ,KAAK,KAAK,OAAO,GAAGK,UAAU,CAACC,WAAW,GAAGD,UAAU,CAACE,gBAAgB;AAC1E,EAAA,MAAMC,aAAa,GAAGC,IAAI,CAAC,WAAW,EAAEtB,SAAS,EAAE;IACjD,kBAAkB,EAAEa,KAAK,KAAK;AAC/B,GAAA,CAAC;AAEF,EAAA,MAAMU,WAAW,GAAG;AAClBvB,IAAAA,SAAS,EAAEqB,aAAa;AACxB,IAAA,aAAa,EAAEV;GAChB;AAEDa,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAId,EAAE,KAAK,QAAQ,IAAIK,WAAW,CAACU,OAAO,EAAE;MAC1C,MAAM;AAAEC,QAAAA;OAAe,GAAGX,WAAW,CAACU,OAAO;AAC7C,MAAA,IAAI,CAACC,aAAa,IAAIA,aAAa,CAACC,OAAO,CAACC,WAAW,EAAE,KAAK,UAAU,EAAE;AACxEC,QAAAA,OAAO,CAACC,IAAI,CACV,oGAAoG,CACrG;AACH,MAAA;AACF,IAAA;AACF,EAAA,CAAC,EAAE,CAACpB,EAAE,CAAC,CAAC;EAER,IAAI,CAACd,MAAM,EAAE;IACX,oBACEE,GAAA,CAACiC,KAAK,EAAA;AAAClC,MAAAA,GAAG,EAAEkB,WAAY;AAACL,MAAAA,EAAE,EAAEA,EAAG;AAACsB,MAAAA,IAAI,EAAEf,eAAgB;AAAA,MAAA,GAAKM,WAAW;AAAA,MAAA,GAAMT,KAAK;AAAAR,MAAAA,QAAA,EAC/EM;AAAK,KACD,CAAC;AAEZ,EAAA;AAEA,EAAA,oBACEqB,IAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GAASV,WAAW;AAAA,IAAA,GAAMT,KAAK;AAAEjB,IAAAA,GAAG,EAAEA,GAAiC;IAAAS,QAAA,EAAA,cACrER,GAAA,CAACiC,KAAK,EAAA;AAACrB,MAAAA,EAAE,EAAEA,EAAG;AAACsB,MAAAA,IAAI,EAAEf,eAAgB;AAACjB,MAAAA,SAAS,EAAC,kBAAkB;AAAAM,MAAAA,QAAA,EAC/DM;AAAK,KACD,CACP,eAAAd,GAAA,CAACL,YAAY,EAAA;AAACG,MAAAA,MAAM,EAAEA;AAAO,KAAA,CAC/B;AAAA,GAAK,CAAC;AAEV,CAAC;AAGHa,MAAM,CAACD,WAAW,GAAG,QAAQ;;;;"}
1	+ {"version":3,"file":"Header.mjs","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\nimport React, { useEffect, useRef, FunctionComponent, ReactNode } from 'react';\n\ntype ActionProps = AriaLabelProperty & {\n text: string;\n onClick?: (event: React.MouseEvent) => void;\n disabled?: boolean;\n};\n\ntype ButtonActionProps = ActionProps;\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport interface HeaderProps extends CommonProps {\n /*\n Optional prop to define the action for the header. If the `href` property\n * is provided, a `Link` will be rendered instead of a `Button`.\n /\n action?: ButtonActionProps \| LinkActionProps;\n\n /\n Option prop to specify DOM render element of the title\n \n - When `as=\"legend\"`, the `Header` will render as a `<legend>` element.\n * Note: `<legend>` elements must be the first child of a `<fieldset>` to comply with HTML semantics.\n * If this condition is not met, a warning will be logged to the console.\n \n - Other valid values include standard heading tags (`h1` to `h6`) or `header`.\n * @default 'h5'\n /\n as?: Heading \| 'legend' \| 'header';\n\n /* Required prop to set the title of the Header. /\n title: ReactNode;\n\n /\n Optional prop to specify the level of the Header\n * @default 'group'\n /\n level?: 'section' \| 'group';\n\n className?: string;\n testId?: string;\n}\n\n/\n Renders a header action which can be either a button or a link.\n \n @param {Object} props - The properties object.\n * @param {ButtonActionProps \| LinkActionProps} props.action - The action object which can be either a button or a link.\n * @returns {JSX.Element} The rendered header action component.\n /\nconst HeaderAction = React.forwardRef<\n HTMLButtonElement \| HTMLAnchorElement,\n { action: ButtonActionProps \| LinkActionProps }\n>(({ action }, ref) => {\n return (\n <Link\n className=\"np-header__action-button\"\n aria-label={action['aria-label']}\n href={'href' in action ? action.href : undefined}\n target={'target' in action ? action.target : undefined}\n disabled={action.disabled}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n );\n});\n\nHeaderAction.displayName = 'HeaderAction';\n\n/\n @param {ButtonActionProps \| LinkActionProps} [action] - Optional prop to specify the action button or link.\n * @param {Heading \| 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.\n * @param {string} title - Required prop to set the title of the section header.\n * @param {'group' \| 'section'} [level='group'] - Optional prop to specify the level of the section header.\n * @param {string} [className]\n * @param {string} [testId]\n \n @see {@link Header } for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/typography-header--docs\|Storybook Wise Design}\n */\nconst Header: FunctionComponent<HeaderProps> = React.forwardRef(\n (\n { as = 'h5', action, className, testId, title, level = 'group', ...props },\n ref: React.Ref<HTMLDivElement \| HTMLHeadingElement \| HTMLLegendElement>,\n ) => {\n const internalRef = useRef<HTMLLegendElement>(null);\n const levelTypography =\n level === 'group' ? Typography.TITLE_GROUP : Typography.TITLE_SUBSECTION;\n const headerClasses = clsx('np-header', className, {\n 'np-header--group': level === 'group',\n });\n\n const commonProps = {\n className: headerClasses,\n 'data-testid': testId,\n };\n\n useEffect(() => {\n if (as === 'legend' && internalRef.current) {\n const { parentElement } = internalRef.current;\n if (!parentElement \|\| parentElement.tagName.toLowerCase() !== 'fieldset') {\n console.warn(\n 'Legends should be the first child in a fieldset, and this is not possible when including an action',\n );\n }\n }\n }, [as]);\n\n if (!action) {\n return (\n <Title ref={internalRef} as={as} type={levelTypography} {...commonProps} {...props}>\n {title}\n </Title>\n );\n }\n\n return (\n <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>\n <Title as={as} type={levelTypography} className=\"np-header__title\">\n {title}\n </Title>\n <HeaderAction action={action} />\n </div>\n );\n },\n);\n\nHeader.displayName = 'Header';\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","_jsx","Link","className","href","undefined","target","disabled","onClick","children","text","displayName","Header","as","testId","title","level","props","internalRef","useRef","levelTypography","Typography","TITLE_GROUP","TITLE_SUBSECTION","headerClasses","clsx","commonProps","useEffect","current","parentElement","tagName","toLowerCase","console","warn","Title","type","_jsxs"],"mappings":"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"}

package/build/iconButton/IconButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconButton.js","sources":["../../src/iconButton/IconButton.tsx"],"sourcesContent":["import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef, HTMLAttributes } from 'react';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport Circle from '../common/circle';\nimport { clsx } from 'clsx';\n\nexport type Props = {\n size?: 16 \| 24 \| 32 \| 40 \| 48 \| 56 \| 72;\n priority?: 'primary' \| 'secondary' \| 'tertiary' \| 'minimal';\n type?: 'default' \| 'negative';\n 'data-testid'?: string;\n} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' \| 'target' \| 'onClick'> &\n Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' \| 'disabled'> &\n Pick<\n HTMLAttributes<HTMLDivElement>,\n 'id' \| 'className' \| 'role' \| 'children' \| 'aria-label' \| 'tabIndex'\n >;\n\nconst IconButton = forwardRef(function IconButton(\n {\n size = 48,\n href = '#',\n children,\n className,\n priority = 'primary',\n type = 'default',\n ...props\n }: Props,\n ref,\n) {\n const isLink = href !== '#';\n return (\n // @ts-expect-error it's either link or `button` element so it has `onClick` / `href`\n <Circle\n ref={ref}\n as={isLink ? PrimitiveAnchor : PrimitiveButton}\n size={size}\n fixedSize\n className={clsx(\n 'np-icon-button',\n `np-icon-button-${priority}-${type}`,\n {\n disabled: props.disabled,\n },\n className,\n )}\n {...(isLink ? { href } : {})}\n {...props}\n >\n {children}\n </Circle>\n );\n});\n\nexport default IconButton;\n"],"names":["IconButton","forwardRef","size","href","children","className","priority","type","props","ref","isLink","_jsx","Circle","as","PrimitiveAnchor","PrimitiveButton","fixedSize","clsx","disabled"],"mappings":";;;;;;;;;;;~~AAiBA~~,MAAMA,UAAU,gBAAGC,gBAAU,CAAC,SAASD,UAAUA,CAC/C;AACEE,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,IAAI,GAAG,GAAG;EACVC,QAAQ;EACRC,SAAS;AACTC,EAAAA,QAAQ,GAAG,SAAS;AACpBC,EAAAA,IAAI,GAAG,SAAS;EAChB,GAAGC;AAAK,CACF,EACRC,GAAG,EAAA;AAEH,EAAA,MAAMC,MAAM,GAAGP,IAAI,KAAK,GAAG;AAC3B,EAAA;AAAA;AACE;AACAQ,IAAAA,cAAA,CAACC,cAAM,EAAA;AACLH,MAAAA,GAAG,EAAEA,GAAI;AACTI,MAAAA,EAAE,EAAEH,MAAM,GAAGI,uBAAe,GAAGC,uBAAgB;AAC/Cb,MAAAA,IAAI,EAAEA,IAAK;MACXc,SAAS,EAAA,IAAA;MACTX,SAAS,EAAEY,SAAI,CACb,gBAAgB,EAChB,kBAAkBX,QAAQ,CAAA,CAAA,EAAIC,IAAI,CAAA,CAAE,EACpC;QACEW,QAAQ,EAAEV,KAAK,CAACU;OACjB,EACDb,SAAS,CACT;AAAA,MAAA,IACGK,MAAM,GAAG;AAAEP,QAAAA;OAAM,GAAG,EAAE,CAAA;AAAA,MAAA,GACvBK,KAAK;AAAAJ,MAAAA,QAAA,EAERA;KACK;AAAC;AAEb,CAAC;;;;"}
1	+ {"version":3,"file":"IconButton.js","sources":["../../src/iconButton/IconButton.tsx"],"sourcesContent":["import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef, HTMLAttributes } from 'react';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport Circle from '../common/circle';\nimport { clsx } from 'clsx';\n\nexport type Props = {\n /** @default 48 /\n size?: 16 \| 24 \| 32 \| 40 \| 48 \| 56 \| 72;\n /* @default 'primary' /\n priority?: 'primary' \| 'secondary' \| 'tertiary' \| 'minimal';\n /* @default 'default' */\n type?: 'default' \| 'negative';\n 'data-testid'?: string;\n} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' \| 'target' \| 'onClick'> &\n Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' \| 'disabled'> &\n Pick<\n HTMLAttributes<HTMLDivElement>,\n 'id' \| 'className' \| 'role' \| 'children' \| 'aria-label' \| 'tabIndex'\n >;\n\nconst IconButton = forwardRef(function IconButton(\n {\n size = 48,\n href = '#',\n children,\n className,\n priority = 'primary',\n type = 'default',\n ...props\n }: Props,\n ref,\n) {\n const isLink = href !== '#';\n return (\n // @ts-expect-error it's either link or `button` element so it has `onClick` / `href`\n <Circle\n ref={ref}\n as={isLink ? PrimitiveAnchor : PrimitiveButton}\n size={size}\n fixedSize\n className={clsx(\n 'np-icon-button',\n `np-icon-button-${priority}-${type}`,\n {\n disabled: props.disabled,\n },\n className,\n )}\n {...(isLink ? { href } : {})}\n {...props}\n >\n {children}\n </Circle>\n );\n});\n\nexport default IconButton;\n"],"names":["IconButton","forwardRef","size","href","children","className","priority","type","props","ref","isLink","_jsx","Circle","as","PrimitiveAnchor","PrimitiveButton","fixedSize","clsx","disabled"],"mappings":";;;;;;;;;;;AAoBA,MAAMA,UAAU,gBAAGC,gBAAU,CAAC,SAASD,UAAUA,CAC/C;AACEE,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,IAAI,GAAG,GAAG;EACVC,QAAQ;EACRC,SAAS;AACTC,EAAAA,QAAQ,GAAG,SAAS;AACpBC,EAAAA,IAAI,GAAG,SAAS;EAChB,GAAGC;AAAK,CACF,EACRC,GAAG,EAAA;AAEH,EAAA,MAAMC,MAAM,GAAGP,IAAI,KAAK,GAAG;AAC3B,EAAA;AAAA;AACE;AACAQ,IAAAA,cAAA,CAACC,cAAM,EAAA;AACLH,MAAAA,GAAG,EAAEA,GAAI;AACTI,MAAAA,EAAE,EAAEH,MAAM,GAAGI,uBAAe,GAAGC,uBAAgB;AAC/Cb,MAAAA,IAAI,EAAEA,IAAK;MACXc,SAAS,EAAA,IAAA;MACTX,SAAS,EAAEY,SAAI,CACb,gBAAgB,EAChB,kBAAkBX,QAAQ,CAAA,CAAA,EAAIC,IAAI,CAAA,CAAE,EACpC;QACEW,QAAQ,EAAEV,KAAK,CAACU;OACjB,EACDb,SAAS,CACT;AAAA,MAAA,IACGK,MAAM,GAAG;AAAEP,QAAAA;OAAM,GAAG,EAAE,CAAA;AAAA,MAAA,GACvBK,KAAK;AAAAJ,MAAAA,QAAA,EAERA;KACK;AAAC;AAEb,CAAC;;;;"}

package/build/iconButton/IconButton.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconButton.mjs","sources":["../../src/iconButton/IconButton.tsx"],"sourcesContent":["import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef, HTMLAttributes } from 'react';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport Circle from '../common/circle';\nimport { clsx } from 'clsx';\n\nexport type Props = {\n size?: 16 \| 24 \| 32 \| 40 \| 48 \| 56 \| 72;\n priority?: 'primary' \| 'secondary' \| 'tertiary' \| 'minimal';\n type?: 'default' \| 'negative';\n 'data-testid'?: string;\n} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' \| 'target' \| 'onClick'> &\n Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' \| 'disabled'> &\n Pick<\n HTMLAttributes<HTMLDivElement>,\n 'id' \| 'className' \| 'role' \| 'children' \| 'aria-label' \| 'tabIndex'\n >;\n\nconst IconButton = forwardRef(function IconButton(\n {\n size = 48,\n href = '#',\n children,\n className,\n priority = 'primary',\n type = 'default',\n ...props\n }: Props,\n ref,\n) {\n const isLink = href !== '#';\n return (\n // @ts-expect-error it's either link or `button` element so it has `onClick` / `href`\n <Circle\n ref={ref}\n as={isLink ? PrimitiveAnchor : PrimitiveButton}\n size={size}\n fixedSize\n className={clsx(\n 'np-icon-button',\n `np-icon-button-${priority}-${type}`,\n {\n disabled: props.disabled,\n },\n className,\n )}\n {...(isLink ? { href } : {})}\n {...props}\n >\n {children}\n </Circle>\n );\n});\n\nexport default IconButton;\n"],"names":["IconButton","forwardRef","size","href","children","className","priority","type","props","ref","isLink","_jsx","Circle","as","PrimitiveAnchor","PrimitiveButton","fixedSize","clsx","disabled"],"mappings":";;;;;;;~~AAiBA~~,MAAMA,UAAU,gBAAGC,UAAU,CAAC,SAASD,UAAUA,CAC/C;AACEE,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,IAAI,GAAG,GAAG;EACVC,QAAQ;EACRC,SAAS;AACTC,EAAAA,QAAQ,GAAG,SAAS;AACpBC,EAAAA,IAAI,GAAG,SAAS;EAChB,GAAGC;AAAK,CACF,EACRC,GAAG,EAAA;AAEH,EAAA,MAAMC,MAAM,GAAGP,IAAI,KAAK,GAAG;AAC3B,EAAA;AAAA;AACE;AACAQ,IAAAA,GAAA,CAACC,MAAM,EAAA;AACLH,MAAAA,GAAG,EAAEA,GAAI;AACTI,MAAAA,EAAE,EAAEH,MAAM,GAAGI,eAAe,GAAGC,eAAgB;AAC/Cb,MAAAA,IAAI,EAAEA,IAAK;MACXc,SAAS,EAAA,IAAA;MACTX,SAAS,EAAEY,IAAI,CACb,gBAAgB,EAChB,kBAAkBX,QAAQ,CAAA,CAAA,EAAIC,IAAI,CAAA,CAAE,EACpC;QACEW,QAAQ,EAAEV,KAAK,CAACU;OACjB,EACDb,SAAS,CACT;AAAA,MAAA,IACGK,MAAM,GAAG;AAAEP,QAAAA;OAAM,GAAG,EAAE,CAAA;AAAA,MAAA,GACvBK,KAAK;AAAAJ,MAAAA,QAAA,EAERA;KACK;AAAC;AAEb,CAAC;;;;"}
1	+ {"version":3,"file":"IconButton.mjs","sources":["../../src/iconButton/IconButton.tsx"],"sourcesContent":["import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef, HTMLAttributes } from 'react';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport Circle from '../common/circle';\nimport { clsx } from 'clsx';\n\nexport type Props = {\n /** @default 48 /\n size?: 16 \| 24 \| 32 \| 40 \| 48 \| 56 \| 72;\n /* @default 'primary' /\n priority?: 'primary' \| 'secondary' \| 'tertiary' \| 'minimal';\n /* @default 'default' */\n type?: 'default' \| 'negative';\n 'data-testid'?: string;\n} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' \| 'target' \| 'onClick'> &\n Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' \| 'disabled'> &\n Pick<\n HTMLAttributes<HTMLDivElement>,\n 'id' \| 'className' \| 'role' \| 'children' \| 'aria-label' \| 'tabIndex'\n >;\n\nconst IconButton = forwardRef(function IconButton(\n {\n size = 48,\n href = '#',\n children,\n className,\n priority = 'primary',\n type = 'default',\n ...props\n }: Props,\n ref,\n) {\n const isLink = href !== '#';\n return (\n // @ts-expect-error it's either link or `button` element so it has `onClick` / `href`\n <Circle\n ref={ref}\n as={isLink ? PrimitiveAnchor : PrimitiveButton}\n size={size}\n fixedSize\n className={clsx(\n 'np-icon-button',\n `np-icon-button-${priority}-${type}`,\n {\n disabled: props.disabled,\n },\n className,\n )}\n {...(isLink ? { href } : {})}\n {...props}\n >\n {children}\n </Circle>\n );\n});\n\nexport default IconButton;\n"],"names":["IconButton","forwardRef","size","href","children","className","priority","type","props","ref","isLink","_jsx","Circle","as","PrimitiveAnchor","PrimitiveButton","fixedSize","clsx","disabled"],"mappings":";;;;;;;AAoBA,MAAMA,UAAU,gBAAGC,UAAU,CAAC,SAASD,UAAUA,CAC/C;AACEE,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,IAAI,GAAG,GAAG;EACVC,QAAQ;EACRC,SAAS;AACTC,EAAAA,QAAQ,GAAG,SAAS;AACpBC,EAAAA,IAAI,GAAG,SAAS;EAChB,GAAGC;AAAK,CACF,EACRC,GAAG,EAAA;AAEH,EAAA,MAAMC,MAAM,GAAGP,IAAI,KAAK,GAAG;AAC3B,EAAA;AAAA;AACE;AACAQ,IAAAA,GAAA,CAACC,MAAM,EAAA;AACLH,MAAAA,GAAG,EAAEA,GAAI;AACTI,MAAAA,EAAE,EAAEH,MAAM,GAAGI,eAAe,GAAGC,eAAgB;AAC/Cb,MAAAA,IAAI,EAAEA,IAAK;MACXc,SAAS,EAAA,IAAA;MACTX,SAAS,EAAEY,IAAI,CACb,gBAAgB,EAChB,kBAAkBX,QAAQ,CAAA,CAAA,EAAIC,IAAI,CAAA,CAAE,EACpC;QACEW,QAAQ,EAAEV,KAAK,CAACU;OACjB,EACDb,SAAS,CACT;AAAA,MAAA,IACGK,MAAM,GAAG;AAAEP,QAAAA;OAAM,GAAG,EAAE,CAAA;AAAA,MAAA,GACvBK,KAAK;AAAAJ,MAAAA,QAAA,EAERA;KACK;AAAC;AAEb,CAAC;;;;"}

package/build/index.js CHANGED Viewed

@@ -58,16 +58,7 @@ var InputWithDisplayFormat = require('./inputWithDisplayFormat/InputWithDisplayF
 var Input = require('./inputs/Input.js');
 var InputGroup = require('./inputs/InputGroup.js');
 var SearchInput = require('./inputs/SearchInput.js');
-var SelectInput = require('./inputs/SelectInput/SelectInput.js');
-var SelectInput_utils = require('./inputs/SelectInput/SelectInput.utils.js');
-require('react-intl');
-require('./dateLookup/dateTrigger/DateTrigger.messages.js');
-require('@headlessui/react');
-var SelectInputOptionContent = require('./inputs/SelectInput/OptionContent/SelectInputOptionContent.js');
-var SelectInputTriggerButton = require('./inputs/SelectInput/TriggerButton/SelectInputTriggerButton.js');
-var Section = require('./section/Section.js');
-require('virtua');
-require('./inputs/SelectInput/SelectInput.messages.js');
+var SelectInput = require('./inputs/SelectInput.js');
 var TextArea = require('./inputs/TextArea.js');
 var InstructionsList = require('./instructionsList/InstructionsList.js');
 var Label = require('./label/Label.js');
@@ -99,6 +90,7 @@ var Radio = require('./radio/Radio.js');
 var RadioGroup = require('./radioGroup/RadioGroup.js');
 var RadioOption = require('./radioOption/RadioOption.js');
 var ResponsivePanel = require('./common/responsivePanel/ResponsivePanel.js');
+var Section = require('./section/Section.js');
 var SegmentedControl = require('./segmentedControl/SegmentedControl.js');
 var Select = require('./select/Select.js');
 var SentimentSurface = require('./sentimentSurface/SentimentSurface.js');
@@ -147,6 +139,7 @@ var markdownNodeType = require('./common/propsValues/markdownNodeType.js');
 var fileType = require('./common/fileType.js');
 var index = require('./common/locale/index.js');
 var colors = require('./common/colors.js');
+require('react-intl');
 require('./common/closeButton/CloseButton.messages.js');
 var index$1 = require('./i18n/index.js');
 var withId = require('./withId/withId.js');
@@ -227,10 +220,9 @@ exports.Input = Input.Input;
 exports.InputGroup = InputGroup.InputGroup;
 exports.SearchInput = SearchInput.SearchInput;
 exports.SelectInput = SelectInput.SelectInput;
-exports.sortByRelevance = SelectInput_utils.sortByRelevance;
-exports.SelectInputOptionContent = SelectInputOptionContent.SelectInputOptionContent;
-exports.SelectInputTriggerButton = SelectInputTriggerButton.SelectInputTriggerButton;
-exports.Section = Section.default;
+exports.SelectInputOptionContent = SelectInput.SelectInputOptionContent;
+exports.SelectInputTriggerButton = SelectInput.SelectInputTriggerButton;
+exports.sortByRelevance = SelectInput.sortByRelevance;
 exports.TextArea = TextArea.TextArea;
 exports.InstructionsList = InstructionsList.default;
 exports.Label = Label.Label;
@@ -266,6 +258,7 @@ exports.Radio = Radio.default;
 exports.RadioGroup = RadioGroup.default;
 exports.RadioOption = RadioOption.default;
 exports.ResponsivePanel = ResponsivePanel.default;
+exports.Section = Section.default;
 exports.SegmentedControl = SegmentedControl.default;
 exports.Select = Select.default;
 exports.SentimentSurface = SentimentSurface.default;

package/build/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.mjs CHANGED Viewed

@@ -56,16 +56,7 @@ export { default as InputWithDisplayFormat } from './inputWithDisplayFormat/Inpu
 export { Input } from './inputs/Input.mjs';
 export { InputGroup } from './inputs/InputGroup.mjs';
 export { SearchInput } from './inputs/SearchInput.mjs';
-export { SelectInput } from './inputs/SelectInput/SelectInput.mjs';
-export { sortByRelevance } from './inputs/SelectInput/SelectInput.utils.mjs';
-import 'react-intl';
-import './dateLookup/dateTrigger/DateTrigger.messages.mjs';
-import '@headlessui/react';
-export { SelectInputOptionContent } from './inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs';
-export { SelectInputTriggerButton } from './inputs/SelectInput/TriggerButton/SelectInputTriggerButton.mjs';
-export { default as Section } from './section/Section.mjs';
-import 'virtua';
-import './inputs/SelectInput/SelectInput.messages.mjs';
+export { SelectInput, SelectInputOptionContent, SelectInputTriggerButton, sortByRelevance } from './inputs/SelectInput.mjs';
 export { TextArea } from './inputs/TextArea.mjs';
 export { default as InstructionsList } from './instructionsList/InstructionsList.mjs';
 export { Label } from './label/Label.mjs';
@@ -97,6 +88,7 @@ export { default as Radio } from './radio/Radio.mjs';
 export { default as RadioGroup } from './radioGroup/RadioGroup.mjs';
 export { default as RadioOption } from './radioOption/RadioOption.mjs';
 export { default as ResponsivePanel } from './common/responsivePanel/ResponsivePanel.mjs';
+export { default as Section } from './section/Section.mjs';
 export { default as SegmentedControl } from './segmentedControl/SegmentedControl.mjs';
 export { default as Select } from './select/Select.mjs';
 export { default as SentimentSurface } from './sentimentSurface/SentimentSurface.mjs';
@@ -145,6 +137,7 @@ export { MarkdownNodeType } from './common/propsValues/markdownNodeType.mjs';
 export { FileType } from './common/fileType.mjs';
 export { DEFAULT_LANG, DEFAULT_LOCALE, RTL_LANGUAGES, SUPPORTED_LANGUAGES, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, getLocaleCurrencyName } from './common/locale/index.mjs';
 export { getBrandColorFromSeed } from './common/colors.mjs';
+import 'react-intl';
 import './common/closeButton/CloseButton.messages.mjs';
 export { default as translations } from './i18n/index.mjs';
 export { default as withId } from './withId/withId.mjs';

package/build/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}