@remember-web/primitive 0.3.7 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/Avatars/Avatar/index.cjs.js +1 -1
- package/dist/src/Avatars/Avatar/index.esm.js +2 -2
- package/dist/src/Avatars/Avatar/styles.cjs.js.map +1 -1
- package/dist/src/Avatars/Avatar/styles.esm.js +1 -1
- package/dist/src/Avatars/Avatar/styles.esm.js.map +1 -1
- package/dist/src/Badge/Badge.cjs.js.map +1 -1
- package/dist/src/Badge/Badge.esm.js.map +1 -1
- package/dist/src/Badge/style.cjs.js.map +1 -1
- package/dist/src/Badge/style.esm.js.map +1 -1
- package/dist/src/Badge/utils.cjs.js.map +1 -1
- package/dist/src/Badge/utils.esm.js.map +1 -1
- package/dist/src/Buttons/Button/const.cjs.js +12 -8
- package/dist/src/Buttons/Button/const.cjs.js.map +1 -1
- package/dist/src/Buttons/Button/const.d.ts +11 -7
- package/dist/src/Buttons/Button/const.d.ts.map +1 -1
- package/dist/src/Buttons/Button/const.esm.js +13 -9
- package/dist/src/Buttons/Button/const.esm.js.map +1 -1
- package/dist/src/Buttons/Button/index.cjs.js +1 -1
- package/dist/src/Buttons/Button/index.esm.js +1 -1
- package/dist/src/Buttons/Button/styles.cjs.js +1 -1
- package/dist/src/Buttons/Button/styles.cjs.js.map +1 -1
- package/dist/src/Buttons/Button/styles.esm.js +1 -1
- package/dist/src/Buttons/Button/styles.esm.js.map +1 -1
- package/dist/src/Chips/Chip/const.cjs.js.map +1 -1
- package/dist/src/Chips/Chip/const.esm.js +1 -1
- package/dist/src/Chips/Chip/const.esm.js.map +1 -1
- package/dist/src/Chips/Chip/index.cjs.js +1 -1
- package/dist/src/Chips/Chip/index.cjs.js.map +1 -1
- package/dist/src/Chips/Chip/index.esm.js +1 -1
- package/dist/src/Chips/Chip/index.esm.js.map +1 -1
- package/dist/src/Chips/Chip/styles.cjs.js +1 -1
- package/dist/src/Chips/Chip/styles.cjs.js.map +1 -1
- package/dist/src/Chips/Chip/styles.esm.js +1 -1
- package/dist/src/Chips/Chip/styles.esm.js.map +1 -1
- package/dist/src/Chips/Chip/typeGuard.cjs.js.map +1 -1
- package/dist/src/Chips/Chip/typeGuard.esm.js.map +1 -1
- package/dist/src/Common/Divider/index.cjs.js +1 -1
- package/dist/src/Common/Divider/index.esm.js +1 -1
- package/dist/src/Common/Flex/index.cjs.js +1 -1
- package/dist/src/Common/Flex/index.esm.js +1 -1
- package/dist/src/Common/Grid/index.cjs.js +1 -1
- package/dist/src/Common/Grid/index.esm.js +1 -1
- package/dist/src/Common/Skeleton/index.cjs.js +1 -1
- package/dist/src/Common/Skeleton/index.cjs.js.map +1 -1
- package/dist/src/Common/Skeleton/index.esm.js +1 -1
- package/dist/src/Common/Skeleton/index.esm.js.map +1 -1
- package/dist/src/Common/Skeleton/styles.cjs.js.map +1 -1
- package/dist/src/Common/Skeleton/styles.esm.js.map +1 -1
- package/dist/src/Common/Typography/index.cjs.js +1 -1
- package/dist/src/Common/Typography/index.esm.js +1 -1
- package/dist/src/Common/Typography/styles.cjs.js.map +1 -1
- package/dist/src/Common/Typography/styles.esm.js.map +1 -1
- package/dist/src/Control/BaseToggle/ToggleIcon/index.esm.js +1 -1
- package/dist/src/Control/BaseToggle/index.cjs.js +1 -1
- package/dist/src/Control/BaseToggle/index.esm.js +1 -1
- package/dist/src/Control/BaseToggle/styles.cjs.js.map +1 -1
- package/dist/src/Control/BaseToggle/styles.esm.js.map +1 -1
- package/dist/src/Control/Checkbox.cjs.js +1 -1
- package/dist/src/Control/Checkbox.esm.js +1 -1
- package/dist/src/Control/Radio.cjs.js +1 -1
- package/dist/src/Control/Radio.esm.js +1 -1
- package/dist/src/Control/Switch/index.cjs.js +1 -1
- package/dist/src/Control/Switch/index.esm.js +1 -1
- package/dist/src/Control/Switch/styles.cjs.js.map +1 -1
- package/dist/src/Control/Switch/styles.esm.js.map +1 -1
- package/dist/src/Control/Toggle.cjs.js +1 -1
- package/dist/src/Control/Toggle.cjs.js.map +1 -1
- package/dist/src/Control/Toggle.esm.js +1 -1
- package/dist/src/Control/Toggle.esm.js.map +1 -1
- package/dist/src/Floating/DropdownMenu/DropdownMenuSection.cjs.js +1 -1
- package/dist/src/Floating/DropdownMenu/DropdownMenuSection.cjs.js.map +1 -1
- package/dist/src/Floating/DropdownMenu/DropdownMenuSection.esm.js +1 -1
- package/dist/src/Floating/DropdownMenu/DropdownMenuSection.esm.js.map +1 -1
- package/dist/src/Floating/DropdownMenu/index.cjs.js +1 -1
- package/dist/src/Floating/DropdownMenu/index.cjs.js.map +1 -1
- package/dist/src/Floating/DropdownMenu/index.esm.js +2 -2
- package/dist/src/Floating/DropdownMenu/index.esm.js.map +1 -1
- package/dist/src/Floating/DropdownMenu/styles.cjs.js +1 -1
- package/dist/src/Floating/DropdownMenu/styles.cjs.js.map +1 -1
- package/dist/src/Floating/DropdownMenu/styles.esm.js +1 -1
- package/dist/src/Floating/DropdownMenu/styles.esm.js.map +1 -1
- package/dist/src/Floating/Popover/index.cjs.js +1 -1
- package/dist/src/Floating/Popover/index.cjs.js.map +1 -1
- package/dist/src/Floating/Popover/index.esm.js +1 -1
- package/dist/src/Floating/Popover/index.esm.js.map +1 -1
- package/dist/src/Floating/Popover/styles.cjs.js.map +1 -1
- package/dist/src/Floating/Popover/styles.esm.js.map +1 -1
- package/dist/src/Floating/Tooltip/index.esm.js +1 -1
- package/dist/src/Floating/Tooltip/styles.cjs.js.map +1 -1
- package/dist/src/Floating/Tooltip/styles.esm.js.map +1 -1
- package/dist/src/Floating/Tooltip/types.cjs.js.map +1 -1
- package/dist/src/Floating/Tooltip/types.esm.js.map +1 -1
- package/dist/src/Inputs/Select/DesignedSelect/const.cjs.js.map +1 -1
- package/dist/src/Inputs/Select/DesignedSelect/const.esm.js.map +1 -1
- package/dist/src/Inputs/Select/DesignedSelect/index.cjs.js +1 -1
- package/dist/src/Inputs/Select/DesignedSelect/index.esm.js +1 -1
- package/dist/src/Inputs/Select/DesignedSelect/styles.cjs.js.map +1 -1
- package/dist/src/Inputs/Select/DesignedSelect/styles.esm.js.map +1 -1
- package/dist/src/Inputs/Select/NativeSelect/index.cjs.js +1 -1
- package/dist/src/Inputs/Select/NativeSelect/index.esm.js +1 -1
- package/dist/src/Inputs/Select/NativeSelect/styles.cjs.js.map +1 -1
- package/dist/src/Inputs/Select/NativeSelect/styles.esm.js.map +1 -1
- package/dist/src/Inputs/Select/index.cjs.js +2 -2
- package/dist/src/Inputs/Select/index.esm.js +2 -2
- package/dist/src/Inputs/Select/utils.cjs.js.map +1 -1
- package/dist/src/Inputs/Select/utils.esm.js.map +1 -1
- package/dist/src/Inputs/TextInput/index.cjs.js +1 -1
- package/dist/src/Inputs/TextInput/index.esm.js +1 -1
- package/dist/src/Inputs/TextInput/styles.cjs.js.map +1 -1
- package/dist/src/Inputs/TextInput/styles.esm.js.map +1 -1
- package/dist/src/Labels/Label/index.cjs.js +1 -1
- package/dist/src/Labels/Label/index.cjs.js.map +1 -1
- package/dist/src/Labels/Label/index.esm.js +1 -1
- package/dist/src/Labels/Label/index.esm.js.map +1 -1
- package/dist/src/Labels/Label/styles.cjs.js.map +1 -1
- package/dist/src/Labels/Label/styles.esm.js.map +1 -1
- package/dist/src/Logos/EnvLabel/index.d.ts +1 -0
- package/dist/src/Logos/EnvLabel/index.d.ts.map +1 -1
- package/dist/src/Logos/RememberLogo/index.cjs.js +1 -1
- package/dist/src/Logos/RememberLogo/index.esm.js +1 -1
- package/dist/src/Logos/RememberMobileLogo/index.cjs.js +1 -1
- package/dist/src/Logos/RememberMobileLogo/index.esm.js +1 -1
- package/dist/src/Logos/RememberServiceLogo/index.cjs.js +1 -1
- package/dist/src/Logos/RememberServiceLogo/index.cjs.js.map +1 -1
- package/dist/src/Logos/RememberServiceLogo/index.esm.js +1 -1
- package/dist/src/Logos/RememberServiceLogo/index.esm.js.map +1 -1
- package/dist/src/Logos/RememberServiceLogo/style.cjs.js.map +1 -1
- package/dist/src/Logos/RememberServiceLogo/style.esm.js.map +1 -1
- package/dist/src/Logos/RememberSquareLogo/index.cjs.js +1 -1
- package/dist/src/Logos/RememberSquareLogo/index.esm.js +1 -1
- package/dist/src/Modals/Dialog/index.cjs.js +1 -1
- package/dist/src/Modals/Dialog/index.esm.js +1 -1
- package/dist/src/Modals/Dialog/styles.cjs.js.map +1 -1
- package/dist/src/Modals/Dialog/styles.esm.js.map +1 -1
- package/dist/src/Paginations/styles.cjs.js.map +1 -1
- package/dist/src/Paginations/styles.esm.js.map +1 -1
- package/dist/src/Paginations/usePagination.cjs.js.map +1 -1
- package/dist/src/Paginations/usePagination.esm.js.map +1 -1
- package/dist/src/hooks/useMouseEventAway.cjs.js.map +1 -1
- package/dist/src/hooks/useMouseEventAway.esm.js.map +1 -1
- package/package.json +4 -6
- package/src/Avatars/Avatar/Avatar.stories.tsx +1 -1
- package/src/Badge/Badge.stories.tsx +1 -1
- package/src/Buttons/Button/Button.stories.tsx +1 -1
- package/src/Buttons/Button/const.ts +11 -7
- package/src/Buttons/Button/styles.ts +1 -1
- package/src/Chips/Chip/Chip.stories.tsx +1 -1
- package/src/Common/Divider/Divider.stories.tsx +1 -1
- package/src/Common/Skeleton/Skeleton.stories.tsx +1 -1
- package/src/Common/Spinner/Spinner.stories.tsx +1 -1
- package/src/Common/Typography/Typography.stories.tsx +1 -1
- package/src/Control/Checkbox.stories.tsx +2 -2
- package/src/Control/Radio.stories.tsx +1 -1
- package/src/Control/Switch/Switch.stories.tsx +2 -2
- package/src/Control/Toggle.stories.tsx +2 -2
- package/src/Floating/DropdownMenu/DropdownMenu.stories.tsx +1 -1
- package/src/Floating/Popover/Popover.stories.tsx +1 -1
- package/src/Floating/Tooltip/Tooltip.stories.tsx +1 -1
- package/src/Inputs/Select/Select.stories.tsx +1 -1
- package/src/Inputs/TextInput/TextInput.stories.tsx +1 -1
- package/src/Labels/Label/Label.stories.tsx +1 -1
- package/src/Logos/RememberLogo/RememberLogo.stories.tsx +1 -1
- package/src/Logos/RememberMobileLogo/RememberMobileLogo.stories.tsx +1 -1
- package/src/Logos/RememberServiceLogo/RememberServiceLogo.stories.tsx +1 -1
- package/src/Logos/RememberSquareLogo/RememberSquareLogo.stories.tsx +1 -1
- package/src/Modals/Dialog/Dialog.stories.tsx +1 -1
- package/src/Paginations/CompactPagination/CompactPagination.stories.tsx +1 -1
- package/src/Paginations/Pagination/Pagination.stories.tsx +1 -1
|
@@ -18,7 +18,7 @@ var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWith
|
|
|
18
18
|
|
|
19
19
|
var _excluded = ["size", "backgroundColor", "border", "rounded", "imageUrl", "badges", "children"];
|
|
20
20
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
21
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t),
|
|
21
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
22
22
|
var Avatar = function Avatar(_ref, ref) {
|
|
23
23
|
var _ref$size = _ref.size,
|
|
24
24
|
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
@@ -3,14 +3,14 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
|
3
3
|
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
4
4
|
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
5
5
|
import { IconAvatarEmpty } from '@remember-web/icon';
|
|
6
|
-
import {
|
|
6
|
+
import { divider, bg200 } from '@remember-web/mixin';
|
|
7
7
|
import { forwardRef, useState } from 'react';
|
|
8
8
|
import { AvatarContainer, StyledAvatar, StyledBottomBadge, StyledNotificationBadge } from './styles.esm.js';
|
|
9
9
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
10
10
|
|
|
11
11
|
var _excluded = ["size", "backgroundColor", "border", "rounded", "imageUrl", "badges", "children"];
|
|
12
12
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
13
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t),
|
|
13
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
14
14
|
var Avatar = function Avatar(_ref, ref) {
|
|
15
15
|
var _ref$size = _ref.size,
|
|
16
16
|
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Avatars/Avatar/styles.ts"],"sourcesContent":["import {\n bg300,\n contents000,\n contents999,\n secondary100,\n} from '@remember-web/mixin';\nimport type { CSSProperties, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nexport const avatarSize = {\n xxxlarge: 72,\n xxlarge: 64,\n xlarge: 56,\n large: 48,\n medium: 40,\n small: 32,\n xsmall: 24,\n};\n\nexport const bottomBadgeSize = {\n xxxlarge: 18,\n xxlarge: 18,\n xlarge: 18,\n large: 18,\n medium: 16,\n small: 14,\n xsmall: 10,\n};\n\nexport const notificationBadgeSize = {\n xxxlarge: 6,\n xxlarge: 6,\n xlarge: 6,\n large: 6,\n medium: 4,\n small: 4,\n xsmall: 4,\n};\n\nexport const typographySize = {\n xxxlarge: 36,\n xxlarge: 32,\n xlarge: 24,\n large: 24,\n medium: 20,\n small: 16,\n xsmall: 12,\n};\n\nexport interface StyledAvatarProps {\n $size: keyof typeof avatarSize;\n $border?: {\n width?: NonNullable<CSSProperties['borderWidth']>;\n color?: NonNullable<CSSProperties['borderColor']>;\n };\n $rounded?: boolean;\n $imageUrl?: string;\n $backgroundColor?: CSSProperties['backgroundColor'];\n $badges?: {\n bottom?: { content: ReactNode; bgColor?: string };\n notification?: boolean;\n };\n}\n\nexport const AvatarContainer = styled.div`\n position: relative;\n display: inline-block;\n\n`;\n\nexport const StyledAvatar = styled.div<StyledAvatarProps>`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1 / 1;\n box-sizing: border-box;\n contain: strict;\n font-weight: 600;\n color: ${contents999};\n \n ${({ $size }) => css`\n width: ${avatarSize[$size]}px;\n max-width: ${avatarSize[$size]}px;\n max-height: ${avatarSize[$size]}px;\n font-size: ${typographySize[$size]}px;\n `}\n \n ${({ $border }) =>\n $border &&\n css`\n border: ${$border.width} solid ${$border.color};\n `}\n \n ${({ $rounded }) =>\n $rounded &&\n css`\n border-radius: 50%;\n `}\n \n ${({ $backgroundColor }) => css`\n background-color: ${$backgroundColor};\n `}\n \n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n \n ${({ $rounded }) =>\n $rounded &&\n css`\n border-radius: 50%;\n `}\n }\n`;\n\nexport const StyledBottomBadge = styled.div<{\n $size: keyof typeof bottomBadgeSize;\n $bgColor?: string;\n}>`\n position: absolute;\n bottom: 0;\n right: 0;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid ${bg300};\n overflow: hidden;\n \n ${({ $size, $bgColor = contents000 }) => css`\n width: ${bottomBadgeSize[$size]}px;\n height: ${bottomBadgeSize[$size]}px; \n background-color: ${$bgColor};\n `}\n`;\n\nexport const StyledNotificationBadge = styled.div<{\n $size: keyof typeof notificationBadgeSize;\n}>`\n position: absolute;\n top: 0;\n right: 0;\n border-radius: 50%;\n background-color: ${secondary100};\n \n ${({ $size }) => css`\n width: ${notificationBadgeSize[$size]}px;\n height: ${notificationBadgeSize[$size]}px;\n `}\n`;\n"],"names":["avatarSize","xxxlarge","xxlarge","xlarge","large","medium","small","xsmall","bottomBadgeSize","notificationBadgeSize","typographySize","AvatarContainer","styled","div","_templateObject","_taggedTemplateLiteral","StyledAvatar","_templateObject2","contents999","_ref","$size","css","_templateObject3","_ref2","$border","_templateObject4","width","color","_ref3","$rounded","_templateObject5","_ref4","$backgroundColor","_templateObject6","_ref5","_templateObject7","StyledBottomBadge","_templateObject8","bg300","_ref6","_ref6$$bgColor","$bgColor","contents000","_templateObject9","StyledNotificationBadge","_templateObject10","secondary100","_ref7","_templateObject11"],"mappings":";;;;;;;;;;;;AASO,IAAMA,UAAU,GAAG;AACxBC,EAAAA,QAAQ,EAAE,EAAE;AACZC,EAAAA,OAAO,EAAE,EAAE;AACXC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAE
|
|
1
|
+
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Avatars/Avatar/styles.ts"],"sourcesContent":["import {\n bg300,\n contents000,\n contents999,\n secondary100,\n} from '@remember-web/mixin';\nimport type { CSSProperties, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nexport const avatarSize = {\n xxxlarge: 72,\n xxlarge: 64,\n xlarge: 56,\n large: 48,\n medium: 40,\n small: 32,\n xsmall: 24,\n};\n\nexport const bottomBadgeSize = {\n xxxlarge: 18,\n xxlarge: 18,\n xlarge: 18,\n large: 18,\n medium: 16,\n small: 14,\n xsmall: 10,\n};\n\nexport const notificationBadgeSize = {\n xxxlarge: 6,\n xxlarge: 6,\n xlarge: 6,\n large: 6,\n medium: 4,\n small: 4,\n xsmall: 4,\n};\n\nexport const typographySize = {\n xxxlarge: 36,\n xxlarge: 32,\n xlarge: 24,\n large: 24,\n medium: 20,\n small: 16,\n xsmall: 12,\n};\n\nexport interface StyledAvatarProps {\n $size: keyof typeof avatarSize;\n $border?: {\n width?: NonNullable<CSSProperties['borderWidth']>;\n color?: NonNullable<CSSProperties['borderColor']>;\n };\n $rounded?: boolean;\n $imageUrl?: string;\n $backgroundColor?: CSSProperties['backgroundColor'];\n $badges?: {\n bottom?: { content: ReactNode; bgColor?: string };\n notification?: boolean;\n };\n}\n\nexport const AvatarContainer = styled.div`\n position: relative;\n display: inline-block;\n\n`;\n\nexport const StyledAvatar = styled.div<StyledAvatarProps>`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1 / 1;\n box-sizing: border-box;\n contain: strict;\n font-weight: 600;\n color: ${contents999};\n \n ${({ $size }) => css`\n width: ${avatarSize[$size]}px;\n max-width: ${avatarSize[$size]}px;\n max-height: ${avatarSize[$size]}px;\n font-size: ${typographySize[$size]}px;\n `}\n \n ${({ $border }) =>\n $border &&\n css`\n border: ${$border.width} solid ${$border.color};\n `}\n \n ${({ $rounded }) =>\n $rounded &&\n css`\n border-radius: 50%;\n `}\n \n ${({ $backgroundColor }) => css`\n background-color: ${$backgroundColor};\n `}\n \n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n \n ${({ $rounded }) =>\n $rounded &&\n css`\n border-radius: 50%;\n `}\n }\n`;\n\nexport const StyledBottomBadge = styled.div<{\n $size: keyof typeof bottomBadgeSize;\n $bgColor?: string;\n}>`\n position: absolute;\n bottom: 0;\n right: 0;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid ${bg300};\n overflow: hidden;\n \n ${({ $size, $bgColor = contents000 }) => css`\n width: ${bottomBadgeSize[$size]}px;\n height: ${bottomBadgeSize[$size]}px; \n background-color: ${$bgColor};\n `}\n`;\n\nexport const StyledNotificationBadge = styled.div<{\n $size: keyof typeof notificationBadgeSize;\n}>`\n position: absolute;\n top: 0;\n right: 0;\n border-radius: 50%;\n background-color: ${secondary100};\n \n ${({ $size }) => css`\n width: ${notificationBadgeSize[$size]}px;\n height: ${notificationBadgeSize[$size]}px;\n `}\n`;\n"],"names":["avatarSize","xxxlarge","xxlarge","xlarge","large","medium","small","xsmall","bottomBadgeSize","notificationBadgeSize","typographySize","AvatarContainer","styled","div","_templateObject","_taggedTemplateLiteral","StyledAvatar","_templateObject2","contents999","_ref","$size","css","_templateObject3","_ref2","$border","_templateObject4","width","color","_ref3","$rounded","_templateObject5","_ref4","$backgroundColor","_templateObject6","_ref5","_templateObject7","StyledBottomBadge","_templateObject8","bg300","_ref6","_ref6$$bgColor","$bgColor","contents000","_templateObject9","StyledNotificationBadge","_templateObject10","secondary100","_ref7","_templateObject11"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
|
|
2
|
-
import { contents999, bg300,
|
|
2
|
+
import { contents999, bg300, contents000, secondary100 } from '@remember-web/mixin';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
4
|
|
|
5
5
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Avatars/Avatar/styles.ts"],"sourcesContent":["import {\n bg300,\n contents000,\n contents999,\n secondary100,\n} from '@remember-web/mixin';\nimport type { CSSProperties, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nexport const avatarSize = {\n xxxlarge: 72,\n xxlarge: 64,\n xlarge: 56,\n large: 48,\n medium: 40,\n small: 32,\n xsmall: 24,\n};\n\nexport const bottomBadgeSize = {\n xxxlarge: 18,\n xxlarge: 18,\n xlarge: 18,\n large: 18,\n medium: 16,\n small: 14,\n xsmall: 10,\n};\n\nexport const notificationBadgeSize = {\n xxxlarge: 6,\n xxlarge: 6,\n xlarge: 6,\n large: 6,\n medium: 4,\n small: 4,\n xsmall: 4,\n};\n\nexport const typographySize = {\n xxxlarge: 36,\n xxlarge: 32,\n xlarge: 24,\n large: 24,\n medium: 20,\n small: 16,\n xsmall: 12,\n};\n\nexport interface StyledAvatarProps {\n $size: keyof typeof avatarSize;\n $border?: {\n width?: NonNullable<CSSProperties['borderWidth']>;\n color?: NonNullable<CSSProperties['borderColor']>;\n };\n $rounded?: boolean;\n $imageUrl?: string;\n $backgroundColor?: CSSProperties['backgroundColor'];\n $badges?: {\n bottom?: { content: ReactNode; bgColor?: string };\n notification?: boolean;\n };\n}\n\nexport const AvatarContainer = styled.div`\n position: relative;\n display: inline-block;\n\n`;\n\nexport const StyledAvatar = styled.div<StyledAvatarProps>`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1 / 1;\n box-sizing: border-box;\n contain: strict;\n font-weight: 600;\n color: ${contents999};\n \n ${({ $size }) => css`\n width: ${avatarSize[$size]}px;\n max-width: ${avatarSize[$size]}px;\n max-height: ${avatarSize[$size]}px;\n font-size: ${typographySize[$size]}px;\n `}\n \n ${({ $border }) =>\n $border &&\n css`\n border: ${$border.width} solid ${$border.color};\n `}\n \n ${({ $rounded }) =>\n $rounded &&\n css`\n border-radius: 50%;\n `}\n \n ${({ $backgroundColor }) => css`\n background-color: ${$backgroundColor};\n `}\n \n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n \n ${({ $rounded }) =>\n $rounded &&\n css`\n border-radius: 50%;\n `}\n }\n`;\n\nexport const StyledBottomBadge = styled.div<{\n $size: keyof typeof bottomBadgeSize;\n $bgColor?: string;\n}>`\n position: absolute;\n bottom: 0;\n right: 0;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid ${bg300};\n overflow: hidden;\n \n ${({ $size, $bgColor = contents000 }) => css`\n width: ${bottomBadgeSize[$size]}px;\n height: ${bottomBadgeSize[$size]}px; \n background-color: ${$bgColor};\n `}\n`;\n\nexport const StyledNotificationBadge = styled.div<{\n $size: keyof typeof notificationBadgeSize;\n}>`\n position: absolute;\n top: 0;\n right: 0;\n border-radius: 50%;\n background-color: ${secondary100};\n \n ${({ $size }) => css`\n width: ${notificationBadgeSize[$size]}px;\n height: ${notificationBadgeSize[$size]}px;\n `}\n`;\n"],"names":["avatarSize","xxxlarge","xxlarge","xlarge","large","medium","small","xsmall","bottomBadgeSize","notificationBadgeSize","typographySize","AvatarContainer","styled","div","_templateObject","_taggedTemplateLiteral","StyledAvatar","_templateObject2","contents999","_ref","$size","css","_templateObject3","_ref2","$border","_templateObject4","width","color","_ref3","$rounded","_templateObject5","_ref4","$backgroundColor","_templateObject6","_ref5","_templateObject7","StyledBottomBadge","_templateObject8","bg300","_ref6","_ref6$$bgColor","$bgColor","contents000","_templateObject9","StyledNotificationBadge","_templateObject10","secondary100","_ref7","_templateObject11"],"mappings":";;;;;AASO,IAAMA,UAAU,GAAG;AACxBC,EAAAA,QAAQ,EAAE,EAAE;AACZC,EAAAA,OAAO,EAAE,EAAE;AACXC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAE
|
|
1
|
+
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Avatars/Avatar/styles.ts"],"sourcesContent":["import {\n bg300,\n contents000,\n contents999,\n secondary100,\n} from '@remember-web/mixin';\nimport type { CSSProperties, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nexport const avatarSize = {\n xxxlarge: 72,\n xxlarge: 64,\n xlarge: 56,\n large: 48,\n medium: 40,\n small: 32,\n xsmall: 24,\n};\n\nexport const bottomBadgeSize = {\n xxxlarge: 18,\n xxlarge: 18,\n xlarge: 18,\n large: 18,\n medium: 16,\n small: 14,\n xsmall: 10,\n};\n\nexport const notificationBadgeSize = {\n xxxlarge: 6,\n xxlarge: 6,\n xlarge: 6,\n large: 6,\n medium: 4,\n small: 4,\n xsmall: 4,\n};\n\nexport const typographySize = {\n xxxlarge: 36,\n xxlarge: 32,\n xlarge: 24,\n large: 24,\n medium: 20,\n small: 16,\n xsmall: 12,\n};\n\nexport interface StyledAvatarProps {\n $size: keyof typeof avatarSize;\n $border?: {\n width?: NonNullable<CSSProperties['borderWidth']>;\n color?: NonNullable<CSSProperties['borderColor']>;\n };\n $rounded?: boolean;\n $imageUrl?: string;\n $backgroundColor?: CSSProperties['backgroundColor'];\n $badges?: {\n bottom?: { content: ReactNode; bgColor?: string };\n notification?: boolean;\n };\n}\n\nexport const AvatarContainer = styled.div`\n position: relative;\n display: inline-block;\n\n`;\n\nexport const StyledAvatar = styled.div<StyledAvatarProps>`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1 / 1;\n box-sizing: border-box;\n contain: strict;\n font-weight: 600;\n color: ${contents999};\n \n ${({ $size }) => css`\n width: ${avatarSize[$size]}px;\n max-width: ${avatarSize[$size]}px;\n max-height: ${avatarSize[$size]}px;\n font-size: ${typographySize[$size]}px;\n `}\n \n ${({ $border }) =>\n $border &&\n css`\n border: ${$border.width} solid ${$border.color};\n `}\n \n ${({ $rounded }) =>\n $rounded &&\n css`\n border-radius: 50%;\n `}\n \n ${({ $backgroundColor }) => css`\n background-color: ${$backgroundColor};\n `}\n \n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n \n ${({ $rounded }) =>\n $rounded &&\n css`\n border-radius: 50%;\n `}\n }\n`;\n\nexport const StyledBottomBadge = styled.div<{\n $size: keyof typeof bottomBadgeSize;\n $bgColor?: string;\n}>`\n position: absolute;\n bottom: 0;\n right: 0;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid ${bg300};\n overflow: hidden;\n \n ${({ $size, $bgColor = contents000 }) => css`\n width: ${bottomBadgeSize[$size]}px;\n height: ${bottomBadgeSize[$size]}px; \n background-color: ${$bgColor};\n `}\n`;\n\nexport const StyledNotificationBadge = styled.div<{\n $size: keyof typeof notificationBadgeSize;\n}>`\n position: absolute;\n top: 0;\n right: 0;\n border-radius: 50%;\n background-color: ${secondary100};\n \n ${({ $size }) => css`\n width: ${notificationBadgeSize[$size]}px;\n height: ${notificationBadgeSize[$size]}px;\n `}\n`;\n"],"names":["avatarSize","xxxlarge","xxlarge","xlarge","large","medium","small","xsmall","bottomBadgeSize","notificationBadgeSize","typographySize","AvatarContainer","styled","div","_templateObject","_taggedTemplateLiteral","StyledAvatar","_templateObject2","contents999","_ref","$size","css","_templateObject3","_ref2","$border","_templateObject4","width","color","_ref3","$rounded","_templateObject5","_ref4","$backgroundColor","_templateObject6","_ref5","_templateObject7","StyledBottomBadge","_templateObject8","bg300","_ref6","_ref6$$bgColor","$bgColor","contents000","_templateObject9","StyledNotificationBadge","_templateObject10","secondary100","_ref7","_templateObject11"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.cjs.js","sources":["../../../src/Badge/Badge.tsx"],"sourcesContent":["import { StyledBadge } from '@/Badge/style';\nimport type { BadgeValueProps } from '@/Badge/types';\nimport { getBadgeValue } from '@/Badge/utils';\n\nexport type BadgeProps = { value: BadgeValueProps };\n\nexport function Badge({ value }: BadgeProps) {\n return <StyledBadge>{getBadgeValue(value)}</StyledBadge>;\n}\n"],"names":["Badge","_ref","value","_jsx","StyledBadge","children","getBadgeValue"],"mappings":";;;;;;AAMO,SAASA,KAAKA,CAAAC,IAAA,EAAwB;AAAA,EAAA,IAArBC,KAAK,GAAAD,IAAA,CAALC,KAAK
|
|
1
|
+
{"version":3,"file":"Badge.cjs.js","sources":["../../../src/Badge/Badge.tsx"],"sourcesContent":["import { StyledBadge } from '@/Badge/style';\nimport type { BadgeValueProps } from '@/Badge/types';\nimport { getBadgeValue } from '@/Badge/utils';\n\nexport type BadgeProps = { value: BadgeValueProps };\n\nexport function Badge({ value }: BadgeProps) {\n return <StyledBadge>{getBadgeValue(value)}</StyledBadge>;\n}\n"],"names":["Badge","_ref","value","_jsx","StyledBadge","children","getBadgeValue"],"mappings":";;;;;;AAMO,SAASA,KAAKA,CAAAC,IAAA,EAAwB;AAAA,EAAA,IAArBC,KAAK,GAAAD,IAAA,CAALC,KAAK;EAC3B,oBAAOC,cAAA,CAACC,iBAAW,EAAA;IAAAC,QAAA,EAAEC,mBAAa,CAACJ,KAAK;AAAC,GAAc,CAAC;AAC1D;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.esm.js","sources":["../../../src/Badge/Badge.tsx"],"sourcesContent":["import { StyledBadge } from '@/Badge/style';\nimport type { BadgeValueProps } from '@/Badge/types';\nimport { getBadgeValue } from '@/Badge/utils';\n\nexport type BadgeProps = { value: BadgeValueProps };\n\nexport function Badge({ value }: BadgeProps) {\n return <StyledBadge>{getBadgeValue(value)}</StyledBadge>;\n}\n"],"names":["Badge","_ref","value","_jsx","StyledBadge","children","getBadgeValue"],"mappings":";;;;AAMO,SAASA,KAAKA,CAAAC,IAAA,EAAwB;AAAA,EAAA,IAArBC,KAAK,GAAAD,IAAA,CAALC,KAAK
|
|
1
|
+
{"version":3,"file":"Badge.esm.js","sources":["../../../src/Badge/Badge.tsx"],"sourcesContent":["import { StyledBadge } from '@/Badge/style';\nimport type { BadgeValueProps } from '@/Badge/types';\nimport { getBadgeValue } from '@/Badge/utils';\n\nexport type BadgeProps = { value: BadgeValueProps };\n\nexport function Badge({ value }: BadgeProps) {\n return <StyledBadge>{getBadgeValue(value)}</StyledBadge>;\n}\n"],"names":["Badge","_ref","value","_jsx","StyledBadge","children","getBadgeValue"],"mappings":";;;;AAMO,SAASA,KAAKA,CAAAC,IAAA,EAAwB;AAAA,EAAA,IAArBC,KAAK,GAAAD,IAAA,CAALC,KAAK;EAC3B,oBAAOC,GAAA,CAACC,WAAW,EAAA;IAAAC,QAAA,EAAEC,aAAa,CAACJ,KAAK;AAAC,GAAc,CAAC;AAC1D;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.cjs.js","sources":["../../../src/Badge/style.tsx"],"sourcesContent":["import {\n contents999,\n getTypographyStyles,\n secondary100,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\n/**\n * pseudo로 사용시 data-badge-value attribue가 필요합니다.\n */\nexport const badgeCss = css`\n ${getTypographyStyles('SubTitle2')}\n display: inline-block;\n box-sizing: border-box;\n line-height: 16px;\n min-height: 8px;\n background: ${secondary100};\n color: ${contents999};\n border-radius: 8px;\n padding: 1px 4px 0 4px;\n`;\n\n/**\n * @param pseudo - default: 'after'\n * @param top - default: 0\n * @param right - default: 0\n */\nexport const getBadgePseudoCss = (\n pseudo: 'after' | 'before' = 'after',\n { top = 0, right = 0 } = {}\n) => css`\n &[data-badge-value]::${pseudo} {\n ${badgeCss};\n content: attr(data-badge-value);\n position: absolute;\n top: ${top};\n right: ${right};\n transform: translate(50%, -50%);\n }\n`;\n\nexport const StyledBadge = styled.span`\n ${badgeCss};\n`;\n"],"names":["badgeCss","css","_templateObject","_taggedTemplateLiteral","getTypographyStyles","secondary100","contents999","getBadgePseudoCss","pseudo","arguments","length","undefined","_ref","_ref$top","top","_ref$right","right","_templateObject2","StyledBadge","styled","span","_templateObject3"],"mappings":";;;;;;;;;;;;;AAOA;AACA;AACA;IACaA,QAAQ,GAAGC,UAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,uCAAA,
|
|
1
|
+
{"version":3,"file":"style.cjs.js","sources":["../../../src/Badge/style.tsx"],"sourcesContent":["import {\n contents999,\n getTypographyStyles,\n secondary100,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\n/**\n * pseudo로 사용시 data-badge-value attribue가 필요합니다.\n */\nexport const badgeCss = css`\n ${getTypographyStyles('SubTitle2')}\n display: inline-block;\n box-sizing: border-box;\n line-height: 16px;\n min-height: 8px;\n background: ${secondary100};\n color: ${contents999};\n border-radius: 8px;\n padding: 1px 4px 0 4px;\n`;\n\n/**\n * @param pseudo - default: 'after'\n * @param top - default: 0\n * @param right - default: 0\n */\nexport const getBadgePseudoCss = (\n pseudo: 'after' | 'before' = 'after',\n { top = 0, right = 0 } = {}\n) => css`\n &[data-badge-value]::${pseudo} {\n ${badgeCss};\n content: attr(data-badge-value);\n position: absolute;\n top: ${top};\n right: ${right};\n transform: translate(50%, -50%);\n }\n`;\n\nexport const StyledBadge = styled.span`\n ${badgeCss};\n`;\n"],"names":["badgeCss","css","_templateObject","_taggedTemplateLiteral","getTypographyStyles","secondary100","contents999","getBadgePseudoCss","pseudo","arguments","length","undefined","_ref","_ref$top","top","_ref$right","right","_templateObject2","StyledBadge","styled","span","_templateObject3"],"mappings":";;;;;;;;;;;;;AAOA;AACA;AACA;IACaA,QAAQ,GAAGC,UAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,uCAAA,CAAA,CAAA,KAAA,EAAA,iHAAA,EAAA,cAAA,EAAA,uDAAA,CAAA,CAAA,CAAA,EACxBC,yBAAmB,CAAC,WAAW,CAAC,EAKnBC,kBAAY,EACjBC,iBAAW;;AAKtB;AACA;AACA;AACA;AACA;AACO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiBA,GAAA;AAAA,EAAA,IAC5BC,MAA0B,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,OAAO;AAAA,EAAA,IAAAG,IAAA,GAAAH,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GACX,EAAE;IAAAI,QAAA,GAAAD,IAAA,CAAzBE,GAAG;AAAHA,IAAAA,GAAG,GAAAD,QAAA,KAAA,MAAA,GAAG,CAAC,GAAAA,QAAA;IAAAE,UAAA,GAAAH,IAAA,CAAEI,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAA,MAAA,GAAG,CAAC,GAAAA,UAAA;AAAA,EAAA,OACjBd,UAAG,CAAAgB,gBAAA,KAAAA,gBAAA,GAAAd,uCAAA,CAAA,CAAA,2BAAA,EAAA,UAAA,EAAA,6EAAA,EAAA,gBAAA,EAAA,gDAAA,CAAA,CAAA,CAAA,EACiBK,MAAM,EACzBR,QAAQ,EAGHc,GAAG,EACDE,KAAK,CAAA;AAAA;AAKX,IAAME,WAAW,GAAGC,uBAAM,CAACC,IAAI,CAAAC,gBAAA,KAAAA,gBAAA,GAAAlB,uCAAA,CAAA,CAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA,EAClCH,QAAQ;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.esm.js","sources":["../../../src/Badge/style.tsx"],"sourcesContent":["import {\n contents999,\n getTypographyStyles,\n secondary100,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\n/**\n * pseudo로 사용시 data-badge-value attribue가 필요합니다.\n */\nexport const badgeCss = css`\n ${getTypographyStyles('SubTitle2')}\n display: inline-block;\n box-sizing: border-box;\n line-height: 16px;\n min-height: 8px;\n background: ${secondary100};\n color: ${contents999};\n border-radius: 8px;\n padding: 1px 4px 0 4px;\n`;\n\n/**\n * @param pseudo - default: 'after'\n * @param top - default: 0\n * @param right - default: 0\n */\nexport const getBadgePseudoCss = (\n pseudo: 'after' | 'before' = 'after',\n { top = 0, right = 0 } = {}\n) => css`\n &[data-badge-value]::${pseudo} {\n ${badgeCss};\n content: attr(data-badge-value);\n position: absolute;\n top: ${top};\n right: ${right};\n transform: translate(50%, -50%);\n }\n`;\n\nexport const StyledBadge = styled.span`\n ${badgeCss};\n`;\n"],"names":["badgeCss","css","_templateObject","_taggedTemplateLiteral","getTypographyStyles","secondary100","contents999","getBadgePseudoCss","pseudo","arguments","length","undefined","_ref","_ref$top","top","_ref$right","right","_templateObject2","StyledBadge","styled","span","_templateObject3"],"mappings":";;;;;;AAOA;AACA;AACA;IACaA,QAAQ,GAAGC,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,
|
|
1
|
+
{"version":3,"file":"style.esm.js","sources":["../../../src/Badge/style.tsx"],"sourcesContent":["import {\n contents999,\n getTypographyStyles,\n secondary100,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\n/**\n * pseudo로 사용시 data-badge-value attribue가 필요합니다.\n */\nexport const badgeCss = css`\n ${getTypographyStyles('SubTitle2')}\n display: inline-block;\n box-sizing: border-box;\n line-height: 16px;\n min-height: 8px;\n background: ${secondary100};\n color: ${contents999};\n border-radius: 8px;\n padding: 1px 4px 0 4px;\n`;\n\n/**\n * @param pseudo - default: 'after'\n * @param top - default: 0\n * @param right - default: 0\n */\nexport const getBadgePseudoCss = (\n pseudo: 'after' | 'before' = 'after',\n { top = 0, right = 0 } = {}\n) => css`\n &[data-badge-value]::${pseudo} {\n ${badgeCss};\n content: attr(data-badge-value);\n position: absolute;\n top: ${top};\n right: ${right};\n transform: translate(50%, -50%);\n }\n`;\n\nexport const StyledBadge = styled.span`\n ${badgeCss};\n`;\n"],"names":["badgeCss","css","_templateObject","_taggedTemplateLiteral","getTypographyStyles","secondary100","contents999","getBadgePseudoCss","pseudo","arguments","length","undefined","_ref","_ref$top","top","_ref$right","right","_templateObject2","StyledBadge","styled","span","_templateObject3"],"mappings":";;;;;;AAOA;AACA;AACA;IACaA,QAAQ,GAAGC,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,CAAA,CAAA,KAAA,EAAA,iHAAA,EAAA,cAAA,EAAA,uDAAA,CAAA,CAAA,CAAA,EACxBC,mBAAmB,CAAC,WAAW,CAAC,EAKnBC,YAAY,EACjBC,WAAW;;AAKtB;AACA;AACA;AACA;AACA;AACO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiBA,GAAA;AAAA,EAAA,IAC5BC,MAA0B,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,OAAO;AAAA,EAAA,IAAAG,IAAA,GAAAH,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GACX,EAAE;IAAAI,QAAA,GAAAD,IAAA,CAAzBE,GAAG;AAAHA,IAAAA,GAAG,GAAAD,QAAA,KAAA,MAAA,GAAG,CAAC,GAAAA,QAAA;IAAAE,UAAA,GAAAH,IAAA,CAAEI,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAA,MAAA,GAAG,CAAC,GAAAA,UAAA;AAAA,EAAA,OACjBd,GAAG,CAAAgB,gBAAA,KAAAA,gBAAA,GAAAd,sBAAA,CAAA,CAAA,2BAAA,EAAA,UAAA,EAAA,6EAAA,EAAA,gBAAA,EAAA,gDAAA,CAAA,CAAA,CAAA,EACiBK,MAAM,EACzBR,QAAQ,EAGHc,GAAG,EACDE,KAAK,CAAA;AAAA;AAKX,IAAME,WAAW,GAAGC,MAAM,CAACC,IAAI,CAAAC,gBAAA,KAAAA,gBAAA,GAAAlB,sBAAA,CAAA,CAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA,EAClCH,QAAQ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.cjs.js","sources":["../../../src/Badge/utils.ts"],"sourcesContent":["import { getBadgePseudoCss } from '@/Badge/style';\nimport type { BadgeValueProps } from '@/Badge/types';\n\nexport const getBadgeValue = (props: BadgeValueProps): string => {\n if (typeof props === 'string') {\n return props;\n }\n\n const { max = 99, current = 0 } = props;\n\n return current > max ? `${max}+` : `${current}`;\n};\n\nexport const badgePseudo = {\n getBadgePseudoCss,\n getBadgeAttr: (props: BadgeValueProps) => ({\n 'data-badge-value': getBadgeValue(props),\n }),\n};\n"],"names":["getBadgeValue","props","_props$max","max","_props$current","current","concat","badgePseudo","getBadgePseudoCss","getBadgeAttr"],"mappings":";;;;IAGaA,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAAsB,EAAa;AAC/D,EAAA,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;AAC7B,IAAA,OAAOA,KAAK
|
|
1
|
+
{"version":3,"file":"utils.cjs.js","sources":["../../../src/Badge/utils.ts"],"sourcesContent":["import { getBadgePseudoCss } from '@/Badge/style';\nimport type { BadgeValueProps } from '@/Badge/types';\n\nexport const getBadgeValue = (props: BadgeValueProps): string => {\n if (typeof props === 'string') {\n return props;\n }\n\n const { max = 99, current = 0 } = props;\n\n return current > max ? `${max}+` : `${current}`;\n};\n\nexport const badgePseudo = {\n getBadgePseudoCss,\n getBadgeAttr: (props: BadgeValueProps) => ({\n 'data-badge-value': getBadgeValue(props),\n }),\n};\n"],"names":["getBadgeValue","props","_props$max","max","_props$current","current","concat","badgePseudo","getBadgePseudoCss","getBadgeAttr"],"mappings":";;;;IAGaA,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAAsB,EAAa;AAC/D,EAAA,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;AAC7B,IAAA,OAAOA,KAAK;AACd;AAEA,EAAA,IAAAC,UAAA,GAAkCD,KAAK,CAA/BE,GAAG;AAAHA,IAAAA,GAAG,GAAAD,UAAA,KAAA,MAAA,GAAG,EAAE,GAAAA,UAAA;IAAAE,cAAA,GAAkBH,KAAK,CAArBI,OAAO;AAAPA,IAAAA,OAAO,GAAAD,cAAA,KAAA,MAAA,GAAG,CAAC,GAAAA,cAAA;EAE7B,OAAOC,OAAO,GAAGF,GAAG,GAAA,EAAA,CAAAG,MAAA,CAAMH,GAAG,EAAA,GAAA,CAAA,GAAA,EAAA,CAAAG,MAAA,CAASD,OAAO,CAAE;AACjD;AAEO,IAAME,WAAW,GAAG;AACzBC,EAAAA,iBAAiB,EAAjBA,uBAAiB;EACjBC,YAAY,EAAE,SAAAA,YAAAA,CAACR,KAAsB,EAAA;IAAA,OAAM;MACzC,kBAAkB,EAAED,aAAa,CAACC,KAAK;KACxC;AAAA;AACH;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.esm.js","sources":["../../../src/Badge/utils.ts"],"sourcesContent":["import { getBadgePseudoCss } from '@/Badge/style';\nimport type { BadgeValueProps } from '@/Badge/types';\n\nexport const getBadgeValue = (props: BadgeValueProps): string => {\n if (typeof props === 'string') {\n return props;\n }\n\n const { max = 99, current = 0 } = props;\n\n return current > max ? `${max}+` : `${current}`;\n};\n\nexport const badgePseudo = {\n getBadgePseudoCss,\n getBadgeAttr: (props: BadgeValueProps) => ({\n 'data-badge-value': getBadgeValue(props),\n }),\n};\n"],"names":["getBadgeValue","props","_props$max","max","_props$current","current","concat","badgePseudo","getBadgePseudoCss","getBadgeAttr"],"mappings":";;IAGaA,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAAsB,EAAa;AAC/D,EAAA,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;AAC7B,IAAA,OAAOA,KAAK
|
|
1
|
+
{"version":3,"file":"utils.esm.js","sources":["../../../src/Badge/utils.ts"],"sourcesContent":["import { getBadgePseudoCss } from '@/Badge/style';\nimport type { BadgeValueProps } from '@/Badge/types';\n\nexport const getBadgeValue = (props: BadgeValueProps): string => {\n if (typeof props === 'string') {\n return props;\n }\n\n const { max = 99, current = 0 } = props;\n\n return current > max ? `${max}+` : `${current}`;\n};\n\nexport const badgePseudo = {\n getBadgePseudoCss,\n getBadgeAttr: (props: BadgeValueProps) => ({\n 'data-badge-value': getBadgeValue(props),\n }),\n};\n"],"names":["getBadgeValue","props","_props$max","max","_props$current","current","concat","badgePseudo","getBadgePseudoCss","getBadgeAttr"],"mappings":";;IAGaA,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAAsB,EAAa;AAC/D,EAAA,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;AAC7B,IAAA,OAAOA,KAAK;AACd;AAEA,EAAA,IAAAC,UAAA,GAAkCD,KAAK,CAA/BE,GAAG;AAAHA,IAAAA,GAAG,GAAAD,UAAA,KAAA,MAAA,GAAG,EAAE,GAAAA,UAAA;IAAAE,cAAA,GAAkBH,KAAK,CAArBI,OAAO;AAAPA,IAAAA,OAAO,GAAAD,cAAA,KAAA,MAAA,GAAG,CAAC,GAAAA,cAAA;EAE7B,OAAOC,OAAO,GAAGF,GAAG,GAAA,EAAA,CAAAG,MAAA,CAAMH,GAAG,EAAA,GAAA,CAAA,GAAA,EAAA,CAAAG,MAAA,CAASD,OAAO,CAAE;AACjD;AAEO,IAAME,WAAW,GAAG;AACzBC,EAAAA,iBAAiB,EAAjBA,iBAAiB;EACjBC,YAAY,EAAE,SAAAA,YAAAA,CAACR,KAAsB,EAAA;IAAA,OAAM;MACzC,kBAAkB,EAAED,aAAa,CAACC,KAAK;KACxC;AAAA;AACH;;;;"}
|
|
@@ -4,28 +4,32 @@ var mixin = require('@remember-web/mixin');
|
|
|
4
4
|
|
|
5
5
|
var BUTTON_SIZES = {
|
|
6
6
|
small: {
|
|
7
|
-
typography: '
|
|
7
|
+
typography: 'UIBody3',
|
|
8
8
|
height: '32px',
|
|
9
9
|
minWidth: '68px',
|
|
10
|
-
padding: '0
|
|
10
|
+
padding: '0 12px',
|
|
11
|
+
radius: '6px'
|
|
11
12
|
},
|
|
12
13
|
medium: {
|
|
13
|
-
typography: '
|
|
14
|
-
height: '
|
|
14
|
+
typography: 'UIBody2',
|
|
15
|
+
height: '38px',
|
|
15
16
|
minWidth: '78px',
|
|
16
|
-
padding: '0
|
|
17
|
+
padding: '0 12px',
|
|
18
|
+
radius: '6px'
|
|
17
19
|
},
|
|
18
20
|
large: {
|
|
19
21
|
typography: 'UIBody2',
|
|
20
22
|
height: '44px',
|
|
21
23
|
minWidth: '108px',
|
|
22
|
-
padding: '0
|
|
24
|
+
padding: '0 16px',
|
|
25
|
+
radius: '6px'
|
|
23
26
|
},
|
|
24
27
|
xLarge: {
|
|
25
|
-
typography: '
|
|
28
|
+
typography: 'UIBody1',
|
|
26
29
|
height: '52px',
|
|
27
30
|
minWidth: '116px',
|
|
28
|
-
padding: '0 24px'
|
|
31
|
+
padding: '0 24px',
|
|
32
|
+
radius: '8px'
|
|
29
33
|
}
|
|
30
34
|
};
|
|
31
35
|
var BUTTON_COLORS = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.cjs.js","sources":["../../../../src/Buttons/Button/const.ts"],"sourcesContent":["import { contents000, contents300, contents999 } from '@remember-web/mixin';\n\nimport type { SpinnerSize } from '@/Common/Spinner/types';\n\nimport type { ButtonSize, ButtonVariant } from './types';\n\nexport const BUTTON_SIZES = {\n small: {\n typography: '
|
|
1
|
+
{"version":3,"file":"const.cjs.js","sources":["../../../../src/Buttons/Button/const.ts"],"sourcesContent":["import { contents000, contents300, contents999 } from '@remember-web/mixin';\n\nimport type { SpinnerSize } from '@/Common/Spinner/types';\n\nimport type { ButtonSize, ButtonVariant } from './types';\n\nexport const BUTTON_SIZES = {\n small: {\n typography: 'UIBody3',\n height: '32px',\n minWidth: '68px',\n padding: '0 12px',\n radius: '6px',\n },\n medium: {\n typography: 'UIBody2',\n height: '38px',\n minWidth: '78px',\n padding: '0 12px',\n radius: '6px',\n },\n large: {\n typography: 'UIBody2',\n height: '44px',\n minWidth: '108px',\n padding: '0 16px',\n radius: '6px',\n },\n xLarge: {\n typography: 'UIBody1',\n height: '52px',\n minWidth: '116px',\n padding: '0 24px',\n radius: '8px',\n },\n} as const satisfies Record<ButtonSize, unknown>;\n\nexport const BUTTON_COLORS = {\n primary: {\n backgroundColor: contents000,\n color: contents999,\n },\n outline: {\n backgroundColor: 'transparent',\n color: contents000,\n borderColor: contents300,\n },\n} as const satisfies Record<ButtonVariant, unknown>;\n\nexport const SPINNER_SIZE_MAP = {\n small: 'small',\n medium: 'small',\n large: 'medium',\n xLarge: 'medium',\n} as const satisfies Record<ButtonSize, SpinnerSize>;\n\nexport const ICON_GAP_MAP = {\n small: '4px',\n medium: '4px',\n large: '8px',\n xLarge: '8px',\n} as const satisfies Record<ButtonSize, string>;\n"],"names":["BUTTON_SIZES","small","typography","height","minWidth","padding","radius","medium","large","xLarge","BUTTON_COLORS","primary","backgroundColor","contents000","color","contents999","outline","borderColor","contents300","SPINNER_SIZE_MAP","ICON_GAP_MAP"],"mappings":";;;;AAMO,IAAMA,YAAY,GAAG;AAC1BC,EAAAA,KAAK,EAAE;AACLC,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,MAAM;AAChBC,IAAAA,OAAO,EAAE,QAAQ;AACjBC,IAAAA,MAAM,EAAE;GACT;AACDC,EAAAA,MAAM,EAAE;AACNL,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,MAAM;AAChBC,IAAAA,OAAO,EAAE,QAAQ;AACjBC,IAAAA,MAAM,EAAE;GACT;AACDE,EAAAA,KAAK,EAAE;AACLN,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,OAAO;AACjBC,IAAAA,OAAO,EAAE,QAAQ;AACjBC,IAAAA,MAAM,EAAE;GACT;AACDG,EAAAA,MAAM,EAAE;AACNP,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,OAAO;AACjBC,IAAAA,OAAO,EAAE,QAAQ;AACjBC,IAAAA,MAAM,EAAE;AACV;AACF;AAEO,IAAMI,aAAa,GAAG;AAC3BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,eAAe,EAAEC,iBAAW;AAC5BC,IAAAA,KAAK,EAAEC;GACR;AACDC,EAAAA,OAAO,EAAE;AACPJ,IAAAA,eAAe,EAAE,aAAa;AAC9BE,IAAAA,KAAK,EAAED,iBAAW;AAClBI,IAAAA,WAAW,EAAEC;AACf;AACF;AAEO,IAAMC,gBAAgB,GAAG;AAC9BlB,EAAAA,KAAK,EAAE,OAAO;AACdM,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,QAAQ;AACfC,EAAAA,MAAM,EAAE;AACV;AAEO,IAAMW,YAAY,GAAG;AAC1BnB,EAAAA,KAAK,EAAE,KAAK;AACZM,EAAAA,MAAM,EAAE,KAAK;AACbC,EAAAA,KAAK,EAAE,KAAK;AACZC,EAAAA,MAAM,EAAE;AACV;;;;;;;"}
|
|
@@ -1,27 +1,31 @@
|
|
|
1
1
|
export declare const BUTTON_SIZES: {
|
|
2
2
|
readonly small: {
|
|
3
|
-
readonly typography: "
|
|
3
|
+
readonly typography: "UIBody3";
|
|
4
4
|
readonly height: "32px";
|
|
5
5
|
readonly minWidth: "68px";
|
|
6
|
-
readonly padding: "0
|
|
6
|
+
readonly padding: "0 12px";
|
|
7
|
+
readonly radius: "6px";
|
|
7
8
|
};
|
|
8
9
|
readonly medium: {
|
|
9
|
-
readonly typography: "
|
|
10
|
-
readonly height: "
|
|
10
|
+
readonly typography: "UIBody2";
|
|
11
|
+
readonly height: "38px";
|
|
11
12
|
readonly minWidth: "78px";
|
|
12
|
-
readonly padding: "0
|
|
13
|
+
readonly padding: "0 12px";
|
|
14
|
+
readonly radius: "6px";
|
|
13
15
|
};
|
|
14
16
|
readonly large: {
|
|
15
17
|
readonly typography: "UIBody2";
|
|
16
18
|
readonly height: "44px";
|
|
17
19
|
readonly minWidth: "108px";
|
|
18
|
-
readonly padding: "0
|
|
20
|
+
readonly padding: "0 16px";
|
|
21
|
+
readonly radius: "6px";
|
|
19
22
|
};
|
|
20
23
|
readonly xLarge: {
|
|
21
|
-
readonly typography: "
|
|
24
|
+
readonly typography: "UIBody1";
|
|
22
25
|
readonly height: "52px";
|
|
23
26
|
readonly minWidth: "116px";
|
|
24
27
|
readonly padding: "0 24px";
|
|
28
|
+
readonly radius: "8px";
|
|
25
29
|
};
|
|
26
30
|
};
|
|
27
31
|
export declare const BUTTON_COLORS: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../../src/Buttons/Button/const.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY
|
|
1
|
+
{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../../src/Buttons/Button/const.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BuB,CAAC;AAEjD,eAAO,MAAM,aAAa;;;;;;;;;;CAUyB,CAAC;AAEpD,eAAO,MAAM,gBAAgB;;;;;CAKuB,CAAC;AAErD,eAAO,MAAM,YAAY;;;;;CAKsB,CAAC"}
|
|
@@ -1,29 +1,33 @@
|
|
|
1
|
-
import { contents000, contents999
|
|
1
|
+
import { contents300, contents000, contents999 } from '@remember-web/mixin';
|
|
2
2
|
|
|
3
3
|
var BUTTON_SIZES = {
|
|
4
4
|
small: {
|
|
5
|
-
typography: '
|
|
5
|
+
typography: 'UIBody3',
|
|
6
6
|
height: '32px',
|
|
7
7
|
minWidth: '68px',
|
|
8
|
-
padding: '0
|
|
8
|
+
padding: '0 12px',
|
|
9
|
+
radius: '6px'
|
|
9
10
|
},
|
|
10
11
|
medium: {
|
|
11
|
-
typography: '
|
|
12
|
-
height: '
|
|
12
|
+
typography: 'UIBody2',
|
|
13
|
+
height: '38px',
|
|
13
14
|
minWidth: '78px',
|
|
14
|
-
padding: '0
|
|
15
|
+
padding: '0 12px',
|
|
16
|
+
radius: '6px'
|
|
15
17
|
},
|
|
16
18
|
large: {
|
|
17
19
|
typography: 'UIBody2',
|
|
18
20
|
height: '44px',
|
|
19
21
|
minWidth: '108px',
|
|
20
|
-
padding: '0
|
|
22
|
+
padding: '0 16px',
|
|
23
|
+
radius: '6px'
|
|
21
24
|
},
|
|
22
25
|
xLarge: {
|
|
23
|
-
typography: '
|
|
26
|
+
typography: 'UIBody1',
|
|
24
27
|
height: '52px',
|
|
25
28
|
minWidth: '116px',
|
|
26
|
-
padding: '0 24px'
|
|
29
|
+
padding: '0 24px',
|
|
30
|
+
radius: '8px'
|
|
27
31
|
}
|
|
28
32
|
};
|
|
29
33
|
var BUTTON_COLORS = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.esm.js","sources":["../../../../src/Buttons/Button/const.ts"],"sourcesContent":["import { contents000, contents300, contents999 } from '@remember-web/mixin';\n\nimport type { SpinnerSize } from '@/Common/Spinner/types';\n\nimport type { ButtonSize, ButtonVariant } from './types';\n\nexport const BUTTON_SIZES = {\n small: {\n typography: '
|
|
1
|
+
{"version":3,"file":"const.esm.js","sources":["../../../../src/Buttons/Button/const.ts"],"sourcesContent":["import { contents000, contents300, contents999 } from '@remember-web/mixin';\n\nimport type { SpinnerSize } from '@/Common/Spinner/types';\n\nimport type { ButtonSize, ButtonVariant } from './types';\n\nexport const BUTTON_SIZES = {\n small: {\n typography: 'UIBody3',\n height: '32px',\n minWidth: '68px',\n padding: '0 12px',\n radius: '6px',\n },\n medium: {\n typography: 'UIBody2',\n height: '38px',\n minWidth: '78px',\n padding: '0 12px',\n radius: '6px',\n },\n large: {\n typography: 'UIBody2',\n height: '44px',\n minWidth: '108px',\n padding: '0 16px',\n radius: '6px',\n },\n xLarge: {\n typography: 'UIBody1',\n height: '52px',\n minWidth: '116px',\n padding: '0 24px',\n radius: '8px',\n },\n} as const satisfies Record<ButtonSize, unknown>;\n\nexport const BUTTON_COLORS = {\n primary: {\n backgroundColor: contents000,\n color: contents999,\n },\n outline: {\n backgroundColor: 'transparent',\n color: contents000,\n borderColor: contents300,\n },\n} as const satisfies Record<ButtonVariant, unknown>;\n\nexport const SPINNER_SIZE_MAP = {\n small: 'small',\n medium: 'small',\n large: 'medium',\n xLarge: 'medium',\n} as const satisfies Record<ButtonSize, SpinnerSize>;\n\nexport const ICON_GAP_MAP = {\n small: '4px',\n medium: '4px',\n large: '8px',\n xLarge: '8px',\n} as const satisfies Record<ButtonSize, string>;\n"],"names":["BUTTON_SIZES","small","typography","height","minWidth","padding","radius","medium","large","xLarge","BUTTON_COLORS","primary","backgroundColor","contents000","color","contents999","outline","borderColor","contents300","SPINNER_SIZE_MAP","ICON_GAP_MAP"],"mappings":";;AAMO,IAAMA,YAAY,GAAG;AAC1BC,EAAAA,KAAK,EAAE;AACLC,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,MAAM;AAChBC,IAAAA,OAAO,EAAE,QAAQ;AACjBC,IAAAA,MAAM,EAAE;GACT;AACDC,EAAAA,MAAM,EAAE;AACNL,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,MAAM;AAChBC,IAAAA,OAAO,EAAE,QAAQ;AACjBC,IAAAA,MAAM,EAAE;GACT;AACDE,EAAAA,KAAK,EAAE;AACLN,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,OAAO;AACjBC,IAAAA,OAAO,EAAE,QAAQ;AACjBC,IAAAA,MAAM,EAAE;GACT;AACDG,EAAAA,MAAM,EAAE;AACNP,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,OAAO;AACjBC,IAAAA,OAAO,EAAE,QAAQ;AACjBC,IAAAA,MAAM,EAAE;AACV;AACF;AAEO,IAAMI,aAAa,GAAG;AAC3BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,eAAe,EAAEC,WAAW;AAC5BC,IAAAA,KAAK,EAAEC;GACR;AACDC,EAAAA,OAAO,EAAE;AACPJ,IAAAA,eAAe,EAAE,aAAa;AAC9BE,IAAAA,KAAK,EAAED,WAAW;AAClBI,IAAAA,WAAW,EAAEC;AACf;AACF;AAEO,IAAMC,gBAAgB,GAAG;AAC9BlB,EAAAA,KAAK,EAAE,OAAO;AACdM,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,QAAQ;AACfC,EAAAA,MAAM,EAAE;AACV;AAEO,IAAMW,YAAY,GAAG;AAC1BnB,EAAAA,KAAK,EAAE,KAAK;AACZM,EAAAA,MAAM,EAAE,KAAK;AACbC,EAAAA,KAAK,EAAE,KAAK;AACZC,EAAAA,MAAM,EAAE;AACV;;;;"}
|
|
@@ -21,7 +21,7 @@ var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWith
|
|
|
21
21
|
|
|
22
22
|
var _excluded = ["children", "color", "size", "variant", "layout", "isLoading", "filled", "icon", "iconPosition"];
|
|
23
23
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
24
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t),
|
|
24
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
25
25
|
var Button = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
|
|
26
26
|
var children = _ref.children,
|
|
27
27
|
color = _ref.color,
|
|
@@ -14,7 +14,7 @@ import { StyledButton } from './styles.esm.js';
|
|
|
14
14
|
|
|
15
15
|
var _excluded = ["children", "color", "size", "variant", "layout", "isLoading", "filled", "icon", "iconPosition"];
|
|
16
16
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
17
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t),
|
|
17
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
18
18
|
var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
19
19
|
var children = _ref.children,
|
|
20
20
|
color = _ref.color,
|
|
@@ -22,7 +22,7 @@ var StyledButton = styled__default.default.button(function (_ref) {
|
|
|
22
22
|
$color = _ref.$color,
|
|
23
23
|
props = _objectWithoutProperties__default.default(_ref, _excluded);
|
|
24
24
|
return [// 공용 스타일
|
|
25
|
-
styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n all: unset;\n appearance: none;\n\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n -webkit-user-select: none;\n\n display: ", ";\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n gap: ", ";\n\n ", "\n text-align: center;\n\n width: fit-content;\n ", "\n min-width: ", ";\n height: ", ";\n padding: ", ";\n border-radius:
|
|
25
|
+
styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n all: unset;\n appearance: none;\n\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n -webkit-user-select: none;\n\n display: ", ";\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n gap: ", ";\n\n ", "\n text-align: center;\n\n width: fit-content;\n ", "\n min-width: ", ";\n height: ", ";\n padding: ", ";\n border-radius: ", ";\n\n color: ", ";\n\n &:focus-visible:not(:disabled) {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n\n &:disabled {\n cursor: not-allowed;\n\n &::before {\n display: none;\n }\n }\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ", ";\n opacity: 0;\n pointer-events: none;\n\n transition: opacity 0.2s;\n }\n @media (hover: hover) {\n &:hover::before {\n opacity: 0.1;\n }\n }\n &:active::before {\n opacity: 0.2;\n }\n "])), $layout === 'inline' ? 'inline-flex' : 'flex', _const.ICON_GAP_MAP[$size], mixin.getTypographyStyles(_const.BUTTON_SIZES[$size].typography), $layout === 'fullBlock' && 'width: 100%;', _const.BUTTON_SIZES[$size].minWidth, _const.BUTTON_SIZES[$size].height, _const.BUTTON_SIZES[$size].padding, _const.BUTTON_SIZES[$size].radius, (_ref2 = props.$variant.startsWith('outline') ? $color : null) !== null && _ref2 !== void 0 ? _ref2 : _const.BUTTON_COLORS[props.$variant].color, mixin.primary100, mixin.primary200),
|
|
26
26
|
// primary 스타일
|
|
27
27
|
props.$variant === 'primary' && styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n background-color: ", ";\n &:disabled {\n background-color: ", ";\n }\n &::before {\n background-color: ", ";\n }\n "])), $color !== null && $color !== void 0 ? $color : _const.BUTTON_COLORS[props.$variant].backgroundColor, mixin.disabled, mixin.primary200),
|
|
28
28
|
// outline 스타일
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Buttons/Button/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n bg100,\n disabled,\n getTypographyStyles,\n primary100,\n primary200,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\nimport { BUTTON_COLORS, BUTTON_SIZES, ICON_GAP_MAP } from './const';\nimport type { ButtonStyleProps } from './types';\n\nexport const StyledButton = styled.button<ButtonStyleProps>(\n ({ $size, $layout, $color, ...props }) => [\n // 공용 스타일\n css`\n all: unset;\n appearance: none;\n\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n -webkit-user-select: none;\n\n display: ${$layout === 'inline' ? 'inline-flex' : 'flex'};\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n gap: ${ICON_GAP_MAP[$size]};\n\n ${getTypographyStyles(BUTTON_SIZES[$size].typography)}\n text-align: center;\n\n width: fit-content;\n ${$layout === 'fullBlock' && 'width: 100%;'}\n min-width: ${BUTTON_SIZES[$size].minWidth};\n height: ${BUTTON_SIZES[$size].height};\n padding: ${BUTTON_SIZES[$size].padding};\n border-radius:
|
|
1
|
+
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Buttons/Button/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n bg100,\n disabled,\n getTypographyStyles,\n primary100,\n primary200,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\nimport { BUTTON_COLORS, BUTTON_SIZES, ICON_GAP_MAP } from './const';\nimport type { ButtonStyleProps } from './types';\n\nexport const StyledButton = styled.button<ButtonStyleProps>(\n ({ $size, $layout, $color, ...props }) => [\n // 공용 스타일\n css`\n all: unset;\n appearance: none;\n\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n -webkit-user-select: none;\n\n display: ${$layout === 'inline' ? 'inline-flex' : 'flex'};\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n gap: ${ICON_GAP_MAP[$size]};\n\n ${getTypographyStyles(BUTTON_SIZES[$size].typography)}\n text-align: center;\n\n width: fit-content;\n ${$layout === 'fullBlock' && 'width: 100%;'}\n min-width: ${BUTTON_SIZES[$size].minWidth};\n height: ${BUTTON_SIZES[$size].height};\n padding: ${BUTTON_SIZES[$size].padding};\n border-radius: ${BUTTON_SIZES[$size].radius};\n\n color: ${\n (props.$variant.startsWith('outline') ? $color : null) ??\n BUTTON_COLORS[props.$variant].color\n };\n\n &:focus-visible:not(:disabled) {\n outline: 2px solid ${primary100};\n outline-offset: 2px;\n }\n\n &:disabled {\n cursor: not-allowed;\n\n &::before {\n display: none;\n }\n }\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ${primary200};\n opacity: 0;\n pointer-events: none;\n\n transition: opacity 0.2s;\n }\n @media (hover: hover) {\n &:hover::before {\n opacity: 0.1;\n }\n }\n &:active::before {\n opacity: 0.2;\n }\n `,\n\n // primary 스타일\n props.$variant === 'primary' &&\n css`\n background-color: ${\n $color ?? BUTTON_COLORS[props.$variant].backgroundColor\n };\n &:disabled {\n background-color: ${disabled};\n }\n &::before {\n background-color: ${primary200};\n }\n `,\n\n // outline 스타일\n props.$variant === 'outline' &&\n css`\n background-color: ${\n props.$filled ? bg100 : BUTTON_COLORS[props.$variant].backgroundColor\n };\n border: 1px solid ${$color ?? BUTTON_COLORS[props.$variant].borderColor};\n &:disabled {\n border-color: ${disabled};\n color: ${disabled};\n }\n &::before {\n background-color: ${$color ?? primary100};\n }\n `,\n ]\n);\n"],"names":["props"],"mappings":";;;;;;;;;;;;;;;AAAa;AAAA;AAcN;AACL;AAAA;;;AAA8BA;AAAK;;AAuEjC;AACAA;AAaA;;AAeD;;"}
|
|
@@ -14,7 +14,7 @@ var StyledButton = styled.button(function (_ref) {
|
|
|
14
14
|
$color = _ref.$color,
|
|
15
15
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
16
16
|
return [// 공용 스타일
|
|
17
|
-
css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n all: unset;\n appearance: none;\n\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n -webkit-user-select: none;\n\n display: ", ";\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n gap: ", ";\n\n ", "\n text-align: center;\n\n width: fit-content;\n ", "\n min-width: ", ";\n height: ", ";\n padding: ", ";\n border-radius:
|
|
17
|
+
css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n all: unset;\n appearance: none;\n\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n -webkit-user-select: none;\n\n display: ", ";\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n gap: ", ";\n\n ", "\n text-align: center;\n\n width: fit-content;\n ", "\n min-width: ", ";\n height: ", ";\n padding: ", ";\n border-radius: ", ";\n\n color: ", ";\n\n &:focus-visible:not(:disabled) {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n\n &:disabled {\n cursor: not-allowed;\n\n &::before {\n display: none;\n }\n }\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ", ";\n opacity: 0;\n pointer-events: none;\n\n transition: opacity 0.2s;\n }\n @media (hover: hover) {\n &:hover::before {\n opacity: 0.1;\n }\n }\n &:active::before {\n opacity: 0.2;\n }\n "])), $layout === 'inline' ? 'inline-flex' : 'flex', ICON_GAP_MAP[$size], getTypographyStyles(BUTTON_SIZES[$size].typography), $layout === 'fullBlock' && 'width: 100%;', BUTTON_SIZES[$size].minWidth, BUTTON_SIZES[$size].height, BUTTON_SIZES[$size].padding, BUTTON_SIZES[$size].radius, (_ref2 = props.$variant.startsWith('outline') ? $color : null) !== null && _ref2 !== void 0 ? _ref2 : BUTTON_COLORS[props.$variant].color, primary100, primary200),
|
|
18
18
|
// primary 스타일
|
|
19
19
|
props.$variant === 'primary' && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background-color: ", ";\n &:disabled {\n background-color: ", ";\n }\n &::before {\n background-color: ", ";\n }\n "])), $color !== null && $color !== void 0 ? $color : BUTTON_COLORS[props.$variant].backgroundColor, disabled, primary200),
|
|
20
20
|
// outline 스타일
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Buttons/Button/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n bg100,\n disabled,\n getTypographyStyles,\n primary100,\n primary200,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\nimport { BUTTON_COLORS, BUTTON_SIZES, ICON_GAP_MAP } from './const';\nimport type { ButtonStyleProps } from './types';\n\nexport const StyledButton = styled.button<ButtonStyleProps>(\n ({ $size, $layout, $color, ...props }) => [\n // 공용 스타일\n css`\n all: unset;\n appearance: none;\n\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n -webkit-user-select: none;\n\n display: ${$layout === 'inline' ? 'inline-flex' : 'flex'};\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n gap: ${ICON_GAP_MAP[$size]};\n\n ${getTypographyStyles(BUTTON_SIZES[$size].typography)}\n text-align: center;\n\n width: fit-content;\n ${$layout === 'fullBlock' && 'width: 100%;'}\n min-width: ${BUTTON_SIZES[$size].minWidth};\n height: ${BUTTON_SIZES[$size].height};\n padding: ${BUTTON_SIZES[$size].padding};\n border-radius:
|
|
1
|
+
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Buttons/Button/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n bg100,\n disabled,\n getTypographyStyles,\n primary100,\n primary200,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\nimport { BUTTON_COLORS, BUTTON_SIZES, ICON_GAP_MAP } from './const';\nimport type { ButtonStyleProps } from './types';\n\nexport const StyledButton = styled.button<ButtonStyleProps>(\n ({ $size, $layout, $color, ...props }) => [\n // 공용 스타일\n css`\n all: unset;\n appearance: none;\n\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n -webkit-user-select: none;\n\n display: ${$layout === 'inline' ? 'inline-flex' : 'flex'};\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n gap: ${ICON_GAP_MAP[$size]};\n\n ${getTypographyStyles(BUTTON_SIZES[$size].typography)}\n text-align: center;\n\n width: fit-content;\n ${$layout === 'fullBlock' && 'width: 100%;'}\n min-width: ${BUTTON_SIZES[$size].minWidth};\n height: ${BUTTON_SIZES[$size].height};\n padding: ${BUTTON_SIZES[$size].padding};\n border-radius: ${BUTTON_SIZES[$size].radius};\n\n color: ${\n (props.$variant.startsWith('outline') ? $color : null) ??\n BUTTON_COLORS[props.$variant].color\n };\n\n &:focus-visible:not(:disabled) {\n outline: 2px solid ${primary100};\n outline-offset: 2px;\n }\n\n &:disabled {\n cursor: not-allowed;\n\n &::before {\n display: none;\n }\n }\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ${primary200};\n opacity: 0;\n pointer-events: none;\n\n transition: opacity 0.2s;\n }\n @media (hover: hover) {\n &:hover::before {\n opacity: 0.1;\n }\n }\n &:active::before {\n opacity: 0.2;\n }\n `,\n\n // primary 스타일\n props.$variant === 'primary' &&\n css`\n background-color: ${\n $color ?? BUTTON_COLORS[props.$variant].backgroundColor\n };\n &:disabled {\n background-color: ${disabled};\n }\n &::before {\n background-color: ${primary200};\n }\n `,\n\n // outline 스타일\n props.$variant === 'outline' &&\n css`\n background-color: ${\n props.$filled ? bg100 : BUTTON_COLORS[props.$variant].backgroundColor\n };\n border: 1px solid ${$color ?? BUTTON_COLORS[props.$variant].borderColor};\n &:disabled {\n border-color: ${disabled};\n color: ${disabled};\n }\n &::before {\n background-color: ${$color ?? primary100};\n }\n `,\n ]\n);\n"],"names":["props"],"mappings":";;;;;;;AAAa;AAAA;AAcN;AACL;AAAA;;;AAA8BA;AAAK;;AAuEjC;AACAA;AAaA;;AAeD;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.cjs.js","sources":["../../../../src/Chips/Chip/const.ts"],"sourcesContent":["import {\n bg100,\n bg200,\n bg300,\n contents000,\n contents100,\n contents150,\n contents200,\n contents300,\n contents999,\n primary100,\n} from '@remember-web/mixin';\nimport type { ChipSize, ChipSizeStyle, ChipVariant, ChipVariantStyleMap } from './types';\n\n\n\nconst SMALL_WITH_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n typography: 'Caption1',\n padding: '6px 10px',\n height: '28px',\n};\n\nconst SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n typography: 'Caption1',\n padding: '7px 11px',\n height: '28px',\n};\n\nconst MEDIUM_WITH_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n typography: 'UIBody3',\n padding: '5px 12px',\n height: '30px',\n};\n\nconst MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n typography: 'UIBody3',\n padding: '6px 14px',\n height: '30px',\n};\n\nexport const CHIP_SIZE_STYLE = {\n small: {\n filled: SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE,\n outline: SMALL_WITH_BORDER_CHIP_SIZE_STYE,\n dashedLine: SMALL_WITH_BORDER_CHIP_SIZE_STYE,\n },\n medium: {\n filled: MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE,\n outline: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,\n dashedLine: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,\n },\n} as const satisfies Record<ChipSize, Record<ChipVariant, ChipSizeStyle>>;\n\nexport const CHIP_VARIANT_STYLE: ChipVariantStyleMap = {\n filled: {\n default: {\n backgroundColor: bg200,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n },\n hover: {\n backgroundColor: bg200,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n },\n disabled: {\n backgroundColor: bg300,\n color: contents300,\n leftIconColor: contents300,\n deleteButtonColor: contents300,\n },\n selected: {\n backgroundColor: primary100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n },\n selectedHover: {\n backgroundColor: contents100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n },\n },\n\n outline: {\n default: {\n backgroundColor: bg100,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n border: `1px solid ${contents150}`,\n },\n hover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n border: `1px solid ${contents100}`,\n },\n disabled: {\n backgroundColor: bg100,\n color: contents200,\n leftIconColor: contents200,\n deleteButtonColor: contents200,\n border: `1px solid ${contents200}`,\n },\n selected: {\n backgroundColor: primary100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n border: '1px solid transparent',\n },\n selectedHover: {\n backgroundColor: contents100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n border: '1px solid transparent',\n },\n },\n\n dashedLine: {\n default: {\n backgroundColor: bg100,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n border: `1px dashed ${contents150}`,\n },\n hover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n border: `1px dashed ${contents100}`,\n },\n disabled: {\n backgroundColor: bg100,\n color: contents200,\n leftIconColor: contents200,\n deleteButtonColor: contents200,\n border: `1px dashed ${contents200}`,\n },\n selected: {\n backgroundColor: bg100,\n color: contents000,\n leftIconColor: contents000,\n deleteButtonColor: contents000,\n border: `1px solid ${primary100}`,\n },\n selectedHover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents100,\n border: `1px solid ${contents100}`,\n },\n },\n} as const satisfies Record<ChipVariant, unknown>;\n"],"names":["SMALL_WITH_BORDER_CHIP_SIZE_STYE","typography","padding","height","SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE","MEDIUM_WITH_BORDER_CHIP_SIZE_STYE","MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE","CHIP_SIZE_STYLE","small","filled","outline","dashedLine","medium","CHIP_VARIANT_STYLE","backgroundColor","bg200","color","contents150","leftIconColor","deleteButtonColor","contents200","hover","contents100","disabled","bg300","contents300","selected","primary100","contents999","selectedHover","bg100","border","concat","contents000"],"mappings":";;;;AAgBA,IAAMA,gCAAgD,GAAG;AACvDC,EAAAA,UAAU,EAAE,UAAU;AACtBC,EAAAA,OAAO,EAAE,UAAU;AACnBC,EAAAA,MAAM,EAAE
|
|
1
|
+
{"version":3,"file":"const.cjs.js","sources":["../../../../src/Chips/Chip/const.ts"],"sourcesContent":["import {\n bg100,\n bg200,\n bg300,\n contents000,\n contents100,\n contents150,\n contents200,\n contents300,\n contents999,\n primary100,\n} from '@remember-web/mixin';\nimport type { ChipSize, ChipSizeStyle, ChipVariant, ChipVariantStyleMap } from './types';\n\n\n\nconst SMALL_WITH_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n typography: 'Caption1',\n padding: '6px 10px',\n height: '28px',\n};\n\nconst SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n typography: 'Caption1',\n padding: '7px 11px',\n height: '28px',\n};\n\nconst MEDIUM_WITH_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n typography: 'UIBody3',\n padding: '5px 12px',\n height: '30px',\n};\n\nconst MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n typography: 'UIBody3',\n padding: '6px 14px',\n height: '30px',\n};\n\nexport const CHIP_SIZE_STYLE = {\n small: {\n filled: SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE,\n outline: SMALL_WITH_BORDER_CHIP_SIZE_STYE,\n dashedLine: SMALL_WITH_BORDER_CHIP_SIZE_STYE,\n },\n medium: {\n filled: MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE,\n outline: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,\n dashedLine: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,\n },\n} as const satisfies Record<ChipSize, Record<ChipVariant, ChipSizeStyle>>;\n\nexport const CHIP_VARIANT_STYLE: ChipVariantStyleMap = {\n filled: {\n default: {\n backgroundColor: bg200,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n },\n hover: {\n backgroundColor: bg200,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n },\n disabled: {\n backgroundColor: bg300,\n color: contents300,\n leftIconColor: contents300,\n deleteButtonColor: contents300,\n },\n selected: {\n backgroundColor: primary100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n },\n selectedHover: {\n backgroundColor: contents100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n },\n },\n\n outline: {\n default: {\n backgroundColor: bg100,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n border: `1px solid ${contents150}`,\n },\n hover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n border: `1px solid ${contents100}`,\n },\n disabled: {\n backgroundColor: bg100,\n color: contents200,\n leftIconColor: contents200,\n deleteButtonColor: contents200,\n border: `1px solid ${contents200}`,\n },\n selected: {\n backgroundColor: primary100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n border: '1px solid transparent',\n },\n selectedHover: {\n backgroundColor: contents100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n border: '1px solid transparent',\n },\n },\n\n dashedLine: {\n default: {\n backgroundColor: bg100,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n border: `1px dashed ${contents150}`,\n },\n hover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n border: `1px dashed ${contents100}`,\n },\n disabled: {\n backgroundColor: bg100,\n color: contents200,\n leftIconColor: contents200,\n deleteButtonColor: contents200,\n border: `1px dashed ${contents200}`,\n },\n selected: {\n backgroundColor: bg100,\n color: contents000,\n leftIconColor: contents000,\n deleteButtonColor: contents000,\n border: `1px solid ${primary100}`,\n },\n selectedHover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents100,\n border: `1px solid ${contents100}`,\n },\n },\n} as const satisfies Record<ChipVariant, unknown>;\n"],"names":["SMALL_WITH_BORDER_CHIP_SIZE_STYE","typography","padding","height","SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE","MEDIUM_WITH_BORDER_CHIP_SIZE_STYE","MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE","CHIP_SIZE_STYLE","small","filled","outline","dashedLine","medium","CHIP_VARIANT_STYLE","backgroundColor","bg200","color","contents150","leftIconColor","deleteButtonColor","contents200","hover","contents100","disabled","bg300","contents300","selected","primary100","contents999","selectedHover","bg100","border","concat","contents000"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { contents100, bg100, contents000, contents200, contents150, contents999, primary100, contents300, bg300, bg200 } from '@remember-web/mixin';
|
|
2
2
|
|
|
3
3
|
var SMALL_WITH_BORDER_CHIP_SIZE_STYE = {
|
|
4
4
|
typography: 'Caption1',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.esm.js","sources":["../../../../src/Chips/Chip/const.ts"],"sourcesContent":["import {\n bg100,\n bg200,\n bg300,\n contents000,\n contents100,\n contents150,\n contents200,\n contents300,\n contents999,\n primary100,\n} from '@remember-web/mixin';\nimport type { ChipSize, ChipSizeStyle, ChipVariant, ChipVariantStyleMap } from './types';\n\n\n\nconst SMALL_WITH_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n typography: 'Caption1',\n padding: '6px 10px',\n height: '28px',\n};\n\nconst SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n typography: 'Caption1',\n padding: '7px 11px',\n height: '28px',\n};\n\nconst MEDIUM_WITH_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n typography: 'UIBody3',\n padding: '5px 12px',\n height: '30px',\n};\n\nconst MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n typography: 'UIBody3',\n padding: '6px 14px',\n height: '30px',\n};\n\nexport const CHIP_SIZE_STYLE = {\n small: {\n filled: SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE,\n outline: SMALL_WITH_BORDER_CHIP_SIZE_STYE,\n dashedLine: SMALL_WITH_BORDER_CHIP_SIZE_STYE,\n },\n medium: {\n filled: MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE,\n outline: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,\n dashedLine: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,\n },\n} as const satisfies Record<ChipSize, Record<ChipVariant, ChipSizeStyle>>;\n\nexport const CHIP_VARIANT_STYLE: ChipVariantStyleMap = {\n filled: {\n default: {\n backgroundColor: bg200,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n },\n hover: {\n backgroundColor: bg200,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n },\n disabled: {\n backgroundColor: bg300,\n color: contents300,\n leftIconColor: contents300,\n deleteButtonColor: contents300,\n },\n selected: {\n backgroundColor: primary100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n },\n selectedHover: {\n backgroundColor: contents100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n },\n },\n\n outline: {\n default: {\n backgroundColor: bg100,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n border: `1px solid ${contents150}`,\n },\n hover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n border: `1px solid ${contents100}`,\n },\n disabled: {\n backgroundColor: bg100,\n color: contents200,\n leftIconColor: contents200,\n deleteButtonColor: contents200,\n border: `1px solid ${contents200}`,\n },\n selected: {\n backgroundColor: primary100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n border: '1px solid transparent',\n },\n selectedHover: {\n backgroundColor: contents100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n border: '1px solid transparent',\n },\n },\n\n dashedLine: {\n default: {\n backgroundColor: bg100,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n border: `1px dashed ${contents150}`,\n },\n hover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n border: `1px dashed ${contents100}`,\n },\n disabled: {\n backgroundColor: bg100,\n color: contents200,\n leftIconColor: contents200,\n deleteButtonColor: contents200,\n border: `1px dashed ${contents200}`,\n },\n selected: {\n backgroundColor: bg100,\n color: contents000,\n leftIconColor: contents000,\n deleteButtonColor: contents000,\n border: `1px solid ${primary100}`,\n },\n selectedHover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents100,\n border: `1px solid ${contents100}`,\n },\n },\n} as const satisfies Record<ChipVariant, unknown>;\n"],"names":["SMALL_WITH_BORDER_CHIP_SIZE_STYE","typography","padding","height","SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE","MEDIUM_WITH_BORDER_CHIP_SIZE_STYE","MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE","CHIP_SIZE_STYLE","small","filled","outline","dashedLine","medium","CHIP_VARIANT_STYLE","backgroundColor","bg200","color","contents150","leftIconColor","deleteButtonColor","contents200","hover","contents100","disabled","bg300","contents300","selected","primary100","contents999","selectedHover","bg100","border","concat","contents000"],"mappings":";;AAgBA,IAAMA,gCAAgD,GAAG;AACvDC,EAAAA,UAAU,EAAE,UAAU;AACtBC,EAAAA,OAAO,EAAE,UAAU;AACnBC,EAAAA,MAAM,EAAE
|
|
1
|
+
{"version":3,"file":"const.esm.js","sources":["../../../../src/Chips/Chip/const.ts"],"sourcesContent":["import {\n bg100,\n bg200,\n bg300,\n contents000,\n contents100,\n contents150,\n contents200,\n contents300,\n contents999,\n primary100,\n} from '@remember-web/mixin';\nimport type { ChipSize, ChipSizeStyle, ChipVariant, ChipVariantStyleMap } from './types';\n\n\n\nconst SMALL_WITH_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n typography: 'Caption1',\n padding: '6px 10px',\n height: '28px',\n};\n\nconst SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n typography: 'Caption1',\n padding: '7px 11px',\n height: '28px',\n};\n\nconst MEDIUM_WITH_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n typography: 'UIBody3',\n padding: '5px 12px',\n height: '30px',\n};\n\nconst MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n typography: 'UIBody3',\n padding: '6px 14px',\n height: '30px',\n};\n\nexport const CHIP_SIZE_STYLE = {\n small: {\n filled: SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE,\n outline: SMALL_WITH_BORDER_CHIP_SIZE_STYE,\n dashedLine: SMALL_WITH_BORDER_CHIP_SIZE_STYE,\n },\n medium: {\n filled: MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE,\n outline: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,\n dashedLine: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,\n },\n} as const satisfies Record<ChipSize, Record<ChipVariant, ChipSizeStyle>>;\n\nexport const CHIP_VARIANT_STYLE: ChipVariantStyleMap = {\n filled: {\n default: {\n backgroundColor: bg200,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n },\n hover: {\n backgroundColor: bg200,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n },\n disabled: {\n backgroundColor: bg300,\n color: contents300,\n leftIconColor: contents300,\n deleteButtonColor: contents300,\n },\n selected: {\n backgroundColor: primary100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n },\n selectedHover: {\n backgroundColor: contents100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n },\n },\n\n outline: {\n default: {\n backgroundColor: bg100,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n border: `1px solid ${contents150}`,\n },\n hover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n border: `1px solid ${contents100}`,\n },\n disabled: {\n backgroundColor: bg100,\n color: contents200,\n leftIconColor: contents200,\n deleteButtonColor: contents200,\n border: `1px solid ${contents200}`,\n },\n selected: {\n backgroundColor: primary100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n border: '1px solid transparent',\n },\n selectedHover: {\n backgroundColor: contents100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n border: '1px solid transparent',\n },\n },\n\n dashedLine: {\n default: {\n backgroundColor: bg100,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n border: `1px dashed ${contents150}`,\n },\n hover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n border: `1px dashed ${contents100}`,\n },\n disabled: {\n backgroundColor: bg100,\n color: contents200,\n leftIconColor: contents200,\n deleteButtonColor: contents200,\n border: `1px dashed ${contents200}`,\n },\n selected: {\n backgroundColor: bg100,\n color: contents000,\n leftIconColor: contents000,\n deleteButtonColor: contents000,\n border: `1px solid ${primary100}`,\n },\n selectedHover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents100,\n border: `1px solid ${contents100}`,\n },\n },\n} as const satisfies Record<ChipVariant, unknown>;\n"],"names":["SMALL_WITH_BORDER_CHIP_SIZE_STYE","typography","padding","height","SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE","MEDIUM_WITH_BORDER_CHIP_SIZE_STYE","MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE","CHIP_SIZE_STYLE","small","filled","outline","dashedLine","medium","CHIP_VARIANT_STYLE","backgroundColor","bg200","color","contents150","leftIconColor","deleteButtonColor","contents200","hover","contents100","disabled","bg300","contents300","selected","primary100","contents999","selectedHover","bg100","border","concat","contents000"],"mappings":"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"}
|
|
@@ -15,7 +15,7 @@ var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWith
|
|
|
15
15
|
|
|
16
16
|
var _excluded = ["size", "variant", "selected", "clickable"];
|
|
17
17
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
18
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t),
|
|
18
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
19
19
|
var Chip = /*#__PURE__*/react.forwardRef(function (props, ref) {
|
|
20
20
|
var _props$size = props.size,
|
|
21
21
|
size = _props$size === void 0 ? 'medium' : _props$size,
|