@goodhood-web/ui 1.0.4-development.1 → 1.1.0-development.1

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.
@@ -1,3 +1,3 @@
1
1
  import { CardProps } from './Card.types';
2
- declare const Card: ({ ariaLabel, as: Tag, borderRadius, children, role, }: CardProps) => import("react/jsx-runtime").JSX.Element;
2
+ declare const Card: ({ ariaLabel, as: Tag, borderRadius, children, className, role, }: CardProps) => import("react/jsx-runtime").JSX.Element;
3
3
  export default Card;
@@ -6,5 +6,6 @@ export interface CardProps {
6
6
  as?: Extract<keyof JSX.IntrinsicElements, 'section' | 'div'>;
7
7
  borderRadius?: boolean;
8
8
  children: React.ReactElement<CardBodyProps | CardHeaderProps> | React.ReactElement<CardBodyProps | CardHeaderProps>[];
9
+ className?: string;
9
10
  role?: string;
10
11
  }
@@ -1,9 +1,9 @@
1
1
  import { ReactNode } from 'react';
2
2
  export interface MenuItemProps {
3
3
  isSelected?: boolean;
4
- labelPillText: string;
4
+ labelPillText?: string;
5
5
  leftIcon: ReactNode;
6
6
  onClick: () => void;
7
- rightIcon: ReactNode;
7
+ rightIcon?: ReactNode;
8
8
  text: string;
9
9
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@goodhood-web/ui",
3
- "version": "1.0.4-development.1",
3
+ "version": "1.1.0-development.1",
4
4
  "main": "./index.js",
5
5
  "types": "./index.d.ts",
6
6
  "exports": {
@@ -13,5 +13,8 @@
13
13
  "registry": "https://registry.npmjs.org/",
14
14
  "access": "public"
15
15
  },
16
- "private": false
16
+ "private": false,
17
+ "peerDependencies": {
18
+ "@mui/base": "^5.0.0-beta.27"
19
+ }
17
20
  }
package/style.css CHANGED
@@ -1 +1 @@
1
- ._baseBtn_u66q2_5{min-width:2rem;min-height:2rem;border:none;border-radius:0;cursor:pointer}._baseBtn--active_u66q2_12{background:#b1b1b1}._root_a2f7b_5{display:flex;overflow:hidden;width:100%;flex-direction:column;padding:16px;background-color:#fff;box-shadow:0 2px 8px #0000001a;color:#201649}._root--border-radius_a2f7b_15{border-radius:8px}._root_1wtf4_5{padding:8px 0;color:inherit}._iconComponent_a3o6m_5{display:block}._iconComponent_a3o6m_5 path{stroke:currentColor}._iconButton_fn1d5_5{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:auto;height:auto;min-width:unset;min-height:unset;color:#201649}._iconButton_fn1d5_5:disabled{background:none}._iconButton_fn1d5_5:hover,._iconButton_fn1d5_5:active{background:none}._iconButton--circular_fn1d5_25{border-radius:50%;background:#cae85d}._iconButton--circular_fn1d5_25:disabled{background:#ffffff}._iconButton--circular_fn1d5_25:hover{background:#b5d622}._iconButton--circular_fn1d5_25:active{background:#cae85d}._iconButton--circular-small_fn1d5_38{width:40px;height:40px}._iconButton--circular-medium_fn1d5_42{width:48px;height:48px}._iconButton--circular-large_fn1d5_46{width:56px;height:56px}._root_11z9n_5{display:flex;align-items:center;padding-bottom:12px;color:inherit;gap:8px}._title_11z9n_13{flex-grow:1;margin:0}._h1_1xwl1_5{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:32px;font-weight:500;letter-spacing:0;line-height:40px;text-decoration:none;text-indent:0px;text-transform:none}._h2_1xwl1_17{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:24px;font-weight:Semi Bold;letter-spacing:0;line-height:32px;text-decoration:none;text-indent:0px;text-transform:none}._h3_1xwl1_29{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:20px;font-weight:Semi Bold;letter-spacing:0;line-height:24px;text-decoration:none;text-indent:0px;text-transform:none}._h4_1xwl1_41{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:18px;font-weight:700;letter-spacing:0;line-height:24px;text-decoration:none;text-indent:0px;text-transform:none}._h5_1xwl1_53{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:16px;font-weight:Semi Bold;letter-spacing:0;line-height:24px;text-decoration:none;text-indent:0px;text-transform:none}._h6_1xwl1_65{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:14px;font-weight:700;letter-spacing:1;line-height:24px;text-decoration:none;text-indent:0px;text-transform:uppercase}._h7_1xwl1_77{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:12px;font-weight:Extra Bold;letter-spacing:1;line-height:16px;text-decoration:none;text-indent:0px;text-transform:uppercase}._h8_1xwl1_89{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:10px;font-weight:Extra Bold;letter-spacing:1.5;line-height:16px;text-decoration:none;text-indent:0px;text-transform:uppercase}._body-large_1xwl1_101{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:16px;font-weight:500;letter-spacing:0;line-height:24px;text-decoration:none;text-indent:0px;text-transform:none}._body-regular_1xwl1_113{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:14px;font-weight:400;letter-spacing:0;line-height:20px;text-decoration:none;text-indent:0px;text-transform:none}._body-semibold_1xwl1_125{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:14px;font-weight:Semi Bold;letter-spacing:0;line-height:20px;text-decoration:none;text-indent:0px;text-transform:none}._body-italic_1xwl1_137{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:14px;font-weight:Italic;letter-spacing:0;line-height:20px;text-decoration:none;text-indent:0px;text-transform:none}._detail-medium_1xwl1_149{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:12px;font-weight:500;letter-spacing:0;line-height:16px;text-decoration:none;text-indent:0px;text-transform:none}._detail-bold_1xwl1_161{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:0;line-height:16px;text-decoration:none;text-indent:0px;text-transform:none}._detail-upper-case_1xwl1_173{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:10px;font-weight:Extra Bold;letter-spacing:0;line-height:16px;text-decoration:none;text-indent:0px;text-transform:uppercase}._ccBtn_7njhf_5{display:flex;width:100%;height:40px;align-items:center;align-self:stretch;padding:8px 16px;border-color:transparent;border-radius:12px;background-color:#f4f3f6;color:#201649;cursor:pointer;font-size:14px}._dividerContainer_10eh1_5{display:flex;align-items:center}._dividerLine_10eh1_10{height:1px;flex-grow:1}._fieldset_1e2kt_5{border:none}._labelPill_37b6j_5{display:inline-flex;align-items:center;justify-content:center;border-radius:16px;background:#01819C}._labelPill_37b6j_5 span{color:#fff;line-height:16px;text-align:center}._labelPill--small_37b6j_17{height:20px;padding:0 8px}._labelPill--small_37b6j_17 span{font-size:10px;font-weight:800;text-transform:uppercase}._labelPill--medium_37b6j_26{padding:4px 8px}._labelPill--medium_37b6j_26 span{font-size:12px;font-weight:700}._legend_fehrw_5{display:flex;flex-direction:column;padding-bottom:12px;gap:8px}._legend_fehrw_5 ._text_fehrw_11{color:#635c80}._menuItem_143wx_5{display:flex;width:100%;flex-shrink:0;align-items:center;padding:0 8px;background-color:#fff;color:#201649;gap:8px;text-decoration:none;cursor:pointer}._menuItem_143wx_5 ._highlightFrame_143wx_17{display:flex;flex:1;align-items:center;padding:8px;border-radius:8px;gap:8px}._menuItem_143wx_5 ._rightIcon_143wx_25{display:inherit;margin-left:auto}._menuItem_143wx_5 ._rightIcon_143wx_25 svg path{stroke:#635c80!important}._menuItem--selected_143wx_32 ._highlightFrame_143wx_17{background-color:#f2fbc4}._menuItem--selected_143wx_32 ._highlightFrame_143wx_17 svg path{stroke:#738c00}._menuItem--selected_143wx_32:hover{color:#738c00}._menuItem_143wx_5:not(._menuItem--selected_143wx_32):active{background-color:#f4f3f6}._menuItem_143wx_5:not(._menuItem--selected_143wx_32):hover{color:#635c80}._menuItem_143wx_5:not(._menuItem--selected_143wx_32):hover svg path{stroke:#635c80}._menuItem_143wx_5:not(._menuItem--selected_143wx_32):hover ._highlightFrame_143wx_17{background-color:#f4f3f6}._bubbleContent_1wprd_5{position:relative;display:inline-block}._bubble_1wprd_5{position:absolute;z-index:auto;top:6px;right:6px;display:flex;width:20px;height:20px;align-items:center;justify-content:center;border-radius:50%;background-color:#ff9de2;color:#201649;font-size:12px;font-weight:700;text-align:center;transform:translate(50%,-50%);transform-origin:100% 0;white-space:nowrap}._bubble--empty_1wprd_30{width:12px;height:12px}._root_sno8x_12{position:relative;overflow:hidden;flex-shrink:0;border:solid 1px}._root--24_sno8x_18{width:24px;height:24px}._root--28_sno8x_22{width:28px;height:28px}._root--32_sno8x_26{width:32px;height:32px}._root--40_sno8x_30{width:40px;height:40px}._root--48_sno8x_34{width:48px;height:48px}._root--56_sno8x_38{width:56px;height:56px}._root--64_sno8x_42{width:64px;height:64px}._root--80_sno8x_46{width:80px;height:80px}._root--120_sno8x_50{width:120px;height:120px}._root--280_sno8x_54{width:280px;height:280px}._root--square_sno8x_58._root--24_sno8x_18,._root--square_sno8x_58._root--32_sno8x_26{border-radius:4px}._root--square_sno8x_58._root--40_sno8x_30,._root--square_sno8x_58._root--48_sno8x_34{border-radius:8px}._root--square_sno8x_58._root--56_sno8x_38,._root--square_sno8x_58._root--64_sno8x_42{border-radius:12px}._root--square_sno8x_58._root--80_sno8x_46,._root--square_sno8x_58._root--120_sno8x_50{border-radius:16px}._root--circular_sno8x_70{border-radius:50%}._root--isPlaceholder_sno8x_73:before{position:absolute;z-index:1;width:100%;height:100%;content:"";opacity:.4}._root_sno8x_12 img{width:100%;height:100%;object-fit:cover}._switch_1nqgr_5{position:relative;display:inline-block;width:48px;height:28px}._switch_1nqgr_5 input{position:absolute;z-index:2;width:48px;height:28px;cursor:pointer;opacity:0}._switch_1nqgr_5 ._slider_1nqgr_19{z-index:1;display:block;width:100%;height:100%;border-radius:34px;background-color:#e9e8ed;box-shadow:0 1px 3px #0003 inset;cursor:pointer;transition:.4s}._switch_1nqgr_5 ._slider_1nqgr_19:before{position:absolute;right:3px;bottom:2px;width:24px;height:24px;border-radius:50%;background-color:#fff;box-shadow:0 0 2px #0003;content:"";transform:translate(-18px);transition:.4s}._switch_1nqgr_5 ._slider_1nqgr_19._focusVisible_1nqgr_43{box-shadow:0 0 0 3px #cae85d}._switch_1nqgr_5 input:checked+._slider_1nqgr_19{background-color:#b5d622}._switch_1nqgr_5 input:checked+._slider_1nqgr_19:before{transform:translate(0)}._toggleInput_1wk6s_5{display:flex;width:100%;align-items:center;padding:8px 16px;background-color:#fff;color:#635c80;cursor:pointer;gap:12px}._toggleInput_1wk6s_5 svg{flex-shrink:0}._toggleInput_1wk6s_5 ._textLabel_1wk6s_18{flex-grow:1}._toggleInput_1wk6s_5 ._switch_1wk6s_21{flex-shrink:0}._toggleInput--checked_1wk6s_24{color:#201649}._toggleInput--withBorder_1wk6s_27{padding:12px 16px;border-radius:16px;box-shadow:inset 0 0 0 1px}
1
+ ._baseBtn_1r0xb_5{min-width:2rem;min-height:2rem;border:none;border-radius:0;cursor:pointer}._baseBtn--active_1r0xb_12{background:#b1b1b1}._root_ann27_5{display:flex;overflow:hidden;width:100%;flex-direction:column;padding:16px;background-color:#fff;box-shadow:0 2px 8px #0000001a;color:#201649}._root--border-radius_ann27_15{border-radius:8px}._root_kfd82_5{padding:8px 0;color:inherit}._iconComponent_s85d7_5{display:block}._iconComponent_s85d7_5 path{stroke:currentColor}._iconButton_1o4lx_5{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:auto;height:auto;min-width:unset;min-height:unset;color:#201649}._iconButton_1o4lx_5:disabled{background:none}._iconButton_1o4lx_5:hover,._iconButton_1o4lx_5:active{background:none}._iconButton--circular_1o4lx_25{border-radius:50%;background:#cae85d}._iconButton--circular_1o4lx_25:disabled{background:#ffffff}._iconButton--circular_1o4lx_25:hover{background:#b5d622}._iconButton--circular_1o4lx_25:active{background:#cae85d}._iconButton--circular-small_1o4lx_38{width:40px;height:40px}._iconButton--circular-medium_1o4lx_42{width:48px;height:48px}._iconButton--circular-large_1o4lx_46{width:56px;height:56px}._root_9ve6u_5{display:flex;align-items:center;padding-bottom:12px;color:inherit;gap:8px}._title_9ve6u_13{flex-grow:1;margin:0}._h1_1ohbl_5{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:32px;font-weight:500;letter-spacing:0;line-height:40px;text-decoration:none;text-indent:0px;text-transform:none}._h2_1ohbl_17{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:24px;font-weight:Semi Bold;letter-spacing:0;line-height:32px;text-decoration:none;text-indent:0px;text-transform:none}._h3_1ohbl_29{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:20px;font-weight:Semi Bold;letter-spacing:0;line-height:24px;text-decoration:none;text-indent:0px;text-transform:none}._h4_1ohbl_41{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:18px;font-weight:700;letter-spacing:0;line-height:24px;text-decoration:none;text-indent:0px;text-transform:none}._h5_1ohbl_53{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:16px;font-weight:Semi Bold;letter-spacing:0;line-height:24px;text-decoration:none;text-indent:0px;text-transform:none}._h6_1ohbl_65{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:14px;font-weight:700;letter-spacing:1;line-height:24px;text-decoration:none;text-indent:0px;text-transform:uppercase}._h7_1ohbl_77{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:12px;font-weight:Extra Bold;letter-spacing:1;line-height:16px;text-decoration:none;text-indent:0px;text-transform:uppercase}._h8_1ohbl_89{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:10px;font-weight:Extra Bold;letter-spacing:1.5;line-height:16px;text-decoration:none;text-indent:0px;text-transform:uppercase}._body-large_1ohbl_101{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:16px;font-weight:500;letter-spacing:0;line-height:24px;text-decoration:none;text-indent:0px;text-transform:none}._body-regular_1ohbl_113{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:14px;font-weight:400;letter-spacing:0;line-height:24px;text-decoration:none;text-indent:0px;text-transform:none}._body-semibold_1ohbl_125{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:14px;font-weight:Semi Bold;letter-spacing:0;line-height:24px;text-decoration:none;text-indent:0px;text-transform:none}._body-italic_1ohbl_137{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:14px;font-weight:Italic;letter-spacing:0;line-height:24px;text-decoration:none;text-indent:0px;text-transform:none}._detail-medium_1ohbl_149{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:12px;font-weight:500;letter-spacing:0;line-height:16px;text-decoration:none;text-indent:0px;text-transform:none}._detail-bold_1ohbl_161{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:0;line-height:16px;text-decoration:none;text-indent:0px;text-transform:none}._detail-upper-case_1ohbl_173{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:10px;font-weight:Extra Bold;letter-spacing:0;line-height:16px;text-decoration:none;text-indent:0px;text-transform:uppercase}._ccBtn_1a3lk_5{display:flex;width:100%;height:40px;align-items:center;align-self:stretch;padding:8px 16px;border-color:transparent;border-radius:12px;background-color:#f4f3f6;color:#201649;cursor:pointer;font-size:14px}._dividerContainer_zbq8i_5{display:flex;align-items:center}._dividerLine_zbq8i_10{height:1px;flex-grow:1;background-color:#d2d0db}._fieldset_nicjl_5{border:none}._labelPill_1rbex_5{display:inline-flex;align-items:center;justify-content:center;border-radius:16px;background:#01819C}._labelPill_1rbex_5 span{color:#fff;line-height:16px;text-align:center}._labelPill--small_1rbex_17{height:20px;padding:0 8px}._labelPill--small_1rbex_17 span{font-size:10px;font-weight:800;text-transform:uppercase}._labelPill--medium_1rbex_26{padding:4px 8px}._labelPill--medium_1rbex_26 span{font-size:12px;font-weight:700}._legend_121jx_5{display:flex;flex-direction:column;padding-bottom:12px;gap:8px}._legend_121jx_5 ._text_121jx_11{color:#635c80}._menuItem_zhlwg_5{display:flex;width:100%;flex-shrink:0;align-items:center;padding:0 8px;background-color:#fff;color:#201649;gap:8px;text-decoration:none;cursor:pointer}._menuItem_zhlwg_5 ._highlightFrame_zhlwg_17{display:flex;flex:1;align-items:center;padding:8px;border-radius:8px;gap:8px}._menuItem_zhlwg_5 ._rightIcon_zhlwg_25{display:inherit;margin-left:auto}._menuItem_zhlwg_5 ._rightIcon_zhlwg_25 svg path{stroke:#635c80!important}._menuItem--selected_zhlwg_32 ._highlightFrame_zhlwg_17{background-color:#f2fbc4}._menuItem--selected_zhlwg_32 ._highlightFrame_zhlwg_17 svg path{stroke:#738c00}._menuItem--selected_zhlwg_32:hover{color:#738c00}._menuItem_zhlwg_5:not(._menuItem--selected_zhlwg_32):active{background-color:#f4f3f6}._menuItem_zhlwg_5:not(._menuItem--selected_zhlwg_32):hover{color:#635c80}._menuItem_zhlwg_5:not(._menuItem--selected_zhlwg_32):hover svg path{stroke:#635c80}._menuItem_zhlwg_5:not(._menuItem--selected_zhlwg_32):hover ._highlightFrame_zhlwg_17{background-color:#f4f3f6}._bubbleContent_1p3aw_5{position:relative;display:inline-block}._bubble_1p3aw_5{position:absolute;z-index:auto;top:6px;right:6px;display:flex;width:20px;height:20px;align-items:center;justify-content:center;border-radius:50%;background-color:#ff9de2;color:#201649;font-size:12px;font-weight:700;text-align:center;transform:translate(50%,-50%);transform-origin:100% 0;white-space:nowrap}._bubble--empty_1p3aw_30{width:12px;height:12px}._root_154gi_12{position:relative;overflow:hidden;flex-shrink:0;border:solid 1px #d2d0db;background-color:#d2d0db}._root--24_154gi_19{width:24px;height:24px}._root--28_154gi_23{width:28px;height:28px}._root--32_154gi_27{width:32px;height:32px}._root--40_154gi_31{width:40px;height:40px}._root--48_154gi_35{width:48px;height:48px}._root--56_154gi_39{width:56px;height:56px}._root--64_154gi_43{width:64px;height:64px}._root--80_154gi_47{width:80px;height:80px}._root--120_154gi_51{width:120px;height:120px}._root--280_154gi_55{width:280px;height:280px}._root--square_154gi_59._root--24_154gi_19,._root--square_154gi_59._root--32_154gi_27{border-radius:4px}._root--square_154gi_59._root--40_154gi_31,._root--square_154gi_59._root--48_154gi_35{border-radius:8px}._root--square_154gi_59._root--56_154gi_39,._root--square_154gi_59._root--64_154gi_43{border-radius:12px}._root--square_154gi_59._root--80_154gi_47,._root--square_154gi_59._root--120_154gi_51{border-radius:16px}._root--circular_154gi_71{border-radius:50%}._root--isPlaceholder_154gi_74:before{position:absolute;z-index:1;width:100%;height:100%;background-color:#d2d0db;content:"";opacity:.4}._root_154gi_12 img{width:100%;height:100%;object-fit:cover}._switch_wzvtf_5{position:relative;display:inline-block;width:48px;height:28px}._switch_wzvtf_5 input{position:absolute;z-index:2;width:48px;height:28px;cursor:pointer;opacity:0}._switch_wzvtf_5 ._slider_wzvtf_19{z-index:1;display:block;width:100%;height:100%;border-radius:34px;background-color:#e9e8ed;box-shadow:0 1px 3px #0003 inset;cursor:pointer;transition:.4s}._switch_wzvtf_5 ._slider_wzvtf_19:before{position:absolute;right:3px;bottom:2px;width:24px;height:24px;border-radius:50%;background-color:#fff;box-shadow:0 0 2px #0003;content:"";transform:translate(-18px);transition:.4s}._switch_wzvtf_5 ._slider_wzvtf_19._focusVisible_wzvtf_43{box-shadow:0 0 0 3px #cae85d}._switch_wzvtf_5 input:checked+._slider_wzvtf_19{background-color:#b5d622}._switch_wzvtf_5 input:checked+._slider_wzvtf_19:before{transform:translate(0)}._toggleInput_1oelr_5{display:flex;width:100%;align-items:center;padding:8px 16px;background-color:#fff;color:#635c80;cursor:pointer;gap:12px}._toggleInput_1oelr_5 svg{flex-shrink:0}._toggleInput_1oelr_5 ._textLabel_1oelr_18{flex-grow:1}._toggleInput_1oelr_5 ._switch_1oelr_21{flex-shrink:0}._toggleInput--checked_1oelr_24{color:#201649}._toggleInput--withBorder_1oelr_27{padding:12px 16px;border-radius:16px;box-shadow:inset 0 0 0 1px #d2d0db}