@consumidor-positivo/aurora 0.0.135 → 0.0.137

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 (30) hide show
  1. package/dist/components/Alert/index.es.js +1 -1
  2. package/dist/components/Calendar/index.es.js +2 -2
  3. package/dist/components/CalendarHeader/index.es.js +2 -2
  4. package/dist/components/Checkbox/index.es.js +1 -1
  5. package/dist/components/Datepicker/index.es.js +3 -3
  6. package/dist/components/EmailField/index.es.js +6 -1
  7. package/dist/components/EmailField/index.es.js.map +1 -1
  8. package/dist/components/Icon/index.es.js +1 -0
  9. package/dist/components/Icon/index.es.js.map +1 -1
  10. package/dist/components/Icon/styles.css +1 -1
  11. package/dist/components/PortalHolder/index.es.js +1 -1
  12. package/dist/components/Segment/index.es.js +1 -1
  13. package/dist/components/default/index.es.js +2 -0
  14. package/dist/components/default/index.es.js.map +1 -1
  15. package/dist/components/icons/Icon.d.ts +1 -1
  16. package/dist/components/icons/IconId/index.es.js +16 -0
  17. package/dist/components/icons/IconId/index.es.js.map +1 -0
  18. package/dist/components/icons/default/IconId.d.ts +3 -0
  19. package/dist/components/icons/default/index.d.ts +1 -0
  20. package/dist/components/icons/index.es.js +2 -0
  21. package/dist/components/icons/index.es.js.map +1 -1
  22. package/dist/{index-BDy8i79S.js → index-CXayTd35.js} +2 -2
  23. package/dist/{index-BDy8i79S.js.map → index-CXayTd35.js.map} +1 -1
  24. package/dist/{index-B9cLhrrb.js → index-Cn20y-Ji.js} +2 -2
  25. package/dist/{index-B9cLhrrb.js.map → index-Cn20y-Ji.js.map} +1 -1
  26. package/dist/{index-C9HFx59f.js → index-piVJ4mle.js} +3 -3
  27. package/dist/{index-C9HFx59f.js.map → index-piVJ4mle.js.map} +1 -1
  28. package/dist/main.es.js +2 -0
  29. package/dist/main.es.js.map +1 -1
  30. package/package.json +1 -1
@@ -8,9 +8,9 @@ import { IconCheck } from "../icons/IconCheck/index.es.js";
8
8
  import { IconClock } from "../icons/IconClock/index.es.js";
9
9
  import { IconInfo } from "../icons/IconInfo/index.es.js";
10
10
  import { IconX } from "../icons/IconX/index.es.js";
11
+ import { h as COLOR_NEUTRAL_70, C as COLOR_SUCCESS_50, b as COLOR_ERROR_50, W as COLOR_WARNING_50, a1 as COLOR_INFO_50 } from "../../tokens-BwvPtuyb.js";
11
12
  import { Conditional } from "../Conditional/index.es.js";
12
13
  import { Text } from "../Text/index.es.js";
13
- import { h as COLOR_NEUTRAL_70, C as COLOR_SUCCESS_50, b as COLOR_ERROR_50, W as COLOR_WARNING_50, a1 as COLOR_INFO_50 } from "../../tokens-BwvPtuyb.js";
14
14
  import './styles.css';const Alert = ({
15
15
  status = "info",
16
16
  type = 1,
@@ -1,9 +1,9 @@
1
1
  import "react/jsx-runtime";
2
2
  import "../../index-CweZ_OcN.js";
3
- import "../../index-B9cLhrrb.js";
3
+ import "../../index-Cn20y-Ji.js";
4
4
  import "../Button/index.es.js";
5
5
  import "../PortalHolder/index.es.js";
6
- import { a } from "../../index-C9HFx59f.js";
6
+ import { a } from "../../index-piVJ4mle.js";
7
7
  export {
8
8
  a as DatepickerCalendar
9
9
  };
@@ -3,8 +3,8 @@ import "../../index-CweZ_OcN.js";
3
3
  import "../Icon/index.es.js";
4
4
  import "../icons/IconChevronLeft/index.es.js";
5
5
  import "../icons/IconChevronRight/index.es.js";
6
- import "../../index-BDy8i79S.js";
7
- import { C } from "../../index-B9cLhrrb.js";
6
+ import "../../index-CXayTd35.js";
7
+ import { C } from "../../index-Cn20y-Ji.js";
8
8
  export {
9
9
  C as CalendarHeader
10
10
  };
@@ -3,8 +3,8 @@ import $dbSRa$react__default, { useState, useEffect } from "react";
3
3
  import { c as classNames } from "../../index-CweZ_OcN.js";
4
4
  import "../Icon/index.es.js";
5
5
  import { IconCheck } from "../icons/IconCheck/index.es.js";
6
- import { F as Field } from "../../index-ZE6zszxw.js";
7
6
  import { n as COLOR_NEUTRAL_00 } from "../../tokens-BwvPtuyb.js";
7
+ import { F as Field } from "../../index-ZE6zszxw.js";
8
8
  import { Conditional } from "../Conditional/index.es.js";
9
9
  import { Text } from "../Text/index.es.js";
10
10
  import './styles.css';const CheckboxField = ({
@@ -1,13 +1,13 @@
1
1
  import { jsxs, jsx } from "react/jsx-runtime";
2
+ import { B as BREAKPOINT_MD, c as COLOR_NEUTRAL_40 } from "../../tokens-BwvPtuyb.js";
2
3
  import "../../index-CweZ_OcN.js";
3
4
  import "../Icon/index.es.js";
4
5
  import { IconCalendar } from "../icons/IconCalendar/index.es.js";
5
6
  import { InputField } from "../InputField/index.es.js";
6
- import { g as getDefaultDate, D as DDMMYYYY, a as DatepickerCalendar, A as AUCalendarDate } from "../../index-C9HFx59f.js";
7
+ import { g as getDefaultDate, D as DDMMYYYY, a as DatepickerCalendar, A as AUCalendarDate } from "../../index-piVJ4mle.js";
7
8
  import { useRef, useState, useMemo, useEffect } from "react";
8
9
  import { a as above } from "../../screen-DfYo7XQ_.js";
9
- import { u as useOutsideClick } from "../../index-BDy8i79S.js";
10
- import { B as BREAKPOINT_MD, c as COLOR_NEUTRAL_40 } from "../../tokens-BwvPtuyb.js";
10
+ import { u as useOutsideClick } from "../../index-CXayTd35.js";
11
11
  import './styles.css';function useDatepicker({
12
12
  value,
13
13
  defaultValue = "empty",
@@ -106,7 +106,12 @@ const EmailField = ({
106
106
  type: "email",
107
107
  inputRef,
108
108
  value: inputValue,
109
- onChange: handleChange,
109
+ onChange: (e) => {
110
+ handleChange(e);
111
+ if (props.onChange) {
112
+ props.onChange(e);
113
+ }
114
+ },
110
115
  disabled,
111
116
  style: inputStyle,
112
117
  ...props
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","sources":["../../../lib/components/form/EmailField/hook.ts","../../../lib/components/form/EmailField/index.tsx"],"sourcesContent":["import { useState } from 'react'\n\nconst emailDomains = [\n 'gmail.com',\n 'hotmail.com',\n 'yahoo.com',\n 'outlook.com',\n 'yahoo.com.br',\n 'uol.com.br',\n 'ig.com.br',\n 'terra.com.br',\n 'aol.com',\n 'live.com',\n 'msn.com',\n]\n\nexport const useEmailAutocomplete = () => {\n const [inputValue, setInputValue] = useState('')\n const [suggestions, setSuggestions] = useState<string[]>([])\n const [isDropdownOpen, setIsDropdownOpen] = useState(false)\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const value = e.target.value\n if (inputValue === value) return\n setInputValue(value)\n\n const atIndex = value.indexOf('@')\n if (atIndex > -1) {\n const domainPart = value.slice(atIndex + 1)\n const filteredDomains = emailDomains.filter((domain) =>\n domain.startsWith(domainPart),\n )\n setSuggestions(filteredDomains)\n setIsDropdownOpen(filteredDomains.length > 0)\n } else {\n setSuggestions([])\n setIsDropdownOpen(false)\n }\n }\n\n const handleSuggestionClick = (suggestion: string) => {\n const atIndex = inputValue.indexOf('@')\n if (atIndex > -1) {\n setInputValue(inputValue.slice(0, atIndex + 1) + suggestion)\n }\n setSuggestions([])\n setIsDropdownOpen(false)\n }\n\n return {\n inputValue,\n setInputValue,\n suggestions,\n isDropdownOpen,\n handleChange,\n handleSuggestionClick,\n }\n}\n","import Field from '../Field'\nimport { useEmailAutocomplete } from './hook'\nimport classNames from 'classnames'\nimport './styles.scss'\n\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {\n showOptionalLabel?: boolean\n requiredInput?: boolean\n success?: boolean\n error?: boolean\n errorMessage?: string\n helpMessage?: string\n rightSlot?: React.ReactNode\n label?: string\n inputStyle?: React.CSSProperties\n inputRef?: React.RefObject<HTMLInputElement>\n}\n\nexport const EmailField = ({\n showOptionalLabel,\n requiredInput,\n success,\n error,\n errorMessage,\n helpMessage,\n label,\n id,\n disabled,\n style,\n className,\n inputStyle,\n rightSlot,\n inputRef,\n ...props\n}: InputProps) => {\n const {\n inputValue,\n suggestions,\n isDropdownOpen,\n handleChange,\n handleSuggestionClick,\n } = useEmailAutocomplete()\n\n return (\n <Field.Root\n style={style}\n customclass={className}\n success={success}\n error={error}\n disabled={disabled}>\n <Field.Label\n text={label}\n id={id}\n showOptionalLabel={showOptionalLabel}\n required={requiredInput}\n success={success}\n error={error}\n disabled={disabled}\n />\n <Field.InputHolder rightSideSlot={rightSlot}>\n <Field.Input\n id={id}\n type=\"email\"\n inputRef={inputRef}\n value={inputValue}\n onChange={handleChange}\n disabled={disabled}\n style={inputStyle}\n {...props}\n />\n <ul\n className={classNames('au-field__input-autocomplete', {\n 'au-field__input-autocomplete--open': isDropdownOpen,\n })}\n tabIndex={-1}\n role=\"listbox\"\n aria-expanded={isDropdownOpen}\n style={{\n overflowY: 'auto',\n }}>\n {suggestions.map((suggestion, index) => (\n <li\n className=\"au-field__input-option\"\n onClick={() => handleSuggestionClick(suggestion)}\n role=\"option\"\n key={index}>\n {suggestion}\n </li>\n ))}\n </ul>\n </Field.InputHolder>\n <Field.Message\n hasError={!!error}\n errorMessage={errorMessage}\n helpMessage={helpMessage}\n />\n </Field.Root>\n )\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.es.js","sources":["../../../lib/components/form/EmailField/hook.ts","../../../lib/components/form/EmailField/index.tsx"],"sourcesContent":["import { useState } from 'react'\n\nconst emailDomains = [\n 'gmail.com',\n 'hotmail.com',\n 'yahoo.com',\n 'outlook.com',\n 'yahoo.com.br',\n 'uol.com.br',\n 'ig.com.br',\n 'terra.com.br',\n 'aol.com',\n 'live.com',\n 'msn.com',\n]\n\nexport const useEmailAutocomplete = () => {\n const [inputValue, setInputValue] = useState('')\n const [suggestions, setSuggestions] = useState<string[]>([])\n const [isDropdownOpen, setIsDropdownOpen] = useState(false)\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const value = e.target.value\n if (inputValue === value) return\n setInputValue(value)\n\n const atIndex = value.indexOf('@')\n if (atIndex > -1) {\n const domainPart = value.slice(atIndex + 1)\n const filteredDomains = emailDomains.filter((domain) =>\n domain.startsWith(domainPart),\n )\n setSuggestions(filteredDomains)\n setIsDropdownOpen(filteredDomains.length > 0)\n } else {\n setSuggestions([])\n setIsDropdownOpen(false)\n }\n }\n\n const handleSuggestionClick = (suggestion: string) => {\n const atIndex = inputValue.indexOf('@')\n if (atIndex > -1) {\n setInputValue(inputValue.slice(0, atIndex + 1) + suggestion)\n }\n setSuggestions([])\n setIsDropdownOpen(false)\n }\n\n return {\n inputValue,\n setInputValue,\n suggestions,\n isDropdownOpen,\n handleChange,\n handleSuggestionClick,\n }\n}\n","import Field from '../Field'\nimport { useEmailAutocomplete } from './hook'\nimport classNames from 'classnames'\nimport './styles.scss'\n\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {\n showOptionalLabel?: boolean\n requiredInput?: boolean\n success?: boolean\n error?: boolean\n errorMessage?: string\n helpMessage?: string\n rightSlot?: React.ReactNode\n label?: string\n inputStyle?: React.CSSProperties\n inputRef?: React.RefObject<HTMLInputElement>\n}\n\nexport const EmailField = ({\n showOptionalLabel,\n requiredInput,\n success,\n error,\n errorMessage,\n helpMessage,\n label,\n id,\n disabled,\n style,\n className,\n inputStyle,\n rightSlot,\n inputRef,\n ...props\n}: InputProps) => {\n const {\n inputValue,\n suggestions,\n isDropdownOpen,\n handleChange,\n handleSuggestionClick,\n } = useEmailAutocomplete()\n\n return (\n <Field.Root\n style={style}\n customclass={className}\n success={success}\n error={error}\n disabled={disabled}>\n <Field.Label\n text={label}\n id={id}\n showOptionalLabel={showOptionalLabel}\n required={requiredInput}\n success={success}\n error={error}\n disabled={disabled}\n />\n <Field.InputHolder rightSideSlot={rightSlot}>\n <Field.Input\n id={id}\n type=\"email\"\n inputRef={inputRef}\n value={inputValue}\n onChange={(e) => {\n\t\t\t\t\t\thandleChange(e);\n\t\t\t\t\t\t\n\t\t\t\t\t\tif (props.onChange) {\n\t\t\t\t\t\t\tprops.onChange(e);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n disabled={disabled}\n style={inputStyle}\n {...props}\n />\n <ul\n className={classNames('au-field__input-autocomplete', {\n 'au-field__input-autocomplete--open': isDropdownOpen,\n })}\n tabIndex={-1}\n role=\"listbox\"\n aria-expanded={isDropdownOpen}\n style={{\n overflowY: 'auto',\n }}>\n {suggestions.map((suggestion, index) => (\n <li\n className=\"au-field__input-option\"\n onClick={() => handleSuggestionClick(suggestion)}\n role=\"option\"\n key={index}>\n {suggestion}\n </li>\n ))}\n </ul>\n </Field.InputHolder>\n <Field.Message\n hasError={!!error}\n errorMessage={errorMessage}\n helpMessage={helpMessage}\n />\n </Field.Root>\n )\n}\n"],"names":[],"mappings":"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"}
@@ -17,6 +17,7 @@ import './styles.css';const Icon = ({
17
17
  "au-icon--color-raw": !!rawColor,
18
18
  "au-icon--color-dark": color === "dark",
19
19
  "au-icon--color-info": color === "info",
20
+ "au-icon--color-success": color === "success",
20
21
  "au-icon--size-large": size === "large",
21
22
  "au-icon--size-small": size === "small",
22
23
  [`${className}`]: !!className
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","sources":["../../../lib/components/icons/Icon.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport './styles.scss'\n\nexport type IconSize = 'large' | 'small' | 'default'\nexport type IconColor = 'dark' | 'info' | 'default'\n\nexport type IconProps = {\n size?: IconSize\n color?: IconColor\n rawColor?: string\n className?: string\n onClick?: () => void\n}\ntype BaseIconProps = IconProps & {\n markup?: string\n name?: string\n}\n\nconst Icon: React.FC<BaseIconProps> = ({\n markup,\n name,\n size,\n color,\n rawColor,\n className,\n onClick,\n}: BaseIconProps) => {\n const iconStyle: React.CSSProperties = {\n ...(rawColor && { color: rawColor }),\n }\n\n const componentClass = classNames('au-icon', {\n [`au-icon--${name?.toLocaleLowerCase()}`]: !!name,\n 'au-icon--color-raw': !!rawColor,\n 'au-icon--color-dark': color === 'dark',\n 'au-icon--color-info': color === 'info',\n 'au-icon--size-large': size === 'large',\n 'au-icon--size-small': size === 'small',\n [`${className}`]: !!className,\n })\n\n return (\n <div\n style={iconStyle}\n onClick={onClick}\n className={componentClass}\n dangerouslySetInnerHTML={{\n __html: markup || '',\n }}\n />\n )\n}\n\nexport default Icon\n"],"names":[],"mappings":";;AAkBA,MAAM,OAAgC,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqB;AACnB,QAAM,YAAiC;AAAA,IACrC,GAAI,YAAY,EAAE,OAAO,SAAS;AAAA,EAAA;AAG9B,QAAA,iBAAiB,WAAW,WAAW;AAAA,IAC3C,CAAC,YAAY,6BAAM,mBAAmB,EAAE,GAAG,CAAC,CAAC;AAAA,IAC7C,sBAAsB,CAAC,CAAC;AAAA,IACxB,uBAAuB,UAAU;AAAA,IACjC,uBAAuB,UAAU;AAAA,IACjC,uBAAuB,SAAS;AAAA,IAChC,uBAAuB,SAAS;AAAA,IAChC,CAAC,GAAG,SAAS,EAAE,GAAG,CAAC,CAAC;AAAA,EAAA,CACrB;AAGC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA,WAAW;AAAA,MACX,yBAAyB;AAAA,QACvB,QAAQ,UAAU;AAAA,MACpB;AAAA,IAAA;AAAA,EAAA;AAGN;"}
1
+ {"version":3,"file":"index.es.js","sources":["../../../lib/components/icons/Icon.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport './styles.scss'\n\nexport type IconSize = 'large' | 'small' | 'default'\nexport type IconColor = 'dark' | 'info' | 'default' | 'success'\n\nexport type IconProps = {\n size?: IconSize\n color?: IconColor\n rawColor?: string\n className?: string\n onClick?: () => void\n}\ntype BaseIconProps = IconProps & {\n markup?: string\n name?: string\n}\n\nconst Icon: React.FC<BaseIconProps> = ({\n markup,\n name,\n size,\n color,\n rawColor,\n className,\n onClick,\n}: BaseIconProps) => {\n const iconStyle: React.CSSProperties = {\n ...(rawColor && { color: rawColor }),\n }\n\n const componentClass = classNames('au-icon', {\n [`au-icon--${name?.toLocaleLowerCase()}`]: !!name,\n 'au-icon--color-raw': !!rawColor,\n 'au-icon--color-dark': color === 'dark',\n 'au-icon--color-info': color === 'info',\n 'au-icon--color-success': color === 'success',\n 'au-icon--size-large': size === 'large',\n 'au-icon--size-small': size === 'small',\n [`${className}`]: !!className,\n })\n\n return (\n <div\n style={iconStyle}\n onClick={onClick}\n className={componentClass}\n dangerouslySetInnerHTML={{\n __html: markup || '',\n }}\n />\n )\n}\n\nexport default Icon\n"],"names":[],"mappings":";;AAkBA,MAAM,OAAgC,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqB;AACnB,QAAM,YAAiC;AAAA,IACrC,GAAI,YAAY,EAAE,OAAO,SAAS;AAAA,EAAA;AAG9B,QAAA,iBAAiB,WAAW,WAAW;AAAA,IAC3C,CAAC,YAAY,6BAAM,mBAAmB,EAAE,GAAG,CAAC,CAAC;AAAA,IAC7C,sBAAsB,CAAC,CAAC;AAAA,IACxB,uBAAuB,UAAU;AAAA,IACjC,uBAAuB,UAAU;AAAA,IACjC,0BAA0B,UAAU;AAAA,IACpC,uBAAuB,SAAS;AAAA,IAChC,uBAAuB,SAAS;AAAA,IAChC,CAAC,GAAG,SAAS,EAAE,GAAG,CAAC,CAAC;AAAA,EAAA,CACrB;AAGC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA,WAAW;AAAA,MACX,yBAAyB;AAAA,QACvB,QAAQ,UAAU;AAAA,MACpB;AAAA,IAAA;AAAA,EAAA;AAGN;"}
@@ -1 +1 @@
1
- .au-icon,.au-icon>svg{width:24px;height:24px;color:#0048db;display:flex;align-items:center;justify-content:center}.au-icon--size-large,.au-icon--size-large svg{width:32px;height:32px}.au-icon--size-small,.au-icon--size-small svg{width:16px;height:16px}.au-icon--color-dark>svg{color:#454a54}.au-icon--color-info>svg{color:#6728e5}.au-icon--color-raw>svg{color:inherit}
1
+ .au-icon,.au-icon>svg{width:24px;height:24px;color:#0048db;display:flex;align-items:center;justify-content:center}.au-icon--size-large,.au-icon--size-large svg{width:32px;height:32px}.au-icon--size-small,.au-icon--size-small svg{width:16px;height:16px}.au-icon--color-dark>svg{color:#454a54}.au-icon--color-info>svg{color:#6728e5}.au-icon--color-success>svg{color:#026441}.au-icon--color-raw>svg{color:inherit}
@@ -1,7 +1,7 @@
1
1
  import { jsx, Fragment } from "react/jsx-runtime";
2
2
  import { a as above } from "../../screen-DfYo7XQ_.js";
3
- import { Portal } from "../Portal/index.es.js";
4
3
  import { B as BREAKPOINT_MD } from "../../tokens-BwvPtuyb.js";
4
+ import { Portal } from "../Portal/index.es.js";
5
5
  const PortalHolder = ({ withPortal, children }) => {
6
6
  const shouldUsePortal = !above(BREAKPOINT_MD) && withPortal;
7
7
  if (shouldUsePortal) return /* @__PURE__ */ jsx(Portal, { children });
@@ -4,7 +4,7 @@ import "../Icon/index.es.js";
4
4
  import "../icons/IconChevronDown/index.es.js";
5
5
  import "../icons/IconChevronLeft/index.es.js";
6
6
  import "../icons/IconX/index.es.js";
7
- import { S } from "../../index-BDy8i79S.js";
7
+ import { S } from "../../index-CXayTd35.js";
8
8
  export {
9
9
  S as Segment
10
10
  };
@@ -141,6 +141,7 @@ import { IconHelpCircle } from "../icons/IconHelpCircle/index.es.js";
141
141
  import { IconHexagon } from "../icons/IconHexagon/index.es.js";
142
142
  import { IconHome } from "../icons/IconHome/index.es.js";
143
143
  import { IconHomeChimney } from "../icons/IconHomeChimney/index.es.js";
144
+ import { IconId } from "../icons/IconId/index.es.js";
144
145
  import { IconImage } from "../icons/IconImage/index.es.js";
145
146
  import { IconInbox } from "../icons/IconInbox/index.es.js";
146
147
  import { IconInfo } from "../icons/IconInfo/index.es.js";
@@ -456,6 +457,7 @@ export {
456
457
  IconHexagon,
457
458
  IconHome,
458
459
  IconHomeChimney,
460
+ IconId,
459
461
  IconImage,
460
462
  IconInbox,
461
463
  IconInfo,
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,6 +1,6 @@
1
1
 
2
2
  export type IconSize = 'large' | 'small' | 'default';
3
- export type IconColor = 'dark' | 'info' | 'default';
3
+ export type IconColor = 'dark' | 'info' | 'default' | 'success';
4
4
  export type IconProps = {
5
5
  size?: IconSize;
6
6
  color?: IconColor;
@@ -0,0 +1,16 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import Icon from "../../Icon/index.es.js";
3
+ function IconId(props) {
4
+ return /* @__PURE__ */ jsx(
5
+ Icon,
6
+ {
7
+ markup: "<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><g id='ID'><path id='Vector (Stroke)' fill-rule='evenodd' clip-rule='evenodd' d='M3 6C2.44772 6 2 6.44772 2 7V17C2 17.5523 2.44772 18 3 18H21C21.5523 18 22 17.5523 22 17V7C22 6.44772 21.5523 6 21 6H3ZM0 7C0 5.34315 1.34315 4 3 4H21C22.6569 4 24 5.34315 24 7V17C24 18.6569 22.6569 20 21 20H3C1.34315 20 0 18.6569 0 17V7Z' fill='currentColor'/><path id='Vector 77' d='M4 16V16C4 14.8954 4.89543 14 6 14H9C10.1046 14 11 14.8954 11 16V16' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/><circle id='Ellipse 307' cx='7.5' cy='9.5' r='1.75' stroke='currentColor' stroke-width='1.5'/><path id='Vector 78' d='M14 9H20' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/><path id='Vector 79' d='M14 12H20' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/><path id='Vector 80' d='M14 15H18.5' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/></g></svg>",
8
+ name: "IconId",
9
+ ...props
10
+ }
11
+ );
12
+ }
13
+ export {
14
+ IconId
15
+ };
16
+ //# sourceMappingURL=index.es.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.es.js","sources":["../../../../lib/components/icons/default/IconId.tsx"],"sourcesContent":["\n// This file is generated automatically\n// To edit see the file lib/tasks/generateIcons.js\nimport Icon, { IconProps } from \"../Icon\";\n\nexport function IconId(props: IconProps) {\n return (\n <Icon\n markup={\"<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><g id='ID'><path id='Vector (Stroke)' fill-rule='evenodd' clip-rule='evenodd' d='M3 6C2.44772 6 2 6.44772 2 7V17C2 17.5523 2.44772 18 3 18H21C21.5523 18 22 17.5523 22 17V7C22 6.44772 21.5523 6 21 6H3ZM0 7C0 5.34315 1.34315 4 3 4H21C22.6569 4 24 5.34315 24 7V17C24 18.6569 22.6569 20 21 20H3C1.34315 20 0 18.6569 0 17V7Z' fill='currentColor'/><path id='Vector 77' d='M4 16V16C4 14.8954 4.89543 14 6 14H9C10.1046 14 11 14.8954 11 16V16' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/><circle id='Ellipse 307' cx='7.5' cy='9.5' r='1.75' stroke='currentColor' stroke-width='1.5'/><path id='Vector 78' d='M14 9H20' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/><path id='Vector 79' d='M14 12H20' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/><path id='Vector 80' d='M14 15H18.5' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/></g></svg>\"}\n name=\"IconId\"\n {...props}\n />\n );\n}\n\n"],"names":[],"mappings":";;AAKO,SAAS,OAAO,OAAkB;AAErC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,QAAQ;AAAA,MACR,MAAK;AAAA,MACJ,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}
@@ -0,0 +1,3 @@
1
+ import { IconProps } from '../Icon';
2
+
3
+ export declare function IconId(props: IconProps): import("react/jsx-runtime").JSX.Element;
@@ -141,6 +141,7 @@ export { IconHelpCircle } from './IconHelpCircle';
141
141
  export { IconHexagon } from './IconHexagon';
142
142
  export { IconHome } from './IconHome';
143
143
  export { IconHomeChimney } from './IconHomeChimney';
144
+ export { IconId } from './IconId';
144
145
  export { IconImage } from './IconImage';
145
146
  export { IconInbox } from './IconInbox';
146
147
  export { IconInfo } from './IconInfo';
@@ -141,6 +141,7 @@ import { IconHelpCircle } from "./IconHelpCircle/index.es.js";
141
141
  import { IconHexagon } from "./IconHexagon/index.es.js";
142
142
  import { IconHome } from "./IconHome/index.es.js";
143
143
  import { IconHomeChimney } from "./IconHomeChimney/index.es.js";
144
+ import { IconId } from "./IconId/index.es.js";
144
145
  import { IconImage } from "./IconImage/index.es.js";
145
146
  import { IconInbox } from "./IconInbox/index.es.js";
146
147
  import { IconInfo } from "./IconInfo/index.es.js";
@@ -457,6 +458,7 @@ export {
457
458
  IconHexagon,
458
459
  IconHome,
459
460
  IconHomeChimney,
461
+ IconId,
460
462
  IconImage,
461
463
  IconInbox,
462
464
  IconInfo,
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -5,8 +5,8 @@ import { IconChevronDown } from "./components/icons/IconChevronDown/index.es.js"
5
5
  import { IconChevronLeft } from "./components/icons/IconChevronLeft/index.es.js";
6
6
  import { IconX } from "./components/icons/IconX/index.es.js";
7
7
  import { useState, useRef, useEffect } from "react";
8
- import { a as above } from "./screen-DfYo7XQ_.js";
9
8
  import { B as BREAKPOINT_MD } from "./tokens-BwvPtuyb.js";
9
+ import { a as above } from "./screen-DfYo7XQ_.js";
10
10
  import './components/index/styles3.css';function useOutsideClick({
11
11
  rootEl,
12
12
  breakpoint,
@@ -138,4 +138,4 @@ export {
138
138
  Segment as S,
139
139
  useOutsideClick as u
140
140
  };
141
- //# sourceMappingURL=index-BDy8i79S.js.map
141
+ //# sourceMappingURL=index-CXayTd35.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index-BDy8i79S.js","sources":["../lib/core/hooks/useOutsideClick.ts","../lib/components/form/Datepicker/Segment/hook.ts","../lib/components/form/Datepicker/Segment/index.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { above } from '../utils/screen'\n\ntype UseOutsideClickProps = {\n rootEl: React.RefObject<HTMLDivElement>\n breakpoint?: string\n onLoseFocusCB: () => void\n}\n\nexport function useOutsideClick({\n rootEl,\n breakpoint,\n onLoseFocusCB,\n}: UseOutsideClickProps) {\n const [setupListener, setSetupListener] = useState(false)\n\n function listenOutsideClick() {\n if (breakpoint && !above(breakpoint)) return\n document.addEventListener('mousedown', handleLoseFocus)\n setSetupListener(true)\n }\n\n function clearOutsideClickListenner() {\n if (setupListener) {\n document.removeEventListener('mousedown', handleLoseFocus)\n setSetupListener(false)\n }\n }\n\n function handleLoseFocus(ev: MouseEvent | FocusEvent) {\n if (!rootEl.current) return\n\n const clickedOutside = !rootEl.current.contains(ev.target as Node)\n\n if (clickedOutside) {\n onLoseFocusCB()\n clearOutsideClickListenner()\n }\n }\n\n return {\n listenOutsideClick,\n }\n}\n","import { useEffect, useRef, useState } from 'react'\nimport { BREAKPOINT_MD } from '@core/tokens'\nimport { useOutsideClick } from '@core/hooks/useOutsideClick'\n\nimport { SegmentItem } from '../types'\n\ntype UseSegmentProps = {\n options: SegmentItem[]\n currentValue: string | number\n onSelect: (option: SegmentItem) => void\n}\n\nexport function useSegment({\n options,\n currentValue,\n onSelect,\n}: UseSegmentProps) {\n const [isListOpen, setIsListOpen] = useState(false)\n const rootEl = useRef<HTMLDivElement>(null)\n const selectedItem = useRef<HTMLLIElement>(null)\n const currentItem = options.find((item) => item.value === currentValue)\n const { listenOutsideClick } = useOutsideClick({\n rootEl,\n breakpoint: BREAKPOINT_MD,\n onLoseFocusCB: closeList,\n })\n\n useEffect(() => {\n if (selectedItem.current && isListOpen) {\n selectedItem.current.scrollIntoView({ block: 'center', inline: 'center' })\n }\n }, [isListOpen])\n\n function openList() {\n setIsListOpen(true)\n listenOutsideClick()\n }\n\n function closeList() {\n setIsListOpen(false)\n }\n\n function handleSelectItem(option: SegmentItem) {\n onSelect(option)\n setIsListOpen(false)\n }\n\n return {\n openList,\n closeList,\n isListOpen,\n rootEl,\n currentItem,\n handleSelectItem,\n selectedItem,\n }\n}\n","import classNames from 'classnames'\nimport { IconChevronDown, IconChevronLeft, IconX } from '@components/icons'\n\nimport { useSegment } from './hook'\nimport { SegmentItem } from '../types'\nimport './styles.scss'\n\ntype SegmentProps = {\n mobileTitle: string\n options: SegmentItem[]\n onSelect: (option: SegmentItem) => void\n currentValue: string | number\n minValue?: Date\n maxValue?: Date\n}\n\nexport const Segment = ({\n currentValue,\n options,\n mobileTitle,\n onSelect,\n}: SegmentProps) => {\n const {\n rootEl,\n isListOpen,\n openList,\n closeList,\n currentItem,\n handleSelectItem,\n selectedItem,\n } = useSegment({\n options,\n currentValue,\n onSelect,\n })\n\n return (\n <div\n ref={rootEl}\n tabIndex={0}\n className={classNames('au-datepicker__segment', {\n 'au-datepicker__segment--open': isListOpen,\n })}>\n <div className=\"au-datepicker__segment-input\" onClick={openList}>\n {currentItem?.label}\n <IconChevronDown />\n </div>\n <div className=\"au-datepicker__segment-list-holder\">\n <div className=\"au-datepicker__segment-list-header\">\n <div onClick={closeList}>\n <IconChevronLeft />\n </div>\n <h4 className=\"au-datepicker__segment-title\">{mobileTitle}</h4>\n <div onClick={closeList}>\n <IconX />\n </div>\n </div>\n <ul className=\"au-datepicker__segment-list\">\n {options.map((option, idx) => {\n const isSelectedItem = option.value === currentValue\n return (\n <li\n key={`au-datepicker-segment-li-${option.value}-${idx}`}\n onClick={() => handleSelectItem(option)}\n ref={isSelectedItem ? selectedItem : null}\n className={classNames('au-datepicker__segment-list-item', {\n 'au-datepicker__segment-list-item--active': isSelectedItem,\n })}>\n {option.label}\n </li>\n )\n })}\n </ul>\n </div>\n </div>\n )\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index-CXayTd35.js","sources":["../lib/core/hooks/useOutsideClick.ts","../lib/components/form/Datepicker/Segment/hook.ts","../lib/components/form/Datepicker/Segment/index.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { above } from '../utils/screen'\n\ntype UseOutsideClickProps = {\n rootEl: React.RefObject<HTMLDivElement>\n breakpoint?: string\n onLoseFocusCB: () => void\n}\n\nexport function useOutsideClick({\n rootEl,\n breakpoint,\n onLoseFocusCB,\n}: UseOutsideClickProps) {\n const [setupListener, setSetupListener] = useState(false)\n\n function listenOutsideClick() {\n if (breakpoint && !above(breakpoint)) return\n document.addEventListener('mousedown', handleLoseFocus)\n setSetupListener(true)\n }\n\n function clearOutsideClickListenner() {\n if (setupListener) {\n document.removeEventListener('mousedown', handleLoseFocus)\n setSetupListener(false)\n }\n }\n\n function handleLoseFocus(ev: MouseEvent | FocusEvent) {\n if (!rootEl.current) return\n\n const clickedOutside = !rootEl.current.contains(ev.target as Node)\n\n if (clickedOutside) {\n onLoseFocusCB()\n clearOutsideClickListenner()\n }\n }\n\n return {\n listenOutsideClick,\n }\n}\n","import { useEffect, useRef, useState } from 'react'\nimport { BREAKPOINT_MD } from '@core/tokens'\nimport { useOutsideClick } from '@core/hooks/useOutsideClick'\n\nimport { SegmentItem } from '../types'\n\ntype UseSegmentProps = {\n options: SegmentItem[]\n currentValue: string | number\n onSelect: (option: SegmentItem) => void\n}\n\nexport function useSegment({\n options,\n currentValue,\n onSelect,\n}: UseSegmentProps) {\n const [isListOpen, setIsListOpen] = useState(false)\n const rootEl = useRef<HTMLDivElement>(null)\n const selectedItem = useRef<HTMLLIElement>(null)\n const currentItem = options.find((item) => item.value === currentValue)\n const { listenOutsideClick } = useOutsideClick({\n rootEl,\n breakpoint: BREAKPOINT_MD,\n onLoseFocusCB: closeList,\n })\n\n useEffect(() => {\n if (selectedItem.current && isListOpen) {\n selectedItem.current.scrollIntoView({ block: 'center', inline: 'center' })\n }\n }, [isListOpen])\n\n function openList() {\n setIsListOpen(true)\n listenOutsideClick()\n }\n\n function closeList() {\n setIsListOpen(false)\n }\n\n function handleSelectItem(option: SegmentItem) {\n onSelect(option)\n setIsListOpen(false)\n }\n\n return {\n openList,\n closeList,\n isListOpen,\n rootEl,\n currentItem,\n handleSelectItem,\n selectedItem,\n }\n}\n","import classNames from 'classnames'\nimport { IconChevronDown, IconChevronLeft, IconX } from '@components/icons'\n\nimport { useSegment } from './hook'\nimport { SegmentItem } from '../types'\nimport './styles.scss'\n\ntype SegmentProps = {\n mobileTitle: string\n options: SegmentItem[]\n onSelect: (option: SegmentItem) => void\n currentValue: string | number\n minValue?: Date\n maxValue?: Date\n}\n\nexport const Segment = ({\n currentValue,\n options,\n mobileTitle,\n onSelect,\n}: SegmentProps) => {\n const {\n rootEl,\n isListOpen,\n openList,\n closeList,\n currentItem,\n handleSelectItem,\n selectedItem,\n } = useSegment({\n options,\n currentValue,\n onSelect,\n })\n\n return (\n <div\n ref={rootEl}\n tabIndex={0}\n className={classNames('au-datepicker__segment', {\n 'au-datepicker__segment--open': isListOpen,\n })}>\n <div className=\"au-datepicker__segment-input\" onClick={openList}>\n {currentItem?.label}\n <IconChevronDown />\n </div>\n <div className=\"au-datepicker__segment-list-holder\">\n <div className=\"au-datepicker__segment-list-header\">\n <div onClick={closeList}>\n <IconChevronLeft />\n </div>\n <h4 className=\"au-datepicker__segment-title\">{mobileTitle}</h4>\n <div onClick={closeList}>\n <IconX />\n </div>\n </div>\n <ul className=\"au-datepicker__segment-list\">\n {options.map((option, idx) => {\n const isSelectedItem = option.value === currentValue\n return (\n <li\n key={`au-datepicker-segment-li-${option.value}-${idx}`}\n onClick={() => handleSelectItem(option)}\n ref={isSelectedItem ? selectedItem : null}\n className={classNames('au-datepicker__segment-list-item', {\n 'au-datepicker__segment-list-item--active': isSelectedItem,\n })}>\n {option.label}\n </li>\n )\n })}\n </ul>\n </div>\n </div>\n )\n}\n"],"names":[],"mappings":"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"}
@@ -3,7 +3,7 @@ import "./index-CweZ_OcN.js";
3
3
  import "./components/Icon/index.es.js";
4
4
  import { IconChevronLeft } from "./components/icons/IconChevronLeft/index.es.js";
5
5
  import { IconChevronRight } from "./components/icons/IconChevronRight/index.es.js";
6
- import { S as Segment } from "./index-BDy8i79S.js";
6
+ import { S as Segment } from "./index-CXayTd35.js";
7
7
  import $dbSRa$react__default, { createContext, useContext, useState, useRef, useCallback, useEffect, useMemo, forwardRef } from "react";
8
8
  import "react-dom";
9
9
  createContext(null);
@@ -5686,4 +5686,4 @@ export {
5686
5686
  $dfd62f934fc76fed$export$e11f8ba65d857bff as e,
5687
5687
  $dfd62f934fc76fed$export$5d847498420df57b as f
5688
5688
  };
5689
- //# sourceMappingURL=index-B9cLhrrb.js.map
5689
+ //# sourceMappingURL=index-Cn20y-Ji.js.map