From 200ba8d17f6a0a287a3a72bf3233a09c58e9f621 Mon Sep 17 00:00:00 2001
From: Svetoslav Dimitrov <Svetoslav.Dimitrov@progress.com>
Date: Mon, 20 Dec 2021 16:50:49 +0200
Subject: [PATCH 01/24] chore(appearance): appearance settings for the Button

---
 components/button/appearance.md       | 126 ++++++++++++++++++++++++++
 components/button/images/fillmode.png | Bin 0 -> 1233 bytes
 2 files changed, 126 insertions(+)
 create mode 100644 components/button/appearance.md
 create mode 100644 components/button/images/fillmode.png

diff --git a/components/button/appearance.md b/components/button/appearance.md
new file mode 100644
index 0000000000..39a2c5f490
--- /dev/null
+++ b/components/button/appearance.md
@@ -0,0 +1,126 @@
+---
+title: Appearance
+page_title: Button Appearance
+description: Appearance settings of the Button for Blazor.
+slug: button-appearance
+tags: telerik,blazor,button,appearance
+published: True
+position: 35
+---
+
+# Appearance Settings
+
+You can control the appearance of the button by setting the following attributes:
+
+* [FillMode](#fillmode)
+* [Rounded](#rounded)
+* [Shape](#shape)
+* [Size](#size)
+* [ThemeColor](#themecolor)
+
+You can use all of them together to achieve the desired appearancee. This article will explain their effect one by one.
+
+## FillMode
+
+The `FillMode` controls how the TelerikButton is filled. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.FillMode` class:
+
+* `Solid` - the default value
+
+* `Flat`
+
+* `Outline`
+
+* `Link`
+
+![fill-mode](images/fillmode.png)
+
+>caption Built-in Fill modes
+
+````CSHTML
+@* These are all built-in fill modes *@
+
+@{ 
+    var fields = typeof(Telerik.Blazor.ThemeConstants.Button.FillMode)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+    foreach (var field in fields)
+    {
+        string fillmode = field.GetValue(null).ToString();
+
+        <div style="float:left; margin: 20px;">
+            <TelerikButton FillMode="@fillmode">@fillmode</TelerikButton>
+        </div>
+    }
+}
+````
+
+
+## Rounded
+
+The `Rounded` paramter applies the `border-radiums` CSS rule to the button to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Rounded` class:
+
+* `Small`
+* `Medium`
+* `Large`
+* `Full`
+
+>caption The built-in values of the Rounded attribute
+
+````CSHTML
+@* The built-in rounded edges of the button.  *@
+
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Rounded)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+    foreach (var field in fields)
+    {
+        string rounded = field.GetValue(null).ToString();
+
+        <div style="float:left; margin: 20px;">
+            <TelerikButton Rounded="@rounded">@rounded</TelerikButton>
+        </div>
+    }
+}
+````
+
+## Shape
+
+The `Shape` attribute defines the geometric shape of the button. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Shape` class:
+
+* `Rectangle`
+* `Square`
+* `Circle` - to create a circular button you should set the `Shape` attribute to **Square**, and the `Rounded` attribute to **Full**
+
+>note The width and height of the geometric shapes depend amount of text in the button, and the size of the font.
+
+````CSHTML
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Shape)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+    foreach (var field in fields)
+    {
+        string shape = field.GetValue(null).ToString();
+
+        <div style="float:left; margin: 20px;">
+            <TelerikButton Shape="@shape">@shape</TelerikButton>
+        </div>
+    }
+}
+````
+
+## ThemeColor
+
+@[template](/_contentTemplates/loaders/themeColor.md#loaders-theme-color)
+
+## See Also
+
+  * [Live Demo: Loader Overview](https://demos.telerik.com/blazor-ui/loader/overview)
+  * [Live Demo: Loader Appearance](https://demos.telerik.com/blazor-ui/loader/appearance)
diff --git a/components/button/images/fillmode.png b/components/button/images/fillmode.png
new file mode 100644
index 0000000000000000000000000000000000000000..6f48b7cc0e19a65bb508844076940928cc71a148
GIT binary patch
literal 1233
zcmeAS@N?(olHy`uVBq!ia0y~yU~~bp4LO*Aq^^K_IFMp24sv&5Sa(k5C6L3C?&#~t
zz_78O`%fY(kk47*5n0T@z;_sg8IR|$NCB!z^K@|xsfc?!_pFz)qrma+p*9sCOrHt1
zw6@xIvhzMOwP|^>z<*(*!cNZW(3`OxRbMB(kl=7EE;Ow!TfHmW&T8h2!Z|lfw*QxR
zTxFl8^XAvmYNkp0>lqmI8_qCPFr}~^5LPf|n8z@a@dL{Vo(6S?GzJ?+BjyL36C@e@
zQIt#wfA;+Oa|0gs)on!!d{oo}7?&?!K701;M&*E2Q#LI5_wuCn=M0mos;XbRv*P07
zG=xubhA_M=EG|~&eZ4S5GcmKK>eDG38NQ>-L!D=O_$^?{*gg4#;2iHARtm-j4QJj>
z3V-(d_wSXm0cw+kS1_D-qc=fP!Xd4^@yr1RqutyoY-|&5#zIsw&1_^$DVx5>s6FvV
z5La`V?uxDKBC%VV7L+cl7G`tbnh@Tr-(WOxj?Uwan>TOU=eYi_{M@x)=YEU$W&FbQ
z+BWO{OB=d_?n;z@Z#q1$Z#^Hg>~TlS2(8Z+s~RmLj$Gp08M*MxO$+VMOZM*FxIVk&
z<)@mgncm0BW=>C<eI{qY1hLW!_om)kP$~F5_3arM?X0!Sx{c!BueO~TpORTsdE$0O
z#@@orFDsU%UXb$G(jgbQa%K5qp*>a{P0iYwJ-bWgk|w9#<2-x%#>|(ietDYji}m{Y
z<W_?IKh>KTL^{_ft!rE&vBIP5*4&*}=dYf&_MD69Jzq(q`5UJyWeaIfKKd|Zj-oO9
zR^_Mq{cQi<oY`Y`(JJ$y^mUnCyNx%WoOpPpg?F0h-pVu2Rxh&d@qcw?ZQj9f&Hs{*
z&qZ3OZmwGYJaL_vX4{)AO{bei$Ip};<2!#k=iHYcGiq-Z#HKkLE19j`aprUQ#p;%g
z(wA!l?S!|dOyjyZf5Qu@3&K@jj3ss5;%2^o_imo}CHua<%WF5U=$>oy&b!+ppVc()
zd%tIzse`ReeVN+M+!zb)R3*!sN0VmmT<IUS?)03B6%XHT$(eao%(nTv(QNkji>4@T
zF1UB4zN$>r$esJ->m|SM-k<q@`kB-7CSTq&^TVr(<!7$UpW+^PYD(n6-6d~VocCi}
zTl~_;(nkIBnKL`f8zW^V%@o(!YGaZ1d}5?+*X#D@F%^o%HpVjp8jMo>ZqL}U>fAlw
zyK}pqr-m(lv%iNe?xc+8>5ZR{=j29}yzo7`vVZ-QMe-9PW2b)6FTO25bE!v{{I=6K
zXD((o6Sg<&J}kA-DmblEbZv5fS=wDmd)?*Jx~_k1mX8f%S=;E+ov_<v;?*9bfWjNf
zv6m-h8-G6S^I=Yh>TZ*>6HaJxoz!6s{<0zVm*MWBoT)d3bxM;B&#A`9R;KRTyZ3K0
z`;^WnELsdk^>gO$uRC41=ECdO+us*0E{7y(@e@2e3Y&L3q$M!Syvu6D%nZy0m8o((
zZ2n~q;4A}|R9$~2QNqr~ro(@AveC>Nzv6@EHLPD=2+R}y%P(KdFo`jp!VHXpMy><m
p$9H<i&17Vl#*8zIAAJ4VKIG(7A=jtx*nq_lgQu&X%Q~loCIF;#HckKl

literal 0
HcmV?d00001


From 3accf0029947e5102be772e6f09e9836043a28d5 Mon Sep 17 00:00:00 2001
From: Svetoslav Dimitrov <Svetoslav.Dimitrov@progress.com>
Date: Tue, 21 Dec 2021 16:04:58 +0200
Subject: [PATCH 02/24] chore(button): button appearance article

---
 components/button/appearance.md               |  93 +++++++++++++-----
 .../button/images/button-fillmode-flat.png    | Bin 0 -> 300 bytes
 .../button/images/button-fillmode-link.png    | Bin 0 -> 312 bytes
 .../button/images/button-fillmode-outline.png | Bin 0 -> 411 bytes
 .../button/images/button-fillmode-solid.png   | Bin 0 -> 495 bytes
 .../button/images/button-shape-rectangle.png  | Bin 0 -> 675 bytes
 .../button/images/button-shape-square.png     | Bin 0 -> 615 bytes
 .../button/images/button-size-large.png       | Bin 0 -> 593 bytes
 .../button/images/button-size-medium.png      | Bin 0 -> 422 bytes
 .../button/images/button-size-small.png       | Bin 0 -> 380 bytes
 .../button/images/button-themecolor-base.png  | Bin 0 -> 513 bytes
 .../button/images/button-themecolor-dark.png  | Bin 0 -> 458 bytes
 .../button/images/button-themecolor-error.png | Bin 0 -> 457 bytes
 .../button/images/button-themecolor-info.png  | Bin 0 -> 415 bytes
 .../images/button-themecolor-inverse.png      | Bin 0 -> 501 bytes
 .../button/images/button-themecolor-light.png | Bin 0 -> 448 bytes
 .../images/button-themecolor-primary.png      | Bin 0 -> 616 bytes
 .../images/button-themecolor-secondary.png    | Bin 0 -> 1077 bytes
 .../images/button-themecolor-success.png      | Bin 0 -> 562 bytes
 .../images/button-themecolor-tertiary.png     | Bin 0 -> 613 bytes
 .../images/button-themecolor-warning.png      | Bin 0 -> 873 bytes
 21 files changed, 68 insertions(+), 25 deletions(-)
 create mode 100644 components/button/images/button-fillmode-flat.png
 create mode 100644 components/button/images/button-fillmode-link.png
 create mode 100644 components/button/images/button-fillmode-outline.png
 create mode 100644 components/button/images/button-fillmode-solid.png
 create mode 100644 components/button/images/button-shape-rectangle.png
 create mode 100644 components/button/images/button-shape-square.png
 create mode 100644 components/button/images/button-size-large.png
 create mode 100644 components/button/images/button-size-medium.png
 create mode 100644 components/button/images/button-size-small.png
 create mode 100644 components/button/images/button-themecolor-base.png
 create mode 100644 components/button/images/button-themecolor-dark.png
 create mode 100644 components/button/images/button-themecolor-error.png
 create mode 100644 components/button/images/button-themecolor-info.png
 create mode 100644 components/button/images/button-themecolor-inverse.png
 create mode 100644 components/button/images/button-themecolor-light.png
 create mode 100644 components/button/images/button-themecolor-primary.png
 create mode 100644 components/button/images/button-themecolor-secondary.png
 create mode 100644 components/button/images/button-themecolor-success.png
 create mode 100644 components/button/images/button-themecolor-tertiary.png
 create mode 100644 components/button/images/button-themecolor-warning.png

diff --git a/components/button/appearance.md b/components/button/appearance.md
index 39a2c5f490..58e6acccd7 100644
--- a/components/button/appearance.md
+++ b/components/button/appearance.md
@@ -18,23 +18,20 @@ You can control the appearance of the button by setting the following attributes
 * [Size](#size)
 * [ThemeColor](#themecolor)
 
-You can use all of them together to achieve the desired appearancee. This article will explain their effect one by one.
+You can use all of them together to achieve the desired appearance. This article will explain their effect one by one.
 
 ## FillMode
 
 The `FillMode` controls how the TelerikButton is filled. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.FillMode` class:
 
-* `Solid` - the default value
+| Class members | Result |
+|------------|--------|
+|`Solid` <br /> default value|![](images/button-fillmode-solid.png)|
+|`Flat`|![](images/button-fillmode-flat.png)|
+|`Outline`|![](images/button-fillmode-outline.png)|
+|`Link`|![](images/button-fillmode-link.png)|
 
-* `Flat`
-
-* `Outline`
-
-* `Link`
-
-![fill-mode](images/fillmode.png)
-
->caption Built-in Fill modes
+>caption The built-in Fill modes
 
 ````CSHTML
 @* These are all built-in fill modes *@
@@ -56,15 +53,16 @@ The `FillMode` controls how the TelerikButton is filled. You can set it to a mem
 }
 ````
 
-
 ## Rounded
 
 The `Rounded` paramter applies the `border-radiums` CSS rule to the button to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Rounded` class:
 
-* `Small`
-* `Medium`
-* `Large`
-* `Full`
+| Class members | Result |
+|------------|--------|
+|`Small` |add screenshot here|
+|`Medium`|add screenshot here|
+|`Large`|add screenshot here|
+|`Full`|add screenshot here|
 
 >caption The built-in values of the Rounded attribute
 
@@ -92,11 +90,16 @@ The `Rounded` paramter applies the `border-radiums` CSS rule to the button to ac
 
 The `Shape` attribute defines the geometric shape of the button. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Shape` class:
 
-* `Rectangle`
-* `Square`
-* `Circle` - to create a circular button you should set the `Shape` attribute to **Square**, and the `Rounded` attribute to **Full**
+| Class members | Result |
+|---------------|--------|
+| `Rectangle`   |![button-rectangle](images/button-shape-rectangle.png)|
+| `Square`   |![button-square](images/button-shape-square.png)|
+| `Circle`   |To create a circular button you should set the `Shape` attribute to **Square**, and the `Rounded` attribute to **Full**|
+
+
+>note The width and height of the geometric shapes depend on the amount of text in the button, and the size of the font.
 
->note The width and height of the geometric shapes depend amount of text in the button, and the size of the font.
+>caption The built-in button shapes
 
 ````CSHTML
 @{
@@ -116,11 +119,51 @@ The `Shape` attribute defines the geometric shape of the button. You can set it
 }
 ````
 
-## ThemeColor
+## Size
+
+You can increase or decrease the size of the button by setting the `Size` parameter to a member of the `Telerik.Blazor.ThemeConstants.Button.Size` class:
+
+| Class members | Result |
+|---------------|--------|
+| `Small`   |![button-small](images/button-size-small.png)|
+| `Medium`   |![button-medium](images/button-size-medium.png)|
+| `Large`   |![button-large](images/button-size-large.png)|
+
+>caption The built-in button sizes
 
-@[template](/_contentTemplates/loaders/themeColor.md#loaders-theme-color)
+````CSHTML
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Size)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+    foreach (var field in fields)
+    {
+        string size = field.GetValue(null).ToString();
+
+        <div style="float:left; margin: 20px;">
+            <TelerikButton Size="@size">@size</TelerikButton>
+        </div>
+    }
+}
+````
+
+## ThemeColor
 
-## See Also
+The color of the button is controlled through the `ThemeColor` parameter. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.ThemeColor` class:
+
+| Class members | Result |
+|------------|--------|
+|`Base` <br /> default value |![button-base](images/button-themecolor-base.png)|
+|`Primary`|![button-primary](images/button-themecolor-primary.png)|
+|`Secondary`|![button-secondary](images/button-themecolor-secondary.png)|
+|`Tertiary`|![button-tertiary](images/button-themecolor-tertiary.png)|
+|`Info`|![button-info](images/button-themecolor-info.png)|
+|`Success`|![button-success](images/button-themecolor-success.png)|
+|`Warning`|![button-warning](images/button-themecolor-warning.png)|
+|`Error`|![button-error](images/button-themecolor-error.png)|
+|`Dark`|![button-dark](images/button-themecolor-dark.png)|
+|`Light`|![button-light](images/button-themecolor-light.png)|
+|`Inverse`|![button-inverse](images/button-themecolor-inverse.png)|
 
-  * [Live Demo: Loader Overview](https://demos.telerik.com/blazor-ui/loader/overview)
-  * [Live Demo: Loader Appearance](https://demos.telerik.com/blazor-ui/loader/appearance)
diff --git a/components/button/images/button-fillmode-flat.png b/components/button/images/button-fillmode-flat.png
new file mode 100644
index 0000000000000000000000000000000000000000..6d3f957af34c338f58a146d8901fb1f8d754b66b
GIT binary patch
literal 300
zcmeAS@N?(olHy`uVBq!ia0vp^CO|C9!2~3;cHVFTQjEnx?oJHr&dIz4a#+$GeH|GX
zHuiJ>Nn{1`ISV`@iy0XB4ude`@%$AjK*58aE{-7)?r*0U@*P&-ajl-p!($nCbi!nV
zf+-$z7NjejGF-H*T;pilf{;^(!b2-R2s4{8^C$nD#<I9bL#urel<2r4x9ng~<xck<
zvor5y{cC!`F8xiag!#nYH0xa_Zu?HV^J+)hmQQQbcfPsU*Au_bNaow;#iu5^Yb)9x
zSpR;H=#RDC;u`J`KW=V%!nbzP^iWGFy`yat)zc48e)~#f%9Y|NId_lM*-eU-v|YaM
k4daC0@=%+VBJ`H>cdz{3$(O9<2lNbsr>mdKI;Vst0H`;26aWAK

literal 0
HcmV?d00001

diff --git a/components/button/images/button-fillmode-link.png b/components/button/images/button-fillmode-link.png
new file mode 100644
index 0000000000000000000000000000000000000000..c7c4d7aa2bf5b4310b4d2bdeb0866a30ebeb6d1c
GIT binary patch
literal 312
zcmeAS@N?(olHy`uVBq!ia0vp^CO|CB!2~4tJg|-jQjEnx?oJHr&dIz4a#+$GeH|GX
zHuiJ>Nn{1`ISV`@iy0XB4ude`@%$AjK*6(~E{-7)?r*0!ay1(WxK>ZqiFxAC>J<Ly
z(BvH_0$X;vM|V{4IPy<aQ#-gUpoDF5*AqdNw6-57)Z?x+o-7L4Br{dV{i#n8^Ay*+
zeDagy*O=urXl*}b|8!dZ_uhF839R$mU+l9oy%gd-<C!?i?h}P!2Qy9uM;EI7T5x$r
zrMJrO6Q-A@UFFy+yp=b|e!AAQ6-9{`DjuDB`PJ{of{!kJS4)K^_v)vMdp=w?fjiHT
zZAna&KvDnm)BiIyA6M<(-D_4nZL+ujw8fL2u8@iFTWMbMtX-a8@_#ANV+@|IelF{r
G5}E+iwtM^l

literal 0
HcmV?d00001

diff --git a/components/button/images/button-fillmode-outline.png b/components/button/images/button-fillmode-outline.png
new file mode 100644
index 0000000000000000000000000000000000000000..804a6009bac98ebc3106f2417921ee6351cf1d51
GIT binary patch
literal 411
zcmeAS@N?(olHy`uVBq!ia0vp^PC%^0!2~2z4$XK9q!^2X+?^QKos)S9<glbW`Z_W&
zZ0zU$lgJ9>a~60+7BevL9R^{><M}I6fEo-uT^vIq+~3YPDA=qZ;2JEgdZSH5Sh{e}
z&6dYE`E(BdNo7=24D6h&aM*h7sYCTj;`!cUPgY#~UK<+vNJ&A9skq3WnSWX4CGnHZ
zD>%+<UC!tl8_OcSBSXdEqDSYVi9)W)`o-bhX%DJ$SgvogXs^$l<Fn>igH6wywA%bV
z+=cRAkKXaDa^b6r=`L)%>o7gX+Ip_?&Tn0}^n}=)cUUZP<Wt)l+-?%`_2c42dd7$E
zc-;vL4w!DFzGtShOGX7Z!)~`d$Fjxm^=)UCSRdN#lCg$UqN+7Ldqr;LqeW8D&kw3P
zJr0+jYNxWh<3dICk-5yP4%IGRxa->Q=&(SkhG(fg{0pyznJ_o)s+yCzpKXC*TkqV1
z9D00NDsE8ME30n0cH+tNbhZ79)_aRdo&LnIr+?<>TVHRc0Rxo5)78&qol`;+08V<O
A3jhEB

literal 0
HcmV?d00001

diff --git a/components/button/images/button-fillmode-solid.png b/components/button/images/button-fillmode-solid.png
new file mode 100644
index 0000000000000000000000000000000000000000..af9c07e7e074181def8453aaa848ab4422ce8c55
GIT binary patch
literal 495
zcmV<L0TBL)P)<h;3K|Lk000e1NJLTq001=r001Kh0ssI2y9?E!00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0fb3JK~z{r?bkta
zf-o3{;hrtMjPWYu9>6)!TMz_hSTJs=wrl<V@CyOsOp8!phIbW1I(anKfsfm=TaWK@
zxuj{T=MDx)*kt>PqNu9sXYQ`oD<o{PeR-bqlDUI~O>6RHS@yk*AYs$y8`9=`uXXzH
z!;Rm@5z?U)GSnCyl@KbbXWO*D7dvzPMUb#*VxPN7eA<_Sv-j5Fj%S5;Z01~_AB{~?
zd2(!DL>uw`?bzU$WsMy^8c5%ebh!T%Q~H{ElMRamU0-+Q!1FzwPPnmoQ5-zZQALj_
zocJz?`4u`SA?bA-z-KOChStXfvQ~oI`NMvYu<6%6?%>r(+J1>X6MdG_k7*mB4m?TI
zIA5o)x3bTD>hC^#gT`T?!mFpP@w3ldrMJXa@&7TduRU3+`3f?tj-gH;k4-A*e=+(E
z@%?9RUy>wW%Lo!SZN4FGzV~wb@a&G~^Cbico7UvRT|-%xykx%4=d=6%1vmahQQ+Bq
l-e7=)O}1~DZN7K9-R@6!`!d#9`8)ss002ovPDHLkV1mT3>CpfH

literal 0
HcmV?d00001

diff --git a/components/button/images/button-shape-rectangle.png b/components/button/images/button-shape-rectangle.png
new file mode 100644
index 0000000000000000000000000000000000000000..8313922f2086fb75c45f249deb27a32f4402dde2
GIT binary patch
literal 675
zcmV;U0$lxxP)<h;3K|Lk000e1NJLTq002<{001Hg0ssI2s9T~A00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0ys%TK~!i%?U!AW
zvM>-uXKk_>aVaDF5VkSuDu(!1#e?Mw{>-y;yE_R1iBkhsee(s*6CIl59*iPy_u(;Y
z=gZ}?+wD}KKn;RoS~(X*QI_Rbpj@w42#RUtd^jBR`9Oi7m=4={zu(`227+QbItR_@
z%#6+f(&CJNDtK_eo@FwbW=a>YKxOeH?l2<+#dLJ`vQ8#RwumP{3t+@BUvm$kq=(>G
z5Y{Bzq_U~5LA;RQm@3W|jZQ{ovq%rp>eDR0G@NTOaPkQqoLx66lcgM!hE7k0Cb2!P
zK4%s-lknY<=sdaYi6hfP<MATb!`xGMUMEo_1~+@?;%sK;xXx$GA)x2TyZH9D8@)F9
zO!xDJB+0DjO=rZ2>M>@Kvqv6iao%pXc-!)@;#j7@@=cOey{Cerr@1Z&=kl0O)Go})
znTB(^v#YZn=5m^TqRvw|qr(%!3k1cqtMmME@}He`N-0hBUe5E!^}O_QmgPmmAy4@m
zr7KJ2j7db2`N>%>BuR!0>&}P~wZ!n!%UMdRSKR`nw7bhHEfbT>orI2`?`^ZnCy!#b
zrZY7}wHVKDK~HBBLU2|he?z55&l~M8r??cQ{Oon6RqV4WwOhS%ZpN^iqLtq||9j|e
zI$!S&v^Z}zoAaOIgMXt+DfkELLykKFK{5Tq&Jcaq+ZOZ`2LFfiYZ;xHAv!Ci%AkRu
zm=4<+uN}wZQJ)Wv)9KXmUUj?OilR6K3e+Gdrj_$>7@qU}{tbg*G$EQY%69+&002ov
JPDHLkV1n+oJgNWy

literal 0
HcmV?d00001

diff --git a/components/button/images/button-shape-square.png b/components/button/images/button-shape-square.png
new file mode 100644
index 0000000000000000000000000000000000000000..59cc3d9116f862dbdd599b61ba3034b1b61686b6
GIT binary patch
literal 615
zcmeAS@N?(olHy`uVBq!ia0vp^jzH|d!2~2vo$TEXq!^2X+?^QKos)S9<glbW`T|vK
z?C1WI$O`0h7I;J!GcfQS24TkI`72U@8vb~?IEG|6zn$SYsmVaV^?A-5w{uG09nLG>
za}rsZl(;i-LZtQn%bpw}rwqCk6MwA@n(OyT{-m4zyoZZrXD!q0QsQTEaZT{!+u|G=
zS{hr=dg$>-2QW8sT9uuEz>LYvg%Ny(ADRW*Uw^&D#>!M&q`-Gtk*`hxhBgGT|Jil8
ze{lmy+mS@eBM13`=-=YQhMhdO7q45m>*`hu+jr)HMGKPV9lMw|e>Gd&iPAF*jtecn
z)6|yIui6kUyKC{8LxpLU7j8Z~k>?Y+xTQ7X+1h3ygMV4MYi3=!zVUu5%a?f(g0JTl
z*1b)5DgJWL$?Ad^pLq38<t|%0CtKd&^ue9?r$5~F_`dax=g;poXD;|SA(C(U>7|wD
zGndcP{dRViT5$Sn$yv(mrb_L1Jwxwq>$&_{Bv*9x#NFo;&T|62*eq{t@aklmR>_=M
zE6#n?moa#7p{ua{;5^|oMK5xF=TClj@YIY&y-uaF(`&5QXHPx0?D*R6*Zj23?qUDk
z<?y|?)Fo;5j=(RQ9p{*A&i8qmJYmwJ)it&3<^Fd+Oq$7enP>4I#zzK+q-4Y#Wd0;9
z<$M15r?Cb+V3`X)Kv45kt0$Fl?9dS27}UN<BX9fcdEe*#{%iNCKKu5z(9o%k4J$a#
koNO%PkShGp`24f9?LK>j9Pw}7z{J7e>FVdQ&MBb@0KE(rkN^Mx

literal 0
HcmV?d00001

diff --git a/components/button/images/button-size-large.png b/components/button/images/button-size-large.png
new file mode 100644
index 0000000000000000000000000000000000000000..9e14f3f387acd2a533919f98c3eca3145c937d2f
GIT binary patch
literal 593
zcmV-X0<QguP)<h;3K|Lk000e1NJLTq001rk001ut0ssI26Nhib00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0p>|WK~z{r?U%o6
z!ax+q`?uY6OQt{(1fie>>C!>F>Y{YWB83(QyErsiw1W<XmK5wJExK4rjXwgZii2rv
zXZtj-jnE^N8ZHj^nY{M`-w(MLbJ<($3_^v4r{XxyU@$N^0&x(E@#`v<W!bj<$&vYd
z4xt#ou40-dUcwOw#dx9O!B!a#hacR5P>dHU9zunMP+_t2D)4fGm%>Ig6he}kfvatR
zP>dHU9zm;&+tt&gL<u1@metx%T9Oc@flYq`Rk022h!Pq(DOUBmmOrF)UzS2qF|Usa
zk(I`H)%Z3GLuFh`6B50AcIz(p`A}4ha-5Ky?v@c_>sjgd`*7&ph?R=kg<qXgbgAN&
zk*>N@!IeJ{it$^kjA|*^pi;-JyEGIS7XB*Eu<DNOXw?8lHyL+qaqUl#D$cA^jxQhP
zbg`n}RSF3TgrowDT52YSe{mVLRfjG&6@QiwbG-b5D}RDiX`abar0_7qCEOxCClRWw
zRs0C_t~3iWY)m4r)^(Vbi&O*#CwcX=d4IrG>GgW=|KjaY%_ijKs1Pb0q|a|(v9SRV
zit&M{Y=cl?AyioGyozBMHg_Nt<AsU`TLsQ`lgR`x;lgw}WgjTv3)ZqMlOqrZp%}le
f5;{WVH;cs=q*a(E5dDyP00000NkvXXu0mjf725uP

literal 0
HcmV?d00001

diff --git a/components/button/images/button-size-medium.png b/components/button/images/button-size-medium.png
new file mode 100644
index 0000000000000000000000000000000000000000..680b13d414a402bd8098e34e4e564531290256fd
GIT binary patch
literal 422
zcmV;X0a^ZuP)<h;3K|Lk000e1NJLTq001li001Qj0ssI2w&|Rn00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0Xs=VK~z{r?Uzk%
zgD?<Adp74X^;zH^fpZXU5q>2Whz*5yO+ODaa!SOe!o;ooR<>p7JxBua+u{KsLhvkN
znx?w03-`bR7h4G%(RJN8j$iJX=NT@x5;mf3Ti)d!xY$Z~7SS}#=UKqTRw6_QAwuvh
z0uM4gMvfwnl!|hmJOLM5iN6$)$4aMJsul5`7G`BdW5N`&LB+9~h}A7)aoa1Vf;cn7
zIioEuB3SS!23dTexZ<j%((ucVqpB*rVRyJugiIo(uXmo9hy)WXs_4dx({xAE!*l~&
zY$g6zgt5|KWz)3bkci83#E(7v#e6{o?nWZN;UsZzCk|#eqAbggvw(}OM2HYVgkU3Z
zHp1cO9N=Or;aLRUY<=JJE|(0$u=^IpUq2iXaW--dEO4=vun{jLM64{!H|sOWt14l`
QqyPW_07*qoM6N<$f;ac8>;M1&

literal 0
HcmV?d00001

diff --git a/components/button/images/button-size-small.png b/components/button/images/button-size-small.png
new file mode 100644
index 0000000000000000000000000000000000000000..9f7d629add0eb26f3225889d3fdd438f5d9209f6
GIT binary patch
literal 380
zcmeAS@N?(olHy`uVBq!ia0vp^3P3Ew!2~4x7ig6NDaPU;cPEB*=VV?2IV|apzK#qG
z8~eHcB(eheoCO|{#S9F5he4R}c>anMpawxt7sn6}@3+&Ug`5o}+;(qU)3$X3|0cdS
zPIuC5W*V+~ySeUB`agD_$rq;2TfXCr<)qA`$vb99GuPf1cU{=i$f7mrlSAzF*z2`D
znYYD2oY2scZo`0yQ`k>!s)=UOn)HuZ`j1A#{r9JZ0w$K&PpD}6FzI82XZR1Jg0Gt4
ztBzb(-gU}CtfS_khiTuGk_EGw4)Go<-nDnm73O0%5AYOgo@tho`D`I};<L<q0Y9(R
zjm!PM7Ivt1P4~WM(j&<6^(*TNk6rRJJe}QtOnl1_tgt|ITe^YW4_oh&SzjHdrTTk2
zxL&GHX#UFZE&I*Mu!gQBHVyyHzh&<_+ORD1TD)jQ|Kn_i-&++YIJgGM?da%cKKy~T
YW5@c1x-0BrfFZ`<>FVdQ&MBb@0D{k*N&o-=

literal 0
HcmV?d00001

diff --git a/components/button/images/button-themecolor-base.png b/components/button/images/button-themecolor-base.png
new file mode 100644
index 0000000000000000000000000000000000000000..aca44d6179cc12d743b8e792bd92b4957bff106d
GIT binary patch
literal 513
zcmeAS@N?(olHy`uVBq!ia0vp^W<adM!2~3IE#sts6k~CayA#8@b22Z19F}xPUq=Rp
zjs4tz5?O(K&H|6fVg?4j!ywFfJby(BP{TA&7srqY_qWr%`<e}S9G>UQX`93Pj&aW7
z0`5cpNsTuGW<(m76?ix}EEOp|)Uka<$5V~-eqD#IXV`9kB&l(9-}~-G55yRx6r7`W
zCB<Hkz5X}ifB_Gf7aBSxi4n*W57s&T>9&+Z+m<}n;=H5AJJu-ex%_bMPUlC~eg796
zWM`1P^sBr}?hnVEj^G*zIirproUVrRKcw(nnAFd07BYud$Uo}QB%fbhG9r&AzTS|~
zm34lGPWA)AU}1BEw~u1JpJQ6FFKo`i1@|oFHn=uV&(VHX$rrvrHtBw1q8GDa%h!wx
z%M}mHaqp2({@k|fv&x)JX<ql3QaoPAx@wxgJa)r1_iChU^XXM_iOY6mNlPu?5qT<e
zt%YJ=0#9+l_t2@wCA3b(9zLoj8Zsri^Zb<!t-YVb{_E}()$chg5-G7jeUaac3v)jt
zC35l}-e5IXD{`8m#k&=akCxvIJG1FcCNI$c+ZR~^gDOY6=-k8L`$E8A&|Ahay?a@v
y##8^y+hxC(F~{?i#)d<~aM9K~UGI(i_In6^t7W+Q=oK*97(8A5T-G@yGywobf!Hhn

literal 0
HcmV?d00001

diff --git a/components/button/images/button-themecolor-dark.png b/components/button/images/button-themecolor-dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..e7257b9ef087ad1280b4950f5872ea8f007c61f9
GIT binary patch
literal 458
zcmV;*0X6=KP)<h;3K|Lk000e1NJLTq001%o001Hg0ssI2l8YUE00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0bfZ(K~z{r?U-G1
zgCG!qd$W@GsMk|ZLOeyt5sFtR@6!DX<_GO;+o`t0_YznZ_RErS#=OK`QnWOP)-Vip
zT_3jts)GZ|0HW12jjV46m`&5fKB84sl`L*b(bAC7I&4kR(onQCd{3)&?=iSmW}nhi
zdM~pz{*jg)IWdOOhosfIAYmW{&mlO+`J?SGn9f>s$l_O0Ygs>CkM2o?jwUBR9F8f@
zIiLl@i!>;83!Pv<*;%w&_HDxQ!onraT|uomfwe5GMsFpSN2&Gb0hSL_KI67q_gc)j
zZuMhY*3(|TueEMrpD_7)<9YI0W)Zr?lT3_Q8gugS*-6xN@Z;jCXmQwdXH17UCeS^~
z!V_Ap`Di(utAZAkp#&OZctuP0j<Vw!wHA;b5Z+N+sA>vgVKk%oq84}hrt$ZDMe7$R
zS{jO$hN7k6?`XlxJ}kU$2UO3z?C<oik$n;42j99PUmIiyZ2$lO07*qoM6N<$f&>l8
APyhe`

literal 0
HcmV?d00001

diff --git a/components/button/images/button-themecolor-error.png b/components/button/images/button-themecolor-error.png
new file mode 100644
index 0000000000000000000000000000000000000000..8cc38f7aa3811f6d51fc8fb847a03d5d5ddf5f75
GIT binary patch
literal 457
zcmV;)0XF`LP)<h;3K|Lk000e1NJLTq001-q001Hg0ssI2pOtMo00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0bWT&K~z{r?U+k$
zgD?<4eSoa#K38PjoCI|lPQi{du;B##B&KZ=rGV^??EyDo(#n<!j^xo>c*ehHn-xq3
z98u0UtX!Kv9oDPQ2evHW047Gs%0cyGGIV~x0ZgP2pk(E)1}zIA2i75QhjQ;>5aoQK
z<(e>va=y@VJPh3B@(RaE+2>e1m0XlXkHxH)RabJAG{s2`fC`2vQ)&vXbA_XvGONB!
zds7I>yNznYPI73YN}b^poeoa6eL01OmfO>$U87DpR@4S{h7Em5x~>eyVV7NOua9@0
z)+wCi?CaS0OYU6b7)0Iozsdc)xsh4rb_q$^HtLI+)Y(z*bi`E4ZOJaS+v;bX)+wCi
z%+kDlG^us{Mb4zdk!;&v?k%~AT6755#uoKXIz>6tHC9aAm_p+$Hz#)}_nHJjl=Fp_
zdr5*I%K1Xb9o8#&@8_if2jX``&_8m53n{+=bNr$D$C4zq00000NkvXXu0mjfkRZte

literal 0
HcmV?d00001

diff --git a/components/button/images/button-themecolor-info.png b/components/button/images/button-themecolor-info.png
new file mode 100644
index 0000000000000000000000000000000000000000..288cb1cedebe08b62848f3955c13ad64ebb90cda
GIT binary patch
literal 415
zcmV;Q0bu@#P)<h;3K|Lk000e1NJLTq001oj001Hg0ssI2L@vh|00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0W?WOK~z{r?Uze#
z!Y~j(VbAqSS@sUOPE?75ARmG#>(VBLvI$6Ol_m<V=VMVjMlDFhMr8CPCgVxw$#~<D
z3?l{)GuY!<d`+IVquEEFsEKMW39v{15`>yd0_<Te_X!K|50o}O2-o9r?Sa9=#O3ks
zft&P*l2(@AQK$Zk&y+s&M_UJ%M}9e?k!2NG#s6@Y2kr-qQOO~%7A3tTi)25hRUN6&
z{Txl)`I^Dy9(ow;fovCZo$LKT2_7FUkGUI%$22<ydth?F1nY1nQh_;nSVdr`Hm^u_
z`mw{cJmysao5U|F;_R+HLit~)S)EPF>6~)E3zx^+DYOS9=t1=oJunwFH5~gn>R1=u
zoaJ#v0`_=#^}yg^;__H|VDK=pJm6jl3ore$vhS6l+_OE0ls^Jf7@9Bt9-9CF002ov
JPDHLkV1glitoZ-{

literal 0
HcmV?d00001

diff --git a/components/button/images/button-themecolor-inverse.png b/components/button/images/button-themecolor-inverse.png
new file mode 100644
index 0000000000000000000000000000000000000000..cb438c3092acc911b424d6301ce120a2d5b76557
GIT binary patch
literal 501
zcmV<R0Sf+!P)<h;3K|Lk000e1NJLTq002M$001Ef0ssI2=A$}x00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0g6dPK~z{r?U+q+
zgD?z*d$Y!DIUnI9#HXlpgqSOoJ+7W4^B2-2GjtrMd@D;9(tFm9kB~WUVZd5jmSvF}
zq?we%K#uAKQVs(e<;iX!HEO`*$!;JuyMfd^VxaLMc>AIb|JeqbHgso4q2MiFw;{9*
zPE397VpzLQD?{gMPMOMmch1o#1j?FA&u3!N#MohoPPxU?2B4)v7D9u^OzV3&0Ep&d
z9J;g09!-(~YN7dQjh-O{>SM#|i_$W2mFEo%?^IzTx5g{#J0a;C>P8}lR|nLDi(z08
zG&32IC(wYHtaOD<3{XWcc^O8{cs~oS4aoNNGWx){C4X(e*b6URACF35V77tC!hnEQ
zDzqqMoZj4JG;p{HcRU%K*nngYYCr<6anP^VCnRF&1T~=14Ee+yx$jYv_t?q+UlHSE
z=opI!KQjX}t#Q3lyk2w7W(IibViG=##BD4#fG{%onB6PCs3#sV@Y3uCQnMRK&2Aty
r?_!`VOA0=7gEZ@}#q59XW=se_fkm%<V24K*00000NkvXXu0mjf0Cdnl

literal 0
HcmV?d00001

diff --git a/components/button/images/button-themecolor-light.png b/components/button/images/button-themecolor-light.png
new file mode 100644
index 0000000000000000000000000000000000000000..6799351e785bb0260ad42c724d2232830238922c
GIT binary patch
literal 448
zcmV;x0YCnUP)<h;3K|Lk000e1NJLTq001xm001Be0ssI2+qP^=00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0aZyvK~z{r?Uze#
zgfI+1bG=eH4h#oL=sgB*(Gf6ngm$1m_AIF#8(Kz55l|^b<*jVTl3zZXi0+TE3r)d7
zZQC|Y^Wg{>4FY7sLJn;R5Fis4;<8i7<V)z?DO(VFbIL9>g+b`mDH|8MJlu;QxqJ(3
z*cz}NWt^BW2))=jC!Pq@nX{j;bz(hAIWe(NXf!X21raC}37V%H;yB<HFTq|c682rK
z7RnV2i8H-SW`oeE?x`F@tj|56+D@rG%9|iedATkX9Enbc22FYp;-I_6{RY+wr6F8L
zKexv89|%=;3V1NSEczh7>L5Jwa#ctlgfJaCHAgLk(YW8hTA}JB;q}t63J=1$5I`P)
zFD2ZdLJgY`Z2&Tx)I6a{j=j)g)(VYI0(bAp6D12V2wmr)A2M?%AGx}i^+LbQ7KEOi
qvI|XdD+E7TxX33*z-azTciksEI-hIlq(uJ!0000<MNUMnLSTYuo2u#n

literal 0
HcmV?d00001

diff --git a/components/button/images/button-themecolor-primary.png b/components/button/images/button-themecolor-primary.png
new file mode 100644
index 0000000000000000000000000000000000000000..86fff7a62bb5a32bfc40bae9ad4ca4db26ef94f8
GIT binary patch
literal 616
zcmV-u0+;=XP)<h;3K|Lk000e1NJLTq002Y)001Ef0ssI2??{>q00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0sTotK~z{r?U=z*
zgD?<=eaW`o1U&Yw=uGKLP!HTa*p9padUph?mLzU=6GBqx6lbgr)69R^{A_mjgPgb#
zBU+<`$sWW!5cjuU3MPm74Gip~gCt)Blf(Q5#(C_c+A!Q_jT(kUGk<l3xm39@bu{x=
zSC}JOZG<TK>cBsXT$p`0^H&34*sBovnpc!s^2GQ&-zxJF0(!LO5M<;FQEeGGoHo{3
zvtHMS1;v~3_u)cz&lh^@Y9NddJj0x<Xl6pcV3d~NHB&IepkwLFvoas&V=r7MP(di(
zDi}45n&LpH<1V={-{G`RI7F(qF}|eO^^+$Y8sZcHU^w!v9GI`#)D#<~@ZESOW4jU6
zk#U`uEx$tpVQ_l0#nPw3G-quXIig-&Fy<@-l+dUDgsJm)><Tvr^Si%{&X1rVW%kO2
z`3k3fq8@r1GrVT5k1#BOSiz7_Fe*pE#H^IlD^tU$WYY*ALCw6d%?=HOk%QuVFc7{c
z<^L8&oA_$*nyF-aZfxBq@0JVm8BF_B%N_-ch^u7Fwx6oBCBn!@3dZC-$0`S5_9|H|
zo*@s`u?jXvL{Yb$E)9jTdz?)Gb3$uBV4!vLk&noQ*#(n65sYL0xt1Gwu}|we0Os;F
zYM75;;;*hSmns`(9_;QWm7jvi?ccMb`f)yjCBzRj&`!goa-|di0000<MNUMnLSTaB
C=@X{_

literal 0
HcmV?d00001

diff --git a/components/button/images/button-themecolor-secondary.png b/components/button/images/button-themecolor-secondary.png
new file mode 100644
index 0000000000000000000000000000000000000000..9e9c4cb67885c3061cbe2a56a31838042e09ce84
GIT binary patch
literal 1077
zcmV-51j_q~P)<h;3K|Lk000e1NJLTq00310001Ef0ssI2CnRv%00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D1IkH6K~!i%?U_AH
z+dve@FQux|RKiFw#6``L#S2Jf1k){9U=7*o47d!HU`W?QZL%g(VFM#I83Q9?z;wf5
zq*bzb$zoK@P^22EE^3A7dv_Nnd?jH(0?cp8`SG~B|NAl`fwQwS;$xohPrris-`(A<
zR4OMYC*0-(g27-inH(P<$Nc+EJOFw@H7roS-^4SRYQOjYqkalZLBGL-Kjz=xJnHv1
zcU=G5kIO5c6#j4<aQ%EH-Z^gZc5LgX?4twm^kPB^(WPsyEflxu^1OL{p{Ua(iKQ23
zE}NB{CX00C8S(cAEVEx?-tBv|wm!7&05u_PC${`y=cr=}xXWMn-!sziZkWogOpvOY
zEz_s#=vM!!TtadTl~Q%2nH()fyh_AcXJ+GAO5|CMD!CcSsdBR;C2}ch)MUYA&S+dr
z$Eh<RVM+K#%~d-jO{HUKi>E((CmKX#QRCu|jd#?(Zn~a7A)+*}ht~I-jo+cjDBoO(
zihoR_vv}Yp{a?zeESxD>BIaf@UFD2nhsWSH@${JJnnsD6(YwTrP3LkJrOLdcJ?B!x
zCLv)MR`HQnFTl+14Lcw3I@OB{s+uXYC%tC5biuG2%w4bVLjXo-0F-FhwQ9UpJJ7BE
zONRM6A#0ip$3QXB>&6EK5)u=dmY^;a*MUR~gvjwv9+f5+jXxZh2z-47Vt<G@N1nTV
zeBN8ht;iy4iS`I^^xFQEBw)$Jh6L9#zVhI8plkm_;PEy}UXv#@Z30I?9iH3!wTbeE
zFFMoxQdfZ&2-9=bqK;E0!hg`tcHNpzL{pHV2(dP|dpN1r`Y&gA-$8@vM-EhLvol-R
zzg*Hk)NF3fMdPs09AQ^N6F%s<V>wW;p3OB?y%hBG=yl5#qv;WlU(<UDbocqEX>8^}
zQH?}G&{R4$g)7Q@=CyqE;vP0P&O87nmIk8^j0ewQSTRXTZld#8(u>~@yaA!)<(IAb
z&jtj5Q}((b;%Ep<60z#tdmrKT@4XK%@+GqqU7e);57^b&0>*!<FdxphnRjM0R8lEZ
z8Cpt0n^5!N&TL@|KC|jsewB|4?4JT=hMm`Z5qnQ?Vs>qCX@+j?nx-9=sJ)b_Mpv-`
z!Ob-*J0v+78I2L1<F@NV0H&pgRol8w(RuLye{*wlr>CdfaPNtKSehmq^M!8t@9XPZ
zUS7V*`|n;58^zx5t@wclr61lAtI3G9L3^|}9$x+T$^)(c8^ZNN75EJ%{4xLj2K5Jn
v!9bw(ca|Rjy`UNw&<TG2{?p&z{}b{bhi0y}hO)Qx00000NkvXXu0mjfKe7ge

literal 0
HcmV?d00001

diff --git a/components/button/images/button-themecolor-success.png b/components/button/images/button-themecolor-success.png
new file mode 100644
index 0000000000000000000000000000000000000000..8e366754e69f87ec78204e8e39b9589c6b8cb7c0
GIT binary patch
literal 562
zcmV-20?qx2P)<h;3K|Lk000e1NJLTq002q=001Ef0ssI2@qwzp00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0mn&1K~z{r?U_4r
z!Y~kqq0e;^x7>*wB-A0fLBI}~p$QiVT_A25XqgEU)44#=KJ)^Kj59P6-uVmp*UHi-
zX<a}^Bpp|SH`zS*rZ?GJCw57S$>xcm3|<;+B*{Wh2Ja{%b`g||H%Ub;Ud(FoVwM;0
z?llp$crh!0S0tjwc!TYZ^TckxBy+eDVzus?gnBk8@Nqe-I9XKNJ|#%=hds;0mvHQd
zXU#|3%xI#38se=>A<BZ=U#cC#BcH~?ny_srb3$f%rTQQB0kQk@8u&9bscrRY^B&uN
z1@Q8K2=B<u)r#?v@$#-}*qNr+HNW9-w6l1xU>1d^eUQR)%%B?L;gl4bCxln*@kVhD
zi_FZ$%l8L<sR`Uf*i8(3o8Z=*m;p7#W5FsRcJqaNyae7!rV$(_hI7KIs?QAkHy%pW
z!$mIVpGV=Xi*<SM6pK+qJbMn<R60GpvAm0bssIR^#(MWcR~MMNq7<#}1ykJxr}n%T
z#FiiLb{tfpzx23t_CNKvzAWSx)U$_imwc064NsCC(`3T%Gp4$$GW0|NHO7le*NHbu
zL@i#-YVl&$_2KoVH_-PIzec_v;S>K0CBYEl7j=#uWIYrU&Hw-a07*qoM6N<$f-xoj
A1ONa4

literal 0
HcmV?d00001

diff --git a/components/button/images/button-themecolor-tertiary.png b/components/button/images/button-themecolor-tertiary.png
new file mode 100644
index 0000000000000000000000000000000000000000..77b4aacb9dce24f985c96231e2a833209e88d651
GIT binary patch
literal 613
zcmV-r0-F7aP)<h;3K|Lk000e1NJLTq002M$0018d0ssI2*wb9A00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0s2WqK~z{r?U>I}
z!Y~lVoq@Ygi%%muBmO=33Vj0LCMV&{h_+NL&=!chn{5+A%CsFv2$J~@+b>_z{Uts1
zOgKIm;ChstKSzzHFDC@8UX2pjIRjAlGb4AvnnA;|a|YN-I3U@%2Jkp@Nk<9r>5@(W
z`<4aZA#_Rq3LqJXjn_BK9a?y?7>uayr$M!~rDXxQpB5-afSzIQ5CIGg^S4zR0J`VF
zJq_3VoICf^b|?m8IBXaje?@ab1mi`cM>inhd#TSeFwkt08N{g<lDAl^Fu!Qsmi4x3
z-hjTT)*Jw6FVk)y&tQ=QV?e~|1qTQ<^Rs$-8LHYM8$eJX2>`{MI#W}v@kWF(6bL{C
zNsBQ6=X2pg1TX{AZ($w3*cK|)0#Kim8r1-_9c%#fxN1}3Gf9DJ1L!x9s{{bI9*pPU
z7u`U<76LL^C=0-yU!WxcK!LmCzGlEDfMxb5o1mKe^BcnzcAVuIKo96sVd}*{Op9s(
zP#@}jil-C+d>b-=HGM*QKu)of&F+u|;P#_P*dN}01T~&eHl)J=0Lb#3375@og8g;X
zCOG1x^-2c;z81(7(YZuT<=9jS;BN&0h~z8)+zDKfVQ$L?@V<A^X9mY_`W77~Km{Em
zKxg8TP5}Fs0f4_2!M%BNL!F8FYthx8yFz>e!kSgL)6he+00000NkvXXu0mjf4lDhD

literal 0
HcmV?d00001

diff --git a/components/button/images/button-themecolor-warning.png b/components/button/images/button-themecolor-warning.png
new file mode 100644
index 0000000000000000000000000000000000000000..a7acf469c99c5507f0a32178ea3054a81d439c75
GIT binary patch
literal 873
zcmV-v1D5=WP)<h;3K|Lk000e1NJLTq002b*0015c0ssI2^`=Bh00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0{%%vK~z{r?U>I`
z6HySyzb!%`fg9Kc62!!VC6Guwa6q95#A`u=cwzewz!^0GK`q`$;193`BbXTAuC_vI
zf+rG;<zgraf%4-@!Y^T+dHc4zYH87s(B1gSr1`#ilX;z;+1I2FRaIdl^m;a5;d?KR
zcZJiM<Q3!Es9sO3#M;GZ<P|%mvOzJ#@vh#VITFHUWgHIZ{jm#1e@;$>!^$|Fw(F05
z>!Go;x)J~9?OX}oK`<`$xnSIHKaPdN%3R9J+MhTITCpG(7;eGvH>o!x=!}S|jU&Is
zFfCZyrFilT$FVSBEH#e?Cls2*WJK<grA{=G4`Ffw`4iH88rkZp#vqW`5ju{3U~x-m
zAR0q^EgW=S55}i(^pS1If!q3#GcRyulAVvLe_5_QL4S|w8|!q(uqKj>H*pevQakAE
z!O)mUejnW-Eie<N`%O)6J_XZDERsq115jf~l7Ac1fUgv)7l$9vMM4iwr9zVk(DINs
zfUYvu?i%>%8Es2Hn-GKd;1<EY2HHmQ1j!}L1kmRd0bZ^%!}la3vfl?)<(S=I@#!-<
z?xJoUt29nufd+U)07DP5l_#_D43F^atZu+xE;UhgRf-H`ug6mhe~8B;F^8%$G%JWM
z^GO}GVq2@^A?n7sQS$-eyg0JYn_7zYMkFE_P*AUOyB3p(uE<%UM$IZXc#pp8GM+|<
zKRKh+X1~<>aax#Jq%;|i#=3NpC02}>v_@p_4?&Gqg78<cc6%@z#NsWu#TJu*c1LVQ
z;R_3OPVk!+#>-`~ScWn$L`F>gIo;}Sa)7@^EWLON-0;Y)%gvxyrm_vLHdL-7@fZm6
zaMG4Jr-pf%(rHZwlwoQV1HGKw^$sD0pQ$<QHzSPS(}N@7$YH*`#z+OGn&t9OT={34
zw~K-XxbT@AX1aJr!aO6HG5WKAC>%M)+vf=AuTAI;9+XO*mcoLZujj9zdUAT+{sE&u
zdk4Z{Wr|$3>yKUMEmpF>w`=LYtej3178U;ljLr1;<bLz000000NkvXXu0mjfeyx*y

literal 0
HcmV?d00001


From 561310690ed1c6ec2d618d87e05337e918af9df9 Mon Sep 17 00:00:00 2001
From: Svetoslav Dimitrov <Svetoslav.Dimitrov@progress.com>
Date: Tue, 21 Dec 2021 16:59:20 +0200
Subject: [PATCH 03/24] chore(commandbutton): appearance settings

---
 components/grid/columns/command.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/grid/columns/command.md b/components/grid/columns/command.md
index 29d6861c8d..f9fb0e7709 100644
--- a/components/grid/columns/command.md
+++ b/components/grid/columns/command.md
@@ -35,7 +35,7 @@ The `GridCommandButton` tag offers the following features:
 * `OnClick` - the event handler that the button will fire. If used on a built-in command, this handler will fire before the [corresponding CRUD event]({%slug components/grid/editing/overview%}). Cancelling it will prevent the built-in CRUD event from firing.
 * `ShowInEdit` - a boolean property indicating whether the button is only visible while the user is editing/inserting data.
 * `ChildContent` - the text the button will render. You can also place it between the command button's opening and closing tags.
-* Appearance properties like `Icon`, `Class`, `Enabled` that are come from the underlying [Button Component features]({%slug components/button/overview%}).
+* You can customize the appearance of the `GridCommandButton` by applying the [appearance attributes available for the TelerikButton]({%slug button-appearance%}).
 
 ### Built-in Commands
 

From 10993b43a11300d7b69b4db1375fbeb9924083a1 Mon Sep 17 00:00:00 2001
From: Svetoslav Dimitrov <Svetoslav.Dimitrov@progress.com>
Date: Tue, 11 Jan 2022 16:18:12 +0200
Subject: [PATCH 04/24] chore(docs): options

---
 components/button/appearance.md               |  33 ++-
 .../button/images/button-rounded-full.png     | Bin 0 -> 766 bytes
 .../button/images/button-rounded-large.png    | Bin 0 -> 453 bytes
 .../button/images/button-rounded-medium.png   | Bin 0 -> 417 bytes
 .../button/images/button-rounded-small.png    | Bin 0 -> 368 bytes
 components/buttongroup/appearance.md          | 187 +++++++++++++++++
 .../images/button-fillmode-flat.png           | Bin 0 -> 300 bytes
 .../images/button-fillmode-link.png           | Bin 0 -> 312 bytes
 .../images/button-fillmode-outline.png        | Bin 0 -> 411 bytes
 .../images/button-fillmode-solid.png          | Bin 0 -> 495 bytes
 .../images/button-rounded-full.png            | Bin 0 -> 766 bytes
 .../images/button-rounded-large.png           | Bin 0 -> 453 bytes
 .../images/button-rounded-medium.png          | Bin 0 -> 417 bytes
 .../images/button-rounded-small.png           | Bin 0 -> 368 bytes
 .../images/button-shape-rectangle.png         | Bin 0 -> 675 bytes
 .../images/button-shape-square.png            | Bin 0 -> 615 bytes
 .../buttongroup/images/button-size-large.png  | Bin 0 -> 593 bytes
 .../buttongroup/images/button-size-medium.png | Bin 0 -> 422 bytes
 .../buttongroup/images/button-size-small.png  | Bin 0 -> 380 bytes
 .../images/button-themecolor-base.png         | Bin 0 -> 513 bytes
 .../images/button-themecolor-dark.png         | Bin 0 -> 458 bytes
 .../images/button-themecolor-error.png        | Bin 0 -> 457 bytes
 .../images/button-themecolor-info.png         | Bin 0 -> 415 bytes
 .../images/button-themecolor-inverse.png      | Bin 0 -> 501 bytes
 .../images/button-themecolor-light.png        | Bin 0 -> 448 bytes
 .../images/button-themecolor-primary.png      | Bin 0 -> 616 bytes
 .../images/button-themecolor-secondary.png    | Bin 0 -> 1077 bytes
 .../images/button-themecolor-success.png      | Bin 0 -> 562 bytes
 .../images/button-themecolor-tertiary.png     | Bin 0 -> 613 bytes
 .../images/button-themecolor-warning.png      | Bin 0 -> 873 bytes
 components/radiogroup/appearance.md           |  60 ++++++
 .../images/radio-group-size-large.png         | Bin 0 -> 663 bytes
 .../images/radio-group-size-medium.png        | Bin 0 -> 509 bytes
 .../images/radio-group-size-small.png         | Bin 0 -> 477 bytes
 components/switch/appearance.md               | 120 +++++++++++
 .../switch/images/switch-size-large.png       | Bin 0 -> 1279 bytes
 .../switch/images/switch-size-medium.png      | Bin 0 -> 1040 bytes
 .../switch/images/switch-size-small.png       | Bin 0 -> 691 bytes
 .../images/switch-thumbrounded-full.png       | Bin 0 -> 1050 bytes
 .../images/switch-thumbrounded-large.png      | Bin 0 -> 736 bytes
 .../images/switch-thumbrounded-medium.png     | Bin 0 -> 682 bytes
 .../images/switch-thumbrounded-small.png      | Bin 0 -> 606 bytes
 components/togglebutton/appearance.md         | 192 ++++++++++++++++++
 .../images/button-fillmode-flat.png           | Bin 0 -> 300 bytes
 .../images/button-fillmode-link.png           | Bin 0 -> 312 bytes
 .../images/button-fillmode-outline.png        | Bin 0 -> 411 bytes
 .../images/button-fillmode-solid.png          | Bin 0 -> 495 bytes
 .../images/button-rounded-full.png            | Bin 0 -> 766 bytes
 .../images/button-rounded-large.png           | Bin 0 -> 453 bytes
 .../images/button-rounded-medium.png          | Bin 0 -> 417 bytes
 .../images/button-rounded-small.png           | Bin 0 -> 368 bytes
 .../images/button-shape-rectangle.png         | Bin 0 -> 675 bytes
 .../images/button-shape-square.png            | Bin 0 -> 615 bytes
 .../togglebutton/images/button-size-large.png | Bin 0 -> 593 bytes
 .../images/button-size-medium.png             | Bin 0 -> 422 bytes
 .../togglebutton/images/button-size-small.png | Bin 0 -> 380 bytes
 .../images/button-themecolor-base.png         | Bin 0 -> 513 bytes
 .../images/button-themecolor-dark.png         | Bin 0 -> 458 bytes
 .../images/button-themecolor-error.png        | Bin 0 -> 457 bytes
 .../images/button-themecolor-info.png         | Bin 0 -> 415 bytes
 .../images/button-themecolor-inverse.png      | Bin 0 -> 501 bytes
 .../images/button-themecolor-light.png        | Bin 0 -> 448 bytes
 .../images/button-themecolor-primary.png      | Bin 0 -> 616 bytes
 .../images/button-themecolor-secondary.png    | Bin 0 -> 1077 bytes
 .../images/button-themecolor-success.png      | Bin 0 -> 562 bytes
 .../images/button-themecolor-tertiary.png     | Bin 0 -> 613 bytes
 .../images/button-themecolor-warning.png      | Bin 0 -> 873 bytes
 .../togglebutton/images/primary-button.png    | Bin 0 -> 528 bytes
 68 files changed, 587 insertions(+), 5 deletions(-)
 create mode 100644 components/button/images/button-rounded-full.png
 create mode 100644 components/button/images/button-rounded-large.png
 create mode 100644 components/button/images/button-rounded-medium.png
 create mode 100644 components/button/images/button-rounded-small.png
 create mode 100644 components/buttongroup/appearance.md
 create mode 100644 components/buttongroup/images/button-fillmode-flat.png
 create mode 100644 components/buttongroup/images/button-fillmode-link.png
 create mode 100644 components/buttongroup/images/button-fillmode-outline.png
 create mode 100644 components/buttongroup/images/button-fillmode-solid.png
 create mode 100644 components/buttongroup/images/button-rounded-full.png
 create mode 100644 components/buttongroup/images/button-rounded-large.png
 create mode 100644 components/buttongroup/images/button-rounded-medium.png
 create mode 100644 components/buttongroup/images/button-rounded-small.png
 create mode 100644 components/buttongroup/images/button-shape-rectangle.png
 create mode 100644 components/buttongroup/images/button-shape-square.png
 create mode 100644 components/buttongroup/images/button-size-large.png
 create mode 100644 components/buttongroup/images/button-size-medium.png
 create mode 100644 components/buttongroup/images/button-size-small.png
 create mode 100644 components/buttongroup/images/button-themecolor-base.png
 create mode 100644 components/buttongroup/images/button-themecolor-dark.png
 create mode 100644 components/buttongroup/images/button-themecolor-error.png
 create mode 100644 components/buttongroup/images/button-themecolor-info.png
 create mode 100644 components/buttongroup/images/button-themecolor-inverse.png
 create mode 100644 components/buttongroup/images/button-themecolor-light.png
 create mode 100644 components/buttongroup/images/button-themecolor-primary.png
 create mode 100644 components/buttongroup/images/button-themecolor-secondary.png
 create mode 100644 components/buttongroup/images/button-themecolor-success.png
 create mode 100644 components/buttongroup/images/button-themecolor-tertiary.png
 create mode 100644 components/buttongroup/images/button-themecolor-warning.png
 create mode 100644 components/radiogroup/appearance.md
 create mode 100644 components/radiogroup/images/radio-group-size-large.png
 create mode 100644 components/radiogroup/images/radio-group-size-medium.png
 create mode 100644 components/radiogroup/images/radio-group-size-small.png
 create mode 100644 components/switch/appearance.md
 create mode 100644 components/switch/images/switch-size-large.png
 create mode 100644 components/switch/images/switch-size-medium.png
 create mode 100644 components/switch/images/switch-size-small.png
 create mode 100644 components/switch/images/switch-thumbrounded-full.png
 create mode 100644 components/switch/images/switch-thumbrounded-large.png
 create mode 100644 components/switch/images/switch-thumbrounded-medium.png
 create mode 100644 components/switch/images/switch-thumbrounded-small.png
 create mode 100644 components/togglebutton/appearance.md
 create mode 100644 components/togglebutton/images/button-fillmode-flat.png
 create mode 100644 components/togglebutton/images/button-fillmode-link.png
 create mode 100644 components/togglebutton/images/button-fillmode-outline.png
 create mode 100644 components/togglebutton/images/button-fillmode-solid.png
 create mode 100644 components/togglebutton/images/button-rounded-full.png
 create mode 100644 components/togglebutton/images/button-rounded-large.png
 create mode 100644 components/togglebutton/images/button-rounded-medium.png
 create mode 100644 components/togglebutton/images/button-rounded-small.png
 create mode 100644 components/togglebutton/images/button-shape-rectangle.png
 create mode 100644 components/togglebutton/images/button-shape-square.png
 create mode 100644 components/togglebutton/images/button-size-large.png
 create mode 100644 components/togglebutton/images/button-size-medium.png
 create mode 100644 components/togglebutton/images/button-size-small.png
 create mode 100644 components/togglebutton/images/button-themecolor-base.png
 create mode 100644 components/togglebutton/images/button-themecolor-dark.png
 create mode 100644 components/togglebutton/images/button-themecolor-error.png
 create mode 100644 components/togglebutton/images/button-themecolor-info.png
 create mode 100644 components/togglebutton/images/button-themecolor-inverse.png
 create mode 100644 components/togglebutton/images/button-themecolor-light.png
 create mode 100644 components/togglebutton/images/button-themecolor-primary.png
 create mode 100644 components/togglebutton/images/button-themecolor-secondary.png
 create mode 100644 components/togglebutton/images/button-themecolor-success.png
 create mode 100644 components/togglebutton/images/button-themecolor-tertiary.png
 create mode 100644 components/togglebutton/images/button-themecolor-warning.png
 create mode 100644 components/togglebutton/images/primary-button.png

diff --git a/components/button/appearance.md b/components/button/appearance.md
index 58e6acccd7..1fc1bd4951 100644
--- a/components/button/appearance.md
+++ b/components/button/appearance.md
@@ -55,14 +55,14 @@ The `FillMode` controls how the TelerikButton is filled. You can set it to a mem
 
 ## Rounded
 
-The `Rounded` paramter applies the `border-radiums` CSS rule to the button to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Rounded` class:
+The `Rounded` parameter applies the `border-radiums` CSS rule to the button to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Rounded` class:
 
 | Class members | Result |
 |------------|--------|
-|`Small` |add screenshot here|
-|`Medium`|add screenshot here|
-|`Large`|add screenshot here|
-|`Full`|add screenshot here|
+|`Small` |![button-rounded](images/button-rounded-small.png)|
+|`Medium`|![button-rounded](images/button-rounded-medium.png)|
+|`Large`|![button-rounded](images/button-rounded-large.png)|
+|`Full`|![button-rounded](images/button-rounded-full.png)|
 
 >caption The built-in values of the Rounded attribute
 
@@ -167,3 +167,26 @@ The color of the button is controlled through the `ThemeColor` parameter. You ca
 |`Light`|![button-light](images/button-themecolor-light.png)|
 |`Inverse`|![button-inverse](images/button-themecolor-inverse.png)|
 
+
+>caption The built-in ThemeColors
+
+````CSHTML
+@* The built-in button colors *@
+
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.Button.ThemeColor)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+    foreach (var field in fields)
+    {
+        string themeColor = field.GetValue(null).ToString();
+
+        <div style="float:left; margin: 20px;">
+            <TelerikToggleButton ThemeColor="@themeColor">@themeColor</TelerikToggleButton>
+        </div>
+    }
+}
+````
+
diff --git a/components/button/images/button-rounded-full.png b/components/button/images/button-rounded-full.png
new file mode 100644
index 0000000000000000000000000000000000000000..f79ebff27a621a0694486023a018d9d6c2362f07
GIT binary patch
literal 766
zcmV<a0s;MrP)<h;3K|Lk000e1NJLTq001=r001Hg0ssI2a90Kd00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0+UHZK~z{r?U-3|
z;xH6Nvo^As&|3-n2&^Np3%i)7Vm35?Kp$JLDbm(xi&Q@Pe56#ibnivOL*(W5v-zK|
z9u@PQPN&ssHJwfegF$M5S9G8oon=@!Vfn7t>wdqVOeV^h_VIZ9t%K)42fEGYbB54n
zxCnU@kdJA=1~XG83k+E<mkbY`OW%Ck?Up%X4#cn$q(lTM5%s_;A8Rz5&G_i`$+C=z
zL{Ow%xbtl`n^@r#L_`o-F|gvu$BL*;6Bi;Pi@4aBvE}2qp|acUL^UcZqVq)C@{x?a
zB6?4NRmMWh4A}BLZ}Jps3dPKTF(2h%u~@K0^nA7&1<j9Cp8P}FX*QZ2UfvrzC^s01
zr4D00&X*-$@7<hCk#>H)y7RGr><8JHkM9WzsmOdG?YybEgI4d@V<ualf8TvH8*fDz
zzkFC=B$hgi`Nre%;cyU{5)boND<2jZiKPx>K5iePp(A2GjKorhF<-ym=X{yy=J^uU
zEb<l2EKBly?fga3CSTr4+T<%9>A^@Wbr|!FMk8(mqERANJ}fX2OC831>MK%YO2o>i
zZXRN(!<cWqUUT?Gri99O$eT%<<NV%LkI5R8kHd?RSn4q5qiizsB2(fapGu%;b*bAS
z`LL*1pMk-aC9V(R_RR;jd=yVr1)l`s&bzcNAD5ruaLE1;y{I6Ic&+;tunMSfixJgG
zAc!pDVq?aU4=4d>iEt!XS<jy!?tDO@i8YIe5Dr0+cHxx|__%yg@|TKV8BT)|5m66(
z^8wrC{x1tL^oC>%WVp|sdn6zqTrL-i7B)cXCn&}e;VV1`I?#<GM}Gz~T!g#{%XjB|
wK4Z@|;s*rwT6jeVy3tvNg;O!#H*vfD0RS!XkJ+u`XaE2J07*qoM6N<$g5h^q6951J

literal 0
HcmV?d00001

diff --git a/components/button/images/button-rounded-large.png b/components/button/images/button-rounded-large.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e3eb36329d4efb417797cdfacd4e68eb82d9471
GIT binary patch
literal 453
zcmV;$0XqJPP)<h;3K|Lk000e1NJLTq001Tc001Kh0ssI2carZ)00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0a{5!K~z{r?Uze#
zgD@Bddp4g2u99$%z%>%M1<$Ym2?-TwC0Nl9`*#`#QrcpoMrBquK{Md6uwVLz^9Pb`
z+va&5hGDP_7~p}8yjLj6uIth?EsElOF-_CJ0~?%Vmnccxq@{PEEK3N<E>V(rC_EkA
zt^?TMB)ddOCQ0(98#u`>*^*k=k|2&_eAf5y_KfX4ntU5L$u4=CWZ)P~U>zKjnNGkj
zPoXC{3=B~b?bVZ>b=^2wi;__k)%S6Sq+9#8$t;(y)qHB&KF!9!Np{IoBx@H7``O?N
zyLOTf3{mlI{`st$Jn^9@4Oj<tokuK6PIL3uj+jYek5tXW-}WdcJH~b{O{Rd8?2=z3
ztLliT<jWq=l>7->65wa-JYTgklf;%j%QCuG2e83Oc8QY25d!-LEmf=*Jb1<Nu|!D%
v93il!#}@m%3~{y@A4tG$@&WvZWZ!=P@PL-HHHW_g00000NkvXXu0mjf^7y@m

literal 0
HcmV?d00001

diff --git a/components/button/images/button-rounded-medium.png b/components/button/images/button-rounded-medium.png
new file mode 100644
index 0000000000000000000000000000000000000000..f7670290575b4fe45b4478012397fab92d936b30
GIT binary patch
literal 417
zcmV;S0bc%zP)<h;3K|Lk000e1NJLTq001ih001Kh0ssI2f^1~^00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0X9iQK~z{r?Uzk%
zgD?~Zdo~V(k78c~`4~+&MERFkz=l98A#OmwXI>MB&>aR^F)Q1$n30Jh{5I~*Szs6R
zeV^xf>>gO)Vyj(HmSxj4U+(F;4lcIZ1w~Qt7Wcr#)?*dm^?YsxTx>lHh_m2W1zDEi
zzhWI?Ej*!Pp1lGWTmMc0JyC@h<xR-YtW2noH+7-pB_WlI0wcbUSsZKM69K76@9U`L
zMP#gAaDU>%N|QjCvJmH^F4Nj<{{qVeX_~gb5t%1OKNH`R@6))AsNnj%0bJ$NbPil>
z{YM3)d@Q~M&2dp+2EP8d(GVNxm$-2OpmQ+DVD&Rto8^KeNp4#K7hBH);w-QWaGSx6
zWgFmP>#+*(<y2J_Z*fUo*UMjN!!Y1Fhue&6V1bLRcEMikT`-Q{&C1~#rtrgu00000
LNkvXXu0mjfCEl+r

literal 0
HcmV?d00001

diff --git a/components/button/images/button-rounded-small.png b/components/button/images/button-rounded-small.png
new file mode 100644
index 0000000000000000000000000000000000000000..d3ace4f56081ed68d199c764f63aa8c5bb8e0e93
GIT binary patch
literal 368
zcmeAS@N?(olHy`uVBq!ia0vp^T0pGC!2~3ieY%qfq!^2X+?^QKos)S9<glbW`Z_W&
zZ0zU$lgJ9>a~60+7BevL9R^{><M}I6fErjmT^vIq+}~dJ<!dq!XiGdFrtf^7>AS$W
z#yL*^4mT}bwC-be`l`;Aoo>b%Z+2&8A9jA-b#+h1{e%3613X!~1CG?(|DL`wL9mOd
zf7d!|kcdcyNX1H<n%mplLBe&7>&>DHtyX8O^)NVR{7><aQP_&ta`pP3Eahg4d{6F{
zyxKcA>PWWe=d%3#58HWWKFJeWE#3L|Pt-q~n#(4a51%qITJG$5&inF~t$Su4@yhp_
zCt+7A?7xA-_524Jp4r>Zi#^YMrnW}q*zNyy-j9v0TKs*dP*qj_R?S_n_^14d!`Dk|
zCvb@^)cEjXe`QV0o25;z8eBF~#|7o(jSeb_814`0{`9$qan*wczW?)1`vXIX!PC{x
JWt~$(69A>nnmPag

literal 0
HcmV?d00001

diff --git a/components/buttongroup/appearance.md b/components/buttongroup/appearance.md
new file mode 100644
index 0000000000..2d80018073
--- /dev/null
+++ b/components/buttongroup/appearance.md
@@ -0,0 +1,187 @@
+---
+title: Appearance
+page_title: ButtonGroup Button Appearance
+description: Appearance settings of the Buttons in the ButtonGroup for Blazor.
+slug: buttongroup-appearance
+tags: telerik,blazor,buttongroup,button,appearance
+published: True
+position: 35
+---
+
+# Appearance Settings
+
+You can control the appearance of the buttons in the `<TelerikButtonGroup>` by setting the following attributes:
+
+* [FillMode](#fillmode)
+* [Rounded](#rounded)
+* [Shape](#shape)
+* [Size](#size)
+* [ThemeColor](#themecolor)
+
+You can use all of them together to achieve the desired appearance. This article will explain their effect one by one.
+
+## FillMode
+
+The `FillMode` controls how the TelerikButton is filled. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.FillMode` class:
+
+| Class members | Result |
+|------------|--------|
+|`Solid` <br /> default value|![](images/button-fillmode-solid.png)|
+|`Flat`|![](images/button-fillmode-flat.png)|
+|`Outline`|![](images/button-fillmode-outline.png)|
+|`Link`|![](images/button-fillmode-link.png)|
+
+>caption The built-in Fill modes
+
+````CSHTML
+@* These are all built-in fill modes *@
+
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.Button.FillMode)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+    <TelerikButtonGroup>
+        @foreach (var field in fields)
+        {
+            string fillmode = field.GetValue(null).ToString();
+            <ButtonGroupButton FillMode="@fillmode">@fillmode</ButtonGroupButton>
+        }
+    </TelerikButtonGroup>
+}
+````
+
+## Rounded
+
+The `Rounded` paramter applies the `border-radiums` CSS rule to the button to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Rounded` class:
+
+| Class members | Result |
+|------------|--------|
+|`Small` |![button-rounded](images/button-rounded-small.png)|
+|`Medium`|![button-rounded](images/button-rounded-medium.png)|
+|`Large`|![button-rounded](images/button-rounded-large.png)|
+|`Full`|![button-rounded](images/button-rounded-full.png)|
+
+>caption The built-in values of the Rounded attribute
+
+````CSHTML
+@* The built-in rounded edges of the button.  *@
+
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Rounded)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+    <TelerikButtonGroup>
+        @foreach (var field in fields)
+        {
+            string rounded = field.GetValue(null).ToString();
+            <ButtonGroupButton Rounded="@rounded">@rounded</ButtonGroupButton>
+        }
+    </TelerikButtonGroup>
+}
+````
+
+## Shape
+
+The `Shape` attribute defines the geometric shape of the button. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Shape` class:
+
+| Class members | Result |
+|---------------|--------|
+| `Rectangle`   |![button-rectangle](images/button-shape-rectangle.png)|
+| `Square`   |![button-square](images/button-shape-square.png)|
+| `Circle`   |To create a circular button you should set the `Shape` attribute to **Square**, and the `Rounded` attribute to **Full**|
+
+
+>note The width and height of the geometric shapes depend on the amount of text in the button, and the size of the font.
+
+>caption The built-in button shapes
+
+````CSHTML
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Shape)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+    <TelerikButtonGroup>
+        @foreach (var field in fields)
+        {
+            string shape = field.GetValue(null).ToString();
+            <ButtonGroupButton Shape="@shape">@shape</ButtonGroupButton>
+        }
+    </TelerikButtonGroup>
+}
+````
+
+## Size
+
+You can increase or decrease the size of the button by setting the `Size` parameter to a member of the `Telerik.Blazor.ThemeConstants.Button.Size` class:
+
+| Class members | Result |
+|---------------|--------|
+| `Small`   |![button-small](images/button-size-small.png)|
+| `Medium`   |![button-medium](images/button-size-medium.png)|
+| `Large`   |![button-large](images/button-size-large.png)|
+
+>caption The built-in button sizes
+
+````CSHTML
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Size)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+    <TelerikButtonGroup>
+        @foreach (var field in fields)
+        {
+            string size = field.GetValue(null).ToString();
+            <ButtonGroupButton Size="@size">@size</ButtonGroupButton>
+        }
+    </TelerikButtonGroup>
+}
+````
+
+## ThemeColor
+
+The color of the button is controlled through the `ThemeColor` parameter. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.ThemeColor` class:
+
+| Class members | Result |
+|------------|--------|
+|`Base` <br /> default value |![button-base](images/button-themecolor-base.png)|
+|`Primary`|![button-primary](images/button-themecolor-primary.png)|
+|`Secondary`|![button-secondary](images/button-themecolor-secondary.png)|
+|`Tertiary`|![button-tertiary](images/button-themecolor-tertiary.png)|
+|`Info`|![button-info](images/button-themecolor-info.png)|
+|`Success`|![button-success](images/button-themecolor-success.png)|
+|`Warning`|![button-warning](images/button-themecolor-warning.png)|
+|`Error`|![button-error](images/button-themecolor-error.png)|
+|`Dark`|![button-dark](images/button-themecolor-dark.png)|
+|`Light`|![button-light](images/button-themecolor-light.png)|
+|`Inverse`|![button-inverse](images/button-themecolor-inverse.png)|
+
+
+>caption The built-in ThemeColors
+
+````CSHTML
+@* The built-in button colors *@
+
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.Button.ThemeColor)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+    <TelerikButtonGroup>
+        @foreach (var field in fields)
+        {
+            string themeColor = field.GetValue(null).ToString();
+            <ButtonGroupButton ThemeColor="@themeColor">@themeColor</ButtonGroupButton>
+        }
+    </TelerikButtonGroup>
+}
+````
+
diff --git a/components/buttongroup/images/button-fillmode-flat.png b/components/buttongroup/images/button-fillmode-flat.png
new file mode 100644
index 0000000000000000000000000000000000000000..6d3f957af34c338f58a146d8901fb1f8d754b66b
GIT binary patch
literal 300
zcmeAS@N?(olHy`uVBq!ia0vp^CO|C9!2~3;cHVFTQjEnx?oJHr&dIz4a#+$GeH|GX
zHuiJ>Nn{1`ISV`@iy0XB4ude`@%$AjK*58aE{-7)?r*0U@*P&-ajl-p!($nCbi!nV
zf+-$z7NjejGF-H*T;pilf{;^(!b2-R2s4{8^C$nD#<I9bL#urel<2r4x9ng~<xck<
zvor5y{cC!`F8xiag!#nYH0xa_Zu?HV^J+)hmQQQbcfPsU*Au_bNaow;#iu5^Yb)9x
zSpR;H=#RDC;u`J`KW=V%!nbzP^iWGFy`yat)zc48e)~#f%9Y|NId_lM*-eU-v|YaM
k4daC0@=%+VBJ`H>cdz{3$(O9<2lNbsr>mdKI;Vst0H`;26aWAK

literal 0
HcmV?d00001

diff --git a/components/buttongroup/images/button-fillmode-link.png b/components/buttongroup/images/button-fillmode-link.png
new file mode 100644
index 0000000000000000000000000000000000000000..c7c4d7aa2bf5b4310b4d2bdeb0866a30ebeb6d1c
GIT binary patch
literal 312
zcmeAS@N?(olHy`uVBq!ia0vp^CO|CB!2~4tJg|-jQjEnx?oJHr&dIz4a#+$GeH|GX
zHuiJ>Nn{1`ISV`@iy0XB4ude`@%$AjK*6(~E{-7)?r*0!ay1(WxK>ZqiFxAC>J<Ly
z(BvH_0$X;vM|V{4IPy<aQ#-gUpoDF5*AqdNw6-57)Z?x+o-7L4Br{dV{i#n8^Ay*+
zeDagy*O=urXl*}b|8!dZ_uhF839R$mU+l9oy%gd-<C!?i?h}P!2Qy9uM;EI7T5x$r
zrMJrO6Q-A@UFFy+yp=b|e!AAQ6-9{`DjuDB`PJ{of{!kJS4)K^_v)vMdp=w?fjiHT
zZAna&KvDnm)BiIyA6M<(-D_4nZL+ujw8fL2u8@iFTWMbMtX-a8@_#ANV+@|IelF{r
G5}E+iwtM^l

literal 0
HcmV?d00001

diff --git a/components/buttongroup/images/button-fillmode-outline.png b/components/buttongroup/images/button-fillmode-outline.png
new file mode 100644
index 0000000000000000000000000000000000000000..804a6009bac98ebc3106f2417921ee6351cf1d51
GIT binary patch
literal 411
zcmeAS@N?(olHy`uVBq!ia0vp^PC%^0!2~2z4$XK9q!^2X+?^QKos)S9<glbW`Z_W&
zZ0zU$lgJ9>a~60+7BevL9R^{><M}I6fEo-uT^vIq+~3YPDA=qZ;2JEgdZSH5Sh{e}
z&6dYE`E(BdNo7=24D6h&aM*h7sYCTj;`!cUPgY#~UK<+vNJ&A9skq3WnSWX4CGnHZ
zD>%+<UC!tl8_OcSBSXdEqDSYVi9)W)`o-bhX%DJ$SgvogXs^$l<Fn>igH6wywA%bV
z+=cRAkKXaDa^b6r=`L)%>o7gX+Ip_?&Tn0}^n}=)cUUZP<Wt)l+-?%`_2c42dd7$E
zc-;vL4w!DFzGtShOGX7Z!)~`d$Fjxm^=)UCSRdN#lCg$UqN+7Ldqr;LqeW8D&kw3P
zJr0+jYNxWh<3dICk-5yP4%IGRxa->Q=&(SkhG(fg{0pyznJ_o)s+yCzpKXC*TkqV1
z9D00NDsE8ME30n0cH+tNbhZ79)_aRdo&LnIr+?<>TVHRc0Rxo5)78&qol`;+08V<O
A3jhEB

literal 0
HcmV?d00001

diff --git a/components/buttongroup/images/button-fillmode-solid.png b/components/buttongroup/images/button-fillmode-solid.png
new file mode 100644
index 0000000000000000000000000000000000000000..af9c07e7e074181def8453aaa848ab4422ce8c55
GIT binary patch
literal 495
zcmV<L0TBL)P)<h;3K|Lk000e1NJLTq001=r001Kh0ssI2y9?E!00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0fb3JK~z{r?bkta
zf-o3{;hrtMjPWYu9>6)!TMz_hSTJs=wrl<V@CyOsOp8!phIbW1I(anKfsfm=TaWK@
zxuj{T=MDx)*kt>PqNu9sXYQ`oD<o{PeR-bqlDUI~O>6RHS@yk*AYs$y8`9=`uXXzH
z!;Rm@5z?U)GSnCyl@KbbXWO*D7dvzPMUb#*VxPN7eA<_Sv-j5Fj%S5;Z01~_AB{~?
zd2(!DL>uw`?bzU$WsMy^8c5%ebh!T%Q~H{ElMRamU0-+Q!1FzwPPnmoQ5-zZQALj_
zocJz?`4u`SA?bA-z-KOChStXfvQ~oI`NMvYu<6%6?%>r(+J1>X6MdG_k7*mB4m?TI
zIA5o)x3bTD>hC^#gT`T?!mFpP@w3ldrMJXa@&7TduRU3+`3f?tj-gH;k4-A*e=+(E
z@%?9RUy>wW%Lo!SZN4FGzV~wb@a&G~^Cbico7UvRT|-%xykx%4=d=6%1vmahQQ+Bq
l-e7=)O}1~DZN7K9-R@6!`!d#9`8)ss002ovPDHLkV1mT3>CpfH

literal 0
HcmV?d00001

diff --git a/components/buttongroup/images/button-rounded-full.png b/components/buttongroup/images/button-rounded-full.png
new file mode 100644
index 0000000000000000000000000000000000000000..f79ebff27a621a0694486023a018d9d6c2362f07
GIT binary patch
literal 766
zcmV<a0s;MrP)<h;3K|Lk000e1NJLTq001=r001Hg0ssI2a90Kd00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0+UHZK~z{r?U-3|
z;xH6Nvo^As&|3-n2&^Np3%i)7Vm35?Kp$JLDbm(xi&Q@Pe56#ibnivOL*(W5v-zK|
z9u@PQPN&ssHJwfegF$M5S9G8oon=@!Vfn7t>wdqVOeV^h_VIZ9t%K)42fEGYbB54n
zxCnU@kdJA=1~XG83k+E<mkbY`OW%Ck?Up%X4#cn$q(lTM5%s_;A8Rz5&G_i`$+C=z
zL{Ow%xbtl`n^@r#L_`o-F|gvu$BL*;6Bi;Pi@4aBvE}2qp|acUL^UcZqVq)C@{x?a
zB6?4NRmMWh4A}BLZ}Jps3dPKTF(2h%u~@K0^nA7&1<j9Cp8P}FX*QZ2UfvrzC^s01
zr4D00&X*-$@7<hCk#>H)y7RGr><8JHkM9WzsmOdG?YybEgI4d@V<ualf8TvH8*fDz
zzkFC=B$hgi`Nre%;cyU{5)boND<2jZiKPx>K5iePp(A2GjKorhF<-ym=X{yy=J^uU
zEb<l2EKBly?fga3CSTr4+T<%9>A^@Wbr|!FMk8(mqERANJ}fX2OC831>MK%YO2o>i
zZXRN(!<cWqUUT?Gri99O$eT%<<NV%LkI5R8kHd?RSn4q5qiizsB2(fapGu%;b*bAS
z`LL*1pMk-aC9V(R_RR;jd=yVr1)l`s&bzcNAD5ruaLE1;y{I6Ic&+;tunMSfixJgG
zAc!pDVq?aU4=4d>iEt!XS<jy!?tDO@i8YIe5Dr0+cHxx|__%yg@|TKV8BT)|5m66(
z^8wrC{x1tL^oC>%WVp|sdn6zqTrL-i7B)cXCn&}e;VV1`I?#<GM}Gz~T!g#{%XjB|
wK4Z@|;s*rwT6jeVy3tvNg;O!#H*vfD0RS!XkJ+u`XaE2J07*qoM6N<$g5h^q6951J

literal 0
HcmV?d00001

diff --git a/components/buttongroup/images/button-rounded-large.png b/components/buttongroup/images/button-rounded-large.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e3eb36329d4efb417797cdfacd4e68eb82d9471
GIT binary patch
literal 453
zcmV;$0XqJPP)<h;3K|Lk000e1NJLTq001Tc001Kh0ssI2carZ)00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0a{5!K~z{r?Uze#
zgD@Bddp4g2u99$%z%>%M1<$Ym2?-TwC0Nl9`*#`#QrcpoMrBquK{Md6uwVLz^9Pb`
z+va&5hGDP_7~p}8yjLj6uIth?EsElOF-_CJ0~?%Vmnccxq@{PEEK3N<E>V(rC_EkA
zt^?TMB)ddOCQ0(98#u`>*^*k=k|2&_eAf5y_KfX4ntU5L$u4=CWZ)P~U>zKjnNGkj
zPoXC{3=B~b?bVZ>b=^2wi;__k)%S6Sq+9#8$t;(y)qHB&KF!9!Np{IoBx@H7``O?N
zyLOTf3{mlI{`st$Jn^9@4Oj<tokuK6PIL3uj+jYek5tXW-}WdcJH~b{O{Rd8?2=z3
ztLliT<jWq=l>7->65wa-JYTgklf;%j%QCuG2e83Oc8QY25d!-LEmf=*Jb1<Nu|!D%
v93il!#}@m%3~{y@A4tG$@&WvZWZ!=P@PL-HHHW_g00000NkvXXu0mjf^7y@m

literal 0
HcmV?d00001

diff --git a/components/buttongroup/images/button-rounded-medium.png b/components/buttongroup/images/button-rounded-medium.png
new file mode 100644
index 0000000000000000000000000000000000000000..f7670290575b4fe45b4478012397fab92d936b30
GIT binary patch
literal 417
zcmV;S0bc%zP)<h;3K|Lk000e1NJLTq001ih001Kh0ssI2f^1~^00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0X9iQK~z{r?Uzk%
zgD?~Zdo~V(k78c~`4~+&MERFkz=l98A#OmwXI>MB&>aR^F)Q1$n30Jh{5I~*Szs6R
zeV^xf>>gO)Vyj(HmSxj4U+(F;4lcIZ1w~Qt7Wcr#)?*dm^?YsxTx>lHh_m2W1zDEi
zzhWI?Ej*!Pp1lGWTmMc0JyC@h<xR-YtW2noH+7-pB_WlI0wcbUSsZKM69K76@9U`L
zMP#gAaDU>%N|QjCvJmH^F4Nj<{{qVeX_~gb5t%1OKNH`R@6))AsNnj%0bJ$NbPil>
z{YM3)d@Q~M&2dp+2EP8d(GVNxm$-2OpmQ+DVD&Rto8^KeNp4#K7hBH);w-QWaGSx6
zWgFmP>#+*(<y2J_Z*fUo*UMjN!!Y1Fhue&6V1bLRcEMikT`-Q{&C1~#rtrgu00000
LNkvXXu0mjfCEl+r

literal 0
HcmV?d00001

diff --git a/components/buttongroup/images/button-rounded-small.png b/components/buttongroup/images/button-rounded-small.png
new file mode 100644
index 0000000000000000000000000000000000000000..d3ace4f56081ed68d199c764f63aa8c5bb8e0e93
GIT binary patch
literal 368
zcmeAS@N?(olHy`uVBq!ia0vp^T0pGC!2~3ieY%qfq!^2X+?^QKos)S9<glbW`Z_W&
zZ0zU$lgJ9>a~60+7BevL9R^{><M}I6fErjmT^vIq+}~dJ<!dq!XiGdFrtf^7>AS$W
z#yL*^4mT}bwC-be`l`;Aoo>b%Z+2&8A9jA-b#+h1{e%3613X!~1CG?(|DL`wL9mOd
zf7d!|kcdcyNX1H<n%mplLBe&7>&>DHtyX8O^)NVR{7><aQP_&ta`pP3Eahg4d{6F{
zyxKcA>PWWe=d%3#58HWWKFJeWE#3L|Pt-q~n#(4a51%qITJG$5&inF~t$Su4@yhp_
zCt+7A?7xA-_524Jp4r>Zi#^YMrnW}q*zNyy-j9v0TKs*dP*qj_R?S_n_^14d!`Dk|
zCvb@^)cEjXe`QV0o25;z8eBF~#|7o(jSeb_814`0{`9$qan*wczW?)1`vXIX!PC{x
JWt~$(69A>nnmPag

literal 0
HcmV?d00001

diff --git a/components/buttongroup/images/button-shape-rectangle.png b/components/buttongroup/images/button-shape-rectangle.png
new file mode 100644
index 0000000000000000000000000000000000000000..8313922f2086fb75c45f249deb27a32f4402dde2
GIT binary patch
literal 675
zcmV;U0$lxxP)<h;3K|Lk000e1NJLTq002<{001Hg0ssI2s9T~A00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0ys%TK~!i%?U!AW
zvM>-uXKk_>aVaDF5VkSuDu(!1#e?Mw{>-y;yE_R1iBkhsee(s*6CIl59*iPy_u(;Y
z=gZ}?+wD}KKn;RoS~(X*QI_Rbpj@w42#RUtd^jBR`9Oi7m=4={zu(`227+QbItR_@
z%#6+f(&CJNDtK_eo@FwbW=a>YKxOeH?l2<+#dLJ`vQ8#RwumP{3t+@BUvm$kq=(>G
z5Y{Bzq_U~5LA;RQm@3W|jZQ{ovq%rp>eDR0G@NTOaPkQqoLx66lcgM!hE7k0Cb2!P
zK4%s-lknY<=sdaYi6hfP<MATb!`xGMUMEo_1~+@?;%sK;xXx$GA)x2TyZH9D8@)F9
zO!xDJB+0DjO=rZ2>M>@Kvqv6iao%pXc-!)@;#j7@@=cOey{Cerr@1Z&=kl0O)Go})
znTB(^v#YZn=5m^TqRvw|qr(%!3k1cqtMmME@}He`N-0hBUe5E!^}O_QmgPmmAy4@m
zr7KJ2j7db2`N>%>BuR!0>&}P~wZ!n!%UMdRSKR`nw7bhHEfbT>orI2`?`^ZnCy!#b
zrZY7}wHVKDK~HBBLU2|he?z55&l~M8r??cQ{Oon6RqV4WwOhS%ZpN^iqLtq||9j|e
zI$!S&v^Z}zoAaOIgMXt+DfkELLykKFK{5Tq&Jcaq+ZOZ`2LFfiYZ;xHAv!Ci%AkRu
zm=4<+uN}wZQJ)Wv)9KXmUUj?OilR6K3e+Gdrj_$>7@qU}{tbg*G$EQY%69+&002ov
JPDHLkV1n+oJgNWy

literal 0
HcmV?d00001

diff --git a/components/buttongroup/images/button-shape-square.png b/components/buttongroup/images/button-shape-square.png
new file mode 100644
index 0000000000000000000000000000000000000000..59cc3d9116f862dbdd599b61ba3034b1b61686b6
GIT binary patch
literal 615
zcmeAS@N?(olHy`uVBq!ia0vp^jzH|d!2~2vo$TEXq!^2X+?^QKos)S9<glbW`T|vK
z?C1WI$O`0h7I;J!GcfQS24TkI`72U@8vb~?IEG|6zn$SYsmVaV^?A-5w{uG09nLG>
za}rsZl(;i-LZtQn%bpw}rwqCk6MwA@n(OyT{-m4zyoZZrXD!q0QsQTEaZT{!+u|G=
zS{hr=dg$>-2QW8sT9uuEz>LYvg%Ny(ADRW*Uw^&D#>!M&q`-Gtk*`hxhBgGT|Jil8
ze{lmy+mS@eBM13`=-=YQhMhdO7q45m>*`hu+jr)HMGKPV9lMw|e>Gd&iPAF*jtecn
z)6|yIui6kUyKC{8LxpLU7j8Z~k>?Y+xTQ7X+1h3ygMV4MYi3=!zVUu5%a?f(g0JTl
z*1b)5DgJWL$?Ad^pLq38<t|%0CtKd&^ue9?r$5~F_`dax=g;poXD;|SA(C(U>7|wD
zGndcP{dRViT5$Sn$yv(mrb_L1Jwxwq>$&_{Bv*9x#NFo;&T|62*eq{t@aklmR>_=M
zE6#n?moa#7p{ua{;5^|oMK5xF=TClj@YIY&y-uaF(`&5QXHPx0?D*R6*Zj23?qUDk
z<?y|?)Fo;5j=(RQ9p{*A&i8qmJYmwJ)it&3<^Fd+Oq$7enP>4I#zzK+q-4Y#Wd0;9
z<$M15r?Cb+V3`X)Kv45kt0$Fl?9dS27}UN<BX9fcdEe*#{%iNCKKu5z(9o%k4J$a#
koNO%PkShGp`24f9?LK>j9Pw}7z{J7e>FVdQ&MBb@0KE(rkN^Mx

literal 0
HcmV?d00001

diff --git a/components/buttongroup/images/button-size-large.png b/components/buttongroup/images/button-size-large.png
new file mode 100644
index 0000000000000000000000000000000000000000..9e14f3f387acd2a533919f98c3eca3145c937d2f
GIT binary patch
literal 593
zcmV-X0<QguP)<h;3K|Lk000e1NJLTq001rk001ut0ssI26Nhib00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0p>|WK~z{r?U%o6
z!ax+q`?uY6OQt{(1fie>>C!>F>Y{YWB83(QyErsiw1W<XmK5wJExK4rjXwgZii2rv
zXZtj-jnE^N8ZHj^nY{M`-w(MLbJ<($3_^v4r{XxyU@$N^0&x(E@#`v<W!bj<$&vYd
z4xt#ou40-dUcwOw#dx9O!B!a#hacR5P>dHU9zunMP+_t2D)4fGm%>Ig6he}kfvatR
zP>dHU9zm;&+tt&gL<u1@metx%T9Oc@flYq`Rk022h!Pq(DOUBmmOrF)UzS2qF|Usa
zk(I`H)%Z3GLuFh`6B50AcIz(p`A}4ha-5Ky?v@c_>sjgd`*7&ph?R=kg<qXgbgAN&
zk*>N@!IeJ{it$^kjA|*^pi;-JyEGIS7XB*Eu<DNOXw?8lHyL+qaqUl#D$cA^jxQhP
zbg`n}RSF3TgrowDT52YSe{mVLRfjG&6@QiwbG-b5D}RDiX`abar0_7qCEOxCClRWw
zRs0C_t~3iWY)m4r)^(Vbi&O*#CwcX=d4IrG>GgW=|KjaY%_ijKs1Pb0q|a|(v9SRV
zit&M{Y=cl?AyioGyozBMHg_Nt<AsU`TLsQ`lgR`x;lgw}WgjTv3)ZqMlOqrZp%}le
f5;{WVH;cs=q*a(E5dDyP00000NkvXXu0mjf725uP

literal 0
HcmV?d00001

diff --git a/components/buttongroup/images/button-size-medium.png b/components/buttongroup/images/button-size-medium.png
new file mode 100644
index 0000000000000000000000000000000000000000..680b13d414a402bd8098e34e4e564531290256fd
GIT binary patch
literal 422
zcmV;X0a^ZuP)<h;3K|Lk000e1NJLTq001li001Qj0ssI2w&|Rn00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0Xs=VK~z{r?Uzk%
zgD?<Adp74X^;zH^fpZXU5q>2Whz*5yO+ODaa!SOe!o;ooR<>p7JxBua+u{KsLhvkN
znx?w03-`bR7h4G%(RJN8j$iJX=NT@x5;mf3Ti)d!xY$Z~7SS}#=UKqTRw6_QAwuvh
z0uM4gMvfwnl!|hmJOLM5iN6$)$4aMJsul5`7G`BdW5N`&LB+9~h}A7)aoa1Vf;cn7
zIioEuB3SS!23dTexZ<j%((ucVqpB*rVRyJugiIo(uXmo9hy)WXs_4dx({xAE!*l~&
zY$g6zgt5|KWz)3bkci83#E(7v#e6{o?nWZN;UsZzCk|#eqAbggvw(}OM2HYVgkU3Z
zHp1cO9N=Or;aLRUY<=JJE|(0$u=^IpUq2iXaW--dEO4=vun{jLM64{!H|sOWt14l`
QqyPW_07*qoM6N<$f;ac8>;M1&

literal 0
HcmV?d00001

diff --git a/components/buttongroup/images/button-size-small.png b/components/buttongroup/images/button-size-small.png
new file mode 100644
index 0000000000000000000000000000000000000000..9f7d629add0eb26f3225889d3fdd438f5d9209f6
GIT binary patch
literal 380
zcmeAS@N?(olHy`uVBq!ia0vp^3P3Ew!2~4x7ig6NDaPU;cPEB*=VV?2IV|apzK#qG
z8~eHcB(eheoCO|{#S9F5he4R}c>anMpawxt7sn6}@3+&Ug`5o}+;(qU)3$X3|0cdS
zPIuC5W*V+~ySeUB`agD_$rq;2TfXCr<)qA`$vb99GuPf1cU{=i$f7mrlSAzF*z2`D
znYYD2oY2scZo`0yQ`k>!s)=UOn)HuZ`j1A#{r9JZ0w$K&PpD}6FzI82XZR1Jg0Gt4
ztBzb(-gU}CtfS_khiTuGk_EGw4)Go<-nDnm73O0%5AYOgo@tho`D`I};<L<q0Y9(R
zjm!PM7Ivt1P4~WM(j&<6^(*TNk6rRJJe}QtOnl1_tgt|ITe^YW4_oh&SzjHdrTTk2
zxL&GHX#UFZE&I*Mu!gQBHVyyHzh&<_+ORD1TD)jQ|Kn_i-&++YIJgGM?da%cKKy~T
YW5@c1x-0BrfFZ`<>FVdQ&MBb@0D{k*N&o-=

literal 0
HcmV?d00001

diff --git a/components/buttongroup/images/button-themecolor-base.png b/components/buttongroup/images/button-themecolor-base.png
new file mode 100644
index 0000000000000000000000000000000000000000..aca44d6179cc12d743b8e792bd92b4957bff106d
GIT binary patch
literal 513
zcmeAS@N?(olHy`uVBq!ia0vp^W<adM!2~3IE#sts6k~CayA#8@b22Z19F}xPUq=Rp
zjs4tz5?O(K&H|6fVg?4j!ywFfJby(BP{TA&7srqY_qWr%`<e}S9G>UQX`93Pj&aW7
z0`5cpNsTuGW<(m76?ix}EEOp|)Uka<$5V~-eqD#IXV`9kB&l(9-}~-G55yRx6r7`W
zCB<Hkz5X}ifB_Gf7aBSxi4n*W57s&T>9&+Z+m<}n;=H5AJJu-ex%_bMPUlC~eg796
zWM`1P^sBr}?hnVEj^G*zIirproUVrRKcw(nnAFd07BYud$Uo}QB%fbhG9r&AzTS|~
zm34lGPWA)AU}1BEw~u1JpJQ6FFKo`i1@|oFHn=uV&(VHX$rrvrHtBw1q8GDa%h!wx
z%M}mHaqp2({@k|fv&x)JX<ql3QaoPAx@wxgJa)r1_iChU^XXM_iOY6mNlPu?5qT<e
zt%YJ=0#9+l_t2@wCA3b(9zLoj8Zsri^Zb<!t-YVb{_E}()$chg5-G7jeUaac3v)jt
zC35l}-e5IXD{`8m#k&=akCxvIJG1FcCNI$c+ZR~^gDOY6=-k8L`$E8A&|Ahay?a@v
y##8^y+hxC(F~{?i#)d<~aM9K~UGI(i_In6^t7W+Q=oK*97(8A5T-G@yGywobf!Hhn

literal 0
HcmV?d00001

diff --git a/components/buttongroup/images/button-themecolor-dark.png b/components/buttongroup/images/button-themecolor-dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..e7257b9ef087ad1280b4950f5872ea8f007c61f9
GIT binary patch
literal 458
zcmV;*0X6=KP)<h;3K|Lk000e1NJLTq001%o001Hg0ssI2l8YUE00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0bfZ(K~z{r?U-G1
zgCG!qd$W@GsMk|ZLOeyt5sFtR@6!DX<_GO;+o`t0_YznZ_RErS#=OK`QnWOP)-Vip
zT_3jts)GZ|0HW12jjV46m`&5fKB84sl`L*b(bAC7I&4kR(onQCd{3)&?=iSmW}nhi
zdM~pz{*jg)IWdOOhosfIAYmW{&mlO+`J?SGn9f>s$l_O0Ygs>CkM2o?jwUBR9F8f@
zIiLl@i!>;83!Pv<*;%w&_HDxQ!onraT|uomfwe5GMsFpSN2&Gb0hSL_KI67q_gc)j
zZuMhY*3(|TueEMrpD_7)<9YI0W)Zr?lT3_Q8gugS*-6xN@Z;jCXmQwdXH17UCeS^~
z!V_Ap`Di(utAZAkp#&OZctuP0j<Vw!wHA;b5Z+N+sA>vgVKk%oq84}hrt$ZDMe7$R
zS{jO$hN7k6?`XlxJ}kU$2UO3z?C<oik$n;42j99PUmIiyZ2$lO07*qoM6N<$f&>l8
APyhe`

literal 0
HcmV?d00001

diff --git a/components/buttongroup/images/button-themecolor-error.png b/components/buttongroup/images/button-themecolor-error.png
new file mode 100644
index 0000000000000000000000000000000000000000..8cc38f7aa3811f6d51fc8fb847a03d5d5ddf5f75
GIT binary patch
literal 457
zcmV;)0XF`LP)<h;3K|Lk000e1NJLTq001-q001Hg0ssI2pOtMo00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0bWT&K~z{r?U+k$
zgD?<4eSoa#K38PjoCI|lPQi{du;B##B&KZ=rGV^??EyDo(#n<!j^xo>c*ehHn-xq3
z98u0UtX!Kv9oDPQ2evHW047Gs%0cyGGIV~x0ZgP2pk(E)1}zIA2i75QhjQ;>5aoQK
z<(e>va=y@VJPh3B@(RaE+2>e1m0XlXkHxH)RabJAG{s2`fC`2vQ)&vXbA_XvGONB!
zds7I>yNznYPI73YN}b^poeoa6eL01OmfO>$U87DpR@4S{h7Em5x~>eyVV7NOua9@0
z)+wCi?CaS0OYU6b7)0Iozsdc)xsh4rb_q$^HtLI+)Y(z*bi`E4ZOJaS+v;bX)+wCi
z%+kDlG^us{Mb4zdk!;&v?k%~AT6755#uoKXIz>6tHC9aAm_p+$Hz#)}_nHJjl=Fp_
zdr5*I%K1Xb9o8#&@8_if2jX``&_8m53n{+=bNr$D$C4zq00000NkvXXu0mjfkRZte

literal 0
HcmV?d00001

diff --git a/components/buttongroup/images/button-themecolor-info.png b/components/buttongroup/images/button-themecolor-info.png
new file mode 100644
index 0000000000000000000000000000000000000000..288cb1cedebe08b62848f3955c13ad64ebb90cda
GIT binary patch
literal 415
zcmV;Q0bu@#P)<h;3K|Lk000e1NJLTq001oj001Hg0ssI2L@vh|00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0W?WOK~z{r?Uze#
z!Y~j(VbAqSS@sUOPE?75ARmG#>(VBLvI$6Ol_m<V=VMVjMlDFhMr8CPCgVxw$#~<D
z3?l{)GuY!<d`+IVquEEFsEKMW39v{15`>yd0_<Te_X!K|50o}O2-o9r?Sa9=#O3ks
zft&P*l2(@AQK$Zk&y+s&M_UJ%M}9e?k!2NG#s6@Y2kr-qQOO~%7A3tTi)25hRUN6&
z{Txl)`I^Dy9(ow;fovCZo$LKT2_7FUkGUI%$22<ydth?F1nY1nQh_;nSVdr`Hm^u_
z`mw{cJmysao5U|F;_R+HLit~)S)EPF>6~)E3zx^+DYOS9=t1=oJunwFH5~gn>R1=u
zoaJ#v0`_=#^}yg^;__H|VDK=pJm6jl3ore$vhS6l+_OE0ls^Jf7@9Bt9-9CF002ov
JPDHLkV1glitoZ-{

literal 0
HcmV?d00001

diff --git a/components/buttongroup/images/button-themecolor-inverse.png b/components/buttongroup/images/button-themecolor-inverse.png
new file mode 100644
index 0000000000000000000000000000000000000000..cb438c3092acc911b424d6301ce120a2d5b76557
GIT binary patch
literal 501
zcmV<R0Sf+!P)<h;3K|Lk000e1NJLTq002M$001Ef0ssI2=A$}x00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0g6dPK~z{r?U+q+
zgD?z*d$Y!DIUnI9#HXlpgqSOoJ+7W4^B2-2GjtrMd@D;9(tFm9kB~WUVZd5jmSvF}
zq?we%K#uAKQVs(e<;iX!HEO`*$!;JuyMfd^VxaLMc>AIb|JeqbHgso4q2MiFw;{9*
zPE397VpzLQD?{gMPMOMmch1o#1j?FA&u3!N#MohoPPxU?2B4)v7D9u^OzV3&0Ep&d
z9J;g09!-(~YN7dQjh-O{>SM#|i_$W2mFEo%?^IzTx5g{#J0a;C>P8}lR|nLDi(z08
zG&32IC(wYHtaOD<3{XWcc^O8{cs~oS4aoNNGWx){C4X(e*b6URACF35V77tC!hnEQ
zDzqqMoZj4JG;p{HcRU%K*nngYYCr<6anP^VCnRF&1T~=14Ee+yx$jYv_t?q+UlHSE
z=opI!KQjX}t#Q3lyk2w7W(IibViG=##BD4#fG{%onB6PCs3#sV@Y3uCQnMRK&2Aty
r?_!`VOA0=7gEZ@}#q59XW=se_fkm%<V24K*00000NkvXXu0mjf0Cdnl

literal 0
HcmV?d00001

diff --git a/components/buttongroup/images/button-themecolor-light.png b/components/buttongroup/images/button-themecolor-light.png
new file mode 100644
index 0000000000000000000000000000000000000000..6799351e785bb0260ad42c724d2232830238922c
GIT binary patch
literal 448
zcmV;x0YCnUP)<h;3K|Lk000e1NJLTq001xm001Be0ssI2+qP^=00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0aZyvK~z{r?Uze#
zgfI+1bG=eH4h#oL=sgB*(Gf6ngm$1m_AIF#8(Kz55l|^b<*jVTl3zZXi0+TE3r)d7
zZQC|Y^Wg{>4FY7sLJn;R5Fis4;<8i7<V)z?DO(VFbIL9>g+b`mDH|8MJlu;QxqJ(3
z*cz}NWt^BW2))=jC!Pq@nX{j;bz(hAIWe(NXf!X21raC}37V%H;yB<HFTq|c682rK
z7RnV2i8H-SW`oeE?x`F@tj|56+D@rG%9|iedATkX9Enbc22FYp;-I_6{RY+wr6F8L
zKexv89|%=;3V1NSEczh7>L5Jwa#ctlgfJaCHAgLk(YW8hTA}JB;q}t63J=1$5I`P)
zFD2ZdLJgY`Z2&Tx)I6a{j=j)g)(VYI0(bAp6D12V2wmr)A2M?%AGx}i^+LbQ7KEOi
qvI|XdD+E7TxX33*z-azTciksEI-hIlq(uJ!0000<MNUMnLSTYuo2u#n

literal 0
HcmV?d00001

diff --git a/components/buttongroup/images/button-themecolor-primary.png b/components/buttongroup/images/button-themecolor-primary.png
new file mode 100644
index 0000000000000000000000000000000000000000..86fff7a62bb5a32bfc40bae9ad4ca4db26ef94f8
GIT binary patch
literal 616
zcmV-u0+;=XP)<h;3K|Lk000e1NJLTq002Y)001Ef0ssI2??{>q00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0sTotK~z{r?U=z*
zgD?<=eaW`o1U&Yw=uGKLP!HTa*p9padUph?mLzU=6GBqx6lbgr)69R^{A_mjgPgb#
zBU+<`$sWW!5cjuU3MPm74Gip~gCt)Blf(Q5#(C_c+A!Q_jT(kUGk<l3xm39@bu{x=
zSC}JOZG<TK>cBsXT$p`0^H&34*sBovnpc!s^2GQ&-zxJF0(!LO5M<;FQEeGGoHo{3
zvtHMS1;v~3_u)cz&lh^@Y9NddJj0x<Xl6pcV3d~NHB&IepkwLFvoas&V=r7MP(di(
zDi}45n&LpH<1V={-{G`RI7F(qF}|eO^^+$Y8sZcHU^w!v9GI`#)D#<~@ZESOW4jU6
zk#U`uEx$tpVQ_l0#nPw3G-quXIig-&Fy<@-l+dUDgsJm)><Tvr^Si%{&X1rVW%kO2
z`3k3fq8@r1GrVT5k1#BOSiz7_Fe*pE#H^IlD^tU$WYY*ALCw6d%?=HOk%QuVFc7{c
z<^L8&oA_$*nyF-aZfxBq@0JVm8BF_B%N_-ch^u7Fwx6oBCBn!@3dZC-$0`S5_9|H|
zo*@s`u?jXvL{Yb$E)9jTdz?)Gb3$uBV4!vLk&noQ*#(n65sYL0xt1Gwu}|we0Os;F
zYM75;;;*hSmns`(9_;QWm7jvi?ccMb`f)yjCBzRj&`!goa-|di0000<MNUMnLSTaB
C=@X{_

literal 0
HcmV?d00001

diff --git a/components/buttongroup/images/button-themecolor-secondary.png b/components/buttongroup/images/button-themecolor-secondary.png
new file mode 100644
index 0000000000000000000000000000000000000000..9e9c4cb67885c3061cbe2a56a31838042e09ce84
GIT binary patch
literal 1077
zcmV-51j_q~P)<h;3K|Lk000e1NJLTq00310001Ef0ssI2CnRv%00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D1IkH6K~!i%?U_AH
z+dve@FQux|RKiFw#6``L#S2Jf1k){9U=7*o47d!HU`W?QZL%g(VFM#I83Q9?z;wf5
zq*bzb$zoK@P^22EE^3A7dv_Nnd?jH(0?cp8`SG~B|NAl`fwQwS;$xohPrris-`(A<
zR4OMYC*0-(g27-inH(P<$Nc+EJOFw@H7roS-^4SRYQOjYqkalZLBGL-Kjz=xJnHv1
zcU=G5kIO5c6#j4<aQ%EH-Z^gZc5LgX?4twm^kPB^(WPsyEflxu^1OL{p{Ua(iKQ23
zE}NB{CX00C8S(cAEVEx?-tBv|wm!7&05u_PC${`y=cr=}xXWMn-!sziZkWogOpvOY
zEz_s#=vM!!TtadTl~Q%2nH()fyh_AcXJ+GAO5|CMD!CcSsdBR;C2}ch)MUYA&S+dr
z$Eh<RVM+K#%~d-jO{HUKi>E((CmKX#QRCu|jd#?(Zn~a7A)+*}ht~I-jo+cjDBoO(
zihoR_vv}Yp{a?zeESxD>BIaf@UFD2nhsWSH@${JJnnsD6(YwTrP3LkJrOLdcJ?B!x
zCLv)MR`HQnFTl+14Lcw3I@OB{s+uXYC%tC5biuG2%w4bVLjXo-0F-FhwQ9UpJJ7BE
zONRM6A#0ip$3QXB>&6EK5)u=dmY^;a*MUR~gvjwv9+f5+jXxZh2z-47Vt<G@N1nTV
zeBN8ht;iy4iS`I^^xFQEBw)$Jh6L9#zVhI8plkm_;PEy}UXv#@Z30I?9iH3!wTbeE
zFFMoxQdfZ&2-9=bqK;E0!hg`tcHNpzL{pHV2(dP|dpN1r`Y&gA-$8@vM-EhLvol-R
zzg*Hk)NF3fMdPs09AQ^N6F%s<V>wW;p3OB?y%hBG=yl5#qv;WlU(<UDbocqEX>8^}
zQH?}G&{R4$g)7Q@=CyqE;vP0P&O87nmIk8^j0ewQSTRXTZld#8(u>~@yaA!)<(IAb
z&jtj5Q}((b;%Ep<60z#tdmrKT@4XK%@+GqqU7e);57^b&0>*!<FdxphnRjM0R8lEZ
z8Cpt0n^5!N&TL@|KC|jsewB|4?4JT=hMm`Z5qnQ?Vs>qCX@+j?nx-9=sJ)b_Mpv-`
z!Ob-*J0v+78I2L1<F@NV0H&pgRol8w(RuLye{*wlr>CdfaPNtKSehmq^M!8t@9XPZ
zUS7V*`|n;58^zx5t@wclr61lAtI3G9L3^|}9$x+T$^)(c8^ZNN75EJ%{4xLj2K5Jn
v!9bw(ca|Rjy`UNw&<TG2{?p&z{}b{bhi0y}hO)Qx00000NkvXXu0mjfKe7ge

literal 0
HcmV?d00001

diff --git a/components/buttongroup/images/button-themecolor-success.png b/components/buttongroup/images/button-themecolor-success.png
new file mode 100644
index 0000000000000000000000000000000000000000..8e366754e69f87ec78204e8e39b9589c6b8cb7c0
GIT binary patch
literal 562
zcmV-20?qx2P)<h;3K|Lk000e1NJLTq002q=001Ef0ssI2@qwzp00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0mn&1K~z{r?U_4r
z!Y~kqq0e;^x7>*wB-A0fLBI}~p$QiVT_A25XqgEU)44#=KJ)^Kj59P6-uVmp*UHi-
zX<a}^Bpp|SH`zS*rZ?GJCw57S$>xcm3|<;+B*{Wh2Ja{%b`g||H%Ub;Ud(FoVwM;0
z?llp$crh!0S0tjwc!TYZ^TckxBy+eDVzus?gnBk8@Nqe-I9XKNJ|#%=hds;0mvHQd
zXU#|3%xI#38se=>A<BZ=U#cC#BcH~?ny_srb3$f%rTQQB0kQk@8u&9bscrRY^B&uN
z1@Q8K2=B<u)r#?v@$#-}*qNr+HNW9-w6l1xU>1d^eUQR)%%B?L;gl4bCxln*@kVhD
zi_FZ$%l8L<sR`Uf*i8(3o8Z=*m;p7#W5FsRcJqaNyae7!rV$(_hI7KIs?QAkHy%pW
z!$mIVpGV=Xi*<SM6pK+qJbMn<R60GpvAm0bssIR^#(MWcR~MMNq7<#}1ykJxr}n%T
z#FiiLb{tfpzx23t_CNKvzAWSx)U$_imwc064NsCC(`3T%Gp4$$GW0|NHO7le*NHbu
zL@i#-YVl&$_2KoVH_-PIzec_v;S>K0CBYEl7j=#uWIYrU&Hw-a07*qoM6N<$f-xoj
A1ONa4

literal 0
HcmV?d00001

diff --git a/components/buttongroup/images/button-themecolor-tertiary.png b/components/buttongroup/images/button-themecolor-tertiary.png
new file mode 100644
index 0000000000000000000000000000000000000000..77b4aacb9dce24f985c96231e2a833209e88d651
GIT binary patch
literal 613
zcmV-r0-F7aP)<h;3K|Lk000e1NJLTq002M$0018d0ssI2*wb9A00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0s2WqK~z{r?U>I}
z!Y~lVoq@Ygi%%muBmO=33Vj0LCMV&{h_+NL&=!chn{5+A%CsFv2$J~@+b>_z{Uts1
zOgKIm;ChstKSzzHFDC@8UX2pjIRjAlGb4AvnnA;|a|YN-I3U@%2Jkp@Nk<9r>5@(W
z`<4aZA#_Rq3LqJXjn_BK9a?y?7>uayr$M!~rDXxQpB5-afSzIQ5CIGg^S4zR0J`VF
zJq_3VoICf^b|?m8IBXaje?@ab1mi`cM>inhd#TSeFwkt08N{g<lDAl^Fu!Qsmi4x3
z-hjTT)*Jw6FVk)y&tQ=QV?e~|1qTQ<^Rs$-8LHYM8$eJX2>`{MI#W}v@kWF(6bL{C
zNsBQ6=X2pg1TX{AZ($w3*cK|)0#Kim8r1-_9c%#fxN1}3Gf9DJ1L!x9s{{bI9*pPU
z7u`U<76LL^C=0-yU!WxcK!LmCzGlEDfMxb5o1mKe^BcnzcAVuIKo96sVd}*{Op9s(
zP#@}jil-C+d>b-=HGM*QKu)of&F+u|;P#_P*dN}01T~&eHl)J=0Lb#3375@og8g;X
zCOG1x^-2c;z81(7(YZuT<=9jS;BN&0h~z8)+zDKfVQ$L?@V<A^X9mY_`W77~Km{Em
zKxg8TP5}Fs0f4_2!M%BNL!F8FYthx8yFz>e!kSgL)6he+00000NkvXXu0mjf4lDhD

literal 0
HcmV?d00001

diff --git a/components/buttongroup/images/button-themecolor-warning.png b/components/buttongroup/images/button-themecolor-warning.png
new file mode 100644
index 0000000000000000000000000000000000000000..a7acf469c99c5507f0a32178ea3054a81d439c75
GIT binary patch
literal 873
zcmV-v1D5=WP)<h;3K|Lk000e1NJLTq002b*0015c0ssI2^`=Bh00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0{%%vK~z{r?U>I`
z6HySyzb!%`fg9Kc62!!VC6Guwa6q95#A`u=cwzewz!^0GK`q`$;193`BbXTAuC_vI
zf+rG;<zgraf%4-@!Y^T+dHc4zYH87s(B1gSr1`#ilX;z;+1I2FRaIdl^m;a5;d?KR
zcZJiM<Q3!Es9sO3#M;GZ<P|%mvOzJ#@vh#VITFHUWgHIZ{jm#1e@;$>!^$|Fw(F05
z>!Go;x)J~9?OX}oK`<`$xnSIHKaPdN%3R9J+MhTITCpG(7;eGvH>o!x=!}S|jU&Is
zFfCZyrFilT$FVSBEH#e?Cls2*WJK<grA{=G4`Ffw`4iH88rkZp#vqW`5ju{3U~x-m
zAR0q^EgW=S55}i(^pS1If!q3#GcRyulAVvLe_5_QL4S|w8|!q(uqKj>H*pevQakAE
z!O)mUejnW-Eie<N`%O)6J_XZDERsq115jf~l7Ac1fUgv)7l$9vMM4iwr9zVk(DINs
zfUYvu?i%>%8Es2Hn-GKd;1<EY2HHmQ1j!}L1kmRd0bZ^%!}la3vfl?)<(S=I@#!-<
z?xJoUt29nufd+U)07DP5l_#_D43F^atZu+xE;UhgRf-H`ug6mhe~8B;F^8%$G%JWM
z^GO}GVq2@^A?n7sQS$-eyg0JYn_7zYMkFE_P*AUOyB3p(uE<%UM$IZXc#pp8GM+|<
zKRKh+X1~<>aax#Jq%;|i#=3NpC02}>v_@p_4?&Gqg78<cc6%@z#NsWu#TJu*c1LVQ
z;R_3OPVk!+#>-`~ScWn$L`F>gIo;}Sa)7@^EWLON-0;Y)%gvxyrm_vLHdL-7@fZm6
zaMG4Jr-pf%(rHZwlwoQV1HGKw^$sD0pQ$<QHzSPS(}N@7$YH*`#z+OGn&t9OT={34
zw~K-XxbT@AX1aJr!aO6HG5WKAC>%M)+vf=AuTAI;9+XO*mcoLZujj9zdUAT+{sE&u
zdk4Z{Wr|$3>yKUMEmpF>w`=LYtej3178U;ljLr1;<bLz000000NkvXXu0mjfeyx*y

literal 0
HcmV?d00001

diff --git a/components/radiogroup/appearance.md b/components/radiogroup/appearance.md
new file mode 100644
index 0000000000..3028d7e16e
--- /dev/null
+++ b/components/radiogroup/appearance.md
@@ -0,0 +1,60 @@
+---
+title: Appearance
+page_title: RadioButtonGroup Button Appearance
+description: Appearance settings of the RadioButtonGroup Button for Blazor.
+slug: radiogroup-appearance
+tags: telerik,blazor,button,radio,radiobutton,appearance
+published: True
+position: 35
+---
+
+# Appearance Settings
+
+You can control the appearance of the RadioButtonGroup button by setting the following attribute:
+
+* [Size](#size)
+
+
+## Size
+
+You can increase or decrease the size of the button by setting the `Size` parameter to a member of the `Telerik.Blazor.ThemeConstants.Button.Size` class:
+
+| Class members | Result |
+|---------------|--------|
+|`Small`|![button-small](images/radio-group-size-small.png)|
+|`Medium`|![button-medium](images/radio-group-size-medium.png)|
+|`Large` |![button-large](images/radio-group-size-large.png)|
+
+>caption The built-in sizes
+
+````CSHTML
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Size)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+
+    @foreach (var field in fields)
+    {
+        string size = field.GetValue(null).ToString();
+
+        <div style="float:left; margin: 20px;">
+            <TelerikRadioGroup Size="@size"
+                               Data="@Options"
+                               @bind-Value="@ChosenOption">
+            </TelerikRadioGroup>
+        </div>
+    }
+}
+
+@code{
+    string ChosenOption { get; set; }
+
+    List<string> Options { get; set; } = new List<string>()
+    {
+        "first", "second", "third"
+    };
+}
+````
+
diff --git a/components/radiogroup/images/radio-group-size-large.png b/components/radiogroup/images/radio-group-size-large.png
new file mode 100644
index 0000000000000000000000000000000000000000..b9d4c480c81ebfd73ee0a2912f77c27c33d61e01
GIT binary patch
literal 663
zcmV;I0%-k-P)<h;3K|Lk000e1NJLTq002h-000~a0ssI2yqh(A00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0xU^HK~z{r?U-$9
z!axu}dld^U*jq^p_9FR_n^c;cRO>A&C<-cmAX@vfGsYxM)?^F1N*_`(>#pQEJF~HO
z`&;DS>UubBwcT!)%jI-B9goK&0~dr0@|I5W44V}<J)6xYlgVPSSg+T+-Ht*20^xi<
z$B+pgx|Le3Rx55AAB~GZj|og;vJUw{u@$?E6m2#ejjiCuWR_^`0R>ik@!X{b)etd%
zGM2ZZNZ3&ovy=ug7J5=+c`K^lUP~5eAuQLRlu_ro*?8a;c0WS?_H?`|y|CRG=ye$x
zD@l|F^{JAsVbpdoInw2esA)yT)2}sfg5~zMaRDpNR(6pFPEe41hz7stg->Sh#jjR0
z`i^f=4C8GXMDH#0R?sygFUQGdM81*3^7mmpR6@pzhX!_$22QY?57D5AOs=w4sU(;%
z{FFfQ^Y-<fT-VFhUy4eQ($b&^n^mH*?+0bsxQG=vTeYI2MlWpMv(uhaLxO|VWp`lO
z3Wm{ZQbmohZ}y*)6@~6_{-&YXSh@vNw@NTe4ja<J>fD{Znia$wQmW3uiUYLn6JU;d
zr*NrNwp$D$I)3os+5>?{9_MuNsCDv*sdBFR!DIGt)A4wwskEeF7Ld1+bU9QPOHL;0
zY~-y#eu>m-hH^~#`%6Ti;;V~Emh4U9%oJOJWbCGX;R_TA)sGwfBlq7J@*_S>@T8W~
x*sKI@n%%|O%0mMhzy%?L9{LEUt*(##{s;8)L=W}wx@-Ud002ovPDHLkV1nFjF+2bO

literal 0
HcmV?d00001

diff --git a/components/radiogroup/images/radio-group-size-medium.png b/components/radiogroup/images/radio-group-size-medium.png
new file mode 100644
index 0000000000000000000000000000000000000000..4a2a1877ec3c603e9c854cffea716dea7d953f8e
GIT binary patch
literal 509
zcmV<Z0RsMsP)<h;3K|Lk000e1NJLTq002G!000*V0ssI2+yHCs00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0g_2XK~z{r?UvDM
zgD@08_bVOrVf(A%gJ0r<pCa>9Dt+81l(is=6hv_8(L`%q)P%LVjvl0VlN&hR-b7!-
z!}3&Lf`6)B6h)S0aU36OxFKXvO)t%$I+p03PABPFmL)fY3^FBimPN0grfHHS=&HB_
zgG`a2;t6)%`fbJKgrA|y??H_lvh#+QXw)exaw-^r1e4lFekE<Gdm-}QN0#^1=?Ypx
zTkkF;kT%)(v#L`|lX3!mKbm<AoVr!&%iD@W-7sI@OwmPd5c>6$8|;PHhnpsIwf3X_
z@;c`SeRYnJJkM1y3MD651p{=eey!drDsP@m(p_R#b(3z9$evNb0C>DQA6oTI*sR@B
zetli<r4GMQZ_C{L3Dv_?lO62T>4C}3C!w!Q8pc2!`Wr)XuWf3QX{_ENpF#DHox0q7
zH#{6I)!{O0rw-KehOeY)_3Ld~r8S3-wL0*gAF4fr<{tv4Rj=&ZUhkYX&3Ui=i}dP1
zQL%r#&o2qC@&V8VZU`s)dp5?@|2R+e`4Qp_)CamQDXVti00000NkvXXu0mjfdE({h

literal 0
HcmV?d00001

diff --git a/components/radiogroup/images/radio-group-size-small.png b/components/radiogroup/images/radio-group-size-small.png
new file mode 100644
index 0000000000000000000000000000000000000000..8e33578e1b6a65e8e63cfcb1b78fc309d59b647d
GIT binary patch
literal 477
zcmV<30V4j1P)<h;3K|Lk000e1NJLTq001@s000;W0ssI2K7pCc00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0dh%1K~z{r?UYf9
zgD?<=_bPqZhdoyDp(p8sM-g(AmOk$Z3T;tA6cNS!&5SXP+GN)(^dTQoW|9;?XOevM
zZ%<J4K~VHTQ1pSRSXEV)We*7gq&#8e6z@L2@a)BR65;pG<BnX#KE81L%%s@1Eu7Lc
zZJGvY*L4W;JjWoWXw5p8;~@7-t%*CnYG+l1N>LP?j6k$3OH6UT%Ks~(p(q%|2C&4`
ztB#{bvc>X=&+>h&i|$7viRDxzZZx76(}?`MaS(quVMWxbu4{_tpyRee>Q#JJ#EVsV
zhV+nJDbXwEP(>ULREy#{n8E^1mU*G5ocfzMEY`_`BG{m)IgMN5c;bN(2SxOe4)P+{
z0~;D`luh4xi%mC~jtj0Eisx94%YeJ0f?R3VK@p%%xL-KYz)fT;A^3wL^_>dors(hL
zUR5-X%Ndsu-#c!K1R4q_91eiM)?bBd6{V%xi`vw%Qs12urs5kC6nzjBx6}7O=Fd3`
TCe9ql00000NkvXXu0mjfF=Wr<

literal 0
HcmV?d00001

diff --git a/components/switch/appearance.md b/components/switch/appearance.md
new file mode 100644
index 0000000000..ae2653105b
--- /dev/null
+++ b/components/switch/appearance.md
@@ -0,0 +1,120 @@
+---
+title: Appearance
+page_title: Switch Appearance
+description: Appearance settings of the Switch for Blazor.
+slug: switch-appearance
+tags: telerik,blazor,button,switch,appearance
+published: True
+position: 35
+---
+
+# Appearance Settings
+
+You can control the appearance of the RadioButtonGroup button by setting the following attribute:
+
+* [Size](#size)
+* [ThumbRounded](#thumbrounded)
+* [TrackRounded](#trackrounded)
+
+
+## Size
+
+You can increase or decrease the size of the Switch by setting the `Size` attribute to a member of the `Telerik.Blazor.ThemeConstants.Switch.Size` class:
+
+| Class members | Result |
+|---------------|--------|
+|`Small`|![button-small](images/switch-size-small.png)|
+|`Medium`|![button-medium](images/switch-size-medium.png)|
+|`Large` |![button-large](images/switch-size-large.png)|
+
+>caption The built-in sizes
+
+````CSHTML
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.Switch.Size)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+
+    @foreach (var field in fields)
+    {
+        string size = field.GetValue(null).ToString();
+
+        <div style="float:left; margin: 20px;">
+            <TelerikSwitch @bind-Value="@isSelected" Size="@size"></TelerikSwitch>
+        </div>
+    }
+}
+
+@code{
+    private bool isSelected { get; set; }
+}
+````
+
+## ThumbRounded
+
+The `ThumbRounded` attribute applies the `border-radiums` CSS rule to the thumb of the switch to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Switch.ThumbRounded` class:
+
+| Class members | Result |
+|------------|--------|
+|`Small` |![button-rounded](images/switch-thumbrounded-small.png)|
+|`Medium`|![button-rounded](images/switch-thumbrounded-medium.png)|
+|`Large`|![button-rounded](images/switch-thumbrounded-large.png)|
+|`Full`|![button-rounded](images/switch-thumbrounded-full.png)|
+
+>caption The built-in values of the ThumbRounded attribute
+
+````CSHTML
+@* The built-in values of the ThumbRounded attribute.  *@
+
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Rounded)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+    foreach (var field in fields)
+    {
+        string rounded = field.GetValue(null).ToString();
+
+        <div style="float:left; margin: 20px;">
+            <TelerikButton Rounded="@rounded">@rounded</TelerikButton>
+        </div>
+    }
+}
+````
+
+## TrackRounded
+
+The `TrackRounded` attribute applies the `border-radiums` CSS rule to the track of the switch to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Switch.TrackRounded` class:
+
+| Class members | Result |
+|------------|--------|
+|`Small` |![button-rounded](images/switch-thumbrounded-small.png)|
+|`Medium`|![button-rounded](images/switch-thumbrounded-medium.png)|
+|`Large`|![button-rounded](images/switch-thumbrounded-large.png)|
+|`Full`|![button-rounded](images/switch-thumbrounded-full.png)|
+
+>caption The built-in values of the ThumbRounded attribute
+
+````CSHTML
+@* The built-in values of the ThumbRounded attribute.  *@
+
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Rounded)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+    foreach (var field in fields)
+    {
+        string rounded = field.GetValue(null).ToString();
+
+        <div style="float:left; margin: 20px;">
+            <TelerikButton Rounded="@rounded">@rounded</TelerikButton>
+        </div>
+    }
+}
+````
+
diff --git a/components/switch/images/switch-size-large.png b/components/switch/images/switch-size-large.png
new file mode 100644
index 0000000000000000000000000000000000000000..5e12ebe17fabe8bb280f372db18dba9d0358af3c
GIT binary patch
literal 1279
zcmV<b1OWSqP)<h;3K|Lk000e1NJLTq003+N0021%0ssI2Tt`{n00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D1e8fcK~#8N?VDRx
z;y@5UXKl=KWcDH(@vsnwWf+|Cje0}{=9(%o9g=j1Ji6lKesJsnN%c)tcPGRjyOG9>
z5?f%D*aD-(7HC1@%gf8d!^73p)pEH^lH|gLEti*<e^UM$fH<$OuWxT}A0Hoy{Qdo1
zyU~E-B@zMAh&43b-QBHLtEZ<Yw!gl<@(MKB2t?1v@QCiWw>RBI47S@X;)wA1`I%ru
zC~-Eid5lC3i4GCR-vkr_PO*7&bAwG@*Xy<JE;gK0vJ#s(B~IO1hk6n@2KumozSPVy
zV3V)26H=g+YHAB|Q&es?8{HH}4T<c%p}s7llF@+B^#C@Ywiq`FPul^6N@Ty(Z+P(r
zLagle{{CJMV*?6YW*%+(@Jl4O=_hEv+eSQ6M-2ITNE=XjoZXP9JQ6X;!iBk2d)y6D
z+9bO*k0c{0>5a-GksRsT;2u1Zk9uG;;L$tUR7oT?dNT;*BZsp#J_2=JJwBF7<eQ`+
z9n&uMf{c&W=4+s+iA@^^6icK(tY%uDi$fq*);*@ykHCCQU6!pMizTw6=AuHo)jJ%T
zGq0hTfs~>;wc%1Akx!F`Jr{Bo4ov`dt_$}t?-8ChG89ORn}z}bfCgj+xo4q`40(x?
z1=^K(NEmVN_Y^`h9*);}iF_z}8VW2M%f_IHu-0L?)5a%xiOh_v)k^yj6=G#z(Xh-Q
zm(|+%#F1#EmW2UTv?G!7F;dF{7ckWe@5SlQ$rrQV*=yYMS@yk8W{dPKZ8@ZG1%M?^
zur^X0iL57$)Uv>^Sbi0__%LxYPqeAlX6M>Un<ZX8B)Z1yz<JGG1v(O!%cUua42zss
z4bEk8I+>g<@*Y0yOx0^=5(z9fEIJaIRft<UU;%>RQd)z{lFX-jSq{nkWHLQV-{?#t
z17hxOlOvIVoNCt|7=U0nuNqvI)Iy=4<ZP-n-kHShcAKk@yhIJ(1~Nfwa9OaB9St+M
z5_5c2x^DPlI=`qPl^IX}N--@FN+rh2MDR!)Mma|v6FucTn29Co?ChCXSmKzH$a<@6
zi4$?1NMKb<93p0YD;=-^603i5NzQ)BypZC0=}e+$vCRcdpTA6b@m}^t!E@QidyGNa
z0|PM84etg7*qK|X<w4#G13Ncm31g@?Wu>AmtQLn-%aE4{;}2D3g#J(kvc!#>jHKbP
ze=>#f$NNLbt+Fw?SRy?k8KX?o9F!Hp;kXkQMrW=>>ODpRSnt26IUI#-aDh!_5Sum*
zD3u7f?|JRbCCayYv`#=`Z-XNSb9YB9fWAf#d4fD{+{0Z743hZY^KoO?Klt9!_{eT0
z2dx>Tipjx{sQeNI86R7puh}6piM4T1E|9Co!7QN?LFQ{pyOoq=C+v#VjJ3I#^Ge24
z%*BV)kO*|1b$COSqK^dRY@1pSayl7R$d$77U>Wr!3Y;rZ$;2K0#02j6qUhs`|L;FY
zW<d%ErXI1$%zzz)qDeB8SD?v8-r@teLp_1Uy*I-|LHZM++)bbh6a;ZLsfpty?m-sO
pFpiA>G(K`Xqr?^%B{pWa`v+tCW{qV-MWFxy002ovPDHLkV1ljcNlyR(

literal 0
HcmV?d00001

diff --git a/components/switch/images/switch-size-medium.png b/components/switch/images/switch-size-medium.png
new file mode 100644
index 0000000000000000000000000000000000000000..a3d58a60eaeda1fb8b25c9ba4eee1e3bf2c24842
GIT binary patch
literal 1040
zcmV+r1n>KaP)<h;3K|Lk000e1NJLTq002?|001or0ssI2vO25S00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D1EonsK~!i%?U`GW
z+CU6Nv$o7~hQ$mUp=Kdd>>?N(-XS~!1vy5t-8OA(!0Ji`&PNI}fOK0|>bCRk^pw10
zKNBz6%{UwmtJP{cosLGM!C>&ify*e0c>kw8lgWe}mdoXOz25Klnp|U=%03>Cs1>Qi
zo6qOJ&iqc{HE+st42Q$nY_{9&^ved24+Yq6w^9Q@zy7TOjbtMUCHyom{xpD9U<uGq
zO-#jS5R}{q*HC<oY?2n!qC_O!1S`eYv7-K*G1Q+}taz>MugOL#mcCDL20oOslav0g
zF`LbXIuTc|eN@WEGo<^V<_yXn$8j*_L}a1Suh$p&Wuq3&l5tz$J&M36(iq0D#3-+-
zxkonr{J6KhAe*vl7<(k5x6eJYabv@YeFxGw8p$4fj?47Ip)6ZkT5~i2&FqE2tPXOd
z(TkLVY_cII3wyg@ykJ`zNR#VDN<lU!9&*y`%#eAhA%lR0O9d~;MzeLP1!P~@U0R2T
zrBRy8#taN_Ny{3>Oli_Yz0UWPPA}4TPyOzjzM0YeDtuUZ|I}|(fNXc9=dxLT(_!X<
zr`RtvFycOvyi={w=X-XU$VO+0M0Wo9M$o^m&vV%{02R=@?7>+&&%e5quz$`WrJuZ&
zsBKL)=N5O4=CZj}3@ICDiR+S5e-u^cZ?-0z7Ixb^m(7&7JEdGA4V75B^X4?Ok_s#L
zcBePczZNK&#RJZAx3PlkFk@U`*Ervb*UN6D+CW5o^$*C#&u;-t4u08KKd{MlM+q|0
zDowsvEJDg=l4rNy0XDG8ktWaLG$~`)PB{E);4_Jml+tmf71@;=7@dauH7{e>DP7A2
zpz^o^RDe~{)GR?Z4W&_oP<c3oU?&zD+xyVN2qL<T4F%cqc-Xq&;T?{%uHAS737Hn0
zHKo-2tMTlqf6M^#{Lrr8tSPOe!Gci#P)Xo(jC2d-oC2Ae*>)X(rjHPX@p#<2)y3YI
z3vUNOsh@Xt`ejoPW?PHO(M$$xo*KX&Y3ZsV;+GAgoVowF+wnGa4yl=-XukPBg9MK6
zxSc9Ja%YBR=;x5$My<>yz4mcUw!o$rMbRBYjxSPV=60|dMj+-f3tf8_s+SFN*Cyim
z(d)%WEv-R=TxqS=k+?)`XsbrDGq^cL5Be!1FIa^PE_o9_6PpaI&z@9*+On*2;|MqP
z(QUE?BvEkO8^<v^Sq0!lX(3Euagi!Vkvo?79@+l^FWJw->GT)8p!q=$gAWG)0000<
KMNUMnLSTZsTJfs@

literal 0
HcmV?d00001

diff --git a/components/switch/images/switch-size-small.png b/components/switch/images/switch-size-small.png
new file mode 100644
index 0000000000000000000000000000000000000000..475c2a423c5ffde420c327ae4320bacd0f65048b
GIT binary patch
literal 691
zcmV;k0!;mhP)<h;3K|Lk000e1NJLTq001}u0012b0ssI2aD_O`00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0!T?jK~z{r-IvLA
z!Y~j(QyXVWpo35hTyo=*0(cZcNEN|ASi%lr%eQ9&#t36PI)wZa=1HUP(P;70;X(Kp
zqTB6uHk<YP{U8WFBHHaXzq{S;rw;~$!FW7gEEWu;Lte)%N>8F3orc5VR|G!*UH+WU
z=h`|iyWMWRUQee}axs}q(sdo8yrn1-;@ib)wZanDUaz-YF14Et378TsDJlu0n@XiZ
zGaB<g+S$ftvte{9L7&e#6CI64Br>C=Kz1ef8o~y}fU7gFCs9eyU6ul_bo5mN<dqt@
ztk;uhr_;${DbSI6)j(#5#@f<{UsRO2<2`iPTzJ_Bj<63TlB%NjmgXgN$5o=)A#sUS
z6^i0ck?DYWkxEV93$w%i$}Xu75uqsSfVHLr8X%*!QmG(3Hv$=<S=E0c%Jtw7G|KuE
zQE5rTI4plo9DRrgMVU1(q6B$;*D?+2WnA0)P&AZ_gQ!a`L86dCQ4VyDM;*-oK?o&r
zp;akVoBIb4C8;8+Qw&lMXH#FjrtA>)IQ8)z%92rcjk1`~*U=0hT6@#;$ylTARnMNn
zKB}V`V0(Hg7IjKvt3HRQdmjZ3K;wolXPZQ`bM<7Bb4AC@1>NHXYJoUc&w8*Vm5#nH
zCAV)+EGa6LlTZiGjK^zUru!&RXZO0&m;}&KLm0T@h7aPJasOw=$)y)dLh-^W(~=Yg
zT2pZ87e7fP%`7u+{R$OieW1&9067-$Ba2?X?mc|hA0Y%eLz+Vz_`zeAxZb%T`d2s{
ZegG%CUn>b=A?W}B002ovPDHLkV1kEJC;k8c

literal 0
HcmV?d00001

diff --git a/components/switch/images/switch-thumbrounded-full.png b/components/switch/images/switch-thumbrounded-full.png
new file mode 100644
index 0000000000000000000000000000000000000000..af288148af219647e12335559fd506f836734b78
GIT binary patch
literal 1050
zcmV+#1m*jQP)<h;3K|Lk000e1NJLTq002<{001fo0ssI2L<k^b00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D1FuO$K~!i%?V4$F
z+CUISb2fY&$X(1uTpYyV7D4Pngs=n(@<g{JG-$)9$5nCO4~mgM-QV;wGuYoQUyuKq
z>)7x2tJP{Yn*~AeGtX!=;^Jg7;jSr*#bUW!uGj1Bc6&S?)w4%vr1^Y4hhc~$gkcZa
zzpngF;5`?)h34^i%!dz$gMPVfaOQM6G5ed%28)1rz1NI-%{&yfydvyR1DFEzBc6cR
zDNn&7j$y00@+!?d1+}CTGDOcqFij{Y3H5Q75P1wS*G;m$RC5$XWb((<rjUUWaD39|
zTC&^ih!93~TtcyC3KCzR6r4i9r_-q)*_dOB5wGJS3N#a81dF?EA>E$#qc$vIa*<sT
zZC5ij{Cr9mf@T7)W{eSYWwq^UrfD_o&mTbQMJ*XadXro_$dl77omL$*0Ku%@eli?n
z-=c#XGR?R`kS((M7E;d7>IG8RI=CUzOs~cvb<GUslvGla_E4wyq0TgW2(p0Y>b0ar
zFn8ZLRWqHPb}c?xLu+xmOYqj~B=p{b<mw>1s`Lf{AO5bRl<q*kQUscv2CkZM!nAwc
zLN>8Q5xX#ajh)Vfc9UVOITq;<YtBAj4@VIvy;U=njBItv9&$>%_j|w7=?||yBn<m6
zo&I}knn_`&YpQ07*{5c5O7blZ@@rmleDNi|*pg<tw^P!pnM1$bR^%S3qd1h^xPYDY
zT2<ZEa~yoRo5M*H7ZS=@u`<nmnzleGU60nanp=o7U{2p%`CQGK+m7aTa~p~^(^Nd?
zwyq!79`++Ay5$~Ln%iuHeQIWk)8n-DT2<P^=JPo>)FWe9JeXp!E5tGqvhr?8bLm>e
zRgzwvGKNL5aO-bG>7In@Vu@x-)GtfWOdW|`50vgbfxhBrTS75APS}Atr<ftrOnM{R
zI@F#MyXGtjv=-A)Gob{TSG8wM{ci?9sKqDsv2B>pFbvh0J;<r~ZAhSdgN1DNdE`;L
zEL+p`H$b4fSY)_lb>XaAfJGu#)+t@hfM@L<EfI_dtdnZM7%Ah5u2G;F$U|h)<)2S-
z9z}$`3C1FVAO72oz}JvXe4aUPkt|e-x0J?bX+}COp;R+a5A4H5`J(}6VI;hCX+KR1
zD|Bh5xXEs(O0z(m*{cvPl=IN)up^a<;PcfL)godPbIr4<UbDax(JbN#Aa59^Fytb)
zu#E?%TT9NvM3o6O{NIXO5QBjzibN-AFQC?$1v{8lbjp6?W0U)s=6{2)r}=XE3(@_V
U_z*A2&Hw-a07*qoM6N<$f_-o8aR2}S

literal 0
HcmV?d00001

diff --git a/components/switch/images/switch-thumbrounded-large.png b/components/switch/images/switch-thumbrounded-large.png
new file mode 100644
index 0000000000000000000000000000000000000000..29247bc9a26ce0e25646b12b84660aa4eb882801
GIT binary patch
literal 736
zcmV<60w4W}P)<h;3K|Lk000e1NJLTq002+`001ip0ssI2V3wHp00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0(D75K~!i%?V4M1
zf-n?7yS8pe7o!{LxDdxxSn)CSUEhx$$VDhdMNEtnJRcoHE4e4Rfg9+@v1Gi3eJ3kC
zpU+35(a!}2gF&y?3xc52>3rWqyWQq1e3vsk2w@C|!|8OoSS+^Nt;C(1M0m5=sDQ@f
z@vj9qEzSfg{T1bKIP7-2)oR7uU=Ene?{bg`V@phE+k+?>Py&@MO~7eqvl-K#Q(J@y
zf>2agR>7H(Rh=4yIVX3Ru$xIP!mL}yNrJKr!u(YInq|3MGHr~hv~`FuDZw&R0ojI_
z*6X$E*EpOX7tE!7hHt_^dZTk`o;?%>)r)pL`zZ`$HP<j{r0`Z4RB<AW7@vjJVwOgX
z&%(gHHZ#ed3)3C7r!*o&m>}E<2aU>SOtlfnQ4Uw-;EC|Jt(r6vYAyMS4usQ}YZ0dU
zaU|TT<M9<+Mv~GDKd1a-LgA~18K|1mSuMis_?!r9qHi(+_3)4(VJeXH7EOfNxVaDx
zr?=jWJ|@Hm4GD9tPA_8-W{>VbSg#Z==`gFK^iHFOCcB0!=VS5@_Rr~?(~Aomm|>tt
z`Q%vmDJc!FBdm+w^hHab(vB`#VEwkFzi7F-Ek#@@JPZiyZ%gh959{a)4}$PjSYKL}
zZu9Wo9$MsS!liovP_9Qj<$8#xdMV3e+LwC}Z|~g_aAsU?ziOFGCbr*|o}g~u@As--
zv)u7AjT~d(`BMqX8VqZu5-<X3eBbL*;0v}ZY67B*n=#!5r!DeATtS^pKtN&`hfL0t
zwZ$;@FApaeGcsHY^UrE$I2n{~x67t7KmC4R)E|T1kyJ%Rf#K5#`%TG&kH<eqCI3-<
S-xyE;0000<MNUMnLSTY9KS}5S

literal 0
HcmV?d00001

diff --git a/components/switch/images/switch-thumbrounded-medium.png b/components/switch/images/switch-thumbrounded-medium.png
new file mode 100644
index 0000000000000000000000000000000000000000..d9e41c4ef0dc98f4e97bce07972c8bec324c9df7
GIT binary patch
literal 682
zcmV;b0#*HqP)<h;3K|Lk000e1NJLTq002<{001lq0ssI2l2OBc00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0zXMaK~!i%?V4M1
zf-n?7yEeBY-HUF-aUqVosQ8#Vz8}?r9?Zp11VswONjx7NLnX-}Hz61N2;JlD>;}#|
zZ@1g|eExlx*=#nMOnl!TjYeOk;Kb>4N<F2a8}xIvTJ3hb)9EC=FN}6Z7@5Ul!G~I*
z2^x}COA!RY`FuVc4x7yec|czNR{-tInd|lXrx6${{z}9DhN|c}gI~~GJ97?$aOqO*
z;CwtDrQwQT<cW5I=wY<m<E+^4_f$^UOF0YMoPqjrL0-x?Sm+GIIXZcxZKpG+Rx;<d
zwa!3zv!qEOfz8gK_AOF~vD{frY$?Q8?hI^KQbTROGtIHZl)?q=Oh3#y54)`^-Ju)|
z{obb>yVCCae7hqhO=lR$Ng3drT)?$6`+hUde&0iMAf<2+>8oPoe348MIp38`K`N3A
zZ|zKaXu{d=w_9HCkC)%`lxkJZY))9frI2(ctu^2r4YHTkiVs%h%<7$-(%PA9-hguy
z$$A3EMAMt_zM0SR&GdZEx-Ln`x083Qmv^pWoPieQlX>SxVjEt`xsf$2H@3~JVNn0Q
zDt8Stbgxq6?@6j~&b?O|+mqB!?w*8x*y^0S_jEDGc;}M!(wMW0&kUS<HssthK-G#v
z&w8DErceF2IP~tut#@?9^V9EQ`8N9%=~SIC2;^`NdsZCkEcwoz>qMFX3_`6SoXm1c
zP}y%Q6kIc+?heHNa=GN9a&^YzF&XHyaF*DYh1T&@`;8Lul6H0h_ngD<7rL!*Z8&s~
QlK=n!07*qoM6N<$f{NElvj6}9

literal 0
HcmV?d00001

diff --git a/components/switch/images/switch-thumbrounded-small.png b/components/switch/images/switch-thumbrounded-small.png
new file mode 100644
index 0000000000000000000000000000000000000000..1a392b1369806358f7cadc5c71dbcb00a8c1c4b4
GIT binary patch
literal 606
zcmV-k0-^nhP)<h;3K|Lk000e1NJLTq002<{001fo0ssI2L<k^b00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0rN>jK~!i%?V4?J
zf-n$3dp55lhtZ2T9>nn$B{EJOzv@SIqz|(qqga^~A<g#va$!h#$tHy0TdI$LXB~+1
zcDwzk#&kMOlEfGj$ML%>TuV95a2vDPY`I)+Hk-rYU=^w(&Xh8r&p(@jR@?9QwrU4X
zr_=Fx-0gPj^%{9VUd~nE>ddWtH3fb38|ND+aJ5>YP|-XDXA3<~wv(+-vppPV3lkHC
zllBsq5t=hlK03%td`E!JK%QgtsJFv(23t$%*bdeiNN=Vz2?~Vl40hcj!G*w`?ZB4c
zLg3E8a^<G0!*`}S7N-)N@xyu4@8tBxaxhKDJvnxTvt}4ckQ2!T55T!Nfw%8$1}OA%
z(X*$7+3!LV2$^#<G!j*TSCL|Rx9waaV20gJG{_Fs<;>!Q30#8KowH8v-rj$Hur6n2
z@8Xbd*}2>*8{S!ZpYyzcZJoRE+#lJ?9>V)Jf)e}z=Q{css8N0?$!+k+xlEw`In1xz
zh6bKhe$8RR4{MS-oc(%MHG^ksl1A`u?fGh`&dYa<SEBA+QsbV1y1gNFdw{kUMSH#K
z_Vg(q9Yx=6bbX^EpA~(Jr9hW&?lceg(HL<Y(=E1Y2kQB61<>$SARQKq1&x{{$z(Dy
sPH?T*J3;Mu+V#fMOupyptc5iF2G9+PaM3vE8UO$Q07*qoM6N<$f(uX=ga7~l

literal 0
HcmV?d00001

diff --git a/components/togglebutton/appearance.md b/components/togglebutton/appearance.md
new file mode 100644
index 0000000000..05a81ec9af
--- /dev/null
+++ b/components/togglebutton/appearance.md
@@ -0,0 +1,192 @@
+---
+title: Appearance
+page_title: ToggleButton Appearance
+description: Appearance settings of the ToggleButton for Blazor.
+slug: togglebutton-appearance
+tags: telerik,blazor,button,toggle,togglebutton,appearance
+published: True
+position: 35
+---
+
+# Appearance Settings
+
+You can control the appearance of the toggle button by setting the following attributes:
+
+* [FillMode](#fillmode)
+* [Rounded](#rounded)
+* [Shape](#shape)
+* [Size](#size)
+* [ThemeColor](#themecolor)
+
+You can use all of them together to achieve the desired appearance. This article will explain their effect one by one.
+
+## FillMode
+
+The `FillMode` controls how the TelerikToggleButton is filled. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.FillMode` class:
+
+| Class members | Result |
+|------------|--------|
+|`Solid` <br /> default value|![](images/button-fillmode-solid.png)|
+|`Flat`|![](images/button-fillmode-flat.png)|
+|`Outline`|![](images/button-fillmode-outline.png)|
+|`Link`|![](images/button-fillmode-link.png)|
+
+>caption The built-in Fill modes
+
+````CSHTML
+@* These are all built-in fill modes *@
+
+@{ 
+    var fields = typeof(Telerik.Blazor.ThemeConstants.Button.FillMode)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+    foreach (var field in fields)
+    {
+        string fillmode = field.GetValue(null).ToString();
+
+        <div style="float:left; margin: 20px;">
+            <TelerikToggleButton FillMode="@fillmode">@fillmode</TelerikToggleButton>
+        </div>
+    }
+}
+````
+
+## Rounded
+
+The `Rounded` paramter applies the `border-radiums` CSS rule to the button to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Rounded` class:
+
+| Class members | Result |
+|------------|--------|
+|`Small` |![button-rounded](images/button-rounded-small.png)|
+|`Medium`|![button-rounded](images/button-rounded-medium.png)|
+|`Large`|![button-rounded](images/button-rounded-large.png)|
+|`Full`|![button-rounded](images/button-rounded-full.png)|
+
+>caption The built-in values of the Rounded attribute
+
+````CSHTML
+@* The built-in rounded edges of the button.  *@
+
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Rounded)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+    foreach (var field in fields)
+    {
+        string rounded = field.GetValue(null).ToString();
+
+        <div style="float:left; margin: 20px;">
+            <TelerikToggleButton Rounded="@rounded">@rounded</TelerikToggleButton>
+        </div>
+    }
+}
+````
+
+## Shape
+
+The `Shape` attribute defines the geometric shape of the button. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Shape` class:
+
+| Class members | Result |
+|---------------|--------|
+| `Rectangle`   |![button-rectangle](images/button-shape-rectangle.png)|
+| `Square`   |![button-square](images/button-shape-square.png)|
+| `Circle`   |To create a circular button you should set the `Shape` attribute to **Square**, and the `Rounded` attribute to **Full**|
+
+
+>note The width and height of the geometric shapes depend on the amount of text in the button, and the size of the font.
+
+>caption The built-in button shapes
+
+````CSHTML
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Shape)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+    foreach (var field in fields)
+    {
+        string shape = field.GetValue(null).ToString();
+
+        <div style="float:left; margin: 20px;">
+            <TelerikToggleButton Shape="@shape">@shape</TelerikToggleButton>
+        </div>
+    }
+}
+````
+
+## Size
+
+You can increase or decrease the size of the button by setting the `Size` parameter to a member of the `Telerik.Blazor.ThemeConstants.Button.Size` class:
+
+| Class members | Result |
+|---------------|--------|
+| `Small`   |![button-small](images/button-size-small.png)|
+| `Medium`   |![button-medium](images/button-size-medium.png)|
+| `Large`   |![button-large](images/button-size-large.png)|
+
+>caption The built-in button sizes
+
+````CSHTML
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Size)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+    foreach (var field in fields)
+    {
+        string size = field.GetValue(null).ToString();
+
+        <div style="float:left; margin: 20px;">
+            <TelerikToggleButton Size="@size">@size</TelerikToggleButton>
+        </div>
+    }
+}
+````
+
+## ThemeColor
+
+The color of the button is controlled through the `ThemeColor` parameter. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.ThemeColor` class:
+
+| Class members | Result |
+|------------|--------|
+|`Base` <br /> default value |![button-base](images/button-themecolor-base.png)|
+|`Primary`|![button-primary](images/button-themecolor-primary.png)|
+|`Secondary`|![button-secondary](images/button-themecolor-secondary.png)|
+|`Tertiary`|![button-tertiary](images/button-themecolor-tertiary.png)|
+|`Info`|![button-info](images/button-themecolor-info.png)|
+|`Success`|![button-success](images/button-themecolor-success.png)|
+|`Warning`|![button-warning](images/button-themecolor-warning.png)|
+|`Error`|![button-error](images/button-themecolor-error.png)|
+|`Dark`|![button-dark](images/button-themecolor-dark.png)|
+|`Light`|![button-light](images/button-themecolor-light.png)|
+|`Inverse`|![button-inverse](images/button-themecolor-inverse.png)|
+
+
+>caption The built-in ThemeColors
+
+````CSHTML
+@* The built-in button colors *@
+
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.Button.ThemeColor)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+    foreach (var field in fields)
+    {
+        string themeColor = field.GetValue(null).ToString();
+
+        <div style="float:left; margin: 20px;">
+            <TelerikToggleButton ThemeColor="@themeColor">@themeColor</TelerikToggleButton>
+        </div>
+    }
+}
+````
+
diff --git a/components/togglebutton/images/button-fillmode-flat.png b/components/togglebutton/images/button-fillmode-flat.png
new file mode 100644
index 0000000000000000000000000000000000000000..6d3f957af34c338f58a146d8901fb1f8d754b66b
GIT binary patch
literal 300
zcmeAS@N?(olHy`uVBq!ia0vp^CO|C9!2~3;cHVFTQjEnx?oJHr&dIz4a#+$GeH|GX
zHuiJ>Nn{1`ISV`@iy0XB4ude`@%$AjK*58aE{-7)?r*0U@*P&-ajl-p!($nCbi!nV
zf+-$z7NjejGF-H*T;pilf{;^(!b2-R2s4{8^C$nD#<I9bL#urel<2r4x9ng~<xck<
zvor5y{cC!`F8xiag!#nYH0xa_Zu?HV^J+)hmQQQbcfPsU*Au_bNaow;#iu5^Yb)9x
zSpR;H=#RDC;u`J`KW=V%!nbzP^iWGFy`yat)zc48e)~#f%9Y|NId_lM*-eU-v|YaM
k4daC0@=%+VBJ`H>cdz{3$(O9<2lNbsr>mdKI;Vst0H`;26aWAK

literal 0
HcmV?d00001

diff --git a/components/togglebutton/images/button-fillmode-link.png b/components/togglebutton/images/button-fillmode-link.png
new file mode 100644
index 0000000000000000000000000000000000000000..c7c4d7aa2bf5b4310b4d2bdeb0866a30ebeb6d1c
GIT binary patch
literal 312
zcmeAS@N?(olHy`uVBq!ia0vp^CO|CB!2~4tJg|-jQjEnx?oJHr&dIz4a#+$GeH|GX
zHuiJ>Nn{1`ISV`@iy0XB4ude`@%$AjK*6(~E{-7)?r*0!ay1(WxK>ZqiFxAC>J<Ly
z(BvH_0$X;vM|V{4IPy<aQ#-gUpoDF5*AqdNw6-57)Z?x+o-7L4Br{dV{i#n8^Ay*+
zeDagy*O=urXl*}b|8!dZ_uhF839R$mU+l9oy%gd-<C!?i?h}P!2Qy9uM;EI7T5x$r
zrMJrO6Q-A@UFFy+yp=b|e!AAQ6-9{`DjuDB`PJ{of{!kJS4)K^_v)vMdp=w?fjiHT
zZAna&KvDnm)BiIyA6M<(-D_4nZL+ujw8fL2u8@iFTWMbMtX-a8@_#ANV+@|IelF{r
G5}E+iwtM^l

literal 0
HcmV?d00001

diff --git a/components/togglebutton/images/button-fillmode-outline.png b/components/togglebutton/images/button-fillmode-outline.png
new file mode 100644
index 0000000000000000000000000000000000000000..804a6009bac98ebc3106f2417921ee6351cf1d51
GIT binary patch
literal 411
zcmeAS@N?(olHy`uVBq!ia0vp^PC%^0!2~2z4$XK9q!^2X+?^QKos)S9<glbW`Z_W&
zZ0zU$lgJ9>a~60+7BevL9R^{><M}I6fEo-uT^vIq+~3YPDA=qZ;2JEgdZSH5Sh{e}
z&6dYE`E(BdNo7=24D6h&aM*h7sYCTj;`!cUPgY#~UK<+vNJ&A9skq3WnSWX4CGnHZ
zD>%+<UC!tl8_OcSBSXdEqDSYVi9)W)`o-bhX%DJ$SgvogXs^$l<Fn>igH6wywA%bV
z+=cRAkKXaDa^b6r=`L)%>o7gX+Ip_?&Tn0}^n}=)cUUZP<Wt)l+-?%`_2c42dd7$E
zc-;vL4w!DFzGtShOGX7Z!)~`d$Fjxm^=)UCSRdN#lCg$UqN+7Ldqr;LqeW8D&kw3P
zJr0+jYNxWh<3dICk-5yP4%IGRxa->Q=&(SkhG(fg{0pyznJ_o)s+yCzpKXC*TkqV1
z9D00NDsE8ME30n0cH+tNbhZ79)_aRdo&LnIr+?<>TVHRc0Rxo5)78&qol`;+08V<O
A3jhEB

literal 0
HcmV?d00001

diff --git a/components/togglebutton/images/button-fillmode-solid.png b/components/togglebutton/images/button-fillmode-solid.png
new file mode 100644
index 0000000000000000000000000000000000000000..af9c07e7e074181def8453aaa848ab4422ce8c55
GIT binary patch
literal 495
zcmV<L0TBL)P)<h;3K|Lk000e1NJLTq001=r001Kh0ssI2y9?E!00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0fb3JK~z{r?bkta
zf-o3{;hrtMjPWYu9>6)!TMz_hSTJs=wrl<V@CyOsOp8!phIbW1I(anKfsfm=TaWK@
zxuj{T=MDx)*kt>PqNu9sXYQ`oD<o{PeR-bqlDUI~O>6RHS@yk*AYs$y8`9=`uXXzH
z!;Rm@5z?U)GSnCyl@KbbXWO*D7dvzPMUb#*VxPN7eA<_Sv-j5Fj%S5;Z01~_AB{~?
zd2(!DL>uw`?bzU$WsMy^8c5%ebh!T%Q~H{ElMRamU0-+Q!1FzwPPnmoQ5-zZQALj_
zocJz?`4u`SA?bA-z-KOChStXfvQ~oI`NMvYu<6%6?%>r(+J1>X6MdG_k7*mB4m?TI
zIA5o)x3bTD>hC^#gT`T?!mFpP@w3ldrMJXa@&7TduRU3+`3f?tj-gH;k4-A*e=+(E
z@%?9RUy>wW%Lo!SZN4FGzV~wb@a&G~^Cbico7UvRT|-%xykx%4=d=6%1vmahQQ+Bq
l-e7=)O}1~DZN7K9-R@6!`!d#9`8)ss002ovPDHLkV1mT3>CpfH

literal 0
HcmV?d00001

diff --git a/components/togglebutton/images/button-rounded-full.png b/components/togglebutton/images/button-rounded-full.png
new file mode 100644
index 0000000000000000000000000000000000000000..f79ebff27a621a0694486023a018d9d6c2362f07
GIT binary patch
literal 766
zcmV<a0s;MrP)<h;3K|Lk000e1NJLTq001=r001Hg0ssI2a90Kd00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0+UHZK~z{r?U-3|
z;xH6Nvo^As&|3-n2&^Np3%i)7Vm35?Kp$JLDbm(xi&Q@Pe56#ibnivOL*(W5v-zK|
z9u@PQPN&ssHJwfegF$M5S9G8oon=@!Vfn7t>wdqVOeV^h_VIZ9t%K)42fEGYbB54n
zxCnU@kdJA=1~XG83k+E<mkbY`OW%Ck?Up%X4#cn$q(lTM5%s_;A8Rz5&G_i`$+C=z
zL{Ow%xbtl`n^@r#L_`o-F|gvu$BL*;6Bi;Pi@4aBvE}2qp|acUL^UcZqVq)C@{x?a
zB6?4NRmMWh4A}BLZ}Jps3dPKTF(2h%u~@K0^nA7&1<j9Cp8P}FX*QZ2UfvrzC^s01
zr4D00&X*-$@7<hCk#>H)y7RGr><8JHkM9WzsmOdG?YybEgI4d@V<ualf8TvH8*fDz
zzkFC=B$hgi`Nre%;cyU{5)boND<2jZiKPx>K5iePp(A2GjKorhF<-ym=X{yy=J^uU
zEb<l2EKBly?fga3CSTr4+T<%9>A^@Wbr|!FMk8(mqERANJ}fX2OC831>MK%YO2o>i
zZXRN(!<cWqUUT?Gri99O$eT%<<NV%LkI5R8kHd?RSn4q5qiizsB2(fapGu%;b*bAS
z`LL*1pMk-aC9V(R_RR;jd=yVr1)l`s&bzcNAD5ruaLE1;y{I6Ic&+;tunMSfixJgG
zAc!pDVq?aU4=4d>iEt!XS<jy!?tDO@i8YIe5Dr0+cHxx|__%yg@|TKV8BT)|5m66(
z^8wrC{x1tL^oC>%WVp|sdn6zqTrL-i7B)cXCn&}e;VV1`I?#<GM}Gz~T!g#{%XjB|
wK4Z@|;s*rwT6jeVy3tvNg;O!#H*vfD0RS!XkJ+u`XaE2J07*qoM6N<$g5h^q6951J

literal 0
HcmV?d00001

diff --git a/components/togglebutton/images/button-rounded-large.png b/components/togglebutton/images/button-rounded-large.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e3eb36329d4efb417797cdfacd4e68eb82d9471
GIT binary patch
literal 453
zcmV;$0XqJPP)<h;3K|Lk000e1NJLTq001Tc001Kh0ssI2carZ)00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0a{5!K~z{r?Uze#
zgD@Bddp4g2u99$%z%>%M1<$Ym2?-TwC0Nl9`*#`#QrcpoMrBquK{Md6uwVLz^9Pb`
z+va&5hGDP_7~p}8yjLj6uIth?EsElOF-_CJ0~?%Vmnccxq@{PEEK3N<E>V(rC_EkA
zt^?TMB)ddOCQ0(98#u`>*^*k=k|2&_eAf5y_KfX4ntU5L$u4=CWZ)P~U>zKjnNGkj
zPoXC{3=B~b?bVZ>b=^2wi;__k)%S6Sq+9#8$t;(y)qHB&KF!9!Np{IoBx@H7``O?N
zyLOTf3{mlI{`st$Jn^9@4Oj<tokuK6PIL3uj+jYek5tXW-}WdcJH~b{O{Rd8?2=z3
ztLliT<jWq=l>7->65wa-JYTgklf;%j%QCuG2e83Oc8QY25d!-LEmf=*Jb1<Nu|!D%
v93il!#}@m%3~{y@A4tG$@&WvZWZ!=P@PL-HHHW_g00000NkvXXu0mjf^7y@m

literal 0
HcmV?d00001

diff --git a/components/togglebutton/images/button-rounded-medium.png b/components/togglebutton/images/button-rounded-medium.png
new file mode 100644
index 0000000000000000000000000000000000000000..f7670290575b4fe45b4478012397fab92d936b30
GIT binary patch
literal 417
zcmV;S0bc%zP)<h;3K|Lk000e1NJLTq001ih001Kh0ssI2f^1~^00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0X9iQK~z{r?Uzk%
zgD?~Zdo~V(k78c~`4~+&MERFkz=l98A#OmwXI>MB&>aR^F)Q1$n30Jh{5I~*Szs6R
zeV^xf>>gO)Vyj(HmSxj4U+(F;4lcIZ1w~Qt7Wcr#)?*dm^?YsxTx>lHh_m2W1zDEi
zzhWI?Ej*!Pp1lGWTmMc0JyC@h<xR-YtW2noH+7-pB_WlI0wcbUSsZKM69K76@9U`L
zMP#gAaDU>%N|QjCvJmH^F4Nj<{{qVeX_~gb5t%1OKNH`R@6))AsNnj%0bJ$NbPil>
z{YM3)d@Q~M&2dp+2EP8d(GVNxm$-2OpmQ+DVD&Rto8^KeNp4#K7hBH);w-QWaGSx6
zWgFmP>#+*(<y2J_Z*fUo*UMjN!!Y1Fhue&6V1bLRcEMikT`-Q{&C1~#rtrgu00000
LNkvXXu0mjfCEl+r

literal 0
HcmV?d00001

diff --git a/components/togglebutton/images/button-rounded-small.png b/components/togglebutton/images/button-rounded-small.png
new file mode 100644
index 0000000000000000000000000000000000000000..d3ace4f56081ed68d199c764f63aa8c5bb8e0e93
GIT binary patch
literal 368
zcmeAS@N?(olHy`uVBq!ia0vp^T0pGC!2~3ieY%qfq!^2X+?^QKos)S9<glbW`Z_W&
zZ0zU$lgJ9>a~60+7BevL9R^{><M}I6fErjmT^vIq+}~dJ<!dq!XiGdFrtf^7>AS$W
z#yL*^4mT}bwC-be`l`;Aoo>b%Z+2&8A9jA-b#+h1{e%3613X!~1CG?(|DL`wL9mOd
zf7d!|kcdcyNX1H<n%mplLBe&7>&>DHtyX8O^)NVR{7><aQP_&ta`pP3Eahg4d{6F{
zyxKcA>PWWe=d%3#58HWWKFJeWE#3L|Pt-q~n#(4a51%qITJG$5&inF~t$Su4@yhp_
zCt+7A?7xA-_524Jp4r>Zi#^YMrnW}q*zNyy-j9v0TKs*dP*qj_R?S_n_^14d!`Dk|
zCvb@^)cEjXe`QV0o25;z8eBF~#|7o(jSeb_814`0{`9$qan*wczW?)1`vXIX!PC{x
JWt~$(69A>nnmPag

literal 0
HcmV?d00001

diff --git a/components/togglebutton/images/button-shape-rectangle.png b/components/togglebutton/images/button-shape-rectangle.png
new file mode 100644
index 0000000000000000000000000000000000000000..8313922f2086fb75c45f249deb27a32f4402dde2
GIT binary patch
literal 675
zcmV;U0$lxxP)<h;3K|Lk000e1NJLTq002<{001Hg0ssI2s9T~A00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0ys%TK~!i%?U!AW
zvM>-uXKk_>aVaDF5VkSuDu(!1#e?Mw{>-y;yE_R1iBkhsee(s*6CIl59*iPy_u(;Y
z=gZ}?+wD}KKn;RoS~(X*QI_Rbpj@w42#RUtd^jBR`9Oi7m=4={zu(`227+QbItR_@
z%#6+f(&CJNDtK_eo@FwbW=a>YKxOeH?l2<+#dLJ`vQ8#RwumP{3t+@BUvm$kq=(>G
z5Y{Bzq_U~5LA;RQm@3W|jZQ{ovq%rp>eDR0G@NTOaPkQqoLx66lcgM!hE7k0Cb2!P
zK4%s-lknY<=sdaYi6hfP<MATb!`xGMUMEo_1~+@?;%sK;xXx$GA)x2TyZH9D8@)F9
zO!xDJB+0DjO=rZ2>M>@Kvqv6iao%pXc-!)@;#j7@@=cOey{Cerr@1Z&=kl0O)Go})
znTB(^v#YZn=5m^TqRvw|qr(%!3k1cqtMmME@}He`N-0hBUe5E!^}O_QmgPmmAy4@m
zr7KJ2j7db2`N>%>BuR!0>&}P~wZ!n!%UMdRSKR`nw7bhHEfbT>orI2`?`^ZnCy!#b
zrZY7}wHVKDK~HBBLU2|he?z55&l~M8r??cQ{Oon6RqV4WwOhS%ZpN^iqLtq||9j|e
zI$!S&v^Z}zoAaOIgMXt+DfkELLykKFK{5Tq&Jcaq+ZOZ`2LFfiYZ;xHAv!Ci%AkRu
zm=4<+uN}wZQJ)Wv)9KXmUUj?OilR6K3e+Gdrj_$>7@qU}{tbg*G$EQY%69+&002ov
JPDHLkV1n+oJgNWy

literal 0
HcmV?d00001

diff --git a/components/togglebutton/images/button-shape-square.png b/components/togglebutton/images/button-shape-square.png
new file mode 100644
index 0000000000000000000000000000000000000000..59cc3d9116f862dbdd599b61ba3034b1b61686b6
GIT binary patch
literal 615
zcmeAS@N?(olHy`uVBq!ia0vp^jzH|d!2~2vo$TEXq!^2X+?^QKos)S9<glbW`T|vK
z?C1WI$O`0h7I;J!GcfQS24TkI`72U@8vb~?IEG|6zn$SYsmVaV^?A-5w{uG09nLG>
za}rsZl(;i-LZtQn%bpw}rwqCk6MwA@n(OyT{-m4zyoZZrXD!q0QsQTEaZT{!+u|G=
zS{hr=dg$>-2QW8sT9uuEz>LYvg%Ny(ADRW*Uw^&D#>!M&q`-Gtk*`hxhBgGT|Jil8
ze{lmy+mS@eBM13`=-=YQhMhdO7q45m>*`hu+jr)HMGKPV9lMw|e>Gd&iPAF*jtecn
z)6|yIui6kUyKC{8LxpLU7j8Z~k>?Y+xTQ7X+1h3ygMV4MYi3=!zVUu5%a?f(g0JTl
z*1b)5DgJWL$?Ad^pLq38<t|%0CtKd&^ue9?r$5~F_`dax=g;poXD;|SA(C(U>7|wD
zGndcP{dRViT5$Sn$yv(mrb_L1Jwxwq>$&_{Bv*9x#NFo;&T|62*eq{t@aklmR>_=M
zE6#n?moa#7p{ua{;5^|oMK5xF=TClj@YIY&y-uaF(`&5QXHPx0?D*R6*Zj23?qUDk
z<?y|?)Fo;5j=(RQ9p{*A&i8qmJYmwJ)it&3<^Fd+Oq$7enP>4I#zzK+q-4Y#Wd0;9
z<$M15r?Cb+V3`X)Kv45kt0$Fl?9dS27}UN<BX9fcdEe*#{%iNCKKu5z(9o%k4J$a#
koNO%PkShGp`24f9?LK>j9Pw}7z{J7e>FVdQ&MBb@0KE(rkN^Mx

literal 0
HcmV?d00001

diff --git a/components/togglebutton/images/button-size-large.png b/components/togglebutton/images/button-size-large.png
new file mode 100644
index 0000000000000000000000000000000000000000..9e14f3f387acd2a533919f98c3eca3145c937d2f
GIT binary patch
literal 593
zcmV-X0<QguP)<h;3K|Lk000e1NJLTq001rk001ut0ssI26Nhib00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0p>|WK~z{r?U%o6
z!ax+q`?uY6OQt{(1fie>>C!>F>Y{YWB83(QyErsiw1W<XmK5wJExK4rjXwgZii2rv
zXZtj-jnE^N8ZHj^nY{M`-w(MLbJ<($3_^v4r{XxyU@$N^0&x(E@#`v<W!bj<$&vYd
z4xt#ou40-dUcwOw#dx9O!B!a#hacR5P>dHU9zunMP+_t2D)4fGm%>Ig6he}kfvatR
zP>dHU9zm;&+tt&gL<u1@metx%T9Oc@flYq`Rk022h!Pq(DOUBmmOrF)UzS2qF|Usa
zk(I`H)%Z3GLuFh`6B50AcIz(p`A}4ha-5Ky?v@c_>sjgd`*7&ph?R=kg<qXgbgAN&
zk*>N@!IeJ{it$^kjA|*^pi;-JyEGIS7XB*Eu<DNOXw?8lHyL+qaqUl#D$cA^jxQhP
zbg`n}RSF3TgrowDT52YSe{mVLRfjG&6@QiwbG-b5D}RDiX`abar0_7qCEOxCClRWw
zRs0C_t~3iWY)m4r)^(Vbi&O*#CwcX=d4IrG>GgW=|KjaY%_ijKs1Pb0q|a|(v9SRV
zit&M{Y=cl?AyioGyozBMHg_Nt<AsU`TLsQ`lgR`x;lgw}WgjTv3)ZqMlOqrZp%}le
f5;{WVH;cs=q*a(E5dDyP00000NkvXXu0mjf725uP

literal 0
HcmV?d00001

diff --git a/components/togglebutton/images/button-size-medium.png b/components/togglebutton/images/button-size-medium.png
new file mode 100644
index 0000000000000000000000000000000000000000..680b13d414a402bd8098e34e4e564531290256fd
GIT binary patch
literal 422
zcmV;X0a^ZuP)<h;3K|Lk000e1NJLTq001li001Qj0ssI2w&|Rn00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0Xs=VK~z{r?Uzk%
zgD?<Adp74X^;zH^fpZXU5q>2Whz*5yO+ODaa!SOe!o;ooR<>p7JxBua+u{KsLhvkN
znx?w03-`bR7h4G%(RJN8j$iJX=NT@x5;mf3Ti)d!xY$Z~7SS}#=UKqTRw6_QAwuvh
z0uM4gMvfwnl!|hmJOLM5iN6$)$4aMJsul5`7G`BdW5N`&LB+9~h}A7)aoa1Vf;cn7
zIioEuB3SS!23dTexZ<j%((ucVqpB*rVRyJugiIo(uXmo9hy)WXs_4dx({xAE!*l~&
zY$g6zgt5|KWz)3bkci83#E(7v#e6{o?nWZN;UsZzCk|#eqAbggvw(}OM2HYVgkU3Z
zHp1cO9N=Or;aLRUY<=JJE|(0$u=^IpUq2iXaW--dEO4=vun{jLM64{!H|sOWt14l`
QqyPW_07*qoM6N<$f;ac8>;M1&

literal 0
HcmV?d00001

diff --git a/components/togglebutton/images/button-size-small.png b/components/togglebutton/images/button-size-small.png
new file mode 100644
index 0000000000000000000000000000000000000000..9f7d629add0eb26f3225889d3fdd438f5d9209f6
GIT binary patch
literal 380
zcmeAS@N?(olHy`uVBq!ia0vp^3P3Ew!2~4x7ig6NDaPU;cPEB*=VV?2IV|apzK#qG
z8~eHcB(eheoCO|{#S9F5he4R}c>anMpawxt7sn6}@3+&Ug`5o}+;(qU)3$X3|0cdS
zPIuC5W*V+~ySeUB`agD_$rq;2TfXCr<)qA`$vb99GuPf1cU{=i$f7mrlSAzF*z2`D
znYYD2oY2scZo`0yQ`k>!s)=UOn)HuZ`j1A#{r9JZ0w$K&PpD}6FzI82XZR1Jg0Gt4
ztBzb(-gU}CtfS_khiTuGk_EGw4)Go<-nDnm73O0%5AYOgo@tho`D`I};<L<q0Y9(R
zjm!PM7Ivt1P4~WM(j&<6^(*TNk6rRJJe}QtOnl1_tgt|ITe^YW4_oh&SzjHdrTTk2
zxL&GHX#UFZE&I*Mu!gQBHVyyHzh&<_+ORD1TD)jQ|Kn_i-&++YIJgGM?da%cKKy~T
YW5@c1x-0BrfFZ`<>FVdQ&MBb@0D{k*N&o-=

literal 0
HcmV?d00001

diff --git a/components/togglebutton/images/button-themecolor-base.png b/components/togglebutton/images/button-themecolor-base.png
new file mode 100644
index 0000000000000000000000000000000000000000..aca44d6179cc12d743b8e792bd92b4957bff106d
GIT binary patch
literal 513
zcmeAS@N?(olHy`uVBq!ia0vp^W<adM!2~3IE#sts6k~CayA#8@b22Z19F}xPUq=Rp
zjs4tz5?O(K&H|6fVg?4j!ywFfJby(BP{TA&7srqY_qWr%`<e}S9G>UQX`93Pj&aW7
z0`5cpNsTuGW<(m76?ix}EEOp|)Uka<$5V~-eqD#IXV`9kB&l(9-}~-G55yRx6r7`W
zCB<Hkz5X}ifB_Gf7aBSxi4n*W57s&T>9&+Z+m<}n;=H5AJJu-ex%_bMPUlC~eg796
zWM`1P^sBr}?hnVEj^G*zIirproUVrRKcw(nnAFd07BYud$Uo}QB%fbhG9r&AzTS|~
zm34lGPWA)AU}1BEw~u1JpJQ6FFKo`i1@|oFHn=uV&(VHX$rrvrHtBw1q8GDa%h!wx
z%M}mHaqp2({@k|fv&x)JX<ql3QaoPAx@wxgJa)r1_iChU^XXM_iOY6mNlPu?5qT<e
zt%YJ=0#9+l_t2@wCA3b(9zLoj8Zsri^Zb<!t-YVb{_E}()$chg5-G7jeUaac3v)jt
zC35l}-e5IXD{`8m#k&=akCxvIJG1FcCNI$c+ZR~^gDOY6=-k8L`$E8A&|Ahay?a@v
y##8^y+hxC(F~{?i#)d<~aM9K~UGI(i_In6^t7W+Q=oK*97(8A5T-G@yGywobf!Hhn

literal 0
HcmV?d00001

diff --git a/components/togglebutton/images/button-themecolor-dark.png b/components/togglebutton/images/button-themecolor-dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..e7257b9ef087ad1280b4950f5872ea8f007c61f9
GIT binary patch
literal 458
zcmV;*0X6=KP)<h;3K|Lk000e1NJLTq001%o001Hg0ssI2l8YUE00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0bfZ(K~z{r?U-G1
zgCG!qd$W@GsMk|ZLOeyt5sFtR@6!DX<_GO;+o`t0_YznZ_RErS#=OK`QnWOP)-Vip
zT_3jts)GZ|0HW12jjV46m`&5fKB84sl`L*b(bAC7I&4kR(onQCd{3)&?=iSmW}nhi
zdM~pz{*jg)IWdOOhosfIAYmW{&mlO+`J?SGn9f>s$l_O0Ygs>CkM2o?jwUBR9F8f@
zIiLl@i!>;83!Pv<*;%w&_HDxQ!onraT|uomfwe5GMsFpSN2&Gb0hSL_KI67q_gc)j
zZuMhY*3(|TueEMrpD_7)<9YI0W)Zr?lT3_Q8gugS*-6xN@Z;jCXmQwdXH17UCeS^~
z!V_Ap`Di(utAZAkp#&OZctuP0j<Vw!wHA;b5Z+N+sA>vgVKk%oq84}hrt$ZDMe7$R
zS{jO$hN7k6?`XlxJ}kU$2UO3z?C<oik$n;42j99PUmIiyZ2$lO07*qoM6N<$f&>l8
APyhe`

literal 0
HcmV?d00001

diff --git a/components/togglebutton/images/button-themecolor-error.png b/components/togglebutton/images/button-themecolor-error.png
new file mode 100644
index 0000000000000000000000000000000000000000..8cc38f7aa3811f6d51fc8fb847a03d5d5ddf5f75
GIT binary patch
literal 457
zcmV;)0XF`LP)<h;3K|Lk000e1NJLTq001-q001Hg0ssI2pOtMo00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0bWT&K~z{r?U+k$
zgD?<4eSoa#K38PjoCI|lPQi{du;B##B&KZ=rGV^??EyDo(#n<!j^xo>c*ehHn-xq3
z98u0UtX!Kv9oDPQ2evHW047Gs%0cyGGIV~x0ZgP2pk(E)1}zIA2i75QhjQ;>5aoQK
z<(e>va=y@VJPh3B@(RaE+2>e1m0XlXkHxH)RabJAG{s2`fC`2vQ)&vXbA_XvGONB!
zds7I>yNznYPI73YN}b^poeoa6eL01OmfO>$U87DpR@4S{h7Em5x~>eyVV7NOua9@0
z)+wCi?CaS0OYU6b7)0Iozsdc)xsh4rb_q$^HtLI+)Y(z*bi`E4ZOJaS+v;bX)+wCi
z%+kDlG^us{Mb4zdk!;&v?k%~AT6755#uoKXIz>6tHC9aAm_p+$Hz#)}_nHJjl=Fp_
zdr5*I%K1Xb9o8#&@8_if2jX``&_8m53n{+=bNr$D$C4zq00000NkvXXu0mjfkRZte

literal 0
HcmV?d00001

diff --git a/components/togglebutton/images/button-themecolor-info.png b/components/togglebutton/images/button-themecolor-info.png
new file mode 100644
index 0000000000000000000000000000000000000000..288cb1cedebe08b62848f3955c13ad64ebb90cda
GIT binary patch
literal 415
zcmV;Q0bu@#P)<h;3K|Lk000e1NJLTq001oj001Hg0ssI2L@vh|00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0W?WOK~z{r?Uze#
z!Y~j(VbAqSS@sUOPE?75ARmG#>(VBLvI$6Ol_m<V=VMVjMlDFhMr8CPCgVxw$#~<D
z3?l{)GuY!<d`+IVquEEFsEKMW39v{15`>yd0_<Te_X!K|50o}O2-o9r?Sa9=#O3ks
zft&P*l2(@AQK$Zk&y+s&M_UJ%M}9e?k!2NG#s6@Y2kr-qQOO~%7A3tTi)25hRUN6&
z{Txl)`I^Dy9(ow;fovCZo$LKT2_7FUkGUI%$22<ydth?F1nY1nQh_;nSVdr`Hm^u_
z`mw{cJmysao5U|F;_R+HLit~)S)EPF>6~)E3zx^+DYOS9=t1=oJunwFH5~gn>R1=u
zoaJ#v0`_=#^}yg^;__H|VDK=pJm6jl3ore$vhS6l+_OE0ls^Jf7@9Bt9-9CF002ov
JPDHLkV1glitoZ-{

literal 0
HcmV?d00001

diff --git a/components/togglebutton/images/button-themecolor-inverse.png b/components/togglebutton/images/button-themecolor-inverse.png
new file mode 100644
index 0000000000000000000000000000000000000000..cb438c3092acc911b424d6301ce120a2d5b76557
GIT binary patch
literal 501
zcmV<R0Sf+!P)<h;3K|Lk000e1NJLTq002M$001Ef0ssI2=A$}x00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0g6dPK~z{r?U+q+
zgD?z*d$Y!DIUnI9#HXlpgqSOoJ+7W4^B2-2GjtrMd@D;9(tFm9kB~WUVZd5jmSvF}
zq?we%K#uAKQVs(e<;iX!HEO`*$!;JuyMfd^VxaLMc>AIb|JeqbHgso4q2MiFw;{9*
zPE397VpzLQD?{gMPMOMmch1o#1j?FA&u3!N#MohoPPxU?2B4)v7D9u^OzV3&0Ep&d
z9J;g09!-(~YN7dQjh-O{>SM#|i_$W2mFEo%?^IzTx5g{#J0a;C>P8}lR|nLDi(z08
zG&32IC(wYHtaOD<3{XWcc^O8{cs~oS4aoNNGWx){C4X(e*b6URACF35V77tC!hnEQ
zDzqqMoZj4JG;p{HcRU%K*nngYYCr<6anP^VCnRF&1T~=14Ee+yx$jYv_t?q+UlHSE
z=opI!KQjX}t#Q3lyk2w7W(IibViG=##BD4#fG{%onB6PCs3#sV@Y3uCQnMRK&2Aty
r?_!`VOA0=7gEZ@}#q59XW=se_fkm%<V24K*00000NkvXXu0mjf0Cdnl

literal 0
HcmV?d00001

diff --git a/components/togglebutton/images/button-themecolor-light.png b/components/togglebutton/images/button-themecolor-light.png
new file mode 100644
index 0000000000000000000000000000000000000000..6799351e785bb0260ad42c724d2232830238922c
GIT binary patch
literal 448
zcmV;x0YCnUP)<h;3K|Lk000e1NJLTq001xm001Be0ssI2+qP^=00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0aZyvK~z{r?Uze#
zgfI+1bG=eH4h#oL=sgB*(Gf6ngm$1m_AIF#8(Kz55l|^b<*jVTl3zZXi0+TE3r)d7
zZQC|Y^Wg{>4FY7sLJn;R5Fis4;<8i7<V)z?DO(VFbIL9>g+b`mDH|8MJlu;QxqJ(3
z*cz}NWt^BW2))=jC!Pq@nX{j;bz(hAIWe(NXf!X21raC}37V%H;yB<HFTq|c682rK
z7RnV2i8H-SW`oeE?x`F@tj|56+D@rG%9|iedATkX9Enbc22FYp;-I_6{RY+wr6F8L
zKexv89|%=;3V1NSEczh7>L5Jwa#ctlgfJaCHAgLk(YW8hTA}JB;q}t63J=1$5I`P)
zFD2ZdLJgY`Z2&Tx)I6a{j=j)g)(VYI0(bAp6D12V2wmr)A2M?%AGx}i^+LbQ7KEOi
qvI|XdD+E7TxX33*z-azTciksEI-hIlq(uJ!0000<MNUMnLSTYuo2u#n

literal 0
HcmV?d00001

diff --git a/components/togglebutton/images/button-themecolor-primary.png b/components/togglebutton/images/button-themecolor-primary.png
new file mode 100644
index 0000000000000000000000000000000000000000..86fff7a62bb5a32bfc40bae9ad4ca4db26ef94f8
GIT binary patch
literal 616
zcmV-u0+;=XP)<h;3K|Lk000e1NJLTq002Y)001Ef0ssI2??{>q00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0sTotK~z{r?U=z*
zgD?<=eaW`o1U&Yw=uGKLP!HTa*p9padUph?mLzU=6GBqx6lbgr)69R^{A_mjgPgb#
zBU+<`$sWW!5cjuU3MPm74Gip~gCt)Blf(Q5#(C_c+A!Q_jT(kUGk<l3xm39@bu{x=
zSC}JOZG<TK>cBsXT$p`0^H&34*sBovnpc!s^2GQ&-zxJF0(!LO5M<;FQEeGGoHo{3
zvtHMS1;v~3_u)cz&lh^@Y9NddJj0x<Xl6pcV3d~NHB&IepkwLFvoas&V=r7MP(di(
zDi}45n&LpH<1V={-{G`RI7F(qF}|eO^^+$Y8sZcHU^w!v9GI`#)D#<~@ZESOW4jU6
zk#U`uEx$tpVQ_l0#nPw3G-quXIig-&Fy<@-l+dUDgsJm)><Tvr^Si%{&X1rVW%kO2
z`3k3fq8@r1GrVT5k1#BOSiz7_Fe*pE#H^IlD^tU$WYY*ALCw6d%?=HOk%QuVFc7{c
z<^L8&oA_$*nyF-aZfxBq@0JVm8BF_B%N_-ch^u7Fwx6oBCBn!@3dZC-$0`S5_9|H|
zo*@s`u?jXvL{Yb$E)9jTdz?)Gb3$uBV4!vLk&noQ*#(n65sYL0xt1Gwu}|we0Os;F
zYM75;;;*hSmns`(9_;QWm7jvi?ccMb`f)yjCBzRj&`!goa-|di0000<MNUMnLSTaB
C=@X{_

literal 0
HcmV?d00001

diff --git a/components/togglebutton/images/button-themecolor-secondary.png b/components/togglebutton/images/button-themecolor-secondary.png
new file mode 100644
index 0000000000000000000000000000000000000000..9e9c4cb67885c3061cbe2a56a31838042e09ce84
GIT binary patch
literal 1077
zcmV-51j_q~P)<h;3K|Lk000e1NJLTq00310001Ef0ssI2CnRv%00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D1IkH6K~!i%?U_AH
z+dve@FQux|RKiFw#6``L#S2Jf1k){9U=7*o47d!HU`W?QZL%g(VFM#I83Q9?z;wf5
zq*bzb$zoK@P^22EE^3A7dv_Nnd?jH(0?cp8`SG~B|NAl`fwQwS;$xohPrris-`(A<
zR4OMYC*0-(g27-inH(P<$Nc+EJOFw@H7roS-^4SRYQOjYqkalZLBGL-Kjz=xJnHv1
zcU=G5kIO5c6#j4<aQ%EH-Z^gZc5LgX?4twm^kPB^(WPsyEflxu^1OL{p{Ua(iKQ23
zE}NB{CX00C8S(cAEVEx?-tBv|wm!7&05u_PC${`y=cr=}xXWMn-!sziZkWogOpvOY
zEz_s#=vM!!TtadTl~Q%2nH()fyh_AcXJ+GAO5|CMD!CcSsdBR;C2}ch)MUYA&S+dr
z$Eh<RVM+K#%~d-jO{HUKi>E((CmKX#QRCu|jd#?(Zn~a7A)+*}ht~I-jo+cjDBoO(
zihoR_vv}Yp{a?zeESxD>BIaf@UFD2nhsWSH@${JJnnsD6(YwTrP3LkJrOLdcJ?B!x
zCLv)MR`HQnFTl+14Lcw3I@OB{s+uXYC%tC5biuG2%w4bVLjXo-0F-FhwQ9UpJJ7BE
zONRM6A#0ip$3QXB>&6EK5)u=dmY^;a*MUR~gvjwv9+f5+jXxZh2z-47Vt<G@N1nTV
zeBN8ht;iy4iS`I^^xFQEBw)$Jh6L9#zVhI8plkm_;PEy}UXv#@Z30I?9iH3!wTbeE
zFFMoxQdfZ&2-9=bqK;E0!hg`tcHNpzL{pHV2(dP|dpN1r`Y&gA-$8@vM-EhLvol-R
zzg*Hk)NF3fMdPs09AQ^N6F%s<V>wW;p3OB?y%hBG=yl5#qv;WlU(<UDbocqEX>8^}
zQH?}G&{R4$g)7Q@=CyqE;vP0P&O87nmIk8^j0ewQSTRXTZld#8(u>~@yaA!)<(IAb
z&jtj5Q}((b;%Ep<60z#tdmrKT@4XK%@+GqqU7e);57^b&0>*!<FdxphnRjM0R8lEZ
z8Cpt0n^5!N&TL@|KC|jsewB|4?4JT=hMm`Z5qnQ?Vs>qCX@+j?nx-9=sJ)b_Mpv-`
z!Ob-*J0v+78I2L1<F@NV0H&pgRol8w(RuLye{*wlr>CdfaPNtKSehmq^M!8t@9XPZ
zUS7V*`|n;58^zx5t@wclr61lAtI3G9L3^|}9$x+T$^)(c8^ZNN75EJ%{4xLj2K5Jn
v!9bw(ca|Rjy`UNw&<TG2{?p&z{}b{bhi0y}hO)Qx00000NkvXXu0mjfKe7ge

literal 0
HcmV?d00001

diff --git a/components/togglebutton/images/button-themecolor-success.png b/components/togglebutton/images/button-themecolor-success.png
new file mode 100644
index 0000000000000000000000000000000000000000..8e366754e69f87ec78204e8e39b9589c6b8cb7c0
GIT binary patch
literal 562
zcmV-20?qx2P)<h;3K|Lk000e1NJLTq002q=001Ef0ssI2@qwzp00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0mn&1K~z{r?U_4r
z!Y~kqq0e;^x7>*wB-A0fLBI}~p$QiVT_A25XqgEU)44#=KJ)^Kj59P6-uVmp*UHi-
zX<a}^Bpp|SH`zS*rZ?GJCw57S$>xcm3|<;+B*{Wh2Ja{%b`g||H%Ub;Ud(FoVwM;0
z?llp$crh!0S0tjwc!TYZ^TckxBy+eDVzus?gnBk8@Nqe-I9XKNJ|#%=hds;0mvHQd
zXU#|3%xI#38se=>A<BZ=U#cC#BcH~?ny_srb3$f%rTQQB0kQk@8u&9bscrRY^B&uN
z1@Q8K2=B<u)r#?v@$#-}*qNr+HNW9-w6l1xU>1d^eUQR)%%B?L;gl4bCxln*@kVhD
zi_FZ$%l8L<sR`Uf*i8(3o8Z=*m;p7#W5FsRcJqaNyae7!rV$(_hI7KIs?QAkHy%pW
z!$mIVpGV=Xi*<SM6pK+qJbMn<R60GpvAm0bssIR^#(MWcR~MMNq7<#}1ykJxr}n%T
z#FiiLb{tfpzx23t_CNKvzAWSx)U$_imwc064NsCC(`3T%Gp4$$GW0|NHO7le*NHbu
zL@i#-YVl&$_2KoVH_-PIzec_v;S>K0CBYEl7j=#uWIYrU&Hw-a07*qoM6N<$f-xoj
A1ONa4

literal 0
HcmV?d00001

diff --git a/components/togglebutton/images/button-themecolor-tertiary.png b/components/togglebutton/images/button-themecolor-tertiary.png
new file mode 100644
index 0000000000000000000000000000000000000000..77b4aacb9dce24f985c96231e2a833209e88d651
GIT binary patch
literal 613
zcmV-r0-F7aP)<h;3K|Lk000e1NJLTq002M$0018d0ssI2*wb9A00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0s2WqK~z{r?U>I}
z!Y~lVoq@Ygi%%muBmO=33Vj0LCMV&{h_+NL&=!chn{5+A%CsFv2$J~@+b>_z{Uts1
zOgKIm;ChstKSzzHFDC@8UX2pjIRjAlGb4AvnnA;|a|YN-I3U@%2Jkp@Nk<9r>5@(W
z`<4aZA#_Rq3LqJXjn_BK9a?y?7>uayr$M!~rDXxQpB5-afSzIQ5CIGg^S4zR0J`VF
zJq_3VoICf^b|?m8IBXaje?@ab1mi`cM>inhd#TSeFwkt08N{g<lDAl^Fu!Qsmi4x3
z-hjTT)*Jw6FVk)y&tQ=QV?e~|1qTQ<^Rs$-8LHYM8$eJX2>`{MI#W}v@kWF(6bL{C
zNsBQ6=X2pg1TX{AZ($w3*cK|)0#Kim8r1-_9c%#fxN1}3Gf9DJ1L!x9s{{bI9*pPU
z7u`U<76LL^C=0-yU!WxcK!LmCzGlEDfMxb5o1mKe^BcnzcAVuIKo96sVd}*{Op9s(
zP#@}jil-C+d>b-=HGM*QKu)of&F+u|;P#_P*dN}01T~&eHl)J=0Lb#3375@og8g;X
zCOG1x^-2c;z81(7(YZuT<=9jS;BN&0h~z8)+zDKfVQ$L?@V<A^X9mY_`W77~Km{Em
zKxg8TP5}Fs0f4_2!M%BNL!F8FYthx8yFz>e!kSgL)6he+00000NkvXXu0mjf4lDhD

literal 0
HcmV?d00001

diff --git a/components/togglebutton/images/button-themecolor-warning.png b/components/togglebutton/images/button-themecolor-warning.png
new file mode 100644
index 0000000000000000000000000000000000000000..a7acf469c99c5507f0a32178ea3054a81d439c75
GIT binary patch
literal 873
zcmV-v1D5=WP)<h;3K|Lk000e1NJLTq002b*0015c0ssI2^`=Bh00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0{%%vK~z{r?U>I`
z6HySyzb!%`fg9Kc62!!VC6Guwa6q95#A`u=cwzewz!^0GK`q`$;193`BbXTAuC_vI
zf+rG;<zgraf%4-@!Y^T+dHc4zYH87s(B1gSr1`#ilX;z;+1I2FRaIdl^m;a5;d?KR
zcZJiM<Q3!Es9sO3#M;GZ<P|%mvOzJ#@vh#VITFHUWgHIZ{jm#1e@;$>!^$|Fw(F05
z>!Go;x)J~9?OX}oK`<`$xnSIHKaPdN%3R9J+MhTITCpG(7;eGvH>o!x=!}S|jU&Is
zFfCZyrFilT$FVSBEH#e?Cls2*WJK<grA{=G4`Ffw`4iH88rkZp#vqW`5ju{3U~x-m
zAR0q^EgW=S55}i(^pS1If!q3#GcRyulAVvLe_5_QL4S|w8|!q(uqKj>H*pevQakAE
z!O)mUejnW-Eie<N`%O)6J_XZDERsq115jf~l7Ac1fUgv)7l$9vMM4iwr9zVk(DINs
zfUYvu?i%>%8Es2Hn-GKd;1<EY2HHmQ1j!}L1kmRd0bZ^%!}la3vfl?)<(S=I@#!-<
z?xJoUt29nufd+U)07DP5l_#_D43F^atZu+xE;UhgRf-H`ug6mhe~8B;F^8%$G%JWM
z^GO}GVq2@^A?n7sQS$-eyg0JYn_7zYMkFE_P*AUOyB3p(uE<%UM$IZXc#pp8GM+|<
zKRKh+X1~<>aax#Jq%;|i#=3NpC02}>v_@p_4?&Gqg78<cc6%@z#NsWu#TJu*c1LVQ
z;R_3OPVk!+#>-`~ScWn$L`F>gIo;}Sa)7@^EWLON-0;Y)%gvxyrm_vLHdL-7@fZm6
zaMG4Jr-pf%(rHZwlwoQV1HGKw^$sD0pQ$<QHzSPS(}N@7$YH*`#z+OGn&t9OT={34
zw~K-XxbT@AX1aJr!aO6HG5WKAC>%M)+vf=AuTAI;9+XO*mcoLZujj9zdUAT+{sE&u
zdk4Z{Wr|$3>yKUMEmpF>w`=LYtej3178U;ljLr1;<bLz000000NkvXXu0mjfeyx*y

literal 0
HcmV?d00001

diff --git a/components/togglebutton/images/primary-button.png b/components/togglebutton/images/primary-button.png
new file mode 100644
index 0000000000000000000000000000000000000000..061a97047b6bc1e265d61b909bf9f3647c796269
GIT binary patch
literal 528
zcmV+r0`L8aP)<h;3K|Lk000e1NJLTq002?|001or0{{R33Wm(R0001HP)t-s|NsC0
zV_5%XSpR5P|7uwOXITH|zW?X{|HWAU_W%F()c<Fr|EpO4*!BPa<o{^C|Nr&>aAyC;
z<p0Iw|Jn8bXTJYtzW>;x|HfGV|MdT=)c?f5|Jl_4###S-bpL&C|LNras=grsu15d>
z01<RWSaeTtbZKpAdSzq)RB3K`P)<kgBD~!I00BrzL_t(Y$L*Hga)K}rg(KTd1R?yE
z3Zk~}|B^jyXnP?Oi)kI5;q1h-`SJ4vZ&0gN{h1EsCP?Ms0$HBIkf-tjxe3-?kP%h`
z#w;?do){UZ`yzL-%-`IsRomN<97zGW#pf%SyrldoC0C{+GpOPNDUFU*ks3)}<EX{%
zpwv4&%93BF<Pm9+c0?9wWWcK}*G0;$(wvEJ8HYV78NY-vA$v*3QR^Hy^j#`v43LTQ
z-omjqpOV<s*WW{IG;ywu;#Gnk(Wu9srYvDut2Nx!TuLXoixW~XE-qdt=(`j^nFA?v
zBWFe4lt=N|l$n-wmy*n2$(NEQ?c)8^;j5IZy*Q8rWCLq(aX3_=`_^s9E*&4VZmb|>
z(~n%P+>#ghLW`@?KYe&gc|w-1r6dX&;VDJeQU>Z-k>xpzcrO3rHEY$X2i7Ng>Kyrr
S=^R@C0000<MNUMnLSTaY{|&(a

literal 0
HcmV?d00001


From e4ddd007c1cb3d350b05032b1044630cdc4e37d3 Mon Sep 17 00:00:00 2001
From: Svetoslav Dimitrov <Svetoslav.Dimitrov@progress.com>
Date: Mon, 17 Jan 2022 08:46:23 +0200
Subject: [PATCH 05/24] chore(buttons): delete images

---
 .../button/images/button-fillmode-flat.png       | Bin 300 -> 0 bytes
 .../button/images/button-fillmode-link.png       | Bin 312 -> 0 bytes
 .../button/images/button-fillmode-outline.png    | Bin 411 -> 0 bytes
 .../button/images/button-fillmode-solid.png      | Bin 495 -> 0 bytes
 components/button/images/button-rounded-full.png | Bin 766 -> 0 bytes
 .../button/images/button-rounded-large.png       | Bin 453 -> 0 bytes
 .../button/images/button-rounded-medium.png      | Bin 417 -> 0 bytes
 .../button/images/button-rounded-small.png       | Bin 368 -> 0 bytes
 .../button/images/button-shape-rectangle.png     | Bin 675 -> 0 bytes
 components/button/images/button-shape-square.png | Bin 615 -> 0 bytes
 components/button/images/button-size-large.png   | Bin 593 -> 0 bytes
 components/button/images/button-size-medium.png  | Bin 422 -> 0 bytes
 components/button/images/button-size-small.png   | Bin 380 -> 0 bytes
 .../button/images/button-themecolor-base.png     | Bin 513 -> 0 bytes
 .../button/images/button-themecolor-dark.png     | Bin 458 -> 0 bytes
 .../button/images/button-themecolor-error.png    | Bin 457 -> 0 bytes
 .../button/images/button-themecolor-info.png     | Bin 415 -> 0 bytes
 .../button/images/button-themecolor-inverse.png  | Bin 501 -> 0 bytes
 .../button/images/button-themecolor-light.png    | Bin 448 -> 0 bytes
 .../button/images/button-themecolor-primary.png  | Bin 616 -> 0 bytes
 .../images/button-themecolor-secondary.png       | Bin 1077 -> 0 bytes
 .../button/images/button-themecolor-success.png  | Bin 562 -> 0 bytes
 .../button/images/button-themecolor-tertiary.png | Bin 613 -> 0 bytes
 .../button/images/button-themecolor-warning.png  | Bin 873 -> 0 bytes
 components/button/images/fillmode.png            | Bin 1233 -> 0 bytes
 25 files changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 components/button/images/button-fillmode-flat.png
 delete mode 100644 components/button/images/button-fillmode-link.png
 delete mode 100644 components/button/images/button-fillmode-outline.png
 delete mode 100644 components/button/images/button-fillmode-solid.png
 delete mode 100644 components/button/images/button-rounded-full.png
 delete mode 100644 components/button/images/button-rounded-large.png
 delete mode 100644 components/button/images/button-rounded-medium.png
 delete mode 100644 components/button/images/button-rounded-small.png
 delete mode 100644 components/button/images/button-shape-rectangle.png
 delete mode 100644 components/button/images/button-shape-square.png
 delete mode 100644 components/button/images/button-size-large.png
 delete mode 100644 components/button/images/button-size-medium.png
 delete mode 100644 components/button/images/button-size-small.png
 delete mode 100644 components/button/images/button-themecolor-base.png
 delete mode 100644 components/button/images/button-themecolor-dark.png
 delete mode 100644 components/button/images/button-themecolor-error.png
 delete mode 100644 components/button/images/button-themecolor-info.png
 delete mode 100644 components/button/images/button-themecolor-inverse.png
 delete mode 100644 components/button/images/button-themecolor-light.png
 delete mode 100644 components/button/images/button-themecolor-primary.png
 delete mode 100644 components/button/images/button-themecolor-secondary.png
 delete mode 100644 components/button/images/button-themecolor-success.png
 delete mode 100644 components/button/images/button-themecolor-tertiary.png
 delete mode 100644 components/button/images/button-themecolor-warning.png
 delete mode 100644 components/button/images/fillmode.png

diff --git a/components/button/images/button-fillmode-flat.png b/components/button/images/button-fillmode-flat.png
deleted file mode 100644
index 6d3f957af34c338f58a146d8901fb1f8d754b66b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 300
zcmeAS@N?(olHy`uVBq!ia0vp^CO|C9!2~3;cHVFTQjEnx?oJHr&dIz4a#+$GeH|GX
zHuiJ>Nn{1`ISV`@iy0XB4ude`@%$AjK*58aE{-7)?r*0U@*P&-ajl-p!($nCbi!nV
zf+-$z7NjejGF-H*T;pilf{;^(!b2-R2s4{8^C$nD#<I9bL#urel<2r4x9ng~<xck<
zvor5y{cC!`F8xiag!#nYH0xa_Zu?HV^J+)hmQQQbcfPsU*Au_bNaow;#iu5^Yb)9x
zSpR;H=#RDC;u`J`KW=V%!nbzP^iWGFy`yat)zc48e)~#f%9Y|NId_lM*-eU-v|YaM
k4daC0@=%+VBJ`H>cdz{3$(O9<2lNbsr>mdKI;Vst0H`;26aWAK

diff --git a/components/button/images/button-fillmode-link.png b/components/button/images/button-fillmode-link.png
deleted file mode 100644
index c7c4d7aa2bf5b4310b4d2bdeb0866a30ebeb6d1c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 312
zcmeAS@N?(olHy`uVBq!ia0vp^CO|CB!2~4tJg|-jQjEnx?oJHr&dIz4a#+$GeH|GX
zHuiJ>Nn{1`ISV`@iy0XB4ude`@%$AjK*6(~E{-7)?r*0!ay1(WxK>ZqiFxAC>J<Ly
z(BvH_0$X;vM|V{4IPy<aQ#-gUpoDF5*AqdNw6-57)Z?x+o-7L4Br{dV{i#n8^Ay*+
zeDagy*O=urXl*}b|8!dZ_uhF839R$mU+l9oy%gd-<C!?i?h}P!2Qy9uM;EI7T5x$r
zrMJrO6Q-A@UFFy+yp=b|e!AAQ6-9{`DjuDB`PJ{of{!kJS4)K^_v)vMdp=w?fjiHT
zZAna&KvDnm)BiIyA6M<(-D_4nZL+ujw8fL2u8@iFTWMbMtX-a8@_#ANV+@|IelF{r
G5}E+iwtM^l

diff --git a/components/button/images/button-fillmode-outline.png b/components/button/images/button-fillmode-outline.png
deleted file mode 100644
index 804a6009bac98ebc3106f2417921ee6351cf1d51..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 411
zcmeAS@N?(olHy`uVBq!ia0vp^PC%^0!2~2z4$XK9q!^2X+?^QKos)S9<glbW`Z_W&
zZ0zU$lgJ9>a~60+7BevL9R^{><M}I6fEo-uT^vIq+~3YPDA=qZ;2JEgdZSH5Sh{e}
z&6dYE`E(BdNo7=24D6h&aM*h7sYCTj;`!cUPgY#~UK<+vNJ&A9skq3WnSWX4CGnHZ
zD>%+<UC!tl8_OcSBSXdEqDSYVi9)W)`o-bhX%DJ$SgvogXs^$l<Fn>igH6wywA%bV
z+=cRAkKXaDa^b6r=`L)%>o7gX+Ip_?&Tn0}^n}=)cUUZP<Wt)l+-?%`_2c42dd7$E
zc-;vL4w!DFzGtShOGX7Z!)~`d$Fjxm^=)UCSRdN#lCg$UqN+7Ldqr;LqeW8D&kw3P
zJr0+jYNxWh<3dICk-5yP4%IGRxa->Q=&(SkhG(fg{0pyznJ_o)s+yCzpKXC*TkqV1
z9D00NDsE8ME30n0cH+tNbhZ79)_aRdo&LnIr+?<>TVHRc0Rxo5)78&qol`;+08V<O
A3jhEB

diff --git a/components/button/images/button-fillmode-solid.png b/components/button/images/button-fillmode-solid.png
deleted file mode 100644
index af9c07e7e074181def8453aaa848ab4422ce8c55..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 495
zcmV<L0TBL)P)<h;3K|Lk000e1NJLTq001=r001Kh0ssI2y9?E!00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0fb3JK~z{r?bkta
zf-o3{;hrtMjPWYu9>6)!TMz_hSTJs=wrl<V@CyOsOp8!phIbW1I(anKfsfm=TaWK@
zxuj{T=MDx)*kt>PqNu9sXYQ`oD<o{PeR-bqlDUI~O>6RHS@yk*AYs$y8`9=`uXXzH
z!;Rm@5z?U)GSnCyl@KbbXWO*D7dvzPMUb#*VxPN7eA<_Sv-j5Fj%S5;Z01~_AB{~?
zd2(!DL>uw`?bzU$WsMy^8c5%ebh!T%Q~H{ElMRamU0-+Q!1FzwPPnmoQ5-zZQALj_
zocJz?`4u`SA?bA-z-KOChStXfvQ~oI`NMvYu<6%6?%>r(+J1>X6MdG_k7*mB4m?TI
zIA5o)x3bTD>hC^#gT`T?!mFpP@w3ldrMJXa@&7TduRU3+`3f?tj-gH;k4-A*e=+(E
z@%?9RUy>wW%Lo!SZN4FGzV~wb@a&G~^Cbico7UvRT|-%xykx%4=d=6%1vmahQQ+Bq
l-e7=)O}1~DZN7K9-R@6!`!d#9`8)ss002ovPDHLkV1mT3>CpfH

diff --git a/components/button/images/button-rounded-full.png b/components/button/images/button-rounded-full.png
deleted file mode 100644
index f79ebff27a621a0694486023a018d9d6c2362f07..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 766
zcmV<a0s;MrP)<h;3K|Lk000e1NJLTq001=r001Hg0ssI2a90Kd00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0+UHZK~z{r?U-3|
z;xH6Nvo^As&|3-n2&^Np3%i)7Vm35?Kp$JLDbm(xi&Q@Pe56#ibnivOL*(W5v-zK|
z9u@PQPN&ssHJwfegF$M5S9G8oon=@!Vfn7t>wdqVOeV^h_VIZ9t%K)42fEGYbB54n
zxCnU@kdJA=1~XG83k+E<mkbY`OW%Ck?Up%X4#cn$q(lTM5%s_;A8Rz5&G_i`$+C=z
zL{Ow%xbtl`n^@r#L_`o-F|gvu$BL*;6Bi;Pi@4aBvE}2qp|acUL^UcZqVq)C@{x?a
zB6?4NRmMWh4A}BLZ}Jps3dPKTF(2h%u~@K0^nA7&1<j9Cp8P}FX*QZ2UfvrzC^s01
zr4D00&X*-$@7<hCk#>H)y7RGr><8JHkM9WzsmOdG?YybEgI4d@V<ualf8TvH8*fDz
zzkFC=B$hgi`Nre%;cyU{5)boND<2jZiKPx>K5iePp(A2GjKorhF<-ym=X{yy=J^uU
zEb<l2EKBly?fga3CSTr4+T<%9>A^@Wbr|!FMk8(mqERANJ}fX2OC831>MK%YO2o>i
zZXRN(!<cWqUUT?Gri99O$eT%<<NV%LkI5R8kHd?RSn4q5qiizsB2(fapGu%;b*bAS
z`LL*1pMk-aC9V(R_RR;jd=yVr1)l`s&bzcNAD5ruaLE1;y{I6Ic&+;tunMSfixJgG
zAc!pDVq?aU4=4d>iEt!XS<jy!?tDO@i8YIe5Dr0+cHxx|__%yg@|TKV8BT)|5m66(
z^8wrC{x1tL^oC>%WVp|sdn6zqTrL-i7B)cXCn&}e;VV1`I?#<GM}Gz~T!g#{%XjB|
wK4Z@|;s*rwT6jeVy3tvNg;O!#H*vfD0RS!XkJ+u`XaE2J07*qoM6N<$g5h^q6951J

diff --git a/components/button/images/button-rounded-large.png b/components/button/images/button-rounded-large.png
deleted file mode 100644
index 3e3eb36329d4efb417797cdfacd4e68eb82d9471..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 453
zcmV;$0XqJPP)<h;3K|Lk000e1NJLTq001Tc001Kh0ssI2carZ)00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0a{5!K~z{r?Uze#
zgD@Bddp4g2u99$%z%>%M1<$Ym2?-TwC0Nl9`*#`#QrcpoMrBquK{Md6uwVLz^9Pb`
z+va&5hGDP_7~p}8yjLj6uIth?EsElOF-_CJ0~?%Vmnccxq@{PEEK3N<E>V(rC_EkA
zt^?TMB)ddOCQ0(98#u`>*^*k=k|2&_eAf5y_KfX4ntU5L$u4=CWZ)P~U>zKjnNGkj
zPoXC{3=B~b?bVZ>b=^2wi;__k)%S6Sq+9#8$t;(y)qHB&KF!9!Np{IoBx@H7``O?N
zyLOTf3{mlI{`st$Jn^9@4Oj<tokuK6PIL3uj+jYek5tXW-}WdcJH~b{O{Rd8?2=z3
ztLliT<jWq=l>7->65wa-JYTgklf;%j%QCuG2e83Oc8QY25d!-LEmf=*Jb1<Nu|!D%
v93il!#}@m%3~{y@A4tG$@&WvZWZ!=P@PL-HHHW_g00000NkvXXu0mjf^7y@m

diff --git a/components/button/images/button-rounded-medium.png b/components/button/images/button-rounded-medium.png
deleted file mode 100644
index f7670290575b4fe45b4478012397fab92d936b30..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 417
zcmV;S0bc%zP)<h;3K|Lk000e1NJLTq001ih001Kh0ssI2f^1~^00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0X9iQK~z{r?Uzk%
zgD?~Zdo~V(k78c~`4~+&MERFkz=l98A#OmwXI>MB&>aR^F)Q1$n30Jh{5I~*Szs6R
zeV^xf>>gO)Vyj(HmSxj4U+(F;4lcIZ1w~Qt7Wcr#)?*dm^?YsxTx>lHh_m2W1zDEi
zzhWI?Ej*!Pp1lGWTmMc0JyC@h<xR-YtW2noH+7-pB_WlI0wcbUSsZKM69K76@9U`L
zMP#gAaDU>%N|QjCvJmH^F4Nj<{{qVeX_~gb5t%1OKNH`R@6))AsNnj%0bJ$NbPil>
z{YM3)d@Q~M&2dp+2EP8d(GVNxm$-2OpmQ+DVD&Rto8^KeNp4#K7hBH);w-QWaGSx6
zWgFmP>#+*(<y2J_Z*fUo*UMjN!!Y1Fhue&6V1bLRcEMikT`-Q{&C1~#rtrgu00000
LNkvXXu0mjfCEl+r

diff --git a/components/button/images/button-rounded-small.png b/components/button/images/button-rounded-small.png
deleted file mode 100644
index d3ace4f56081ed68d199c764f63aa8c5bb8e0e93..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 368
zcmeAS@N?(olHy`uVBq!ia0vp^T0pGC!2~3ieY%qfq!^2X+?^QKos)S9<glbW`Z_W&
zZ0zU$lgJ9>a~60+7BevL9R^{><M}I6fErjmT^vIq+}~dJ<!dq!XiGdFrtf^7>AS$W
z#yL*^4mT}bwC-be`l`;Aoo>b%Z+2&8A9jA-b#+h1{e%3613X!~1CG?(|DL`wL9mOd
zf7d!|kcdcyNX1H<n%mplLBe&7>&>DHtyX8O^)NVR{7><aQP_&ta`pP3Eahg4d{6F{
zyxKcA>PWWe=d%3#58HWWKFJeWE#3L|Pt-q~n#(4a51%qITJG$5&inF~t$Su4@yhp_
zCt+7A?7xA-_524Jp4r>Zi#^YMrnW}q*zNyy-j9v0TKs*dP*qj_R?S_n_^14d!`Dk|
zCvb@^)cEjXe`QV0o25;z8eBF~#|7o(jSeb_814`0{`9$qan*wczW?)1`vXIX!PC{x
JWt~$(69A>nnmPag

diff --git a/components/button/images/button-shape-rectangle.png b/components/button/images/button-shape-rectangle.png
deleted file mode 100644
index 8313922f2086fb75c45f249deb27a32f4402dde2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 675
zcmV;U0$lxxP)<h;3K|Lk000e1NJLTq002<{001Hg0ssI2s9T~A00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0ys%TK~!i%?U!AW
zvM>-uXKk_>aVaDF5VkSuDu(!1#e?Mw{>-y;yE_R1iBkhsee(s*6CIl59*iPy_u(;Y
z=gZ}?+wD}KKn;RoS~(X*QI_Rbpj@w42#RUtd^jBR`9Oi7m=4={zu(`227+QbItR_@
z%#6+f(&CJNDtK_eo@FwbW=a>YKxOeH?l2<+#dLJ`vQ8#RwumP{3t+@BUvm$kq=(>G
z5Y{Bzq_U~5LA;RQm@3W|jZQ{ovq%rp>eDR0G@NTOaPkQqoLx66lcgM!hE7k0Cb2!P
zK4%s-lknY<=sdaYi6hfP<MATb!`xGMUMEo_1~+@?;%sK;xXx$GA)x2TyZH9D8@)F9
zO!xDJB+0DjO=rZ2>M>@Kvqv6iao%pXc-!)@;#j7@@=cOey{Cerr@1Z&=kl0O)Go})
znTB(^v#YZn=5m^TqRvw|qr(%!3k1cqtMmME@}He`N-0hBUe5E!^}O_QmgPmmAy4@m
zr7KJ2j7db2`N>%>BuR!0>&}P~wZ!n!%UMdRSKR`nw7bhHEfbT>orI2`?`^ZnCy!#b
zrZY7}wHVKDK~HBBLU2|he?z55&l~M8r??cQ{Oon6RqV4WwOhS%ZpN^iqLtq||9j|e
zI$!S&v^Z}zoAaOIgMXt+DfkELLykKFK{5Tq&Jcaq+ZOZ`2LFfiYZ;xHAv!Ci%AkRu
zm=4<+uN}wZQJ)Wv)9KXmUUj?OilR6K3e+Gdrj_$>7@qU}{tbg*G$EQY%69+&002ov
JPDHLkV1n+oJgNWy

diff --git a/components/button/images/button-shape-square.png b/components/button/images/button-shape-square.png
deleted file mode 100644
index 59cc3d9116f862dbdd599b61ba3034b1b61686b6..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 615
zcmeAS@N?(olHy`uVBq!ia0vp^jzH|d!2~2vo$TEXq!^2X+?^QKos)S9<glbW`T|vK
z?C1WI$O`0h7I;J!GcfQS24TkI`72U@8vb~?IEG|6zn$SYsmVaV^?A-5w{uG09nLG>
za}rsZl(;i-LZtQn%bpw}rwqCk6MwA@n(OyT{-m4zyoZZrXD!q0QsQTEaZT{!+u|G=
zS{hr=dg$>-2QW8sT9uuEz>LYvg%Ny(ADRW*Uw^&D#>!M&q`-Gtk*`hxhBgGT|Jil8
ze{lmy+mS@eBM13`=-=YQhMhdO7q45m>*`hu+jr)HMGKPV9lMw|e>Gd&iPAF*jtecn
z)6|yIui6kUyKC{8LxpLU7j8Z~k>?Y+xTQ7X+1h3ygMV4MYi3=!zVUu5%a?f(g0JTl
z*1b)5DgJWL$?Ad^pLq38<t|%0CtKd&^ue9?r$5~F_`dax=g;poXD;|SA(C(U>7|wD
zGndcP{dRViT5$Sn$yv(mrb_L1Jwxwq>$&_{Bv*9x#NFo;&T|62*eq{t@aklmR>_=M
zE6#n?moa#7p{ua{;5^|oMK5xF=TClj@YIY&y-uaF(`&5QXHPx0?D*R6*Zj23?qUDk
z<?y|?)Fo;5j=(RQ9p{*A&i8qmJYmwJ)it&3<^Fd+Oq$7enP>4I#zzK+q-4Y#Wd0;9
z<$M15r?Cb+V3`X)Kv45kt0$Fl?9dS27}UN<BX9fcdEe*#{%iNCKKu5z(9o%k4J$a#
koNO%PkShGp`24f9?LK>j9Pw}7z{J7e>FVdQ&MBb@0KE(rkN^Mx

diff --git a/components/button/images/button-size-large.png b/components/button/images/button-size-large.png
deleted file mode 100644
index 9e14f3f387acd2a533919f98c3eca3145c937d2f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 593
zcmV-X0<QguP)<h;3K|Lk000e1NJLTq001rk001ut0ssI26Nhib00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0p>|WK~z{r?U%o6
z!ax+q`?uY6OQt{(1fie>>C!>F>Y{YWB83(QyErsiw1W<XmK5wJExK4rjXwgZii2rv
zXZtj-jnE^N8ZHj^nY{M`-w(MLbJ<($3_^v4r{XxyU@$N^0&x(E@#`v<W!bj<$&vYd
z4xt#ou40-dUcwOw#dx9O!B!a#hacR5P>dHU9zunMP+_t2D)4fGm%>Ig6he}kfvatR
zP>dHU9zm;&+tt&gL<u1@metx%T9Oc@flYq`Rk022h!Pq(DOUBmmOrF)UzS2qF|Usa
zk(I`H)%Z3GLuFh`6B50AcIz(p`A}4ha-5Ky?v@c_>sjgd`*7&ph?R=kg<qXgbgAN&
zk*>N@!IeJ{it$^kjA|*^pi;-JyEGIS7XB*Eu<DNOXw?8lHyL+qaqUl#D$cA^jxQhP
zbg`n}RSF3TgrowDT52YSe{mVLRfjG&6@QiwbG-b5D}RDiX`abar0_7qCEOxCClRWw
zRs0C_t~3iWY)m4r)^(Vbi&O*#CwcX=d4IrG>GgW=|KjaY%_ijKs1Pb0q|a|(v9SRV
zit&M{Y=cl?AyioGyozBMHg_Nt<AsU`TLsQ`lgR`x;lgw}WgjTv3)ZqMlOqrZp%}le
f5;{WVH;cs=q*a(E5dDyP00000NkvXXu0mjf725uP

diff --git a/components/button/images/button-size-medium.png b/components/button/images/button-size-medium.png
deleted file mode 100644
index 680b13d414a402bd8098e34e4e564531290256fd..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 422
zcmV;X0a^ZuP)<h;3K|Lk000e1NJLTq001li001Qj0ssI2w&|Rn00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0Xs=VK~z{r?Uzk%
zgD?<Adp74X^;zH^fpZXU5q>2Whz*5yO+ODaa!SOe!o;ooR<>p7JxBua+u{KsLhvkN
znx?w03-`bR7h4G%(RJN8j$iJX=NT@x5;mf3Ti)d!xY$Z~7SS}#=UKqTRw6_QAwuvh
z0uM4gMvfwnl!|hmJOLM5iN6$)$4aMJsul5`7G`BdW5N`&LB+9~h}A7)aoa1Vf;cn7
zIioEuB3SS!23dTexZ<j%((ucVqpB*rVRyJugiIo(uXmo9hy)WXs_4dx({xAE!*l~&
zY$g6zgt5|KWz)3bkci83#E(7v#e6{o?nWZN;UsZzCk|#eqAbggvw(}OM2HYVgkU3Z
zHp1cO9N=Or;aLRUY<=JJE|(0$u=^IpUq2iXaW--dEO4=vun{jLM64{!H|sOWt14l`
QqyPW_07*qoM6N<$f;ac8>;M1&

diff --git a/components/button/images/button-size-small.png b/components/button/images/button-size-small.png
deleted file mode 100644
index 9f7d629add0eb26f3225889d3fdd438f5d9209f6..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 380
zcmeAS@N?(olHy`uVBq!ia0vp^3P3Ew!2~4x7ig6NDaPU;cPEB*=VV?2IV|apzK#qG
z8~eHcB(eheoCO|{#S9F5he4R}c>anMpawxt7sn6}@3+&Ug`5o}+;(qU)3$X3|0cdS
zPIuC5W*V+~ySeUB`agD_$rq;2TfXCr<)qA`$vb99GuPf1cU{=i$f7mrlSAzF*z2`D
znYYD2oY2scZo`0yQ`k>!s)=UOn)HuZ`j1A#{r9JZ0w$K&PpD}6FzI82XZR1Jg0Gt4
ztBzb(-gU}CtfS_khiTuGk_EGw4)Go<-nDnm73O0%5AYOgo@tho`D`I};<L<q0Y9(R
zjm!PM7Ivt1P4~WM(j&<6^(*TNk6rRJJe}QtOnl1_tgt|ITe^YW4_oh&SzjHdrTTk2
zxL&GHX#UFZE&I*Mu!gQBHVyyHzh&<_+ORD1TD)jQ|Kn_i-&++YIJgGM?da%cKKy~T
YW5@c1x-0BrfFZ`<>FVdQ&MBb@0D{k*N&o-=

diff --git a/components/button/images/button-themecolor-base.png b/components/button/images/button-themecolor-base.png
deleted file mode 100644
index aca44d6179cc12d743b8e792bd92b4957bff106d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 513
zcmeAS@N?(olHy`uVBq!ia0vp^W<adM!2~3IE#sts6k~CayA#8@b22Z19F}xPUq=Rp
zjs4tz5?O(K&H|6fVg?4j!ywFfJby(BP{TA&7srqY_qWr%`<e}S9G>UQX`93Pj&aW7
z0`5cpNsTuGW<(m76?ix}EEOp|)Uka<$5V~-eqD#IXV`9kB&l(9-}~-G55yRx6r7`W
zCB<Hkz5X}ifB_Gf7aBSxi4n*W57s&T>9&+Z+m<}n;=H5AJJu-ex%_bMPUlC~eg796
zWM`1P^sBr}?hnVEj^G*zIirproUVrRKcw(nnAFd07BYud$Uo}QB%fbhG9r&AzTS|~
zm34lGPWA)AU}1BEw~u1JpJQ6FFKo`i1@|oFHn=uV&(VHX$rrvrHtBw1q8GDa%h!wx
z%M}mHaqp2({@k|fv&x)JX<ql3QaoPAx@wxgJa)r1_iChU^XXM_iOY6mNlPu?5qT<e
zt%YJ=0#9+l_t2@wCA3b(9zLoj8Zsri^Zb<!t-YVb{_E}()$chg5-G7jeUaac3v)jt
zC35l}-e5IXD{`8m#k&=akCxvIJG1FcCNI$c+ZR~^gDOY6=-k8L`$E8A&|Ahay?a@v
y##8^y+hxC(F~{?i#)d<~aM9K~UGI(i_In6^t7W+Q=oK*97(8A5T-G@yGywobf!Hhn

diff --git a/components/button/images/button-themecolor-dark.png b/components/button/images/button-themecolor-dark.png
deleted file mode 100644
index e7257b9ef087ad1280b4950f5872ea8f007c61f9..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 458
zcmV;*0X6=KP)<h;3K|Lk000e1NJLTq001%o001Hg0ssI2l8YUE00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0bfZ(K~z{r?U-G1
zgCG!qd$W@GsMk|ZLOeyt5sFtR@6!DX<_GO;+o`t0_YznZ_RErS#=OK`QnWOP)-Vip
zT_3jts)GZ|0HW12jjV46m`&5fKB84sl`L*b(bAC7I&4kR(onQCd{3)&?=iSmW}nhi
zdM~pz{*jg)IWdOOhosfIAYmW{&mlO+`J?SGn9f>s$l_O0Ygs>CkM2o?jwUBR9F8f@
zIiLl@i!>;83!Pv<*;%w&_HDxQ!onraT|uomfwe5GMsFpSN2&Gb0hSL_KI67q_gc)j
zZuMhY*3(|TueEMrpD_7)<9YI0W)Zr?lT3_Q8gugS*-6xN@Z;jCXmQwdXH17UCeS^~
z!V_Ap`Di(utAZAkp#&OZctuP0j<Vw!wHA;b5Z+N+sA>vgVKk%oq84}hrt$ZDMe7$R
zS{jO$hN7k6?`XlxJ}kU$2UO3z?C<oik$n;42j99PUmIiyZ2$lO07*qoM6N<$f&>l8
APyhe`

diff --git a/components/button/images/button-themecolor-error.png b/components/button/images/button-themecolor-error.png
deleted file mode 100644
index 8cc38f7aa3811f6d51fc8fb847a03d5d5ddf5f75..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 457
zcmV;)0XF`LP)<h;3K|Lk000e1NJLTq001-q001Hg0ssI2pOtMo00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0bWT&K~z{r?U+k$
zgD?<4eSoa#K38PjoCI|lPQi{du;B##B&KZ=rGV^??EyDo(#n<!j^xo>c*ehHn-xq3
z98u0UtX!Kv9oDPQ2evHW047Gs%0cyGGIV~x0ZgP2pk(E)1}zIA2i75QhjQ;>5aoQK
z<(e>va=y@VJPh3B@(RaE+2>e1m0XlXkHxH)RabJAG{s2`fC`2vQ)&vXbA_XvGONB!
zds7I>yNznYPI73YN}b^poeoa6eL01OmfO>$U87DpR@4S{h7Em5x~>eyVV7NOua9@0
z)+wCi?CaS0OYU6b7)0Iozsdc)xsh4rb_q$^HtLI+)Y(z*bi`E4ZOJaS+v;bX)+wCi
z%+kDlG^us{Mb4zdk!;&v?k%~AT6755#uoKXIz>6tHC9aAm_p+$Hz#)}_nHJjl=Fp_
zdr5*I%K1Xb9o8#&@8_if2jX``&_8m53n{+=bNr$D$C4zq00000NkvXXu0mjfkRZte

diff --git a/components/button/images/button-themecolor-info.png b/components/button/images/button-themecolor-info.png
deleted file mode 100644
index 288cb1cedebe08b62848f3955c13ad64ebb90cda..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 415
zcmV;Q0bu@#P)<h;3K|Lk000e1NJLTq001oj001Hg0ssI2L@vh|00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0W?WOK~z{r?Uze#
z!Y~j(VbAqSS@sUOPE?75ARmG#>(VBLvI$6Ol_m<V=VMVjMlDFhMr8CPCgVxw$#~<D
z3?l{)GuY!<d`+IVquEEFsEKMW39v{15`>yd0_<Te_X!K|50o}O2-o9r?Sa9=#O3ks
zft&P*l2(@AQK$Zk&y+s&M_UJ%M}9e?k!2NG#s6@Y2kr-qQOO~%7A3tTi)25hRUN6&
z{Txl)`I^Dy9(ow;fovCZo$LKT2_7FUkGUI%$22<ydth?F1nY1nQh_;nSVdr`Hm^u_
z`mw{cJmysao5U|F;_R+HLit~)S)EPF>6~)E3zx^+DYOS9=t1=oJunwFH5~gn>R1=u
zoaJ#v0`_=#^}yg^;__H|VDK=pJm6jl3ore$vhS6l+_OE0ls^Jf7@9Bt9-9CF002ov
JPDHLkV1glitoZ-{

diff --git a/components/button/images/button-themecolor-inverse.png b/components/button/images/button-themecolor-inverse.png
deleted file mode 100644
index cb438c3092acc911b424d6301ce120a2d5b76557..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 501
zcmV<R0Sf+!P)<h;3K|Lk000e1NJLTq002M$001Ef0ssI2=A$}x00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0g6dPK~z{r?U+q+
zgD?z*d$Y!DIUnI9#HXlpgqSOoJ+7W4^B2-2GjtrMd@D;9(tFm9kB~WUVZd5jmSvF}
zq?we%K#uAKQVs(e<;iX!HEO`*$!;JuyMfd^VxaLMc>AIb|JeqbHgso4q2MiFw;{9*
zPE397VpzLQD?{gMPMOMmch1o#1j?FA&u3!N#MohoPPxU?2B4)v7D9u^OzV3&0Ep&d
z9J;g09!-(~YN7dQjh-O{>SM#|i_$W2mFEo%?^IzTx5g{#J0a;C>P8}lR|nLDi(z08
zG&32IC(wYHtaOD<3{XWcc^O8{cs~oS4aoNNGWx){C4X(e*b6URACF35V77tC!hnEQ
zDzqqMoZj4JG;p{HcRU%K*nngYYCr<6anP^VCnRF&1T~=14Ee+yx$jYv_t?q+UlHSE
z=opI!KQjX}t#Q3lyk2w7W(IibViG=##BD4#fG{%onB6PCs3#sV@Y3uCQnMRK&2Aty
r?_!`VOA0=7gEZ@}#q59XW=se_fkm%<V24K*00000NkvXXu0mjf0Cdnl

diff --git a/components/button/images/button-themecolor-light.png b/components/button/images/button-themecolor-light.png
deleted file mode 100644
index 6799351e785bb0260ad42c724d2232830238922c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 448
zcmV;x0YCnUP)<h;3K|Lk000e1NJLTq001xm001Be0ssI2+qP^=00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0aZyvK~z{r?Uze#
zgfI+1bG=eH4h#oL=sgB*(Gf6ngm$1m_AIF#8(Kz55l|^b<*jVTl3zZXi0+TE3r)d7
zZQC|Y^Wg{>4FY7sLJn;R5Fis4;<8i7<V)z?DO(VFbIL9>g+b`mDH|8MJlu;QxqJ(3
z*cz}NWt^BW2))=jC!Pq@nX{j;bz(hAIWe(NXf!X21raC}37V%H;yB<HFTq|c682rK
z7RnV2i8H-SW`oeE?x`F@tj|56+D@rG%9|iedATkX9Enbc22FYp;-I_6{RY+wr6F8L
zKexv89|%=;3V1NSEczh7>L5Jwa#ctlgfJaCHAgLk(YW8hTA}JB;q}t63J=1$5I`P)
zFD2ZdLJgY`Z2&Tx)I6a{j=j)g)(VYI0(bAp6D12V2wmr)A2M?%AGx}i^+LbQ7KEOi
qvI|XdD+E7TxX33*z-azTciksEI-hIlq(uJ!0000<MNUMnLSTYuo2u#n

diff --git a/components/button/images/button-themecolor-primary.png b/components/button/images/button-themecolor-primary.png
deleted file mode 100644
index 86fff7a62bb5a32bfc40bae9ad4ca4db26ef94f8..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 616
zcmV-u0+;=XP)<h;3K|Lk000e1NJLTq002Y)001Ef0ssI2??{>q00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0sTotK~z{r?U=z*
zgD?<=eaW`o1U&Yw=uGKLP!HTa*p9padUph?mLzU=6GBqx6lbgr)69R^{A_mjgPgb#
zBU+<`$sWW!5cjuU3MPm74Gip~gCt)Blf(Q5#(C_c+A!Q_jT(kUGk<l3xm39@bu{x=
zSC}JOZG<TK>cBsXT$p`0^H&34*sBovnpc!s^2GQ&-zxJF0(!LO5M<;FQEeGGoHo{3
zvtHMS1;v~3_u)cz&lh^@Y9NddJj0x<Xl6pcV3d~NHB&IepkwLFvoas&V=r7MP(di(
zDi}45n&LpH<1V={-{G`RI7F(qF}|eO^^+$Y8sZcHU^w!v9GI`#)D#<~@ZESOW4jU6
zk#U`uEx$tpVQ_l0#nPw3G-quXIig-&Fy<@-l+dUDgsJm)><Tvr^Si%{&X1rVW%kO2
z`3k3fq8@r1GrVT5k1#BOSiz7_Fe*pE#H^IlD^tU$WYY*ALCw6d%?=HOk%QuVFc7{c
z<^L8&oA_$*nyF-aZfxBq@0JVm8BF_B%N_-ch^u7Fwx6oBCBn!@3dZC-$0`S5_9|H|
zo*@s`u?jXvL{Yb$E)9jTdz?)Gb3$uBV4!vLk&noQ*#(n65sYL0xt1Gwu}|we0Os;F
zYM75;;;*hSmns`(9_;QWm7jvi?ccMb`f)yjCBzRj&`!goa-|di0000<MNUMnLSTaB
C=@X{_

diff --git a/components/button/images/button-themecolor-secondary.png b/components/button/images/button-themecolor-secondary.png
deleted file mode 100644
index 9e9c4cb67885c3061cbe2a56a31838042e09ce84..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1077
zcmV-51j_q~P)<h;3K|Lk000e1NJLTq00310001Ef0ssI2CnRv%00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D1IkH6K~!i%?U_AH
z+dve@FQux|RKiFw#6``L#S2Jf1k){9U=7*o47d!HU`W?QZL%g(VFM#I83Q9?z;wf5
zq*bzb$zoK@P^22EE^3A7dv_Nnd?jH(0?cp8`SG~B|NAl`fwQwS;$xohPrris-`(A<
zR4OMYC*0-(g27-inH(P<$Nc+EJOFw@H7roS-^4SRYQOjYqkalZLBGL-Kjz=xJnHv1
zcU=G5kIO5c6#j4<aQ%EH-Z^gZc5LgX?4twm^kPB^(WPsyEflxu^1OL{p{Ua(iKQ23
zE}NB{CX00C8S(cAEVEx?-tBv|wm!7&05u_PC${`y=cr=}xXWMn-!sziZkWogOpvOY
zEz_s#=vM!!TtadTl~Q%2nH()fyh_AcXJ+GAO5|CMD!CcSsdBR;C2}ch)MUYA&S+dr
z$Eh<RVM+K#%~d-jO{HUKi>E((CmKX#QRCu|jd#?(Zn~a7A)+*}ht~I-jo+cjDBoO(
zihoR_vv}Yp{a?zeESxD>BIaf@UFD2nhsWSH@${JJnnsD6(YwTrP3LkJrOLdcJ?B!x
zCLv)MR`HQnFTl+14Lcw3I@OB{s+uXYC%tC5biuG2%w4bVLjXo-0F-FhwQ9UpJJ7BE
zONRM6A#0ip$3QXB>&6EK5)u=dmY^;a*MUR~gvjwv9+f5+jXxZh2z-47Vt<G@N1nTV
zeBN8ht;iy4iS`I^^xFQEBw)$Jh6L9#zVhI8plkm_;PEy}UXv#@Z30I?9iH3!wTbeE
zFFMoxQdfZ&2-9=bqK;E0!hg`tcHNpzL{pHV2(dP|dpN1r`Y&gA-$8@vM-EhLvol-R
zzg*Hk)NF3fMdPs09AQ^N6F%s<V>wW;p3OB?y%hBG=yl5#qv;WlU(<UDbocqEX>8^}
zQH?}G&{R4$g)7Q@=CyqE;vP0P&O87nmIk8^j0ewQSTRXTZld#8(u>~@yaA!)<(IAb
z&jtj5Q}((b;%Ep<60z#tdmrKT@4XK%@+GqqU7e);57^b&0>*!<FdxphnRjM0R8lEZ
z8Cpt0n^5!N&TL@|KC|jsewB|4?4JT=hMm`Z5qnQ?Vs>qCX@+j?nx-9=sJ)b_Mpv-`
z!Ob-*J0v+78I2L1<F@NV0H&pgRol8w(RuLye{*wlr>CdfaPNtKSehmq^M!8t@9XPZ
zUS7V*`|n;58^zx5t@wclr61lAtI3G9L3^|}9$x+T$^)(c8^ZNN75EJ%{4xLj2K5Jn
v!9bw(ca|Rjy`UNw&<TG2{?p&z{}b{bhi0y}hO)Qx00000NkvXXu0mjfKe7ge

diff --git a/components/button/images/button-themecolor-success.png b/components/button/images/button-themecolor-success.png
deleted file mode 100644
index 8e366754e69f87ec78204e8e39b9589c6b8cb7c0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 562
zcmV-20?qx2P)<h;3K|Lk000e1NJLTq002q=001Ef0ssI2@qwzp00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0mn&1K~z{r?U_4r
z!Y~kqq0e;^x7>*wB-A0fLBI}~p$QiVT_A25XqgEU)44#=KJ)^Kj59P6-uVmp*UHi-
zX<a}^Bpp|SH`zS*rZ?GJCw57S$>xcm3|<;+B*{Wh2Ja{%b`g||H%Ub;Ud(FoVwM;0
z?llp$crh!0S0tjwc!TYZ^TckxBy+eDVzus?gnBk8@Nqe-I9XKNJ|#%=hds;0mvHQd
zXU#|3%xI#38se=>A<BZ=U#cC#BcH~?ny_srb3$f%rTQQB0kQk@8u&9bscrRY^B&uN
z1@Q8K2=B<u)r#?v@$#-}*qNr+HNW9-w6l1xU>1d^eUQR)%%B?L;gl4bCxln*@kVhD
zi_FZ$%l8L<sR`Uf*i8(3o8Z=*m;p7#W5FsRcJqaNyae7!rV$(_hI7KIs?QAkHy%pW
z!$mIVpGV=Xi*<SM6pK+qJbMn<R60GpvAm0bssIR^#(MWcR~MMNq7<#}1ykJxr}n%T
z#FiiLb{tfpzx23t_CNKvzAWSx)U$_imwc064NsCC(`3T%Gp4$$GW0|NHO7le*NHbu
zL@i#-YVl&$_2KoVH_-PIzec_v;S>K0CBYEl7j=#uWIYrU&Hw-a07*qoM6N<$f-xoj
A1ONa4

diff --git a/components/button/images/button-themecolor-tertiary.png b/components/button/images/button-themecolor-tertiary.png
deleted file mode 100644
index 77b4aacb9dce24f985c96231e2a833209e88d651..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 613
zcmV-r0-F7aP)<h;3K|Lk000e1NJLTq002M$0018d0ssI2*wb9A00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0s2WqK~z{r?U>I}
z!Y~lVoq@Ygi%%muBmO=33Vj0LCMV&{h_+NL&=!chn{5+A%CsFv2$J~@+b>_z{Uts1
zOgKIm;ChstKSzzHFDC@8UX2pjIRjAlGb4AvnnA;|a|YN-I3U@%2Jkp@Nk<9r>5@(W
z`<4aZA#_Rq3LqJXjn_BK9a?y?7>uayr$M!~rDXxQpB5-afSzIQ5CIGg^S4zR0J`VF
zJq_3VoICf^b|?m8IBXaje?@ab1mi`cM>inhd#TSeFwkt08N{g<lDAl^Fu!Qsmi4x3
z-hjTT)*Jw6FVk)y&tQ=QV?e~|1qTQ<^Rs$-8LHYM8$eJX2>`{MI#W}v@kWF(6bL{C
zNsBQ6=X2pg1TX{AZ($w3*cK|)0#Kim8r1-_9c%#fxN1}3Gf9DJ1L!x9s{{bI9*pPU
z7u`U<76LL^C=0-yU!WxcK!LmCzGlEDfMxb5o1mKe^BcnzcAVuIKo96sVd}*{Op9s(
zP#@}jil-C+d>b-=HGM*QKu)of&F+u|;P#_P*dN}01T~&eHl)J=0Lb#3375@og8g;X
zCOG1x^-2c;z81(7(YZuT<=9jS;BN&0h~z8)+zDKfVQ$L?@V<A^X9mY_`W77~Km{Em
zKxg8TP5}Fs0f4_2!M%BNL!F8FYthx8yFz>e!kSgL)6he+00000NkvXXu0mjf4lDhD

diff --git a/components/button/images/button-themecolor-warning.png b/components/button/images/button-themecolor-warning.png
deleted file mode 100644
index a7acf469c99c5507f0a32178ea3054a81d439c75..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 873
zcmV-v1D5=WP)<h;3K|Lk000e1NJLTq002b*0015c0ssI2^`=Bh00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0{%%vK~z{r?U>I`
z6HySyzb!%`fg9Kc62!!VC6Guwa6q95#A`u=cwzewz!^0GK`q`$;193`BbXTAuC_vI
zf+rG;<zgraf%4-@!Y^T+dHc4zYH87s(B1gSr1`#ilX;z;+1I2FRaIdl^m;a5;d?KR
zcZJiM<Q3!Es9sO3#M;GZ<P|%mvOzJ#@vh#VITFHUWgHIZ{jm#1e@;$>!^$|Fw(F05
z>!Go;x)J~9?OX}oK`<`$xnSIHKaPdN%3R9J+MhTITCpG(7;eGvH>o!x=!}S|jU&Is
zFfCZyrFilT$FVSBEH#e?Cls2*WJK<grA{=G4`Ffw`4iH88rkZp#vqW`5ju{3U~x-m
zAR0q^EgW=S55}i(^pS1If!q3#GcRyulAVvLe_5_QL4S|w8|!q(uqKj>H*pevQakAE
z!O)mUejnW-Eie<N`%O)6J_XZDERsq115jf~l7Ac1fUgv)7l$9vMM4iwr9zVk(DINs
zfUYvu?i%>%8Es2Hn-GKd;1<EY2HHmQ1j!}L1kmRd0bZ^%!}la3vfl?)<(S=I@#!-<
z?xJoUt29nufd+U)07DP5l_#_D43F^atZu+xE;UhgRf-H`ug6mhe~8B;F^8%$G%JWM
z^GO}GVq2@^A?n7sQS$-eyg0JYn_7zYMkFE_P*AUOyB3p(uE<%UM$IZXc#pp8GM+|<
zKRKh+X1~<>aax#Jq%;|i#=3NpC02}>v_@p_4?&Gqg78<cc6%@z#NsWu#TJu*c1LVQ
z;R_3OPVk!+#>-`~ScWn$L`F>gIo;}Sa)7@^EWLON-0;Y)%gvxyrm_vLHdL-7@fZm6
zaMG4Jr-pf%(rHZwlwoQV1HGKw^$sD0pQ$<QHzSPS(}N@7$YH*`#z+OGn&t9OT={34
zw~K-XxbT@AX1aJr!aO6HG5WKAC>%M)+vf=AuTAI;9+XO*mcoLZujj9zdUAT+{sE&u
zdk4Z{Wr|$3>yKUMEmpF>w`=LYtej3178U;ljLr1;<bLz000000NkvXXu0mjfeyx*y

diff --git a/components/button/images/fillmode.png b/components/button/images/fillmode.png
deleted file mode 100644
index 6f48b7cc0e19a65bb508844076940928cc71a148..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1233
zcmeAS@N?(olHy`uVBq!ia0y~yU~~bp4LO*Aq^^K_IFMp24sv&5Sa(k5C6L3C?&#~t
zz_78O`%fY(kk47*5n0T@z;_sg8IR|$NCB!z^K@|xsfc?!_pFz)qrma+p*9sCOrHt1
zw6@xIvhzMOwP|^>z<*(*!cNZW(3`OxRbMB(kl=7EE;Ow!TfHmW&T8h2!Z|lfw*QxR
zTxFl8^XAvmYNkp0>lqmI8_qCPFr}~^5LPf|n8z@a@dL{Vo(6S?GzJ?+BjyL36C@e@
zQIt#wfA;+Oa|0gs)on!!d{oo}7?&?!K701;M&*E2Q#LI5_wuCn=M0mos;XbRv*P07
zG=xubhA_M=EG|~&eZ4S5GcmKK>eDG38NQ>-L!D=O_$^?{*gg4#;2iHARtm-j4QJj>
z3V-(d_wSXm0cw+kS1_D-qc=fP!Xd4^@yr1RqutyoY-|&5#zIsw&1_^$DVx5>s6FvV
z5La`V?uxDKBC%VV7L+cl7G`tbnh@Tr-(WOxj?Uwan>TOU=eYi_{M@x)=YEU$W&FbQ
z+BWO{OB=d_?n;z@Z#q1$Z#^Hg>~TlS2(8Z+s~RmLj$Gp08M*MxO$+VMOZM*FxIVk&
z<)@mgncm0BW=>C<eI{qY1hLW!_om)kP$~F5_3arM?X0!Sx{c!BueO~TpORTsdE$0O
z#@@orFDsU%UXb$G(jgbQa%K5qp*>a{P0iYwJ-bWgk|w9#<2-x%#>|(ietDYji}m{Y
z<W_?IKh>KTL^{_ft!rE&vBIP5*4&*}=dYf&_MD69Jzq(q`5UJyWeaIfKKd|Zj-oO9
zR^_Mq{cQi<oY`Y`(JJ$y^mUnCyNx%WoOpPpg?F0h-pVu2Rxh&d@qcw?ZQj9f&Hs{*
z&qZ3OZmwGYJaL_vX4{)AO{bei$Ip};<2!#k=iHYcGiq-Z#HKkLE19j`aprUQ#p;%g
z(wA!l?S!|dOyjyZf5Qu@3&K@jj3ss5;%2^o_imo}CHua<%WF5U=$>oy&b!+ppVc()
zd%tIzse`ReeVN+M+!zb)R3*!sN0VmmT<IUS?)03B6%XHT$(eao%(nTv(QNkji>4@T
zF1UB4zN$>r$esJ->m|SM-k<q@`kB-7CSTq&^TVr(<!7$UpW+^PYD(n6-6d~VocCi}
zTl~_;(nkIBnKL`f8zW^V%@o(!YGaZ1d}5?+*X#D@F%^o%HpVjp8jMo>ZqL}U>fAlw
zyK}pqr-m(lv%iNe?xc+8>5ZR{=j29}yzo7`vVZ-QMe-9PW2b)6FTO25bE!v{{I=6K
zXD((o6Sg<&J}kA-DmblEbZv5fS=wDmd)?*Jx~_k1mX8f%S=;E+ov_<v;?*9bfWjNf
zv6m-h8-G6S^I=Yh>TZ*>6HaJxoz!6s{<0zVm*MWBoT)d3bxM;B&#A`9R;KRTyZ3K0
z`;^WnELsdk^>gO$uRC41=ECdO+us*0E{7y(@e@2e3Y&L3q$M!Syvu6D%nZy0m8o((
zZ2n~q;4A}|R9$~2QNqr~ro(@AveC>Nzv6@EHLPD=2+R}y%P(KdFo`jp!VHXpMy><m
p$9H<i&17Vl#*8zIAAJ4VKIG(7A=jtx*nq_lgQu&X%Q~loCIF;#HckKl


From a79b7d7bc30991948ffaf3711ba5506589e7dd0f Mon Sep 17 00:00:00 2001
From: Svetoslav Dimitrov <Svetoslav.Dimitrov@progress.com>
Date: Mon, 17 Jan 2022 08:50:02 +0200
Subject: [PATCH 06/24] chore(buttongroup): delete images

---
 .../buttongroup/images/button-fillmode-flat.png  | Bin 300 -> 0 bytes
 .../buttongroup/images/button-fillmode-link.png  | Bin 312 -> 0 bytes
 .../images/button-fillmode-outline.png           | Bin 411 -> 0 bytes
 .../buttongroup/images/button-fillmode-solid.png | Bin 495 -> 0 bytes
 .../buttongroup/images/button-rounded-full.png   | Bin 766 -> 0 bytes
 .../buttongroup/images/button-rounded-large.png  | Bin 453 -> 0 bytes
 .../buttongroup/images/button-rounded-medium.png | Bin 417 -> 0 bytes
 .../buttongroup/images/button-rounded-small.png  | Bin 368 -> 0 bytes
 .../images/button-shape-rectangle.png            | Bin 675 -> 0 bytes
 .../buttongroup/images/button-shape-square.png   | Bin 615 -> 0 bytes
 .../buttongroup/images/button-size-large.png     | Bin 593 -> 0 bytes
 .../buttongroup/images/button-size-medium.png    | Bin 422 -> 0 bytes
 .../buttongroup/images/button-size-small.png     | Bin 380 -> 0 bytes
 .../images/button-themecolor-base.png            | Bin 513 -> 0 bytes
 .../images/button-themecolor-dark.png            | Bin 458 -> 0 bytes
 .../images/button-themecolor-error.png           | Bin 457 -> 0 bytes
 .../images/button-themecolor-info.png            | Bin 415 -> 0 bytes
 .../images/button-themecolor-inverse.png         | Bin 501 -> 0 bytes
 .../images/button-themecolor-light.png           | Bin 448 -> 0 bytes
 .../images/button-themecolor-primary.png         | Bin 616 -> 0 bytes
 .../images/button-themecolor-secondary.png       | Bin 1077 -> 0 bytes
 .../images/button-themecolor-success.png         | Bin 562 -> 0 bytes
 .../images/button-themecolor-tertiary.png        | Bin 613 -> 0 bytes
 .../images/button-themecolor-warning.png         | Bin 873 -> 0 bytes
 24 files changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 components/buttongroup/images/button-fillmode-flat.png
 delete mode 100644 components/buttongroup/images/button-fillmode-link.png
 delete mode 100644 components/buttongroup/images/button-fillmode-outline.png
 delete mode 100644 components/buttongroup/images/button-fillmode-solid.png
 delete mode 100644 components/buttongroup/images/button-rounded-full.png
 delete mode 100644 components/buttongroup/images/button-rounded-large.png
 delete mode 100644 components/buttongroup/images/button-rounded-medium.png
 delete mode 100644 components/buttongroup/images/button-rounded-small.png
 delete mode 100644 components/buttongroup/images/button-shape-rectangle.png
 delete mode 100644 components/buttongroup/images/button-shape-square.png
 delete mode 100644 components/buttongroup/images/button-size-large.png
 delete mode 100644 components/buttongroup/images/button-size-medium.png
 delete mode 100644 components/buttongroup/images/button-size-small.png
 delete mode 100644 components/buttongroup/images/button-themecolor-base.png
 delete mode 100644 components/buttongroup/images/button-themecolor-dark.png
 delete mode 100644 components/buttongroup/images/button-themecolor-error.png
 delete mode 100644 components/buttongroup/images/button-themecolor-info.png
 delete mode 100644 components/buttongroup/images/button-themecolor-inverse.png
 delete mode 100644 components/buttongroup/images/button-themecolor-light.png
 delete mode 100644 components/buttongroup/images/button-themecolor-primary.png
 delete mode 100644 components/buttongroup/images/button-themecolor-secondary.png
 delete mode 100644 components/buttongroup/images/button-themecolor-success.png
 delete mode 100644 components/buttongroup/images/button-themecolor-tertiary.png
 delete mode 100644 components/buttongroup/images/button-themecolor-warning.png

diff --git a/components/buttongroup/images/button-fillmode-flat.png b/components/buttongroup/images/button-fillmode-flat.png
deleted file mode 100644
index 6d3f957af34c338f58a146d8901fb1f8d754b66b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 300
zcmeAS@N?(olHy`uVBq!ia0vp^CO|C9!2~3;cHVFTQjEnx?oJHr&dIz4a#+$GeH|GX
zHuiJ>Nn{1`ISV`@iy0XB4ude`@%$AjK*58aE{-7)?r*0U@*P&-ajl-p!($nCbi!nV
zf+-$z7NjejGF-H*T;pilf{;^(!b2-R2s4{8^C$nD#<I9bL#urel<2r4x9ng~<xck<
zvor5y{cC!`F8xiag!#nYH0xa_Zu?HV^J+)hmQQQbcfPsU*Au_bNaow;#iu5^Yb)9x
zSpR;H=#RDC;u`J`KW=V%!nbzP^iWGFy`yat)zc48e)~#f%9Y|NId_lM*-eU-v|YaM
k4daC0@=%+VBJ`H>cdz{3$(O9<2lNbsr>mdKI;Vst0H`;26aWAK

diff --git a/components/buttongroup/images/button-fillmode-link.png b/components/buttongroup/images/button-fillmode-link.png
deleted file mode 100644
index c7c4d7aa2bf5b4310b4d2bdeb0866a30ebeb6d1c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 312
zcmeAS@N?(olHy`uVBq!ia0vp^CO|CB!2~4tJg|-jQjEnx?oJHr&dIz4a#+$GeH|GX
zHuiJ>Nn{1`ISV`@iy0XB4ude`@%$AjK*6(~E{-7)?r*0!ay1(WxK>ZqiFxAC>J<Ly
z(BvH_0$X;vM|V{4IPy<aQ#-gUpoDF5*AqdNw6-57)Z?x+o-7L4Br{dV{i#n8^Ay*+
zeDagy*O=urXl*}b|8!dZ_uhF839R$mU+l9oy%gd-<C!?i?h}P!2Qy9uM;EI7T5x$r
zrMJrO6Q-A@UFFy+yp=b|e!AAQ6-9{`DjuDB`PJ{of{!kJS4)K^_v)vMdp=w?fjiHT
zZAna&KvDnm)BiIyA6M<(-D_4nZL+ujw8fL2u8@iFTWMbMtX-a8@_#ANV+@|IelF{r
G5}E+iwtM^l

diff --git a/components/buttongroup/images/button-fillmode-outline.png b/components/buttongroup/images/button-fillmode-outline.png
deleted file mode 100644
index 804a6009bac98ebc3106f2417921ee6351cf1d51..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 411
zcmeAS@N?(olHy`uVBq!ia0vp^PC%^0!2~2z4$XK9q!^2X+?^QKos)S9<glbW`Z_W&
zZ0zU$lgJ9>a~60+7BevL9R^{><M}I6fEo-uT^vIq+~3YPDA=qZ;2JEgdZSH5Sh{e}
z&6dYE`E(BdNo7=24D6h&aM*h7sYCTj;`!cUPgY#~UK<+vNJ&A9skq3WnSWX4CGnHZ
zD>%+<UC!tl8_OcSBSXdEqDSYVi9)W)`o-bhX%DJ$SgvogXs^$l<Fn>igH6wywA%bV
z+=cRAkKXaDa^b6r=`L)%>o7gX+Ip_?&Tn0}^n}=)cUUZP<Wt)l+-?%`_2c42dd7$E
zc-;vL4w!DFzGtShOGX7Z!)~`d$Fjxm^=)UCSRdN#lCg$UqN+7Ldqr;LqeW8D&kw3P
zJr0+jYNxWh<3dICk-5yP4%IGRxa->Q=&(SkhG(fg{0pyznJ_o)s+yCzpKXC*TkqV1
z9D00NDsE8ME30n0cH+tNbhZ79)_aRdo&LnIr+?<>TVHRc0Rxo5)78&qol`;+08V<O
A3jhEB

diff --git a/components/buttongroup/images/button-fillmode-solid.png b/components/buttongroup/images/button-fillmode-solid.png
deleted file mode 100644
index af9c07e7e074181def8453aaa848ab4422ce8c55..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 495
zcmV<L0TBL)P)<h;3K|Lk000e1NJLTq001=r001Kh0ssI2y9?E!00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0fb3JK~z{r?bkta
zf-o3{;hrtMjPWYu9>6)!TMz_hSTJs=wrl<V@CyOsOp8!phIbW1I(anKfsfm=TaWK@
zxuj{T=MDx)*kt>PqNu9sXYQ`oD<o{PeR-bqlDUI~O>6RHS@yk*AYs$y8`9=`uXXzH
z!;Rm@5z?U)GSnCyl@KbbXWO*D7dvzPMUb#*VxPN7eA<_Sv-j5Fj%S5;Z01~_AB{~?
zd2(!DL>uw`?bzU$WsMy^8c5%ebh!T%Q~H{ElMRamU0-+Q!1FzwPPnmoQ5-zZQALj_
zocJz?`4u`SA?bA-z-KOChStXfvQ~oI`NMvYu<6%6?%>r(+J1>X6MdG_k7*mB4m?TI
zIA5o)x3bTD>hC^#gT`T?!mFpP@w3ldrMJXa@&7TduRU3+`3f?tj-gH;k4-A*e=+(E
z@%?9RUy>wW%Lo!SZN4FGzV~wb@a&G~^Cbico7UvRT|-%xykx%4=d=6%1vmahQQ+Bq
l-e7=)O}1~DZN7K9-R@6!`!d#9`8)ss002ovPDHLkV1mT3>CpfH

diff --git a/components/buttongroup/images/button-rounded-full.png b/components/buttongroup/images/button-rounded-full.png
deleted file mode 100644
index f79ebff27a621a0694486023a018d9d6c2362f07..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 766
zcmV<a0s;MrP)<h;3K|Lk000e1NJLTq001=r001Hg0ssI2a90Kd00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0+UHZK~z{r?U-3|
z;xH6Nvo^As&|3-n2&^Np3%i)7Vm35?Kp$JLDbm(xi&Q@Pe56#ibnivOL*(W5v-zK|
z9u@PQPN&ssHJwfegF$M5S9G8oon=@!Vfn7t>wdqVOeV^h_VIZ9t%K)42fEGYbB54n
zxCnU@kdJA=1~XG83k+E<mkbY`OW%Ck?Up%X4#cn$q(lTM5%s_;A8Rz5&G_i`$+C=z
zL{Ow%xbtl`n^@r#L_`o-F|gvu$BL*;6Bi;Pi@4aBvE}2qp|acUL^UcZqVq)C@{x?a
zB6?4NRmMWh4A}BLZ}Jps3dPKTF(2h%u~@K0^nA7&1<j9Cp8P}FX*QZ2UfvrzC^s01
zr4D00&X*-$@7<hCk#>H)y7RGr><8JHkM9WzsmOdG?YybEgI4d@V<ualf8TvH8*fDz
zzkFC=B$hgi`Nre%;cyU{5)boND<2jZiKPx>K5iePp(A2GjKorhF<-ym=X{yy=J^uU
zEb<l2EKBly?fga3CSTr4+T<%9>A^@Wbr|!FMk8(mqERANJ}fX2OC831>MK%YO2o>i
zZXRN(!<cWqUUT?Gri99O$eT%<<NV%LkI5R8kHd?RSn4q5qiizsB2(fapGu%;b*bAS
z`LL*1pMk-aC9V(R_RR;jd=yVr1)l`s&bzcNAD5ruaLE1;y{I6Ic&+;tunMSfixJgG
zAc!pDVq?aU4=4d>iEt!XS<jy!?tDO@i8YIe5Dr0+cHxx|__%yg@|TKV8BT)|5m66(
z^8wrC{x1tL^oC>%WVp|sdn6zqTrL-i7B)cXCn&}e;VV1`I?#<GM}Gz~T!g#{%XjB|
wK4Z@|;s*rwT6jeVy3tvNg;O!#H*vfD0RS!XkJ+u`XaE2J07*qoM6N<$g5h^q6951J

diff --git a/components/buttongroup/images/button-rounded-large.png b/components/buttongroup/images/button-rounded-large.png
deleted file mode 100644
index 3e3eb36329d4efb417797cdfacd4e68eb82d9471..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 453
zcmV;$0XqJPP)<h;3K|Lk000e1NJLTq001Tc001Kh0ssI2carZ)00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0a{5!K~z{r?Uze#
zgD@Bddp4g2u99$%z%>%M1<$Ym2?-TwC0Nl9`*#`#QrcpoMrBquK{Md6uwVLz^9Pb`
z+va&5hGDP_7~p}8yjLj6uIth?EsElOF-_CJ0~?%Vmnccxq@{PEEK3N<E>V(rC_EkA
zt^?TMB)ddOCQ0(98#u`>*^*k=k|2&_eAf5y_KfX4ntU5L$u4=CWZ)P~U>zKjnNGkj
zPoXC{3=B~b?bVZ>b=^2wi;__k)%S6Sq+9#8$t;(y)qHB&KF!9!Np{IoBx@H7``O?N
zyLOTf3{mlI{`st$Jn^9@4Oj<tokuK6PIL3uj+jYek5tXW-}WdcJH~b{O{Rd8?2=z3
ztLliT<jWq=l>7->65wa-JYTgklf;%j%QCuG2e83Oc8QY25d!-LEmf=*Jb1<Nu|!D%
v93il!#}@m%3~{y@A4tG$@&WvZWZ!=P@PL-HHHW_g00000NkvXXu0mjf^7y@m

diff --git a/components/buttongroup/images/button-rounded-medium.png b/components/buttongroup/images/button-rounded-medium.png
deleted file mode 100644
index f7670290575b4fe45b4478012397fab92d936b30..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 417
zcmV;S0bc%zP)<h;3K|Lk000e1NJLTq001ih001Kh0ssI2f^1~^00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0X9iQK~z{r?Uzk%
zgD?~Zdo~V(k78c~`4~+&MERFkz=l98A#OmwXI>MB&>aR^F)Q1$n30Jh{5I~*Szs6R
zeV^xf>>gO)Vyj(HmSxj4U+(F;4lcIZ1w~Qt7Wcr#)?*dm^?YsxTx>lHh_m2W1zDEi
zzhWI?Ej*!Pp1lGWTmMc0JyC@h<xR-YtW2noH+7-pB_WlI0wcbUSsZKM69K76@9U`L
zMP#gAaDU>%N|QjCvJmH^F4Nj<{{qVeX_~gb5t%1OKNH`R@6))AsNnj%0bJ$NbPil>
z{YM3)d@Q~M&2dp+2EP8d(GVNxm$-2OpmQ+DVD&Rto8^KeNp4#K7hBH);w-QWaGSx6
zWgFmP>#+*(<y2J_Z*fUo*UMjN!!Y1Fhue&6V1bLRcEMikT`-Q{&C1~#rtrgu00000
LNkvXXu0mjfCEl+r

diff --git a/components/buttongroup/images/button-rounded-small.png b/components/buttongroup/images/button-rounded-small.png
deleted file mode 100644
index d3ace4f56081ed68d199c764f63aa8c5bb8e0e93..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 368
zcmeAS@N?(olHy`uVBq!ia0vp^T0pGC!2~3ieY%qfq!^2X+?^QKos)S9<glbW`Z_W&
zZ0zU$lgJ9>a~60+7BevL9R^{><M}I6fErjmT^vIq+}~dJ<!dq!XiGdFrtf^7>AS$W
z#yL*^4mT}bwC-be`l`;Aoo>b%Z+2&8A9jA-b#+h1{e%3613X!~1CG?(|DL`wL9mOd
zf7d!|kcdcyNX1H<n%mplLBe&7>&>DHtyX8O^)NVR{7><aQP_&ta`pP3Eahg4d{6F{
zyxKcA>PWWe=d%3#58HWWKFJeWE#3L|Pt-q~n#(4a51%qITJG$5&inF~t$Su4@yhp_
zCt+7A?7xA-_524Jp4r>Zi#^YMrnW}q*zNyy-j9v0TKs*dP*qj_R?S_n_^14d!`Dk|
zCvb@^)cEjXe`QV0o25;z8eBF~#|7o(jSeb_814`0{`9$qan*wczW?)1`vXIX!PC{x
JWt~$(69A>nnmPag

diff --git a/components/buttongroup/images/button-shape-rectangle.png b/components/buttongroup/images/button-shape-rectangle.png
deleted file mode 100644
index 8313922f2086fb75c45f249deb27a32f4402dde2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 675
zcmV;U0$lxxP)<h;3K|Lk000e1NJLTq002<{001Hg0ssI2s9T~A00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0ys%TK~!i%?U!AW
zvM>-uXKk_>aVaDF5VkSuDu(!1#e?Mw{>-y;yE_R1iBkhsee(s*6CIl59*iPy_u(;Y
z=gZ}?+wD}KKn;RoS~(X*QI_Rbpj@w42#RUtd^jBR`9Oi7m=4={zu(`227+QbItR_@
z%#6+f(&CJNDtK_eo@FwbW=a>YKxOeH?l2<+#dLJ`vQ8#RwumP{3t+@BUvm$kq=(>G
z5Y{Bzq_U~5LA;RQm@3W|jZQ{ovq%rp>eDR0G@NTOaPkQqoLx66lcgM!hE7k0Cb2!P
zK4%s-lknY<=sdaYi6hfP<MATb!`xGMUMEo_1~+@?;%sK;xXx$GA)x2TyZH9D8@)F9
zO!xDJB+0DjO=rZ2>M>@Kvqv6iao%pXc-!)@;#j7@@=cOey{Cerr@1Z&=kl0O)Go})
znTB(^v#YZn=5m^TqRvw|qr(%!3k1cqtMmME@}He`N-0hBUe5E!^}O_QmgPmmAy4@m
zr7KJ2j7db2`N>%>BuR!0>&}P~wZ!n!%UMdRSKR`nw7bhHEfbT>orI2`?`^ZnCy!#b
zrZY7}wHVKDK~HBBLU2|he?z55&l~M8r??cQ{Oon6RqV4WwOhS%ZpN^iqLtq||9j|e
zI$!S&v^Z}zoAaOIgMXt+DfkELLykKFK{5Tq&Jcaq+ZOZ`2LFfiYZ;xHAv!Ci%AkRu
zm=4<+uN}wZQJ)Wv)9KXmUUj?OilR6K3e+Gdrj_$>7@qU}{tbg*G$EQY%69+&002ov
JPDHLkV1n+oJgNWy

diff --git a/components/buttongroup/images/button-shape-square.png b/components/buttongroup/images/button-shape-square.png
deleted file mode 100644
index 59cc3d9116f862dbdd599b61ba3034b1b61686b6..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 615
zcmeAS@N?(olHy`uVBq!ia0vp^jzH|d!2~2vo$TEXq!^2X+?^QKos)S9<glbW`T|vK
z?C1WI$O`0h7I;J!GcfQS24TkI`72U@8vb~?IEG|6zn$SYsmVaV^?A-5w{uG09nLG>
za}rsZl(;i-LZtQn%bpw}rwqCk6MwA@n(OyT{-m4zyoZZrXD!q0QsQTEaZT{!+u|G=
zS{hr=dg$>-2QW8sT9uuEz>LYvg%Ny(ADRW*Uw^&D#>!M&q`-Gtk*`hxhBgGT|Jil8
ze{lmy+mS@eBM13`=-=YQhMhdO7q45m>*`hu+jr)HMGKPV9lMw|e>Gd&iPAF*jtecn
z)6|yIui6kUyKC{8LxpLU7j8Z~k>?Y+xTQ7X+1h3ygMV4MYi3=!zVUu5%a?f(g0JTl
z*1b)5DgJWL$?Ad^pLq38<t|%0CtKd&^ue9?r$5~F_`dax=g;poXD;|SA(C(U>7|wD
zGndcP{dRViT5$Sn$yv(mrb_L1Jwxwq>$&_{Bv*9x#NFo;&T|62*eq{t@aklmR>_=M
zE6#n?moa#7p{ua{;5^|oMK5xF=TClj@YIY&y-uaF(`&5QXHPx0?D*R6*Zj23?qUDk
z<?y|?)Fo;5j=(RQ9p{*A&i8qmJYmwJ)it&3<^Fd+Oq$7enP>4I#zzK+q-4Y#Wd0;9
z<$M15r?Cb+V3`X)Kv45kt0$Fl?9dS27}UN<BX9fcdEe*#{%iNCKKu5z(9o%k4J$a#
koNO%PkShGp`24f9?LK>j9Pw}7z{J7e>FVdQ&MBb@0KE(rkN^Mx

diff --git a/components/buttongroup/images/button-size-large.png b/components/buttongroup/images/button-size-large.png
deleted file mode 100644
index 9e14f3f387acd2a533919f98c3eca3145c937d2f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 593
zcmV-X0<QguP)<h;3K|Lk000e1NJLTq001rk001ut0ssI26Nhib00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0p>|WK~z{r?U%o6
z!ax+q`?uY6OQt{(1fie>>C!>F>Y{YWB83(QyErsiw1W<XmK5wJExK4rjXwgZii2rv
zXZtj-jnE^N8ZHj^nY{M`-w(MLbJ<($3_^v4r{XxyU@$N^0&x(E@#`v<W!bj<$&vYd
z4xt#ou40-dUcwOw#dx9O!B!a#hacR5P>dHU9zunMP+_t2D)4fGm%>Ig6he}kfvatR
zP>dHU9zm;&+tt&gL<u1@metx%T9Oc@flYq`Rk022h!Pq(DOUBmmOrF)UzS2qF|Usa
zk(I`H)%Z3GLuFh`6B50AcIz(p`A}4ha-5Ky?v@c_>sjgd`*7&ph?R=kg<qXgbgAN&
zk*>N@!IeJ{it$^kjA|*^pi;-JyEGIS7XB*Eu<DNOXw?8lHyL+qaqUl#D$cA^jxQhP
zbg`n}RSF3TgrowDT52YSe{mVLRfjG&6@QiwbG-b5D}RDiX`abar0_7qCEOxCClRWw
zRs0C_t~3iWY)m4r)^(Vbi&O*#CwcX=d4IrG>GgW=|KjaY%_ijKs1Pb0q|a|(v9SRV
zit&M{Y=cl?AyioGyozBMHg_Nt<AsU`TLsQ`lgR`x;lgw}WgjTv3)ZqMlOqrZp%}le
f5;{WVH;cs=q*a(E5dDyP00000NkvXXu0mjf725uP

diff --git a/components/buttongroup/images/button-size-medium.png b/components/buttongroup/images/button-size-medium.png
deleted file mode 100644
index 680b13d414a402bd8098e34e4e564531290256fd..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 422
zcmV;X0a^ZuP)<h;3K|Lk000e1NJLTq001li001Qj0ssI2w&|Rn00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0Xs=VK~z{r?Uzk%
zgD?<Adp74X^;zH^fpZXU5q>2Whz*5yO+ODaa!SOe!o;ooR<>p7JxBua+u{KsLhvkN
znx?w03-`bR7h4G%(RJN8j$iJX=NT@x5;mf3Ti)d!xY$Z~7SS}#=UKqTRw6_QAwuvh
z0uM4gMvfwnl!|hmJOLM5iN6$)$4aMJsul5`7G`BdW5N`&LB+9~h}A7)aoa1Vf;cn7
zIioEuB3SS!23dTexZ<j%((ucVqpB*rVRyJugiIo(uXmo9hy)WXs_4dx({xAE!*l~&
zY$g6zgt5|KWz)3bkci83#E(7v#e6{o?nWZN;UsZzCk|#eqAbggvw(}OM2HYVgkU3Z
zHp1cO9N=Or;aLRUY<=JJE|(0$u=^IpUq2iXaW--dEO4=vun{jLM64{!H|sOWt14l`
QqyPW_07*qoM6N<$f;ac8>;M1&

diff --git a/components/buttongroup/images/button-size-small.png b/components/buttongroup/images/button-size-small.png
deleted file mode 100644
index 9f7d629add0eb26f3225889d3fdd438f5d9209f6..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 380
zcmeAS@N?(olHy`uVBq!ia0vp^3P3Ew!2~4x7ig6NDaPU;cPEB*=VV?2IV|apzK#qG
z8~eHcB(eheoCO|{#S9F5he4R}c>anMpawxt7sn6}@3+&Ug`5o}+;(qU)3$X3|0cdS
zPIuC5W*V+~ySeUB`agD_$rq;2TfXCr<)qA`$vb99GuPf1cU{=i$f7mrlSAzF*z2`D
znYYD2oY2scZo`0yQ`k>!s)=UOn)HuZ`j1A#{r9JZ0w$K&PpD}6FzI82XZR1Jg0Gt4
ztBzb(-gU}CtfS_khiTuGk_EGw4)Go<-nDnm73O0%5AYOgo@tho`D`I};<L<q0Y9(R
zjm!PM7Ivt1P4~WM(j&<6^(*TNk6rRJJe}QtOnl1_tgt|ITe^YW4_oh&SzjHdrTTk2
zxL&GHX#UFZE&I*Mu!gQBHVyyHzh&<_+ORD1TD)jQ|Kn_i-&++YIJgGM?da%cKKy~T
YW5@c1x-0BrfFZ`<>FVdQ&MBb@0D{k*N&o-=

diff --git a/components/buttongroup/images/button-themecolor-base.png b/components/buttongroup/images/button-themecolor-base.png
deleted file mode 100644
index aca44d6179cc12d743b8e792bd92b4957bff106d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 513
zcmeAS@N?(olHy`uVBq!ia0vp^W<adM!2~3IE#sts6k~CayA#8@b22Z19F}xPUq=Rp
zjs4tz5?O(K&H|6fVg?4j!ywFfJby(BP{TA&7srqY_qWr%`<e}S9G>UQX`93Pj&aW7
z0`5cpNsTuGW<(m76?ix}EEOp|)Uka<$5V~-eqD#IXV`9kB&l(9-}~-G55yRx6r7`W
zCB<Hkz5X}ifB_Gf7aBSxi4n*W57s&T>9&+Z+m<}n;=H5AJJu-ex%_bMPUlC~eg796
zWM`1P^sBr}?hnVEj^G*zIirproUVrRKcw(nnAFd07BYud$Uo}QB%fbhG9r&AzTS|~
zm34lGPWA)AU}1BEw~u1JpJQ6FFKo`i1@|oFHn=uV&(VHX$rrvrHtBw1q8GDa%h!wx
z%M}mHaqp2({@k|fv&x)JX<ql3QaoPAx@wxgJa)r1_iChU^XXM_iOY6mNlPu?5qT<e
zt%YJ=0#9+l_t2@wCA3b(9zLoj8Zsri^Zb<!t-YVb{_E}()$chg5-G7jeUaac3v)jt
zC35l}-e5IXD{`8m#k&=akCxvIJG1FcCNI$c+ZR~^gDOY6=-k8L`$E8A&|Ahay?a@v
y##8^y+hxC(F~{?i#)d<~aM9K~UGI(i_In6^t7W+Q=oK*97(8A5T-G@yGywobf!Hhn

diff --git a/components/buttongroup/images/button-themecolor-dark.png b/components/buttongroup/images/button-themecolor-dark.png
deleted file mode 100644
index e7257b9ef087ad1280b4950f5872ea8f007c61f9..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 458
zcmV;*0X6=KP)<h;3K|Lk000e1NJLTq001%o001Hg0ssI2l8YUE00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0bfZ(K~z{r?U-G1
zgCG!qd$W@GsMk|ZLOeyt5sFtR@6!DX<_GO;+o`t0_YznZ_RErS#=OK`QnWOP)-Vip
zT_3jts)GZ|0HW12jjV46m`&5fKB84sl`L*b(bAC7I&4kR(onQCd{3)&?=iSmW}nhi
zdM~pz{*jg)IWdOOhosfIAYmW{&mlO+`J?SGn9f>s$l_O0Ygs>CkM2o?jwUBR9F8f@
zIiLl@i!>;83!Pv<*;%w&_HDxQ!onraT|uomfwe5GMsFpSN2&Gb0hSL_KI67q_gc)j
zZuMhY*3(|TueEMrpD_7)<9YI0W)Zr?lT3_Q8gugS*-6xN@Z;jCXmQwdXH17UCeS^~
z!V_Ap`Di(utAZAkp#&OZctuP0j<Vw!wHA;b5Z+N+sA>vgVKk%oq84}hrt$ZDMe7$R
zS{jO$hN7k6?`XlxJ}kU$2UO3z?C<oik$n;42j99PUmIiyZ2$lO07*qoM6N<$f&>l8
APyhe`

diff --git a/components/buttongroup/images/button-themecolor-error.png b/components/buttongroup/images/button-themecolor-error.png
deleted file mode 100644
index 8cc38f7aa3811f6d51fc8fb847a03d5d5ddf5f75..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 457
zcmV;)0XF`LP)<h;3K|Lk000e1NJLTq001-q001Hg0ssI2pOtMo00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0bWT&K~z{r?U+k$
zgD?<4eSoa#K38PjoCI|lPQi{du;B##B&KZ=rGV^??EyDo(#n<!j^xo>c*ehHn-xq3
z98u0UtX!Kv9oDPQ2evHW047Gs%0cyGGIV~x0ZgP2pk(E)1}zIA2i75QhjQ;>5aoQK
z<(e>va=y@VJPh3B@(RaE+2>e1m0XlXkHxH)RabJAG{s2`fC`2vQ)&vXbA_XvGONB!
zds7I>yNznYPI73YN}b^poeoa6eL01OmfO>$U87DpR@4S{h7Em5x~>eyVV7NOua9@0
z)+wCi?CaS0OYU6b7)0Iozsdc)xsh4rb_q$^HtLI+)Y(z*bi`E4ZOJaS+v;bX)+wCi
z%+kDlG^us{Mb4zdk!;&v?k%~AT6755#uoKXIz>6tHC9aAm_p+$Hz#)}_nHJjl=Fp_
zdr5*I%K1Xb9o8#&@8_if2jX``&_8m53n{+=bNr$D$C4zq00000NkvXXu0mjfkRZte

diff --git a/components/buttongroup/images/button-themecolor-info.png b/components/buttongroup/images/button-themecolor-info.png
deleted file mode 100644
index 288cb1cedebe08b62848f3955c13ad64ebb90cda..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 415
zcmV;Q0bu@#P)<h;3K|Lk000e1NJLTq001oj001Hg0ssI2L@vh|00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0W?WOK~z{r?Uze#
z!Y~j(VbAqSS@sUOPE?75ARmG#>(VBLvI$6Ol_m<V=VMVjMlDFhMr8CPCgVxw$#~<D
z3?l{)GuY!<d`+IVquEEFsEKMW39v{15`>yd0_<Te_X!K|50o}O2-o9r?Sa9=#O3ks
zft&P*l2(@AQK$Zk&y+s&M_UJ%M}9e?k!2NG#s6@Y2kr-qQOO~%7A3tTi)25hRUN6&
z{Txl)`I^Dy9(ow;fovCZo$LKT2_7FUkGUI%$22<ydth?F1nY1nQh_;nSVdr`Hm^u_
z`mw{cJmysao5U|F;_R+HLit~)S)EPF>6~)E3zx^+DYOS9=t1=oJunwFH5~gn>R1=u
zoaJ#v0`_=#^}yg^;__H|VDK=pJm6jl3ore$vhS6l+_OE0ls^Jf7@9Bt9-9CF002ov
JPDHLkV1glitoZ-{

diff --git a/components/buttongroup/images/button-themecolor-inverse.png b/components/buttongroup/images/button-themecolor-inverse.png
deleted file mode 100644
index cb438c3092acc911b424d6301ce120a2d5b76557..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 501
zcmV<R0Sf+!P)<h;3K|Lk000e1NJLTq002M$001Ef0ssI2=A$}x00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0g6dPK~z{r?U+q+
zgD?z*d$Y!DIUnI9#HXlpgqSOoJ+7W4^B2-2GjtrMd@D;9(tFm9kB~WUVZd5jmSvF}
zq?we%K#uAKQVs(e<;iX!HEO`*$!;JuyMfd^VxaLMc>AIb|JeqbHgso4q2MiFw;{9*
zPE397VpzLQD?{gMPMOMmch1o#1j?FA&u3!N#MohoPPxU?2B4)v7D9u^OzV3&0Ep&d
z9J;g09!-(~YN7dQjh-O{>SM#|i_$W2mFEo%?^IzTx5g{#J0a;C>P8}lR|nLDi(z08
zG&32IC(wYHtaOD<3{XWcc^O8{cs~oS4aoNNGWx){C4X(e*b6URACF35V77tC!hnEQ
zDzqqMoZj4JG;p{HcRU%K*nngYYCr<6anP^VCnRF&1T~=14Ee+yx$jYv_t?q+UlHSE
z=opI!KQjX}t#Q3lyk2w7W(IibViG=##BD4#fG{%onB6PCs3#sV@Y3uCQnMRK&2Aty
r?_!`VOA0=7gEZ@}#q59XW=se_fkm%<V24K*00000NkvXXu0mjf0Cdnl

diff --git a/components/buttongroup/images/button-themecolor-light.png b/components/buttongroup/images/button-themecolor-light.png
deleted file mode 100644
index 6799351e785bb0260ad42c724d2232830238922c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 448
zcmV;x0YCnUP)<h;3K|Lk000e1NJLTq001xm001Be0ssI2+qP^=00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0aZyvK~z{r?Uze#
zgfI+1bG=eH4h#oL=sgB*(Gf6ngm$1m_AIF#8(Kz55l|^b<*jVTl3zZXi0+TE3r)d7
zZQC|Y^Wg{>4FY7sLJn;R5Fis4;<8i7<V)z?DO(VFbIL9>g+b`mDH|8MJlu;QxqJ(3
z*cz}NWt^BW2))=jC!Pq@nX{j;bz(hAIWe(NXf!X21raC}37V%H;yB<HFTq|c682rK
z7RnV2i8H-SW`oeE?x`F@tj|56+D@rG%9|iedATkX9Enbc22FYp;-I_6{RY+wr6F8L
zKexv89|%=;3V1NSEczh7>L5Jwa#ctlgfJaCHAgLk(YW8hTA}JB;q}t63J=1$5I`P)
zFD2ZdLJgY`Z2&Tx)I6a{j=j)g)(VYI0(bAp6D12V2wmr)A2M?%AGx}i^+LbQ7KEOi
qvI|XdD+E7TxX33*z-azTciksEI-hIlq(uJ!0000<MNUMnLSTYuo2u#n

diff --git a/components/buttongroup/images/button-themecolor-primary.png b/components/buttongroup/images/button-themecolor-primary.png
deleted file mode 100644
index 86fff7a62bb5a32bfc40bae9ad4ca4db26ef94f8..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 616
zcmV-u0+;=XP)<h;3K|Lk000e1NJLTq002Y)001Ef0ssI2??{>q00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0sTotK~z{r?U=z*
zgD?<=eaW`o1U&Yw=uGKLP!HTa*p9padUph?mLzU=6GBqx6lbgr)69R^{A_mjgPgb#
zBU+<`$sWW!5cjuU3MPm74Gip~gCt)Blf(Q5#(C_c+A!Q_jT(kUGk<l3xm39@bu{x=
zSC}JOZG<TK>cBsXT$p`0^H&34*sBovnpc!s^2GQ&-zxJF0(!LO5M<;FQEeGGoHo{3
zvtHMS1;v~3_u)cz&lh^@Y9NddJj0x<Xl6pcV3d~NHB&IepkwLFvoas&V=r7MP(di(
zDi}45n&LpH<1V={-{G`RI7F(qF}|eO^^+$Y8sZcHU^w!v9GI`#)D#<~@ZESOW4jU6
zk#U`uEx$tpVQ_l0#nPw3G-quXIig-&Fy<@-l+dUDgsJm)><Tvr^Si%{&X1rVW%kO2
z`3k3fq8@r1GrVT5k1#BOSiz7_Fe*pE#H^IlD^tU$WYY*ALCw6d%?=HOk%QuVFc7{c
z<^L8&oA_$*nyF-aZfxBq@0JVm8BF_B%N_-ch^u7Fwx6oBCBn!@3dZC-$0`S5_9|H|
zo*@s`u?jXvL{Yb$E)9jTdz?)Gb3$uBV4!vLk&noQ*#(n65sYL0xt1Gwu}|we0Os;F
zYM75;;;*hSmns`(9_;QWm7jvi?ccMb`f)yjCBzRj&`!goa-|di0000<MNUMnLSTaB
C=@X{_

diff --git a/components/buttongroup/images/button-themecolor-secondary.png b/components/buttongroup/images/button-themecolor-secondary.png
deleted file mode 100644
index 9e9c4cb67885c3061cbe2a56a31838042e09ce84..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1077
zcmV-51j_q~P)<h;3K|Lk000e1NJLTq00310001Ef0ssI2CnRv%00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D1IkH6K~!i%?U_AH
z+dve@FQux|RKiFw#6``L#S2Jf1k){9U=7*o47d!HU`W?QZL%g(VFM#I83Q9?z;wf5
zq*bzb$zoK@P^22EE^3A7dv_Nnd?jH(0?cp8`SG~B|NAl`fwQwS;$xohPrris-`(A<
zR4OMYC*0-(g27-inH(P<$Nc+EJOFw@H7roS-^4SRYQOjYqkalZLBGL-Kjz=xJnHv1
zcU=G5kIO5c6#j4<aQ%EH-Z^gZc5LgX?4twm^kPB^(WPsyEflxu^1OL{p{Ua(iKQ23
zE}NB{CX00C8S(cAEVEx?-tBv|wm!7&05u_PC${`y=cr=}xXWMn-!sziZkWogOpvOY
zEz_s#=vM!!TtadTl~Q%2nH()fyh_AcXJ+GAO5|CMD!CcSsdBR;C2}ch)MUYA&S+dr
z$Eh<RVM+K#%~d-jO{HUKi>E((CmKX#QRCu|jd#?(Zn~a7A)+*}ht~I-jo+cjDBoO(
zihoR_vv}Yp{a?zeESxD>BIaf@UFD2nhsWSH@${JJnnsD6(YwTrP3LkJrOLdcJ?B!x
zCLv)MR`HQnFTl+14Lcw3I@OB{s+uXYC%tC5biuG2%w4bVLjXo-0F-FhwQ9UpJJ7BE
zONRM6A#0ip$3QXB>&6EK5)u=dmY^;a*MUR~gvjwv9+f5+jXxZh2z-47Vt<G@N1nTV
zeBN8ht;iy4iS`I^^xFQEBw)$Jh6L9#zVhI8plkm_;PEy}UXv#@Z30I?9iH3!wTbeE
zFFMoxQdfZ&2-9=bqK;E0!hg`tcHNpzL{pHV2(dP|dpN1r`Y&gA-$8@vM-EhLvol-R
zzg*Hk)NF3fMdPs09AQ^N6F%s<V>wW;p3OB?y%hBG=yl5#qv;WlU(<UDbocqEX>8^}
zQH?}G&{R4$g)7Q@=CyqE;vP0P&O87nmIk8^j0ewQSTRXTZld#8(u>~@yaA!)<(IAb
z&jtj5Q}((b;%Ep<60z#tdmrKT@4XK%@+GqqU7e);57^b&0>*!<FdxphnRjM0R8lEZ
z8Cpt0n^5!N&TL@|KC|jsewB|4?4JT=hMm`Z5qnQ?Vs>qCX@+j?nx-9=sJ)b_Mpv-`
z!Ob-*J0v+78I2L1<F@NV0H&pgRol8w(RuLye{*wlr>CdfaPNtKSehmq^M!8t@9XPZ
zUS7V*`|n;58^zx5t@wclr61lAtI3G9L3^|}9$x+T$^)(c8^ZNN75EJ%{4xLj2K5Jn
v!9bw(ca|Rjy`UNw&<TG2{?p&z{}b{bhi0y}hO)Qx00000NkvXXu0mjfKe7ge

diff --git a/components/buttongroup/images/button-themecolor-success.png b/components/buttongroup/images/button-themecolor-success.png
deleted file mode 100644
index 8e366754e69f87ec78204e8e39b9589c6b8cb7c0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 562
zcmV-20?qx2P)<h;3K|Lk000e1NJLTq002q=001Ef0ssI2@qwzp00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0mn&1K~z{r?U_4r
z!Y~kqq0e;^x7>*wB-A0fLBI}~p$QiVT_A25XqgEU)44#=KJ)^Kj59P6-uVmp*UHi-
zX<a}^Bpp|SH`zS*rZ?GJCw57S$>xcm3|<;+B*{Wh2Ja{%b`g||H%Ub;Ud(FoVwM;0
z?llp$crh!0S0tjwc!TYZ^TckxBy+eDVzus?gnBk8@Nqe-I9XKNJ|#%=hds;0mvHQd
zXU#|3%xI#38se=>A<BZ=U#cC#BcH~?ny_srb3$f%rTQQB0kQk@8u&9bscrRY^B&uN
z1@Q8K2=B<u)r#?v@$#-}*qNr+HNW9-w6l1xU>1d^eUQR)%%B?L;gl4bCxln*@kVhD
zi_FZ$%l8L<sR`Uf*i8(3o8Z=*m;p7#W5FsRcJqaNyae7!rV$(_hI7KIs?QAkHy%pW
z!$mIVpGV=Xi*<SM6pK+qJbMn<R60GpvAm0bssIR^#(MWcR~MMNq7<#}1ykJxr}n%T
z#FiiLb{tfpzx23t_CNKvzAWSx)U$_imwc064NsCC(`3T%Gp4$$GW0|NHO7le*NHbu
zL@i#-YVl&$_2KoVH_-PIzec_v;S>K0CBYEl7j=#uWIYrU&Hw-a07*qoM6N<$f-xoj
A1ONa4

diff --git a/components/buttongroup/images/button-themecolor-tertiary.png b/components/buttongroup/images/button-themecolor-tertiary.png
deleted file mode 100644
index 77b4aacb9dce24f985c96231e2a833209e88d651..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 613
zcmV-r0-F7aP)<h;3K|Lk000e1NJLTq002M$0018d0ssI2*wb9A00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0s2WqK~z{r?U>I}
z!Y~lVoq@Ygi%%muBmO=33Vj0LCMV&{h_+NL&=!chn{5+A%CsFv2$J~@+b>_z{Uts1
zOgKIm;ChstKSzzHFDC@8UX2pjIRjAlGb4AvnnA;|a|YN-I3U@%2Jkp@Nk<9r>5@(W
z`<4aZA#_Rq3LqJXjn_BK9a?y?7>uayr$M!~rDXxQpB5-afSzIQ5CIGg^S4zR0J`VF
zJq_3VoICf^b|?m8IBXaje?@ab1mi`cM>inhd#TSeFwkt08N{g<lDAl^Fu!Qsmi4x3
z-hjTT)*Jw6FVk)y&tQ=QV?e~|1qTQ<^Rs$-8LHYM8$eJX2>`{MI#W}v@kWF(6bL{C
zNsBQ6=X2pg1TX{AZ($w3*cK|)0#Kim8r1-_9c%#fxN1}3Gf9DJ1L!x9s{{bI9*pPU
z7u`U<76LL^C=0-yU!WxcK!LmCzGlEDfMxb5o1mKe^BcnzcAVuIKo96sVd}*{Op9s(
zP#@}jil-C+d>b-=HGM*QKu)of&F+u|;P#_P*dN}01T~&eHl)J=0Lb#3375@og8g;X
zCOG1x^-2c;z81(7(YZuT<=9jS;BN&0h~z8)+zDKfVQ$L?@V<A^X9mY_`W77~Km{Em
zKxg8TP5}Fs0f4_2!M%BNL!F8FYthx8yFz>e!kSgL)6he+00000NkvXXu0mjf4lDhD

diff --git a/components/buttongroup/images/button-themecolor-warning.png b/components/buttongroup/images/button-themecolor-warning.png
deleted file mode 100644
index a7acf469c99c5507f0a32178ea3054a81d439c75..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 873
zcmV-v1D5=WP)<h;3K|Lk000e1NJLTq002b*0015c0ssI2^`=Bh00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0{%%vK~z{r?U>I`
z6HySyzb!%`fg9Kc62!!VC6Guwa6q95#A`u=cwzewz!^0GK`q`$;193`BbXTAuC_vI
zf+rG;<zgraf%4-@!Y^T+dHc4zYH87s(B1gSr1`#ilX;z;+1I2FRaIdl^m;a5;d?KR
zcZJiM<Q3!Es9sO3#M;GZ<P|%mvOzJ#@vh#VITFHUWgHIZ{jm#1e@;$>!^$|Fw(F05
z>!Go;x)J~9?OX}oK`<`$xnSIHKaPdN%3R9J+MhTITCpG(7;eGvH>o!x=!}S|jU&Is
zFfCZyrFilT$FVSBEH#e?Cls2*WJK<grA{=G4`Ffw`4iH88rkZp#vqW`5ju{3U~x-m
zAR0q^EgW=S55}i(^pS1If!q3#GcRyulAVvLe_5_QL4S|w8|!q(uqKj>H*pevQakAE
z!O)mUejnW-Eie<N`%O)6J_XZDERsq115jf~l7Ac1fUgv)7l$9vMM4iwr9zVk(DINs
zfUYvu?i%>%8Es2Hn-GKd;1<EY2HHmQ1j!}L1kmRd0bZ^%!}la3vfl?)<(S=I@#!-<
z?xJoUt29nufd+U)07DP5l_#_D43F^atZu+xE;UhgRf-H`ug6mhe~8B;F^8%$G%JWM
z^GO}GVq2@^A?n7sQS$-eyg0JYn_7zYMkFE_P*AUOyB3p(uE<%UM$IZXc#pp8GM+|<
zKRKh+X1~<>aax#Jq%;|i#=3NpC02}>v_@p_4?&Gqg78<cc6%@z#NsWu#TJu*c1LVQ
z;R_3OPVk!+#>-`~ScWn$L`F>gIo;}Sa)7@^EWLON-0;Y)%gvxyrm_vLHdL-7@fZm6
zaMG4Jr-pf%(rHZwlwoQV1HGKw^$sD0pQ$<QHzSPS(}N@7$YH*`#z+OGn&t9OT={34
zw~K-XxbT@AX1aJr!aO6HG5WKAC>%M)+vf=AuTAI;9+XO*mcoLZujj9zdUAT+{sE&u
zdk4Z{Wr|$3>yKUMEmpF>w`=LYtej3178U;ljLr1;<bLz000000NkvXXu0mjfeyx*y


From 35850280c3cfb96a124f1b17cf14c179a519d851 Mon Sep 17 00:00:00 2001
From: Svetoslav Dimitrov <Svetoslav.Dimitrov@progress.com>
Date: Mon, 17 Jan 2022 09:04:04 +0200
Subject: [PATCH 07/24] chore(switch): delete images

---
 components/switch/images/switch-size-large.png   | Bin 1279 -> 0 bytes
 components/switch/images/switch-size-medium.png  | Bin 1040 -> 0 bytes
 components/switch/images/switch-size-small.png   | Bin 691 -> 0 bytes
 .../switch/images/switch-thumbrounded-full.png   | Bin 1050 -> 0 bytes
 .../switch/images/switch-thumbrounded-large.png  | Bin 736 -> 0 bytes
 .../switch/images/switch-thumbrounded-medium.png | Bin 682 -> 0 bytes
 .../switch/images/switch-thumbrounded-small.png  | Bin 606 -> 0 bytes
 7 files changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 components/switch/images/switch-size-large.png
 delete mode 100644 components/switch/images/switch-size-medium.png
 delete mode 100644 components/switch/images/switch-size-small.png
 delete mode 100644 components/switch/images/switch-thumbrounded-full.png
 delete mode 100644 components/switch/images/switch-thumbrounded-large.png
 delete mode 100644 components/switch/images/switch-thumbrounded-medium.png
 delete mode 100644 components/switch/images/switch-thumbrounded-small.png

diff --git a/components/switch/images/switch-size-large.png b/components/switch/images/switch-size-large.png
deleted file mode 100644
index 5e12ebe17fabe8bb280f372db18dba9d0358af3c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1279
zcmV<b1OWSqP)<h;3K|Lk000e1NJLTq003+N0021%0ssI2Tt`{n00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D1e8fcK~#8N?VDRx
z;y@5UXKl=KWcDH(@vsnwWf+|Cje0}{=9(%o9g=j1Ji6lKesJsnN%c)tcPGRjyOG9>
z5?f%D*aD-(7HC1@%gf8d!^73p)pEH^lH|gLEti*<e^UM$fH<$OuWxT}A0Hoy{Qdo1
zyU~E-B@zMAh&43b-QBHLtEZ<Yw!gl<@(MKB2t?1v@QCiWw>RBI47S@X;)wA1`I%ru
zC~-Eid5lC3i4GCR-vkr_PO*7&bAwG@*Xy<JE;gK0vJ#s(B~IO1hk6n@2KumozSPVy
zV3V)26H=g+YHAB|Q&es?8{HH}4T<c%p}s7llF@+B^#C@Ywiq`FPul^6N@Ty(Z+P(r
zLagle{{CJMV*?6YW*%+(@Jl4O=_hEv+eSQ6M-2ITNE=XjoZXP9JQ6X;!iBk2d)y6D
z+9bO*k0c{0>5a-GksRsT;2u1Zk9uG;;L$tUR7oT?dNT;*BZsp#J_2=JJwBF7<eQ`+
z9n&uMf{c&W=4+s+iA@^^6icK(tY%uDi$fq*);*@ykHCCQU6!pMizTw6=AuHo)jJ%T
zGq0hTfs~>;wc%1Akx!F`Jr{Bo4ov`dt_$}t?-8ChG89ORn}z}bfCgj+xo4q`40(x?
z1=^K(NEmVN_Y^`h9*);}iF_z}8VW2M%f_IHu-0L?)5a%xiOh_v)k^yj6=G#z(Xh-Q
zm(|+%#F1#EmW2UTv?G!7F;dF{7ckWe@5SlQ$rrQV*=yYMS@yk8W{dPKZ8@ZG1%M?^
zur^X0iL57$)Uv>^Sbi0__%LxYPqeAlX6M>Un<ZX8B)Z1yz<JGG1v(O!%cUua42zss
z4bEk8I+>g<@*Y0yOx0^=5(z9fEIJaIRft<UU;%>RQd)z{lFX-jSq{nkWHLQV-{?#t
z17hxOlOvIVoNCt|7=U0nuNqvI)Iy=4<ZP-n-kHShcAKk@yhIJ(1~Nfwa9OaB9St+M
z5_5c2x^DPlI=`qPl^IX}N--@FN+rh2MDR!)Mma|v6FucTn29Co?ChCXSmKzH$a<@6
zi4$?1NMKb<93p0YD;=-^603i5NzQ)BypZC0=}e+$vCRcdpTA6b@m}^t!E@QidyGNa
z0|PM84etg7*qK|X<w4#G13Ncm31g@?Wu>AmtQLn-%aE4{;}2D3g#J(kvc!#>jHKbP
ze=>#f$NNLbt+Fw?SRy?k8KX?o9F!Hp;kXkQMrW=>>ODpRSnt26IUI#-aDh!_5Sum*
zD3u7f?|JRbCCayYv`#=`Z-XNSb9YB9fWAf#d4fD{+{0Z743hZY^KoO?Klt9!_{eT0
z2dx>Tipjx{sQeNI86R7puh}6piM4T1E|9Co!7QN?LFQ{pyOoq=C+v#VjJ3I#^Ge24
z%*BV)kO*|1b$COSqK^dRY@1pSayl7R$d$77U>Wr!3Y;rZ$;2K0#02j6qUhs`|L;FY
zW<d%ErXI1$%zzz)qDeB8SD?v8-r@teLp_1Uy*I-|LHZM++)bbh6a;ZLsfpty?m-sO
pFpiA>G(K`Xqr?^%B{pWa`v+tCW{qV-MWFxy002ovPDHLkV1ljcNlyR(

diff --git a/components/switch/images/switch-size-medium.png b/components/switch/images/switch-size-medium.png
deleted file mode 100644
index a3d58a60eaeda1fb8b25c9ba4eee1e3bf2c24842..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1040
zcmV+r1n>KaP)<h;3K|Lk000e1NJLTq002?|001or0ssI2vO25S00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D1EonsK~!i%?U`GW
z+CU6Nv$o7~hQ$mUp=Kdd>>?N(-XS~!1vy5t-8OA(!0Ji`&PNI}fOK0|>bCRk^pw10
zKNBz6%{UwmtJP{cosLGM!C>&ify*e0c>kw8lgWe}mdoXOz25Klnp|U=%03>Cs1>Qi
zo6qOJ&iqc{HE+st42Q$nY_{9&^ved24+Yq6w^9Q@zy7TOjbtMUCHyom{xpD9U<uGq
zO-#jS5R}{q*HC<oY?2n!qC_O!1S`eYv7-K*G1Q+}taz>MugOL#mcCDL20oOslav0g
zF`LbXIuTc|eN@WEGo<^V<_yXn$8j*_L}a1Suh$p&Wuq3&l5tz$J&M36(iq0D#3-+-
zxkonr{J6KhAe*vl7<(k5x6eJYabv@YeFxGw8p$4fj?47Ip)6ZkT5~i2&FqE2tPXOd
z(TkLVY_cII3wyg@ykJ`zNR#VDN<lU!9&*y`%#eAhA%lR0O9d~;MzeLP1!P~@U0R2T
zrBRy8#taN_Ny{3>Oli_Yz0UWPPA}4TPyOzjzM0YeDtuUZ|I}|(fNXc9=dxLT(_!X<
zr`RtvFycOvyi={w=X-XU$VO+0M0Wo9M$o^m&vV%{02R=@?7>+&&%e5quz$`WrJuZ&
zsBKL)=N5O4=CZj}3@ICDiR+S5e-u^cZ?-0z7Ixb^m(7&7JEdGA4V75B^X4?Ok_s#L
zcBePczZNK&#RJZAx3PlkFk@U`*Ervb*UN6D+CW5o^$*C#&u;-t4u08KKd{MlM+q|0
zDowsvEJDg=l4rNy0XDG8ktWaLG$~`)PB{E);4_Jml+tmf71@;=7@dauH7{e>DP7A2
zpz^o^RDe~{)GR?Z4W&_oP<c3oU?&zD+xyVN2qL<T4F%cqc-Xq&;T?{%uHAS737Hn0
zHKo-2tMTlqf6M^#{Lrr8tSPOe!Gci#P)Xo(jC2d-oC2Ae*>)X(rjHPX@p#<2)y3YI
z3vUNOsh@Xt`ejoPW?PHO(M$$xo*KX&Y3ZsV;+GAgoVowF+wnGa4yl=-XukPBg9MK6
zxSc9Ja%YBR=;x5$My<>yz4mcUw!o$rMbRBYjxSPV=60|dMj+-f3tf8_s+SFN*Cyim
z(d)%WEv-R=TxqS=k+?)`XsbrDGq^cL5Be!1FIa^PE_o9_6PpaI&z@9*+On*2;|MqP
z(QUE?BvEkO8^<v^Sq0!lX(3Euagi!Vkvo?79@+l^FWJw->GT)8p!q=$gAWG)0000<
KMNUMnLSTZsTJfs@

diff --git a/components/switch/images/switch-size-small.png b/components/switch/images/switch-size-small.png
deleted file mode 100644
index 475c2a423c5ffde420c327ae4320bacd0f65048b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 691
zcmV;k0!;mhP)<h;3K|Lk000e1NJLTq001}u0012b0ssI2aD_O`00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0!T?jK~z{r-IvLA
z!Y~j(QyXVWpo35hTyo=*0(cZcNEN|ASi%lr%eQ9&#t36PI)wZa=1HUP(P;70;X(Kp
zqTB6uHk<YP{U8WFBHHaXzq{S;rw;~$!FW7gEEWu;Lte)%N>8F3orc5VR|G!*UH+WU
z=h`|iyWMWRUQee}axs}q(sdo8yrn1-;@ib)wZanDUaz-YF14Et378TsDJlu0n@XiZ
zGaB<g+S$ftvte{9L7&e#6CI64Br>C=Kz1ef8o~y}fU7gFCs9eyU6ul_bo5mN<dqt@
ztk;uhr_;${DbSI6)j(#5#@f<{UsRO2<2`iPTzJ_Bj<63TlB%NjmgXgN$5o=)A#sUS
z6^i0ck?DYWkxEV93$w%i$}Xu75uqsSfVHLr8X%*!QmG(3Hv$=<S=E0c%Jtw7G|KuE
zQE5rTI4plo9DRrgMVU1(q6B$;*D?+2WnA0)P&AZ_gQ!a`L86dCQ4VyDM;*-oK?o&r
zp;akVoBIb4C8;8+Qw&lMXH#FjrtA>)IQ8)z%92rcjk1`~*U=0hT6@#;$ylTARnMNn
zKB}V`V0(Hg7IjKvt3HRQdmjZ3K;wolXPZQ`bM<7Bb4AC@1>NHXYJoUc&w8*Vm5#nH
zCAV)+EGa6LlTZiGjK^zUru!&RXZO0&m;}&KLm0T@h7aPJasOw=$)y)dLh-^W(~=Yg
zT2pZ87e7fP%`7u+{R$OieW1&9067-$Ba2?X?mc|hA0Y%eLz+Vz_`zeAxZb%T`d2s{
ZegG%CUn>b=A?W}B002ovPDHLkV1kEJC;k8c

diff --git a/components/switch/images/switch-thumbrounded-full.png b/components/switch/images/switch-thumbrounded-full.png
deleted file mode 100644
index af288148af219647e12335559fd506f836734b78..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1050
zcmV+#1m*jQP)<h;3K|Lk000e1NJLTq002<{001fo0ssI2L<k^b00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D1FuO$K~!i%?V4$F
z+CUISb2fY&$X(1uTpYyV7D4Pngs=n(@<g{JG-$)9$5nCO4~mgM-QV;wGuYoQUyuKq
z>)7x2tJP{Yn*~AeGtX!=;^Jg7;jSr*#bUW!uGj1Bc6&S?)w4%vr1^Y4hhc~$gkcZa
zzpngF;5`?)h34^i%!dz$gMPVfaOQM6G5ed%28)1rz1NI-%{&yfydvyR1DFEzBc6cR
zDNn&7j$y00@+!?d1+}CTGDOcqFij{Y3H5Q75P1wS*G;m$RC5$XWb((<rjUUWaD39|
zTC&^ih!93~TtcyC3KCzR6r4i9r_-q)*_dOB5wGJS3N#a81dF?EA>E$#qc$vIa*<sT
zZC5ij{Cr9mf@T7)W{eSYWwq^UrfD_o&mTbQMJ*XadXro_$dl77omL$*0Ku%@eli?n
z-=c#XGR?R`kS((M7E;d7>IG8RI=CUzOs~cvb<GUslvGla_E4wyq0TgW2(p0Y>b0ar
zFn8ZLRWqHPb}c?xLu+xmOYqj~B=p{b<mw>1s`Lf{AO5bRl<q*kQUscv2CkZM!nAwc
zLN>8Q5xX#ajh)Vfc9UVOITq;<YtBAj4@VIvy;U=njBItv9&$>%_j|w7=?||yBn<m6
zo&I}knn_`&YpQ07*{5c5O7blZ@@rmleDNi|*pg<tw^P!pnM1$bR^%S3qd1h^xPYDY
zT2<ZEa~yoRo5M*H7ZS=@u`<nmnzleGU60nanp=o7U{2p%`CQGK+m7aTa~p~^(^Nd?
zwyq!79`++Ay5$~Ln%iuHeQIWk)8n-DT2<P^=JPo>)FWe9JeXp!E5tGqvhr?8bLm>e
zRgzwvGKNL5aO-bG>7In@Vu@x-)GtfWOdW|`50vgbfxhBrTS75APS}Atr<ftrOnM{R
zI@F#MyXGtjv=-A)Gob{TSG8wM{ci?9sKqDsv2B>pFbvh0J;<r~ZAhSdgN1DNdE`;L
zEL+p`H$b4fSY)_lb>XaAfJGu#)+t@hfM@L<EfI_dtdnZM7%Ah5u2G;F$U|h)<)2S-
z9z}$`3C1FVAO72oz}JvXe4aUPkt|e-x0J?bX+}COp;R+a5A4H5`J(}6VI;hCX+KR1
zD|Bh5xXEs(O0z(m*{cvPl=IN)up^a<;PcfL)godPbIr4<UbDax(JbN#Aa59^Fytb)
zu#E?%TT9NvM3o6O{NIXO5QBjzibN-AFQC?$1v{8lbjp6?W0U)s=6{2)r}=XE3(@_V
U_z*A2&Hw-a07*qoM6N<$f_-o8aR2}S

diff --git a/components/switch/images/switch-thumbrounded-large.png b/components/switch/images/switch-thumbrounded-large.png
deleted file mode 100644
index 29247bc9a26ce0e25646b12b84660aa4eb882801..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 736
zcmV<60w4W}P)<h;3K|Lk000e1NJLTq002+`001ip0ssI2V3wHp00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0(D75K~!i%?V4M1
zf-n?7yS8pe7o!{LxDdxxSn)CSUEhx$$VDhdMNEtnJRcoHE4e4Rfg9+@v1Gi3eJ3kC
zpU+35(a!}2gF&y?3xc52>3rWqyWQq1e3vsk2w@C|!|8OoSS+^Nt;C(1M0m5=sDQ@f
z@vj9qEzSfg{T1bKIP7-2)oR7uU=Ene?{bg`V@phE+k+?>Py&@MO~7eqvl-K#Q(J@y
zf>2agR>7H(Rh=4yIVX3Ru$xIP!mL}yNrJKr!u(YInq|3MGHr~hv~`FuDZw&R0ojI_
z*6X$E*EpOX7tE!7hHt_^dZTk`o;?%>)r)pL`zZ`$HP<j{r0`Z4RB<AW7@vjJVwOgX
z&%(gHHZ#ed3)3C7r!*o&m>}E<2aU>SOtlfnQ4Uw-;EC|Jt(r6vYAyMS4usQ}YZ0dU
zaU|TT<M9<+Mv~GDKd1a-LgA~18K|1mSuMis_?!r9qHi(+_3)4(VJeXH7EOfNxVaDx
zr?=jWJ|@Hm4GD9tPA_8-W{>VbSg#Z==`gFK^iHFOCcB0!=VS5@_Rr~?(~Aomm|>tt
z`Q%vmDJc!FBdm+w^hHab(vB`#VEwkFzi7F-Ek#@@JPZiyZ%gh959{a)4}$PjSYKL}
zZu9Wo9$MsS!liovP_9Qj<$8#xdMV3e+LwC}Z|~g_aAsU?ziOFGCbr*|o}g~u@As--
zv)u7AjT~d(`BMqX8VqZu5-<X3eBbL*;0v}ZY67B*n=#!5r!DeATtS^pKtN&`hfL0t
zwZ$;@FApaeGcsHY^UrE$I2n{~x67t7KmC4R)E|T1kyJ%Rf#K5#`%TG&kH<eqCI3-<
S-xyE;0000<MNUMnLSTY9KS}5S

diff --git a/components/switch/images/switch-thumbrounded-medium.png b/components/switch/images/switch-thumbrounded-medium.png
deleted file mode 100644
index d9e41c4ef0dc98f4e97bce07972c8bec324c9df7..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 682
zcmV;b0#*HqP)<h;3K|Lk000e1NJLTq002<{001lq0ssI2l2OBc00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0zXMaK~!i%?V4M1
zf-n?7yEeBY-HUF-aUqVosQ8#Vz8}?r9?Zp11VswONjx7NLnX-}Hz61N2;JlD>;}#|
zZ@1g|eExlx*=#nMOnl!TjYeOk;Kb>4N<F2a8}xIvTJ3hb)9EC=FN}6Z7@5Ul!G~I*
z2^x}COA!RY`FuVc4x7yec|czNR{-tInd|lXrx6${{z}9DhN|c}gI~~GJ97?$aOqO*
z;CwtDrQwQT<cW5I=wY<m<E+^4_f$^UOF0YMoPqjrL0-x?Sm+GIIXZcxZKpG+Rx;<d
zwa!3zv!qEOfz8gK_AOF~vD{frY$?Q8?hI^KQbTROGtIHZl)?q=Oh3#y54)`^-Ju)|
z{obb>yVCCae7hqhO=lR$Ng3drT)?$6`+hUde&0iMAf<2+>8oPoe348MIp38`K`N3A
zZ|zKaXu{d=w_9HCkC)%`lxkJZY))9frI2(ctu^2r4YHTkiVs%h%<7$-(%PA9-hguy
z$$A3EMAMt_zM0SR&GdZEx-Ln`x083Qmv^pWoPieQlX>SxVjEt`xsf$2H@3~JVNn0Q
zDt8Stbgxq6?@6j~&b?O|+mqB!?w*8x*y^0S_jEDGc;}M!(wMW0&kUS<HssthK-G#v
z&w8DErceF2IP~tut#@?9^V9EQ`8N9%=~SIC2;^`NdsZCkEcwoz>qMFX3_`6SoXm1c
zP}y%Q6kIc+?heHNa=GN9a&^YzF&XHyaF*DYh1T&@`;8Lul6H0h_ngD<7rL!*Z8&s~
QlK=n!07*qoM6N<$f{NElvj6}9

diff --git a/components/switch/images/switch-thumbrounded-small.png b/components/switch/images/switch-thumbrounded-small.png
deleted file mode 100644
index 1a392b1369806358f7cadc5c71dbcb00a8c1c4b4..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 606
zcmV-k0-^nhP)<h;3K|Lk000e1NJLTq002<{001fo0ssI2L<k^b00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0rN>jK~!i%?V4?J
zf-n$3dp55lhtZ2T9>nn$B{EJOzv@SIqz|(qqga^~A<g#va$!h#$tHy0TdI$LXB~+1
zcDwzk#&kMOlEfGj$ML%>TuV95a2vDPY`I)+Hk-rYU=^w(&Xh8r&p(@jR@?9QwrU4X
zr_=Fx-0gPj^%{9VUd~nE>ddWtH3fb38|ND+aJ5>YP|-XDXA3<~wv(+-vppPV3lkHC
zllBsq5t=hlK03%td`E!JK%QgtsJFv(23t$%*bdeiNN=Vz2?~Vl40hcj!G*w`?ZB4c
zLg3E8a^<G0!*`}S7N-)N@xyu4@8tBxaxhKDJvnxTvt}4ckQ2!T55T!Nfw%8$1}OA%
z(X*$7+3!LV2$^#<G!j*TSCL|Rx9waaV20gJG{_Fs<;>!Q30#8KowH8v-rj$Hur6n2
z@8Xbd*}2>*8{S!ZpYyzcZJoRE+#lJ?9>V)Jf)e}z=Q{css8N0?$!+k+xlEw`In1xz
zh6bKhe$8RR4{MS-oc(%MHG^ksl1A`u?fGh`&dYa<SEBA+QsbV1y1gNFdw{kUMSH#K
z_Vg(q9Yx=6bbX^EpA~(Jr9hW&?lceg(HL<Y(=E1Y2kQB61<>$SARQKq1&x{{$z(Dy
sPH?T*J3;Mu+V#fMOupyptc5iF2G9+PaM3vE8UO$Q07*qoM6N<$f(uX=ga7~l


From 7f1289ebdab39e0e3813726d3a5c69247e5c9b77 Mon Sep 17 00:00:00 2001
From: Svetoslav Dimitrov <Svetoslav.Dimitrov@progress.com>
Date: Mon, 17 Jan 2022 14:49:07 +0200
Subject: [PATCH 08/24] chore(docs): revamp of the articles

---
 components/button/appearance.md         |  58 +++++------
 components/buttongroup/appearance.md    |  58 +++++------
 components/checkbox/appearance.md       |  90 ++++++++++++++++
 components/maskedtextbox/appearance.md  | 129 +++++++++++++++++++++++
 components/numerictextbox/appearance.md | 129 +++++++++++++++++++++++
 components/switch/appearance.md         |  60 ++++++-----
 components/textarea/appearance.md       | 130 ++++++++++++++++++++++++
 components/textbox/appearance.md        | 130 ++++++++++++++++++++++++
 components/togglebutton/appearance.md   |  58 +++++------
 9 files changed, 730 insertions(+), 112 deletions(-)
 create mode 100644 components/checkbox/appearance.md
 create mode 100644 components/maskedtextbox/appearance.md
 create mode 100644 components/numerictextbox/appearance.md
 create mode 100644 components/textarea/appearance.md
 create mode 100644 components/textbox/appearance.md

diff --git a/components/button/appearance.md b/components/button/appearance.md
index 1fc1bd4951..66b435f8f4 100644
--- a/components/button/appearance.md
+++ b/components/button/appearance.md
@@ -24,12 +24,12 @@ You can use all of them together to achieve the desired appearance. This article
 
 The `FillMode` controls how the TelerikButton is filled. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.FillMode` class:
 
-| Class members | Result |
+| Class members | Manual declarations |
 |------------|--------|
-|`Solid` <br /> default value|![](images/button-fillmode-solid.png)|
-|`Flat`|![](images/button-fillmode-flat.png)|
-|`Outline`|![](images/button-fillmode-outline.png)|
-|`Link`|![](images/button-fillmode-link.png)|
+|`Solid` <br /> default value|`solid`|
+|`Flat`|`flat`|
+|`Outline`|`outline`|
+|`Link`|`link`|
 
 >caption The built-in Fill modes
 
@@ -57,12 +57,12 @@ The `FillMode` controls how the TelerikButton is filled. You can set it to a mem
 
 The `Rounded` parameter applies the `border-radiums` CSS rule to the button to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Rounded` class:
 
-| Class members | Result |
+| Class members | Manual declarations |
 |------------|--------|
-|`Small` |![button-rounded](images/button-rounded-small.png)|
-|`Medium`|![button-rounded](images/button-rounded-medium.png)|
-|`Large`|![button-rounded](images/button-rounded-large.png)|
-|`Full`|![button-rounded](images/button-rounded-full.png)|
+|`Small` |`sm`|
+|`Medium`|`md`|
+|`Large`|`lg`|
+|`Full`|`full`|
 
 >caption The built-in values of the Rounded attribute
 
@@ -90,10 +90,10 @@ The `Rounded` parameter applies the `border-radiums` CSS rule to the button to a
 
 The `Shape` attribute defines the geometric shape of the button. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Shape` class:
 
-| Class members | Result |
+| Class members | Manual declarations |
 |---------------|--------|
-| `Rectangle`   |![button-rectangle](images/button-shape-rectangle.png)|
-| `Square`   |![button-square](images/button-shape-square.png)|
+| `Rectangle`   |`rectangle`|
+| `Square`   |`square`|
 | `Circle`   |To create a circular button you should set the `Shape` attribute to **Square**, and the `Rounded` attribute to **Full**|
 
 
@@ -123,11 +123,11 @@ The `Shape` attribute defines the geometric shape of the button. You can set it
 
 You can increase or decrease the size of the button by setting the `Size` parameter to a member of the `Telerik.Blazor.ThemeConstants.Button.Size` class:
 
-| Class members | Result |
+| Class members | Manual declarations |
 |---------------|--------|
-| `Small`   |![button-small](images/button-size-small.png)|
-| `Medium`   |![button-medium](images/button-size-medium.png)|
-| `Large`   |![button-large](images/button-size-large.png)|
+| `Small`   |`sm`|
+| `Medium`   |`md`|
+| `Large`   |`lg`|
 
 >caption The built-in button sizes
 
@@ -153,19 +153,19 @@ You can increase or decrease the size of the button by setting the `Size` parame
 
 The color of the button is controlled through the `ThemeColor` parameter. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.ThemeColor` class:
 
-| Class members | Result |
+| Class members | Manual declarations |
 |------------|--------|
-|`Base` <br /> default value |![button-base](images/button-themecolor-base.png)|
-|`Primary`|![button-primary](images/button-themecolor-primary.png)|
-|`Secondary`|![button-secondary](images/button-themecolor-secondary.png)|
-|`Tertiary`|![button-tertiary](images/button-themecolor-tertiary.png)|
-|`Info`|![button-info](images/button-themecolor-info.png)|
-|`Success`|![button-success](images/button-themecolor-success.png)|
-|`Warning`|![button-warning](images/button-themecolor-warning.png)|
-|`Error`|![button-error](images/button-themecolor-error.png)|
-|`Dark`|![button-dark](images/button-themecolor-dark.png)|
-|`Light`|![button-light](images/button-themecolor-light.png)|
-|`Inverse`|![button-inverse](images/button-themecolor-inverse.png)|
+|`Base` <br /> default value |`base`|
+|`Primary`|`primary`|
+|`Secondary`|`secondary`|
+|`Tertiary`|`tertiary`|
+|`Info`|`info`|
+|`Success`|`success`|
+|`Warning`|`warning`|
+|`Error`|`error`|
+|`Dark`|`dark`|
+|`Light`|`light`|
+|`Inverse`|`inverse`|
 
 
 >caption The built-in ThemeColors
diff --git a/components/buttongroup/appearance.md b/components/buttongroup/appearance.md
index 2d80018073..bc057dea92 100644
--- a/components/buttongroup/appearance.md
+++ b/components/buttongroup/appearance.md
@@ -24,12 +24,12 @@ You can use all of them together to achieve the desired appearance. This article
 
 The `FillMode` controls how the TelerikButton is filled. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.FillMode` class:
 
-| Class members | Result |
+| Class members | Manual declarations |
 |------------|--------|
-|`Solid` <br /> default value|![](images/button-fillmode-solid.png)|
-|`Flat`|![](images/button-fillmode-flat.png)|
-|`Outline`|![](images/button-fillmode-outline.png)|
-|`Link`|![](images/button-fillmode-link.png)|
+|`Solid` <br /> default value|`solid`|
+|`Flat`|`flat`|
+|`Outline`|`outline`|
+|`Link`|`link`|
 
 >caption The built-in Fill modes
 
@@ -56,12 +56,12 @@ The `FillMode` controls how the TelerikButton is filled. You can set it to a mem
 
 The `Rounded` paramter applies the `border-radiums` CSS rule to the button to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Rounded` class:
 
-| Class members | Result |
+| Class members | Manual declarations |
 |------------|--------|
-|`Small` |![button-rounded](images/button-rounded-small.png)|
-|`Medium`|![button-rounded](images/button-rounded-medium.png)|
-|`Large`|![button-rounded](images/button-rounded-large.png)|
-|`Full`|![button-rounded](images/button-rounded-full.png)|
+|`Small` |`sm`|
+|`Medium`|`md`|
+|`Large`|`lg`|
+|`Full`|`full`|
 
 >caption The built-in values of the Rounded attribute
 
@@ -88,10 +88,10 @@ The `Rounded` paramter applies the `border-radiums` CSS rule to the button to ac
 
 The `Shape` attribute defines the geometric shape of the button. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Shape` class:
 
-| Class members | Result |
+| Class members | Manual declarations |
 |---------------|--------|
-| `Rectangle`   |![button-rectangle](images/button-shape-rectangle.png)|
-| `Square`   |![button-square](images/button-shape-square.png)|
+| `Rectangle`   |`rectangle`|
+| `Square`   |`square`|
 | `Circle`   |To create a circular button you should set the `Shape` attribute to **Square**, and the `Rounded` attribute to **Full**|
 
 
@@ -120,11 +120,11 @@ The `Shape` attribute defines the geometric shape of the button. You can set it
 
 You can increase or decrease the size of the button by setting the `Size` parameter to a member of the `Telerik.Blazor.ThemeConstants.Button.Size` class:
 
-| Class members | Result |
+| Class members | Manual declarations |
 |---------------|--------|
-| `Small`   |![button-small](images/button-size-small.png)|
-| `Medium`   |![button-medium](images/button-size-medium.png)|
-| `Large`   |![button-large](images/button-size-large.png)|
+| `Small`   |`sm`|
+| `Medium`   |`md`|
+| `Large`   |`lg`|
 
 >caption The built-in button sizes
 
@@ -149,19 +149,19 @@ You can increase or decrease the size of the button by setting the `Size` parame
 
 The color of the button is controlled through the `ThemeColor` parameter. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.ThemeColor` class:
 
-| Class members | Result |
+| Class members | Manual declarations |
 |------------|--------|
-|`Base` <br /> default value |![button-base](images/button-themecolor-base.png)|
-|`Primary`|![button-primary](images/button-themecolor-primary.png)|
-|`Secondary`|![button-secondary](images/button-themecolor-secondary.png)|
-|`Tertiary`|![button-tertiary](images/button-themecolor-tertiary.png)|
-|`Info`|![button-info](images/button-themecolor-info.png)|
-|`Success`|![button-success](images/button-themecolor-success.png)|
-|`Warning`|![button-warning](images/button-themecolor-warning.png)|
-|`Error`|![button-error](images/button-themecolor-error.png)|
-|`Dark`|![button-dark](images/button-themecolor-dark.png)|
-|`Light`|![button-light](images/button-themecolor-light.png)|
-|`Inverse`|![button-inverse](images/button-themecolor-inverse.png)|
+|`Base` <br /> default value |`base`|
+|`Primary`|`primary`|
+|`Secondary`|`secondary`|
+|`Tertiary`|`tertiary`|
+|`Info`|`info`|
+|`Success`|`success`|
+|`Warning`|`warning`|
+|`Error`|`error`|
+|`Dark`|`dark`|
+|`Light`|`light`|
+|`Inverse`|`inverse`|
 
 
 >caption The built-in ThemeColors
diff --git a/components/checkbox/appearance.md b/components/checkbox/appearance.md
new file mode 100644
index 0000000000..90c910d7d7
--- /dev/null
+++ b/components/checkbox/appearance.md
@@ -0,0 +1,90 @@
+---
+title: Appearance
+page_title: CheckBox Appearance
+description: Appearance settings of the CheckBox for Blazor.
+slug: checkbox-appearance
+tags: telerik,blazor,button,checkbox,appearance
+published: True
+position: 35
+---
+
+# Appearance Settings
+
+You can control the appearance of the CheckBox button by setting the following attribute:
+
+* [Size](#size)
+* [Rounded](#rounded)
+
+
+## Size
+
+You can increase or decrease the size of the CheckBox by setting the `Size` attribute to a member of the `Telerik.Blazor.ThemeConstants.CheckBox.Size` class:
+
+| Class members | Manual declarations |
+|------------|--------|
+|`Small` |`sm`|
+|`Medium`|`md`|
+|`Large`|`lg`|
+
+>caption The built-in sizes
+
+````CSHTML
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.CheckBox.Size)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+
+    @foreach (var field in fields)
+    {
+        string size = field.GetValue(null).ToString();
+
+        <div style="float:left; margin: 20px;">
+            <TelerikCheckBox @bind-Value="@isSelected" Size="@size"></TelerikCheckBox>
+        </div>
+    }
+}
+
+@code{
+    private bool isSelected { get; set; }
+}
+````
+
+## Rounded
+
+The `Rounded` attribute applies the `border-radiums` CSS rule to the checkbox to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.CheckBox.Rounded` class:
+
+| Class members | Manual declarations |
+|------------|--------|
+|`Small` |`sm`|
+|`Medium`|`md`|
+|`Large`|`lg`|
+
+>caption The built-in values of the Rounded attribute
+
+````CSHTML
+@* The built-in values of the Rounded attribute.  *@
+
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.CheckBox.Rounded)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+
+    @foreach (var field in fields)
+    {
+        string rounded = field.GetValue(null).ToString();
+
+        <div style="float:left; margin: 20px;">
+            <TelerikCheckBox @bind-Value="@isSelected" Rounded="@rounded"></TelerikCheckBox>
+        </div>
+    }
+}
+
+@code{
+    private bool isSelected { get; set; }
+}
+````
+
diff --git a/components/maskedtextbox/appearance.md b/components/maskedtextbox/appearance.md
new file mode 100644
index 0000000000..afb563cba8
--- /dev/null
+++ b/components/maskedtextbox/appearance.md
@@ -0,0 +1,129 @@
+---
+title: Appearance
+page_title: MaskedTextBox Appearance
+description: Appearance settings of the MaskedTextBox for Blazor.
+slug: maskedtextbox-appearance
+tags: telerik,blazor,button,maskedtextbox,mask,appearance
+published: True
+position: 35
+---
+
+# Appearance Settings
+
+You can control the appearance of the MaskedTextBox button by setting the following attribute:
+
+* [Size](#size)
+* [Rounded](#rounded)
+* [FillMode](#fillmode)
+
+
+## Size
+
+You can increase or decrease the size of the MaskedTextBox by setting the `Size` attribute to a member of the `Telerik.Blazor.ThemeConstants.MaskedTextBox.Size` class:
+
+| Class members | Manual declarations |
+|------------|--------|
+|`Small` |`sm`|
+|`Medium`|`md`|
+|`Large`|`lg`|
+
+>caption The built-in sizes
+
+````CSHTML
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.MaskedTextBox.Size)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+
+    @foreach (var field in fields)
+    {
+        string size = field.GetValue(null).ToString();
+        
+        <div style="float:left; margin: 20px;">
+            <TelerikMaskedTextBox @bind-Value="@MaskedTextBoxValue" Size="@size"></TelerikMaskedTextBox>
+        </div>
+    }
+}
+
+@code{
+    private string MaskedTextBoxValue { get; set; }
+}
+````
+
+## Rounded
+
+The `Rounded` attribute applies the `border-radiums` CSS rule to the textbox to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.MaskedTextBox.Rounded` class:
+
+| Class members | Manual declarations |
+|------------|--------|
+|`Small` |`sm`|
+|`Medium`|`md`|
+|`Large`|`lg`|
+|`Full`|`full`|
+
+>caption The built-in values of the Rounded attribute
+
+````CSHTML
+@* The built-in values of the Rounded attribute.  *@
+
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.MaskedTextBox.Rounded)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+
+    @foreach (var field in fields)
+    {
+        string rounded = field.GetValue(null).ToString();
+        
+        <div style="float:left; margin: 20px;">
+            <TelerikMaskedTextBox @bind-Value="@MaskedTextBoxValue" Rounded="@rounded"></TelerikMaskedTextBox>
+        </div>
+    }
+}
+
+@code{
+    private string MaskedTextBoxValue { get; set; }
+}
+````
+
+## FillMode
+
+The `FillMode` controls how the TelerikMaskedTextBox is filled. You can set it to a member of the `Telerik.Blazor.ThemeConstants.MaskedTextBox.FillMode` class:
+
+| Class members | Result |
+|------------|--------|
+|`Solid` <br /> default value|`solid`|
+|`Flat`|`flat`|
+|`Outline`|`outline`|
+
+>caption The built-in Fill modes
+
+````CSHTML
+@* These are all built-in fill modes *@
+
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.MaskedTextBox.FillMode)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+
+    @foreach (var field in fields)
+    {
+        string fillMode = field.GetValue(null).ToString();
+        
+        <div style="float:left; margin: 20px;">
+            <TelerikMaskedTextBox @bind-Value="@MaskedTextBoxValue" FillMode="@fillMode"></TelerikMaskedTextBox>
+        </div>
+    }
+}
+
+@code{
+    private string MaskedTextBoxValue { get; set; }
+}
+````
+
diff --git a/components/numerictextbox/appearance.md b/components/numerictextbox/appearance.md
new file mode 100644
index 0000000000..99cbd4de8c
--- /dev/null
+++ b/components/numerictextbox/appearance.md
@@ -0,0 +1,129 @@
+---
+title: Appearance
+page_title: NumericTextBox Appearance
+description: Appearance settings of the NumericTextBox for Blazor.
+slug: numerictextbox-appearance
+tags: telerik,blazor,button,numerictextbox,appearance
+published: True
+position: 35
+---
+
+# Appearance Settings
+
+You can control the appearance of the NumericTextBox button by setting the following attribute:
+
+* [Size](#size)
+* [Rounded](#rounded)
+* [FillMode](#fillmode)
+
+
+## Size
+
+You can increase or decrease the size of the NumericTextBox by setting the `Size` attribute to a member of the `Telerik.Blazor.ThemeConstants.NumericTextBox.Size` class:
+
+| Class members | Manual declarations |
+|------------|--------|
+|`Small` |`sm`|
+|`Medium`|`md`|
+|`Large`|`lg`|
+
+>caption The built-in sizes
+
+````CSHTML
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.NumericTextBox.Size)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+
+    @foreach (var field in fields)
+    {
+        string size = field.GetValue(null).ToString();
+
+        <div style="float:left; margin: 20px;">
+            <TelerikNumericTextBox @bind-Value="@NumericValue" Size="@size"></TelerikNumericTextBox>
+        </div>
+    }
+}
+
+@code{
+    private int NumericValue { get; set; }
+}
+````
+
+## Rounded
+
+The `Rounded` attribute applies the `border-radiums` CSS rule to the textbox to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.NumericTextBox.Rounded` class:
+
+| Class members | Manual declarations |
+|------------|--------|
+|`Small` |`sm`|
+|`Medium`|`md`|
+|`Large`|`lg`|
+|`Full`|`full`|
+
+>caption The built-in values of the Rounded attribute
+
+````CSHTML
+@* The built-in values of the Rounded attribute.  *@
+
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.NumericTextBox.Rounded)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+
+    @foreach (var field in fields)
+    {
+        string rounded = field.GetValue(null).ToString();
+
+        <div style="float:left; margin: 20px;">
+            <TelerikNumericTextBox @bind-Value="@NumericValue" Rounded="@rounded"></TelerikNumericTextBox>
+        </div>
+    }
+}
+
+@code{
+    private int NumericValue { get; set; }
+}
+````
+
+## FillMode
+
+The `FillMode` controls how the TelerikNumericTextBox is filled. You can set it to a member of the `Telerik.Blazor.ThemeConstants.NumericTextBox.FillMode` class:
+
+| Class members | Result |
+|------------|--------|
+|`Solid` <br /> default value|`solid`|
+|`Flat`|`flat`|
+|`Outline`|`outline`|
+
+>caption The built-in Fill modes
+
+````CSHTML
+@* These are all built-in fill modes *@
+
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.NumericTextBox.FillMode)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+
+    @foreach (var field in fields)
+    {
+        string fillMode = field.GetValue(null).ToString();
+
+        <div style="float:left; margin: 20px;">
+            <TelerikNumericTextBox @bind-Value="@NumericValue" FillMode="@fillMode"></TelerikNumericTextBox>
+        </div>
+    }
+}
+
+@code{
+    private int NumericValue { get; set; }
+}
+````
+
diff --git a/components/switch/appearance.md b/components/switch/appearance.md
index ae2653105b..476a5df43a 100644
--- a/components/switch/appearance.md
+++ b/components/switch/appearance.md
@@ -10,7 +10,7 @@ position: 35
 
 # Appearance Settings
 
-You can control the appearance of the RadioButtonGroup button by setting the following attribute:
+You can control the appearance of the Switch button by setting the following attribute:
 
 * [Size](#size)
 * [ThumbRounded](#thumbrounded)
@@ -21,11 +21,11 @@ You can control the appearance of the RadioButtonGroup button by setting the fol
 
 You can increase or decrease the size of the Switch by setting the `Size` attribute to a member of the `Telerik.Blazor.ThemeConstants.Switch.Size` class:
 
-| Class members | Result |
-|---------------|--------|
-|`Small`|![button-small](images/switch-size-small.png)|
-|`Medium`|![button-medium](images/switch-size-medium.png)|
-|`Large` |![button-large](images/switch-size-large.png)|
+| Class members | Manual declarations |
+|------------|--------|
+|`Small` |`sm`|
+|`Medium`|`md`|
+|`Large`|`lg`|
 
 >caption The built-in sizes
 
@@ -56,12 +56,12 @@ You can increase or decrease the size of the Switch by setting the `Size` attrib
 
 The `ThumbRounded` attribute applies the `border-radiums` CSS rule to the thumb of the switch to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Switch.ThumbRounded` class:
 
-| Class members | Result |
+| Class members | Manual declarations |
 |------------|--------|
-|`Small` |![button-rounded](images/switch-thumbrounded-small.png)|
-|`Medium`|![button-rounded](images/switch-thumbrounded-medium.png)|
-|`Large`|![button-rounded](images/switch-thumbrounded-large.png)|
-|`Full`|![button-rounded](images/switch-thumbrounded-full.png)|
+|`Small` |`sm`|
+|`Medium`|`md`|
+|`Large`|`lg`|
+|`Full`|`full`|
 
 >caption The built-in values of the ThumbRounded attribute
 
@@ -69,52 +69,62 @@ The `ThumbRounded` attribute applies the `border-radiums` CSS rule to the thumb
 @* The built-in values of the ThumbRounded attribute.  *@
 
 @{
-    var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Rounded)
+    var fields = typeof(Telerik.Blazor.ThemeConstants.Switch.ThumbRounded)
         .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
         | System.Reflection.BindingFlags.FlattenHierarchy)
         .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
 
-    foreach (var field in fields)
+
+    @foreach (var field in fields)
     {
-        string rounded = field.GetValue(null).ToString();
+        string thumbRounded = field.GetValue(null).ToString();
 
         <div style="float:left; margin: 20px;">
-            <TelerikButton Rounded="@rounded">@rounded</TelerikButton>
+            <TelerikSwitch @bind-Value="@isSelected" ThumbRounded="@thumbRounded"></TelerikSwitch>
         </div>
     }
 }
+
+@code{
+    private bool isSelected { get; set; }
+}
 ````
 
 ## TrackRounded
 
 The `TrackRounded` attribute applies the `border-radiums` CSS rule to the track of the switch to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Switch.TrackRounded` class:
 
-| Class members | Result |
+| Class members | Manual declarations |
 |------------|--------|
-|`Small` |![button-rounded](images/switch-thumbrounded-small.png)|
-|`Medium`|![button-rounded](images/switch-thumbrounded-medium.png)|
-|`Large`|![button-rounded](images/switch-thumbrounded-large.png)|
-|`Full`|![button-rounded](images/switch-thumbrounded-full.png)|
+|`Small` |`sm`|
+|`Medium`|`md`|
+|`Large`|`lg`|
+|`Full`|`full`|
 
 >caption The built-in values of the ThumbRounded attribute
 
 ````CSHTML
-@* The built-in values of the ThumbRounded attribute.  *@
+@* The built-in values of the TrackRounded attribute.  *@
 
 @{
-    var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Rounded)
+    var fields = typeof(Telerik.Blazor.ThemeConstants.Switch.TrackRounded)
         .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
         | System.Reflection.BindingFlags.FlattenHierarchy)
         .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
 
-    foreach (var field in fields)
+
+    @foreach (var field in fields)
     {
-        string rounded = field.GetValue(null).ToString();
+        string trackRounded = field.GetValue(null).ToString();
 
         <div style="float:left; margin: 20px;">
-            <TelerikButton Rounded="@rounded">@rounded</TelerikButton>
+            <TelerikSwitch @bind-Value="@isSelected" TrackRounded="@trackRounded"></TelerikSwitch>
         </div>
     }
 }
+
+@code{
+    private bool isSelected { get; set; }
+}
 ````
 
diff --git a/components/textarea/appearance.md b/components/textarea/appearance.md
new file mode 100644
index 0000000000..2472d08211
--- /dev/null
+++ b/components/textarea/appearance.md
@@ -0,0 +1,130 @@
+---
+title: Appearance
+page_title: TextArea Appearance
+description: Appearance settings of the TextArea for Blazor.
+slug: TextArea-appearance
+tags: telerik,blazor,button,TextArea,appearance
+published: True
+position: 35
+---
+
+# Appearance Settings
+
+You can control the appearance of the TextArea button by setting the following attribute:
+
+* [Size](#size)
+* [Rounded](#rounded)
+* [FillMode](#fillmode)
+
+
+## Size
+
+You can increase or decrease the size of the TextArea by setting the `Size` attribute to a member of the `Telerik.Blazor.ThemeConstants.TextArea.Size` class:
+
+| Class members | Manual declarations |
+|------------|--------|
+|`Small` |`sm`|
+|`Medium`|`md`|
+|`Large`|`lg`|
+
+>caption The built-in sizes
+
+````CSHTML
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.TextArea.Size)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+
+    @foreach (var field in fields)
+    {
+        string size = field.GetValue(null).ToString();
+        
+        <div style="float:left; margin: 20px;">
+            <TelerikTextArea @bind-Value="@TextAreaValue" Size="@size"></TelerikTextArea>
+        </div>
+    }
+}
+
+@code{
+    private string TextAreaValue { get; set; }
+}
+````
+
+## Rounded
+
+The `Rounded` attribute applies the `border-radiums` CSS rule to the TextArea to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.TextArea.Rounded` class:
+
+| Class members | Manual declarations |
+|------------|--------|
+|`Small` |`sm`|
+|`Medium`|`md`|
+|`Large`|`lg`|
+|`Full`|`full`|
+
+>caption The built-in values of the Rounded attribute
+
+````CSHTML
+@* The built-in values of the Rounded attribute.  *@
+
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.TextArea.Rounded)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+
+    @foreach (var field in fields)
+    {
+        string rounded = field.GetValue(null).ToString();
+        
+        <div style="float:left; margin: 20px;">
+            <TelerikTextArea @bind-Value="@TextAreaValue" Rounded="@rounded"></TelerikTextArea>
+        </div>
+    }
+}
+
+@code{
+    private string TextAreaValue { get; set; }
+}
+````
+
+## FillMode
+
+The `FillMode` controls how the TelerikTextArea is filled. You can set it to a member of the `Telerik.Blazor.ThemeConstants.TextArea.FillMode` class:
+
+| Class members | Result |
+|------------|--------|
+|`Solid` <br /> default value|`solid`|
+|`Flat`|`flat`|
+|`Outline`|`outline`|
+
+>caption The built-in Fill modes
+
+````CSHTML
+@* These are all built-in fill modes *@
+
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.TextArea.FillMode)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+
+    @foreach (var field in fields)
+    {
+        string fillMode = field.GetValue(null).ToString();
+        
+        <div style="float:left; margin: 20px;">
+            <span>@fillMode</span>
+            <TelerikTextArea @bind-Value="@TextAreaValue" FillMode="@fillMode"></TelerikTextArea>
+        </div>
+    }
+}
+
+@code{
+    private string TextAreaValue { get; set; }
+}
+````
+
diff --git a/components/textbox/appearance.md b/components/textbox/appearance.md
new file mode 100644
index 0000000000..7cfe4bbfdc
--- /dev/null
+++ b/components/textbox/appearance.md
@@ -0,0 +1,130 @@
+---
+title: Appearance
+page_title: TextBox Appearance
+description: Appearance settings of the TextBox for Blazor.
+slug: textbox-appearance
+tags: telerik,blazor,button,textbox,appearance
+published: True
+position: 35
+---
+
+# Appearance Settings
+
+You can control the appearance of the TextBox button by setting the following attribute:
+
+* [Size](#size)
+* [Rounded](#rounded)
+* [FillMode](#fillmode)
+
+
+## Size
+
+You can increase or decrease the size of the TextBox by setting the `Size` attribute to a member of the `Telerik.Blazor.ThemeConstants.TextBox.Size` class:
+
+| Class members | Manual declarations |
+|------------|--------|
+|`Small` |`sm`|
+|`Medium`|`md`|
+|`Large`|`lg`|
+
+>caption The built-in sizes
+
+````CSHTML
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.TextBox.Size)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+
+    @foreach (var field in fields)
+    {
+        string size = field.GetValue(null).ToString();
+        
+        <div style="float:left; margin: 20px;">
+            <TelerikTextBox @bind-Value="@TextBoxValue" Size="@size"></TelerikTextBox>
+        </div>
+    }
+}
+
+@code{
+    private string TextBoxValue { get; set; }
+}
+````
+
+## Rounded
+
+The `Rounded` attribute applies the `border-radiums` CSS rule to the textbox to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.TextBox.Rounded` class:
+
+| Class members | Manual declarations |
+|------------|--------|
+|`Small` |`sm`|
+|`Medium`|`md`|
+|`Large`|`lg`|
+|`Full`|`full`|
+
+>caption The built-in values of the Rounded attribute
+
+````CSHTML
+@* The built-in values of the Rounded attribute.  *@
+
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.TextBox.Rounded)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+
+    @foreach (var field in fields)
+    {
+        string rounded = field.GetValue(null).ToString();
+        
+        <div style="float:left; margin: 20px;">
+            <TelerikTextBox @bind-Value="@TextBoxValue" Rounded="@rounded"></TelerikTextBox>
+        </div>
+    }
+}
+
+@code{
+    private string TextBoxValue { get; set; }
+}
+````
+
+## FillMode
+
+The `FillMode` controls how the TelerikTextBox is filled. You can set it to a member of the `Telerik.Blazor.ThemeConstants.TextBox.FillMode` class:
+
+| Class members | Result |
+|------------|--------|
+|`Solid` <br /> default value|`solid`|
+|`Flat`|`flat`|
+|`Outline`|`outline`|
+
+>caption The built-in Fill modes
+
+````CSHTML
+@* These are all built-in fill modes *@
+
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.TextBox.FillMode)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+
+    @foreach (var field in fields)
+    {
+        string fillMode = field.GetValue(null).ToString();
+        
+        <div style="float:left; margin: 20px;">
+            <span>@fillMode</span>
+            <TelerikTextBox @bind-Value="@TextBoxValue" FillMode="@fillMode"></TelerikTextBox>
+        </div>
+    }
+}
+
+@code{
+    private string TextBoxValue { get; set; }
+}
+````
+
diff --git a/components/togglebutton/appearance.md b/components/togglebutton/appearance.md
index 05a81ec9af..4b347bbcee 100644
--- a/components/togglebutton/appearance.md
+++ b/components/togglebutton/appearance.md
@@ -24,12 +24,12 @@ You can use all of them together to achieve the desired appearance. This article
 
 The `FillMode` controls how the TelerikToggleButton is filled. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.FillMode` class:
 
-| Class members | Result |
+| Class members | Manual declarations |
 |------------|--------|
-|`Solid` <br /> default value|![](images/button-fillmode-solid.png)|
-|`Flat`|![](images/button-fillmode-flat.png)|
-|`Outline`|![](images/button-fillmode-outline.png)|
-|`Link`|![](images/button-fillmode-link.png)|
+|`Solid` <br /> default value|`solid`|
+|`Flat`|`flat`|
+|`Outline`|`outline`|
+|`Link`|`link`|
 
 >caption The built-in Fill modes
 
@@ -57,12 +57,12 @@ The `FillMode` controls how the TelerikToggleButton is filled. You can set it to
 
 The `Rounded` paramter applies the `border-radiums` CSS rule to the button to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Rounded` class:
 
-| Class members | Result |
+| Class members | Manual declarations |
 |------------|--------|
-|`Small` |![button-rounded](images/button-rounded-small.png)|
-|`Medium`|![button-rounded](images/button-rounded-medium.png)|
-|`Large`|![button-rounded](images/button-rounded-large.png)|
-|`Full`|![button-rounded](images/button-rounded-full.png)|
+|`Small` |`sm`|
+|`Medium`|`md`|
+|`Large`|`lg`|
+|`Full`|`full`|
 
 >caption The built-in values of the Rounded attribute
 
@@ -90,10 +90,10 @@ The `Rounded` paramter applies the `border-radiums` CSS rule to the button to ac
 
 The `Shape` attribute defines the geometric shape of the button. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Shape` class:
 
-| Class members | Result |
+| Class members | Manual declarations |
 |---------------|--------|
-| `Rectangle`   |![button-rectangle](images/button-shape-rectangle.png)|
-| `Square`   |![button-square](images/button-shape-square.png)|
+| `Rectangle`   |`rectangle`|
+| `Square`   |`square`|
 | `Circle`   |To create a circular button you should set the `Shape` attribute to **Square**, and the `Rounded` attribute to **Full**|
 
 
@@ -123,11 +123,11 @@ The `Shape` attribute defines the geometric shape of the button. You can set it
 
 You can increase or decrease the size of the button by setting the `Size` parameter to a member of the `Telerik.Blazor.ThemeConstants.Button.Size` class:
 
-| Class members | Result |
+| Class members | Manual declarations |
 |---------------|--------|
-| `Small`   |![button-small](images/button-size-small.png)|
-| `Medium`   |![button-medium](images/button-size-medium.png)|
-| `Large`   |![button-large](images/button-size-large.png)|
+| `Small`   |`sm`|
+| `Medium`   |`md`|
+| `Large`   |`lg`|
 
 >caption The built-in button sizes
 
@@ -153,19 +153,19 @@ You can increase or decrease the size of the button by setting the `Size` parame
 
 The color of the button is controlled through the `ThemeColor` parameter. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.ThemeColor` class:
 
-| Class members | Result |
+| Class members | Manual declarations |
 |------------|--------|
-|`Base` <br /> default value |![button-base](images/button-themecolor-base.png)|
-|`Primary`|![button-primary](images/button-themecolor-primary.png)|
-|`Secondary`|![button-secondary](images/button-themecolor-secondary.png)|
-|`Tertiary`|![button-tertiary](images/button-themecolor-tertiary.png)|
-|`Info`|![button-info](images/button-themecolor-info.png)|
-|`Success`|![button-success](images/button-themecolor-success.png)|
-|`Warning`|![button-warning](images/button-themecolor-warning.png)|
-|`Error`|![button-error](images/button-themecolor-error.png)|
-|`Dark`|![button-dark](images/button-themecolor-dark.png)|
-|`Light`|![button-light](images/button-themecolor-light.png)|
-|`Inverse`|![button-inverse](images/button-themecolor-inverse.png)|
+|`Base` <br /> default value |`base`|
+|`Primary`|`primary`|
+|`Secondary`|`secondary`|
+|`Tertiary`|`tertiary`|
+|`Info`|`info`|
+|`Success`|`success`|
+|`Warning`|`warning`|
+|`Error`|`error`|
+|`Dark`|`dark`|
+|`Light`|`light`|
+|`Inverse`|`inverse`|
 
 
 >caption The built-in ThemeColors

From 68a7d41d27a69ec86417bc0643455dc9f2ad424b Mon Sep 17 00:00:00 2001
From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com>
Date: Tue, 18 Jan 2022 15:18:35 +0200
Subject: [PATCH 09/24] Update components/buttongroup/appearance.md

Co-authored-by: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
---
 components/buttongroup/appearance.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/buttongroup/appearance.md b/components/buttongroup/appearance.md
index bc057dea92..54aba0cd99 100644
--- a/components/buttongroup/appearance.md
+++ b/components/buttongroup/appearance.md
@@ -54,7 +54,7 @@ The `FillMode` controls how the TelerikButton is filled. You can set it to a mem
 
 ## Rounded
 
-The `Rounded` paramter applies the `border-radiums` CSS rule to the button to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Rounded` class:
+The `Rounded` parameter applies the `border-radius` CSS rule to the button to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Rounded` class:
 
 | Class members | Manual declarations |
 |------------|--------|

From 8f3dc83efb9b42140a84237c6148c33650804e03 Mon Sep 17 00:00:00 2001
From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com>
Date: Tue, 18 Jan 2022 15:18:41 +0200
Subject: [PATCH 10/24] Update components/button/appearance.md

Co-authored-by: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
---
 components/button/appearance.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/button/appearance.md b/components/button/appearance.md
index 66b435f8f4..5490159a79 100644
--- a/components/button/appearance.md
+++ b/components/button/appearance.md
@@ -55,7 +55,7 @@ The `FillMode` controls how the TelerikButton is filled. You can set it to a mem
 
 ## Rounded
 
-The `Rounded` parameter applies the `border-radiums` CSS rule to the button to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Rounded` class:
+The `Rounded` parameter applies the `border-radius` CSS rule to the button to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Rounded` class:
 
 | Class members | Manual declarations |
 |------------|--------|

From c8668c93c2ebc800e01140e9fb82d22e08e383b1 Mon Sep 17 00:00:00 2001
From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com>
Date: Tue, 18 Jan 2022 15:18:47 +0200
Subject: [PATCH 11/24] Update components/checkbox/appearance.md

Co-authored-by: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
---
 components/checkbox/appearance.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/checkbox/appearance.md b/components/checkbox/appearance.md
index 90c910d7d7..dd2eeb382c 100644
--- a/components/checkbox/appearance.md
+++ b/components/checkbox/appearance.md
@@ -53,7 +53,7 @@ You can increase or decrease the size of the CheckBox by setting the `Size` attr
 
 ## Rounded
 
-The `Rounded` attribute applies the `border-radiums` CSS rule to the checkbox to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.CheckBox.Rounded` class:
+The `Rounded` attribute applies the `border-radius` CSS rule to the checkbox to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.CheckBox.Rounded` class:
 
 | Class members | Manual declarations |
 |------------|--------|

From 0355c9fe372203f14c0bc33e73efde7c49c4c030 Mon Sep 17 00:00:00 2001
From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com>
Date: Tue, 18 Jan 2022 15:19:04 +0200
Subject: [PATCH 12/24] Update components/maskedtextbox/appearance.md

Co-authored-by: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
---
 components/maskedtextbox/appearance.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/maskedtextbox/appearance.md b/components/maskedtextbox/appearance.md
index afb563cba8..2c689660b7 100644
--- a/components/maskedtextbox/appearance.md
+++ b/components/maskedtextbox/appearance.md
@@ -54,7 +54,7 @@ You can increase or decrease the size of the MaskedTextBox by setting the `Size`
 
 ## Rounded
 
-The `Rounded` attribute applies the `border-radiums` CSS rule to the textbox to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.MaskedTextBox.Rounded` class:
+The `Rounded` attribute applies the `border-radius` CSS rule to the textbox to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.MaskedTextBox.Rounded` class:
 
 | Class members | Manual declarations |
 |------------|--------|

From 34a2a49285ab1800976007cbb860fcef9faeaee0 Mon Sep 17 00:00:00 2001
From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com>
Date: Tue, 18 Jan 2022 15:19:08 +0200
Subject: [PATCH 13/24] Update components/numerictextbox/appearance.md

Co-authored-by: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
---
 components/numerictextbox/appearance.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/numerictextbox/appearance.md b/components/numerictextbox/appearance.md
index 99cbd4de8c..8d6bf8a0c3 100644
--- a/components/numerictextbox/appearance.md
+++ b/components/numerictextbox/appearance.md
@@ -54,7 +54,7 @@ You can increase or decrease the size of the NumericTextBox by setting the `Size
 
 ## Rounded
 
-The `Rounded` attribute applies the `border-radiums` CSS rule to the textbox to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.NumericTextBox.Rounded` class:
+The `Rounded` attribute applies the `border-radius` CSS rule to the textbox to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.NumericTextBox.Rounded` class:
 
 | Class members | Manual declarations |
 |------------|--------|

From 183bac6893aada604c8dd72613701696e107ae49 Mon Sep 17 00:00:00 2001
From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com>
Date: Tue, 18 Jan 2022 15:20:56 +0200
Subject: [PATCH 14/24] Update components/switch/appearance.md

Co-authored-by: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
---
 components/switch/appearance.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/switch/appearance.md b/components/switch/appearance.md
index 476a5df43a..939c782581 100644
--- a/components/switch/appearance.md
+++ b/components/switch/appearance.md
@@ -54,7 +54,7 @@ You can increase or decrease the size of the Switch by setting the `Size` attrib
 
 ## ThumbRounded
 
-The `ThumbRounded` attribute applies the `border-radiums` CSS rule to the thumb of the switch to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Switch.ThumbRounded` class:
+The `ThumbRounded` attribute applies the `border-radius` CSS rule to the thumb of the switch to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Switch.ThumbRounded` class:
 
 | Class members | Manual declarations |
 |------------|--------|

From 2c337bcae7d02c578ead5430d5774dbfdc68e65c Mon Sep 17 00:00:00 2001
From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com>
Date: Tue, 18 Jan 2022 15:21:01 +0200
Subject: [PATCH 15/24] Update components/switch/appearance.md

Co-authored-by: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
---
 components/switch/appearance.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/switch/appearance.md b/components/switch/appearance.md
index 939c782581..a9ef7a0907 100644
--- a/components/switch/appearance.md
+++ b/components/switch/appearance.md
@@ -92,7 +92,7 @@ The `ThumbRounded` attribute applies the `border-radius` CSS rule to the thumb o
 
 ## TrackRounded
 
-The `TrackRounded` attribute applies the `border-radiums` CSS rule to the track of the switch to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Switch.TrackRounded` class:
+The `TrackRounded` attribute applies the `border-radius` CSS rule to the track of the switch to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Switch.TrackRounded` class:
 
 | Class members | Manual declarations |
 |------------|--------|

From 10bcb9fbc6db083743b2dcf14a6748fa8c3a4811 Mon Sep 17 00:00:00 2001
From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com>
Date: Tue, 18 Jan 2022 15:28:40 +0200
Subject: [PATCH 16/24] Update components/switch/appearance.md

Co-authored-by: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
---
 components/switch/appearance.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/switch/appearance.md b/components/switch/appearance.md
index a9ef7a0907..9bab7f106a 100644
--- a/components/switch/appearance.md
+++ b/components/switch/appearance.md
@@ -101,7 +101,7 @@ The `TrackRounded` attribute applies the `border-radius` CSS rule to the track o
 |`Large`|`lg`|
 |`Full`|`full`|
 
->caption The built-in values of the ThumbRounded attribute
+>caption The built-in values of the TrackRounded attribute
 
 ````CSHTML
 @* The built-in values of the TrackRounded attribute.  *@

From 058ae937558799ae1820656602a3c0ec80ab2902 Mon Sep 17 00:00:00 2001
From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com>
Date: Tue, 18 Jan 2022 15:28:46 +0200
Subject: [PATCH 17/24] Update components/textarea/appearance.md

Co-authored-by: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
---
 components/textarea/appearance.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/textarea/appearance.md b/components/textarea/appearance.md
index 2472d08211..6f006a6628 100644
--- a/components/textarea/appearance.md
+++ b/components/textarea/appearance.md
@@ -54,7 +54,7 @@ You can increase or decrease the size of the TextArea by setting the `Size` attr
 
 ## Rounded
 
-The `Rounded` attribute applies the `border-radiums` CSS rule to the TextArea to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.TextArea.Rounded` class:
+The `Rounded` attribute applies the `border-radius` CSS rule to the TextArea to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.TextArea.Rounded` class:
 
 | Class members | Manual declarations |
 |------------|--------|

From b8359fccc89b68bc17aa76f081ee6e24afe52c32 Mon Sep 17 00:00:00 2001
From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com>
Date: Tue, 18 Jan 2022 15:30:31 +0200
Subject: [PATCH 18/24] Update components/togglebutton/appearance.md

Co-authored-by: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
---
 components/togglebutton/appearance.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/togglebutton/appearance.md b/components/togglebutton/appearance.md
index 4b347bbcee..7e2294c558 100644
--- a/components/togglebutton/appearance.md
+++ b/components/togglebutton/appearance.md
@@ -55,7 +55,7 @@ The `FillMode` controls how the TelerikToggleButton is filled. You can set it to
 
 ## Rounded
 
-The `Rounded` paramter applies the `border-radiums` CSS rule to the button to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Rounded` class:
+The `Rounded` parameter applies the `border-radius` CSS rule to the button to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Rounded` class:
 
 | Class members | Manual declarations |
 |------------|--------|

From 946e9c22282adc353873e6859a540fa7c6275b25 Mon Sep 17 00:00:00 2001
From: Svetoslav Dimitrov <Svetoslav.Dimitrov@progress.com>
Date: Tue, 18 Jan 2022 15:37:52 +0200
Subject: [PATCH 19/24] chore(switch): add tip for usage of track and
 thumbrounded

---
 components/switch/appearance.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/switch/appearance.md b/components/switch/appearance.md
index 9bab7f106a..3129d0b23a 100644
--- a/components/switch/appearance.md
+++ b/components/switch/appearance.md
@@ -101,6 +101,8 @@ The `TrackRounded` attribute applies the `border-radius` CSS rule to the track o
 |`Large`|`lg`|
 |`Full`|`full`|
 
+>tip To achieve the best possible layout you should match the values passed to the `ThumbRounded` and `TrackRounded` attributes. 
+
 >caption The built-in values of the TrackRounded attribute
 
 ````CSHTML

From 398af2834b01f65020a863ed8f12a6ccb9bc6187 Mon Sep 17 00:00:00 2001
From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com>
Date: Tue, 18 Jan 2022 15:38:58 +0200
Subject: [PATCH 20/24] Update components/textbox/appearance.md

Co-authored-by: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
---
 components/textbox/appearance.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/textbox/appearance.md b/components/textbox/appearance.md
index 7cfe4bbfdc..026eb2b0d0 100644
--- a/components/textbox/appearance.md
+++ b/components/textbox/appearance.md
@@ -54,7 +54,7 @@ You can increase or decrease the size of the TextBox by setting the `Size` attri
 
 ## Rounded
 
-The `Rounded` attribute applies the `border-radiums` CSS rule to the textbox to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.TextBox.Rounded` class:
+The `Rounded` attribute applies the `border-radius` CSS rule to the textbox to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.TextBox.Rounded` class:
 
 | Class members | Manual declarations |
 |------------|--------|

From dc713028cfa046352976844bbf8dbba6d01d9311 Mon Sep 17 00:00:00 2001
From: Svetoslav Dimitrov <Svetoslav.Dimitrov@progress.com>
Date: Tue, 18 Jan 2022 15:41:26 +0200
Subject: [PATCH 21/24] chore(radiogroup): remove the screenshots from the
 table

---
 components/radiogroup/appearance.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/radiogroup/appearance.md b/components/radiogroup/appearance.md
index 3028d7e16e..88aeb6c6e3 100644
--- a/components/radiogroup/appearance.md
+++ b/components/radiogroup/appearance.md
@@ -19,11 +19,11 @@ You can control the appearance of the RadioButtonGroup button by setting the fol
 
 You can increase or decrease the size of the button by setting the `Size` parameter to a member of the `Telerik.Blazor.ThemeConstants.Button.Size` class:
 
-| Class members | Result |
+| Class members | Manual declarations |
 |---------------|--------|
-|`Small`|![button-small](images/radio-group-size-small.png)|
-|`Medium`|![button-medium](images/radio-group-size-medium.png)|
-|`Large` |![button-large](images/radio-group-size-large.png)|
+|`Small`|`sm`|
+|`Medium`|`md`|
+|`Large` |`lg`|
 
 >caption The built-in sizes
 

From eb54d56677c487dac03c404be212cfcc99242436 Mon Sep 17 00:00:00 2001
From: Svetoslav Dimitrov <Svetoslav.Dimitrov@progress.com>
Date: Tue, 18 Jan 2022 15:43:01 +0200
Subject: [PATCH 22/24] chore(maskedtextbox): place the article as last

---
 components/maskedtextbox/appearance.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/maskedtextbox/appearance.md b/components/maskedtextbox/appearance.md
index 2c689660b7..7c5ecc93cc 100644
--- a/components/maskedtextbox/appearance.md
+++ b/components/maskedtextbox/appearance.md
@@ -5,7 +5,7 @@ description: Appearance settings of the MaskedTextBox for Blazor.
 slug: maskedtextbox-appearance
 tags: telerik,blazor,button,maskedtextbox,mask,appearance
 published: True
-position: 35
+position: 55
 ---
 
 # Appearance Settings

From 8fca96c2283afb9cf859c4c1b779289352100fd6 Mon Sep 17 00:00:00 2001
From: Svetoslav Dimitrov <Svetoslav.Dimitrov@progress.com>
Date: Tue, 18 Jan 2022 15:49:04 +0200
Subject: [PATCH 23/24] chore(button): resolve conflict

---
 components/button/overview.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/components/button/overview.md b/components/button/overview.md
index 7af906264f..2428dbe0fc 100644
--- a/components/button/overview.md
+++ b/components/button/overview.md
@@ -87,6 +87,10 @@ Add a reference to the Button instance to use its methods (for example - `FocusA
 
 * [Using Button Icons]({%slug button-icons%})
 
+>caption The result from the code snippet above
+
+![use css to change the button size](images/button-size-change.png)
+
 ## See Also
 
   * [Live Demo: Button](https://demos.telerik.com/blazor-ui/button/index)

From 222707abf2cfaf72765f85aa436db4a9ecd0e1d3 Mon Sep 17 00:00:00 2001
From: Svetoslav Dimitrov <Svetoslav.Dimitrov@progress.com>
Date: Tue, 18 Jan 2022 16:49:15 +0200
Subject: [PATCH 24/24] chore(button): redo the styling article for the
 breaking changes

---
 components/button/styling.md | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/components/button/styling.md b/components/button/styling.md
index c05a34a971..7db9b625c6 100644
--- a/components/button/styling.md
+++ b/components/button/styling.md
@@ -18,13 +18,7 @@ There are a few ways to style the Button component:
 
 ## Primary Button
 
-Through the primary button styling, you can make the button use a strong color to attract attention. To do that, set its `Primary` property to true.
-
->caption Button with the Primary color scheme from the current theme
-
-````CSHTML
-<TelerikButton Primary="true">Primary</TelerikButton>
-````
+To set a Primary button you should set the `ThemeColor` parameter to `primary`. [Read the Appearance article for further information...]({%slug button-appearance%}).
 
 ## Button Class